@faststore/ui 3.99.0 → 4.0.0-dev.2

package/dist/cjs/index.js

@@ -1,12 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tiles = exports.Tile = exports.Incentive = void 0;
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("@faststore/components"), exports);
-var Incentive_1 = require("./components/atoms/Incentive");
-Object.defineProperty(exports, "Incentive", { enumerable: true, get: function () { return tslib_1.__importDefault(Incentive_1).default; } });
-// Organisms
-var Tiles_1 = require("./components/organisms/Tiles");
-Object.defineProperty(exports, "Tile", { enumerable: true, get: function () { return Tiles_1.Tile; } });
-Object.defineProperty(exports, "Tiles", { enumerable: true, get: function () { return Tiles_1.Tiles; } });
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@faststore/components"),e=require("react"),E=e.forwardRef(function({testId:r="store-incentive",children:n,...o},s){return e.createElement("section",{ref:s,"data-fs-incentive":!0,"data-testid":r,...o},n)}),l=2,d=4,T=2,p=3,O=e.forwardRef(function({testId:r="store-tiles",children:n,...o},s){const i=e.Children.count(n);if(process.env.NODE_ENV==="development"&&(i<l||i>d))throw new Error(`Tiles cannot receive less than ${l} or more than ${d} children.`);process.env.NODE_ENV==="development"&&e.Children.forEach(n,a=>{if(a.type!==f)throw new Error("Only Tile components allowed as children.")});const u=i===p?"expanded-first":i===T?"expanded-first-two":"";return e.createElement("ul",{ref:s,role:"list","data-fs-tiles":!0,"data-fs-tiles-variant":u,"data-fs-content":"tiles","data-testid":r,...o},n)}),f=e.forwardRef(function({testId:r="store-tile",children:n,...o},s){return e.createElement("li",{ref:s,role:"listitem","data-fs-tile":!0,"data-testid":r,...o},n)});exports.Incentive=E;exports.Tile=f;exports.Tiles=O;Object.keys(c).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>c[t]})});

package/dist/{cjs/components → components}/atoms/Incentive/Incentive.d.ts

@@ -1,5 +1,4 @@
-import type { HTMLAttributes } from 'react';
-import React from 'react';
+import { HTMLAttributes, default as React } from 'react';
 export interface IncentiveProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * ID to find this component in testing tools (e.g.: cypress,

package/dist/components/atoms/Incentive/Incentive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Incentive.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Incentive/Incentive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,QAAA,MAAM,SAAS,uFASb,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/components/atoms/Incentive/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Incentive/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA"}

package/dist/{esm/components → components}/organisms/Tiles/Tile.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { HTMLAttributes } from 'react';
+import { default as React, HTMLAttributes } from 'react';
 export interface TileProps extends HTMLAttributes<HTMLLIElement> {
     /**
      * ID to find this component in testing tools (e.g.: Cypress,

package/dist/components/organisms/Tiles/Tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Tiles/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,QAAA,MAAM,IAAI,iFAeR,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/{cjs/components → components}/organisms/Tiles/Tiles.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { HTMLAttributes } from 'react';
+import { default as React, HTMLAttributes } from 'react';
 export interface TilesProps extends HTMLAttributes<HTMLUListElement> {
     /**
      * ID to find this component in testing tools (e.g.: Cypress,

package/dist/components/organisms/Tiles/Tiles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Tiles/Tiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,OAAO,CAAA;AAIzD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAClE;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAOD,QAAA,MAAM,KAAK,qFA6CT,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/components/organisms/Tiles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Tiles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA"}

package/dist/es/index.mjs

@@ -0,0 +1,46 @@
+export * from "@faststore/components";
+import r, { forwardRef as i, Children as l } from "react";
+const m = i(function({ testId: t = "store-incentive", children: e, ...n }, s) {
+  return /* @__PURE__ */ r.createElement("section", { ref: s, "data-fs-incentive": !0, "data-testid": t, ...n }, e);
+}), d = 2, f = 4, u = 2, T = 3, N = i(function({ testId: t = "store-tiles", children: e, ...n }, s) {
+  const o = l.count(e);
+  if (process.env.NODE_ENV === "development" && (o < d || o > f))
+    throw new Error(
+      `Tiles cannot receive less than ${d} or more than ${f} children.`
+    );
+  process.env.NODE_ENV === "development" && l.forEach(e, (c) => {
+    if (c.type !== _)
+      throw new Error("Only Tile components allowed as children.");
+  });
+  const E = o === T ? "expanded-first" : o === u ? "expanded-first-two" : "";
+  return /* @__PURE__ */ r.createElement(
+    "ul",
+    {
+      ref: s,
+      role: "list",
+      "data-fs-tiles": !0,
+      "data-fs-tiles-variant": E,
+      "data-fs-content": "tiles",
+      "data-testid": t,
+      ...n
+    },
+    e
+  );
+}), _ = i(function({ testId: t = "store-tile", children: e, ...n }, s) {
+  return /* @__PURE__ */ r.createElement(
+    "li",
+    {
+      ref: s,
+      role: "listitem",
+      "data-fs-tile": !0,
+      "data-testid": t,
+      ...n
+    },
+    e
+  );
+});
+export {
+  m as Incentive,
+  _ as Tile,
+  N as Tiles
+};

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACnE,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGlE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAC1D,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA"}

