@faststore/ui 3.0.24 → 3.0.32-alpha.0

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface IncentiveProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+}
+declare const Incentive: React.ForwardRefExoticComponent<IncentiveProps & React.RefAttributes<HTMLDivElement>>;
+export default Incentive;

package/dist/components/atoms/Incentive/Incentive.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const Incentive = forwardRef(function Incentive({ testId = 'store-incentive', children, ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-incentive": true, "data-testid": testId, ...otherProps }, children));
+});
+export default Incentive;
+//# sourceMappingURL=Incentive.js.map

package/dist/components/atoms/Incentive/Incentive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Incentive.js","sourceRoot":"","sources":["../../../../src/components/atoms/Incentive/Incentive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,MAAM,GAAG,iBAAiB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,4CAAiC,MAAM,KAAM,UAAU,IACjE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,2 @@
+export { default } from './Incentive';
+export type { IncentiveProps } from './Incentive';

package/dist/components/atoms/Incentive/index.js

@@ -0,0 +1,2 @@
+export { default } from './Incentive';
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/Incentive/index.js.map

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

package/dist/components/atoms/TextArea/TextArea.d.ts

@@ -0,0 +1,14 @@
+import type { TextareaHTMLAttributes } from 'react';
+import React from 'react';
+export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+    /**
+     * Current variant of the input.
+     */
+    variant?: 'success' | 'error';
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/dist/components/atoms/TextArea/TextArea.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+const TextArea = forwardRef(function TextArea({ variant, testId = 'store-textarea', ...otherProps }, ref) {
+    const variants = {
+        'data-success': variant === 'success' || undefined,
+        'data-error': variant === 'error' || undefined,
+    };
+    return (React.createElement("textarea", { ref: ref, "data-fs-textarea": true, "data-testid": testId, ...variants, ...otherProps }));
+});
+export default TextArea;
+//# sourceMappingURL=TextArea.js.map

package/dist/components/atoms/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/atoms/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,QAAQ,GAAG,UAAU,CACzB,SAAS,QAAQ,CACf,EAAE,OAAO,EAAE,MAAM,GAAG,gBAAgB,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,MAAM,QAAQ,GAAG;QACf,cAAc,EAAE,OAAO,KAAK,SAAS,IAAI,SAAS;QAClD,YAAY,EAAE,OAAO,KAAK,OAAO,IAAI,SAAS;KAC/C,CAAA;IAED,OAAO,CACL,kCACE,GAAG,EAAE,GAAG,2CAEK,MAAM,KACf,QAAQ,KACR,UAAU,GACd,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/components/atoms/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextArea';
+export type { TextAreaProps } from './TextArea';

package/dist/components/atoms/TextArea/index.js

@@ -0,0 +1,2 @@
+export { default } from './TextArea';
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface TileProps extends HTMLAttributes<HTMLLIElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress,
+     * Testing Library, and Jest).
+     */
+    testId?: string;
+}
+declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLLIElement>>;
+export default Tile;

package/dist/components/organisms/Tiles/Tile.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const Tile = forwardRef(function Tile({ testId = 'store-tile', children, ...otherProps }, ref) {
+    return (React.createElement("li", { ref: ref, role: "listitem", "data-fs-tile": true, "data-testid": testId, ...otherProps }, children));
+});
+export default Tile;
+//# sourceMappingURL=Tile.js.map

package/dist/components/organisms/Tiles/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.js","sourceRoot":"","sources":["../../../../src/components/organisms/Tiles/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,IAAI,GAAG,UAAU,CAA2B,SAAS,IAAI,CAC7D,EAAE,MAAM,GAAG,YAAY,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAClD,GAAG;IAEH,OAAO,CACL,4BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,uCAEF,MAAM,KACf,UAAU,IAEb,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface TilesProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress,
+     * Testing Library, and Jest).
+     */
+    testId?: string;
+}
+declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLUListElement>>;
+export default Tiles;

package/dist/components/organisms/Tiles/Tiles.js

