pebble-web 2.11.1 → 2.13.0

package/dist/pebble-web.module.js

@@ -476,13 +476,13 @@ var Button = function Button(_ref) {
       _ref$showRipple = _ref.showRipple,
       showRipple = _ref$showRipple === void 0 ? true : _ref$showRipple,
       loading = _ref.loading,
-      filled = _ref.filled,
+      outline = _ref.outline,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "small" : _ref$size,
       buttonProps = _ref.buttonProps;
   var disableAction = disabled || loading;
-  var _filled = size !== "x-small" && filled !== false;
-  var _className = cx(getButtonStyle(size, type, !!showShadow, _filled), className);
+  var _outline = size === "x-small" || !!outline;
+  var _className = cx(getButtonStyle(size, type, !!showShadow, !_outline), className);
   return /*#__PURE__*/createElement("button", Object.assign({
     className: _className,
     onClick: !disableAction ? onClick : undefined,
@@ -1193,10 +1193,14 @@ var wrapperStyle$2 = /*#__PURE__*/css({
     height: 110
   }
 }, ";label:wrapperStyle;" + ( "" ));
+var inputWrapperStyle = /*#__PURE__*/css({
+  display: "flex",
+  alignItems: "baseline",
+  borderBottom: "1px solid ".concat(colors.gray.lighter)
+}, ";label:inputWrapperStyle;" + ( "" ));
 var inputStyle = /*#__PURE__*/css(_objectSpread$7(_objectSpread$7(_objectSpread$7({
   outline: 0,
   border: 0,
-  borderBottom: "1px solid ".concat(colors.gray.lighter),
   padding: "24px 0 12px 0",
   height: 48,
   borderRadius: 0
@@ -1247,15 +1251,14 @@ var labelStyle = /*#__PURE__*/css({
   }
 }, ";label:labelStyle;" + ( "" ));
 var messageStyle = /*#__PURE__*/css(_objectSpread$7(_objectSpread$7({}, typography.s.regular), {}, {
-  marginTop: 10,
+  marginTop: 9,
   lineHeight: "10px",
   textAlign: "left"
 }), ";label:messageStyle;" + ( "" ));
-var loadingStyle = /*#__PURE__*/css({
-  right: -10,
-  top: 20,
-  position: "absolute"
-}, ";label:loadingStyle;" + ( "" ));
+var loadingStyle = /*#__PURE__*/css( {
+  name: "1vx6lh0-loadingStyle",
+  styles: "position:relative;top:4px;;label:loadingStyle;"
+} );
 
 function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -1327,6 +1330,7 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
           type = _this$props.type,
           placeholder = _this$props.placeholder,
           className = _this$props.className,
+          inputWrapperClassName = _this$props.inputWrapperClassName,
           inputClassName = _this$props.inputClassName,
           highlightClassName = _this$props.highlightClassName,
           loadingClassName = _this$props.loadingClassName,
@@ -1340,9 +1344,12 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
           textArea = _this$props.textArea,
           required = _this$props.required,
           onClick = _this$props.onClick,
-          loading = _this$props.loading;
+          loading = _this$props.loading,
+          leftElement = _this$props.leftElement,
+          rightElement = _this$props.rightElement;
       var isFocused = this.state.isFocused;
       var _message = errorMessage || successMessage || message;
+      var _inputWrapperClassName = cx(inputWrapperStyle, inputWrapperClassName);
       var _inputClassName = cx(inputStyle, (_cx2 = {}, _defineProperty(_cx2, inputDisabledStyle, !!disabled), _defineProperty(_cx2, inputReadOnlyStyle, !!readOnly), _defineProperty(_cx2, inputTextAreaStyle, !!textArea), _cx2), inputClassName);
       var _inputProps = {
         "aria-label": placeholder ? placeholder : undefined,
@@ -1359,7 +1366,7 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
         _pebble_input_highlight_disabled: !!disabled
       }, highlightClassName);
       var labelClassName = cx(labelStyle, {
-        _pebble_input_label_focused: !!(isFocused || !!value || fixLabelAtTop)
+        _pebble_input_label_focused: !!(isFocused || value || fixLabelAtTop || leftElement)
       });
       var _wrapperStyle = cx(wrapperStyle$2, {
         _pebble_input_wrapper_textarea: !!textArea
@@ -1370,9 +1377,15 @@ var Input = /*#__PURE__*/function (_React$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: {
@@ -1383,10 +1396,6 @@ var Input = /*#__PURE__*/function (_React$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: {
@@ -3378,7 +3387,7 @@ var inputStyle$2 = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({
 }, textEllipsis), {}, {
   height: "48px"
 }), ";label:inputStyle;" + ( "" ));
-var inputWrapperStyle = /*#__PURE__*/css({
+var inputWrapperStyle$1 = /*#__PURE__*/css({
   position: "relative",
   borderRadius: "3px",
   fontSize: "14px",
@@ -3459,7 +3468,7 @@ var SecondaryInput = /*#__PURE__*/function (_React$PureComponent) {
         className: inputStyle$2,
         onChange: this.handleChange
       };
-      var inputWrapperClassName = cx(inputWrapperStyle, (_cx2 = {}, _defineProperty(_cx2, inputDisabledStyle$1, !!disabled), _defineProperty(_cx2, inputReadOnlyStyle$1, !!readOnly), _cx2), inputClassName);
+      var inputWrapperClassName = cx(inputWrapperStyle$1, (_cx2 = {}, _defineProperty(_cx2, inputDisabledStyle$1, !!disabled), _defineProperty(_cx2, inputReadOnlyStyle$1, !!readOnly), _cx2), inputClassName);
       var placeholderClassName = cx(placeholderStyle, {
         _pebble_secondary_input_label_focused: isFocused || !!value
       });