@faststore/core 3.99.1 → 4.0.0-dev.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.99.1",
+  "version": "4.0.0-dev.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -8,6 +8,7 @@
     "directory": "packages/core"
   },
   "browserslist": "supports es6-module and not dead",
+  "packageManager": "pnpm@10.28.0",
   "exports": {
     ".": "./index.ts",
     "./api": "./api/index.ts",
@@ -15,55 +16,42 @@
     "./experimental/server": "./src/experimental/server/index.ts"
   },
   "scripts": {
-    "generate:schema": "tsx src/server/generator/generateGraphQLSchemaFile.ts",
-    "generate:codegen": "graphql-codegen",
-    "format:generated": "prettier --write \"@generated/**/*.{ts,js,tsx,jsx,json}\" --loglevel error",
-    "generate": "na run generate:schema && na run generate:codegen && na run format:generated",
-    "prebuild": "na run partytown && na run generate",
-    "build": "next build",
-    "predev": "na run partytown && na run generate",
-    "dev": "next dev",
-    "dev-only": "next dev",
-    "clean": "rm -r .next",
-    "serve": "next start",
     "test:e2e": "cypress open",
-    "test": "jest",
+    "test": "vitest run",
     "lhci": "lhci autorun",
-    "postinstall": "node postinstall.js && is-ci || echo Skipped postinstall step for @faststore/core",
-    "partytown": "partytown copylib ./public/~partytown"
+    "partytown": "partytown copylib ./public/~partytown",
+    "gen-types": "node ../cli/bin/run generate-types .",
+    "cache-graphql": "node ../cli/bin/run cache-graphql --config=./discovery.config.default.js --queries=./@generated/persisted-documents.json",
+    "generate": "pnpm run gen-types && pnpm run cache-graphql ",
+    "dev": "pnpm run generate && next dev"
   },
   "engines": {
-    "node": ">=18"
-  },
-  "volta": {
-    "node": "18.19.0",
-    "pnpm": "9.15.1",
-    "yarn": "1.22.22"
+    "node": ">=20"
   },
   "publishConfig": {
     "access": "public"
   },
   "sideEffects": false,
   "dependencies": {
-    "@antfu/ni": "^0.21.12",
+    "@antfu/ni": "catalog:",
     "@builder.io/partytown": "^0.6.1",
-    "@envelop/core": "^5.0.2",
-    "@envelop/graphql-jit": "^8.0.3",
-    "@envelop/parser-cache": "^6.0.2",
-    "@envelop/validation-cache": "^6.0.2",
-    "@faststore/api": "3.99.1",
-    "@faststore/graphql-utils": "^3.99.1",
-    "@faststore/lighthouse": "3.99.1",
-    "@faststore/sdk": "3.99.1",
-    "@faststore/ui": "3.99.1",
-    "@graphql-codegen/cli": "5.0.2",
+    "@envelop/core": "catalog:",
+    "@envelop/graphql-jit": "catalog:",
+    "@envelop/parser-cache": "catalog:",
+    "@envelop/validation-cache": "catalog:",
+    "@faststore/api": "4.0.0-dev.0",
+    "@faststore/diagnostics": "4.0.0-dev.0",
+    "@faststore/lighthouse": "4.0.0-dev.0",
+    "@faststore/sdk": "4.0.0-dev.0",
+    "@faststore/ui": "4.0.0-dev.0",
+    "@graphql-codegen/cli": "catalog:",
     "@graphql-codegen/client-preset": "4.2.6",
-    "@graphql-codegen/typescript": "4.0.7",
+    "@graphql-codegen/typescript": "catalog:",
     "@graphql-codegen/typescript-operations": "4.2.1",
     "@graphql-tools/load-files": "^7.0.0",
-    "@graphql-tools/merge": "^9.0.4",
-    "@graphql-tools/schema": "^10.0.3",
-    "@graphql-tools/utils": "^10.2.0",
+    "@graphql-tools/merge": "catalog:",
+    "@graphql-tools/schema": "catalog:",
+    "@graphql-tools/utils": "catalog:",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@lexical/code": "^0.34.0",
     "@lexical/headless": "^0.34.0",
@@ -72,59 +60,58 @@
     "@lexical/list": "^0.34.0",
     "@lexical/react": "^0.34.0",
     "@lexical/rich-text": "^0.34.0",
-    "@parcel/watcher": "^2.4.0",
-    "@types/react": "^18.2.42",
+    "@lhci/cli": "^0.15.1",
+    "@types/react": "catalog:",
     "@vtex/client-cms": "^0.2.16",
-    "@vtex/client-cp": "0.3.5",
+    "@vtex/client-cp": "0.5.1",
     "@vtex/prettier-config": "1.0.0",
     "autoprefixer": "^10.4.0",
-    "cookie": "^0.7.0",
+    "cookie": "catalog:",
     "css-loader": "^6.7.1",
     "deepmerge": "^4.3.1",
     "draftjs-to-html": "^0.9.1",
-    "fast-deep-equal": "^3.1.3",
+    "fast-deep-equal": "catalog:",
     "fs-extra": "^10.1.0",
-    "graphql": "^15.6.0",
     "idb-keyval": "^5.1.3",
-    "include-media": "^1.4.10",
     "isomorphic-unfetch": "^3.1.0",
     "lexical": "^0.34.0",
-    "next": "^13.5.9",
-    "next-logger": "^5.0.2",
+    "next": "catalog:",
     "next-seo": "^6.6.0",
-    "pino": "^9.7.0",
     "postcss": "^8.4.4",
     "prettier": "^2.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-intersection-observer": "^8.32.5",
-    "sass": "^1.44.0",
+    "react-intersection-observer": "catalog:",
+    "sass": "^1.97.0",
     "sass-loader": "^12.6.0",
     "sharp": "^0.32.6",
     "style-loader": "^3.3.1",
     "swr": "^2.2.5",
-    "tsx": "^4.6.2"
+    "use-sync-external-store": "^1.6.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
-    "@envelop/testing": "^6.0.0",
-    "@jest/globals": "29.7.0",
-    "@lhci/cli": "^0.9.0",
+    "@envelop/testing": "catalog:",
     "@testing-library/cypress": "^10.0.1",
+    "@testing-library/react": "catalog:",
     "@types/cookie": "^0.6.0",
-    "@types/cypress": "^1.1.3",
     "@types/fs-extra": "^9.0.13",
-    "@types/jest": "29.1.0",
+    "@types/node": "catalog:",
+    "@vitejs/plugin-react": "^5.1.2",
     "@vtex/prettier-config": "1.0.0",
     "axe-core": "^4.8.1",
     "cypress": "12.17.4",
     "cypress-axe": "^1.5.0",
     "cypress-wait-until": "^2.0.1",
     "dotenv": "^8.2.0",
+    "graphql": "catalog:",
     "is-ci": "^3.0.0",
-    "jest": "^29.7.0",
-    "ts-jest": "29.1.1",
-    "typescript": "5.3.2"
+    "jsdom": "^27.4.0",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "peerDependencies": {
+    "graphql": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
   },
-  "gitHead": "58c9a02f542a1b6ca57296d08361646f979ec469"
+  "gitHead": "03adf11ca106beab99ca8fcd9d3b0e3e93207a7a"
 }

