@onesy/ui-react 1.0.171 → 1.0.173

package/esm/CalendarAvailability/CalendarAvailability.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["name", "date", "dateDefault", "times", "events", "meta", "views", "onUpdate", "onRemove", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "startLeftModal", "endLeftModal", "startRightModal", "endRightModal", "Component", "IconEdit", "IconPrevious", "IconNext", "IconRemove", "IconClose", "WeekProps", "DayProps", "IconProps", "IconButtonProps", "className", "children"];
@@ -27,6 +26,7 @@ import LabelElement from '../Label';
 import SlideElement from '../Slide';
 import SwitchElement from '../Switch';
 import { formats, staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     padding: '16px',
@@ -110,7 +110,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-CalendarAvailability'
 });
-const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const CalendarAvailability = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCalendarAvailability?.props?.default), props_);
@@ -340,127 +340,143 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }).map((_, index) => add(index, 'day', weekStartDate));
   }, [date]);
   const simpleTimesUI = () => {
-    return /*#__PURE__*/React.createElement(Line, {
+    return /*#__PURE__*/_jsx(Line, {
       gap: 3,
       direction: {
         default: 'row',
         1400: 'column'
       },
       className: classes.simpleTimes,
-      fullWidth: true
-    }, days.map((itemDay, index_0) => {
-      const values_0 = times.filter(item_6 => item_6.weekly.days[index_0 + 1]?.active).flatMap(item_7 => item_7.weekly.days[index_0 + 1].values).filter(item_8 => item_8 && [undefined, true].includes(refs.statuses.current[item_8.status || 'working']));
-      values_0.sort((a, b) => b.from > a.from ? -1 : 1);
-      return /*#__PURE__*/React.createElement(Line, {
-        key: index_0,
-        gap: 1.5,
-        direction: "column"
-      }, /*#__PURE__*/React.createElement(Line, {
-        gap: 0,
-        align: "center",
-        fullWidth: true
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "h3",
-        weight: 400
-      }, format(itemDay, 'dd', {
-        l
-      })), /*#__PURE__*/React.createElement(Line, {
-        align: "center",
-        justify: "center",
-        className: classNames([classes.weekDay, itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today])
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b2",
-        weight: 200
-      }, format(itemDay, 'DD.MM.', {
-        l
-      })))), /*#__PURE__*/React.createElement(Line, {
-        gap: 2,
-        fullWidth: true
-      }, !!values_0.length ? values_0.map((itemValue, indexItem) => {
-        const itemValueFrom = new OnesyDate(itemValue.from);
-        const itemValueTo = new OnesyDate(itemValue.to);
-        return /*#__PURE__*/React.createElement(Line, {
-          key: indexItem,
-          gap: 0.5,
-          className: classes.dayWeekSimple
-        }, /*#__PURE__*/React.createElement(Line, {
-          gap: 1,
-          direction: "row",
-          align: "center"
-        }, /*#__PURE__*/React.createElement(Line, {
-          className: classes.palettePreview,
-          style: {
-            background: getColor(itemValue)
-          }
-        }), /*#__PURE__*/React.createElement(Type, {
-          version: "b2",
-          weight: 300
-        }, format(itemValueFrom, 'hh:mm a', {
-          l
-        }), " \u2014 ", format(itemValueTo, 'hh:mm a', {
-          l
-        }))), itemValue.description && /*#__PURE__*/React.createElement(Type, {
-          version: "b2",
-          weight: 200,
-          whiteSpace: "pre-wrap",
-          className: classNames([classes.timeDescription, !refs.displayTime.current && 'onesy-work-day-time']),
-          dangerouslySetInnerHTML: {
-            __html: textToInnerHTML(itemValue.description)
-          }
-        }));
-      }) : /*#__PURE__*/React.createElement(Type, {
-        version: "b2"
-      }, l('No information for this day'))));
-    }));
+      fullWidth: true,
+      children: days.map((itemDay, index_0) => {
+        const values_0 = times.filter(item_6 => item_6.weekly.days[index_0 + 1]?.active).flatMap(item_7 => item_7.weekly.days[index_0 + 1].values).filter(item_8 => item_8 && [undefined, true].includes(refs.statuses.current[item_8.status || 'working']));
+        values_0.sort((a, b) => b.from > a.from ? -1 : 1);
+        return /*#__PURE__*/_jsxs(Line, {
+          gap: 1.5,
+          direction: "column",
+          children: [/*#__PURE__*/_jsxs(Line, {
+            gap: 0,
+            align: "center",
+            fullWidth: true,
+            children: [/*#__PURE__*/_jsx(Type, {
+              version: "h3",
+              weight: 400,
+              children: format(itemDay, 'dd', {
+                l
+              })
+            }), /*#__PURE__*/_jsx(Line, {
+              align: "center",
+              justify: "center",
+              className: classNames([classes.weekDay, itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today]),
+              children: /*#__PURE__*/_jsx(Type, {
+                version: "b2",
+                weight: 200,
+                children: format(itemDay, 'DD.MM.', {
+                  l
+                })
+              })
+            })]
+          }), /*#__PURE__*/_jsx(Line, {
+            gap: 2,
+            fullWidth: true,
+            children: !!values_0.length ? values_0.map((itemValue, indexItem) => {
+              const itemValueFrom = new OnesyDate(itemValue.from);
+              const itemValueTo = new OnesyDate(itemValue.to);
+              return /*#__PURE__*/_jsxs(Line, {
+                gap: 0.5,
+                className: classes.dayWeekSimple,
+                children: [/*#__PURE__*/_jsxs(Line, {
+                  gap: 1,
+                  direction: "row",
+                  align: "center",
+                  children: [/*#__PURE__*/_jsx(Line, {
+                    className: classes.palettePreview,
+                    style: {
+                      background: getColor(itemValue)
+                    }
+                  }), /*#__PURE__*/_jsxs(Type, {
+                    version: "b2",
+                    weight: 300,
+                    children: [format(itemValueFrom, 'hh:mm a', {
+                      l
+                    }), " \u2014 ", format(itemValueTo, 'hh:mm a', {
+                      l
+                    })]
+                  })]
+                }), itemValue.description && /*#__PURE__*/_jsx(Type, {
+                  version: "b2",
+                  weight: 200,
+                  whiteSpace: "pre-wrap",
+                  className: classNames([classes.timeDescription, !refs.displayTime.current && 'onesy-work-day-time']),
+                  dangerouslySetInnerHTML: {
+                    __html: textToInnerHTML(itemValue.description)
+                  }
+                })]
+              }, indexItem);
+            }) : /*#__PURE__*/_jsx(Type, {
+              version: "b2",
+              children: l('No information for this day')
+            })
+          })]
+        }, index_0);
+      })
+    });
   };
   const simpleExceptionsUI = () => {
     const items = times.flatMap(item_9 => getDatesWeek(item_9));
-    if (!items.length) return /*#__PURE__*/React.createElement(Type, {
-      version: "b1"
-    }, l('No exceptions this week'));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, items.map((itemValue_0, index_1) => {
-      const day = set(index_1 + 1, 'dayWeek');
-      const itemValueFrom_0 = new OnesyDate(itemValue_0.from);
-      const itemValueTo_0 = new OnesyDate(itemValue_0.to);
-      return /*#__PURE__*/React.createElement(Line, {
-        key: index_1,
-        gap: 1,
-        direction: "column"
-      }, /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center",
-        fullWidth: true
-      }, /*#__PURE__*/React.createElement(Line, {
-        className: classes.palettePreview,
-        style: {
-          background: getColor(itemValue_0)
-        }
-      }), /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b2",
-        weight: 400
-      }, format(day, 'dd', {
-        l
-      })), /*#__PURE__*/React.createElement(Type, {
-        version: "b2"
-      }, format(itemValueFrom_0, formats.entire, {
-        l
-      }), " \u2014 ", format(itemValueTo_0, formats.entire, {
-        l
-      })))), itemValue_0.description && /*#__PURE__*/React.createElement(Type, {
-        version: "b2",
-        weight: 200,
-        whiteSpace: "pre-wrap",
-        className: classNames([classes.timeDescription, !refs.displayTime.current && 'onesy-work-day-time']),
-        dangerouslySetInnerHTML: {
-          __html: textToInnerHTML(itemValue_0.description)
-        }
-      }));
-    }));
+    if (!items.length) return /*#__PURE__*/_jsx(Type, {
+      version: "b1",
+      children: l('No exceptions this week')
+    });
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: items.map((itemValue_0, index_1) => {
+        const day = set(index_1 + 1, 'dayWeek');
+        const itemValueFrom_0 = new OnesyDate(itemValue_0.from);
+        const itemValueTo_0 = new OnesyDate(itemValue_0.to);
+        return /*#__PURE__*/_jsxs(Line, {
+          gap: 1,
+          direction: "column",
+          children: [/*#__PURE__*/_jsxs(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            fullWidth: true,
+            children: [/*#__PURE__*/_jsx(Line, {
+              className: classes.palettePreview,
+              style: {
+                background: getColor(itemValue_0)
+              }
+            }), /*#__PURE__*/_jsxs(Line, {
+              gap: 1,
+              direction: "row",
+              align: "center",
+              children: [/*#__PURE__*/_jsx(Type, {
+                version: "b2",
+                weight: 400,
+                children: format(day, 'dd', {
+                  l
+                })
+              }), /*#__PURE__*/_jsxs(Type, {
+                version: "b2",
+                children: [format(itemValueFrom_0, formats.entire, {
+                  l
+                }), " \u2014 ", format(itemValueTo_0, formats.entire, {
+                  l
+                })]
+              })]
+            })]
+          }), itemValue_0.description && /*#__PURE__*/_jsx(Type, {
+            version: "b2",
+            weight: 200,
+            whiteSpace: "pre-wrap",
+            className: classNames([classes.timeDescription, !refs.displayTime.current && 'onesy-work-day-time']),
+            dangerouslySetInnerHTML: {
+              __html: textToInnerHTML(itemValue_0.description)
+            }
+          })]
+        }, index_1);
+      })
+    });
   };
   const formattedDate = React.useMemo(() => {
     if (view === 'day') return format(date, `MMMM DD, YYYY`, {
@@ -473,193 +489,230 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
     })}`;
   }, [view, date]);
   const legend = React.useMemo(() => {
-    return /*#__PURE__*/React.createElement(Line, {
+    return /*#__PURE__*/_jsx(Line, {
       rowGap: 1.5,
       direction: "row",
       align: "center",
-      className: classes.legend
-    }, optionsStatus.map((item_10, index_2) => /*#__PURE__*/React.createElement(Line, {
-      key: index_2,
-      gap: 1,
-      direction: "row",
-      align: "center",
-      onClick: () => onStatusToggle(item_10.value),
-      flexNo: true,
-      className: classNames([classes.itemLegend, [undefined, true].includes(refs.statuses.current[item_10.value || 'working']) && classes.itemLegendActive])
-    }, /*#__PURE__*/React.createElement(Line, {
-      className: classes.palettePreview,
-      style: {
-        background: getColor({
-          status: item_10.value
-        })
-      }
-    }), /*#__PURE__*/React.createElement(Type, {
-      version: "b2"
-    }, item_10.name))));
+      className: classes.legend,
+      children: optionsStatus.map((item_10, index_2) => /*#__PURE__*/_jsxs(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        onClick: () => onStatusToggle(item_10.value),
+        flexNo: true,
+        className: classNames([classes.itemLegend, [undefined, true].includes(refs.statuses.current[item_10.value || 'working']) && classes.itemLegendActive]),
+        children: [/*#__PURE__*/_jsx(Line, {
+          className: classes.palettePreview,
+          style: {
+            background: getColor({
+              status: item_10.value
+            })
+          }
+        }), /*#__PURE__*/_jsx(Type, {
+          version: "b2",
+          children: item_10.name
+        })]
+      }, index_2))
+    });
   }, [theme, statuses, optionsStatus]);
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
     flex: true,
     fullWidth: true,
     className: classNames([staticClassName('CalendarAvailability', theme) && ['onesy-CalendarAvailability-root'], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    fullWidth: true,
-    className: classNames([staticClassName('CalendarAvailability', theme) && ['onesy-CalendarAvailability-header']])
-  }, startHeader, /*#__PURE__*/React.createElement(Line, {
-    gap: 2,
-    direction: "row",
-    wrap: "wrap",
-    justify: "space-between",
-    align: "center",
-    fullWidth: true
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 1.5,
-    direction: "row",
-    wrap: "wrap",
-    align: "center",
-    className: classes.aside
-  }, startLeft, /*#__PURE__*/React.createElement(Button, {
-    color: "inherit",
-    version: "outlined",
-    size: "small",
-    onClick: onToday,
-    selected: now.days === date.days
-  }, l('Today')), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    name: `${l('Previous')} ${l(view)}`
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onPrevious
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconPrevious, {
-    size: "regular"
-  }))), /*#__PURE__*/React.createElement(Tooltip, {
-    name: `${l('Next')} ${l(view)}`
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onNext
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconNext, {
-    size: "regular"
-  })))), /*#__PURE__*/React.createElement(Type, {
-    version: "h2",
-    weight: 500,
-    whiteSpace: "nowrap"
-  }, formattedDate), endLeft), /*#__PURE__*/React.createElement(Line, {
-    gap: 1.5,
-    direction: "row",
-    align: "center",
-    flexNo: true,
-    className: classNames([classes.aside, classes.overflowX])
-  }, startRight, ['week', 'day'].includes(view) && /*#__PURE__*/React.createElement(Label, {
-    checked: displayTime,
-    onChange: onChangeDisplayTime
-  }, /*#__PURE__*/React.createElement(Switch, null), l('Display time')), /*#__PURE__*/React.createElement(Select, {
-    name: l('View'),
-    value: view,
-    onChange: onChangeView,
-    options: viewOptions,
-    size: "small",
-    MenuProps: {
-      portal: true,
-      size: 'regular'
-    }
-  }), endRight)), endHeader), /*#__PURE__*/React.createElement(Line, {
-    ref: refs.calendar,
-    gap: 2,
-    flex: true,
-    fullWidth: true
-  }, view === 'simple' && /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    flex: true,
-    fullWidth: true
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 4,
-    fullWidth: true,
-    className: classNames([staticClassName('CalendarAvailability', theme) && ['onesy-CalendarAvailability-simple'], classes.calendar])
-  }, simpleTimesUI(), /*#__PURE__*/React.createElement(Line, {
-    gap: 1.5
-  }, /*#__PURE__*/React.createElement(Type, {
-    version: "t2"
-  }, l('Exceptions this week')), /*#__PURE__*/React.createElement(Line, {
-    gap: 1
-  }, simpleExceptionsUI())))), ['week', 'day'].includes(view) && /*#__PURE__*/React.createElement(CalendarWeek, _extends({
-    onOpen: onOpen,
-    date: date,
-    displayTime: displayTime,
-    statuses: statuses,
-    times: times,
-    events: events,
-    day: view === 'day'
-  }, WeekProps)), legend), times && /*#__PURE__*/React.createElement(Modal, {
-    open: !!modal?.open,
-    onClose: onClose,
-    minWidth: "lg",
-    TransitionComponent: Slide,
-    size: "small"
-  }, /*#__PURE__*/React.createElement(ModalHeader, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    fullWidth: true
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center"
-  }, startLeftModal, /*#__PURE__*/React.createElement(Line, {
-    className: classes.palettePreview,
-    style: {
-      background: getColor(modal)
-    }
-  }), /*#__PURE__*/React.createElement(Type, {
-    version: "b2",
-    weight: 100
-  }, cleanValue(itemToText(modal?.status), {
-    capitalize: true
-  })), endLeftModal), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center"
-  }, startRightModal, onUpdate && /*#__PURE__*/React.createElement(Tooltip, {
-    name: l('Update')
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    onClick: () => {
-      onUpdate(modal?.object);
-      onClose();
-    }
-  }, /*#__PURE__*/React.createElement(IconEdit, IconProps))), onRemove && /*#__PURE__*/React.createElement(Tooltip, {
-    name: l('Remove')
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    onClick: () => {
-      onRemove(modal?.object);
-      onClose();
-    }
-  }, /*#__PURE__*/React.createElement(IconRemove, IconProps))), /*#__PURE__*/React.createElement(Tooltip, {
-    name: l('Close')
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    onClick: onClose
-  }, /*#__PURE__*/React.createElement(IconClose, IconProps))), endRightModal)), /*#__PURE__*/React.createElement(ModalMain, {
-    align: "flex-start",
-    className: classes.modalMain
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 1.5,
-    fullWidth: true
-  }, /*#__PURE__*/React.createElement(Type, {
-    version: "l1",
-    weight: 200
-  }, format(modal?.day, 'dd', {
-    l
-  }), " ", format(new OnesyDate(modal?.from), modal?.weekly ? `hh:mm a` : formats.entire, {
-    l
-  }), " \u2014 ", format(new OnesyDate(modal?.to), modal?.weekly ? `hh:mm a` : formats.entire, {
-    l
-  })), modal?.description && /*#__PURE__*/React.createElement(Type, {
-    version: "b2",
-    dangerouslySetInnerHTML: {
-      __html: textToInnerHTML(modal.description)
-    }
-  })))));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsxs(Line, {
+      gap: 1,
+      fullWidth: true,
+      className: classNames([staticClassName('CalendarAvailability', theme) && ['onesy-CalendarAvailability-header']]),
+      children: [startHeader, /*#__PURE__*/_jsxs(Line, {
+        gap: 2,
+        direction: "row",
+        wrap: "wrap",
+        justify: "space-between",
+        align: "center",
+        fullWidth: true,
+        children: [/*#__PURE__*/_jsxs(Line, {
+          gap: 1.5,
+          direction: "row",
+          wrap: "wrap",
+          align: "center",
+          className: classes.aside,
+          children: [startLeft, /*#__PURE__*/_jsx(Button, {
+            color: "inherit",
+            version: "outlined",
+            size: "small",
+            onClick: onToday,
+            selected: now.days === date.days,
+            children: l('Today')
+          }), /*#__PURE__*/_jsxs(Line, {
+            gap: 0,
+            direction: "row",
+            align: "center",
+            children: [/*#__PURE__*/_jsx(Tooltip, {
+              name: `${l('Previous')} ${l(view)}`,
+              children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+                onClick: onPrevious
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/_jsx(IconPrevious, {
+                  size: "regular"
+                })
+              }))
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              name: `${l('Next')} ${l(view)}`,
+              children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+                onClick: onNext
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/_jsx(IconNext, {
+                  size: "regular"
+                })
+              }))
+            })]
+          }), /*#__PURE__*/_jsx(Type, {
+            version: "h2",
+            weight: 500,
+            whiteSpace: "nowrap",
+            children: formattedDate
+          }), endLeft]
+        }), /*#__PURE__*/_jsxs(Line, {
+          gap: 1.5,
+          direction: "row",
+          align: "center",
+          flexNo: true,
+          className: classNames([classes.aside, classes.overflowX]),
+          children: [startRight, ['week', 'day'].includes(view) && /*#__PURE__*/_jsxs(Label, {
+            checked: displayTime,
+            onChange: onChangeDisplayTime,
+            children: [/*#__PURE__*/_jsx(Switch, {}), l('Display time')]
+          }), /*#__PURE__*/_jsx(Select, {
+            name: l('View'),
+            value: view,
+            onChange: onChangeView,
+            options: viewOptions,
+            size: "small",
+            MenuProps: {
+              portal: true,
+              size: 'regular'
+            }
+          }), endRight]
+        })]
+      }), endHeader]
+    }), /*#__PURE__*/_jsxs(Line, {
+      ref: refs.calendar,
+      gap: 2,
+      flex: true,
+      fullWidth: true,
+      children: [view === 'simple' && /*#__PURE__*/_jsx(Line, {
+        gap: 1,
+        flex: true,
+        fullWidth: true,
+        children: /*#__PURE__*/_jsxs(Line, {
+          gap: 4,
+          fullWidth: true,
+          className: classNames([staticClassName('CalendarAvailability', theme) && ['onesy-CalendarAvailability-simple'], classes.calendar]),
+          children: [simpleTimesUI(), /*#__PURE__*/_jsxs(Line, {
+            gap: 1.5,
+            children: [/*#__PURE__*/_jsx(Type, {
+              version: "t2",
+              children: l('Exceptions this week')
+            }), /*#__PURE__*/_jsx(Line, {
+              gap: 1,
+              children: simpleExceptionsUI()
+            })]
+          })]
+        })
+      }), ['week', 'day'].includes(view) && /*#__PURE__*/_jsx(CalendarWeek, _objectSpread({
+        onOpen: onOpen,
+        date: date,
+        displayTime: displayTime,
+        statuses: statuses,
+        times: times,
+        events: events,
+        day: view === 'day'
+      }, WeekProps)), legend]
+    }), times && /*#__PURE__*/_jsxs(Modal, {
+      open: !!modal?.open,
+      onClose: onClose,
+      minWidth: "lg",
+      TransitionComponent: Slide,
+      size: "small",
+      children: [/*#__PURE__*/_jsxs(ModalHeader, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        justify: "space-between",
+        fullWidth: true,
+        children: [/*#__PURE__*/_jsxs(Line, {
+          gap: 1,
+          direction: "row",
+          align: "center",
+          children: [startLeftModal, /*#__PURE__*/_jsx(Line, {
+            className: classes.palettePreview,
+            style: {
+              background: getColor(modal)
+            }
+          }), /*#__PURE__*/_jsx(Type, {
+            version: "b2",
+            weight: 100,
+            children: cleanValue(itemToText(modal?.status), {
+              capitalize: true
+            })
+          }), endLeftModal]
+        }), /*#__PURE__*/_jsxs(Line, {
+          gap: 1,
+          direction: "row",
+          align: "center",
+          children: [startRightModal, onUpdate && /*#__PURE__*/_jsx(Tooltip, {
+            name: l('Update'),
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: () => {
+                onUpdate(modal?.object);
+                onClose();
+              },
+              children: /*#__PURE__*/_jsx(IconEdit, _objectSpread({}, IconProps))
+            })
+          }), onRemove && /*#__PURE__*/_jsx(Tooltip, {
+            name: l('Remove'),
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: () => {
+                onRemove(modal?.object);
+                onClose();
+              },
+              children: /*#__PURE__*/_jsx(IconRemove, _objectSpread({}, IconProps))
+            })
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            name: l('Close'),
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: onClose,
+              children: /*#__PURE__*/_jsx(IconClose, _objectSpread({}, IconProps))
+            })
+          }), endRightModal]
+        })]
+      }), /*#__PURE__*/_jsx(ModalMain, {
+        align: "flex-start",
+        className: classes.modalMain,
+        children: /*#__PURE__*/_jsxs(Line, {
+          gap: 1.5,
+          fullWidth: true,
+          children: [/*#__PURE__*/_jsxs(Type, {
+            version: "l1",
+            weight: 200,
+            children: [format(modal?.day, 'dd', {
+              l
+            }), " ", format(new OnesyDate(modal?.from), modal?.weekly ? `hh:mm a` : formats.entire, {
+              l
+            }), " \u2014 ", format(new OnesyDate(modal?.to), modal?.weekly ? `hh:mm a` : formats.entire, {
+              l
+            })]
+          }), modal?.description && /*#__PURE__*/_jsx(Type, {
+            version: "b2",
+            dangerouslySetInnerHTML: {
+              __html: textToInnerHTML(modal.description)
+            }
+          })]
+        })
+      })]
+    })]
+  }));
+};
 CalendarAvailability.displayName = 'onesy-CalendarAvailability';
 export default CalendarAvailability;