@faststore/ui 2.0.2-alpha.0 → 2.0.4-alpha.0

package/src/components/atoms/Button/styles.scss

@@ -0,0 +1,316 @@
+[data-fs-button] {
+  // --------------------------------------------------------
+  // Design Tokens for Buttons
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-button-padding                               : calc(var(--fs-spacing-1) - (var(--fs-button-border-width) * 2)) var(--fs-spacing-3);
+  --fs-button-height                                : var(--fs-control-tap-size);
+  --fs-button-gap                                   : var(--fs-spacing-2);
+
+  --fs-button-shadow                                : var(--fs-shadow);
+  --fs-button-shadow-hover                          : var(--fs-button-shadow);
+
+  --fs-button-border-radius                         : var(--fs-border-radius);
+  --fs-button-border-width                          : var(--fs-border-width-thick);
+  --fs-button-border-color                          : transparent;
+
+  --fs-button-text-size                             : var(--fs-text-size-base);
+  --fs-button-text-weight                           : var(--fs-text-weight-bold);
+
+  --fs-button-transition-function                   : var(--fs-transition-function);
+  --fs-button-transition-property                   : var(--fs-transition-property);
+  --fs-button-transition-timing                     : var(--fs-transition-timing);
+
+  // Primary
+  --fs-button-primary-text-color                    : var(--fs-color-primary-text);
+  --fs-button-primary-text-color-hover              : var(--fs-button-primary-text-color);
+  --fs-button-primary-text-color-active             : var(--fs-button-primary-text-color);
+  --fs-button-primary-bkg-color                     : var(--fs-color-primary-bkg);
+  --fs-button-primary-bkg-color-hover               : var(--fs-color-primary-bkg-hover);
+  --fs-button-primary-bkg-color-active              : var(--fs-color-primary-bkg-active);
+  --fs-button-primary-border-color                  : transparent;
+  --fs-button-primary-border-color-hover            : var(--fs-button-primary-border-color);
+  --fs-button-primary-border-color-active           : var(--fs-button-primary-border-color);
+  --fs-button-primary-shadow-hover                  : var(--fs-button-shadow-hover);
+
+  --fs-button-primary-inverse-text-color            : var(--fs-button-primary-bkg-color);
+  --fs-button-primary-inverse-text-color-hover      : var(--fs-button-primary-bkg-color);
+  --fs-button-primary-inverse-text-color-active     : var(--fs-button-primary-bkg-color);
+  --fs-button-primary-inverse-bkg-color             : var(--fs-button-primary-text-color);
+  --fs-button-primary-inverse-bkg-color-hover       : var(--fs-color-primary-bkg-light);
+  --fs-button-primary-inverse-bkg-color-active      : var(--fs-color-primary-bkg-light-active);
+  --fs-button-primary-inverse-border-color          : var(--fs-button-primary-border-color);
+  --fs-button-primary-inverse-border-color-hover    : var(--fs-button-primary-border-color);
+  --fs-button-primary-inverse-border-color-active   : var(--fs-button-primary-border-color);
+  --fs-button-primary-inverse-shadow-hover          : var(--fs-button-shadow-hover);
+
+  // Secondary
+  --fs-button-secondary-text-color                  : var(--fs-color-secondary-text);
+  --fs-button-secondary-text-color-hover            : var(--fs-color-text-inverse);
+  --fs-button-secondary-text-color-active           : var(--fs-button-secondary-text-color-hover);
+  --fs-button-secondary-bkg-color                   : var(--fs-color-secondary-bkg);
+  --fs-button-secondary-bkg-color-hover             : var(--fs-color-secondary-bkg-hover);
+  --fs-button-secondary-bkg-color-active            : var(--fs-color-secondary-bkg-active);
+  --fs-button-secondary-border-color                : var(--fs-button-secondary-text-color);
+  --fs-button-secondary-border-color-hover          : var(--fs-button-secondary-bkg-color-hover);
+  --fs-button-secondary-border-color-active         : var(--fs-button-secondary-bkg-color-active);
+  --fs-button-secondary-shadow-hover                : var(--fs-button-shadow-hover);
+
+  --fs-button-secondary-inverse-text-color          : var(--fs-button-secondary-text-color-hover);
+  --fs-button-secondary-inverse-text-color-hover    : var(--fs-button-secondary-text-color);
+  --fs-button-secondary-inverse-text-color-active   : var(--fs-button-secondary-inverse-text-color-hover);
+  --fs-button-secondary-inverse-bkg-color           : var(--fs-button-secondary-bkg-color);
+  --fs-button-secondary-inverse-bkg-color-hover     : var(--fs-button-secondary-text-color-hover);
+  --fs-button-secondary-inverse-bkg-color-active    : var(--fs-color-secondary-bkg-light);
+  --fs-button-secondary-inverse-border-color        : var(--fs-button-secondary-inverse-text-color);
+  --fs-button-secondary-inverse-border-color-hover  : var(--fs-button-secondary-inverse-bkg-color-hover);
+  --fs-button-secondary-inverse-border-color-active : var(--fs-button-secondary-inverse-bkg-color-active);
+  --fs-button-secondary-inverse-shadow-hover        : var(--fs-button-shadow-hover);
+
+  // Tertiary
+  --fs-button-tertiary-text-color                   : var(--fs-color-tertiary-text);
+  --fs-button-tertiary-text-color-hover             : var(--fs-button-tertiary-text-color);
+  --fs-button-tertiary-text-color-active            : var(--fs-button-primary-bkg-color);
+  --fs-button-tertiary-bkg-color                    : var(--fs-color-tertiary-bkg);
+  --fs-button-tertiary-bkg-color-hover              : var(--fs-color-tertiary-bkg-hover);
+  --fs-button-tertiary-bkg-color-active             : var(--fs-color-tertiary-bkg-active);
+  --fs-button-tertiary-border-color                 : transparent;
+  --fs-button-tertiary-border-color-hover           : var(--fs-button-tertiary-border-color);
+  --fs-button-tertiary-border-color-active          : var(--fs-button-tertiary-border-color);
+  --fs-button-tertiary-shadow-hover                 : var(--fs-button-shadow-hover);
+
+  --fs-button-tertiary-inverse-text-color           : var(--fs-button-secondary-text-color-hover);
+  --fs-button-tertiary-inverse-text-color-hover     : var(--fs-button-secondary-text-color-hover);
+  --fs-button-tertiary-inverse-text-color-active    : var(--fs-button-secondary-text-color-hover);
+  --fs-button-tertiary-inverse-bkg-color            : var(--fs-button-secondary-inverse-bkg-color);
+  --fs-button-tertiary-inverse-bkg-color-hover      : var(--fs-button-primary-bkg-color-hover);
+  --fs-button-tertiary-inverse-bkg-color-active     : var(--fs-button-primary-bkg-color-active);
+  --fs-button-tertiary-inverse-border-color         : var(--fs-button-tertiary-border-color);
+  --fs-button-tertiary-inverse-border-color-hover   : var(--fs-button-tertiary-border-color);
+  --fs-button-tertiary-inverse-border-color-active  : var(--fs-button-tertiary-border-color);
+  --fs-button-tertiary-inverse-shadow-hover         : var(--fs-button-shadow-hover);
+
+  // Disabled
+  --fs-button-disabled-bkg-color                    : var(--fs-color-disabled-bkg);
+  --fs-button-disabled-text-color                   : var(--fs-color-disabled-text);
+
+  // Small
+  --fs-button-small-padding                         : var(--fs-spacing-0) var(--fs-spacing-1);
+  --fs-button-small-min-height                      : var(--fs-spacing-5);
+  --fs-button-small-gap                             : var(--fs-spacing-1);
+
+  // Icon
+  --fs-button-icon-padding                          : 0 var(--fs-spacing-1);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: inline-flex;
+  column-gap: var(--fs-button-gap);
+  align-items: center;
+  justify-content: center;
+  min-height: var(--fs-button-height);
+  padding: var(--fs-button-padding);
+  font-size: var(--fs-button-text-size);
+  font-weight: var(--fs-button-text-weight);
+  text-decoration: none;
+  cursor: pointer;
+  border: var(--fs-button-border-width) solid var(--fs-button-border-color);
+  border-radius: var(--fs-button-border-radius);
+  outline: none;
+  box-shadow: var(--fs-button-shadow);
+  transition: var(--fs-button-transition-property) var(--fs-button-transition-timing) var(--fs-button-transition-function);
+
+  [data-fs-icon] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-button-variant] {
+    @include focus-ring-visible;
+
+    &:disabled, &[data-button-disabled="true"] {
+      color: var(--fs-button-disabled-text-color);
+      cursor: not-allowed;
+      background-color: var(--fs-button-disabled-bkg-color);
+      border: 0;
+      box-shadow: none;
+      svg { color: var(--fs-color-neutral-5); }
+
+      &:hover {
+        color: var(--fs-button-disabled-text-color);
+        background-color: var(--fs-button-disabled-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-button-size="small"] {
+    --fs-control-tap-size: var(--fs-button-small-min-height);
+
+    column-gap: var(--fs-button-small-gap);
+    padding: var(--fs-button-small-padding);
+  }
+
+  &[data-fs-button-variant="primary"] {
+    color: var(--fs-button-primary-text-color);
+    background-color: var(--fs-button-primary-bkg-color);
+    border: var(--fs-button-border-width) solid var(--fs-button-primary-border-color);
+
+    &:hover {
+      color: var(--fs-button-primary-text-color-hover);
+      background-color: var(--fs-button-primary-bkg-color-hover);
+      border-color: var(--fs-button-primary-border-color-hover);
+      box-shadow: var(--fs-button-primary-shadow-hover);
+    }
+
+    &:focus, &:focus-visible {
+      color: var(--fs-button-primary-text-color-hover);
+      background-color: var(--fs-button-primary-bkg-color-hover);
+    }
+
+    &:active {
+      color: var(--fs-button-primary-text-color-active);
+      background-color: var(--fs-button-primary-bkg-color-active);
+      border-color: var(--fs-button-primary-border-color-active);
+    }
+
+    &[data-fs-button-inverse="true"] {
+      color: var(--fs-button-primary-inverse-text-color);
+      background-color: var(--fs-button-primary-inverse-bkg-color);
+      border: var(--fs-button-border-width) solid var(--fs-button-primary-inverse-border-color);
+
+      &:hover {
+        color: var(--fs-button-primary-inverse-text-color-hover);
+        background-color: var(--fs-button-primary-inverse-bkg-color-hover);
+        border-color: var(--fs-button-primary-inverse-border-color-hover);
+        box-shadow: var(--fs-button-primary-inverse-shadow-hover);
+      }
+
+      &:focus, &:focus-visible {
+        color: var(--fs-button-primary-inverse-text-color-hover);
+        background-color: var(--fs-button-primary-inverse-bkg-color-hover);
+      }
+
+      &:active {
+        color: var(--fs-button-primary-inverse-text-color-active);
+        background-color: var(--fs-button-primary-inverse-bkg-color-active);
+        border-color: var(--fs-button-primary-inverse-border-color-active);
+      }
+    }
+  }
+
+  &[data-fs-button-variant="secondary"] {
+    color: var(--fs-button-secondary-text-color);
+    background-color: var(--fs-button-secondary-bkg-color);
+    border: var(--fs-button-border-width) solid var(--fs-button-secondary-border-color);
+
+    &:hover {
+      color: var(--fs-button-secondary-text-color-hover);
+      background-color: var(--fs-button-secondary-bkg-color-hover);
+      border-color: var(--fs-button-secondary-border-color-hover);
+      box-shadow: var(--fs-button-secondary-shadow-hover);
+    }
+
+    &:focus, &:focus-visible {
+      color: var(--fs-button-secondary-text-color-hover);
+      background-color: var(--fs-button-secondary-bkg-color-hover);
+    }
+
+    &:active {
+      color: var(--fs-button-secondary-text-color-active);
+      background-color: var(--fs-button-secondary-bkg-color-active);
+      border-color: var(--fs-button-secondary-border-color-active);
+    }
+
+    &[data-fs-button-inverse="true"] {
+      color: var(--fs-button-secondary-inverse-text-color);
+      background-color: var(--fs-button-secondary-inverse-bkg-color);
+      border: var(--fs-button-border-width) solid var(--fs-button-secondary-inverse-border-color);
+
+      &:hover {
+        color: var(--fs-button-secondary-inverse-text-color-hover);
+        background-color: var(--fs-button-secondary-inverse-bkg-color-hover);
+        border-color: var(--fs-button-secondary-inverse-border-color-hover);
+        box-shadow: var(--fs-button-secondary-inverse-shadow-hover);
+      }
+
+      &:focus, &:focus-visible {
+        color: var(--fs-button-secondary-inverse-text-color-hover);
+        background-color: var(--fs-button-secondary-inverse-bkg-color-hover);
+      }
+
+      &:active {
+        color: var(--fs-button-secondary-inverse-text-color-active);
+        background-color: var(--fs-button-secondary-inverse-bkg-color-active);
+        border-color: var(--fs-button-secondary-inverse-border-color-active);
+      }
+    }
+  }
+
+  &[data-fs-button-variant="tertiary"] {
+    color: var(--fs-button-tertiary-text-color);
+    background-color: var(--fs-button-tertiary-bkg-color);
+    border: var(--fs-button-border-width) solid var(--fs-button-tertiary-border-color);
+
+    &:hover {
+      color: var(--fs-button-tertiary-text-color-hover);
+      background-color: var(--fs-button-tertiary-bkg-color-hover);
+      border-color: var(--fs-button-tertiary-border-color-hover);
+      box-shadow: var(--fs-button-tertiary-shadow-hover);
+    }
+
+    &:focus, &:focus-visible {
+      color: var(--fs-button-tertiary-text-color-hover);
+      background-color: var(--fs-button-tertiary-bkg-color-hover);
+    }
+
+    &:active {
+      color: var(--fs-button-tertiary-text-color-active);
+      background-color: var(--fs-button-tertiary-bkg-color-active);
+      border-color: var(--fs-button-tertiary-border-color-active);
+    }
+
+    &[data-fs-button-inverse="true"] {
+      color: var(--fs-button-tertiary-inverse-text-color);
+      background-color: var(--fs-button-tertiary-inverse-bkg-color);
+      border: var(--fs-button-border-width) solid var(--fs-button-tertiary-inverse-border-color);
+
+      &:hover {
+        color: var(--fs-button-tertiary-inverse-text-color-hover);
+        background-color: var(--fs-button-tertiary-inverse-bkg-color-hover);
+        border-color: var(--fs-button-tertiary-inverse-border-color-hover);
+        box-shadow: var(--fs-button-tertiary-inverse-shadow-hover);
+      }
+
+      &:focus, &:focus-visible {
+        color: var(--fs-button-tertiary-inverse-text-color-hover);
+        background-color: var(--fs-button-tertiary-inverse-bkg-color-hover);
+      }
+
+      &:active {
+        color: var(--fs-button-tertiary-inverse-text-color-active);
+        background-color: var(--fs-button-tertiary-inverse-bkg-color-active);
+        border-color: var(--fs-button-tertiary-inverse-border-color-active);
+      }
+    }
+  }
+
+  &[data-fs-icon-button="true"] {
+    position: relative;
+    column-gap: 0;
+
+    &[data-fs-button-variant] {
+      width: var(--fs-button-height);
+      height: var(--fs-button-height);
+      padding: var(--fs-button-icon-padding);
+      border-width: 0;
+    }
+  }
+}

package/src/components/atoms/Checkbox/styles.scss

@@ -0,0 +1,155 @@
+[data-fs-checkbox] {
+  // --------------------------------------------------------
+  // Design Tokens for Checkbox
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-checkbox-width                        : 1.25rem;
+  --fs-checkbox-height                       : var(--fs-checkbox-width);
+
+  --fs-checkbox-border-width                 : var(--fs-border-width);
+  --fs-checkbox-border-radius                : var(--fs-border-radius);
+  --fs-checkbox-border-color                 : var(--fs-border-color);
+  --fs-checkbox-border-color-hover           : var(--fs-border-color-active);
+
+  --fs-checkbox-transition                   : border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function);
+
+  --fs-checkbox-bkg-color-hover              : var(--fs-color-primary-bkg-light);
+  --fs-checkbox-shadow-hover                 : 0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active);
+
+  // Checked
+  --fs-checkbox-checked-bkg-color            : var(--fs-color-primary-bkg);
+  --fs-checkbox-checked-bkg-color-hover      : var(--fs-color-primary-bkg-hover);
+  --fs-checkbox-checked-border-color-hover   : var(--fs-border-color-hover);
+  --fs-checkbox-checked-shadow-hover         : 0 0 0 var(--fs-checkbox-border-width) var(--fs-checkbox-checked-border-color-hover);
+
+  // Disabled
+  --fs-checkbox-disabled-bkg-color           : var(--fs-color-disabled-bkg);
+  --fs-checkbox-disabled-border-width        : var(--fs-checkbox-border-width);
+  --fs-checkbox-disabled-border-color        : var(--fs-border-color-disabled);
+  --fs-checkbox-disabled-text-color          : var(--fs-color-disabled-text);
+
+  // Partial
+  --fs-checkbox-partial-bkg-color            : var(--fs-color-body-bkg);
+  --fs-checkbox-partial-bkg-color-hover      : var(--fs-color-primary-bkg-light);
+  --fs-checkbox-partial-border-width         : var(--fs-checkbox-border-width);
+  --fs-checkbox-partial-border-color         : var(--fs-color-primary-bkg);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fs-checkbox-width);
+  height: var(--fs-checkbox-height);
+  cursor: pointer;
+  border: var(--fs-checkbox-border-width) solid var(--fs-checkbox-border-color);
+  border-radius: var(--fs-checkbox-border-radius);
+  outline: none;
+  transition: var(--fs-checkbox-transition);
+  appearance: none;
+
+  @include input-focus-ring;
+
+  &::before {
+    position: absolute;
+    top: 0.188rem;
+    width: 0.375rem;
+    height: 0.625rem;
+    content: "";
+    border: var(--fs-border-width-thick) solid var(--fs-color-text-inverse);
+    border-top: 0;
+    border-left: 0;
+    border-radius: var(--fs-border-width);
+    opacity: 0;
+    transform: rotate(45deg);
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--fs-checkbox-bkg-color-hover);
+  }
+
+  &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+    border-color: var(--fs-checkbox-border-color-hover);
+    box-shadow: var(--fs-checkbox-shadow-hover);
+  }
+
+  &:checked {
+    background-color: var(--fs-checkbox-checked-bkg-color);
+    border: none;
+
+    &::before {
+      opacity: 1;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--fs-checkbox-checked-bkg-color-hover);
+    }
+
+    &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+      border-color: var(--fs-checkbox-checked-border-color-hover);
+      box-shadow: var(--fs-checkbox-checked-shadow-hover);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--fs-checkbox-disabled-bkg-color);
+    border: var(--fs-checkbox-disabled-border-width) solid var(--fs-checkbox-disabled-border-color);
+
+    &::before {
+      border-color: var(--fs-checkbox-disabled-border-color);
+    }
+
+    &:hover {
+      background-color: var(--fs-checkbox-disabled-bkg-color);
+      border: var(--fs-checkbox-disabled-border-width) solid var(--fs-checkbox-disabled-border-color);
+      box-shadow: none;
+
+      &::before {
+        border-color: var(--fs-checkbox-disabled-border-color);
+      }
+    }
+
+    + label {
+      color: var(--fs-checkbox-disabled-text-color);
+    }
+  }
+
+  &[data-fs-checkbox-partial="true"] {
+    background-color: var(--fs-checkbox-partial-bkg-color);
+    border: var(--fs-checkbox-partial-border-width) solid var(--fs-checkbox-partial-border-color);
+
+    &::before {
+      position: absolute;
+      top: auto;
+      width: 0.625rem;
+      height: 0;
+      content: "";
+      border-width: 0;
+      border-bottom: var(--fs-checkbox-border-width) solid var(--fs-color-primary-bkg);
+      border-radius: var(--fs-border-width);
+      opacity: 1;
+      transform: rotate(0deg);
+    }
+
+    &:checked {
+      &:hover:not(:disabled) {
+        background-color: var(--fs-checkbox-partial-bkg-color-hover);
+      }
+    }
+
+    &:hover {
+      background-color: var(--fs-checkbox-partial-bkg-color-hover);
+      box-shadow: var(--fs-checkbox-shadow-hover);
+    }
+
+    &:disabled {
+      background-color: var(--fs-checkbox-disabled-bkg-color);
+      border: var(--fs-checkbox-disabled-border-width) solid var(--fs-checkbox-disabled-border-color);
+    }
+  }
+}

