@koine/react 2.0.0-beta.16 → 2.0.0-beta.17

package/Animations/useReveal.js

@@ -1,10 +1,11 @@
+import { __read } from "tslib";
 import { useEffect, useRef, useState } from "react";
 export function useReveal(_a) {
     var _b = _a.direction, direction = _b === void 0 ? "left" : _b, _c = _a.offsetStartY, offsetStartY = _c === void 0 ? -2 : _c, _d = _a.offsetEndY, offsetEndY = _d === void 0 ? 0 : _d, _e = _a.offsetStartX, offsetStartX = _e === void 0 ? "all" : _e;
     var ref = useRef(null);
-    var _f = useState(0), startY = _f[0], setStartY = _f[1];
-    var _g = useState(0), endY = _g[0], setEndY = _g[1];
-    var _h = useState(0), startX = _h[0], setStartX = _h[1];
+    var _f = __read(useState(0), 2), startY = _f[0], setStartY = _f[1];
+    var _g = __read(useState(0), 2), endY = _g[0], setEndY = _g[1];
+    var _h = __read(useState(0), 2), startX = _h[0], setStartX = _h[1];
     useEffect(function () {
         if (!ref.current) {
             return;

package/Autocomplete/AutocompleteMui.js

@@ -1,4 +1,4 @@
-import { __assign, __awaiter, __generator, __rest } from "tslib";
+import { __assign, __awaiter, __generator, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useAutocomplete from "@mui/base/useAutocomplete";
 import { useCallback, useMemo, useState } from "react";
@@ -10,8 +10,8 @@ import { normaliseAutocompleteValue } from "./helpers.js";
 export var Autocomplete = function (_a) {
     var creatable = _a.creatable, multiple = _a.multiple, autoComplete = _a.autoComplete, loadOptions = _a.loadOptions, _b = _a.options, defaultOptions = _b === void 0 ? [] : _b, defaultValue = _a.defaultValue, controlledValue = _a.value, defaultInputValue = _a.defaultInputValue, label = _a.label, placeholder = _a.placeholder, register = _a.register, setValue = _a.setValue, name = _a.name, onChange = _a.onChange, $ref = _a.$ref, children = _a.children, props = __rest(_a, ["creatable", "multiple", "autoComplete", "loadOptions", "options", "defaultValue", "value", "defaultInputValue", "label", "placeholder", "register", "setValue", "name", "onChange", "$ref", "children"]);
     var defaultOptionsMemo = useMemo(function () { return normaliseOptions(defaultOptions); }, [defaultOptions]);
-    var _c = useState(defaultOptionsMemo), options = _c[0], setOptions = _c[1];
-    var _d = useState(false), loading = _d[0], setLoading = _d[1];
+    var _c = __read(useState(defaultOptionsMemo), 2), options = _c[0], setOptions = _c[1];
+    var _d = __read(useState(false), 2), loading = _d[0], setLoading = _d[1];
     var _e = useAutocomplete({
         id: "Autocomplete",
         multiple: multiple ? true : undefined,

package/Calendar/CalendarDaygridCell.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useState } from "react";
 import { MdAdd as IconExpand, } from "react-icons/md";
@@ -10,7 +10,7 @@ var styleBtn = {
 };
 export var CalendarDaygridCell = function (_a) {
     var eventClicked = _a.eventClicked, setEventClicked = _a.setEventClicked, setEventHovered = _a.setEventHovered, view = _a.view, maxEvents = _a.maxEvents, events = _a.events, calendarsMap = _a.calendarsMap, _b = _a.Cell, Cell = _b === void 0 ? "div" : _b, _c = _a.CellOverflow, CellOverflow = _c === void 0 ? "div" : _c, _d = _a.CellEvent, CellEvent = _d === void 0 ? "div" : _d, _e = _a.CellEventBtn, CellEventBtn = _e === void 0 ? "div" : _e, _f = _a.CellEventTitle, CellEventTitle = _f === void 0 ? "span" : _f, _g = _a.CellEventStart, CellEventStart = _g === void 0 ? "span" : _g;
-    var _h = useState(false), isExpanded = _h[0], expand = _h[1];
+    var _h = __read(useState(false), 2), isExpanded = _h[0], expand = _h[1];
     var eventsWithoutPlaceholders = events.filter(function (event) { return !event.placeholder; });
     return (_jsx(Cell, { children: events.map(function (event, i) {
             if (i === maxEvents && !isExpanded) {

package/Calendar/CalendarDaygridNav.js

@@ -1,9 +1,10 @@
+import { __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import format from "date-fns/format";
 import { useDateLocale } from "../useDateLocale.js";
 export var KoineCalendarDaygridNav = function (_a) {
     var range = _a.range, view = _a.view, todayInView = _a.todayInView, handlePrev = _a.handlePrev, handleNext = _a.handleNext, handleToday = _a.handleToday, handleView = _a.handleView, localeCode = _a.locale, _b = _a.NavRoot, NavRoot = _b === void 0 ? "nav" : _b, _c = _a.NavTitle, NavTitle = _c === void 0 ? "div" : _c, _d = _a.NavBtns, NavBtns = _d === void 0 ? "div" : _d, _e = _a.NavBtnPrev, NavBtnPrev = _e === void 0 ? "button" : _e, _f = _a.NavBtnNext, NavBtnNext = _f === void 0 ? "button" : _f, _g = _a.NavBtnToday, NavBtnToday = _g === void 0 ? "button" : _g, _h = _a.NavBtnViewMonth, NavBtnViewMonth = _h === void 0 ? "button" : _h, _j = _a.NavBtnViewWeek, NavBtnViewWeek = _j === void 0 ? "button" : _j;
-    var start = range[0], end = range[1];
+    var _k = __read(range, 2), start = _k[0], end = _k[1];
     var locale = useDateLocale(localeCode);
     var opts = { locale: locale };
     var formatted = "";

package/Calendar/CalendarDaygridTable.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import eachWeekOfInterval from "date-fns/eachWeekOfInterval";
 import { useEffect, useMemo, useState } from "react";
@@ -7,7 +7,7 @@ import { useDateLocale } from "../useDateLocale.js";
 import { CalendarDaygridCell, } from "./CalendarDaygridCell.js";
 import { processEventsInView } from "./utils.js";
 function getView(range) {
-    var start = range[0], end = range[1];
+    var _a = __read(range, 2), start = _a[0], end = _a[1];
     var weeks = eachWeekOfInterval({ start: start, end: end }, { weekStartsOn: 1 });
     return {
         month: start.getMonth(),
@@ -24,8 +24,8 @@ export var KoineCalendarDaygridTable = function (_a) {
         CellEventTitle: CellEventTitle,
         CellEventStart: CellEventStart,
     };
-    var _l = useState(dayLabels || [0, 1, 2, 3, 4, 5, 6]), days = _l[0], setDays = _l[1];
-    var _m = useState([]), weeksEvents = _m[0], setWeeksEvents = _m[1];
+    var _l = __read(useState(dayLabels || [0, 1, 2, 3, 4, 5, 6]), 2), days = _l[0], setDays = _l[1];
+    var _m = __read(useState([]), 2), weeksEvents = _m[0], setWeeksEvents = _m[1];
     var locale = useDateLocale(localeCode);
     var _o = useMemo(function () { return getView(range); }, [range]), month = _o.month, weeks = _o.weeks;
     var swipeableHandlers = useSwipeable({

package/Calendar/CalendarLegend.js

@@ -1,8 +1,9 @@
+import { __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export var KoineCalendarLegend = function (_a) {
     var _b = _a.calendarsMap, calendarsMap = _b === void 0 ? {} : _b, toggleCalendarVisibility = _a.toggleCalendarVisibility, _c = _a.LegendItem, LegendItem = _c === void 0 ? "div" : _c, _d = _a.LegendItemStatus, LegendItemStatus = _d === void 0 ? "span" : _d, _e = _a.LegendItemLabel, LegendItemLabel = _e === void 0 ? "span" : _e, _f = _a.LegendItemEvents, LegendItemEvents = _f === void 0 ? "span" : _f;
     return (_jsx(_Fragment, { children: Object.entries(calendarsMap).map(function (_a) {
-            var id = _a[0], calendar = _a[1];
+            var _b = __read(_a, 2), id = _b[0], calendar = _b[1];
             return (_jsxs(LegendItem, { onClick: function () { return toggleCalendarVisibility(id); }, "$color": calendar.color, "$empty": calendar.events === 0, disabled: calendar.events === 0, children: [_jsx(LegendItemStatus, { children: calendar.on ? "\u2b24" : "\u2b58" }), _jsx(LegendItemLabel, { children: calendar.name }), _jsx(LegendItemEvents, { children: calendar.events })] }, "CalendarLegend." + id));
         }) }));
 };

package/Calendar/useCalendar.js

@@ -1,26 +1,26 @@
-import { __assign, __awaiter, __generator } from "tslib";
+import { __assign, __awaiter, __generator, __read } from "tslib";
 import { useCallback, useEffect, useReducer, useState } from "react";
 import { getCalendarsEventsFromGoogle } from "./calendar-api-google.js";
 import { getEndDate, getNextDate, getPrevDate, getStartDate, isTodayInView, } from "./utils.js";
 export function useCalendar(_a) {
     var _this = this;
     var locale = _a.locale, apiKey = _a.apiKey, calendars = _a.calendars, initialEvents = _a.events, initialStart = _a.start, initialEnd = _a.end, _b = _a.view, initialView = _b === void 0 ? "month" : _b, _c = _a.timeZone, timeZone = _c === void 0 ? "" : _c, onError = _a.onError;
-    var _d = useState(initialView), view = _d[0], setView = _d[1];
+    var _d = __read(useState(initialView), 2), view = _d[0], setView = _d[1];
     var start = initialStart || getStartDate(new Date(), view);
     var end = initialEnd || getEndDate(start, view);
-    var _e = useState([start, end]), range = _e[0], setRange = _e[1];
-    var _f = useState(isTodayInView(start, end)), todayInView = _f[0], setTodayInView = _f[1];
-    var _g = useState(initialEvents || {}), events = _g[0], setEvents = _g[1];
-    var _h = useState(null), eventHovered = _h[0], setEventHovered = _h[1];
-    var _j = useState(null), eventClicked = _j[0], setEventClicked = _j[1];
-    var _k = useReducer(function (state, action) {
+    var _e = __read(useState([start, end]), 2), range = _e[0], setRange = _e[1];
+    var _f = __read(useState(isTodayInView(start, end)), 2), todayInView = _f[0], setTodayInView = _f[1];
+    var _g = __read(useState(initialEvents || {}), 2), events = _g[0], setEvents = _g[1];
+    var _h = __read(useState(null), 2), eventHovered = _h[0], setEventHovered = _h[1];
+    var _j = __read(useState(null), 2), eventClicked = _j[0], setEventClicked = _j[1];
+    var _k = __read(useReducer(function (state, action) {
         var _a;
         var type = action.type;
         switch (type) {
             case "events": {
                 var events_1 = action.payload;
                 return Object.entries(state).reduce(function (map, _a) {
-                    var id = _a[0], calendar = _a[1];
+                    var _b = __read(_a, 2), id = _b[0], calendar = _b[1];
                     map[id] = __assign(__assign({}, calendar), { events: events_1[id] || 0 });
                     return map;
                 }, {});
@@ -32,7 +32,7 @@ export function useCalendar(_a) {
                 }
                 else {
                     return Object.entries(state).reduce(function (map, _a) {
-                        var id = _a[0], calendar = _a[1];
+                        var _b = __read(_a, 2), id = _b[0], calendar = _b[1];
                         map[id] = __assign(__assign({}, calendar), { on: visible_1.indexOf(id) > -1 });
                         return map;
                     }, {});
@@ -44,7 +44,7 @@ export function useCalendar(_a) {
     }, calendars.reduce(function (map, calendar) {
         map[calendar.id] = __assign(__assign({}, calendar), { name: calendar.name || "", on: true, events: 0 });
         return map;
-    }, {})), calendarsMap = _k[0], updateCalendars = _k[1];
+    }, {})), 2), calendarsMap = _k[0], updateCalendars = _k[1];
     var toggleCalendarVisibility = useCallback(function (idOrIds) {
         updateCalendars({ type: "visibility", payload: idOrIds });
     }, [updateCalendars]);
@@ -84,7 +84,7 @@ export function useCalendar(_a) {
         });
     }); }, [setEvents, apiKey, timeZone, onError]);
     var handleToday = useCallback(function () {
-        var start = range[0], end = range[1];
+        var _a = __read(range, 2), start = _a[0], end = _a[1];
         var newStart = getStartDate(new Date(), view);
         var newEnd = getEndDate(newStart, view);
         setRange([newStart, newEnd]);
@@ -96,7 +96,7 @@ export function useCalendar(_a) {
     }, [view, range]);
     var handlePrev = useCallback(function () {
         setRange(function (_a) {
-            var start = _a[0];
+            var _b = __read(_a, 1), start = _b[0];
             var newStart = getPrevDate(start, view);
             var newEnd = getEndDate(newStart, view);
             return [newStart, newEnd];
@@ -106,7 +106,7 @@ export function useCalendar(_a) {
     }, [view]);
     var handleNext = useCallback(function () {
         setRange(function (_a) {
-            var start = _a[0];
+            var _b = __read(_a, 1), start = _b[0];
             var newStart = getNextDate(start, view);
             var newEnd = getEndDate(newStart, view);
             return [newStart, newEnd];
@@ -123,7 +123,7 @@ export function useCalendar(_a) {
         setEventHovered(null);
     }, [start]);
     useEffect(function () {
-        var start = range[0], end = range[1];
+        var _a = __read(range, 2), start = _a[0], end = _a[1];
         loadCalendars(calendars, start, end);
         setTodayInView(isTodayInView(start, end));
     }, [range]);

package/Details/Details.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useId, useRef, useState, } from "react";
 import { extendComponent, } from "../extendComponent.js";
@@ -10,12 +10,12 @@ export var Content = "div";
 var DetailsWithRef = forwardRef(function Details(_a, ref) {
     var id = _a.id, propOpen = _a.open, recalc = _a.recalc, summary = _a.summary, children = _a.children, _Root = _a.Root, _Summary = _a.Summary, _Body = _a.Body, _Content = _a.Content, onChange = _a.onChange, props = __rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
     var isControlled = typeof propOpen !== "undefined";
-    var _b = useState(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
-    var _c = useState(0), setHeight = _c[1];
+    var _b = __read(useState(propOpen), 2), stateOpen = _b[0], setStateOpen = _b[1];
+    var _c = __read(useState(0), 2), setHeight = _c[1];
     var hash = id ? "#".concat(id) : "";
     var winSize = useWindowSize();
     var open = isControlled ? propOpen : stateOpen;
-    var overflow = useState(open ? "unset" : "hidden")[0];
+    var _d = __read(useState(open ? "unset" : "hidden"), 1), overflow = _d[0];
     var content = useRef(null);
     var defaultId = useId();
     id = id || defaultId;

package/Form/Form.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { extendComponent, } from "../extendComponent.js";
@@ -14,7 +14,7 @@ export var Form = function (_a) {
     } : _b, _Fail = _a.Fail, _c = _a.failProps, failProps = _c === void 0 ? {
         children: "Failed.",
     } : _c, collapseOnOk = _a.collapseOnOk, collapseOnFail = _a.collapseOnFail, _d = _a.okTimeout, okTimeout = _d === void 0 ? 3000 : _d, _e = _a.failTimeout, failTimeout = _e === void 0 ? 3000 : _e, children = _a.children, props = __rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
-    var _f = useState(""), open = _f[0], setOpen = _f[1];
+    var _f = __read(useState(""), 2), open = _f[0], setOpen = _f[1];
     var commonProps = {
         head: null,
         components: {

package/Forms/Password/Password.js

@@ -1,4 +1,4 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import { ImEyeBlocked as IconInvisible, ImEye as IconVisible, } from "react-icons/im";
@@ -11,7 +11,7 @@ export var PasswordInputNative = styled(InputNative)(templateObject_2 || (templa
 var PasswordIcon = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"])), ICON_WIDTH);
 export var Password = forwardRef(function Password(_a, ref) {
     var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
-    var _b = useState(false), visible = _b[0], setVisible = _b[1];
+    var _b = __read(useState(false), 2), visible = _b[0], setVisible = _b[1];
     return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsxs(PasswordInputWrap, { children: [_jsx(PasswordInputNative, __assign({ type: visible ? "text" : "password", autoComplete: "new-password" }, (register ? register(name) : { name: name, ref: ref }), props)), _jsx(PasswordIcon, { onClick: function () { return setVisible(function (prev) { return !prev; }); }, children: visible ? _jsx(IconInvisible, {}) : _jsx(IconVisible, {}) })] })] }));
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/Grid/Grid.js

@@ -1,4 +1,4 @@
-import { __makeTemplateObject } from "tslib";
+import { __makeTemplateObject, __read } from "tslib";
 import styled from "styled-components";
 export var GRID_COLUMNS = 12;
 export var GRID_GUTTER_DEFAULT = "half";
@@ -26,7 +26,7 @@ function getColCss(props) {
         var offsets = $offset.split(",");
         for (var i = 0; i <= offsets.length; i++) {
             if (offsets[i]) {
-                var _a = offsets[i].split(":"), offsetBreakpoint = _a[0], offsetSize = _a[1];
+                var _a = __read(offsets[i].split(":"), 2), offsetBreakpoint = _a[0], offsetSize = _a[1];
                 css += " \n          @media(min-width: ".concat(breakpoints[offsetBreakpoint], "px){\n            margin-left: ").concat((100 * offsetSize) / GRID_COLUMNS, "%;\n          }\n        ");
             }
         }

package/Header/useHeader.js

@@ -1,15 +1,16 @@
+import { __read } from "tslib";
 import { useEffect, useState } from "react";
 import { useMedia } from "../styles/media.js";
 import { useTheme } from "../styles/theme.js";
 import { useScrollPosition } from "../useScrollPosition.js";
 export var useHeader = function () {
-    var _a = useState(false), isSticky = _a[0], setIsSticky = _a[1];
+    var _a = __read(useState(false), 2), isSticky = _a[0], setIsSticky = _a[1];
     var themed = useTheme().header;
     var isDesktopLayout = useMedia("min:".concat(themed.breakpoint));
     var valueIdx = isDesktopLayout ? 1 : 0;
-    var _b = useState(themed.height[valueIdx]), headerHeight = _b[0], setHeaderHeight = _b[1];
-    var _c = useState(themed.height[valueIdx]), placeholderHeight = _c[0], setPlaceholderHeight = _c[1];
-    var _d = useState(themed.logoWidth[valueIdx]), logoWidth = _d[0], setLogoWidth = _d[1];
+    var _b = __read(useState(themed.height[valueIdx]), 2), headerHeight = _b[0], setHeaderHeight = _b[1];
+    var _c = __read(useState(themed.height[valueIdx]), 2), placeholderHeight = _c[0], setPlaceholderHeight = _c[1];
+    var _d = __read(useState(themed.logoWidth[valueIdx]), 2), logoWidth = _d[0], setLogoWidth = _d[1];
     useScrollPosition(function (currentPosition) {
         var isPastThreshold = currentPosition.y * -1 > 40;
         if (isSticky !== isPastThreshold)

package/MenuItem/useMenuItem.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __read } from "tslib";
 import useMenu from "@mui/base/useMenu";
 import useForkRef from "@mui/utils/useForkRef";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
@@ -16,7 +16,7 @@ export function useMenuItem(props) {
     useEffect(function () {
         registerItem(id, { disabled: disabled, id: id, ref: itemRef, label: label });
     }, [id, registerItem, disabled, ref, label]);
-    var _d = useState(false), focusRequested = _d[0], requestFocus = _d[1];
+    var _d = __read(useState(false), 2), focusRequested = _d[0], requestFocus = _d[1];
     var focusIfRequested = useCallback(function () {
         if (focusRequested && itemRef.current != null) {
             itemRef.current.focus();

package/Progress/ProgressOverlay.js

@@ -1,4 +1,4 @@
-import { __makeTemplateObject } from "tslib";
+import { __makeTemplateObject, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { useEffect } from "react";
@@ -10,7 +10,7 @@ var ProgressOverlayWrap = styled(m.div)(templateObject_1 || (templateObject_1 =
 var ProgressOverlayCenterer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--progress-overlay-bg);\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--progress-overlay-bg);\n"])));
 export var ProgressOverlay = function (_a) {
     var running = _a.running;
-    var _b = useHeader(), headerHeight = _b[2];
+    var _b = __read(useHeader(), 3), headerHeight = _b[2];
     useEffect(function () {
         document.body.style.cursor = running ? "wait" : "";
     }, [running]);

package/Rating/Rating.js

@@ -1,4 +1,4 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useState } from "react";
 import styled from "styled-components";
@@ -15,8 +15,8 @@ export var RatingRoot = styled.div(templateObject_5 || (templateObject_5 = __mak
 export var Rating = function (_a) {
     var _b = _a.value, value = _b === void 0 ? 0 : _b, count = _a.count, _c = _a.min, min = _c === void 0 ? 0 : _c, _d = _a.max, max = _d === void 0 ? 5 : _d, _e = _a.showDetails, showDetails = _e === void 0 ? true : _e, colorBg = _a.colorBg, colorStroke = _a.colorStroke, _f = _a.starSize, starSize = _f === void 0 ? 16 : _f;
     var id = useId();
-    var currentValue = useState(value)[0];
-    var _g = useState([]), stars = _g[0], setStars = _g[1];
+    var _g = __read(useState(value), 1), currentValue = _g[0];
+    var _h = __read(useState([]), 2), stars = _h[0], setStars = _h[1];
     var getStars = useCallback(function (activeCount) {
         var stars = [];
         for (var currentStar = min + 1; currentStar < max + 1; currentStar++) {

package/Sidebar/Sidebar.js

@@ -1,4 +1,4 @@
-import { __makeTemplateObject } from "tslib";
+import { __makeTemplateObject, __read } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { CgCloseR as IconClose } from "react-icons/cg";
@@ -13,8 +13,8 @@ var SidebarWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTe
 var SidebarToggle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), min.md);
 export var Sidebar = function (_a) {
     var children = _a.children;
-    var _b = useState(false), open = _b[0], setOpen = _b[1];
-    var _c = useHeader(), headerHeight = _c[2];
+    var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
+    var _c = __read(useHeader(), 3), headerHeight = _c[2];
     var handleClickToggle = useCallback(function () {
         setOpen(function (prevOpen) { return !prevOpen; });
     }, []);

package/Spacing/Spacing.js

@@ -1,11 +1,11 @@
-import { __assign, __makeTemplateObject, __rest, __spreadArray } from "tslib";
+import { __assign, __makeTemplateObject, __read, __rest, __spreadArray } from "tslib";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { isUndefined } from "@koine/utils";
 import { spacingBottom, spacingTop, } from "../styles/spacing.js";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], p.$bottom, false)); });
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], __read(p.$top), false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], __read(p.$bottom), false)); });
 var extractDirectionArgs = function (raw) {
-    var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
+    var _a = __read(raw.split(":"), 4), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
     var factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
     var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
     return [size, factorArg, property, devicesArg];

package/Tabs/useTabs.js

@@ -1,13 +1,14 @@
+import { __read } from "tslib";
 import useControlled from "@mui/utils/useControlled";
 import { useCallback, useId, useMemo } from "react";
 export var useTabs = function (props) {
     var valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, orientation = props.orientation, direction = props.direction, selectionFollowsFocus = props.selectionFollowsFocus;
-    var _a = useControlled({
+    var _a = __read(useControlled({
         controlled: valueProp,
         default: defaultValue,
         name: "Tabs",
         state: "value",
-    }), value = _a[0], setValue = _a[1];
+    }), 2), value = _a[0], setValue = _a[1];
     var idPrefix = useId();
     var onSelected = useCallback(function (e, newValue) {
         setValue(newValue);

package/Typography/ReadMore.js

@@ -1,4 +1,4 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { m, useSpring } from "framer-motion";
 import { useMemo, useRef, useState } from "react";
@@ -13,10 +13,10 @@ var BtnIcon = styled.span(templateObject_6 || (templateObject_6 = __makeTemplate
 export var ReadMore = function (_a) {
     var _b = _a.lines, lines = _b === void 0 ? 3 : _b, _c = _a.lineHeight, lineHeight = _c === void 0 ? 1.6 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 14 : _d, _e = _a.bg, bg = _e === void 0 ? "var(--bodyBg)" : _e, _f = _a.expand, expand = _f === void 0 ? "Expand" : _f, _g = _a.collapse, collapse = _g === void 0 ? "Collapse" : _g, props = __rest(_a, ["lines", "lineHeight", "fontSize", "bg", "expand", "collapse"]);
     var defaultMaxHeight = lines * (lineHeight * fontSize);
-    var _h = useState(false), expanded = _h[0], setExpanded = _h[1];
-    var _j = useState(defaultMaxHeight), maxHeight = _j[0], setMaxHeight = _j[1];
-    var _k = useState(0), fullHeight = _k[0], setFullHeight = _k[1];
-    var _l = useState(false), exceeds = _l[0], setExceeds = _l[1];
+    var _h = __read(useState(false), 2), expanded = _h[0], setExpanded = _h[1];
+    var _j = __read(useState(defaultMaxHeight), 2), maxHeight = _j[0], setMaxHeight = _j[1];
+    var _k = __read(useState(0), 2), fullHeight = _k[0], setFullHeight = _k[1];
+    var _l = __read(useState(false), 2), exceeds = _l[0], setExceeds = _l[1];
     var content = useRef(null);
     var height = useSpring(defaultMaxHeight);
     var styles = useMemo(function () { return (exceeds ? { height: height, overflow: "hidden" } : {}); }, [exceeds, height]);

package/Typography/TextLoop.js

@@ -1,12 +1,12 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatePresence, m } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
 export var TextLoopPiece = function (_a) {
     var _b = _a.text, text = _b === void 0 ? "" : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.direction, direction = _e === void 0 ? "up" : _e, _f = _a.inline, inline = _f === void 0 ? true : _f, _g = _a.noOverflow, noOverflow = _g === void 0 ? true : _g, _h = _a.delay, delay = _h === void 0 ? 400 : _h;
     var placeholderRef = useRef(null);
-    var _j = useState({ data: "", key: "" }), content = _j[0], setContent = _j[1];
-    var _k = useState(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
+    var _j = __read(useState({ data: "", key: "" }), 2), content = _j[0], setContent = _j[1];
+    var _k = __read(useState(inline ? 0 : "auto"), 2), width = _k[0], setWidth = _k[1];
     useEffect(function () {
         var timeoutId = setTimeout(function () {
             if (!placeholderRef.current)
@@ -36,7 +36,7 @@ export var TextLoopPiece = function (_a) {
 };
 export var TextLoop = function (_a) {
     var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = __rest(_a, ["texts", "interval"]);
-    var _c = useState(0), index = _c[0], setIndex = _c[1];
+    var _c = __read(useState(0), 2), index = _c[0], setIndex = _c[1];
     useEffect(function () {
         var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval);
         return function () { return clearTimeout(intervalId); };

package/createUseMediaQueryWidth.js

@@ -1,3 +1,4 @@
+import { __read } from "tslib";
 import { useState } from "react";
 import { getMediaQueryWidthResolvers, isUndefined, } from "@koine/utils";
 import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
@@ -5,16 +6,16 @@ export function createUseMediaQueryWidth(customBreakpoints) {
     var queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
     return function useMediaQueryWidth(media, serverValue) {
         var definition = media.substring(1);
-        var _a = definition.split("-"), rule = _a[0], ruleBreakpoint = _a[1];
+        var _a = __read(definition.split("-"), 2), rule = _a[0], ruleBreakpoint = _a[1];
         if (isUndefined(ruleBreakpoint)) {
             ruleBreakpoint = rule;
         }
         if (isUndefined(rule)) {
             rule = "min";
         }
-        var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
+        var _b = __read(ruleBreakpoint.split("_"), 2), br1 = _b[0], br2 = _b[1];
         var query = queryResolvers[rule](br1, br2);
-        var _c = useState(isUndefined(serverValue) ? null : serverValue), matches = _c[0], setMatches = _c[1];
+        var _c = __read(useState(isUndefined(serverValue) ? null : serverValue), 2), matches = _c[0], setMatches = _c[1];
         useIsomorphicLayoutEffect(function () {
             var mq = window.matchMedia(query);
             var handleChange = function (event) {

package/package.json

@@ -2,8 +2,8 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.16",
-    "@koine/utils": "2.0.0-beta.16"
+    "@koine/dom": "2.0.0-beta.17",
+    "@koine/utils": "2.0.0-beta.17"
   },
   "peerDependenciesMeta": {
     "@hookform/resolvers": {
@@ -655,5 +655,5 @@
     }
   },
   "peerDependencies": {},
-  "version": "2.0.0-beta.16"
+  "version": "2.0.0-beta.17"
 }

package/styles/media.js

@@ -1,11 +1,12 @@
 var _a;
+import { __read } from "tslib";
 import { useEffect, useState } from "react";
 import { breakpoints, useTheme } from "./theme.js";
 export var min = (_a = generateMediaQueries(breakpoints), _a.min), max = _a.max, up = _a.up, down = _a.down, between = _a.between, only = _a.only;
 export function useMedia(media) {
     var breakpoints = useTheme().breakpoints;
-    var _a = useState(false), matches = _a[0], setMatches = _a[1];
-    var _b = media.split(":"), _c = _b[0], direction = _c === void 0 ? "min" : _c, breakpoint = _b[1];
+    var _a = __read(useState(false), 2), matches = _a[0], setMatches = _a[1];
+    var _b = __read(media.split(":"), 2), _c = _b[0], direction = _c === void 0 ? "min" : _c, breakpoint = _b[1];
     var px = breakpoints[breakpoint];
     if (direction === "max") {
         px = px - 0.02;

package/styles/theme--vanilla.js

@@ -1,3 +1,4 @@
+import { __read } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useEffect, useState } from "react";
 import { isBrowser } from "@koine/utils";
@@ -23,7 +24,7 @@ export var ThemeVanillaContext = createContext({
 });
 export var ThemeVanillaProvider = function (_a) {
     var initialTheme = _a.initialTheme, children = _a.children;
-    var _b = useState(initialTheme), theme = _b[0], setTheme = _b[1];
+    var _b = __read(useState(initialTheme), 2), theme = _b[0], setTheme = _b[1];
     var rawSetTheme = function (rawTheme) {
         if (!rawTheme || !isBrowser) {
             return;

package/styles/theme.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __read } from "tslib";
 import { useTheme as _useTheme } from "styled-components";
 var DEFAULT_BREAKPOINTS = {
     xs: 0,
@@ -10,7 +10,7 @@ var DEFAULT_BREAKPOINTS = {
 };
 export var breakpoints = process.env["BREAKPOINTS"]
     ? process.env["BREAKPOINTS"].split(",").reduce(function (map, pair) {
-        var _a = pair.split(":"), key = _a[0], value = _a[1];
+        var _a = __read(pair.split(":"), 2), key = _a[0], value = _a[1];
         map[key] = parseFloat(value);
         return map;
     }, {})

package/useAsyncFn.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
 import { useCallback, useRef, useState } from "react";
 import { useMountedState } from "./useMountedState.js";
 export function useAsyncFn(fn, deps, initialState) {
@@ -6,7 +6,7 @@ export function useAsyncFn(fn, deps, initialState) {
     if (initialState === void 0) { initialState = { loading: false }; }
     var lastCallId = useRef(0);
     var isMounted = useMountedState();
-    var _a = useState(initialState), state = _a[0], set = _a[1];
+    var _a = __read(useState(initialState), 2), state = _a[0], set = _a[1];
     var callback = useCallback(function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -16,7 +16,7 @@ export function useAsyncFn(fn, deps, initialState) {
         if (!state.loading) {
             set(function (prevState) { return (__assign(__assign({}, prevState), { loading: true })); });
         }
-        return fn.apply(void 0, args).then(function (value) {
+        return fn.apply(void 0, __spreadArray([], __read(args), false)).then(function (value) {
             isMounted() &&
                 callId === lastCallId.current &&
                 set({ value: value, loading: false });

package/useDateLocale.js

@@ -1,10 +1,10 @@
-import { __awaiter, __generator } from "tslib";
+import { __awaiter, __generator, __read } from "tslib";
 import { useEffect, useState } from "react";
 export function useDateLocale(locale, defaultLocale) {
     var _this = this;
     if (defaultLocale === void 0) { defaultLocale = "en"; }
-    var _a = useState(), data = _a[0], setData = _a[1];
-    var _b = useState(defaultLocale), current = _b[0], setCurrent = _b[1];
+    var _a = __read(useState(), 2), data = _a[0], setData = _a[1];
+    var _b = __read(useState(defaultLocale), 2), current = _b[0], setCurrent = _b[1];
     useEffect(function () {
         var importLocaleFile = function () { return __awaiter(_this, void 0, void 0, function () {
             var localeToSet;

package/useInterval.js

@@ -1,4 +1,4 @@
-import { __spreadArray } from "tslib";
+import { __read, __spreadArray } from "tslib";
 import { useEffect, useRef } from "react";
 import { noop } from "@koine/utils";
 export function useInterval(callback, delay, deps) {
@@ -6,7 +6,7 @@ export function useInterval(callback, delay, deps) {
     var savedCallback = useRef();
     useEffect(function () {
         savedCallback.current = callback;
-    }, __spreadArray([callback], deps, true));
+    }, __spreadArray([callback], __read(deps), false));
     useEffect(function () {
         function tick() {
             if (savedCallback.current)

package/useKeyUp.js

@@ -1,4 +1,4 @@
-import { __spreadArray } from "tslib";
+import { __read, __spreadArray } from "tslib";
 import { useEffect } from "react";
 import { on } from "@koine/dom";
 export function useKeyUp(callback, deps) {
@@ -13,6 +13,6 @@ export function useKeyUp(callback, deps) {
             }
         });
         return listener;
-    }, __spreadArray([callback], deps, true));
+    }, __spreadArray([callback], __read(deps), false));
 }
 export default useKeyUp;

package/useMeasure.js

@@ -1,4 +1,4 @@
-import { __spreadArray } from "tslib";
+import { __read, __spreadArray } from "tslib";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { debounce, noop } from "@koine/utils";
 import { listenResizeDebounced, listenScrollDebounced, off, on, } from "@koine/dom";
@@ -10,7 +10,7 @@ function findScrollContainers(element) {
     var _a = window.getComputedStyle(element), overflow = _a.overflow, overflowX = _a.overflowX, overflowY = _a.overflowY;
     if ([overflow, overflowX, overflowY].some(function (prop) { return prop === "auto" || prop === "scroll"; }))
         result.push(element);
-    return __spreadArray(__spreadArray([], result, true), findScrollContainers(element.parentElement), true);
+    return __spreadArray(__spreadArray([], __read(result), false), __read(findScrollContainers(element.parentElement)), false);
 }
 var keys = [
     "x",
@@ -27,7 +27,7 @@ var areBoundsEqual = function (a, b) {
 };
 export function useMeasure(options) {
     var _a = (options || {}).scroll, scroll = _a === void 0 ? false : _a;
-    var _b = useState({
+    var _b = __read(useState({
         left: 0,
         top: 0,
         width: 0,
@@ -36,7 +36,7 @@ export function useMeasure(options) {
         right: 0,
         x: 0,
         y: 0,
-    }), bounds = _b[0], setBounds = _b[1];
+    }), 2), bounds = _b[0], setBounds = _b[1];
     var state = useRef([
         null,
         null,
@@ -48,13 +48,13 @@ export function useMeasure(options) {
         mounted.current = true;
         return function () { return void (mounted.current = false); };
     }, []);
-    var _c = useMemo(function () {
+    var _c = __read(useMemo(function () {
         var callback = function () {
             var _args = [];
             for (var _i = 0; _i < arguments.length; _i++) {
                 _args[_i] = arguments[_i];
             }
-            var _a = state.current, element = _a[0], lastBounds = _a[3];
+            var _a = __read(state.current, 4), element = _a[0], lastBounds = _a[3];
             if (!element)
                 return;
             var size = element.getBoundingClientRect();
@@ -66,9 +66,9 @@ export function useMeasure(options) {
         };
         var debouncedCallback = debounce(callback);
         return [callback, debouncedCallback, debouncedCallback];
-    }, [setBounds]), forceRefresh = _c[0], scrollChange = _c[2];
+    }, [setBounds]), 3), forceRefresh = _c[0], scrollChange = _c[2];
     function removeListeners() {
-        var _a = state.current, scrollContainers = _a[1], resizeObserver = _a[2];
+        var _a = __read(state.current, 3), scrollContainers = _a[1], resizeObserver = _a[2];
         if (scrollContainers) {
             scrollContainers.forEach(function (element) {
                 return off(element, "scroll", scrollChange);
@@ -81,7 +81,7 @@ export function useMeasure(options) {
         }
     }
     function addListeners() {
-        var _a = state.current, element = _a[0], scrollContainers = _a[1];
+        var _a = __read(state.current, 2), element = _a[0], scrollContainers = _a[1];
         if (!element)
             return;
         if (!observer && ResizeObserver) {

package/usePrevious.js

@@ -1,6 +1,7 @@
+import { __read } from "tslib";
 import { useState } from "react";
 export function usePrevious(state, defaulValue) {
-    var _a = useState([state, defaulValue]), tuple = _a[0], setTuple = _a[1];
+    var _a = __read(useState([state, defaulValue]), 2), tuple = _a[0], setTuple = _a[1];
     if (tuple[1] !== state) {
         setTuple([tuple[1], state]);
     }

package/useScrollThreshold.js

@@ -1,8 +1,9 @@
+import { __read } from "tslib";
 import { useCallback, useEffect, useState } from "react";
 import { noop } from "@koine/utils";
 import { listenScroll } from "@koine/dom";
 export var useScrollThreshold = function (threshold, callback) {
-    var _a = useState(false), isBelow = _a[0], setIsBelow = _a[1];
+    var _a = __read(useState(false), 2), isBelow = _a[0], setIsBelow = _a[1];
     var handler = useCallback(function () {
         if (threshold) {
             var posY = window.scrollY;

package/useScrollTo.js

@@ -1,9 +1,10 @@
+import { __read } from "tslib";
 import { isBrowser } from "@koine/utils";
 import useHeader from "./Header/useHeader.js";
 export function useScrollTo(id, offset) {
     if (id === void 0) { id = ""; }
     if (offset === void 0) { offset = 0; }
-    var _a = useHeader(), headerHeight = _a[2];
+    var _a = __read(useHeader(), 3), headerHeight = _a[2];
     if (!isBrowser) {
         return;
     }

package/useSpinDelay.js

@@ -1,3 +1,4 @@
+import { __read } from "tslib";
 import { useEffect, useRef, useState } from "react";
 var State;
 (function (State) {
@@ -9,7 +10,7 @@ var State;
 export function useSpinDelay(loading, delay, minDuration) {
     if (delay === void 0) { delay = 500; }
     if (minDuration === void 0) { minDuration = 200; }
-    var _a = useState(State.IDLE), state = _a[0], setState = _a[1];
+    var _a = __read(useState(State.IDLE), 2), state = _a[0], setState = _a[1];
     var timeout = useRef();
     useEffect(function () {
         if (loading && state === State.IDLE) {

package/useTraceUpdate.js

@@ -1,9 +1,10 @@
+import { __read } from "tslib";
 import { useEffect, useRef } from "react";
 export function useTraceUpdate(props) {
     var prev = useRef(props);
     useEffect(function () {
         var changedProps = Object.entries(props).reduce(function (ps, _a) {
-            var k = _a[0], v = _a[1];
+            var _b = __read(_a, 2), k = _b[0], v = _b[1];
             if (prev.current[k] !== v) {
                 ps[k] = [prev.current[k], v];
             }

package/useWindowSize.js

@@ -1,8 +1,9 @@
+import { __read } from "tslib";
 import { useEffect, useState } from "react";
 import { listenResize, listenResizeDebounced } from "@koine/dom";
 export function useWindowSize(wait, immediate) {
-    var _a = useState(0), width = _a[0], widthSet = _a[1];
-    var _b = useState(0), height = _b[0], heightSet = _b[1];
+    var _a = __read(useState(0), 2), width = _a[0], widthSet = _a[1];
+    var _b = __read(useState(0), 2), height = _b[0], heightSet = _b[1];
     useEffect(function () {
         function updateSize() {
             widthSet(window.innerWidth);