package/dist/{cjs/typings → typings}/PolymorphicGenerics.d.ts

@@ -1,10 +1,4 @@
-/**
- * These were heavily inspired by "Forwarding refs for a polymorphic React
- * component in TypeScript", written by Ben Ilegbodu.
- *
- * Article link: https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
- */
-import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
 type AsProp<C extends ElementType> = {
     as?: C;
 };

package/dist/typings/PolymorphicGenerics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolymorphicGenerics.d.ts","sourceRoot":"","sources":["../../src/typings/PolymorphicGenerics.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,wBAAwB,EACxB,qBAAqB,EACrB,WAAW,EACZ,MAAM,OAAO,CAAA;AAEd,KAAK,MAAM,CAAC,CAAC,SAAS,WAAW,IAAI;IACnC,EAAE,CAAC,EAAE,CAAC,CAAA;CACP,CAAA;AAED;;;;GAIG;AACH,KAAK,eAAe,CAClB,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EACrC,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IACnC,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,aAAa,CAAC,CAAA;AAE5D;;;;GAIG;AACH,KAAK,uBAAuB,CAC1B,CAAC,SAAS,WAAW,EACrB,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IAC3B,eAAe,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA;AAEvD,MAAM,MAAM,yBAAyB,CACnC,CAAC,SAAS,WAAW,EACrB,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IAC3B,uBAAuB,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;AAEjD,MAAM,MAAM,gCAAgC,CAC1C,CAAC,SAAS,WAAW,EACrB,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IACvB,yBAAyB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,CAAA;AAG/E,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAC9C,gCAAgC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA"}

package/dist/typings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typings/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,yBAAyB,EACzB,gCAAgC,EAChC,cAAc,GACf,MAAM,uBAAuB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "3.99.0",
+  "version": "4.0.0-dev.2",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -10,68 +10,67 @@
     "directory": "packages/ui"
   },
   "browserslist": "supports es6-module and not dead and last 2 version",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "typings": "dist/esm/index.d.ts",
