@websolutespa/bom-mixer-ui 0.2.0 → 0.3.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'
 });
@@ -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,
@@ -1501,7 +1501,7 @@ const Button = /*#__PURE__*/React.forwardRef((_a, ref) => {
       type = 'button'
     } = _a,
     props = __rest(_a, ["children", "className", "as", "type"]);
-  const classNames = bomMixerCore.getClassNames('button', className, {
+  const classNames = bomCore.getClassNames('button', className, {
     disabled: props.disabled
   });
   return jsxRuntime.jsx(StyledButton$2, Object.assign({
@@ -1628,7 +1628,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 +1638,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 +1678,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 +1898,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 +1954,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, {
@@ -2165,7 +2165,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 +2278,7 @@ const DrawerBase = _a => {
     }))
   })), portal);
 };
-const Drawer = bomMixerCore.withSchema(DrawerBase, {
+const Drawer = bomCore.withSchema(DrawerBase, {
   Title: ModalTitle,
   Subtitle: ModalSubtitle,
   Content: ModalContent,
@@ -2404,7 +2404,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 +2461,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 +2558,7 @@ const Expand = _ref => {
       clearTimeout(resetTimer.current);
     };
   }, [isExpanded]);
-  const classNames = bomMixerCore.getClassNames('container', {
+  const classNames = bomCore.getClassNames('container', {
     expanded: selfExpanded,
     visible
   });
@@ -2683,7 +2683,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 +2764,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,
@@ -2785,12 +2785,12 @@ 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"]
+    lineHeight: ["1.15", "1.25", "1.35", "1.45", "1.55", "1.65", "1.75", "1.85", "1.95", "2.05", "2.15", "2.25"]
   },
   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"]
+    lineHeight: ["1.15", "1.25", "1.35", "1.45", "1.55", "1.65", "1.75", "1.85", "1.95", "2.05", "2.15", "2.25"]
   }
 };
 var grid = {
@@ -2866,26 +2866,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": "#e6f6fd",
+    "200": "#b3e3fa",
+    "300": "#80d1f6",
+    "400": "#4dbef2",
+    "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",
@@ -2957,18 +2957,18 @@ const CssVars = styled.css`
   --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-primary-line-height-0: 1.15;
+  --font-primary-line-height-1: 1.25;
+  --font-primary-line-height-2: 1.35;
+  --font-primary-line-height-3: 1.45;
+  --font-primary-line-height-4: 1.55;
+  --font-primary-line-height-5: 1.65;
+  --font-primary-line-height-6: 1.75;
+  --font-primary-line-height-7: 1.85;
+  --font-primary-line-height-8: 1.95;
+  --font-primary-line-height-9: 2.05;
+  --font-primary-line-height-10: 2.15;
+  --font-primary-line-height-11: 2.25;
   --font-secondary-family: Petrona, serif;
   --font-secondary-size-0: 7.5rem;
   --font-secondary-size-1: 5.4rem;
@@ -2982,18 +2982,18 @@ const CssVars = styled.css`
   --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-secondary-line-height-0: 1.15;
+  --font-secondary-line-height-1: 1.25;
+  --font-secondary-line-height-2: 1.35;
+  --font-secondary-line-height-3: 1.45;
+  --font-secondary-line-height-4: 1.55;
+  --font-secondary-line-height-5: 1.65;
+  --font-secondary-line-height-6: 1.75;
+  --font-secondary-line-height-7: 1.85;
+  --font-secondary-line-height-8: 1.95;
+  --font-secondary-line-height-9: 2.05;
+  --font-secondary-line-height-10: 2.15;
+  --font-secondary-line-height-11: 2.25;
   --grid-columns: 12;
   --grid-size: 1fr;
   --grid-column-gap: Max(4vw, Min(96px, calc(100% / 24)));
@@ -3039,24 +3039,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: #e6f6fd;
+  --color-primary-200: #b3e3fa;
+  --color-primary-300: #80d1f6;
+  --color-primary-400: #4dbef2;
+  --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 +3120,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 +3147,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`
@@ -3451,7 +3474,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 +3539,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 +3626,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 +3689,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 +3756,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 +3855,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 +3873,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 +4006,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,7 +4059,7 @@ 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
@@ -4179,7 +4202,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 +4329,7 @@ const ModalBase = _ref => {
     }))
   })), portal);
 };
-const Modal = bomMixerCore.withSchema(ModalBase, {
+const Modal = bomCore.withSchema(ModalBase, {
   Title: ModalTitle,
   Subtitle: ModalSubtitle,
   Content: ModalContent,
@@ -4332,8 +4355,8 @@ const CssA = styled.css`
   }
 `;
 const CssP = styled.css`
-  p {
-    margin-bottom: 2rem;
+  p:not(:last-child) {
+    margin-bottom: 1rem;
   }
 `;
 const CssUl = styled.css`
@@ -4407,7 +4430,7 @@ const TextSROnly = styled__default.default.div`
   white-space: nowrap;
   border-width: 0;
 `;
-const Text = bomMixerCore.withSchema(TextBase, {
+const Text = bomCore.withSchema(TextBase, {
   Primary: TextBase,
   Secondary: TextSecondary,
   SROnly: TextSROnly,
@@ -4802,7 +4825,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 +4891,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 +4909,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 +5032,7 @@ const PaginationItem = _a => {
     }
     onClick && onClick(event);
   };
-  const classNames = bomMixerCore.getClassNames({
+  const classNames = bomCore.getClassNames({
     active,
     disabled
   });
@@ -5061,7 +5084,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 +5302,7 @@ const PaginationBase = _a => {
     }))
   }));
 };
-const Pagination = bomMixerCore.withSchema(PaginationBase, {
+const Pagination = bomCore.withSchema(PaginationBase, {
   Previous: PaginationPrevious,
   Next: PaginationNext,
   displayName: 'Pagination'
@@ -5562,7 +5585,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 +5683,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 +5761,7 @@ const PopoverItem = _a => {
     }
     onItemClick(event);
   };
-  const classNames = bomMixerCore.getClassNames('item', {
+  const classNames = bomCore.getClassNames('item', {
     line,
     title
   }, className);
@@ -5801,7 +5824,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,7 +5840,7 @@ const PopoverBase = _a => {
     }))
   }));
 };
