@planningcenter/tapestry-react 2.9.1 → 2.10.0-rc.1

package/dist/cjs/NumberField/NumberField.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -13,10 +15,14 @@ var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inh
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _InputField = _interopRequireDefault(require("../Input/InputField"));
 
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
 var _utils = require("../utils");
 
 function ownKeys(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; }
@@ -56,7 +62,9 @@ var NumberField = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getParsedValues", function (value) {
       return {
         value: Number.parseFloat(value),
+        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
         minValue: Number.parseFloat(_this.props.min),
+        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
         maxValue: Number.parseFloat(_this.props.max)
       };
     });
@@ -87,19 +95,40 @@ var NumberField = /*#__PURE__*/function (_Component) {
           maxValue = _this$getParsedValues3.maxValue;
 
       if (value < minValue) {
+        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
         _this.props.onChange(minValue);
       } else if (value > maxValue) {
+        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
         _this.props.onChange(maxValue);
       } else if (isNaN(event.target.value)) {
+        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
         _this.props.onChange(_this.clampValue(value));
       }
 
       if (_this.props.onBlur) {
+        // @ts-ignore
         _this.props.onBlur(event);
       }
 
       _this.firstTouch = true;
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stepValue", function (baseValue, step) {
+      var nextValue = _this.clampValue(baseValue + step);
+
+      var parsedValue = Number.parseFloat( // @ts-ignore Expected 1 arguments, but got 2.ts(2554)
+      baseValue.toString().indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue);
+
+      if (_this.isValueValid(parsedValue)) {
+        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
+        _this.props.onChange(parsedValue);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "incrementValue", function () {
+      return _this.stepValue(_this.props.value, _this.props.step);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "decrementValue", function () {
+      return _this.stepValue(_this.props.value, -_this.props.step);
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (event) {
       if (_this.props.ignoredKeys.includes(event.key)) {
         return;
@@ -110,24 +139,16 @@ var NumberField = /*#__PURE__*/function (_Component) {
           step = _this$props.step;
 
       var _this$getParsedValues4 = _this.getParsedValues(event.target.value),
-          value = _this$getParsedValues4.value,
-          minValue = _this$getParsedValues4.minValue,
-          maxValue = _this$getParsedValues4.maxValue;
+          value = _this$getParsedValues4.value;
 
       if (isNotAcceptedNumberKey(event) || pad && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
         event.preventDefault();
       }
 
-      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-        var increment = (event.key === 'ArrowUp' ? 1 : -1) * step;
-
-        var nextValue = _this.clampValue(value + increment);
-
-        var parsedValue = Number.parseFloat(event.target.value.indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue);
-
-        if (_this.isValueValid(parsedValue)) {
-          _this.props.onChange(parsedValue);
-        }
+      if (event.key === 'ArrowUp') {
+        _this.incrementValue();
+      } else if (event.key === 'ArrowDown') {
+        _this.decrementValue();
       }
 
       if (_this.props.onKeyDown) {
@@ -188,38 +209,30 @@ var NumberField = /*#__PURE__*/function (_Component) {
     return autoWidth || (pad && isValueEmpty ? getPadStringSize(pad) : isValueEmpty && placeholder !== undefined ? placeholder : value);
   };
 
-  _proto.render = function render() {
+  _proto.renderInput = function renderInput(restProps) {
     var _this$props3 = this.props,
-        autoWidth = _this$props3.autoWidth,
         as = _this$props3.as,
         highlightOnInteraction = _this$props3.highlightOnInteraction,
-        ignoredKeys = _this$props3.ignoredKeys,
-        min = _this$props3.min,
-        max = _this$props3.max,
-        moveFocusOnMax = _this$props3.moveFocusOnMax,
-        onChange = _this$props3.onChange,
-        onBlur = _this$props3.onBlur,
-        onInput = _this$props3.onInput,
-        onKeyDown = _this$props3.onKeyDown,
         pad = _this$props3.pad,
-        value = _this$props3.value,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props3, ["autoWidth", "as", "highlightOnInteraction", "ignoredKeys", "min", "max", "moveFocusOnMax", "onChange", "onBlur", "onInput", "onKeyDown", "pad", "value"]);
+        value = _this$props3.value;
     var parsed = this.getParsedValues(value);
     var numberValue = value === null ? '' : value;
 
     if (pad && numberValue !== '') {
       numberValue = (0, _utils.padNumber)(numberValue, pad);
-    }
+    } // @ts-ignore Property 'min' does not exist on type '{ value: number; minValue: number; maxValue: number; }'.ts(2339)
+
 
     if (parsed.min !== MIN_VALUE) {
-      restProps.min = min;
-    }
+      restProps.min = this.props.min;
+    } // @ts-ignore Property 'max' does not exist on type '{ value: number; minValue: number; maxValue: number; }'.ts(2339)
+
 
     if (parsed.max !== MAX_VALUE) {
-      restProps.max = max;
+      restProps.max = this.props.max;
     }
 
-    if (autoWidth !== false) {
+    if (this.props.autoWidth !== false) {
       restProps.autoWidth = this.getAutoWidthValue(numberValue);
 
       if (restProps.autoWidth === undefined) {
@@ -238,11 +251,79 @@ var NumberField = /*#__PURE__*/function (_Component) {
     }));
   };
 
+  _proto.renderInputWithControls = function renderInputWithControls(restProps) {
+    var _this2 = this;
+
+    var inputElement = this.renderInput(restProps);
+
+    if (this.props.hasControls) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, inputElement, /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+        marginRight: -1,
+        marginLeft: 1
+      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        icon: {
+          name: 'general.upCaret'
+        },
+        hover: {
+          backgroundColor: 'grey-1'
+        },
+        minHeight: 1,
+        onClick: function onClick() {
+          return _this2.incrementValue();
+        },
+        paddingVertical: 0.25 // @ts-ignore Type 'string' is not assignable to type 'never'.ts(2322)
+        ,
+        size: "xs",
+        title: "Increment by 1",
+        theme: "naked"
+      }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        icon: {
+          name: 'general.downCaret'
+        },
+        hover: {
+          backgroundColor: 'grey-1'
+        },
+        minHeight: 1,
+        onClick: function onClick() {
+          return _this2.decrementValue();
+        },
+        paddingVertical: 0.25 // @ts-ignore Type 'string' is not assignable to type 'never'.ts(2322)
+        ,
+        size: "xs",
+        title: "Decrement by 1",
+        theme: "naked"
+      })));
+    }
+
+    return inputElement;
+  };
+
+  _proto.render = function render() {
+    var _this$props4 = this.props,
+        autoWidth = _this$props4.autoWidth,
+        as = _this$props4.as,
+        hasControls = _this$props4.hasControls,
+        highlightOnInteraction = _this$props4.highlightOnInteraction,
+        ignoredKeys = _this$props4.ignoredKeys,
+        min = _this$props4.min,
+        max = _this$props4.max,
+        moveFocusOnMax = _this$props4.moveFocusOnMax,
+        onChange = _this$props4.onChange,
+        onBlur = _this$props4.onBlur,
+        onInput = _this$props4.onInput,
+        onKeyDown = _this$props4.onKeyDown,
+        pad = _this$props4.pad,
+        value = _this$props4.value,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props4, ["autoWidth", "as", "hasControls", "highlightOnInteraction", "ignoredKeys", "min", "max", "moveFocusOnMax", "onChange", "onBlur", "onInput", "onKeyDown", "pad", "value"]);
+    return this.props.hasControls ? this.renderInputWithControls(restProps) : this.renderInput(restProps);
+  };
+
   return NumberField;
 }(_react.Component);
 
 (0, _defineProperty2["default"])(NumberField, "defaultProps", {
   as: _InputField["default"],
+  hasControls: false,
   ignoredKeys: [],
   min: MIN_VALUE,
   max: MAX_VALUE,

package/dist/cjs/NumberField/NumberField.test.js

@@ -29,7 +29,13 @@ describe('value', function () {
 
     return /*#__PURE__*/_react["default"].createElement(_NumberField["default"], (0, _extends2["default"])({}, props, {
       "data-testid": "test",
-      value: value,
+      value: value // @ts-ignore No overload matches this call.
+      // Overload 1 of 2, '(props: Props | Readonly<Props>): NumberField', gave the following error.
+      // Type 'Dispatch<any>' is not assignable to type '(value: string) => null'.
+      // Type 'void' is not assignable to type 'null'.
+      // Overload 2 of 2, '(props: Props, context: any): NumberField', gave the following error.
+      // Type 'Dispatch<any>' is not assignable to type '(value: string) => null'.ts(2769)
+      ,
       onChange: setValue
     }));
   };
@@ -110,7 +116,7 @@ describe('value', function () {
     });
   });
   describe('pad', function () {
-    it("add appropriate pad", function () {
+    it('add appropriate pad', function () {
       var numberField = setup({
         value: 0,
         pad: 2

package/dist/cjs/Portal/Portal.js

@@ -40,7 +40,8 @@ var Portal = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_needsUpdate", false);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_updated", false);
     return _this;
-  }
+  } // @ts-ignore error TS2612: Property 'context' will overwrite the base property in 'Component<PortalProps, {}, any>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.
+
 
   var _proto = Portal.prototype;
 

package/dist/cjs/Progress/Progress.js

@@ -15,7 +15,7 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _system = require("../system");
 
-function Progress(_ref) {
+var Progress = function Progress(_ref) {
   var value = _ref.value,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["value"]);
 
@@ -45,7 +45,7 @@ function Progress(_ref) {
       transform: "scaleX(" + value / 100 + ")"
     }
   }));
-}
+};
 
 var _default = Progress;
 exports["default"] = _default;

package/dist/cjs/Radio/Radio.js

@@ -33,9 +33,8 @@ var iconPaths = {
 };
 var radioEmitter = (0, _mitt["default"])();
 
-function Radio(_ref) {
+var Radio = function Radio(_ref) {
   var checked = _ref.checked,
-      css = _ref.css,
       disabled = _ref.disabled,
       id = _ref.id,
       label = _ref.label,
@@ -46,7 +45,7 @@ function Radio(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'xs' : _ref$size,
       value = _ref.value,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["checked", "css", "disabled", "id", "label", "name", "onBlur", "onChange", "onFocus", "size", "value"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["checked", "disabled", "id", "label", "name", "onBlur", "onChange", "onFocus", "size", "value"]);
   var radioTheme = (0, _system.useThemeValue)('radio');
   var inputRef = (0, _react.useRef)();
 
@@ -85,22 +84,27 @@ function Radio(_ref) {
   }, restProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     innerRef: inputRef,
     as: "input",
-    type: "radio",
+    type: "radio" // @ts-ignore Type 'string | number' is not assignable to type 'string'.
+    // Type 'number' is not assignable to type 'string'.ts(2322)
+    ,
     id: id,
     name: name,
     checked: checked,
     value: value,
     disabled: disabled,
     onChange: function onChange(event) {
-      radioEmitter.emit(name, event.target);
+      radioEmitter.emit(name, event.target); // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
+
       _onChange && _onChange(event);
     },
     onFocus: function onFocus(event) {
-      setFocus(true);
+      setFocus(true); // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
+
       _onFocus && _onFocus(event);
     },
     onBlur: function onBlur(event) {
-      setFocus(false);
+      setFocus(false); // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
+
       _onBlur && _onBlur(event);
     },
     position: "absolute",
@@ -152,7 +156,7 @@ function Radio(_ref) {
     lineHeight: 2.5,
     marginLeft: 0.5
   }, label)));
-}
+};
 
 var _default = Radio;
 exports["default"] = _default;