@@ -0,0 +1,30 @@
+import React, { Children, forwardRef } from 'react';
+import { Tile } from '.';
+const MIN_CHILDREN = 2;
+const MAX_CHILDREN = 4;
+const NUMBER_ITEMS_TO_EXPAND_FIRST_TWO = 2;
+const NUMBER_ITEMS_TO_EXPAND_FIRST = 3;
+const Tiles = forwardRef(function Tiles({ testId = 'store-tiles', children, ...otherProps }, ref) {
+    const childrenCount = Children.count(children);
+    if (process.env.NODE_ENV === 'development') {
+        const isOutOfBounds = childrenCount < MIN_CHILDREN || childrenCount > MAX_CHILDREN;
+        if (isOutOfBounds) {
+            throw new Error(`Tiles cannot receive less than ${MIN_CHILDREN} or more than ${MAX_CHILDREN} children.`);
+        }
+    }
+    if (process.env.NODE_ENV === 'development') {
+        Children.forEach(children, (child) => {
+            if (child.type !== Tile) {
+                throw new Error('Only Tile components allowed as children.');
+            }
+        });
+    }
+    const expandedClass = childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST
+        ? 'expanded-first'
+        : childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO
+            ? 'expanded-first-two'
+            : '';
+    return (React.createElement("ul", { ref: ref, role: "list", "data-fs-tiles": true, "data-fs-tiles-variant": expandedClass, "data-fs-content": "tiles", "data-testid": testId, ...otherProps }, children));
+});
+export default Tiles;
+//# sourceMappingURL=Tiles.js.map

package/dist/components/organisms/Tiles/Tiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.js","sourceRoot":"","sources":["../../../../src/components/organisms/Tiles/Tiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAA;AAUxB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,gCAAgC,GAAG,CAAC,CAAA;AAC1C,MAAM,4BAA4B,GAAG,CAAC,CAAA;AAEtC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,MAAM,GAAG,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACnD,GAAG;IAEH,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAE9C,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,MAAM,aAAa,GACjB,aAAa,GAAG,YAAY,IAAI,aAAa,GAAG,YAAY,CAAA;QAE9D,IAAI,aAAa,EAAE;YACjB,MAAM,IAAI,KAAK,CACb,kCAAkC,YAAY,iBAAiB,YAAY,YAAY,CACxF,CAAA;SACF;KACF;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,QAAQ,CAAC,OAAO,CAAC,QAAwB,EAAE,CAAC,KAAK,EAAE,EAAE;YACnD,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;gBACvB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;aAC7D;QACH,CAAC,CAAC,CAAA;KACH;IAED,MAAM,aAAa,GACjB,aAAa,KAAK,4BAA4B;QAC5C,CAAC,CAAC,gBAAgB;QAClB,CAAC,CAAC,aAAa,KAAK,gCAAgC;YACpD,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,EAAE,CAAA;IAER,OAAO,CACL,4BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,kDAEY,aAAa,qBACpB,OAAO,iBACV,MAAM,KACf,UAAU,IAEb,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}

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

@@ -0,0 +1,4 @@
+export { default as Tiles } from './Tiles';
+export type { TilesProps } from './Tiles';
+export { default as Tile } from './Tile';
+export type { TileProps } from './Tile';

package/dist/components/organisms/Tiles/index.js

@@ -0,0 +1,3 @@
+export { default as Tiles } from './Tiles';
+export { default as Tile } from './Tile';
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/Tiles/index.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from '@faststore/components';
+export { default as TextArea } from './components/atoms/TextArea';
+export type { TextAreaProps } from './components/atoms/TextArea';
+export { default as Incentive } from './components/atoms/Incentive';
+export type { IncentiveProps } from './components/atoms/Incentive';
+export { Tile, Tiles } from './components/organisms/Tiles';
+export type { TilesProps, TileProps } from './components/organisms/Tiles';

package/dist/index.js

@@ -0,0 +1,7 @@
+export * from '@faststore/components';
+// Atoms
+export { default as TextArea } from './components/atoms/TextArea';
+export { default as Incentive } from './components/atoms/Incentive';
+// Organisms
+export { Tile, Tiles } from './components/organisms/Tiles';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA"}

package/dist/typings/PolymorphicGenerics.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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';
+type AsProp<C extends ElementType> = {
+    as?: C;
+};
+/**
+ * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
+ * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
+ * set of props.
+ */
+type ExtendableProps<ExtendedProps = Record<string, never>, OverrideProps = Record<string, never>> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;
+/**
+ * Allows for inheriting the props from the specified element type so that
+ * props like children, className & style work, as well as element-specific
+ * attributes like aria roles. The component (`C`) must be passed in.
+ */
+type InheritableElementProps<C extends ElementType, Props = Record<string, never>> = ExtendableProps<ComponentPropsWithoutRef<C>, Props>;
+export type PolymorphicComponentProps<C extends ElementType, Props = Record<string, never>> = InheritableElementProps<C, Props & AsProp<C>>;
+export type PolymorphicComponentPropsWithRef<C extends ElementType, P = Record<string, never>> = PolymorphicComponentProps<C, P> & {
+    ref?: ComponentPropsWithRef<C>['ref'];
+};
+export type PolymorphicRef<C extends ElementType> = PolymorphicComponentPropsWithRef<C>['ref'];
+export {};

