@koine/react 2.0.0-beta.8 → 2.0.0-beta.80

package/css/index.mjs

@@ -1,30 +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/css/bare"; // export * from "../Form";
- // 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/helpers/classed.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-type ClassedAugmentedProps<Props> = Props & {
-    className?: string;
-    ref?: React.Ref<any>;
-};
-type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? React.HTMLProps<Component> & ClassedAugmentedProps<Props> : ClassedAugmentedProps<Props>;
-/**
- * This utility allows to extend a component a là `styled-components` but for
- * a className based styling solution like Tailwind,
- *
- * It also plays nicely with tailwind intellisense:
- * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
- *
- * For references about tagged functions:
- * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
- * - https://makersden.io/blog/reverse-engineering-styled-components
- * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
- * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
- *
- * Similar projects:
- * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
- *
- * Discussions and Q/A:
- * - https://stackoverflow.com/q/73055695/1938970
- */
-export declare function classed<Props, Component extends React.ElementType = any>(component: Component): (strings: TemplateStringsArray, ...args: string[] | ((props: Props) => string)[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ClassedFinalProps<Props, Component>> & React.RefAttributes<Component>>;
-export default classed;

package/helpers/classed.js

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    classed: function() {
-        return classed;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-function classed(component) {
-    // @ts-expect-error nevermind for now...
-    const type = component.type || component;
-    return function(strings, ...args) {
-        const WrappedComponent = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
-            const argResolved = args.map((arg, index)=>{
-                let result = "";
-                if (typeof arg === "function") {
-                    result = arg(props);
-                } else if (typeof arg !== "undefined") {
-                    result = arg.toString();
-                }
-                return strings[index] + result;
-            }).join("");
-            const isNativeHtmlElement = typeof type === "string";
-            const propsToForward = isNativeHtmlElement ? {} : props;
-            if (isNativeHtmlElement) {
-                for(const key in props){
-                    // like styled-components `transient` props
-                    if (!key.startsWith("$")) {
-                        // FIXME: for react 18 we need: @ts-expect-error
-                        propsToForward[key] = props[key];
-                    }
-                }
-            }
-            // get the tagged function string outcome
-            let className = argResolved || strings[0];
-            // check if we need to clean it or not from the optional structure `< class="..."`
-            className = className.match(/class="([^"]*)/)?.[1] || className;
-            // add the custom classes from props
-            className += props?.className ? " " + props?.className : "";
-            return /*#__PURE__*/ (0, _react.createElement)(type, {
-                // ...props,
-                ...propsToForward,
-                // only add ot props if it is not an empty string
-                className: className || undefined,
-                // add ref to props
-                ref
-            });
-        });
-        // FIXME: not sure if this is needed
-        // WrappedComponent.displayName = type.toString();
-        return WrappedComponent; // as unknown as React.ReactElement<typeof props>;
-    };
-}
-const _default = classed;

package/helpers/classed.mjs

@@ -1,65 +0,0 @@
-import React, { createElement, forwardRef } from "react";
-/**
- * This utility allows to extend a component a là `styled-components` but for
- * a className based styling solution like Tailwind,
- *
- * It also plays nicely with tailwind intellisense:
- * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
- *
- * For references about tagged functions:
- * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
- * - https://makersden.io/blog/reverse-engineering-styled-components
- * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
- * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
- *
- * Similar projects:
- * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
- *
- * Discussions and Q/A:
- * - https://stackoverflow.com/q/73055695/1938970
- */ export function classed(component) {
-    // @ts-expect-error nevermind for now...
-    const type = component.type || component;
-    return function(strings, ...args) {
-        const WrappedComponent = /*#__PURE__*/ forwardRef(function(props, ref) {
-            const argResolved = args.map((arg, index)=>{
-                let result = "";
-                if (typeof arg === "function") {
-                    result = arg(props);
-                } else if (typeof arg !== "undefined") {
-                    result = arg.toString();
-                }
-                return strings[index] + result;
-            }).join("");
-            const isNativeHtmlElement = typeof type === "string";
-            const propsToForward = isNativeHtmlElement ? {} : props;
-            if (isNativeHtmlElement) {
-                for(const key in props){
-                    // like styled-components `transient` props
-                    if (!key.startsWith("$")) {
-                        // FIXME: for react 18 we need: @ts-expect-error
-                        propsToForward[key] = props[key];
-                    }
-                }
-            }
-            // get the tagged function string outcome
-            let className = argResolved || strings[0];
-            // check if we need to clean it or not from the optional structure `< class="..."`
-            className = className.match(/class="([^"]*)/)?.[1] || className;
-            // add the custom classes from props
-            className += props?.className ? " " + props?.className : "";
-            return /*#__PURE__*/ createElement(type, {
-                // ...props,
-                ...propsToForward,
-                // only add ot props if it is not an empty string
-                className: className || undefined,
-                // add ref to props
-                ref
-            });
-        });
-        // FIXME: not sure if this is needed
-        // WrappedComponent.displayName = type.toString();
-        return WrappedComponent; // as unknown as React.ReactElement<typeof props>;
-    };
-}
-export default classed;

