@spaced-out/ui-design-system 0.5.7-beta.2 → 0.5.7-beta.4

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -6,20 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.DateRangeWrapper = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
-var _utils = require("src/utils");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _dateRangePicker = require("src/utils/date-range-picker");
-var _Button = require("src/components/Button");
-var _Card = require("src/components/Card");
-var _Calendar = require("src/components/DateRangePicker/Calendar");
-var _Dropdown = require("src/components/Dropdown");
-var _FocusManager = require("src/components/FocusManager");
-var _Icon = require("src/components/Icon");
-var _Text = require("src/components/Text");
-var _DateRangeWrapperModule = _interopRequireDefault(require("src/components/DateRangePicker/DateRangeWrapper.module.css"));
+var _utils = require("../../utils");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _dateRangePicker = require("../../utils/date-range-picker");
+var _Button = require("../Button");
+var _Card = require("../Card");
+var _Calendar = require("./Calendar");
+var _Dropdown = require("../Dropdown");
+var _FocusManager = require("../FocusManager");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _DateRangeWrapperModule = _interopRequireDefault(require("./DateRangeWrapper.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const CalendarHeader = _ref => {
   let {
     t,
@@ -51,51 +51,52 @@ const CalendarHeader = _ref => {
     t
   });
   const MONTHS = (0, _utils.getMonths)(t);
-  return /*#__PURE__*/React.createElement("div", {
-    className: _DateRangeWrapperModule.default.calendarHeader
-  }, /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
-    ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Previous Month'),
-    size: "small",
-    name: "chevron-left",
-    className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
-      [_DateRangeWrapperModule.default.disabledIcon]: prevDisabled
-    }),
-    onClick: () => !prevDisabled && onClickPrevious(),
-    color: prevDisabled ? 'disabled' : 'secondary'
-  }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
-    size: "small",
-    disabled: !availableMonths.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
-    menu: {
-      selectedKeys: [_moment.default.utc(date).month().toString()],
-      options: availableMonths
-    },
-    onChange: event => {
-      setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('M', Number(event.key))));
-    },
-    dropdownInputText: MONTHS[_moment.default.utc(date).month()].label,
-    scrollMenuToBottom: true
-  }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
-    disabled: !availableYears.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
-    menu: {
-      selectedKeys: [_moment.default.utc(date).year().toString()],
-      options: availableYears
-    },
-    size: "small",
-    onChange: event => {
-      setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('y', Number(event.key))));
-    },
-    dropdownInputText: _moment.default.utc(date).year().toString(),
-    scrollMenuToBottom: true
-  }), /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
-    size: "small",
-    ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Next Month'),
-    name: "chevron-right",
-    className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
-      [_DateRangeWrapperModule.default.disabledIcon]: nextDisabled
-    }),
-    onClick: () => !nextDisabled && onClickNext(),
-    color: nextDisabled ? 'disabled' : 'secondary'
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _DateRangeWrapperModule.default.calendarHeader,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
+      ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Previous Month'),
+      size: "small",
+      name: "chevron-left",
+      className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
+        [_DateRangeWrapperModule.default.disabledIcon]: prevDisabled
+      }),
+      onClick: () => !prevDisabled && onClickPrevious(),
+      color: prevDisabled ? 'disabled' : 'secondary'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
+      size: "small",
+      disabled: !availableMonths.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
+      menu: {
+        selectedKeys: [_moment.default.utc(date).month().toString()],
+        options: availableMonths
+      },
+      onChange: event => {
+        setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('M', Number(event.key))));
+      },
+      dropdownInputText: MONTHS[_moment.default.utc(date).month()].label,
+      scrollMenuToBottom: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
+      disabled: !availableYears.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
+      menu: {
+        selectedKeys: [_moment.default.utc(date).year().toString()],
+        options: availableYears
+      },
+      size: "small",
+      onChange: event => {
+        setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('y', Number(event.key))));
+      },
+      dropdownInputText: _moment.default.utc(date).year().toString(),
+      scrollMenuToBottom: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
+      size: "small",
+      ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Next Month'),
+      name: "chevron-right",
+      className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
+        [_DateRangeWrapperModule.default.disabledIcon]: nextDisabled
+      }),
+      onClick: () => !nextDisabled && onClickNext(),
+      color: nextDisabled ? 'disabled' : 'secondary'
+    })]
+  });
 };
 const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