package/dist/typings/PolymorphicGenerics.js

@@ -0,0 +1,8 @@
+/**
+ * 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/
+ */
+export {};
+//# sourceMappingURL=PolymorphicGenerics.js.map

package/dist/typings/PolymorphicGenerics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolymorphicGenerics.js","sourceRoot":"","sources":["../../src/typings/PolymorphicGenerics.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/dist/typings/index.d.ts

@@ -0,0 +1 @@
+export type { PolymorphicComponentProps, PolymorphicComponentPropsWithRef, PolymorphicRef, } from './PolymorphicGenerics';

package/dist/typings/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/typings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typings/index.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "3.0.24",
+  "version": "3.0.32-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -48,7 +48,7 @@
     }
   ],
   "dependencies": {
-    "@faststore/components": "^3.0.24",
+    "@faststore/components": "^3.0.32-alpha.0",
     "include-media": "^1.4.10",
     "modern-normalize": "^1.1.0",
     "react-swipeable": "^7.0.0",
@@ -71,5 +71,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "1cbf5056e2fd6d1b3e85268f585709c59ec9f63f"
+  "gitHead": "0535b4a1cea2f006ddf542caed8e8e51675fd43a"
 }

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

@@ -51,7 +51,7 @@
     color: var(--fs-input-field-color);
 
     &:placeholder-shown + label {
-      top: calc(1.5 * (var(--fs-input-field-size) / 2));
+      top: calc(50% - (var(--fs-input-field-size) / 2));
       overflow: hidden;
     }
 
@@ -80,7 +80,7 @@
     position: absolute;
     padding: var(--fs-input-field-label-padding);
     font-size: var(--fs-input-field-size);
-    line-height: 1.5;
+    line-height: var(--fs-input-field-size);
     color: var(--fs-input-field-label-color);
   }
 
@@ -120,6 +120,7 @@
       position: absolute;
       top: 0;
       right: 0;
