@koine/react 1.1.10 → 1.1.11

package/Calendar/utils.js

@@ -1,73 +1,85 @@
-import { __assign } from "tslib";
-import isWithinInterval from "date-fns/isWithinInterval";
-import endOfMonth from "date-fns/endOfMonth";
-import startOfWeek from "date-fns/startOfWeek";
-import endOfWeek from "date-fns/endOfWeek";
-import subMonths from "date-fns/subMonths";
-import addMonths from "date-fns/addMonths";
-import subWeeks from "date-fns/subWeeks";
-import addWeeks from "date-fns/addWeeks";
-import addDays from "date-fns/addDays";
-export function getEventTimestamp(dateLike) {
+"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;
+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) {
     var date = new Date(dateLike);
     date.setHours(0, 0, 0, 0);
     return date.valueOf() / 1000;
 }
-export function getDisplayTime(date) {
+exports.getEventTimestamp = getEventTimestamp;
+function getDisplayTime(date) {
     return (date.getHours() +
         ":" +
         "0".repeat(2 - date.getMinutes().toString().length) +
         date.getMinutes());
 }
-export function getStartDate(date, view) {
+exports.getDisplayTime = getDisplayTime;
+function getStartDate(date, view) {
     date.setHours(0, 0, 0);
     if (view === "month") {
         date.setDate(1);
     }
     else if (view === "week") {
-        date = startOfWeek(date, { weekStartsOn: 1 });
+        date = (0, startOfWeek_1.default)(date, { weekStartsOn: 1 });
     }
     return date;
 }
-export function getEndDate(start, view) {
+exports.getStartDate = getStartDate;
+function getEndDate(start, view) {
     var end = start;
     if (view === "month") {
-        end = endOfMonth(start);
+        end = (0, endOfMonth_1.default)(start);
     }
     else if (view === "week") {
-        end = endOfWeek(start, { weekStartsOn: 1 });
+        end = (0, endOfWeek_1.default)(start, { weekStartsOn: 1 });
     }
     end.setHours(23, 59, 59);
     return end;
 }
-export function getPrevDate(date, view) {
+exports.getEndDate = getEndDate;
+function getPrevDate(date, view) {
     if (view === "month") {
-        return subMonths(date, 1);
+        return (0, subMonths_1.default)(date, 1);
     }
-    return subWeeks(date, 1);
+    return (0, subWeeks_1.default)(date, 1);
 }
-export function getNextDate(date, view) {
+exports.getPrevDate = getPrevDate;
+function getNextDate(date, view) {
     if (view === "month") {
-        return addMonths(date, 1);
+        return (0, addMonths_1.default)(date, 1);
     }
-    return addWeeks(date, 1);
+    return (0, addWeeks_1.default)(date, 1);
 }
-export function isTodayInView(start, end) {
-    return isWithinInterval(new Date(), { start: start, end: end });
+exports.getNextDate = getNextDate;
+function isTodayInView(start, end) {
+    return (0, isWithinInterval_1.default)(new Date(), { start: start, end: end });
 }
-export function mergeCalendarEvents(first, second) {
+exports.isTodayInView = isTodayInView;
+function mergeCalendarEvents(first, second) {
     var all = {};
     addCalendarEvents(first, all);
     addCalendarEvents(second, all);
     return all;
 }
-export function addCalendarEvents(toAdd, toExtend) {
+exports.mergeCalendarEvents = mergeCalendarEvents;
+function addCalendarEvents(toAdd, toExtend) {
     for (var id in toAdd) {
         var event_1 = toAdd[id];
         toExtend[id] = event_1;
     }
     return toExtend;
 }
+exports.addCalendarEvents = addCalendarEvents;
 function getEventsByTimestamp(events) {
     var output = {};
     var _loop_1 = function (uid) {
@@ -99,7 +111,7 @@ function getSortedEvents(events) {
 }
 var FREE_SLOT = 0;
 var BUSY_SLOT = 1;
-export function processEventsInView(eventsMap, calendarView, month, weeks) {
+function processEventsInView(eventsMap, calendarView, month, weeks) {
     var eventsByTimestamp = getEventsByTimestamp(eventsMap);
     var eventsList = getSortedEvents(eventsMap);
     var todayDate = new Date();
@@ -114,7 +126,7 @@ export function processEventsInView(eventsMap, calendarView, month, weeks) {
         var weekStartDate = weeks[weekIdx];
         var weekStartDay = weekStartDate.getDate();
         var weekStartTimestamp = getEventTimestamp(new Date(weekStartDate));
-        var weekEndTimestamp = getEventTimestamp(addDays(new Date(weekStartDate), 6));
+        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);
@@ -125,7 +137,7 @@ export function processEventsInView(eventsMap, calendarView, month, weeks) {
                 $isOutOfRange: $isOutOfRange,
             };
             var viewDay = {
-                props: __assign({ key: "day.".concat(dayTimestamp) }, contextualProps),
+                props: tslib_1.__assign({ key: "day.".concat(dayTimestamp) }, contextualProps),
                 timestamp: dayTimestamp + "",
                 label: dayDate.getDate() + "",
                 events: [],
@@ -176,7 +188,7 @@ export function processEventsInView(eventsMap, calendarView, month, weeks) {
                         startedAtTopMap[event_3.uid] = top_1;
                     }
                     // push the event, they will be sorted later
-                    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 }));
+                    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 (var i = 0; i < verticalSlots.length; i++) {
@@ -200,3 +212,4 @@ export function processEventsInView(eventsMap, calendarView, month, weeks) {
     }
     return viewWeeks;
 }
+exports.processEventsInView = processEventsInView;

package/{node/Calendar/utils.js → Calendar/utils.mjs}

@@ -1,85 +1,73 @@
-"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;
-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) {
+import { __assign } from "tslib";
+import isWithinInterval from "date-fns/isWithinInterval";
+import endOfMonth from "date-fns/endOfMonth";
+import startOfWeek from "date-fns/startOfWeek";
+import endOfWeek from "date-fns/endOfWeek";
+import subMonths from "date-fns/subMonths";
+import addMonths from "date-fns/addMonths";
+import subWeeks from "date-fns/subWeeks";
+import addWeeks from "date-fns/addWeeks";
+import addDays from "date-fns/addDays";
+export function getEventTimestamp(dateLike) {
     var date = new Date(dateLike);
     date.setHours(0, 0, 0, 0);
     return date.valueOf() / 1000;
 }
-exports.getEventTimestamp = getEventTimestamp;
-function getDisplayTime(date) {
+export function getDisplayTime(date) {
     return (date.getHours() +
         ":" +
         "0".repeat(2 - date.getMinutes().toString().length) +
         date.getMinutes());
 }
-exports.getDisplayTime = getDisplayTime;
-function getStartDate(date, view) {
+export function getStartDate(date, view) {
     date.setHours(0, 0, 0);
     if (view === "month") {
         date.setDate(1);
     }
     else if (view === "week") {
-        date = (0, startOfWeek_1.default)(date, { weekStartsOn: 1 });
+        date = startOfWeek(date, { weekStartsOn: 1 });
     }
     return date;
 }
-exports.getStartDate = getStartDate;
-function getEndDate(start, view) {
+export function getEndDate(start, view) {
     var end = start;
     if (view === "month") {
-        end = (0, endOfMonth_1.default)(start);
+        end = endOfMonth(start);
     }
     else if (view === "week") {
-        end = (0, endOfWeek_1.default)(start, { weekStartsOn: 1 });
+        end = endOfWeek(start, { weekStartsOn: 1 });
     }
     end.setHours(23, 59, 59);
     return end;
 }
-exports.getEndDate = getEndDate;
-function getPrevDate(date, view) {
+export function getPrevDate(date, view) {
     if (view === "month") {
-        return (0, subMonths_1.default)(date, 1);
+        return subMonths(date, 1);
     }
-    return (0, subWeeks_1.default)(date, 1);
+    return subWeeks(date, 1);
 }
-exports.getPrevDate = getPrevDate;
-function getNextDate(date, view) {
+export function getNextDate(date, view) {
     if (view === "month") {
-        return (0, addMonths_1.default)(date, 1);
+        return addMonths(date, 1);
     }
-    return (0, addWeeks_1.default)(date, 1);
+    return addWeeks(date, 1);
 }
-exports.getNextDate = getNextDate;
-function isTodayInView(start, end) {
-    return (0, isWithinInterval_1.default)(new Date(), { start: start, end: end });
+export function isTodayInView(start, end) {
+    return isWithinInterval(new Date(), { start: start, end: end });
 }
-exports.isTodayInView = isTodayInView;
-function mergeCalendarEvents(first, second) {
+export function mergeCalendarEvents(first, second) {
     var all = {};
     addCalendarEvents(first, all);
     addCalendarEvents(second, all);
     return all;
 }
-exports.mergeCalendarEvents = mergeCalendarEvents;
-function addCalendarEvents(toAdd, toExtend) {
+export function addCalendarEvents(toAdd, toExtend) {
     for (var id in toAdd) {
         var event_1 = toAdd[id];
         toExtend[id] = event_1;
     }
     return toExtend;
 }
-exports.addCalendarEvents = addCalendarEvents;
 function getEventsByTimestamp(events) {
     var output = {};
     var _loop_1 = function (uid) {
@@ -111,7 +99,7 @@ function getSortedEvents(events) {
 }
 var FREE_SLOT = 0;
 var BUSY_SLOT = 1;
-function processEventsInView(eventsMap, calendarView, month, weeks) {
+export function processEventsInView(eventsMap, calendarView, month, weeks) {
     var eventsByTimestamp = getEventsByTimestamp(eventsMap);
     var eventsList = getSortedEvents(eventsMap);
     var todayDate = new Date();
@@ -126,7 +114,7 @@ function processEventsInView(eventsMap, calendarView, month, weeks) {
         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));
+        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);
@@ -137,7 +125,7 @@ function processEventsInView(eventsMap, calendarView, month, weeks) {
                 $isOutOfRange: $isOutOfRange,
             };
             var viewDay = {
-                props: tslib_1.__assign({ key: "day.".concat(dayTimestamp) }, contextualProps),
+                props: __assign({ key: "day.".concat(dayTimestamp) }, contextualProps),
                 timestamp: dayTimestamp + "",
                 label: dayDate.getDate() + "",
                 events: [],
@@ -188,7 +176,7 @@ function processEventsInView(eventsMap, calendarView, month, weeks) {
                         startedAtTopMap[event_3.uid] = top_1;
                     }
                     // push the event, they will be sorted later
-                    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 }));
+                    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 (var i = 0; i < verticalSlots.length; i++) {
@@ -212,4 +200,3 @@ function processEventsInView(eventsMap, calendarView, month, weeks) {
     }
     return viewWeeks;
 }
-exports.processEventsInView = processEventsInView;

package/Carousel/Carousel.js

@@ -1,4 +1,7 @@
-export var KoineCarousel = null;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineCarousel = void 0;
+exports.KoineCarousel = null;
 // import React, { useEffect, useState, useRef } from 'react';
 // import Slide from './slide';
 // import { getSliderListStyles } from './slider-list';

package/{node/Carousel/Carousel.js → Carousel/Carousel.mjs}

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineCarousel = void 0;
-exports.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,22 +1,26 @@
-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";
-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) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineCarouselCss = exports.CarouselCssCol = exports.CarouselCssRow = void 0;
+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");
+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 === 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  ");
+    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  ");
 });
-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; });
+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
  */
-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();
+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, react_1.useId)();
     if (!slides)
         return null;
-    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))); }) })));
+    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/Carousel/CarouselCss.mjs

@@ -0,0 +1,22 @@
+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";
+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 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, __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/Carousel/index.js

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

package/Carousel/index.mjs

@@ -0,0 +1 @@
+export * from "./CarouselCss";

package/Carousel/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Carousel/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Collapsable/Collapsable.js

@@ -1 +1,4 @@
-export var Collapsable = null;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collapsable = void 0;
+exports.Collapsable = null;

package/Collapsable/Collapsable.mjs

@@ -0,0 +1 @@
+export var Collapsable = null;

package/Collapsable/index.js

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

package/Collapsable/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Collapsable";
+// export * from "./CollapsableReach";

package/Collapsable/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Collapsable/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Debug/Debug.js

@@ -1,9 +1,13 @@
-import { __makeTemplateObject } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-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) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Debug = void 0;
+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 _jsx(Root, { children: JSON.stringify(data, undefined, 2) });
+    return (0, jsx_runtime_1.jsx)(Root, { children: JSON.stringify(data, undefined, 2) });
 };
+exports.Debug = Debug;
 var templateObject_1;

package/Debug/Debug.mjs

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+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/Debug/index.js

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

package/Debug/index.mjs

@@ -0,0 +1 @@
+export * from "./Debug";

package/Debug/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Debug/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Details/Details.js

@@ -1,30 +1,33 @@
-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 { useWindowSize } from "../hooks/useWindowSize";
-import { extendComponent, } from "../helpers";
-export var Root = "details";
-export var Summary = "summary";
-export var Body = "div";
-export var Content = "div";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDetails = exports.Content = exports.Body = exports.Summary = exports.Root = void 0;
+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");
+exports.Root = "details";
+exports.Summary = "summary";
+exports.Body = "div";
+exports.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
  */
-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 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 = useState(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
-    var _c = useState(0), height = _c[0], setHeight = _c[1];
+    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 = useWindowSize();
+    var winSize = (0, useWindowSize_1.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();
+    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, react_1.useId)();
     id = id || defaultId;
-    var handleClick = useCallback(function () {
+    var handleClick = (0, react_1.useCallback)(function () {
         if (hash) {
             window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
         }
@@ -35,29 +38,29 @@ var DetailsWithRef = forwardRef(function Details(_a, ref) {
             setStateOpen(function (prevOpen) { return !prevOpen; });
         }
     }, [open, hash, onChange, isControlled]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (content.current) {
             setHeight(Math.ceil(content.current.offsetHeight));
         }
     }, [winSize, recalc]);
     // deeplink on mount
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (!isControlled && hash && window.location.hash === hash) {
             setStateOpen(true);
         }
     }, [hash, isControlled]);
-    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
+    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}
-                , __assign({ "$open": open, 
+                , tslib_1.__assign({ "$open": open, 
                     // aria-expanded={open}
                     // aria-label={open ? ariaCollapse : ariaExpand}
                     style: {
                         pointerEvents: open ? "all" : "none",
                     } }, { children: children })) }))] })));
 });
-export var KoineDetails = extendComponent(DetailsWithRef, {
-    Root: Root,
-    Summary: Summary,
-    Body: Body,
-    Content: Content,
+exports.KoineDetails = (0, helpers_1.extendComponent)(DetailsWithRef, {
+    Root: exports.Root,
+    Summary: exports.Summary,
+    Body: exports.Body,
+    Content: exports.Content,
 });