@@ -150,94 +151,110 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     today,
     t
   };
-  return /*#__PURE__*/React.createElement(_FocusManager.FocusManager, null, /*#__PURE__*/React.createElement(_Card.Card, {
-    classNames: {
-      wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapper, cardWrapperClass)
-    },
-    ref: ref
-  }, /*#__PURE__*/React.createElement(_Card.CardHeader, {
-    className: _DateRangeWrapperModule.default.cardHeader
-  }, /*#__PURE__*/React.createElement(_Text.BodySmall, {
-    className: _DateRangeWrapperModule.default.selectedDate,
-    color: _Text.TEXT_COLORS.secondary
-  }, `${startDateLabel || (0, _dateRangePicker.getTranslation)(t, 'Start Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`), /*#__PURE__*/React.createElement(_Icon.Icon, {
-    name: "minus",
-    size: _Icon.ICON_SIZE.small,
-    type: _Icon.ICON_TYPE.regular,
-    color: _Text.TEXT_COLORS.secondary
-  }), /*#__PURE__*/React.createElement(_Text.BodySmall, {
-    className: _DateRangeWrapperModule.default.selectedDate,
-    color: _Text.TEXT_COLORS.secondary
-  }, `${endDateLabel || (0, _dateRangePicker.getTranslation)(t, 'End Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`)), /*#__PURE__*/React.createElement("div", {
-    className: _DateRangeWrapperModule.default.calendarMenuContainer
-  }, /*#__PURE__*/React.createElement(CalendarHeader, {
-    t: t,
-    marker: _utils.MARKERS.DATE_RANGE_START,
-    rangeStartMonth: rangeStartMonth,
-    rangeEndMonth: rangeEndMonth,
-    date: rangeStartMonth,
-    setMonth: setRangeStartMonth,
-    nextDisabled: !canNavigateCloser,
-    prevDisabled: (0, _dateRangePicker.isSameOrBefore)(rangeStartMonth, minDate, 'month'),
-    minDate: minDate,
-    maxDate: maxDate,
-    onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
-    onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV)
-  }), /*#__PURE__*/React.createElement(CalendarHeader, {
-    t: t,
-    marker: _utils.MARKERS.DATE_RANGE_END,
-    rangeStartMonth: rangeStartMonth,
-    rangeEndMonth: rangeEndMonth,
-    date: rangeEndMonth,
-    setMonth: setRangeEndMonth,
-    nextDisabled: (0, _dateRangePicker.isSameOrAfter)(rangeEndMonth, maxDate, 'month'),
-    prevDisabled: !canNavigateCloser,
-    minDate: minDate,
-    maxDate: maxDate,
-    onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.NEXT),
-    onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV)
-  })), /*#__PURE__*/React.createElement(_Card.CardContent, {
-    className: _DateRangeWrapperModule.default.dateRangeCalendars
-  }, /*#__PURE__*/React.createElement(_Calendar.Calendar, _extends({
-    marker: _utils.MARKERS.DATE_RANGE_START,
-    value: rangeStartMonth
-  }, commonProps)), /*#__PURE__*/React.createElement("div", {
-    className: _DateRangeWrapperModule.default.divider
-  }), /*#__PURE__*/React.createElement(_Calendar.Calendar, _extends({
-    marker: _utils.MARKERS.DATE_RANGE_END,
-    value: rangeEndMonth
-  }, commonProps))), /*#__PURE__*/React.createElement(_Card.CardFooter, {
-    className: _DateRangeWrapperModule.default.cardFooter
-  }, /*#__PURE__*/React.createElement(_Card.CardTitle, {
-    className: _DateRangeWrapperModule.default.timezoneDropdownContainer
-  }, !hideTimezone && /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
-    menu: {
-      selectedKeys: [timezone],
-      options: (0, _utils.getTimezones)(t),
-      allowSearch: true,
-      virtualization: {
-        enable: true
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusManager.FocusManager, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
+      classNames: {
+        wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapper, cardWrapperClass)
       },
-      staticLabels: {
-        SEARCH_PLACEHOLDER: `${(0, _dateRangePicker.getTranslation)(t, 'Search')}...`,
-        RESULT: (0, _dateRangePicker.getTranslation)(t, 'result'),
-        RESULTS: (0, _dateRangePicker.getTranslation)(t, 'results')
-      }
-    },
-    dropdownInputText: (0, _dateRangePicker.getTranslation)(t, _dateRangePicker.TIMEZONES[timezone]),
-    disabled: (0, _dateRangePicker.isAfter)(minDate, maxDate),
-    classNames: {
-      box: _DateRangeWrapperModule.default.timezoneDropdown
-    },
-    onChange: event => setTimezone(event.key),
-    size: "small"
-  })), /*#__PURE__*/React.createElement(_Card.CardActions, null, /*#__PURE__*/React.createElement(_Button.Button, {
-    type: "ghost",
-    onClick: onCancel,
-    size: "small"
-  }, (0, _dateRangePicker.getTranslation)(t, 'Cancel')), /*#__PURE__*/React.createElement(_Button.Button, {
-    onClick: handleApplyClick,
-    size: "small",
-    disabled: !(dateRange.startDate && dateRange.endDate)
-  }, (0, _dateRangePicker.getTranslation)(t, 'Apply'))))));
+      ref: ref,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardHeader, {
+        className: _DateRangeWrapperModule.default.cardHeader,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+          className: _DateRangeWrapperModule.default.selectedDate,
+          color: _Text.TEXT_COLORS.secondary,
+          children: `${startDateLabel || (0, _dateRangePicker.getTranslation)(t, 'Start Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          name: "minus",
+          size: _Icon.ICON_SIZE.small,
+          type: _Icon.ICON_TYPE.regular,
+          color: _Text.TEXT_COLORS.secondary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+          className: _DateRangeWrapperModule.default.selectedDate,
+          color: _Text.TEXT_COLORS.secondary,
+          children: `${endDateLabel || (0, _dateRangePicker.getTranslation)(t, 'End Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _DateRangeWrapperModule.default.calendarMenuContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
+          t: t,
+          marker: _utils.MARKERS.DATE_RANGE_START,
+          rangeStartMonth: rangeStartMonth,
+          rangeEndMonth: rangeEndMonth,
+          date: rangeStartMonth,
+          setMonth: setRangeStartMonth,
+          nextDisabled: !canNavigateCloser,
+          prevDisabled: (0, _dateRangePicker.isSameOrBefore)(rangeStartMonth, minDate, 'month'),
+          minDate: minDate,
+          maxDate: maxDate,
+          onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
+          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
+          t: t,
+          marker: _utils.MARKERS.DATE_RANGE_END,
+          rangeStartMonth: rangeStartMonth,
+          rangeEndMonth: rangeEndMonth,
+          date: rangeEndMonth,
+          setMonth: setRangeEndMonth,
+          nextDisabled: (0, _dateRangePicker.isSameOrAfter)(rangeEndMonth, maxDate, 'month'),
+          prevDisabled: !canNavigateCloser,
+          minDate: minDate,
+          maxDate: maxDate,
+          onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.NEXT),
+          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardContent, {
+        className: _DateRangeWrapperModule.default.dateRangeCalendars,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
+          marker: _utils.MARKERS.DATE_RANGE_START,
+          value: rangeStartMonth,
+          ...commonProps
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _DateRangeWrapperModule.default.divider
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
+          marker: _utils.MARKERS.DATE_RANGE_END,
+          value: rangeEndMonth,
+          ...commonProps
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardFooter, {
+        className: _DateRangeWrapperModule.default.cardFooter,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardTitle, {
+          className: _DateRangeWrapperModule.default.timezoneDropdownContainer,
+          children: !hideTimezone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
+            menu: {
+              selectedKeys: [timezone],
+              options: (0, _utils.getTimezones)(t),
+              allowSearch: true,
+              virtualization: {
+                enable: true
+              },
+              staticLabels: {
+                SEARCH_PLACEHOLDER: `${(0, _dateRangePicker.getTranslation)(t, 'Search')}...`,
+                RESULT: (0, _dateRangePicker.getTranslation)(t, 'result'),
+                RESULTS: (0, _dateRangePicker.getTranslation)(t, 'results')
+              }
+            },
+            dropdownInputText: (0, _dateRangePicker.getTranslation)(t, _dateRangePicker.TIMEZONES[timezone]),
+            disabled: (0, _dateRangePicker.isAfter)(minDate, maxDate),
+            classNames: {
+              box: _DateRangeWrapperModule.default.timezoneDropdown
+            },
+            onChange: event => setTimezone(event.key),
+            size: "small"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardActions, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            type: "ghost",
+            onClick: onCancel,
+            size: "small",
+            children: (0, _dateRangePicker.getTranslation)(t, 'Cancel')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            onClick: handleApplyClick,
+            size: "small",
+            disabled: !(dateRange.startDate && dateRange.endDate),
+            children: (0, _dateRangePicker.getTranslation)(t, 'Apply')
+          })]
+        })]
+      })]
+    })
+  });
 });

