@websolutespa/bom-mixer-ui 1.2.2 → 1.3.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;
@@ -1507,7 +1515,8 @@ const Breakpoint = props => {
       exit: {
         opacity: 0,
         y: '100%'
-      }
+      },
+      "aria-hidden": "true"
     }, props, {
       children: [breakpoint.key, " (", breakpoint.min, "/", breakpoint.max < 50000 ? breakpoint.max : '∞', ")"]
     }), "breakpoint")
@@ -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);
@@ -3986,19 +4043,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 +4063,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 +4211,13 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
       item,
       onClick,
       className,
+      aspectRatio,
+      eager,
+      alt,
+      title,
       as = 'div'
     } = _a,
-    props = __rest(_a, ["children", "item", "onClick", "className", "as"]);
+    props = __rest(_a, ["children", "item", "onClick", "className", "aspectRatio", "eager", "alt", "title", "as"]);
   const {
     id,
     open
@@ -4166,9 +4226,11 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
     'media--gallery': id
   });
   const mediaChildren = item && !children ? getMediaItems(item, {
-    aspectRatio: props.aspectRatio,
-    eager: props.eager,
+    aspectRatio,
+    eager,
     galleryId: id,
+    alt,
+    title,
     open
   }) : children;
   return jsxRuntime.jsx(StyledMedia$1, Object.assign({
@@ -4199,7 +4261,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 +4301,6 @@ function getMediaItems(itemOrItems, options) {
       type: "video/mp4"
     })
   }), m) : jsxRuntime.jsx(MediaImage, Object.assign({}, media, {
-    alt: media.alt,
     draggable: false
   }, getMediaItemProps(media)), m));
 }
@@ -6657,8 +6723,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 +6865,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 +6913,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 +6935,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 +6960,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 +7048,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 +7286,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 +7299,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 +7477,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 +7516,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 +7551,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 +7689,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 +7731,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, transparent);
+        }
+      }
+    }
   }
 `;
 const fieldVariants = {
@@ -7671,11 +7770,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 +7789,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, transparent);
+
+  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 +7836,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 +7972,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 +8023,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 +8058,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 +8089,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 +8103,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 +8146,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 +9116,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 +9165,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 +9183,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 +9221,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.5em 0);
+  padding: var(--form-error-padding, 0.2em 0.4em);
+  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, transparent);
 `;
 const fieldErrorVariants = {
   default: CssFieldErrorDefault
@@ -9144,9 +9261,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 +9290,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 +9300,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 +9325,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 +9360,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 +9374,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 +9397,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 +9421,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 +9445,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 +9478,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 +9500,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 +9521,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 +9551,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 +9577,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 +9601,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 +9625,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 +9653,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 +9731,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 +9765,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));
       }
     })]
   });
@@ -14276,6 +14500,7 @@ const Footer = props => {
                 children: jsxRuntime.jsx(Button, {
                   as: "a",
                   target: "_blank",
+                  title: "Digital Marketing",
                   children: jsxRuntime.jsx(bomMixerIcons.IconWebsolute, {})
                 })
               })]
@@ -15143,7 +15368,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 +16029,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 +16136,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 +16180,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 +17183,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,
@@ -19025,7 +19250,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 +19314,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 +19360,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 +19381,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 +19411,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 +19535,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 +19574,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 +19640,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 +19673,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 +19726,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 +19785,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 +19817,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))
   });
 };
 
@@ -19723,6 +19953,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;
@@ -19834,6 +20065,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;