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

package/lib/components/CollapsibleCard/CollapsibleCard.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CollapsibleCardContent = exports.CollapsibleCardAction = exports.CollapsibleCard = exports.COLLAPSIBLE_CARD_SEMANTIC = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Button = require("src/components/Button");
-var _Icon = require("src/components/Icon");
-var _Truncate = require("src/components/Truncate");
-var _CollapsibleCardModule = _interopRequireDefault(require("src/components/CollapsibleCard/CollapsibleCard.module.css"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Truncate = require("../Truncate");
+var _CollapsibleCardModule = _interopRequireDefault(require("./CollapsibleCard.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 COLLAPSIBLE_CARD_SEMANTIC = exports.COLLAPSIBLE_CARD_SEMANTIC = Object.freeze({
@@ -24,9 +25,10 @@ const CollapsibleCardAction = _ref => {
     children,
     className
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_CollapsibleCardModule.default.actionContainer, className)
-  }, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classify.default)(_CollapsibleCardModule.default.actionContainer, className),
+    children: children
+  });
 };
 exports.CollapsibleCardAction = CollapsibleCardAction;
 const CollapsibleCardContent = _ref2 => {
@@ -34,9 +36,10 @@ const CollapsibleCardContent = _ref2 => {
     children,
     className
   } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_CollapsibleCardModule.default.contentContainer, className)
-  }, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classify.default)(_CollapsibleCardModule.default.contentContainer, className),
+    children: children
+  });
 };
 exports.CollapsibleCardContent = CollapsibleCardContent;
 const CollapsibleCard = exports.CollapsibleCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
@@ -55,36 +58,43 @@ const CollapsibleCard = exports.CollapsibleCard = /*#__PURE__*/React.forwardRef(
   React.useEffect(() => {
     setCollapsibleCardIsOpen(Boolean(isOpen));
   }, [isOpen]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     "data-testid": "CollapsibleCard",
     className: (0, _classify.default)(_CollapsibleCardModule.default.wrapper, classNames?.wrapper),
-    ref: ref
-  }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
-    className: (0, _classify.default)(_CollapsibleCardModule.default.header, {
-      [_CollapsibleCardModule.default.isOpen]: collapsibleCardIsOpen
-    }, classNames?.title),
-    onClick: e => {
-      onChange?.(e, !collapsibleCardIsOpen, id);
-      setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _CollapsibleCardModule.default.headerContent
-  }, !!headerIconName && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_CollapsibleCardModule.default.iconContainer, _CollapsibleCardModule.default[semantic])
-  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
-    name: headerIconName,
-    type: headerIconType,
-    size: "small",
-    className: _CollapsibleCardModule.default[semantic]
-  })), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, title)), collapsibleCardIsOpen ? /*#__PURE__*/React.createElement(_Icon.Icon, {
-    name: "chevron-up",
-    color: "secondary",
-    size: "small"
-  }) : /*#__PURE__*/React.createElement(_Icon.Icon, {
-    name: "chevron-down",
-    color: "secondary",
-    size: "small"
-  })), collapsibleCardIsOpen && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_CollapsibleCardModule.default.content, classNames?.content)
-  }, children));
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.UnstyledButton, {
+      className: (0, _classify.default)(_CollapsibleCardModule.default.header, {
+        [_CollapsibleCardModule.default.isOpen]: collapsibleCardIsOpen
+      }, classNames?.title),
+      onClick: e => {
+        onChange?.(e, !collapsibleCardIsOpen, id);
+        setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _CollapsibleCardModule.default.headerContent,
+        children: [!!headerIconName && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classify.default)(_CollapsibleCardModule.default.iconContainer, _CollapsibleCardModule.default[semantic]),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            name: headerIconName,
+            type: headerIconType,
+            size: "small",
+            className: _CollapsibleCardModule.default[semantic]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+          children: title
+        })]
+      }), collapsibleCardIsOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        name: "chevron-up",
+        color: "secondary",
+        size: "small"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        name: "chevron-down",
+        color: "secondary",
+        size: "small"
+      })]
+    }), collapsibleCardIsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_CollapsibleCardModule.default.content, classNames?.content),
+      children: children
+    })]
+  });
 });

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

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

package/lib/components/CollapsibleCard/index.js

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