package/dist/cjs/TimeField/TimeField.js

@@ -188,8 +188,13 @@ var TimeField = function TimeField(_ref) {
         setHours(updatedHoursValue);
         setHoursDisplay(updatedHoursValue);
       } else {
-        setHours(updatedHoursValue + 12);
-        setHoursDisplay(updatedHoursValue);
+        if (updatedHoursValue === 12) {
+          setHours(12);
+          setHoursDisplay(12);
+        } else {
+          setHours(updatedHoursValue + 12);
+          setHoursDisplay(updatedHoursValue);
+        }
       }
     } else {
       setHours(updatedHoursValue);

package/dist/cjs/Toolbar/Toolbar.js

@@ -27,6 +27,7 @@ var _utils = require("../utils");
 
 var _Action = _interopRequireDefault(require("./Action"));
 
+// @ts-ignore Should this be ReactNode anyway?
 var Toolbar = /*#__PURE__*/function (_Component) {
   (0, _inheritsLoose2["default"])(Toolbar, _Component);
 

package/dist/cjs/Tooltip/Tooltip.js

@@ -55,7 +55,9 @@ function Tooltip(props, ref) {
       triggerOnFocus = _useThemeProps$trigge === void 0 ? true : _useThemeProps$trigge,
       _useThemeProps$trigge2 = _useThemeProps.triggerOnHover,
       triggerOnHover = _useThemeProps$trigge2 === void 0 ? true : _useThemeProps$trigge2,
-      childProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 9999 : _useThemeProps$zIndex,
+      childProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover", "zIndex"]);
 
   var isPageInView = (0, _react.useRef)(true);
   var isMouseDown = (0, _react.useRef)(false);
@@ -194,7 +196,7 @@ function Tooltip(props, ref) {
     radius: 2,
     backgroundColor: "grey-9",
     color: "rgba(255,255,255,0.94)",
-    zIndex: 9999
+    zIndex: zIndex
   }, popoverProps, {
     anchorElement: /*#__PURE__*/(0, _react.cloneElement)(child, childProps),
     onMouseEnter: createOpenTimeout,

package/dist/cjs/Wizard/Wizard.js

@@ -37,7 +37,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function Wizard(props) {
+var Wizard = function Wizard(props) {
   var _useThemeProps = (0, _system.useThemeProps)('wizard', props),
       _useThemeProps$autoFo = _useThemeProps.autoFocus,
       autoFocus = _useThemeProps$autoFo === void 0 ? true : _useThemeProps$autoFo,
@@ -92,7 +92,7 @@ function Wizard(props) {
         });
       });
     };
-  }, [steps]);
+  }, []);
   var isCurrentStepValid = (0, _react.useCallback)(function () {
     var currentStep = steps[activeStepIndex];
     return currentStep && currentStep.valid ? currentStep.valid(payload) : true;
@@ -106,7 +106,7 @@ function Wizard(props) {
       setSendingPayload(true);
       onSubmit(payload, _complete);
     }
-  }, [payload]);
+  }, [onSubmit, payload]);
   return /*#__PURE__*/_react["default"].createElement(_WizardContext["default"].Provider, {
     value: {
       activeStepIndex: activeStepIndex,
@@ -183,7 +183,7 @@ function Wizard(props) {
       totalSteps: totalSteps
     })
   }, buttonProps, nextButtonProps))))));
