@qwickapps/react-framework 1.8.1 → 1.9.1

package/dist/index.esm.js

@@ -5767,7 +5767,7 @@ function LogoView({
       setCalculatedBadgePosition(badgePos);
       setSvgWidth(requiredWidth);
     }
-  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts, svgWidth]);
+  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts]);
   // Determine CSS class for variant
   let variantClass = '';
   if (variant === 'high-contrast' || variant === 'monochrome' || variant === 'on-primary') {
@@ -15933,7 +15933,8 @@ function sanitizeHtml(html, options, _recursing) {
   }
 
   let result = '';
-  // Used for hot swapping the result variable with an empty string in order to "capture" the text written to it.
+  // Used for hot swapping the result variable with an empty string
+  // in order to "capture" the text written to it.
   let tempResult = '';
 
   function Frame(tag, attribs) {
@@ -15964,7 +15965,8 @@ function sanitizeHtml(html, options, _recursing) {
   options.parser = Object.assign({}, htmlParserDefaults, options.parser);
 
   const tagAllowed = function (name) {
-    return options.allowedTags === false || (options.allowedTags || []).indexOf(name) > -1;
+    return options.allowedTags === false ||
+      (options.allowedTags || []).indexOf(name) > -1;
   };
 
   // vulnerableTags
@@ -16146,7 +16148,8 @@ function sanitizeHtml(html, options, _recursing) {
       }
 
       const isBeingEscaped = skip && (options.disallowedTagsMode === 'escape' || options.disallowedTagsMode === 'recursiveEscape');
-      const shouldPreserveEscapedAttributes = isBeingEscaped && options.preserveEscapedAttributes;
+      const shouldPreserveEscapedAttributes = isBeingEscaped &&
+        options.preserveEscapedAttributes;
 
       if (shouldPreserveEscapedAttributes) {
         each(attribs, function(value, a) {
@@ -16160,8 +16163,10 @@ function sanitizeHtml(html, options, _recursing) {
             delete frame.attribs[a];
             return;
           }
-          // If the value is empty, check if the attribute is in the allowedEmptyAttributes array.
-          // If it is not in the allowedEmptyAttributes array, and it is a known non-boolean attribute, delete it
+          // If the value is empty, check if the attribute is
+          // in the allowedEmptyAttributes array.
+          // If it is not in the allowedEmptyAttributes array,
+          // and it is a known non-boolean attribute, delete it
           // List taken from https://html.spec.whatwg.org/multipage/indices.html#attributes-3
           if (value === '' && (!options.allowedEmptyAttributes.includes(a)) &&
             (options.nonBooleanAttributes.includes(a) || options.nonBooleanAttributes.includes('*'))) {
@@ -16172,9 +16177,11 @@ function sanitizeHtml(html, options, _recursing) {
           // as necessary if there are specific values defined.
           let passedAllowedAttributesMapCheck = false;
           if (!allowedAttributesMap ||
-            (has(allowedAttributesMap, name) && allowedAttributesMap[name].indexOf(a) !== -1) ||
+            (has(allowedAttributesMap, name) &&
+              allowedAttributesMap[name].indexOf(a) !== -1) ||
             (allowedAttributesMap['*'] && allowedAttributesMap['*'].indexOf(a) !== -1) ||
-            (has(allowedAttributesGlobMap, name) && allowedAttributesGlobMap[name].test(a)) ||
+            (has(allowedAttributesGlobMap, name) &&
+              allowedAttributesGlobMap[name].test(a)) ||
             (allowedAttributesGlobMap['*'] && allowedAttributesGlobMap['*'].test(a))) {
             passedAllowedAttributesMapCheck = true;
           } else if (allowedAttributesMap && allowedAttributesMap[name]) {
@@ -16218,12 +16225,14 @@ function sanitizeHtml(html, options, _recursing) {
                 const parsed = parseUrl(value);
 
                 if (options.allowedScriptHostnames || options.allowedScriptDomains) {
-                  const allowedHostname = (options.allowedScriptHostnames || []).find(function (hostname) {
-                    return hostname === parsed.url.hostname;
-                  });
-                  const allowedDomain = (options.allowedScriptDomains || []).find(function(domain) {
-                    return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
-                  });
+                  const allowedHostname = (options.allowedScriptHostnames || [])
+                    .find(function (hostname) {
+                      return hostname === parsed.url.hostname;
+                    });
+                  const allowedDomain = (options.allowedScriptDomains || [])
+                    .find(function(domain) {
+                      return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
+                    });
                   allowed = allowedHostname || allowedDomain;
                 }
               } catch (e) {
@@ -16247,13 +16256,18 @@ function sanitizeHtml(html, options, _recursing) {
                   allowed = has(options, 'allowIframeRelativeUrls')
                     ? options.allowIframeRelativeUrls
                     : (!options.allowedIframeHostnames && !options.allowedIframeDomains);
-                } else if (options.allowedIframeHostnames || options.allowedIframeDomains) {
-                  const allowedHostname = (options.allowedIframeHostnames || []).find(function (hostname) {
-                    return hostname === parsed.url.hostname;
-                  });
-                  const allowedDomain = (options.allowedIframeDomains || []).find(function(domain) {
-                    return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
-                  });
+                } else if (
+                  options.allowedIframeHostnames ||
+                  options.allowedIframeDomains
+                ) {
+                  const allowedHostname = (options.allowedIframeHostnames || [])
+                    .find(function (hostname) {
+                      return hostname === parsed.url.hostname;
+                    });
+                  const allowedDomain = (options.allowedIframeDomains || [])
+                    .find(function(domain) {
+                      return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
+                    });
                   allowed = allowedHostname || allowedDomain;
                 }
               } catch (e) {
@@ -16307,9 +16321,17 @@ function sanitizeHtml(html, options, _recursing) {
                   return t;
                 });
               if (allowedSpecificClasses && allowedWildcardClasses) {
-                value = filterClasses(value, deepmerge(allowedSpecificClasses, allowedWildcardClasses), allowedClassesGlobs);
+                value = filterClasses(
+                  value,
+                  deepmerge(allowedSpecificClasses, allowedWildcardClasses),
+                  allowedClassesGlobs
+                );
               } else {
-                value = filterClasses(value, allowedSpecificClasses || allowedWildcardClasses, allowedClassesGlobs);
+                value = filterClasses(
+                  value,
+                  allowedSpecificClasses || allowedWildcardClasses,
+                  allowedClassesGlobs
+                );
               }
               if (!value.length) {
                 delete frame.attribs[a];
@@ -16320,7 +16342,10 @@ function sanitizeHtml(html, options, _recursing) {
               if (options.parseStyleAttributes) {
                 try {
                   const abstractSyntaxTree = postcssParse(name + ' {' + value + '}', { map: false });
-                  const filteredAST = filterCss(abstractSyntaxTree, options.allowedStyles);
+                  const filteredAST = filterCss(
+                    abstractSyntaxTree,
+                    options.allowedStyles
+                  );
 
                   value = stringifyStyleAttributes(filteredAST);
 
@@ -16453,7 +16478,8 @@ function sanitizeHtml(html, options, _recursing) {
             tempResult = '';
           }
           // remove the opening tag from the result
-          result = result.substring(0, frame.tagPosition) + result.substring(frame.tagPosition + frame.openingTagLength);
+          result = result.substring(0, frame.tagPosition) +
+            result.substring(frame.tagPosition + frame.openingTagLength);
           return;
         } else if (filterResult) {
           result = result.substring(0, frame.tagPosition);
@@ -16488,6 +16514,16 @@ function sanitizeHtml(html, options, _recursing) {
   parser.write(html);
   parser.end();
 
+  if (options.disallowedTagsMode === 'escape' || options.disallowedTagsMode === 'recursiveEscape') {
+    const lastParsedIndex = parser.endIndex;
+    if (lastParsedIndex != null && lastParsedIndex >= 0 && lastParsedIndex < html.length) {
+      const unparsed = html.substring(lastParsedIndex);
+      result += escapeHtml(unparsed);
+    } else if ((lastParsedIndex == null || lastParsedIndex < 0) && html.length > 0 && result === '') {
+      result = escapeHtml(html);
+    }
+  }
+
   return result;
 
   function initializeState() {
@@ -16598,8 +16634,10 @@ function sanitizeHtml(html, options, _recursing) {
    * Modifies the abstractSyntaxTree object.
    *
    * @param {object} abstractSyntaxTree  - Object representation of CSS attributes.
-   * @property {array[Declaration]} abstractSyntaxTree.nodes[0] - Each object cointains prop and value key, i.e { prop: 'color', value: 'red' }.
-   * @param {object} allowedStyles       - Keys are properties (i.e color), value is list of permitted regex rules (i.e /green/i).
+   * @property {array[Declaration]} abstractSyntaxTree.nodes[0] -
+   * Each object contains prop and value key, i.e { prop: 'color', value: 'red' }.
+   * @param {object} allowedStyles       - Keys are properties (i.e color),
+   * value is list of permitted regex rules (i.e /green/i).
    * @return {object}                    - The modified tree.
    */
   function filterCss(abstractSyntaxTree, allowedStyles) {
@@ -16621,7 +16659,8 @@ function sanitizeHtml(html, options, _recursing) {
     }
 
     if (selectedRule) {
-      abstractSyntaxTree.nodes[0].nodes = astRules.nodes.reduce(filterDeclarations(selectedRule), []);
+      abstractSyntaxTree.nodes[0].nodes = astRules.nodes
+        .reduce(filterDeclarations(selectedRule), []);
     }
 
     return abstractSyntaxTree;
@@ -16632,7 +16671,8 @@ function sanitizeHtml(html, options, _recursing) {
    * values in the inline style attribute format.
    *
    * @param  {AbstractSyntaxTree} filteredAST
-   * @return {string}             - Example: "color:yellow;text-align:center !important;font-family:helvetica;"
+   * @return {string}             - Example:
+   * "color:yellow;text-align:center !important;font-family:helvetica;"
    */
   function stringifyStyleAttributes(filteredAST) {
     return filteredAST.nodes[0].nodes
@@ -16649,21 +16689,25 @@ function sanitizeHtml(html, options, _recursing) {
     * Filters the existing attributes for the given property. Discards any attributes
     * which don't match the allowlist.
     *
-    * @param  {object} selectedRule             - Example: { color: red, font-family: helvetica }
-    * @param  {array} allowedDeclarationsList   - List of declarations which pass the allowlist.
-    * @param  {object} attributeObject          - Object representing the current css property.
-    * @property {string} attributeObject.type   - Typically 'declaration'.
-    * @property {string} attributeObject.prop   - The CSS property, i.e 'color'.
-    * @property {string} attributeObject.value  - The corresponding value to the css property, i.e 'red'.
-    * @return {function}                        - When used in Array.reduce, will return an array of Declaration objects
+    * @param  {object} selectedRule - Example: { color: red, font-family: helvetica }
+    * @param  {array} allowedDeclarationsList - List of declarations
+    * which pass the allowlist.
+    * @param  {object} attributeObject - Object representing the current css property.
+    * @property {string} attributeObject.type - Typically 'declaration'.
+    * @property {string} attributeObject.prop - The CSS property, i.e 'color'.
+    * @property {string} attributeObject.value - The corresponding value to
+    * the css property, i.e 'red'.
+    * @return {function} - When used in Array.reduce,
+    * will return an array of Declaration objects
     */
   function filterDeclarations(selectedRule) {
     return function (allowedDeclarationsList, attributeObject) {
       // If this property is allowlisted...
       if (has(selectedRule, attributeObject.prop)) {
-        const matchesRegex = selectedRule[attributeObject.prop].some(function(regularExpression) {
-          return regularExpression.test(attributeObject.value);
-        });
+        const matchesRegex = selectedRule[attributeObject.prop]
+          .some(function(regularExpression) {
+            return regularExpression.test(attributeObject.value);
+          });
 
         if (matchesRegex) {
           allowedDeclarationsList.push(attributeObject);
@@ -16795,7 +16839,7 @@ sanitizeHtml.simpleTransform = function(newTagName, newAttribs, merge) {
 
     return {
       tagName: newTagName,
-      attribs: attribs
+      attribs
     };
   };
 };
@@ -18116,7 +18160,9 @@ function HtmlView({
         },
         ...styleProps.sx
       },
-      children: components
+      children: Array.isArray(components) ? components.map((child, idx) => /*#__PURE__*/React.isValidElement(child) && child.key == null ? /*#__PURE__*/React.cloneElement(child, {
+        key: `html-child-${idx}`
+      }) : child) : components
     });
   } catch (error) {
     console.error('Error transforming HTML content:', error);
@@ -23318,9 +23364,11 @@ function FormFieldView({
   multiline = false,
   rows,
   placeholder,
+  name,
   startAdornment,
   endAdornment,
   inputProps,
+  error,
   // Exclude ViewProps that conflict with MUI FormControl types
   margin: _margin,
   marginTop: _marginTop,
@@ -23375,6 +23423,7 @@ function FormFieldView({
   };
   return jsxs(FormControl, {
     fullWidth: fullWidth,
+    error: error,
     ...restProps,
     children: [jsx(InputLabel, {
       htmlFor: fieldId,
@@ -23383,6 +23432,7 @@ function FormFieldView({
       children: label
     }), jsx(Input$5, {
       id: fieldId,
+      name: name,
       type: type,
       value: value,
       onChange: handleChange,
@@ -23432,6 +23482,8 @@ function FormSelectView({
   fullWidth = true,
   size = 'small',
   placeholder,
+  name,
+  error,
   // Exclude ViewProps that conflict with MUI FormControl types
   margin: _margin,
   marginTop: _marginTop,
@@ -23475,12 +23527,14 @@ function FormSelectView({
   return jsxs(FormControl, {
     fullWidth: fullWidth,
     size: size,
+    error: error,
     ...restProps,
     children: [label && jsx(InputLabel, {
       sx: labelStyles,
       shrink: true,
       children: label
     }), jsxs(Select, {
+      name: name,
       value: value,
       onChange: handleChange,
       disabled: disabled,
@@ -31455,6 +31509,12 @@ __decorate([Field(), Editor({
   description: 'Placeholder text when no value is selected',
   placeholder: 'Select an option...'
 }), IsOptional(), IsString(), __metadata("design:type", String)], FormSelectModel.prototype, "placeholder", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Name',
+  description: 'Name attribute for the select (for forms and accessibility)',
+  placeholder: 'Enter name...'
+}), IsOptional(), IsString(), __metadata("design:type", String)], FormSelectModel.prototype, "name", void 0);
 FormSelectModel = __decorate([Schema('FormSelect', '1.0.0')], FormSelectModel);
 
 /**
@@ -31541,6 +31601,12 @@ __decorate([Field(), Editor({
   description: 'Placeholder text',
   placeholder: 'Enter text...'
 }), IsOptional(), IsString(), __metadata("design:type", String)], FormFieldModel.prototype, "placeholder", void 0);
+__decorate([Field(), Editor({
+  field_type: FieldType.TEXT,
+  label: 'Name',
+  description: 'Name attribute for the input (for forms and accessibility)',
+  placeholder: 'Enter name...'
+}), IsOptional(), IsString(), __metadata("design:type", String)], FormFieldModel.prototype, "name", void 0);
 FormFieldModel = __decorate([Schema('FormField', '1.0.0')], FormFieldModel);
 
 /**

package/dist/index.js

@@ -5769,7 +5769,7 @@ function LogoView({
       setCalculatedBadgePosition(badgePos);
       setSvgWidth(requiredWidth);
     }
-  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts, svgWidth]);
+  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts]);
   // Determine CSS class for variant
   let variantClass = '';
   if (variant === 'high-contrast' || variant === 'monochrome' || variant === 'on-primary') {
@@ -15935,7 +15935,8 @@ function sanitizeHtml(html, options, _recursing) {
   }
 
   let result = '';
-  // Used for hot swapping the result variable with an empty string in order to "capture" the text written to it.
+  // Used for hot swapping the result variable with an empty string
+  // in order to "capture" the text written to it.
   let tempResult = '';
 
   function Frame(tag, attribs) {
@@ -15966,7 +15967,8 @@ function sanitizeHtml(html, options, _recursing) {
   options.parser = Object.assign({}, htmlParserDefaults, options.parser);
 
   const tagAllowed = function (name) {
-    return options.allowedTags === false || (options.allowedTags || []).indexOf(name) > -1;
+    return options.allowedTags === false ||
+      (options.allowedTags || []).indexOf(name) > -1;
   };
 
   // vulnerableTags
@@ -16148,7 +16150,8 @@ function sanitizeHtml(html, options, _recursing) {
       }
 
       const isBeingEscaped = skip && (options.disallowedTagsMode === 'escape' || options.disallowedTagsMode === 'recursiveEscape');
-      const shouldPreserveEscapedAttributes = isBeingEscaped && options.preserveEscapedAttributes;
+      const shouldPreserveEscapedAttributes = isBeingEscaped &&
+        options.preserveEscapedAttributes;
 
       if (shouldPreserveEscapedAttributes) {
         each(attribs, function(value, a) {
@@ -16162,8 +16165,10 @@ function sanitizeHtml(html, options, _recursing) {
             delete frame.attribs[a];
             return;
           }
-          // If the value is empty, check if the attribute is in the allowedEmptyAttributes array.
-          // If it is not in the allowedEmptyAttributes array, and it is a known non-boolean attribute, delete it
+          // If the value is empty, check if the attribute is
+          // in the allowedEmptyAttributes array.
+          // If it is not in the allowedEmptyAttributes array,
+          // and it is a known non-boolean attribute, delete it
           // List taken from https://html.spec.whatwg.org/multipage/indices.html#attributes-3
           if (value === '' && (!options.allowedEmptyAttributes.includes(a)) &&
             (options.nonBooleanAttributes.includes(a) || options.nonBooleanAttributes.includes('*'))) {
@@ -16174,9 +16179,11 @@ function sanitizeHtml(html, options, _recursing) {
           // as necessary if there are specific values defined.
           let passedAllowedAttributesMapCheck = false;
           if (!allowedAttributesMap ||
-            (has(allowedAttributesMap, name) && allowedAttributesMap[name].indexOf(a) !== -1) ||
+            (has(allowedAttributesMap, name) &&
+              allowedAttributesMap[name].indexOf(a) !== -1) ||
             (allowedAttributesMap['*'] && allowedAttributesMap['*'].indexOf(a) !== -1) ||
-            (has(allowedAttributesGlobMap, name) && allowedAttributesGlobMap[name].test(a)) ||
+            (has(allowedAttributesGlobMap, name) &&
+              allowedAttributesGlobMap[name].test(a)) ||
             (allowedAttributesGlobMap['*'] && allowedAttributesGlobMap['*'].test(a))) {
             passedAllowedAttributesMapCheck = true;
           } else if (allowedAttributesMap && allowedAttributesMap[name]) {
@@ -16220,12 +16227,14 @@ function sanitizeHtml(html, options, _recursing) {
                 const parsed = parseUrl(value);
 
                 if (options.allowedScriptHostnames || options.allowedScriptDomains) {
-                  const allowedHostname = (options.allowedScriptHostnames || []).find(function (hostname) {
-                    return hostname === parsed.url.hostname;
-                  });
-                  const allowedDomain = (options.allowedScriptDomains || []).find(function(domain) {
-                    return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
-                  });
+                  const allowedHostname = (options.allowedScriptHostnames || [])
+                    .find(function (hostname) {
+                      return hostname === parsed.url.hostname;
+                    });
+                  const allowedDomain = (options.allowedScriptDomains || [])
+                    .find(function(domain) {
+                      return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
+                    });
                   allowed = allowedHostname || allowedDomain;
                 }
               } catch (e) {
@@ -16249,13 +16258,18 @@ function sanitizeHtml(html, options, _recursing) {
                   allowed = has(options, 'allowIframeRelativeUrls')
                     ? options.allowIframeRelativeUrls
                     : (!options.allowedIframeHostnames && !options.allowedIframeDomains);
-                } else if (options.allowedIframeHostnames || options.allowedIframeDomains) {
-                  const allowedHostname = (options.allowedIframeHostnames || []).find(function (hostname) {
-                    return hostname === parsed.url.hostname;
-                  });
-                  const allowedDomain = (options.allowedIframeDomains || []).find(function(domain) {
-                    return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
-                  });
+                } else if (
+                  options.allowedIframeHostnames ||
+                  options.allowedIframeDomains
+                ) {
+                  const allowedHostname = (options.allowedIframeHostnames || [])
+                    .find(function (hostname) {
+                      return hostname === parsed.url.hostname;
+                    });
+                  const allowedDomain = (options.allowedIframeDomains || [])
+                    .find(function(domain) {
+                      return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
+                    });
                   allowed = allowedHostname || allowedDomain;
                 }
               } catch (e) {
@@ -16309,9 +16323,17 @@ function sanitizeHtml(html, options, _recursing) {
                   return t;
                 });
               if (allowedSpecificClasses && allowedWildcardClasses) {
-                value = filterClasses(value, deepmerge(allowedSpecificClasses, allowedWildcardClasses), allowedClassesGlobs);
+                value = filterClasses(
+                  value,
+                  deepmerge(allowedSpecificClasses, allowedWildcardClasses),
+                  allowedClassesGlobs
+                );
               } else {
-                value = filterClasses(value, allowedSpecificClasses || allowedWildcardClasses, allowedClassesGlobs);
+                value = filterClasses(
+                  value,
+                  allowedSpecificClasses || allowedWildcardClasses,
+                  allowedClassesGlobs
+                );
               }
               if (!value.length) {
                 delete frame.attribs[a];
@@ -16322,7 +16344,10 @@ function sanitizeHtml(html, options, _recursing) {
               if (options.parseStyleAttributes) {
                 try {
                   const abstractSyntaxTree = postcssParse(name + ' {' + value + '}', { map: false });
-                  const filteredAST = filterCss(abstractSyntaxTree, options.allowedStyles);
+                  const filteredAST = filterCss(
+                    abstractSyntaxTree,
+                    options.allowedStyles
+                  );
 
                   value = stringifyStyleAttributes(filteredAST);
 
@@ -16455,7 +16480,8 @@ function sanitizeHtml(html, options, _recursing) {
             tempResult = '';
           }
           // remove the opening tag from the result
-          result = result.substring(0, frame.tagPosition) + result.substring(frame.tagPosition + frame.openingTagLength);
+          result = result.substring(0, frame.tagPosition) +
+            result.substring(frame.tagPosition + frame.openingTagLength);
           return;
         } else if (filterResult) {
           result = result.substring(0, frame.tagPosition);
@@ -16490,6 +16516,16 @@ function sanitizeHtml(html, options, _recursing) {
   parser.write(html);
   parser.end();
 
+  if (options.disallowedTagsMode === 'escape' || options.disallowedTagsMode === 'recursiveEscape') {
+    const lastParsedIndex = parser.endIndex;
+    if (lastParsedIndex != null && lastParsedIndex >= 0 && lastParsedIndex < html.length) {
+      const unparsed = html.substring(lastParsedIndex);
+      result += escapeHtml(unparsed);
+    } else if ((lastParsedIndex == null || lastParsedIndex < 0) && html.length > 0 && result === '') {
+      result = escapeHtml(html);
+    }
+  }
+
   return result;
 
   function initializeState() {
@@ -16600,8 +16636,10 @@ function sanitizeHtml(html, options, _recursing) {
    * Modifies the abstractSyntaxTree object.
    *
    * @param {object} abstractSyntaxTree  - Object representation of CSS attributes.
-   * @property {array[Declaration]} abstractSyntaxTree.nodes[0] - Each object cointains prop and value key, i.e { prop: 'color', value: 'red' }.
-   * @param {object} allowedStyles       - Keys are properties (i.e color), value is list of permitted regex rules (i.e /green/i).
+   * @property {array[Declaration]} abstractSyntaxTree.nodes[0] -
+   * Each object contains prop and value key, i.e { prop: 'color', value: 'red' }.
+   * @param {object} allowedStyles       - Keys are properties (i.e color),
+   * value is list of permitted regex rules (i.e /green/i).
    * @return {object}                    - The modified tree.
    */
   function filterCss(abstractSyntaxTree, allowedStyles) {
@@ -16623,7 +16661,8 @@ function sanitizeHtml(html, options, _recursing) {
     }
 
     if (selectedRule) {
-      abstractSyntaxTree.nodes[0].nodes = astRules.nodes.reduce(filterDeclarations(selectedRule), []);
+      abstractSyntaxTree.nodes[0].nodes = astRules.nodes
+        .reduce(filterDeclarations(selectedRule), []);
     }
 
     return abstractSyntaxTree;
@@ -16634,7 +16673,8 @@ function sanitizeHtml(html, options, _recursing) {
    * values in the inline style attribute format.
    *
    * @param  {AbstractSyntaxTree} filteredAST
-   * @return {string}             - Example: "color:yellow;text-align:center !important;font-family:helvetica;"
+   * @return {string}             - Example:
+   * "color:yellow;text-align:center !important;font-family:helvetica;"
    */
   function stringifyStyleAttributes(filteredAST) {
     return filteredAST.nodes[0].nodes
@@ -16651,21 +16691,25 @@ function sanitizeHtml(html, options, _recursing) {
     * Filters the existing attributes for the given property. Discards any attributes
     * which don't match the allowlist.
     *
-    * @param  {object} selectedRule             - Example: { color: red, font-family: helvetica }
-    * @param  {array} allowedDeclarationsList   - List of declarations which pass the allowlist.
-    * @param  {object} attributeObject          - Object representing the current css property.
-    * @property {string} attributeObject.type   - Typically 'declaration'.
-    * @property {string} attributeObject.prop   - The CSS property, i.e 'color'.
-    * @property {string} attributeObject.value  - The corresponding value to the css property, i.e 'red'.
-    * @return {function}                        - When used in Array.reduce, will return an array of Declaration objects
+    * @param  {object} selectedRule - Example: { color: red, font-family: helvetica }
+    * @param  {array} allowedDeclarationsList - List of declarations
+    * which pass the allowlist.
+    * @param  {object} attributeObject - Object representing the current css property.
+    * @property {string} attributeObject.type - Typically 'declaration'.
+    * @property {string} attributeObject.prop - The CSS property, i.e 'color'.
+    * @property {string} attributeObject.value - The corresponding value to
+    * the css property, i.e 'red'.
+    * @return {function} - When used in Array.reduce,
+    * will return an array of Declaration objects
     */
   function filterDeclarations(selectedRule) {
     return function (allowedDeclarationsList, attributeObject) {
       // If this property is allowlisted...
       if (has(selectedRule, attributeObject.prop)) {
-        const matchesRegex = selectedRule[attributeObject.prop].some(function(regularExpression) {
-          return regularExpression.test(attributeObject.value);
-        });
+        const matchesRegex = selectedRule[attributeObject.prop]
+          .some(function(regularExpression) {
+            return regularExpression.test(attributeObject.value);
+          });
 
         if (matchesRegex) {
           allowedDeclarationsList.push(attributeObject);
@@ -16797,7 +16841,7 @@ sanitizeHtml.simpleTransform = function(newTagName, newAttribs, merge) {
 
     return {
       tagName: newTagName,
-      attribs: attribs
+      attribs
     };
   };
 };
@@ -18118,7 +18162,9 @@ function HtmlView({
         },
         ...styleProps.sx
       },
-      children: components
+      children: Array.isArray(components) ? components.map((child, idx) => /*#__PURE__*/React.isValidElement(child) && child.key == null ? /*#__PURE__*/React.cloneElement(child, {
+        key: `html-child-${idx}`
+      }) : child) : components
     });
   } catch (error) {
     console.error('Error transforming HTML content:', error);
@@ -23320,9 +23366,11 @@ function FormFieldView({
   multiline = false,
   rows,
   placeholder,
+  name,
   startAdornment,
   endAdornment,
   inputProps,
+  error,
   // Exclude ViewProps that conflict with MUI FormControl types
   margin: _margin,
   marginTop: _marginTop,
@@ -23377,6 +23425,7 @@ function FormFieldView({
   };
   return jsxRuntime.jsxs(material.FormControl, {
     fullWidth: fullWidth,
+    error: error,
     ...restProps,
     children: [jsxRuntime.jsx(material.InputLabel, {
       htmlFor: fieldId,
@@ -23385,6 +23434,7 @@ function FormFieldView({
       children: label
     }), jsxRuntime.jsx(material.Input, {
       id: fieldId,
+      name: name,
       type: type,
       value: value,
       onChange: handleChange,
@@ -23434,6 +23484,8 @@ function FormSelectView({
   fullWidth = true,
   size = 'small',
   placeholder,
+  name,
+  error,
   // Exclude ViewProps that conflict with MUI FormControl types
   margin: _margin,
   marginTop: _marginTop,
@@ -23477,12 +23529,14 @@ function FormSelectView({
   return jsxRuntime.jsxs(material.FormControl, {
     fullWidth: fullWidth,
     size: size,
+    error: error,
     ...restProps,
     children: [label && jsxRuntime.jsx(material.InputLabel, {
       sx: labelStyles,
       shrink: true,
       children: label
     }), jsxRuntime.jsxs(material.Select, {
+      name: name,
       value: value,
       onChange: handleChange,
       disabled: disabled,
@@ -31457,6 +31511,12 @@ __decorate([schema.Field(), schema.Editor({
   description: 'Placeholder text when no value is selected',
   placeholder: 'Select an option...'
 }), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormSelectModel.prototype, "placeholder", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Name',
+  description: 'Name attribute for the select (for forms and accessibility)',
+  placeholder: 'Enter name...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormSelectModel.prototype, "name", void 0);
 exports.FormSelectModel = __decorate([schema.Schema('FormSelect', '1.0.0')], exports.FormSelectModel);
 
 /**
@@ -31543,6 +31603,12 @@ __decorate([schema.Field(), schema.Editor({
   description: 'Placeholder text',
   placeholder: 'Enter text...'
 }), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormFieldModel.prototype, "placeholder", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Name',
+  description: 'Name attribute for the input (for forms and accessibility)',
+  placeholder: 'Enter name...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormFieldModel.prototype, "name", void 0);
 exports.FormFieldModel = __decorate([schema.Schema('FormField', '1.0.0')], exports.FormFieldModel);
 
 /**