@pedidopago/ui 1.0.8 → 1.1.2

package/dist/components/DatePicker/components/DatePickerContent.js

@@ -13,6 +13,8 @@ var _styles = require("../styles");
 
 var _getMonthName = require("../utils/getMonthName");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -107,7 +109,7 @@ var DatePickerContent = function DatePickerContent(_ref) {
     return groupedDaysWithWeekDays;
   };
 
-  return /*#__PURE__*/React.createElement(_framerMotion.motion.div, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
     initial: {
       opacity: 0
     },
@@ -119,85 +121,117 @@ var DatePickerContent = function DatePickerContent(_ref) {
     },
     transition: {
       duration: 0.2
-    }
-  }, /*#__PURE__*/React.createElement(_styles.DatePickerContainer, {
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(_styles.DatePickerHeader, null, /*#__PURE__*/React.createElement(_styles.DatePickerHeaderButton, {
-    onClick: function onClick() {
-      return handleChangeMonth(date.getMonth(), 'down');
-    },
-    isHidden: minDate && minDate.toLocaleString() === date.toLocaleString()
-  }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "arrow-left"
-  })), /*#__PURE__*/React.createElement(_styles.DatePickerHeaderTitle, {
-    onClick: function onClick() {
-      return handleToggleYearPicker === null || handleToggleYearPicker === void 0 ? void 0 : handleToggleYearPicker();
-    },
-    enableYearPicker: enableYearPicker
-  }, (0, _getMonthName.getMonthName)(date.getMonth()), " ", date.getFullYear(), enableYearPicker && /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "edit",
-    size: "15px"
-  })), /*#__PURE__*/React.createElement(_styles.DatePickerHeaderButton, {
-    onClick: function onClick() {
-      return handleChangeMonth(date.getMonth(), 'up');
     },
-    isHidden: maxDate && maxDate.toLocaleString() === date.toLocaleString()
-  }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "arrow-right"
-  }))), /*#__PURE__*/React.createElement(_styles.DatePickerBody, null, /*#__PURE__*/React.createElement(_styles.DatePickerBodyTable, {
-    role: "table"
-  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "D"), /*#__PURE__*/React.createElement("th", null, "S"), /*#__PURE__*/React.createElement("th", null, "T"), /*#__PURE__*/React.createElement("th", null, "Q"), /*#__PURE__*/React.createElement("th", null, "Q"), /*#__PURE__*/React.createElement("th", null, "S"), /*#__PURE__*/React.createElement("th", null, "S"))), /*#__PURE__*/React.createElement("tbody", null, getMonthDaysWithWeekDays(date.getMonth(), date.getFullYear()).map(function (days, rowIndex) {
-    return /*#__PURE__*/React.createElement(_styles.DatePickerTableRow, {
-      key: rowIndex,
-      role: "row",
-      isRange: type === 'range'
-    }, days.map(function (day, dayIndex) {
-      var monthDaysLength = getMonthDaysWithWeekDays(date.getMonth(), date.getFullYear()).length;
-      var isPreviousMonth = !!(rowIndex === 0 && day > 7);
-      var isNextMonth = !!(rowIndex === monthDaysLength - 1 && day < 7);
-      var dateMonth = isPreviousMonth ? date.getMonth() - 1 : isNextMonth ? date.getMonth() + 1 : date.getMonth();
-      var cellDate = new Date(date.getFullYear(), dateMonth, day);
-      var cellTitle = cellDate.toLocaleDateString();
-      var isToday = cellDate.toLocaleDateString() === new Date().toLocaleDateString();
-      var isStartDateOfRange = cellDate.toLocaleDateString() === startDate.toLocaleDateString();
-      var isEndDateOfRange = cellDate.toLocaleDateString() === endDate.toLocaleDateString();
-      var isDisabled = day === 0;
-      var isExtended = variant === 'extended';
-      var removeZeros = days.filter(function (day) {
-        return day !== 0;
-      });
-      return /*#__PURE__*/React.createElement(_styles.DatePickerTableCell, {
-        key: dayIndex,
-        role: "gridcell",
-        title: cellTitle,
-        "data-date": cellDate,
-        tabIndex: -1,
-        disabled: isDisabled,
-        "aria-label": cellDate.toLocaleDateString('pt-BR', {
-          weekday: 'short',
-          year: '2-digit',
-          month: '2-digit',
-          day: '2-digit'
-        }),
-        "aria-selected": type === 'range' ? isStartDateOfRange || isEndDateOfRange || isInTheRange(cellDate) : isStartDateOfRange,
-        "aria-disabled": isDisabled,
-        isInTheRange: type === 'range' && isInTheRange(cellDate),
-        isStartDateOfRange: type === 'range' && isStartDateOfRange,
-        isEndDateOfRange: type === 'range' && isEndDateOfRange,
-        isToday: isToday,
-        isSelected: isStartDateOfRange,
-        isPrevNextMonth: isPreviousMonth || isNextMonth,
-        isFirstDayOfMonth: isExtended && rowIndex === 0 && day === 1,
-        isLastDayOfMonth: isExtended && rowIndex === monthDaysLength - 1 && day === removeZeros[removeZeros.length - 1],
-        onMouseOver: function onMouseOver() {
-          type === 'range' && handleMouseOver(cellDate);
-        },
-        onClick: function onClick() {
-          return handleChangeSelectDate(cellDate);
-        }
-      }, /*#__PURE__*/React.createElement(_styles.DatePickerTableCellSpan, null, isDisabled ? '' : day));
-    }));
-  }))))));
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DatePickerContainer, {
+      tabIndex: -1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DatePickerHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerHeaderButton, {
+          onClick: function onClick() {
+            return handleChangeMonth(date.getMonth(), 'down');
+          },
+          isHidden: minDate && minDate.toLocaleString() === date.toLocaleString(),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "arrow-left"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DatePickerHeaderTitle, {
+          onClick: function onClick() {
+            return handleToggleYearPicker === null || handleToggleYearPicker === void 0 ? void 0 : handleToggleYearPicker();
+          },
+          enableYearPicker: enableYearPicker,
+          children: [(0, _getMonthName.getMonthName)(date.getMonth()), " ", date.getFullYear(), enableYearPicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "edit",
+            size: "15px"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerHeaderButton, {
+          onClick: function onClick() {
+            return handleChangeMonth(date.getMonth(), 'up');
+          },
+          isHidden: maxDate && maxDate.toLocaleString() === date.toLocaleString(),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "arrow-right"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerBody, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DatePickerBodyTable, {
+          role: "table",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+                children: "D"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+                children: "S"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+                children: "T"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+                children: "Q"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+                children: "Q"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+                children: "S"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+                children: "S"
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+            children: getMonthDaysWithWeekDays(date.getMonth(), date.getFullYear()).map(function (days, rowIndex) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerTableRow, {
+                role: "row",
+                isRange: type === 'range',
+                children: days.map(function (day, dayIndex) {
+                  var monthDaysLength = getMonthDaysWithWeekDays(date.getMonth(), date.getFullYear()).length;
+                  var isPreviousMonth = !!(rowIndex === 0 && day > 7);
+                  var isNextMonth = !!(rowIndex === monthDaysLength - 1 && day < 7);
+                  var dateMonth = isPreviousMonth ? date.getMonth() - 1 : isNextMonth ? date.getMonth() + 1 : date.getMonth();
+                  var cellDate = new Date(date.getFullYear(), dateMonth, day);
+                  var cellTitle = cellDate.toLocaleDateString();
+                  var isToday = cellDate.toLocaleDateString() === new Date().toLocaleDateString();
+                  var isStartDateOfRange = cellDate.toLocaleDateString() === startDate.toLocaleDateString();
+                  var isEndDateOfRange = cellDate.toLocaleDateString() === endDate.toLocaleDateString();
+                  var isDisabled = day === 0;
+                  var isExtended = variant === 'extended';
+                  var removeZeros = days.filter(function (day) {
+                    return day !== 0;
+                  });
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerTableCell, {
+                    role: "gridcell",
+                    title: cellTitle,
+                    "data-date": cellDate,
+                    tabIndex: -1,
+                    disabled: isDisabled,
+                    "aria-label": cellDate.toLocaleDateString('pt-BR', {
+                      weekday: 'short',
+                      year: '2-digit',
+                      month: '2-digit',
+                      day: '2-digit'
+                    }),
+                    "aria-selected": type === 'range' ? isStartDateOfRange || isEndDateOfRange || isInTheRange(cellDate) : isStartDateOfRange,
+                    "aria-disabled": isDisabled,
+                    isInTheRange: type === 'range' && isInTheRange(cellDate),
+                    isStartDateOfRange: type === 'range' && isStartDateOfRange,
+                    isEndDateOfRange: type === 'range' && isEndDateOfRange,
+                    isToday: isToday,
+                    isSelected: isStartDateOfRange,
+                    isPrevNextMonth: isPreviousMonth || isNextMonth,
+                    isFirstDayOfMonth: isExtended && rowIndex === 0 && day === 1,
+                    isLastDayOfMonth: isExtended && rowIndex === monthDaysLength - 1 && day === removeZeros[removeZeros.length - 1],
+                    onMouseOver: function onMouseOver() {
+                      type === 'range' && handleMouseOver(cellDate);
+                    },
+                    onClick: function onClick() {
+                      return handleChangeSelectDate(cellDate);
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerTableCellSpan, {
+                      children: isDisabled ? '' : day
+                    })
+                  }, dayIndex);
+                })
+              }, rowIndex);
+            })
+          })]
+        })
+      })]
+    })
+  });
 };
 
 exports.DatePickerContent = DatePickerContent;

