@koine/react 2.0.0-beta.2 → 2.0.0-beta.200

package/sc/index.mjs

@@ -1,31 +0,0 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog } from "../Dialog/sc/bare";
-export { KoineForm } from "../Form/sc/bare";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-// export * from "../Select";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/sc/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.mjs",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/scm/index.d.ts

@@ -1,29 +0,0 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/sc/framer";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/scm/index.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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);
-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; } });
-// 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);
-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/scm/index.mjs

@@ -1,31 +0,0 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog } from "../Dialog/sc/framer";
-// export { KoineForm, type KoineFormProps} from "../Form/sc/framer";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-// export * from "../Select";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/scm/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.mjs",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/shared/index.d.ts

@@ -1,8 +0,0 @@
-export * from "../Calendar";
-export * from "../Dialog";
-export * from "../FaviconTags";
-export * from "../helpers";
-export * from "../hooks";
-export * from "../Meta";
-export * from "../NoJs";
-export * from "../types";

package/shared/index.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../Calendar"), exports);
-tslib_1.__exportStar(require("../Dialog"), exports);
-tslib_1.__exportStar(require("../FaviconTags"), 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/shared/index.mjs

@@ -1,8 +0,0 @@
-export * from "../Calendar";
-export * from "../Dialog";
-export * from "../FaviconTags";
-export * from "../helpers";
-export * from "../hooks";
-export * from "../Meta";
-export * from "../NoJs";
-export * from "../types";

package/shared/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.mjs",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/styles/Body.d.ts

@@ -1,10 +0,0 @@
-export declare const BodyRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-/**
- * If you have background graphics to overlap you might need to add:
- *
- * ```css
- * z-index: 1;
- * position: relative;
- * ```
- */
-export declare const BodyMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;

package/styles/Body.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BodyMain = exports.BodyRoot = void 0;
-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:
- *
- * ```css
- * z-index: 1;
- * position: relative;
- * ```
- */
-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/styles/Body.mjs

@@ -1,13 +0,0 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-export var BodyRoot = styled.div(templateObject_1 || (templateObject_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:
- *
- * ```css
- * z-index: 1;
- * position: relative;
- * ```
- */
-export var BodyMain = styled.main(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var templateObject_1, templateObject_2;

package/styles/Global.d.ts

@@ -1,15 +0,0 @@
-/**
- * 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/
- */
-export declare const 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";
-export declare const StylesGlobal: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/styles/Global.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StylesGlobal = exports.stylesGlobal = void 0;
-var tslib_1 = require("tslib");
-var 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 = "\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/styles/Global.mjs

@@ -1,18 +0,0 @@
-import { __makeTemplateObject } from "tslib";
-import { createGlobalStyle } from "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/
- */
-export var 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";
-export var StylesGlobal = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), stylesGlobal);
-var templateObject_1;

package/styles/index.d.ts

@@ -1,7 +0,0 @@
-export { BodyMain, BodyRoot } from "./Body";
-export { StylesGlobal, stylesGlobal } from "./Global";
-export { MediaDirection, MediaQuery, MediaQueryFunction, between, down, generateMediaQueries, max, min, only, up, useMedia, } from "./media";
-export { SpacingArgs, SpacingDevices, SpacingDirection, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize, spacing, spacingBottom, spacingTop, spacingVertical, } from "./spacing";
-export { colStretch, centered, ellipsis, inset0, invisible, overlay, stateFocus, } from "./styled";
-export { breakpoints, createTheme, useTheme, type Breakpoint, type Breakpoints, type Theme, type ThemeOptions, } from "./theme";
-export { THEME_DEFAULT, THEME_KEY, type ThemeCookie, ThemeVanillaContext, type ThemeVanillaContextType, ThemeVanillaProvider, type ThemeVanillaProviderProps, type ThemeVanillaValue, getInitialThemeFromClient, } from "./theme--vanilla";

package/styles/index.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInitialThemeFromClient = exports.ThemeVanillaProvider = exports.ThemeVanillaContext = exports.THEME_KEY = exports.THEME_DEFAULT = exports.useTheme = exports.createTheme = exports.breakpoints = exports.stateFocus = exports.overlay = exports.invisible = exports.inset0 = exports.ellipsis = exports.centered = exports.colStretch = exports.spacingVertical = exports.spacingTop = exports.spacingBottom = exports.spacing = exports.useMedia = exports.up = exports.only = exports.min = exports.max = exports.generateMediaQueries = exports.down = exports.between = exports.stylesGlobal = exports.StylesGlobal = exports.BodyRoot = exports.BodyMain = void 0;
-var Body_1 = require("./Body");
-Object.defineProperty(exports, "BodyMain", { enumerable: true, get: function () { return Body_1.BodyMain; } });
-Object.defineProperty(exports, "BodyRoot", { enumerable: true, get: function () { return Body_1.BodyRoot; } });
-var Global_1 = require("./Global");
-Object.defineProperty(exports, "StylesGlobal", { enumerable: true, get: function () { return Global_1.StylesGlobal; } });
-Object.defineProperty(exports, "stylesGlobal", { enumerable: true, get: function () { return Global_1.stylesGlobal; } });
-var media_1 = require("./media");
-Object.defineProperty(exports, "between", { enumerable: true, get: function () { return media_1.between; } });
-Object.defineProperty(exports, "down", { enumerable: true, get: function () { return media_1.down; } });
-Object.defineProperty(exports, "generateMediaQueries", { enumerable: true, get: function () { return media_1.generateMediaQueries; } });
-Object.defineProperty(exports, "max", { enumerable: true, get: function () { return media_1.max; } });
-Object.defineProperty(exports, "min", { enumerable: true, get: function () { return media_1.min; } });
-Object.defineProperty(exports, "only", { enumerable: true, get: function () { return media_1.only; } });
-Object.defineProperty(exports, "up", { enumerable: true, get: function () { return media_1.up; } });
-Object.defineProperty(exports, "useMedia", { enumerable: true, get: function () { return media_1.useMedia; } });
-var spacing_1 = require("./spacing");
-Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return spacing_1.spacing; } });
-Object.defineProperty(exports, "spacingBottom", { enumerable: true, get: function () { return spacing_1.spacingBottom; } });
-Object.defineProperty(exports, "spacingTop", { enumerable: true, get: function () { return spacing_1.spacingTop; } });
-Object.defineProperty(exports, "spacingVertical", { enumerable: true, get: function () { return spacing_1.spacingVertical; } });
-var styled_1 = require("./styled");
-Object.defineProperty(exports, "colStretch", { enumerable: true, get: function () { return styled_1.colStretch; } });
-Object.defineProperty(exports, "centered", { enumerable: true, get: function () { return styled_1.centered; } });
-Object.defineProperty(exports, "ellipsis", { enumerable: true, get: function () { return styled_1.ellipsis; } });
-Object.defineProperty(exports, "inset0", { enumerable: true, get: function () { return styled_1.inset0; } });
-Object.defineProperty(exports, "invisible", { enumerable: true, get: function () { return styled_1.invisible; } });
-Object.defineProperty(exports, "overlay", { enumerable: true, get: function () { return styled_1.overlay; } });
-Object.defineProperty(exports, "stateFocus", { enumerable: true, get: function () { return styled_1.stateFocus; } });
-var theme_1 = require("./theme");
-Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return theme_1.breakpoints; } });
-Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return theme_1.createTheme; } });
-Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_1.useTheme; } });
-var theme__vanilla_1 = require("./theme--vanilla");
-Object.defineProperty(exports, "THEME_DEFAULT", { enumerable: true, get: function () { return theme__vanilla_1.THEME_DEFAULT; } });
-Object.defineProperty(exports, "THEME_KEY", { enumerable: true, get: function () { return theme__vanilla_1.THEME_KEY; } });
-Object.defineProperty(exports, "ThemeVanillaContext", { enumerable: true, get: function () { return theme__vanilla_1.ThemeVanillaContext; } });
-Object.defineProperty(exports, "ThemeVanillaProvider", { enumerable: true, get: function () { return theme__vanilla_1.ThemeVanillaProvider; } });
-Object.defineProperty(exports, "getInitialThemeFromClient", { enumerable: true, get: function () { return theme__vanilla_1.getInitialThemeFromClient; } });