package/helpers/classed.stories.js

@@ -1,140 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck These are just wip experiments, we stick to just `./classed.tsx`
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    default: function() {
-        return _default;
-    },
-    Playground: function() {
-        return Playground;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _classed = require("./classed");
-const Classed = (0, _classed.classed)("div")`< class="bg-red-400 ${(p)=>p.test === "0a" ? "py-3" : "px-3"}`;
-/**
- * Adapted (removed `classnames` dependency) from:
- * @see https://daily.dev/blog/my-tailwind-css-utility-function-for-creating-reusable-react-components-typescript-support
- *
- * See also [classname-hoc](https://www.npmjs.com/package/classname-hoc)
- */ function classedOriginal(type, ...className) {
-    return function(props) {
-        return /*#__PURE__*/ (0, _react.createElement)(type, {
-            ...props,
-            className: [
-                props?.className || ""
-            ].concat(className).join(" ")
-        });
-    };
-}
-const ClassedOriginal = classedOriginal("div", "bg-slate-800");
-function classedBind(props) {
-    // @ts-expect-error no time now
-    const classNameImpl = props.className ? " " + props.className : "";
-    // return <this className={this.props.className + classNameImpl} {...props} />;
-    return /*#__PURE__*/ (0, _react.createElement)(this.props.as || this.type, {
-        ...props,
-        className: this.props.className + classNameImpl
-    }, // @ts-expect-error no time now
-    props.children);
-}
-const ClassedBind = classedBind.bind(/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-    as: "h2",
-    className: "bg-slate-800"
-}));
-function classedDynamic(ComponentFn) {
-    return function(propsImplementation) {
-        const { props, type } = ComponentFn(propsImplementation);
-        const classNameDefault = props.className ? " " + props.className : "";
-        return /*#__PURE__*/ (0, _react.createElement)(props.as || type, {
-            ...props,
-            ...propsImplementation,
-            className: propsImplementation?.className + classNameDefault
-        });
-    };
-}
-const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        as: "h2",
-        className: "bg-slate-800"
-    }));
-const ClassedDynamicUsingProps = classedDynamic((p)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        as: "h2",
-        className: `bg-slate-800 ${p?.test === "3" ? "py-3" : "px-3"}`
-    });
-});
-// type ExtractComponent<ComponentString extends string> =
-//   ComponentString extends `<${infer ComponentName} class="${infer ClassNames}`
-//     ? { name: ComponentName; className: ClassNames }
-//     : { error: "Cannot parse Component string" };
-// type ExtractedComponent<T extends string> = ExtractComponent<T>;
-function classedTaggedStatic(value = "") {
-    // @ts-expect-error we rely on correct implementation and assume it always matches
-    const componentName = value.match(/<(.*?)\s/)[1];
-    // @ts-expect-error we rely on correct implementation and assume it always matches
-    const classDefault = value.match(/class="(.+)/)[1];
-    return function(props) {
-        // @ts-expect-error no time now
-        const classCustom = props?.className ? " " + props?.className : "";
-        return /*#__PURE__*/ (0, _react.createElement)(componentName, {
-            ...props,
-            className: classDefault + classCustom
-        });
-    }; /*  as Component; */ 
-}
-const ClassedTaggedStatic = classedTaggedStatic(`<div class="bg-teal-400`);
-const _default = {
-    // component: KoineDialog,
-    title: "Helpers/classed"
-};
-const Template = (args)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(Classed, {
-                className: "text-yellow-200",
-                test: "0a",
-                children: "Classed taller"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(Classed, {
-                className: "text-yellow-200",
-                test: "0b",
-                children: "Classed wider"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedOriginal, {
-                className: "text-white",
-                children: "ClassedOriginal"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedBind, {
-                className: "text-white",
-                children: "ClassedBind"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedDynamicIgnoringProps, {
-                className: "text-gray-300",
-                test: "2",
-                children: "ClassedDynamicIgnoringProps"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedDynamicUsingProps, {
-                className: "text-gray-600",
-                test: "3",
-                children: "ClassedDynamicUsingProps"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedTaggedStatic, {
-                className: "text-gray-600",
-                children: "ClassedTaggedStatic"
-            })
-        ]
-    });
-};
-const Playground = Template.bind({});
-Playground.args = {};

package/helpers/classed.stories.mjs

@@ -1,121 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck These are just wip experiments, we stick to just `./classed.tsx`
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { createElement } from "react";
-import { classed } from "./classed";
-const Classed = classed("div")`< class="bg-red-400 ${(p)=>p.test === "0a" ? "py-3" : "px-3"}`;
-/**
- * Adapted (removed `classnames` dependency) from:
- * @see https://daily.dev/blog/my-tailwind-css-utility-function-for-creating-reusable-react-components-typescript-support
- *
- * See also [classname-hoc](https://www.npmjs.com/package/classname-hoc)
- */ function classedOriginal(type, ...className) {
-    return function(props) {
-        return /*#__PURE__*/ createElement(type, {
-            ...props,
-            className: [
-                props?.className || ""
-            ].concat(className).join(" ")
-        });
-    };
-}
-const ClassedOriginal = classedOriginal("div", "bg-slate-800");
-function classedBind(props) {
-    // @ts-expect-error no time now
-    const classNameImpl = props.className ? " " + props.className : "";
-    // return <this className={this.props.className + classNameImpl} {...props} />;
-    return /*#__PURE__*/ createElement(this.props.as || this.type, {
-        ...props,
-        className: this.props.className + classNameImpl
-    }, // @ts-expect-error no time now
-    props.children);
-}
-const ClassedBind = classedBind.bind(/*#__PURE__*/ _jsx("div", {
-    as: "h2",
-    className: "bg-slate-800"
-}));
-function classedDynamic(ComponentFn) {
-    return function(propsImplementation) {
-        const { props, type } = ComponentFn(propsImplementation);
-        const classNameDefault = props.className ? " " + props.className : "";
-        return /*#__PURE__*/ createElement(props.as || type, {
-            ...props,
-            ...propsImplementation,
-            className: propsImplementation?.className + classNameDefault
-        });
-    };
-}
-const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ _jsx("div", {
-        as: "h2",
-        className: "bg-slate-800"
-    }));
-const ClassedDynamicUsingProps = classedDynamic((p)=>{
-    return /*#__PURE__*/ _jsx("div", {
-        as: "h2",
-        className: `bg-slate-800 ${p?.test === "3" ? "py-3" : "px-3"}`
-    });
-});
-// type ExtractComponent<ComponentString extends string> =
-//   ComponentString extends `<${infer ComponentName} class="${infer ClassNames}`
-//     ? { name: ComponentName; className: ClassNames }
-//     : { error: "Cannot parse Component string" };
-// type ExtractedComponent<T extends string> = ExtractComponent<T>;
-function classedTaggedStatic(value = "") {
-    // @ts-expect-error we rely on correct implementation and assume it always matches
-    const componentName = value.match(/<(.*?)\s/)[1];
-    // @ts-expect-error we rely on correct implementation and assume it always matches
-    const classDefault = value.match(/class="(.+)/)[1];
-    return function(props) {
-        // @ts-expect-error no time now
-        const classCustom = props?.className ? " " + props?.className : "";
-        return /*#__PURE__*/ createElement(componentName, {
-            ...props,
-            className: classDefault + classCustom
-        });
-    }; /*  as Component; */ 
-}
-const ClassedTaggedStatic = classedTaggedStatic(`<div class="bg-teal-400`);
-export default {
-    // component: KoineDialog,
-    title: "Helpers/classed"
-};
-const Template = (args)=>{
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(Classed, {
-                className: "text-yellow-200",
-                test: "0a",
-                children: "Classed taller"
-            }),
-            /*#__PURE__*/ _jsx(Classed, {
-                className: "text-yellow-200",
-                test: "0b",
-                children: "Classed wider"
-            }),
-            /*#__PURE__*/ _jsx(ClassedOriginal, {
-                className: "text-white",
-                children: "ClassedOriginal"
-            }),
-            /*#__PURE__*/ _jsx(ClassedBind, {
-                className: "text-white",
-                children: "ClassedBind"
-            }),
-            /*#__PURE__*/ _jsx(ClassedDynamicIgnoringProps, {
-                className: "text-gray-300",
-                test: "2",
-                children: "ClassedDynamicIgnoringProps"
-            }),
-            /*#__PURE__*/ _jsx(ClassedDynamicUsingProps, {
-                className: "text-gray-600",
-                test: "3",
-                children: "ClassedDynamicUsingProps"
-            }),
-            /*#__PURE__*/ _jsx(ClassedTaggedStatic, {
-                className: "text-gray-600",
-                children: "ClassedTaggedStatic"
-            })
-        ]
-    });
-};
-export const Playground = Template.bind({});
-Playground.args = {};

package/helpers/createUseMediaQueryWidth.d.ts

@@ -1,12 +0,0 @@
-import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils/getMediaQueryWidthResolvers";
-type _MediaQuerWidthDefExplicit<TBreakpoint extends string> = `min-${TBreakpoint}` | `max-${TBreakpoint}` | `up-${TBreakpoint}` | `down-${TBreakpoint}` | `between-${TBreakpoint}_${TBreakpoint}` | `only-${TBreakpoint}`;
-export type MediaQuerWidthDef<TBreakpoint extends string> = `${TBreakpoint}` | _MediaQuerWidthDefExplicit<TBreakpoint>;
-export type MediaQueryWidth<TBreakpoint extends string> = `@${MediaQuerWidthDef<TBreakpoint>}`;
-/**
- * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
- *
- * @param customBreakpoints
- * @returns
- */
-export declare function createUseMediaQueryWidth<TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig): <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: `@${TBreakpoints}` | `@min-${TBreakpoints}` | `@max-${TBreakpoints}` | `@up-${TBreakpoints}` | `@down-${TBreakpoints}` | `@between-${TBreakpoints}_${TBreakpoints}` | `@only-${TBreakpoints}`, serverValue?: null | boolean) => boolean | null;
-export default createUseMediaQueryWidth;

