@koine/react 1.0.11 → 1.0.12

package/node/Calendar/utils.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processEventsInView = exports.addCalendarEvents = exports.mergeCalendarEvents = exports.isTodayInView = exports.getNextDate = exports.getPrevDate = exports.getEndDate = exports.getStartDate = exports.getDisplayTime = exports.getEventTimestamp = void 0;
-const tslib_1 = require("tslib");
-const isWithinInterval_1 = tslib_1.__importDefault(require("date-fns/isWithinInterval"));
-const endOfMonth_1 = tslib_1.__importDefault(require("date-fns/endOfMonth"));
-const startOfWeek_1 = tslib_1.__importDefault(require("date-fns/startOfWeek"));
-const endOfWeek_1 = tslib_1.__importDefault(require("date-fns/endOfWeek"));
-const subMonths_1 = tslib_1.__importDefault(require("date-fns/subMonths"));
-const addMonths_1 = tslib_1.__importDefault(require("date-fns/addMonths"));
-const subWeeks_1 = tslib_1.__importDefault(require("date-fns/subWeeks"));
-const addWeeks_1 = tslib_1.__importDefault(require("date-fns/addWeeks"));
-const addDays_1 = tslib_1.__importDefault(require("date-fns/addDays"));
+var tslib_1 = require("tslib");
+var isWithinInterval_1 = tslib_1.__importDefault(require("date-fns/isWithinInterval"));
+var endOfMonth_1 = tslib_1.__importDefault(require("date-fns/endOfMonth"));
+var startOfWeek_1 = tslib_1.__importDefault(require("date-fns/startOfWeek"));
+var endOfWeek_1 = tslib_1.__importDefault(require("date-fns/endOfWeek"));
+var subMonths_1 = tslib_1.__importDefault(require("date-fns/subMonths"));
+var addMonths_1 = tslib_1.__importDefault(require("date-fns/addMonths"));
+var subWeeks_1 = tslib_1.__importDefault(require("date-fns/subWeeks"));
+var addWeeks_1 = tslib_1.__importDefault(require("date-fns/addWeeks"));
+var addDays_1 = tslib_1.__importDefault(require("date-fns/addDays"));
 function getEventTimestamp(dateLike) {
-    const date = new Date(dateLike);
+    var date = new Date(dateLike);
     date.setHours(0, 0, 0, 0);
     return date.valueOf() / 1000;
 }
