@zendeskgarden/react-forms 9.0.0 → 9.1.0

package/LICENSE.md

@@ -0,0 +1,176 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

package/dist/esm/elements/Checkbox.js

@@ -58,7 +58,8 @@ const Checkbox = React__default.forwardRef((_ref, ref) => {
   let {
     indeterminate,
     children,
-    ...props
+    isCompact,
+    ...other
   } = _ref;
   const fieldsetContext = useFieldsetContext();
   const fieldContext = useFieldContext();
@@ -77,9 +78,9 @@ const Checkbox = React__default.forwardRef((_ref, ref) => {
     });
   };
   let combinedProps = {
+    $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact,
     ref: combinedRef,
-    ...props,
-    ...fieldsetContext
+    ...other
   };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);

package/dist/esm/elements/FileUpload.js

@@ -54,13 +54,17 @@ import '../styled/tiles/StyledTileLabel.js';
 const FileUpload = React__default.forwardRef((_ref, ref) => {
   let {
     disabled,
-    ...props
+    isCompact,
+    isDragging,
+    ...other
   } = _ref;
   return (
     React__default.createElement(StyledFileUpload, Object.assign({
       ref: ref,
-      "aria-disabled": disabled
-    }, props, {
+      "aria-disabled": disabled,
+      $isCompact: isCompact,
+      $isDragging: isDragging
+    }, other, {
       role: "button"
     }))
   );

package/dist/esm/elements/Input.js

@@ -58,29 +58,30 @@ import '../styled/tiles/StyledTileLabel.js';
 const Input = React__default.forwardRef((_ref, ref) => {
   let {
     onSelect,
-    ...props
+    isBare,
+    isCompact,
+    focusInset,
+    validation,
+    ...other
   } = _ref;
   const fieldContext = useFieldContext();
   const inputGroupContext = useInputGroupContext();
-  const onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, event => {
-    event.currentTarget.select();
-  }) : onSelect;
-  let combinedProps = {
-    ref,
-    onSelect: onSelectHandler,
-    ...props
-  };
-  if (inputGroupContext) {
-    combinedProps = {
-      ...combinedProps,
-      isCompact: inputGroupContext.isCompact || combinedProps.isCompact,
-      focusInset: props.focusInset === undefined ? true : props.focusInset
-    };
-  }
+  let combinedProps = other;
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
-  return React__default.createElement(StyledTextInput, combinedProps);
+  const onSelectHandler = other.readOnly ? composeEventHandlers(onSelect, event => {
+    event.currentTarget.select();
+  }) : onSelect;
+  return React__default.createElement(StyledTextInput, Object.assign({
+    ref: ref,
+    onSelect: onSelectHandler
+  }, combinedProps, {
+    $isBare: isBare,
+    $isCompact: inputGroupContext ? inputGroupContext.isCompact : isCompact,
+    $focusInset: inputGroupContext && focusInset === undefined ? true : focusInset,
+    $validation: validation
+  }));
 });
 Input.propTypes = {
   isCompact: PropTypes.bool,

package/dist/esm/elements/Radio.js

@@ -57,14 +57,15 @@ import useFieldsetContext from '../utils/useFieldsetContext.js';
 const Radio = React__default.forwardRef((_ref, ref) => {
   let {
     children,
-    ...props
+    isCompact,
+    ...other
   } = _ref;
   const fieldsetContext = useFieldsetContext();
   const fieldContext = useFieldContext();
   let combinedProps = {
+    $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact,
     ref,
-    ...props,
-    ...fieldsetContext
+    ...other
   };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);

package/dist/esm/elements/Range.js

@@ -59,7 +59,7 @@ const Range = React__default.forwardRef((_ref, ref) => {
     min,
     max,
     step,
-    ...props
+    ...other
   } = _ref;
   const [backgroundSize, setBackgroundSize] = useState('0');
   const rangeRef = useRef();
@@ -78,18 +78,18 @@ const Range = React__default.forwardRef((_ref, ref) => {
   [max, min, step]);
   useEffect(() => {
     updateBackgroundWidthFromInput(rangeRef.current);
-  }, [rangeRef, updateBackgroundWidthFromInput, props.value]);
-  const onChange = hasLowerTrack ? composeEventHandlers(props.onChange, event => {
+  }, [rangeRef, updateBackgroundWidthFromInput, other.value]);
+  const onChange = hasLowerTrack ? composeEventHandlers(other.onChange, event => {
     updateBackgroundWidthFromInput(event.target);
-  }) : props.onChange;
+  }) : other.onChange;
   let combinedProps = {
-    ref: mergeRefs([rangeRef, ref]),
-    hasLowerTrack,
-    min,
+    $backgroundSize: backgroundSize,
+    $hasLowerTrack: hasLowerTrack,
     max,
+    min,
+    ref: mergeRefs([rangeRef, ref]),
     step,
-    backgroundSize,
-    ...props,
+    ...other,
     onChange
   };
   if (fieldContext) {

package/dist/esm/elements/Select.js

@@ -66,11 +66,11 @@ const Select = React__default.forwardRef((_ref, ref) => {
   } = _ref;
   const fieldContext = useFieldContext();
   let combinedProps = {
+    $focusInset: focusInset,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $validation: validation,
     disabled,
-    isBare,
-    isCompact,
-    validation,
-    focusInset,
     ref,
     ...props
   };
@@ -78,11 +78,11 @@ const Select = React__default.forwardRef((_ref, ref) => {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
   return React__default.createElement(StyledSelectWrapper, {
-    isCompact: isCompact,
-    isBare: isBare,
-    isDisabled: disabled,
-    validation: validation,
-    focusInset: focusInset
+    $isCompact: isCompact,
+    $isBare: isBare,
+    $isDisabled: disabled,
+    $validation: validation,
+    $focusInset: focusInset
   }, React__default.createElement(StyledSelect, combinedProps), !isBare && React__default.createElement(FauxInput.EndIcon, {
     isDisabled: disabled
   }, React__default.createElement(SvgChevronDownStroke, null)));

package/dist/esm/elements/Textarea.js

@@ -60,12 +60,17 @@ const parseStyleValue = value => {
 };
 const Textarea = React__default.forwardRef((_ref, ref) => {
   let {
+    isCompact,
+    isBare,
+    focusInset,
+    isResizable,
     minRows,
     maxRows,
     style,
+    validation,
     onChange,
     onSelect,
-    ...props
+    ...other
   } = _ref;
   const fieldContext = useFieldContext();
   const textAreaRef = useRef();
@@ -74,8 +79,8 @@ const Textarea = React__default.forwardRef((_ref, ref) => {
     overflow: false,
     height: 0
   });
-  const isControlled = props.value !== null && props.value !== undefined;
-  const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable;
+  const isControlled = other.value !== null && other.value !== undefined;
+  const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !isResizable;
   const calculateHeight = useCallback(() => {
     if (!isAutoResizable) {
       return;
@@ -127,33 +132,38 @@ const Textarea = React__default.forwardRef((_ref, ref) => {
     computedStyle.height = state.height;
     computedStyle.overflow = state.overflow ? 'hidden' : undefined;
   }
-  const onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, event => {
+  const onSelectHandler = other.readOnly ? composeEventHandlers(onSelect, event => {
     event.currentTarget.select();
   }) : onSelect;
   let combinedProps = {
-    ref: mergeRefs([textAreaRef, ref]),
-    rows: minRows,
+    $focusInset: focusInset,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isResizable: isResizable,
+    $validation: validation,
     onChange: onChangeHandler,
     onSelect: onSelectHandler,
+    ref: mergeRefs([textAreaRef, ref]),
+    rows: minRows,
     style: {
       ...computedStyle,
       ...style
     },
-    ...props
+    ...other
   };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTextarea, combinedProps), !!isAutoResizable && React__default.createElement(StyledTextarea, {
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isHidden: true,
     "aria-hidden": true,
+    className: other.className,
     readOnly: true,
-    isHidden: true,
-    className: props.className,
     ref: shadowTextAreaRef,
-    tabIndex: -1,
-    isBare: props.isBare,
-    isCompact: props.isCompact,
-    style: style
+    style: style,
+    tabIndex: -1
   }));
 });
 Textarea.propTypes = {

package/dist/esm/elements/Toggle.js

@@ -57,14 +57,15 @@ import useFieldsetContext from '../utils/useFieldsetContext.js';
 const Toggle = React__default.forwardRef((_ref, ref) => {
   let {
     children,
-    ...props
+    isCompact,
+    ...other
   } = _ref;
   const fieldsetContext = useFieldsetContext();
   const fieldContext = useFieldContext();
   let combinedProps = {
+    $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact,
     ref,
-    ...props,
-    ...fieldsetContext
+    ...other
   };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);

package/dist/esm/elements/common/Fieldset.js

@@ -53,14 +53,19 @@ import '../../styled/tiles/StyledTileInput.js';
 import '../../styled/tiles/StyledTileLabel.js';
 import { FieldsetContext } from '../../utils/useFieldsetContext.js';
 
-const FieldsetComponent = forwardRef((props, ref) => {
+const FieldsetComponent = forwardRef((_ref, ref) => {
+  let {
+    isCompact,
+    ...other
+  } = _ref;
   const fieldsetContext = useMemo(() => ({
-    isCompact: props.isCompact
-  }), [props.isCompact]);
+    isCompact
+  }), [isCompact]);
   return React__default.createElement(FieldsetContext.Provider, {
     value: fieldsetContext
-  }, React__default.createElement(StyledFieldset, Object.assign({}, props, {
-    ref: ref
+  }, React__default.createElement(StyledFieldset, Object.assign({}, other, {
+    ref: ref,
+    $isCompact: isCompact
   })));
 });
 FieldsetComponent.displayName = 'Fieldset';

package/dist/esm/elements/common/Label.js

@@ -55,11 +55,17 @@ import '../../styled/tiles/StyledTileIcon.js';
 import '../../styled/tiles/StyledTileInput.js';
 import '../../styled/tiles/StyledTileLabel.js';
 
-const Label = React__default.forwardRef((props, ref) => {
+const Label = React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    isRegular,
+    ...other
+  } = _ref;
   const fieldContext = useFieldContext();
   const fieldsetContext = useFieldsetContext();
   const type = useInputContext();
-  let combinedProps = props;
+  const $isRegular = fieldsetContext && isRegular === undefined ? true : isRegular;
+  let combinedProps = other;
   if (fieldContext) {
     combinedProps = fieldContext.getLabelProps(combinedProps);
     if (type === undefined) {
@@ -67,33 +73,26 @@ const Label = React__default.forwardRef((props, ref) => {
         setIsLabelActive,
         setIsLabelHovered
       } = fieldContext;
-      combinedProps = {
-        ...combinedProps,
-        onMouseUp: composeEventHandlers(props.onMouseUp, () => {
-          setIsLabelActive(false);
-        }),
-        onMouseDown: composeEventHandlers(props.onMouseDown, () => {
-          setIsLabelActive(true);
-        }),
-        onMouseEnter: composeEventHandlers(props.onMouseEnter, () => {
-          setIsLabelHovered(true);
-        }),
-        onMouseLeave: composeEventHandlers(props.onMouseLeave, () => {
-          setIsLabelHovered(false);
-        })
-      };
+      combinedProps.onMouseUp = composeEventHandlers(other.onMouseUp, () => {
+        setIsLabelActive(false);
+      });
+      combinedProps.onMouseDown = composeEventHandlers(other.onMouseDown, () => {
+        setIsLabelActive(true);
+      });
+      combinedProps.onMouseEnter = composeEventHandlers(other.onMouseEnter, () => {
+        setIsLabelHovered(true);
+      });
+      combinedProps.onMouseLeave = composeEventHandlers(other.onMouseLeave, () => {
+        setIsLabelHovered(false);
+      });
     }
   }
-  if (fieldsetContext) {
-    combinedProps = {
-      ...combinedProps,
-      isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular
-    };
-  }
   if (type === 'radio') {
     return React__default.createElement(StyledRadioLabel, Object.assign({
       ref: ref
-    }, combinedProps), React__default.createElement(StyledRadioSvg, null), props.children);
+    }, combinedProps, {
+      $isRegular: $isRegular
+    }), React__default.createElement(StyledRadioSvg, null), children);
   } else if (type === 'checkbox') {
     const onLabelSelect = e => {
       const isFirefox = navigator?.userAgent.toLowerCase().indexOf('firefox') > -1;
@@ -110,21 +109,24 @@ const Label = React__default.forwardRef((props, ref) => {
         }
       }
     };
-    combinedProps = {
-      ...combinedProps,
-      onClick: composeEventHandlers(combinedProps.onClick, onLabelSelect)
-    };
+    combinedProps.onClick = composeEventHandlers(combinedProps.onClick, onLabelSelect);
     return React__default.createElement(StyledCheckLabel, Object.assign({
       ref: ref
-    }, combinedProps), React__default.createElement(StyledCheckSvg, null), React__default.createElement(StyledDashSvg, null), props.children);
+    }, combinedProps, {
+      $isRegular: $isRegular
+    }), React__default.createElement(StyledCheckSvg, null), React__default.createElement(StyledDashSvg, null), children);
   } else if (type === 'toggle') {
     return React__default.createElement(StyledToggleLabel, Object.assign({
       ref: ref
-    }, combinedProps), React__default.createElement(StyledToggleSvg, null), props.children);
+    }, combinedProps, {
+      $isRegular: $isRegular
+    }), React__default.createElement(StyledToggleSvg, null), children);
   }
   return React__default.createElement(StyledLabel, Object.assign({
     ref: ref
-  }, combinedProps));
+  }, combinedProps, {
+    $isRegular: $isRegular
+  }), children);
 });
 Label.displayName = 'Field.Label';
 Label.propTypes = {

package/dist/esm/elements/common/Legend.js

@@ -49,11 +49,9 @@ import '../../styled/tiles/StyledTileDescription.js';
 import '../../styled/tiles/StyledTileIcon.js';
 import '../../styled/tiles/StyledTileInput.js';
 import '../../styled/tiles/StyledTileLabel.js';
-import useFieldsetContext from '../../utils/useFieldsetContext.js';
 
 const LegendComponent = forwardRef((props, ref) => {
-  const fieldsetContext = useFieldsetContext();
-  return React__default.createElement(StyledLegend, Object.assign({}, props, fieldsetContext, {
+  return React__default.createElement(StyledLegend, Object.assign({}, props, {
     ref: ref
   }));
 });

package/dist/esm/elements/common/Message.js

@@ -16,7 +16,7 @@ import '../../styled/common/StyledLegend.js';
 import '../../styled/common/StyledHint.js';
 import '../../styled/common/StyledLabel.js';
 import { StyledMessage } from '../../styled/common/StyledMessage.js';
-import { StyledMessageIcon } from '../../styled/common/StyledMessageIcon.js';
+import '../../styled/common/StyledMessageIcon.js';
 import '../../styled/text/StyledTextInput.js';
 import '../../styled/text/StyledTextarea.js';
 import '../../styled/text/StyledTextFauxInput.js';
@@ -54,13 +54,14 @@ import '../../styled/tiles/StyledTileDescription.js';
 import '../../styled/tiles/StyledTileIcon.js';
 import '../../styled/tiles/StyledTileInput.js';
 import '../../styled/tiles/StyledTileLabel.js';
+import { MessageIcon } from './MessageIcon.js';
 
 const Message = React__default.forwardRef((_ref, ref) => {
   let {
     validation,
     validationLabel,
     children,
-    ...props
+    ...other
   } = _ref;
   const {
     hasMessage,
@@ -89,9 +90,9 @@ const Message = React__default.forwardRef((_ref, ref) => {
     MessageComponent = StyledMessage;
   }
   let combinedProps = {
-    validation,
+    $validation: validation,
     validationLabel,
-    ...props
+    ...other
   };
   if (getMessageProps) {
     combinedProps = getMessageProps(combinedProps);
@@ -99,7 +100,7 @@ const Message = React__default.forwardRef((_ref, ref) => {
   const ariaLabel = useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
   return React__default.createElement(MessageComponent, Object.assign({
     ref: ref
-  }, combinedProps), !!validation && React__default.createElement(StyledMessageIcon, {
+  }, combinedProps), !!validation && React__default.createElement(MessageIcon, {
     validation: validation,
     "aria-label": ariaLabel
   }), children);