react-miui 0.9.5 → 0.12.0

package/dist/components/ui/drawer/Drawer.module.scss

@@ -0,0 +1,15 @@
+.drawer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: white;
+    z-index: 1;
+
+    transition: transform 300ms;
+}
+
+.content {
+    height: 100%;
+}

package/dist/components/ui/message/Message.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface Props {
+    type: "warning" | "error" | "info" | "tip";
+    variant?: "box";
+}
+declare const Message: React.FC<Props>;
+export { Message };
+//# sourceMappingURL=Message.d.ts.map

package/dist/components/ui/message/Message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,KAAK;IACX,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC;CACnB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAQ5B,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/ui/message/Message.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Message_module_scss_1 = __importDefault(require("./Message.module.scss"));
+const Message = (props) => {
+    const cls = classnames_1.default(Message_module_scss_1.default.container, {
+        [Message_module_scss_1.default.box]: props.variant === "box",
+        [Message_module_scss_1.default.warning]: props.type === "warning",
+        [Message_module_scss_1.default.error]: props.type === "error",
+        [Message_module_scss_1.default.info]: props.type === "info",
+    });
+    return react_1.default.createElement("div", { className: cls }, props.children);
+};
+exports.Message = Message;
+//# sourceMappingURL=Message.js.map

package/dist/components/ui/message/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../../src/components/ui/message/Message.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,gFAA2C;AAO3C,MAAM,OAAO,GAAoB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,GAAG,GAAG,oBAAU,CAAC,6BAAM,CAAC,SAAS,EAAE;QACrC,CAAC,6BAAM,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,OAAO,KAAK,KAAK;QACrC,CAAC,6BAAM,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,IAAI,KAAK,SAAS;QAC1C,CAAC,6BAAM,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;QACtC,CAAC,6BAAM,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,IAAI,KAAK,MAAM;KACvC,CAAC,CAAC;IACH,OAAO,uCAAK,SAAS,EAAE,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACvD,CAAC,CAAC;AAEO,0BAAO"}

package/dist/components/ui/message/Message.module.scss

@@ -0,0 +1,31 @@
+.container {
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    padding: calc(47px / var(--ratio-dimensions)) calc(83px / var(--ratio-dimensions));
+    font-weight: 500;
+    line-height: 1.25;
+}
+
+.box {
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+    margin: 12px;
+}
+
+.warning {
+    background-color: var(--yellow3);
+    border-color: var(--yellow1);
+    color: var(--yellow2);
+}
+
+.error {
+    background-color: var(--pinky3);
+    border-color: var(--pinky1);
+    color: var(--pinky2);
+}
+
+.info {
+    background-color: var(--blue3);
+    border-color: var(--blue2);
+    color: var(--blue1);
+}

package/dist/components/ui/pop/OnButtonClick.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface Props {
+    onClick: () => void;
+}
+declare const OnButtonClick: React.FC<Props>;
+export { OnButtonClick };
+//# sourceMappingURL=OnButtonClick.d.ts.map

package/dist/components/ui/pop/OnButtonClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnButtonClick.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/OnButtonClick.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,UAAU,KAAK;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsBlC,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/ui/pop/OnButtonClick.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnButtonClick = void 0;
+const react_1 = __importStar(require("react"));
+const OnButtonClick = (props) => {
+    const theRef = react_1.useRef(null);
+    react_1.useEffect(() => {
+        const div = theRef.current;
+        if (!div) {
+            return;
+        }
+        const cb = (e) => {
+            if (e.target.nodeName.toLowerCase() === "button") {
+                setTimeout(() => {
+                    props.onClick();
+                }, 0);
+            }
+        };
+        div.addEventListener("click", cb);
+        return () => { div.removeEventListener("click", cb); };
+    }, [theRef]);
+    return react_1.default.createElement("div", { ref: theRef }, props.children);
+};
+exports.OnButtonClick = OnButtonClick;
+//# sourceMappingURL=OnButtonClick.js.map

package/dist/components/ui/pop/OnButtonClick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnButtonClick.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/OnButtonClick.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AAMjD,MAAM,aAAa,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC7C,MAAM,MAAM,GAAG,cAAM,CAAiB,IAAI,CAAC,CAAC;IAE5C,iBAAS,CAAC,GAAG,EAAE;QACX,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,GAAG,EAAE;YACN,OAAO;SACV;QAED,MAAM,EAAE,GAAG,CAAC,CAAa,EAAE,EAAE;YACzB,IAAK,CAAC,CAAC,MAAyB,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,QAAQ,EAAE;gBAClE,UAAU,CAAC,GAAG,EAAE;oBACZ,KAAK,CAAC,OAAO,EAAE,CAAC;gBACpB,CAAC,EAAE,CAAC,CAAC,CAAC;aACT;QACL,CAAC,CAAC;QAEF,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QAClC,OAAO,GAAG,EAAE,GAAG,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3D,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,uCAAK,GAAG,EAAE,MAAM,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACpD,CAAC,CAAC;AAEO,sCAAa"}

