@websolutespa/bom-mixer-ui 0.2.0 → 0.4.0

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var bomMixerCore = require('@websolutespa/bom-mixer-core');
+var bomCore = require('@websolutespa/bom-core');
 var bomMixerHooks = require('@websolutespa/bom-mixer-hooks');
 var React = require('react');
 var styled = require('styled-components');
@@ -199,7 +199,7 @@ const AccordionGroup = _a => {
     updateValues
   }), [state.join(',')]);
   const indexedChildren = React.useMemo(() => setChildrenIndex(children, [Accordion]), [children]);
-  const classNames = bomMixerCore.getClassNames('accordion-group', className);
+  const classNames = bomCore.getClassNames('accordion-group', className);
   return jsxRuntime.jsx(AccordionContext.Provider, Object.assign({
     value: initialValue
   }, {
@@ -245,7 +245,7 @@ const AccordionIcon_ = _ref => {
   let {
     active
   } = _ref;
-  const classNames = bomMixerCore.getClassNames({
+  const classNames = bomCore.getClassNames({
     active
   });
   return jsxRuntime.jsx(DownArrow$2, {
@@ -278,7 +278,7 @@ const StyledAccordion$1 = styled__default.default.div`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: var(--color-neutral-900);
+    // color: var(--color-neutral-900);
     user-select: none;
     /*
     & > span {
@@ -289,7 +289,7 @@ const StyledAccordion$1 = styled__default.default.div`
   }
 
   .subtitle {
-    color: var(--color-primary-500);
+    // color: var(--color-primary-500);
     margin: 0;
 
     & > :global(*) {
@@ -328,7 +328,7 @@ const AccordionBase = _a => {
   } = useAccordionContext();
   const [visible, setVisible, visibleRef] = bomMixerHooks.useCurrentState(initialVisible);
   if (!title) {
-    bomMixerCore.consoleWarn('"title" is required.', 'Accordion');
+    bomCore.consoleWarn('"title" is required.', 'Accordion');
   }
   React.useEffect(() => {
     if (!values.length) {
@@ -342,7 +342,7 @@ const AccordionBase = _a => {
     setVisible(visible);
     updateValues && updateValues(index, visible);
   };
-  const classNames = bomMixerCore.getClassNames('accordion', {
+  const classNames = bomCore.getClassNames('accordion', {
     shadow
   }, className);
   return jsxRuntime.jsxs(StyledAccordion$1, Object.assign({
@@ -373,7 +373,7 @@ const AccordionBase = _a => {
     }))]
   }));
 };
-const Accordion = bomMixerCore.withSchema(AccordionBase, {
+const Accordion = bomCore.withSchema(AccordionBase, {
   Group: AccordionGroup,
   displayName: 'Accordion'
 });
@@ -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) {
@@ -899,7 +899,7 @@ const Link = /*#__PURE__*/React__default.default.forwardRef((_a, ref) => {
       children
     } = _a,
     props = __rest(_a, ["href", "icon", "underline", "className", "children"]);
-  const classNames = bomMixerCore.getClassNames('link', {
+  const classNames = bomCore.getClassNames('link', {
     underline
   }, className);
   return jsxRuntime.jsxs(StyledLink, Object.assign({
@@ -925,7 +925,7 @@ const BreadcrumbSeparator = _ref => {
     className = '',
     children
   } = _ref;
-  const classNames = bomMixerCore.getClassNames('breadcrumb-separator', className);
+  const classNames = bomCore.getClassNames('breadcrumb-separator', className);
   return jsxRuntime.jsx(StyledBreadcrumbSeparator, Object.assign({
     className: classNames
   }, {
@@ -948,7 +948,7 @@ const BreadcrumbItem = /*#__PURE__*/React__default.default.forwardRef((_a, ref)
   const clickHandler = event => {
     onClick && onClick(event);
   };
-  const classNames = bomMixerCore.getClassNames('breadcrumb-item', className);
+  const classNames = bomCore.getClassNames('breadcrumb-item', className);
   if (!isLink) {
     return jsxRuntime.jsx("span", Object.assign({
       className: classNames,
@@ -1050,7 +1050,7 @@ const BreadcrumbBase = _a => {
     children: withSeparatorChildren
   }));
 };
-const Breadcrumb = bomMixerCore.withSchema(BreadcrumbBase, {
+const Breadcrumb = bomCore.withSchema(BreadcrumbBase, {
   Item: BreadcrumbItem,
   Separator: BreadcrumbSeparator,
   Group: BreadcrumbGroup,
@@ -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"]);
-  const classNames = bomMixerCore.getClassNames('button', className, {
+    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
   }));
@@ -1628,7 +1659,7 @@ const CardBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
       as = 'div'
     } = _a,
     props = __rest(_a, ["children", "className", "as"]);
-  const classNames = bomMixerCore.getClassNames('card', className);
+  const classNames = bomCore.getClassNames('card', className);
   return jsxRuntime.jsx(StyledCard$5, Object.assign({
     className: classNames,
     ref: ref,
@@ -1638,7 +1669,7 @@ const CardBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }));
 });
 CardBase.displayName = 'Card';
-const Card = bomMixerCore.withSchema(CardBase, {
+const Card = bomCore.withSchema(CardBase, {
   Background: Background,
   Content: CardContent,
   Footer: CardFooter
@@ -1678,7 +1709,7 @@ const ContainerFluid = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }));
 });
 ContainerFluid.displayName = 'ContainerFluid';
-const Container = bomMixerCore.withSchema(ContainerBase, {
+const Container = bomCore.withSchema(ContainerBase, {
   Fluid: ContainerFluid,
   displayName: 'Container'
 });
@@ -1898,9 +1929,9 @@ const Backdrop = /*#__PURE__*/React__default.default.memo(_a => {
       clearTimeout(timer);
     }, 0);
   };
-  const backdropClassNames = bomMixerCore.getClassNames('backdrop', backdropClassName);
-  const layerClassNames = bomMixerCore.getClassNames('layer', layerClassName);
-  const positionClassNames = bomMixerCore.getClassNames('position', positionClassName);
+  const backdropClassNames = bomCore.getClassNames('backdrop', backdropClassName);
+  const layerClassNames = bomCore.getClassNames('layer', layerClassName);
+  const positionClassNames = bomCore.getClassNames('position', positionClassName);
   // !!! todo backdrop position styled component with css responsive.
   return jsxRuntime.jsx(Transition, Object.assign({
     name: "backdrop-wrapper",
@@ -1954,7 +1985,7 @@ const ModalContent = _a => {
       children
     } = _a,
     props = __rest(_a, ["className", "children"]);
-  const classNames = bomMixerCore.getClassNames('content', className);
+  const classNames = bomCore.getClassNames('content', className);
   return jsxRuntime.jsx(StyleContent, Object.assign({
     className: classNames
   }, props, {
@@ -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, {})
     }))]
   }));
 };
@@ -2165,7 +2196,7 @@ const DrawerWrapper = _a => {
       }
     }
   };
-  const classNames = bomMixerCore.getClassNames('wrapper', placement, className);
+  const classNames = bomCore.getClassNames('wrapper', placement, className);
   return jsxRuntime.jsx(Transition, Object.assign({
     name: "wrapper",
     visible: visible,
@@ -2278,7 +2309,7 @@ const DrawerBase = _a => {
     }))
   })), portal);
 };
-const Drawer = bomMixerCore.withSchema(DrawerBase, {
+const Drawer = bomCore.withSchema(DrawerBase, {
   Title: ModalTitle,
   Subtitle: ModalSubtitle,
   Content: ModalContent,
@@ -2404,7 +2435,7 @@ const Dropdown = /*#__PURE__*/React__default.default.memo(_ref => {
       const element = getPopupContainer();
       const style = window.getComputedStyle(element);
       if (style.position === 'static') {
-        bomMixerCore.consoleWarn('The element specified by "getPopupContainer" must have "position" set.');
+        bomCore.consoleWarn('The element specified by "getPopupContainer" must have "position" set.');
       }
     }
   }
@@ -2461,7 +2492,7 @@ const Dropdown = /*#__PURE__*/React__default.default.memo(_ref => {
   if (!portal) {
     return null;
   }
-  const classNames = bomMixerCore.getClassNames('dropdown', disableMatchWidth ? 'disable-match' : 'width-match');
+  const classNames = bomCore.getClassNames('dropdown', disableMatchWidth ? 'disable-match' : 'width-match');
   return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx(Transition, Object.assign({
     visible: visible
   }, {
@@ -2558,7 +2589,7 @@ const Expand = _ref => {
       clearTimeout(resetTimer.current);
     };
   }, [isExpanded]);
-  const classNames = bomMixerCore.getClassNames('container', {
+  const classNames = bomCore.getClassNames('container', {
     expanded: selfExpanded,
     visible
   });
@@ -2683,7 +2714,7 @@ const FlexFlow = /*#__PURE__*/React.forwardRef((_a, ref) => {
       window.removeEventListener('resize', onResize);
     };
   }, [children]);
-  const classNames = bomMixerCore.getClassNames('flex-flow', className);
+  const classNames = bomCore.getClassNames('flex-flow', className);
   return jsxRuntime.jsx(StyledFlexFlow, Object.assign({
     className: classNames,
     ref: innerRef,
@@ -2764,7 +2795,7 @@ const FlexBase = styled__default.default.div`
   align-items: center;
   ${props => getCssResponsive(props)}
 `;
-const Flex = bomMixerCore.withSchema(FlexBase, {
+const Flex = bomCore.withSchema(FlexBase, {
   Row: FlexRow,
   Col: FlexCol,
   Responsive: FlexResponsive,
@@ -2772,25 +2803,65 @@ const Flex = bomMixerCore.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: ["0.9", "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.625", "1.5", "1.6", "1.7", "1.8"]
+  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: ["0.9", "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.625", "1.5", "1.6", "1.7", "1.8"]
+  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,26 +2937,26 @@ var color = {
     "900": "#09090A"
   },
   primary: {
-    "100": "#F4F5FB",
-    "200": "#C4D2F9",
-    "300": "#9EAEF5",
-    "400": "#727CEF",
-    "500": "#4F46E5",
-    "600": "#3A33C4",
-    "700": "#2923A4",
-    "800": "#1A1684",
-    "900": "#100D6D"
+    "100": "#e0e6ef",
+    "200": "#bee3f5",
+    "300": "#86cdee",
+    "400": "#5bbce9",
+    "500": "#00a2ed",
+    "600": "#0071a6",
+    "700": "#005177",
+    "800": "#003147",
+    "900": "#001018"
   },
   secondary: {
-    "100": "#FFCDD8",
-    "200": "#FF9BBC",
-    "300": "#FF69AA",
-    "400": "#FF43A7",
-    "500": "#ff05a3",
-    "600": "#DB03A1",
-    "700": "#B70298",
-    "800": "#930189",
-    "900": "#76007A"
+    "100": "#e6fded",
+    "200": "#b3f9ca",
+    "300": "#80f5a7",
+    "400": "#4df083",
+    "500": "#00ea4e",
+    "600": "#00a437",
+    "700": "#007527",
+    "800": "#004617",
+    "900": "#001708"
   },
   success: {
     "100": "#CFFDD5",
@@ -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: 0.9;
-  --font-primary-line-height-1: 1.0;
-  --font-primary-line-height-2: 1.1;
-  --font-primary-line-height-3: 1.2;
-  --font-primary-line-height-4: 1.3;
-  --font-primary-line-height-5: 1.4;
-  --font-primary-line-height-6: 1.5;
-  --font-primary-line-height-7: 1.625;
-  --font-primary-line-height-8: 1.5;
-  --font-primary-line-height-9: 1.6;
-  --font-primary-line-height-10: 1.7;
-  --font-primary-line-height-11: 1.8;
-  --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: 0.9;
-  --font-secondary-line-height-1: 1.0;
-  --font-secondary-line-height-2: 1.1;
-  --font-secondary-line-height-3: 1.2;
-  --font-secondary-line-height-4: 1.3;
-  --font-secondary-line-height-5: 1.4;
-  --font-secondary-line-height-6: 1.5;
-  --font-secondary-line-height-7: 1.625;
-  --font-secondary-line-height-8: 1.5;
-  --font-secondary-line-height-9: 1.6;
-  --font-secondary-line-height-10: 1.7;
-  --font-secondary-line-height-11: 1.8;
+  --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,24 +3086,24 @@ const CssVars = styled.css`
   --color-neutral-700: #44444B;
   --color-neutral-800: #27272B;
   --color-neutral-900: #09090A;
-  --color-primary-100: #F4F5FB;
-  --color-primary-200: #C4D2F9;
-  --color-primary-300: #9EAEF5;
-  --color-primary-400: #727CEF;
-  --color-primary-500: #4F46E5;
-  --color-primary-600: #3A33C4;
-  --color-primary-700: #2923A4;
-  --color-primary-800: #1A1684;
-  --color-primary-900: #100D6D;
-  --color-secondary-100: #FFCDD8;
-  --color-secondary-200: #FF9BBC;
-  --color-secondary-300: #FF69AA;
-  --color-secondary-400: #FF43A7;
-  --color-secondary-500: #ff05a3;
-  --color-secondary-600: #DB03A1;
-  --color-secondary-700: #B70298;
-  --color-secondary-800: #930189;
-  --color-secondary-900: #76007A;
+  --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;
+  --color-primary-800: #003147;
+  --color-primary-900: #001018;
+  --color-secondary-100: #e6fded;
+  --color-secondary-200: #b3f9ca;
+  --color-secondary-300: #80f5a7;
+  --color-secondary-400: #4df083;
+  --color-secondary-500: #00ea4e;
+  --color-secondary-600: #00a437;
+  --color-secondary-700: #007527;
+  --color-secondary-800: #004617;
+  --color-secondary-900: #001708;
   --color-success-100: #CFFDD5;
   --color-success-200: #A1FCB5;
   --color-success-300: #70F69B;
@@ -3120,6 +3167,24 @@ const CssScrollbar = styled.css`
       background-color: var(--color-neutral-100);
     }
   }
+
+  .negative * {
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--color-neutral-600);
+
+      &:hover {
+        background-color: var(--color-neutral-400);
+      }
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: var(--color-neutral-800);
+
+      &:hover {
+        background-color: var(--color-neutral-800);
+      }
+    }
+  }
 `;
 
 const CssBase = styled.css`
@@ -3129,6 +3194,11 @@ body {
   // color: var(--color-neutral-500);
   scroll-behavior: smooth;
 }
+
+.negative {
+  background: var(--color-neutral-900);
+  color: var(--color-neutral-100);
+}
 `;
 
 const CssDebug = styled.css`
@@ -3385,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 {
@@ -3451,7 +3523,7 @@ const GridBase = styled__default.default.div`
   ${props => getMediaQueryColumn(props)}
   ${props => getCssResponsive(props)}
 `;
-const Grid = bomMixerCore.withSchema(GridBase, {
+const Grid = bomCore.withSchema(GridBase, {
   Row: GridRow,
   displayName: 'Grid'
 });
@@ -3516,7 +3588,7 @@ const Highlight = _a => {
       transition: isFirstVisible ? 'opacity' : 'opacity, width, left, top'
     };
   }, [rect, hoverWidthRatio, hoverHeightRatio, isFirstVisible]);
-  const classNames = bomMixerCore.getClassNames('highlight', {
+  const classNames = bomCore.getClassNames('highlight', {
     active: visible
   }, className);
   return jsxRuntime.jsx(StyledHighlight, Object.assign({
@@ -3603,7 +3675,7 @@ const InfiniteLoader = _a => {
     onScroll();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const classNames = bomMixerCore.getClassNames('infinite-loader');
+  const classNames = bomCore.getClassNames('infinite-loader');
   return jsxRuntime.jsx(StyledInfiniteLoader, Object.assign({
     as: as,
     ref: ref,
@@ -3666,7 +3738,7 @@ const MediaImage = _a => {
       type
     } = _a,
     props = __rest(_a, ["alt", "className", "type"]);
-  const classNames = bomMixerCore.getClassNames(className, 'image', {
+  const classNames = bomCore.getClassNames(className, 'image', {
     'image-svg': isSVG(props.src)
   });
   const imageProps = getImageProps(props);
@@ -3733,7 +3805,7 @@ const MediaInfo = _a => {
       className
     } = _a,
     props = __rest(_a, ["children", "className"]);
-  const classNames = bomMixerCore.getClassNames(className, 'media-info');
+  const classNames = bomCore.getClassNames(className, 'media-info');
   return jsxRuntime.jsx(StyledMediaInfo, Object.assign({
     className: classNames
   }, props, {
@@ -3832,7 +3904,7 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
     id,
     open
   } = useMediaGalleryContext();
-  const classNames = bomMixerCore.getClassNames(className, 'media', {
+  const classNames = bomCore.getClassNames(className, 'media', {
     'media--gallery': id
   });
   const mediaChildren = item && !children ? getMediaItems(item, {
@@ -3850,7 +3922,7 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }));
 });
 MediaBase.displayName = 'Media';
-const Media = bomMixerCore.withSchema(MediaBase, {
+const Media = bomCore.withSchema(MediaBase, {
   Info: MediaInfo
 });
 function getMediaItems(itemOrItems, options) {
@@ -3983,7 +4055,7 @@ const ModalButton = /*#__PURE__*/React__default.default.forwardRef((_a, ref) =>
     effect: false,
     ref: btnRef
   });
-  const classNames = bomMixerCore.getClassNames(resolveClassName, className);
+  const classNames = bomCore.getClassNames(resolveClassName, className);
   return jsxRuntime.jsx(StyledButton$1, Object.assign({
     variant: "default",
     className: classNames
@@ -4036,14 +4108,14 @@ const ModalClose = /*#__PURE__*/React__default.default.forwardRef((_a, ref) => {
     effect: false,
     ref: btnRef
   });
-  const classNames = bomMixerCore.getClassNames(className);
+  const classNames = bomCore.getClassNames(className);
   return jsxRuntime.jsx(StyledButton, Object.assign({
     variant: "circle",
     className: classNames
   }, overrideProps, {
     onClick: onButtonClick
   }, {
-    children: jsxRuntime.jsx(bomMixerIcons.X, {})
+    children: jsxRuntime.jsx(bomMixerIcons.IconX, {})
   }));
 });
 ModalClose.defaultProps = defaultProps$2;
@@ -4179,7 +4251,7 @@ const ModalWrapper = _a => {
       }
     }
   };
-  const classNames = bomMixerCore.getClassNames('wrapper', className);
+  const classNames = bomCore.getClassNames('wrapper', className);
   return jsxRuntime.jsx(Transition, Object.assign({
     name: "wrapper",
     visible: visible,
@@ -4306,7 +4378,7 @@ const ModalBase = _ref => {
     }))
   })), portal);
 };
-const Modal = bomMixerCore.withSchema(ModalBase, {
+const Modal = bomCore.withSchema(ModalBase, {
   Title: ModalTitle,
   Subtitle: ModalSubtitle,
   Content: ModalContent,
@@ -4332,8 +4404,8 @@ const CssA = styled.css`
   }
 `;
 const CssP = styled.css`
-  p {
-    margin-bottom: 2rem;
+  p:not(:last-child) {
+    margin-bottom: 1rem;
   }
 `;
 const CssUl = styled.css`
@@ -4346,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;
@@ -4407,9 +4472,7 @@ const TextSROnly = styled__default.default.div`
   white-space: nowrap;
   border-width: 0;
 `;
-const Text = bomMixerCore.withSchema(TextBase, {
-  Primary: TextBase,
-  Secondary: TextSecondary,
+const Text = bomCore.withSchema(TextBase, {
   SROnly: TextSROnly,
   displayName: 'Text'
 });
@@ -4461,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)`
@@ -4475,7 +4538,7 @@ const MediaGalleryPrev = () => {
   }, {
     children: [jsxRuntime.jsx("span", {
       children: "next"
-    }), jsxRuntime.jsx(bomMixerIcons.ArrowLeft, {})]
+    }), jsxRuntime.jsx(bomMixerIcons.IconArrowLeft, {})]
   }));
 };
 
@@ -4654,7 +4717,7 @@ const MediaGallery = /*#__PURE__*/React.forwardRef((_a, ref) => {
         variant: "circle",
         onClick: closeModal
       }, {
-        children: jsxRuntime.jsx(bomMixerIcons.X, {})
+        children: jsxRuntime.jsx(bomMixerIcons.IconX, {})
       }))]
     }))]
   });
@@ -4802,7 +4865,7 @@ const NavBase = props => {
     children: props.children
   }));
 };
-const Nav = bomMixerCore.withSchema(NavBase, {
+const Nav = bomCore.withSchema(NavBase, {
   Row: NavRow,
   Col: NavCol,
   displayName: 'Nav'
@@ -4868,7 +4931,7 @@ const PageNav = props => {
     onScroll();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const classNames = bomMixerCore.getClassNames('page-nav');
+  const classNames = bomCore.getClassNames('page-nav');
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: jsxRuntime.jsx(PageNavContainer, Object.assign({
       ref: innerRef,
@@ -4886,7 +4949,7 @@ const PageNav = props => {
             }, {
               children: props.items.map((item, i) => jsxRuntime.jsx(Box, {
                 children: jsxRuntime.jsx(Button, Object.assign({
-                  className: bomMixerCore.getClassNames({
+                  className: bomCore.getClassNames({
                     active: item.href === `#${id}`
                   }),
                   as: "a",
@@ -5009,7 +5072,7 @@ const PaginationItem = _a => {
     }
     onClick && onClick(event);
   };
-  const classNames = bomMixerCore.getClassNames({
+  const classNames = bomCore.getClassNames({
     active,
     disabled
   });
@@ -5061,7 +5124,7 @@ const PaginationEllipsis = _ref => {
     onClick
   } = _ref;
   const [showMore, setShowMore] = React.useState(false);
-  const moreClassNames = bomMixerCore.getClassNames('more', {
+  const moreClassNames = bomCore.getClassNames('more', {
     before: isBefore
   });
   return jsxRuntime.jsx(StyledPaginationItem, Object.assign({
@@ -5279,7 +5342,7 @@ const PaginationBase = _a => {
     }))
   }));
 };
-const Pagination = bomMixerCore.withSchema(PaginationBase, {
+const Pagination = bomCore.withSchema(PaginationBase, {
   Previous: PaginationPrevious,
   Next: PaginationNext,
   displayName: 'Pagination'
@@ -5562,7 +5625,7 @@ const TooltipContent = _ref => {
     iconOffset,
     hasShadow
   };
-  const classNames = bomMixerCore.getClassNames('tooltip-content', className);
+  const classNames = bomCore.getClassNames('tooltip-content', className);
   return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx(Transition, Object.assign({
     visible: visible
   }, {
@@ -5660,7 +5723,7 @@ const Tooltip = _a => {
   };
   return jsxRuntime.jsxs(StyledTooltip$1, Object.assign({
     ref: ref,
-    className: bomMixerCore.getClassNames('tooltip', className),
+    className: bomCore.getClassNames('tooltip', className),
     onMouseEnter: () => onEnterLeave(true),
     onMouseLeave: () => onEnterLeave(false),
     onClick: onClick
@@ -5738,7 +5801,7 @@ const PopoverItem = _a => {
     }
     onItemClick(event);
   };
-  const classNames = bomMixerCore.getClassNames('item', {
+  const classNames = bomCore.getClassNames('item', {
     line,
     title
   }, className);
@@ -5801,7 +5864,7 @@ const PopoverBase = _a => {
     }
     onPopoverVisibleChange(customVisible);
   }, [customVisible, onPopoverVisibleChange]);
-  const portalClassNames = bomMixerCore.getClassNames('popover', portalClassName);
+  const portalClassNames = bomCore.getClassNames('popover', portalClassName);
   return jsxRuntime.jsx(PopoverContext.Provider, Object.assign({
     value: value
   }, {
@@ -5817,13 +5880,13 @@ const PopoverBase = _a => {
     }))
   }));
 };
-const Popover = bomMixerCore.withSchema(PopoverBase, {
+const Popover = bomCore.withSchema(PopoverBase, {
   Item: PopoverItem,
   Option: PopoverItem,
   displayName: 'Popover'
 });
 
-const SectionContainer = styled__default.default.div`
+const SectionContainer = styled__default.default.section`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -5832,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;
@@ -5864,7 +5926,7 @@ const SectionBase = props => {
     children: props.children
   }));
 };
-const Section = bomMixerCore.withSchema(SectionBase, {
+const Section = bomCore.withSchema(SectionBase, {
   Background: Background,
   displayName: 'Section'
 });
@@ -5886,7 +5948,7 @@ const Skeleton = _a => {
     } = _a,
     props = __rest(_a, ["loading"]);
   const ref = React.useRef(null);
-  const classNames = bomMixerCore.getClassNames('skeleton');
+  const classNames = bomCore.getClassNames('skeleton');
   return jsxRuntime.jsx(StyledSkeleton, Object.assign({
     ref: ref,
     className: classNames
@@ -5948,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)`
@@ -5962,7 +6024,7 @@ const SwiperPrev = () => {
   }, {
     children: [jsxRuntime.jsx("span", {
       children: "next"
-    }), jsxRuntime.jsx(bomMixerIcons.ArrowLeft, {})]
+    }), jsxRuntime.jsx(bomMixerIcons.IconArrowLeft, {})]
   }));
 };
 
@@ -6022,7 +6084,7 @@ const SwiperPagination = props => {
   const onSetSlide = index => {
     setIndex(index);
   };
-  const getClassName = i => bomMixerCore.getClassNames({
+  const getClassName = i => bomCore.getClassNames({
     active: index === i
   });
   return jsxRuntime.jsx(PaginationContainer, Object.assign({
@@ -6072,7 +6134,7 @@ const SwiperBase = props => {
     })]
   }));
 };
-const SwiperComponent = bomMixerCore.withSchema(SwiperBase, {
+const SwiperComponent = bomCore.withSchema(SwiperBase, {
   Prev: SwiperPrev,
   Next: SwiperNext,
   Pagination: SwiperPagination,
@@ -6202,7 +6264,7 @@ const TabsItem = _ref => {
         onClick && onClick(value);
       };
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const classNames = bomMixerCore.getClassNames('tab', {
+      const classNames = bomCore.getClassNames('tab', {
         active,
         disabled,
         [activeClassName]: active,
@@ -6344,7 +6406,7 @@ const TabsBase = _a => {
     value: initialValue
   }, {
     children: jsxRuntime.jsxs(StyledTabs, Object.assign({
-      className: bomMixerCore.getClassNames('tabs', className),
+      className: bomCore.getClassNames('tabs', className),
       leftSpace: leftSpace,
       align: align
     }, props, {
@@ -6358,7 +6420,7 @@ const TabsBase = _a => {
           hoverHeightRatio: hoverHeightRatio,
           hoverWidthRatio: hoverWidthRatio
         }), jsxRuntime.jsx("div", Object.assign({
-          className: bomMixerCore.getClassNames('scroll-container', {
+          className: bomCore.getClassNames('scroll-container', {
             'hide-divider': hideDivider
           })
         }, {
@@ -6384,7 +6446,7 @@ const TabsBase = _a => {
     }))
   }));
 };
-const Tabs = bomMixerCore.withSchema(TabsBase, {
+const Tabs = bomCore.withSchema(TabsBase, {
   Item: TabsItem,
   Tab: TabsItem,
   displayName: 'Tabs'
@@ -6422,7 +6484,7 @@ const AutocompleteDropdown = /*#__PURE__*/React__default.default.forwardRef((_re
     ref
   } = useAutocompleteContext();
   React.useImperativeHandle(dropdownRef, () => internalDropdownRef.current);
-  const classNames = bomMixerCore.getClassNames('select-dropdown', className);
+  const classNames = bomCore.getClassNames('select-dropdown', className);
   return jsxRuntime.jsx(Dropdown, Object.assign({
     parent: ref,
     visible: visible,
@@ -6680,7 +6742,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_a, ref) => {
       setInnerValue(initialValue.name);
     }
   }, [initialValue]);
-  const classNames = bomMixerCore.getClassNames('autocomplete', {
+  const classNames = bomCore.getClassNames('autocomplete', {
     focus,
     disabled: props.disabled,
     readonly: props.readOnly,
@@ -6815,7 +6877,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["className"]);
-  const classNames = bomMixerCore.getClassNames('checkbox', className);
+  const classNames = bomCore.getClassNames('checkbox', className);
   return jsxRuntime.jsxs(StyledCheckbox, Object.assign({
     className: classNames
   }, {
@@ -6880,7 +6942,7 @@ const CustomSelectDropdown = /*#__PURE__*/React__default.default.forwardRef((_re
     ref
   } = useCustomSelectContext();
   React.useImperativeHandle(dropdownRef, () => internalDropdownRef.current);
-  const classNames = bomMixerCore.getClassNames('select-dropdown', className);
+  const classNames = bomCore.getClassNames('select-dropdown', className);
   return jsxRuntime.jsx(Dropdown, Object.assign({
     parent: ref,
     visible: visible,
@@ -7065,7 +7127,7 @@ const CustomSelectMultipleValue = _ref => {
     onClear,
     children
   } = _ref;
-  const classNames = bomMixerCore.getClassNames('multiple-value', {
+  const classNames = bomCore.getClassNames('multiple-value', {
     disabled
   });
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -7154,7 +7216,7 @@ const CustomSelectOption = _a => {
   const isDisabled = React.useMemo(() => disabled || disableAll, [disabled, disableAll]);
   const isLabel = React.useMemo(() => label || divider, [label, divider]);
   if (!isLabel && valueProp === undefined) {
-    bomMixerCore.consoleWarn('The props "value" is required.', 'CustomSelect Option');
+    bomCore.consoleWarn('The props "value" is required.', 'CustomSelect Option');
   }
   const optionValue = valueProp || children || '';
   const active = React.useMemo(() => {
@@ -7178,7 +7240,7 @@ const CustomSelectOption = _a => {
     }
     updateValue && updateValue(optionValue);
   };
-  const classNames = bomMixerCore.getClassNames('option', {
+  const classNames = bomCore.getClassNames('option', {
     divider,
     label,
     active
@@ -7416,7 +7478,7 @@ const CustomSelectBase = /*#__PURE__*/React.forwardRef((_a, selectRef) => {
     updateVisible(false);
     setSelectFocus(false);
   };
-  const classNames = bomMixerCore.getClassNames('select', {
+  const classNames = bomCore.getClassNames('select', {
     active: selectFocus || visible,
     opened: visible,
     multiple,
@@ -7468,7 +7530,7 @@ const CustomSelectBase = /*#__PURE__*/React.forwardRef((_a, selectRef) => {
   }));
 });
 CustomSelectBase.displayName = 'CustomSelect';
-const CustomSelect = bomMixerCore.withSchema(CustomSelectBase, {
+const CustomSelect = bomCore.withSchema(CustomSelectBase, {
   Label: CustomSelectLabel,
   Divider: CustomSelectDivider,
   Option: CustomSelectOption
@@ -7491,7 +7553,7 @@ const Field = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["className"]);
-  const classNames = bomMixerCore.getClassNames('input', className);
+  const classNames = bomCore.getClassNames('input', className);
   return jsxRuntime.jsx(StyledField, Object.assign({
     ref: ref,
     className: classNames,
@@ -7513,7 +7575,7 @@ const FormError = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["className"]);
-  const classNames = bomMixerCore.getClassNames('form-error', className);
+  const classNames = bomCore.getClassNames('form-error', className);
   return jsxRuntime.jsx(StyledFormError, Object.assign({
     ref: ref,
     className: classNames
@@ -7535,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."
@@ -7582,7 +7644,7 @@ const Form = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["className"]);
-  const classNames = bomMixerCore.getClassNames('form', className, (_b = props.state) === null || _b === void 0 ? void 0 : _b.flags);
+  const classNames = bomCore.getClassNames('form', className, (_b = props.state) === null || _b === void 0 ? void 0 : _b.flags);
   return jsxRuntime.jsx(StyledForm, Object.assign({
     ref: ref,
     className: classNames,
@@ -7682,7 +7744,7 @@ const Input = /*#__PURE__*/React.forwardRef((_a, ref) => {
     onBlur && onBlur(event);
     setFocus(false);
   };
-  const classNames = bomMixerCore.getClassNames('input', {
+  const classNames = bomCore.getClassNames('input', {
     focus,
     disabled: props.disabled,
     readonly: props.readOnly,
@@ -7749,7 +7811,7 @@ const InputGroupBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["children", "className"]);
-  const classNames = bomMixerCore.getClassNames('input-group', className);
+  const classNames = bomCore.getClassNames('input-group', className);
   return jsxRuntime.jsx(StyledInputGroup, Object.assign({
     className: classNames,
     as: "div"
@@ -7758,7 +7820,7 @@ const InputGroupBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }));
 });
 InputGroupBase.displayName = 'InputGroup';
-const InputGroup = bomMixerCore.withSchema(InputGroupBase, {
+const InputGroup = bomCore.withSchema(InputGroupBase, {
   Input: Input
 });
 
@@ -7766,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)}
@@ -7777,7 +7839,7 @@ const Label = /*#__PURE__*/React.forwardRef((_a, ref) => {
       as = 'label'
     } = _a,
     props = __rest(_a, ["className", "as"]);
-  const classNames = bomMixerCore.getClassNames('label', className);
+  const classNames = bomCore.getClassNames('label', className);
   return jsxRuntime.jsx(StyledLabel, Object.assign({
     className: classNames,
     ref: ref,
@@ -8017,11 +8079,11 @@ const RadioCardTitle = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["as", "className"]);
-  const classNames = bomMixerCore.getClassNames('title', 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));
 });
@@ -8032,7 +8094,7 @@ const RadioCardAbstract = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["as", "className"]);
-  const classNames = bomMixerCore.getClassNames('abstract', className);
+  const classNames = bomCore.getClassNames('abstract', className);
   return jsxRuntime.jsx(Text, Object.assign({
     className: classNames,
     ref: ref
@@ -8045,9 +8107,9 @@ const RadioCardExtra = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["as", "className"]);
-  const classNames = bomMixerCore.getClassNames('extra', className);
+  const classNames = bomCore.getClassNames('extra', className);
   return jsxRuntime.jsx(Text, Object.assign({
-    size: "10",
+    variant: "display100",
     whiteSpace: "nowrap",
     className: classNames,
     ref: ref
@@ -8069,7 +8131,7 @@ const RadioCardBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   const hasMedia = mediaChildren && React__default.default.Children.count(mediaChildren) > 0;
   const [extraChildren, otherChildren] = getChildsByType(withoutMediaChildren, RadioCardExtra);
   const hasExtra = extraChildren && React__default.default.Children.count(extraChildren) > 0;
-  const classNames = bomMixerCore.getClassNames('radio-option', className);
+  const classNames = bomCore.getClassNames('radio-option', className);
   return jsxRuntime.jsxs(StyledRadioCard, Object.assign({
     className: classNames
   }, props, {
@@ -8112,7 +8174,7 @@ const RadioCardBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }));
 });
 RadioCardBase.displayName = 'RadioCard';
-const RadioCard = bomMixerCore.withSchema(RadioCardBase, {
+const RadioCard = bomCore.withSchema(RadioCardBase, {
   Group: RadioCardGroup,
   Title: RadioCardTitle,
   Abstract: RadioCardAbstract,
@@ -8230,7 +8292,7 @@ const RadioColorBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["as", "color", "children", "className"]);
-  const classNames = bomMixerCore.getClassNames('radio-color', className);
+  const classNames = bomCore.getClassNames('radio-color', className);
   return jsxRuntime.jsxs(StyledRadioColor, Object.assign({
     className: classNames
   }, {
@@ -8250,7 +8312,7 @@ const RadioColorBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }));
 });
 RadioColorBase.displayName = 'RadioColor';
-const RadioColor = bomMixerCore.withSchema(RadioColorBase, {
+const RadioColor = bomCore.withSchema(RadioColorBase, {
   Group: RadioColorGroup
 });
 
@@ -8404,7 +8466,7 @@ const RadioOptionBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["as", "children", "className"]);
-  const classNames = bomMixerCore.getClassNames('radio-option', className);
+  const classNames = bomCore.getClassNames('radio-option', className);
   return jsxRuntime.jsxs(StyledRadioOption, Object.assign({
     size: props.size,
     className: classNames
@@ -8426,7 +8488,7 @@ const RadioOptionBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }));
 });
 RadioOptionBase.displayName = 'RadioOption';
-const RadioOption = bomMixerCore.withSchema(RadioOptionBase, {
+const RadioOption = bomCore.withSchema(RadioOptionBase, {
   Group: RadioOptionGroup
 });
 
@@ -8532,7 +8594,7 @@ const RadioBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["as", "className"]);
-  const classNames = bomMixerCore.getClassNames('radio', className);
+  const classNames = bomCore.getClassNames('radio', className);
   return jsxRuntime.jsxs(StyledRadio, Object.assign({
     className: classNames
   }, {
@@ -8547,7 +8609,7 @@ const RadioBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }));
 });
 RadioBase.displayName = 'Radio';
-const Radio = bomMixerCore.withSchema(RadioBase, {
+const Radio = bomCore.withSchema(RadioBase, {
   Group: RadioGroup
 });
 
@@ -8657,8 +8719,8 @@ const Rating = _a => {
     }
     setValue(customValue < 0 ? 0 : customValue);
   }, [customValue]);
-  const ratingClassNames = bomMixerCore.getClassNames('rating', className);
-  const getIconClassNames = index => bomMixerCore.getClassNames('icon', {
+  const ratingClassNames = bomCore.getClassNames('rating', className);
+  const getIconClassNames = index => bomCore.getClassNames('icon', {
     hovered: index + 1 <= value
   });
   return jsxRuntime.jsx(StyledRating, Object.assign({
@@ -8749,7 +8811,7 @@ const Select = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["as", "className"]);
-  const classNames = bomMixerCore.getClassNames('select', className);
+  const classNames = bomCore.getClassNames('select', className);
   return jsxRuntime.jsxs(StyledSelect, Object.assign({
     className: classNames
   }, {
@@ -8810,7 +8872,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((_a, ref) => {
       className
     } = _a,
     props = __rest(_a, ["as", "children", "className"]);
-  const classNames = bomMixerCore.getClassNames('textarea', className);
+  const classNames = bomCore.getClassNames('textarea', className);
   return jsxRuntime.jsx(StyledTextArea, Object.assign({
     className: classNames,
     ref: ref,
@@ -8824,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);
@@ -9124,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()
       })
@@ -9423,7 +9485,7 @@ const withPageTransition = OriginalComponent => {
             variants: textVariants
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              size: "1"
+              variant: "display10"
             }, {
               children: page.title
             }))
@@ -9469,7 +9531,7 @@ const Carousel1 = _a => {
     } = _a,
     props = __rest(_a, ["item"]);
   const items = item.items;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsxs(StyledSection$1, Object.assign({
     className: classNames,
     padding: "7rem 0"
@@ -9478,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
@@ -9515,7 +9577,7 @@ const Carousel1 = _a => {
               variant: "nav"
             }, {
               children: jsxRuntime.jsx(Text, {
-                size: "8",
+                variant: "display80",
                 marginTop: "1rem",
                 dangerouslySetInnerHTML: {
                   __html: item.title
@@ -9542,7 +9604,7 @@ const Download1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsx(Section, Object.assign({
     className: classNames,
     padding: "6rem 0"
@@ -9550,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"
         }, {
@@ -9566,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
@@ -9596,7 +9658,7 @@ const MediaFull1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames('media', item.schema);
+  const classNames = bomCore.getClassNames('media', item.schema);
   return jsxRuntime.jsx(Media, {
     className: classNames,
     aspectRatio: 16 / 10,
@@ -9617,7 +9679,7 @@ const MediaFull2 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsx(Section, Object.assign({
     className: classNames,
     padding: "6rem 0"
@@ -9627,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
@@ -9649,7 +9711,7 @@ const MediaMedia1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsx(Section, Object.assign({
     className: classNames,
     padding: "6rem 0"
@@ -9665,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
@@ -9696,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
@@ -9771,7 +9833,7 @@ const Related1Card = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "6",
+            variant: "display60",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -9786,14 +9848,14 @@ const Related1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsx(Section, Object.assign({
     className: classNames,
     padding: "6rem 0"
   }, {
     children: jsxRuntime.jsxs(Container, {
       children: [item.title && jsxRuntime.jsx(Text, {
-        size: "3",
+        variant: "display30",
         textAlign: "center",
         marginBottom: "4rem",
         dangerouslySetInnerHTML: {
@@ -9828,7 +9890,7 @@ const SizesColors1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsx(Section, Object.assign({
     className: classNames,
     padding: "6rem 0"
@@ -9843,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
@@ -9902,7 +9964,7 @@ const Text1 = _ref => {
     item
   } = _ref;
   // !!! Container.Small
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsx(Section, Object.assign({
     className: classNames,
     padding: "6rem 0"
@@ -9913,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
@@ -9937,7 +9999,7 @@ const TextAside1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsx(Section, Object.assign({
     className: classNames,
     padding: "6rem 0"
@@ -9950,7 +10012,7 @@ const TextAside1 = _ref => {
           sm: 8
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "8",
+            variant: "display80",
             lineHeight: "2",
             dangerouslySetInnerHTML: {
               __html: item.description
@@ -9966,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))
@@ -9999,7 +10061,7 @@ const TextMedia1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsx(Section, Object.assign({
     className: classNames,
     padding: "6rem 0"
@@ -10016,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
               }
@@ -10040,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
@@ -10064,7 +10126,7 @@ const TextText1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsx(Section, Object.assign({
     className: classNames,
     padding: "6rem 0"
@@ -10076,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
@@ -10163,7 +10225,7 @@ const AuthForgot = _ref => {
       console.log('AuthForgot.valid', form.value);
       try {
         setError(undefined);
-        yield bomMixerCore.httpPost('/api/auth/forgot', form.value);
+        yield bomCore.httpPost('/api/auth/forgot', form.value);
         if (typeof onPasswordSent === 'function') {
           onPasswordSent();
         }
@@ -10198,7 +10260,7 @@ const AuthForgot = _ref => {
         rowGap: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "6",
+          variant: "display60",
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
@@ -10270,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?"
@@ -10343,7 +10405,7 @@ const AuthLogin = _ref => {
       console.log('AuthLogin.valid', form.value);
       try {
         setError(undefined);
-        const user = yield bomMixerCore.httpPost('/api/auth/login', form.value);
+        const user = yield bomCore.httpPost('/api/auth/login', form.value);
         if (user) {
           setUser(user);
           if (typeof onSignedIn === 'function') {
@@ -10383,7 +10445,7 @@ const AuthLogin = _ref => {
         rowGap: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "6",
+          variant: "display60",
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
@@ -10510,7 +10572,7 @@ const AuthRegister = _ref => {
       console.log('AuthRegister.valid', form.value);
       try {
         setError(undefined);
-        yield bomMixerCore.httpPost('/api/auth/register', form.value);
+        yield bomCore.httpPost('/api/auth/register', form.value);
         if (typeof onSignedUp === 'function') {
           onSignedUp();
         }
@@ -10540,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."
@@ -10617,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?"
@@ -10739,7 +10801,7 @@ const AuthChangePassword = _ref => {
       console.log('AuthChangePassword.valid', form.value);
       try {
         setError(undefined);
-        yield bomMixerCore.httpPost('/api/auth/password', form.value);
+        yield bomCore.httpPost('/api/auth/password', form.value);
         if (typeof onPasswordChanged === 'function') {
           onPasswordChanged();
         }
@@ -10885,7 +10947,7 @@ const AuthUpdate = _ref => {
       console.log('AuthUpdate.valid', form.value);
       try {
         setError(undefined);
-        const user = yield bomMixerCore.httpPost('/api/auth/update', form.value);
+        const user = yield bomCore.httpPost('/api/auth/update', form.value);
         if (typeof onUpdate === 'function') {
           onUpdate(user);
         }
@@ -10985,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
         }))]
@@ -11012,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
@@ -11033,7 +11095,7 @@ const BlogMore = _ref => {
   }, {
     children: jsxRuntime.jsxs(Container, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "2",
+        variant: "display20",
         fontWeight: "700",
         marginBottom: "3rem"
       }, {
@@ -11072,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)
@@ -11086,7 +11148,7 @@ const BlogProposition = _a => {
           md: 6
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "8",
+            variant: "display80",
             maxWidth: "60ch"
           }, {
             children: item.abstract
@@ -11102,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
@@ -11175,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
@@ -11192,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"
               })
@@ -11206,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"
               })
@@ -11218,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"
               })
@@ -11255,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"
@@ -11316,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",
@@ -11336,7 +11398,7 @@ const CartMini = _ref => {
             }, {
               children: [jsxRuntime.jsx("span", {
                 children: "Continue shopping"
-              }), " ", jsxRuntime.jsx(bomMixerIcons.ArrowRight, {})]
+              }), " ", jsxRuntime.jsx(bomMixerIcons.IconArrowRight, {})]
             }))
           }))]
         }))]
@@ -11372,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'
         }))]
@@ -11399,7 +11461,7 @@ const CategoriesProposition = _ref => {
         marginBottom: "1rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "7",
+          variant: "display70",
           fontWeight: "700"
         }, {
           children: "Shop by category"
@@ -11413,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({
@@ -11475,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: {
@@ -11500,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: {
@@ -11547,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"
               }, {
@@ -11591,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"
           }, {
@@ -11634,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"
           }, {
@@ -11651,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"
           }, {
@@ -11678,7 +11740,7 @@ const OrderAddress = _ref => {
     gap: "1rem"
   }, {
     children: [title && jsxRuntime.jsx(Text, Object.assign({
-      size: "6",
+      variant: "display60",
       fontWeight: "700"
     }, {
       children: title
@@ -11775,7 +11837,7 @@ const OrderRegister = _ref => {
       console.log('AuthRegister.valid', form.value);
       try {
         setError(undefined);
-        yield bomMixerCore.httpPost('/api/auth/register', form.value);
+        yield bomCore.httpPost('/api/auth/register', form.value);
         setRegistered(true);
         if (typeof onSignedUp === 'function') {
           onSignedUp();
@@ -11801,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"
           }, {
@@ -11814,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"
           }, {
@@ -11904,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
           }))]
@@ -11951,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"
@@ -12131,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, {
@@ -12156,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"
           }, {
@@ -12259,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
           }))]
@@ -12279,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)"
       }, {
@@ -12293,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"
           })
@@ -12307,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"
           })
@@ -12320,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"
         })
@@ -12332,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)"
       }, {
@@ -12453,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)"
               }, {
@@ -12471,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)"
@@ -12479,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."
                 }))]
@@ -12497,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)"
@@ -12505,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."
                 }))]
@@ -12641,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"
               }, {
@@ -13256,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"
               }, {
@@ -13390,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"
                     }, {
@@ -13419,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"
                       }, {
@@ -13440,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"
                       }, {
@@ -13612,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"
@@ -13836,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."
@@ -13849,7 +13911,7 @@ const CheckoutReview = _ref => {
                   marginBottom: "1rem"
                 }, {
                   children: [jsxRuntime.jsx(Text, Object.assign({
-                    size: "7",
+                    variant: "display70",
                     fontWeight: "700"
                   }, {
                     children: selectedStore.name
@@ -13890,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]
@@ -13918,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]
@@ -14006,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)"
                       }, {
@@ -14034,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)"
                     }, {
@@ -14290,37 +14352,37 @@ const CheckoutWizard = _a => {
           justifyContent: "space-between"
         }, {
           children: [jsxRuntime.jsx(Flex, Object.assign({
-            className: bomMixerCore.getClassNames({
+            className: bomCore.getClassNames({
               active: status === exports.CheckoutStatus.Basket
             })
           }, {
             children: "Basket"
           })), jsxRuntime.jsx(Flex, Object.assign({
-            className: bomMixerCore.getClassNames({
+            className: bomCore.getClassNames({
               active: status === exports.CheckoutStatus.Info
             })
           }, {
             children: "User data"
           })), jsxRuntime.jsx(Flex, Object.assign({
-            className: bomMixerCore.getClassNames({
+            className: bomCore.getClassNames({
               active: status === exports.CheckoutStatus.Delivery
             })
           }, {
             children: "Delivery"
           })), jsxRuntime.jsx(Flex, Object.assign({
-            className: bomMixerCore.getClassNames({
+            className: bomCore.getClassNames({
               active: status === exports.CheckoutStatus.Review
             })
           }, {
             children: "Review"
           })), jsxRuntime.jsx(Flex, Object.assign({
-            className: bomMixerCore.getClassNames({
+            className: bomCore.getClassNames({
               active: status === exports.CheckoutStatus.Payment
             })
           }, {
             children: "Payment"
           })), jsxRuntime.jsx(Flex, Object.assign({
-            className: bomMixerCore.getClassNames({
+            className: bomCore.getClassNames({
               active: status === exports.CheckoutStatus.Complete
             })
           }, {
@@ -14366,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]
@@ -14444,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
               })]
             }))
@@ -14458,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
               })]
             }))
@@ -14472,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
               })]
             }))
@@ -14483,7 +14545,7 @@ const ContactCard = _a => {
           paddingTop: "1rem"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "10",
+            variant: "display100",
             fontWeight: "700"
           }, {
             children: "Press requests"
@@ -14495,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
               })]
             }))
@@ -14506,7 +14568,7 @@ const ContactCard = _a => {
           paddingTop: "1rem"
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            size: "10",
+            variant: "display100",
             fontWeight: "700"
           }, {
             children: item.note
@@ -14715,7 +14777,7 @@ const ContactForm = props => {
             }, {
               children: [jsxRuntime.jsx("span", {
                 children: "Submit"
-              }), " ", jsxRuntime.jsx(bomMixerIcons.Send, {})]
+              }), " ", jsxRuntime.jsx(bomMixerIcons.IconSend, {})]
             }))
           }))
         })]
@@ -14740,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", {
@@ -14790,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",
@@ -14800,7 +14862,7 @@ const ContactHero = _ref => {
               }, {
                 children: [jsxRuntime.jsx("span", {
                   children: "Contact Us"
-                }), " ", jsxRuntime.jsx(bomMixerIcons.Send, {})]
+                }), " ", jsxRuntime.jsx(bomMixerIcons.IconSend, {})]
               }))]
             })]
           }))
@@ -14831,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."
@@ -14851,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",
@@ -14860,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",
@@ -14869,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",
@@ -14878,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",
@@ -14887,7 +14949,7 @@ const Footer = props => {
                 children: jsxRuntime.jsx(Button, Object.assign({
                   as: "a"
                 }, {
-                  children: jsxRuntime.jsx(bomMixerIcons.Github, {})
+                  children: jsxRuntime.jsx(bomMixerIcons.IconGithub, {})
                 }))
               }))]
             }))]
@@ -14901,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"
@@ -14957,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"
@@ -15013,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"
@@ -15079,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"
@@ -15124,19 +15186,19 @@ 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"]
               })), jsxRuntime.jsx(Link__default.default, Object.assign({
                 href: "https://www.websolute.com",
-                target: "_blank",
                 passHref: true
               }, {
                 children: jsxRuntime.jsx(Button, Object.assign({
-                  as: "a"
+                  as: "a",
+                  target: "_blank"
                 }, {
-                  children: jsxRuntime.jsx(bomMixerIcons.Websolute, {})
+                  children: jsxRuntime.jsx(bomMixerIcons.IconWebsolute, {})
                 }))
               }))]
             }))
@@ -15151,19 +15213,19 @@ 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"]
         })), jsxRuntime.jsx(Link__default.default, Object.assign({
           href: "https://www.websolute.com",
-          target: "_blank",
           passHref: true
         }, {
           children: jsxRuntime.jsx(Button, Object.assign({
-            as: "a"
+            as: "a",
+            target: "_blank"
           }, {
-            children: jsxRuntime.jsx(bomMixerIcons.Websolute, {})
+            children: jsxRuntime.jsx(bomMixerIcons.IconWebsolute, {})
           }))
         }))]
       }))
@@ -15201,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({
@@ -15223,7 +15292,7 @@ const MarketsAndLanguagesDrawer = _ref => {
         fontSize: "0.9rem"
       }, {
         children: [jsxRuntime.jsx(Text, Object.assign({
-          size: "8",
+          variant: "display80",
           fontWeight: "700"
         }, {
           children: item.title
@@ -15275,7 +15344,7 @@ const HeaderCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "7",
+            variant: "display70",
             dangerouslySetInnerHTML: {
               __html: item.title
             }
@@ -15321,7 +15390,7 @@ const HeaderSubmenu = _a => {
   };
   const ref = React.useRef(null);
   useOnClickOutside(ref, () => visible && onSelect_());
-  const classNames = bomMixerCore.getClassNames('header-submenu', {
+  const classNames = bomCore.getClassNames('header-submenu', {
     visible
   });
   return jsxRuntime.jsx(StyledHeaderSubmenu, Object.assign({
@@ -15431,6 +15500,7 @@ const StyledAccordion = styled__default.default(Accordion)`
     border: none;
 `;
 const Header = props => {
+  var _a;
   const layout = bomMixerHooks.useLayout();
   const mounted = bomMixerHooks.useMounted();
   const scroll = bomMixerHooks.useScroll();
@@ -15449,10 +15519,14 @@ const Header = props => {
     const href = (item === null || item === void 0 ? void 0 : item.href) || null;
     setNav(href !== nav ? href : null);
   };
+  const onMenuItem = item => {
+    const href = (item === null || item === void 0 ? void 0 : item.href) || null;
+    setNav(href !== nav ? href : null);
+  };
   React.useEffect(() => {
     const getUser = () => __awaiter(void 0, void 0, void 0, function* () {
       try {
-        const user = yield bomMixerCore.httpGet('/api/auth/me');
+        const user = yield bomCore.httpGet('/api/auth/me');
         // console.log('Header.getUser /api/auth/me', user);
         setUser(user);
       } catch (error) {
@@ -15483,11 +15557,104 @@ const Header = props => {
   }, []);
   */
   // console.log(layout.topLevelRoutes);
-  const primaryNavs = (layout.navs.primary || []).filter(x => !['checkout', 'checkout_result', 'reserved_area', 'login'].includes(x.id.toString()));
-  const classNames = bomMixerCore.getClassNames('header', {
+  let treeItems = (((_a = layout.tree) === null || _a === void 0 ? void 0 : _a.items) || []).filter(x => !['checkout', 'checkout_result', 'reserved_area', 'login'].includes(x.id.toString()));
+  treeItems = [];
+  const mainMenu = layout.menu.main ? layout.menu.main.items : [];
+  const classNames = bomCore.getClassNames('header', {
     fixed: props.fixed,
     sticky: props.sticky
   });
+  function renderMenuItem(item, index) {
+    switch (item.type) {
+      case 'category':
+        if (['product_index'].includes(item.category.toString())) {
+          return jsxRuntime.jsxs(Box, {
+            children: [jsxRuntime.jsx(Button, Object.assign({
+              variant: "nav",
+              onClick: () => onMenuItem(item)
+            }, {
+              children: item.title
+            })), jsxRuntime.jsx(HeaderSubmenu, {
+              item: item,
+              visible: nav === item.href,
+              onSelect: () => onMenuItem()
+            })]
+          }, index);
+        } else if (item.href) {
+          return jsxRuntime.jsx(NavLink, Object.assign({
+            href: item.href,
+            passHref: true
+          }, {
+            children: jsxRuntime.jsx(Button, Object.assign({
+              as: "a",
+              variant: "nav",
+              onClick: () => onMenuItem()
+            }, {
+              children: item.title
+            }))
+          }), index);
+        } else {
+          return jsxRuntime.jsx(Button, Object.assign({
+            variant: "nav",
+            onClick: () => onMenuItem()
+          }, {
+            children: item.title
+          }), index);
+        }
+      case 'group':
+        if (item.items) {
+          return jsxRuntime.jsx(Popover, Object.assign({
+            content: jsxRuntime.jsx(Nav.Col, Object.assign({
+              minWidth: "150px"
+            }, {
+              children: item.items.map((x, i) => renderMenuItem(x, i))
+            }))
+          }, {
+            children: jsxRuntime.jsxs(Button, Object.assign({
+              variant: "nav"
+            }, {
+              children: [item.title, " ", jsxRuntime.jsx(bomMixerIcons.IconChevronDown, {}), " "]
+            }))
+          }), index);
+        } else {
+          return jsxRuntime.jsx(Button, Object.assign({
+            variant: "nav"
+          }, {
+            children: item.title
+          }), index);
+        }
+      case 'page':
+      case 'route':
+        return jsxRuntime.jsx(NavLink, Object.assign({
+          href: item.href,
+          passHref: true
+        }, {
+          children: jsxRuntime.jsx(Button, Object.assign({
+            as: "a",
+            variant: "nav",
+            onClick: () => onMenuItem()
+          }, {
+            children: item.title
+          }))
+        }), index);
+      case 'link':
+        return jsxRuntime.jsx(NavLink, Object.assign({
+          href: item.href,
+          passHref: true
+        }, {
+          children: jsxRuntime.jsx(Button, Object.assign({
+            as: "a",
+            target: item.target,
+            variant: "nav",
+            onClick: () => onMenuItem()
+          }, {
+            children: item.title
+          }))
+        }), index);
+      default:
+        return undefined;
+    }
+  }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(HeaderContainer, Object.assign({
       className: classNames
@@ -15506,29 +15673,29 @@ 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"
                 }))]
               }))
             }))
-          }), jsxRuntime.jsx(Flex, Object.assign({
+          }), jsxRuntime.jsxs(Flex, Object.assign({
             className: "print-none",
             flex: "1",
             justifyContent: "center"
           }, {
-            children: primaryNavs && jsxRuntime.jsx(Nav.Row, Object.assign({
+            children: [treeItems && jsxRuntime.jsx(Nav.Row, Object.assign({
               gapSm: "2rem",
               gapLg: "3rem",
               display: "none",
               displayMd: "flex"
             }, {
-              children: primaryNavs.map((x, i) => ['product_index'].includes(x.id.toString()) ? jsxRuntime.jsxs(Box, {
+              children: treeItems.map((x, i) => ['product_index'].includes(x.id.toString()) ? jsxRuntime.jsxs(Box, {
                 children: [jsxRuntime.jsx(Button, Object.assign({
                   variant: "nav",
                   onClick: () => onNav(x)
@@ -15551,7 +15718,14 @@ const Header = props => {
                   children: x.title
                 }))
               }), i))
-            }))
+            })), mainMenu && jsxRuntime.jsx(Nav.Row, Object.assign({
+              gapSm: "2rem",
+              gapLg: "3rem",
+              display: "none",
+              displayMd: "flex"
+            }, {
+              children: mainMenu.map((x, i) => renderMenuItem(x, i))
+            }))]
           })), jsxRuntime.jsxs(Flex, Object.assign({
             className: "print-none",
             gap: "1rem",
@@ -15575,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"
               })
@@ -15583,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({
@@ -15602,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"
               })
@@ -15630,14 +15804,14 @@ const Header = props => {
         width: "100vw",
         maxWidth: "Min(calc(100vw - 60px), 640px)"
       }, {
-        children: primaryNavs && jsxRuntime.jsx(Nav.Col, Object.assign({
+        children: treeItems && jsxRuntime.jsx(Nav.Col, Object.assign({
           gap: "2rem"
         }, {
-          children: primaryNavs.map((x, i) => {
+          children: treeItems.map((x, i) => {
             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
               }))
@@ -15668,7 +15842,7 @@ const Header = props => {
                 onClick: () => onNav()
               }, {
                 children: jsxRuntime.jsx(Text, Object.assign({
-                  size: "7"
+                  variant: "display70"
                 }, {
                   children: x.title
                 }))
@@ -15684,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"
@@ -15706,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',
@@ -15746,7 +15920,7 @@ const Hero = _a => {
               padding: "3rem 0"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                size: "2",
+                variant: "display20",
                 fontWeight: "700"
               }, {
                 children: item.title
@@ -15756,7 +15930,7 @@ const Hero = _a => {
               padding: "3rem 0"
             }, {
               children: jsxRuntime.jsx(Text, Object.assign({
-                size: "6"
+                variant: "display60"
               }, {
                 children: item.abstract
               }))
@@ -15802,7 +15976,7 @@ const Icons = props => {
       padding: "3rem 0"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "4",
+        variant: "display40",
         fontWeight: "700",
         marginBottom: "2rem"
       }, {
@@ -15841,7 +16015,7 @@ const Icons = props => {
             textAlign: "center"
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              size: "10"
+              variant: "display100"
             }, {
               children: icon.key
             }))
@@ -15855,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
@@ -15918,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({
@@ -15928,7 +16102,7 @@ const MagazineSearchCard = _a => {
           gap: "1rem"
         }, {
           children: [jsxRuntime.jsx(Text, {
-            size: "6",
+            variant: "display60",
             lineHeight: "1.2",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
@@ -15937,7 +16111,7 @@ const MagazineSearchCard = _a => {
             variant: "nav"
           }, {
             children: jsxRuntime.jsx(Text, Object.assign({
-              size: "9",
+              variant: "display90",
               textTransform: "uppercase"
             }, {
               children: "View More"
@@ -15990,7 +16164,7 @@ const MagazineRelated = _a => {
     return null;
   }
   const items = item.items;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsxs(StyledSection, Object.assign({
     className: classNames,
     padding: "7rem 0"
@@ -15999,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
@@ -16040,7 +16214,7 @@ const MagazineSearchFilters = _a => {
       gap: "1rem"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700",
         textTransform: "uppercase"
       }, {
@@ -16176,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"
@@ -16260,12 +16434,12 @@ const MagazineSearch = _a => {
   const categoryFilter = filters.find(x => x.id === 'category');
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", Object.assign({
-      css: `
-        position: sticky;
-        top: 80px;
-        z-index: 900;
-        background: white;
-      `
+      style: {
+        position: 'sticky',
+        top: '80px',
+        zIndex: 900,
+        background: 'white'
+      }
     }, {
       children: jsxRuntime.jsx(Box, Object.assign({
         padding: "1rem 0",
@@ -16283,7 +16457,7 @@ const MagazineSearch = _a => {
               displaySm: "flex"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "11",
+                variant: "display110",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
@@ -16300,7 +16474,7 @@ const MagazineSearch = _a => {
                 })), categoryFilter.options.map((option, o) => jsxRuntime.jsx(Button, Object.assign({
                   variant: "nav",
                   size: "lg",
-                  className: bomMixerCore.getClassNames({
+                  className: bomCore.getClassNames({
                     active: categoryFilter.has(option)
                   }),
                   onClick: () => onFilterOptionToggle(categoryFilter, option)
@@ -16314,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
@@ -16381,7 +16555,7 @@ const OrderItem = _ref => {
       flexBasis: "80px"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700"
       }, {
         children: "ID"
@@ -16400,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)
       }))]
@@ -16413,7 +16587,7 @@ const OrderItem = _ref => {
       flexBasis: "160px"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700"
       }, {
         children: "Current status"
@@ -16424,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()
       }))]
@@ -16438,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)
       }))]
@@ -16590,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", {
@@ -16622,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."
@@ -16637,7 +16811,7 @@ const ProductOverviewBase = _a => {
           md: 4
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "4",
+            variant: "display40",
             marginBottom: "1rem"
           }, {
             children: currency(item.price)
@@ -16652,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"
           }, {
@@ -16688,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"
@@ -16752,7 +16926,7 @@ const ProductOverviewBase = _a => {
     })
   });
 };
-const ProductOverview = bomMixerCore.withSchema(ProductOverviewBase, {
+const ProductOverview = bomCore.withSchema(ProductOverviewBase, {
   Gallery: ProductOverviewGallery
 });
 
@@ -16761,7 +16935,7 @@ const ProductsDetailDownload = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   if (!item) {
     return null;
   }
@@ -16773,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"
         }, {
@@ -16789,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
@@ -16865,7 +17039,7 @@ const ProductsDetailRelatedCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "6",
+            variant: "display60",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -16881,7 +17055,7 @@ const ProductsDetailRelated = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   if (!item) {
     return null;
   }
@@ -16892,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: {
@@ -16928,7 +17102,7 @@ const ProductsDetailSizeColor = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   if (!item) {
     return null;
   }
@@ -16947,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
@@ -17030,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
@@ -17073,7 +17247,7 @@ const ProductsHero = _ref => {
             alignItems: "center"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              size: "2",
+              variant: "display20",
               fontWeight: "700",
               marginBottom: "1rem"
             }, {
@@ -17139,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
         }))]
@@ -17222,7 +17396,7 @@ const ProductsRelatedCard = _a => {
           alignItems: "flex-end"
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            size: "8"
+            variant: "display80"
           }, {
             children: currency(item.price)
           }))
@@ -17237,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
@@ -17274,7 +17448,7 @@ const ProductsRelated = _ref => {
         marginBottom: "1rem"
       }, {
         children: jsxRuntime.jsx(Text, Object.assign({
-          size: "7",
+          variant: "display70",
           fontWeight: "700"
         }, {
           children: "Customers also bought"
@@ -17346,7 +17520,7 @@ const ProductsSearchCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "8",
+            variant: "display80",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -17364,7 +17538,7 @@ const ProductsSearchFilters = _a => {
       gap: "1rem"
     }, {
       children: [jsxRuntime.jsx(Text, Object.assign({
-        size: "11",
+        variant: "display110",
         fontWeight: "700",
         textTransform: "uppercase"
       }, {
@@ -17500,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"
@@ -17545,7 +17719,7 @@ function ProductsSearchRecap(_ref) {
           gap: "1rem"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "11",
+            variant: "display110",
             fontWeight: "700",
             textTransform: "uppercase",
             paddingRight: "10px"
@@ -17559,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))
@@ -17650,7 +17824,7 @@ const ProductsSearch = _a => {
             flex: "1"
           }, {
             children: [jsxRuntime.jsx(Text, Object.assign({
-              size: "11",
+              variant: "display110",
               fontWeight: "700",
               textTransform: "uppercase"
             }, {
@@ -17679,27 +17853,27 @@ const ProductsSearch = _a => {
               gap: "1rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "11",
+                variant: "display110",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
                 children: "View"
               })), jsxRuntime.jsx(Button, Object.assign({
                 variant: "toggle",
-                className: bomMixerCore.getClassNames({
+                className: bomCore.getClassNames({
                   active: !large
                 }),
                 onClick: () => setLarge(false)
               }, {
-                children: jsxRuntime.jsx(bomMixerIcons.Grid, {})
+                children: jsxRuntime.jsx(bomMixerIcons.IconGrid, {})
               })), jsxRuntime.jsx(Button, Object.assign({
                 variant: "toggle",
-                className: bomMixerCore.getClassNames({
+                className: bomCore.getClassNames({
                   active: large
                 }),
                 onClick: () => setLarge(true)
               }, {
-                children: jsxRuntime.jsx(bomMixerIcons.Square, {})
+                children: jsxRuntime.jsx(bomMixerIcons.IconSquare, {})
               }))]
             }))]
           })), jsxRuntime.jsx(Button, Object.assign({
@@ -17708,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
@@ -17766,31 +17940,31 @@ const Proposition = props => {
           alignItems: "center"
         }, {
           children: [jsxRuntime.jsx(Text, Object.assign({
-            size: "3",
+            variant: "display30",
             fontWeight: "700",
             marginBottom: "2rem"
           }, {
             children: "Prow scuttle parrel provost Sail."
           })), jsxRuntime.jsx(Link__default.default, Object.assign({
             href: "https://design-system-ruddy.vercel.app",
-            target: "_blank",
             passHref: true
           }, {
             children: jsxRuntime.jsx(Button, Object.assign({
               as: "a",
               variant: "primary",
-              marginBottom: "1rem"
+              marginBottom: "1rem",
+              target: "_blank"
             }, {
               children: "Read documentation"
             }))
           })), jsxRuntime.jsx(Link__default.default, Object.assign({
             href: "https://github.com/actarian/design-system",
-            target: "_blank",
             passHref: true
           }, {
             children: jsxRuntime.jsx(Button, Object.assign({
               as: "a",
-              variant: "link"
+              variant: "link",
+              target: "_blank"
             }, {
               children: "view on GitHub"
             }))
@@ -17814,7 +17988,7 @@ const ReservedAreaMenu = props => {
   } = bomMixerHooks.useUser(state => state.actions);
   const onLogout = () => __awaiter(void 0, void 0, void 0, function* () {
     try {
-      yield bomMixerCore.httpGet('/api/auth/logout');
+      yield bomCore.httpGet('/api/auth/logout');
       setUser();
       router$1.push('/');
     } catch (error) {
@@ -17830,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;
   };
@@ -17862,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"
         })]
       }))]
@@ -17936,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
@@ -18065,7 +18239,7 @@ const ShopDetailRelatedCard = _a => {
           variant: "nav"
         }, {
           children: jsxRuntime.jsx(Text, {
-            size: "8",
+            variant: "display80",
             dangerouslySetInnerHTML: {
               __html: item.title || 'untitled'
             }
@@ -18081,7 +18255,7 @@ const ShopDetailRelated = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   return jsxRuntime.jsx(Section, Object.assign({
     id: id,
     className: classNames,
@@ -18089,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: {
@@ -18148,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
@@ -18186,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
@@ -18246,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)"
@@ -18254,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"
@@ -18272,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)"
@@ -18280,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"
@@ -18297,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)"
@@ -18305,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"
@@ -18348,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
         }))]
@@ -18428,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}` : '')
@@ -18447,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)
@@ -18456,7 +18630,7 @@ const ShopSearchCard = _a => {
           onClick: onAddToCart
         }, {
           children: jsxRuntime.jsx(Text, Object.assign({
-            size: "10"
+            variant: "display100"
           }, {
             children: "Add to bag"
           }))
@@ -18612,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"
@@ -18650,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"
@@ -18668,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))
@@ -18719,7 +18893,7 @@ const SortMenu = _ref => {
     children: [jsxRuntime.jsx(Button, Object.assign({
       variant: "nav",
       as: "a",
-      className: bomMixerCore.getClassNames({
+      className: bomCore.getClassNames({
         active: sort === 1
       }),
       onClick: () => onSort(1)
@@ -18728,7 +18902,7 @@ const SortMenu = _ref => {
     })), jsxRuntime.jsx(Button, Object.assign({
       variant: "nav",
       as: "a",
-      className: bomMixerCore.getClassNames({
+      className: bomCore.getClassNames({
         active: sort === 2
       }),
       onClick: () => onSort(2)
@@ -18737,7 +18911,7 @@ const SortMenu = _ref => {
     })), jsxRuntime.jsx(Button, Object.assign({
       variant: "nav",
       as: "a",
-      className: bomMixerCore.getClassNames({
+      className: bomCore.getClassNames({
         active: sort === 3
       }),
       onClick: () => onSort(3)
@@ -18879,7 +19053,7 @@ const ShopSearch = _a => {
               displaySm: "flex"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "11",
+                variant: "display110",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
@@ -18896,7 +19070,7 @@ const ShopSearch = _a => {
                 })), categoryFilter.options.map((option, o) => jsxRuntime.jsx(Button, Object.assign({
                   variant: "nav",
                   size: "lg",
-                  className: bomMixerCore.getClassNames({
+                  className: bomCore.getClassNames({
                     active: categoryFilter.has(option)
                   }),
                   onClick: () => onSetCategory(option)
@@ -18910,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
@@ -18923,27 +19097,27 @@ const ShopSearch = _a => {
               gap: "1rem"
             }, {
               children: [jsxRuntime.jsx(Text, Object.assign({
-                size: "11",
+                variant: "display110",
                 fontWeight: "700",
                 textTransform: "uppercase"
               }, {
                 children: "View"
               })), jsxRuntime.jsx(Button, Object.assign({
                 variant: "toggle",
-                className: bomMixerCore.getClassNames({
+                className: bomCore.getClassNames({
                   active: large
                 }),
                 onClick: () => setLarge(true)
               }, {
-                children: jsxRuntime.jsx(bomMixerIcons.Square, {})
+                children: jsxRuntime.jsx(bomMixerIcons.IconSquare, {})
               })), jsxRuntime.jsx(Button, Object.assign({
                 variant: "toggle",
-                className: bomMixerCore.getClassNames({
+                className: bomCore.getClassNames({
                   active: !large
                 }),
                 onClick: () => setLarge(false)
               }, {
-                children: jsxRuntime.jsx(bomMixerIcons.Grid, {})
+                children: jsxRuntime.jsx(bomMixerIcons.IconGrid, {})
               }))]
             })), jsxRuntime.jsx(Popover, Object.assign({
               content: jsxRuntime.jsx(SortMenu, {
@@ -18955,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",
@@ -18968,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
@@ -19013,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
                         }))]
@@ -19051,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, {})
               })]
             }))]
           }))]
@@ -19095,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"
               }, {
@@ -19121,7 +19295,7 @@ const Split = _ref => {
                 }, {
                   children: [jsxRuntime.jsx("span", {
                     children: item.link.label
-                  }), " ", jsxRuntime.jsx(bomMixerIcons.PhoneCall, {})]
+                  }), " ", jsxRuntime.jsx(bomMixerIcons.IconPhoneCall, {})]
                 }))
               }))]
             }))
@@ -19990,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: {
@@ -20031,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({
@@ -20152,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
@@ -20163,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
@@ -20177,7 +20351,7 @@ const SwiperHero = props => {
                 }, {
                   children: [jsxRuntime.jsx(Text, {
                     children: item.link.title
-                  }), " ", jsxRuntime.jsx(bomMixerIcons.ArrowRight, {})]
+                  }), " ", jsxRuntime.jsx(bomMixerIcons.IconArrowRight, {})]
                 }))
               }))]
             }))]
@@ -20188,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"
       }, {
@@ -20248,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;
+      }
     })
   }));
 };
@@ -20303,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;
@@ -20354,6 +20532,7 @@ exports.MagazineSearch = MagazineSearch;
 exports.MagazineSearchCard = MagazineSearchCard;
 exports.MagazineSearchFilters = MagazineSearchFilters;
 exports.MagazineSearchFiltersModal = MagazineSearchFiltersModal;
+exports.MarketsAndLanguagesDrawer = MarketsAndLanguagesDrawer;
 exports.Media = Media;
 exports.MediaGallery = MediaGallery;
 exports.MediaImage = MediaImage;
@@ -20421,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;
@@ -20441,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