package/dist/components/DatePicker/components/DateYearPicker.js

@@ -15,6 +15,8 @@ var _styles = require("../styles");
 
 var _getMonthName = require("../utils/getMonthName");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -51,7 +53,7 @@ var DateYearPicker = function DateYearPicker(_ref) {
     handleChangeDate(new Date(year, month, 1));
   };
 
-  return /*#__PURE__*/React.createElement(_framerMotion.motion.div, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
     initial: {
       opacity: 0
     },
@@ -63,37 +65,48 @@ var DateYearPicker = function DateYearPicker(_ref) {
     },
     transition: {
       duration: 0.2
-    }
-  }, /*#__PURE__*/React.createElement(_styles.DateYearPickerContainer, null, /*#__PURE__*/React.createElement(_styles.DatePickerHeader, null, /*#__PURE__*/React.createElement(_styles.DatePickerHeaderButton, {
-    onClick: function onClick() {
-      setYears(years - 10);
-      setYear(0);
-    }
-  }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "arrow-left"
-  })), /*#__PURE__*/React.createElement(_styles.DatePickerHeaderTitle, null, year === 0 ? "".concat(years - 5, "-").concat(years + 14) : year), /*#__PURE__*/React.createElement(_styles.DatePickerHeaderButton, {
-    onClick: function onClick() {
-      setYears(years + 10);
-      setYear(0);
-    }
-  }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "arrow-right"
-  }))), /*#__PURE__*/React.createElement(_styles.DateYearPickerBody, null, year === 0 ? yearsInterval.map(function (y) {
-    return /*#__PURE__*/React.createElement(_styles.DateYearPickerCell, {
-      key: y,
-      onClick: function onClick() {
-        return setYear(y);
-      },
-      isSelected: date.getFullYear() === y
-    }, y);
-  }) : new Array(12).fill(0).map(function (_, index) {
-    return /*#__PURE__*/React.createElement(_styles.DateYearPickerCell, {
-      key: _,
-      onClick: function onClick() {
-        return handleSelectMonth(index);
-      }
-    }, (0, _getMonthName.getMonthName)(index).substring(0, 3).toUpperCase());
-  }))));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DateYearPickerContainer, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DatePickerHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerHeaderButton, {
+          onClick: function onClick() {
+            setYears(years - 10);
+            setYear(0);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "arrow-left"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerHeaderTitle, {
+          children: year === 0 ? "".concat(years - 5, "-").concat(years + 14) : year
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerHeaderButton, {
+          onClick: function onClick() {
+            setYears(years + 10);
+            setYear(0);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "arrow-right"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DateYearPickerBody, {
+        children: year === 0 ? yearsInterval.map(function (y) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DateYearPickerCell, {
+            onClick: function onClick() {
+              return setYear(y);
+            },
+            isSelected: date.getFullYear() === y,
+            children: y
+          }, y);
+        }) : new Array(12).fill(0).map(function (_, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DateYearPickerCell, {
+            onClick: function onClick() {
+              return handleSelectMonth(index);
+            },
+            children: (0, _getMonthName.getMonthName)(index).substring(0, 3).toUpperCase()
+          }, _);
+        })
+      })]
+    })
+  });
 };
 
 exports.DateYearPicker = DateYearPicker;