package/lib/components/DateRangePicker/Day.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.Day = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Button = require("src/components/Button");
-var _Text = require("src/components/Text");
-var _DayModule = _interopRequireDefault(require("src/components/DateRangePicker/Day.module.css"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Text = require("../Text");
+var _DayModule = _interopRequireDefault(require("./Day.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const getTextColor = (disabled, filled) => {
@@ -35,7 +36,7 @@ const Day = _ref => {
     highlighted,
     startOfRange
   } = _ref;
-  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.UnstyledButton, {
     tabIndex: disabled ? -1 : 0,
     className: (0, _classify.default)(_DayModule.default.calendarItemButton, {
       [_DayModule.default.calendarRowItemDisabled]: disabled,
@@ -43,14 +44,16 @@ const Day = _ref => {
     }),
     onMouseOver: onHover,
     onClick: onClick,
-    onKeyUp: onHover
-  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
-    color: getTextColor(disabled, filled),
-    className: (0, _classify.default)(_DayModule.default.calendarRowItem, {
-      [_DayModule.default.calendarRowItemHover]: !disabled && _moment.default.utc(date).isSame(hoverDay),
-      [_DayModule.default.calendarRowItemFilled]: !disabled && filled,
-      [_DayModule.default.calendarRowItemOutlined]: outlined
+    onKeyUp: onHover,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMedium, {
+      color: getTextColor(disabled, filled),
+      className: (0, _classify.default)(_DayModule.default.calendarRowItem, {
+        [_DayModule.default.calendarRowItemHover]: !disabled && _moment.default.utc(date).isSame(hoverDay),
+        [_DayModule.default.calendarRowItemFilled]: !disabled && filled,
+        [_DayModule.default.calendarRowItemOutlined]: outlined
+      }),
+      children: value
     })
-  }, value));
+  });
 };
 exports.Day = Day;

package/lib/components/DateRangePicker/index.d.ts

@@ -1,2 +1,2 @@
-export * from 'src/components/DateRangePicker/DateRangePicker';
+export * from '../../components/DateRangePicker/DateRangePicker';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/DateRangePicker/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _DateRangePicker = require("src/components/DateRangePicker/DateRangePicker");
+var _DateRangePicker = require("./DateRangePicker");
 Object.keys(_DateRangePicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _DateRangePicker[key]) return;

package/lib/components/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ModalProps } from 'src/components/Modal';
+import type { ModalProps } from '../../components/Modal';
 type FooterClassNames = Readonly<{
     wrapper?: string;
     actions?: string;

package/lib/components/Dialog/Dialog.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DialogHeader = exports.DialogFooter = exports.DialogBody = exports.Dialog = exports.DIALOG_SEMANTIC = exports.BasicDialog = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _typography = require("src/types/typography");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Button = require("src/components/Button");
-var _Icon = require("src/components/Icon");
-var _Modal = require("src/components/Modal");
-var _DialogModule = _interopRequireDefault(require("src/components/Dialog/Dialog.module.css"));
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Modal = require("../Modal");
+var _DialogModule = _interopRequireDefault(require("./Dialog.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const DIALOG_SEMANTIC = exports.DIALOG_SEMANTIC = Object.freeze({
   neutral: 'neutral',
   success: 'success',
@@ -28,37 +28,37 @@ const DialogIcon = _ref => {
   } = _ref;
   switch (semantic) {
     case DIALOG_SEMANTIC.neutral:
-      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         color: _typography.TEXT_COLORS.neutral,
         name: iconName ? iconName : 'face-smile',
         type: "solid"
       });
     case DIALOG_SEMANTIC.success:
-      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         name: iconName ? iconName : 'circle-check',
         color: _typography.TEXT_COLORS.success,
         type: "solid"
       });
     case DIALOG_SEMANTIC.information:
-      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         name: iconName ? iconName : 'circle-info',
         color: _typography.TEXT_COLORS.information,
         type: "solid"
       });
     case DIALOG_SEMANTIC.warning:
-      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         name: iconName ? iconName : 'circle-exclamation',
         color: _typography.TEXT_COLORS.warning,
         type: "solid"
       });
     case DIALOG_SEMANTIC.danger:
-      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         name: iconName ? iconName : 'shield-exclamation',
         color: _typography.TEXT_COLORS.danger,
         type: "solid"
       });
     default:
-      return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         color: _typography.TEXT_COLORS.neutral,
         name: iconName ? iconName : 'face-smile',
         type: "solid"
@@ -70,11 +70,15 @@ const DialogHeader = _ref2 => {
     children,
     className
   } = _ref2;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_DialogModule.default.dialogHeader, className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _DialogModule.default.headerContent
-  }, children)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_DialogModule.default.dialogHeader, className),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _DialogModule.default.headerContent,
+        children: children
+      })
+    })
+  });
 };
 exports.DialogHeader = DialogHeader;
 const DialogBody = _ref3 => {
@@ -82,9 +86,10 @@ const DialogBody = _ref3 => {
     children,
     className
   } = _ref3;
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_DialogModule.default.dialogBody, className)
-  }, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classify.default)(_DialogModule.default.dialogBody, className),
+    children: children
+  });
 };
 exports.DialogBody = DialogBody;
 const DialogFooter = _ref4 => {
@@ -92,11 +97,15 @@ const DialogFooter = _ref4 => {
     children,
     classNames
   } = _ref4;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_DialogModule.default.dialogFooter, classNames?.wrapper)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_DialogModule.default.dialogFooterActions, classNames?.actions)
