@nobak/design-system 1.0.0

package/lib/index.js

@@ -0,0 +1,4 @@
+export { Avatar, Badge, Button, Breadcrumb, Cover, Command, Calendar, CalendarDay, CalendarWeek, DateTime, Disclosure, Dropdown, Form, GroupItems, Heading, Icon, Image, Input, Layout, Loader, List, Modal, Notification, Popover, RadioGroup, Search, Select, SlideOver, Stepper, Switch, Tab, Table, Video, Uploader, Slider, Sidebar, Tooltip, QRCode } from "./shared/components";
+export { RisingSun, MenuBar, DevMenu, Footer, DevFooter, Logo, AdminPanel, HeroContainer, DevSidebar, WalletMenu } from "./components";
+export { DigitalDisplay } from "./components";
+export { Symbol } from "./components";

package/lib/shared/components/Avatar/Avatar.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import clsx from 'clsx';
+export var Avatar = function Avatar(_ref) {
+  var imageUrl = _ref.imageUrl,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    customCss = _ref.customCss;
+  var outside = clsx(size === 'xtiny' && 'ring-1', size === 'tiny' && 'ring-1', size === 'xs' && 'ring-1', size === 'small' && 'ring-1', size === 'medium' && 'ring-2', size === 'large' && 'ring-4', "relative w-fit rounded-full ring-neutral-100 shadow-soft-bevel shadow-inner");
+  var style = clsx(!imageUrl && 'bg-red-400', size === 'xtiny' && 'h-[24px] w-[24px]', size === 'tiny' && 'h-[32px] w-[32px]', size === 'xs' && 'h-[40px] w-[40px]', size === 'small' && 'h-[60px] w-[60px]', size === 'medium' && 'h-[100px] w-[100px]', size === 'large' && 'h-[200px] w-[200px] sm:h-[100px] sm:w-[100px]', 'bg-cover bg-center rounded-full', "".concat(customCss));
+  return /*#__PURE__*/React.createElement("div", {
+    className: outside
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style,
+    style: {
+      backgroundImage: "url(".concat(imageUrl, ")")
+    }
+  }));
+};

package/lib/shared/components/Avatar/index.js

@@ -0,0 +1 @@
+export { Avatar } from "./Avatar";

package/lib/shared/components/Badge/Badge.js

@@ -0,0 +1,34 @@
+import clsx from 'clsx';
+import React from 'react';
+export var Badge = function Badge(_ref) {
+  var title = _ref.title,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'secondary' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size;
+  var style = clsx(size === 'small' && 'py-[4px] px-[8px] text-caption-bold', size === 'large' && 'py-[4px] px-[8px] text-caption-bold', variant === 'secondary' && 'bg-secondary-300 text-neutral-800', 'inline-flex items-center rounded-[4px] font-medium');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: style
+  }, title));
+};
+
+// <span className="inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-secondary-100 text-secondary-700">
+//         Large
+//         <button
+//           type="button"
+//           className="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-secondary-400 hover:bg-secondary-200 hover:text-secondary-500 focus:outline-none focus:bg-secondary-500 focus:text-white"
+//         >
+//           <svg
+//             className="h-2 w-2"
+//             stroke="currentColor"
+//             fill="none"
+//             viewBox="0 0 8 8"
+//           >
+//             <path
+//               strokeLinecap="round"
+//               strokeWidth="1.5"
+//               d="M1 1l6 6m0-6L1 7"
+//             />
+//           </svg>
+//         </button>
+//       </span>

package/lib/shared/components/Badge/index.js

@@ -0,0 +1 @@
+export { Badge } from "./Badge";

package/lib/shared/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export var Breadcrumb = function Breadcrumb(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-3 gap-4 content-start"
+  }, items === null || items === void 0 ? void 0 : items.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "text-[14px] text-neutral-800 font-bold"
+    }, item[0]), /*#__PURE__*/React.createElement("div", {
+      className: "text-[16.2px] text-neutral-900"
+    }, item[1]));
+  }));
+};

