@planningcenter/tapestry-react 2.6.0 → 2.6.2

package/dist/cjs/Collapse/Collapse.js

@@ -103,7 +103,9 @@ function Collapse(props) {
     }
 
     if (instantRender) {
-      handleComplete();
+      requestAnimationFrame(function () {
+        return handleComplete();
+      });
     }
 
     node.addEventListener('transitionend', handleTransitionEnd);

package/dist/cjs/Dropdown/Dropdown.js

@@ -67,6 +67,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "togglePopover", function (event) {
+      _this.setState({
+        preventBlur: false
+      });
+
       if (_this.state.isPopoverOpen) {
         _this.closePopover(event);
       } else {
@@ -91,7 +95,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       }
     });
     _this.state = {
-      isPopoverOpen: props.defaultOpen || props.forceOpen
+      isPopoverOpen: props.defaultOpen || props.forceOpen,
+      preventBlur: false
     };
     _this.id = (0, _utils.generateId)('dropdown');
     return _this;
@@ -194,7 +199,15 @@ var Dropdown = /*#__PURE__*/function (_Component) {
               }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
                 name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
                 size: 'sm'
-              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick(event) {
+              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = function onBlur(event) {
+                if (_this2.state.preventBlur) {
+                  _this2.setState({
+                    preventBlur: false
+                  });
+                } else {
+                  requestBlur(event);
+                }
+              }, _objectSpread2.onClick = function onClick(event) {
                 _this2.togglePopover();
 
                 if (!isPopoverOpen) {
@@ -260,6 +273,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
                       }
                     });
                 }
+              }, _objectSpread2.onMouseDown = function onMouseDown() {
+                _this2.setState({
+                  preventBlur: true
+                });
               }, _objectSpread2), restProps);
 
               if ( /*#__PURE__*/_react["default"].isValidElement(triggerElement)) {

package/dist/cjs/Input/Input.js

@@ -78,7 +78,8 @@ var Input = /*#__PURE__*/function (_Component) {
         highlightOnInteraction = _this$props.highlightOnInteraction,
         type = _this$props.type,
         value = _this$props.value,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value"]);
+        required = _this$props.required,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value", "required"]);
     var ariaLabel = restProps['aria-label'];
 
     if (ariaLabel) {
@@ -119,7 +120,8 @@ var Input = /*#__PURE__*/function (_Component) {
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
-      onKeyUp: onKeyUp
+      onKeyUp: onKeyUp,
+      required: required
     }));
   };
 

package/dist/cjs/Modal/Modal.js

@@ -60,11 +60,13 @@ function Modal(_ref) {
     }
   }, scrimProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
     backgroundColor: "surface",
+    boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
     innerRef: modalRef,
     margin: 4,
     maxWidth: 60,
-    padding: 2,
-    radius: 3,
+    padding: 4,
+    paddingBottom: 3,
+    radius: 8,
     width: "100%"
   }, themeProps), children));
 }

package/dist/cjs/TimeField/TimeField.js

@@ -33,6 +33,9 @@ var _utils = require("../utils");
 
 var _utils2 = require("./utils");
 