package/src/{atoms → components/atoms}/Input/stories/Input.stories.tsx

@@ -1,7 +1,7 @@
 import type { Story } from '@storybook/react'
 import React from 'react'
 
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 import type { InputProps } from '../Input'
 import Component from '../Input'
 import mdx from './Input.mdx'

package/src/components/atoms/Label/Label.stories.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { Label } from '@faststore/components'
+
+<Meta
+  title="Atoms/Label"
+  component={Label}
+  argTypes={{
+    children: {
+      control: { type: 'text' },
+      defaultValue: 'Label',
+    },
+  }}
+/>
+
+export const Template = (args) => <Label {...args} />
+
+<header>
+
+# Label
+
+A label allows the user to understand a single element. It is often in the form of information, and can have an implied instruction. Usually used to describe the meaning of input fields.
+
+</header>
+
+## Overview
+
+<Canvas>
+  <Story
+    name="overview-label"
+    args={{
+      id: 'overview-label',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+```jsx
+import Label from '@faststore/ui'
+```
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      id: 'label-default',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+## CSS Selectors
+
+```css
+[data-fs-label] {
+}
+```

package/src/{atoms → components/atoms}/Link/Link.tsx

@@ -4,7 +4,7 @@ import type { FC, ElementType, ReactElement } from 'react'
 import type {
   PolymorphicRef,
   PolymorphicComponentPropsWithRef,
-} from '../../typings'
+} from '../../../typings'
 
 interface Props {
   /**

package/src/{atoms → components/atoms}/List/stories/List.stories.tsx

@@ -1,7 +1,7 @@
 import type { Story } from '@storybook/react'
 import React from 'react'
 
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 import type { ListProps } from '../List'
 import Component from '../List'
 import mdx from './List.mdx'

package/src/{atoms → components/atoms}/Overlay/stories/Overlay.stories.tsx

@@ -1,7 +1,7 @@
 import type { Story, Meta } from '@storybook/react'
 import React from 'react'
 
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 import type { Props as OverlayProps } from '../Overlay'
 import Component from '../Overlay'
 import mdx from './Overlay.mdx'

package/src/{atoms → components/atoms}/Popover/stories/Popover.stories.tsx

@@ -5,7 +5,7 @@ import Component from '../Popover'
 import Input from '../../Input'
 import type { PopoverProps } from '../Popover'
 import mdx from './Popover.mdx'
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 
 const PopoverTemplate: Story<PopoverProps> = ({ children }) => {
   const ref = useRef(null)

package/src/{atoms → components/atoms}/Price/stories/Price.stories.tsx

@@ -4,7 +4,7 @@ import type { Story } from '@storybook/react'
 import Component from '../Price'
 import type { PriceProps } from '../Price'
 import mdx from './Price.mdx'
-import type { ComponentArgTypes } from '../../../typings/utils'
+import type { ComponentArgTypes } from '../../../../typings/utils'
 
 const priceValue = 62.5