package/dist/components/ui/pop/Pop.d.ts

@@ -0,0 +1,27 @@
+import { Component } from "react";
+import { PopOption } from "./PopOption";
+interface Props {
+    open: boolean;
+    onClose: () => void;
+    anchor?: HTMLElement | "prev" | "next";
+    closeOnEsc?: boolean;
+}
+interface State {
+    x: number;
+    y: number;
+    vertical: "top" | "bottom";
+    horizontal: "left" | "right";
+}
+declare class Pop extends Component<Props, State> {
+    constructor(props: Props);
+    componentDidUpdate(prevProps: Props): void;
+    static Option: typeof PopOption;
+    private readonly rootRef;
+    private getAnchorElement;
+    private readonly onOpen;
+    private readonly handleOverlayClick;
+    private readonly handleEsc;
+    render(): JSX.Element | null;
+}
+export { Pop };
+//# sourceMappingURL=Pop.d.ts.map

package/dist/components/ui/pop/Pop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pop.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/Pop.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAIxC,UAAU,KAAK;IACX,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,KAAK;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC3B,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;CAChC;AA4BD,cAAM,GAAI,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAClB,KAAK,EAAE,KAAK;IAYxB,kBAAkB,CAAC,SAAS,EAAE,KAAK;IAM1C,OAAc,MAAM,EAAE,OAAO,SAAS,CAAa;IAEnD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAkC;IAE1D,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAqBrB;IAEF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAIjC;IAEF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAExB;IAEK,MAAM;CAmChB;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/ui/pop/Pop.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pop = void 0;
+const react_1 = __importStar(require("react"));
+const OnButtonClick_1 = require("./OnButtonClick");
+const PopOption_1 = require("./PopOption");
+const Pop_module_scss_1 = __importDefault(require("./Pop.module.scss"));
+const HandleEsc_1 = require("../../utils/HandleEsc");
+const html = typeof document === "object" ? document.getElementsByTagName("html")[0] : null;
+const getElementDimensions = (elem) => {
+    return {
+        width: elem.clientWidth,
+        height: elem.clientHeight,
+    };
+};
+const getElementLocation = (element, outerElement = html) => {
+    const outer = getElementDimensions(outerElement);
+    const rect = element.getBoundingClientRect();
+    const distanceToBottom = outer.height - rect.bottom;
+    const distanceToTop = rect.top;
+    const verticalLocation = distanceToTop > distanceToBottom ? "bottom" : "top";
+    const distanceToLeft = rect.left;
+    const distanceToRight = outer.width - rect.right;
+    const horizontalLocation = distanceToLeft > distanceToRight ? "right" : "left";
+    return [verticalLocation, horizontalLocation];
+};
+class Pop extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.onOpen = () => {
+            const anchorElement = this.getAnchorElement();
+            if (!anchorElement) {
+                console.warn("PopOptions can not find anchor element");
+                return;
+            }
+            const [vertical, horizontal] = getElementLocation(anchorElement);
+            const dimensions = getElementDimensions(html);
+            const rect = anchorElement.getBoundingClientRect();
+            const x = horizontal === "left" ? rect.left : dimensions.width - rect.right;
+            const y = vertical === "top" ? rect.bottom : dimensions.height - rect.top;
+            this.setState({
+                vertical,
+                horizontal,
+                x,
+                y,
+            });
+        };
+        this.handleOverlayClick = (e) => {
+            if (e.target === e.currentTarget) {
+                this.props.onClose();
+            }
+        };
+        this.handleEsc = () => {
+            this.props.onClose();
+        };
+        this.state = {
+            x: 0,
+            y: 0,
+            vertical: "top",
+            horizontal: "left",
+        };
+        this.rootRef = react_1.createRef();
+    }
+    componentDidUpdate(prevProps) {
+        if (!prevProps.open && this.props.open) {
+            this.onOpen();
+        }
+    }
+    getAnchorElement() {
+        if (this.props.anchor instanceof HTMLElement) {
+            return this.props.anchor;
+        }
+        if (!this.rootRef.current) {
+            return null;
+        }
+        if (this.props.anchor === "prev") {
+            return this.rootRef.current.previousElementSibling;
+        }
+        if (this.props.anchor === "next") {
+            return this.rootRef.current.nextElementSibling;
+        }
+    }
+    render() {
+        var _a;
+        const style = {};
+        if (this.state.vertical === "top") {
+            style.top = this.state.y;
+        }
+        else {
+            style.bottom = this.state.y;
+        }
+        if (this.state.horizontal === "left") {
+            style.left = this.state.x;
+        }
+        else {
+            style.right = this.state.x;
+        }
+        if (!this.props.open) {
+            return null;
+        }
+        const closeOnEsc = (_a = this.props.closeOnEsc) !== null && _a !== void 0 ? _a : true;
+        const esc = closeOnEsc && react_1.default.createElement(HandleEsc_1.HandleEsc, { onPress: this.handleEsc });
+        return (react_1.default.createElement("div", { className: Pop_module_scss_1.default.overlay, ref: this.rootRef, onClick: this.handleOverlayClick },
+            esc,
+            react_1.default.createElement(OnButtonClick_1.OnButtonClick, { onClick: this.handleEsc },
+                react_1.default.createElement("ul", { className: Pop_module_scss_1.default.pop, style: style }, this.props.children))));
+    }
+}
+exports.Pop = Pop;
+Pop.Option = PopOption_1.PopOption;
+//# sourceMappingURL=Pop.js.map