+  "typings": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/esm/index.d.ts",
-      "default": "./dist/esm/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/es/index.mjs",
+      "require": "./dist/cjs/index.js"
+    },
+    "./*.scss": {
+      "sass": "./src/*.scss"
     },
     "./src/*": "./src/*"
   },
   "sideEffects": false,
   "engines": {
-    "node": ">=10"
+    "node": ">=20"
   },
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "dev": "tsc --watch",
-    "build": "tsc --module commonjs --outDir dist/cjs && tsc --module esnext --outDir dist/esm",
+    "dev": "vite build --watch",
+    "build": "vite build",
     "size": "size-limit",
     "analyze": "size-limit --why"
   },
   "size-limit": [
     {
       "path": "dist/cjs/index.js",
-      "limit": "50 KB"
+      "limit": "62 KB"
     },
     {
-      "path": "dist/esm/index.js",
-      "limit": "40 KB"
+      "path": "dist/es/index.mjs",
+      "limit": "60 KB"
     }
   ],
   "dependencies": {
-    "@faststore/components": "3.99.0",
-    "include-media": "^1.4.10",
+    "@faststore/components": "4.0.0-dev.2",
+    "include-media": "^2.0.0",
     "modern-normalize": "^1.1.0",
-    "react-swipeable": "^7.0.0",
-    "tabbable": "^5.2.1"
+    "react-swipeable": "catalog:",
+    "tabbable": "catalog:"
   },
   "peerDependencies": {
-    "@faststore/components": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "catalog:",
+    "react-dom": "catalog:"
   },
   "devDependencies": {
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@types/node": "^18.11.16",
-    "@types/react": "^18.2.42",
-    "@types/tabbable": "^3.1.1",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/tabbable": "catalog:",
     "babel-loader": "^8.2.5",
+    "sass": "^1.97.3",
     "size-limit": "^7.0.8",
-    "tslib": "^2.3.1"
-  },
-  "volta": {
-    "extends": "../../package.json"
+    "tslib": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-dts": "catalog:"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1af58159c3dfd550998c3dd1bdea47bded23854f"
+  "gitHead": "bb7fc3d235106d8026fa8f48f62929880e533006"
 }

