@koine/react 1.1.10 → 1.1.12

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.d.ts

@@ -4,7 +4,12 @@ export declare const CarouselCssRow: import("styled-components").StyledComponent
     $valign?: import("csstype").Property.AlignItems | undefined;
     $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
     $noWrap?: boolean | undefined;
-} & import("@koine/utils").Simplify<import("@koine/utils").Except<RowProps, "$gutter"> & Required<Pick<RowProps, "$gutter">>>, never>;
+} & {
+    $valign?: import("csstype").Property.AlignItems | undefined;
+    $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
+    $noWrap?: boolean | undefined;
+    $gutter: "normal" | "double" | "quarter" | "third" | "half" | "triple";
+}, never>;
 export declare const CarouselCssCol: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Grid").GridProps & Partial<Record<import("../styles").Breakpoint, number>> & {
     $width?: number | undefined;
     $flex?: boolean | undefined;

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"
 }