@koine/react 2.0.0-alpha.1 → 2.0.0-alpha.3

package/MenuItem/useMenuItem.js

@@ -4,30 +4,31 @@ exports.useMenuItem = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
 var utils_1 = require("@mui/utils");
-var MenuUnstyled_1 = require("@mui/base/MenuUnstyled");
+var useMenu_1 = tslib_1.__importDefault(require("@mui/base/useMenu"));
 // import { unstable_useIsFocusVisible as useIsFocusVisible } from "@mui/utils";
 function useMenuItem(props) {
     var _a;
-    var _b = props.disabled, disabled = _b === void 0 ? false : _b, ref = props.ref, label = props.label;
+    var _b = props.disabled, disabled = _b === void 0 ? false : _b, ref = props.rootRef, label = props.label;
     var id = (0, react_1.useId)();
-    var menuContext = (0, react_1.useContext)(MenuUnstyled_1.MenuUnstyledContext);
+    var _c = (0, useMenu_1.default)(), contextValue = _c.contextValue, open = _c.open;
+    // const { getRootProps } = useMenuItemUnstyled(props);
     var itemRef = (0, react_1.useRef)(null);
     var handleRef = (0, utils_1.unstable_useForkRef)(itemRef, ref);
-    if (menuContext === null) {
+    if (contextValue === null) {
         throw new Error("MenuItemUnstyled must be used within a MenuUnstyled");
     }
-    var registerItem = menuContext.registerItem, unregisterItem = menuContext.unregisterItem, open = menuContext.open;
+    var registerItem = contextValue.registerItem, getItemState = contextValue.getItemState;
     (0, react_1.useEffect)(function () {
         registerItem(id, { disabled: disabled, id: id, ref: itemRef, label: label });
-        return function () { return unregisterItem(id); };
-    }, [id, registerItem, unregisterItem, disabled, ref, label]);
+        // return () => unregisterItem(id);
+    }, [id, registerItem, /* unregisterItem,  */ disabled, ref, label]);
     // const { getRootProps: getButtonProps, focusVisible } = useButton({
     //   disabled,
     //   focusableWhenDisabled: true,
     //   ref: handleRef,
     // });
     // Ensure the menu item is focused when highlighted