-const Popover = bomMixerCore.withSchema(PopoverBase, {
+const Popover = bomCore.withSchema(PopoverBase, {
   Item: PopoverItem,
   Option: PopoverItem,
   displayName: 'Popover'
@@ -5864,7 +5887,7 @@ const SectionBase = props => {
     children: props.children
   }));
 };
-const Section = bomMixerCore.withSchema(SectionBase, {
+const Section = bomCore.withSchema(SectionBase, {
   Background: Background,
   displayName: 'Section'
 });
@@ -5886,7 +5909,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
@@ -6022,7 +6045,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 +6095,7 @@ const SwiperBase = props => {
     })]
   }));
 };
-const SwiperComponent = bomMixerCore.withSchema(SwiperBase, {
+const SwiperComponent = bomCore.withSchema(SwiperBase, {
   Prev: SwiperPrev,
   Next: SwiperNext,
   Pagination: SwiperPagination,
@@ -6202,7 +6225,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 +6367,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 +6381,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 +6407,7 @@ const TabsBase = _a => {
     }))
   }));
 };
-const Tabs = bomMixerCore.withSchema(TabsBase, {
+const Tabs = bomCore.withSchema(TabsBase, {
   Item: TabsItem,
   Tab: TabsItem,
   displayName: 'Tabs'
@@ -6422,7 +6445,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 +6703,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 +6838,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 +6903,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 +7088,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 +7177,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 +7201,7 @@ const CustomSelectOption = _a => {
     }
     updateValue && updateValue(optionValue);
   };
-  const classNames = bomMixerCore.getClassNames('option', {
+  const classNames = bomCore.getClassNames('option', {
     divider,
     label,
     active
@@ -7416,7 +7439,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 +7491,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 +7514,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 +7536,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
@@ -7582,7 +7605,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 +7705,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 +7772,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 +7781,7 @@ const InputGroupBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }));
 });
 InputGroupBase.displayName = 'InputGroup';
-const InputGroup = bomMixerCore.withSchema(InputGroupBase, {
+const InputGroup = bomCore.withSchema(InputGroupBase, {
   Input: Input
 });
 
@@ -7777,7 +7800,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,7 +8040,7 @@ 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",
@@ -8032,7 +8055,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,7 +8068,7 @@ 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",
     whiteSpace: "nowrap",
@@ -8069,7 +8092,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 +8135,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 +8253,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 +8273,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 +8427,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 +8449,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 +8555,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 +8570,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 +8680,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 +8772,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 +8833,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,
@@ -9469,7 +9492,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"
@@ -9542,7 +9565,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"
@@ -9596,7 +9619,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 +9640,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"
@@ -9649,7 +9672,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"
@@ -9786,7 +9809,7 @@ 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"
@@ -9828,7 +9851,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"
@@ -9902,7 +9925,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"
@@ -9937,7 +9960,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"
@@ -9999,7 +10022,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"
@@ -10064,7 +10087,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"
@@ -10163,7 +10186,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();
         }
@@ -10343,7 +10366,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') {
@@ -10510,7 +10533,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();
         }
@@ -10739,7 +10762,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 +10908,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);
         }