@@ -36,7 +36,7 @@ function getStartDate(date, view) {
 }
 exports.getStartDate = getStartDate;
 function getEndDate(start, view) {
-    let end = start;
+    var end = start;
     if (view === "month") {
         end = (0, endOfMonth_1.default)(start);
     }
@@ -62,155 +62,153 @@ function getNextDate(date, view) {
 }
 exports.getNextDate = getNextDate;
 function isTodayInView(start, end) {
-    return (0, isWithinInterval_1.default)(new Date(), { start, end });
+    return (0, isWithinInterval_1.default)(new Date(), { start: start, end: end });
 }
 exports.isTodayInView = isTodayInView;
 function mergeCalendarEvents(first, second) {
-    const all = {};
+    var all = {};
     addCalendarEvents(first, all);
     addCalendarEvents(second, all);
     return all;
 }
 exports.mergeCalendarEvents = mergeCalendarEvents;
 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;
 }
 exports.addCalendarEvents = addCalendarEvents;
 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;
 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((0, addDays_1.default)(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((0, addDays_1.default)(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: tslib_1.__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(tslib_1.__assign(tslib_1.__assign(tslib_1.__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/node/Carousel/CarouselCss.js

@@ -1,42 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineCarouselCss = exports.CarouselCssCol = exports.CarouselCssRow = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Grid_1 = require("../Grid");
-const useId_1 = require("../hooks/useId");
-exports.CarouselCssRow = (0, styled_components_1.default)(Grid_1.Row) `
-  ${({ $gutter: cs, theme: { gutter } }) => `
-    margin-left: -${cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : (gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2}px;
-    margin-right: -${cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : (gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2}px;
-    padding-left: ${cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]}px;
-    padding-right: ${cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]}px;
-  `}
-
-  scroll-behavior: smooth;
-  scroll-snap-type: x;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-exports.CarouselCssCol = (0, styled_components_1.default)(Grid_1.Col) `
-  ${(p) => p.$width && `flex-basis: ${p.$width}px; min-width: ${p.$width}px;`}
-  position: relative;
-  scroll-snap-align: ${(p) => p.$snap};
-`;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var Grid_1 = require("../Grid");
+var useId_1 = require("../hooks/useId");
+exports.CarouselCssRow = (0, styled_components_1.default)(Grid_1.Row)(templateObject_1 || (templateObject_1 = tslib_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 === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : (gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2, "px;\n    margin-right: -").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : (gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2, "px;\n    padding-left: ").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs], "px;\n    padding-right: ").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs], "px;\n  ");
+});
+exports.CarouselCssCol = (0, styled_components_1.default)(Grid_1.Col)(templateObject_2 || (templateObject_2 = tslib_1.__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
  */
-const KoineCarouselCss = ({ items, $gutterRow, $gutterCol, $gutter = "quarter", $proportion, $snap = "center", width, children, ...colProps }) => {
-    const slides = children ? react_1.Children.toArray(children) : items;
-    const id = (0, useId_1.useId)();
+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 = tslib_1.__rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
+    var slides = children ? react_1.Children.toArray(children) : items;
+    var id = (0, useId_1.useId)();
     if (!slides)
         return null;
-    return ((0, jsx_runtime_1.jsx)(exports.CarouselCssRow, { "$noWrap": true, "$gutter": $gutterRow || $gutter, children: slides.map((_slide, idx) => ((0, jsx_runtime_1.jsx)(exports.CarouselCssCol, { ...colProps, "$gutter": $gutterCol || $gutter, "$width": width, children: slides[idx] }, `CarouselCssCol-${id}-${idx}`))) }));
+    return ((0, jsx_runtime_1.jsx)(exports.CarouselCssRow, tslib_1.__assign({ "$noWrap": true, "$gutter": $gutterRow || $gutter }, { children: slides.map(function (_slide, idx) { return ((0, jsx_runtime_1.jsx)(exports.CarouselCssCol, tslib_1.__assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width }, { children: slides[idx] }), "CarouselCssCol-".concat(id, "-").concat(idx))); }) })));
 };
 exports.KoineCarouselCss = KoineCarouselCss;
+var templateObject_1, templateObject_2;

package/node/Carousel/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./CarouselCss"), exports);

package/node/Collapsable/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Collapsable"), exports);
 // export * from "./CollapsableReach";

package/node/Debug/Debug.js

@@ -1,26 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Debug = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Root = styled_components_1.default.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;
-`;
-const Debug = ({ data }) => {
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_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"])));
+var Debug = function (_a) {
+    var data = _a.data;
     return (0, jsx_runtime_1.jsx)(Root, { children: JSON.stringify(data, undefined, 2) });
 };
 exports.Debug = Debug;
+var templateObject_1;

package/node/Debug/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Debug"), exports);

package/node/Details/Details.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDetails = exports.Content = exports.Body = exports.Summary = exports.Root = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useWindowSize_1 = require("../hooks/useWindowSize");
-const helpers_1 = require("../helpers");
-const useId_1 = require("../hooks/useId");
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var useWindowSize_1 = require("../hooks/useWindowSize");
+var helpers_1 = require("../helpers");
+var useId_1 = require("../hooks/useId");
 exports.Root = "details";
 exports.Summary = "summary";
 exports.Body = "div";
@@ -15,18 +16,19 @@ exports.Content = "div";
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
  */
-const DetailsWithRef = (0, react_1.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] = (0, react_1.useState)(propOpen);
-    const [height, setHeight] = (0, react_1.useState)(0);
-    const hash = id ? `#${id}` : "";
-    const winSize = (0, useWindowSize_1.useWindowSize)();
-    const open = isControlled ? propOpen : stateOpen;
-    const [overflow, setOverflow] = (0, react_1.useState)(open ? "unset" : "hidden");
-    const content = (0, react_1.useRef)(null);
-    const defaultId = (0, useId_1.useId)();
+var DetailsWithRef = (0, react_1.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 = tslib_1.__rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
+    var isControlled = typeof propOpen !== "undefined";
+    var _b = (0, react_1.useState)(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
+    var _c = (0, react_1.useState)(0), height = _c[0], setHeight = _c[1];
+    var hash = id ? "#".concat(id) : "";
+    var winSize = (0, useWindowSize_1.useWindowSize)();
+    var open = isControlled ? propOpen : stateOpen;
+    var _d = (0, react_1.useState)(open ? "unset" : "hidden"), overflow = _d[0], setOverflow = _d[1];
+    var content = (0, react_1.useRef)(null);
+    var defaultId = (0, useId_1.useId)();
     id = id || defaultId;
-    const handleClick = (0, react_1.useCallback)(() => {
+    var handleClick = (0, react_1.useCallback)(function () {
         if (hash) {
             window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
         }
@@ -34,28 +36,28 @@ const DetailsWithRef = (0, react_1.forwardRef)(function Details({ id, open: prop
             onChange();
         }
         if (!isControlled) {
-            setStateOpen((prevOpen) => !prevOpen);
+            setStateOpen(function (prevOpen) { return !prevOpen; });
         }
     }, [open, hash, onChange, isControlled]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useEffect)(function () {
         if (content.current) {
             setHeight(Math.ceil(content.current.offsetHeight));
         }
     }, [winSize, recalc]);
     // deeplink on mount
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useEffect)(function () {
         if (!isControlled && hash && window.location.hash === hash) {
             setStateOpen(true);
         }
     }, [hash, isControlled]);
-    return ((0, jsx_runtime_1.jsxs)(exports.Root, { ...props, open: open || false, children: [(0, jsx_runtime_1.jsx)(exports.Summary, { "$open": open, onClick: handleClick, children: summary || " " }), (0, jsx_runtime_1.jsx)(exports.Body, { "$open": open, style: { overflow }, children: (0, jsx_runtime_1.jsx)(exports.Content
+    return ((0, jsx_runtime_1.jsxs)(exports.Root, tslib_1.__assign({}, props, { open: open || false }, { children: [(0, jsx_runtime_1.jsx)(exports.Summary, tslib_1.__assign({ "$open": open, onClick: handleClick }, { children: summary || " " })), (0, jsx_runtime_1.jsx)(exports.Body, tslib_1.__assign({ "$open": open, style: { overflow: overflow } }, { children: (0, jsx_runtime_1.jsx)(exports.Content
                 // ref={content}
-                , { "$open": open, 
+                , tslib_1.__assign({ "$open": open, 
                     // aria-expanded={open}
                     // aria-label={open ? ariaCollapse : ariaExpand}
                     style: {
                         pointerEvents: open ? "all" : "none",
-                    }, children: children }) })] }));
+                    } }, { children: children })) }))] })));
 });
 exports.KoineDetails = (0, helpers_1.extendComponent)(DetailsWithRef, {
     Root: exports.Root,

package/node/Details/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Details"), exports);

package/node/Dialog/DialogMui.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ModalUnstyled_1 = tslib_1.__importDefault(require("@mui/base/ModalUnstyled"));
-const md_1 = require("react-icons/md");
-const helpers_1 = require("../helpers");
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ModalUnstyled_1 = tslib_1.__importDefault(require("@mui/base/ModalUnstyled"));
+var md_1 = require("react-icons/md");
+var helpers_1 = require("../helpers");
 exports.Root = ModalUnstyled_1.default;
 exports.Backdrop = "div";
 exports.Container = "div";
@@ -49,16 +49,17 @@ exports.Body = "div";
  *
  * FIXME: it actually works even without forwardRef, check if we do need it
  */
-const DialogWithRef = (0, react_1.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 = (0, react_1.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 = tslib_1.__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 = (0, react_1.useRef)();
-    const handleMouseDown = (event) => {
+    var backdropClick = (0, react_1.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;
@@ -69,7 +70,7 @@ const DialogWithRef = (0, react_1.forwardRef)(function Dialog({ children, title,
             onClose(event, "backdropClick");
         }
     };
-    return ((0, jsx_runtime_1.jsx)(exports.Root, { BackdropComponent: exports.Backdrop, onClick: handleBackdropClick, onClose: onClose, ref: ref, ...props, children: (0, jsx_runtime_1.jsx)(exports.Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsxs)(exports.Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { children: title }), (0, jsx_runtime_1.jsx)(exports.Close, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) }), (0, jsx_runtime_1.jsx)(exports.Body, { children: children })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.Root, tslib_1.__assign({ BackdropComponent: exports.Backdrop, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(exports.Container, tslib_1.__assign({ "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsxs)(exports.Paper, tslib_1.__assign({ "aria-label": title || "", "$scrollPaper": $scrollPaper }, { children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { children: title }), (0, jsx_runtime_1.jsx)(exports.Close, tslib_1.__assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) })), (0, jsx_runtime_1.jsx)(exports.Body, { children: children })] })) })) })));
 });
 exports.KoineDialog = (0, helpers_1.extendComponent)(DialogWithRef, {
     Root: exports.Root,

package/node/Dialog/css/bare.js

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
-const tslib_1 = require("tslib");
-const helpers_1 = require("../../helpers");
-const _ = tslib_1.__importStar(require("../DialogMui"));
+var tslib_1 = require("tslib");
+var helpers_1 = require("../../helpers");
+var _ = tslib_1.__importStar(require("../DialogMui"));
 // export type { KoineDialogProps } from "../DialogMui";
-exports.Root = (0, helpers_1.classed)(_.Root) `dialog`;
-exports.Backdrop = (0, helpers_1.classed)(_.Backdrop) `dialogBackdrop`;
-exports.Container = (0, helpers_1.classed)(_.Container) `dialogContainer`;
-exports.Paper = (0, helpers_1.classed)(_.Paper) `dialogPaper`;
-exports.Close = (0, helpers_1.classed)(_.Close) `"dialogClose`;
-exports.Header = (0, helpers_1.classed)(_.Header) `dialogHeader`;
-exports.Body = (0, helpers_1.classed)(_.Body) `dialogBody`;
+exports.Root = (0, helpers_1.classed)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["dialog"], ["dialog"])));
+exports.Backdrop = (0, helpers_1.classed)(_.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["dialogBackdrop"], ["dialogBackdrop"])));
+exports.Container = (0, helpers_1.classed)(_.Container)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["dialogContainer"], ["dialogContainer"])));
+exports.Paper = (0, helpers_1.classed)(_.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["dialogPaper"], ["dialogPaper"])));
+exports.Close = (0, helpers_1.classed)(_.Close)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\"dialogClose"], ["\"dialogClose"])));
+exports.Header = (0, helpers_1.classed)(_.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["dialogHeader"], ["dialogHeader"])));
+exports.Body = (0, helpers_1.classed)(_.Body)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["dialogBody"], ["dialogBody"])));
 exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
     Root: exports.Root,
     Backdrop: exports.Backdrop,
@@ -21,3 +21,4 @@ exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
     Header: exports.Header,
     Body: exports.Body,
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;