package/public/icons.svg

@@ -69,12 +69,14 @@
 
   <symbol id="Ellipsis" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 18" ><circle opacity="0.6" cx="2" cy="11" r="2" fill="currentColor"/><circle opacity="0.6" cx="10" cy="11" r="2" fill="currentColor"/><circle opacity="0.6" cx="18" cy="11" r="2" fill="currentColor"/></symbol>
 
-  <symbol id="Envelop" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><path fill="none" d="M0 0h256v256H0z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m224 56-96 88-96-88"/><path d="M32 56h192v136a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V56h0Zm78.5 72-76 69.7m187 0-76-69.7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+  <symbol id="Envelope" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><path fill="none" d="M0 0h256v256H0z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m224 56-96 88-96-88"/><path d="M32 56h192v136a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V56h0Zm78.5 72-76 69.7m187 0-76-69.7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 
   <symbol id="FadersHorizontal" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="135.99902" y1="171.99304" x2="39.99902" y2="171.99317" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="215.99902" y1="171.99317" x2="167.99902" y2="171.99304" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="71.99902" y1="83.99304" x2="39.99902" y2="83.99246" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="215.99902" y1="83.99246" x2="103.99902" y2="83.99304" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="103.99902" y1="59.99304" x2="103.99902" y2="107.99304" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="167.99902" y1="195.99304" x2="167.99902" y2="147.99304" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></symbol>
 
   <symbol id="Gift" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><rect x="32" y="80" width="192" height="48" rx="7.99999" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M208,128v72a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="128" y1="80" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><path d="M173.25483,68.68629C161.94113,80,128,80,128,80s0-33.94113,11.31371-45.25483a24,24,0,0,1,33.94112,33.94112Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M82.74517,68.68629C94.05887,80,128,80,128,80s0-33.94113-11.31371-45.25483A24,24,0,0,0,82.74517,68.68629Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
 
