@websolutespa/bom-mixer-ui 1.2.2 → 1.4.0

package/dist/cjs/index.js

@@ -85,6 +85,14 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+const accessibility = (App, config) => __awaiter(void 0, void 0, void 0, function* () {
+  if (bomCore.isDevelopment && bomCore.isBrowser) {
+    const axe = yield import('@axe-core/react');
+    const ReactDOM = yield import('react-dom');
+    axe.default(App, ReactDOM, 1000, config);
+  }
+});
+
 const StyledExpand = styled__default.default.div`
   padding: 0;
   margin: 0;
@@ -897,6 +905,32 @@ function hasChildOfType(children, type) {
   return hasChildOfType;
 }
 
+const Background = styled__default.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  // background: var(--color-neutral-900);
+
+  &, & > * {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  & > * > * {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  ${props => getCssResponsive(props)}
+`;
+Background.defaultProps = {
+  className: 'background'
+};
+
 const Badge = styled__default.default.div`
   display: inline-block;
   line-height: 1;
@@ -1507,7 +1541,8 @@ const Breakpoint = props => {
       exit: {
         opacity: 0,
         y: '100%'
-      }
+      },
+      "aria-hidden": "true"
     }, props, {
       children: [breakpoint.key, " (", breakpoint.min, "/", breakpoint.max < 50000 ? breakpoint.max : '∞', ")"]
     }), "breakpoint")
@@ -1611,32 +1646,6 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_a, ref) => {
 });
 ButtonGroup.displayName = 'ButtonGroup';
 
-const Background = styled__default.default.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  // background: var(--color-neutral-900);
-
-  &, & > * {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  & > * > * {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  ${props => getCssResponsive(props)}
-`;
-Background.defaultProps = {
-  className: 'background'
-};
-
 const CardContent = styled__default.default.div`
   position: relative;
   ${props => getCssResponsive(props)}
@@ -2926,9 +2935,6 @@ var button = {
 };
 var form = {
   "default": {
-    fontSize: "1rem",
-    lineHeight: "1.625",
-    padding: "0.8em",
     backgroundColor: "transparent",
     backgroundColorDisabled: "var(--color-neutral-200)",
     backgroundColorInfo: "var(--color-warning-100)",
@@ -2951,10 +2957,34 @@ var form = {
     outlineColorActive: "var(--color-primary-500)",
     outlineColorError: "var(--color-warning-500)",
     outlineOffset: "2px",
-    transition: "border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s, box-shadow 200ms ease 0s"
+    transition: "border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s, box-shadow 200ms ease 0s",
+    field: {
+      gap: "0.5rem"
+    },
+    control: {
+      padding: "0.8em",
+      fontSize: "1rem",
+      fontWeight: "inherit",
+      lineHeight: "1.625"
+    },
+    label: {
+      padding: "0",
+      fontSize: "0.9rem",
+      fontWeight: "500",
+      lineHeight: "1.2"
+    },
+    error: {
+      margin: "0.5em 0",
+      padding: "0.2em 0.4em",
+      fontSize: "0.9rem",
+      fontWeight: "500",
+      lineHeight: "1.2",
+      border: "1px solid var(--form-border-color-error)",
+      backgroundColor: "var(--form-background-color-error)",
+      color: "var(--form-color-error)"
+    }
   },
   negative: {
-    padding: "0.8em",
     backgroundColorDisabled: "var(--color-neutral-800)",
     colorHover: "var(--color-neutral-200)",
     colorDisabled: "var(--color-neutral-600)",
@@ -3135,9 +3165,6 @@ const CssVars = styled.css`
   --button-size-lg: 1.25rem;
   --button-size-xl: 1.45rem;
   --button-border-radius: 0.2em;
-  --form-default-font-size: 1rem;
-  --form-default-line-height: 1.625;
-  --form-default-padding: 0.8em;
   --form-default-background-color: transparent;
   --form-default-background-color-disabled: var(--color-neutral-200);
   --form-default-background-color-info: var(--color-warning-100);
@@ -3161,7 +3188,23 @@ const CssVars = styled.css`
   --form-default-outline-color-error: var(--color-warning-500);
   --form-default-outline-offset: 2px;
   --form-default-transition: border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s, box-shadow 200ms ease 0s;
-  --form-negative-padding: 0.8em;
+  --form-default-field-gap: 0.5rem;
+  --form-default-control-padding: 0.8em;
+  --form-default-control-font-size: 1rem;
+  --form-default-control-font-weight: inherit;
+  --form-default-control-line-height: 1.625;
+  --form-default-label-padding: 0;
+  --form-default-label-font-size: 0.9rem;
+  --form-default-label-font-weight: 500;
+  --form-default-label-line-height: 1.2;
+  --form-default-error-margin: 0.5em 0;
+  --form-default-error-padding: 0.2em 0.4em;
+  --form-default-error-font-size: 0.9rem;
+  --form-default-error-font-weight: 500;
+  --form-default-error-line-height: 1.2;
+  --form-default-error-border: 1px solid var(--form-border-color-error);
+  --form-default-error-background-color: var(--form-background-color-error);
+  --form-default-error-color: var(--form-color-error);
   --form-negative-background-color-disabled: var(--color-neutral-800);
   --form-negative-color-hover: var(--color-neutral-200);
   --form-negative-color-disabled: var(--color-neutral-600);
@@ -3253,9 +3296,6 @@ const CssVars = styled.css`
   --container-max-width-md: var(--container-default-max-width-md);
   --container-max-width-lg: var(--container-default-max-width-lg);
   --container-max-width-xl: var(--container-default-max-width-xl);
-  --form-font-size: var(--form-default-font-size);
-  --form-line-height: var(--form-default-line-height);
-  --form-padding: var(--form-default-padding);
   --form-background-color: var(--form-default-background-color);
   --form-background-color-disabled: var(--form-default-background-color-disabled);
   --form-background-color-info: var(--form-default-background-color-info);