-}
+};
 
 var _default = Wizard;
 exports["default"] = _default;

package/dist/cjs/system/button-themes.js

@@ -191,63 +191,63 @@ var buttonThemes = {
   },
   error: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'red-5',
+      color: 'white',
+      backgroundColor: 'error',
       hover: {
-        backgroundColor: 'red-4'
+        backgroundColor: 'error-dark'
       },
       active: {
-        backgroundColor: 'red-3'
+        backgroundColor: 'error-darker'
       }
     },
     outline: {
-      stroke: 'red-5',
-      color: 'red-5',
+      stroke: 'error',
+      color: 'error',
       hover: {
-        backgroundColor: 'red-0'
+        backgroundColor: 'error-lightest'
       },
       active: {
-        backgroundColor: 'red-1'
+        backgroundColor: 'error-lighter'
       }
     },
     naked: {
       color: 'error',
       hover: {
-        backgroundColor: 'red-0'
+        backgroundColor: 'error-lightest'
       },
       active: {
-        backgroundColor: 'red-1'
+        backgroundColor: 'error-lighter'
       }
     }
   },
   success: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'green-5',
+      color: 'white',
+      backgroundColor: 'success',
       hover: {
-        backgroundColor: 'green-4'
+        backgroundColor: 'success-dark'
       },
       active: {
-        backgroundColor: 'green-3'
+        backgroundColor: 'success-darker'
       }
     },
     outline: {
-      stroke: 'green-5',
-      color: 'green-5',
+      stroke: 'success',
+      color: 'success',
       hover: {
-        backgroundColor: 'green-0'
+        backgroundColor: 'success-lightest'
       },
       active: {
-        backgroundColor: 'green-1'
+        backgroundColor: 'success-lighter'
       }
     },
     naked: {
-      color: 'green',
+      color: 'success',
       hover: {
-        backgroundColor: 'green-0'
+        backgroundColor: 'success-lightest'
       },
       active: {
-        backgroundColor: 'green-1'
+        backgroundColor: 'success-lighter'
       }
     }
   },