package/src/components/atoms/Button/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-button] {
   // --------------------------------------------------------
   // Design Tokens for Buttons
@@ -149,12 +151,12 @@
     @media not all and (min-resolution: .001dpcm) {
       @supports (-webkit-appearance:none) {
         &:focus [data-fs-button-wrapper],
-        &:focus:hover [data-fs-button-wrapper] { @include focus-ring; }
+        &:focus:hover [data-fs-button-wrapper] { @include utilities.focus-ring; }
       }
     }
 
     &:focus-visible [data-fs-button-wrapper],
-    &:focus-visible:hover [data-fs-button-wrapper] { @include focus-ring; }
+    &:focus-visible:hover [data-fs-button-wrapper] { @include utilities.focus-ring; }
 
     &:disabled [data-fs-button-wrapper], &[data-fs-button-disabled="true"] [data-fs-button-wrapper] {
       color: var(--fs-button-disabled-text-color);

package/src/components/atoms/Checkbox/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-checkbox] {
   // --------------------------------------------------------
   // Design Tokens for Checkbox
@@ -52,7 +54,7 @@
   transition: var(--fs-checkbox-transition);
   appearance: none;
 
-  @include input-focus-ring;
+  @include utilities.input-focus-ring;
 
   &::before {
     position: absolute;

package/src/components/atoms/Input/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-input] {
   // --------------------------------------------------------
   // Design Tokens for Input
@@ -47,7 +49,7 @@
   box-shadow: var(--fs-input-box-shadow);
   transition: var(--fs-input-transition-property) var(--fs-input-transition-timing) var(--fs-input-transition-function);
 
-  @include input-focus-ring;
+  @include utilities.input-focus-ring;
 
   &:hover:not(:disabled):not(:focus-visible):not(:focus) {
     border-color: var(--fs-input-border-color-hover);
@@ -55,8 +57,8 @@
   }
 
   &:disabled {
-    cursor: not-allowed;
     color: var(--fs-input-disabled-text-color);
+    cursor: not-allowed;
     background-color: var(--fs-input-disabled-bkg-color);
     border: var(--fs-input-disabled-border-width) solid var(--fs-input-disabled-border-color);
   }

package/src/components/atoms/Link/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-link] {
   // --------------------------------------------------------
   // Design Tokens for Link
@@ -54,7 +56,7 @@
     border-radius: var(--fs-link-border-radius);
     transition: var(--fs-link-transition-property) var(--fs-link-transition-timing) var(--fs-link-transition-function);
 
-    @include focus-ring-visible;
+    @include utilities.focus-ring-visible;
   }
 
   // --------------------------------------------------------
@@ -83,7 +85,7 @@
   &[data-fs-link-size="small"] {
     font-size: var(--fs-link-small-text-size);
 
-    @include media(">=notebook") { padding: var(--fs-link-small-padding); }
+    @include utilities.media(">=notebook") { padding: var(--fs-link-small-padding); }
   }
 
   &[data-fs-link-inverse="true"] {

package/src/components/atoms/Radio/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-radio] {
   // --------------------------------------------------------
   // Design Tokens for radio
@@ -47,7 +49,7 @@
   transition: var(--fs-radio-transition);
   appearance: none;
 
-  @include input-focus-ring;
+  @include utilities.input-focus-ring;
 
   &::before {
     width: var(--fs-radio-knob-width);

package/src/components/atoms/Select/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-select] {
   // --------------------------------------------------------
   // Design Tokens for Select
@@ -49,7 +51,7 @@
     transition: var(--fs-select-transition-property) var(--fs-select-transition-timing) var(--fs-select-transition-function);
     appearance: none;
 
-    @include focus-ring-visible;
+    @include utilities.focus-ring-visible;
 
     &:focus { background-color: var(--fs-select-bkg-color-focus); }
 
@@ -62,17 +64,17 @@
       + [data-fs-select-icon] { display: none; }
     }
 
-    @include media("<notebook") { min-height: var(--fs-select-min-height); }
+    @include utilities.media("<notebook") { min-height: var(--fs-select-min-height); }
 
-    @include media(">=notebook") { height: var(--fs-select-height); }
+    @include utilities.media(">=notebook") { height: var(--fs-select-height); }
   }
 
   [data-fs-select-icon] {
     position: absolute;
     right: var(--fs-select-icon-position-right);
-    color: var(--fs-select-icon-color);
-    pointer-events: none;
     width: var(--fs-select-icon-width);
     height: var(--fs-select-icon-height);
+    color: var(--fs-select-icon-color);
+    pointer-events: none;
   }
 }

package/src/components/atoms/Textarea/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-textarea] {
   // --------------------------------------------------------
   // Design Tokens for Textarea
@@ -50,7 +52,7 @@
     width 0s,
     height 0s;
 
-  @include input-focus-ring;
+  @include utilities.input-focus-ring;
 
   &:hover:not(:disabled):not(:focus-visible):not(:focus) {
     border-color: var(--fs-textarea-border-color-hover);

package/src/components/molecules/Accordion/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-accordion] {
   // --------------------------------------------------------
   // Design Tokens for Accordion
@@ -30,7 +32,7 @@
   [data-fs-accordion-item] {
     border-bottom: var(--fs-accordion-item-border-bottom-width) solid var(--fs-accordion-item-border-bottom-color);
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       &:last-child {
         border-bottom: 0;
       }

package/src/components/molecules/Breadcrumb/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-breadcrumb] {
   // --------------------------------------------------------
   // Design Tokens for Breadcrumb
@@ -46,7 +48,8 @@
     display: flex;
     align-items: center;
     overflow-x: hidden;
-    @include media("<notebook") {
+
+    @include utilities.media("<notebook") {
       margin-left: var(--fs-breadcrumb-margin-left);
     }
   }
@@ -61,7 +64,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
 
-      @include media("<=tablet") {
+      @include utilities.media("<=tablet") {
         max-width: var(--fs-breadcrumb-list-item-max-width-mobile);
       }
     }
@@ -89,7 +92,7 @@
       color: var(--fs-breadcrumb-list-item-last-text-color);
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       &:nth-child(3) {
         overflow: visible;
       }
@@ -135,14 +138,14 @@
   }
 
   &[data-fs-breadcrumb-is-desktop="true"] {
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       display: none;
       visibility: hidden;
     }
   }
 
   &[data-fs-breadcrumb-is-desktop="false"] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       display: none;
       visibility: hidden;
     }