package/lib/shared/components/Breadcrumb/index.js

@@ -0,0 +1 @@
+export { Breadcrumb } from "./Breadcrumb";

package/lib/shared/components/Button/Button.js

@@ -0,0 +1,184 @@
+// Button.tsx
+import React from 'react';
+import clsx from 'clsx';
+import { MenuButton, PopoverButton } from '@headlessui/react';
+import { Icon } from "../Icon";
+export var Button = function Button(_ref) {
+  var text = _ref.text,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    Component = _ref.component,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'button' : _ref$as,
+    rounded = _ref.rounded,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    startUpload = _ref.startUpload,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    to = _ref.to,
+    _ref$customCss = _ref.customCss,
+    customCss = _ref$customCss === void 0 ? '' : _ref$customCss,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active;
+  var variantClasses = {
+    primary: clsx(active ? 'bg-primary-100' : 'bg-primary-300', 'text-neutral-2400 border border-primary-800', 'outline-none hover:outline-none hover:bg-primary-100 hover:text-primary-2400', 'hover:border-[1px] hover:border-primary-400', 'hover:ring-[1px] hover:ring-primary-1000 hover:ring-offset-neutral-200 hover:shadow-md', 'active:outline-none active:bg-primary-1600 active:text-primary-2000', 'active:border-[1px] active:border-primary-400', 'active:ring-[1px] active:ring-primary-1400 active:ring-offset-neutral-300'),
+    secondary: clsx(active ? 'bg-primary-1600' : 'bt-secondary-default', 'text-neutral-800 border border-neutral-1400', 'hover:outline-none hover:bg-secondary-1600 hover:text-neutral-200', 'hover:border-[1px] hover:border-neutral-400', 'hover:ring-[1px] hover:ring-secondary-1400 hover:ring-offset-secondary-300', 'active:outline-none active:bg-secondary-1600 active:text-secondary-100', 'active:border-[1px] active:border-secondary-400', 'active:ring-[1px] active:ring-secondary-1400 active:ring-offset-secondary-300'),
+    neutral: clsx('bg-neutral-2700 text-neutral-400 border border-neutral-1400', 'hover:outline-none hover:bg-neutral-1600 hover:text-neutral-500', 'hover:border-[1px] hover:border-neutral-400', 'hover:ring-[1px] hover:ring-neutral-1400 hover:ring-offset-neutral-300', 'active:outline-none active:bg-neutral-1600 active:text-neutral-500', 'active:border-[1px] active:border-neutral-400', 'active:ring-[1px] active:ring-neutral-1400 active:ring-offset-neutral-300'),
+    basic: clsx('text-neutral-2200 hover:outline-none active:outline-none', 'hover:text-primary-1400 active:text-primary-1600'),
+    air: clsx(active ? 'bg-primary-100 text-primary-2400 shadow-lg' : 'text-primary-800', 'border border-primary-300', 'hover:outline-none hover:bg-primary-100 hover:text-primary-1200', 'hover:border-[1px] hover:border-primary-600', 'hover:ring-[1px] hover:ring-primary-500 hover:ring-offset-primary-400', 'active:outline-none active:bg-primary-600 active:text-primary-400', 'active:border-[1px] active:border-primary-400', 'active:ring-[1px] active:ring-primary-1400 active:ring-offset-primary-300'),
+    warning: clsx('bg-red-1400 text-neutral-500 border border-red-1400', 'hover:outline-none hover:bg-red-1600 hover:text-red-500', 'hover:border-[1px] hover:border-red-400', 'hover:ring-[1px] hover:ring-red-1400 hover:ring-offset-neutral-300', 'active:outline-none active:bg-red-1600 active:text-red-500', 'active:border-[1px] active:border-red-400', 'active:ring-[1px] active:ring-red-1400 active:ring-offset-neutral-300'),
+    positive: clsx('bg-green-1400 text-neutral-500 border border-green-1400', 'hover:outline-none hover:bg-green-600 hover:text-green-400', 'hover:border-[1px] hover:border-green-400', 'hover:ring-[1px] hover:ring-green-1400 hover:ring-offset-neutral-300', 'active:outline-none active:bg-green-600 active:text-green-400', 'active:border-[1px] active:border-green-400', 'active:ring-[1px] active:ring-green-1400 active:ring-offset-neutral-300'),
+    outline: clsx('border bt-neutral-default border-neutral-1400 text-neutral-2200', 'hover:outline-none hover:bg-neutral-1600 hover:text-neutral-1200', 'hover:border-[1px] hover:border-neutral-400', 'hover:ring-[1px] hover:ring-neutral-1400 hover:ring-offset-neutral-300', 'active:outline-none active:bg-neutral-1600 active:text-neutral-1200', 'active:border-[1px] active:border-neutral-400', 'active:ring-[1px] active:ring-neutral-1400 active:ring-offset-neutral-300'),
+    dropdown: clsx('border bt-neutral-default border-neutral-1400 text-neutral-2400', 'hover:outline-none hover:bg-neutral-1600 hover:text-neutral-2000', 'hover:border-[1px] hover:border-neutral-400', 'hover:ring-[1px] hover:ring-neutral-1400 hover:ring-offset-neutral-300', 'active:outline-none active:bg-neutral-1600 active:text-neutral-2000', 'active:border-[1px] active:border-neutral-400', 'active:ring-[1px] active:ring-neutral-1400 active:ring-offset-neutral-300'),
+    alert: '' // Add styles if needed
+  };
+  var sizeClasses = {
+    tiny: clsx('text-button-tiny font-medium tracking-wide rounded-[4px]', 'active:ring-offset-[1px] hover:ring-offset-[1px]', text ? 'px-[8px] py-[6px]' : '', icon && text ? 'py-[4px]' : '', icon && !text ? 'px-[4px] py-[4px] rounded-[4px]' : ''),
+    small: clsx('text-button-small font-medium tracking-wide rounded-[6px]', 'active:ring-offset-[1px] hover:ring-offset-[1px]', text ? 'px-[10px] py-[8px]' : '', icon && text ? 'py-[5.5px]' : '', icon && !text ? 'px-[5.5px] py-[5.5px] rounded-[6px]' : ''),
+    medium: clsx('text-button-medium font-bold tracking-wide rounded-[10px]', 'active:ring-offset-[2px] hover:ring-offset-[2px]', text ? 'px-[16px] py-[12px]' : '', icon && text ? 'py-[7px]' : '', icon && !text ? 'px-[7px] py-[7px] rounded-[10px]' : ''),
+    large: clsx('text-button-large font-bold rounded-[12px]', 'active:ring-offset-[3px] hover:ring-offset-[3px]', text ? 'px-[30px] py-[13px]' : '', icon && text ? 'py-[7.5px]' : '', icon && !text ? 'px-[7.5px] py-[7.5px] rounded-[12px]' : ''),
+    xlarge: clsx('text-[24px] font-bold rounded-[12px]', 'active:ring-offset-[4px] hover:ring-offset-[4px]', text ? 'px-[30px] py-[8.001px]' : '', icon && text ? 'py-[7.5px]' : '', icon && !text ? 'px-[8px] py-[8px] rounded-[12px]' : '')
+  };
+  var actionHeightClasses = {
+    tiny: 'h-[26px]',
+    small: 'h-[33px]',
+    medium: 'h-[44px]',
+    large: 'h-[51px]',
+    xlarge: 'h-[51px]'
+  };
+  var roundedClasses = {
+    small: 'rounded-[4px]',
+    medium: 'rounded-md',
+    full: 'rounded-full'
+  };
+  var disabledClasses = 'cursor-not-allowed bg-neutral-100 hover:bg-neutral-150';
+
+  // Base button classes
+  var baseButtonClasses = 'transition ease-in-out delay-75 duration-300 inline-flex justify-center cursor-pointer items-center font-bold';
+
+  // Compute the final class name for the button
+  var buttonClassName = clsx(baseButtonClasses, variantClasses[variant], sizeClasses[size], type === 'action' && actionHeightClasses[size], rounded && roundedClasses[rounded], disabled && disabledClasses, customCss);
+
+  // Classes for dropdown style
+  var dropdownClassName = clsx(active ? 'bg-neutral-150 text-neutral-2700' : 'text-neutral-600', disabled && 'cursor-not-allowed bg-neutral-100 hover:bg-neutral-100', 'group flex items-center py-[8px] px-[16px] text-sm', 'hover:outline-none hover:bg-neutral-1400 hover:text-neutral-2200 hover:font-bold', 'active:outline-none active:bg-neutral-100 active:text-primary-2700', 'active:ring-[1px] active:ring-primary-200 active:ring-offset-neutral-50', 'w-full', customCss);
+
+  // Span styles
+  var spanClassName = clsx('contents align-middle', text && size === 'tiny' && 'h-[14px]', text && size === 'small' && 'h-[17px]', text && size === 'medium' && 'h-[20px]', text && size === 'large' && 'h-[25px]', text && size === 'xlarge' && 'h-[30px]', icon && text && size === 'tiny' && 'pt-[1px]');
+
+  // Icon styles
+  var iconClassName = clsx(icon && text && size === 'tiny' && 'pr-[3px] hover:fill-black', icon && text && size === 'small' && 'pr-[4.5px] fill-white', icon && text && size === 'medium' && 'pr-[6px] hover:fill-black', icon && text && size === 'large' && 'pr-[6.5px] hover:fill-black', icon && text && size === 'xlarge' && 'pr-[7px] hover:fill-black');
+
+  // Helper component for icon and text
+  var ButtonContent = function ButtonContent() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement("div", {
+      className: "pr-[8px]"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "origin-center animate-spin"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "spinner",
+      size: icon ? size : 'tiny',
+      viewBox: "0 0 16 16"
+    }))) : icon ? /*#__PURE__*/React.createElement("div", {
+      className: iconClassName
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: icon,
+      size: size
+    })) : null, text && /*#__PURE__*/React.createElement("span", {
+      className: spanClassName
+    }, text));
+  };
+
+  // Handle click events
+  var handleClick = function handleClick(event) {
+    if (onClick) onClick(event);
+  };
+
+  // Render based on the button type
+  switch (type) {
+    case 'menu':
+      return /*#__PURE__*/React.createElement(MenuButton, {
+        className: buttonClassName,
+        disabled: disabled,
+        onClick: handleClick
+      }, /*#__PURE__*/React.createElement(ButtonContent, null));
+    case 'popover':
+      return /*#__PURE__*/React.createElement(PopoverButton, {
+        className: buttonClassName,
+        disabled: disabled,
+        onClick: handleClick
+      }, /*#__PURE__*/React.createElement(ButtonContent, null));
+    case 'submit':
+      return /*#__PURE__*/React.createElement("button", {
+        type: "submit",
+        className: buttonClassName,
+        disabled: disabled,
+        onClick: handleClick
+      }, /*#__PURE__*/React.createElement(ButtonContent, null));
+    case 'action':
+      return /*#__PURE__*/React.createElement("form", {
+        className: "inline"
+      }, /*#__PURE__*/React.createElement("button", {
+        type: "submit",
+        formAction: to,
+        formMethod: "post",
+        className: variant === 'dropdown' ? dropdownClassName : buttonClassName,
+        disabled: disabled,
+        onClick: handleClick
+      }, /*#__PURE__*/React.createElement(ButtonContent, null)));
+    case 'link':
+      if (Component) {
+        return /*#__PURE__*/React.createElement(Component, {
+          to: !disabled ? to : '#',
+          className: variant === 'dropdown' ? dropdownClassName : buttonClassName,
+          disabled: disabled
+        }, /*#__PURE__*/React.createElement(ButtonContent, null));
+      }
+      return null;
+    case 'upload':
+      if (startUpload) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "pt-4"
+        }, /*#__PURE__*/React.createElement("label", {
+          htmlFor: "file-upload",
+          className: buttonClassName
+        }, /*#__PURE__*/React.createElement(ButtonContent, null), /*#__PURE__*/React.createElement("input", {
+          id: "file-upload",
+          name: "file-upload",
+          type: "file",
+          disabled: disabled,
+          className: "sr-only",
+          onChange: function onChange(e) {
+            return startUpload(e);
+          }
+        })));
+      }
+      return null;
+    case 'anchor':
+      if (to) {
+        return /*#__PURE__*/React.createElement("a", {
+          href: to,
+          className: variant === 'dropdown' ? dropdownClassName : buttonClassName
+        }, /*#__PURE__*/React.createElement(ButtonContent, null));
+      }
+      return null;
+    default:
+      if (as === 'div') {
+        return /*#__PURE__*/React.createElement("div", {
+          className: variant === 'dropdown' ? dropdownClassName : buttonClassName
+        }, /*#__PURE__*/React.createElement(ButtonContent, null));
+      }
+      return /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: variant === 'dropdown' ? dropdownClassName : buttonClassName,
+        onClick: handleClick,
+        disabled: disabled
+      }, /*#__PURE__*/React.createElement(ButtonContent, null));
+  }
+};

