@websolutespa/bom-mixer-ui 0.3.0 → 0.4.0

package/dist/cjs/index.js

@@ -757,7 +757,7 @@ function eachMedia(props, callback) {
   }
 }
 function getVariant(variants, type) {
-  return type && variants[type] ? variants[type] || '' : '';
+  return type && variants && variants[type] ? variants[type] || '' : '';
 }
 function isChildElement(parent, child) {
   if (!parent || !child) {
@@ -1096,7 +1096,7 @@ const Breakpoint = props => {
   }) : null;
 };
 
-const variants$3 = {
+const variants$2 = {
   default: styled.css`
     color: var(--color-primary-500);
     border-color: var(--color-primary-100);
@@ -1171,7 +1171,7 @@ const StyledButtonGroup = styled__default.default.div`
     `}
   `}
 
-  ${props => getVariant(variants$3, props.type || 'default')}
+  ${props => getVariant(variants$2, props.type || 'default')}
   ${props => getCssResponsive(props)}
 `;
 const ButtonGroup = /*#__PURE__*/React.forwardRef((_a, ref) => {
@@ -1254,7 +1254,7 @@ svg {
   }
 }
 `;
-styled.css`
+const CssUnderline = styled.css`
 &>* {
   display: inline;
   background-image: linear-gradient(90deg, var(--color-secondary-500), currentColor);
@@ -1474,8 +1474,7 @@ const CssButtonToggle = styled.css`
     opacity: 0.2;
   }
 `;
-
-const variants$2 = {
+const buttonVariants = {
   default: CssButtonDefault,
   primary: CssButtonPrimary,
   secondary: CssButtonSecondary,
@@ -1487,9 +1486,36 @@ const variants$2 = {
   circle: CssButtonCircle,
   toggle: CssButtonToggle
 };
+
+const defaultVariants = {
+  button: buttonVariants
+};
+const [useVariants_, VariantsContextProvider] = bomMixerHooks.createGenericContext(defaultVariants);
+function VariantsProvider(_ref) {
+  let {
+    children,
+    variants
+  } = _ref;
+  // console.log('VariantsProvider.context', context);
+  const value = Object.assign({}, defaultVariants);
+  Object.entries(variants).forEach(_ref2 => {
+    let [k, v] = _ref2;
+    value[k] = Object.assign(Object.assign({}, value[k]), v);
+  });
+  return jsxRuntime.jsx(VariantsContextProvider, Object.assign({
+    value: value
+  }, {
+    children: children
+  }));
+}
+function useVariants(variant) {
+  const variants = useVariants_();
+  return variants ? variants[variant] : undefined;
+}
+
 const StyledButton$2 = styled__default.default.div`
   ${CssDefault}
-  ${props => getVariant(variants$2, props.variant)}
+  ${props => getVariant(props.variants, props.variant)}
   ${props => styled.css`font-size: var(--button-size-${props.size || 'md'});`}
   ${props => getCssResponsive(props)}
 `;
@@ -1498,17 +1524,22 @@ const Button = /*#__PURE__*/React.forwardRef((_a, ref) => {
       children,
       className,
       as = 'button',
-      type = 'button'
+      type = 'button',
+      variants
     } = _a,
-    props = __rest(_a, ["children", "className", "as", "type"]);
+    props = __rest(_a, ["children", "className", "as", "type", "variants"]);
   const classNames = bomCore.getClassNames('button', className, {
     disabled: props.disabled
-  });
+  }, props.variant);
+  const globalVariants = useVariants('button');
+  variants = variants || globalVariants || buttonVariants;
+  // console.log('globalVariants', globalVariants);
   return jsxRuntime.jsx(StyledButton$2, Object.assign({
     className: classNames,
     ref: ref,
     as: as,
-    type: type
+    type: type,
+    variants: variants
   }, props, {
     children: children
   }));
@@ -2013,7 +2044,7 @@ const ModalTitle = _a => {
     children: [children, jsxRuntime.jsx(Button, Object.assign({
       onClick: onClose
     }, {
-      children: jsxRuntime.jsx(bomMixerIcons.X, {})
+      children: jsxRuntime.jsx(bomMixerIcons.IconX, {})
     }))]
   }));
 };
@@ -2772,25 +2803,65 @@ const Flex = bomCore.withSchema(FlexBase, {
   displayName: 'Flex'
 });
 
-var base = {
-  fontSize: {
+var fontBase = {
+  family: "Inter, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+  size: {
     xs: "14px",
     sm: "15px",
     md: "15px",
     lg: "16px",
     xl: "16px"
-  }
+  },
+  lineHeight: "1.5"
 };
 var font = {
-  primary: {
-    family: "Inter, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
-    size: ["Min(6.25rem, 16vw)", "Min(4.5rem, 11.5vw)", "Min(2.75rem, 7vw)", "Min(2.5rem, 6.4vw)", "2.25rem", "1.875rem", "1.5rem", "1.125rem", "1rem", "0.9rem", "0.8rem", "0.7rem"],
-    lineHeight: ["1.15", "1.25", "1.35", "1.45", "1.55", "1.65", "1.75", "1.85", "1.95", "2.05", "2.15", "2.25"]
+  display10: {
+    size: "Min(6.25rem, 16vw)",
+    lineHeight: "1.15"
   },
-  secondary: {
-    family: "Petrona, serif",
-    size: ["7.5rem", "5.4rem", "3.3rem", "3rem", "2.7rem", "2.25rem", "1.8rem", "1.35rem", "1.2rem", "1.08rem", "0.96rem", "0.84rem"],
-    lineHeight: ["1.15", "1.25", "1.35", "1.45", "1.55", "1.65", "1.75", "1.85", "1.95", "2.05", "2.15", "2.25"]
+  display20: {
+    size: "Min(4.5rem, 11.5vw)",
+    lineHeight: "1.25"
+  },
+  display30: {
+    size: "Min(2.75rem, 7vw)",
+    lineHeight: "1.35"
+  },
+  display40: {
+    size: "Min(2.5rem, 6.4vw)",
+    lineHeight: "1.45"
+  },
+  display50: {
+    size: "2.25rem",
+    lineHeight: "1.55"
+  },
+  display60: {
+    size: "1.875rem",
+    lineHeight: "1.65"
+  },
+  display70: {
+    size: "1.5rem",
+    lineHeight: "1.75"
+  },
+  display80: {
+    size: "1.125rem",
+    lineHeight: "1.85"
+  },
+  display90: {
+    size: "1rem",
+    lineHeight: "1.95"
+  },
+  display100: {
+    size: "0.9rem",
+    lineHeight: "2.05"
+  },
+  display110: {
+    size: "0.8rem",
+    lineHeight: "2.15"
+  },
+  display120: {
+    size: "0.7rem",
+    lineHeight: "2.25"
   }
 };
 var grid = {
@@ -2866,10 +2937,10 @@ var color = {
     "900": "#09090A"
   },
   primary: {
-    "100": "#e6f6fd",
-    "200": "#b3e3fa",
-    "300": "#80d1f6",
-    "400": "#4dbef2",
+    "100": "#e0e6ef",
+    "200": "#bee3f5",
+    "300": "#86cdee",
+    "400": "#5bbce9",
     "500": "#00a2ed",
     "600": "#0071a6",
     "700": "#005177",
@@ -2922,7 +2993,7 @@ var color = {
   }
 };
 var theme = {
-  base: base,
+  fontBase: fontBase,
   font: font,
   grid: grid,
   mediaQuery: mediaQuery,
@@ -2939,61 +3010,37 @@ var theme = {
 
 const CssVars = styled.css`
 :root {
-  --base-font-size-xs: 14px;
-  --base-font-size-sm: 15px;
-  --base-font-size-md: 15px;
-  --base-font-size-lg: 16px;
-  --base-font-size-xl: 16px;
-  --font-primary-family: Inter, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-primary-size-0: Min(6.25rem, 16vw);
-  --font-primary-size-1: Min(4.5rem, 11.5vw);
-  --font-primary-size-2: Min(2.75rem, 7vw);
-  --font-primary-size-3: Min(2.5rem, 6.4vw);
-  --font-primary-size-4: 2.25rem;
-  --font-primary-size-5: 1.875rem;
-  --font-primary-size-6: 1.5rem;
-  --font-primary-size-7: 1.125rem;
-  --font-primary-size-8: 1rem;
-  --font-primary-size-9: 0.9rem;
-  --font-primary-size-10: 0.8rem;
-  --font-primary-size-11: 0.7rem;
-  --font-primary-line-height-0: 1.15;
-  --font-primary-line-height-1: 1.25;
-  --font-primary-line-height-2: 1.35;
-  --font-primary-line-height-3: 1.45;
-  --font-primary-line-height-4: 1.55;
-  --font-primary-line-height-5: 1.65;
-  --font-primary-line-height-6: 1.75;
-  --font-primary-line-height-7: 1.85;
-  --font-primary-line-height-8: 1.95;
-  --font-primary-line-height-9: 2.05;
-  --font-primary-line-height-10: 2.15;
-  --font-primary-line-height-11: 2.25;
-  --font-secondary-family: Petrona, serif;
-  --font-secondary-size-0: 7.5rem;
-  --font-secondary-size-1: 5.4rem;
-  --font-secondary-size-2: 3.3rem;
-  --font-secondary-size-3: 3rem;
-  --font-secondary-size-4: 2.7rem;
-  --font-secondary-size-5: 2.25rem;
-  --font-secondary-size-6: 1.8rem;
-  --font-secondary-size-7: 1.35rem;
-  --font-secondary-size-8: 1.2rem;
-  --font-secondary-size-9: 1.08rem;
-  --font-secondary-size-10: 0.96rem;
-  --font-secondary-size-11: 0.84rem;
-  --font-secondary-line-height-0: 1.15;
-  --font-secondary-line-height-1: 1.25;
-  --font-secondary-line-height-2: 1.35;
-  --font-secondary-line-height-3: 1.45;
-  --font-secondary-line-height-4: 1.55;
-  --font-secondary-line-height-5: 1.65;
-  --font-secondary-line-height-6: 1.75;
-  --font-secondary-line-height-7: 1.85;
-  --font-secondary-line-height-8: 1.95;
-  --font-secondary-line-height-9: 2.05;
-  --font-secondary-line-height-10: 2.15;
-  --font-secondary-line-height-11: 2.25;
+  --font-base-family: Inter, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-base-size-xs: 14px;
+  --font-base-size-sm: 15px;
+  --font-base-size-md: 15px;
+  --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)));
@@ -3039,10 +3086,10 @@ const CssVars = styled.css`
   --color-neutral-700: #44444B;
   --color-neutral-800: #27272B;
   --color-neutral-900: #09090A;
-  --color-primary-100: #e6f6fd;
-  --color-primary-200: #b3e3fa;
-  --color-primary-300: #80d1f6;
-  --color-primary-400: #4dbef2;
+  --color-primary-100: #e0e6ef;
+  --color-primary-200: #bee3f5;
+  --color-primary-300: #86cdee;
+  --color-primary-400: #5bbce9;
   --color-primary-500: #00a2ed;
   --color-primary-600: #0071a6;
   --color-primary-700: #005177;
@@ -3408,9 +3455,11 @@ body {
 const CssTypography = styled.css`
 html,
 body {
-  font-family: var(--font-primary-family);
-  line-height: 1.5;
-  ${props => eachMedia(props, key => `font-size: var(--base-font-size-${key});`)}
+  font-family: var(--font-base-family, sans-serif);
+  line-height: var(--font-base-line-height, 1.5);
+  font-weight: var(--font-base-weight, normal);
+  font-size: var(--font-base-size, 16px);
+  ${props => typeof props.theme.fontBase.size === 'object' && eachMedia(props, key => `font-size: var(--font-base-size-${key});`)}
 }
 
 body {
@@ -4066,7 +4115,7 @@ const ModalClose = /*#__PURE__*/React__default.default.forwardRef((_a, ref) => {
   }, overrideProps, {
     onClick: onButtonClick
   }, {
-    children: jsxRuntime.jsx(bomMixerIcons.X, {})
+    children: jsxRuntime.jsx(bomMixerIcons.IconX, {})
   }));
 });
 ModalClose.defaultProps = defaultProps$2;
@@ -4369,56 +4418,49 @@ const CssUl = styled.css`
     }
   }
 `;
-const TextBase = styled__default.default.div`
-  font-family: var(--font-primary-family);
-  ${_ref => {
-  let {
-    size
-  } = _ref;
-  if (!size) return '';
-  const index = (typeof size === 'string' ? parseInt(size) : size) - 1;
+const StyledText = styled__default.default.div`
+  ${props => {
+  const variant = props.variant;
+  const font = variant && props.theme.font[variant];
+  // console.log(props.children, variant, size);
   return styled.css`
-      font-size: var(--font-primary-size-${index}, 1rem);
-      line-height: var(--font-primary-line-height-${index}, 1);
-      font-weight: var(--font-primary-font-weight-${index}, normal);
+      ${font ? styled.css`
+        font-family: var(--font-${variant}-family, var(--base-font-family));
+        // font-size: var(--font-${variant}-size, 1rem);
+        ${font.size && typeof font.size === 'object' ? eachMedia(props, key => `font-size: var(--font-${variant}-size-${key});`) : `font-size: var(--font-${variant}-size, 1rem)`};
+        font-weight: var(--font-${variant}-font-weight, inherit);
+        line-height: var(--font-${variant}-line-height, 1);
+      ` : ''}
+      ${props.gradient ? styled.css`
+        background: -webkit-linear-gradient(0deg, var(--color-secondary-500), var(--color-primary-500));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      ` : ''}
     `;
 }}
-  ${props => props.gradient ? styled.css`
-    background: -webkit-linear-gradient(0deg, var(--color-primary-500), var(--color-secondary-500));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  ` : ''}
-
   ${CssH}
   ${CssA}
   ${CssP}
   ${CssUl}
   ${props => getCssResponsive(props)}
 `;
-const TextSecondary = styled__default.default.div`
-  display: inline-block;
-  font-family: var(--font-secondary-family);
-  ${_ref2 => {
-  let {
-    size
-  } = _ref2;
-  if (!size) return '';
-  const index = (typeof size === 'string' ? parseInt(size) : size) - 1;
-  return styled.css`
-      font-size: var(--font-secondary-size-${index}, 1rem);
-      line-height: var(--font-secondary-line-height-${index}, 1);
-      font-weight: var(--font-secondary-font-weight-${index}, normal);
-    `;
-}}
-  ${props => props.gradient ? styled.css`
-    background: -webkit-linear-gradient(0deg, var(--color-primary-500), var(--color-secondary-500));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  ` : ''}
-
-  ${CssUl}
-  ${props => getCssResponsive(props)}
-`;
+const TextBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      children,
+      className,
+      as = 'div'
+    } = _a,
+    props = __rest(_a, ["children", "className", "as"]);
+  const classNames = bomCore.getClassNames('text', className, props.variant);
+  return jsxRuntime.jsx(StyledText, Object.assign({
+    className: classNames,
+    ref: ref,
+    as: as
+  }, props, {
+    children: children
+  }));
+});
+TextBase.displayName = 'Text';
 const TextSROnly = styled__default.default.div`
   position: absolute;
   width: 1px;
@@ -4431,8 +4473,6 @@ const TextSROnly = styled__default.default.div`
   border-width: 0;
 `;
 const Text = bomCore.withSchema(TextBase, {
-  Primary: TextBase,
-  Secondary: TextSecondary,
   SROnly: TextSROnly,
   displayName: 'Text'
 });
@@ -4484,7 +4524,7 @@ const MediaGalleryNext = () => {
   }, {
     children: [jsxRuntime.jsx("span", {
       children: "next"
-    }), jsxRuntime.jsx(bomMixerIcons.ArrowRight, {})]
+    }), jsxRuntime.jsx(bomMixerIcons.IconArrowRight, {})]
   }));
 };
 const MediaGalleryButtonPrev = styled__default.default(MediaGalleryButton)`
@@ -4498,7 +4538,7 @@ const MediaGalleryPrev = () => {
   }, {
     children: [jsxRuntime.jsx("span", {
       children: "next"
-    }), jsxRuntime.jsx(bomMixerIcons.ArrowLeft, {})]
+    }), jsxRuntime.jsx(bomMixerIcons.IconArrowLeft, {})]
   }));
 };
 