package/lib/components/Combobox/Combobox.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { IconType } from 'src/components/Icon';
-import type { InputOnChangeParamsType } from 'src/components/Input';
-import type { MenuOption, MenuProps } from 'src/components/Menu';
+import type { IconType } from '../../components/Icon';
+import type { InputOnChangeParamsType } from '../../components/Input';
+import type { MenuOption, MenuProps } from '../../components/Menu';
 type InputClassNames = Readonly<{
     box?: string;
     iconLeft?: string;

package/lib/components/Combobox/Combobox.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Combobox = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Dropdown = require("src/components/Dropdown");
-var _Input = require("src/components/Input");
-var _Text = require("src/components/Text");
-var _ComboboxModule = _interopRequireDefault(require("src/components/Combobox/Combobox.module.css"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Dropdown = require("../Dropdown");
+var _Input = require("../Input");
+var _Text = require("../Text");
+var _ComboboxModule = _interopRequireDefault(require("./Combobox.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 Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -100,89 +101,98 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
       }
     }
   }, [locked]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    className: (0, _classify.default)(_ComboboxModule.default.wrapper, classNames?.wrapper)
-  }, Boolean(label) && /*#__PURE__*/React.createElement("div", {
-    className: _ComboboxModule.default.info
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _ComboboxModule.default.infoContent
-  }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
-    color: "secondary"
-  }, label ?? ''), "\xA0", required && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
-    color: "danger"
-  }, "*"))), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_ComboboxModule.default.box, {
-      [_ComboboxModule.default.withError]: error ?? false
-    }, classNames?.box),
-    onClick: !(disabled || locked) ? onContainerClick : undefined,
-    ref: boxRef
-  }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
-    ref: dropdownRef,
-    menu: menu,
-    boxRef: dropdownBoxRef,
-    placeholder: dropdownPlaceholder,
-    readOnly: readOnly,
-    classNames: {
-      wrapper: (0, _classify.default)(_ComboboxModule.default.dropdownWrapper, classNames?.dropdown?.wrapper),
-      box: (0, _classify.default)(_ComboboxModule.default.dropdownBox, {
-        [_ComboboxModule.default.disabled]: disabled ?? null,
-        [_ComboboxModule.default.locked]: locked ?? null
-      }, classNames?.dropdown?.box),
-      iconRight: _ComboboxModule.default.chevron
-    },
-    disabled: disabled,
-    size: size,
-    onMenuOpen: onMenuOpen,
-    onMenuClose: onMenuClose,
-    onChange: handleDropdownChange,
-    scrollMenuToBottom: scrollMenuToBottom,
-    dropdownInputText: dropdownInputText,
-    onFocus: onDropdownFocus,
-    onBlur: onDropdownBlur,
-    onKeyDown: onDropdownKeyDown,
-    onContainerClick: onDropdownContainerClick,
-    name: dropdownName
-  }), /*#__PURE__*/React.createElement(_Input.Input, {
-    ref: inputRef,
-    boxRef: inputBoxRef,
-    name: inputName,
-    placeholder: inputPlaceholder,
-    onFocus: onInputFocus,
-    onBlur: onInputBlur,
-    onChange: handleInputChange,
-    onKeyDown: onInputKeyDown,
-    onContainerClick: onInputContainerClick,
-    value: inputValue,
-    type: type,
-    error: error,
-    disabled: disabled,
-    readOnly: readOnly,
-    classNames: {
-      wrapper: (0, _classify.default)(_ComboboxModule.default.inputWrapper, classNames?.input?.wrapper),
-      box: (0, _classify.default)(_ComboboxModule.default.inputBox, {
-        [_ComboboxModule.default.disabled]: disabled ?? null,
-        [_ComboboxModule.default.locked]: locked ?? null
-      }, classNames?.input?.box),
-      iconLeft: classNames?.input?.iconLeft,
-      iconRight: classNames?.input?.iconRight
-    },
-    size: size,
-    iconLeftName: iconLeftName,
-    iconLeftType: iconLeftType,
-    iconRightName: iconRightName,
-    iconRightType: iconRightType,
-    onIconRightClick: onIconRightClick,
-    minLength: minLength,
-    maxLength: maxLength,
-    pattern: pattern,
-    min: min,
-    max: max
-  })), (Boolean(helperText) || error) && /*#__PURE__*/React.createElement("div", {
-    className: _ComboboxModule.default.info
-  }, error && errorText ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
-    color: "danger"
-  }, errorText) : typeof helperText === 'string' ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
-    color: disabled ? 'disabled' : 'secondary'
-  }, helperText) : helperText));
+    className: (0, _classify.default)(_ComboboxModule.default.wrapper, classNames?.wrapper),
+    children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _ComboboxModule.default.info,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _ComboboxModule.default.infoContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
+          color: "secondary",
+          children: label ?? ''
+        }), "\xA0", required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
+          color: "danger",
+          children: "*"
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.default)(_ComboboxModule.default.box, {
+        [_ComboboxModule.default.withError]: error ?? false
+      }, classNames?.box),
+      onClick: !(disabled || locked) ? onContainerClick : undefined,
+      ref: boxRef,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
+        ref: dropdownRef,
+        menu: menu,
+        boxRef: dropdownBoxRef,
+        placeholder: dropdownPlaceholder,
+        readOnly: readOnly,
+        classNames: {
+          wrapper: (0, _classify.default)(_ComboboxModule.default.dropdownWrapper, classNames?.dropdown?.wrapper),
+          box: (0, _classify.default)(_ComboboxModule.default.dropdownBox, {
+            [_ComboboxModule.default.disabled]: disabled ?? null,
+            [_ComboboxModule.default.locked]: locked ?? null
+          }, classNames?.dropdown?.box),
+          iconRight: _ComboboxModule.default.chevron
+        },
+        disabled: disabled,
+        size: size,
+        onMenuOpen: onMenuOpen,
+        onMenuClose: onMenuClose,
+        onChange: handleDropdownChange,
+        scrollMenuToBottom: scrollMenuToBottom,
+        dropdownInputText: dropdownInputText,
+        onFocus: onDropdownFocus,
+        onBlur: onDropdownBlur,
+        onKeyDown: onDropdownKeyDown,
+        onContainerClick: onDropdownContainerClick,
+        name: dropdownName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
+        ref: inputRef,
+        boxRef: inputBoxRef,
+        name: inputName,
+        placeholder: inputPlaceholder,
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
+        onChange: handleInputChange,
+        onKeyDown: onInputKeyDown,
+        onContainerClick: onInputContainerClick,
+        value: inputValue,
+        type: type,
+        error: error,
+        disabled: disabled,
+        readOnly: readOnly,
+        classNames: {
+          wrapper: (0, _classify.default)(_ComboboxModule.default.inputWrapper, classNames?.input?.wrapper),
+          box: (0, _classify.default)(_ComboboxModule.default.inputBox, {
+            [_ComboboxModule.default.disabled]: disabled ?? null,
+            [_ComboboxModule.default.locked]: locked ?? null
+          }, classNames?.input?.box),
+          iconLeft: classNames?.input?.iconLeft,
+          iconRight: classNames?.input?.iconRight
+        },
+        size: size,
+        iconLeftName: iconLeftName,
+        iconLeftType: iconLeftType,
+        iconRightName: iconRightName,
+        iconRightType: iconRightType,
+        onIconRightClick: onIconRightClick,
+        minLength: minLength,
+        maxLength: maxLength,
+        pattern: pattern,
+        min: min,
+        max: max
+      })]
+    }), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _ComboboxModule.default.info,
+      children: error && errorText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+        color: "danger",
+        children: errorText
+      }) : typeof helperText === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+        color: disabled ? 'disabled' : 'secondary',
+        children: helperText
+      }) : helperText
+    })]
+  });
 });