package/dist/components/ui/pop/Pop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pop.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/Pop.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/pop/Pop.module.scss

@@ -0,0 +1,58 @@
+.overlay {
+    position: fixed;
+    background: #0000004c;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 4;
+}
+
+.pop {
+    z-index: 5;
+    position: absolute;
+    background: white;
+    margin: 0;
+    padding: 0;
+
+    ul, li {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    li + li {
+        border-top: 1px solid var(--border);
+    }
+
+    button {
+        border: none;
+        background: white;
+        height: calc(116px / var(--ratio-dimensions));
+        padding: 0 calc(42px / var(--ratio-dimensions));
+        box-sizing: border-box;
+        width: 100%;
+        min-width: calc(460px / var(--ratio-dimensions));
+        text-align: left;
+        color: var(--pop-text);
+        font-size: calc(26px / var(--ratio-font));
+        display: flex;
+        align-items: center;
+
+        svg {
+            fill: currentColor;
+            margin-right: calc(42px / var(--ratio-dimensions));
+        }
+
+        &:hover {
+            background: var(--active-bg);
+        }
+    }
+}
+
+.fakeIcon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: calc(42px / var(--ratio-dimensions));
+}

package/dist/components/ui/pop/PopOption.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ICON } from "../../icons/Icon";
+interface Props {
+    icon?: ICON;
+    forceEmptyIcon?: boolean;
+    onClick: () => void;
+}
+declare const PopOption: React.FC<Props>;
+export { PopOption };
+//# sourceMappingURL=PopOption.d.ts.map

package/dist/components/ui/pop/PopOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopOption.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAK7C,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAQ9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/ui/pop/PopOption.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopOption = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../../icons/Icon");
+const Pop_module_scss_1 = __importDefault(require("./Pop.module.scss"));
+const PopOption = (props) => {
+    var _a;
+    const ic = props.icon
+        ? react_1.default.createElement(Icon_1.Icon, { name: props.icon })
+        : (((_a = props.forceEmptyIcon) !== null && _a !== void 0 ? _a : true) ? react_1.default.createElement("span", { className: Pop_module_scss_1.default.fakeIcon }) : null);
+    return (react_1.default.createElement("li", null,
+        react_1.default.createElement("button", { onClick: props.onClick },
+            ic,
+            props.children)));
+};
+exports.PopOption = PopOption;
+//# sourceMappingURL=PopOption.js.map

package/dist/components/ui/pop/PopOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,2CAAwC;AAExC,wEAAuC;AAQvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACzC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,8BAAC,WAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI;QAC5B,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,wCAAM,SAAS,EAAE,yBAAM,CAAC,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAErF,OAAO,CACH;QAAI,0CAAQ,OAAO,EAAE,KAAK,CAAC,OAAO;YAAG,EAAE;YAAE,KAAK,CAAC,QAAQ,CAAU,CAAK,CACzE,CAAC;AACN,CAAC,CAAC;AAEO,8BAAS"}

package/dist/components/ui/stats/Stats.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface Stat {
+    label: string;
+    value: string;
+}
+interface Props {
+    stats: Stat[];
+    variant?: "dark";
+}
+declare const Stats: React.FC<Props>;
+export { Stats };
+//# sourceMappingURL=Stats.d.ts.map

