@vtex/faststore-plugin-buyer-portal 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.0.2] - 2026-06-03
+
+### Fixed
+
+- Migrate all SCSS media queries to `@include u.media()` via `@use "~@faststore/ui/src/styles/base/utilities" as u`, replacing native `@media` blocks
+- Remove `@faststore/ui` component imports (Toggle, Breadcrumb, Button, Checkbox, Radio, Select, SlideOver) that caused a Sass duplicate-module conflict with `utilities.scss` when using `yarn link` in development
+- Restore logout button blue color explicitly in `ProfileSummary` after removing `Button/styles.scss` import
+- Restore correct padding on "Add Location" and "Add recipient" buttons after removing `Button/styles.scss` import
+
 ## [2.0.1] - 2026-06-02
 
 ### Changed
@@ -675,7 +684,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/2.0.1...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v2.0.2...HEAD
 [1.3.55]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.54...v1.3.55
 [1.3.54]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.53...v1.3.54
 [1.3.53]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.52...v1.3.53
@@ -762,4 +771,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.87]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.86...v1.3.87
 [1.3.86]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.86
 
+[2.0.2]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v2.0.1...v2.0.2
 [2.0.1]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {
@@ -26,8 +26,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",
-    "@faststore/core": "^3.41.5",
-    "@faststore/ui": "^3.41.5",
+    "@faststore/core": "4.2.0",
+    "@faststore/ui": "^4.2.0",
     "@release-it/bumper": "^4.0.0",
     "@release-it/keep-a-changelog": "^3.0.0",
     "@types/react": "^18.2.42",

package/src/features/accounting-fields/components/AccountingFieldForm/accounting-field-form.scss

@@ -1,6 +1,4 @@
 [data-fs-bp-accounting-field-form] {
-  @import "@faststore/ui/src/components/atoms/Radio/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
   @import "../../../shared/components/InputText/input-text.scss";
   
   [data-fs-bp-accounting-field-form-label] {

package/src/features/accounting-fields/components/SelectedAccountingValue/selected-accounting-value.scss

@@ -1,5 +1,4 @@
 [data-bp-selected-accounting-value] {
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
 
   width: 22.5rem;
   height: var(--fs-bp-spacing-11);

package/src/features/accounting-fields/layouts/AccountingFieldLayout/accounting-field-layout.scss

@@ -3,7 +3,6 @@
 @import "../../components/RemoveValueFromUnitDrawer/remove-value-from-unit-drawer.scss";
 
 [data-fs-bp-accounting-field-container] {
-	@import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "../../../shared/components/Table/table.scss";
   @import "../../../shared/components/IconBookmarked/icon-bookmarked.scss";
   @import "../../../shared/components/InternalSearch/internal-search.scss";

package/src/features/addresses/components/CreateAddressDrawer/create-address-drawer.scss

@@ -8,8 +8,6 @@
   @import "../LocationForm/location-form.scss";
   @import "../RecipientsForm/recipients-form.scss";
 
-  @import "@faststore/ui/src/components/atoms/Select/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
 
   [data-fs-alert] {

package/src/features/addresses/components/CreateAddressSettingsDrawer/create-address-settings-drawer.scss

@@ -9,8 +9,6 @@
   @import "../LocationForm/location-form.scss";
   @import "../RecipientsForm/recipients-form.scss";
 
-  @import "@faststore/ui/src/components/atoms/Select/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
 
   [data-fs-bp-settings-drawer-body] {

package/src/features/addresses/components/EditAddressDrawer/edit-address-drawer.scss

@@ -6,8 +6,6 @@
   @import "../../../shared/components/ErrorMessage/error-message.scss";
   @import "../ExistingAddress/existing-address.scss";
 
-  @import "@faststore/ui/src/components/atoms/Select/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
 
   [data-fs-alert] {

package/src/features/addresses/components/ExistingAddress/existing-address.scss

@@ -1,6 +1,5 @@
 [data-fs-bp-existing-address] {
   @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
 
   display: flex;
   align-content: center;

package/src/features/addresses/components/LocationForm/location-form.scss

@@ -1,5 +1,4 @@
 [data-fs-bp-location-form] {
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "./LocationField/location-field.scss";
 
   padding-bottom: var(--fs-spacing-5);
@@ -24,6 +23,7 @@
       border-color: #e0e0e0;
       color: #0366dd;
       font-weight: 600;
+      padding: calc(var(--fs-spacing-1) - (var(--fs-border-width) * 2)) var(--fs-spacing-3);
     }
 
     &:hover [data-fs-button-wrapper] {

package/src/features/addresses/components/RecipientsForm/recipients-form.scss

@@ -1,5 +1,4 @@
 [data-fs-bp-recipients-form] {
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
   @import "./RecipientItem/recipient-item.scss";
 
@@ -22,6 +21,7 @@
       border-color: #e0e0e0;
       color: #0366dd;
       font-weight: 600;
+      padding: calc(var(--fs-spacing-1) - (var(--fs-border-width) * 2)) var(--fs-spacing-3);
     }
   }
 }

package/src/features/addresses/components/RemoveAddressDrawer/remove-address-drawer.scss

@@ -7,7 +7,6 @@
   @import "../LocationForm/location-form.scss";
   @import "../RecipientsForm/recipients-form.scss";
 
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
 
   [data-fs-bp-drawer-label] {
     color: #0366dd;

package/src/features/addresses/layouts/AddressDetailsLayout/address-details-layout.scss

@@ -1,5 +1,5 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 [data-fs-address-details-section] {
-	@import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
 	@import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
 	@import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
 	@import "../../components/EditAddressDrawer/edit-address-drawer.scss";
@@ -12,12 +12,12 @@
 
 	height: 100%;
 
-	@include media("<=tablet") {
+	@include u.media("<=tablet") {
 		padding: 0;
 	}
 
 	[data-fs-bp-tab-bar] {
-		@include media("<=tablet") {
+		@include u.media("<=tablet") {
 			width: -webkit-fill-available !important;
 			justify-content: space-around;
 		}
@@ -72,7 +72,7 @@
 			align-items: center;
 			flex-direction: row;
 			margin-bottom: var(--fs-text-size-7);
-			@include media("<=tablet") {
+			@include u.media("<=tablet") {
 				flex-direction: column-reverse;
 				gap: 0.625rem;
 			}
@@ -112,7 +112,7 @@
 				border-radius: var(--fs-border-radius-pill);
 				border: var(--fs-border-width) solid #e0e0e0;
 
-				@include media("<=tablet") {
+				@include u.media("<=tablet") {
 					width: 100%;
 					text-align: center;
 					justify-content: center;
@@ -134,7 +134,7 @@
 			font-size: var(--fs-text-size-1);
 			line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
 
-			@include media("<=tablet") {
+			@include u.media("<=tablet") {
 				flex-direction: column;
 				align-items: normal;
 			}
@@ -202,7 +202,6 @@
 
 [data-fs-bp-address-tabs-list] {
 	@import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-	@import "@faststore/ui/src/components/atoms/Button/styles.scss";
 	@import "../../components/EditRecipientAddressDrawer/edit-recipient-address-drawer.scss";
 
 	height: 100%;
@@ -216,7 +215,7 @@
 		justify-content: space-between;
 		padding: 0 0 var(--fs-spacing-4);
 
-		@include media("<=tablet") {
+		@include u.media("<=tablet") {
 			[data-fs-buyer-portal-internal-search] {
 				width: 100%;
 			}
@@ -261,7 +260,7 @@
 	}
 
 	[data-fs-address-details-info-line-value] {
-		@include media("<=tablet") {
+		@include u.media("<=tablet") {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -277,7 +276,7 @@
 		margin-top: var(--fs-spacing-0);
 		padding: var(--fs-spacing-2) 0;
 
-		@include media(">=tablet") {
+		@include u.media(">=tablet") {
 			display: none;
 		}
 	}

package/src/features/addresses/layouts/AddressesLayout/addresses-layout.scss

@@ -1,3 +1,4 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 @import "../../../shared/components/MainLinksDropdownMenu/main-links-dropdown-menu.scss";
 @import "../../components/CreateAddressDrawer/create-address-drawer.scss";
 @import "../../components//AddressForm/address-form.scss";
@@ -9,7 +10,6 @@
 
 [data-fs-addresses-section] {
 	@import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-	@import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
 	@import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
 	@import "../../components/AddressLine/address-line.scss";
 	@import "../../../shared/components/InternalSearch/internal-search.scss";
@@ -27,7 +27,7 @@
 	flex-direction: column;
 	height: 100%;
 
-	@include media("<=phonemid") {
+	@include u.media("<=phonemid") {
 		padding: 0 0 var(--fs-spacing-7) 0;
 
 		[data-fs-bp-header-inside] {
@@ -60,7 +60,7 @@
 		margin-top: var(--fs-spacing-0);
 		padding: var(--fs-spacing-2) 0;
 
-		@include media(">=tablet") {
+		@include u.media(">=tablet") {
 			display: none;
 		}
 	}
@@ -111,7 +111,7 @@
 		justify-content: space-between;
 		padding: 0 0 var(--fs-spacing-4);
 
-		@include media("<=tablet") {
+		@include u.media("<=tablet") {
 			[data-fs-buyer-portal-internal-search] {
 				width: 100%;
 			}
@@ -133,7 +133,7 @@
 			margin-top: var(--fs-spacing-0);
 			padding: var(--fs-spacing-2) 0;
 
-			@include media(">=tablet") {
+			@include u.media(">=tablet") {
 				display: none;
 			}
 		}
@@ -169,7 +169,7 @@
       }
 		}
 
-		@include media("<=phonemid") {
+		@include u.media("<=phonemid") {
 			padding: var(--fs-spacing-3) 0;
 			margin-bottom: var(--fs-spacing-11);
 		}

package/src/features/budgets/components/BudgetAddForm/budget-add-form.scss

@@ -1,4 +1,4 @@
-@import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
 
 [data-fs-bp-add-budget-drawer] {
@@ -15,7 +15,7 @@
     flex-direction: column;
     width: 100%;
 
-    @include media(">=notebook") {
+    @include u.media(">=notebook") {
       align-items: center;
       flex-direction: row;
       gap: var(--fs-spacing-3);

package/src/features/budgets/components/BudgetAllocationsSelection/budget-allocations-selection.scss

@@ -3,12 +3,10 @@
 
 [data-fs-bp-budget-allocation-table] {
 	@import "../../../shared/components/Pagination/pagination.scss";
-	@import "@faststore/ui/src/components/atoms/Button/styles.scss";
 	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
 	@import "../../../shared/components/InternalSearch/internal-search.scss";
 	@import "../../../shared/components/Tag/tag.scss";
 	@import "../../../shared/components/Table/table.scss";
-	@import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
 
 	[data-fs-table] {
 		overflow-x: visible;

package/src/features/budgets/components/BudgetAllocationsTable/budget-allocations-table.scss

@@ -1,9 +1,9 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
 @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
 
 [data-fs-bp-budget-details-allocation-table] {
 	@import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
-	@import "@faststore/ui/src/components/atoms/Button/styles.scss";
 	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
 	@import "../../../shared/components/InternalSearch/internal-search.scss";
 	@import "../../../shared/components/Tag/tag.scss";
@@ -47,7 +47,7 @@
 		justify-content: space-between;
 		align-items: center;
 
-		@include media("<tablet") {
+		@include u.media("<tablet") {
 			[data-fs-buyer-portal-internal-search] {
 				width: 100%;
 			}
@@ -67,7 +67,7 @@
 		text-align: center;
 		margin: 0 auto;
 
-		@include media("<tablet") {
+		@include u.media("<tablet") {
 			width: 100%;
 			padding: var(--fs-spacing-4);
 		}

package/src/features/budgets/components/BudgetNotificationForm/budget-notification-form.scss

@@ -1,5 +1,5 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 [data-fs-bp-budget-notification] {
-  @import '@faststore/ui/src/components/molecules/Toggle/styles.scss';
   @import '@faststore/ui/src/components/molecules/Tooltip/styles.scss';
   @import '@faststore/ui/src/components/molecules/QuantitySelector/styles.scss';
   @import '../../../shared/components/InputText/input-text.scss';
@@ -38,7 +38,7 @@
     flex-direction: column;
     width: 100%;
 
-    @include media('>=notebook') {
+    @include u.media(">=notebook") {
       align-items: center;
       flex-direction: row;
       gap: var(--fs-spacing-3);

package/src/features/budgets/components/BudgetNotificationsInfo/budget-notifications-info.scss

@@ -1,3 +1,4 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 [data-fs-bp-budget-notifications] {
   @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
 
@@ -16,7 +17,7 @@
     border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
 
     &:first-of-type {
-      @include media("<tablet") {
+      @include u.media("<tablet") {
         border: none;
       }
     }
@@ -29,7 +30,7 @@
     font-size: var(--fs-text-size-1);
     line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
 
-    @include media("<tablet") {
+    @include u.media("<tablet") {
       flex-direction: column;
       padding: var(--fs-spacing-2) 0;
     }
@@ -40,7 +41,7 @@
       font-size: var(--fs-text-size-1);
       font-weight: var(--fs-text-weight-regular);
 
-      @include media("<tablet") {
+      @include u.media("<tablet") {
         font-size: var(--fs-text-size-0);
       }
     }
@@ -58,7 +59,7 @@
         font-weight: var(--fs-text-weight-regular);
       }
 
-      @include media("<tablet") {
+      @include u.media("<tablet") {
         font-weight: var(--fs-text-weight-regular);
       }
     }

package/src/features/budgets/components/BudgetRemainingBalance/budget-remaining-balance.scss

@@ -1,3 +1,4 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 [data-fs-bp-budget-remaining-balance] {
   width: 100%;
 
@@ -16,7 +17,7 @@
 
     margin-bottom: var(--fs-spacing-3);
 
-    @include media("<tablet") {
+    @include u.media("<tablet") {
       grid-template-columns: 1fr;
       gap: var(--fs-spacing-2);
     }
@@ -24,7 +25,7 @@
     [data-fs-bp-budgets-progress-bar] {
       grid-column: span 2;
 
-      @include media("<tablet") {
+      @include u.media("<tablet") {
         grid-column: 1;
         grid-row: 2;
       }

package/src/features/budgets/components/BudgetSettingsInfo/budget-settings-info.scss

@@ -1,3 +1,4 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 [data-fs-bp-budget-settings] {
   width: 100%;
 
@@ -14,7 +15,7 @@
     border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
 
     &:first-of-type {
-      @include media("<tablet") {
+      @include u.media("<tablet") {
         border: none;
       }
     }
@@ -27,7 +28,7 @@
     font-size: var(--fs-text-size-1);
     line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
 
-    @include media("<tablet") {
+    @include u.media("<tablet") {
       flex-direction: column;
       padding: var(--fs-spacing-2) 0;
     }
@@ -38,7 +39,7 @@
       font-size: var(--fs-text-size-1);
       font-weight: var(--fs-text-weight-regular);
 
-      @include media("<tablet") {
+      @include u.media("<tablet") {
         font-size: var(--fs-text-size-0);
       }
     }
@@ -48,7 +49,7 @@
       font-size: var(--fs-text-size-1);
       font-weight: var(--fs-text-weight-medium);
 
-      @include media("<tablet") {
+      @include u.media("<tablet") {
         font-weight: var(--fs-text-weight-regular);
       }
     }

package/src/features/budgets/components/BudgetsTable/budgets-table.scss

@@ -1,3 +1,4 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 [data-fs-bp-budgets-table] {
 	@import "../BudgetProgressBar/budget-progress-bar.scss";
 	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
@@ -67,7 +68,7 @@
 			align-items: center;
 		}
 
-		@include media("<tablet") {
+		@include u.media("<tablet") {
 			[data-fs-table-cell] {
 				display: none;
 
@@ -82,7 +83,7 @@
 			}
 		}
 
-		@include media("<notebook") {
+		@include u.media("<notebook") {
 			[data-fs-table-cell="data"]:not(:first-of-type) {
 				text-align: right;
 			}

package/src/features/budgets/components/CreateBudgetAllocationDrawer/create-budget-allocation-drawer.scss

@@ -1,4 +1,4 @@
-@import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
 @import "../BudgetAllocationsSelection/budget-allocations-selection.scss";
 
@@ -28,7 +28,7 @@
       gap: var(--fs-spacing-3);
       cursor: pointer;
 
-      @include media("<tablet") {
+      @include u.media("<tablet") {
         [data-fs-icon] {
           width: var(--fs-spacing-3);
           height: var(--fs-spacing-3);

package/src/features/budgets/components/CreateBudgetDrawer/create-budget-drawer.scss

@@ -1,4 +1,3 @@
-@import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
 @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
 @import "../BudgetAddForm/budget-add-form.scss";
 @import "../BudgetNotificationForm/budget-notification-form.scss";

package/src/features/budgets/components/EditBudgetDrawer/edit-budget-drawer.scss

@@ -1,5 +1,5 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 [data-fs-bp-edit-budget-drawer] {
-  @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
   @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
   @import "../../../shared/components/BasicDrawer/basic-drawer.scss";
   @import "../BudgetAddForm/budget-add-form.scss";
@@ -11,7 +11,7 @@
     width: 100%;
     max-width: none;
 
-    @include media(">=tablet", "<notebook") {
+    @include u.media(">=tablet", "<notebook") {
       &[data-fs-modal-content] {
         [data-fs-bp-basic-drawer-body] {
           [data-fs-bp-basic-drawer-body-wrapper] {

package/src/features/budgets/layouts/BudgetsDetailsLayout/budget-details-layout.scss

@@ -1,3 +1,4 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 @import "../../components/EditBudgetDrawer/edit-budget-drawer.scss";
 @import "../../components/CreateBudgetDrawer/create-budget-drawer.scss";
 @import "../../components/BudgetAllocationsTable/budget-allocations-table.scss";
@@ -45,7 +46,7 @@
       text-align: center;
       color: #858585;
 
-      @include media("<=tablet") {
+      @include u.media("<=tablet") {
         padding: 4rem clamp(1rem, 5vw, 17rem);
       }
     }
@@ -57,7 +58,7 @@
     flex-direction: column;
     gap: var(--fs-spacing-6);
 
-    @include media("<tablet") {
+    @include u.media("<tablet") {
       gap: var(--fs-spacing-4);
     }
 

package/src/features/budgets/layouts/BudgetsLayout/budgets-layout.scss

@@ -1,9 +1,9 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 @import "../../components/BudgetDeleteDrawer/budget-delete-drawer.scss";
 
 [data-fs-bp-budgets-layout] {
   @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
   @import "@faststore/ui/src/components/molecules/Table/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "../../components/BudgetNotificationForm/budget-notification-form.scss";
   @import "../../../shared/components/InternalSearch/internal-search.scss";
   @import "../../../shared/components/HeaderInside/header-inside.scss";
@@ -15,7 +15,7 @@
 
   width: 100%;
 
-  @include media("<=phonemid") {
+  @include u.media("<=phonemid") {
     padding-bottom: var(--fs-spacing-7);
 
     [data-fs-bp-header-inside] {
@@ -115,7 +115,7 @@
       align-items: center;
       margin-bottom: var(--fs-spacing-4);
 
-      @include media("<tablet") {
+      @include u.media("<tablet") {
         [data-fs-buyer-portal-internal-search] {
           width: 100%;
         }

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/basic-buying-policy-drawer.scss

@@ -1,3 +1,4 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 @import '../../../shared/components/BasicDrawer/basic-drawer.scss';
 @import '../../../shared/components/OrgUnitInputSearch/org-unit-input-search.scss';
 @import '../../../shared/components/CustomDropdown/custom-dropdown.scss';
@@ -66,7 +67,7 @@
       gap: var(--fs-spacing-2);
       margin-top: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
 
-      @include media('<=tablet') {
+      @include u.media("<=tablet") {
         justify-content: center;
       }
     }
@@ -166,7 +167,7 @@
     margin-bottom: var(--fs-spacing-3);
   }
 
-  @include media('<=tablet') {
+  @include u.media("<=tablet") {
     [data-fs-bp-basic-drawer-body],
     [data-fs-bp-basic-drawer-heading],
     [data-fs-bp-basic-drawer-footer] {

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/buying-policies-layout.scss

@@ -1,3 +1,4 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
 @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
 @import "../../components/BuyingPolicyDropdownMenu/buying-policy-dropdown-menu.scss";
 @import "../../../shared/layouts/FinanceTabsLayout/finance-tabs-layout.scss";
@@ -15,7 +16,7 @@
 	display: flex;
 	flex-direction: column;
 
-	@include media("<=phonemid") {
+	@include u.media("<=phonemid") {
 		padding-bottom: var(--fs-spacing-7);
 
 		[data-fs-bp-header-inside] {
@@ -45,7 +46,7 @@
 			display: block;
 		}
 
-		@include media("<=tablet") {
+		@include u.media("<=tablet") {
 			[data-fs-buyer-portal-internal-search] {
 				width: 100%;
 			}
@@ -67,7 +68,7 @@
 
 	[data-fs-bp-buying-policies-paginator] {
 		display: none;
-		@include media("<=tablet") {
+		@include u.media("<=tablet") {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;