+  <symbol id="Globe" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M128 24a104 104 0 1 0 104 104A104.12 104.12 0 0 0 128 24Zm88 104a87.61 87.61 0 0 1-3.33 24h-38.51a157.44 157.44 0 0 0 0-48h38.51a87.61 87.61 0 0 1 3.33 24Zm-114 40h52a115.11 115.11 0 0 1-26 45 115.27 115.27 0 0 1-26-45Zm-3.9-16a140.84 140.84 0 0 1 0-48h59.88a140.84 140.84 0 0 1 0 48ZM40 128a87.61 87.61 0 0 1 3.33-24h38.51a157.44 157.44 0 0 0 0 48H43.33A87.61 87.61 0 0 1 40 128Zm114-40h-52a115.11 115.11 0 0 1 26-45 115.27 115.27 0 0 1 26 45Zm52.33 0h-35.62a135.28 135.28 0 0 0-22.3-45.6A88.29 88.29 0 0 1 206.37 88Zm-98.74-45.6A135.28 135.28 0 0 0 85.29 88H49.63a88.29 88.29 0 0 1 57.96-45.6ZM49.63 168h35.66a135.28 135.28 0 0 0 22.3 45.6A88.29 88.29 0 0 1 49.63 168Zm98.78 45.6a135.28 135.28 0 0 0 22.3-45.6h35.66a88.29 88.29 0 0 1-57.96 45.6Z"/></symbol>
+
   <symbol id="Headphones" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M225.45581,136h-32a16,16,0,0,0-16,16v40a16,16,0,0,0,16,16h16a16,16,0,0,0,16-16V136A96.0001,96.0001,0,0,0,128.7279,40.0027,96.00009,96.00009,0,0,0,32,136v56a16,16,0,0,0,16,16H64a16,16,0,0,0,16-16V152a16,16,0,0,0-16-16H32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
 
   <symbol id="Heart" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none"></rect> <path d="M128,216S28,160,28,92A52,52,0,0,1,128,72h0A52,52,0,0,1,228,92C228,160,128,216,128,216Z"  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
@@ -120,6 +122,8 @@
   <symbol id="Truck" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M240,120H176V80h42.58374a8,8,0,0,1,7.42781,5.02887Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="16" y1="144" x2="176" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><circle cx="188" cy="192" r="24" fill="none" stroke="currentColor" stroke-miterlimit="10"></circle><circle cx="68" cy="192" r="24" fill="none" stroke="currentColor" stroke-miterlimit="10"></circle><line x1="164" y1="192" x2="92" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><path d="M44,192H24a8,8,0,0,1-8-8V72a8,8,0,0,1,8-8H176V171.21508" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M176,171.21508V120h64v64a8,8,0,0,1-8,8H212" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
   <symbol id="User" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="96" r="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></circle><path d="M30.989,215.99064a112.03731,112.03731,0,0,1,194.02311.002" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
 