-  }, children)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_DialogModule.default.dialogFooter, classNames?.wrapper),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_DialogModule.default.dialogFooterActions, classNames?.actions),
+        children: children
+      })
+    })
+  });
 };
 exports.DialogFooter = DialogFooter;
 const Dialog = _ref5 => {
@@ -111,31 +120,34 @@ const Dialog = _ref5 => {
     classNames,
     ...restDialogProps
   } = _ref5;
-  return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.Modal, {
     isOpen: isOpen,
     onClose: onClose,
     hideBackdrop: hideBackdrop,
-    tapOutsideToClose: tapOutsideToClose
-  }, restDialogProps, {
+    tapOutsideToClose: tapOutsideToClose,
+    ...restDialogProps,
     classNames: {
       content: (0, _classify.default)(_DialogModule.default.dialog, classNames?.content),
       container: (0, _classify.default)(classNames?.container),
       backdrop: (0, _classify.default)(classNames?.backdrop)
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: _DialogModule.default.topBlock
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_DialogModule.default.iconContainer, {
-      [_DialogModule.default.neutral]: semantic === DIALOG_SEMANTIC.neutral,
-      [_DialogModule.default.success]: semantic === DIALOG_SEMANTIC.success,
-      [_DialogModule.default.information]: semantic === DIALOG_SEMANTIC.information,
-      [_DialogModule.default.warning]: semantic === DIALOG_SEMANTIC.warning,
-      [_DialogModule.default.danger]: semantic === DIALOG_SEMANTIC.danger
-    })
-  }, /*#__PURE__*/React.createElement(DialogIcon, {
-    semantic: semantic,
-    iconName: iconName
-  }))), children);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _DialogModule.default.topBlock,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_DialogModule.default.iconContainer, {
+          [_DialogModule.default.neutral]: semantic === DIALOG_SEMANTIC.neutral,
+          [_DialogModule.default.success]: semantic === DIALOG_SEMANTIC.success,
+          [_DialogModule.default.information]: semantic === DIALOG_SEMANTIC.information,
+          [_DialogModule.default.warning]: semantic === DIALOG_SEMANTIC.warning,
+          [_DialogModule.default.danger]: semantic === DIALOG_SEMANTIC.danger
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogIcon, {
+          semantic: semantic,
+          iconName: iconName
+        })
+      })
+    }), children]
+  });
 };
 exports.Dialog = Dialog;
 const BasicDialog = _ref6 => {
@@ -148,13 +160,24 @@ const BasicDialog = _ref6 => {
     handleAbort,
     ...restDialogProps
   } = _ref6;
-  return /*#__PURE__*/React.createElement(Dialog, restDialogProps, !!heading && /*#__PURE__*/React.createElement(DialogHeader, null, heading), !!body && /*#__PURE__*/React.createElement(DialogBody, null, body), /*#__PURE__*/React.createElement(DialogFooter, null, !!abortText && /*#__PURE__*/React.createElement(_Button.Button, {
-    isFluid: true,
-    type: "tertiary",
-    onClick: handleAbort
-  }, abortText), !!confirmText && /*#__PURE__*/React.createElement(_Button.Button, {
-    isFluid: true,
-    onClick: handleConfirm
-  }, confirmText)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Dialog, {
+    ...restDialogProps,
+    children: [!!heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogHeader, {
+      children: heading
+    }), !!body && /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogBody, {
+      children: body
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DialogFooter, {
+      children: [!!abortText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        isFluid: true,
+        type: "tertiary",
+        onClick: handleAbort,
+        children: abortText
+      }), !!confirmText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        isFluid: true,
+        onClick: handleConfirm,
+        children: confirmText
+      })]
+    })]
+  });
 };
 exports.BasicDialog = BasicDialog;

package/lib/components/Dialog/index.d.ts

@@ -1,2 +1,2 @@
-export * from 'src/components/Dialog/Dialog';
+export * from '../../components/Dialog/Dialog';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Dialog/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _Dialog = require("src/components/Dialog/Dialog");
+var _Dialog = require("./Dialog");
 Object.keys(_Dialog).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Dialog[key]) return;

package/lib/components/Disclaimer/Disclaimer.d.ts

@@ -1,5 +1,5 @@
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { BannerProps } from 'src/components/Banner';
+import type { BannerProps } from '../../components/Banner';
 export type DisclaimerProps = BannerProps;
 export declare const Disclaimer: Flow.AbstractComponent<DisclaimerProps, HTMLDivElement>;
 //# sourceMappingURL=Disclaimer.d.ts.map