@koine/react 1.0.9 → 1.0.12

package/node/hooks/useScrollTo.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScrollTo = void 0;
-const utils_1 = require("@koine/utils");
-const useHeader_1 = require("../Header/useHeader");
-function useScrollTo(id = "", offset = 0) {
-    const [, , headerHeight] = (0, useHeader_1.useHeader)();
+var utils_1 = require("@koine/utils");
+var useHeader_1 = require("../Header/useHeader");
+function useScrollTo(id, offset) {
+    if (id === void 0) { id = ""; }
+    if (offset === void 0) { offset = 0; }
+    var _a = (0, useHeader_1.useHeader)(), headerHeight = _a[2];
     if (!utils_1.isBrowser) {
         return;
     }
-    const headerOffset = headerHeight || 0;
-    let element = document.getElementById(id);
-    let top = 0;
+    var headerOffset = headerHeight || 0;
+    var element = document.getElementById(id);
+    var top = 0;
     if (element && element.offsetParent) {
         do {
             top += element.offsetTop;

package/node/hooks/useTraceUpdate.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTraceUpdate = void 0;
-const react_1 = require("react");
+var react_1 = require("react");
 /**
  * @see https://stackoverflow.com/a/51082563/9122820
  */
 function useTraceUpdate(props) {
-    const prev = (0, react_1.useRef)(props);
-    (0, react_1.useEffect)(() => {
-        const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+    var prev = (0, react_1.useRef)(props);
+    (0, react_1.useEffect)(function () {
+        var changedProps = Object.entries(props).reduce(function (ps, _a) {
+            var k = _a[0], v = _a[1];
             if (prev.current[k] !== v) {
                 // @ts-expect-error Does not matter here...
                 ps[k] = [prev.current[k], v];

package/node/hooks/useUpdateEffect.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUpdateEffect = void 0;
+var react_1 = require("react");
+var useFirstMountState_1 = require("./useFirstMountState");
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
+ */
+var useUpdateEffect = function (effect, deps) {
+    var isFirstMount = (0, useFirstMountState_1.useFirstMountState)();
+    (0, react_1.useEffect)(function () {
+        if (!isFirstMount) {
+            return effect();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+};
+exports.useUpdateEffect = useUpdateEffect;

package/node/hooks/useWindowSize.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWindowSize = void 0;
-const react_1 = require("react");
+var react_1 = require("react");
 function useWindowSize() {
-    const [size, setSize] = (0, react_1.useState)([0, 0]);
-    (0, react_1.useEffect)(() => {
+    var _a = (0, react_1.useState)([0, 0]), size = _a[0], setSize = _a[1];
+    (0, react_1.useEffect)(function () {
         function updateSize() {
             setSize([window.innerWidth, window.innerHeight]);
         }
         window.addEventListener("resize", updateSize);
         updateSize();
-        return () => window.removeEventListener("resize", updateSize);
+        return function () { return window.removeEventListener("resize", updateSize); };
     }, []);
     return size;
 }

package/node/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./shared"), exports);
 // we need to alias the star export otherwise the named exports would collide
 // export * as css from "./css";

package/node/m/MotionProvider.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MotionProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const framer_motion_1 = require("framer-motion");
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var framer_motion_1 = require("framer-motion");
 /**
  * `<LazyMotion />` provider wrapper from `framer-motion`
  *
@@ -35,7 +36,8 @@ const framer_motion_1 = require("framer-motion");
  * </MotionProvider>
  * ```
  */
-const MotionProvider = ({ features, children }) => {
-    return (0, jsx_runtime_1.jsx)(framer_motion_1.LazyMotion, { features: features, children: children });
+var MotionProvider = function (_a) {
+    var features = _a.features, children = _a.children;
+    return (0, jsx_runtime_1.jsx)(framer_motion_1.LazyMotion, tslib_1.__assign({ features: features }, { children: children }));
 };
 exports.MotionProvider = MotionProvider;

package/node/m/index.js

@@ -5,5 +5,5 @@
  * In this file we only have exports related to `framer-motion`
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./MotionProvider"), exports);

package/node/m/lite.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const framer_motion_1 = require("framer-motion");
+var framer_motion_1 = require("framer-motion");
 exports.default = framer_motion_1.domAnimation;

package/node/m/max.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const framer_motion_1 = require("framer-motion");
+var framer_motion_1 = require("framer-motion");
 exports.default = framer_motion_1.domMax;

package/node/sc/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-const tslib_1 = require("tslib");
+exports.KoineForm = exports.KoineDialog = void 0;
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("../shared"), exports);
 tslib_1.__exportStar(require("../Alert"), exports);
 tslib_1.__exportStar(require("../Animations"), exports);
@@ -14,6 +14,8 @@ tslib_1.__exportStar(require("../Collapsable"), exports);
 tslib_1.__exportStar(require("../Debug"), exports);
 var bare_1 = require("../Dialog/sc/bare");
 Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return bare_1.KoineDialog; } });
+var bare_2 = require("../Form/sc/bare");
+Object.defineProperty(exports, "KoineForm", { enumerable: true, get: function () { return bare_2.KoineForm; } });
 tslib_1.__exportStar(require("../Forms"), exports);
 tslib_1.__exportStar(require("../Grid"), exports);
 tslib_1.__exportStar(require("../Hamburger"), exports);

package/node/scm/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = void 0;
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("../shared"), exports);
 tslib_1.__exportStar(require("../Alert"), exports);
 tslib_1.__exportStar(require("../Animations"), exports);
@@ -14,6 +14,7 @@ tslib_1.__exportStar(require("../Collapsable"), exports);
 tslib_1.__exportStar(require("../Debug"), exports);
 var framer_1 = require("../Dialog/sc/framer");
 Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return framer_1.KoineDialog; } });
+// export { KoineForm, type KoineFormProps} from "../Form/sc/framer";
 tslib_1.__exportStar(require("../Forms"), exports);
 tslib_1.__exportStar(require("../Grid"), exports);
 tslib_1.__exportStar(require("../Hamburger"), exports);

package/node/shared/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("../Calendar"), exports);
 tslib_1.__exportStar(require("../Dialog"), exports);
 tslib_1.__exportStar(require("../Favicon"), exports);

package/node/styles/Body.js

@@ -1,13 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyMain = exports.BodyRoot = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.BodyRoot = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-`;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.BodyRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n"])));
 /**
  * If you have background graphics to overlap you might need to add:
  *
@@ -16,6 +12,5 @@ exports.BodyRoot = styled_components_1.default.div `
  * position: relative;
  * ```
  */
-exports.BodyMain = styled_components_1.default.main `
-  flex: 1;
-`;
+exports.BodyMain = styled_components_1.default.main(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var templateObject_1, templateObject_2;

package/node/styles/Global.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StylesGlobal = exports.stylesGlobal = void 0;
-const styled_components_1 = require("styled-components");
+var tslib_1 = require("tslib");
+var styled_components_1 = require("styled-components");
 /**
  * App global style
  *
@@ -15,39 +16,6 @@ const styled_components_1 = require("styled-components");
  *  - @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
  *  - @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
  */
-exports.stylesGlobal = `
-  body {
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-
-  body,
-  button,
-  input,
-  textarea,
-  select,
-  select:-webkit-autofill::first-line,
-  input:-webkit-autofill::first-line {
-    font-family: var(--font), -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-      sans-serif;
-    font-size: var(--fontSize);
-  }
-
-  html {
-    box-sizing: border-box;
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-    -webkit-tap-highlight-color: transparent;
-  }
-`;
-exports.StylesGlobal = (0, styled_components_1.createGlobalStyle) `${exports.stylesGlobal}`;
+exports.stylesGlobal = "\n  body {\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: scroll;\n  }\n\n  body,\n  button,\n  input,\n  textarea,\n  select,\n  select:-webkit-autofill::first-line,\n  input:-webkit-autofill::first-line {\n    font-family: var(--font), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n      Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n      sans-serif;\n    font-size: var(--fontSize);\n  }\n\n  html {\n    box-sizing: border-box;\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: inherit;\n    -webkit-tap-highlight-color: transparent;\n  }\n";
+exports.StylesGlobal = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["", ""], ["", ""])), exports.stylesGlobal);
+var templateObject_1;

package/node/styles/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Body"), exports);
 tslib_1.__exportStar(require("./Global"), exports);
 tslib_1.__exportStar(require("./media"), exports);

package/node/styles/media.js

@@ -2,21 +2,21 @@
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateMediaQueries = exports.useMedia = exports.only = exports.between = exports.down = exports.up = exports.max = exports.min = void 0;
-const react_1 = require("react");
-const theme_1 = require("./theme");
-_a = generateMediaQueries(theme_1.breakpoints), exports.min = _a.min, exports.max = _a.max, exports.up = _a.up, exports.down = _a.down, exports.between = _a.between, exports.only = _a.only;
+var react_1 = require("react");
+var theme_1 = require("./theme");
+exports.min = (_a = generateMediaQueries(theme_1.breakpoints), _a.min), exports.max = _a.max, exports.up = _a.up, exports.down = _a.down, exports.between = _a.between, exports.only = _a.only;
 function useMedia(media) {
-    const { breakpoints } = (0, theme_1.useTheme)();
-    const [matches, setMatches] = (0, react_1.useState)(false);
-    const [direction = "min", breakpoint] = media.split(":");
-    let px = breakpoints[breakpoint];
+    var breakpoints = (0, theme_1.useTheme)().breakpoints;
+    var _a = (0, react_1.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 px = breakpoints[breakpoint];
     if (direction === "max") {
         px = px - 0.02;
     }
-    const query = `(${direction}-width: ${px}px)`;
-    (0, react_1.useEffect)(() => {
-        const mq = window.matchMedia(query);
-        const handleChange = (event) => {
+    var query = "(".concat(direction, "-width: ").concat(px, "px)");
+    (0, react_1.useEffect)(function () {
+        var mq = window.matchMedia(query);
+        var handleChange = function (event) {
             setMatches(event.matches);
         };
         setMatches(mq.matches);
@@ -26,12 +26,12 @@ function useMedia(media) {
             // Update the state whenever the media query match state changes
             mq.addListener(handleChange);
             // Clean up on unmount and if the query changes
-            return () => {
+            return function () {
                 mq.removeListener(handleChange);
             };
         }
         mq.addEventListener("change", handleChange);
-        return () => {
+        return function () {
             mq.removeEventListener("change", handleChange);
         };
     }, [query]);
@@ -88,13 +88,13 @@ exports.useMedia = useMedia;
  * ```
  */
 function generateMediaQueries(breakpoints) {
-    const temp = Object.keys(breakpoints).map((key) => {
-        const br = key;
+    var temp = Object.keys(breakpoints).map(function (key) {
+        var br = key;
         return [br, breakpoints[br]];
     });
-    const sortedKeys = temp.sort((a, b) => a[1] - b[1]).map((item) => item[0]);
-    const getNext = (breakpoint) => {
-        const index = sortedKeys.indexOf(breakpoint);
+    var sortedKeys = temp.sort(function (a, b) { return a[1] - b[1]; }).map(function (item) { return item[0]; });
+    var getNext = function (breakpoint) {
+        var index = sortedKeys.indexOf(breakpoint);
         return sortedKeys[index + 1];
     };
     /**
@@ -103,54 +103,58 @@ function generateMediaQueries(breakpoints) {
      * For ease of use this can be used both as a function `min("md")` and as an
      * object literal `min.md`.
      */ // @ts-expect-error FIXME: at some point
-    const min = (br) => `@media (min-width: ${breakpoints[br]}px)`;
+    var min = function (br) {
+        return "@media (min-width: ".concat(breakpoints[br], "px)");
+    };
     /**
      * It behaves the same as `@media (max-width: ${value}px)`
      * where value is the given breakpoint value.
      * For ease of use this can be used both as a function `max("md")` and as an
      * object literal `max.md`.
      */ // @ts-expect-error FIXME: at some point
-    const max = (br) => `@media (max-width: ${breakpoints[br] - 0.02}px)`;
-    for (const br in breakpoints) {
-        const _br = br;
-        min[_br] = `@media (min-width: ${breakpoints[_br]}px)`;
-        max[_br] = `@media (max-width: ${breakpoints[_br] - 0.02}px)`;
+    var max = function (br) {
+        return "@media (max-width: ".concat(breakpoints[br] - 0.02, "px)");
+    };
+    for (var br in breakpoints) {
+        var _br = br;
+        min[_br] = "@media (min-width: ".concat(breakpoints[_br], "px)");
+        max[_br] = "@media (max-width: ".concat(breakpoints[_br] - 0.02, "px)");
     }
     /**
      * It behaves the same as `min`
      * @inheritdoc {max}
      */
-    const up = min;
+    var up = min;
     /**
      * It behaves similarly to `max` but you will use the "next" breakpoint,
      * specifying CSS that will apply from the given breakpoint and down.
      */
-    const down = (br) => {
-        const brNext = getNext(br);
+    var down = function (br) {
+        var brNext = getNext(br);
         // TODO: if br does not exists otherwise throw Error
-        return brNext && `@media (max-width: ${breakpoints[brNext] - 0.02}px)`;
+        return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
     };
     /**
      * Media query between the two given breakpoints
      */
-    const between = (br1, br2) => {
-        return `@media (min-width: ${breakpoints[br1]}px) and (max-width: ${breakpoints[br2] - 0.02}px)`;
+    var between = function (br1, br2) {
+        return "@media (min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)");
     };
     /**
      * Media query to apply from the given breakpoint until the next, just for its
      * full range
      */
-    const only = (br) => {
-        const brNext = getNext(br);
+    var only = function (br) {
+        var brNext = getNext(br);
         return brNext ? between(br, brNext) : min(br);
     };
     return {
-        min,
-        max,
-        up,
-        down,
-        between,
-        only,
+        min: min,
+        max: max,
+        up: up,
+        down: down,
+        between: between,
+        only: only,
     };
 }
 exports.generateMediaQueries = generateMediaQueries;

package/node/styles/spacing.js

@@ -1,30 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.spacingVertical = exports.spacingBottom = exports.spacingTop = exports.spacing = void 0;
-function _spacing(theme, size = "md", factor = 1, property = "padding", direction = "top", devices = ["mobile", "tablet", "desktop"]) {
-    const { breakpoints, devices: DEVICES, spaces: SPACES } = theme;
-    let css = "";
-    const prop = `${property}-${direction}`;
+function _spacing(theme, size, factor, property, direction, devices) {
+    if (size === void 0) { size = "md"; }
+    if (factor === void 0) { factor = 1; }
+    if (property === void 0) { property = "padding"; }
+    if (direction === void 0) { direction = "top"; }
+    if (devices === void 0) { devices = ["mobile", "tablet", "desktop"]; }
+    var breakpoints = theme.breakpoints, DEVICES = theme.devices, SPACES = theme.spaces;
+    var css = "";
+    var prop = "".concat(property, "-").concat(direction);
     if (!devices.length || devices[0] === "mobile") {
-        css += `@media(max-width: ${breakpoints[DEVICES.mobile]}px){
-        ${prop}: ${SPACES["mobile"][size] * factor}px;
-      }`;
+        css += "@media(max-width: ".concat(breakpoints[DEVICES.mobile], "px){\n        ").concat(prop, ": ").concat(SPACES["mobile"][size] * factor, "px;\n      }");
     }
     else {
-        for (let index = 0; index < devices.length; index++) {
-            const device = devices[index];
+        for (var index = 0; index < devices.length; index++) {
+            var device = devices[index];
             if (device === "mobile") {
-                css += `${prop}: ${SPACES[device][size] * factor}px;`;
+                css += "".concat(prop, ": ").concat(SPACES[device][size] * factor, "px;");
             }
             else if (device === "tablet") {
-                css += `@media(min-width: ${breakpoints[DEVICES.tablet]}px){
-          ${prop}: ${SPACES["tablet"][size] * factor}px;
-        }`;
+                css += "@media(min-width: ".concat(breakpoints[DEVICES.tablet], "px){\n          ").concat(prop, ": ").concat(SPACES["tablet"][size] * factor, "px;\n        }");
             }
             else if (device === "desktop") {
-                css += `@media(min-width: ${breakpoints[DEVICES.desktop]}px){
-          ${prop}: ${SPACES["desktop"][size] * factor}px;
-        }`;
+                css += "@media(min-width: ".concat(breakpoints[DEVICES.desktop], "px){\n          ").concat(prop, ": ").concat(SPACES["desktop"][size] * factor, "px;\n        }");
             }
         }
     }

package/node/styles/styled.js

@@ -2,30 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stateFocus = exports.invisible = exports.ellipsis = exports.centered = exports.overlay = exports.inset0 = exports.colStretch = void 0;
 function colStretch(direction, bg) {
-    return `
-    background: ${bg};
-    position: relative;
-
-    &:before{
-      z-index: -1;
-      content: '';
-      position: absolute;
-      right: ${direction === "left" ? "100%" : "-100vw"};
-      left: ${direction === "right" ? "100%" : "-100vw"};
-      top: 0;
-      bottom: 0;
-      background: ${bg};
-    }
-  `;
+    return "\n    background: ".concat(bg, ";\n    position: relative;\n\n    &:before{\n      z-index: -1;\n      content: '';\n      position: absolute;\n      right: ").concat(direction === "left" ? "100%" : "-100vw", ";\n      left: ").concat(direction === "right" ? "100%" : "-100vw", ";\n      top: 0;\n      bottom: 0;\n      background: ").concat(bg, ";\n    }\n  ");
 }
 exports.colStretch = colStretch;
 /** @see https://caniuse.com/?search=inset */
-exports.inset0 = `top:0;left:0;right:0;bottom:0;`;
-exports.overlay = `position: absolute;${exports.inset0}`;
-exports.centered = `display: flex;align-items: center;justify-content: center;`;
-exports.ellipsis = `overflow: hidden;text-overflow: ellipsis;white-space: nowrap;`;
+exports.inset0 = "top:0;left:0;right:0;bottom:0;";
+exports.overlay = "position: absolute;".concat(exports.inset0);
+exports.centered = "display: flex;align-items: center;justify-content: center;";
+exports.ellipsis = "overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
 /**
  * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
  */
-exports.invisible = `border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;`;
-exports.stateFocus = `outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);`;
+exports.invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
+exports.stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";

package/node/styles/theme--vanilla.js

@@ -1,27 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeVanillaProvider = exports.ThemeVanillaContext = exports.getInitialThemeFromClient = exports.getInitialThemeFromRequest = exports.THEME_DEFAULT = exports.THEME_KEY = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const utils_1 = require("@koine/utils");
-const react_use_1 = require("react-use");
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var utils_1 = require("@koine/utils");
+var hooks_1 = require("../hooks");
 exports.THEME_KEY = "theme";
 exports.THEME_DEFAULT = "light";
-const getInitialThemeFromRequest = (cookie) => {
+var getInitialThemeFromRequest = function (cookie) {
     if (cookie) {
-        const parsed = (0, utils_1.parseCookie)(cookie);
-        return parsed?.theme;
+        var parsed = (0, utils_1.parseCookie)(cookie);
+        return parsed === null || parsed === void 0 ? void 0 : parsed.theme;
     }
     return exports.THEME_DEFAULT;
 };
 exports.getInitialThemeFromRequest = getInitialThemeFromRequest;
-const getInitialThemeFromClient = () => {
+var getInitialThemeFromClient = function () {
     if (typeof window !== "undefined" && window.localStorage) {
-        const storedPrefs = window.localStorage.getItem(exports.THEME_KEY);
+        var storedPrefs = window.localStorage.getItem(exports.THEME_KEY);
         if (typeof storedPrefs === "string") {
             return storedPrefs;
         }
-        const userMedia = window.matchMedia("(prefers-color-scheme: dark)");
+        var userMedia = window.matchMedia("(prefers-color-scheme: dark)");
         if (userMedia.matches) {
             return "dark";
         }
@@ -33,27 +34,28 @@ exports.ThemeVanillaContext = (0, react_1.createContext)({
     theme: "light",
     setTheme: undefined,
 });
-const ThemeVanillaProvider = ({ initialTheme, children, }) => {
-    const [theme, setTheme] = (0, react_1.useState)(initialTheme);
-    const rawSetTheme = (rawTheme) => {
+var ThemeVanillaProvider = function (_a) {
+    var initialTheme = _a.initialTheme, children = _a.children;
+    var _b = (0, react_1.useState)(initialTheme), theme = _b[0], setTheme = _b[1];
+    var rawSetTheme = function (rawTheme) {
         if (!rawTheme || !utils_1.isBrowser) {
             return;
         }
-        const root = window.document.documentElement;
-        const isDark = rawTheme === "dark";
+        var root = window.document.documentElement;
+        var isDark = rawTheme === "dark";
         root.classList.remove(isDark ? "light" : "dark");
         root.classList.add(rawTheme);
         localStorage.setItem(exports.THEME_KEY, rawTheme);
         (0, utils_1.setCookie)(exports.THEME_KEY, rawTheme);
     };
-    (0, react_use_1.useMount)(() => {
-        const theme = (0, exports.getInitialThemeFromClient)();
+    (0, hooks_1.useMount)(function () {
+        var theme = (0, exports.getInitialThemeFromClient)();
         setTheme(theme);
         rawSetTheme(theme);
     });
-    (0, react_use_1.useUpdateEffect)(() => {
+    (0, hooks_1.useUpdateEffect)(function () {
         rawSetTheme(theme);
     }, [theme]);
-    return ((0, jsx_runtime_1.jsx)(exports.ThemeVanillaContext.Provider, { value: { theme, setTheme }, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.ThemeVanillaContext.Provider, tslib_1.__assign({ value: { theme: theme, setTheme: setTheme } }, { children: children })));
 };
 exports.ThemeVanillaProvider = ThemeVanillaProvider;

package/node/styles/theme.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTheme = exports.createTheme = exports.breakpoints = void 0;
-const styled_components_1 = require("styled-components");
-const DEFAULT_BREAKPOINTS = {
+var tslib_1 = require("tslib");
+var styled_components_1 = require("styled-components");
+var DEFAULT_BREAKPOINTS = {
     xs: 0,
     sm: 440,
     md: 768,
@@ -22,13 +23,13 @@ const DEFAULT_BREAKPOINTS = {
  * ```
  */
 exports.breakpoints = process.env["BREAKPOINTS"]
-    ? process.env["BREAKPOINTS"].split(",").reduce((map, pair) => {
-        const [key, value] = pair.split(":");
+    ? process.env["BREAKPOINTS"].split(",").reduce(function (map, pair) {
+        var _a = pair.split(":"), key = _a[0], value = _a[1];
         map[key] = parseFloat(value);
         return map;
     }, {})
     : DEFAULT_BREAKPOINTS;
-const themeDefault = {
+var themeDefault = {
     maxWidth: exports.breakpoints.xxl,
     breakpoints: exports.breakpoints,
     devices: {
@@ -37,9 +38,8 @@ const themeDefault = {
         desktop: "lg",
     },
 };
-const createTheme = (options) => ({
-    ...themeDefault,
-    ...options,
-});
+var createTheme = function (options) {
+    return (tslib_1.__assign(tslib_1.__assign({}, themeDefault), options));
+};
 exports.createTheme = createTheme;
 exports.useTheme = styled_components_1.useTheme;