@koine/react 1.0.9 → 1.0.10

package/node/hooks/useTraceUpdate.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTraceUpdate = void 0;
-const 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]) => {
-            if (prev.current[k] !== v) {
-                // @ts-expect-error Does not matter here...
-                ps[k] = [prev.current[k], v];
-            }
-            return ps;
-        }, {});
-        if (Object.keys(changedProps).length > 0) {
-            console.log("Changed props:", changedProps);
-        }
-        prev.current = props;
-    });
-}
-exports.useTraceUpdate = useTraceUpdate;

package/node/hooks/useWindowSize.js

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

package/node/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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";
-// export * as sc from "./sc";
-// export * as tw from "./tw";

package/node/m/MotionProvider.js

@@ -1,41 +0,0 @@
-"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");
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */
-const MotionProvider = ({ features, children }) => {
-    return (0, jsx_runtime_1.jsx)(framer_motion_1.LazyMotion, { features: features, children: children });
-};
-exports.MotionProvider = MotionProvider;

package/node/m/index.js

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

package/node/m/lite.js

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

package/node/m/max.js

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

package/node/sc/index.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../shared"), exports);
-tslib_1.__exportStar(require("../Alert"), exports);
-tslib_1.__exportStar(require("../Animations"), exports);
-tslib_1.__exportStar(require("../Autocomplete"), exports);
-tslib_1.__exportStar(require("../Bg"), exports);
-tslib_1.__exportStar(require("../Breadcrumbs"), exports);
-tslib_1.__exportStar(require("../Buttons"), exports);
-tslib_1.__exportStar(require("../Carousel"), exports);
-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; } });
-tslib_1.__exportStar(require("../Forms"), exports);
-tslib_1.__exportStar(require("../Grid"), exports);
-tslib_1.__exportStar(require("../Hamburger"), exports);
-tslib_1.__exportStar(require("../Header"), exports);
-tslib_1.__exportStar(require("../Hidden"), exports);
-tslib_1.__exportStar(require("../Img"), exports);
-tslib_1.__exportStar(require("../Link"), exports);
-tslib_1.__exportStar(require("../MenuItem"), exports);
-tslib_1.__exportStar(require("../Pagination"), exports);
-tslib_1.__exportStar(require("../Pill"), exports);
-tslib_1.__exportStar(require("../Progress"), exports);
-tslib_1.__exportStar(require("../Rating"), exports);
-// export * from "../Select";
-tslib_1.__exportStar(require("../Sidebar"), exports);
-tslib_1.__exportStar(require("../Spacing"), exports);
-tslib_1.__exportStar(require("../Sticky"), exports);
-tslib_1.__exportStar(require("../styles"), exports);
-tslib_1.__exportStar(require("../Tabs"), exports);
-tslib_1.__exportStar(require("../Typography"), exports);

package/node/scm/index.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../shared"), exports);
-tslib_1.__exportStar(require("../Alert"), exports);
-tslib_1.__exportStar(require("../Animations"), exports);
-tslib_1.__exportStar(require("../Autocomplete"), exports);
-tslib_1.__exportStar(require("../Bg"), exports);
-tslib_1.__exportStar(require("../Breadcrumbs"), exports);
-tslib_1.__exportStar(require("../Buttons"), exports);
-tslib_1.__exportStar(require("../Carousel"), exports);
-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; } });
-tslib_1.__exportStar(require("../Forms"), exports);
-tslib_1.__exportStar(require("../Grid"), exports);
-tslib_1.__exportStar(require("../Hamburger"), exports);
-tslib_1.__exportStar(require("../Header"), exports);
-tslib_1.__exportStar(require("../Hidden"), exports);
-tslib_1.__exportStar(require("../Img"), exports);
-tslib_1.__exportStar(require("../Link"), exports);
-tslib_1.__exportStar(require("../MenuItem"), exports);
-tslib_1.__exportStar(require("../Pagination"), exports);
-tslib_1.__exportStar(require("../Pill"), exports);
-tslib_1.__exportStar(require("../Progress"), exports);
-tslib_1.__exportStar(require("../Rating"), exports);
-// export * from "../Select";
-tslib_1.__exportStar(require("../Sidebar"), exports);
-tslib_1.__exportStar(require("../Spacing"), exports);
-tslib_1.__exportStar(require("../Sticky"), exports);
-tslib_1.__exportStar(require("../styles"), exports);
-tslib_1.__exportStar(require("../Tabs"), exports);
-tslib_1.__exportStar(require("../Typography"), exports);

package/node/shared/index.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../Calendar"), exports);
-tslib_1.__exportStar(require("../Dialog"), exports);
-tslib_1.__exportStar(require("../Favicon"), exports);
-tslib_1.__exportStar(require("../helpers"), exports);
-tslib_1.__exportStar(require("../hooks"), exports);
-tslib_1.__exportStar(require("../Meta"), exports);
-tslib_1.__exportStar(require("../NoJs"), exports);
-tslib_1.__exportStar(require("../types"), exports);