package/dist/components/DatePicker/datepicker.test.js

@@ -6,10 +6,18 @@ require("@testing-library/jest-dom");
 
 var _ = _interopRequireDefault(require("."));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var setup = function setup(props) {
-  return (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props));
+  return (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props)));
 };
 
 describe('DatePicker', function () {

package/dist/components/DatePicker/index.js

@@ -17,7 +17,13 @@ var _DateYearPicker = require("./components/DateYearPicker");
 
 var _styles = require("./styles");
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -140,36 +146,41 @@ var DatePicker = function DatePicker(_ref) {
     setOpenYearPicker(!openYearPicker);
   };
 
-  return /*#__PURE__*/React.createElement(_react2.ThemeProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
     theme: {
       colorSelected: color || 'primary.default'
-    }
-  }, /*#__PURE__*/React.createElement(_styles.DatePickerContentContainer, {
-    isExtended: variant === 'extended'
-  }, /*#__PURE__*/React.createElement(_framerMotion.AnimatePresence, {
-    initial: false
-  }, !openYearPicker ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DatePickerContent.DatePickerContent, _extends({}, DatePickerContentProps, variant !== 'extended' && {
-    handleToggleYearPicker: handleToggleYearPicker,
-    enableYearPicker: !maxDate && !minDate
-  }, {
-    date: firstCalendarDate,
-    maxDate: variant === 'extended' ? new Date(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth() - 1, 1) : DatePickerContentProps.maxDate,
-    handleChangeDate: function handleChangeDate(newDate) {
-      return setFirstCalendarDate(newDate);
-    }
-  })), variant === 'extended' && /*#__PURE__*/React.createElement(_DatePickerContent.DatePickerContent, _extends({}, DatePickerContentProps, {
-    date: secondCalendarDate,
-    minDate: new Date(firstCalendarDate.getFullYear(), firstCalendarDate.getMonth() + 1, 1),
-    handleChangeDate: function handleChangeDate(newDate) {
-      return setSecondCalendarDate(newDate);
-    }
-  }))) : /*#__PURE__*/React.createElement(_DateYearPicker.DateYearPicker, {
-    date: firstCalendarDate,
-    handleChangeDate: function handleChangeDate(newDate) {
-      setFirstCalendarDate(newDate);
-      setOpenYearPicker(false);
-    }
-  }))));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerContentContainer, {
+      isExtended: variant === 'extended',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
+        initial: false,
+        children: !openYearPicker ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerContent.DatePickerContent, _objectSpread(_objectSpread(_objectSpread({}, DatePickerContentProps), variant !== 'extended' && {
+            handleToggleYearPicker: handleToggleYearPicker,
+            enableYearPicker: !maxDate && !minDate
+          }), {}, {
+            date: firstCalendarDate,
+            maxDate: variant === 'extended' ? new Date(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth() - 1, 1) : DatePickerContentProps.maxDate,
+            handleChangeDate: function handleChangeDate(newDate) {
+              return setFirstCalendarDate(newDate);
+            }
+          })), variant === 'extended' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerContent.DatePickerContent, _objectSpread(_objectSpread({}, DatePickerContentProps), {}, {
+            date: secondCalendarDate,
+            minDate: new Date(firstCalendarDate.getFullYear(), firstCalendarDate.getMonth() + 1, 1),
+            handleChangeDate: function handleChangeDate(newDate) {
+              return setSecondCalendarDate(newDate);
+            }
+          }))]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateYearPicker.DateYearPicker, {
+          date: firstCalendarDate,
+          handleChangeDate: function handleChangeDate(newDate) {
+            setFirstCalendarDate(newDate);
+            setOpenYearPicker(false);
+          }
+        })
+      })
+    })
+  });
 };
 
 var _default = DatePicker;