package/dist/cjs/system/colors/utils.js

@@ -19,6 +19,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _polished = require("polished");
 
+var _utils = require("../../utils");
+
 function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -101,7 +103,7 @@ function flattenPalette(palette) {
 
     var value = parsedPalette[key];
     var aliasValue = parsedPalette[value];
-    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? "var(--colors-" + value + ")" : value, _objectSpread5));
+    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? (0, _utils.getCSSProperty)('colors', value) : value, _objectSpread5));
   }, {});
 } // ported from ChromaJS
 // https://github.com/gka/chroma.js/blob/d2c6d917df4ba2b87d8a740de116a0656bcbdfd5/src/io/lightness.coffee

package/dist/cjs/system/utils.js

@@ -165,6 +165,7 @@ function useThemeValue(path, defaultValue) {
 }
 
 function useThemeProps(path, props) {
+  // @ts-ignore error TS2554: Expected 2 arguments, but got 1
   return _objectSpread(_objectSpread({}, useThemeValue(path)), props);
 }
 
@@ -173,6 +174,7 @@ function useBoxSize(size) {
     size = 'md';
   }
 
+  // @ts-ignore error TS2554: Expected 2 arguments, but got 1
   var boxSizes = useThemeValue('boxSizes');
   var navigateSize = (0, _react.useCallback)(function (amount) {
     var index = Object.keys(boxSizes).indexOf(size);

package/dist/esm/Badge/Badge.js

@@ -66,9 +66,13 @@ function Badge(_ref) {
   }
 
   if (badgeProps.radius === 'circle') {
-    textStyle.position = 'absolute';
-    textStyle.top = '50%';
-    textStyle.left = '50%';
+    // @ts-ignore error TS2339: Property 'position' does not exist on type ...
+    textStyle.position = 'absolute'; // @ts-ignore error TS2339: Property 'top' does not exist on type ...
+
+    textStyle.top = '50%'; // @ts-ignore error TS2339: Property 'left' does not exist on type ...
+
+    textStyle.left = '50%'; // @ts-ignore error TS2339: Property 'transform' does not exist on type ...
+
     textStyle.transform = 'translate(-50%, -50%)';
   }
 
@@ -105,8 +109,12 @@ function Badge(_ref) {
     position: "absolute",
     top: 0,
     left: 0
-  }, typeof renderLeft === 'string' ? renderLeft : /*#__PURE__*/cloneElement(renderLeft, {
-    size: renderLeft.props && renderLeft.props.size || badgeProps.size
+  }, typeof renderLeft === 'string' ? renderLeft // @ts-ignore error TS2769: No overload matches this call.
+  :
+  /*#__PURE__*/
+  cloneElement(renderLeft, {
+    size: // @ts-ignore error TS2339: Property 'props' does not exist on type ...
+    renderLeft.props && renderLeft.props.size || badgeProps.size
   })), typeof title === 'undefined' ? children : /*#__PURE__*/React.createElement(Text, textStyle, title), renderRight && /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     alignItems: "center",
@@ -116,8 +124,12 @@ function Badge(_ref) {
     position: "absolute",
     top: 0,
     right: 0
-  }, typeof renderRight === 'string' ? renderRight : /*#__PURE__*/cloneElement(renderRight, {
-    size: renderRight.props && renderRight.props.size || badgeProps.size
+  }, typeof renderRight === 'string' ? renderRight // @ts-ignore error TS2769: No overload matches this call.
+  :
+  /*#__PURE__*/
+  cloneElement(renderRight, {
+    size: // @ts-ignore error TS2339: Property 'props' does not exist on type ...
+    renderRight.props && renderRight.props.size || badgeProps.size
   })));
 }