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

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); };