@schedule-x/react 0.4.0 → 0.6.0

package/dist/assets/index-tSapxTsJ.css

@@ -1 +0,0 @@
-#root{width:100%;max-width:1280px;margin:0 auto;padding:2rem}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}:root{--sx-calendar-header-input-font-size: clamp(12px, .875rem, 28px);--sx-calendar-header-popup-z-index: 2;--sx-calendar-week-grid-padding-left: 75px}ul{list-style:none;padding:0}input,button{font-family:inherit;outline:none}button{background-color:inherit;outline:0;border:none;cursor:pointer}:root{--sx-color-primary: #6750a4;--sx-color-on-primary: #fff;--sx-color-primary-container: #eaddff;--sx-color-on-primary-container: #21005e;--sx-color-secondary: #625b71;--sx-color-on-secondary: #fff;--sx-color-secondary-container: #e8def8;--sx-color-on-secondary-container: #1e192b;--sx-color-tertiary: #7d5260;--sx-color-on-tertiary: #fff;--sx-color-tertiary-container: #ffd8e4;--sx-color-on-tertiary-container: #370b1e;--sx-color-surface: #fef7ff;--sx-color-surface-dim: #ded8e1;--sx-color-surface-bright: #fef7ff;--sx-color-on-surface: #1c1b1f;--sx-color-surface-container: #f3edf7;--sx-color-surface-container-low: #f7f2fa;--sx-color-surface-container-high: #ece6f0;--sx-color-background: #fff;--sx-color-on-background: #1c1b1f;--sx-color-outline: #79747e;--sx-color-outline-variant: #c4c7c5;--sx-color-shadow: #000;--sx-color-surface-tint: #6750a4;--sx-color-neutral: var(--sx-color-outline);--sx-color-neutral-variant: var(--sx-color-outline-variant);--sx-internal-color-gray-ripple-background: #e0e0e0;--sx-internal-color-light-gray: #fafafa;--sx-internal-color-text: #000}.is-dark{--sx-color-primary: #d0bcff;--sx-color-on-primary: #371e73;--sx-color-primary-container: #4f378b;--sx-color-on-primary-container: #eaddff;--sx-color-secondary: #ccc2dc;--sx-color-on-secondary: #332d41;--sx-color-secondary-container: #4a4458;--sx-color-on-secondary-container: #e8def8;--sx-color-tertiary: #efb8c8;--sx-color-on-tertiary: #492532;--sx-color-tertiary-container: #633b48;--sx-color-on-tertiary-container: #ffd8e4;--sx-color-surface: #141218;--sx-color-surface-dim: #141218;--sx-color-surface-bright: #3b383e;--sx-color-on-surface: #e6e1e5;--sx-color-surface-container: #211f26;--sx-color-surface-container-low: #1d1b20;--sx-color-surface-container-high: #2b2930;--sx-color-background: #141218;--sx-color-on-background: #e6e1e5;--sx-color-outline: #938f99;--sx-color-outline-variant: #444746;--sx-color-shadow: #000;--sx-color-surface-tint: #d0bcff;--sx-internal-color-text: #fff}:root{--sx-spacing-padding1: 4px;--sx-spacing-padding2: 8px;--sx-spacing-padding3: 12px;--sx-spacing-padding4: 16px;--sx-spacing-padding6: 24px;--sx-spacing-modal-padding: 16px}:root{--sx-box-shadow-level3: 0 3px 6px 0 rgb(0 0 0 / 16%), 0 3px 6px 0 rgb(0 0 0 / 23%);--sx-rounding-extra-small: 4px;--sx-rounding-small: 8px;--sx-rounding-extra-large: 28px;--sx-border: 1px solid var(--sx-color-outline-variant)}.is-dark{--sx-border: 1px solid var(--sx-color-outline-variant)}:root{--sx-font-small: .875rem;--sx-font-extra-small: .75rem;--sx-font-large: 1.125rem;--sx-font-extra-large: 1.25rem}@keyframes ripple{0%{width:0;height:0;opacity:.16}40%{width:100px;height:100px;opacity:.08}to{width:150px;height:150px;opacity:0}}.sx__ripple{position:relative;overflow:hidden}.sx__ripple:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;transform:translate(-50%,-50%);border-radius:50%;background-color:currentcolor;opacity:.1;visibility:hidden;z-index:2}.sx__ripple:active:before{visibility:visible}.sx__ripple:not(:active):before{animation:ripple .75s cubic-bezier(0,.1,.8,1);transition:visibility .75s step-end}@keyframes ripple-wide{0%{width:0;height:0;opacity:.16}40%{width:300px;height:100px;opacity:.08}to{width:450px;height:150px;opacity:0}}.sx__ripple--wide{position:relative;overflow:hidden}.sx__ripple--wide:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;transform:translate(-50%,-50%);border-radius:50%;background-color:currentcolor;opacity:.1;visibility:hidden;z-index:2}.sx__ripple--wide:active:before{visibility:visible}.sx__ripple--wide:before{border-radius:var(--sx-rounding-small)}.sx__ripple--wide:not(:active):before{animation:ripple-wide .75s cubic-bezier(0,.1,.8,1);transition:visibility .75s step-end}.sx__chevron-wrapper{position:relative;border-radius:50%;min-height:48px;min-width:48px;cursor:pointer;transition:background-color .2s ease-in-out;font-size:0}.sx__chevron-wrapper:active{background-color:var(--sx-internal-color-gray-ripple-background)}.sx__chevron-wrapper:hover{background-color:var(--sx-color-surface-dim)}.is-dark .sx__chevron-wrapper:hover{background-color:var(--sx-color-surface-container-high)}.sx__chevron-wrapper .sx__chevron{position:absolute;top:50%;width:.6rem;height:.6rem;border-width:.2rem .2rem 0 0;border-style:solid;border-color:var(--sx-internal-color-text)}.sx__chevron--previous{left:calc(50% + .125rem);transform:translate(-50%,-50%) rotate(225deg)}.sx__chevron--next{left:calc(50% - .125rem);transform:translate(-50%,-50%) rotate(45deg)}.sx__date-picker-wrapper{position:relative;color:var(--sx-color-on-background);width:fit-content}.sx__date-picker-wrapper.has-full-width{width:100%}.sx__date-picker-wrapper *{color:var(--sx-color-on-background);box-sizing:border-box}.sx__date-input-wrapper{position:relative}.sx__date-input-chevron{position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:1rem;height:1rem;pointer-events:none;transition:transform .2s ease-in-out}.sx__date-input--active .sx__date-input-chevron{transform:translateY(-50%) rotate(180deg)}.sx__date-input{width:100%;font-size:1rem;padding:var(--sx-spacing-padding4);border:var(--sx-border);border-radius:var(--sx-rounding-extra-small);cursor:pointer;background-color:var(--sx-color-background)}.sx__date-input--active .sx__date-input{border-color:var(--sx-color-primary);outline:1px solid var(--sx-color-primary)}.sx__date-input-label{position:absolute;top:0;left:21px;padding:0 var(--sx-spacing-padding1);background-color:var(--sx-color-background);font-size:.75rem;color:var(--sx-color-neutral);line-height:1rem;transform:translateY(-50%) translate(-.5rem);transition:transform .2s ease-in-out;pointer-events:none}.sx__date-input--active .sx__date-input-label{color:var(--sx-color-primary)}.is-dark .sx__date-input-label{display:none}.sx__date-picker-popup{position:absolute;z-index:1;top:calc(100% + 1px);width:20.75rem;max-width:500px;max-height:400px;overflow:scroll;box-shadow:var(--sx-box-shadow-level3);padding:var(--sx-spacing-modal-padding);background-color:var(--sx-color-background)}.is-dark .sx__date-picker-popup{background-color:var(--sx-color-surface-container-high)}.sx__date-picker-popup.bottom-end{left:auto;right:0;transform:translate(0)}.sx__date-picker-popup.top-start{top:auto;bottom:calc(100% + 1rem);left:0;transform:translate(0)}.sx__date-picker-popup.top-end{inset:auto 0 calc(100% + 1rem) auto;transform:translate(0)}.sx__date-picker__years-view{margin:0}.sx__date-picker__years-accordion__expand-button{width:100%;border:0;border-bottom:var(--sx-border);border-radius:0;background-color:transparent;font-size:1rem;padding:1em;transition:background-color .2s ease-in-out}.sx__is-expanded .sx__date-picker__years-accordion__expand-button{background-color:var(--sx-color-surface-container);border-bottom:0}.sx__date-picker__years-accordion__expand-button:hover{background-color:var(--sx-color-surface-dim)}.sx__date-picker__years-accordion__expand-button:active{background-color:var(--sx-internal-color-gray-ripple-background)}.sx__date-picker__years-view-accordion__panel{display:flex;flex-wrap:wrap}.sx__date-picker__years-view-accordion__month{flex:1 0 33.3333%;background-color:transparent;border:0;font-size:.9rem;padding:.5em 0;border-radius:25px}.sx__date-picker__years-view-accordion__month:hover{background-color:var(--sx-color-primary);color:var(--sx-color-on-primary)}.sx__date-picker__day-names{display:flex;width:100%;justify-content:space-evenly;margin-bottom:.5em}.sx__date-picker__day-names .sx__date-picker__day,.sx__date-picker__day-names .sx__date-picker__day-name{flex:1;text-align:center}.sx__date-picker__day-name{font-weight:700;color:var(--sx-color-neutral-variant)}.sx__date-picker__month-view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.sx__date-picker__month-view-header .sx__chevron-wrapper:hover{background-color:var(--sx-color-surface-dim)}.sx__date-picker__month-view-header__month-year{font-size:1.5rem;font-weight:300}.sx__date-picker__week{display:flex;width:100%;justify-content:space-evenly;margin-bottom:.5em}.sx__date-picker__week .sx__date-picker__day,.sx__date-picker__week .sx__date-picker__day-name{flex:1;text-align:center}.sx__date-picker__day{background-color:transparent;border-radius:50%;width:2.5rem;height:2.5rem}.sx__date-picker__day:hover{background-color:var(--sx-color-surface-dim)}.sx__date-picker__day.is-leading-or-trailing{color:var(--sx-color-neutral-variant)}.sx__date-picker__day--selected{background-color:var(--sx-color-primary-container);color:var(--sx-color-on-primary-container)}.sx__date-picker__day--today{background-color:var(--sx-color-primary);color:var(--sx-color-on-primary)}.sx__calendar-wrapper{height:100%;display:flex;color:var(--sx-internal-color-text)}.sx__calendar{position:relative;flex:1;height:100%;border:var(--sx-border);border-radius:var(--sx-rounding-small);display:flex;flex-flow:column;background-color:var(--sx-color-background);overflow:hidden}.sx__view-container{position:relative;flex:1;overflow-y:auto;scroll-behavior:smooth}.sx__slide-left{animation:slide-left .3s ease-out}@keyframes slide-left{0%{transform:translate(8%);filter:blur(.25rem);opacity:.1}to{transform:translate(0);filter:blur(0);opacity:1}}.sx__slide-right{animation:slide-right .3s ease-out}@keyframes slide-right{0%{transform:translate(-8%);filter:blur(.25rem);opacity:.1}to{transform:translate(0);filter:blur(0);opacity:1}}.sx__calendar-header{display:flex;justify-content:space-between;align-items:start;padding:var(--sx-spacing-padding4);gap:var(--sx-spacing-padding4)}.sx__calendar-header .sx__date-input{padding:var(--sx-spacing-padding3) var(--sx-spacing-padding4);font-size:var(--sx-calendar-header-input-font-size)}.sx__calendar-header .sx__date-picker-popup{z-index:var(--sx-calendar-header-popup-z-index)}.sx__calendar-header-content{display:flex;align-items:center;gap:var(--sx-spacing-padding4)}.sx__range-heading{font-size:clamp(16px,1.25rem,24px)}.sx__is-calendar-small .sx__range-heading{font-size:16px}.sx__today-button{border:var(--sx-border);padding:var(--sx-spacing-padding3) var(--sx-spacing-padding4);border-radius:var(--sx-rounding-extra-small);font-size:var(--sx-calendar-header-input-font-size);color:var(--sx-internal-color-text)}.sx__today-button:active{background-color:var(--sx-internal-color-gray-ripple-background)}.sx__is-calendar-small .sx__today-button{display:none}.sx__today-button:hover{background-color:var(--sx-internal-color-light-gray)}.is-dark .sx__today-button:hover{background-color:var(--sx-color-surface-container-low)}.sx__view-selection{position:relative;font-size:var(--sx-calendar-header-input-font-size)}.sx__view-selection-selected-item{height:100%;width:fit-content;padding:var(--sx-spacing-padding3) var(--sx-spacing-padding4);cursor:pointer;border-radius:var(--sx-rounding-extra-small);border:var(--sx-border)}.sx__view-selection-selected-item:hover{background-color:var(--sx-internal-color-light-gray)}.is-dark .sx__view-selection-selected-item:hover{background-color:var(--sx-color-surface-container-low)}.sx__view-selection-items{position:absolute;top:100%;box-shadow:var(--sx-box-shadow-level3);margin:0;background-color:var(--sx-color-background);z-index:var(--sx-calendar-header-popup-z-index)}.is-dark .sx__view-selection-items{background-color:var(--sx-color-surface-container-high)}.sx__view-selection-item{padding:var(--sx-spacing-padding4) var(--sx-spacing-padding6);cursor:pointer}.sx__view-selection-item:hover{background-color:var(--sx-color-primary);color:var(--sx-color-on-primary)}.sx__view-selection-item.is-selected{background-color:var(--sx-color-surface-dim)}.sx__view-selection-item.is-selected:hover{background-color:var(--sx-color-primary);color:var(--sx-color-on-primary)}.sx__month-grid-wrapper{display:flex;flex-flow:column;height:100%}.sx__month-grid-week{border-top:var(--sx-border);flex:1;display:flex}.sx__month-grid-day{padding:var(--sx-spacing-padding2) 0;flex:1}.sx__month-grid-day:not(:last-child){border-right:var(--sx-border)}.sx__month-grid-day--dragover{background-color:var(--sx-color-surface-container)}.sx__month-grid-day__header{display:flex;flex-flow:column;align-items:center}.sx__month-grid-day__header-day-name{font-size:11px;text-transform:uppercase;color:var(--sx-color-neutral)}.sx__month-grid-day__header-date{font-size:var(--sx-font-extra-small)}.sx__month-grid-day__events-more{width:calc(100% - 10px);font-size:var(--sx-font-extra-small);color:var(--sx-color-neutral);margin:var(--sx-spacing-padding1) 0;padding:var(--sx-spacing-padding1);border-radius:var(--sx-rounding-extra-small);cursor:pointer;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sx__month-grid-day__events-more:hover{background-color:var(--sx-color-surface-container);color:var(--sx-color-on-surface)}.sx__month-grid-day__events{display:grid;grid-gap:4px}.sx__month-grid-cell{height:clamp(20px,1.25rem,24px)}.sx__month-grid-event{position:relative;display:flex;align-items:center;padding:var(--sx-spacing-padding1);border-radius:var(--sx-rounding-extra-small);font-size:clamp(12px,var(--sx-font-extra-small),14px);overflow:hidden;white-space:nowrap}.sx__month-grid-blocker{pointer-events:none}.sx__month-agenda-week{display:flex}.sx__month-agenda-week:not(:first-child){border-top:var(--sx-border)}.sx__month-agenda-day{padding:var(--sx-spacing-padding2);flex:1;display:flex;flex-flow:column;align-items:center;height:3rem;border-radius:var(--sx-rounding-extra-small)}.sx__month-agenda-day--active{box-shadow:inset 0 0 0 3px var(--sx-color-primary)}.sx__month-agenda-day__event-icons{margin-top:4px;display:flex;grid-gap:3px}.sx__month-agenda-day__event-icon{height:6px;width:6px;border-radius:50%}.sx__month-agenda-day-names{display:flex;padding:var(--sx-spacing-padding2) 0;font-size:var(--sx-font-extra-small);color:var(--sx-color-neutral)}.sx__month-agenda-day-name{flex:1;display:flex;justify-content:center}.sx__month-agenda-events{padding:0 var(--sx-spacing-padding2)}.sx__month-agenda-event{padding:var(--sx-spacing-padding2);margin-bottom:var(--sx-spacing-padding2);border-radius:var(--sx-rounding-extra-small);font-size:var(--sx-font-small)}.sx__month-agenda-event:first-child{margin-top:var(--sx-spacing-padding2)}.sx__month-agenda-event__title{font-weight:600}.sx__month-agenda-event__has-icon{display:flex;align-items:center}.sx__month-agenda-events__empty{margin-top:var(--sx-spacing-padding4);display:flex;justify-content:center}.sx__week-wrapper{position:relative}.sx__week-grid{position:relative;padding-left:var(--sx-calendar-week-grid-padding-left);display:flex;height:var(--sx-week-grid-height);overflow:hidden}.sx__week-header{position:sticky;top:0;z-index:1;background-color:var(--sx-color-background)}.sx__week-header-content{position:relative}.sx__week-header-border{position:absolute;width:100%;bottom:0;border-bottom:var(--sx-border);border-left:250px solid transparent}.sx__week-grid__time-axis{display:flex;flex-flow:column;position:absolute;right:0;top:var(--sx-week-grid-offset-top);width:calc(100% - 60px)}.sx__week-grid__hour{position:relative;height:var(--sx-week-grid-hour-height);border-top:var(--sx-border);font-size:var(--sx-font-extra-small)}.sx__week-grid__hour:first-child{visibility:hidden}.sx__week-grid__hour-text{position:absolute;left:-43px;top:-.75em;color:var(--sx-color-neutral)}.sx__time-grid-day{position:relative;width:100%;height:100%;border-left:var(--sx-border)}.sx__week-grid__date-axis{padding-left:var(--sx-calendar-week-grid-padding-left);display:flex}.sx__week-grid__date{flex:1;display:flex;flex-flow:column;align-items:center;padding:var(--sx-spacing-padding3) 0;gap:var(--sx-spacing-padding1)}.sx__week-grid__day-name{text-transform:uppercase;font-size:var(--sx-font-extra-small);color:var(--sx-color-neutral);font-weight:500}.sx__week-grid__date--is-today .sx__week-grid__day-name{color:var(--sx-color-primary);font-weight:700}.sx__week-grid__date-number{display:flex;align-items:center;justify-content:center;font-size:var(--sx-font-extra-large);font-weight:500;color:var(--sx-color-neutral);height:2em;width:2em}.sx__week-grid__date--is-today .sx__week-grid__date-number{background-color:var(--sx-color-primary);color:var(--sx-color-on-primary);border-radius:50%}.sx__time-grid-event{width:calc(100% - 10px);padding:var(--sx-spacing-padding1);position:absolute;border-radius:var(--sx-rounding-extra-small);font-size:var(--sx-font-extra-small);overflow:hidden;-webkit-user-select:none;user-select:none}.sx__time-grid-event.is-event-copy{opacity:.5;box-shadow:var(--sx-box-shadow-level3);z-index:1;transition:transform .15s ease-in-out}.sx__time-grid-event-title{font-weight:600}.sx__time-grid-event-time,.sx__time-grid-event-people{display:flex;align-items:center;white-space:nowrap}.sx__event-icon{min-width:15px;min-height:15px;max-width:15px;max-height:15px;margin-inline-end:var(--sx-spacing-padding2)}.sx__date-grid{display:flex;padding-left:var(--sx-calendar-week-grid-padding-left)}.sx__date-grid-day{width:100%;display:grid;grid-gap:2px}.sx__date-grid-event{position:relative;display:flex;align-items:center;padding:var(--sx-spacing-padding1);border-radius:var(--sx-rounding-extra-small);font-size:clamp(12px,var(--sx-font-extra-small),14px);font-weight:600;-webkit-user-select:none;user-select:none}.sx__date-grid-event:has(.sx__date-grid-event--left-overflow){margin-left:10px}.sx__date-grid-event:has(.sx__date-grid-event--right-overflow){margin-right:10px}.sx__date-grid-event .sx__date-grid-event--left-overflow{position:absolute;z-index:1;width:10px;height:100%;left:-10px;clip-path:polygon(100% 0,0 50%,100% 100%,100% 0)}.sx__date-grid-event .sx__date-grid-event--right-overflow{position:absolute;z-index:1;width:10px;height:100%;right:-10px;clip-path:polygon(0 0,100% 50%,0 100%,0 0)}.sx__date-grid-event.sx__date-grid-event--copy{z-index:2;box-shadow:var(--sx-box-shadow-level3);transition-property:transform,width;transition-duration:.15s;transition-timing-function:ease-in-out}.sx__date-grid-event-text{width:calc(100% - var(--sx-spacing-padding1) * 2);left:var(--sx-spacing-padding1);position:absolute;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.sx__date-grid-cell{height:clamp(20px,1.25rem,24px)}:root{--sx-week-grid-height: 0;--sx-time-axis-height: 0;--sx-week-grid-hour-height: 0;--sx-week-grid-offset-top: 0}.sx__event-modal{visibility:hidden;position:fixed;top:var(--sx-event-modal-top);left:var(--sx-event-modal-left);width:400px;height:fit-content;max-height:250px;padding:var(--sx-spacing-padding6);background-color:var(--sx-color-background);box-shadow:0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f,0 11px 15px -7px #0003;border-radius:var(--sx-rounding-small);z-index:1;overflow-y:scroll}.sx__event-modal.is-open{animation:slide-sideways;animation-duration:.3s;visibility:initial}.is-dark .sx__event-modal{background-color:var(--sx-color-surface-container-high)}@keyframes slide-sideways{0%{opacity:0;transform:translate(var(--sx-event-modal-animation-start))}to{transform:translate(0);opacity:1}}.sx__event-modal .sx__event-icon{min-width:16px;min-height:16px;max-width:16px;max-height:16px;margin-inline-end:var(--sx-spacing-padding2)}.sx__event-modal__color-icon{display:inline-block;width:16px;height:16px;border-radius:25%;margin-right:var(--sx-spacing-padding3)}.sx__has-icon{display:grid;align-items:start;grid-template-columns:30px 1fr;margin-bottom:var(--sx-spacing-padding2)}.sx__has-icon .sx__event-icon{margin-top:2px}.sx__has-icon .sx__event-modal__color-icon{margin-top:4px}.sx__event-modal__title{font-size:var(--sx-font-large)}.sx__event-modal__time{font-size:var(--sx-font-small)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde}*{box-sizing:border-box}body{margin:0;display:flex;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}.calendar-wrapper{height:800px;max-height:100vh;width:100%}

package/dist/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="/assets/index-I1yYmKKo.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-tSapxTsJ.css">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>

package/dist/types/calendar.d.ts

@@ -1,6 +0,0 @@
-import { CalendarApp } from '@schedule-x/calendar';
-type props = {
-    calendarApp: CalendarApp;
-};
-export declare function Calendar({ calendarApp }: props): import("react/jsx-runtime").JSX.Element;
-export {};

package/src/calendar.tsx

@@ -1,20 +0,0 @@
-import { CalendarApp } from '@schedule-x/calendar'
-import { useEffect } from 'react'
-
-type props = {
-  calendarApp: CalendarApp
-}
-
-export function Calendar({ calendarApp }: props) {
-  const randomId = 'sx' + Math.random().toString(36).substring(7)
-
-  useEffect(() => {
-    calendarApp.render(document.getElementById(randomId) as HTMLElement)
-  }, [calendarApp, randomId])
-
-  return (
-    <>
-      <div className="sx-react-calendar-wrapper" id={randomId}></div>
-    </>
-  )
-}