@koine/react 1.0.11 → 1.0.12

package/Calendar/utils.js

@@ -1,3 +1,4 @@
+import { __assign } from "tslib";
 import isWithinInterval from "date-fns/isWithinInterval";
 import endOfMonth from "date-fns/endOfMonth";
 import startOfWeek from "date-fns/startOfWeek";
@@ -8,7 +9,7 @@ import subWeeks from "date-fns/subWeeks";
 import addWeeks from "date-fns/addWeeks";
 import addDays from "date-fns/addDays";
 export function getEventTimestamp(dateLike) {
-    const date = new Date(dateLike);
+    var date = new Date(dateLike);
     date.setHours(0, 0, 0, 0);
     return date.valueOf() / 1000;
 }
@@ -29,7 +30,7 @@ export function getStartDate(date, view) {
     return date;
 }
 export function getEndDate(start, view) {
-    let end = start;
+    var end = start;
     if (view === "month") {
         end = endOfMonth(start);
     }
@@ -52,152 +53,150 @@ export function getNextDate(date, view) {
     return addWeeks(date, 1);
 }
 export function isTodayInView(start, end) {
-    return isWithinInterval(new Date(), { start, end });
+    return isWithinInterval(new Date(), { start: start, end: end });
 }
 export function mergeCalendarEvents(first, second) {
-    const all = {};
+    var all = {};
     addCalendarEvents(first, all);
     addCalendarEvents(second, all);
     return all;
 }
 export function addCalendarEvents(toAdd, toExtend) {
-    for (const id in toAdd) {
-        const event = toAdd[id];
-        toExtend[id] = event;
+    for (var id in toAdd) {
+        var event_1 = toAdd[id];
+        toExtend[id] = event_1;
     }
     return toExtend;
 }
 function getEventsByTimestamp(events) {
-    const output = {};
-    for (const uid in events) {
-        const event = events[uid];
-        event.days.forEach((timestamp) => {
+    var output = {};
+    var _loop_1 = function (uid) {
+        var event_2 = events[uid];
+        event_2.days.forEach(function (timestamp) {
             output[timestamp] = (output[timestamp] || {});
-            output[timestamp][uid] = event;
+            output[timestamp][uid] = event_2;
         });
+    };
+    for (var uid in events) {
+        _loop_1(uid);
     }
     return output;
 }
 function getSortedEvents(events) {
-    const output = [];
-    for (const uid in events) {
+    var output = [];
+    for (var uid in events) {
         output.push(events[uid]);
     }
     // sort events first multi, then all day then by start then by created date
-    output.sort((a, b) => {
-        const multi = Number(b.multi) - Number(a.multi);
-        const allDay = Number(b.allDay) - Number(a.allDay);
-        const start = a.start.getTime() - b.start.getTime();
-        const created = a.created.getTime() - b.created.getTime();
+    output.sort(function (a, b) {
+        var multi = Number(b.multi) - Number(a.multi);
+        var allDay = Number(b.allDay) - Number(a.allDay);
+        var start = a.start.getTime() - b.start.getTime();
+        var created = a.created.getTime() - b.created.getTime();
         return multi || allDay || start || created;
     });
     return output;
 }
-const FREE_SLOT = 0;
-const BUSY_SLOT = 1;
+var FREE_SLOT = 0;
+var BUSY_SLOT = 1;
 export function processEventsInView(eventsMap, calendarView, month, weeks) {
-    const eventsByTimestamp = getEventsByTimestamp(eventsMap);
-    const eventsList = getSortedEvents(eventsMap);
-    const todayDate = new Date();
-    const todayTimestamp = getEventTimestamp(todayDate);
-    const startedAtTopMap = {};
-    const viewWeeks = [];
-    for (let weekIdx = 0; weekIdx < weeks.length; weekIdx++) {
-        const viewWeek = {
-            props: { key: `week.${weekIdx}` },
+    var eventsByTimestamp = getEventsByTimestamp(eventsMap);
+    var eventsList = getSortedEvents(eventsMap);
+    var todayDate = new Date();
+    var todayTimestamp = getEventTimestamp(todayDate);
+    var startedAtTopMap = {};
+    var viewWeeks = [];
+    var _loop_2 = function (weekIdx) {
+        var viewWeek = {
+            props: { key: "week.".concat(weekIdx) },
             days: [],
         };
-        const weekStartDate = weeks[weekIdx];
-        const weekStartDay = weekStartDate.getDate();
-        const weekStartTimestamp = getEventTimestamp(new Date(weekStartDate));
-        const weekEndTimestamp = getEventTimestamp(addDays(new Date(weekStartDate), 6));
-        for (let dayNumber = 0; dayNumber < 7; dayNumber++) {
-            const dayDate = new Date(new Date(weekStartDate).setDate(weekStartDay + dayNumber));
-            const dayTimestamp = getEventTimestamp(dayDate);
-            const $isToday = todayTimestamp === dayTimestamp;
-            const $isOutOfRange = calendarView === "month" && dayDate.getMonth() !== month;
-            const contextualProps = {
-                $isToday,
-                $isOutOfRange,
+        var weekStartDate = weeks[weekIdx];
+        var weekStartDay = weekStartDate.getDate();
+        var weekStartTimestamp = getEventTimestamp(new Date(weekStartDate));
+        var weekEndTimestamp = getEventTimestamp(addDays(new Date(weekStartDate), 6));
+        for (var dayNumber = 0; dayNumber < 7; dayNumber++) {
+            var dayDate = new Date(new Date(weekStartDate).setDate(weekStartDay + dayNumber));
+            var dayTimestamp = getEventTimestamp(dayDate);
+            var $isToday = todayTimestamp === dayTimestamp;
+            var $isOutOfRange = calendarView === "month" && dayDate.getMonth() !== month;
+            var contextualProps = {
+                $isToday: $isToday,
+                $isOutOfRange: $isOutOfRange,
             };
-            const viewDay = {
-                props: { key: `day.${dayTimestamp}`, ...contextualProps },
+            var viewDay = {
+                props: __assign({ key: "day.".concat(dayTimestamp) }, contextualProps),
                 timestamp: dayTimestamp + "",
                 label: dayDate.getDate() + "",
                 events: [],
             };
             // check that we have events in this day
-            if (eventsByTimestamp?.[dayTimestamp]) {
-                const verticalSlots = Object.keys(eventsByTimestamp[dayTimestamp]).map(() => FREE_SLOT);
-                for (let eventIdx = 0; eventIdx < eventsList.length; eventIdx++) {
-                    const event = eventsList[eventIdx];
-                    let width = 1;
-                    let top = 0;
-                    let firstOfMulti;
-                    if (!event.daysMap[dayTimestamp]) {
+            if (eventsByTimestamp === null || eventsByTimestamp === void 0 ? void 0 : eventsByTimestamp[dayTimestamp]) {
+                var verticalSlots = Object.keys(eventsByTimestamp[dayTimestamp]).map(function () { return FREE_SLOT; });
+                for (var eventIdx = 0; eventIdx < eventsList.length; eventIdx++) {
+                    var event_3 = eventsList[eventIdx];
+                    var width = 1;
+                    var top_1 = 0;
+                    var firstOfMulti = void 0;
+                    if (!event_3.daysMap[dayTimestamp]) {
                         continue;
                     }
                     // only for multi days events:
-                    if (event.multi) {
+                    if (event_3.multi) {
                         // filter out the days outside of the current week view to avoid
                         // making a multi-days event chip wider than the week row or shorter
                         // than it should be (when event spans across weeks)
-                        width = event.days.filter((t) => t >= weekStartTimestamp && t <= weekEndTimestamp).length;
+                        width = event_3.days.filter(function (t) { return t >= weekStartTimestamp && t <= weekEndTimestamp; }).length;
                         // flag the first day of multi-days events, consider that an event
                         // might start in a day earlier (hence outside) of the current
                         // week/month view, so we always check for Mondays (dayNumber === 0)
-                        if (event.days.indexOf(dayTimestamp) === 0 || dayNumber === 0) {
+                        if (event_3.days.indexOf(dayTimestamp) === 0 || dayNumber === 0) {
                             firstOfMulti = true;
                         }
                     }
                     // if we already have the information on when the event has been
                     // vertically positioned use that index
-                    if (startedAtTopMap[event.uid]) {
-                        top = startedAtTopMap[event.uid];
+                    if (startedAtTopMap[event_3.uid]) {
+                        top_1 = startedAtTopMap[event_3.uid];
                     }
                     else {
                         // now look for a free slot and use its index as `top`
-                        for (let verticalIdx = 0; verticalIdx < verticalSlots.length; verticalIdx++) {
-                            const freeOrBusy = verticalSlots[verticalIdx];
+                        for (var verticalIdx = 0; verticalIdx < verticalSlots.length; verticalIdx++) {
+                            var freeOrBusy = verticalSlots[verticalIdx];
                             if (freeOrBusy !== BUSY_SLOT) {
-                                top = verticalIdx;
+                                top_1 = verticalIdx;
                                 break;
                             }
                         }
                     }
                     // now mark the slot as busy
-                    verticalSlots[top] = BUSY_SLOT;
+                    verticalSlots[top_1] = BUSY_SLOT;
                     // store the slot vertical position consistently for multi-days events
                     if (firstOfMulti) {
-                        startedAtTopMap[event.uid] = top;
+                        startedAtTopMap[event_3.uid] = top_1;
                     }
                     // push the event, they will be sorted later
-                    viewDay.events.push({
-                        key: `event.${dayTimestamp}-${top}`,
-                        ...contextualProps,
-                        ...event,
-                        isPast: todayDate > event.end,
-                        firstOfMulti,
-                        top,
-                        width,
-                    });
+                    viewDay.events.push(__assign(__assign(__assign({ key: "event.".concat(dayTimestamp, "-").concat(top_1) }, contextualProps), event_3), { isPast: todayDate > event_3.end, firstOfMulti: firstOfMulti, top: top_1, width: width }));
                 }
                 // fill the empty slots with events' placeholders
-                for (let i = 0; i < verticalSlots.length; i++) {
+                for (var i = 0; i < verticalSlots.length; i++) {
                     if (verticalSlots[i] !== BUSY_SLOT) {
                         viewDay.events.push({
-                            key: `event.${dayTimestamp}-${i}}`,
+                            key: "event.".concat(dayTimestamp, "-").concat(i, "}"),
                             placeholder: true,
                             top: i,
                         });
                     }
                 }
                 // sort events and events placeholders by top position
-                viewDay.events.sort((a, b) => a.top - b.top);
+                viewDay.events.sort(function (a, b) { return a.top - b.top; });
             }
             viewWeek.days.push(viewDay);
         }
         viewWeeks.push(viewWeek);
+    };
+    for (var weekIdx = 0; weekIdx < weeks.length; weekIdx++) {
+        _loop_2(weekIdx);
     }
     return viewWeeks;
 }

package/Carousel/Carousel.js

@@ -1,4 +1,4 @@
-export const KoineCarousel = null;
+export var KoineCarousel = null;
 // import React, { useEffect, useState, useRef } from 'react';
 // import Slide from './slide';
 // import { getSliderListStyles } from './slider-list';

package/Carousel/CarouselCss.js

@@ -1,37 +1,23 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children /* , useId */ } from "react";
 import styled from "styled-components";
 import { Row, Col, GRID_GUTTER_DEFAULT as DF, } from "../Grid";
 import { useId } from "../hooks/useId";
-export const CarouselCssRow = styled(Row) `
-  ${({ $gutter: cs, theme: { gutter } }) => `
-    margin-left: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
-    margin-right: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
-    padding-left: ${cs === DF ? gutter[DF] : gutter[DF] - gutter[cs]}px;
-    padding-right: ${cs === DF ? gutter[DF] : gutter[DF] - gutter[cs]}px;
-  `}
-
-  scroll-behavior: smooth;
-  scroll-snap-type: x;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-export const CarouselCssCol = styled(Col) `
-  ${(p) => p.$width && `flex-basis: ${p.$width}px; min-width: ${p.$width}px;`}
-  position: relative;
-  scroll-snap-align: ${(p) => p.$snap};
-`;
+export var CarouselCssRow = styled(Row)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
+    var cs = _a.$gutter, gutter = _a.theme.gutter;
+    return "\n    margin-left: -".concat(cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2, "px;\n    margin-right: -").concat(cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2, "px;\n    padding-left: ").concat(cs === DF ? gutter[DF] : gutter[DF] - gutter[cs], "px;\n    padding-right: ").concat(cs === DF ? gutter[DF] : gutter[DF] - gutter[cs], "px;\n  ");
+});
+export var CarouselCssCol = styled(Col)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"], ["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"])), function (p) { return p.$width && "flex-basis: ".concat(p.$width, "px; min-width: ").concat(p.$width, "px;"); }, function (p) { return p.$snap; });
 /**
  * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
  */
-export const KoineCarouselCss = ({ items, $gutterRow, $gutterCol, $gutter = "quarter", $proportion, $snap = "center", width, children, ...colProps }) => {
-    const slides = children ? Children.toArray(children) : items;
-    const id = useId();
+export var KoineCarouselCss = function (_a) {
+    var items = _a.items, $gutterRow = _a.$gutterRow, $gutterCol = _a.$gutterCol, _b = _a.$gutter, $gutter = _b === void 0 ? "quarter" : _b, $proportion = _a.$proportion, _c = _a.$snap, $snap = _c === void 0 ? "center" : _c, width = _a.width, children = _a.children, colProps = __rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
+    var slides = children ? Children.toArray(children) : items;
+    var id = useId();
     if (!slides)
         return null;
-    return (_jsx(CarouselCssRow, { "$noWrap": true, "$gutter": $gutterRow || $gutter, children: slides.map((_slide, idx) => (_jsx(CarouselCssCol, { ...colProps, "$gutter": $gutterCol || $gutter, "$width": width, children: slides[idx] }, `CarouselCssCol-${id}-${idx}`))) }));
+    return (_jsx(CarouselCssRow, __assign({ "$noWrap": true, "$gutter": $gutterRow || $gutter }, { children: slides.map(function (_slide, idx) { return (_jsx(CarouselCssCol, __assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width }, { children: slides[idx] }), "CarouselCssCol-".concat(id, "-").concat(idx))); }) })));
 };
+var templateObject_1, templateObject_2;

package/Collapsable/Collapsable.js

@@ -1 +1 @@
-export const Collapsable = null;
+export var Collapsable = null;

package/Debug/Debug.js

@@ -1,21 +1,9 @@
+import { __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-const Root = styled.div `
-  background: #f4f4f4;
-  border: 1px solid #ddd;
-  border-left: 3px solid #f36d33;
-  color: #666;
-  page-break-inside: avoid;
-  font-family: monospace;
-  font-size: small;
-  line-height: 1.6;
-  margin-bottom: 1.6em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1em 1.5em;
-  display: block;
-  word-wrap: break-word;
-`;
-export const Debug = ({ data }) => {
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"], ["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"])));
+export var Debug = function (_a) {
+    var data = _a.data;
     return _jsx(Root, { children: JSON.stringify(data, undefined, 2) });
 };
+var templateObject_1;

package/Details/Details.js

@@ -1,29 +1,32 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, /* useId, */ useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, 
+/* useId, */ useRef, useState, } from "react";
 import { useWindowSize } from "../hooks/useWindowSize";
 import { extendComponent, } from "../helpers";
 import { useId } from "../hooks/useId";
-export const Root = "details";
-export const Summary = "summary";
-export const Body = "div";
-export const Content = "div";
+export var Root = "details";
+export var Summary = "summary";
+export var Body = "div";
+export var Content = "div";
 /**
  * FIXME: it actually works even without forwardRef, check if we do need it
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
  */
-const DetailsWithRef = forwardRef(function Details({ id, open: propOpen, recalc, summary, children, Root: _Root, Summary: _Summary, Body: _Body, Content: _Content, onChange, ...props }, ref) {
-    const isControlled = typeof propOpen !== "undefined";
-    const [stateOpen, setStateOpen] = useState(propOpen);
-    const [height, setHeight] = useState(0);
-    const hash = id ? `#${id}` : "";
-    const winSize = useWindowSize();
-    const open = isControlled ? propOpen : stateOpen;
-    const [overflow, setOverflow] = useState(open ? "unset" : "hidden");
-    const content = useRef(null);
-    const defaultId = useId();
+var DetailsWithRef = forwardRef(function Details(_a, ref) {
+    var id = _a.id, propOpen = _a.open, recalc = _a.recalc, summary = _a.summary, children = _a.children, _Root = _a.Root, _Summary = _a.Summary, _Body = _a.Body, _Content = _a.Content, onChange = _a.onChange, props = __rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
+    var isControlled = typeof propOpen !== "undefined";
+    var _b = useState(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
+    var _c = useState(0), height = _c[0], setHeight = _c[1];
+    var hash = id ? "#".concat(id) : "";
+    var winSize = useWindowSize();
+    var open = isControlled ? propOpen : stateOpen;
+    var _d = useState(open ? "unset" : "hidden"), overflow = _d[0], setOverflow = _d[1];
+    var content = useRef(null);
+    var defaultId = useId();
     id = id || defaultId;
-    const handleClick = useCallback(() => {
+    var handleClick = useCallback(function () {
         if (hash) {
             window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
         }
@@ -31,32 +34,32 @@ const DetailsWithRef = forwardRef(function Details({ id, open: propOpen, recalc,
             onChange();
         }
         if (!isControlled) {
-            setStateOpen((prevOpen) => !prevOpen);
+            setStateOpen(function (prevOpen) { return !prevOpen; });
         }
     }, [open, hash, onChange, isControlled]);
-    useEffect(() => {
+    useEffect(function () {
         if (content.current) {
             setHeight(Math.ceil(content.current.offsetHeight));
         }
     }, [winSize, recalc]);
     // deeplink on mount
-    useEffect(() => {
+    useEffect(function () {
         if (!isControlled && hash && window.location.hash === hash) {
             setStateOpen(true);
         }
     }, [hash, isControlled]);
-    return (_jsxs(Root, { ...props, open: open || false, children: [_jsx(Summary, { "$open": open, onClick: handleClick, children: summary || " " }), _jsx(Body, { "$open": open, style: { overflow }, children: _jsx(Content
+    return (_jsxs(Root, __assign({}, props, { open: open || false }, { children: [_jsx(Summary, __assign({ "$open": open, onClick: handleClick }, { children: summary || " " })), _jsx(Body, __assign({ "$open": open, style: { overflow: overflow } }, { children: _jsx(Content
                 // ref={content}
-                , { "$open": open, 
+                , __assign({ "$open": open, 
                     // aria-expanded={open}
                     // aria-label={open ? ariaCollapse : ariaExpand}
                     style: {
                         pointerEvents: open ? "all" : "none",
-                    }, children: children }) })] }));
+                    } }, { children: children })) }))] })));
 });
-export const KoineDetails = extendComponent(DetailsWithRef, {
-    Root,
-    Summary,
-    Body,
-    Content,
+export var KoineDetails = extendComponent(DetailsWithRef, {
+    Root: Root,
+    Summary: Summary,
+    Body: Body,
+    Content: Content,
 });

package/Dialog/DialogMui.js

@@ -1,15 +1,16 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import ModalUnstyled from "@mui/base/ModalUnstyled";
 import { MdClear as IconClose } from "react-icons/md";
 import { extendComponent, } from "../helpers";
-export const Root = ModalUnstyled;
-export const Backdrop = "div";
-export const Container = "div";
-export const Paper = "div";
-export const Close = "button";
-export const Header = "div";
-export const Body = "div";
+export var Root = ModalUnstyled;
+export var Backdrop = "div";
+export var Container = "div";
+export var Paper = "div";
+export var Close = "button";
+export var Header = "div";
+export var Body = "div";
 // const Dialog = ({
 //   children,
 //   title,
@@ -45,16 +46,17 @@ export const Body = "div";
  *
  * FIXME: it actually works even without forwardRef, check if we do need it
  */
-const DialogWithRef = forwardRef(function Dialog({ children, title, $scrollPaper, Root: _Root, Backdrop: _Backdrop, Container: _Container, Paper: _Paper, Close: _Close, Header: _Header, Body: _Body, onClose, ...props }, ref) {
+var DialogWithRef = forwardRef(function Dialog(_a, ref) {
+    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, _Root = _a.Root, _Backdrop = _a.Backdrop, _Container = _a.Container, _Paper = _a.Paper, _Close = _a.Close, _Header = _a.Header, _Body = _a.Body, onClose = _a.onClose, props = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "onClose"]);
     // click handling is taken from
     // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
-    const backdropClick = useRef();
-    const handleMouseDown = (event) => {
+    var backdropClick = useRef();
+    var handleMouseDown = function (event) {
         // We don't want to close the dialog when clicking the dialog content.
         // Make sure the event starts and ends on the same DOM element.
         backdropClick.current = event.target === event.currentTarget;
     };
-    const handleBackdropClick = (event) => {
+    var handleBackdropClick = function (event) {
         // Ignore the events not coming from the "backdrop".
         if (!backdropClick.current) {
             return;
@@ -65,14 +67,14 @@ const DialogWithRef = forwardRef(function Dialog({ children, title, $scrollPaper
             onClose(event, "backdropClick");
         }
     };
-    return (_jsx(Root, { BackdropComponent: Backdrop, onClick: handleBackdropClick, onClose: onClose, ref: ref, ...props, children: _jsx(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: _jsxs(Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && _jsx(Header, { children: title }), _jsx(Close, { onClick: onClose, children: _jsx(IconClose, {}) }), _jsx(Body, { children: children })] }) }) }));
+    return (_jsx(Root, __assign({ BackdropComponent: Backdrop, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: _jsx(Container, __assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: _jsxs(Paper, __assign({ "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && _jsx(Header, { children: title }), _jsx(Close, __assign({ onClick: onClose }, { children: _jsx(IconClose, {}) })), _jsx(Body, { children: children })] })) })) })));
 });
-export const KoineDialog = extendComponent(DialogWithRef, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body,
+export var KoineDialog = extendComponent(DialogWithRef, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });

package/Dialog/css/bare.js

@@ -1,19 +1,21 @@
+import { __makeTemplateObject } from "tslib";
 import { classed, extendComponent } from "../../helpers";
 import * as _ from "../DialogMui";
 // export type { KoineDialogProps } from "../DialogMui";
-export const Root = classed(_.Root) `dialog`;
-export const Backdrop = classed(_.Backdrop) `dialogBackdrop`;
-export const Container = classed(_.Container) `dialogContainer`;
-export const Paper = classed(_.Paper) `dialogPaper`;
-export const Close = classed(_.Close) `"dialogClose`;
-export const Header = classed(_.Header) `dialogHeader`;
-export const Body = classed(_.Body) `dialogBody`;
-export const KoineDialog = extendComponent(_.KoineDialog, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body,
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["dialog"], ["dialog"])));
+export var Backdrop = classed(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["dialogBackdrop"], ["dialogBackdrop"])));
+export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["dialogContainer"], ["dialogContainer"])));
+export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["dialogPaper"], ["dialogPaper"])));
+export var Close = classed(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\"dialogClose"], ["\"dialogClose"])));
+export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["dialogHeader"], ["dialogHeader"])));
+export var Body = classed(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["dialogBody"], ["dialogBody"])));
+export var KoineDialog = extendComponent(_.KoineDialog, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/m/bare.js

@@ -1,3 +1,4 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo, useRef } from "react";
 import { MdClear as IconClose } from "react-icons/md";
@@ -11,18 +12,21 @@ import { Root, Backdrop, Container, Paper, Close, Header, Body, } from "../Dialo
  * - https://github.com/framer/motion/issues/478
  * - https://codesandbox.io/s/clever-banzai-7km49?file=/src/Modal.js
  */
-const Dialog = forwardRef(function Dialog({ children, title, $scrollPaper, Root, Backdrop, Container, Paper, Close, Header, Body, mBackdrop, mPaper, onClose, ...props }, ref) {
-    const BackdropMotion = useMemo(() => (props) => (_jsx(AnimatePresence, { children: props.open && _jsx(Backdrop, { ...mBackdrop, ...props }) })), [Backdrop, mBackdrop]);
+var Dialog = forwardRef(function Dialog(_a, ref) {
+    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, Root = _a.Root, Backdrop = _a.Backdrop, Container = _a.Container, Paper = _a.Paper, Close = _a.Close, Header = _a.Header, Body = _a.Body, mBackdrop = _a.mBackdrop, mPaper = _a.mPaper, onClose = _a.onClose, props = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "mBackdrop", "mPaper", "onClose"]);
+    var BackdropMotion = useMemo(function () { return function (props) {
+        return (_jsx(AnimatePresence, { children: props.open && _jsx(Backdrop, __assign({}, mBackdrop, props)) }));
+    }; }, [Backdrop, mBackdrop]);
     // FIXME: extract this logic either in a useDialog hook or in a useclickOutside hook
     // click handling is taken from
     // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
-    const backdropClick = useRef();
-    const handleMouseDown = (event) => {
+    var backdropClick = useRef();
+    var handleMouseDown = function (event) {
         // We don't want to close the dialog when clicking the dialog content.
         // Make sure the event starts and ends on the same DOM element.
         backdropClick.current = event.target === event.currentTarget;
     };
-    const handleBackdropClick = (event) => {
+    var handleBackdropClick = function (event) {
         // Ignore the events not coming from the "backdrop".
         if (!backdropClick.current) {
             return;
@@ -33,16 +37,16 @@ const Dialog = forwardRef(function Dialog({ children, title, $scrollPaper, Root,
             onClose(event, "backdropClick");
         }
     };
-    return (_jsx(Root, { keepMounted: true, BackdropComponent: BackdropMotion, onClick: handleBackdropClick, onClose: onClose, ref: ref, ...props, style: mRootStyle(props), children: _jsx(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: _jsx(AnimatePresence, { children: props.open && (
+    return (_jsx(Root, __assign({ keepMounted: true, BackdropComponent: BackdropMotion, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { style: mRootStyle(props) }, { children: _jsx(Container, __assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: _jsx(AnimatePresence, { children: props.open && (
                 // @ts-expect-error framer props collision...
-                _jsxs(Paper, { ...mPaper, "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && _jsx(Header, { children: title }), _jsx(Close, { onClick: onClose, children: _jsx(IconClose, {}) }), _jsx(Body, { children: children })] })) }) }) }));
+                _jsxs(Paper, __assign({}, mPaper, { "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && _jsx(Header, { children: title }), _jsx(Close, __assign({ onClick: onClose }, { children: _jsx(IconClose, {}) })), _jsx(Body, { children: children })] }))) }) })) })));
 });
-export const KoineDialog = extendComponent(Dialog, {
-    Root,
+export var KoineDialog = extendComponent(Dialog, {
+    Root: Root,
     Backdrop: m(Backdrop),
-    Container,
+    Container: Container,
     Paper: m(Paper),
-    Close,
-    Header,
-    Body,
+    Close: Close,
+    Header: Header,
+    Body: Body,
 });

package/Dialog/m/basic.js

@@ -1,5 +1,5 @@
 export * from "./index";
-export const dialogBackdropMotion = {
+export var dialogBackdropMotion = {
     initial: {
         opacity: 0,
     },
@@ -12,7 +12,7 @@ export const dialogBackdropMotion = {
         opacity: 0,
     },
 };
-export const dialogPaperMotion = {
+export var dialogPaperMotion = {
     initial: {
         // scale: .9,
         translateY: -60,

package/Dialog/m/index.js

@@ -1,4 +1,4 @@
-export const mRootStyle = (props) => ({
-    pointerEvents: props.open ? "all" : "none",
-    ...(props.style || {}),
-});
+import { __assign } from "tslib";
+export var mRootStyle = function (props) {
+    return (__assign({ pointerEvents: props.open ? "all" : "none" }, (props.style || {})));
+};