@@ -3279,6 +3319,23 @@ const CssVars = styled.css`
   --form-outline-color-error: var(--form-default-outline-color-error);
   --form-outline-offset: var(--form-default-outline-offset);
   --form-transition: var(--form-default-transition);
+  --form-field-gap: var(--form-default-field-gap);
+  --form-control-padding: var(--form-default-control-padding);
+  --form-control-font-size: var(--form-default-control-font-size);
+  --form-control-font-weight: var(--form-default-control-font-weight);
+  --form-control-line-height: var(--form-default-control-line-height);
+  --form-label-padding: var(--form-default-label-padding);
+  --form-label-font-size: var(--form-default-label-font-size);
+  --form-label-font-weight: var(--form-default-label-font-weight);
+  --form-label-line-height: var(--form-default-label-line-height);
+  --form-error-margin: var(--form-default-error-margin);
+  --form-error-padding: var(--form-default-error-padding);
+  --form-error-font-size: var(--form-default-error-font-size);
+  --form-error-font-weight: var(--form-default-error-font-weight);
+  --form-error-line-height: var(--form-default-error-line-height);
+  --form-error-border: var(--form-default-error-border);
+  --form-error-background-color: var(--form-default-error-background-color);
+  --form-error-color: var(--form-default-error-color);
 
   --font-base-size: var(--font-base-size-xs);
   --grid-column-gap: var(--grid-default-column-gap-xs);
@@ -3938,10 +3995,13 @@ const Layout = /*#__PURE__*/React.forwardRef((_a, ref) => {
       as = 'div'
     } = _a,
     props = __rest(_a, ["children", "as"]);
+  const page = bomMixerHooks.usePage();
   return jsxRuntime.jsx(StyledLayout, Object.assign({
     ref: ref,
     as: as
   }, props, {
+    "data-template": page.template,
+    "data-id": page.id,
     children: children
   }));
 });
@@ -3965,6 +4025,26 @@ const List = /*#__PURE__*/React.forwardRef((_a, ref) => {
 });
 List.displayName = 'List';
 
+const Wrapper = styled__default.default.main`
+  ${props => getCssResponsive(props)}
+`;
+const Main = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      className,
+      children
+    } = _a,
+    props = __rest(_a, ["className", "children"]);
+  const classNames = bomCore.getClassNames('main', className);
+  return jsxRuntime.jsx(Wrapper, Object.assign({
+    ref: ref,
+    className: classNames,
+    role: "main"
+  }, props, {
+    children: children
+  }));
+});
+Main.displayName = 'Main';
+
 const MediaGalleryContext = /*#__PURE__*/React.createContext({});
 function useMediaGalleryContext() {
   return React.useContext(MediaGalleryContext);
@@ -3986,19 +4066,18 @@ const StyledMediaImage = styled__default.default.img`
 `;
 const MediaImage = _a => {
   var {
-      alt = '',
       className,
-      type
+      type,
+      loading = 'lazy'
     } = _a,
-    props = __rest(_a, ["alt", "className", "type"]);
+    props = __rest(_a, ["className", "type", "loading"]);
   const classNames = bomCore.getClassNames(className, 'image', {
     'image-svg': isSVG(props.src)
   });
   const imageProps = getImageProps(props);
   return jsxRuntime.jsx(StyledMediaImage, Object.assign({
     className: classNames,
-    alt: alt,
-    loading: "lazy"
+    loading: loading
   }, imageProps));
 };
 function getImageProps(_a) {
@@ -4007,9 +4086,9 @@ function getImageProps(_a) {
     } = _a,
     props = __rest(_a, ["src"]);
   if (IMAGE_STRATEGY === exports.ImageStrategy.None || isSVG(src)) {
-    return {
+    return Object.assign({
       src
-    };
+    }, props);
   }
   const ratio = props.width && props.height ? parseInt(props.width.toString()) / parseInt(props.height.toString()) : 0;
   const sizes = IMAGE_SIZES;
@@ -4155,9 +4234,12 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
       item,
       onClick,
       className,
+      eager,
+      alt,
+      title,
       as = 'div'
     } = _a,
-    props = __rest(_a, ["children", "item", "onClick", "className", "as"]);
+    props = __rest(_a, ["children", "item", "onClick", "className", "eager", "alt", "title", "as"]);
   const {
     id,
     open
@@ -4166,9 +4248,10 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
     'media--gallery': id
   });
   const mediaChildren = item && !children ? getMediaItems(item, {
-    aspectRatio: props.aspectRatio,
-    eager: props.eager,
+    eager,
     galleryId: id,
+    alt,
+    title,
     open
   }) : children;
   return jsxRuntime.jsx(StyledMedia$1, Object.assign({
@@ -4199,7 +4282,12 @@ function getMediaItems(itemOrItems, options) {
   });
   const hasGallery = options.galleryId != null && typeof options.open === 'function';
   const getMediaItemProps = media => {
-    const props = {};
+    const title = media.title || options.title || media.alt || options.alt;
+    const alt = media.alt || options.alt || media.title || options.title;
+    const props = {
+      title,
+      alt
+    };
     if (hasGallery) {
       props['data-gallery'] = JSON.stringify({
         galleryId: options.galleryId,
@@ -4234,7 +4322,6 @@ function getMediaItems(itemOrItems, options) {
       type: "video/mp4"
     })
   }), m) : jsxRuntime.jsx(MediaImage, Object.assign({}, media, {
-    alt: media.alt,
     draggable: false
   }, getMediaItemProps(media)), m));
 }
@@ -5227,26 +5314,26 @@ const defaultContext$5 = {};
 const PaginationContext = /*#__PURE__*/React__default.default.createContext(defaultContext$5);
 const usePaginationContext = () => React__default.default.useContext(PaginationContext);
 
-const StyledPaginationItem$1 = styled__default.default.div`
+const StyledPaginationItem$1 = styled__default.default.li`
   margin-right: 0.428em;
   display: inline-block;
 
   button {
-    border: none;
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    box-sizing: border-box;
-    text-transform: capitalize;
+    height: var(--pagination-size);
+    min-width: var(--pagination-size);
     user-select: none;
     white-space: nowrap;
     text-align: center;
     vertical-align: middle;
+    font-size: inherit;
+    text-transform: capitalize;
     box-shadow: none;
     outline: none;
-    height: var(--pagination-size);
-    min-width: var(--pagination-size);
-    font-size: inherit;
+    border: none;
     cursor: pointer;
     color: var(--color-primary-500);
     border-radius: var(--border-radius);
@@ -5286,25 +5373,26 @@ const StyledPaginationItem$1 = styled__default.default.div`
 `;
 const PaginationItem = _a => {
   var {
+      className,
       children,
       active,
       disabled,
       onClick
     } = _a,
-    props = __rest(_a, ["children", "active", "disabled", "onClick"]);
+    props = __rest(_a, ["className", "children", "active", "disabled", "onClick"]);
   const onClick_ = event => {
     if (disabled) {
       return;
     }
     onClick && onClick(event);
   };
-  const classNames = bomCore.getClassNames({
+  const classNames = bomCore.getClassNames('pagination-item', className, {
     active,
     disabled
   });
   return jsxRuntime.jsx(StyledPaginationItem$1, {
-    as: "li",
-    children: jsxRuntime.jsx("button", Object.assign({
+    children: jsxRuntime.jsx(Button, Object.assign({
+      "aria-label": props['aria-label'],
       className: classNames,
       onClick: onClick_
     }, props, {
@@ -5324,7 +5412,10 @@ const PaginationNext = _a => {
     isLast
   } = usePaginationContext();
   return jsxRuntime.jsx(PaginationItem, Object.assign({
+    className: "pagination-next",
     disabled: isLast,
+    "aria-disabled": isLast,
+    "aria-label": "next page",
     onClick: () => update && update('next')
   }, props, {
     children: children
@@ -5339,38 +5430,40 @@ const StyledPaginationItem = styled__default.default(PaginationItem)`
     width: 1em;
     height: 1em;
   }