package/dist/components/ui/stats/Stats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stats/Stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,IAAI;IACV,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,KAAK;IACX,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwB1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/ui/stats/Stats.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stats = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Stats_module_scss_1 = __importDefault(require("./Stats.module.scss"));
+const Stats = (props) => {
+    const list = props.stats.map((s, k) => (react_1.default.createElement("li", { key: String(k), className: Stats_module_scss_1.default.item },
+        react_1.default.createElement("span", { className: Stats_module_scss_1.default.value }, s.value),
+        react_1.default.createElement("span", { className: Stats_module_scss_1.default.label }, s.label))));
+    const len = list.length;
+    for (let i = 0; i < len - 1; i++) {
+        list.splice((i * 2) + 1, 0, react_1.default.createElement("li", { key: "separator" + String(i), className: Stats_module_scss_1.default.separator }));
+    }
+    const cls = classnames_1.default(Stats_module_scss_1.default.stats, {
+        [Stats_module_scss_1.default["stats-dark"]]: props.variant === "dark",
+    });
+    return (react_1.default.createElement("ul", { className: cls }, list));
+};
+exports.Stats = Stats;
+//# sourceMappingURL=Stats.js.map

package/dist/components/ui/stats/Stats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.js","sourceRoot":"","sources":["../../../../src/components/ui/stats/Stats.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,4EAAyC;AAYzC,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACnC,sCAAI,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,2BAAM,CAAC,IAAI;QACtC,wCAAM,SAAS,EAAE,2BAAM,CAAC,KAAK,IAAG,CAAC,CAAC,KAAK,CAAQ;QAC/C,wCAAM,SAAS,EAAE,2BAAM,CAAC,KAAK,IAAG,CAAC,CAAC,KAAK,CAAQ,CAC9C,CACR,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC;IAExB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;QAE9B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,sCAAI,GAAG,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,2BAAM,CAAC,SAAS,GAAI,CAAC,CAAC;KAClG;IAED,MAAM,GAAG,GAAG,oBAAU,CAAC,2BAAM,CAAC,KAAK,EAAE;QACjC,CAAC,2BAAM,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,KAAK,MAAM;KACnD,CAAC,CAAC;IAEH,OAAO,CACH,sCAAI,SAAS,EAAE,GAAG,IACb,IAAI,CACJ,CACR,CAAC;AACN,CAAC,CAAC;AAEO,sBAAK"}

package/dist/components/ui/stats/Stats.module.scss

@@ -0,0 +1,48 @@
+.stats {
+    --stats-border: 1px solid rgba(255, 255, 255, .15);
+    --stats-bg: rgba(255, 255, 255, .05);
+    --stats-value-color: rgba(255, 255, 255, .9);
+    --stats-label-color: rgba(255, 255, 255, .61);
+
+    display: flex;
+    width: 100%;
+    padding: calc(60px / var(--ratio-dimensions)) 0;
+    margin: 0;
+    border-top: var(--stats-border);
+    background: var(--stats-bg);
+    background-clip: padding-box;
+    list-style-type: none;
+}
+
+.stats-dark {
+    --stats-border: 1px solid rgba(0, 0, 0, .15);
+    --stats-bg: rgba(0, 0, 0, .05);
+    --stats-value-color: rgba(0, 0, 0, .9);
+    --stats-label-color: rgba(0, 0, 0, .61);
+}
+
+.item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    gap: calc(20px / var(--ratio-dimensions));
+}
+
+.separator {
+    border-left: var(--stats-border);
+}
+
+.label {
+    display: block;
+    color: var(--stats-label-color);
+    font-size: calc(22px / var(--ratio-font));
+}
+
+.value {
+    display: block;
+    color: var(--stats-value-color);
+    font-size: calc(30px / var(--ratio-font));
+}

package/dist/components/utils/HandleEsc.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+interface Props {
+    onPress: () => void;
+}
+declare const HandleEsc: React.FC<Props>;
+export { HandleEsc };
+//# sourceMappingURL=HandleEsc.d.ts.map

package/dist/components/utils/HandleEsc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleEsc.d.ts","sourceRoot":"","sources":["../../../src/components/utils/HandleEsc.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,KAAK;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAU9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/utils/HandleEsc.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HandleEsc = void 0;
+const react_use_1 = require("react-use");
+const react_1 = require("react");
+const HandleEsc = (props) => {
+    const [pressed] = react_use_1.useKeyPress("Escape");
+    react_1.useEffect(() => {
+        if (pressed) {
+            props.onPress();
+        }
+    }, [pressed]);
+    return null;
+};
+exports.HandleEsc = HandleEsc;
+//# sourceMappingURL=HandleEsc.js.map