+      height: 100%;
 
       [data-fs-button-wrapper]::before {
         position: absolute;

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

@@ -6,6 +6,7 @@
   // Default properties
   --fs-order-summary-padding                         : var(--fs-spacing-3);
   --fs-order-summary-margin-bottom                   : var(--fs-spacing-2);
+  --fs-order-summary-row-gap                         : 0;
 
   --fs-order-summary-discount-text-color             : var(--fs-color-success-text);
 
@@ -15,7 +16,10 @@
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
+  display: flex;
+  flex-direction: column;
   padding: var(--fs-order-summary-padding);
+  row-gap: var(--fs-order-summary-row-gap);
 
   li {
     display: flex;

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

@@ -39,7 +39,8 @@
   --fs-product-card-price-size               : var(--fs-text-size-base);
 
   // Out Of Stock
-  --fs-product-card-out-of-stock-bkg-color   : var(--fs-color-disabled-bkg);
+  --fs-product-card-out-of-stock-bkg-color   : transparent;
+  --fs-product-card-out-of-stock-border-color: var(--fs-color-neutral-1);
   --fs-product-card-out-of-stock-img-opacity : .5;
 
   // Wide
@@ -157,7 +158,8 @@
   // --------------------------------------------------------
 
   &[data-fs-product-card="out-of-stock"] {
-    --fs-product-card-bkg-color    : var(--fs-product-card-out-of-stock-bkg-color);
+    --fs-product-card-bkg-color       : var(--fs-product-card-out-of-stock-bkg-color);
+    --fs-product-card-border-color    : var(--fs-product-card-out-of-stock-border-color);
 
     [data-fs-product-card-image] { opacity: var(--fs-product-card-out-of-stock-img-opacity); }
 

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

@@ -42,7 +42,6 @@
   justify-content: center;
   width: var(--fs-qty-selector-width);
   height: var(--fs-qty-selector-height);
-  border-radius: var(--fs-qty-selector-border-radius);
   box-shadow: var(--fs-qty-selector-shadow);
 
   [data-quantity-selector-input] {
@@ -53,6 +52,7 @@
     color: var(--fs-qty-selector-text-color);
     text-align: center;
     border: var(--fs-qty-selector-border-width) solid var(--fs-qty-selector-border-color);
+    border-radius: var(--fs-qty-selector-border-radius);
   }
 
   [data-quantity-selector-button] {

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

@@ -32,7 +32,7 @@
   // Title
   --fs-toast-title-size                   : var(--fs-text-size-body);
   --fs-toast-title-weight                 : var(--fs-text-weight-bold);
-  --fs-toast-title-line-height            : var(--fs-scale);
+  --fs-toast-title-line-height            : 1.2;
   --fs-toast-title-margin-left            : var(--fs-spacing-3);
 
   // Message

package/src/components/organisms/PaymentMethods/styles.scss

@@ -44,17 +44,15 @@
     justify-content: space-between;
     margin-top: var(--fs-payment-methods-flags-margin-top);
 
-    li {
-      display: flex;
-      place-content: center;
-    }
-
     @include media("<notebook") {
       column-gap: var(--fs-grid-gap-2);
     }
   }
 
   [data-fs-payment-methods-flag] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: var(--fs-payment-methods-flag-width);
     height: var(--fs-payment-methods-flag-height);
     overflow: hidden;

package/src/components/organisms/RegionModal/styles.scss

@@ -14,7 +14,7 @@
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
-  [data-fs-region-modal-input] {
+  [data-fs-input-field] {
     margin-bottom: var(--fs-region-modal-margin-bottom);
   }
 

package/src/styles/base/tokens.scss

@@ -117,6 +117,8 @@
     // WEIGHT
     --fs-text-weight-light               : 300;
     --fs-text-weight-regular             : 400;
+    --fs-text-weight-medium              : 500;
+    --fs-text-weight-semibold            : 600;
     --fs-text-weight-bold                : 700;
     --fs-text-weight-black               : 900;
 
@@ -128,8 +130,8 @@
     // ensure consistency throughout the project.
     // Access https://type-scale.com and pick a scale that
     // suits the store's branding.
-    --fs-text-scale-mobile               : 1.13;
-    --fs-text-scale-desktop              : 1.25;
+    --fs-text-scale-mobile               : 2px;
+    --fs-text-scale-desktop              : 4px;
 
     --fs-scale                           : var(--fs-text-scale-mobile);
 
@@ -141,18 +143,19 @@
     --fs-text-size-base                  : 16px; // 1rem
 
     --fs-text-size-0                     : 12px; // Smallest
-    --fs-text-size-1                     : 14px; // Smaller                               // Mobile    Desktop
-    --fs-text-size-2                     : var(--fs-text-size-base);                      // 16px      16px
-    --fs-text-size-3                     : calc(var(--fs-text-size-2) * var(--fs-scale)); // 18px      20px
-    --fs-text-size-4                     : calc(var(--fs-text-size-3) * var(--fs-scale)); // 20px      25px
-    --fs-text-size-5                     : calc(var(--fs-text-size-4) * var(--fs-scale)); // 23px      31px
-    --fs-text-size-6                     : calc(var(--fs-text-size-5) * var(--fs-scale)); // 26px      39px
-    --fs-text-size-7                     : calc(var(--fs-text-size-6) * var(--fs-scale)); // 29px      48px
-    --fs-text-size-8                     : calc(var(--fs-text-size-7) * var(--fs-scale)); // 33px      61px
+    --fs-text-size-1                     : 14px; // Smaller                                     // Mobile    Desktop
+    --fs-text-size-2                     : var(--fs-text-size-base);                            // 16px      16px
+    --fs-text-size-3                     : calc(var(--fs-text-size-2) + var(--fs-scale));       // 18px      20px
+    --fs-text-size-4                     : calc(var(--fs-text-size-3) + var(--fs-scale));       // 20px      24px
+    --fs-text-size-5                     : calc(var(--fs-text-size-4) + var(--fs-scale));       // 22px      28px
+    --fs-text-size-6                     : calc(var(--fs-text-size-5) + var(--fs-scale));       // 24px      32px
+    --fs-text-size-7                     : calc(var(--fs-text-size-6) + (var(--fs-scale) * 2)); // 28px      40px
+    --fs-text-size-8                     : calc(var(--fs-text-size-7) + (var(--fs-scale) * 2)); // 32px      48px
+    --fs-text-size-9                     : calc(var(--fs-text-size-8) + (var(--fs-scale) * 2)); // 36px      56px
 
     // HIERARCHY SCALE
-    --fs-text-size-title-huge            : var(--fs-text-size-7);
-    --fs-text-size-title-page            : var(--fs-text-size-6);
+    --fs-text-size-title-huge            : var(--fs-text-size-8);
+    --fs-text-size-title-page            : var(--fs-text-size-7);
     --fs-text-size-title-product         : var(--fs-text-size-4);
     --fs-text-size-title-section         : var(--fs-text-size-4);
     --fs-text-size-title-subsection      : var(--fs-text-size-4);