@zendeskgarden/react-forms 9.0.0-next.9 → 9.1.0

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/MediaInput.js

@@ -131,11 +131,11 @@ const MediaInput = React__default.forwardRef((_ref, ref) => {
     mediaLayout: true
   }, otherWrapperProps, {
     ref: wrapperRef
-  }), start && React__default.createElement(FauxInput.StartIcon, {
+  }), !!start && React__default.createElement(FauxInput.StartIcon, {
     isDisabled: disabled,
     isFocused: isFocused,
     isHovered: isHovered || isLabelHovered
-  }, start), React__default.createElement(StyledTextMediaInput, combinedProps), end && React__default.createElement(FauxInput.EndIcon, {
+  }, start), React__default.createElement(StyledTextMediaInput, combinedProps), !!end && React__default.createElement(FauxInput.EndIcon, {
     isDisabled: disabled,
     isFocused: isFocused,
     isHovered: isHovered || isLabelHovered

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,10 +78,11 @@ const Select = React__default.forwardRef((_ref, ref) => {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
   return React__default.createElement(StyledSelectWrapper, {
-    isCompact: isCompact,
-    isBare: isBare,
-    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, {
+  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/Hint.js

@@ -87,6 +87,6 @@ const Hint = React__default.forwardRef((props, ref) => {
     ref: ref
   }, combinedProps));
 });
-Hint.displayName = 'Hint';
+Hint.displayName = 'Field.Hint';
 
 export { Hint };

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,36 +73,29 @@ 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;
+      const isFirefox = navigator?.userAgent.toLowerCase().indexOf('firefox') > -1;
       if (fieldContext && isFirefox && e.target instanceof Element) {
         const inputId = e.target.getAttribute('for');
         if (!inputId) return;
@@ -110,23 +109,26 @@ 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 = 'Label';
+Label.displayName = 'Field.Label';
 Label.propTypes = {
   isRegular: PropTypes.bool
 };

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,12 +100,12 @@ 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);
 });
-Message.displayName = 'Message';
+Message.displayName = 'Field.Message';
 Message.propTypes = {
   validation: PropTypes.oneOf(VALIDATION),
   validationLabel: PropTypes.string

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

@@ -0,0 +1,78 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import SvgAlertErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
+import SvgAlertWarningStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
+import SvgCheckCircleStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js';
+import '../../styled/common/StyledField.js';
+import '../../styled/common/StyledFieldset.js';
+import '../../styled/common/StyledLegend.js';
+import '../../styled/common/StyledHint.js';
+import '../../styled/common/StyledLabel.js';
+import '../../styled/common/StyledMessage.js';
+import { StyledMessageIcon } from '../../styled/common/StyledMessageIcon.js';
+import '../../styled/text/StyledTextInput.js';
+import '../../styled/text/StyledTextarea.js';
+import '../../styled/text/StyledTextFauxInput.js';
+import '../../styled/text/StyledTextMediaInput.js';
+import '../../styled/text/StyledTextMediaFigure.js';
+import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/checkbox/StyledCheckLabel.js';
+import '../../styled/checkbox/StyledCheckHint.js';
+import '../../styled/checkbox/StyledCheckInput.js';
+import '../../styled/checkbox/StyledCheckMessage.js';
+import '../../styled/checkbox/StyledCheckSvg.js';
+import '../../styled/checkbox/StyledDashSvg.js';
+import '../../styled/file-upload/StyledFileUpload.js';
+import '../../styled/file-list/StyledFile.js';
+import '../../styled/file-list/StyledFileClose.js';
+import '../../styled/file-list/StyledFileDelete.js';
+import '../../styled/file-list/StyledFileIcon.js';
+import '../../styled/file-list/StyledFileList.js';
+import '../../styled/file-list/StyledFileListItem.js';
+import '../../styled/radio/StyledRadioLabel.js';
+import '../../styled/radio/StyledRadioHint.js';
+import '../../styled/radio/StyledRadioInput.js';
+import '../../styled/radio/StyledRadioMessage.js';
+import '../../styled/radio/StyledRadioSvg.js';
+import '../../styled/toggle/StyledToggleLabel.js';
+import '../../styled/toggle/StyledToggleHint.js';
+import '../../styled/toggle/StyledToggleInput.js';
+import '../../styled/toggle/StyledToggleMessage.js';
+import '../../styled/toggle/StyledToggleSvg.js';
+import '../../styled/select/StyledSelect.js';
+import '../../styled/select/StyledSelectWrapper.js';
+import '../../styled/range/StyledRangeInput.js';
+import '../../styled/tiles/StyledTile.js';
+import '../../styled/tiles/StyledTileDescription.js';
+import '../../styled/tiles/StyledTileIcon.js';
+import '../../styled/tiles/StyledTileInput.js';
+import '../../styled/tiles/StyledTileLabel.js';
+import { VALIDATION } from '../../types/index.js';
+
+const MessageIcon = _ref => {
+  let {
+    validation,
+    children,
+    ...props
+  } = _ref;
+  return  React__default.createElement(StyledMessageIcon, Object.assign({
+    "aria-hidden": null,
+    role: "img"
+  }, props), validation ? {
+    error: React__default.createElement(SvgAlertErrorStroke, null),
+    success: React__default.createElement(SvgCheckCircleStroke, null),
+    warning: React__default.createElement(SvgAlertWarningStroke, null)
+  }[validation] : children);
+};
+MessageIcon.displayName = 'Field.MessageIcon';
+MessageIcon.propTypes = {
+  validation: PropTypes.oneOf(VALIDATION)
+};
+
+export { MessageIcon };

package/dist/esm/elements/faux-input/FauxInput.js

@@ -57,12 +57,18 @@ import { EndIcon } from './components/EndIcon.js';
 
 const FauxInputComponent = forwardRef((_ref, ref) => {
   let {
-    onFocus,
-    onBlur,
     disabled,
-    readOnly,
+    focusInset,
+    isBare,
+    isCompact,
     isFocused: controlledIsFocused,
-    ...props
+    isHovered,
+    onBlur,
+    onFocus,
+    readOnly,
+    validation,
+    mediaLayout,
+    ...other
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const onFocusHandler = composeEventHandlers(onFocus, () => {
@@ -74,11 +80,17 @@ const FauxInputComponent = forwardRef((_ref, ref) => {
   return React__default.createElement(StyledTextFauxInput, Object.assign({
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
-    isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
-    isReadOnly: readOnly,
-    isDisabled: disabled,
+    $focusInset: focusInset,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isDisabled: disabled,
+    $isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
+    $isHovered: isHovered,
+    $isReadOnly: readOnly,
+    $mediaLayout: mediaLayout,
+    $validation: validation,
     tabIndex: disabled ? undefined : 0
-  }, props, {
+  }, other, {
     ref: ref
   }));
 });

package/dist/esm/elements/faux-input/components/EndIcon.js

@@ -53,12 +53,16 @@ import '../../../styled/tiles/StyledTileLabel.js';
 const EndIconComponent = _ref => {
   let {
     isDisabled,
+    isFocused,
+    isHovered,
     isRotated,
     ...props
   } = _ref;
   return React__default.createElement(StyledTextMediaFigure, Object.assign({
     $position: "end",
     $isDisabled: isDisabled,
+    $isFocused: isFocused,
+    $isHovered: isHovered,
     $isRotated: isRotated
   }, props));
 };

package/dist/esm/elements/faux-input/components/StartIcon.js

@@ -53,12 +53,16 @@ import '../../../styled/tiles/StyledTileLabel.js';
 const StartIconComponent = _ref => {
   let {
     isDisabled,
+    isFocused,
+    isHovered,
     isRotated,
     ...props
   } = _ref;
   return React__default.createElement(StyledTextMediaFigure, Object.assign({
     $position: "start",
     $isDisabled: isDisabled,
+    $isFocused: isFocused,
+    $isHovered: isHovered,
     $isRotated: isRotated
   }, props));
 };