@faststore/core 3.99.1 → 4.0.0-dev.4

package/src/components/sections/Breadcrumb/Breadcrumb.tsx

@@ -17,15 +17,19 @@ import styles from './section.module.scss'
 interface BreadcrumbSectionProps {
   icon: string
   alt: string
+  fallbackLabel: string
 }
 
-function BreadcrumbSection({ ...otherProps }: BreadcrumbSectionProps) {
+function BreadcrumbSection({
+  fallbackLabel,
+  ...otherProps
+}: BreadcrumbSectionProps) {
   const { Breadcrumb } = useOverrideComponents<'Breadcrumb'>()
 
   const context = usePage<PDPContext | PLPContext>()
   const title = isPLP(context)
     ? context?.data?.collection?.seo?.title
-    : 'All Products'
+    : fallbackLabel
   const fallback = [{ item: '/', name: title, position: 1 }]
 
   const breadcrumbList = isPDP(context)

package/src/components/sections/Breadcrumb/section.module.scss

@@ -1,9 +1,11 @@
+@use "sass:meta";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-    @import "@faststore/ui/src/components/atoms/List/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/List/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Breadcrumb/styles.scss");
   }
 }

package/src/components/sections/EmptyState/section.module.scss

@@ -1,7 +1,9 @@
+@use "sass:meta";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
-    @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Loader/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/EmptyState/styles.scss");
   }
 }

package/src/components/sections/Footer/Footer.tsx