package/node/styles/Body.js

@@ -1,21 +0,0 @@
-"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;
-`;
-/**
- * If you have background graphics to overlap you might need to add:
- *
- * ```css
- * z-index: 1;
- * position: relative;
- * ```
- */
-exports.BodyMain = styled_components_1.default.main `
-  flex: 1;
-`;

package/node/styles/Global.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StylesGlobal = exports.stylesGlobal = void 0;
-const styled_components_1 = require("styled-components");
-/**
- * App global style
- *
- * For examples of what to do here take a look at [Bootstrap's reset](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss)
- * and similar.
- *
- * What we do here:
- * - set the base font family on all possible elements including placeholders prevent Chrome showing a standard font when using the autofill feature
- *  - @see https://stackoverflow.com/a/60987373/1938970
- * - set the base font size on all possible elements to prevent weird zooming on input fields on iPhone iOS devices.
- *  - @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}`;

package/node/styles/index.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Body"), exports);
-tslib_1.__exportStar(require("./Global"), exports);
-tslib_1.__exportStar(require("./media"), exports);
-tslib_1.__exportStar(require("./spacing"), exports);
-tslib_1.__exportStar(require("./styled"), exports);
-tslib_1.__exportStar(require("./theme"), exports);
-tslib_1.__exportStar(require("./theme--vanilla"), exports);

package/node/styles/media.js

@@ -1,156 +0,0 @@
-"use strict";
-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;
-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];
-    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) => {
-            setMatches(event.matches);
-        };
-        setMatches(mq.matches);
-        // Safari < 14 can't use addEventListener on a MediaQueryList
-        // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-        if (!mq.addEventListener) {
-            // Update the state whenever the media query match state changes
-            mq.addListener(handleChange);
-            // Clean up on unmount and if the query changes
-            return () => {
-                mq.removeListener(handleChange);
-            };
-        }
-        mq.addEventListener("change", handleChange);
-        return () => {
-            mq.removeEventListener("change", handleChange);
-        };
-    }, [query]);
-    return matches;
-}
-exports.useMedia = useMedia;
-/**
- * Generate media queries helpers
- *
- * Usage:
- * ```jsx
- * import { generateMediaQueries } from "@koine/react";
- *
- * export const breakpoints = {
- *   xs: 0,
- *   sm: 440,
- *   md: 768,
- *   lg: 1024,
- *   xl: 1368,
- *   xxl: 1690,
- * } as const;
- *
- * export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
- * ```
- *
- * Consider the following syntaxes, using normal CSS is just slightly
- * longer but it aovid js imports, reduce the js overhead and improve CSS
- * highlighting in the editor.
- *
- * Even if we would reduce the function signature to the bare minimum the advantage
- * in terms of typing would not be much, also loosing in readability.
- *
- * ```css
- * // but unfortunately this does not work
- * @media (min-width: var(--b-sm)) {}
- * @media (min-width: 480px) {}
- *
- * ${media("min", "sm")} {}
- * ${mediaMin("sm")} {}
- * ${min.sm} {}
- * ${p => p.theme.min.sm}``
- * ```
- *
- * Related projects:
- * @see https://github.com/mg901/styled-breakpoints
- * @see https://github.com/morajabi/styled-media-query
- *
- * @see https://www.w3.org/TR/mediaqueries-5/#custom-mq The spec would allow for
- * something like this syntax
- *
- * ```css
- * @custom-media --narrow-window (max-width: 30em);
- * @media (--narrow-window) {}
- * ```
- */
-function generateMediaQueries(breakpoints) {
-    const temp = Object.keys(breakpoints).map((key) => {
-        const 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);
-        return sortedKeys[index + 1];
-    };
-    /**
-     * It behaves the same as `@media (min-width: ${value}px)`
-     * where value is the given breakpoint value.
-     * 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)`;
-    /**
-     * 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)`;
-    }
-    /**
-     * It behaves the same as `min`
-     * @inheritdoc {max}
-     */
-    const 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);
-        // TODO: if br does not exists otherwise throw Error
-        return brNext && `@media (max-width: ${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)`;
-    };
-    /**
-     * Media query to apply from the given breakpoint until the next, just for its
-     * full range
-     */
-    const only = (br) => {
-        const brNext = getNext(br);
-        return brNext ? between(br, brNext) : min(br);
-    };
-    return {
-        min,
-        max,
-        up,
-        down,
-        between,
-        only,
-    };
-}
-exports.generateMediaQueries = generateMediaQueries;

package/node/styles/spacing.js

