@websolutespa/bom-mixer-ui 0.4.0 → 0.4.2

package/dist/cjs/index.js

@@ -636,25 +636,67 @@ export type CssResponsiveProps = ResponsiveProps<CssProps, string | number>;
 */
 
 const ObjectKeys = Object.keys;
-function getContainer(props, fluid) {
-  if (fluid) {
-    return `
-    max-width: calc(100% - var(--grid-column-gap) * 2);
-  `;
+function eachMedia(props, callback) {
+  const theme = props.theme;
+  if (theme.mediaQuery && typeof callback === 'function') {
+    return ObjectKeys(theme.mediaQuery).map(key => {
+      const value = theme.mediaQuery[key];
+      const rule = callback(key);
+      return rule ? `@media(min-width: ${value}) { ${rule} }` : '';
+    }).join('\n');
   } else {
-    const theme = props.theme;
-    if (theme.maxWidth && theme.mediaQuery) {
-      return ObjectKeys(theme.mediaQuery).map(key => {
-        const value = theme.mediaQuery[key];
-        return `
-@media(min-width: ${value}px) {
-  max-width: ${theme.container.maxWidth[key]};
+    return '';
+  }
 }
-`;
-      }).join('\n');
-    } else {
-      return '';
-    }
+function mediaMin(props, key) {
+  return props.theme.mediaQuery[key];
+}
+function mediaMax(props, key) {
+  const keys = Object.keys(props.theme.mediaQuery);
+  const index = keys.indexOf(key);
+  const nextKey = index !== -1 && index < keys.length - 1 ? keys[index + 1] : undefined;
+  return nextKey !== undefined ? `${parseInt(String(props.theme.mediaQuery[nextKey])) - .02}px` : undefined;
+}
+function mediaUp(props, key, rule) {
+  const min = mediaMin(props, key);
+  return min ? `@media(min-width: ${min}) {
+${rule}
+}` : '';
+}
+function mediaDown(props, key, rule) {
+  const max = mediaMax(props, key);
+  return max ? `@media(max-width: ${max}) {
+${rule}
+}` : rule;
+}
+function mediaBetween(props, minKey, maxKey, rule) {
+  const min = mediaMin(props, minKey);
+  const max = mediaMax(props, maxKey);
+  if (min && max) {
+    return `@media (min-width: ${min}) and (max-width: ${max}) {
+${rule}
+}`;
+  } else if (!max) {
+    return `@media(min-width: ${min}) {
+${rule}
+}`;
+  } else {
+    return `@media(max-width: ${max}) {
+${rule}
+}`;
+  }
+}
+function mediaOnly(props, key, rule) {
+  return mediaBetween(props, key, key, rule);
+}
+function getContainer(props) {
+  const theme = props.theme;
+  const variant = props.variant || 'default';
+  const container = theme.container[variant];
+  if (container && container.maxWidth) {
+    return eachMedia(props, key => `max-width: ${container.maxWidth[key]}`);
+  } else {
+    return '';
   }
 }
 function getCssResponsive(props, defaultValue) {
@@ -673,7 +715,7 @@ function getCssResponsive(props, defaultValue) {
         if (g2) {
           const size = g2.toLowerCase();
           // console.log('size', size, 'rule', rule);
-          return `@media(min-width: ${props.theme.mediaQuery[size]}px) {
+          return `@media(min-width: ${props.theme.mediaQuery[size]}) {
               ${rule}
             }`;
         } else {
@@ -705,7 +747,7 @@ function getAspectResponsive(props, defaultValue) {
         if (g2) {
           const size = g2.toLowerCase();
           // console.log('size', size, 'rule', rule);
-          return `@media(min-width: ${props.theme.mediaQuery[size]}px) {
+          return `@media(min-width: ${props.theme.mediaQuery[size]}) {
               ${rule}
             }`;
         } else {
@@ -725,37 +767,30 @@ function getGrid(props, defaultValue) {
     defaultValue = {};
   }
   props = Object.assign(Object.assign({}, defaultValue), props);
+  const variant = props.variant || 'default';
   return styled.css`
     ${props.columns ? styled.css`
       --grid-columns: ${props.columns};
-    ` : ''}
+    ` : styled.css`
+      --grid-columns: var(--grid-${variant}-columns, 12);
+    `}
+    ${props.size ? styled.css`
+      --grid-size: ${props.size};
+    ` : styled.css`
+      --grid-size: var(--grid-${variant}-size, 1fr);
+    `}
     ${props.columnGap ? styled.css`
       --grid-column-gap: ${props.columnGap};
-    ` : ''}
+    ` : eachMedia(props, key => `--grid-column-gap: var(--grid-${variant}-column-gap-${key}, 0);`)}
     ${props.rowGap ? styled.css`
       --grid-row-gap: ${props.rowGap};
-    ` : ''}
-    ${props.size ? styled.css`
-      --grid-size: ${props.size};
-    ` : ''}
+    ` : eachMedia(props, key => `--grid-row-gap: var(--grid-${variant}-row-gap-${key}, 0);`)}
     display: grid;
     grid-template-columns: repeat(var(--grid-columns), var(--grid-size));
     grid-column-gap: var(--grid-column-gap);
     grid-row-gap: var(--grid-row-gap);
   `;
 }
-function eachMedia(props, callback) {
-  const theme = props.theme;
-  if (theme.mediaQuery && typeof callback === 'function') {
-    return ObjectKeys(theme.mediaQuery).map(key => {
-      const value = theme.mediaQuery[key];
-      const rule = callback(key);
-      return rule ? `@media(min-width: ${value}px) { ${rule} }` : '';
-    }).join('\n');
-  } else {
-    return '';
-  }
-}
 function getVariant(variants, type) {
   return type && variants && variants[type] ? variants[type] || '' : '';
 }
@@ -1690,7 +1725,7 @@ const Code = styled__default.default.div`
 const ContainerBase = styled__default.default.div`
   width: 100%;
   margin: 0 auto;
-  ${props => getContainer(props, props.fluid)}
+  ${props => getContainer(props)}
   ${props => getCssResponsive(props)}
 `;
 const ContainerFluid = /*#__PURE__*/React.forwardRef((_a, ref) => {
@@ -1703,7 +1738,7 @@ const ContainerFluid = /*#__PURE__*/React.forwardRef((_a, ref) => {
     ref: ref,
     as: as
   }, props, {
-    fluid: true
+    variant: "fluid"
   }, {
     children: children
   }));
@@ -2646,7 +2681,7 @@ function getCssResponsiveColumn(props, defaultValue) {
         if (g2) {
           const size = g2.toLowerCase();
           // console.log('size', size, 'rule', rule);
-          return `@media(min-width: ${props.theme.mediaQuery[size]}px) {
+          return `@media(min-width: ${props.theme.mediaQuery[size]}) {
               ${rule}
             }`;
         } else {
@@ -2816,83 +2851,105 @@ var fontBase = {
 };
 var font = {
   display10: {
+    size: "Min(8rem, 20vw)",
+    lineHeight: "1.05"
+  },
+  display20: {
     size: "Min(6.25rem, 16vw)",
     lineHeight: "1.15"
   },
-  display20: {
+  display30: {
     size: "Min(4.5rem, 11.5vw)",
     lineHeight: "1.25"
   },
-  display30: {
+  display40: {
     size: "Min(2.75rem, 7vw)",
     lineHeight: "1.35"
   },
-  display40: {
+  heading10: {
     size: "Min(2.5rem, 6.4vw)",
     lineHeight: "1.45"
   },
-  display50: {
+  heading20: {
     size: "2.25rem",
     lineHeight: "1.55"
   },
-  display60: {
+  heading30: {
     size: "1.875rem",
     lineHeight: "1.65"
   },
-  display70: {
+  heading40: {
     size: "1.5rem",
     lineHeight: "1.75"
   },
-  display80: {
+  paragraph10: {
     size: "1.125rem",
     lineHeight: "1.85"
   },
-  display90: {
+  paragraph20: {
     size: "1rem",
     lineHeight: "1.95"
   },
-  display100: {
+  paragraph30: {
     size: "0.9rem",
     lineHeight: "2.05"
   },
-  display110: {
+  paragraph40: {
     size: "0.8rem",
     lineHeight: "2.15"
   },
-  display120: {
+  paragraph50: {
     size: "0.7rem",
     lineHeight: "2.25"
   }
 };
 var grid = {
-  columns: 12,
-  size: "1fr",
-  columnGap: "Max(4vw, Min(96px, calc(100% / 24)))",
-  rowGap: "0"
+  "default": {
+    columns: 12,
+    size: "1fr",
+    columnGap: {
+      xs: "Max(4vw, Min(96px, calc(100% / 24)))",
+      sm: "Max(4vw, Min(96px, calc(100% / 24)))",
+      md: "Max(4vw, Min(96px, calc(100% / 24)))",
+      lg: "Max(4vw, Min(96px, calc(100% / 24)))",
+      xl: "Max(4vw, Min(96px, calc(100% / 24)))"
+    },
+    rowGap: {
+      xs: "0",
+      sm: "0",
+      md: "0",
+      lg: "0",
+      xl: "0"
+    }
+  }
 };
 var mediaQuery = {
-  xs: 0,
-  sm: 768,
-  md: 1024,
-  lg: 1440,
-  xl: 1600
+  xs: "0",
+  sm: "768px",
+  md: "1024px",
+  lg: "1440px",
+  xl: "1600px"
 };
 var container = {
-  maxWidth: {
-    xs: "calc(100% - var(--grid-column-gap) * 2)",
-    sm: "calc(100% - var(--grid-column-gap) * 2)",
-    md: "calc(1024px - var(--grid-column-gap) * 2)",
-    lg: "calc(1440px - var(--grid-column-gap) * 2)",
-    xl: "calc(1600px - var(--grid-column-gap) * 2)"
+  "default": {
+    maxWidth: {
+      xs: "calc(100% - var(--grid-default-column-gap-xs) * 2)",
+      sm: "calc(100% - var(--grid-default-column-gap-sm) * 2)",
+      md: "calc(1024px - var(--grid-default-column-gap-md) * 2)",
+      lg: "calc(1440px - var(--grid-default-column-gap-lg) * 2)",
+      xl: "calc(1600px - var(--grid-default-column-gap-xl) * 2)"
+    }
+  },
+  fluid: {
+    maxWidth: {
+      xs: "calc(100% - var(--grid-default-column-gap-xs) * 2)",
+      sm: "calc(100% - var(--grid-default-column-gap-sm) * 2)",
+      md: "calc(100% - var(--grid-default-column-gap-md) * 2)",
+      lg: "calc(100% - var(--grid-default-column-gap-lg) * 2)",
+      xl: "calc(100% - var(--grid-default-column-gap-xl) * 2)"
+    }
   }
 };
-var maxWidth = {
-  xs: "calc(100% - var(--grid-column-gap) * 2)",
-  sm: "calc(100% - var(--grid-column-gap) * 2)",
-  md: "Min(928px, calc(100% - var(--grid-column-gap) * 2))",
-  lg: "Min(1344px, calc(100% - var(--grid-column-gap) * 4))",
-  xl: "Min(1204px, calc(100% - var(--grid-column-gap) * 6))"
-};
 var button = {
   size: {
     xs: "0.7rem",
@@ -2998,7 +3055,6 @@ var theme = {
   grid: grid,
   mediaQuery: mediaQuery,
   container: container,
-  maxWidth: maxWidth,
   button: button,
   form: form,
   card: card,
@@ -3017,49 +3073,59 @@ const CssVars = styled.css`
   --font-base-size-lg: 16px;
   --font-base-size-xl: 16px;
   --font-base-line-height: 1.5;
-  --font-display10-size: Min(6.25rem, 16vw);
-  --font-display10-line-height: 1.15;
-  --font-display20-size: Min(4.5rem, 11.5vw);
-  --font-display20-line-height: 1.25;
-  --font-display30-size: Min(2.75rem, 7vw);
-  --font-display30-line-height: 1.35;
-  --font-display40-size: Min(2.5rem, 6.4vw);
-  --font-display40-line-height: 1.45;
-  --font-display50-size: 2.25rem;
-  --font-display50-line-height: 1.55;
-  --font-display60-size: 1.875rem;
-  --font-display60-line-height: 1.65;
-  --font-display70-size: 1.5rem;
-  --font-display70-line-height: 1.75;
-  --font-display80-size: 1.125rem;
-  --font-display80-line-height: 1.85;
-  --font-display90-size: 1rem;
-  --font-display90-line-height: 1.95;
-  --font-display100-size: 0.9rem;
-  --font-display100-line-height: 2.05;
-  --font-display110-size: 0.8rem;
-  --font-display110-line-height: 2.15;
-  --font-display120-size: 0.7rem;
-  --font-display120-line-height: 2.25;
-  --grid-columns: 12;
-  --grid-size: 1fr;
-  --grid-column-gap: Max(4vw, Min(96px, calc(100% / 24)));
-  --grid-row-gap: 0;
+  --font-display10-size: Min(8rem, 20vw);
+  --font-display10-line-height: 1.05;
+  --font-display20-size: Min(6.25rem, 16vw);
+  --font-display20-line-height: 1.15;
+  --font-display30-size: Min(4.5rem, 11.5vw);
+  --font-display30-line-height: 1.25;
+  --font-display40-size: Min(2.75rem, 7vw);
+  --font-display40-line-height: 1.35;
+  --font-heading10-size: Min(2.5rem, 6.4vw);
+  --font-heading10-line-height: 1.45;
+  --font-heading20-size: 2.25rem;
+  --font-heading20-line-height: 1.55;
+  --font-heading30-size: 1.875rem;
+  --font-heading30-line-height: 1.65;
+  --font-heading40-size: 1.5rem;
+  --font-heading40-line-height: 1.75;
+  --font-paragraph10-size: 1.125rem;
+  --font-paragraph10-line-height: 1.85;
+  --font-paragraph20-size: 1rem;
+  --font-paragraph20-line-height: 1.95;
+  --font-paragraph30-size: 0.9rem;
+  --font-paragraph30-line-height: 2.05;
+  --font-paragraph40-size: 0.8rem;
+  --font-paragraph40-line-height: 2.15;
+  --font-paragraph50-size: 0.7rem;
+  --font-paragraph50-line-height: 2.25;
+  --grid-default-columns: 12;
+  --grid-default-size: 1fr;
+  --grid-default-column-gap-xs: Max(4vw, Min(96px, calc(100% / 24)));
+  --grid-default-column-gap-sm: Max(4vw, Min(96px, calc(100% / 24)));
+  --grid-default-column-gap-md: Max(4vw, Min(96px, calc(100% / 24)));
+  --grid-default-column-gap-lg: Max(4vw, Min(96px, calc(100% / 24)));
+  --grid-default-column-gap-xl: Max(4vw, Min(96px, calc(100% / 24)));
+  --grid-default-row-gap-xs: 0;
+  --grid-default-row-gap-sm: 0;
+  --grid-default-row-gap-md: 0;
+  --grid-default-row-gap-lg: 0;
+  --grid-default-row-gap-xl: 0;
   --media-query-xs: 0;
-  --media-query-sm: 768;
-  --media-query-md: 1024;
-  --media-query-lg: 1440;
-  --media-query-xl: 1600;
-  --container-max-width-xs: calc(100% - var(--grid-column-gap) * 2);
-  --container-max-width-sm: calc(100% - var(--grid-column-gap) * 2);
-  --container-max-width-md: calc(1024px - var(--grid-column-gap) * 2);
-  --container-max-width-lg: calc(1440px - var(--grid-column-gap) * 2);
-  --container-max-width-xl: calc(1600px - var(--grid-column-gap) * 2);
-  --max-width-xs: calc(100% - var(--grid-column-gap) * 2);
-  --max-width-sm: calc(100% - var(--grid-column-gap) * 2);
-  --max-width-md: Min(928px, calc(100% - var(--grid-column-gap) * 2));
-  --max-width-lg: Min(1344px, calc(100% - var(--grid-column-gap) * 4));
-  --max-width-xl: Min(1204px, calc(100% - var(--grid-column-gap) * 6));
+  --media-query-sm: 768px;
+  --media-query-md: 1024px;
+  --media-query-lg: 1440px;
+  --media-query-xl: 1600px;
+  --container-default-max-width-xs: calc(100% - var(--grid-default-column-gap-xs) * 2);
+  --container-default-max-width-sm: calc(100% - var(--grid-default-column-gap-sm) * 2);
+  --container-default-max-width-md: calc(1024px - var(--grid-default-column-gap-md) * 2);
+  --container-default-max-width-lg: calc(1440px - var(--grid-default-column-gap-lg) * 2);
+  --container-default-max-width-xl: calc(1600px - var(--grid-default-column-gap-xl) * 2);
+  --container-fluid-max-width-xs: calc(100% - var(--grid-default-column-gap-xs) * 2);
+  --container-fluid-max-width-sm: calc(100% - var(--grid-default-column-gap-sm) * 2);
+  --container-fluid-max-width-md: calc(100% - var(--grid-default-column-gap-md) * 2);
+  --container-fluid-max-width-lg: calc(100% - var(--grid-default-column-gap-lg) * 2);
+  --container-fluid-max-width-xl: calc(100% - var(--grid-default-column-gap-xl) * 2);
   --button-size-xs: 0.7rem;
   --button-size-sm: 0.8rem;
   --button-size-md: 1rem;
@@ -3131,6 +3197,35 @@ const CssVars = styled.css`
   --color-danger-700: #B11F04;
   --color-danger-800: #8F0F02;
   --color-danger-900: #760301;
+
+    --grid-column-gap: var(--grid-default-column-gap-xs);
+    --grid-row-gap: var(--grid-default-row-gap-xs);
+    --container-max-width: var(--container-default-max-width-xs);
+
+  @media (min-width: 768px) { 
+    --grid-column-gap: var(--grid-default-column-gap-sm);
+    --grid-row-gap: var(--grid-default-row-gap-sm);
+    --container-max-width: var(--container-default-max-width-sm);
+  }
+
+  @media (min-width: 1024px) { 
+    --grid-column-gap: var(--grid-default-column-gap-md);
+    --grid-row-gap: var(--grid-default-row-gap-md);
+    --container-max-width: var(--container-default-max-width-md);
+  }
+
+  @media (min-width: 1440px) { 
+    --grid-column-gap: var(--grid-default-column-gap-lg);
+    --grid-row-gap: var(--grid-default-row-gap-lg);
+    --container-max-width: var(--container-default-max-width-lg);
+  }
+
+  @media (min-width: 1600px) { 
+    --grid-column-gap: var(--grid-default-column-gap-xl);
+    --grid-row-gap: var(--grid-default-row-gap-xl);
+    --container-max-width: var(--container-default-max-width-xl);
+  }
+
 }
 `;
 
@@ -3536,7 +3631,7 @@ function getMediaQueryColumn(props) {
       const width = theme.mediaQuery[key];
       return key === 'xs' ? `grid-column: span ${columns};
         ` : `
-        @media(min-width: ${width}px) {
+        @media(min-width: ${width}) {
           grid-column: span ${columns};
         }
       `;
@@ -7597,12 +7692,12 @@ function FormTester(props) {
     }, {
       children: [jsxRuntime.jsxs(Flex.Col, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display80",
+          variant: "paragraph10",
           fontWeight: "700"
         }, {
           children: "Form Tester"
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display100",
+          variant: "paragraph30",
           marginBottom: "1em"
         }, {
           children: "this component is visible only during development."
@@ -8081,7 +8176,7 @@ const RadioCardTitle = /*#__PURE__*/React.forwardRef((_a, ref) => {
     props = __rest(_a, ["as", "className"]);
   const classNames = bomCore.getClassNames('title', className);
   return jsxRuntime.jsx(Text, Object.assign({
-    variant: "display70",
+    variant: "heading40",
     fontWeight: "700",
     className: classNames,
     ref: ref
@@ -8109,7 +8204,7 @@ const RadioCardExtra = /*#__PURE__*/React.forwardRef((_a, ref) => {
     props = __rest(_a, ["as", "className"]);
   const classNames = bomCore.getClassNames('extra', className);
   return jsxRuntime.jsx(Text, Object.assign({
-    variant: "display100",
+    variant: "paragraph30",
     whiteSpace: "nowrap",
     className: classNames,
     ref: ref
@@ -9485,7 +9580,7 @@ const withPageTransition = OriginalComponent => {
             variants: textVariants
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              variant: "display10"
+              variant: "display20"
             }, {
               children: page.title
             }))
@@ -9540,7 +9635,7 @@ const Carousel1 = _a => {
       textAlign: "center"
     }, {
       children: item.title && jsxRuntime.jsx(Text, Object.assign({
-        variant: "display20",
+        variant: "display30",
         marginBottom: "4rem"
       }, {
         children: item.title
@@ -9577,7 +9672,7 @@ const Carousel1 = _a => {
               variant: "nav"
             }, {
               children: jsxRuntime.jsx(Text, {
-                variant: "display80",
+                variant: "paragraph10",
                 marginTop: "1rem",
                 dangerouslySetInnerHTML: {
                   __html: item.title
@@ -9612,7 +9707,7 @@ const Download1 = _ref => {
     children: jsxRuntime.jsx(Container, {
       children: jsxRuntime.jsxs(Flex.Col, {
         children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-          variant: "display30",
+          variant: "display40",
           marginBottom: "3rem",
           textAlign: "center"
         }, {
@@ -9689,7 +9784,7 @@ const MediaFull2 = _ref => {
         aspectRatio: 16 / 10,
         item: item.media
       }), item.media.alt && jsxRuntime.jsx(Text, Object.assign({
-        variant: "display80",
+        variant: "paragraph10",
         marginTop: "1rem"
       }, {
         children: item.media.alt
@@ -9727,7 +9822,7 @@ const MediaMedia1 = _ref => {
           children: [jsxRuntime.jsx(Media, {
             item: media
           }), media.alt && jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             marginTop: "1rem"
           }, {
             children: media.alt
@@ -9758,12 +9853,12 @@ const NotFound = _ref => {
       textAlign: "center"
     }, {
       children: [jsxRuntime.jsxs(Text, Object.assign({
-        variant: "display50",
+        variant: "heading20",
         marginBottom: "1rem"
       }, {
         children: ["not found ", item.schema]
       })), item.title && jsxRuntime.jsx(Text, Object.assign({
-        variant: "display30",
+        variant: "display40",
         marginBottom: "1rem"
       }, {
         children: item.title
@@ -9833,7 +9928,7 @@ const Related1Card = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            variant: "display60",
+            variant: "heading30",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -9855,7 +9950,7 @@ const Related1 = _ref => {
   }, {
     children: jsxRuntime.jsxs(Container, {
       children: [item.title && jsxRuntime.jsx(Text, {
-        variant: "display30",
+        variant: "display40",
         textAlign: "center",
         marginBottom: "4rem",
         dangerouslySetInnerHTML: {
@@ -9905,7 +10000,7 @@ const SizesColors1 = _ref => {
         }, {
           children: jsxRuntime.jsxs(Flex.Col, {
             children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-              variant: "display30",
+              variant: "display40",
               marginBottom: "3rem"
             }, {
               children: item.title
@@ -9975,7 +10070,7 @@ const Text1 = _ref => {
         margin: "0 auto"
       }, {
         children: item.description && jsxRuntime.jsx(Text, {
-          variant: "display50",
+          variant: "heading20",
           lineHeight: "2",
           dangerouslySetInnerHTML: {
             __html: item.description
@@ -10012,7 +10107,7 @@ const TextAside1 = _ref => {
           sm: 8
         }, {
           children: jsxRuntime.jsx(Text, {
-            variant: "display80",
+            variant: "paragraph10",
             lineHeight: "2",
             dangerouslySetInnerHTML: {
               __html: item.description
@@ -10028,14 +10123,14 @@ const TextAside1 = _ref => {
               gap: "1rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display60"
+                variant: "heading30"
               }, {
                 children: aside.title
               })), jsxRuntime.jsx(Flex.Col, Object.assign({
                 gap: "0.5rem"
               }, {
                 children: aside.items.map((text, t) => jsxRuntime.jsx(Text, Object.assign({
-                  variant: "display80"
+                  variant: "paragraph10"
                 }, {
                   children: text
                 }), t))
@@ -10078,17 +10173,17 @@ const TextMedia1 = _ref => {
             gap: "3rem"
           }, {
             children: [item.title && jsxRuntime.jsx(Text, {
-              variant: "display30",
+              variant: "display40",
               dangerouslySetInnerHTML: {
                 __html: item.title
               }
             }), item.abstract && jsxRuntime.jsx(Text, {
-              variant: "display60",
+              variant: "heading30",
               dangerouslySetInnerHTML: {
                 __html: item.abstract
               }
             }), item.description && jsxRuntime.jsx(Text, {
-              variant: "display70",
+              variant: "heading40",
               dangerouslySetInnerHTML: {
                 __html: item.description
               }
@@ -10102,7 +10197,7 @@ const TextMedia1 = _ref => {
             aspectRatio: 880 / 1120,
             item: item.media
           }), item.media.alt && jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             marginTop: "1rem"
           }, {
             children: item.media.alt
@@ -10138,7 +10233,7 @@ const TextText1 = _ref => {
         columnGap: "var(--grid-column-gap)"
       }, {
         children: item.description && jsxRuntime.jsx(Text, {
-          variant: "display80",
+          variant: "paragraph10",
           lineHeight: "2",
           dangerouslySetInnerHTML: {
             __html: item.description
@@ -10260,7 +10355,7 @@ const AuthForgot = _ref => {
         rowGap: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display60",
+          variant: "heading30",
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
@@ -10332,17 +10427,17 @@ const AuthForgotSuccess = _ref => {
       rowGap: "1rem"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display60",
+        variant: "heading30",
         fontWeight: "700"
       }, {
         children: "Password recovery"
       })), jsxRuntime.jsx(Text, Object.assign({
-        variant: "display90",
+        variant: "paragraph20",
         marginBottom: "2rem"
       }, {
         children: "An email has been sent. please check your inbox."
       })), jsxRuntime.jsx(Text, Object.assign({
-        variant: "display60",
+        variant: "heading30",
         fontWeight: "700"
       }, {
         children: "Ready to login?"
@@ -10445,7 +10540,7 @@ const AuthLogin = _ref => {
         rowGap: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display60",
+          variant: "heading30",
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
@@ -10602,13 +10697,13 @@ const AuthRegister = _ref => {
         rowGap: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display60",
+          variant: "heading30",
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
           children: "Registration"
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display90",
+          variant: "paragraph20",
           marginBottom: "2rem"
         }, {
           children: "Fill out the form to request access. You will receive a confirmation email after activation."
@@ -10679,17 +10774,17 @@ const AuthRegisterSuccess = _ref => {
       rowGap: "1rem"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display60",
+        variant: "heading30",
         fontWeight: "700"
       }, {
         children: "Thank you for registering"
       })), jsxRuntime.jsx(Text, Object.assign({
-        variant: "display90",
+        variant: "paragraph20",
         marginBottom: "2rem"
       }, {
         children: "A confimation email has been sent to your address. Please check your inbox."
       })), jsxRuntime.jsx(Text, Object.assign({
-        variant: "display60",
+        variant: "heading30",
         fontWeight: "700"
       }, {
         children: "Ready to login?"
@@ -11047,16 +11142,16 @@ const BlogCard = _a => {
         flex: "1"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display50"
+          variant: "heading20"
         }, {
           children: item.title
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display80",
+          variant: "paragraph10",
           marginBottom: "1rem"
         }, {
           children: dateTimeFormat(item.date)
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display80"
+          variant: "paragraph10"
         }, {
           children: item.abstract
         }))]
@@ -11074,7 +11169,7 @@ const BlogCard = _a => {
               circle: true,
               item: item.author.media
             }), jsxRuntime.jsx(Text, Object.assign({
-              variant: "display80",
+              variant: "paragraph10",
               fontWeight: "700"
             }, {
               children: item.author.fullName
@@ -11095,7 +11190,7 @@ const BlogMore = _ref => {
   }, {
     children: jsxRuntime.jsxs(Container, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display20",
+        variant: "display30",
         fontWeight: "700",
         marginBottom: "3rem"
       }, {
@@ -11134,12 +11229,12 @@ const BlogProposition = _a => {
           md: 6
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display40",
+            variant: "heading10",
             marginBottom: "1rem"
           }, {
             children: item.title
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             marginBottom: "1rem"
           }, {
             children: dateTimeFormat(item.date)
@@ -11148,7 +11243,7 @@ const BlogProposition = _a => {
           md: 6
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             maxWidth: "60ch"
           }, {
             children: item.abstract
@@ -11164,7 +11259,7 @@ const BlogProposition = _a => {
                 circle: true,
                 item: item.author.media
               }), jsxRuntime.jsx(Text, Object.assign({
-                variant: "display80",
+                variant: "paragraph10",
                 fontWeight: "700"
               }, {
                 children: item.author.fullName
@@ -11237,14 +11332,14 @@ const CartMiniItem = _ref => {
             href: item.href || ''
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              variant: "display90",
+              variant: "paragraph20",
               fontWeight: "700",
               onClick: closeDrawer
             }, {
               children: item.title
             }))
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display100",
+            variant: "paragraph30",
             marginBottom: "1rem"
           }, {
             children: item.abstract
@@ -11317,7 +11412,7 @@ const CartMini = _ref => {
   }, {
     children: [jsxRuntime.jsx(Drawer.Title, {
       children: jsxRuntime.jsx(Text, Object.assign({
-        variant: "display80",
+        variant: "paragraph10",
         fontWeight: "700"
       }, {
         children: "Shopping cart"
@@ -11434,12 +11529,12 @@ const CategoriesPropositionCard = _a => {
         justifyContent: "flex-end"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display80",
+          variant: "paragraph10",
           fontWeight: "700"
         }, {
           children: item.title
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display100"
+          variant: "paragraph30"
         }, {
           children: 'Shop now'
         }))]
@@ -11461,7 +11556,7 @@ const CategoriesProposition = _ref => {
         marginBottom: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display70",
+          variant: "heading40",
           fontWeight: "700"
         }, {
           children: "Shop by category"
@@ -11537,12 +11632,12 @@ const CategoryHero = _a => {
           textAlign: "center"
         }, {
           children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-            variant: "display20",
+            variant: "display30",
             fontWeight: "700"
           }, {
             children: item.title
           })), item.abstract && jsxRuntime.jsx(Text, {
-            variant: "display80",
+            variant: "paragraph10",
             lineHeight: "2",
             maxWidth: "76ch",
             dangerouslySetInnerHTML: {
@@ -11562,12 +11657,12 @@ const CategoryHero = _a => {
         textAlign: "center"
       }, {
         children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-          variant: "display20",
+          variant: "display30",
           fontWeight: "700"
         }, {
           children: item.title
         })), item.abstract && jsxRuntime.jsx(Text, {
-          variant: "display80",
+          variant: "paragraph10",
           lineHeight: "2",
           maxWidth: "76ch",
           dangerouslySetInnerHTML: {
@@ -11609,13 +11704,13 @@ const CategoryProposition = _ref => {
               textAlign: "center"
             }, {
               children: [item.abstract && jsxRuntime.jsx(Text, Object.assign({
-                variant: "display40",
+                variant: "heading10",
                 fontWeight: "700",
                 marginBottom: "1rem"
               }, {
                 children: item.abstract
               })), item.description && jsxRuntime.jsx(Text, Object.assign({
-                variant: "display80",
+                variant: "paragraph10",
                 maxWidth: "65ch",
                 marginBottom: "2rem"
               }, {
@@ -11653,12 +11748,12 @@ const CheckoutEmpty = _ref => {
           textAlign: "center"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display40",
+            variant: "heading10",
             fontWeight: "700"
           }, {
             children: "Your cart is empty."
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -11696,12 +11791,12 @@ const CheckoutError = _ref => {
           textAlign: "center"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display40",
+            variant: "heading10",
             fontWeight: "700"
           }, {
             children: "Payment unsuccesful"
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -11713,12 +11808,12 @@ const CheckoutError = _ref => {
           textAlign: "center"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display40",
+            variant: "heading10",
             fontWeight: "700"
           }, {
             children: "Order not found"
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -11740,7 +11835,7 @@ const OrderAddress = _ref => {
     gap: "1rem"
   }, {
     children: [title && jsxRuntime.jsx(Text, Object.assign({
-      variant: "display60",
+      variant: "heading30",
       fontWeight: "700"
     }, {
       children: title
@@ -11863,12 +11958,12 @@ const OrderRegister = _ref => {
       }, {
         children: registered ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display60",
+            variant: "heading30",
             fontWeight: "700"
           }, {
             children: "Account created"
           })), jsxRuntime.jsxs(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -11876,12 +11971,12 @@ const OrderRegister = _ref => {
           }))]
         }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display60",
+            variant: "heading30",
             fontWeight: "700"
           }, {
             children: "Checkout faster next time"
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -11966,14 +12061,14 @@ const OrderSummaryItem = _ref => {
               variant: "nav"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                variant: "display90",
+                variant: "paragraph20",
                 fontWeight: "700"
               }, {
                 children: item.title
               }))
             }))
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display100"
+            variant: "paragraph30"
           }, {
             children: item.abstract
           }))]
@@ -12013,7 +12108,7 @@ const OrderSummary = _ref => {
     children: jsxRuntime.jsx(Section, {
       children: jsxRuntime.jsxs(Container, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display60",
+          variant: "heading30",
           fontWeight: "700"
         }, {
           children: "Order Summary"
@@ -12193,7 +12288,7 @@ const CheckoutSuccess = _ref => {
           justifyContent: "space-between"
         }, {
           children: [jsxRuntime.jsxs(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             fontWeight: "700"
           }, {
             children: ["Order #", order.id, " ", jsxRuntime.jsx(Badge, {
@@ -12218,12 +12313,12 @@ const CheckoutSuccess = _ref => {
           textAlign: "center"
         }, {
           children: [jsxRuntime.jsxs(Text, Object.assign({
-            variant: "display40",
+            variant: "heading10",
             fontWeight: "700"
           }, {
             children: ["Thank you for your order, ", order.user ? order.user.firstName : order.shippingAddress.firstName]
           })), jsxRuntime.jsxs(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -12321,14 +12416,14 @@ const CheckoutBasketItem = _ref => {
               variant: "nav"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                variant: "display90",
+                variant: "paragraph20",
                 fontWeight: "700"
               }, {
                 children: item.title
               }))
             }))
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display100"
+            variant: "paragraph30"
           }, {
             children: item.abstract
           }))]
@@ -12341,7 +12436,7 @@ const CheckoutBasketItem = _ref => {
       children: [jsxRuntime.jsx(Text, {
         children: currency(item.price)
       }), item.fullPrice > item.price && jsxRuntime.jsx(Text, Object.assign({
-        variant: "display110",
+        variant: "paragraph40",
         textDecoration: "line-through",
         color: "var(--color-neutral-400)"
       }, {
@@ -12394,7 +12489,7 @@ const CheckoutBasketItem = _ref => {
       children: [jsxRuntime.jsx(Text, {
         children: currency(item.price * item.qty)
       }), item.fullPrice > item.price && jsxRuntime.jsx(Text, Object.assign({
-        variant: "display110",
+        variant: "paragraph40",
         textDecoration: "line-through",
         color: "var(--color-neutral-400)"
       }, {
@@ -12515,7 +12610,7 @@ const CheckoutBasket = _ref => {
               children: [jsxRuntime.jsx(Text, {
                 children: currency(subTotal)
               }), subTotalFull > subTotal && jsxRuntime.jsx(Text, Object.assign({
-                variant: "display110",
+                variant: "paragraph40",
                 textDecoration: "line-through",
                 color: "var(--color-neutral-400)"
               }, {
@@ -12541,12 +12636,12 @@ const CheckoutBasket = _ref => {
                 marginLeft: "0.5rem"
               }, {
                 children: [jsxRuntime.jsx(Text, Object.assign({
-                  variant: "display90",
+                  variant: "paragraph20",
                   fontWeight: "700"
                 }, {
                   children: "The shipping is on us"
                 })), jsxRuntime.jsx(Text, Object.assign({
-                  variant: "display100"
+                  variant: "paragraph30"
                 }, {
                   children: "Free, contactless delivery for payments over the minimum fare."
                 }))]
@@ -12567,12 +12662,12 @@ const CheckoutBasket = _ref => {
                 marginLeft: "0.5rem"
               }, {
                 children: [jsxRuntime.jsx(Text, Object.assign({
-                  variant: "display90",
+                  variant: "paragraph20",
                   fontWeight: "700"
                 }, {
                   children: "Do you have a discount code?"
                 })), jsxRuntime.jsx(Text, Object.assign({
-                  variant: "display100"
+                  variant: "paragraph30"
                 }, {
                   children: "You can enter it in the following steps, before the final checkout."
                 }))]
@@ -12703,12 +12798,12 @@ const CheckoutDelivery = _ref => {
               rowGap: "2rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display40",
+                variant: "heading10",
                 fontWeight: "700"
               }, {
                 children: "Select the delivery method"
               })), jsxRuntime.jsx(Text, Object.assign({
-                variant: "display80",
+                variant: "paragraph10",
                 marginBottom: "1rem",
                 maxWidth: "60ch"
               }, {
@@ -13318,13 +13413,13 @@ const CheckoutUserInfo = _ref => {
               rowGap: "1rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display40",
+                variant: "heading10",
                 fontWeight: "700",
                 marginBottom: "1rem"
               }, {
                 children: "Reference address"
               })), jsxRuntime.jsx(Text, Object.assign({
-                variant: "display80",
+                variant: "paragraph10",
                 marginBottom: "1rem",
                 maxWidth: "60ch"
               }, {
@@ -13452,12 +13547,12 @@ const CheckoutInfo = _ref => {
                     alignItems: "flex-start"
                   }, {
                     children: [jsxRuntime.jsx(Text, Object.assign({
-                      variant: "display40",
+                      variant: "heading10",
                       fontWeight: "700"
                     }, {
                       children: "Login"
                     })), jsxRuntime.jsx(Text, Object.assign({
-                      variant: "display80",
+                      variant: "paragraph10",
                       marginBottom: "1rem",
                       maxWidth: "60ch"
                     }, {
@@ -13481,12 +13576,12 @@ const CheckoutInfo = _ref => {
                       marginBottom: "3rem"
                     }, {
                       children: [jsxRuntime.jsx(Text, Object.assign({
-                        variant: "display40",
+                        variant: "heading10",
                         fontWeight: "700"
                       }, {
                         children: "Register"
                       })), jsxRuntime.jsx(Text, Object.assign({
-                        variant: "display80",
+                        variant: "paragraph10",
                         marginBottom: "1rem",
                         maxWidth: "60ch"
                       }, {
@@ -13502,12 +13597,12 @@ const CheckoutInfo = _ref => {
                       alignItems: "flex-start"
                     }, {
                       children: [jsxRuntime.jsx(Text, Object.assign({
-                        variant: "display40",
+                        variant: "heading10",
                         fontWeight: "700"
                       }, {
                         children: "Proceed as guest"
                       })), jsxRuntime.jsx(Text, Object.assign({
-                        variant: "display80",
+                        variant: "paragraph10",
                         marginBottom: "1rem",
                         maxWidth: "60ch"
                       }, {
@@ -13674,7 +13769,7 @@ const CheckoutPayment = _ref => {
             rowGap: "2rem"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              variant: "display40",
+              variant: "heading10",
               fontWeight: "700"
             }, {
               children: "Select a payment method"
@@ -13898,12 +13993,12 @@ const CheckoutReview = _ref => {
                 rowGap: "2rem"
               }, {
                 children: [jsxRuntime.jsx(Text, Object.assign({
-                  variant: "display40",
+                  variant: "heading10",
                   fontWeight: "700"
                 }, {
                   children: "Reference store"
                 })), jsxRuntime.jsx(Text, Object.assign({
-                  variant: "display80",
+                  variant: "paragraph10",
                   marginBottom: "1rem"
                 }, {
                   children: "Your suggested closest sales outlet for self-service pickup."
@@ -13911,7 +14006,7 @@ const CheckoutReview = _ref => {
                   marginBottom: "1rem"
                 }, {
                   children: [jsxRuntime.jsx(Text, Object.assign({
-                    variant: "display70",
+                    variant: "heading40",
                     fontWeight: "700"
                   }, {
                     children: selectedStore.name
@@ -13952,13 +14047,13 @@ const CheckoutReview = _ref => {
                       gap: "1rem"
                     }, {
                       children: [jsxRuntime.jsx(Text, Object.assign({
-                        variant: "display40",
+                        variant: "heading10",
                         fontWeight: "700"
                       }, {
                         children: "Shipping address"
                       })), jsxRuntime.jsxs(Flex.Col, {
                         children: [jsxRuntime.jsxs(Text, Object.assign({
-                          variant: "display70",
+                          variant: "heading40",
                           fontWeight: "700"
                         }, {
                           children: [shippingAddress.firstName, " ", shippingAddress.lastName]
@@ -13980,13 +14075,13 @@ const CheckoutReview = _ref => {
                       gap: "1rem"
                     }, {
                       children: [jsxRuntime.jsx(Text, Object.assign({
-                        variant: "display40",
+                        variant: "heading10",
                         fontWeight: "700"
                       }, {
                         children: "Billing address"
                       })), jsxRuntime.jsxs(Flex.Col, {
                         children: [jsxRuntime.jsxs(Text, Object.assign({
-                          variant: "display70",
+                          variant: "heading40",
                           fontWeight: "700"
                         }, {
                           children: [billingAddress.firstName, " ", billingAddress.lastName]
@@ -14068,7 +14163,7 @@ const CheckoutReview = _ref => {
                       children: [jsxRuntime.jsx(Text, {
                         children: currency(item.qty * item.price)
                       }), item.fullPrice > item.price && jsxRuntime.jsx(Text, Object.assign({
-                        variant: "display110",
+                        variant: "paragraph40",
                         textDecoration: "line-through",
                         color: "var(--color-neutral-400)"
                       }, {
@@ -14096,7 +14191,7 @@ const CheckoutReview = _ref => {
                     children: [jsxRuntime.jsx(Text, {
                       children: currency(subTotal)
                     }), subTotalFull > subTotal && jsxRuntime.jsx(Text, Object.assign({
-                      variant: "display110",
+                      variant: "paragraph40",
                       textDecoration: "line-through",
                       color: "var(--color-neutral-400)"
                     }, {
@@ -14412,7 +14507,6 @@ const Colors = props => {
   const theme = React.useContext(styled.ThemeContext);
   const color = theme.color;
   const keys = Object.keys(color);
-  // const sizes = new Array(9).fill().map((_, i) => (i + 1) * 100);
   return jsxRuntime.jsx(Section, {
     children: keys.map(key => jsxRuntime.jsx(Flex.Row, Object.assign({
       gap: "0"
@@ -14428,16 +14522,17 @@ const Colors = props => {
         backgroundColor: color[key][size]
       }, {
         children: [jsxRuntime.jsxs(Text, Object.assign({
-          variant: "display100",
-          color: color[key][parseInt(size) >= 500 ? '100' : '900']
+          variant: "paragraph50",
+          color: color[key][parseInt(size) >= 500 ? '100' : '900'],
+          lineHeight: "1.2"
         }, {
-          children: [key, " ", size]
+          children: [key, "-", size]
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display100",
+          variant: "paragraph30",
           color: color[key][parseInt(size) >= 500 ? '100' : '900']
         }, {
           children: color[key][size]
-        })), false ]
+        }))]
       }), size))
     }), key))
   });
@@ -14545,7 +14640,7 @@ const ContactCard = _a => {
           paddingTop: "1rem"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display100",
+            variant: "paragraph30",
             fontWeight: "700"
           }, {
             children: "Press requests"
@@ -14568,7 +14663,7 @@ const ContactCard = _a => {
           paddingTop: "1rem"
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            variant: "display100",
+            variant: "paragraph30",
             fontWeight: "700"
           }, {
             children: item.note
@@ -14802,19 +14897,19 @@ const ContactHero = _ref => {
             height: "100%"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              variant: "display100",
+              variant: "paragraph30",
               marginBottom: "0.5rem",
               textTransform: "uppercase"
             }, {
               children: "Contacts"
             })), jsxRuntime.jsx(Text, Object.assign({
-              variant: "display10",
+              variant: "display20",
               marginBottom: "2rem",
               fontWeight: "700"
             }, {
               children: "Contacts"
             })), jsxRuntime.jsxs(Text, Object.assign({
-              variant: "display70",
+              variant: "heading40",
               marginBottom: "3rem"
             }, {
               children: [jsxRuntime.jsx("span", {
@@ -14898,7 +14993,7 @@ const Footer = props => {
               height: "40px",
               color: "var(--color-neutral-100)"
             }), jsxRuntime.jsx(Text, Object.assign({
-              variant: "display70",
+              variant: "heading40",
               marginTop: "0.7rem"
             }, {
               children: "Making the world a better place through constructing elegant hierarchies."
@@ -14963,7 +15058,7 @@ const Footer = props => {
               fontSize: "0.9rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display80",
+                variant: "paragraph10",
                 color: "var(--color-neutral-500)"
               }, {
                 children: "Solutions"
@@ -15019,7 +15114,7 @@ const Footer = props => {
               fontSize: "0.9rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display80",
+                variant: "paragraph10",
                 color: "var(--color-neutral-500)"
               }, {
                 children: "Support"
@@ -15075,7 +15170,7 @@ const Footer = props => {
               fontSize: "0.9rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display80",
+                variant: "paragraph10",
                 color: "var(--color-neutral-500)"
               }, {
                 children: "Company"
@@ -15141,7 +15236,7 @@ const Footer = props => {
               fontSize: "0.9rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display80",
+                variant: "paragraph10",
                 color: "var(--color-neutral-500)"
               }, {
                 children: "Legal"
@@ -15186,7 +15281,7 @@ const Footer = props => {
               justifyContent: "space-between"
             }, {
               children: [jsxRuntime.jsxs(Text, Object.assign({
-                variant: "display100",
+                variant: "paragraph30",
                 color: "var(--color-neutral-500)"
               }, {
                 children: ["\u00A9", getYear(), " websolute spa - PI 02063520411 - Capitale sociale Eur 194.084,34 i.v., REA PU"]
@@ -15213,7 +15308,7 @@ const Footer = props => {
         justifyContent: "space-between"
       }, {
         children: [jsxRuntime.jsxs(Text, Object.assign({
-          variant: "display100",
+          variant: "paragraph30",
           color: "var(--color-neutral-500)"
         }, {
           children: ["\u00A9", getYear(), " websolute spa - PI 02063520411 - Capitale sociale Eur 194.084,34 i.v., REA PU"]
@@ -15292,7 +15387,7 @@ const MarketsAndLanguagesDrawer = _ref => {
         fontSize: "0.9rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display80",
+          variant: "paragraph10",
           fontWeight: "700"
         }, {
           children: item.title
@@ -15344,7 +15439,7 @@ const HeaderCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            variant: "display70",
+            variant: "heading40",
             dangerouslySetInnerHTML: {
               __html: item.title
             }
@@ -15677,7 +15772,7 @@ const Header = props => {
                   width: "3rem",
                   height: "3rem"
                 }), jsxRuntime.jsx(Text, Object.assign({
-                  variant: "display60",
+                  variant: "heading30",
                   padding: "0 0.5rem"
                 }, {
                   children: "Mixer"
@@ -15811,7 +15906,7 @@ const Header = props => {
             var _a;
             return ['product_index'].includes(x.id.toString()) ? jsxRuntime.jsx(StyledAccordion, Object.assign({
               title: jsxRuntime.jsx(Text, Object.assign({
-                variant: "display70"
+                variant: "heading40"
               }, {
                 children: x.title
               }))
@@ -15842,7 +15937,7 @@ const Header = props => {
                 onClick: () => onNav()
               }, {
                 children: jsxRuntime.jsx(Text, Object.assign({
-                  variant: "display70"
+                  variant: "heading40"
                 }, {
                   children: x.title
                 }))
@@ -15858,7 +15953,7 @@ const Header = props => {
     }, {
       children: [jsxRuntime.jsx(Modal.Title, {
         children: jsxRuntime.jsx(Text, Object.assign({
-          variant: "display70",
+          variant: "heading40",
           fontWeight: "700"
         }, {
           children: "Foreign Market detected"
@@ -15920,7 +16015,7 @@ const Hero = _a => {
               padding: "3rem 0"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                variant: "display20",
+                variant: "display30",
                 fontWeight: "700"
               }, {
                 children: item.title
@@ -15930,7 +16025,7 @@ const Hero = _a => {
               padding: "3rem 0"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                variant: "display60"
+                variant: "heading30"
               }, {
                 children: item.abstract
               }))
@@ -15976,7 +16071,7 @@ const Icons = props => {
       padding: "3rem 0"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display40",
+        variant: "heading10",
         fontWeight: "700",
         marginBottom: "2rem"
       }, {
@@ -16015,7 +16110,7 @@ const Icons = props => {
             textAlign: "center"
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              variant: "display100"
+              variant: "paragraph30"
             }, {
               children: icon.key
             }))
@@ -16029,7 +16124,7 @@ const Icons = props => {
     }, {
       children: [jsxRuntime.jsx(Modal.Title, {
         children: jsxRuntime.jsx(Text, Object.assign({
-          variant: "display70",
+          variant: "heading40",
           fontWeight: "700"
         }, {
           children: icon && icon.key
@@ -16092,7 +16187,7 @@ const MagazineSearchCard = _a => {
         gap: "2rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display100",
+          variant: "paragraph30",
           flex: "100px"
         }, {
           children: dateTimeFormat(item.date)
@@ -16102,7 +16197,7 @@ const MagazineSearchCard = _a => {
           gap: "1rem"
         }, {
           children: [jsxRuntime.jsx(Text, {
-            variant: "display60",
+            variant: "heading30",
             lineHeight: "1.2",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
@@ -16111,7 +16206,7 @@ const MagazineSearchCard = _a => {
             variant: "nav"
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              variant: "display90",
+              variant: "paragraph20",
               textTransform: "uppercase"
             }, {
               children: "View More"
@@ -16173,7 +16268,7 @@ const MagazineRelated = _a => {
       textAlign: "center"
     }, {
       children: item.title && jsxRuntime.jsx(Text, Object.assign({
-        variant: "display30",
+        variant: "display40",
         marginBottom: "4rem"
       }, {
         children: item.title
@@ -16214,7 +16309,7 @@ const MagazineSearchFilters = _a => {
       gap: "1rem"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display110",
+        variant: "paragraph40",
         fontWeight: "700",
         textTransform: "uppercase"
       }, {
@@ -16350,7 +16445,7 @@ const MagazineSearchFiltersModal = _ref => {
   }, {
     children: [jsxRuntime.jsx(Drawer.Title, {
       children: jsxRuntime.jsx(Text, Object.assign({
-        variant: "display80",
+        variant: "paragraph10",
         fontWeight: "700"
       }, {
         children: "Filters"
@@ -16457,7 +16552,7 @@ const MagazineSearch = _a => {
               displaySm: "flex"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display110",
+                variant: "paragraph40",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
@@ -16555,7 +16650,7 @@ const OrderItem = _ref => {
       flexBasis: "80px"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display110",
+        variant: "paragraph40",
         fontWeight: "700"
       }, {
         children: "ID"
@@ -16574,12 +16669,12 @@ const OrderItem = _ref => {
       flexBasis: "120px"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display110",
+        variant: "paragraph40",
         fontWeight: "700"
       }, {
         children: "Order placed"
       })), jsxRuntime.jsx(Text, Object.assign({
-        variant: "display100"
+        variant: "paragraph30"
       }, {
         children: dateTimeFormat(item.date)
       }))]
@@ -16587,7 +16682,7 @@ const OrderItem = _ref => {
       flexBasis: "160px"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display110",
+        variant: "paragraph40",
         fontWeight: "700"
       }, {
         children: "Current status"
@@ -16598,12 +16693,12 @@ const OrderItem = _ref => {
       flexBasis: "120px"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display110",
+        variant: "paragraph40",
         fontWeight: "700"
       }, {
         children: "Articles"
       })), jsxRuntime.jsx(Text, Object.assign({
-        variant: "display100"
+        variant: "paragraph30"
       }, {
         children: qty.toString()
       }))]
@@ -16612,12 +16707,12 @@ const OrderItem = _ref => {
       textAlign: "right"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display110",
+        variant: "paragraph40",
         fontWeight: "700"
       }, {
         children: "Total"
       })), jsxRuntime.jsx(Text, Object.assign({
-        variant: "display100"
+        variant: "paragraph30"
       }, {
         children: currency(item.total)
       }))]
@@ -16764,24 +16859,24 @@ const ProductOverviewBase = _a => {
           borderRightMd: "1px solid var(--color-neutral-200)"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display40",
+            variant: "heading10",
             fontWeight: "700",
             marginBottom: "1.5rem"
           }, {
             children: item.title
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             marginBottom: "2rem"
           }, {
             children: item.abstract
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display90",
+            variant: "paragraph20",
             fontWeight: "700",
             marginBottom: "1rem"
           }, {
             children: "Highlights"
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display90",
+            variant: "paragraph20",
             marginBottom: "1rem"
           }, {
             children: jsxRuntime.jsxs("ul", {
@@ -16796,13 +16891,13 @@ const ProductOverviewBase = _a => {
               })]
             })
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display90",
+            variant: "paragraph20",
             fontWeight: "700",
             marginBottom: "1rem"
           }, {
             children: "Details"
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display90",
+            variant: "paragraph20",
             marginBottom: "1rem"
           }, {
             children: "The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming \u201CCharcoal Gray\u201D limited release."
@@ -16811,7 +16906,7 @@ const ProductOverviewBase = _a => {
           md: 4
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display40",
+            variant: "heading10",
             marginBottom: "1rem"
           }, {
             children: currency(item.price)
@@ -16826,12 +16921,12 @@ const ProductOverviewBase = _a => {
             }), jsxRuntime.jsx(Text.SROnly, {
               children: "4 out of 5 stars"
             }), jsxRuntime.jsx(Text, Object.assign({
-              variant: "display90"
+              variant: "paragraph20"
             }, {
               children: "117 reviews"
             }))]
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display90",
+            variant: "paragraph20",
             fontWeight: "700",
             marginBottom: "1rem"
           }, {
@@ -16862,13 +16957,13 @@ const ProductOverviewBase = _a => {
             justifyContent: "space-between"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              variant: "display90",
+              variant: "paragraph20",
               fontWeight: "700",
               marginBottom: "1rem"
             }, {
               children: "Size"
             })), jsxRuntime.jsx(Text, Object.assign({
-              variant: "display90",
+              variant: "paragraph20",
               marginBottom: "1rem"
             }, {
               children: "Size guide"
@@ -16947,7 +17042,7 @@ const ProductsDetailDownload = _ref => {
     children: jsxRuntime.jsx(Container, {
       children: jsxRuntime.jsxs(Flex.Col, {
         children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-          variant: "display30",
+          variant: "display40",
           marginBottom: "3rem",
           textAlign: "center"
         }, {
@@ -17039,7 +17134,7 @@ const ProductsDetailRelatedCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            variant: "display60",
+            variant: "heading30",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -17066,7 +17161,7 @@ const ProductsDetailRelated = _ref => {
   }, {
     children: jsxRuntime.jsxs(Container, {
       children: [item.title && jsxRuntime.jsx(Text, {
-        variant: "display30",
+        variant: "display40",
         textAlign: "center",
         marginBottom: "4rem",
         dangerouslySetInnerHTML: {
@@ -17121,7 +17216,7 @@ const ProductsDetailSizeColor = _ref => {
         }, {
           children: jsxRuntime.jsxs(Flex.Col, {
             children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-              variant: "display30",
+              variant: "display40",
               marginBottom: "3rem"
             }, {
               children: item.title
@@ -17204,11 +17299,11 @@ const ProductsHeroCard = _a => {
         justifyContent: "flex-end"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display100"
+          variant: "paragraph30"
         }, {
           children: 'Shop the collection'
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display80",
+          variant: "paragraph10",
           fontWeight: "700"
         }, {
           children: item.title
@@ -17247,7 +17342,7 @@ const ProductsHero = _ref => {
             alignItems: "center"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              variant: "display20",
+              variant: "display30",
               fontWeight: "700",
               marginBottom: "1rem"
             }, {
@@ -17313,18 +17408,18 @@ const ProductsPropositionCard = _a => {
           justifyContent: "space-between"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             fontWeight: "700"
           }, {
             children: item.title
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             fontWeight: "700"
           }, {
             children: currency(item.price)
           }))]
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display80"
+          variant: "paragraph10"
         }, {
           children: item.abstract
         }))]
@@ -17396,7 +17491,7 @@ const ProductsRelatedCard = _a => {
           alignItems: "flex-end"
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80"
+            variant: "paragraph10"
           }, {
             children: currency(item.price)
           }))
@@ -17411,7 +17506,7 @@ const ProductsRelatedCard = _a => {
           passHref: true
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            variant: "display90",
+            variant: "paragraph20",
             fontWeight: "700",
             as: "a"
           }, {
@@ -17419,7 +17514,7 @@ const ProductsRelatedCard = _a => {
           }))
         }))
       })), jsxRuntime.jsx(Text, Object.assign({
-        variant: "display90",
+        variant: "paragraph20",
         marginBottom: "2rem"
       }, {
         children: item.abstract
@@ -17448,7 +17543,7 @@ const ProductsRelated = _ref => {
         marginBottom: "1rem"
       }, {
         children: jsxRuntime.jsx(Text, Object.assign({
-          variant: "display70",
+          variant: "heading40",
           fontWeight: "700"
         }, {
           children: "Customers also bought"
@@ -17520,7 +17615,7 @@ const ProductsSearchCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            variant: "display80",
+            variant: "paragraph10",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -17538,7 +17633,7 @@ const ProductsSearchFilters = _a => {
       gap: "1rem"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display110",
+        variant: "paragraph40",
         fontWeight: "700",
         textTransform: "uppercase"
       }, {
@@ -17674,7 +17769,7 @@ const ProductsSearchFiltersModal = _ref => {
   }, {
     children: [jsxRuntime.jsx(Drawer.Title, {
       children: jsxRuntime.jsx(Text, Object.assign({
-        variant: "display80",
+        variant: "paragraph10",
         fontWeight: "700"
       }, {
         children: "Filters"
@@ -17719,7 +17814,7 @@ function ProductsSearchRecap(_ref) {
           gap: "1rem"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display110",
+            variant: "paragraph40",
             fontWeight: "700",
             textTransform: "uppercase",
             paddingRight: "10px"
@@ -17824,7 +17919,7 @@ const ProductsSearch = _a => {
             flex: "1"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              variant: "display110",
+              variant: "paragraph40",
               fontWeight: "700",
               textTransform: "uppercase"
             }, {
@@ -17853,7 +17948,7 @@ const ProductsSearch = _a => {
               gap: "1rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display110",
+                variant: "paragraph40",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
@@ -17940,7 +18035,7 @@ const Proposition = props => {
           alignItems: "center"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display30",
+            variant: "display40",
             fontWeight: "700",
             marginBottom: "2rem"
           }, {
@@ -18110,14 +18205,14 @@ const ShopCategoryHero = _a => {
             marginBottom: "0.5rem",
             items: item.breadcrumb
           }), item.abstract && jsxRuntime.jsx(Text, {
-            variant: "display20",
+            variant: "display30",
             fontWeight: "700",
             marginBottom: "1rem",
             dangerouslySetInnerHTML: {
               __html: item.abstract
             }
           }), item.description && jsxRuntime.jsx(Text, {
-            variant: "display70",
+            variant: "heading40",
             marginBottom: "2rem",
             dangerouslySetInnerHTML: {
               __html: item.description
@@ -18239,7 +18334,7 @@ const ShopDetailRelatedCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            variant: "display80",
+            variant: "paragraph10",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -18263,7 +18358,7 @@ const ShopDetailRelated = _ref => {
   }, {
     children: jsxRuntime.jsxs(Container.Fluid, {
       children: [item.title && jsxRuntime.jsx(Text, {
-        variant: "display30",
+        variant: "display40",
         textAlign: "center",
         marginBottom: "4rem",
         dangerouslySetInnerHTML: {
@@ -18322,11 +18417,11 @@ const ShopHeroCard = _a => {
         justifyContent: "flex-end"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display100"
+          variant: "paragraph30"
         }, {
           children: 'Shop the collection'
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display80",
+          variant: "paragraph10",
           fontWeight: "700"
         }, {
           children: item.title
@@ -18360,13 +18455,13 @@ const ShopHero = _ref => {
             alignItems: "center"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              variant: "display20",
+              variant: "display30",
               fontWeight: "700",
               marginBottom: "1rem"
             }, {
               children: item.title
             })), item.abstract && jsxRuntime.jsx(Text, Object.assign({
-              variant: "display80",
+              variant: "paragraph10",
               marginBottom: "1rem"
             }, {
               children: item.abstract
@@ -18428,11 +18523,11 @@ const ShopIncentive = _ref => {
               marginLeft: "0.5rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display100"
+                variant: "paragraph30"
               }, {
                 children: "We'll replace it with a new one"
               })), jsxRuntime.jsx(Text, Object.assign({
-                variant: "display90",
+                variant: "paragraph20",
                 fontWeight: "700"
               }, {
                 children: "10-years all-inclusive warranty"
@@ -18454,11 +18549,11 @@ const ShopIncentive = _ref => {
               marginLeft: "0.5rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display100"
+                variant: "paragraph30"
               }, {
                 children: "Send it back for free"
               })), jsxRuntime.jsx(Text, Object.assign({
-                variant: "display90",
+                variant: "paragraph20",
                 fontWeight: "700"
               }, {
                 children: "Free shipping on returns"
@@ -18479,11 +18574,11 @@ const ShopIncentive = _ref => {
               marginLeft: "0.5rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display100"
+                variant: "paragraph30"
               }, {
                 children: "The shipping is on us"
               })), jsxRuntime.jsx(Text, Object.assign({
-                variant: "display90",
+                variant: "paragraph20",
                 fontWeight: "700"
               }, {
                 children: "Free, contactless delivery"
@@ -18522,18 +18617,18 @@ const ShopItemsPropositionCard = _a => {
           justifyContent: "space-between"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             fontWeight: "700"
           }, {
             children: item.title
           })), jsxRuntime.jsx(Text, Object.assign({
-            variant: "display80",
+            variant: "paragraph10",
             fontWeight: "700"
           }, {
             children: currency(item.price)
           }))]
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display80"
+          variant: "paragraph10"
         }, {
           children: item.abstract
         }))]
@@ -18602,7 +18697,7 @@ const ShopSearchCard = _a => {
       })
     })), jsxRuntime.jsxs(Card.Content, {
       children: [item.collection && jsxRuntime.jsx(Text, Object.assign({
-        variant: "display90",
+        variant: "paragraph20",
         fontWeight: "700"
       }, {
         children: item.collection + (item.designer ? ` by ${item.designer}` : '')
@@ -18621,7 +18716,7 @@ const ShopSearchCard = _a => {
         justifyContent: "space-between"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display100",
+          variant: "paragraph30",
           fontWeight: "700"
         }, {
           children: currency(item.price)
@@ -18630,7 +18725,7 @@ const ShopSearchCard = _a => {
           onClick: onAddToCart
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            variant: "display100"
+            variant: "paragraph30"
           }, {
             children: "Add to bag"
           }))
@@ -18786,7 +18881,7 @@ const ShopSearchFiltersModal = _ref => {
   }, {
     children: [jsxRuntime.jsx(Drawer.Title, {
       children: jsxRuntime.jsx(Text, Object.assign({
-        variant: "display80",
+        variant: "paragraph10",
         fontWeight: "700"
       }, {
         children: "Filters"
@@ -18824,7 +18919,7 @@ function ShopSearchRecap(_ref) {
       borderBottom: "2px solid var(--color-neutral-200)"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        variant: "display110",
+        variant: "paragraph40",
         fontWeight: "700",
         textTransform: "uppercase",
         paddingRight: "10px"
@@ -19053,7 +19148,7 @@ const ShopSearch = _a => {
               displaySm: "flex"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display110",
+                variant: "paragraph40",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
@@ -19097,7 +19192,7 @@ const ShopSearch = _a => {
               gap: "1rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display110",
+                variant: "paragraph40",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
@@ -19129,7 +19224,7 @@ const ShopSearch = _a => {
                 variant: "nav"
               }, {
                 children: [jsxRuntime.jsx(Text, Object.assign({
-                  variant: "display110",
+                  variant: "paragraph40",
                   fontWeight: "700",
                   textTransform: "uppercase"
                 }, {
@@ -19187,7 +19282,7 @@ const ShopSearch = _a => {
                           disabled: option.count === 0,
                           onChange: event => onFilterOptionToggle(filter, option)
                         }), jsxRuntime.jsx(Text, Object.assign({
-                          variant: "display110"
+                          variant: "paragraph40"
                         }, {
                           children: option.title
                         }))]
@@ -19269,18 +19364,18 @@ const Split = _ref => {
               textAlignSm: "left"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display100",
+                variant: "paragraph30",
                 marginBottom: "0.5rem",
                 textTransform: "uppercase"
               }, {
                 children: item.caption
               })), jsxRuntime.jsx(Text, Object.assign({
-                variant: "display30",
+                variant: "display40",
                 marginBottom: "0.5rem"
               }, {
                 children: item.title
               })), jsxRuntime.jsx(Text, Object.assign({
-                variant: "display70",
+                variant: "heading40",
                 marginBottom: "3rem",
                 maxWidthSm: "40ch"
               }, {
@@ -20164,18 +20259,18 @@ const StoreLocatorSearch = _ref => {
         maxWidthMd: "80ch"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          variant: "display100",
+          variant: "paragraph30",
           textTransform: "uppercase"
         }, {
           children: item.category
         })), jsxRuntime.jsx(Text, Object.assign({
-          variant: "display20",
+          variant: "display30",
           marginBottom: "1rem",
           fontWeight: "700"
         }, {
           children: item.title
         })), jsxRuntime.jsx(Text, {
-          variant: "display80",
+          variant: "paragraph10",
           margin: "0 auto 2rem auto",
           maxWidth: "70ch",
           dangerouslySetInnerHTML: {
@@ -20326,7 +20421,7 @@ const SwiperHero = props => {
               padding: "3rem 0 6rem 0"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                variant: "display20",
+                variant: "display30",
                 fontWeight: "700"
               }, {
                 children: item.title
@@ -20337,7 +20432,7 @@ const SwiperHero = props => {
               padding: "3rem 0 6rem 0"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                variant: "display60",
+                variant: "heading30",
                 marginBottom: "1rem"
               }, {
                 children: item.abstract
@@ -20620,6 +20715,12 @@ exports.hasChildOfType = hasChildOfType;
 exports.hypenize = hypenize;
 exports.isChildElement = isChildElement;
 exports.mapChildsByType = mapChildsByType;
+exports.mediaBetween = mediaBetween;
+exports.mediaDown = mediaDown;
+exports.mediaMax = mediaMax;
+exports.mediaMin = mediaMin;
+exports.mediaOnly = mediaOnly;
+exports.mediaUp = mediaUp;
 exports.sizes = sizes;
 exports.theme = customTheme;
 exports.useAutocompleteContext = useAutocompleteContext;