+  <symbol id="Warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="currentColor" d="M0.833984 17.5001L10.0007 1.66675L19.1673 17.5001H0.833984ZM3.70898 15.8334H16.2923L10.0007 5.00008L3.70898 15.8334ZM10.0007 15.0001C10.2368 15.0001 10.4347 14.9202 10.5944 14.7605C10.7541 14.6008 10.834 14.4029 10.834 14.1667C10.834 13.9306 10.7541 13.7327 10.5944 13.573C10.4347 13.4133 10.2368 13.3334 10.0007 13.3334C9.76454 13.3334 9.56662 13.4133 9.4069 13.573C9.24718 13.7327 9.16732 13.9306 9.16732 14.1667C9.16732 14.4029 9.24718 14.6008 9.4069 14.7605C9.56662 14.9202 9.76454 15.0001 10.0007 15.0001ZM9.16732 12.5001H10.834V8.33341H9.16732V12.5001Z"/></symbol>
+
   <symbol id="X" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="200" y1="56" x2="56" y2="200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="200" y1="200" x2="56" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></symbol>
 
   <symbol id="XCircle" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-miterlimit="10"></circle><line x1="160" y1="96" x2="96" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="160" y1="160" x2="96" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></symbol>

package/scripts/i18n.js

@@ -0,0 +1,76 @@
+// @ts-check
+
+// Builds Next.js i18n domains configuration from locale settings
+
+/**
+ * Checks if a binding is a valid domain-based binding (no path)
+ * A binding is domain-based if it has no path (or only root path '/')
+ * @param {Object} binding - The binding object with url property
+ * @returns {string|null} The hostname if valid domain-based binding, or null if path-based
+ */
+function getValidSubdomainBinding(binding) {
+  if (!binding || !binding.url) {
+    return null
+  }
+
+  try {
+    const bindingUrl = new URL(binding.url)
+    const bindingHostname = bindingUrl.hostname
+    const bindingPathname = bindingUrl.pathname
+
+    if (bindingPathname && bindingPathname !== '/') {
+      // path-based binding
+      return null
+    }
+
+    return bindingHostname
+  } catch (error) {
+    console.warn(
+      `Invalid binding URL: ${binding.url}. Error: ${error?.message || String(error)}`
+    )
+    return null
+  }
+}
+
+/**
+ * Extracts subdomain-to-locale mappings from SDK bindings and builds Next.js i18n domains configuration
+ * @param {Object} [localesSettings={}] - The locales settings object
+ * @returns {Array<{domain: string, defaultLocale: string}>}
+ */
+function buildI18nDomains(localesSettings = {}) {
+  const domainMap = new Map()
+
+  for (const [localeCode, localeData] of Object.entries(
+    localesSettings.locales || {}
+  )) {
+    if (!localeData.bindings || !Array.isArray(localeData.bindings)) {
+      continue
+    }
+
+    for (const binding of localeData.bindings) {
+      const hostname = getValidSubdomainBinding(binding)
+
+      if (!hostname) {
+        continue
+      }
+
+      if (!domainMap.has(hostname)) {
+        domainMap.set(hostname, {
+          domain: hostname,
+          defaultLocale: localeCode,
+        })
+      } else {
+        const existingLocale = domainMap.get(hostname).defaultLocale
+        console.warn(
+          `Duplicate domain: ${hostname} already mapped to locale ${existingLocale}, ignoring duplicate from locale ${localeCode}.`
+        )
+      }
+    }
+  }
+
+  return Array.from(domainMap.values())
+}
+
+module.exports = {
+  buildI18nDomains,
+}

package/src/components/account/MyAccountDrawer/OrganizationDrawer/OrganizationDrawer.tsx

@@ -1,5 +1,6 @@
 import { SlideOver, useFadeEffect } from '@faststore/ui'
 
+import { getStoreURL } from 'src/sdk/localization/useLocalizationConfig'
 import { useSession } from 'src/sdk/session'
 import {
   expireCookieClient,
@@ -124,7 +125,7 @@ export const doLogout = async (_event?: unknown) => {
   } finally {
     setReloadAfterLogoutReturn()
     window.location.assign(
-      `${storeConfig.secureSubdomain}/api/vtexid/pub/logout?scope=${storeConfig.api.storeId}&returnUrl=${storeConfig.storeUrl}`
+      `${storeConfig.secureSubdomain}/api/vtexid/pub/logout?scope=${storeConfig.api.storeId}&returnUrl=${getStoreURL()}`
     )
   }
 }

