@faststore/core 22.42.6

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

@@ -0,0 +1,85 @@
+import { Button as UIButton, Icon as UIIcon } from '@faststore/ui'
+import type { ReactNode, AriaAttributes } from 'react'
+import type { ButtonProps as UIButtonProps } from '@faststore/ui'
+
+import styles from './button.module.scss'
+
+export type Variant = 'primary' | 'secondary' | 'tertiary'
+export type Size = 'small' | 'regular'
+export type IconPosition = 'left' | 'right'
+
+export interface ButtonProps
+  extends Omit<UIButtonProps, 'aria-label' | 'disabled'> {
+  /**
+   * Specifies the component variant
+   */
+  variant?: Variant
+  /**
+   * Specifies the size variant
+   */
+  size?: Size
+  /**
+   * Defines use of inverted colors
+   */
+  inverse?: boolean
+  /**
+   * Icon component
+   */
+  icon?: ReactNode
+  /**
+   * Specifies where the icon should be positioned
+   */
+  iconPosition?: IconPosition
+  /**
+   * Specifies counter badge. Only for button icons
+   */
+  counter?: number
+  /**
+   * For accessibility purposes, defines an ARIA label to the element when no label is provided
+   */
+  'aria-label'?: AriaAttributes['aria-label']
+  /**
+   * Specifies that this button should be disabled
+   */
+  disabled?: boolean
+}
+
+function Button({
+  variant,
+  size = 'regular',
+  inverse,
+  icon,
+  iconPosition,
+  children,
+  counter = 0,
+  'aria-label': ariaLabel,
+  disabled,
+  ...props
+}: ButtonProps) {
+  const isButtonIcon = icon && !iconPosition && !children
+
+  return (
+    <UIButton
+      aria-label={ariaLabel}
+      className={styles.fsButton}
+      data-fs-button
+      data-fs-button-inverse={inverse}
+      data-fs-button-size={size}
+      data-fs-button-icon={isButtonIcon}
+      data-fs-button-variant={isButtonIcon ? 'tertiary' : variant}
+      disabled={disabled}
+      {...props}
+    >
+      {(isButtonIcon || iconPosition === 'left') && (
+        <>
+          {counter > 0 && <span data-fs-button-counter>{counter}</span>}
+          <UIIcon component={icon} />
+        </>
+      )}
+      {children}
+      {iconPosition === 'right' && <UIIcon component={icon} />}
+    </UIButton>
+  )
+}
+
+export default Button

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

@@ -0,0 +1,24 @@
+import Icon from 'src/components/ui/Icon'
+
+import Button from '../Button'
+import type { ButtonProps } from '../Button'
+import styles from '../button.module.scss'
+
+type Props = ButtonProps
+
+function ButtonBuy({ children, ...otherProps }: Props) {
+  return (
+    <Button
+      className={styles.fsButton}
+      data-fs-button
+      data-fs-button-buy
+      data-fs-button-variant="buy"
+      {...otherProps}
+    >
+      <Icon name="ShoppingCart" width={18} height={18} weight="bold" />
+      {children}
+    </Button>
+  )
+}
+
+export default ButtonBuy

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

@@ -0,0 +1 @@
+export { default } from './ButtonBuy'

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

@@ -0,0 +1,49 @@
+import { useRef } from 'react'
+import type { FocusEvent } from 'react'
+import { Icon as UIIcon } 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'>
+
+function ButtonLink({
+  variant = 'primary',
+  inverse,
+  icon,
+  iconPosition,
+  children,
+  disabled = false,
+  ...otherProps
+}: ButtonLinkProps) {
+  const linkRef = useRef<HTMLAnchorElement | null>(null)
+
+  return (
+    <Link
+      ref={linkRef}
+      className={styles.fsButton}
+      data-fs-button
+      data-fs-button-link
+      data-fs-button-variant={variant}
+      data-fs-button-inverse={inverse}
+      data-fs-button-disabled={disabled}
+      onFocus={(e: FocusEvent) => {
+        e.preventDefault()
+
+        if (disabled) {
+          linkRef.current?.blur()
+        }
+      }}
+      {...otherProps}
+    >
+      {iconPosition === 'left' && <UIIcon component={icon} />}
+      {children}
+      {iconPosition === 'right' && <UIIcon component={icon} />}
+    </Link>
+  )
+}
+
+export default ButtonLink

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

@@ -0,0 +1,22 @@
+import { ButtonLink } from 'src/components/ui/Button'
+import styles from 'src/components/ui/Button/button.module.scss'
+import Icon from 'src/components/ui/Icon'
+import { useSession } from 'src/sdk/session'
+
+const ButtonSignIn = () => {
+  const { person } = useSession()
+
+  return (
+    <ButtonLink
+      data-fs-button-signin-link
+      href={person?.id ? '/account' : '/login'}
+      className={`${styles.fsButton} text__title-mini`}
+      variant="tertiary"
+    >
+      <Icon name="User" width={18} height={18} weight="bold" />
+      <span>{person?.id ? 'My Account' : 'Sign In'}</span>
+    </ButtonLink>
+  )
+}
+
+export default ButtonSignIn

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

@@ -0,0 +1,18 @@
+import Icon from 'src/components/ui/Icon'
+import ButtonLink from 'src/components/ui/Button/ButtonLink'
+
+function ButtonSignInFallback() {
+  return (
+    <ButtonLink
+      data-fs-button-signin-link
+      href="/login"
+      className="text__title-mini"
+      variant="tertiary"
+    >
+      <Icon name="User" width={18} height={18} weight="bold" />
+      <span>{'Sign In'}</span>
+    </ButtonLink>
+  )
+}
+
+export default ButtonSignInFallback

package/src/components/ui/Button/ButtonLink/ButtonSignIn/ButtonSignInFallback/index.ts

@@ -0,0 +1 @@
+export { default } from './ButtonSignInFallback'

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

@@ -0,0 +1 @@
+export { default } from './ButtonSignIn'

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

@@ -0,0 +1 @@
+export { default } from './ButtonLink'

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

@@ -0,0 +1,392 @@
+@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; }
+
+    &[data-button-disabled="true"] { pointer-events: none; }
+  }
+}

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

@@ -0,0 +1,6 @@
+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'