-    var _c = (0, react_1.useState)(false), focusRequested = _c[0], requestFocus = _c[1];
+    var _d = (0, react_1.useState)(false), focusRequested = _d[0], requestFocus = _d[1];
     var focusIfRequested = (0, react_1.useCallback)(function () {
         if (focusRequested && itemRef.current != null) {
             itemRef.current.focus();
@@ -38,20 +39,21 @@ function useMenuItem(props) {
         focusIfRequested();
     });
     // useDebugValue({ id, disabled, label });
-    var itemState = menuContext.getItemState(id !== null && id !== void 0 ? id : "");
+    var itemState = getItemState(id !== null && id !== void 0 ? id : "");
     var highlighted = (itemState !== null && itemState !== void 0 ? itemState : { highlighted: false }).highlighted;
     (0, react_1.useEffect)(function () {
         requestFocus(highlighted && open);
     }, [highlighted, open]);
     return {
         getRootProps: function (other) {
-            var optionProps = menuContext.getItemProps(id, other);
+            // const optionProps = menuContext.getItemProps(id, other);
             return tslib_1.__assign(tslib_1.__assign({}, other), { 
                 // ...getButtonProps(other),
-                // @ts-expect-error type from @mui/base is not specific
-                tabIndex: optionProps.tabIndex, 
-                // @ts-expect-error type from @mui/base is not specific
-                id: optionProps.id, role: "menuitem" });
+                // @ ts-expect-error type from @mui/base is not specific
+                // tabIndex: optionProps.tabIndex,
+                // @ ts-expect-error type from @mui/base is not specific
+                // id: optionProps.id,
+                role: "menuitem" });
         },
         disabled: (_a = itemState === null || itemState === void 0 ? void 0 : itemState.disabled) !== null && _a !== void 0 ? _a : false,
         // focusVisible,

package/MenuItem/useMenuItem.mjs

@@ -1,30 +1,31 @@
 import { __assign } from "tslib";
-import { useCallback, useContext, useEffect, useId, useRef, useState, } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { unstable_useForkRef as useForkRef } from "@mui/utils";
-import { MenuUnstyledContext } from "@mui/base/MenuUnstyled";
+import useMenu from "@mui/base/useMenu";
 // import { unstable_useIsFocusVisible as useIsFocusVisible } from "@mui/utils";
 export function useMenuItem(props) {
     var _a;
-    var _b = props.disabled, disabled = _b === void 0 ? false : _b, ref = props.ref, label = props.label;
+    var _b = props.disabled, disabled = _b === void 0 ? false : _b, ref = props.rootRef, label = props.label;
     var id = useId();
-    var menuContext = useContext(MenuUnstyledContext);
+    var _c = useMenu(), contextValue = _c.contextValue, open = _c.open;
+    // const { getRootProps } = useMenuItemUnstyled(props);
     var itemRef = useRef(null);
     var handleRef = useForkRef(itemRef, ref);
-    if (menuContext === null) {
+    if (contextValue === null) {
         throw new Error("MenuItemUnstyled must be used within a MenuUnstyled");
     }
-    var registerItem = menuContext.registerItem, unregisterItem = menuContext.unregisterItem, open = menuContext.open;
+    var registerItem = contextValue.registerItem, getItemState = contextValue.getItemState;
     useEffect(function () {
         registerItem(id, { disabled: disabled, id: id, ref: itemRef, label: label });
-        return function () { return unregisterItem(id); };
-    }, [id, registerItem, unregisterItem, disabled, ref, label]);
+        // return () => unregisterItem(id);
+    }, [id, registerItem, /* unregisterItem,  */ disabled, ref, label]);
     // const { getRootProps: getButtonProps, focusVisible } = useButton({
     //   disabled,
     //   focusableWhenDisabled: true,
     //   ref: handleRef,
     // });
     // Ensure the menu item is focused when highlighted
-    var _c = useState(false), focusRequested = _c[0], requestFocus = _c[1];
+    var _d = useState(false), focusRequested = _d[0], requestFocus = _d[1];
     var focusIfRequested = useCallback(function () {
         if (focusRequested && itemRef.current != null) {
             itemRef.current.focus();
@@ -35,20 +36,21 @@ export function useMenuItem(props) {
         focusIfRequested();
     });
     // useDebugValue({ id, disabled, label });
-    var itemState = menuContext.getItemState(id !== null && id !== void 0 ? id : "");
+    var itemState = getItemState(id !== null && id !== void 0 ? id : "");
     var highlighted = (itemState !== null && itemState !== void 0 ? itemState : { highlighted: false }).highlighted;
     useEffect(function () {
         requestFocus(highlighted && open);
     }, [highlighted, open]);
     return {
         getRootProps: function (other) {
-            var optionProps = menuContext.getItemProps(id, other);
+            // const optionProps = menuContext.getItemProps(id, other);
             return __assign(__assign({}, other), { 
                 // ...getButtonProps(other),
-                // @ts-expect-error type from @mui/base is not specific
-                tabIndex: optionProps.tabIndex, 
-                // @ts-expect-error type from @mui/base is not specific
-                id: optionProps.id, role: "menuitem" });
+                // @ ts-expect-error type from @mui/base is not specific
+                // tabIndex: optionProps.tabIndex,
+                // @ ts-expect-error type from @mui/base is not specific
+                // id: optionProps.id,
+                role: "menuitem" });
         },
         disabled: (_a = itemState === null || itemState === void 0 ? void 0 : itemState.disabled) !== null && _a !== void 0 ? _a : false,
         // focusVisible,

package/Meta/Meta.d.ts

@@ -11,5 +11,5 @@ export type MetaProps = {
      */
     zoom?: boolean;
 };
-export declare const Meta: ({ zoom }: MetaProps) => JSX.Element;
+export declare const Meta: ({ zoom }: MetaProps) => import("react/jsx-runtime").JSX.Element;
 export default Meta;

package/NoJs/NoJs.d.ts

@@ -1,3 +1,3 @@
 export type NoJsProps = object;
-export declare const NoJs: (_props: NoJsProps) => JSX.Element;
+export declare const NoJs: (_props: NoJsProps) => import("react/jsx-runtime").JSX.Element;
 export default NoJs;

package/Pagination/PaginationNav.d.ts

@@ -18,5 +18,5 @@ type PaginationNavProps = KoineComponentProps<KoinePaginationNavProps, {
     currentUrl?: string;
     Link?: KoineComponent;
 }>;
-export declare const KoinePaginationNav: ({ total, perPage, currentPage, baseUrl, showOffset, currentUrl, Link, }: PaginationNavProps) => JSX.Element | null;
+export declare const KoinePaginationNav: ({ total, perPage, currentPage: _currentPage, baseUrl, showOffset, currentUrl, Link, }: PaginationNavProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/Pagination/PaginationNav.js

@@ -23,9 +23,9 @@ var ItemNext = styled_components_1.default.a(templateObject_6 || (templateObject
  * < 1 ... 76 77 [78]
  */
 var KoinePaginationNav = function (_a) {
-    var total = _a.total, perPage = _a.perPage, currentPage = _a.currentPage, baseUrl = _a.baseUrl, _b = _a.showOffset, showOffset = _b === void 0 ? 2 : _b, _c = _a.currentUrl, currentUrl = _c === void 0 ? "/" : _c, _d = _a.Link, Link = _d === void 0 ? "a" : _d;
+    var total = _a.total, perPage = _a.perPage, _currentPage = _a.currentPage, baseUrl = _a.baseUrl, _b = _a.showOffset, showOffset = _b === void 0 ? 2 : _b, _c = _a.currentUrl, currentUrl = _c === void 0 ? "/" : _c, _d = _a.Link, Link = _d === void 0 ? "a" : _d;
+    var currentPage = (0, ensureInt_1.default)(_currentPage);
     total = (0, ensureInt_1.default)(total);
-    currentPage = (0, ensureInt_1.default)(currentPage);
     perPage = (0, ensureInt_1.default)(perPage);
     // page 0 means 1
     currentPage = currentPage || 1;
@@ -57,9 +57,9 @@ var KoinePaginationNav = function (_a) {
     }
     var prevDots = pages[0] > firstPage + 1;
     var nextDots = pages[pages.length - 1] < lastPage - 1;
-    return ((0, jsx_runtime_1.jsxs)(Root, { children: [prevArrow && ((0, jsx_runtime_1.jsx)(ItemPrev, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(prevPage) }, { children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowLeftR, {}) }))), firstPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl), prev: true }, { children: firstPage }))), prevDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), pages.map(function (page) {
-                return page === currentPage ? ((0, jsx_runtime_1.jsx)(ItemCurrent, { children: page }, page)) : ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(page), prev: page < currentPage, next: page > currentPage }, { children: page }), "pagination-".concat(page)));
-            }), nextDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), lastPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true }, { children: lastPage }))), nextArrow && ((0, jsx_runtime_1.jsx)(ItemNext, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(nextPage) }, { children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowRightR, {}) })))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, { children: [prevArrow && ((0, jsx_runtime_1.jsx)(ItemPrev, { as: Link, href: "".concat(baseUrl, "/").concat(prevPage), children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowLeftR, {}) })), firstPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: "".concat(baseUrl), prev: true, children: firstPage })), prevDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), pages.map(function (page) {
+                return page === currentPage ? ((0, jsx_runtime_1.jsx)(ItemCurrent, { children: page }, page)) : ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: "".concat(baseUrl, "/").concat(page), prev: page < currentPage, next: page > currentPage, children: page }, "pagination-".concat(page)));
+            }), nextDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), lastPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true, children: lastPage })), nextArrow && ((0, jsx_runtime_1.jsx)(ItemNext, { as: Link, href: "".concat(baseUrl, "/").concat(nextPage), children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowRightR, {}) }))] }));
 };
 exports.KoinePaginationNav = KoinePaginationNav;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Pagination/PaginationNav.mjs