package/helpers/createUseMediaQueryWidth.js

@@ -1,193 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    createUseMediaQueryWidth: function() {
-        return createUseMediaQueryWidth;
-    },
-    default: function() {
-        return _default //// without creator it would be:
-         //// ---------------------------------------------------------------------------
-         // import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
-         // import type { Split } from "@koine/utils";
-         // import isBrowser from "@koine/utils/isBrowser";
-         // import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
-         // import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
-         // type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
-         // type Breakpoints = Record<Breakpoint, number>;
-         // type MediaQuery =
-         //   | `max:${Breakpoint}`
-         //   | `min:${Breakpoint}`
-         //   | `down:${Breakpoint}`
-         //   | `up:${Breakpoint}`
-         //   | `between:${Breakpoint}-${Breakpoint}`
-         //   | `only:${Breakpoint}`;
-         // const breakpoints: Breakpoints = {
-         //   xs: 0,
-         //   ...themeBreakpoints,
-         // };
-         // const sortedBreakpointsNames = (
-         //   Object.keys(breakpoints).map((key) => {
-         //     const br = key as keyof typeof breakpoints;
-         //     return [br, breakpoints[br]];
-         //   }) as [Breakpoint, number][]
-         // )
-         //   .sort((a, b) => a[1] - b[1])
-         //   .map((item) => item[0]);
-         // const getNextBreakpoint = (breakpoint: Breakpoint) => {
-         //   const index = sortedBreakpointsNames.indexOf(breakpoint);
-         //   return sortedBreakpointsNames[index + 1];
-         // };
-         // /**
-         //  * It behaves the same as `(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`.
-         //  */
-         // const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
-         // /**
-         //  * It behaves the same as `(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`.
-         //  */
-         // const max = (br: Breakpoint) => `(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: Breakpoint) => {
-         //   const brNext = getNextBreakpoint(br);
-         //   // TODO: if br does not exists otherwise throw Error
-         //   return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
-         // };
-         // /**
-         //  * Media query between the two given breakpoints
-         //  */
-         // const between = (br1: Breakpoint, br2?: Breakpoint) => {
-         //   return br2
-         //     ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
-         //         breakpoints[br2] - 0.02
-         //       }px)`
-         //     : min(br1);
-         // };
-         // /**
-         //  * Media query to apply from the given breakpoint until the next, just for its
-         //  * full range
-         //  */
-         // const only = (br: Breakpoint) => {
-         //   const brNext = getNextBreakpoint(br);
-         //   return brNext ? between(br, brNext) : min(br);
-         // };
-         // const queryResolvers = {
-         //   max,
-         //   min,
-         //   down,
-         //   up,
-         //   between,
-         //   only,
-         // };
-         // export function useMqWidth(media: MediaQuery) {
-         //   const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
-         //     MediaQuery,
-         //     ":"
-         //   >;
-         //   const [br1, br2] = ruleBreakpoint.split("-") as Split<
-         //     typeof ruleBreakpoint,
-         //     "-"
-         //   >;
-         //   const query = queryResolvers[rule](br1, br2);
-         //   const mq = useMemo(
-         //     () => (isBrowser ? window.matchMedia(query) : { matches: false }),
-         //     [query]
-         //   );
-         //   const [matches, setMatches] = useState(mq.matches);
-         //   useIsomorphicLayoutEffect(() => {
-         //     const mq = window.matchMedia(query);
-         //     const handleChange = (event: MediaQueryListEvent) => {
-         //       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;
-         // }
-        ;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _getMediaQueryWidthResolvers = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/getMediaQueryWidthResolvers"));
-const _isUndefined = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isUndefined"));
-const _useIsomorphicLayoutEffect = /*#__PURE__*/ _interop_require_default._(require("../hooks/useIsomorphicLayoutEffect"));
-function createUseMediaQueryWidth(customBreakpoints) {
-    const queryResolvers = (0, _getMediaQueryWidthResolvers.default)(customBreakpoints);
-    return function useMediaQueryWidth(media, serverValue) {
-        const definition = media.substring(1);
-        let [rule, ruleBreakpoint] = definition.split("-");
-        if ((0, _isUndefined.default)(ruleBreakpoint)) {
-            ruleBreakpoint = rule;
-        }
-        if ((0, _isUndefined.default)(rule)) {
-            rule = "min";
-        }
-        // with the hook creator approach these breakpoint types cannot be deduced
-        // const [br1, br2] = ruleBreakpoint.split("-") as Split<
-        //   typeof ruleBreakpoint,
-        //   "-"
-        // >;
-        const [br1, br2] = ruleBreakpoint.split("_");
-        const query = queryResolvers[rule](br1, br2);
-        const [matches, setMatches] = (0, _react.useState)((0, _isUndefined.default)(serverValue) ? null : serverValue);
-        (0, _useIsomorphicLayoutEffect.default)(()=>{
-            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;
-    };
-}
-const _default = createUseMediaQueryWidth;