pebble-web 2.11.1 → 2.12.0

package/dist/pebble-web.es.js

@@ -1125,10 +1125,14 @@ const wrapperStyle$2 = /*#__PURE__*/css({
     height: 110
   }
 }, ";label:wrapperStyle;" + ( "" ));
+const inputWrapperStyle = /*#__PURE__*/css({
+  display: "flex",
+  alignItems: "baseline",
+  borderBottom: `1px solid ${colors.gray.lighter}`
+}, ";label:inputWrapperStyle;" + ( "" ));
 const inputStyle = /*#__PURE__*/css({
   outline: 0,
   border: 0,
-  borderBottom: `1px solid ${colors.gray.lighter}`,
   padding: "24px 0 12px 0",
   height: 48,
   borderRadius: 0,
@@ -1180,15 +1184,14 @@ const labelStyle = /*#__PURE__*/css({
   }
 }, ";label:labelStyle;" + ( "" ));
 const messageStyle = /*#__PURE__*/css({ ...typography.s.regular,
-  marginTop: 10,
+  marginTop: 9,
   lineHeight: "10px",
   textAlign: "left"
 }, ";label:messageStyle;" + ( "" ));
-const loadingStyle = /*#__PURE__*/css({
-  right: -10,
-  top: 20,
-  position: "absolute"
-}, ";label:loadingStyle;" + ( "" ));
+const loadingStyle = /*#__PURE__*/css( {
+  name: "1vx6lh0-loadingStyle",
+  styles: "position:relative;top:4px;;label:loadingStyle;"
+} );
 
 const dateClass = /*#__PURE__*/css( {
   name: "1ydb6k9-dateClass",
@@ -1248,6 +1251,7 @@ class Input extends PureComponent {
       type,
       placeholder,
       className,
+      inputWrapperClassName,
       inputClassName,
       highlightClassName,
       loadingClassName,
@@ -1261,12 +1265,15 @@ class Input extends PureComponent {
       textArea,
       required,
       onClick,
-      loading
+      loading,
+      leftElement,
+      rightElement
     } = this.props;
     const {
       isFocused
     } = this.state;
     const _message = errorMessage || successMessage || message;
+    const _inputWrapperClassName = cx(inputWrapperStyle, inputWrapperClassName);
     const _inputClassName = cx(inputStyle, {
       [inputDisabledStyle]: !!disabled,
       [inputReadOnlyStyle]: !!readOnly,
@@ -1287,7 +1294,7 @@ class Input extends PureComponent {
       _pebble_input_highlight_disabled: !!disabled
     }, highlightClassName);
     const labelClassName = cx(labelStyle, {
-      _pebble_input_label_focused: !!(isFocused || !!value || fixLabelAtTop)
+      _pebble_input_label_focused: !!(isFocused || value || fixLabelAtTop || leftElement)
     });
     const _wrapperStyle = cx(wrapperStyle$2, {
       _pebble_input_wrapper_textarea: !!textArea
@@ -1298,9 +1305,15 @@ class Input extends PureComponent {
       onFocus: this.addFocus,
       onBlur: this.removeFocus,
       onClick: onClick
-    }, this.props.textArea ? /*#__PURE__*/createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps)) : /*#__PURE__*/createElement("input", Object.assign({
+    }, /*#__PURE__*/createElement("div", {
+      className: _inputWrapperClassName
+    }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps)) : /*#__PURE__*/createElement("input", Object.assign({
       type: type
-    }, _inputProps, this.props.inputProps)), !!placeholder && /*#__PURE__*/createElement("label", {
+    }, _inputProps, this.props.inputProps)), loading && /*#__PURE__*/createElement(Loader, {
+      color: colors.violet.base,
+      scale: 0.6,
+      className: _loadingStyle
+    }), rightElement === null || rightElement === void 0 ? void 0 : rightElement()), !!placeholder && /*#__PURE__*/createElement("label", {
       className: labelClassName
     }, placeholder, required && /*#__PURE__*/createElement("span", {
       style: {
@@ -1311,10 +1324,6 @@ class Input extends PureComponent {
       style: {
         backgroundColor: getColor(errorMessage, successMessage, true)
       }
-    }), loading && /*#__PURE__*/createElement(Loader, {
-      color: colors.violet.base,
-      scale: 0.6,
-      className: _loadingStyle
     }), _message && /*#__PURE__*/createElement("div", {
       className: messageStyle,
       style: {
@@ -3077,7 +3086,7 @@ const inputStyle$2 = /*#__PURE__*/css({
   ...textEllipsis,
   height: "48px"
 }, ";label:inputStyle;" + ( "" ));
-const inputWrapperStyle = /*#__PURE__*/css({
+const inputWrapperStyle$1 = /*#__PURE__*/css({
   position: "relative",
   borderRadius: "3px",
   fontSize: "14px",
@@ -3151,7 +3160,7 @@ class SecondaryInput extends PureComponent {
       className: inputStyle$2,
       onChange: this.handleChange
     };
-    const inputWrapperClassName = cx(inputWrapperStyle, {
+    const inputWrapperClassName = cx(inputWrapperStyle$1, {
       [inputDisabledStyle$1]: !!disabled,
       [inputReadOnlyStyle$1]: !!readOnly
     }, inputClassName);