package/src/components/molecules/BuyButton/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-buy-button] {
   // --------------------------------------------------------
   // Design Tokens for Buy Button
@@ -22,7 +24,7 @@
   // Structural Styles
   // --------------------------------------------------------
 
-  @include focus-ring-visible;
+  @include utilities.focus-ring-visible;
 
   color: var(--fs-buy-button-text-color);
 
@@ -31,7 +33,6 @@
     border: var(--fs-button-border-width) solid var(--fs-buy-button-border-color);
   }
 
-
   &:hover [data-fs-button-wrapper] {
     color: var(--fs-buy-button-text-color-hover);
     background-color: var(--fs-buy-button-bkg-color-hover);

package/src/components/molecules/Carousel/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-carousel] {
   // --------------------------------------------------------
   // Design Tokens for Carousel
@@ -5,7 +7,7 @@
 
   // Track
   --fs-carousel-padding-mobile             : var(--fs-spacing-0) var(--fs-grid-padding);
-  --fs-carousel-padding-desktop            : var(--fs-spacing-0) calc((100% - var(--fs-grid-max-width))/2) var(--fs-spacing-0);
+  --fs-carousel-padding-desktop            : var(--fs-spacing-0) calc((100% - var(--fs-grid-max-width)) / 2) var(--fs-spacing-0);
 
   // Item
   --fs-carousel-item-margin-right          : var(--fs-spacing-3);
@@ -43,21 +45,21 @@
   // --------------------------------------------------------
 
   position: relative;
-  width: inherit;
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: inherit;
 
   &:hover {
     [data-fs-carousel-controls] {
-      @include media(">=tablet") {
-        opacity: 1;
+      @include utilities.media(">=tablet") {
         pointer-events: auto;
+        opacity: 1;
       }
     }
   }
 
-  &[data-fs-carousel-variant='scroll'] [data-fs-carousel-item]{
+  &[data-fs-carousel-variant="scroll"] [data-fs-carousel-item] {
     flex-shrink: 0;
   }
 
@@ -71,13 +73,14 @@
     pointer-events: auto;
     opacity: 0;
 
-    @include media(">notebook") {
+    @include utilities.media(">notebook") {
       width: calc(100% + 2 * var(--fs-control-tap-size) + 2 * var(--fs-spacing-4));
     }
   }
 
   [data-fs-carousel-control] {
     cursor: pointer;
+
     [data-fs-button-wrapper] {
       border-radius: var(--fs-carousel-controls-border-radius);
       box-shadow: var(--fs-carousel-controls-box-shadow);
@@ -98,7 +101,7 @@
       display: none;
     }
 
-    @include media(">notebook") {
+    @include utilities.media(">notebook") {
       padding: var(--fs-carousel-padding-desktop);
     }
   }
@@ -111,39 +114,42 @@
 
   [data-fs-carousel-bullets] {
     position: relative;
-    width: 100%;
-    padding-top: var(--fs-carousel-bullets-padding-top);
     display: flex;
     flex-flow: row nowrap;
     column-gap: var(--fs-carousel-bullets-column-gap-mobile);
-    padding-left: var(--fs-carousel-bullets-padding-left);
+    width: 100%;
+    padding-top: var(--fs-carousel-bullets-padding-top);
     padding-right: var(--fs-carousel-bullets-padding-right);
+    padding-left: var(--fs-carousel-bullets-padding-left);
 
-    @include media(">tablet") {
-      width: fit-content;
+    @include utilities.media(">tablet") {
+      column-gap: var(--fs-carousel-bullets-column-gap-tablet);
       align-items: center;
       justify-content: center;
+      width: fit-content;
       margin: auto;
-      column-gap: var(--fs-carousel-bullets-column-gap-tablet);
     }
 
     [data-fs-carousel-bullet] {
-      width: var(--fs-carousel-bullet-width-mobile);
       align-items: center;
       justify-content: center;
+      width: var(--fs-carousel-bullet-width-mobile);
+
       [data-fs-button-wrapper] {
-        padding: 0;
         height: var(--fs-carousel-bullet-height-mobile);
+        padding: 0;
         background-color: var(--fs-carousel-bullet-bkg-color);
         border-color: transparent;
         border-radius: 0;
-        @include media(">tablet") {
+
+        @include utilities.media(">tablet") {
           width: var(--fs-carousel-bullet-width-desktop);
           height: var(--fs-carousel-bullet-height-desktop);
           margin: 0;
           border-radius: var(--fs-carousel-bullet-border-radius);
         }
       }
+
       &[aria-selected="true"] [data-fs-button-wrapper] {
         background-color: var(--fs-carousel-bullet-bkg-color-selected);
       }

package/src/components/molecules/CartItem/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-cart-item] {
   // --------------------------------------------------------
   // Design Tokens for CartItem
@@ -65,7 +67,7 @@
     text-decoration: none;
     outline: none;
 
-    @include truncate-title;
+    @include utilities.truncate-title;
   }
 
   [data-fs-cart-item-skus] {

package/src/components/molecules/FileUploadCard/styles.scss

@@ -3,21 +3,21 @@
   // Design Tokens for File Upload Card
   // --------------------------------------------------------
 
-  --fs-file-upload-card-padding:                var(--fs-spacing-3);
-  --fs-file-upload-card-bkg-color:              var(--fs-color-neutral-0);
-  --fs-file-upload-card-border-width:           var(--fs-border-width);
-  --fs-file-upload-card-border-color:           var(--fs-border-color-light);
-  --fs-file-upload-card-border-radius:          var(--fs-border-radius-medium);
-  --fs-file-upload-card-dropzone-padding:       var(--fs-spacing-3) var(--fs-spacing-4);
-  --fs-file-upload-card-dropzone-border-width:  var(--fs-border-width-thick);
-  --fs-file-upload-card-dropzone-border-color:  var(--fs-border-color-light);
+  --fs-file-upload-card-padding: var(--fs-spacing-3);
+  --fs-file-upload-card-bkg-color: var(--fs-color-neutral-0);
+  --fs-file-upload-card-border-width: var(--fs-border-width);
+  --fs-file-upload-card-border-color: var(--fs-border-color-light);
+  --fs-file-upload-card-border-radius: var(--fs-border-radius-medium);
+  --fs-file-upload-card-dropzone-padding: var(--fs-spacing-3) var(--fs-spacing-4);
+  --fs-file-upload-card-dropzone-border-width: var(--fs-border-width-thick);
+  --fs-file-upload-card-dropzone-border-color: var(--fs-border-color-light);
   --fs-file-upload-card-dropzone-border-radius: var(--fs-border-radius);
-  --fs-file-upload-card-icon-size:              3rem;
-  --fs-file-upload-card-badge-size:             1.5rem;
-  --fs-file-upload-card-badge-bg-color:         #0366dd;
-  --fs-file-upload-card-shadow-color:           #bfdbfe;
-  --fs-file-upload-card-title-color:            var(--fs-color-text);
-  --fs-file-upload-card-link-color:             var(--fs-color-link);
+  --fs-file-upload-card-icon-size: 3rem;
+  --fs-file-upload-card-badge-size: 1.5rem;
+  --fs-file-upload-card-badge-bg-color: #0366dd;
+  --fs-file-upload-card-shadow-color: #bfdbfe;
+  --fs-file-upload-card-title-color: var(--fs-color-text);
+  --fs-file-upload-card-link-color: var(--fs-color-link);
 
   // --------------------------------------------------------
   // Structural Styles