-  .more.before {
-    transform: rotate(180deg);
+
+  .pagination-ellipsis__more {
+    &.before {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:hover {
+    .pagination-ellipsis__ellipsis {
+      display: none;
+    }
+  }
+
+  &:not(:hover) {
+    .pagination-ellipsis__more {
+      display: none;
+    }
   }
 `;
-const PaginationEllipsis = _ref => {
-  let {
-    isBefore,
-    onClick
-  } = _ref;
-  const [showMore, setShowMore] = React.useState(false);
-  const moreClassNames = bomCore.getClassNames('more', {
+const PaginationEllipsis = _a => {
+  var {
+      isBefore,
+      onClick
+    } = _a,
+    props = __rest(_a, ["isBefore", "onClick"]);
+  const moreClassNames = bomCore.getClassNames('pagination-ellipsis__more', {
     before: isBefore
   });
-  return jsxRuntime.jsx(StyledPaginationItem, {
-    onClick: e => onClick && onClick(e),
-    onMouseEnter: () => setShowMore(true),
-    onMouseLeave: () => setShowMore(false),
-    children: showMore ? jsxRuntime.jsxs("svg", {
-      className: moreClassNames,
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      fill: "none",
-      shapeRendering: "geometricPrecision",
-      children: [jsxRuntime.jsx("path", {
-        d: "M13 17l5-5-5-5"
-      }), jsxRuntime.jsx("path", {
-        d: "M6 17l5-5-5-5"
-      })]
-    }) : jsxRuntime.jsxs("svg", {
+  return jsxRuntime.jsxs(StyledPaginationItem, {
+    className: "pagination-ellipsis",
+    "aria-label": props['aria-label'],
+    onClick: event => onClick && onClick(event),
+    children: [jsxRuntime.jsxs("svg", {
+      className: "pagination-ellipsis__ellipsis",
       viewBox: "0 0 24 24",
       strokeWidth: "1.5",
       strokeLinecap: "round",
@@ -5393,7 +5486,21 @@ const PaginationEllipsis = _ref => {
         r: "1",
         fill: "currentColor"
       })]
-    })
+    }), jsxRuntime.jsxs("svg", {
+      className: moreClassNames,
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      children: [jsxRuntime.jsx("path", {
+        d: "M13 17l5-5-5-5"
+      }), jsxRuntime.jsx("path", {
+        d: "M6 17l5-5-5-5"
+      })]
+    })]
   });
 };
 PaginationEllipsis.displayName = 'PaginationEllipsis';
@@ -5416,6 +5523,7 @@ const PaginationPages = _ref => {
   }, [current, middleNumber, count, limit]);
   const pagesArray = React.useMemo(() => [...new Array(showPages)], [showPages]);
   const renderItem = React.useCallback((value, active) => jsxRuntime.jsx(PaginationItem, {
+    "aria-label": `page ${value}`,
     active: value === active,
     onClick: () => setPage(value),
     children: value
@@ -5428,6 +5536,7 @@ const PaginationPages = _ref => {
     const middleIndexNumber = middleNumber - (index + 1);
     const value = current - middleIndexNumber;
     return jsxRuntime.jsx(PaginationItem, {
+      "aria-label": `page ${value}`,
       active: index + 1 === middleNumber,
       onClick: () => setPage(value),
       children: value
@@ -5443,6 +5552,7 @@ const PaginationPages = _ref => {
       children: [...new Array(count)].map((_, index) => {
         const value = index + 1;
         return jsxRuntime.jsx(PaginationItem, {
+          "aria-label": `page ${value}`,
           active: value === current,
           onClick: () => setPage(value),
           children: value
@@ -5454,9 +5564,11 @@ const PaginationPages = _ref => {
 
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [renderItem(1, current), showBeforeEllipsis && jsxRuntime.jsx(PaginationEllipsis, {
+      "aria-label": "previous pages",
       isBefore: true,
       onClick: () => setPage(last => last - 5 >= 1 ? last - 5 : 1)
     }, "pagination-ellipsis-before"), showBeforeEllipsis && showAfterEllipsis ? renderMiddleItems : showBeforeEllipsis ? renderEndItems : renderStartItems, showAfterEllipsis && jsxRuntime.jsx(PaginationEllipsis, {
+      "aria-label": "next pages",
       onClick: () => setPage(last => last + 5 <= count ? last + 5 : count)
     }, "pagination-ellipsis-after"), renderItem(count, current)]
   });
@@ -5473,7 +5585,11 @@ const PaginationPrevious = _a => {
     isFirst
   } = usePaginationContext();
   return jsxRuntime.jsx(PaginationItem, Object.assign({
+    className: "pagination-previous",
     disabled: isFirst,
+    "aria-disabled": isFirst,
+    "aria-label": "previous page",
+    title: "previous page",
     onClick: () => update && update('prev')
   }, props, {
     children: children
@@ -5482,18 +5598,29 @@ const PaginationPrevious = _a => {
 PaginationPrevious.displayName = 'PaginationPrevious';
 
 const StyledPagination = styled__default.default.div`
+  --pagination-size: 2rem;
   display: flex;
   justify-content: center;
+  ${props => getCssResponsive(props)}
+`;
+const StyledNav = styled__default.default.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-variant: tabular-nums;
   font-feature-settings: 'tnum';
   font-size: 0.875rem;
-  --pagination-size: 2rem;
+
+  &>li {
+    padding: 0;
+  }
 
   :global(button:last-of-type) {
     margin-right: 0;
   }
-
-  ${props => getCssResponsive(props)}
 `;
 const PaginationBase = _a => {
   var {
@@ -5506,6 +5633,7 @@ const PaginationBase = _a => {
       onChange
     } = _a,
     props = __rest(_a, ["className", "initialPage", "count", "limit", "page", "children", "onChange"]);
+  const label = bomMixerHooks.useLabel();
   const [page, setPage, pageRef] = bomMixerHooks.useCurrentState(initialPage);
   const [, prevChildren] = pickChild(children, PaginationPrevious);
   const [, nextChildren] = pickChild(children, PaginationNext);
@@ -5547,16 +5675,20 @@ const PaginationBase = _a => {
   }, [customPage]);
   return jsxRuntime.jsx(PaginationContext.Provider, {
     value: values,
-    children: jsxRuntime.jsxs(StyledPagination, Object.assign({
-      as: "nav",
+    children: jsxRuntime.jsx(StyledPagination, Object.assign({
       className: className
     }, props, {
-      children: [prevItem, jsxRuntime.jsx(PaginationPages, {
-        count: count,
-        current: page,
-        limit: limit,
-        setPage: setPage
-      }), nextItem]
+      as: "nav",
+      role: "navigation",
+      "aria-label": label('landmark.pagination'),
+      children: jsxRuntime.jsxs(StyledNav, {
+        children: [prevItem, jsxRuntime.jsx(PaginationPages, {
+          count: count,
+          current: page,
+          limit: limit,
+          setPage: setPage
+        }), nextItem]
+      })
     }))
   });
 };
@@ -6657,8 +6789,9 @@ const Tabs = bomCore.withSchema(TabsBase, {
 const CssFormControl = styled.css`
   appearance: none;
   font-family: inherit;
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
+  font-size: var(--form-control-font-size);
+  font-weight: var(--form-control-font-weight);
+  line-height: var(--form-control-line-height);
   border: var(--form-border);
   border-width: var(--form-border-width);
   border-color: var(--form-border-color);
@@ -6798,9 +6931,10 @@ function autocompleteHighligth(text, query) {
 const StyledAutocompleteItem = styled__default.default.div`
   display: block;
   width: 100%;
-  padding: var(--form-padding);
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
+  padding: var(--form-control-padding);
+  font-size: var(--form-control-font-size);
+  font-weight: var(--form-control-font-weight);
+  line-height: var(--form-control-line-height);
   color: inherit;
   background-color: transparent;
   border-color: var(--color-neutral-200);
@@ -6845,8 +6979,8 @@ const StyledAutocompleteContainer = styled__default.default.div`
   &>.button {
     line-height: inherit;
     font-size: inherit;
-    padding-top: var(--form-padding);
-    padding-bottom: var(--form-padding);
+    padding-top: var(--form-control-padding);
+    padding-bottom: var(--form-control-padding);
     margin: -2px;
   }
 
@@ -6867,16 +7001,17 @@ const StyledAutocompleteContainer = styled__default.default.div`
 const StyledAutocomplete = styled__default.default.div`
   display: block;
   appearance: none;
-  padding: var(--form-padding);
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
+  padding: var(--form-control-padding);
+  font-size: var(--form-control-font-size);
+  font-weight: var(--form-control-font-weight);
+  line-height: var(--form-control-line-height);
   color: inherit;
   background-color: transparent;
   border: none;
   outline: none;
 
   &:not(:first-child) {
-    padding-left: calc(var(--form-padding) * 0.5);
+    padding-left: calc(var(--form-control-padding) * 0.5);
   }
 
   ${props => getCssResponsive(props)}
@@ -6891,9 +7026,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_a, ref) => {
       onFocus,
       onBlur,
       onDropdownVisibleChange = () => {},
-      onAutocomplete
+      onAutocomplete,
+      id,
+      name
     } = _a,
-    props = __rest(_a, ["className", "initialValue", "before", "after", "source", "onFocus", "onBlur", "onDropdownVisibleChange", "onAutocomplete"]);
+    props = __rest(_a, ["className", "initialValue", "before", "after", "source", "onFocus", "onBlur", "onDropdownVisibleChange", "onAutocomplete", "id", "name"]);
   const innerRef = React.useRef(null);
   const dropdownRef = React.useRef(null);
   React.useImperativeHandle(ref, () => innerRef.current);
@@ -6977,6 +7114,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_a, ref) => {
           ref: innerRef,
           as: "input",
           type: "text",
+          id: id,
+          name: name,
           onFocus: onFocus_,
           onBlur: onBlur_,
           onChange: onChange_
@@ -7213,6 +7352,8 @@ const StyledInput$1 = styled__default.default.input`
 const CustomSelectInput = /*#__PURE__*/React__default.default.forwardRef((_ref, inputRef) => {
   let {
     visible,
+    id,
+    name,
     onBlur,
     onFocus
   } = _ref;
@@ -7224,18 +7365,18 @@ const CustomSelectInput = /*#__PURE__*/React__default.default.forwardRef((_ref,
       (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }, [visible]);
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: jsxRuntime.jsx(StyledInput$1, {
-      ref: ref,
-      type: "search",
-      role: "combobox",
-      "aria-haspopup": "listbox",
-      readOnly: true,
-      unselectable: "on",
-      "aria-expanded": visible,
-      onBlur: onBlur,
-      onFocus: onFocus
-    })
+  return jsxRuntime.jsx(StyledInput$1, {
+    ref: ref,
+    id: id,
+    name: name,
+    type: "search",
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    readOnly: true,
+    unselectable: "on",
+    "aria-expanded": visible,
+    onBlur: onBlur,
+    onFocus: onFocus
   });
 });
 CustomSelectInput.displayName = 'CustomSelectInput';
@@ -7402,7 +7543,7 @@ CustomSelectOption.displayName = 'CustomSelectOption';
 const StyledCustomSelect = styled__default.default.div`
   ${CssFormControl}
 
-  padding: var(--form-padding);
+  padding: var(--form-control-padding);
   position: relative;
   display: inline-flex;
   justify-content: space-between;
@@ -7441,7 +7582,7 @@ const StyledCustomSelect = styled__default.default.div`
   }
 
   &.multiple {
-    padding: calc(var(--form-padding) * 0.675);
+    padding: calc(var(--form-control-padding) * 0.675);
 
     .placeholder {
       padding: 0.563rem 0;
@@ -7476,9 +7617,11 @@ const CustomSelectBase = /*#__PURE__*/React.forwardRef((_a, selectRef) => {
       dropdownStyle,
       getPopupContainer,
       onBlur,
-      onFocus
+      onFocus,
+      id,
+      name
     } = _a,
-    props = __rest(_a, ["disabled", "pure", "multiple", "clearable", "className", "disableMatchWidth", "onDropdownVisibleChange", "value", "initialValue", "icon", "children", "onChange", "placeholder", "dropdownClassName", "dropdownStyle", "getPopupContainer", "onBlur", "onFocus"]);
+    props = __rest(_a, ["disabled", "pure", "multiple", "clearable", "className", "disableMatchWidth", "onDropdownVisibleChange", "value", "initialValue", "icon", "children", "onChange", "placeholder", "dropdownClassName", "dropdownStyle", "getPopupContainer", "onBlur", "onFocus", "id", "name"]);
   const Icon = icon || SelectIcon;
   const ref = React.useRef(null);
   const inputRef = React.useRef(null);
@@ -7612,7 +7755,8 @@ const CustomSelectBase = /*#__PURE__*/React.forwardRef((_a, selectRef) => {
     }, props, {
       children: [jsxRuntime.jsx(CustomSelectInput, {
         ref: inputRef,
-        name: props.name,
+        id: id,
+        name: name,
         visible: visible,
         onFocus: onFocus_,
         onBlur: onBlur_
@@ -7653,11 +7797,32 @@ const CustomSelect = bomCore.withSchema(CustomSelectBase, {
 const CssFieldDefault = styled.css`
   display: flex;
   flex-direction: column;
-  // margin-bottom: 0.5rem;
+  gap: var(--form-field-gap);
 
   label {
-    font-weight: 500;
-    margin-bottom: 0.3rem;
+    padding: var(--form-label-padding);
+    font-size: var(--form-label-font-size);
+    font-weight: var(--form-label-font-weight);
+    line-height: var(--form-label-line-height);
+  }
+
+  &.invalid {
+
+    label {
+      &:after {
+        content: '*';
+        display: inline-block;
+        padding-left: 0.3em;
+      }
+    }
+
+    &.touched {
+      label {
+        &:after {
+          color: var(--form-error-color, inherit);
+        }
+      }
+    }
   }
 `;
 const fieldVariants = {
@@ -7671,11 +7836,12 @@ const StyledField = styled__default.default.div`
 const Field = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       className,
+      state,
       variant = 'default',
       variants
     } = _a,
-    props = __rest(_a, ["className", "variant", "variants"]);
-  const classNames = bomCore.getClassNames('input', className, variant);
+    props = __rest(_a, ["className", "state", "variant", "variants"]);
+  const classNames = bomCore.getClassNames('field', className, variant, state === null || state === void 0 ? void 0 : state.flags);
   const globalVariants = useVariants('field', fieldVariants);
   variants = variants || globalVariants;
   return jsxRuntime.jsx(StyledField, Object.assign({
@@ -7689,12 +7855,24 @@ const Field = /*#__PURE__*/React.forwardRef((_a, ref) => {
 Field.displayName = 'Field';
 
 const CssFormErrorDefault = styled.css`
-  padding: var(--form-padding);
-  font-weight: 700;
+  font-size: var(--form-error-font-size, 0.9rem);
+  font-weight: var(--form-error-font-weight, 500);
+  line-height: var(--form-error-line-height, 1.2);
+  border: var(--form-error-border, none);
+  background: var(--form-error-background-color, transparent);
+  color: var(--form-error-color, inherit);
+
+  padding: var(--form-control-padding);
   text-align: center;
+
+  /*
+  font-weight: 700;
+  */
+  /*
   border: 1px solid var(--form-border-color-error);
   background: var(--form-background-color-error);
   color: var(--form-color-error);
+  */
 `;
 const formErrorVariants = {
   default: CssFormErrorDefault
@@ -7724,7 +7902,7 @@ const FormError = /*#__PURE__*/React.forwardRef((_a, ref) => {
 FormError.displayName = 'FormError';
 
 const CssFormTesterDefault = styled.css`
-  padding: var(--form-padding);
+  padding: var(--form-control-padding);
   border: 1px solid var(--form-border-color-info);
   background: var(--form-background-color-info);
   color: var(--form-color-info);
@@ -7860,28 +8038,6 @@ function getForm(props) {
   } else {
     return undefined;
   }
-  /*
-  return css`
-    --form-font-size: var(--form-${variant}-font-size, 1rem);
-    --form-line-height: var(--form-${variant}-line-height, 1.625);
-    --form-padding: var(--form-${variant}-padding, 0.8em);
-    --form-background-color: var(--form-${variant}-background-color, transparent);
-    --form-background-color-disabled: var(--form-${variant}-background-color-disabled, var(--color-neutral-200));
-    --form-color: var(--form-${variant}-color, inherit);
-    --form-color-hover: var(--form-${variant}-color-hover, var(--color-neutral-900));
-    --form-border: var(--form-${variant}-border, 0 solid transparent);
-    --form-border-width: var(--form-${variant}-border-width, 2px);
-    --form-border-color: var(--form-${variant}-border-color, var(--color-neutral-200));
-    --form-border-color-hover: var(--form-${variant}-border-color-hover, var(--color-neutral-300));
-    --form-border-color-disabled: var(--form-${variant}-border-color-disabled, var(--color-neutral-300));
-    --form-border-radius: var(--form-${variant}-border-radius, var(--border-radius));
-    --form-outline: var(--form-${variant}-outline, 2px solid transparent);
-    --form-outline-color-focus: var(--form-${variant}-outline-color-focus, var(--color-primary-200));
-    --form-outline-color-active: var(--form-${variant}-outline-color-active, var(--color-primary-500));
-    --form-outline-offset: var(--form-${variant}-outline-offset, 2px);
-    --form-transition: var(--form-${variant}-transition, border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s, box-shadow 200ms ease 0s);
-  `;
-  */
 }
 
 const CssInputContainerDefault = styled.css`
@@ -7933,9 +8089,10 @@ const CssInputReset = styled.css`
 const CssInputDefault = styled.css`
   ${CssInputReset}
 
-  padding: var(--form-padding);
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
+  padding: var(--form-control-padding);
+  font-size: var(--form-control-font-size);
+  font-weight: var(--form-control-font-weight);
+  line-height: var(--form-control-line-height);
   border-radius: var(--form-border-radius);
 
   &::placeholder {
@@ -7967,9 +8124,11 @@ const Input = /*#__PURE__*/React.forwardRef((_a, ref) => {
       onFocus,
       onBlur,
       variant = 'default',
-      variants
+      variants,
+      id,
+      name
     } = _a,
-    props = __rest(_a, ["as", "className", "before", "after", "type", "onFocus", "onBlur", "variant", "variants"]);
+    props = __rest(_a, ["as", "className", "before", "after", "type", "onFocus", "onBlur", "variant", "variants", "id", "name"]);
   const [focus, setFocus] = React.useState(false);
   const onFocus_ = event => {
     onFocus && onFocus(event);
@@ -7996,6 +8155,8 @@ const Input = /*#__PURE__*/React.forwardRef((_a, ref) => {
       ref: ref,
       as: as,
       type: type,
+      id: id,
+      name: name,
       onFocus: onFocus_,
       onBlur: onBlur_,
       variant: variant,
@@ -8008,10 +8169,11 @@ Input.displayName = 'Input';
 const StyledInputGroup = styled__default.default.div`
   display: block;
   width: 100%;
-  padding: var(--form-padding);
+  padding: var(--form-control-padding);
   appearance: none;
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
+  font-size: var(--form-control-font-size);
+  font-weight: var(--form-control-font-weight);
+  line-height: var(--form-control-line-height);
   border: 2px solid;
   border-radius: var(--border-radius);
   color: inherit;
@@ -8050,7 +8212,9 @@ const CssLabelDefault = styled.css`
   display: flex;
   align-items: center;
   width: 100%;
-  font-size: var(--font-paragraph30-size, --form-font-size, 1rem);
+  font-size: var(--form-label-font-size, 0.9rem);
+  font-weight: var(--form-label-font-weight, 500);
+  line-height: var(--form-label-line-height, 1.2);
   cursor: pointer;
 `;
 const labelVariants = {
@@ -9018,7 +9182,7 @@ const StyledSelectSelect = styled__default.default.div`
 
   display: block;
   width: 100%;
-  padding: var(--form-padding);
+  padding: var(--form-control-padding);
   appearance: none;
   cursor: pointer;
 
@@ -9067,7 +9231,7 @@ const CssTextareaDefault = styled.css`
   ${CssFormControl}
   display: block;
   width: 100%;
-  padding: var(--form-padding);
+  padding: var(--form-control-padding);
   resize: vertical;
   min-height: 4em;
   cursor: pointer;
@@ -9085,17 +9249,35 @@ const TextArea = /*#__PURE__*/React.forwardRef((_a, ref) => {
       as = 'textarea',
       children,
       className,
+      onFocus,
+      onBlur,
       variant = 'default',
       variants
     } = _a,
-    props = __rest(_a, ["as", "children", "className", "variant", "variants"]);
-  const classNames = bomCore.getClassNames('textarea', className, variant);
+    props = __rest(_a, ["as", "children", "className", "onFocus", "onBlur", "variant", "variants"]);
+  const [focus, setFocus] = React.useState(false);
+  const onFocus_ = event => {
+    onFocus && onFocus(event);
+    setFocus(true);
+  };
+  const onBlur_ = event => {
+    onBlur && onBlur(event);
+    setFocus(false);
+  };
+  const classNames = bomCore.getClassNames('textarea', {
+    focus,
+    disabled: props.disabled,
+    readonly: props.readOnly,
+    hidden: props.hidden
+  }, className, variant);
   const globalVariants = useVariants('textarea', textareaVariants);
   variants = variants || globalVariants;
   return jsxRuntime.jsx(StyledTextArea, Object.assign({
     className: classNames,
     ref: ref,
     as: as,
+    onFocus: onFocus_,
+    onBlur: onBlur_,
     variant: variant,
     variants: variants
   }, props, {
@@ -9105,13 +9287,14 @@ const TextArea = /*#__PURE__*/React.forwardRef((_a, ref) => {
 TextArea.displayName = 'TextArea';
 
 const CssFieldErrorDefault = styled.css`
-  margin: 0.5em 0;
-  padding: 0.2em 0.5em;
-  font-size: var(--font-paragraph50-size, --form-font-size, 1rem);
-  font-weight: 500;
-  border: 1px solid var(--form-border-color-error);
-  background: var(--form-background-color-error);
-  color: var(--form-color-error);
+  margin: var(--form-error-margin, 0);
+  padding: var(--form-error-padding, 0);
+  font-size: var(--form-error-font-size, 0.9rem);
+  font-weight: var(--form-error-font-weight, 500);
+  line-height: var(--form-error-line-height, 1.2);
+  border: var(--form-error-border, none);
+  background: var(--form-error-background-color, transparent);
+  color: var(--form-error-color, inherit);
 `;
 const fieldErrorVariants = {
   default: CssFieldErrorDefault
@@ -9144,9 +9327,16 @@ function FieldError(_a) {
   });
 }
 
-function FieldAccept(props) {
+function FieldAccept(_ref) {
+  let {
+    control,
+    uid = 0
+  } = _ref;
   const label = bomMixerHooks.useLabel();
-  const [state, setValue, setTouched] = bomMixerForms.useControl(props.control);
+  const uniqueName = `${control.name}-${uid}`;
+  const uniqueNameTrue = `${uniqueName}-true`;
+  const uniqueNameFalse = `${uniqueName}-false`;
+  const [state, setValue, setTouched] = bomMixerForms.useControl(control);
   const onSelect = value => {
     // console.log('value', value);
     setValue(value);
@@ -9166,6 +9356,7 @@ function FieldAccept(props) {
     type: "hidden",
     value: state.value ? 'true' : 'false'
   }) : jsxRuntime.jsxs(Field, {
+    state: state,
     padding: "1em 0",
     borderBottom: "1px solid var(--color-neutral-200)",
     children: [jsxRuntime.jsxs(Radio.Group, {
@@ -9175,18 +9366,24 @@ function FieldAccept(props) {
       onFocus: onFocus,
       disabled: state.flags.disabled || state.flags.readonly,
       children: [jsxRuntime.jsxs(Label, {
+        htmlFor: uniqueNameTrue,
         width: "auto",
         children: [jsxRuntime.jsx(Radio, {
-          value: "true"
-        }), " ", label('form.accept.true')]
+          value: "true",
+          name: uniqueNameTrue,
+          id: uniqueNameTrue
+        }), label('form.accept.true')]
       }), jsxRuntime.jsxs(Label, {
+        htmlFor: uniqueNameFalse,
         width: "auto",
         children: [jsxRuntime.jsx(Radio, {
-          value: "false"
-        }), " ", label('form.accept.false')]
+          value: "false",
+          name: uniqueNameFalse,
+          id: uniqueNameFalse
+        }), label('form.accept.false')]
       })]
-    }), props.control.label && jsxRuntime.jsx(Text, {
-      children: label(props.control.label)
+    }), control.label && jsxRuntime.jsx(Text, {
+      children: label(control.label)
     }), jsxRuntime.jsx(FieldError, {
       state: state
     })]
@@ -9194,12 +9391,16 @@ function FieldAccept(props) {
 }
 
 // !!! todo
-function FieldAutocomplete(props) {
+function FieldAutocomplete(_ref) {
+  let {
+    control,
+    uid = 0
+  } = _ref;
   const label = bomMixerHooks.useLabel();
-  const uniqueName = `${props.control.name}-${props.uid}`;
-  const [state, setValue, setTouched] = bomMixerForms.useControl(props.control);
+  const uniqueName = `${control.name}-${uid}`;
+  const [state, setValue, setTouched] = bomMixerForms.useControl(control);
   const onChange = value => {
-    const valueOrValues = bomMixerForms.stringToValue(value, props.control.options);
+    const valueOrValues = bomMixerForms.stringToValue(value, control.options);
     setValue(valueOrValues);
   };
   const [focus, setFocus] = React.useState(false);
@@ -9225,7 +9426,7 @@ function FieldAutocomplete(props) {
   }
   function source(query) {
     return new Promise((resolve, reject) => {
-      const options = (props.control.options || []).filter(x => {
+      const options = (control.options || []).filter(x => {
         const name = x.name.toString().toLowerCase();
         return name.indexOf(query.toLowerCase()) !== -1;
       }).map(x => {
@@ -9239,8 +9440,8 @@ function FieldAutocomplete(props) {
   }
   const initialValue = React.useMemo(() => {
     var _a;
-    if ((_a = props.control.optionsExtra) === null || _a === void 0 ? void 0 : _a.asEquatable) {
-      const options = props.control.options || [];
+    if ((_a = control.optionsExtra) === null || _a === void 0 ? void 0 : _a.asEquatable) {
+      const options = control.options || [];
       if (!state.value) {
         return undefined;
       }
@@ -9262,19 +9463,21 @@ function FieldAutocomplete(props) {
     type: "hidden",
     value: bomMixerForms.valueToString(state.value)
   }) : jsxRuntime.jsxs(Field, {
-    children: [props.control.label && jsxRuntime.jsx(Label, {
-      children: label(props.control.label)
+    state: state,
+    children: [jsxRuntime.jsx(Label, {
+      htmlFor: uniqueName,
+      children: control.label && label(control.label)
     }), jsxRuntime.jsx(Autocomplete, {
-      background: "var(--color-neutral-100)",
-      overflow: "hidden",
       id: uniqueName,
       name: uniqueName,
-      placeholder: label(props.control.placeholder || props.control.label || ''),
+      placeholder: label(control.placeholder || control.label || ''),
       initialValue: initialValue,
       source: source,
       onAutocomplete: onAutocomplete,
       onFocus: onFocus,
-      onBlur: onBlur
+      onBlur: onBlur,
+      background: "var(--color-neutral-100)",
+      overflow: "hidden"
     }), jsxRuntime.jsx(FieldError, {
       state: state
     })]
@@ -9284,10 +9487,10 @@ function FieldAutocomplete(props) {
 function FieldCard(_a) {
   var _b, _c;
   var {
-      uid,
-      control
+      control,
+      uid = 0
     } = _a,
-    props = __rest(_a, ["uid", "control"]);
+    props = __rest(_a, ["control", "uid"]);
   const label = bomMixerHooks.useLabel();
   const uniqueName = `${control.name}-${uid}`;
   const [state, setValue, setTouched] = bomMixerForms.useControl(control);
@@ -9308,8 +9511,11 @@ function FieldCard(_a) {
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: state.value ? state.value.toString() : ''
-  }) : jsxRuntime.jsxs(Field, Object.assign({}, props, {
+  }) : jsxRuntime.jsxs(Field, Object.assign({
+    state: state
+  }, props, {
     children: [jsxRuntime.jsx(Label, {
+      htmlFor: uniqueName,
       margin: "0",
       children: control.label && label(control.label)
     }), jsxRuntime.jsx(RadioCard.Group, {
@@ -9338,10 +9544,10 @@ function FieldCard(_a) {
 
 function FieldCheckbox(_a) {
   var {
-      uid,
-      control
+      control,
+      uid = 0
     } = _a,
-    props = __rest(_a, ["uid", "control"]);
+    props = __rest(_a, ["control", "uid"]);
   const label = bomMixerHooks.useLabel();
   const uniqueName = `${control.name}-${uid}`;
   const [state, setValue, setTouched] = bomMixerForms.useControl(control);
@@ -9360,8 +9566,11 @@ function FieldCheckbox(_a) {
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: state.value ? state.value.toString() : ''
-  }) : jsxRuntime.jsxs(Field, Object.assign({}, props, {
+  }) : jsxRuntime.jsxs(Field, Object.assign({
+    state: state
+  }, props, {
     children: [jsxRuntime.jsxs(Label, {
+      htmlFor: uniqueName,
       margin: "0",
       children: [jsxRuntime.jsx(Checkbox, {
         id: uniqueName,
@@ -9378,14 +9587,18 @@ function FieldCheckbox(_a) {
   }));
 }
 
-function FieldPassword(props) {
+function FieldPassword(_ref) {
+  let {
+    control,
+    uid = 0
+  } = _ref;
   const label = bomMixerHooks.useLabel();
-  const uniqueName = `${props.control.name}-${props.uid}`;
-  const [state, setValue, setTouched] = bomMixerForms.useControl(props.control);
+  const uniqueName = `${control.name}-${uid}`;
+  const [state, setValue, setTouched] = bomMixerForms.useControl(control);
   const onChange = event => {
     // console.log('FieldPassword', event.target.value);
     setValue(event.target.value);
-    // props.control.value = event.target.value;
+    // control.value = event.target.value;
   };
 
   const [focus, setFocus] = React.useState(false);
@@ -9404,13 +9617,15 @@ function FieldPassword(props) {
     type: "hidden",
     value: state.value || ''
   }) : jsxRuntime.jsxs(Field, {
+    state: state,
     children: [jsxRuntime.jsx(Label, {
-      children: props.control.label && label(props.control.label)
+      htmlFor: uniqueName,
+      children: control.label && label(control.label)
     }), jsxRuntime.jsx(Input, {
       id: uniqueName,
       name: uniqueName,
       type: type,
-      placeholder: label(props.control.placeholder || props.control.label || ''),
+      placeholder: label(control.placeholder || control.label || ''),
       value: state.value || '',
       onChange: onChange,
       onBlur: onBlur,
@@ -9428,12 +9643,16 @@ function FieldPassword(props) {
   });
 }
 
-function FieldSelect(props) {
+function FieldSelect(_ref) {
+  let {
+    control,
+    uid = 0
+  } = _ref;
   const label = bomMixerHooks.useLabel();
-  const uniqueName = `${props.control.name}-${props.uid}`;
-  const [state, setValue, setTouched] = bomMixerForms.useControl(props.control);
+  const uniqueName = `${control.name}-${uid}`;
+  const [state, setValue, setTouched] = bomMixerForms.useControl(control);
   const onChange = value => {
-    const valueOrValues = bomMixerForms.stringToValue(value, props.control.options, props.control.optionsExtra);
+    const valueOrValues = bomMixerForms.stringToValue(value, control.options, control.optionsExtra);
     setValue(valueOrValues);
   };
   const [focus, setFocus] = React.useState(false);
@@ -9448,18 +9667,21 @@ function FieldSelect(props) {
     type: "hidden",
     value: bomMixerForms.valueToString(state.value)
   }) : jsxRuntime.jsxs(Field, {
-    children: [props.control.label && jsxRuntime.jsx(Label, {
-      children: label(props.control.label)
+    state: state,
+    children: [jsxRuntime.jsx(Label, {
+      htmlFor: uniqueName,
+      children: control.label && label(control.label)
     }), jsxRuntime.jsx(CustomSelect, {
       id: uniqueName,
-      placeholder: label(props.control.placeholder || props.control.label || ''),
+      name: uniqueName,
+      placeholder: label(control.placeholder || control.label || ''),
       value: bomMixerForms.valueToString(state.value),
       onChange: onChange,
       onBlur: onBlur,
       onFocus: onFocus,
       disabled: state.flags.disabled || state.flags.readonly,
       width: "100%",
-      children: props.control.options && props.control.options.map((option, i) => jsxRuntime.jsx(CustomSelect.Option, {
+      children: control.options && control.options.map((option, i) => jsxRuntime.jsx(CustomSelect.Option, {
         value: option.id.toString(),
         children: option.name
       }, i))
@@ -9469,14 +9691,20 @@ function FieldSelect(props) {
   });
 }
 
-function FieldText(props) {
+function FieldText(_ref) {
+  let {
+    control,
+    uid = 0,
+    before,
+    after
+  } = _ref;
   const label = bomMixerHooks.useLabel();
-  const uniqueName = `${props.control.name}-${props.uid}`;
-  const [state, setValue, setTouched] = bomMixerForms.useControl(props.control);
+  const uniqueName = `${control.name}-${uid}`;
+  const [state, setValue, setTouched] = bomMixerForms.useControl(control);
   const onChange = event => {
     // console.log('FieldText', event.target.value);
     setValue(event.target.value);
-    // props.control.value = event.target.value;
+    // control.value = event.target.value;
   };
 
   const [focus, setFocus] = React.useState(false);
@@ -9491,20 +9719,69 @@ function FieldText(props) {
     type: "hidden",
     value: state.value || ''
   }) : jsxRuntime.jsxs(Field, {
+    state: state,
     children: [jsxRuntime.jsx(Label, {
-      children: props.control.label && label(props.control.label)
+      htmlFor: uniqueName,
+      children: control.label && label(control.label)
     }), jsxRuntime.jsx(Input, {
       id: uniqueName,
       name: uniqueName,
-      placeholder: label(props.control.placeholder || props.control.label || ''),
+      placeholder: label(control.placeholder || control.label || ''),
+      value: state.value || '',
+      onChange: onChange,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      disabled: state.flags.disabled,
+      readOnly: state.flags.readonly,
+      before: before,
+      after: after,
+      width: "100%"
+    }), jsxRuntime.jsx(FieldError, {
+      state: state
+    })]
+  });
+}
+
+function FieldTextArea(_ref) {
+  let {
+    control,
+    uid = 0
+  } = _ref;
+  const label = bomMixerHooks.useLabel();
+  const uniqueName = `${control.name}-${uid}`;
+  const [state, setValue, setTouched] = bomMixerForms.useControl(control);
+  const onChange = event => {
+    // console.log('FieldTextArea', event.target.value);
+    setValue(event.target.value);
+    // control.value = event.target.value;
+  };
+
+  const [focus, setFocus] = React.useState(false);
+  const onBlur = _ => {
+    setTouched();
+    setFocus(false);
+  };
+  const onFocus = _ => {
+    setFocus(true);
+  };
+  return state.flags.hidden ? jsxRuntime.jsx("input", {
+    type: "hidden",
+    value: state.value || ''
+  }) : jsxRuntime.jsxs(Field, {
+    state: state,
+    children: [jsxRuntime.jsx(Label, {
+      htmlFor: uniqueName,
+      children: control.label && label(control.label)
+    }), jsxRuntime.jsx(TextArea, {
+      id: uniqueName,
+      name: uniqueName,
+      placeholder: label(control.placeholder || control.label || ''),
       value: state.value || '',
       onChange: onChange,
       onBlur: onBlur,
       onFocus: onFocus,
       disabled: state.flags.disabled,
       readOnly: state.flags.readonly,
-      before: props.before,
-      after: props.after,
       width: "100%"
     }), jsxRuntime.jsx(FieldError, {
       state: state
@@ -9520,6 +9797,10 @@ const FIELDS = {
     control: control,
     uid: uid
   }, uid),
+  textarea: (control, uid) => jsxRuntime.jsx(FieldTextArea, {
+    control: control,
+    uid: uid
+  }, uid),
   password: (control, uid) => jsxRuntime.jsx(FieldPassword, {
     control: control,
     uid: uid
@@ -9550,66 +9831,75 @@ const FIELDS = {
   }, uid)
 };
 
-function FieldCollection(props) {
+const StyledGrid = styled__default.default(Grid)`
+  flex-direction: column;
+  align-items: flex-start;
+`;
+function FieldCollection(_ref) {
+  let {
+    collection,
+    fields,
+    uid
+  } = _ref;
   const label = bomMixerHooks.useLabel();
-  let uid = props.uid || 0;
-  const controls = props.collection instanceof bomMixerForms.FormGroup ? Object.keys(props.collection.controls).map(key => {
-    return {
-      key,
-      control: props.collection.controls[key]
-    };
-  }) : props.collection.controls.map((control, i) => {
-    return {
-      key: i,
-      control
-    };
-  });
+  const controls = React.useMemo(() => {
+    return collection instanceof bomMixerForms.FormGroup ? Object.keys(collection.controls).map(key => {
+      return {
+        key,
+        control: collection.controls[key]
+      };
+    }) : collection.controls.map((control, i) => {
+      return {
+        key: i,
+        control
+      };
+    });
+  }, [collection]);
+  const customFields = React.useMemo(() => {
+    return Object.assign(Object.assign({}, FIELDS), fields);
+  }, [fields]);
+  let uniqueId = uid || 0;
   function resolveField(item) {
     const {
       control,
       key
     } = item;
-    ++uid;
+    ++uniqueId;
     if (control instanceof bomMixerForms.FormGroup || control instanceof bomMixerForms.FormArray) {
       return jsxRuntime.jsx(FieldCollection, {
         collection: control,
-        uid: uid
-      }, getFieldUID(uid, control.name));
+        fields: fields,
+        uid: uniqueId
+      }, getFieldUID(uniqueId, control.name));
     } else {
-      if (control.schema in FIELDS) {
-        return FIELDS[control.schema](control, uid);
+      if (control.schema in customFields) {
+        return customFields[control.schema](control, uniqueId);
       } else {
-        return FIELDS.text(control, uid);
+        return customFields.text(control, uniqueId);
       }
     }
   }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [props.collection.label && jsxRuntime.jsx(Grid, {
+    children: [collection.label && jsxRuntime.jsx(Grid, {
       xs: 12,
       children: jsxRuntime.jsx(Divider, {
-        children: label(props.collection.label)
+        children: label(collection.label)
       })
-    }, getFieldUID(++uid, props.collection.name)), controls.length > 0 && controls.map(item => {
+    }, getFieldUID(++uniqueId, collection.name)), controls.length > 0 && controls.map(item => {
       const control = item.control;
       if (!control) {
         return;
       }
-      if (control instanceof bomMixerForms.FormGroup || control instanceof bomMixerForms.FormArray || control.state.hidden) {
-        // console.log(control);
-        if (control.state.hidden) {
-          return;
-        }
+      if (control.state.hidden) {
+        return;
+      } else if (control instanceof bomMixerForms.FormGroup || control instanceof bomMixerForms.FormArray) {
         return resolveField(item);
       } else {
-        return jsxRuntime.jsx(Grid, {
+        return jsxRuntime.jsx(StyledGrid, {
           xs: 12,
           sm: ['checkbox', 'accept'].includes(control.schema) ? 12 : 6,
-          style: {
-            flexDirection: 'column',
-            alignItems: 'flex-start'
-          },
           children: resolveField(item)
-        }, getFieldUID(++uid, item.key));
+        }, getFieldUID(++uniqueId, item.key));
       }
     })]
   });
@@ -14036,7 +14326,7 @@ const ContactHero = _ref => {
   });
 };
 
-const FooterContainer = styled__default.default.div`
+const FooterContainer = styled__default.default.footer`
   padding: 6rem 0 4rem 0;
   background: var(--color-neutral-900);
   color: var(--color-neutral-100);
@@ -14051,6 +14341,9 @@ const Footer = props => {
     }, props, {
       children: jsxRuntime.jsxs(Container.Fluid, {
         children: [jsxRuntime.jsxs(Grid.Row, {
+          as: "nav",
+          role: "navigation",
+          "aria-label": "Footer",
           children: [jsxRuntime.jsxs(Grid, {
             sm: 12,
             md: 4,
@@ -14276,6 +14569,7 @@ const Footer = props => {
                 children: jsxRuntime.jsx(Button, {
                   as: "a",
                   target: "_blank",
+                  title: "Digital Marketing",
                   children: jsxRuntime.jsx(bomMixerIcons.IconWebsolute, {})
                 })
               })]
@@ -14525,7 +14819,7 @@ function useOnClickOutside(ref, handler, mouseEvent) {
   });
 }
 
-const HeaderContainer = styled__default.default.div`
+const HeaderContainer = styled__default.default.header`
   display: flex;
   align-items: center;
   min-height: 120px;
@@ -14709,6 +15003,9 @@ const Header = props => {
           gap: "1rem",
           gapMd: "2rem",
           gapLg: "3rem",
+          as: "nav",
+          role: "navigation",
+          "arial-label": "Main menu",
           children: [jsxRuntime.jsx(Flex, {
             children: jsxRuntime.jsx(NavLink, {
               href: layout.topLevelHrefs.homepage || '/',
@@ -15143,7 +15440,7 @@ const MagazineRelated = _a => {
     return null;
   }
   const items = item.items;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('magazine-related');
   return jsxRuntime.jsxs(StyledSection$1, {
     className: classNames,
     padding: "7rem 0",
@@ -15804,7 +16101,7 @@ const ProductsDetailDownload = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('products-detail-download');
   if (!item) {
     return null;
   }
@@ -15911,7 +16208,7 @@ const ProductsDetailRelated = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('products-detail-related');
   if (!item) {
     return null;
   }
@@ -15955,7 +16252,7 @@ const ProductsDetailSizeColor = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('products-detail-size-color');
   if (!item) {
     return null;
   }
@@ -16958,7 +17255,7 @@ const ShopDetailRelated = _ref => {
     id,
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('shop-detail-related');
   return jsxRuntime.jsx(Section, {
     id: id,
     className: classNames,
@@ -18982,8 +19279,21 @@ function LayoutDefault(_ref) {
   let {
     children
   } = _ref;
-  return jsxRuntime.jsxs(Layout, {
-    children: [jsxRuntime.jsx(Meta, {}), jsxRuntime.jsxs(Page, {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(Meta, {}), jsxRuntime.jsxs(Layout, {
+      children: [jsxRuntime.jsx(Header, {
+        sticky: true
+      }), children, jsxRuntime.jsx(Footer, {})]
+    })]
+  });
+}
+
+function LayoutFixed(_ref) {
+  let {
+    children
+  } = _ref;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(Meta, {}), jsxRuntime.jsxs(Layout, {
       children: [jsxRuntime.jsx(Header, {
         fixed: true
       }), children, jsxRuntime.jsx(Footer, {})]
@@ -19025,7 +19335,7 @@ const Carousel1 = _a => {
     } = _a,
     props = __rest(_a, ["item"]);
   const items = item.items;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('carousel-1');
   return jsxRuntime.jsxs(StyledSection, {
     className: classNames,
     padding: "7rem 0",
@@ -19089,7 +19399,7 @@ const Download1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('download-1');
   return jsxRuntime.jsx(Section, {
     className: classNames,
     padding: "6rem 0",
@@ -19135,7 +19445,7 @@ const MediaFull1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomCore.getClassNames('media', item.schema);
+  const classNames = bomCore.getClassNames('media-full-1');
   return jsxRuntime.jsx(Media, {
     className: classNames,
     aspectRatio: 16 / 10,
@@ -19156,7 +19466,7 @@ const MediaFull2 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('media-full-2');
   return jsxRuntime.jsx(Section, {
     className: classNames,
     padding: "6rem 0",
@@ -19186,7 +19496,7 @@ const MediaMedia1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('media-media-1');
   return jsxRuntime.jsx(Section, {
     className: classNames,
     padding: "6rem 0",
@@ -19310,7 +19620,7 @@ const Related1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('related-1');
   return jsxRuntime.jsx(Section, {
     className: classNames,
     padding: "6rem 0",
@@ -19349,7 +19659,7 @@ const SizesColors1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('sizes-colors-1');
   return jsxRuntime.jsx(Section, {
     className: classNames,
     padding: "6rem 0",
@@ -19415,7 +19725,7 @@ const Text1 = _ref => {
     item
   } = _ref;
   // !!! Container.Small
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('text-1');
   return jsxRuntime.jsx(Section, {
     className: classNames,
     padding: "6rem 0",
@@ -19448,7 +19758,7 @@ const TextAside1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('text-aside-1');
   return jsxRuntime.jsx(Section, {
     className: classNames,
     padding: "6rem 0",
@@ -19501,7 +19811,7 @@ const TextMedia1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('text-media-1');
   return jsxRuntime.jsx(Section, {
     className: classNames,
     padding: "6rem 0",
@@ -19560,7 +19870,7 @@ const TextText1 = _ref => {
   let {
     item
   } = _ref;
-  const classNames = bomCore.getClassNames(item.schema);
+  const classNames = bomCore.getClassNames('text-text-1');
   return jsxRuntime.jsx(Section, {
     className: classNames,
     padding: "6rem 0",
@@ -19592,31 +19902,36 @@ var textText1 = /*#__PURE__*/Object.freeze({
 
 const LAZY_MODULES = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Carousel1Export), Download1Export), MediaFull1Export), MediaFull2Export), MediaMedia1Export), NotFoundExport), Related1Export), SizesColors1Export), Text1Export), TextAside1Export), TextMedia1Export), TextText1Export);
 
-const lazyLoadComponent = function (component, modules) {
+const lazyLoadComponent = function (component, modules, index) {
   if (modules === void 0) {
     modules = LAZY_MODULES;
   }
+  if (index === void 0) {
+    index = 0;
+  }
   const key = component.schema || component.blockType;
   const Component = modules[key] || LAZY_MODULES['not-found'];
   return jsxRuntime.jsx(Component, {
-    item: component
+    item: component,
+    index: index
   });
 };
 const LazyLoader = _ref => {
   let {
     components,
-    modules = LAZY_MODULES
+    modules = LAZY_MODULES,
+    initialIndex = 0
   } = _ref;
   if (!components) {
     return null;
   }
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: components.map((component, i) => jsxRuntime.jsx(React__default.default.Suspense, {
+    children: components.map((component, index) => jsxRuntime.jsx(React__default.default.Suspense, {
       fallback: jsxRuntime.jsx(Skeleton, {
         minHeight: "50vh"
       }),
-      children: lazyLoadComponent(component, modules)
-    }, i))
+      children: lazyLoadComponent(component, modules, initialIndex + index)
+    }, index))
   });
 };
 
@@ -19629,6 +19944,7 @@ exports.AuthProvider = AuthProvider;
 exports.AuthUpdate = AuthUpdate;
 exports.Autocomplete = Autocomplete;
 exports.AutocompleteContext = AutocompleteContext;
+exports.Background = Background;
 exports.Badge = Badge;
 exports.BlogCard = BlogCard;
 exports.BlogMore = BlogMore;
@@ -19723,6 +20039,7 @@ exports.FieldError = FieldError;
 exports.FieldPassword = FieldPassword;
 exports.FieldSelect = FieldSelect;
 exports.FieldText = FieldText;
+exports.FieldTextArea = FieldTextArea;
 exports.Flex = Flex;
 exports.FlexRow = FlexRow;
 exports.Footer = Footer;
@@ -19743,6 +20060,7 @@ exports.InputGroup = InputGroup;
 exports.Label = Label;
 exports.Layout = Layout;
 exports.LayoutDefault = LayoutDefault;
+exports.LayoutFixed = LayoutFixed;
 exports.LazyLoader = LazyLoader;
 exports.Link = Link;
 exports.List = List;
@@ -19753,6 +20071,7 @@ exports.MagazineSearch = MagazineSearch;
 exports.MagazineSearchCard = MagazineSearchCard;
 exports.MagazineSearchFilters = MagazineSearchFilters;
 exports.MagazineSearchFiltersModal = MagazineSearchFiltersModal;
+exports.Main = Main;
 exports.MarketsAndLanguagesDrawer = MarketsAndLanguagesDrawer;
 exports.Media = Media;
 exports.MediaGallery = MediaGallery;
@@ -19834,6 +20153,7 @@ exports.Tooltip = Tooltip;
 exports.Transition = Transition;
 exports.Typography = Typography;
 exports.VariantsProvider = VariantsProvider;
+exports.accessibility = accessibility;
 exports.autocompleteVariants = autocompleteVariants;
 exports.buttonVariants = buttonVariants;
 exports.checkboxVariants = checkboxVariants;