package/lib/components/Combobox/helper.d.ts

@@ -1,4 +1,4 @@
-import type { MenuOption } from 'src/components/Menu';
+import type { MenuOption } from '../../components/Menu';
 export declare const defaultOptions: MenuOption[];
 export declare const currencyOptions: MenuOption[];
 export declare const phoneNumberOptions: MenuOption[];

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

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

package/lib/components/Combobox/index.js

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

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

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

package/lib/components/ConditionalWrapper/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "ConditionalWrapper", {
     return _ConditionalWrapper.ConditionalWrapper;
   }
 });
-var _ConditionalWrapper = require("src/components/ConditionalWrapper/ConditionalWrapper");
+var _ConditionalWrapper = require("./ConditionalWrapper");

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { DateRange } from 'src/types';
-import type { MARKERS, NAVIGATION_ACTION } from 'src/utils';
+import type { DateRange } from '../../types';
+import type { MARKERS, NAVIGATION_ACTION } from '../../utils';
 interface CalendarProps {
     value: string;
     marker: (typeof MARKERS)[keyof typeof MARKERS];

package/lib/components/DateRangePicker/Calendar.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.Calendar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
-var _utils = require("src/utils");
-var _dateRangePicker = require("src/utils/date-range-picker");
-var _Day = require("src/components/DateRangePicker/Day");
-var _Text = require("src/components/Text");
-var _CalendarModule = _interopRequireDefault(require("src/components/DateRangePicker/Calendar.module.css"));
+var _utils = require("../../utils");
+var _dateRangePicker = require("../../utils/date-range-picker");
+var _Day = require("./Day");
+var _Text = require("../Text");
+var _CalendarModule = _interopRequireDefault(require("./Calendar.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 Calendar = _ref => {
@@ -25,41 +26,42 @@ const Calendar = _ref => {
     today,
     t
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: _CalendarModule.default.calendar
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _CalendarModule.default.calendarRow
-  }, _utils.WEEKDAYS.map(day => /*#__PURE__*/React.createElement(_Text.BodySmall, {
-    key: day,
-    className: _CalendarModule.default.calendarRowItem,
-    color: _Text.TEXT_COLORS.tertiary
-  }, (0, _dateRangePicker.getTranslation)(t, day)))), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/React.createElement("div", {
-    key: week[index],
-    className: _CalendarModule.default.calendarRow
-  }, week.map(date => {
-    const isRangeValid = (0, _utils.isStartDateEndDateSame)(dateRange);
-    const isStart = (0, _utils.isStartOfRange)(dateRange, date);
-    const isEnd = (0, _utils.isEndOfRange)(dateRange, date);
-    const highlighted = (0, _utils.inDateRange)(dateRange, date) || inHoverRange(date);
-    const {
-      onDayClick,
-      onDayHover
-    } = handlers;
-    const dateValue = _moment.default.utc(date);
-    return /*#__PURE__*/React.createElement(_Day.Day, {
-      key: date,
-      date: date,
-      filled: isStart || isEnd,
-      onClick: () => onDayClick(date),
-      onHover: () => onDayHover(date),
-      outlined: (0, _dateRangePicker.isSame)(date, today, 'd'),
-      disabled: minDate && (0, _dateRangePicker.isBefore)(date, minDate) || (0, _dateRangePicker.isAfter)(date, maxDate) || !(0, _dateRangePicker.isSame)(date, value, 'month'),
-      endOfRange: isEnd && !isRangeValid,
-      highlighted: highlighted && !isRangeValid,
-      startOfRange: isStart && !isRangeValid,
-      value: dateValue.date().toString(),
-      hoverDay: hoverDay
-    });
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _CalendarModule.default.calendar,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _CalendarModule.default.calendarRow,
+      children: _utils.WEEKDAYS.map(day => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+        className: _CalendarModule.default.calendarRowItem,
+        color: _Text.TEXT_COLORS.tertiary,
+        children: (0, _dateRangePicker.getTranslation)(t, day)
+      }, day))
+    }), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _CalendarModule.default.calendarRow,
+      children: week.map(date => {
+        const isRangeValid = (0, _utils.isStartDateEndDateSame)(dateRange);
+        const isStart = (0, _utils.isStartOfRange)(dateRange, date);
+        const isEnd = (0, _utils.isEndOfRange)(dateRange, date);
+        const highlighted = (0, _utils.inDateRange)(dateRange, date) || inHoverRange(date);
+        const {
+          onDayClick,
+          onDayHover
+        } = handlers;
+        const dateValue = _moment.default.utc(date);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Day.Day, {
+          date: date,
+          filled: isStart || isEnd,
+          onClick: () => onDayClick(date),
+          onHover: () => onDayHover(date),
+          outlined: (0, _dateRangePicker.isSame)(date, today, 'd'),
+          disabled: minDate && (0, _dateRangePicker.isBefore)(date, minDate) || (0, _dateRangePicker.isAfter)(date, maxDate) || !(0, _dateRangePicker.isSame)(date, value, 'month'),
+          endOfRange: isEnd && !isRangeValid,
+          highlighted: highlighted && !isRangeValid,
+          startOfRange: isStart && !isRangeValid,
+          value: dateValue.date().toString(),
+          hoverDay: hoverDay
+        }, date);
+      })
+    }, week[index]))]
+  });
 };
 exports.Calendar = Calendar;

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