package/dist/components/utils/HandleEsc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleEsc.js","sourceRoot":"","sources":["../../../src/components/utils/HandleEsc.tsx"],"names":[],"mappings":";;;AACA,yCAAwC;AACxC,iCAAkC;AAMlC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,MAAM,CAAC,OAAO,CAAC,GAAG,uBAAW,CAAC,QAAQ,CAAC,CAAC;IAExC,iBAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE;YACT,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEO,8BAAS"}

package/dist/global.scss

@@ -27,6 +27,8 @@
     --text: #323232;
     --sub: #959595;
 
+    --pop-text: #666;
+
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
     --modal-bg: #f7f7f7;
@@ -47,6 +49,8 @@
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;
+    --blue2: #b7d6f5;
+    --blue3: #dbe6ff;
     --orange1: #ff7200;
     --orange1-darker: #cc5b00;
     --purple1: #7357e8;
@@ -54,10 +58,19 @@
     --green1-darker: #38af2f;
     --pink1: #ff388f;
     --red1: #ea2700;
+    --yellow1: #ffde9d;
+    --yellow2: #e4a429;
+    --yellow3: #fff5db;
+    --pinky1: #f5c0b7;
+    --pinky2: #e07b67;
+    --pinky3: #ffe1db;
 
     --grey1: #737373;
 
     --focus-color: #dcaf00;
+
+    --scrollbars-thumb: var(--grey1);
+    --scrollbars-bg: transparent;
 }
 
 *:focus {

package/dist/index.d.ts

@@ -17,8 +17,11 @@ export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";
+export * from "./components/ui/drawer/Drawer.js";
+export * from "./components/ui/message/Message.js";
 export * from "./components/ui/modal/Modal.js";
 export * from "./components/ui/modal/ModalButtons.js";
+export * from "./components/ui/pop/Pop.js";
 export * from "./components/ui/tabs/Selector.js";
 export * from "./components/ui/toaster/Toaster.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}

package/dist/index.js

@@ -29,8 +29,11 @@ __exportStar(require("./components/ui/action/Action.js"), exports);
 __exportStar(require("./components/ui/action/EqualActions.js"), exports);
 __exportStar(require("./components/ui/button/Button.js"), exports);
 __exportStar(require("./components/ui/directionPad/Pad.js"), exports);
+__exportStar(require("./components/ui/drawer/Drawer.js"), exports);
+__exportStar(require("./components/ui/message/Message.js"), exports);
 __exportStar(require("./components/ui/modal/Modal.js"), exports);
 __exportStar(require("./components/ui/modal/ModalButtons.js"), exports);
+__exportStar(require("./components/ui/pop/Pop.js"), exports);
 __exportStar(require("./components/ui/tabs/Selector.js"), exports);
 __exportStar(require("./components/ui/toaster/Toaster.js"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,qEAAmD;AACnD,gEAA8C;AAC9C,6DAA2C;AAC3C,6DAA2C;AAC3C,gEAA8C;AAC9C,8DAA4C;AAE5C,6DAA2C;AAE3C,mEAAiD;AACjD,uEAAqD;AACrD,iFAA+D;AAC/D,6EAA2D;AAC3D,mEAAiD;AACjD,mEAAiD;AACjD,iFAA+D;AAC/D,yEAAuD;AAEvD,mEAAiD;AACjD,yEAAuD;AACvD,mEAAiD;AACjD,sEAAoD;AACpD,iEAA+C;AAC/C,wEAAsD;AACtD,mEAAiD;AACjD,qEAAmD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,qEAAmD;AACnD,gEAA8C;AAC9C,6DAA2C;AAC3C,6DAA2C;AAC3C,gEAA8C;AAC9C,8DAA4C;AAE5C,6DAA2C;AAE3C,mEAAiD;AACjD,uEAAqD;AACrD,iFAA+D;AAC/D,6EAA2D;AAC3D,mEAAiD;AACjD,mEAAiD;AACjD,iFAA+D;AAC/D,yEAAuD;AAEvD,mEAAiD;AACjD,yEAAuD;AACvD,mEAAiD;AACjD,sEAAoD;AACpD,mEAAiD;AACjD,qEAAmD;AACnD,iEAA+C;AAC/C,wEAAsD;AACtD,6DAA2C;AAC3C,mEAAiD;AACjD,qEAAmD"}