@@ -1,4 +1,4 @@
-import { __assign, __makeTemplateObject } from "tslib";
+import { __makeTemplateObject } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { CgArrowRightR as IconArrowRight, CgArrowLeftR as IconArrowLeft, } from "react-icons/cg";
@@ -20,9 +20,9 @@ var ItemNext = styled.a(templateObject_6 || (templateObject_6 = __makeTemplateOb
  * < 1 ... 76 77 [78]
  */
 export var KoinePaginationNav = function (_a) {
-    var total = _a.total, perPage = _a.perPage, currentPage = _a.currentPage, baseUrl = _a.baseUrl, _b = _a.showOffset, showOffset = _b === void 0 ? 2 : _b, _c = _a.currentUrl, currentUrl = _c === void 0 ? "/" : _c, _d = _a.Link, Link = _d === void 0 ? "a" : _d;
+    var total = _a.total, perPage = _a.perPage, _currentPage = _a.currentPage, baseUrl = _a.baseUrl, _b = _a.showOffset, showOffset = _b === void 0 ? 2 : _b, _c = _a.currentUrl, currentUrl = _c === void 0 ? "/" : _c, _d = _a.Link, Link = _d === void 0 ? "a" : _d;
+    var currentPage = ensureInt(_currentPage);
     total = ensureInt(total);
-    currentPage = ensureInt(currentPage);
     perPage = ensureInt(perPage);
     // page 0 means 1
     currentPage = currentPage || 1;
@@ -54,8 +54,8 @@ export var KoinePaginationNav = function (_a) {
     }
     var prevDots = pages[0] > firstPage + 1;
     var nextDots = pages[pages.length - 1] < lastPage - 1;
-    return (_jsxs(Root, { children: [prevArrow && (_jsx(ItemPrev, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(prevPage) }, { children: _jsx(IconArrowLeft, {}) }))), firstPage !== currentPage && (_jsx(ItemLink, __assign({ as: Link, href: "".concat(baseUrl), prev: true }, { children: firstPage }))), prevDots && _jsx(DotsSeparator, { children: "..." }), pages.map(function (page) {
-                return page === currentPage ? (_jsx(ItemCurrent, { children: page }, page)) : (_jsx(ItemLink, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(page), prev: page < currentPage, next: page > currentPage }, { children: page }), "pagination-".concat(page)));
-            }), nextDots && _jsx(DotsSeparator, { children: "..." }), lastPage !== currentPage && (_jsx(ItemLink, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true }, { children: lastPage }))), nextArrow && (_jsx(ItemNext, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(nextPage) }, { children: _jsx(IconArrowRight, {}) })))] }));
+    return (_jsxs(Root, { children: [prevArrow && (_jsx(ItemPrev, { as: Link, href: "".concat(baseUrl, "/").concat(prevPage), children: _jsx(IconArrowLeft, {}) })), firstPage !== currentPage && (_jsx(ItemLink, { as: Link, href: "".concat(baseUrl), prev: true, children: firstPage })), prevDots && _jsx(DotsSeparator, { children: "..." }), pages.map(function (page) {
+                return page === currentPage ? (_jsx(ItemCurrent, { children: page }, page)) : (_jsx(ItemLink, { as: Link, href: "".concat(baseUrl, "/").concat(page), prev: page < currentPage, next: page > currentPage, children: page }, "pagination-".concat(page)));
+            }), nextDots && _jsx(DotsSeparator, { children: "..." }), lastPage !== currentPage && (_jsx(ItemLink, { as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true, children: lastPage })), nextArrow && (_jsx(ItemNext, { as: Link, href: "".concat(baseUrl, "/").concat(nextPage), children: _jsx(IconArrowRight, {}) }))] }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Pagination/PaginationResults.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 export type PaginationResultsProps = React.PropsWithChildren<unknown>;
-export declare const PaginationResults: ({ children }: PaginationResultsProps) => JSX.Element;
+export declare const PaginationResults: ({ children }: PaginationResultsProps) => import("react/jsx-runtime").JSX.Element;

package/Pagination/PaginationResults.js

@@ -9,7 +9,7 @@ var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1
 var Inner = (0, styled_components_1.default)(framer_motion_1.m.div)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject([""], [""])));
 var PaginationResults = function (_a) {
     var children = _a.children;
-    return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, tslib_1.__assign({ exitBeforeEnter: true, initial: true }, { children: (0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsx)(Inner, tslib_1.__assign({ initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 } }, { children: children })) }) })));
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, initial: true, children: (0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsx)(Inner, { initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 }, children: children }) }) }));
 };
 exports.PaginationResults = PaginationResults;
 var templateObject_1, templateObject_2;