@@ -53,7 +53,6 @@ const Footer = ({
     paymentMethods,
   },
 }: FooterProps) => {
-  const homeLabel = 'Go to Home'
   return (
     <Section
       className={`section ${styles.section} section-footer layout__section`}
@@ -68,10 +67,7 @@ const Footer = ({
           />
         </UIFooterNavigation>
         <UIFooterInfo>
-          <Link
-            href={logoLink ? logoLink.url : '/'}
-            title={logoLink ? logoLink.title : homeLabel}
-          >
+          <Link href={logoLink?.url} title={logoLink?.title}>
             <Logo alt={logoAlt} src={logoSrc} />
           </Link>
 

package/src/components/sections/Footer/section.module.scss

@@ -1,14 +1,16 @@
+@use "sass:meta";
+
 @layer components {
   .section {
     margin-bottom: 0;
 
-    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-    @import "@faststore/ui/src/components/atoms/List/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
-    @import "@faststore/ui/src/components/organisms/PaymentMethods/styles.scss";
-    @import "@faststore/ui/src/components/organisms/Incentives/styles.scss";
-    @import "@faststore/ui/src/components/organisms/Footer/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/List/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Logo/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Accordion/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/PaymentMethods/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/Incentives/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/Footer/styles.scss");
   }
 }

package/src/components/sections/Hero/Hero.tsx

@@ -12,6 +12,7 @@ import Section from '../Section'
 import styles from './section.module.scss'
 import { HeroDefaultComponents } from './DefaultComponents'
 import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
+import { useLink } from '../../../sdk/ui/useLink'
 
 export type HeroProps = {
   title: UIHeroHeaderProps['title']
@@ -44,6 +45,7 @@ const Hero = ({
     HeroImage,
     HeroHeader,
   } = useOverrideComponents<'Hero'>()
+  const { resolveLink } = useLink()
 
   return (
     <Section className={`${styles.section} section-hero`}>
@@ -66,7 +68,7 @@ const Hero = ({
         <HeroHeader.Component
           title={title}
           subtitle={subtitle}
-          link={link?.url}
+          link={resolveLink(link?.url)}
           linkText={link?.text}
           linkTargetBlank={link?.linkTargetBlank}
           icon={icon}

package/src/components/sections/Hero/section.module.scss

@@ -1,8 +1,10 @@
+@use "sass:meta";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/organisms/Hero/styles.scss";
-    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/organisms/Hero/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/LinkButton/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
   }
 }

package/src/components/sections/Incentives/section.module.scss

@@ -1,9 +1,11 @@
+@use "sass:meta";
+
 @layer components {
   .section {
     margin-top: 0;
 
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/atoms/List/styles.scss";
-    @import "@faststore/ui/src/components/organisms/Incentives/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/List/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/Incentives/styles.scss");
   }
 }

package/src/components/sections/Navbar/Navbar.tsx

@@ -23,8 +23,16 @@ export interface NavbarProps {
   searchInput: {
     placeholder?: string
     sort: string
+    submitButtonAriaLabel?: string
+    searchHistoryTitle?: string
+    searchTopTitle?: string
+    collapseSearchAriaLabel?: string
     quickOrderSettings?: {
       quickOrder: boolean
+      invalidQuantityToastLabels?: {
+        title?: string
+        message?: string
+      }
       attachmentButton?: {
         icon: {
           icon: string
@@ -45,6 +53,7 @@ export interface NavbarProps {
           }
         }
       }
+      outOfStockLabel?: string
       drawer?: {
         defaultTitle?: string
         columns?: {
@@ -106,6 +115,7 @@ export interface NavbarProps {
         >
       }
     }
+    loadingLabel?: string
   }
   signInButton: {
     icon: {
@@ -128,6 +138,19 @@ export interface NavbarProps {
       }
       label: string
     }
+    localizationButton?: {
+      shouldDisplayLocalizationButton: boolean
+      icon: {
+        icon: string
+      }
+    }
+    localizationSelector: {
+      title?: string
+      languageLabel?: string
+      currencyLabel?: string
+      description?: string
+      saveLabel?: string
+    }
     pageLinks: PageLinks[]
     menu: {
       icon: {
@@ -155,6 +178,17 @@ function NavbarSection({
       icon: { icon: regionIcon },
       enabled: shouldDisplayRegion,
     },
+    localizationButton: {
+      icon: { icon: localizationIcon },
+      shouldDisplayLocalizationButton,
+    } = { icon: { icon: '' }, shouldDisplayLocalizationButton: false },
+    localizationSelector: {
+      title: localizationTitle,
+      languageLabel: localizationLanguageLabel,
+      currencyLabel: localizationCurrencyLabel,
+      description: localizationDescription,
+      saveLabel: localizationSaveLabel,
+    } = {},
   },
 }: NavbarProps) {
   return (
@@ -172,6 +206,17 @@ function NavbarSection({
           label: regionLabel,
           shouldDisplayRegion,
         }}
+        localizationButton={{
+          icon: localizationIcon,
+          shouldDisplayLocalizationButton,
+        }}
+        localizationSelector={{
+          title: localizationTitle,
+          languageLabel: localizationLanguageLabel,
+          currencyLabel: localizationCurrencyLabel,
+          description: localizationDescription,
+          saveLabel: localizationSaveLabel,
+        }}
       />
     </Section>
   )

package/src/components/sections/Navbar/section.module.scss

@@ -1,46 +1,47 @@
+@use "@faststore/ui/src/styles/base/utilities";
+@use "sass:meta";
+
 @layer components {
   .section {
     position: sticky;
     top: 0;
     z-index: var(--fs-z-index-high);
 
-    @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Input/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-    @import "@faststore/ui/src/components/atoms/List/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Price/styles.scss";
-    @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
-    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-    @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
-    @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Popover/styles.scss";
-    @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
-    @import "@faststore/ui/src/components/organisms/RegionPopover/styles.scss";
-    @import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";
-    @import "@faststore/ui/src/components/molecules/SearchDropdown/styles.scss";
-    @import "@faststore/ui/src/components/molecules/FileUploadCard/styles.scss";
-    @import "@faststore/ui/src/components/molecules/FileUploadStatus/styles.scss";
-    @import "@faststore/ui/src/components/molecules/SearchHistory/styles.scss";
-    @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
-    @import "@faststore/ui/src/components/molecules/SearchProducts/styles.scss";
-    @import "@faststore/ui/src/components/molecules/SearchTop/styles.scss";
-    @import "@faststore/ui/src/components/molecules/SkuSelector/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Table/styles.scss";
-    @import "@faststore/ui/src/components/organisms/SearchInput/styles.scss";
-    @import "@faststore/ui/src/components/organisms/Navbar/styles.scss";
-    @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
-    @import "@faststore/ui/src/components/organisms/SKUMatrix/styles.scss";
-    @import "@faststore/ui/src/components/organisms/QuickOrderDrawer/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Loader/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Input/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/List/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Logo/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Overlay/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Price/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/InputField/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/LinkButton/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/QuantitySelector/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/NavbarLinks/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Popover/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductPrice/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/RegionPopover/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/SearchDropdown/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/SearchHistory/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/SearchInputField/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/SearchProducts/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/SearchTop/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/SkuSelector/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Table/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/SearchInput/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/Navbar/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/SKUMatrix/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/QuickOrderDrawer/styles.scss");
 
     // Sets Navbar height on desktop to avoid CLS issue - Cumulative Layout Shift
     --fs-navbar-height-desktop: 4.5rem;
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       height: var(--fs-navbar-height-desktop);
 
       // Sets margin to avoid overlapping the section below

package/src/components/sections/Newsletter/section.module.scss

@@ -1,12 +1,14 @@
+@use "sass:meta";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Input/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-    @import "@faststore/ui/src/components/atoms/List/styles.scss";
-    @import "@faststore/ui/src/components/atoms/RichText/styles.scss";
-    @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
-    @import "@faststore/ui/src/components/organisms/Newsletter/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Input/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/List/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/RichText/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/InputField/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/Newsletter/styles.scss");
   }
 }

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -6,6 +6,7 @@ import { gql } from '@generated'
 import type { AnalyticsItem } from 'src/sdk/analytics/types'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useSession } from 'src/sdk/session'
+import { getGlobalSettings } from 'src/utils/globalSettings'
 
 import Section from '../Section'
 
@@ -35,6 +36,7 @@ export interface ProductDetailsProps {
       showDiscountBadge: boolean
     }
   }
+  loadingLabel: string
   buyButton: {
     title: string
     icon: {
@@ -55,12 +57,17 @@ export interface ProductDetailsProps {
     title: string
     displayDescription: boolean
     initiallyExpanded: 'first' | 'all' | 'none'
+    accordionAriaLabel?: string
   }
   notAvailableButton: {
     title: string
   }
   quantitySelector: {
     useUnitMultiplier?: boolean
+    invalidQuantityToastLabels?: {
+      title?: string
+      message?: string
+    }
   }
   taxesConfiguration?: {
     usePriceWithTaxes?: boolean
@@ -88,6 +95,7 @@ function ProductDetails({
     refNumber: showRefNumber,
     discountBadge: { showDiscountBadge, size: discountBadgeSize },
   },
+  loadingLabel,
   buyButton: { icon: buyButtonIcon, title: buyButtonTitle },
   shippingSimulator: {
     title: shippingSimulatorTitle,
@@ -99,6 +107,7 @@ function ProductDetails({
     title: productDescriptionDetailsTitle,
     initiallyExpanded: productDescriptionInitiallyExpanded,
     displayDescription: shouldDisplayProductDescription,
+    accordionAriaLabel: productDescriptionAccordionAriaLabel,
   },
   skuMatrix,
   notAvailableButton: { title: notAvailableButtonTitle },
@@ -121,6 +130,10 @@ function ProductDetails({
   const context = usePDP()
   const { product, isValidating } = context?.data
   const [quantity, setQuantity] = useState(1)
+  const cmsData = getGlobalSettings()
+  const {
+    inputField: { errorMessage: inputFieldErrorMessage = '' } = {},
+  } = cmsData?.regionalization ?? {}
   if (!product) {
     throw new Error('NotFound')
   }
@@ -232,7 +245,7 @@ function ProductDetails({
                 data-fs-product-details-settings
                 data-fs-product-details-section
               >
-                <p>Loading...</p>
+                <p>{loadingLabel}</p>
               </section>
             </section>
           ) : (
@@ -250,6 +263,7 @@ function ProductDetails({
                   useUnitMultiplier={
                     quantitySelector?.useUnitMultiplier ?? false
                   }
+                  loadingLabel={loadingLabel}
                   {...ProductDetailsSettings.props}
                   // Dynamic props shouldn't be overridable
                   // This decision can be reviewed later if needed
@@ -258,6 +272,9 @@ function ProductDetails({
                   product={product}
                   isValidating={isValidating}
                   taxesConfiguration={taxesConfiguration}
+                  invalidQuantityToastLabels={
+                    quantitySelector?.invalidQuantityToastLabels
+                  }
                 />
 
                 {skuMatrix?.shouldDisplaySKUMatrix &&
@@ -276,6 +293,9 @@ function ProductDetails({
                           formatter={useFormattedPrice}
                           columns={skuMatrix.columns}
                           overlayProps={{ className: styles.section }}
+                          invalidQuantityToastLabels={
+                            quantitySelector?.invalidQuantityToastLabels
+                          }
                         />
                       </SKUMatrix.Component>
                     </>
@@ -313,6 +333,7 @@ function ProductDetails({
                     shippingSimulatorOptionsTableTitle ??
                     ShippingSimulation.props.optionsLabel
                   }
+                  invalidPostalCodeErrorMessage={inputFieldErrorMessage}
                 />
               )}
             </section>
@@ -324,6 +345,7 @@ function ProductDetails({
                 productDescriptionInitiallyExpanded ??
                 ProductDescription.props.initiallyExpanded
               }
+              accordionAriaLabel={productDescriptionAccordionAriaLabel}
               descriptionData={[
                 { content: description, title: productDescriptionDetailsTitle },
               ]}

package/src/components/sections/ProductDetails/section.module.scss

@@ -1,40 +1,42 @@
+@use "sass:meta";
+
 @layer components {
   .section {
     // Taxes label
-    --fs-product-details-taxes-label-color      : var(--fs-color-info-text);
-    --fs-product-details-taxes-text-size        : var(--fs-text-size-tiny);
-    --fs-product-details-taxes-text-weight      : var(--fs-text-weight-regular);
+    --fs-product-details-taxes-label-color: var(--fs-color-info-text);
+    --fs-product-details-taxes-text-size: var(--fs-text-size-tiny);
+    --fs-product-details-taxes-text-weight: var(--fs-text-weight-regular);
 
     // Separator colors
-    --fs-product-details-separator-color        : var(--fs-color-neutral-2);
-    --fs-product-details-separator-color-text   : var(--fs-color-text-light);
+    --fs-product-details-separator-color: var(--fs-color-neutral-2);
+    --fs-product-details-separator-color-text: var(--fs-color-text-light);
 
     margin-top: 0;
 
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-    @import "@faststore/ui/src/components/atoms/List/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Input/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Price/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
-    @import "@faststore/ui/src/components/molecules/BuyButton/styles.scss";
-    @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
-    @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
-    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Rating/styles.scss";
-    @import "@faststore/ui/src/components/molecules/ProductTitle/styles.scss";
-    @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
-    @import "@faststore/ui/src/components/molecules/SkuSelector/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Table/styles.scss";
-    @import "@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss";
-    @import "@faststore/ui/src/components/organisms/ImageGallery/styles.scss";
-    @import "@faststore/ui/src/components/organisms/ProductDetails/styles.scss";
-    @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
-    @import "@faststore/ui/src/components/organisms/SKUMatrix/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/List/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Input/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Price/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Accordion/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Breadcrumb/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/BuyButton/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/DiscountBadge/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Dropdown/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/InputField/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/LinkButton/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Rating/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductTitle/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/QuantitySelector/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/SkuSelector/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Table/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/ImageGallery/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/ProductDetails/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/SKUMatrix/styles.scss");
 
     [data-fs-product-details-taxes-label] {
       font-size: var(--fs-product-details-taxes-text-size);
@@ -67,7 +69,7 @@
     }
 
     [data-fs-sku-matrix] {
-      > [data-fs-button] {
+      >[data-fs-button] {
         width: 100%;
       }
     }

package/src/components/sections/ProductGallery/EmptyGallery.tsx

@@ -1,8 +1,5 @@
-import {
-  Icon as UIIcon,
-  LinkButton as UILinkButton,
-  EmptyState as UIEmptyState,
-} from '@faststore/ui'
+import { Icon as UIIcon, EmptyState as UIEmptyState } from '@faststore/ui'
+import LinkButton from 'src/components/ui/LinkButton'
 
 export interface EmptyGalleryProps {
   title?: string
@@ -22,17 +19,17 @@ function EmptyGallery({ title, firstButton, secondButton }: EmptyGalleryProps) {
   return (
     <UIEmptyState
       variant="rounded"
-      title={title ?? 'Nothing matches with your search'}
+      title={title}
       titleIcon={
         <UIIcon name="CircleWavyWarning" width={56} height={56} weight="thin" />
       }
     >
-      <UILinkButton
-        href={firstButton?.url ?? '/office'}
+      <LinkButton
+        href={firstButton?.url}
         variant="secondary"
         icon={
           <UIIcon
-            name={firstButton?.icon ?? 'CircleWavyWarning'}
+            name={firstButton?.icon}
             width={18}
             height={18}
             weight="bold"
@@ -40,14 +37,14 @@ function EmptyGallery({ title, firstButton, secondButton }: EmptyGalleryProps) {
         }
         iconPosition="left"
       >
-        {firstButton?.label ?? 'Browse Offers'}
-      </UILinkButton>
-      <UILinkButton
-        href={secondButton?.url ?? '/technology'}
+        {firstButton?.label}
+      </LinkButton>
+      <LinkButton
+        href={secondButton?.url}
         variant="secondary"
         icon={
           <UIIcon
-            name={secondButton?.icon ?? 'RocketLaunch'}
+            name={secondButton?.icon}
             width={18}
             height={18}
             weight="bold"
@@ -55,8 +52,8 @@ function EmptyGallery({ title, firstButton, secondButton }: EmptyGalleryProps) {
         }
         iconPosition="left"
       >
-        {secondButton?.label ?? 'Just Arrived'}
-      </UILinkButton>
+        {secondButton?.label}
+      </LinkButton>
     </UIEmptyState>
   )
 }