@@ -4677,7 +4717,7 @@ const MediaGallery = /*#__PURE__*/React.forwardRef((_a, ref) => {
         variant: "circle",
         onClick: closeModal
       }, {
-        children: jsxRuntime.jsx(bomMixerIcons.X, {})
+        children: jsxRuntime.jsx(bomMixerIcons.IconX, {})
       }))]
     }))]
   });
@@ -5846,7 +5886,7 @@ const Popover = bomCore.withSchema(PopoverBase, {
   displayName: 'Popover'
 });
 
-const SectionContainer = styled__default.default.div`
+const SectionContainer = styled__default.default.section`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -5855,7 +5895,6 @@ const SectionContainer = styled__default.default.div`
   padding: '3rem 0'
 })}
   ${props => getAspectResponsive(props)};
-
   ${props => hasBackground(props) ? styled.css`
     color: var(--color-neutral-100);
     position: relative;
@@ -5971,7 +6010,7 @@ const SwiperNext = () => {
   }, {
     children: [jsxRuntime.jsx("span", {
       children: "next"
-    }), jsxRuntime.jsx(bomMixerIcons.ArrowRight, {})]
+    }), jsxRuntime.jsx(bomMixerIcons.IconArrowRight, {})]
   }));
 };
 const SwiperButtonPrev = styled__default.default(SwiperButton)`
@@ -5985,7 +6024,7 @@ const SwiperPrev = () => {
   }, {
     children: [jsxRuntime.jsx("span", {
       children: "next"
-    }), jsxRuntime.jsx(bomMixerIcons.ArrowLeft, {})]
+    }), jsxRuntime.jsx(bomMixerIcons.IconArrowLeft, {})]
   }));
 };
 
@@ -7558,12 +7597,12 @@ function FormTester(props) {
     }, {
       children: [jsxRuntime.jsxs(Flex.Col, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "8",
+          variant: "display80",
           fontWeight: "700"
         }, {
           children: "Form Tester"
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "10",
+          variant: "display100",
           marginBottom: "1em"
         }, {
           children: "this component is visible only during development."
@@ -7789,7 +7828,7 @@ const StyledLabel = styled__default.default.div`
   display: flex;
   align-items: center;
   width: 100%;
-  font-size: var(--font-primary-size-10, --form-font-size, 1rem);
+  font-size: var(--font-display-size-10, --form-font-size, 1rem);
   cursor: pointer;
 
   ${props => getCssResponsive(props)}
@@ -8042,9 +8081,9 @@ const RadioCardTitle = /*#__PURE__*/React.forwardRef((_a, ref) => {
     props = __rest(_a, ["as", "className"]);
   const classNames = bomCore.getClassNames('title', className);
   return jsxRuntime.jsx(Text, Object.assign({
-    className: classNames,
-    size: "7",
+    variant: "display70",
     fontWeight: "700",
+    className: classNames,
     ref: ref
   }, props));
 });