+var MIN_MINUTE = 0;
+var MAX_MINUTE = 59;
+
 var TimeField = /*#__PURE__*/function (_Component) {
   (0, _inheritsLoose2["default"])(TimeField, _Component);
 
@@ -89,9 +92,31 @@ var TimeField = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHoursKeyDown", function (event) {
+      var hour = Number(event.target.value);
+      var isTwelveHourClock = _this.props.twelveHourClock;
+      var isHourEleven = _utils2.HOURS_TO_NOON - 1;
+      var maxHour = isTwelveHourClock ? _utils2.HOURS_TO_NOON : _utils2.HOURS_IN_DAY - 1;
+      var minHour = isTwelveHourClock ? 1 : 0;
+
       if (event.key === 'ArrowRight') {
         _this.inputBox.focus(1);
       }
+
+      if (event.key === 'ArrowUp' && isTwelveHourClock && hour === isHourEleven) {
+        _this.toggleMeridiem();
+      }
+
+      if (event.key === 'ArrowUp' && hour === maxHour) {
+        _this.updateHours(1);
+      }
+
+      if (event.key === 'ArrowDown' && isTwelveHourClock && hour === minHour) {
+        _this.toggleMeridiem();
+      }
+
+      if (event.key === 'ArrowDown' && hour === minHour) {
+        _this.updateHours(-1);
+      }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMinutesChange", function (minutes) {
       _this.updateTime({
@@ -99,6 +124,8 @@ var TimeField = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMinutesKeyDown", function (event) {
+      var minute = Number(event.target.value);
+
       if (_this.props.ignoredKeys.includes(event.key)) {
         return;
       }
@@ -110,6 +137,14 @@ var TimeField = /*#__PURE__*/function (_Component) {
       if (event.key === 'ArrowRight') {
         _this.inputBox.focus(2);
       }
+
+      if (event.key === 'ArrowUp' && minute >= MAX_MINUTE) {
+        _this.updateMinutes(1);
+      }
+
+      if (event.key === 'ArrowDown' && minute <= MIN_MINUTE) {
+        _this.updateMinutes(-1);
+      }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAMPMKeyDown", function (event) {
       if (_this.props.ignoredKeys.includes(event.key)) {
@@ -200,8 +235,8 @@ var TimeField = /*#__PURE__*/function (_Component) {
       fontVariantNumeric: "tabular-nums",
       moveFocusOnMax: true,
       value: minutes,
-      min: 0,
-      max: 59,
+      min: MIN_MINUTE,
+      max: MAX_MINUTE,
       pad: 2,
       grow: 0,
       width: "2ch",

package/dist/cjs/TimeField/TimeField.test.js

@@ -204,7 +204,7 @@ it('does not change the meridiem on arrow key if arrow keys are ignored', functi
 
   expect(meridiemInput).toHaveValue('PM');
 });
-it('changes the value of hours on arrow up or arrow down', function () {
+it('increment hour on arrow up', function () {
   var _setup15 = setup({
     hours: 1,
     minutes: 42
@@ -217,13 +217,182 @@ it('changes the value of hours on arrow up or arrow down', function () {
 
   expect(hourInput).toHaveValue("02");
 });
-it('does not change the value of hours on arrow up or arrow down if ignored', function () {
+it('increment hour if arrow up on minutes exceeds max value', function () {
   var _setup16 = setup({
+    hours: 1,
+    minutes: 59
+  }),
+      hourInput = _setup16.hourInput,
+      minuteInput = _setup16.minuteInput;
+
+  expect(hourInput).toHaveValue("01");
+
+  _userEvent["default"].type(minuteInput, '{arrowup}');
+
+  expect(hourInput).toHaveValue("02");
+});
+it('decrement hour on arrow down', function () {
+  var _setup17 = setup({
+    hours: 2,
+    minutes: 42
+  }),
+      hourInput = _setup17.hourInput;
+
+  expect(hourInput).toHaveValue("02");
+
+  _userEvent["default"].type(hourInput, '{arrowdown}');
+
+  expect(hourInput).toHaveValue("01");
+});
+it('decrement hour if arrow down on minutes exceeds min value', function () {
+  var _setup18 = setup({
+    hours: 2,
+    minutes: 0
+  }),
+      hourInput = _setup18.hourInput,
+      minuteInput = _setup18.minuteInput;
+
+  expect(hourInput).toHaveValue("02");
+
+  _userEvent["default"].type(minuteInput, '{arrowdown}');
+
+  expect(hourInput).toHaveValue("01");
+});
+it('increment minute on arrow up', function () {
+  var _setup19 = setup({
+    hours: 1,
+    minutes: 42
+  }),
+      minuteInput = _setup19.minuteInput;
+
+  expect(minuteInput).toHaveValue("42");
+
+  _userEvent["default"].type(minuteInput, '{arrowup}');
+
+  expect(minuteInput).toHaveValue("43");
+});
+it('decrement minute on arrow down', function () {
+  var _setup20 = setup({
+    hours: 2,
+    minutes: 43
+  }),
+      minuteInput = _setup20.minuteInput;
+
+  expect(minuteInput).toHaveValue("43");
+
+  _userEvent["default"].type(minuteInput, '{arrowdown}');
+
+  expect(minuteInput).toHaveValue("42");
+});
+it('set minute to min value if arrow up on minutes exceeds max value', function () {
+  var _setup21 = setup({
+    hours: 1,
+    minutes: 59
+  }),
+      minuteInput = _setup21.minuteInput;
+
+  expect(minuteInput).toHaveValue("59");
+
+  _userEvent["default"].type(minuteInput, '{arrowup}');
+
+  expect(minuteInput).toHaveValue("00");
+});
+it('set minute to max value if arrow down on minutes exceeds min value', function () {
+  var _setup22 = setup({
+    hours: 1,
+    minutes: 0
+  }),
+      minuteInput = _setup22.minuteInput;
+
+  expect(minuteInput).toHaveValue("00");
+
+  _userEvent["default"].type(minuteInput, '{arrowdown}');
+
+  expect(minuteInput).toHaveValue("59");
+});
+it('toggle meridiem if arrow up on hour exceeds eleven', function () {
+  var _setup23 = setup({
+    hours: 11
+  }),
+      hourInput = _setup23.hourInput,
+      meridiemInput = _setup23.meridiemInput;
+
+  expect(meridiemInput).toHaveValue('AM');
+
+  _userEvent["default"].type(hourInput, '{arrowup}');
+
+  expect(meridiemInput).toHaveValue('PM');
+});
+it('toggle meridiem if arrow down on hour exceeds min value', function () {
+  var _setup24 = setup({
+    hours: 1
+  }),
+      hourInput = _setup24.hourInput,
+      meridiemInput = _setup24.meridiemInput;
+
+  expect(meridiemInput).toHaveValue('AM');
+
+  _userEvent["default"].type(hourInput, '{arrowdown}');
+
+  expect(meridiemInput).toHaveValue('PM');
+});
+it('set 12 hour clock to min value if arrow up on hour exceeds max value', function () {
+  var _setup25 = setup({
+    hours: 12
+  }),
+      hourInput = _setup25.hourInput;
+
+  expect(hourInput).toHaveValue("12");
+
+  _userEvent["default"].type(hourInput, '{arrowup}');
+
+  expect(hourInput).toHaveValue("01");
+});
+it('set 24 hour clock to min value if arrow up on hour exceeds max value', function () {
+  var _setup26 = setup({
+    hours: 23,
+    twelveHourClock: false
+  }),
+      hourInput = _setup26.hourInput;
+
+  expect(hourInput).toHaveValue("23");
+
+  _userEvent["default"].type(hourInput, '{arrowup}');
+
+  expect(hourInput).toHaveValue("00");
+});
+it('set 12 hour clock to max value if arrow down on hour exceeds min value', function () {
+  var _setup27 = setup({
+    hours: 1
+  }),
+      hourInput = _setup27.hourInput;
+
+  expect(hourInput).toHaveValue("01");
+
+  _userEvent["default"].type(hourInput, '{arrowdown}');
+
+  expect(hourInput).toHaveValue("12");
+});
+it('set 24 hour clock to max value if arrow down on hour exceeds min value', function () {
+  var _setup28 = setup({
+    hours: 0,
+    twelveHourClock: false
+  }),
+      hourInput = _setup28.hourInput;
+
+  expect(hourInput).toHaveValue("00");
+
+  _userEvent["default"].type(hourInput, '{arrowdown}');
+
+  expect(hourInput).toHaveValue("23");
+});
+it('does not change the value of hours on arrow up or arrow down if ignored', function () {
+  var _setup29 = setup({
     hours: 1,
     minutes: 42,
     ignoredKeys: ['ArrowUp', 'ArrowDown']
   }),
-      hourInput = _setup16.hourInput;
+      hourInput = _setup29.hourInput;
 
   expect(hourInput).toHaveValue("01");
 
@@ -236,12 +405,12 @@ it('does not change the value of hours on arrow up or arrow down if ignored', fu
   expect(hourInput).toHaveValue("01");
 });
 it('does not change the value of minutes on arrow up or arrow down if ignored', function () {
-  var _setup17 = setup({
+  var _setup30 = setup({
     hours: 1,
     minutes: 42,
     ignoredKeys: ['ArrowUp', 'ArrowDown']
   }),
-      minuteInput = _setup17.minuteInput;
+      minuteInput = _setup30.minuteInput;
 
   expect(minuteInput).toHaveValue("42");
 
@@ -255,15 +424,15 @@ it('does not change the value of minutes on arrow up or arrow down if ignored',
 }); // ios
 
 it('renders iOS as a single input', function () {
-  var _setup18 = setup({
+  var _setup31 = setup({
     isIOS: true,
     hours: 13,
     minutes: 42
   }),
-      container = _setup18.container,
-      hourInput = _setup18.hourInput,
-      minuteInput = _setup18.minuteInput,
-      meridiemInput = _setup18.meridiemInput;
+      container = _setup31.container,
+      hourInput = _setup31.hourInput,
+      minuteInput = _setup31.minuteInput,
+      meridiemInput = _setup31.meridiemInput;
 
   var singleTimeInput = container.querySelector('[type=time]');
   expect(singleTimeInput).toHaveValue('13:42');

package/dist/cjs/Tooltip/Tooltip.test.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = require("..");
+
+describe('Tooltip', function () {
+  test('does not render string when closed', function () {
+    var string = 'Test Text';
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+      title: string
+    }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor")));
+    expect(_react2.screen.queryByText(string)).toBeNull();
+  });
+  test('renders string on hover', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var string, tooltip;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            string = 'Test Text';
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+              title: string
+            }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor")));
+
+            _userEvent["default"].hover(_react2.screen.getByText('Tooltip anchor'));
+
+            _context.next = 5;
+            return _react2.screen.findByText(string);
+
+          case 5:
+            tooltip = _context.sent;
+            expect(tooltip).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test('renders string on focus', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var string, tooltip;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            string = 'Test Text';
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+              title: string,
+              triggerOnFocus: true
+            }, /*#__PURE__*/_react["default"].createElement(_.Button, null, "Tooltip anchor")));
+
+            _userEvent["default"].tab();
+
+            _context2.next = 5;
+            return _react2.screen.findByText(string);
+
+          case 5:
+            tooltip = _context2.sent;
+            expect(tooltip).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test('removes string after timeout', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var string, anchor, tooltip;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            string = 'Test Text';
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+              title: string
+            }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor")));
+            anchor = _react2.screen.getByText('Tooltip anchor');
+            expect(_react2.screen.queryByText(string)).toBeNull();
+
+            _userEvent["default"].hover(anchor);
+
+            _context3.next = 7;
+            return _react2.screen.findByText(string);
+
+          case 7:
+            tooltip = _context3.sent;
+            expect(tooltip).toBeInTheDocument();
+
+            _userEvent["default"].unhover(anchor);
+
+            _context3.next = 12;
+            return (0, _react2.waitFor)(function () {
+              expect(_react2.screen.queryByText(string)).not.toBeInTheDocument();
+            });
+
+          case 12:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  test('stays open when hovering a custom tooltip', function () {
+    var CustomTooltip = function CustomTooltip() {
+      var _hooks$useHover = _.hooks.useHover(),
+          hover = _hooks$useHover.hover,
+          hoverProps = _hooks$useHover.hoverProps;
+
+      return /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+        title: /*#__PURE__*/_react["default"].createElement(_.Link, {
+          to: "#"
+        }, /*#__PURE__*/_react["default"].createElement(_.StackView, null, /*#__PURE__*/_react["default"].createElement(_.Text, {
+          "data-hover": hover
+        }, string)))
+      }, /*#__PURE__*/_react["default"].createElement(_.Button, hoverProps, "Tooltip anchor"));
+    };
+
+    var string = 'Test Text';
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(CustomTooltip, null));
+
+    var anchor = _react2.screen.getByText('Tooltip anchor');
+
+    _userEvent["default"].hover(anchor);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+
+    var tooltip = _react2.screen.getByText(string);
+
+    expect(tooltip).toBeInTheDocument();
+
+    _userEvent["default"].unhover(anchor);
+
+    _userEvent["default"].hover(tooltip);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).toBeInTheDocument();
+
+    _userEvent["default"].unhover(tooltip);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).not.toBeInTheDocument();
+  });
+  test('cleans up pageViewChange listeners', function () {
+    window.removeEventListener = jest.fn().mockImplementation(function (event, callback) {});
+    document.removeEventListener = jest.fn().mockImplementation(function (event, callback) {});
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+      title: "Test Text"
+    }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor"))),
+        unmount = _render.unmount;
+
+    unmount();
+    expect(window.removeEventListener).toBeCalledWith('focus', expect.any(Function));
+    expect(window.removeEventListener).toBeCalledWith('blur', expect.any(Function));
+    expect(document.removeEventListener).toBeCalledWith('visibilitychange', expect.any(Function));
+  });
+});

package/dist/esm/Collapse/Collapse.js

@@ -93,7 +93,9 @@ function Collapse(props) {
     }
 
     if (instantRender) {
-      handleComplete();
+      requestAnimationFrame(function () {
+        return handleComplete();
+      });
     }
 
     node.addEventListener('transitionend', handleTransitionEnd);

package/dist/esm/Dropdown/Dropdown.js

@@ -49,6 +49,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "togglePopover", function (event) {
+      _this.setState({
+        preventBlur: false
+      });
+
       if (_this.state.isPopoverOpen) {
         _this.closePopover(event);
       } else {
@@ -75,7 +79,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     });
 
     _this.state = {
-      isPopoverOpen: props.defaultOpen || props.forceOpen
+      isPopoverOpen: props.defaultOpen || props.forceOpen,
+      preventBlur: false
     };
     _this.id = generateId('dropdown');
     return _this;
@@ -179,7 +184,15 @@ var Dropdown = /*#__PURE__*/function (_Component) {
               }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
                 name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
                 size: 'sm'
-              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick(event) {
+              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = function onBlur(event) {
+                if (_this2.state.preventBlur) {
+                  _this2.setState({
+                    preventBlur: false
+                  });
+                } else {
+                  requestBlur(event);
+                }
+              }, _objectSpread2.onClick = function onClick(event) {
                 _this2.togglePopover();
 
                 if (!isPopoverOpen) {
@@ -245,6 +258,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
                       }
                     });
                 }
+              }, _objectSpread2.onMouseDown = function onMouseDown() {
+                _this2.setState({
+                  preventBlur: true
+                });
               }, _objectSpread2), restProps);
 
               if ( /*#__PURE__*/React.isValidElement(triggerElement)) {

package/dist/esm/Input/Input.js

@@ -64,7 +64,8 @@ var Input = /*#__PURE__*/function (_Component) {
         highlightOnInteraction = _this$props.highlightOnInteraction,
         type = _this$props.type,
         value = _this$props.value,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value"]);
+        required = _this$props.required,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value", "required"]);
 
     var ariaLabel = restProps['aria-label'];
 
@@ -106,7 +107,8 @@ var Input = /*#__PURE__*/function (_Component) {
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
-      onKeyUp: onKeyUp
+      onKeyUp: onKeyUp,
+      required: required
     }));
   };
 

package/dist/esm/Modal/Modal.js

@@ -44,11 +44,13 @@ function Modal(_ref) {
     }
   }, scrimProps), /*#__PURE__*/React.createElement(Box, _extends({
     backgroundColor: "surface",
+    boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
     innerRef: modalRef,
     margin: 4,
     maxWidth: 60,
-    padding: 2,
-    radius: 3,
+    padding: 4,
+    paddingBottom: 3,
+    radius: 8,
     width: "100%"
   }, themeProps), children));
 }