@faststore/core 3.99.0 → 4.0.0-dev.1

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

@@ -1,3 +1,5 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
 [data-fs-account-table] {
   display: grid;
   grid-template-columns: 1fr;
@@ -5,7 +7,7 @@
   border-spacing: 0;
   border-collapse: collapse;
 
-  @include media(">=notebook") {
+  @include utilities.media(">=notebook") {
     grid-template-columns: minmax(11.25rem, auto) 1fr;
   }
 
@@ -25,7 +27,7 @@
       > [data-fs-account-table-data] { border-bottom: none; }
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       display: contents;
     }
   }
@@ -41,7 +43,7 @@
     color: var(--fs-color-text-light);
     text-align: left;
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       min-height: var(--fs-spacing-10);
       padding-bottom: 0;
       border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
@@ -59,7 +61,7 @@
 
     [data-fs-link] { padding: 0; }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       min-height: var(--fs-spacing-10);
       border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
     }

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/section.module.scss

@@ -1,23 +1,25 @@
+@use "sass:meta";
+
 .section {
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Checkbox/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/Slider/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
-  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
-  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
-  @import "@faststore/ui/src/components/organisms/Filter/styles.scss";
-  @import "@faststore/ui/src/components/organisms/FilterSlider/styles.scss";
-  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
-  @import "./MyAccountFilterFacetDateRange/styles.scss";
-  @import "./MyAccountFilterFacetPendingApproval/styles.scss";
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Checkbox/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/Slider/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Toggle/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/DiscountBadge/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Accordion/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/InputField/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Modal/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/SelectField/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/Filter/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/FilterSlider/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
+  @include meta.load-css("./MyAccountFilterFacetDateRange/styles.scss");
+  @include meta.load-css("./MyAccountFilterFacetPendingApproval/styles.scss");
 
   [data-fs-badge] {
     display: none;

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrdersTable/MyAccountListOrdersTable.tsx

@@ -1,5 +1,5 @@
 import { Icon, IconButton } from '@faststore/ui'
-import type { ServerListOrdersQueryQuery } from '@generated/graphql'
+
 import { useState } from 'react'
 
 import MyAccountStatusBadge from 'src/components/account/components/MyAccountStatusBadge'
@@ -8,6 +8,8 @@ import { useSession } from 'src/sdk/session'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 import { ExpandButton } from './ExpandButton/ExpandButton'
 
+import type { ServerListOrdersQueryQuery } from '@generated/graphql'
+
 const MAX_ITEM_FIELDS = 5
 const MAX_ORDER_FIELDS = 5
 

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrdersTable/styles.scss

@@ -1,3 +1,5 @@
+@use "@faststore/ui/src/styles/base/utilities" as u;
+
 [data-fs-list-orders-table] {
   // --------------------------------------------------------
   // Design Tokens
@@ -71,7 +73,7 @@
 
     [data-fs-my-account-badge] { margin-right: calc(var(--fs-spacing-0) * -1); }
 
-    @include media(">=notebook") {
+    @include u.media(">=notebook") {
       display: table-cell;
     }
   }
@@ -121,7 +123,7 @@
     border-bottom: var(--fs-list-orders-table-row-border-bottom);
     transition: background-color 0.5s ease;
 
-    @include media("<notebook") {
+    @include u.media("<notebook") {
       display: flex;
       justify-content: space-between;
 
@@ -169,7 +171,7 @@
   --fs-list-orders-table-pagination-bkg-color   : var(--fs-body-bkg);
   --fs-list-orders-table-pagination-padding     : var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-0);
 
-  @include media("<notebook") {
+  @include u.media("<notebook") {
     position: sticky;
     bottom: 0;
     left: 0;

package/src/components/account/orders/MyAccountListOrders/styles.module.scss

@@ -1,32 +1,35 @@
+@use "sass:meta";
+@use "@faststore/ui/src/styles/base/utilities";
+
 .page {
-  @import "./MyAccountListOrdersTable/styles.scss";
-  @import "./MyAccountSelectedTags/styles.scss";
-  @import "../../components/MyAccountStatusBadge/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
-  @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+  @include meta.load-css("./MyAccountListOrdersTable/styles.scss");
+  @include meta.load-css("./MyAccountSelectedTags/styles.scss");
+  @include meta.load-css("../../components/MyAccountStatusBadge/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/SearchInputField/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/EmptyState/styles.scss");
 
   // --------------------------------------------------------
   // Design Tokens
   // --------------------------------------------------------
 
   // Default properties
-  --fs-list-orders-padding                            : var(--fs-spacing-5);
-  --fs-page-height                                    : 100%;
+  --fs-list-orders-padding: var(--fs-spacing-5);
+  --fs-page-height: 100%;
 
   // Search Filters
-  --fs-list-orders-filter-width                       : 55%;
-  --fs-list-orders-filter-margin-bottom               : var(--fs-spacing-3);
-  --fs-list-orders-filter-gap-mobile                  : var(--fs-grid-gap-0);
-  --fs-list-orders-filter-width-mobile                : 100%;
-  --fs-list-orders-filter-margin-bottom-mobile        : 0;
+  --fs-list-orders-filter-width: 55%;
+  --fs-list-orders-filter-margin-bottom: var(--fs-spacing-3);
+  --fs-list-orders-filter-gap-mobile: var(--fs-grid-gap-0);
+  --fs-list-orders-filter-width-mobile: 100%;
+  --fs-list-orders-filter-margin-bottom-mobile: 0;
 
-  --fs-list-orders-filter-input-border-color-hover    : var(--fs-input-border-color-hover);
-  --fs-list-orders-filter-input-shadow-hover          : var(--fs-input-box-shadow-hover);
+  --fs-list-orders-filter-input-border-color-hover: var(--fs-input-border-color-hover);
+  --fs-list-orders-filter-input-shadow-hover: var(--fs-input-box-shadow-hover);
 
-  --fs-list-orders-filter-button-border-radius        : var(--fs-border-radius-pill);
-  --fs-list-orders-filter-button-height               : 2.375rem;
-  --fs-list-orders-filter-button-margin-left          : 0.6rem;
+  --fs-list-orders-filter-button-border-radius: var(--fs-border-radius-pill);
+  --fs-list-orders-filter-button-height: 2.375rem;
+  --fs-list-orders-filter-button-margin-left: 0.6rem;
 
   height: var(--fs-page-height);
 
@@ -42,7 +45,7 @@
     justify-content: space-between;
     width: var(--fs-list-orders-filter-width);
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       flex-direction: column;
       gap: var(--fs-list-orders-filter-gap-mobile);
       align-items: flex-end;
@@ -52,10 +55,10 @@
 
     [data-fs-search-input-field] {
       [data-fs-search-input-field-input] {
-        @include media("<notebook") {
+        @include utilities.media("<notebook") {
           border: var(--fs-input-border-width) solid var(--fs-input-border-color);
 
-          @include input-focus-ring;
+          @include utilities.input-focus-ring;
 
           &:hover:not(:disabled):not(:focus-visible):not(:focus) {
             border-color: var(--fs-list-orders-filter-input-border-color-hover);
@@ -65,7 +68,7 @@
       }
 
       [data-fs-icon-button][data-fs-button-variant] {
-        @include media("<notebook") {
+        @include utilities.media("<notebook") {
           position: absolute;
           right: 0;
         }

package/src/components/account/orders/MyAccountOrderDetails/MyAccountBudgetsCard/styles.scss

@@ -1,3 +1,5 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
 [data-fs-order-budgets-card] {
   --fs-budgets-gap: var(--fs-spacing-3);
   --fs-budgets-padding-y: var(--fs-spacing-2);
@@ -39,12 +41,12 @@
       white-space: nowrap;
     }
 
-    @include media('>=tablet') {
+    @include utilities.media(">=tablet") {
       grid-template-columns: var(--fs-budgets-cols-desktop);
     }
 
     [data-fs-budgets-header-available] {
-      @include media('<tablet') {
+      @include utilities.media("<tablet") {
         display: none;
       }
     }
@@ -62,7 +64,7 @@
       border-bottom: 1px solid var(--fs-budgets-border-color);
 
       // Prevent long content from forcing the grid to overflow
-      > * {
+      >* {
         min-width: 0;
       }
 
@@ -70,13 +72,13 @@
         border-bottom: none;
       }
 
-      @include media('>=tablet') {
+      @include utilities.media(">=tablet") {
         grid-template-columns: var(--fs-budgets-cols-desktop);
       }
     }
 
     [data-fs-budgets-available] {
-      @include media('<tablet') {
+      @include utilities.media("<tablet") {
         display: none;
       }
     }

package/src/components/account/orders/MyAccountOrderDetails/MyAccountDeliveryOptionAccordion/styles.scss

@@ -1,3 +1,5 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
 [data-fs-delivery-option-accordion] {
   // --------------------------------------------------------
   // Design Tokens
@@ -31,7 +33,7 @@
     padding: var(--fs-spacing-4) var(--fs-spacing-4) var(--fs-spacing-5);
     border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
 
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       grid-template-columns: repeat(2, 1fr);
     }
 
@@ -88,7 +90,7 @@
         gap: var(--fs-spacing-0);
       }
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         display: grid;
         grid-template-columns: auto 1fr repeat(3, minmax(6.25rem, auto)); // min = 100px
         grid-auto-flow: column;
@@ -152,7 +154,7 @@
           font-weight: var(--fs-text-weight-medium);
           line-height: 1.5;
 
-          @include truncate-title(1);
+          @include utilities.truncate-title(1);
         }
 
         span {
@@ -160,7 +162,7 @@
           line-height: 1.5;
           color: var(--fs-color-text-light);
 
-          @include truncate-title(1);
+          @include utilities.truncate-title(1);
         }
       }
 
@@ -171,7 +173,7 @@
         flex-direction: column;
         align-items: flex-start;
 
-        @include media(">=notebook") {
+        @include utilities.media(">=notebook") {
           align-items: flex-end;
         }
 

package/src/components/account/orders/MyAccountOrderDetails/MyAccountMoreInformationCard/styles.scss

@@ -1,3 +1,5 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
 [data-fs-order-more-information-card] {
   // --------------------------------------------------------
   // Design Tokens for More Information Card
@@ -10,7 +12,7 @@
     grid-template-columns: repeat(3, 1fr);
     gap: 1.75rem;
 
-    @include media("<tablet") {
+    @include utilities.media("<tablet") {
       grid-template-columns: 1fr;
     }
 

package/src/components/account/orders/MyAccountOrderDetails/MyAccountOrderActionModal/styles.module.scss

@@ -1,10 +1,12 @@
+@use "sass:meta";
+
 @layer components {
   .orderActionsModal {
-    @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
-    @import "src/components/account/components/BottomSheet/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Loader/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");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Modal/styles.scss");
+    @include meta.load-css("src/components/account/components/BottomSheet/styles.scss");
 
     [data-fs-order-details-action-modal] {
       [data-fs-modal-header] {
@@ -34,7 +36,7 @@
           align-items: center;
           padding: 0;
 
-          > * {
+          >* {
             flex-grow: 1;
           }
         }

package/src/components/account/orders/MyAccountOrderDetails/MyAccountOrderActions/styles.scss

@@ -1,3 +1,5 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
 [data-fs-order-actions] {
   display: flex;
   flex-flow: row;
@@ -13,7 +15,7 @@
   }
 
   [data-fs-order-actions-item-reorder] {
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       display: none;
     }
   }

package/src/components/account/orders/MyAccountOrderDetails/MyAccountStatusCard/styles.scss

@@ -1,3 +1,5 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
 [data-fs-order-status-card] {
   // --------------------------------------------------------
   // Design Tokens for Order Status Card
@@ -48,7 +50,7 @@
   --fs-order-status-connector-desktop-spacing   : 0.625rem;
 
   [data-fs-card-body] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -62,7 +64,7 @@
     width: 100%;
     overflow-x: auto;
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
@@ -87,7 +89,7 @@
       border-radius: var(--fs-order-status-card-border-radius);
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       flex: 1;
       flex-direction: column;
       gap: var(--fs-spacing-2);
@@ -149,7 +151,7 @@
       flex-direction: column;
       gap: var(--fs-order-status-step-content-gap);
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         text-align: center;
       }
     }
@@ -172,7 +174,7 @@
       font-size: var(--fs-order-status-step-details-size);
       color: var(--fs-color-text-light);
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         flex-direction: column;
         gap: var(--fs-spacing-0);
       }
@@ -194,7 +196,7 @@
       left: calc(var(--fs-spacing-2) + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-step-icon-margin));
       background-color: var(--fs-order-status-connector-color);
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         top: calc(1rem + var(--fs-order-status-step-icon-margin) + var(--fs-order-status-step-icon-half-size));
         right: calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-card-gap));
         bottom: auto;

package/src/components/account/orders/MyAccountOrderDetails/section.module.scss

@@ -1,25 +1,28 @@
+@use "sass:meta";
+@use "@faststore/ui/src/styles/base/utilities";
+
 .page {
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Card/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
-  @import "../../components/MyAccountAccordion/styles.scss";
-  @import "../../components/MyAccountCard/styles.scss";
-  @import "../../components/MyAccountStatusBadge/styles.scss";
-  @import "./MyAccountSummaryCard/styles.scss";
-  @import "./MyAccountOrderedByCard/styles.scss";
-  @import "./MyAccountDeliveryCard/styles.scss";
-  @import "./MyAccountPaymentCard/styles.scss";
-  @import "./MyAccountDeliveryOptionAccordion/styles.scss";
-  @import "./MyAccountOrderActions/styles.scss";
-  @import "./MyAccountReorderButton/styles.scss";
-  @import "./MyAccountStatusCard/styles.scss";
-  @import "./MyAccountMoreInformationCard/styles.scss";
-  @import "./MyAccountBuyingPolicyAlert/styles.scss";
-  @import "./MyAccountBudgetsCard/styles.scss";
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Loader/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Card/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Alert/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Dropdown/styles.scss");
+  @include meta.load-css("../../components/MyAccountAccordion/styles.scss");
+  @include meta.load-css("../../components/MyAccountCard/styles.scss");
+  @include meta.load-css("../../components/MyAccountStatusBadge/styles.scss");
+  @include meta.load-css("./MyAccountSummaryCard/styles.scss");
+  @include meta.load-css("./MyAccountOrderedByCard/styles.scss");
+  @include meta.load-css("./MyAccountDeliveryCard/styles.scss");
+  @include meta.load-css("./MyAccountPaymentCard/styles.scss");
+  @include meta.load-css("./MyAccountDeliveryOptionAccordion/styles.scss");
+  @include meta.load-css("./MyAccountOrderActions/styles.scss");
+  @include meta.load-css("./MyAccountReorderButton/styles.scss");
+  @include meta.load-css("./MyAccountStatusCard/styles.scss");
+  @include meta.load-css("./MyAccountMoreInformationCard/styles.scss");
+  @include meta.load-css("./MyAccountBuyingPolicyAlert/styles.scss");
+  @include meta.load-css("./MyAccountBudgetsCard/styles.scss");
 
   // --------------------------------------------------------
   // Design Tokens
@@ -42,7 +45,7 @@
   // Structural Styles
   // --------------------------------------------------------
 
-  @include media(">=notebook") {
+  @include utilities.media(">=notebook") {
     --fs-order-details-padding: 0;
   }
 
@@ -54,13 +57,13 @@
     justify-content: space-between;
     padding: var(--fs-order-details-header-padding);
 
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       --fs-order-details-header-gap: var(--fs-spacing-2);
 
       align-items: center;
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       --fs-order-details-header-padding: var(--fs-spacing-6) 0;
     }
 
@@ -72,21 +75,11 @@
 
       [data-fs-order-details-header-back-button] {
         flex-shrink: 0;
-        margin-top:
-          calc(
-            var(--fs-spacing-2) * -1
-          ); // Align the back button with the title
-
-        margin-left:
-          calc(
-            var(--fs-spacing-2) * -1
-          ); // Align the back button with the content
-
-        @include media(">=notebook") {
-          margin-top:
-            calc(
-              var(--fs-spacing-1) * -1
-            ); // Align the back button with the title
+        margin-top: calc(var(--fs-spacing-2) * -1); // Align the back button with the title
+        margin-left: calc(var(--fs-spacing-2) * -1); // Align the back button with the content
+
+        @include utilities.media(">=notebook") {
+          margin-top: calc(var(--fs-spacing-1) * -1); // Align the back button with the title
         }
       }
 
@@ -96,7 +89,7 @@
         gap: var(--fs-spacing-1);
         align-items: flex-start;
 
-        @include media(">=tablet") {
+        @include utilities.media(">=tablet") {
           flex-flow: row wrap;
           align-items: center;
         }
@@ -107,7 +100,7 @@
         font-weight: var(--fs-order-details-header-weight);
         line-height: var(--fs-order-details-header-line-height);
 
-        @include truncate-title(2);
+        @include utilities.truncate-title(2);
       }
     }
 
@@ -118,7 +111,7 @@
       align-items: center;
 
       [data-fs-reorder-button] {
-        @include media("<tablet") {
+        @include utilities.media("<tablet") {
           display: none;
         }
       }
@@ -130,7 +123,7 @@
     flex-direction: column;
     gap: var(--fs-order-details-content-gap);
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
     }

package/src/components/account/profile/profile.module.scss

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

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

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 @layer components {
-  @import "./MyAccountLayout/styles.scss";
+  @include meta.load-css("./MyAccountLayout/styles.scss");
 }

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

@@ -1,11 +1,14 @@
+@use "sass:meta";
+@use "@faststore/ui/src/styles/base/utilities";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/atoms/Overlay/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/Icon/styles.scss";
-    @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
-    @import "../components/MyAccountTable/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Overlay/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/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
+    @include meta.load-css("../components/MyAccountTable/styles.scss");
 
     // --------------------------------------------------------
     // Design Tokens
@@ -141,10 +144,13 @@
       justify-content: center;
       padding: var(--fs-spacing-3) var(--fs-spacing-4);
       border-top: var(--fs-border-width) solid var(--fs-border-color-light);
-      [data-fs-button] { width: 100%; }
+
+      [data-fs-button] {
+        width: 100%;
+      }
     }
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       [data-fs-security-drawer-footer] {
         align-items: center;
         justify-content: flex-end;