@entur/form 5.1.4 → 5.2.2

package/dist/form.cjs.development.js

@@ -2,17 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var utils = require('@entur/utils');
 var tooltip = require('@entur/tooltip');
-var classNames = _interopDefault(require('classnames'));
+var classNames = require('classnames');
 var React = require('react');
-var React__default = _interopDefault(React);
 var icons = require('@entur/icons');
 var typography = require('@entur/typography');
 var tokens = require('@entur/tokens');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return n;
+}
+
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -46,18 +67,20 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   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(icons.ValidationCheckIcon, {
+      return React__default["default"].createElement(icons.ValidationCheckIcon, {
         className: iconClass
       });
 
     case 'error':
-      return React__default.createElement(icons.ValidationErrorIcon, {
+      return React__default["default"].createElement(icons.ValidationErrorIcon, {
         className: iconClass
       });
 
@@ -65,7 +88,7 @@ var AlertIcon = function AlertIcon(_ref) {
       return null;
 
     case 'warning':
-      return React__default.createElement(icons.ValidationExclamationIcon, {
+      return React__default["default"].createElement(icons.ValidationExclamationIcon, {
         className: iconClass
       });
 
@@ -80,20 +103,20 @@ var FeedbackText = function FeedbackText(_ref2) {
       hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
       variant = _ref2.variant,
       className = _ref2.className,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["children", "hideIcon", "variant", "className"]);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
 
-  return React__default.createElement(typography.SubLabel, Object.assign({
-    className: classNames('eds-feedback-text', {
+  return React__default["default"].createElement(typography.SubLabel, _extends({
+    className: classNames__default["default"]('eds-feedback-text', {
       'eds-feedback-text--info': variant === 'info'
     }, className)
-  }, rest), !hideIcon && React__default.createElement(AlertIcon, {
+  }, rest), !hideIcon && React__default["default"].createElement(AlertIcon, {
     variant: variant
-  }), React__default.createElement("span", {
+  }), React__default["default"].createElement("span", {
     className: "eds-feedback-text__text"
   }, children));
 };
 
-var InputGroupContext = /*#__PURE__*/React.createContext({
+var InputGroupContext = /*#__PURE__*/React__namespace.createContext({
   isFilled: false,
   setFilled: function setFilled() {
     return null;
@@ -102,11 +125,11 @@ var InputGroupContext = /*#__PURE__*/React.createContext({
 var InputGroupContextProvider = function InputGroupContextProvider(_ref) {
   var children = _ref.children;
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React__namespace.useState(false),
       filled = _React$useState[0],
       setFilled = _React$useState[1];
 
-  return React.createElement(InputGroupContext.Provider, {
+  return React__namespace.createElement(InputGroupContext.Provider, {
     value: {
       isFilled: filled,
       setFilled: setFilled
@@ -114,48 +137,50 @@ var InputGroupContextProvider = function InputGroupContextProvider(_ref) {
   }, children);
 };
 var useInputGroupContext = function useInputGroupContext() {
-  return React.useContext(InputGroupContext);
+  return React__namespace.useContext(InputGroupContext);
 };
 
+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, ["label", "required", "labelId", "staticAnimation"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   var _useInputGroupContext = useInputGroupContext(),
       isFilled = _useInputGroupContext.isFilled;
 
   var filler = staticAnimation || isFilled;
-  return React__default.createElement("label", Object.assign({
-    className: classNames(rest.className, {
+  return React__default["default"].createElement("label", _extends({
+    className: classNames__default["default"](rest.className, {
       'eds-input-group-label-wrapper--filled': filler
     }),
     id: labelId
-  }, rest), React__default.createElement("span", {
-    className: classNames('eds-input-group__label', {
+  }, rest), React__default["default"].createElement("span", {
+    className: classNames__default["default"]('eds-input-group__label', {
       'eds-input-group__label--filled': filler
     })
-  }, label, " ", required && React__default.createElement("span", null, "*")));
+  }, label, " ", required && React__default["default"].createElement("span", null, "*")));
 };
 
-var VariantContext = /*#__PURE__*/React__default.createContext(null);
+var VariantContext = /*#__PURE__*/React__default["default"].createContext(null);
 var VariantProvider = function VariantProvider(_ref) {
   var children = _ref.children,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? null : _ref$variant;
-  return React__default.createElement(VariantContext.Provider, {
+  return React__default["default"].createElement(VariantContext.Provider, {
     value: variant
   }, children);
 };
 var useVariant = function useVariant() {
-  var context = React__default.useContext(VariantContext);
+  var context = React__default["default"].useContext(VariantContext);
   return context;
 };
 
-var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var _excluded$d = ["children", "className", "dark", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation"];
+var BaseFormControl = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       _ref$dark = _ref.dark,
@@ -179,12 +204,12 @@ var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       style = _ref.style,
       _ref$disableLabelAnim = _ref.disableLabelAnimation,
       disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "dark", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
-  return React__default.createElement(InputGroupContextProvider, null, React__default.createElement("div", Object.assign({
-    className: classNames('eds-form-control-wrapper', className, "eds-form-control-wrapper--size-" + size, {
+  return React__default["default"].createElement(InputGroupContextProvider, null, React__default["default"].createElement("div", _extends({
+    className: classNames__default["default"]('eds-form-control-wrapper', className, "eds-form-control-wrapper--size-" + size, {
       'eds-form-control-wrapper--success': currentVariant === 'success',
       'eds-form-control-wrapper--error': currentVariant === 'error',
       'eds-form-control-wrapper--dark': dark,
@@ -194,28 +219,29 @@ var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }),
     ref: ref,
     style: style
-  }, rest), prepend && React__default.createElement("div", {
+  }, rest), prepend && React__default["default"].createElement("div", {
     className: "eds-form-control__prepend"
-  }, prepend), React__default.createElement(InputGroupLabel, Object.assign({
+  }, prepend), React__default["default"].createElement(InputGroupLabel, _extends({
     label: label,
     required: required,
     labelId: labelId,
     staticAnimation: disableLabelAnimation
-  }, labelProps)), children, append && React__default.createElement("div", {
+  }, labelProps)), children, append && React__default["default"].createElement("div", {
     className: "eds-form-control__append"
-  }, append), labelTooltip && React__default.createElement("div", {
+  }, append), labelTooltip && React__default["default"].createElement("div", {
     className: "eds-form-control__append eds-form-control__append--tooltip"
-  }, React__default.createElement(tooltip.Tooltip, {
+  }, React__default["default"].createElement(tooltip.Tooltip, {
     content: labelTooltip,
     placement: "right"
-  }, React__default.createElement("span", {
+  }, React__default["default"].createElement("span", {
     className: "eds-input-group__label-tooltip-icon"
-  }, React__default.createElement(icons.QuestionIcon, null))))), feedback && currentVariant && React__default.createElement(FeedbackText, {
+  }, React__default["default"].createElement(icons.QuestionIcon, null))))), feedback && currentVariant && React__default["default"].createElement(FeedbackText, {
     variant: currentVariant
   }, feedback));
 });
 
-var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var _excluded$c = ["checked", "className", "children", "style", "disabled", "reduceClickArea"];
+var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
       className = _ref.className,
       children = _ref.children,
@@ -223,41 +249,41 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       reduceClickArea = _ref.reduceClickArea,
-      rest = _objectWithoutPropertiesLoose(_ref, ["checked", "className", "children", "style", "disabled", "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["default"].useRef(null); //eslint-disable-next-line
 
-  React__default.useImperativeHandle(ref, function () {
+  React__default["default"].useImperativeHandle(ref, function () {
     return innerRef.current;
   });
   var isIndeterminate = checked === 'indeterminate';
   var isControlled = checked !== undefined;
-  React__default.useEffect(function () {
+  React__default["default"].useEffect(function () {
     if (innerRef && innerRef.current) {
       innerRef.current.indeterminate = isIndeterminate;
     }
   }, [isIndeterminate]);
-  return React__default.createElement("label", {
-    className: classNames('eds-checkbox__container', className, {
+  return React__default["default"].createElement("label", {
+    className: classNames__default["default"]('eds-checkbox__container', className, {
       'eds-checkbox--disabled': disabled,
       'eds-checkbox__container--reduced-click-area': reduceClickArea
     }),
     style: style
-  }, React__default.createElement("input", Object.assign({
+  }, React__default["default"].createElement("input", _extends({
     type: "checkbox",
     ref: innerRef,
     checked: isControlled ? checked === true : undefined,
     disabled: disabled
-  }, rest)), React__default.createElement("span", {
-    className: classNames('eds-checkbox__icon', {
+  }, rest)), React__default["default"].createElement("span", {
+    className: classNames__default["default"]('eds-checkbox__icon', {
       'eds-checkbox__icon--disabled': disabled,
       'eds-checkbox__icon--reduced-click-area': reduceClickArea
     })
-  }, React__default.createElement(CheckboxIcon, {
+  }, React__default["default"].createElement(CheckboxIcon, {
     indeterminate: isIndeterminate
-  })), children && React__default.createElement(typography.Paragraph, {
+  })), children && React__default["default"].createElement(typography.Paragraph, {
     className: "eds-checkbox__label",
     margin: "none",
     as: "span"
@@ -267,42 +293,43 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 var CheckboxIcon = function CheckboxIcon(_ref2) {
   var _ref2$indeterminate = _ref2.indeterminate,
       indeterminate = _ref2$indeterminate === void 0 ? false : _ref2$indeterminate;
-  return React__default.createElement("svg", {
+  return React__default["default"].createElement("svg", {
     className: "eds-checkbox-icon",
     width: "11px",
     height: "9px",
     viewBox: "6 11 37 33"
-  }, indeterminate ? React__default.createElement("rect", {
+  }, indeterminate ? React__default["default"].createElement("rect", {
     x: "10",
     y: "25",
     width: "28",
     height: "5",
     fill: "white"
-  }) : React__default.createElement("path", {
+  }) : React__default["default"].createElement("path", {
     className: "eds-checkbox-icon__path",
     d: "M14.1 27.2l7.1 7.2 14.6-14.8",
     fill: "none"
   }));
 };
 
+var _excluded$b = ["children", "className", "label"];
 var Fieldset = function Fieldset(_ref) {
   var children = _ref.children,
       className = _ref.className,
       label = _ref.label,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "label"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
-  return React__default.createElement("fieldset", Object.assign({
-    className: classNames('eds-fieldset', className)
-  }, rest), label && React__default.createElement(typography.Label, {
+  return React__default["default"].createElement("fieldset", _extends({
+    className: classNames__default["default"]('eds-fieldset', className)
+  }, rest), label && React__default["default"].createElement(typography.Label, {
     as: "legend",
     className: "eds-legend"
   }, label), children);
 };
 
-var RadioGroupContext = /*#__PURE__*/React__default.createContext(null);
+var RadioGroupContext = /*#__PURE__*/React__default["default"].createContext(null);
 var RadioGroupContextProvider = RadioGroupContext.Provider;
 var useRadioGroupContext = function useRadioGroupContext() {
-  var context = React__default.useContext(RadioGroupContext);
+  var context = React__default["default"].useContext(RadioGroupContext);
 
   if (!context) {
     throw new Error('You need to wrap your RadioButtons in a RadioGroup component');
@@ -311,14 +338,15 @@ var useRadioGroupContext = function useRadioGroupContext() {
   return context;
 };
 
-var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var _excluded$a = ["className", "children", "value", "disabled"];
+var Radio = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       value = _ref.value,
       disabled = _ref.disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "children", "value", "disabled"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
-  var classList = classNames(className, 'eds-form-component--radio__radio', {
+  var classList = classNames__default["default"](className, 'eds-form-component--radio__radio', {
     'eds-form-component--radio__radio--disabled': disabled
   });
 
@@ -327,9 +355,9 @@ var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       selectedValue = _useRadioGroupContext.value,
       onChange = _useRadioGroupContext.onChange;
 
-  return React__default.createElement("label", {
+  return React__default["default"].createElement("label", {
     className: "eds-form-component--radio__container"
-  }, React__default.createElement("input", Object.assign({
+  }, React__default["default"].createElement("input", _extends({
     type: "radio",
     name: name,
     ref: ref,
@@ -337,40 +365,42 @@ var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     checked: selectedValue === value,
     onChange: onChange,
     disabled: disabled
-  }, rest)), React__default.createElement("span", {
+  }, rest)), React__default["default"].createElement("span", {
     className: classList
-  }, React__default.createElement("span", {
+  }, React__default["default"].createElement("span", {
     className: "eds-form-component--radio__circle"
-  })), children && React__default.createElement(typography.Paragraph, {
+  })), children && React__default["default"].createElement(typography.Paragraph, {
     margin: "none",
     as: "span",
     className: "eds-form-component--radio__label"
   }, children));
 });
 
+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, ["name", "value", "children", "onChange", "label"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
-  var contextValue = React__default.useMemo(function () {
+  var contextValue = React__default["default"].useMemo(function () {
     return {
       name: name,
       value: value,
       onChange: onChange
     };
   }, [name, value, onChange]);
-  return React__default.createElement(RadioGroupContextProvider, {
+  return React__default["default"].createElement(RadioGroupContextProvider, {
     value: contextValue
-  }, label ? React__default.createElement(Fieldset, Object.assign({
+  }, label ? React__default["default"].createElement(Fieldset, _extends({
     label: label
   }, rest), children) : children);
 };
 
-var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var _excluded$8 = ["className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"];
+var RadioPanel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       value = _ref.value,
@@ -384,9 +414,9 @@ var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       id = _ref.id,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
-  var classList = classNames(className, 'eds-radio-panel__container', "eds-radio-panel--" + size, {
+  var classList = classNames__default["default"](className, 'eds-radio-panel__container', "eds-radio-panel--" + size, {
     'eds-radio-panel--disabled': disabled
   });
 
@@ -397,10 +427,10 @@ var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   var randomId = utils.useRandomId('eds-radiopanel');
   var radioPanelId = id || randomId;
-  return React__default.createElement("label", {
+  return React__default["default"].createElement("label", {
     className: "eds-radio-panel__wrapper",
     htmlFor: radioPanelId
-  }, React__default.createElement("input", Object.assign({
+  }, React__default["default"].createElement("input", _extends({
     type: "radio",
     name: name,
     ref: ref,
@@ -409,86 +439,90 @@ var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     onChange: onChange,
     id: radioPanelId,
     disabled: disabled
-  }, rest)), React__default.createElement("div", {
+  }, rest)), React__default["default"].createElement("div", {
     className: classList,
     style: style
-  }, React__default.createElement("div", {
+  }, React__default["default"].createElement("div", {
     className: "eds-radio-panel__title-wrapper"
-  }, React__default.createElement("div", {
+  }, React__default["default"].createElement("div", {
     className: "eds-radio-panel__title"
-  }, title), React__default.createElement("div", {
+  }, title), React__default["default"].createElement("div", {
     className: "eds-radio-panel__label"
-  }, secondaryLabel && React__default.createElement("span", null, secondaryLabel), !(disabled || hideCheckbox) && React__default.createElement("span", {
+  }, secondaryLabel && React__default["default"].createElement("span", null, secondaryLabel), !(disabled || hideCheckbox) && React__default["default"].createElement("span", {
     className: "eds-radio-panel__check"
-  }, React__default.createElement(RadioPanelCheck, null)))), children && React__default.createElement("div", {
+  }, React__default["default"].createElement(RadioPanelCheck, null)))), children && React__default["default"].createElement("div", {
     className: "eds-radio-panel__additional-content"
   }, children)));
 });
 
 var RadioPanelCheck = function RadioPanelCheck() {
-  return React__default.createElement("svg", {
+  return React__default["default"].createElement("svg", {
     className: "eds-checkbox-icon",
     width: "22px",
     height: "16px",
     viewBox: "6 11 37 33"
-  }, React__default.createElement("path", {
+  }, React__default["default"].createElement("path", {
     className: "eds-checkbox-icon__path",
     d: "M14.1 27.2l7.1 7.2 14.6-14.8",
     fill: "none"
   }));
 };
 
-var Switch = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var _excluded$7 = ["className", "children", "labelPlacement", "icon", "color", "contrastColor", "size"];
+var Switch = /*#__PURE__*/React__default["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$color = _ref.color,
       color = _ref$color === void 0 ? tokens.colors.validation.mintContrast : _ref$color,
       contrastColor = _ref.contrastColor,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "children", "icon", "color", "contrastColor", "size"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var chosenContrastColor = contrastColor && contrastColor || color;
-  return React__default.createElement("label", {
-    className: classNames('eds-switch', className),
+  return React__default["default"].createElement("label", {
+    className: classNames__default["default"]('eds-switch', "eds-switch--" + labelPlacement, className),
     style: _extends({}, rest.style)
-  }, React__default.createElement("input", Object.assign({
+  }, React__default["default"].createElement("input", _extends({
     type: "checkbox",
     ref: ref
-  }, rest)), React__default.createElement("span", {
-    className: classNames('eds-switch__switch', {
-      'eds-switch__switch--large': size === 'large'
-    }),
+  }, rest)), React__default["default"].createElement("span", {
+    className: classNames__default["default"]('eds-switch__switch', "eds-switch__switch--" + size),
     style: {
       '--eds-switch-color': color,
       '--eds-switch-contrast-color': chosenContrastColor
     }
-  }, React__default.createElement("span", {
+  }, React__default["default"].createElement("span", {
     className: "eds-switch__circle"
-  }, icon && icon)), children && React__default.createElement(typography.Paragraph, {
-    margin: "none",
-    as: "span"
+  }, icon && icon)), children && React__default["default"].createElement("span", {
+    className: classNames__default["default"]('eds-switch__label', "eds-switch__label--" + size + "--" + labelPlacement)
   }, children));
 });
 
+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, ["className", "children", "transport", "size"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   var _modeCalc = modeCalc(transport),
       color = _modeCalc.color,
       contrast = _modeCalc.contrast,
       Icon = _modeCalc.Icon;
 
-  return React__default.createElement(Switch, Object.assign({
+  return React__default["default"].createElement(Switch, _extends({
     className: className,
+    labelPlacement: labelPlacement,
     color: color,
     contrastColor: contrast,
-    icon: React__default.createElement(Icon, null),
+    icon: React__default["default"].createElement(Icon, null),
     size: size
   }, rest), children);
 };
@@ -588,7 +622,9 @@ function isFilled(obj, SSR) {
   return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
 }
 
-var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var _excluded$5 = ["variant", "disabled", "readOnly", "className", "style", "label", "feedback", "labelTooltip", "onChange", "disableLabelAnimation"],
+    _excluded2$1 = ["readOnly", "disabled", "onChange", "value"];
+var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -601,10 +637,10 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       labelTooltip = _ref.labelTooltip,
       onChange = _ref.onChange,
       disableLabelAnimation = _ref.disableLabelAnimation,
-      rest = _objectWithoutPropertiesLoose(_ref, ["variant", "disabled", "readOnly", "className", "style", "label", "feedback", "labelTooltip", "onChange", "disableLabelAnimation"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   var textAreaId = utils.useRandomId('eds-textarea');
-  return React__default.createElement(BaseFormControl, {
+  return React__default["default"].createElement(BaseFormControl, {
     className: className,
     disabled: disabled,
     readOnly: readOnly,
@@ -618,7 +654,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       className: 'eds-textarea__label'
     },
     disableLabelAnimation: disableLabelAnimation
-  }, React__default.createElement(TextAreaBase, Object.assign({
+  }, React__default["default"].createElement(TextAreaBase, _extends({
     readOnly: readOnly,
     disabled: disabled,
     ref: ref,
@@ -626,12 +662,12 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     onChange: onChange
   }, rest)));
 });
-var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
+var TextAreaBase = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
   var readOnly = _ref2.readOnly,
       disabled = _ref2.disabled,
       onChange = _ref2.onChange,
       value = _ref2.value,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["readOnly", "disabled", "onChange", "value"]);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
   var _useInputGroupContext = useInputGroupContext(),
       isInputFilled = _useInputGroupContext.isFilled,
@@ -642,6 +678,11 @@ var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref)
       setFiller && !isInputFilled && setFiller(true);
     }
   });
+  React__default["default"].useEffect(function () {
+    if (value && setFiller && !isInputFilled) {
+      setFiller(true);
+    }
+  }, [value, setFiller, isInputFilled]);
 
   var handleChange = function handleChange(event) {
     if (isFilled(event.target)) {
@@ -655,7 +696,7 @@ var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref)
     }
   };
 
-  return React__default.createElement("textarea", Object.assign({
+  return React__default["default"].createElement("textarea", _extends({
     className: "eds-form-control eds-textarea",
     ref: ref,
     readOnly: readOnly,
@@ -665,7 +706,10 @@ var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref)
   }, rest));
 });
 
-var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var _excluded$4 = ["prepend", "append", "variant", "disabled", "readOnly", "className", "style", "size", "label", "required", "labelTooltip", "feedback", "onChange", "disableLabelAnimation", "labelProps", "clearable", "onClear", "value"],
+    _excluded2 = ["disabled", "readOnly", "placeholder", "onChange", "value", "variant"],
+    _excluded3 = ["onClear"];
+var TextField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var prepend = _ref.prepend,
       append = _ref.append,
       variant = _ref.variant,
@@ -688,17 +732,16 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       clearable = _ref$clearable === void 0 ? false : _ref$clearable,
       onClear = _ref.onClear,
       value = _ref.value,
-      rest = _objectWithoutPropertiesLoose(_ref, ["prepend", "append", "variant", "disabled", "readOnly", "className", "style", "size", "label", "required", "labelTooltip", "feedback", "onChange", "disableLabelAnimation", "labelProps", "clearable", "onClear", "value"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   var textFieldId = labelProps && labelProps.id ? labelProps.id : utils.useRandomId('eds-textfield');
-  return React__default.createElement(BaseFormControl, {
+  return React__default["default"].createElement(BaseFormControl, {
     disabled: disabled,
     readOnly: readOnly,
     variant: variant,
     prepend: prepend,
-    append: clearable ? React__default.createElement(ClearButton, {
-      onClear: onClear,
-      hasValue: value ? true : false
+    append: clearable && onClear ? React__default["default"].createElement(ClearButton, {
+      onClear: onClear
     }) : append,
     className: className,
     style: style,
@@ -710,7 +753,7 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     feedback: feedback,
     disableLabelAnimation: disableLabelAnimation,
     labelProps: labelProps
-  }, React__default.createElement(TextFieldBase, Object.assign({
+  }, React__default["default"].createElement(TextFieldBase, _extends({
     disabled: disabled,
     readOnly: readOnly,
     ref: ref,
@@ -719,14 +762,14 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     value: value
   }, rest)));
 });
-var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forwardRef) {
+var TextFieldBase = /*#__PURE__*/React__default["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, ["disabled", "readOnly", "placeholder", "onChange", "value", "variant"]);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
@@ -740,6 +783,11 @@ var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forw
       setFiller && !isInputFilled && setFiller(true);
     }
   });
+  React__default["default"].useEffect(function () {
+    if (value && setFiller && !isInputFilled) {
+      setFiller(true);
+    }
+  }, [value, setFiller, isInputFilled]);
 
   var handleChange = function handleChange(event) {
     if (isFilled(event.target)) {
@@ -753,7 +801,7 @@ var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forw
     }
   };
 
-  return React__default.createElement("input", Object.assign({
+  return React__default["default"].createElement("input", _extends({
     "aria-invalid": currentVariant === 'error',
     className: "eds-form-control",
     disabled: disabled,
@@ -767,22 +815,29 @@ var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forw
 
 var ClearButton = function ClearButton(_ref3) {
   var onClear = _ref3.onClear,
-      hasValue = _ref3.hasValue,
-      props = _objectWithoutPropertiesLoose(_ref3, ["onClear", "hasValue"]);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+
+  var _useInputGroupContext2 = useInputGroupContext(),
+      hasValue = _useInputGroupContext2.isFilled,
+      setFilled = _useInputGroupContext2.setFilled;
 
-  return React__default.createElement("div", {
+  return React__default["default"].createElement("div", {
     className: "eds-textfield__clear-button-wrapper"
-  }, hasValue && React__default.createElement("div", {
+  }, hasValue && React__default["default"].createElement("div", {
     className: "eds-textfield__divider"
-  }), hasValue && React__default.createElement("button", Object.assign({
+  }), hasValue && React__default["default"].createElement("button", _extends({
     className: "eds-textfield__clear-button",
     type: "button",
     tabIndex: -1,
-    onClick: onClear
-  }, props), React__default.createElement(icons.CloseSmallIcon, null)));
+    onClick: function onClick() {
+      setFilled(false);
+      onClear();
+    }
+  }, props), React__default["default"].createElement(icons.CloseSmallIcon, null)));
 };
 
-var SegmentedContext = /*#__PURE__*/React__default.createContext(null);
+var _excluded$3 = ["name", "onChange", "selectedValue", "multiple", "size"];
+var SegmentedContext = /*#__PURE__*/React__default["default"].createContext(null);
 var SegmentedProvider = function SegmentedProvider(_ref) {
   var name = _ref.name,
       _ref$onChange = _ref.onChange,
@@ -790,10 +845,10 @@ var SegmentedProvider = function SegmentedProvider(_ref) {
       selectedValue = _ref.selectedValue,
       multiple = _ref.multiple,
       size = _ref.size,
-      rest = _objectWithoutPropertiesLoose(_ref, ["name", "onChange", "selectedValue", "multiple", "size"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var generatedName = utils.useRandomId('eds-segmented-control');
-  var contextValue = React__default.useMemo(function () {
+  var contextValue = React__default["default"].useMemo(function () {
     return {
       name: name || generatedName,
       onChange: onChange,
@@ -802,12 +857,12 @@ var SegmentedProvider = function SegmentedProvider(_ref) {
       size: size
     };
   }, [generatedName, multiple, name, onChange, selectedValue, size]);
-  return React__default.createElement(SegmentedContext.Provider, Object.assign({
+  return React__default["default"].createElement(SegmentedContext.Provider, _extends({
     value: contextValue
   }, rest));
 };
 var useSegmentedContext = function useSegmentedContext() {
-  var context = React__default.useContext(SegmentedContext);
+  var context = React__default["default"].useContext(SegmentedContext);
 
   if (!context) {
     throw new Error('You need to wrap your SegmentedChoice in either SegmentedControl or MultipleSegmentedControl');
@@ -816,7 +871,8 @@ var useSegmentedContext = function useSegmentedContext() {
   return context;
 };
 
-var SegmentedChoice = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var _excluded$2 = ["children", "className", "style", "value", "name", "onChange"];
+var SegmentedChoice = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       style = _ref.style,
@@ -824,7 +880,7 @@ var SegmentedChoice = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       name = _ref.name,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "style", "value", "name", "onChange"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var _useSegmentedContext = useSegmentedContext(),
       commonName = _useSegmentedContext.name,
@@ -847,25 +903,26 @@ var SegmentedChoice = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }
   };
 
-  return React__default.createElement("label", {
-    className: classNames('eds-segmented-choice', className, {
+  return React__default["default"].createElement("label", {
+    className: classNames__default["default"]('eds-segmented-choice', className, {
       'eds-segmented-choide--large': size === 'large'
     }),
     style: style
-  }, React__default.createElement("input", Object.assign({
+  }, React__default["default"].createElement("input", _extends({
     type: multiple ? 'checkbox' : 'radio',
     name: name || commonName,
     checked: isChecked,
     value: value,
     onChange: handleChange,
     ref: ref
-  }, rest)), React__default.createElement("div", {
-    className: classNames('eds-base-segmented', {
+  }, rest)), React__default["default"].createElement("div", {
+    className: classNames__default["default"]('eds-base-segmented', {
       'eds-base-segmented--large': size === 'large'
     })
   }, children));
 });
 
+var _excluded$1 = ["children", "label", "name", "onChange", "selectedValue", "size", "className"];
 var SegmentedControl = function SegmentedControl(_ref) {
   var children = _ref.children,
       label = _ref.label,
@@ -875,21 +932,22 @@ var SegmentedControl = function SegmentedControl(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "label", "name", "onChange", "selectedValue", "size", "className"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-  return React__default.createElement(SegmentedProvider, {
+  return React__default["default"].createElement(SegmentedProvider, {
     name: name,
     selectedValue: selectedValue,
     onChange: onChange,
     multiple: false,
     size: size
-  }, React__default.createElement(typography.Label, {
+  }, React__default["default"].createElement(typography.Label, {
     as: "div"
-  }, label), React__default.createElement("div", Object.assign({
-    className: classNames('eds-segmented-control', className)
+  }, label), React__default["default"].createElement("div", _extends({
+    className: classNames__default["default"]('eds-segmented-control', className)
   }, rest), children));
 };
 
+var _excluded = ["children", "label", "name", "onChange", "selectedValue"];
 /**This component is not used by anyone, and is therefore deprecated
  * @deprecated
  */
@@ -900,17 +958,17 @@ var MultipleSegmentedControl = function MultipleSegmentedControl(_ref) {
       name = _ref.name,
       onChange = _ref.onChange,
       selectedValue = _ref.selectedValue,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "label", "name", "onChange", "selectedValue"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return React__default.createElement(SegmentedProvider, {
+  return React__default["default"].createElement(SegmentedProvider, {
     name: name,
     selectedValue: selectedValue,
     onChange: onChange,
     multiple: true,
     size: "medium"
-  }, React__default.createElement(typography.Label, {
+  }, React__default["default"].createElement(typography.Label, {
     as: "div"
-  }, label), React__default.createElement("div", Object.assign({
+  }, label), React__default["default"].createElement("div", _extends({
     className: "eds-segmented-control"
   }, rest), children));
 };