@@ -11775,7 +11798,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();
@@ -14290,37 +14313,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
             })
           }, {
@@ -15130,11 +15153,11 @@ const Footer = props => {
                 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, {})
                 }))
@@ -15157,11 +15180,11 @@ const Footer = props => {
           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, {})
           }))
@@ -15321,7 +15344,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 +15454,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 +15473,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 +15511,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.ChevronDown, {}), " "]
+            }))
+          }), 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
@@ -15517,18 +15638,18 @@ const Header = props => {
                 }))]
               }))
             }))
-          }), 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 +15672,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",
@@ -15630,10 +15758,10 @@ 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({
@@ -15990,7 +16118,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"
@@ -16260,12 +16388,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",
@@ -16300,7 +16428,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)
@@ -16752,7 +16880,7 @@ const ProductOverviewBase = _a => {
     })
   });
 };
-const ProductOverview = bomMixerCore.withSchema(ProductOverviewBase, {
+const ProductOverview = bomCore.withSchema(ProductOverviewBase, {
   Gallery: ProductOverviewGallery
 });
 
@@ -16761,7 +16889,7 @@ const ProductsDetailDownload = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   if (!item) {
     return null;
   }
@@ -16881,7 +17009,7 @@ const ProductsDetailRelated = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   if (!item) {
     return null;
   }
@@ -16928,7 +17056,7 @@ const ProductsDetailSizeColor = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomMixerCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames(item.schema);
   if (!item) {
     return null;
   }
@@ -17686,7 +17814,7 @@ const ProductsSearch = _a => {
                 children: "View"
               })), jsxRuntime.jsx(Button, Object.assign({
                 variant: "toggle",
-                className: bomMixerCore.getClassNames({
+                className: bomCore.getClassNames({
                   active: !large
                 }),
                 onClick: () => setLarge(false)
@@ -17694,7 +17822,7 @@ const ProductsSearch = _a => {
                 children: jsxRuntime.jsx(bomMixerIcons.Grid, {})
               })), jsxRuntime.jsx(Button, Object.assign({
                 variant: "toggle",
-                className: bomMixerCore.getClassNames({
+                className: bomCore.getClassNames({
                   active: large
                 }),
                 onClick: () => setLarge(true)
@@ -17773,24 +17901,24 @@ const Proposition = props => {
             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 +17942,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) {
@@ -18081,7 +18209,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,
@@ -18719,7 +18847,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 +18856,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 +18865,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)
@@ -18896,7 +19024,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)
@@ -18930,7 +19058,7 @@ const ShopSearch = _a => {
                 children: "View"
               })), jsxRuntime.jsx(Button, Object.assign({
                 variant: "toggle",
-                className: bomMixerCore.getClassNames({
+                className: bomCore.getClassNames({
                   active: large
                 }),
                 onClick: () => setLarge(true)
@@ -18938,7 +19066,7 @@ const ShopSearch = _a => {
                 children: jsxRuntime.jsx(bomMixerIcons.Square, {})
               })), jsxRuntime.jsx(Button, Object.assign({
                 variant: "toggle",
-                className: bomMixerCore.getClassNames({
+                className: bomCore.getClassNames({
                   active: !large
                 }),
                 onClick: () => setLarge(false)
@@ -20354,6 +20482,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;