@faststore/core 0.3.6 → 0.3.7

package/src/components/ui/Button/Button.stories.mdx

@@ -1,6 +1,7 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
 
-import Button, { ButtonBuy, ButtonLink } from '.'
+import { ButtonLink } from '.'
+import { Button, BuyButton } from '@faststore/ui'
 import Icon from 'src/components/ui/Icon'
 
 import {
@@ -149,48 +150,6 @@ export const Usage = ({ inverse, ...args }) => {
   <TokenRow token="--fs-button-icon-padding" value="0 var(--fs-spacing-1)" />
 </TokenTable>
 
-### Counter
-
-<Canvas>
-  <Story
-    name="Counter"
-    args={{
-      icon: <Icon name="User" width="18" height="18" weight="bold" />,
-      counter: 3,
-    }}
-  >
-    {TemplateIcon.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-button-counter-size" value="var(--fs-spacing-3)" />
-  <TokenRow token="--fs-button-counter-padding" value="var(--fs-spacing-0)" />
-  <TokenRow
-    token="--fs-button-counter-text-size"
-    value="var(--fs-text-size-0)"
-  />
-  <TokenRow
-    token="--fs-button-counter-text-color"
-    value="var(--fs-color-text-inverse)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-counter-bkg-color"
-    value="var(--fs-color-link)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-button-counter-border-radius"
-    value="var(--fs-border-radius-pill)"
-  />
-  <TokenRow
-    token="--fs-button-counter-border-color"
-    value="var(--fs-color-body-bkg)"
-    isColor
-  />
-</TokenTable>
-
 ---
 
 ## Hierarchy <a id="hierarchy" />
@@ -646,7 +605,7 @@ export const Usage = ({ inverse, ...args }) => {
     title="Button Buy"
     description="A button with the intent of directly sending the user to the checkout/cart step."
   >
-    <ButtonBuy>Button Buy</ButtonBuy>
+    <BuyButton>Button Buy</BuyButton>
   </SectionItem>
   <SectionItem
     title="Button Link"

package/src/components/ui/Button/ButtonLink/ButtonLink.tsx

@@ -1,11 +1,11 @@
 import { useRef } from 'react'
 import type { FocusEvent } from 'react'
 import { Icon as UIIcon } from '@faststore/ui'
+import type { ButtonProps } from '@faststore/ui'
 
 import Link from 'src/components/ui/Link'
 import type { LinkProps } from 'src/components/ui/Link'
 
-import type { ButtonProps } from '../Button'
 import styles from '../button.module.scss'
 
 type ButtonLinkProps = ButtonProps & Omit<LinkProps, 'variant'>
@@ -27,6 +27,7 @@ function ButtonLink({
       className={styles.fsButton}
       data-fs-button
       data-fs-button-link
+      data-fs-link={null}
       data-fs-button-variant={variant}
       data-fs-button-inverse={inverse}
       data-fs-button-disabled={disabled}

package/src/components/ui/Button/button.module.scss

@@ -1,389 +1,8 @@
-@import "src/styles/scaffold";
-
 .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);
-
-  // Buy (Main CTA)
-  --fs-button-buy-text-color                        : var(--fs-color-action-text);
-  --fs-button-buy-text-color-hover                  : var(--fs-color-action-text);
-  --fs-button-buy-text-color-active                 : var(--fs-color-action-text);
-  --fs-button-buy-bkg-color                         : var(--fs-color-action-bkg);
-  --fs-button-buy-bkg-color-hover                   : var(--fs-color-action-bkg-hover);
-  --fs-button-buy-bkg-color-active                  : var(--fs-color-action-bkg-active);
-  --fs-button-buy-border-color                      : var(--fs-button-buy-bkg-color);
-  --fs-button-buy-border-color-hover                : var(--fs-button-buy-bkg-color-hover);
-  --fs-button-buy-border-color-active               : var(--fs-button-buy-bkg-color-active);
-  --fs-button-buy-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);
-
-  // Icon
-  --fs-button-icon-padding                          : 0 var(--fs-spacing-1);
-
-  // Counter
-  --fs-button-counter-size                          : var(--fs-spacing-3);
-  --fs-button-counter-padding                       : var(--fs-spacing-0);
-  --fs-button-counter-text-size                     : var(--fs-text-size-0);
-  --fs-button-counter-text-color                    : var(--fs-color-text-inverse);
-  --fs-button-counter-bkg-color                     : var(--fs-color-link);
-  --fs-button-counter-border-radius                 : var(--fs-border-radius-pill);
-  --fs-button-counter-border-color                  : var(--fs-color-body-bkg);
-
-  // 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);
-
-  // --------------------------------------------------------
-  // 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-button-variant="buy"] {
-    color: var(--fs-button-buy-text-color);
-    background-color: var(--fs-button-buy-bkg-color);
-    border: var(--fs-button-border-width) solid var(--fs-button-buy-border-color);
-
-    &:hover {
-      color: var(--fs-button-buy-text-color-hover);
-      background-color: var(--fs-button-buy-bkg-color-hover);
-      border-color: var(--fs-button-buy-border-color-hover);
-      box-shadow: var(--fs-button-buy-shadow-hover);
-    }
-
-    &:focus, &:focus-visible {
-      color: var(--fs-button-buy-text-color-hover);
-      background-color: var(--fs-button-buy-bkg-color-hover);
-    }
-
-    &:active {
-      color: var(--fs-button-buy-text-color-hover);
-      background-color: var(--fs-button-buy-bkg-color-active);
-      border-color: var(--fs-button-buy-border-color-active);
-      outline: none;
-    }
-  }
-
-  &[data-fs-button-icon="true"] {
-    position: relative;
-
-    [data-fs-button-counter] {
-      position: absolute;
-      top: .375rem;
-      left: 1.625rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-width: var(--fs-button-counter-size);
-      height: var(--fs-button-counter-size);
-      padding: var(--fs-button-counter-padding);
-      font-size: var(--fs-button-counter-text-size);
-      font-weight: var(--fs-text-weight-bold);
-      color: var(--fs-button-counter-text-color);
-      background: var(--fs-button-counter-bkg-color);
-      border-radius: var(--fs-button-counter-border-radius);
-      box-shadow: 0 0 0 var(--fs-button-border-width) var(--fs-button-counter-border-color);
-      transition: var(--fs-button-transition-property) var(--fs-button-transition-timing) var(--fs-button-transition-function);
-    }
-
-    &:hover, &:active, &:focus, &:focus-visible {
-      [data-fs-button-counter] { box-shadow: 0 0 0 var(--fs-button-border-width) var(--fs-button-tertiary-bkg-color-hover); }
-    }
-
-    &[data-fs-button-variant] {
-      width: var(--fs-button-height);
-      height: var(--fs-button-height);
-      padding: var(--fs-button-icon-padding);
-      border-width: 0;
-    }
-  }
-
   &[data-fs-button-link] {
     &:hover { text-decoration: none; }
 

package/src/components/ui/Button/index.ts

@@ -1,6 +1,3 @@
-export { default } from './Button'
-export type { ButtonProps } from './Button'
-export { default as ButtonBuy } from './ButtonBuy'
 export { default as ButtonLink } from './ButtonLink'
 export { default as ButtonSignIn } from './ButtonLink/ButtonSignIn'
 export { default as ButtonSignInFallback } from './ButtonLink/ButtonSignIn/ButtonSignInFallback'

package/src/components/ui/Gift/Gift.tsx

@@ -2,13 +2,13 @@ import {
   Gift as UIGift,
   GiftImage as UIGiftImage,
   GiftContent as UIGiftContent,
+  Badge as UIBadge,
 } from '@faststore/ui'
 import type { GiftProps } from '@faststore/ui'
 
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import Icon from 'src/components/ui/Icon'
 import Price from 'src/components/ui/Price'
-import { Badge } from 'src/components/ui/Badge'
 import { Image } from 'src/components/ui/Image'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 
@@ -66,7 +66,7 @@ function Gift({
             classes="text__legend"
             SRText="Original price:"
           />
-          <Badge>{badgeLabel}</Badge>
+          <UIBadge>{badgeLabel}</UIBadge>
         </span>
       </UIGiftContent>
     </UIGift>

package/src/components/ui/ImageGallery/ImageGallerySelector.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react'
-import { Button, IconButton } from '@faststore/ui'
+import { Button as UIButton, IconButton as UIIconButton } from '@faststore/ui'
 import { useInView } from 'react-intersection-observer'
 
 import Icon from 'src/components/ui/Icon'
@@ -61,7 +61,7 @@ function ImageGallerySelector({ images, onSelect, currentImageIdx }: Props) {
       aria-label="Product images"
     >
       {elementHasScroll && !firstImageInView && (
-        <IconButton
+        <UIIconButton
           data-fs-image-gallery-selector-control-button
           aria-label="backward slide image selector"
           icon={<Icon name="ArrowLeft" width={24} height={24} />}
@@ -78,7 +78,7 @@ function ImageGallerySelector({ images, onSelect, currentImageIdx }: Props) {
               : null
 
           return (
-            <Button
+            <UIButton
               key={idx}
               aria-label={`${image.alternateName} - Image ${idx + 1} of ${
                 images.length
@@ -97,12 +97,12 @@ function ImageGallerySelector({ images, onSelect, currentImageIdx }: Props) {
                 width={72}
                 height={72}
               />
-            </Button>
+            </UIButton>
           )
         })}
       </div>
       {elementHasScroll && !lastImageInView && (
-        <IconButton
+        <UIIconButton
           data-fs-image-gallery-selector-control-button
           aria-label="forward slide image selector"
           icon={<Icon name="ArrowLeft" width={24} height={24} />}

package/src/components/ui/ImageGallery/image-gallery-selector.module.scss

@@ -86,9 +86,15 @@
   [data-fs-image-gallery-selector-control-button] {
     position: absolute;
     z-index: 1;
+    color: var(--fs-color-text-display);
     background: linear-gradient(90deg, var(--fs-color-body-bkg) 55%, transparent);
     background-color: transparent;
     border: none;
+    border-radius: var(--fs-border-radius-circle);
+
+    &:hover {
+      color: var(--fs-color-text-display);
+    }
 
     span {
       display: flex;

package/src/components/ui/Link/Link.tsx

@@ -1,29 +1,16 @@
 import { forwardRef, useMemo } from 'react'
-import type { Ref, ElementType, AnchorHTMLAttributes } from 'react'
+import type { Ref, AnchorHTMLAttributes } from 'react'
 import NextLink from 'next/link'
 import type { LinkProps as FrameworkLinkProps } from 'next/link'
 import { Link as UILink } from '@faststore/ui'
-import type { LinkProps as UILinkProps } from '@faststore/ui'
+import type { LinkProps as UILinkProps, LinkElementType } from '@faststore/ui'
 
-import styles from './link.module.scss'
-
-type Variant = 'default' | 'display' | 'footer' | 'inline'
-
-export type LinkProps<T extends ElementType = 'a'> = UILinkProps<T> &
+export type LinkProps<T extends LinkElementType = 'a'> = UILinkProps<T> &
   FrameworkLinkProps &
-  AnchorHTMLAttributes<HTMLAnchorElement> & {
-    /**
-     * Specifies the component variant.
-     */
-    variant?: Variant
-    /**
-     * Defines use of inverted color.
-     */
-    inverse?: boolean
-  }
+  AnchorHTMLAttributes<HTMLAnchorElement>
 
 const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link<
-  T extends ElementType = 'a'
+  T extends LinkElementType = 'a'
 >(
   { href, inverse, children, variant = 'default', ...otherProps }: LinkProps<T>,
   ref: Ref<HTMLAnchorElement> | undefined
@@ -35,18 +22,18 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link<
 
   if (isInternalLink) {
     return (
-      <NextLink passHref href={href}>
-        <UILink
-          ref={ref}
-          data-fs-link
-          data-fs-link-variant={variant}
-          data-fs-link-inverse={inverse}
-          className={styles.fsLink}
-          {...otherProps}
-        >
-          {children}
-        </UILink>
-      </NextLink>
+      <UILink
+        as={NextLink}
+        ref={ref}
+        variant={variant}
+        inverse={inverse}
+        passHref
+        href={href}
+        legacyBehavior={false}
+        {...otherProps}
+      >
+        <>{children}</>
+      </UILink>
     )
   }
 
@@ -54,10 +41,8 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link<
     <UILink
       ref={ref}
       href={href}
-      data-fs-link
-      data-fs-link-variant={variant}
-      data-fs-link-inverse={inverse}
-      className={styles.fsLink}
+      variant={variant}
+      inverse={inverse}
       {...otherProps}
     >
       {children}

package/src/components/ui/PriceRange/PriceRange.tsx

@@ -1,5 +1,8 @@
 import { useState, useRef } from 'react'
-import { PriceRange as UIPriceRange } from '@faststore/ui'
+import {
+  PriceRange as UIPriceRange,
+  InputField as UIInputField,
+} from '@faststore/ui'
 import type { PriceRangeProps } from '@faststore/ui'
 
 import {
@@ -8,7 +11,6 @@ import {
 } from 'src/sdk/product/useFormattedPrice'
 
 import styles from './price-range.module.scss'
-import InputText from '../InputText'
 
 type Props = Omit<
   PriceRangeProps,
@@ -102,7 +104,7 @@ function PriceRange({ min, max, onEnd, step = 10, ...otherProps }: Props) {
         {...otherProps}
       />
       <div data-fs-price-range-inputs>
-        <InputText
+        <UIInputField
           id="price-range-min"
           step={step}
           label="Min"
@@ -116,7 +118,7 @@ function PriceRange({ min, max, onEnd, step = 10, ...otherProps }: Props) {
           onChange={(e) => onChangeInputMin(e.target.value)}
           onBlur={() => !inputMinError && onEnd?.(priceRange)}
         />
-        <InputText
+        <UIInputField
           id="price-range-max"
           label="Max"
           step={step}