package/styles/index.mjs

@@ -1,7 +0,0 @@
-export { BodyMain, BodyRoot } from "./Body";
-export { StylesGlobal, stylesGlobal } from "./Global";
-export { between, down, generateMediaQueries, max, min, only, up, useMedia, } from "./media";
-export { spacing, spacingBottom, spacingTop, spacingVertical, } from "./spacing";
-export { colStretch, centered, ellipsis, inset0, invisible, overlay, stateFocus, } from "./styled";
-export { breakpoints, createTheme, useTheme, } from "./theme";
-export { THEME_DEFAULT, THEME_KEY, ThemeVanillaContext, ThemeVanillaProvider, getInitialThemeFromClient, } from "./theme--vanilla";

package/styles/media.d.ts

@@ -1,67 +0,0 @@
-import { Breakpoint, Breakpoints } from "./theme";
-export declare const min: MediaQueryFunction, max: MediaQueryFunction, up: MediaQueryFunction, down: (br: Breakpoint) => string, between: (br1: Breakpoint, br2: Breakpoint) => string, only: (br: Breakpoint) => string;
-export type MediaDirection = "min" | "max";
-export type MediaQuery = `${MediaDirection}:${Breakpoint}`;
-export type MediaQueryFunction = {
-    [Breakpoint in keyof Breakpoints]: string;
-} & {
-    (breakpoint: Breakpoint): string;
-};
-export declare function useMedia(media: MediaQuery): boolean;
-/**
- * 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) {}
- * ```
- */
-export declare function generateMediaQueries(breakpoints: Breakpoints): {
-    min: MediaQueryFunction;
-    max: MediaQueryFunction;
-    up: MediaQueryFunction;
-    down: (br: Breakpoint) => string;
-    between: (br1: Breakpoint, br2: Breakpoint) => string;
-    only: (br: Breakpoint) => string;
-};

package/styles/media.js

@@ -1,161 +0,0 @@
-"use strict";
-/// TODO:FIXME: this should use code from `useMqWidthCreator`
-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;
-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) {
-    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;
-    }
-    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);
-        // 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 function () {
-                mq.removeListener(handleChange);
-            };
-        }
-        mq.addEventListener("change", handleChange);
-        return function () {
-            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) {
-    var temp = Object.keys(breakpoints).map(function (key) {
-        var br = key;
-        return [br, breakpoints[br]];
-    });
-    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];
-    };
-    /**
-     * 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
-    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
-    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}
-     */
-    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.
-     */
-    var down = function (br) {
-        var brNext = getNext(br);
-        // TODO: if br does not exists otherwise throw Error
-        return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
-    };
-    /**
-     * Media query between the two given breakpoints
-     */
-    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
-     */
-    var only = function (br) {
-        var brNext = getNext(br);
-        return brNext ? between(br, brNext) : min(br);
-    };
-    return {
-        min: min,
-        max: max,
-        up: up,
-        down: down,
-        between: between,
-        only: only,
-    };
-}
-exports.generateMediaQueries = generateMediaQueries;