@entur/form 5.4.15 → 5.4.17

package/dist/form.esm.js

@@ -8,76 +8,62 @@ import { SubLabel, Paragraph, Label } from '@entur/typography';
 import { colors } from '@entur/tokens';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
 var _excluded$f = ["children", "hideIcon", "variant", "className"];
-
 var AlertIcon = function AlertIcon(_ref) {
   var variant = _ref.variant;
   var iconClass = "eds-feedback-text__icon eds-feedback-text__icon--" + variant;
-
   switch (variant) {
     case 'success':
       return React__default.createElement(ValidationCheckIcon, {
         className: iconClass
       });
-
     case 'error':
       return React__default.createElement(ValidationErrorIcon, {
         className: iconClass
       });
-
     case 'info':
       return null;
-
     case 'warning':
       return React__default.createElement(ValidationExclamationIcon, {
         className: iconClass
       });
-
     default:
       return null;
   }
 };
-
 var FeedbackText = function FeedbackText(_ref2) {
   var children = _ref2.children,
-      _ref2$hideIcon = _ref2.hideIcon,
-      hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
-      variant = _ref2.variant,
-      className = _ref2.className,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
-
+    _ref2$hideIcon = _ref2.hideIcon,
+    hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
+    variant = _ref2.variant,
+    className = _ref2.className,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
   return React__default.createElement(SubLabel, _extends({
     className: classNames('eds-feedback-text', {
       'eds-feedback-text--info': variant === 'info'
@@ -97,11 +83,9 @@ var InputGroupContext = /*#__PURE__*/React.createContext({
 });
 var InputGroupContextProvider = function InputGroupContextProvider(_ref) {
   var children = _ref.children;
-
   var _React$useState = React.useState(false),
-      filled = _React$useState[0],
-      setFilled = _React$useState[1];
-
+    filled = _React$useState[0],
+    setFilled = _React$useState[1];
   return React.createElement(InputGroupContext.Provider, {
     value: {
       isFilled: filled,
@@ -116,15 +100,13 @@ var useInputGroupContext = function useInputGroupContext() {
 var _excluded$e = ["label", "required", "labelId", "staticAnimation"];
 var InputGroupLabel = function InputGroupLabel(_ref) {
   var label = _ref.label,
-      required = _ref.required,
-      labelId = _ref.labelId,
-      _ref$staticAnimation = _ref.staticAnimation,
-      staticAnimation = _ref$staticAnimation === void 0 ? false : _ref$staticAnimation,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-
+    required = _ref.required,
+    labelId = _ref.labelId,
+    _ref$staticAnimation = _ref.staticAnimation,
+    staticAnimation = _ref$staticAnimation === void 0 ? false : _ref$staticAnimation,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var _useInputGroupContext = useInputGroupContext(),
-      isFilled = _useInputGroupContext.isFilled;
-
+    isFilled = _useInputGroupContext.isFilled;
   var filler = staticAnimation || isFilled;
   return React__default.createElement("label", _extends({
     className: classNames(rest.className, {
@@ -141,8 +123,8 @@ var InputGroupLabel = function InputGroupLabel(_ref) {
 var VariantContext = /*#__PURE__*/React__default.createContext(null);
 var VariantProvider = function VariantProvider(_ref) {
   var children = _ref.children,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? null : _ref$variant;
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? null : _ref$variant;
   return React__default.createElement(VariantContext.Provider, {
     value: variant
   }, children);
@@ -155,32 +137,31 @@ var useVariant = function useVariant() {
 var _excluded$d = ["children", "className", "dark", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
 var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      className = _ref.className,
-      _ref$dark = _ref.dark,
-      dark = _ref$dark === void 0 ? false : _ref$dark,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      variant = _ref.variant,
-      prepend = _ref.prepend,
-      append = _ref.append,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      isFilled = _ref.isFilled,
-      label = _ref.label,
-      required = _ref.required,
-      labelTooltip = _ref.labelTooltip,
-      feedback = _ref.feedback,
-      labelId = _ref.labelId,
-      labelProps = _ref.labelProps,
-      style = _ref.style,
-      _ref$disableLabelAnim = _ref.disableLabelAnimation,
-      disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
-      _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
-      ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-
+    className = _ref.className,
+    _ref$dark = _ref.dark,
+    dark = _ref$dark === void 0 ? false : _ref$dark,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    variant = _ref.variant,
+    prepend = _ref.prepend,
+    append = _ref.append,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    isFilled = _ref.isFilled,
+    label = _ref.label,
+    required = _ref.required,
+    labelTooltip = _ref.labelTooltip,
+    feedback = _ref.feedback,
+    labelId = _ref.labelId,
+    labelProps = _ref.labelProps,
+    style = _ref.style,
+    _ref$disableLabelAnim = _ref.disableLabelAnimation,
+    disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
+    _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
+    ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
   return React__default.createElement(InputGroupContextProvider, null, React__default.createElement("div", _extends({
@@ -219,18 +200,17 @@ var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
 var _excluded$c = ["checked", "className", "children", "style", "disabled", "reduceClickArea"];
 var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
-      className = _ref.className,
-      children = _ref.children,
-      style = _ref.style,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      reduceClickArea = _ref.reduceClickArea,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-
+    className = _ref.className,
+    children = _ref.children,
+    style = _ref.style,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    reduceClickArea = _ref.reduceClickArea,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   // Trick to allow using a ref locally, while still allowing for ref forwarding
   // Read more at https://reactjs.org/docs/hooks-reference.html#useimperativehandle
-  var innerRef = React__default.useRef(null); //eslint-disable-next-line
-
+  var innerRef = React__default.useRef(null);
+  //eslint-disable-next-line
   React__default.useImperativeHandle(ref, function () {
     return innerRef.current;
   });
@@ -265,10 +245,9 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     as: "span"
   }, children));
 });
-
 var CheckboxIcon = function CheckboxIcon(_ref2) {
   var _ref2$indeterminate = _ref2.indeterminate,
-      indeterminate = _ref2$indeterminate === void 0 ? false : _ref2$indeterminate;
+    indeterminate = _ref2$indeterminate === void 0 ? false : _ref2$indeterminate;
   return React__default.createElement("svg", {
     className: "eds-checkbox-icon",
     width: "11px",
@@ -290,10 +269,9 @@ var CheckboxIcon = function CheckboxIcon(_ref2) {
 var _excluded$b = ["children", "className", "label"];
 var Fieldset = function Fieldset(_ref) {
   var children = _ref.children,
-      className = _ref.className,
-      label = _ref.label,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-
+    className = _ref.className,
+    label = _ref.label,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return React__default.createElement("fieldset", _extends({
     className: classNames('eds-fieldset', className)
   }, rest), label && React__default.createElement(Label, {
@@ -306,31 +284,26 @@ var RadioGroupContext = /*#__PURE__*/React__default.createContext(null);
 var RadioGroupContextProvider = RadioGroupContext.Provider;
 var useRadioGroupContext = function useRadioGroupContext() {
   var context = React__default.useContext(RadioGroupContext);
-
   if (!context) {
     throw new Error('You need to wrap your RadioButtons in a RadioGroup component');
   }
-
   return context;
 };
 
 var _excluded$a = ["className", "children", "value", "disabled"];
 var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
-      children = _ref.children,
-      value = _ref.value,
-      disabled = _ref.disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-
+    children = _ref.children,
+    value = _ref.value,
+    disabled = _ref.disabled,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var classList = classNames(className, 'eds-form-component--radio__radio', {
     'eds-form-component--radio__radio--disabled': disabled
   });
-
   var _useRadioGroupContext = useRadioGroupContext(),
-      name = _useRadioGroupContext.name,
-      selectedValue = _useRadioGroupContext.value,
-      onChange = _useRadioGroupContext.onChange;
-
+    name = _useRadioGroupContext.name,
+    selectedValue = _useRadioGroupContext.value,
+    onChange = _useRadioGroupContext.onChange;
   return React__default.createElement("label", {
     className: "eds-form-component--radio__container"
   }, React__default.createElement("input", _extends({
@@ -355,12 +328,11 @@ var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 var _excluded$9 = ["name", "value", "children", "onChange", "label"];
 var RadioGroup = function RadioGroup(_ref) {
   var name = _ref.name,
-      value = _ref.value,
-      children = _ref.children,
-      onChange = _ref.onChange,
-      label = _ref.label,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-
+    value = _ref.value,
+    children = _ref.children,
+    onChange = _ref.onChange,
+    label = _ref.label,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var contextValue = React__default.useMemo(function () {
     return {
       name: name,
@@ -378,29 +350,26 @@ var RadioGroup = function RadioGroup(_ref) {
 var _excluded$8 = ["className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"];
 var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
-      children = _ref.children,
-      value = _ref.value,
-      title = _ref.title,
-      secondaryLabel = _ref.secondaryLabel,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      _ref$hideCheckbox = _ref.hideCheckbox,
-      hideCheckbox = _ref$hideCheckbox === void 0 ? false : _ref$hideCheckbox,
-      style = _ref.style,
-      id = _ref.id,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-
+    children = _ref.children,
+    value = _ref.value,
+    title = _ref.title,
+    secondaryLabel = _ref.secondaryLabel,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$hideCheckbox = _ref.hideCheckbox,
+    hideCheckbox = _ref$hideCheckbox === void 0 ? false : _ref$hideCheckbox,
+    style = _ref.style,
+    id = _ref.id,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var classList = classNames(className, 'eds-radio-panel__container', "eds-radio-panel--" + size, {
     'eds-radio-panel--disabled': disabled
   });
-
   var _useRadioGroupContext = useRadioGroupContext(),
-      name = _useRadioGroupContext.name,
-      selectedValue = _useRadioGroupContext.value,
-      onChange = _useRadioGroupContext.onChange;
-
+    name = _useRadioGroupContext.name,
+    selectedValue = _useRadioGroupContext.value,
+    onChange = _useRadioGroupContext.onChange;
   var randomId = useRandomId('eds-radiopanel');
   var radioPanelId = id || randomId;
   return React__default.createElement("label", {
@@ -430,7 +399,6 @@ var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: "eds-radio-panel__additional-content"
   }, children)));
 });
-
 var RadioPanelCheck = function RadioPanelCheck() {
   return React__default.createElement("svg", {
     className: "eds-checkbox-icon",
@@ -447,26 +415,23 @@ var RadioPanelCheck = function RadioPanelCheck() {
 var _excluded$7 = ["className", "children", "labelPlacement", "icon", "hideIcon", "color", "contrastColor", "size"];
 var Switch = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
-      children = _ref.children,
-      _ref$labelPlacement = _ref.labelPlacement,
-      labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
-      icon = _ref.icon,
-      _ref$hideIcon = _ref.hideIcon,
-      hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? colors.validation.mintContrast : _ref$color,
-      contrastColor = _ref.contrastColor,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
+    children = _ref.children,
+    _ref$labelPlacement = _ref.labelPlacement,
+    labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
+    icon = _ref.icon,
+    _ref$hideIcon = _ref.hideIcon,
+    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? colors.validation.mintContrast : _ref$color,
+    contrastColor = _ref.contrastColor,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var chosenContrastColor = contrastColor && contrastColor || color;
-
   var displayedIcon = function displayedIcon() {
     if (icon) return icon;
     return rest.checked ? React__default.createElement(CheckIcon, null) : React__default.createElement(CloseSmallIcon, null);
   };
-
   return React__default.createElement("label", {
     className: classNames('eds-switch', "eds-switch--" + labelPlacement, className),
     style: _extends({}, rest.style)
@@ -489,18 +454,16 @@ var Switch = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 var _excluded$6 = ["className", "children", "labelPlacement", "transport", "size"];
 var TravelSwitch = function TravelSwitch(_ref) {
   var className = _ref.className,
-      children = _ref.children,
-      _ref$labelPlacement = _ref.labelPlacement,
-      labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
-      transport = _ref.transport,
-      size = _ref.size,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-
+    children = _ref.children,
+    _ref$labelPlacement = _ref.labelPlacement,
+    labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
+    transport = _ref.transport,
+    size = _ref.size,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var _modeCalc = modeCalc(transport),
-      color = _modeCalc.color,
-      contrast = _modeCalc.contrast,
-      Icon = _modeCalc.Icon;
-
+    color = _modeCalc.color,
+    contrast = _modeCalc.contrast,
+    Icon = _modeCalc.Icon;
   return React__default.createElement(Switch, _extends({
     className: className,
     labelPlacement: labelPlacement,
@@ -510,7 +473,6 @@ var TravelSwitch = function TravelSwitch(_ref) {
     size: size
   }, rest), children);
 };
-
 function modeCalc(mode) {
   switch (mode) {
     case 'bus':
@@ -519,70 +481,60 @@ function modeCalc(mode) {
         color: colors.transport["default"].bus,
         contrast: colors.transport.contrast.bus
       };
-
     case 'metro':
       return {
         Icon: SubwayIcon,
         color: colors.transport["default"].metro,
         contrast: colors.transport.contrast.metro
       };
-
     case 'air':
       return {
         Icon: PlaneIcon,
         color: colors.transport["default"].plane,
         contrast: colors.transport.contrast.plane
       };
-
     case 'tram':
       return {
         Icon: TramIcon,
         color: colors.transport["default"].tram,
         contrast: colors.transport.contrast.tram
       };
-
     case 'rail':
       return {
         Icon: TrainIcon,
         color: colors.transport["default"].train,
         contrast: colors.transport.contrast.train
       };
-
     case 'water':
       return {
         Icon: FerryIcon,
         color: colors.transport["default"].ferry,
         contrast: colors.transport.contrast.ferry
       };
-
     case 'bike':
       return {
         Icon: BicycleIcon,
         color: colors.transport["default"].mobility,
         contrast: colors.transport.contrast.mobility
       };
-
     case 'scooter':
       return {
         Icon: ScooterIcon,
         color: colors.transport["default"].mobility,
         contrast: colors.transport.contrast.mobility
       };
-
     case 'airportLinkBus':
       return {
         Icon: BusIcon,
         color: colors.transport["default"].plane,
         contrast: colors.transport.contrast.plane
       };
-
     case 'airportLinkRail':
       return {
         Icon: TrainIcon,
         color: colors.transport["default"].plane,
         contrast: colors.transport.contrast.plane
       };
-
     default:
       throw Error('Please select a transport for the TravelSwitch.');
   }
@@ -591,7 +543,8 @@ function modeCalc(mode) {
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- disabled during Yarn upgrade
 function hasValue(value) {
   return value != null && !(Array.isArray(value) && value.length === 0);
-} // Determine if field is empty or filled.
+}
+// Determine if field is empty or filled.
 // Response determines if label is presented above field or as placeholder.
 //
 // @param obj
@@ -599,32 +552,29 @@ function hasValue(value) {
 // @returns {boolean} False when not present or empty string.
 //                    True when any number or string with length.
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- disabled during Yarn upgrade
-
 function isFilled(obj, SSR) {
   if (SSR === void 0) {
     SSR = false;
   }
-
   return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
 }
 
 var _excluded$5 = ["variant", "disabled", "readOnly", "className", "style", "label", "feedback", "labelTooltip", "onChange", "disableLabelAnimation"],
-    _excluded2$1 = ["readOnly", "disabled", "onChange", "value", "variant"];
+  _excluded2$1 = ["readOnly", "disabled", "onChange", "value", "variant"];
 var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      className = _ref.className,
-      style = _ref.style,
-      label = _ref.label,
-      feedback = _ref.feedback,
-      labelTooltip = _ref.labelTooltip,
-      onChange = _ref.onChange,
-      disableLabelAnimation = _ref.disableLabelAnimation,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    className = _ref.className,
+    style = _ref.style,
+    label = _ref.label,
+    feedback = _ref.feedback,
+    labelTooltip = _ref.labelTooltip,
+    onChange = _ref.onChange,
+    disableLabelAnimation = _ref.disableLabelAnimation,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var textAreaId = useRandomId('eds-textarea');
   return React__default.createElement(BaseFormControl, {
     className: className,
@@ -651,42 +601,36 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 });
 var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
   var readOnly = _ref2.readOnly,
-      disabled = _ref2.disabled,
-      onChange = _ref2.onChange,
-      value = _ref2.value,
-      variant = _ref2.variant,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-
+    disabled = _ref2.disabled,
+    onChange = _ref2.onChange,
+    value = _ref2.value,
+    variant = _ref2.variant,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
-
   var _useInputGroupContext = useInputGroupContext(),
-      isInputFilled = _useInputGroupContext.isFilled,
-      setFiller = _useInputGroupContext.setFilled;
-
+    isInputFilled = _useInputGroupContext.isFilled,
+    setFiller = _useInputGroupContext.setFilled;
   useOnMount(function () {
-    if (value || rest.defaultValue) {
+    if (value != null && value.toString() || rest.defaultValue) {
       setFiller && !isInputFilled && setFiller(true);
     }
   });
   React__default.useEffect(function () {
-    if (value && setFiller && !isInputFilled) {
+    if (value != null && value.toString() && setFiller && !isInputFilled) {
       setFiller(true);
     }
   }, [value, setFiller, isInputFilled]);
-
   var handleChange = function handleChange(event) {
     if (isFilled(event.target)) {
       setFiller && !isInputFilled && setFiller(true);
     } else {
       setFiller && isInputFilled && setFiller(false);
     }
-
     if (onChange) {
       onChange(event);
     }
   };
-
   return React__default.createElement("textarea", _extends({
     className: "eds-form-control eds-textarea",
     ref: ref,
@@ -699,35 +643,34 @@ var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref)
 });
 
 var _excluded$4 = ["prepend", "append", "variant", "disabled", "readOnly", "className", "style", "size", "label", "required", "labelTooltip", "feedback", "onChange", "disableLabelAnimation", "labelProps", "clearable", "onClear", "value", "ariaAlertOnFeedback"],
-    _excluded2 = ["disabled", "readOnly", "placeholder", "onChange", "value", "variant"],
-    _excluded3 = ["onClear"];
+  _excluded2 = ["disabled", "readOnly", "placeholder", "onChange", "value", "variant"],
+  _excluded3 = ["onClear"];
 var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var prepend = _ref.prepend,
-      append = _ref.append,
-      variant = _ref.variant,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      className = _ref.className,
-      style = _ref.style,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      label = _ref.label,
-      required = _ref.required,
-      labelTooltip = _ref.labelTooltip,
-      feedback = _ref.feedback,
-      onChange = _ref.onChange,
-      disableLabelAnimation = _ref.disableLabelAnimation,
-      labelProps = _ref.labelProps,
-      _ref$clearable = _ref.clearable,
-      clearable = _ref$clearable === void 0 ? false : _ref$clearable,
-      onClear = _ref.onClear,
-      value = _ref.value,
-      _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
-      ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-
+    append = _ref.append,
+    variant = _ref.variant,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    label = _ref.label,
+    required = _ref.required,
+    labelTooltip = _ref.labelTooltip,
+    feedback = _ref.feedback,
+    onChange = _ref.onChange,
+    disableLabelAnimation = _ref.disableLabelAnimation,
+    labelProps = _ref.labelProps,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    onClear = _ref.onClear,
+    value = _ref.value,
+    _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
+    ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var randomId = useRandomId('eds-textfield');
   var textFieldId = labelProps && labelProps.id ? labelProps.id : randomId;
   return React__default.createElement(BaseFormControl, {
@@ -761,43 +704,37 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 });
 var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forwardRef) {
   var disabled = _ref2.disabled,
-      readOnly = _ref2.readOnly,
-      placeholder = _ref2.placeholder,
-      onChange = _ref2.onChange,
-      value = _ref2.value,
-      variant = _ref2.variant,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
+    readOnly = _ref2.readOnly,
+    placeholder = _ref2.placeholder,
+    onChange = _ref2.onChange,
+    value = _ref2.value,
+    variant = _ref2.variant,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
-
   var _useInputGroupContext = useInputGroupContext(),
-      isInputFilled = _useInputGroupContext.isFilled,
-      setFiller = _useInputGroupContext.setFilled;
-
+    isInputFilled = _useInputGroupContext.isFilled,
+    setFiller = _useInputGroupContext.setFilled;
   useOnMount(function () {
-    if (value || rest.defaultValue) {
+    if (value != null && value.toString() || rest.defaultValue) {
       setFiller && !isInputFilled && setFiller(true);
     }
   });
   React__default.useEffect(function () {
-    if (value && setFiller && !isInputFilled) {
+    if (value != null && value.toString() && setFiller && !isInputFilled) {
       setFiller(true);
     }
   }, [value, setFiller, isInputFilled]);
-
   var handleChange = function handleChange(event) {
     if (isFilled(event.target)) {
       setFiller && !isInputFilled && setFiller(true);
     } else {
       setFiller && isInputFilled && setFiller(false);
     }
-
     if (onChange) {
       onChange(event);
     }
   };
-
   return React__default.createElement("input", _extends({
     "aria-invalid": currentVariant === 'error',
     className: "eds-form-control",
@@ -809,15 +746,12 @@ var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forw
     value: value
   }, rest));
 });
-
 var ClearButton = function ClearButton(_ref3) {
   var onClear = _ref3.onClear,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
   var _useInputGroupContext2 = useInputGroupContext(),
-      hasValue = _useInputGroupContext2.isFilled,
-      setFilled = _useInputGroupContext2.setFilled;
-
+    hasValue = _useInputGroupContext2.isFilled,
+    setFilled = _useInputGroupContext2.setFilled;
   return React__default.createElement("div", {
     className: "eds-textfield__clear-button-wrapper"
   }, hasValue && React__default.createElement("div", {
@@ -837,15 +771,14 @@ var _excluded$3 = ["name", "onChange", "selectedValue", "multiple", "size"];
 var SegmentedContext = /*#__PURE__*/React__default.createContext(null);
 var SegmentedProvider = function SegmentedProvider(_ref) {
   var name = _ref.name,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {
-    return undefined;
-  } : _ref$onChange,
-      selectedValue = _ref.selectedValue,
-      multiple = _ref.multiple,
-      size = _ref.size,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return undefined;
+    } : _ref$onChange,
+    selectedValue = _ref.selectedValue,
+    multiple = _ref.multiple,
+    size = _ref.size,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var generatedName = useRandomId('eds-segmented-control');
   var contextValue = React__default.useMemo(function () {
     return {
@@ -862,52 +795,42 @@ var SegmentedProvider = function SegmentedProvider(_ref) {
 };
 var useSegmentedContext = function useSegmentedContext() {
   var context = React__default.useContext(SegmentedContext);
-
   if (!context) {
     throw new Error('You need to wrap your SegmentedChoice in either SegmentedControl or MultipleSegmentedControl');
   }
-
   return context;
 };
 
 var _excluded$2 = ["children", "className", "style", "value", "name", "onChange"];
 var SegmentedChoice = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      className = _ref.className,
-      style = _ref.style,
-      value = _ref.value,
-      name = _ref.name,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {
-    return undefined;
-  } : _ref$onChange,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
+    className = _ref.className,
+    style = _ref.style,
+    value = _ref.value,
+    name = _ref.name,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return undefined;
+    } : _ref$onChange,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var _useSegmentedContext = useSegmentedContext(),
-      commonName = _useSegmentedContext.name,
-      selectedValue = _useSegmentedContext.selectedValue,
-      commonOnChange = _useSegmentedContext.onChange,
-      multiple = _useSegmentedContext.multiple,
-      size = _useSegmentedContext.size;
-
+    commonName = _useSegmentedContext.name,
+    selectedValue = _useSegmentedContext.selectedValue,
+    commonOnChange = _useSegmentedContext.onChange,
+    multiple = _useSegmentedContext.multiple,
+    size = _useSegmentedContext.size;
   var isChecked = multiple ? selectedValue[value] : selectedValue === value;
-
   var handleChange = function handleChange(e) {
     onChange(e);
-
     if (multiple) {
       var _extends2;
-
       commonOnChange(_extends({}, selectedValue, (_extends2 = {}, _extends2[value] = e.target.checked, _extends2)));
     } else if (e.target.checked) {
       commonOnChange(value);
     }
   };
-
   return React__default.createElement("label", {
-    className: classNames('eds-segmented-choice', className, {
-      'eds-segmented-choide--large': size === 'large'
-    }),
+    className: classNames('eds-segmented-choice', className),
     style: style
   }, React__default.createElement("input", _extends({
     type: multiple ? 'checkbox' : 'radio',
@@ -926,15 +849,14 @@ var SegmentedChoice = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
 var _excluded$1 = ["children", "label", "name", "onChange", "selectedValue", "size", "className"];
 var SegmentedControl = function SegmentedControl(_ref) {
   var children = _ref.children,
-      label = _ref.label,
-      name = _ref.name,
-      onChange = _ref.onChange,
-      selectedValue = _ref.selectedValue,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
+    label = _ref.label,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    selectedValue = _ref.selectedValue,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return React__default.createElement(SegmentedProvider, {
     name: name,
     selectedValue: selectedValue,
@@ -952,15 +874,13 @@ var _excluded = ["children", "label", "name", "onChange", "selectedValue"];
 /**This component is not used by anyone, and is therefore deprecated
  * @deprecated
  */
-
 var MultipleSegmentedControl = function MultipleSegmentedControl(_ref) {
   var children = _ref.children,
-      label = _ref.label,
-      name = _ref.name,
-      onChange = _ref.onChange,
-      selectedValue = _ref.selectedValue,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    label = _ref.label,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    selectedValue = _ref.selectedValue,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return React__default.createElement(SegmentedProvider, {
     name: name,
     selectedValue: selectedValue,