package/Pagination/PaginationResults.mjs

@@ -1,4 +1,4 @@
-import { __assign, __makeTemplateObject } from "tslib";
+import { __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { AnimatePresence, m } from "framer-motion";
@@ -6,6 +6,6 @@ var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObje
 var Inner = styled(m.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
 export var PaginationResults = function (_a) {
     var children = _a.children;
-    return (_jsx(AnimatePresence, __assign({ exitBeforeEnter: true, initial: true }, { children: _jsx(Root, { children: _jsx(Inner, __assign({ initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 } }, { children: children })) }) })));
+    return (_jsx(AnimatePresence, { exitBeforeEnter: true, initial: true, children: _jsx(Root, { children: _jsx(Inner, { initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 }, children: children }) }) }));
 };
 var templateObject_1, templateObject_2;

package/Progress/ProgressCircular.d.ts

@@ -16,4 +16,4 @@ export declare const ProgressCircular: ({ size, thickness, color, ...props }: {
     size?: string | undefined;
     thickness?: number | undefined;
     color?: string | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/Progress/ProgressLinear.d.ts

@@ -19,4 +19,4 @@ export declare const ProgressLinear: ({ done, height, bg, fg, ...props }: {
     height?: string | undefined;
     bg?: string | undefined;
     fg?: string | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/Progress/ProgressOverlay.d.ts

@@ -1,4 +1,4 @@
 export type ProgressOverlayProps = {
     running?: boolean;
 };
-export declare const ProgressOverlay: ({ running }: ProgressOverlayProps) => JSX.Element;
+export declare const ProgressOverlay: ({ running }: ProgressOverlayProps) => import("react/jsx-runtime").JSX.Element;

package/Progress/ProgressOverlay.js

@@ -18,11 +18,11 @@ var ProgressOverlay = function (_a) {
     (0, react_1.useEffect)(function () {
         document.body.style.cursor = running ? "wait" : "";
     }, [running]);
-    return ((0, jsx_runtime_1.jsxs)(ProgressOverlayWrap, tslib_1.__assign({ animate: {
+    return ((0, jsx_runtime_1.jsxs)(ProgressOverlayWrap, { animate: {
             opacity: running ? 1 : 0,
-        }, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [(0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), (0, jsx_runtime_1.jsx)(ProgressOverlayCenterer, tslib_1.__assign({ style: {
+        }, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [(0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), (0, jsx_runtime_1.jsx)(ProgressOverlayCenterer, { style: {
                     top: headerHeight + "px",
-                } }, { children: (0, jsx_runtime_1.jsx)(ProgressCircular_1.ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
+                }, children: (0, jsx_runtime_1.jsx)(ProgressCircular_1.ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
 };
 exports.ProgressOverlay = ProgressOverlay;
 var templateObject_1, templateObject_2;

package/Progress/ProgressOverlay.mjs

@@ -1,4 +1,4 @@
-import { __assign, __makeTemplateObject } from "tslib";
+import { __makeTemplateObject } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import styled from "styled-components";
@@ -15,10 +15,10 @@ export var ProgressOverlay = function (_a) {
     useEffect(function () {
         document.body.style.cursor = running ? "wait" : "";
     }, [running]);
-    return (_jsxs(ProgressOverlayWrap, __assign({ animate: {
+    return (_jsxs(ProgressOverlayWrap, { animate: {
             opacity: running ? 1 : 0,
-        }, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, __assign({ style: {
+        }, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, { style: {
                     top: headerHeight + "px",
-                } }, { children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
+                }, children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
 };
 var templateObject_1, templateObject_2;

package/Rating/Rating.d.ts

@@ -10,7 +10,7 @@ export type RatingStarProps = React.ComponentPropsWithoutRef<"svg"> & RatingStar
     colorStroke?: React.CSSProperties["color"];
 };
 export declare const RatingStarRoot: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingStar: ({ value, colorBg, colorStroke, size, ...props }: RatingStarProps) => JSX.Element;
+export declare const RatingStar: ({ value, colorBg, colorStroke, size, ...props }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;
 export declare const RatingDetails: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const RatingCount: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const RatingValue: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
@@ -32,4 +32,4 @@ export type RatingProps = {
     showDetails?: boolean;
     starSize?: RatingStarProps["size"];
 } & Pick<RatingStarProps, "colorBg" | "colorStroke">;
-export declare const Rating: ({ value, count, min, max, showDetails, colorBg, colorStroke, starSize, }: RatingProps) => JSX.Element;
+export declare const Rating: ({ value, count, min, max, showDetails, colorBg, colorStroke, starSize, }: RatingProps) => import("react/jsx-runtime").JSX.Element;

package/Rating/Rating.js

@@ -9,7 +9,7 @@ exports.RatingStarRoot = styled_components_1.default.svg(templateObject_1 || (te
 var RatingStar = function (_a) {
     var value = _a.value, _b = _a.colorBg, colorBg = _b === void 0 ? "#FFD84C" : _b, _c = _a.colorStroke, colorStroke = _c === void 0 ? "#947813" : _c, size = _a.size, props = tslib_1.__rest(_a, ["value", "colorBg", "colorStroke", "size"]);
     var id = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)(exports.RatingStarRoot, tslib_1.__assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", tslib_1.__assign({ id: id, x1: "0", y1: "0", x2: "1", y2: "0" }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] })) }), (0, jsx_runtime_1.jsx)("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
+    return ((0, jsx_runtime_1.jsxs)(exports.RatingStarRoot, tslib_1.__assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: id, x1: "0", y1: "0", x2: "1", y2: "0", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] }) }), (0, jsx_runtime_1.jsx)("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
 };
 exports.RatingStar = RatingStar;
 exports.RatingDetails = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"], ["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"])));

package/Rating/Rating.mjs

@@ -6,7 +6,7 @@ export var RatingStarRoot = styled.svg(templateObject_1 || (templateObject_1 = _
 export var RatingStar = function (_a) {
     var value = _a.value, _b = _a.colorBg, colorBg = _b === void 0 ? "#FFD84C" : _b, _c = _a.colorStroke, colorStroke = _c === void 0 ? "#947813" : _c, size = _a.size, props = __rest(_a, ["value", "colorBg", "colorStroke", "size"]);
     var id = useId();
-    return (_jsxs(RatingStarRoot, __assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [_jsx("defs", { children: _jsxs("linearGradient", __assign({ id: id, x1: "0", y1: "0", x2: "1", y2: "0" }, { children: [_jsx("stop", { offset: "0", stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] })) }), _jsx("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
+    return (_jsxs(RatingStarRoot, __assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [_jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] }) }), _jsx("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
 };
 export var RatingDetails = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"], ["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"])));
 export var RatingCount = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));

package/Sidebar/Sidebar.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 export type SidebarProps = React.PropsWithChildren<unknown>;
-export declare const Sidebar: ({ children }: SidebarProps) => JSX.Element;
+export declare const Sidebar: ({ children }: SidebarProps) => import("react/jsx-runtime").JSX.Element;

package/Sidebar/Sidebar.js

@@ -21,7 +21,7 @@ var Sidebar = function (_a) {
     var handleClickToggle = (0, react_1.useCallback)(function () {
         setOpen(function (prevOpen) { return !prevOpen; });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarToggle, tslib_1.__assign({ onClick: handleClickToggle }, { children: (0, jsx_runtime_1.jsx)(Buttons_1.IconButtonFab, tslib_1.__assign({ "$variant": "contained" }, { children: open ? (0, jsx_runtime_1.jsx)(cg_1.CgCloseR, {}) : (0, jsx_runtime_1.jsx)(gr_1.GrFolderOpen, {}) })) })), (0, jsx_runtime_1.jsx)(SidebarWrapper, tslib_1.__assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarToggle, { onClick: handleClickToggle, children: (0, jsx_runtime_1.jsx)(Buttons_1.IconButtonFab, { "$variant": "contained", children: open ? (0, jsx_runtime_1.jsx)(cg_1.CgCloseR, {}) : (0, jsx_runtime_1.jsx)(gr_1.GrFolderOpen, {}) }) }), (0, jsx_runtime_1.jsx)(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
 };
 exports.Sidebar = Sidebar;
 var templateObject_1, templateObject_2;

package/Sidebar/Sidebar.mjs

@@ -1,4 +1,4 @@
-import { __assign, __makeTemplateObject } from "tslib";
+import { __makeTemplateObject } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import styled from "styled-components";
@@ -18,6 +18,6 @@ export var Sidebar = function (_a) {
     var handleClickToggle = useCallback(function () {
         setOpen(function (prevOpen) { return !prevOpen; });
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, __assign({ onClick: handleClickToggle }, { children: _jsx(IconButtonFab, __assign({ "$variant": "contained" }, { children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) })) })), _jsx(SidebarWrapper, __assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, { onClick: handleClickToggle, children: _jsx(IconButtonFab, { "$variant": "contained", children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) }) }), _jsx(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
 };
 var templateObject_1, templateObject_2;

package/Spacing/Spacing.d.ts

@@ -26,5 +26,5 @@ export type SpacingProps = React.ComponentPropsWithoutRef<"div"> & Partial<Recor
  * <Spacing top="sm:2:padding:tablet,desktop" />
  * ```
  */
-export declare const Spacing: ({ top, bottom, vertical, ...props }: SpacingProps) => JSX.Element;
+export declare const Spacing: ({ top, bottom, vertical, ...props }: SpacingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/Sticky/StickyCss.d.ts

@@ -2,4 +2,4 @@
 export type StickyCssProps = React.ComponentProps<"div"> & {
     top: number;
 };
-export declare const StickyCss: ({ top, ...props }: StickyCssProps) => JSX.Element;
+export declare const StickyCss: ({ top, ...props }: StickyCssProps) => import("react/jsx-runtime").JSX.Element;

package/Sticky/index.d.ts

@@ -1 +1 @@
-export * from "./StickyCss";
+export { StickyCss, StickyCssProps } from "./StickyCss";

package/Sticky/index.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./StickyCss"), exports);
+exports.StickyCss = void 0;
+var StickyCss_1 = require("./StickyCss");
+Object.defineProperty(exports, "StickyCss", { enumerable: true, get: function () { return StickyCss_1.StickyCss; } });

package/Sticky/index.mjs

@@ -1 +1 @@
-export * from "./StickyCss";
+export { StickyCss } from "./StickyCss";