package/src/components/account/MyAccountDrawer/OrganizationDrawer/section.module.scss

@@ -1,27 +1,30 @@
+@use "sass:meta";
+@use "@faststore/ui/src/styles/base/utilities";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Overlay/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/Link/styles.scss";
-    @import "@faststore/ui/src/components/atoms/List/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Price/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
-    @import "@faststore/ui/src/components/molecules/CartItem/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Gift/styles.scss";
-    @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
-    @import "@faststore/ui/src/components/molecules/OrderSummary/styles.scss";
-    @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
-    @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
-    @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
-    @import "@faststore/ui/src/components/organisms/CartSidebar/styles.scss";
-    @import "../ProfileSummary/profile-summary.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Overlay/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/Link/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/List/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Price/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Alert/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Modal/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/CartItem/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Gift/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/QuantitySelector/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/OrderSummary/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductPrice/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/EmptyState/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/CartSidebar/styles.scss");
+    @include meta.load-css("../ProfileSummary/profile-summary.scss");
 
     [data-fs-organization-drawer] {
-      --fs-organization-drawer-header-contract-color             : #cbe9ff;
-      --fs-organization-drawer-body-link-color                   : #f5f5f5;
+      --fs-organization-drawer-header-contract-color: #cbe9ff;
+      --fs-organization-drawer-body-link-color: #f5f5f5;
 
       display: flex;
       flex-direction: column;
@@ -93,9 +96,7 @@
           width: 100%;
 
           [data-fs-organization-drawer-body-link] {
-            padding:
-              var(--fs-spacing-2)
-              calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+            padding: var(--fs-spacing-2) calc(var(--fs-spacing-3) + var(--fs-spacing-0));
             font-size: var(--fs-text-size-1);
             font-weight: var(--fs-text-weight-semibold);
             line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
@@ -116,7 +117,7 @@
       [data-fs-organization-drawer-footer-wrapper] {
         padding: var(--fs-spacing-6) var(--fs-spacing-5);
 
-        @include media("<tablet") {
+        @include utilities.media("<tablet") {
           padding: var(--fs-spacing-2);
         }
       }

package/src/components/account/MyAccountDrawer/ProfileSummary/profile-summary.scss

@@ -1,3 +1,5 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
 [data-fs-profile-summary] {
   display: flex;
   flex-direction: column;
@@ -46,11 +48,11 @@
   min-width: min-content;
   padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
 
-  @include media("<notebook") {
+  @include utilities.media("<notebook") {
     justify-content: space-between;
   }
 
-  @include media("<tablet") {
+  @include utilities.media("<tablet") {
     padding: calc(var(--fs-spacing-0) + var(--fs-spacing-0));
   }
 
@@ -58,7 +60,7 @@
     display: flex;
     align-items: center;
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       width: 60%;
     }
   }
@@ -76,7 +78,7 @@
     background-color: #cbe9ff;
     border-radius: var(--fs-border-radius-pill);
 
-    @include media("<=tablet") {
+    @include utilities.media("<=tablet") {
       margin-right: var(--fs-spacing-1);
     }
   }
@@ -87,11 +89,11 @@
     gap: var(--fs-spacing-0);
     font-size: var(--fs-text-size-legend);
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       width: 75%;
     }
 
-    @include media("<=tablet") {
+    @include utilities.media("<=tablet") {
       font-size: var(--fs-text-size-tiny);
     }
 

package/src/components/account/MyAccountLayout/styles.scss

@@ -1,30 +1,34 @@
+@use "sass:meta";
+@use "@faststore/ui/src/styles/base/utilities";
+
 .layout {
-  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Link/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/molecules/LinkButton/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
-  @import "../MyAccountMenu/styles.scss";
-  @import "../components/MyAccountHeader/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/Link/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/molecules/LinkButton/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/SearchInputField/styles.scss");
+  @include meta.load-css("../MyAccountMenu/styles.scss");
+  @include meta.load-css("../components/MyAccountHeader/styles.scss");
 
   display: grid;
   grid-template-rows: auto 1fr;
   min-height: calc(100vh - 18rem);
 
-  @include media(">=notebook") {
+  @include utilities.media(">=notebook") {
     grid-template-rows: none;
-    grid-template-columns: max(300px) 1fr;
+    grid-template-columns: max(300px) 80%;
     gap: var(--fs-spacing-3);
     max-width: var(--fs-grid-breakpoint-desktop);
+    padding: 0 var(--fs-spacing-3) 0 var(--fs-spacing-6);
     margin: 0 auto;
   }
 
   [data-fs-account-layout-content] {
     padding: 0 var(--fs-spacing-4);
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       padding: 0 var(--fs-spacing-8);
     }
   }

package/src/components/account/MyAccountMenu/styles.scss

@@ -1,3 +1,5 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
 .menu {
   display: flex;
   flex-direction: column;
@@ -6,6 +8,12 @@
   overflow: scroll;
   scrollbar-width: none;
   -ms-overflow-style: none;
+
+  @include utilities.media(">=notebook") {
+    padding: 0;
+    padding-top: var(--fs-spacing-6);
+    overflow: visible;
+  }
 }
 
 .account {
@@ -31,7 +39,9 @@
 }
 
 .switchButton {
-  display: none; /* While it's use case is not implemented */
+  display: none;
+
+  /* While it's use case is not implemented */
   max-width: fit-content;
   height: 1.5rem;
 }
@@ -39,6 +49,11 @@
 .nav {
   display: flex;
   gap: var(--fs-spacing-1);
+
+  @include utilities.media(">=notebook") {
+    flex-direction: column;
+    gap: var(--fs-spacing-0);
+  }
 }
 
 .navItem {
@@ -67,7 +82,7 @@
     background-color: var(--fs-color-tertiary-bkg-disabled);
   }
 
-  > a,
+  >a,
   a:link,
   a:visited {
     display: inline-block;
@@ -86,30 +101,14 @@
       box-shadow: none;
     }
   }
-}
 
-@include media(">=notebook") {
-  grid-template-rows: none;
-  grid-template-columns: max(300px) 80%;
-  gap: var(--fs-spacing-3);
-  padding: 0 var(--fs-spacing-3) 0 var(--fs-spacing-6);
-
-  .menu {
-    padding: 0;
-    padding-top: var(--fs-spacing-6);
-    overflow: visible;
-  }
-
-  .nav {
-    flex-direction: column;
-    gap: var(--fs-spacing-0);
-  }
-
-  .navItem {
+  @include utilities.media(">=notebook") {
     margin-left: -16px;
   }
+}
 
-  .avatar {
+.avatar {
+  @include utilities.media(">=notebook") {
     display: flex;
     align-items: center;
     justify-content: center;

package/src/components/account/MyAccountUserDetails/styles.module.scss

@@ -1,7 +1,9 @@
+@use "sass:meta";
+
 @layer components {
   .section {
-    @import "../components/MyAccountTag/styles.scss";
-    @import "../components/MyAccountTable/styles.scss";
+    @include meta.load-css("../components/MyAccountTag/styles.scss");
+    @include meta.load-css("../components/MyAccountTable/styles.scss");
 
     // --------------------------------------------------------
     // Design Tokens

package/src/components/account/components/MyAccountAccordion/styles.scss

@@ -1,3 +1,5 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
 [data-fs-my-account-accordion] {
   // --------------------------------------------------------
   // Design Tokens
@@ -38,7 +40,7 @@
         width: 100%;
         padding: 0;
 
-        @include media(">=notebook") {
+        @include utilities.media(">=notebook") {
           display: flex;
           flex: 1;
           align-items: center;
@@ -64,7 +66,7 @@
         color: var(--fs-color-text);
         text-align: start;
 
-        @include truncate-title(1);
+        @include utilities.truncate-title(1);
       }
     }
 

package/src/components/account/components/MyAccountHeader/styles.scss

@@ -1,7 +1,9 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
 [data-fs-account-header] {
   padding: var(--fs-spacing-3) 0;
 
-  @include media(">=notebook") {
+  @include utilities.media(">=notebook") {
     padding: var(--fs-spacing-6) 0;
   }