package/dist/components/Dialog/dialog-example.js

@@ -11,9 +11,15 @@ var _FocusLock = _interopRequireDefault(require("../../shared/components/FocusLo
 
 var _ = require(".");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -36,16 +42,18 @@ function DialogExample(props) {
   (0, _react.useEffect)(function () {
     setShowDialog(props.open);
   }, [props.open]);
-  return /*#__PURE__*/React.createElement(_FocusLock.default, {
-    isLocked: !props.open
-  }, /*#__PURE__*/React.createElement(_.Dialog, _extends({}, props, {
-    open: showDialog,
-    onClose: function onClose() {
-      return setShowDialog(false);
-    }
-  })), /*#__PURE__*/React.createElement("button", {
-    onClick: function onClick() {
-      return setShowDialog(true);
-    }
-  }, "Show Dialog"));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FocusLock.default, {
+    isLocked: !props.open,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dialog, _objectSpread(_objectSpread({}, props), {}, {
+      open: showDialog,
+      onClose: function onClose() {
+        return setShowDialog(false);
+      }
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      onClick: function onClick() {
+        return setShowDialog(true);
+      },
+      children: "Show Dialog"
+    })]
+  });
 }

package/dist/components/Dialog/dialog.test.js

@@ -10,6 +10,8 @@ var _ThemeContext = require("../../shared/theme/contexts/ThemeContext");
 
 var _ = require(".");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -17,7 +19,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var setup = function setup(props) {
-  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_ThemeContext.PPUIThemeProvider, null, /*#__PURE__*/React.createElement(_.Dialog, props)));
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeContext.PPUIThemeProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dialog, _objectSpread({}, props))
+  }));
   return _objectSpread({}, utils);
 };
 