@@ -1,53 +0,0 @@
-"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}`;
-    if (!devices.length || devices[0] === "mobile") {
-        css += `@media(max-width: ${breakpoints[DEVICES.mobile]}px){
-        ${prop}: ${SPACES["mobile"][size] * factor}px;
-      }`;
-    }
-    else {
-        for (let index = 0; index < devices.length; index++) {
-            const device = devices[index];
-            if (device === "mobile") {
-                css += `${prop}: ${SPACES[device][size] * factor}px;`;
-            }
-            else if (device === "tablet") {
-                css += `@media(min-width: ${breakpoints[DEVICES.tablet]}px){
-          ${prop}: ${SPACES["tablet"][size] * factor}px;
-        }`;
-            }
-            else if (device === "desktop") {
-                css += `@media(min-width: ${breakpoints[DEVICES.desktop]}px){
-          ${prop}: ${SPACES["desktop"][size] * factor}px;
-        }`;
-            }
-        }
-    }
-    return css;
-}
-function spacing(size, factor, property, direction, devices) {
-    if (direction === "vertical") {
-        return (_spacing(this, size, factor, property, "top", devices) +
-            _spacing(this, size, factor, property, "bottom", devices));
-    }
-    return _spacing(this, size, factor, property, direction, devices);
-}
-exports.spacing = spacing;
-function spacingTop(size, factor, property, devices) {
-    return _spacing(this, size, factor, property, "top", devices);
-}
-exports.spacingTop = spacingTop;
-function spacingBottom(size, factor, property, devices) {
-    return _spacing(this, size, factor, property, "bottom", devices);
-}
-exports.spacingBottom = spacingBottom;
-function spacingVertical(size, factor, property, devices) {
-    return (_spacing(this, size, factor, property, "top", devices) +
-        _spacing(this, size, factor, property, "bottom", devices));
-}
-exports.spacingVertical = spacingVertical;

package/node/styles/styled.js

@@ -1,31 +0,0 @@
-"use strict";
-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};
-    }
-  `;
-}
-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;`;
-/**
- * @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);`;

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

@@ -1,59 +0,0 @@
-"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");
-exports.THEME_KEY = "theme";
-exports.THEME_DEFAULT = "light";
-const getInitialThemeFromRequest = (cookie) => {
-    if (cookie) {
-        const parsed = (0, utils_1.parseCookie)(cookie);
-        return parsed?.theme;
-    }
-    return exports.THEME_DEFAULT;
-};
-exports.getInitialThemeFromRequest = getInitialThemeFromRequest;
-const getInitialThemeFromClient = () => {
-    if (typeof window !== "undefined" && window.localStorage) {
-        const storedPrefs = window.localStorage.getItem(exports.THEME_KEY);
-        if (typeof storedPrefs === "string") {
-            return storedPrefs;
-        }
-        const userMedia = window.matchMedia("(prefers-color-scheme: dark)");
-        if (userMedia.matches) {
-            return "dark";
-        }
-    }
-    return exports.THEME_DEFAULT;
-};
-exports.getInitialThemeFromClient = getInitialThemeFromClient;
-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) => {
-        if (!rawTheme || !utils_1.isBrowser) {
-            return;
-        }
-        const root = window.document.documentElement;
-        const 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)();
-        setTheme(theme);
-        rawSetTheme(theme);
-    });
-    (0, react_use_1.useUpdateEffect)(() => {
-        rawSetTheme(theme);
-    }, [theme]);
-    return ((0, jsx_runtime_1.jsx)(exports.ThemeVanillaContext.Provider, { value: { theme, setTheme }, children: children }));
-};
-exports.ThemeVanillaProvider = ThemeVanillaProvider;

package/node/styles/theme.js

@@ -1,45 +0,0 @@
-"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 = {
-    xs: 0,
-    sm: 440,
-    md: 768,
-    lg: 1024,
-    xl: 1368,
-    xxl: 1690,
-};
-/**
- * You can override the default breakpoints through the .env variable
- *
- * FIXME: find a better way to configure it, the problem is that we use the media
- * queries within this pre-compiled library and thrught it was better to avoid
- * using theming props for a more ergonomic usage.
- *
- * ```.env
- * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
- * ```
- */
-exports.breakpoints = process.env["BREAKPOINTS"]
-    ? process.env["BREAKPOINTS"].split(",").reduce((map, pair) => {
-        const [key, value] = pair.split(":");
-        map[key] = parseFloat(value);
-        return map;
-    }, {})
-    : DEFAULT_BREAKPOINTS;
-const themeDefault = {
-    maxWidth: exports.breakpoints.xxl,
-    breakpoints: exports.breakpoints,
-    devices: {
-        mobile: "sm",
-        tablet: "md",
-        desktop: "lg",
-    },
-};
-const createTheme = (options) => ({
-    ...themeDefault,
-    ...options,
-});
-exports.createTheme = createTheme;
-exports.useTheme = styled_components_1.useTheme;