@@ -1,5 +1,5 @@
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { DateRangePickerError, DateRangeWithTimezone } from 'src/types';
+import type { DateRangePickerError, DateRangeWithTimezone } from '../../types';
 type ClassNames = Readonly<{
     wrapper?: string;
 }>;

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -7,11 +7,12 @@ exports.DateRangePicker = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _lodash = require("lodash");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-var _utils = require("src/utils");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _dateRangePicker = require("src/utils/date-range-picker");
-var _DateRangeWrapper = require("src/components/DateRangePicker/DateRangeWrapper");
-var _DateRangePickerModule = _interopRequireDefault(require("src/components/DateRangePicker/DateRangePicker.module.css"));
+var _utils = require("../../utils");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _dateRangePicker = require("../../utils/date-range-picker");
+var _DateRangeWrapper = require("./DateRangeWrapper");
+var _DateRangePickerModule = _interopRequireDefault(require("./DateRangePicker.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 DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -114,7 +115,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     setToday((0, _dateRangePicker.getTodayInTimezone)(newTimezone));
     setTimezone(newTimezone);
   };
-  return /*#__PURE__*/React.createElement(_DateRangeWrapper.DateRangeWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateRangeWrapper.DateRangeWrapper, {
     ref: ref,
     minDate: validMinDate,
     maxDate: validMaxDate,

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

@@ -1,6 +1,6 @@
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { DateRange, DateRangeWithTimezone } from 'src/types';
-import { MARKERS, NAVIGATION_ACTION } from 'src/utils';
+import type { DateRange, DateRangeWithTimezone } from '../../types';
+import { MARKERS, NAVIGATION_ACTION } from '../../utils';
 interface DateRangeWrapperProps {
     dateRange: DateRange;
     hoverDay: string;