package/dist/components/Dialog/index.js

@@ -25,6 +25,8 @@ var _invertColor = require("../../utils/invertColor");
 
 var _colorCheck = require("../../utils/colorCheck");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Components
@@ -47,53 +49,64 @@ function Dialog(_ref) {
   var contentColorValue = (0, _getColorValue.getColorValue)(contentColor || '', theme, ' ');
   var isHidden = !open;
   var tabIndex = isHidden ? -1 : 0;
-  return /*#__PURE__*/React.createElement(_Modal.Modal, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
     open: open,
     "aria-hidden": isHidden,
     maxWidth: "640px",
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(_styles.Container, {
-    className: "ppui-dialog__container",
-    isMobile: isMobile,
-    role: "dialog",
-    illustration: !!illustration,
-    backgroundColor: backgroundColorValue,
-    contentColor: contentColorValue
-  }, closeButton && /*#__PURE__*/React.createElement(_styles.CloseButton, {
-    className: "ppui-dialog__close-button",
-    tabIndex: tabIndex,
-    "aria-hidden": isHidden,
-    onClick: onClose
-  }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "x",
-    size: 24,
-    color: contentColorValue || theme.colorMode === 'dark' ? 'neutral.neutral3' : 'neutral.neutral1'
-  })), !!illustration && /*#__PURE__*/React.createElement(_Icon.default, {
-    name: illustration,
-    size: "124px"
-  }), /*#__PURE__*/React.createElement(_Flex.default, {
-    direction: "column",
-    spacing: "40px"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingRight: closeButton ? 40 : 0
-    }
-  }, !!title && /*#__PURE__*/React.createElement(_Typography.default, {
-    fontSize: "lg",
-    fontWeight: "600"
-  }, title), /*#__PURE__*/React.createElement(_Typography.default, {
-    fontSize: "md",
-    fontWeight: "400"
-  }, message)), /*#__PURE__*/React.createElement("footer", null, !!confirmationButton && /*#__PURE__*/React.createElement(_styles.PrimaryButton, {
-    className: "ppui-dialog__confirm-button",
-    tabIndex: tabIndex,
-    "aria-hidden": isHidden,
-    onClick: confirmationButton.handler
-  }, confirmationButton.label), !!cancelButton && /*#__PURE__*/React.createElement(_styles.SecondaryButton, {
-    className: "ppui-dialog__cancel-button",
-    tabIndex: tabIndex,
-    "aria-hidden": isHidden,
-    onClick: cancelButton.handler,
-    secondaryButtonColor: (0, _colorCheck.parseHexColorToRgba)((0, _invertColor.invertColor)(backgroundColorValue, true), 0.5)
-  }, cancelButton.label)))));
+    onClose: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      className: "ppui-dialog__container",
+      isMobile: isMobile,
+      role: "dialog",
+      illustration: !!illustration,
+      backgroundColor: backgroundColorValue,
+      contentColor: contentColorValue,
+      children: [closeButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.CloseButton, {
+        className: "ppui-dialog__close-button",
+        tabIndex: tabIndex,
+        "aria-hidden": isHidden,
+        onClick: onClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: "x",
+          size: 24,
+          color: contentColorValue || theme.colorMode === 'dark' ? 'neutral.neutral3' : 'neutral.neutral1'
+        })
+      }), !!illustration && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: illustration,
+        size: "124px"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
+        direction: "column",
+        spacing: "40px",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            paddingRight: closeButton ? 40 : 0
+          },
+          children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            fontSize: "lg",
+            fontWeight: "600",
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            fontSize: "md",
+            fontWeight: "400",
+            children: message
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("footer", {
+          children: [!!confirmationButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PrimaryButton, {
+            className: "ppui-dialog__confirm-button",
+            tabIndex: tabIndex,
+            "aria-hidden": isHidden,
+            onClick: confirmationButton.handler,
+            children: confirmationButton.label
+          }), !!cancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SecondaryButton, {
+            className: "ppui-dialog__cancel-button",
+            tabIndex: tabIndex,
+            "aria-hidden": isHidden,
+            onClick: cancelButton.handler,
+            secondaryButtonColor: (0, _colorCheck.parseHexColorToRgba)((0, _invertColor.invertColor)(backgroundColorValue, true), 0.5),
+            children: cancelButton.label
+          })]
+        })]
+      })]
+    })
+  });
 }