package/lib/shared/components/Button/index.js

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/lib/shared/components/Calendar/Calendar.js

@@ -0,0 +1,155 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from 'react';
+import { CalendarViewType, useCalendar } from '@h6s/calendar';
+import { format } from 'date-fns';
+import clsx from 'clsx';
+// import { ClockIcon } from '@heroicons/react/solid';
+import { WeekView } from "./CalendarWeek";
+import { DayView } from "./CalendarDay";
+import { MonthDesktop, MonthMobile } from "./CalendarMonth";
+import { CalendarHeader } from "./CalendarHeader";
+// Add moonphases to the calendar.
+// import { Moon } from 'lunarphase-js';
+
+export var Calendar = function Calendar(_ref) {
+  var _ref$events = _ref.events,
+    events = _ref$events === void 0 ? [] : _ref$events,
+    CTA = _ref.CTA,
+    openModal = _ref.openModal,
+    _ref$defaultView = _ref.defaultView,
+    defaultView = _ref$defaultView === void 0 ? 'month' : _ref$defaultView;
+  var _React$useState = React.useState(defaultView),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeView = _React$useState2[0],
+    changeView = _React$useState2[1];
+  var _useCalendar = useCalendar({
+      defaultViewType: CalendarViewType.Month
+    }),
+    cursorDate = _useCalendar.cursorDate,
+    headers = _useCalendar.headers,
+    body = _useCalendar.body,
+    view = _useCalendar.view,
+    navigation = _useCalendar.navigation;
+  var setView = function setView(option) {
+    changeView(option);
+    switch (option) {
+      case 'month':
+        return view.showMonthView();
+      case 'day':
+        return view.showMonthView();
+      case 'week':
+        return view.showWeekView();
+    }
+  };
+
+  // React.useEffect, populate events, watch [view]
+  var eventsOnDate = events.filter(function (event) {
+    return format(cursorDate, 'DDD') === format(new Date(event.timestamp * 1000), 'DDD') ? true : false;
+  });
+
+  // React.useEffect(() => {
+  //   console.log('activeView', activeView)
+  //   if (!activeView) {
+  //     view.showMonthView();
+  //   }
+  //   if (defaultView === 'week') {
+  //     view.showWeekView();
+  //   }
+  // }, [activeView])
+
+  var bodyStyle = clsx(activeView === 'month' && 'flex flex-col h-[800px]', (activeView === 'week' || activeView === 'day') && 'flex flex-col h-v92');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: bodyStyle
+  }, /*#__PURE__*/React.createElement(CalendarHeader, {
+    CTA: CTA,
+    activeView: activeView,
+    setView: setView,
+    view: view,
+    cursorDate: cursorDate,
+    navigation: navigation
+  }), activeView === 'month' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-7 gap-px text-center text-xs font-semibold leading-6 text-neutral-700 lg:flex-none"
+  }, headers.weekDays.map(function (_ref2, key) {
+    var value = _ref2.value;
+    var day = format(value, 'eee');
+    return /*#__PURE__*/React.createElement("div", {
+      className: "py-2",
+      key: key
+    }, day.charAt(0), /*#__PURE__*/React.createElement("span", {
+      className: "sr-only sm:not-sr-only"
+    }, day.slice(1, 3)));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex bg-neutral-300 p-[1px] text-xs leading-6 text-neutral-700 lg:flex-auto rounded-[20px] mb-[40px]"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hidden w-full lg:grid lg:grid-cols-7 lg:grid-rows-".concat(body.value.length, " lg:gap-px")
+  }, body.value.map(function (_ref3) {
+    var key = _ref3.key,
+      weeks = _ref3.value;
+    return /*#__PURE__*/React.createElement(MonthDesktop, {
+      openModal: openModal,
+      key: key,
+      body: body,
+      weeks: weeks,
+      events: events,
+      activeDate: cursorDate,
+      navigation: navigation
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "isolate grid w-full grid-cols-7 grid-rows-5 gap-px lg:hidden"
+  }, body.value.map(function (_ref4) {
+    var key = _ref4.key,
+      weeks = _ref4.value;
+    return /*#__PURE__*/React.createElement(MonthMobile, {
+      openModal: openModal,
+      key: key,
+      body: body,
+      weeks: weeks,
+      events: events,
+      activeDate: cursorDate,
+      navigation: navigation
+    });
+  }))))), activeView === 'week' && /*#__PURE__*/React.createElement(WeekView, {
+    headers: headers,
+    body: body,
+    events: events,
+    navigation: navigation,
+    cursorDate: cursorDate,
+    view: view
+  }), activeView === 'day' && /*#__PURE__*/React.createElement(DayView, {
+    headers: headers,
+    body: body,
+    events: events,
+    activeView: activeView,
+    navigation: navigation,
+    cursorDate: cursorDate,
+    view: view
+  }), activeView === 'month' && eventsOnDate.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "py-10 px-4 sm:px-6 lg:hidden"
+  }, /*#__PURE__*/React.createElement("ol", {
+    className: "divide-y divide-neutral-100 overflow-hidden rounded-lg bg-neutral-100 text-sm shadow ring-1 ring-black ring-opacity-5"
+  }, eventsOnDate.map(function (event) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: event.id,
+      className: "group flex p-4 pr-6 focus-within:bg-neutral-50 hover:bg-neutral-50"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex-auto"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "font-semibold text-neutral-900"
+    }, event.name), /*#__PURE__*/React.createElement("time", {
+      dateTime: format(new Date(event.timestamp * 1000), 'P pppp'),
+      className: "mt-2 flex items-center text-neutral-700"
+    }, format(new Date(event.timestamp * 1000), 'hh bbbb'))), /*#__PURE__*/React.createElement("a", {
+      href: event.href,
+      className: "ml-6 flex-none self-center rounded-md border border-neutral-900 bg-neutral-100 py-2 px-3 font-semibold text-neutral-700 opacity-0 shadow-sm hover:bg-neutral-50 focus:opacity-100 group-hover:opacity-100"
+    }, "Edit", /*#__PURE__*/React.createElement("span", {
+      className: "sr-only"
+    }, ", ", event.name)));
+  })))));
+};