@@ -8070,7 +8109,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({
-    size: "10",
+    variant: "display100",
     whiteSpace: "nowrap",
     className: classNames,
     ref: ref
@@ -8847,7 +8886,7 @@ TextArea.displayName = 'TextArea';
 const StyledFieldError = styled__default.default.div`
   margin: 0.5em 0;
   padding: 0.2em 0.5em;
-  font-size: var(--font-primary-size-10, --form-font-size, 1rem);
+  font-size: var(--font-display-size-10, --form-font-size, 1rem);
   font-weight: 500;
   background: var(--color-primary-100);
   color: var(--color-primary-500);
@@ -9147,7 +9186,7 @@ function FieldPassword(props) {
       disabled: state.flags.disabled,
       readOnly: state.flags.readonly,
       width: "100%",
-      after: jsxRuntime.jsx(bomMixerIcons.Eye, {
+      after: jsxRuntime.jsx(bomMixerIcons.IconEye, {
         color: type === 'password' ? 'var(--color-neutral-400)' : 'var(--color-primary-500)',
         onClick: () => onToggle()
       })
@@ -9446,7 +9485,7 @@ const withPageTransition = OriginalComponent => {
             variants: textVariants
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              size: "1"
+              variant: "display10"
             }, {
               children: page.title
             }))
@@ -9501,7 +9540,7 @@ const Carousel1 = _a => {
       textAlign: "center"
     }, {
       children: item.title && jsxRuntime.jsx(Text, Object.assign({
-        size: "2",
+        variant: "display20",
         marginBottom: "4rem"
       }, {
         children: item.title
@@ -9538,7 +9577,7 @@ const Carousel1 = _a => {
               variant: "nav"
             }, {
               children: jsxRuntime.jsx(Text, {
-                size: "8",
+                variant: "display80",
                 marginTop: "1rem",
                 dangerouslySetInnerHTML: {
                   __html: item.title
@@ -9573,7 +9612,7 @@ const Download1 = _ref => {
     children: jsxRuntime.jsx(Container, {
       children: jsxRuntime.jsxs(Flex.Col, {
         children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-          size: "3",
+          variant: "display30",
           marginBottom: "3rem",
           textAlign: "center"
         }, {
@@ -9589,7 +9628,7 @@ const Download1 = _ref => {
             children: jsxRuntime.jsxs(Flex.Row, Object.assign({
               width: "100%"
             }, {
-              children: [link.secure && jsxRuntime.jsx(bomMixerIcons.Lock, {}), jsxRuntime.jsx(Text, Object.assign({
+              children: [link.secure && jsxRuntime.jsx(bomMixerIcons.IconLock, {}), jsxRuntime.jsx(Text, Object.assign({
                 flexGrow: 1
               }, {
                 children: link.title
@@ -9650,7 +9689,7 @@ const MediaFull2 = _ref => {
         aspectRatio: 16 / 10,
         item: item.media
       }), item.media.alt && jsxRuntime.jsx(Text, Object.assign({
-        size: "8",
+        variant: "display80",
         marginTop: "1rem"
       }, {
         children: item.media.alt
@@ -9688,7 +9727,7 @@ const MediaMedia1 = _ref => {
           children: [jsxRuntime.jsx(Media, {
             item: media
           }), media.alt && jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             marginTop: "1rem"
           }, {
             children: media.alt
@@ -9719,12 +9758,12 @@ const NotFound = _ref => {
       textAlign: "center"
     }, {
       children: [jsxRuntime.jsxs(Text, Object.assign({
-        size: "5",
+        variant: "display50",
         marginBottom: "1rem"
       }, {
         children: ["not found ", item.schema]
       })), item.title && jsxRuntime.jsx(Text, Object.assign({
-        size: "3",
+        variant: "display30",
         marginBottom: "1rem"
       }, {
         children: item.title
@@ -9794,7 +9833,7 @@ const Related1Card = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "6",
+            variant: "display60",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -9816,7 +9855,7 @@ const Related1 = _ref => {
   }, {
     children: jsxRuntime.jsxs(Container, {
       children: [item.title && jsxRuntime.jsx(Text, {
-        size: "3",
+        variant: "display30",
         textAlign: "center",
         marginBottom: "4rem",
         dangerouslySetInnerHTML: {
@@ -9866,7 +9905,7 @@ const SizesColors1 = _ref => {
         }, {
           children: jsxRuntime.jsxs(Flex.Col, {
             children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-              size: "3",
+              variant: "display30",
               marginBottom: "3rem"
             }, {
               children: item.title
@@ -9936,7 +9975,7 @@ const Text1 = _ref => {
         margin: "0 auto"
       }, {
         children: item.description && jsxRuntime.jsx(Text, {
-          size: "5",
+          variant: "display50",
           lineHeight: "2",
           dangerouslySetInnerHTML: {
             __html: item.description
@@ -9973,7 +10012,7 @@ const TextAside1 = _ref => {
           sm: 8
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "8",
+            variant: "display80",
             lineHeight: "2",
             dangerouslySetInnerHTML: {
               __html: item.description
@@ -9989,14 +10028,14 @@ const TextAside1 = _ref => {
               gap: "1rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "6"
+                variant: "display60"
               }, {
                 children: aside.title
               })), jsxRuntime.jsx(Flex.Col, Object.assign({
                 gap: "0.5rem"
               }, {
                 children: aside.items.map((text, t) => jsxRuntime.jsx(Text, Object.assign({
-                  size: "8"
+                  variant: "display80"
                 }, {
                   children: text
                 }), t))
@@ -10039,17 +10078,17 @@ const TextMedia1 = _ref => {
             gap: "3rem"
           }, {
             children: [item.title && jsxRuntime.jsx(Text, {
-              size: "3",
+              variant: "display30",
               dangerouslySetInnerHTML: {
                 __html: item.title
               }
             }), item.abstract && jsxRuntime.jsx(Text, {
-              size: "6",
+              variant: "display60",
               dangerouslySetInnerHTML: {
                 __html: item.abstract
               }
             }), item.description && jsxRuntime.jsx(Text, {
-              size: "7",
+              variant: "display70",
               dangerouslySetInnerHTML: {
                 __html: item.description
               }
@@ -10063,7 +10102,7 @@ const TextMedia1 = _ref => {
             aspectRatio: 880 / 1120,
             item: item.media
           }), item.media.alt && jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             marginTop: "1rem"
           }, {
             children: item.media.alt
@@ -10099,7 +10138,7 @@ const TextText1 = _ref => {
         columnGap: "var(--grid-column-gap)"
       }, {
         children: item.description && jsxRuntime.jsx(Text, {
-          size: "8",
+          variant: "display80",
           lineHeight: "2",
           dangerouslySetInnerHTML: {
             __html: item.description
@@ -10221,7 +10260,7 @@ const AuthForgot = _ref => {
         rowGap: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "6",
+          variant: "display60",
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
@@ -10293,17 +10332,17 @@ const AuthForgotSuccess = _ref => {
       rowGap: "1rem"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "6",
+        variant: "display60",
         fontWeight: "700"
       }, {
         children: "Password recovery"
       })), jsxRuntime.jsx(Text, Object.assign({
-        size: "9",
+        variant: "display90",
         marginBottom: "2rem"
       }, {
         children: "An email has been sent. please check your inbox."
       })), jsxRuntime.jsx(Text, Object.assign({
-        size: "6",
+        variant: "display60",
         fontWeight: "700"
       }, {
         children: "Ready to login?"
@@ -10406,7 +10445,7 @@ const AuthLogin = _ref => {
         rowGap: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "6",
+          variant: "display60",
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
@@ -10563,13 +10602,13 @@ const AuthRegister = _ref => {
         rowGap: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "6",
+          variant: "display60",
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
           children: "Registration"
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "9",
+          variant: "display90",
           marginBottom: "2rem"
         }, {
           children: "Fill out the form to request access. You will receive a confirmation email after activation."
@@ -10640,17 +10679,17 @@ const AuthRegisterSuccess = _ref => {
       rowGap: "1rem"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "6",
+        variant: "display60",
         fontWeight: "700"
       }, {
         children: "Thank you for registering"
       })), jsxRuntime.jsx(Text, Object.assign({
-        size: "9",
+        variant: "display90",
         marginBottom: "2rem"
       }, {
         children: "A confimation email has been sent to your address. Please check your inbox."
       })), jsxRuntime.jsx(Text, Object.assign({
-        size: "6",
+        variant: "display60",
         fontWeight: "700"
       }, {
         children: "Ready to login?"
@@ -11008,16 +11047,16 @@ const BlogCard = _a => {
         flex: "1"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "5"
+          variant: "display50"
         }, {
           children: item.title
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "8",
+          variant: "display80",
           marginBottom: "1rem"
         }, {
           children: dateTimeFormat(item.date)
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "8"
+          variant: "display80"
         }, {
           children: item.abstract
         }))]
@@ -11035,7 +11074,7 @@ const BlogCard = _a => {
               circle: true,
               item: item.author.media
             }), jsxRuntime.jsx(Text, Object.assign({
-              size: "8",
+              variant: "display80",
               fontWeight: "700"
             }, {
               children: item.author.fullName
@@ -11056,7 +11095,7 @@ const BlogMore = _ref => {
   }, {
     children: jsxRuntime.jsxs(Container, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "2",
+        variant: "display20",
         fontWeight: "700",
         marginBottom: "3rem"
       }, {
@@ -11095,12 +11134,12 @@ const BlogProposition = _a => {
           md: 6
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "4",
+            variant: "display40",
             marginBottom: "1rem"
           }, {
             children: item.title
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             marginBottom: "1rem"
           }, {
             children: dateTimeFormat(item.date)
@@ -11109,7 +11148,7 @@ const BlogProposition = _a => {
           md: 6
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             maxWidth: "60ch"
           }, {
             children: item.abstract
@@ -11125,7 +11164,7 @@ const BlogProposition = _a => {
                 circle: true,
                 item: item.author.media
               }), jsxRuntime.jsx(Text, Object.assign({
-                size: "8",
+                variant: "display80",
                 fontWeight: "700"
               }, {
                 children: item.author.fullName
@@ -11198,14 +11237,14 @@ const CartMiniItem = _ref => {
             href: item.href || ''
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              size: "9",
+              variant: "display90",
               fontWeight: "700",
               onClick: closeDrawer
             }, {
               children: item.title
             }))
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "10",
+            variant: "display100",
             marginBottom: "1rem"
           }, {
             children: item.abstract
@@ -11215,7 +11254,7 @@ const CartMiniItem = _ref => {
             children: [jsxRuntime.jsx(Button, Object.assign({
               onClick: () => onSetQty(item.qty - 1)
             }, {
-              children: jsxRuntime.jsx(bomMixerIcons.Minus, {
+              children: jsxRuntime.jsx(bomMixerIcons.IconMinus, {
                 width: "20px",
                 height: "20px"
               })
@@ -11229,7 +11268,7 @@ const CartMiniItem = _ref => {
               size: "xs",
               onClick: () => onSetQty(item.qty + 1)
             }, {
-              children: jsxRuntime.jsx(bomMixerIcons.Plus, {
+              children: jsxRuntime.jsx(bomMixerIcons.IconPlus, {
                 width: "20px",
                 height: "20px"
               })
@@ -11241,7 +11280,7 @@ const CartMiniItem = _ref => {
             })), mounted && jsxRuntime.jsx(Button, Object.assign({
               onClick: onRemove
             }, {
-              children: jsxRuntime.jsx(bomMixerIcons.Trash, {
+              children: jsxRuntime.jsx(bomMixerIcons.IconTrash, {
                 width: "20px",
                 height: "20px"
               })
@@ -11278,7 +11317,7 @@ const CartMini = _ref => {
   }, {
     children: [jsxRuntime.jsx(Drawer.Title, {
       children: jsxRuntime.jsx(Text, Object.assign({
-        size: "8",
+        variant: "display80",
         fontWeight: "700"
       }, {
         children: "Shopping cart"
@@ -11339,7 +11378,7 @@ const CartMini = _ref => {
           }, {
             children: [jsxRuntime.jsx("span", {
               children: "Checkout"
-            }), " ", jsxRuntime.jsx(bomMixerIcons.ShoppingCart, {})]
+            }), " ", jsxRuntime.jsx(bomMixerIcons.IconShoppingCart, {})]
           }))
         })), jsxRuntime.jsxs(Flex.Row, Object.assign({
           justifyContent: "center",
@@ -11359,7 +11398,7 @@ const CartMini = _ref => {
             }, {
               children: [jsxRuntime.jsx("span", {
                 children: "Continue shopping"
-              }), " ", jsxRuntime.jsx(bomMixerIcons.ArrowRight, {})]
+              }), " ", jsxRuntime.jsx(bomMixerIcons.IconArrowRight, {})]
             }))
           }))]
         }))]
@@ -11395,12 +11434,12 @@ const CategoriesPropositionCard = _a => {
         justifyContent: "flex-end"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "8",
+          variant: "display80",
           fontWeight: "700"
         }, {
           children: item.title
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "10"
+          variant: "display100"
         }, {
           children: 'Shop now'
         }))]
@@ -11422,7 +11461,7 @@ const CategoriesProposition = _ref => {
         marginBottom: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "7",
+          variant: "display70",
           fontWeight: "700"
         }, {
           children: "Shop by category"
@@ -11436,7 +11475,7 @@ const CategoriesProposition = _ref => {
           }, {
             children: [jsxRuntime.jsx("span", {
               children: "Browse all categories"
-            }), " ", jsxRuntime.jsx(bomMixerIcons.ArrowRight, {})]
+            }), " ", jsxRuntime.jsx(bomMixerIcons.IconArrowRight, {})]
           }))
         }))]
       })), items.length >= 3 && jsxRuntime.jsxs(Grid.Row, Object.assign({
@@ -11498,12 +11537,12 @@ const CategoryHero = _a => {
           textAlign: "center"
         }, {
           children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-            size: "2",
+            variant: "display20",
             fontWeight: "700"
           }, {
             children: item.title
           })), item.abstract && jsxRuntime.jsx(Text, {
-            size: "8",
+            variant: "display80",
             lineHeight: "2",
             maxWidth: "76ch",
             dangerouslySetInnerHTML: {
@@ -11523,12 +11562,12 @@ const CategoryHero = _a => {
         textAlign: "center"
       }, {
         children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-          size: "2",
+          variant: "display20",
           fontWeight: "700"
         }, {
           children: item.title
         })), item.abstract && jsxRuntime.jsx(Text, {
-          size: "8",
+          variant: "display80",
           lineHeight: "2",
           maxWidth: "76ch",
           dangerouslySetInnerHTML: {
@@ -11570,13 +11609,13 @@ const CategoryProposition = _ref => {
               textAlign: "center"
             }, {
               children: [item.abstract && jsxRuntime.jsx(Text, Object.assign({
-                size: "4",
+                variant: "display40",
                 fontWeight: "700",
                 marginBottom: "1rem"
               }, {
                 children: item.abstract
               })), item.description && jsxRuntime.jsx(Text, Object.assign({
-                size: "8",
+                variant: "display80",
                 maxWidth: "65ch",
                 marginBottom: "2rem"
               }, {
@@ -11614,12 +11653,12 @@ const CheckoutEmpty = _ref => {
           textAlign: "center"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "4",
+            variant: "display40",
             fontWeight: "700"
           }, {
             children: "Your cart is empty."
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -11657,12 +11696,12 @@ const CheckoutError = _ref => {
           textAlign: "center"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "4",
+            variant: "display40",
             fontWeight: "700"
           }, {
             children: "Payment unsuccesful"
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -11674,12 +11713,12 @@ const CheckoutError = _ref => {
           textAlign: "center"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "4",
+            variant: "display40",
             fontWeight: "700"
           }, {
             children: "Order not found"
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -11701,7 +11740,7 @@ const OrderAddress = _ref => {
     gap: "1rem"
   }, {
     children: [title && jsxRuntime.jsx(Text, Object.assign({
-      size: "6",
+      variant: "display60",
       fontWeight: "700"
     }, {
       children: title
@@ -11824,12 +11863,12 @@ const OrderRegister = _ref => {
       }, {
         children: registered ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "6",
+            variant: "display60",
             fontWeight: "700"
           }, {
             children: "Account created"
           })), jsxRuntime.jsxs(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -11837,12 +11876,12 @@ const OrderRegister = _ref => {
           }))]
         }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "6",
+            variant: "display60",
             fontWeight: "700"
           }, {
             children: "Checkout faster next time"
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -11927,14 +11966,14 @@ const OrderSummaryItem = _ref => {
               variant: "nav"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                size: "9",
+                variant: "display90",
                 fontWeight: "700"
               }, {
                 children: item.title
               }))
             }))
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "10"
+            variant: "display100"
           }, {
             children: item.abstract
           }))]
@@ -11974,7 +12013,7 @@ const OrderSummary = _ref => {
     children: jsxRuntime.jsx(Section, {
       children: jsxRuntime.jsxs(Container, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "6",
+          variant: "display60",
           fontWeight: "700"
         }, {
           children: "Order Summary"
@@ -12154,7 +12193,7 @@ const CheckoutSuccess = _ref => {
           justifyContent: "space-between"
         }, {
           children: [jsxRuntime.jsxs(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             fontWeight: "700"
           }, {
             children: ["Order #", order.id, " ", jsxRuntime.jsx(Badge, {
@@ -12179,12 +12218,12 @@ const CheckoutSuccess = _ref => {
           textAlign: "center"
         }, {
           children: [jsxRuntime.jsxs(Text, Object.assign({
-            size: "4",
+            variant: "display40",
             fontWeight: "700"
           }, {
             children: ["Thank you for your order, ", order.user ? order.user.firstName : order.shippingAddress.firstName]
           })), jsxRuntime.jsxs(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             marginBottom: "1rem",
             maxWidth: "80ch"
           }, {
@@ -12282,14 +12321,14 @@ const CheckoutBasketItem = _ref => {
               variant: "nav"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                size: "9",
+                variant: "display90",
                 fontWeight: "700"
               }, {
                 children: item.title
               }))
             }))
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "10"
+            variant: "display100"
           }, {
             children: item.abstract
           }))]
@@ -12302,7 +12341,7 @@ const CheckoutBasketItem = _ref => {
       children: [jsxRuntime.jsx(Text, {
         children: currency(item.price)
       }), item.fullPrice > item.price && jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         textDecoration: "line-through",
         color: "var(--color-neutral-400)"
       }, {
@@ -12316,7 +12355,7 @@ const CheckoutBasketItem = _ref => {
         children: [jsxRuntime.jsx(Button, Object.assign({
           onClick: () => onSetQty(item.qty - 1)
         }, {
-          children: jsxRuntime.jsx(bomMixerIcons.Minus, {
+          children: jsxRuntime.jsx(bomMixerIcons.IconMinus, {
             width: "20px",
             height: "20px"
           })
@@ -12330,7 +12369,7 @@ const CheckoutBasketItem = _ref => {
           size: "xs",
           onClick: () => onSetQty(item.qty + 1)
         }, {
-          children: jsxRuntime.jsx(bomMixerIcons.Plus, {
+          children: jsxRuntime.jsx(bomMixerIcons.IconPlus, {
             width: "20px",
             height: "20px"
           })
@@ -12343,7 +12382,7 @@ const CheckoutBasketItem = _ref => {
       children: jsxRuntime.jsx(Button, Object.assign({
         onClick: onRemove
       }, {
-        children: jsxRuntime.jsx(bomMixerIcons.Trash, {
+        children: jsxRuntime.jsx(bomMixerIcons.IconTrash, {
           width: "20px",
           height: "20px"
         })
@@ -12355,7 +12394,7 @@ const CheckoutBasketItem = _ref => {
       children: [jsxRuntime.jsx(Text, {
         children: currency(item.price * item.qty)
       }), item.fullPrice > item.price && jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         textDecoration: "line-through",
         color: "var(--color-neutral-400)"
       }, {
@@ -12476,7 +12515,7 @@ const CheckoutBasket = _ref => {
               children: [jsxRuntime.jsx(Text, {
                 children: currency(subTotal)
               }), subTotalFull > subTotal && jsxRuntime.jsx(Text, Object.assign({
-                size: "11",
+                variant: "display110",
                 textDecoration: "line-through",
                 color: "var(--color-neutral-400)"
               }, {
@@ -12494,7 +12533,7 @@ const CheckoutBasket = _ref => {
             children: jsxRuntime.jsxs(Flex.Row, Object.assign({
               padding: "1rem"
             }, {
-              children: [jsxRuntime.jsx(bomMixerIcons.Truck, {
+              children: [jsxRuntime.jsx(bomMixerIcons.IconTruck, {
                 width: "2rem",
                 height: "2rem",
                 color: "var(--color-primary-500)"
@@ -12502,12 +12541,12 @@ const CheckoutBasket = _ref => {
                 marginLeft: "0.5rem"
               }, {
                 children: [jsxRuntime.jsx(Text, Object.assign({
-                  size: "9",
+                  variant: "display90",
                   fontWeight: "700"
                 }, {
                   children: "The shipping is on us"
                 })), jsxRuntime.jsx(Text, Object.assign({
-                  size: "10"
+                  variant: "display100"
                 }, {
                   children: "Free, contactless delivery for payments over the minimum fare."
                 }))]
@@ -12520,7 +12559,7 @@ const CheckoutBasket = _ref => {
             children: jsxRuntime.jsxs(Flex.Row, Object.assign({
               padding: "1rem"
             }, {
-              children: [jsxRuntime.jsx(bomMixerIcons.Percent, {
+              children: [jsxRuntime.jsx(bomMixerIcons.IconPercent, {
                 width: "2rem",
                 height: "2rem",
                 color: "var(--color-primary-500)"
@@ -12528,12 +12567,12 @@ const CheckoutBasket = _ref => {
                 marginLeft: "0.5rem"
               }, {
                 children: [jsxRuntime.jsx(Text, Object.assign({
-                  size: "9",
+                  variant: "display90",
                   fontWeight: "700"
                 }, {
                   children: "Do you have a discount code?"
                 })), jsxRuntime.jsx(Text, Object.assign({
-                  size: "10"
+                  variant: "display100"
                 }, {
                   children: "You can enter it in the following steps, before the final checkout."
                 }))]
@@ -12664,12 +12703,12 @@ const CheckoutDelivery = _ref => {
               rowGap: "2rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "4",
+                variant: "display40",
                 fontWeight: "700"
               }, {
                 children: "Select the delivery method"
               })), jsxRuntime.jsx(Text, Object.assign({
-                size: "8",
+                variant: "display80",
                 marginBottom: "1rem",
                 maxWidth: "60ch"
               }, {
@@ -13279,13 +13318,13 @@ const CheckoutUserInfo = _ref => {
               rowGap: "1rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "4",
+                variant: "display40",
                 fontWeight: "700",
                 marginBottom: "1rem"
               }, {
                 children: "Reference address"
               })), jsxRuntime.jsx(Text, Object.assign({
-                size: "8",
+                variant: "display80",
                 marginBottom: "1rem",
                 maxWidth: "60ch"
               }, {
@@ -13413,12 +13452,12 @@ const CheckoutInfo = _ref => {
                     alignItems: "flex-start"
                   }, {
                     children: [jsxRuntime.jsx(Text, Object.assign({
-                      size: "4",
+                      variant: "display40",
                       fontWeight: "700"
                     }, {
                       children: "Login"
                     })), jsxRuntime.jsx(Text, Object.assign({
-                      size: "8",
+                      variant: "display80",
                       marginBottom: "1rem",
                       maxWidth: "60ch"
                     }, {
@@ -13442,12 +13481,12 @@ const CheckoutInfo = _ref => {
                       marginBottom: "3rem"
                     }, {
                       children: [jsxRuntime.jsx(Text, Object.assign({
-                        size: "4",
+                        variant: "display40",
                         fontWeight: "700"
                       }, {
                         children: "Register"
                       })), jsxRuntime.jsx(Text, Object.assign({
-                        size: "8",
+                        variant: "display80",
                         marginBottom: "1rem",
                         maxWidth: "60ch"
                       }, {
@@ -13463,12 +13502,12 @@ const CheckoutInfo = _ref => {
                       alignItems: "flex-start"
                     }, {
                       children: [jsxRuntime.jsx(Text, Object.assign({
-                        size: "4",
+                        variant: "display40",
                         fontWeight: "700"
                       }, {
                         children: "Proceed as guest"
                       })), jsxRuntime.jsx(Text, Object.assign({
-                        size: "8",
+                        variant: "display80",
                         marginBottom: "1rem",
                         maxWidth: "60ch"
                       }, {
@@ -13635,7 +13674,7 @@ const CheckoutPayment = _ref => {
             rowGap: "2rem"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              size: "4",
+              variant: "display40",
               fontWeight: "700"
             }, {
               children: "Select a payment method"
@@ -13859,12 +13898,12 @@ const CheckoutReview = _ref => {
                 rowGap: "2rem"
               }, {
                 children: [jsxRuntime.jsx(Text, Object.assign({
-                  size: "4",
+                  variant: "display40",
                   fontWeight: "700"
                 }, {
                   children: "Reference store"
                 })), jsxRuntime.jsx(Text, Object.assign({
-                  size: "8",
+                  variant: "display80",
                   marginBottom: "1rem"
                 }, {
                   children: "Your suggested closest sales outlet for self-service pickup."
@@ -13872,7 +13911,7 @@ const CheckoutReview = _ref => {
                   marginBottom: "1rem"
                 }, {
                   children: [jsxRuntime.jsx(Text, Object.assign({
-                    size: "7",
+                    variant: "display70",
                     fontWeight: "700"
                   }, {
                     children: selectedStore.name
@@ -13913,13 +13952,13 @@ const CheckoutReview = _ref => {
                       gap: "1rem"
                     }, {
                       children: [jsxRuntime.jsx(Text, Object.assign({
-                        size: "4",
+                        variant: "display40",
                         fontWeight: "700"
                       }, {
                         children: "Shipping address"
                       })), jsxRuntime.jsxs(Flex.Col, {
                         children: [jsxRuntime.jsxs(Text, Object.assign({
-                          size: "7",
+                          variant: "display70",
                           fontWeight: "700"
                         }, {
                           children: [shippingAddress.firstName, " ", shippingAddress.lastName]
@@ -13941,13 +13980,13 @@ const CheckoutReview = _ref => {
                       gap: "1rem"
                     }, {
                       children: [jsxRuntime.jsx(Text, Object.assign({
-                        size: "4",
+                        variant: "display40",
                         fontWeight: "700"
                       }, {
                         children: "Billing address"
                       })), jsxRuntime.jsxs(Flex.Col, {
                         children: [jsxRuntime.jsxs(Text, Object.assign({
-                          size: "7",
+                          variant: "display70",
                           fontWeight: "700"
                         }, {
                           children: [billingAddress.firstName, " ", billingAddress.lastName]
@@ -14029,7 +14068,7 @@ const CheckoutReview = _ref => {
                       children: [jsxRuntime.jsx(Text, {
                         children: currency(item.qty * item.price)
                       }), item.fullPrice > item.price && jsxRuntime.jsx(Text, Object.assign({
-                        size: "11",
+                        variant: "display110",
                         textDecoration: "line-through",
                         color: "var(--color-neutral-400)"
                       }, {
@@ -14057,7 +14096,7 @@ const CheckoutReview = _ref => {
                     children: [jsxRuntime.jsx(Text, {
                       children: currency(subTotal)
                     }), subTotalFull > subTotal && jsxRuntime.jsx(Text, Object.assign({
-                      size: "11",
+                      variant: "display110",
                       textDecoration: "line-through",
                       color: "var(--color-neutral-400)"
                     }, {
@@ -14389,12 +14428,12 @@ const Colors = props => {
         backgroundColor: color[key][size]
       }, {
         children: [jsxRuntime.jsxs(Text, Object.assign({
-          size: "10",
+          variant: "display100",
           color: color[key][parseInt(size) >= 500 ? '100' : '900']
         }, {
           children: [key, " ", size]
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "10",
+          variant: "display100",
           color: color[key][parseInt(size) >= 500 ? '100' : '900']
         }, {
           children: color[key][size]
@@ -14467,7 +14506,7 @@ const ContactCard = _a => {
               as: "a",
               variant: "link"
             }, {
-              children: [jsxRuntime.jsx(bomMixerIcons.Phone, {}), " ", jsxRuntime.jsx("span", {
+              children: [jsxRuntime.jsx(bomMixerIcons.IconPhone, {}), " ", jsxRuntime.jsx("span", {
                 children: item.phoneNumber
               })]
             }))
@@ -14481,7 +14520,7 @@ const ContactCard = _a => {
               as: "a",
               variant: "link"
             }, {
-              children: [jsxRuntime.jsx(bomMixerIcons.Phone, {}), " ", jsxRuntime.jsx("span", {
+              children: [jsxRuntime.jsx(bomMixerIcons.IconPhone, {}), " ", jsxRuntime.jsx("span", {
                 children: item.faxNumber
               })]
             }))
@@ -14495,7 +14534,7 @@ const ContactCard = _a => {
               as: "a",
               variant: "link"
             }, {
-              children: [jsxRuntime.jsx(bomMixerIcons.Phone, {}), " ", jsxRuntime.jsx("span", {
+              children: [jsxRuntime.jsx(bomMixerIcons.IconPhone, {}), " ", jsxRuntime.jsx("span", {
                 children: item.contactEmail
               })]
             }))
@@ -14506,7 +14545,7 @@ const ContactCard = _a => {
           paddingTop: "1rem"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "10",
+            variant: "display100",
             fontWeight: "700"
           }, {
             children: "Press requests"
@@ -14518,7 +14557,7 @@ const ContactCard = _a => {
               as: "a",
               variant: "link"
             }, {
-              children: [jsxRuntime.jsx(bomMixerIcons.Phone, {}), " ", jsxRuntime.jsx("span", {
+              children: [jsxRuntime.jsx(bomMixerIcons.IconPhone, {}), " ", jsxRuntime.jsx("span", {
                 children: item.pressEmail
               })]
             }))
@@ -14529,7 +14568,7 @@ const ContactCard = _a => {
           paddingTop: "1rem"
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            size: "10",
+            variant: "display100",
             fontWeight: "700"
           }, {
             children: item.note
@@ -14738,7 +14777,7 @@ const ContactForm = props => {
             }, {
               children: [jsxRuntime.jsx("span", {
                 children: "Submit"
-              }), " ", jsxRuntime.jsx(bomMixerIcons.Send, {})]
+              }), " ", jsxRuntime.jsx(bomMixerIcons.IconSend, {})]
             }))
           }))
         })]
@@ -14763,19 +14802,19 @@ const ContactHero = _ref => {
             height: "100%"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              size: "10",
+              variant: "display100",
               marginBottom: "0.5rem",
               textTransform: "uppercase"
             }, {
               children: "Contacts"
             })), jsxRuntime.jsx(Text, Object.assign({
-              size: "1",
+              variant: "display10",
               marginBottom: "2rem",
               fontWeight: "700"
             }, {
               children: "Contacts"
             })), jsxRuntime.jsxs(Text, Object.assign({
-              size: "7",
+              variant: "display70",
               marginBottom: "3rem"
             }, {
               children: [jsxRuntime.jsx("span", {
@@ -14813,7 +14852,7 @@ const ContactHero = _ref => {
                 }, {
                   children: [jsxRuntime.jsx("span", {
                     children: "Search dealers"
-                  }), " ", jsxRuntime.jsx(bomMixerIcons.Search, {})]
+                  }), " ", jsxRuntime.jsx(bomMixerIcons.IconSearch, {})]
                 }))
               })), jsxRuntime.jsxs(Button, Object.assign({
                 as: "a",
@@ -14823,7 +14862,7 @@ const ContactHero = _ref => {
               }, {
                 children: [jsxRuntime.jsx("span", {
                   children: "Contact Us"
-                }), " ", jsxRuntime.jsx(bomMixerIcons.Send, {})]
+                }), " ", jsxRuntime.jsx(bomMixerIcons.IconSend, {})]
               }))]
             })]
           }))
@@ -14854,12 +14893,12 @@ const Footer = props => {
             sm: 12,
             md: 4
           }, {
-            children: [jsxRuntime.jsx(bomMixerIcons.Webhook, {
+            children: [jsxRuntime.jsx(bomMixerIcons.IconWebhook, {
               width: "40px",
               height: "40px",
               color: "var(--color-neutral-100)"
             }), jsxRuntime.jsx(Text, Object.assign({
-              size: "7",
+              variant: "display70",
               marginTop: "0.7rem"
             }, {
               children: "Making the world a better place through constructing elegant hierarchies."
@@ -14874,7 +14913,7 @@ const Footer = props => {
                 children: jsxRuntime.jsx(Button, Object.assign({
                   as: "a"
                 }, {
-                  children: jsxRuntime.jsx(bomMixerIcons.Facebook, {})
+                  children: jsxRuntime.jsx(bomMixerIcons.IconFacebook, {})
                 }))
               })), jsxRuntime.jsx(Link__default.default, Object.assign({
                 href: "/#instagram",
@@ -14883,7 +14922,7 @@ const Footer = props => {
                 children: jsxRuntime.jsx(Button, Object.assign({
                   as: "a"
                 }, {
-                  children: jsxRuntime.jsx(bomMixerIcons.Instagram, {})
+                  children: jsxRuntime.jsx(bomMixerIcons.IconInstagram, {})
                 }))
               })), jsxRuntime.jsx(Link__default.default, Object.assign({
                 href: "/#twitter",
@@ -14892,7 +14931,7 @@ const Footer = props => {
                 children: jsxRuntime.jsx(Button, Object.assign({
                   as: "a"
                 }, {
-                  children: jsxRuntime.jsx(bomMixerIcons.Twitter, {})
+                  children: jsxRuntime.jsx(bomMixerIcons.IconTwitter, {})
                 }))
               })), jsxRuntime.jsx(Link__default.default, Object.assign({
                 href: "/#linkedin",
@@ -14901,7 +14940,7 @@ const Footer = props => {
                 children: jsxRuntime.jsx(Button, Object.assign({
                   as: "a"
                 }, {
-                  children: jsxRuntime.jsx(bomMixerIcons.Linkedin, {})
+                  children: jsxRuntime.jsx(bomMixerIcons.IconLinkedin, {})
                 }))
               })), jsxRuntime.jsx(Link__default.default, Object.assign({
                 href: "/#github",
@@ -14910,7 +14949,7 @@ const Footer = props => {
                 children: jsxRuntime.jsx(Button, Object.assign({
                   as: "a"
                 }, {
-                  children: jsxRuntime.jsx(bomMixerIcons.Github, {})
+                  children: jsxRuntime.jsx(bomMixerIcons.IconGithub, {})
                 }))
               }))]
             }))]
@@ -14924,7 +14963,7 @@ const Footer = props => {
               fontSize: "0.9rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "8",
+                variant: "display80",
                 color: "var(--color-neutral-500)"
               }, {
                 children: "Solutions"
@@ -14980,7 +15019,7 @@ const Footer = props => {
               fontSize: "0.9rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "8",
+                variant: "display80",
                 color: "var(--color-neutral-500)"
               }, {
                 children: "Support"
@@ -15036,7 +15075,7 @@ const Footer = props => {
               fontSize: "0.9rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "8",
+                variant: "display80",
                 color: "var(--color-neutral-500)"
               }, {
                 children: "Company"
@@ -15102,7 +15141,7 @@ const Footer = props => {
               fontSize: "0.9rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "8",
+                variant: "display80",
                 color: "var(--color-neutral-500)"
               }, {
                 children: "Legal"
@@ -15147,7 +15186,7 @@ const Footer = props => {
               justifyContent: "space-between"
             }, {
               children: [jsxRuntime.jsxs(Text, Object.assign({
-                size: "10",
+                variant: "display100",
                 color: "var(--color-neutral-500)"
               }, {
                 children: ["\u00A9", getYear(), " websolute spa - PI 02063520411 - Capitale sociale Eur 194.084,34 i.v., REA PU"]
@@ -15159,7 +15198,7 @@ const Footer = props => {
                   as: "a",
                   target: "_blank"
                 }, {
-                  children: jsxRuntime.jsx(bomMixerIcons.Websolute, {})
+                  children: jsxRuntime.jsx(bomMixerIcons.IconWebsolute, {})
                 }))
               }))]
             }))
@@ -15174,7 +15213,7 @@ const Footer = props => {
         justifyContent: "space-between"
       }, {
         children: [jsxRuntime.jsxs(Text, Object.assign({
-          size: "10",
+          variant: "display100",
           color: "var(--color-neutral-500)"
         }, {
           children: ["\u00A9", getYear(), " websolute spa - PI 02063520411 - Capitale sociale Eur 194.084,34 i.v., REA PU"]
@@ -15186,7 +15225,7 @@ const Footer = props => {
             as: "a",
             target: "_blank"
           }, {
-            children: jsxRuntime.jsx(bomMixerIcons.Websolute, {})
+            children: jsxRuntime.jsx(bomMixerIcons.IconWebsolute, {})
           }))
         }))]
       }))
@@ -15224,7 +15263,14 @@ const MarketsAndLanguagesDrawer = _ref => {
     } else if (market === currentMarket && locale === currentLocale && href) {
       return href;
     } else {
-      return `/${locale}-${market}`;
+      const segments = [];
+      if (locales.length > 1) {
+        segments.push(locale);
+      }
+      if (markets.length > 1) {
+        segments.push(market);
+      }
+      return `/${segments.join('-')}`;
     }
   }, [alternates, href]);
   return jsxRuntime.jsxs(Drawer, Object.assign({
@@ -15246,7 +15292,7 @@ const MarketsAndLanguagesDrawer = _ref => {
         fontSize: "0.9rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "8",
+          variant: "display80",
           fontWeight: "700"
         }, {
           children: item.title
@@ -15298,7 +15344,7 @@ const HeaderCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "7",
+            variant: "display70",
             dangerouslySetInnerHTML: {
               __html: item.title
             }
@@ -15567,7 +15613,7 @@ const Header = props => {
             children: jsxRuntime.jsxs(Button, Object.assign({
               variant: "nav"
             }, {
-              children: [item.title, " ", jsxRuntime.jsx(bomMixerIcons.ChevronDown, {}), " "]
+              children: [item.title, " ", jsxRuntime.jsx(bomMixerIcons.IconChevronDown, {}), " "]
             }))
           }), index);
         } else {
@@ -15627,11 +15673,11 @@ const Header = props => {
               children: jsxRuntime.jsxs(Button, Object.assign({
                 as: "a"
               }, {
-                children: [jsxRuntime.jsx(bomMixerIcons.Webhook, {
+                children: [jsxRuntime.jsx(bomMixerIcons.IconWebhook, {
                   width: "3rem",
                   height: "3rem"
                 }), jsxRuntime.jsx(Text, Object.assign({
-                  size: "6",
+                  variant: "display60",
                   padding: "0 0.5rem"
                 }, {
                   children: "Mixer"
@@ -15703,7 +15749,7 @@ const Header = props => {
               displaySm: "block",
               onClick: () => openDrawer('auth')
             }, {
-              children: jsxRuntime.jsx(bomMixerIcons.User, {
+              children: jsxRuntime.jsx(bomMixerIcons.IconUser, {
                 width: "24px",
                 height: "24px"
               })
@@ -15711,7 +15757,7 @@ const Header = props => {
               position: "relative",
               onClick: () => openDrawer('cart')
             }, {
-              children: [jsxRuntime.jsx(bomMixerIcons.ShoppingCart, {
+              children: [jsxRuntime.jsx(bomMixerIcons.IconShoppingCart, {
                 width: "24px",
                 height: "24px"
               }), cartItemsCount > 0 && jsxRuntime.jsx(Badge, Object.assign({
@@ -15730,13 +15776,13 @@ const Header = props => {
                 marginRight: "0.5rem"
               }, {
                 children: layout.locale.toUpperCase()
-              })), " ", jsxRuntime.jsx(bomMixerIcons.Menu, {})]
+              })), " ", jsxRuntime.jsx(bomMixerIcons.IconMenu, {})]
             })), jsxRuntime.jsx(Button, Object.assign({
               as: "a",
               displayMd: "none",
               onClick: () => openDrawer('menu')
             }, {
-              children: jsxRuntime.jsx(bomMixerIcons.Menu, {
+              children: jsxRuntime.jsx(bomMixerIcons.IconMenu, {
                 width: "24px",
                 height: "24px"
               })
@@ -15765,7 +15811,7 @@ const Header = props => {
             var _a;
             return ['product_index'].includes(x.id.toString()) ? jsxRuntime.jsx(StyledAccordion, Object.assign({
               title: jsxRuntime.jsx(Text, Object.assign({
-                size: "7"
+                variant: "display70"
               }, {
                 children: x.title
               }))
@@ -15796,7 +15842,7 @@ const Header = props => {
                 onClick: () => onNav()
               }, {
                 children: jsxRuntime.jsx(Text, Object.assign({
-                  size: "7"
+                  variant: "display70"
                 }, {
                   children: x.title
                 }))
@@ -15812,7 +15858,7 @@ const Header = props => {
     }, {
       children: [jsxRuntime.jsx(Modal.Title, {
         children: jsxRuntime.jsx(Text, Object.assign({
-          size: "7",
+          variant: "display70",
           fontWeight: "700"
         }, {
           children: "Foreign Market detected"
@@ -15834,7 +15880,7 @@ const Header = props => {
       }, {
         children: [jsxRuntime.jsx("span", {
           children: "Change to Italy"
-        }), " ", jsxRuntime.jsx(bomMixerIcons.ArrowRight, {})]
+        }), " ", jsxRuntime.jsx(bomMixerIcons.IconArrowRight, {})]
       }))]
     })), jsxRuntime.jsx(AuthDrawer, {
       visible: drawer == 'auth',
@@ -15874,7 +15920,7 @@ const Hero = _a => {
               padding: "3rem 0"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                size: "2",
+                variant: "display20",
                 fontWeight: "700"
               }, {
                 children: item.title
@@ -15884,7 +15930,7 @@ const Hero = _a => {
               padding: "3rem 0"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                size: "6"
+                variant: "display60"
               }, {
                 children: item.abstract
               }))
@@ -15930,7 +15976,7 @@ const Icons = props => {
       padding: "3rem 0"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "4",
+        variant: "display40",
         fontWeight: "700",
         marginBottom: "2rem"
       }, {
@@ -15969,7 +16015,7 @@ const Icons = props => {
             textAlign: "center"
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              size: "10"
+              variant: "display100"
             }, {
               children: icon.key
             }))
@@ -15983,7 +16029,7 @@ const Icons = props => {
     }, {
       children: [jsxRuntime.jsx(Modal.Title, {
         children: jsxRuntime.jsx(Text, Object.assign({
-          size: "7",
+          variant: "display70",
           fontWeight: "700"
         }, {
           children: icon && icon.key
@@ -16046,8 +16092,8 @@ const MagazineSearchCard = _a => {
         gap: "2rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          flex: "100px",
-          size: "10"
+          variant: "display100",
+          flex: "100px"
         }, {
           children: dateTimeFormat(item.date)
         })), jsxRuntime.jsxs(Flex.Col, Object.assign({
@@ -16056,7 +16102,7 @@ const MagazineSearchCard = _a => {
           gap: "1rem"
         }, {
           children: [jsxRuntime.jsx(Text, {
-            size: "6",
+            variant: "display60",
             lineHeight: "1.2",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
@@ -16065,7 +16111,7 @@ const MagazineSearchCard = _a => {
             variant: "nav"
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              size: "9",
+              variant: "display90",
               textTransform: "uppercase"
             }, {
               children: "View More"
@@ -16127,7 +16173,7 @@ const MagazineRelated = _a => {
       textAlign: "center"
     }, {
       children: item.title && jsxRuntime.jsx(Text, Object.assign({
-        size: "3",
+        variant: "display30",
         marginBottom: "4rem"
       }, {
         children: item.title
@@ -16168,7 +16214,7 @@ const MagazineSearchFilters = _a => {
       gap: "1rem"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700",
         textTransform: "uppercase"
       }, {
@@ -16304,7 +16350,7 @@ const MagazineSearchFiltersModal = _ref => {
   }, {
     children: [jsxRuntime.jsx(Drawer.Title, {
       children: jsxRuntime.jsx(Text, Object.assign({
-        size: "8",
+        variant: "display80",
         fontWeight: "700"
       }, {
         children: "Filters"
@@ -16411,7 +16457,7 @@ const MagazineSearch = _a => {
               displaySm: "flex"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "11",
+                variant: "display110",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
@@ -16442,7 +16488,7 @@ const MagazineSearch = _a => {
               displaySm: "none",
               onClick: () => openDrawer('filters')
             }, {
-              children: jsxRuntime.jsx(bomMixerIcons.Filter, {})
+              children: jsxRuntime.jsx(bomMixerIcons.IconFilter, {})
             })), jsxRuntime.jsx(MagazineSearchFiltersModal, {
               visible: drawer == 'filters',
               onClose: closeDrawer
@@ -16509,7 +16555,7 @@ const OrderItem = _ref => {
       flexBasis: "80px"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700"
       }, {
         children: "ID"
@@ -16528,12 +16574,12 @@ const OrderItem = _ref => {
       flexBasis: "120px"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700"
       }, {
         children: "Order placed"
       })), jsxRuntime.jsx(Text, Object.assign({
-        size: "10"
+        variant: "display100"
       }, {
         children: dateTimeFormat(item.date)
       }))]
@@ -16541,7 +16587,7 @@ const OrderItem = _ref => {
       flexBasis: "160px"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700"
       }, {
         children: "Current status"
@@ -16552,12 +16598,12 @@ const OrderItem = _ref => {
       flexBasis: "120px"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700"
       }, {
         children: "Articles"
       })), jsxRuntime.jsx(Text, Object.assign({
-        size: "10"
+        variant: "display100"
       }, {
         children: qty.toString()
       }))]
@@ -16566,12 +16612,12 @@ const OrderItem = _ref => {
       textAlign: "right"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700"
       }, {
         children: "Total"
       })), jsxRuntime.jsx(Text, Object.assign({
-        size: "10"
+        variant: "display100"
       }, {
         children: currency(item.total)
       }))]
@@ -16718,24 +16764,24 @@ const ProductOverviewBase = _a => {
           borderRightMd: "1px solid var(--color-neutral-200)"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "4",
+            variant: "display40",
             fontWeight: "700",
             marginBottom: "1.5rem"
           }, {
             children: item.title
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             marginBottom: "2rem"
           }, {
             children: item.abstract
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "9",
+            variant: "display90",
             fontWeight: "700",
             marginBottom: "1rem"
           }, {
             children: "Highlights"
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "9",
+            variant: "display90",
             marginBottom: "1rem"
           }, {
             children: jsxRuntime.jsxs("ul", {
@@ -16750,13 +16796,13 @@ const ProductOverviewBase = _a => {
               })]
             })
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "9",
+            variant: "display90",
             fontWeight: "700",
             marginBottom: "1rem"
           }, {
             children: "Details"
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "9",
+            variant: "display90",
             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."
@@ -16765,7 +16811,7 @@ const ProductOverviewBase = _a => {
           md: 4
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "4",
+            variant: "display40",
             marginBottom: "1rem"
           }, {
             children: currency(item.price)
@@ -16780,12 +16826,12 @@ const ProductOverviewBase = _a => {
             }), jsxRuntime.jsx(Text.SROnly, {
               children: "4 out of 5 stars"
             }), jsxRuntime.jsx(Text, Object.assign({
-              size: "9"
+              variant: "display90"
             }, {
               children: "117 reviews"
             }))]
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "9",
+            variant: "display90",
             fontWeight: "700",
             marginBottom: "1rem"
           }, {
@@ -16816,13 +16862,13 @@ const ProductOverviewBase = _a => {
             justifyContent: "space-between"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              size: "9",
+              variant: "display90",
               fontWeight: "700",
               marginBottom: "1rem"
             }, {
               children: "Size"
             })), jsxRuntime.jsx(Text, Object.assign({
-              size: "9",
+              variant: "display90",
               marginBottom: "1rem"
             }, {
               children: "Size guide"
@@ -16901,7 +16947,7 @@ const ProductsDetailDownload = _ref => {
     children: jsxRuntime.jsx(Container, {
       children: jsxRuntime.jsxs(Flex.Col, {
         children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-          size: "3",
+          variant: "display30",
           marginBottom: "3rem",
           textAlign: "center"
         }, {
@@ -16917,7 +16963,7 @@ const ProductsDetailDownload = _ref => {
             children: jsxRuntime.jsxs(Flex.Row, Object.assign({
               width: "100%"
             }, {
-              children: [link.secure && jsxRuntime.jsx(bomMixerIcons.Lock, {}), jsxRuntime.jsx(Text, Object.assign({
+              children: [link.secure && jsxRuntime.jsx(bomMixerIcons.IconLock, {}), jsxRuntime.jsx(Text, Object.assign({
                 flexGrow: 1
               }, {
                 children: link.title
@@ -16993,7 +17039,7 @@ const ProductsDetailRelatedCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "6",
+            variant: "display60",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -17020,7 +17066,7 @@ const ProductsDetailRelated = _ref => {
   }, {
     children: jsxRuntime.jsxs(Container, {
       children: [item.title && jsxRuntime.jsx(Text, {
-        size: "3",
+        variant: "display30",
         textAlign: "center",
         marginBottom: "4rem",
         dangerouslySetInnerHTML: {
@@ -17075,7 +17121,7 @@ const ProductsDetailSizeColor = _ref => {
         }, {
           children: jsxRuntime.jsxs(Flex.Col, {
             children: [item.title && jsxRuntime.jsx(Text, Object.assign({
-              size: "3",
+              variant: "display30",
               marginBottom: "3rem"
             }, {
               children: item.title
@@ -17158,11 +17204,11 @@ const ProductsHeroCard = _a => {
         justifyContent: "flex-end"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "10"
+          variant: "display100"
         }, {
           children: 'Shop the collection'
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "8",
+          variant: "display80",
           fontWeight: "700"
         }, {
           children: item.title
@@ -17201,7 +17247,7 @@ const ProductsHero = _ref => {
             alignItems: "center"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              size: "2",
+              variant: "display20",
               fontWeight: "700",
               marginBottom: "1rem"
             }, {
@@ -17267,18 +17313,18 @@ const ProductsPropositionCard = _a => {
           justifyContent: "space-between"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             fontWeight: "700"
           }, {
             children: item.title
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             fontWeight: "700"
           }, {
             children: currency(item.price)
           }))]
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "8"
+          variant: "display80"
         }, {
           children: item.abstract
         }))]
@@ -17350,7 +17396,7 @@ const ProductsRelatedCard = _a => {
           alignItems: "flex-end"
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            size: "8"
+            variant: "display80"
           }, {
             children: currency(item.price)
           }))
@@ -17365,15 +17411,15 @@ const ProductsRelatedCard = _a => {
           passHref: true
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            as: "a",
-            size: "9",
-            fontWeight: "700"
+            variant: "display90",
+            fontWeight: "700",
+            as: "a"
           }, {
             children: item.title
           }))
         }))
       })), jsxRuntime.jsx(Text, Object.assign({
-        size: "9",
+        variant: "display90",
         marginBottom: "2rem"
       }, {
         children: item.abstract
@@ -17402,7 +17448,7 @@ const ProductsRelated = _ref => {
         marginBottom: "1rem"
       }, {
         children: jsxRuntime.jsx(Text, Object.assign({
-          size: "7",
+          variant: "display70",
           fontWeight: "700"
         }, {
           children: "Customers also bought"
@@ -17474,7 +17520,7 @@ const ProductsSearchCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "8",
+            variant: "display80",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -17492,7 +17538,7 @@ const ProductsSearchFilters = _a => {
       gap: "1rem"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700",
         textTransform: "uppercase"
       }, {
@@ -17628,7 +17674,7 @@ const ProductsSearchFiltersModal = _ref => {
   }, {
     children: [jsxRuntime.jsx(Drawer.Title, {
       children: jsxRuntime.jsx(Text, Object.assign({
-        size: "8",
+        variant: "display80",
         fontWeight: "700"
       }, {
         children: "Filters"
@@ -17673,7 +17719,7 @@ function ProductsSearchRecap(_ref) {
           gap: "1rem"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "11",
+            variant: "display110",
             fontWeight: "700",
             textTransform: "uppercase",
             paddingRight: "10px"
@@ -17687,7 +17733,7 @@ function ProductsSearchRecap(_ref) {
               size: "sm",
               onClick: () => onRemove(filter, option)
             }, {
-              children: [jsxRuntime.jsx(bomMixerIcons.XCircle, {}), jsxRuntime.jsx("span", {
+              children: [jsxRuntime.jsx(bomMixerIcons.IconXCircle, {}), jsxRuntime.jsx("span", {
                 children: option.title
               })]
             }), option.id))
@@ -17778,7 +17824,7 @@ const ProductsSearch = _a => {
             flex: "1"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              size: "11",
+              variant: "display110",
               fontWeight: "700",
               textTransform: "uppercase"
             }, {
@@ -17807,7 +17853,7 @@ const ProductsSearch = _a => {
               gap: "1rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "11",
+                variant: "display110",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
@@ -17819,7 +17865,7 @@ const ProductsSearch = _a => {
                 }),
                 onClick: () => setLarge(false)
               }, {
-                children: jsxRuntime.jsx(bomMixerIcons.Grid, {})
+                children: jsxRuntime.jsx(bomMixerIcons.IconGrid, {})
               })), jsxRuntime.jsx(Button, Object.assign({
                 variant: "toggle",
                 className: bomCore.getClassNames({
@@ -17827,7 +17873,7 @@ const ProductsSearch = _a => {
                 }),
                 onClick: () => setLarge(true)
               }, {
-                children: jsxRuntime.jsx(bomMixerIcons.Square, {})
+                children: jsxRuntime.jsx(bomMixerIcons.IconSquare, {})
               }))]
             }))]
           })), jsxRuntime.jsx(Button, Object.assign({
@@ -17836,7 +17882,7 @@ const ProductsSearch = _a => {
             displaySm: "none",
             onClick: () => openDrawer('filters')
           }, {
-            children: jsxRuntime.jsx(bomMixerIcons.Filter, {})
+            children: jsxRuntime.jsx(bomMixerIcons.IconFilter, {})
           })), jsxRuntime.jsx(ProductsSearchFiltersModal, {
             visible: drawer == 'filters',
             onClose: closeDrawer
@@ -17894,7 +17940,7 @@ const Proposition = props => {
           alignItems: "center"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "3",
+            variant: "display30",
             fontWeight: "700",
             marginBottom: "2rem"
           }, {
@@ -17958,9 +18004,9 @@ const ReservedAreaMenu = props => {
   const getIconById = id => {
     switch (id) {
       case 'reserved_area_order_index':
-        return jsxRuntime.jsx(bomMixerIcons.Box, {});
+        return jsxRuntime.jsx(bomMixerIcons.IconBox, {});
       case 'reserved_area_account':
-        return jsxRuntime.jsx(bomMixerIcons.User, {});
+        return jsxRuntime.jsx(bomMixerIcons.IconUser, {});
     }
     return null;
   };
@@ -17990,7 +18036,7 @@ const ReservedAreaMenu = props => {
         as: "a",
         onClick: () => onLogout()
       }, {
-        children: [jsxRuntime.jsx(bomMixerIcons.LogOut, {}), jsxRuntime.jsx("span", {
+        children: [jsxRuntime.jsx(bomMixerIcons.IconLogOut, {}), jsxRuntime.jsx("span", {
           children: "Logout"
         })]
       }))]
@@ -18064,14 +18110,14 @@ const ShopCategoryHero = _a => {
             marginBottom: "0.5rem",
             items: item.breadcrumb
           }), item.abstract && jsxRuntime.jsx(Text, {
-            size: "2",
+            variant: "display20",
             fontWeight: "700",
             marginBottom: "1rem",
             dangerouslySetInnerHTML: {
               __html: item.abstract
             }
           }), item.description && jsxRuntime.jsx(Text, {
-            size: "7",
+            variant: "display70",
             marginBottom: "2rem",
             dangerouslySetInnerHTML: {
               __html: item.description
@@ -18193,7 +18239,7 @@ const ShopDetailRelatedCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "8",
+            variant: "display80",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -18217,7 +18263,7 @@ const ShopDetailRelated = _ref => {
   }, {
     children: jsxRuntime.jsxs(Container.Fluid, {
       children: [item.title && jsxRuntime.jsx(Text, {
-        size: "3",
+        variant: "display30",
         textAlign: "center",
         marginBottom: "4rem",
         dangerouslySetInnerHTML: {
@@ -18276,11 +18322,11 @@ const ShopHeroCard = _a => {
         justifyContent: "flex-end"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "10"
+          variant: "display100"
         }, {
           children: 'Shop the collection'
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "8",
+          variant: "display80",
           fontWeight: "700"
         }, {
           children: item.title
@@ -18314,13 +18360,13 @@ const ShopHero = _ref => {
             alignItems: "center"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              size: "2",
+              variant: "display20",
               fontWeight: "700",
               marginBottom: "1rem"
             }, {
               children: item.title
             })), item.abstract && jsxRuntime.jsx(Text, Object.assign({
-              size: "8",
+              variant: "display80",
               marginBottom: "1rem"
             }, {
               children: item.abstract
@@ -18374,7 +18420,7 @@ const ShopIncentive = _ref => {
           children: jsxRuntime.jsxs(Flex.Row, Object.assign({
             padding: "1rem 0"
           }, {
-            children: [jsxRuntime.jsx(bomMixerIcons.Calendar, {
+            children: [jsxRuntime.jsx(bomMixerIcons.IconCalendar, {
               width: "2rem",
               height: "2rem",
               color: "var(--color-primary-500)"
@@ -18382,11 +18428,11 @@ const ShopIncentive = _ref => {
               marginLeft: "0.5rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "10"
+                variant: "display100"
               }, {
                 children: "We'll replace it with a new one"
               })), jsxRuntime.jsx(Text, Object.assign({
-                size: "9",
+                variant: "display90",
                 fontWeight: "700"
               }, {
                 children: "10-years all-inclusive warranty"
@@ -18400,7 +18446,7 @@ const ShopIncentive = _ref => {
           children: jsxRuntime.jsxs(Flex.Row, Object.assign({
             padding: "1rem 0"
           }, {
-            children: [jsxRuntime.jsx(bomMixerIcons.RefreshCcw, {
+            children: [jsxRuntime.jsx(bomMixerIcons.IconRefreshCcw, {
               width: "2rem",
               height: "2rem",
               color: "var(--color-primary-500)"
@@ -18408,11 +18454,11 @@ const ShopIncentive = _ref => {
               marginLeft: "0.5rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "10"
+                variant: "display100"
               }, {
                 children: "Send it back for free"
               })), jsxRuntime.jsx(Text, Object.assign({
-                size: "9",
+                variant: "display90",
                 fontWeight: "700"
               }, {
                 children: "Free shipping on returns"
@@ -18425,7 +18471,7 @@ const ShopIncentive = _ref => {
           children: jsxRuntime.jsxs(Flex.Row, Object.assign({
             padding: "1rem 0"
           }, {
-            children: [jsxRuntime.jsx(bomMixerIcons.Truck, {
+            children: [jsxRuntime.jsx(bomMixerIcons.IconTruck, {
               width: "2rem",
               height: "2rem",
               color: "var(--color-primary-500)"
@@ -18433,11 +18479,11 @@ const ShopIncentive = _ref => {
               marginLeft: "0.5rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "10"
+                variant: "display100"
               }, {
                 children: "The shipping is on us"
               })), jsxRuntime.jsx(Text, Object.assign({
-                size: "9",
+                variant: "display90",
                 fontWeight: "700"
               }, {
                 children: "Free, contactless delivery"
@@ -18476,18 +18522,18 @@ const ShopItemsPropositionCard = _a => {
           justifyContent: "space-between"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             fontWeight: "700"
           }, {
             children: item.title
           })), jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             fontWeight: "700"
           }, {
             children: currency(item.price)
           }))]
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "8"
+          variant: "display80"
         }, {
           children: item.abstract
         }))]
@@ -18556,7 +18602,7 @@ const ShopSearchCard = _a => {
       })
     })), jsxRuntime.jsxs(Card.Content, {
       children: [item.collection && jsxRuntime.jsx(Text, Object.assign({
-        size: "9",
+        variant: "display90",
         fontWeight: "700"
       }, {
         children: item.collection + (item.designer ? ` by ${item.designer}` : '')
@@ -18575,7 +18621,7 @@ const ShopSearchCard = _a => {
         justifyContent: "space-between"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "10",
+          variant: "display100",
           fontWeight: "700"
         }, {
           children: currency(item.price)
@@ -18584,7 +18630,7 @@ const ShopSearchCard = _a => {
           onClick: onAddToCart
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            size: "10"
+            variant: "display100"
           }, {
             children: "Add to bag"
           }))
@@ -18740,7 +18786,7 @@ const ShopSearchFiltersModal = _ref => {
   }, {
     children: [jsxRuntime.jsx(Drawer.Title, {
       children: jsxRuntime.jsx(Text, Object.assign({
-        size: "8",
+        variant: "display80",
         fontWeight: "700"
       }, {
         children: "Filters"
@@ -18778,7 +18824,7 @@ function ShopSearchRecap(_ref) {
       borderBottom: "2px solid var(--color-neutral-200)"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700",
         textTransform: "uppercase",
         paddingRight: "10px"
@@ -18796,7 +18842,7 @@ function ShopSearchRecap(_ref) {
             size: "xs",
             onClick: () => onRemove(filter, option)
           }, {
-            children: [jsxRuntime.jsx(bomMixerIcons.XCircle, {}), jsxRuntime.jsx("span", {
+            children: [jsxRuntime.jsx(bomMixerIcons.IconXCircle, {}), jsxRuntime.jsx("span", {
               children: option.title
             })]
           }), option.id))
@@ -19007,7 +19053,7 @@ const ShopSearch = _a => {
               displaySm: "flex"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "11",
+                variant: "display110",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
@@ -19038,7 +19084,7 @@ const ShopSearch = _a => {
               displaySm: "none",
               onClick: () => openDrawer('filters')
             }, {
-              children: jsxRuntime.jsx(bomMixerIcons.Filter, {})
+              children: jsxRuntime.jsx(bomMixerIcons.IconFilter, {})
             })), jsxRuntime.jsx(ShopSearchFiltersModal, {
               visible: drawer == 'filters',
               onClose: closeDrawer
@@ -19051,7 +19097,7 @@ const ShopSearch = _a => {
               gap: "1rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "11",
+                variant: "display110",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
@@ -19063,7 +19109,7 @@ const ShopSearch = _a => {
                 }),
                 onClick: () => setLarge(true)
               }, {
-                children: jsxRuntime.jsx(bomMixerIcons.Square, {})
+                children: jsxRuntime.jsx(bomMixerIcons.IconSquare, {})
               })), jsxRuntime.jsx(Button, Object.assign({
                 variant: "toggle",
                 className: bomCore.getClassNames({
@@ -19071,7 +19117,7 @@ const ShopSearch = _a => {
                 }),
                 onClick: () => setLarge(false)
               }, {
-                children: jsxRuntime.jsx(bomMixerIcons.Grid, {})
+                children: jsxRuntime.jsx(bomMixerIcons.IconGrid, {})
               }))]
             })), jsxRuntime.jsx(Popover, Object.assign({
               content: jsxRuntime.jsx(SortMenu, {
@@ -19083,12 +19129,12 @@ const ShopSearch = _a => {
                 variant: "nav"
               }, {
                 children: [jsxRuntime.jsx(Text, Object.assign({
-                  size: "11",
+                  variant: "display110",
                   fontWeight: "700",
                   textTransform: "uppercase"
                 }, {
                   children: "Sort"
-                })), jsxRuntime.jsx(bomMixerIcons.ChevronDown, {})]
+                })), jsxRuntime.jsx(bomMixerIcons.IconChevronDown, {})]
               }))
             })), jsxRuntime.jsx(Button, Object.assign({
               variant: "nav",
@@ -19096,7 +19142,7 @@ const ShopSearch = _a => {
               displaySm: "none",
               onClick: () => openDrawer('filters')
             }, {
-              children: jsxRuntime.jsx(bomMixerIcons.Filter, {})
+              children: jsxRuntime.jsx(bomMixerIcons.IconFilter, {})
             })), jsxRuntime.jsx(ShopSearchFiltersModal, {
               visible: drawer == 'filters',
               onClose: closeDrawer
@@ -19141,7 +19187,7 @@ const ShopSearch = _a => {
                           disabled: option.count === 0,
                           onChange: event => onFilterOptionToggle(filter, option)
                         }), jsxRuntime.jsx(Text, Object.assign({
-                          size: "11"
+                          variant: "display110"
                         }, {
                           children: option.title
                         }))]
@@ -19179,9 +19225,9 @@ const ShopSearch = _a => {
               onChange: onPaginationChange
             }, {
               children: [false , false , jsxRuntime.jsx(Pagination.Previous, {
-                children: jsxRuntime.jsx(bomMixerIcons.ChevronLeft, {})
+                children: jsxRuntime.jsx(bomMixerIcons.IconChevronLeft, {})
               }), jsxRuntime.jsx(Pagination.Next, {
-                children: jsxRuntime.jsx(bomMixerIcons.ChevronRight, {})
+                children: jsxRuntime.jsx(bomMixerIcons.IconChevronRight, {})
               })]
             }))]
           }))]
@@ -19223,18 +19269,18 @@ const Split = _ref => {
               textAlignSm: "left"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "10",
+                variant: "display100",
                 marginBottom: "0.5rem",
                 textTransform: "uppercase"
               }, {
                 children: item.caption
               })), jsxRuntime.jsx(Text, Object.assign({
-                size: "3",
+                variant: "display30",
                 marginBottom: "0.5rem"
               }, {
                 children: item.title
               })), jsxRuntime.jsx(Text, Object.assign({
-                size: "7",
+                variant: "display70",
                 marginBottom: "3rem",
                 maxWidthSm: "40ch"
               }, {
@@ -19249,7 +19295,7 @@ const Split = _ref => {
                 }, {
                   children: [jsxRuntime.jsx("span", {
                     children: item.link.label
-                  }), " ", jsxRuntime.jsx(bomMixerIcons.PhoneCall, {})]
+                  }), " ", jsxRuntime.jsx(bomMixerIcons.IconPhoneCall, {})]
                 }))
               }))]
             }))
@@ -20118,18 +20164,18 @@ const StoreLocatorSearch = _ref => {
         maxWidthMd: "80ch"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "10",
+          variant: "display100",
           textTransform: "uppercase"
         }, {
           children: item.category
         })), jsxRuntime.jsx(Text, Object.assign({
-          size: "2",
+          variant: "display20",
           marginBottom: "1rem",
           fontWeight: "700"
         }, {
           children: item.title
         })), jsxRuntime.jsx(Text, {
-          size: "8",
+          variant: "display80",
           margin: "0 auto 2rem auto",
           maxWidth: "70ch",
           dangerouslySetInnerHTML: {
@@ -20159,7 +20205,7 @@ const StoreLocatorSearch = _ref => {
             source: autocompleteSource,
             onAutocomplete: onAutocomplete,
             ref: autocompleteRef,
-            before: jsxRuntime.jsx(bomMixerIcons.MapPin, {
+            before: jsxRuntime.jsx(bomMixerIcons.IconMapPin, {
               color: "var(--color-neutral-300)"
             }),
             after: jsxRuntime.jsx(Button, Object.assign({
@@ -20280,7 +20326,7 @@ const SwiperHero = props => {
               padding: "3rem 0 6rem 0"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                size: "2",
+                variant: "display20",
                 fontWeight: "700"
               }, {
                 children: item.title
@@ -20291,7 +20337,7 @@ const SwiperHero = props => {
               padding: "3rem 0 6rem 0"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "6",
+                variant: "display60",
                 marginBottom: "1rem"
               }, {
                 children: item.abstract
@@ -20305,7 +20351,7 @@ const SwiperHero = props => {
                 }, {
                   children: [jsxRuntime.jsx(Text, {
                     children: item.link.title
-                  }), " ", jsxRuntime.jsx(bomMixerIcons.ArrowRight, {})]
+                  }), " ", jsxRuntime.jsx(bomMixerIcons.IconArrowRight, {})]
                 }))
               }))]
             }))]
@@ -20316,53 +20362,34 @@ const SwiperHero = props => {
   }));
 };
 
-const TypographyText = /*#__PURE__*/React__default.default.forwardRef((_ref, ref) => {
-  let {
-    type,
-    size,
-    s
-  } = _ref;
-  switch (type) {
-    case 'primary':
-      return jsxRuntime.jsxs(Text, Object.assign({
-        ref: ref,
-        size: s + 1,
-        textTransform: "capitalize"
-      }, {
-        children: [type, " size ", s + 1]
-      }));
-    case 'secondary':
-      return jsxRuntime.jsxs(Text.Secondary, Object.assign({
-        ref: ref,
-        size: s + 1,
-        textTransform: "capitalize"
-      }, {
-        children: [type, " size ", s + 1]
-      }));
-    default:
-      return null;
-  }
-});
-TypographyText.displayName = 'TypographyText';
 const TypographyItem = props => {
   const ref = React.useRef(null);
   const [px, setPx] = React.useState('0px');
   React.useEffect(() => {
-    if (ref.current) {
-      setPx(window.getComputedStyle(ref.current).fontSize);
+    function onResize() {
+      if (ref.current) {
+        setPx(window.getComputedStyle(ref.current).fontSize);
+      }
     }
+    onResize();
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
   }, []);
   return jsxRuntime.jsxs(List, {
-    children: [jsxRuntime.jsx(TypographyText, Object.assign({
-      ref: ref
-    }, props)), jsxRuntime.jsxs(Flex.Row, Object.assign({
+    children: [jsxRuntime.jsx(Text, Object.assign({
+      variant: props.variant,
+      ref: ref,
+      textTransform: "capitalize"
+    }, {
+      children: props.variant
+    })), jsxRuntime.jsxs(Flex.Row, Object.assign({
       justifyContent: "space-between",
       paddingTop: "1rem"
     }, {
       children: [jsxRuntime.jsx(Code, Object.assign({
         fontSize: "0.7rem"
       }, {
-        children: props.size
+        children: typeof props.size === 'string' ? props.size : JSON.stringify(props.size)
       })), jsxRuntime.jsx(Code, Object.assign({
         fontSize: "0.7rem"
       }, {
@@ -20376,19 +20403,22 @@ const Typography = props => {
   return jsxRuntime.jsx(Section, Object.assign({
     padding: "3rem 0"
   }, {
-    children: Object.entries(theme.font).map((_ref2, k) => {
-      let [key, value] = _ref2;
-      return jsxRuntime.jsxs(Box, Object.assign({
-        padding: "0 1rem 3rem 1rem"
-      }, {
-        children: [jsxRuntime.jsx(Code, {
-          children: value.family
-        }), value.size.map((size, s) => size && jsxRuntime.jsx(TypographyItem, {
-          type: key,
-          size: size,
-          s: s
-        }, s))]
-      }), key);
+    children: Object.entries(theme.font).map(_ref => {
+      let [key, value] = _ref;
+      if (value) {
+        return jsxRuntime.jsxs(Box, Object.assign({
+          padding: "0 1rem 1rem 1rem"
+        }, {
+          children: [value.family && jsxRuntime.jsx(Code, {
+            children: value.family
+          }), jsxRuntime.jsx(TypographyItem, {
+            variant: key,
+            size: value.size
+          })]
+        }), key);
+      } else {
+        return null;
+      }
     })
   }));
 };
@@ -20431,12 +20461,32 @@ exports.ContactHero = ContactHero;
 exports.Container = Container;
 exports.ContainerBase = ContainerBase;
 exports.ContainerFluid = ContainerFluid;
+exports.CssActive = CssActive;
+exports.CssAfter = CssAfter;
+exports.CssAfterInverted = CssAfterInverted;
 exports.CssBase = CssBase;
+exports.CssButtonCircle = CssButtonCircle;
+exports.CssButtonDefault = CssButtonDefault;
+exports.CssButtonGhost = CssButtonGhost;
+exports.CssButtonLink = CssButtonLink;
+exports.CssButtonNav = CssButtonNav;
+exports.CssButtonNavInverted = CssButtonNavInverted;
+exports.CssButtonOutline = CssButtonOutline;
+exports.CssButtonPrimary = CssButtonPrimary;
+exports.CssButtonSecondary = CssButtonSecondary;
+exports.CssButtonToggle = CssButtonToggle;
+exports.CssButtonUnderline = CssButtonUnderline;
 exports.CssDebug = CssDebug;
+exports.CssDefault = CssDefault;
+exports.CssDisabled = CssDisabled;
+exports.CssFocus = CssFocus;
 exports.CssPrint = CssPrint;
 exports.CssReset = CssReset;
+exports.CssResponsive = CssResponsive;
 exports.CssScrollbar = CssScrollbar;
+exports.CssSvg = CssSvg;
 exports.CssTypography = CssTypography;
+exports.CssUnderline = CssUnderline;
 exports.CssVars = CssVars;
 exports.CustomSelect = CustomSelect;
 exports.Divider = Divider;
@@ -20550,9 +20600,12 @@ exports.SwiperHero = SwiperHero;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea;
+exports.TextBase = TextBase;
 exports.Tooltip = Tooltip;
 exports.Transition = Transition;
 exports.Typography = Typography;
+exports.VariantsProvider = VariantsProvider;
+exports.buttonVariants = buttonVariants;
 exports.camelize = camelize;
 exports.eachMedia = eachMedia;
 exports.filterStoreLocatorItem = filterStoreLocatorItem;
@@ -20570,5 +20623,6 @@ exports.mapChildsByType = mapChildsByType;
 exports.sizes = sizes;
 exports.theme = customTheme;
 exports.useAutocompleteContext = useAutocompleteContext;
+exports.useVariants = useVariants;
 exports.withPageTransition = withPageTransition;
 //# sourceMappingURL=index.js.map