react-miui 0.9.5 → 0.12.0

package/esm/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/esm/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/esm/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/esm/components/utils/HandleEsc.js

@@ -0,0 +1,13 @@
+import { useKeyPress } from "react-use";
+import { useEffect } from "react";
+const HandleEsc = (props) => {
+    const [pressed] = useKeyPress("Escape");
+    useEffect(() => {
+        if (pressed) {
+            props.onPress();
+        }
+    }, [pressed]);
+    return null;
+};
+export { HandleEsc };
+//# sourceMappingURL=HandleEsc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HandleEsc.js","sourceRoot":"","sources":["../../../src/components/utils/HandleEsc.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,MAAM,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAExC,SAAS,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;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/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/esm/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/esm/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/esm/index.js

@@ -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.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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.js","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/esm/scrollbars.scss

@@ -0,0 +1,22 @@
+.miui-scrollbars {
+    overflow-y: auto;
+    scrollbar-color: var(--scrollbars-thumb) var(--scrollbars-bg);
+    scrollbar-width: thin !important;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical {
+        background: var(--scrollbars-thumb);
+        background-clip: padding-box;
+        border: 2px solid var(--scrollbars-bg);
+        min-height: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical:active {
+        background: var(--scrollbars-thumb);
+        border: 2px solid var(--scrollbars-bg);
+    }
+}

package/esm/utils/useKeyPress.d.ts

@@ -0,0 +1,3 @@
+declare const useKeyPress: (targetKey: string) => boolean;
+export { useKeyPress, };
+//# sourceMappingURL=useKeyPress.d.ts.map

package/esm/utils/useKeyPress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyPress.d.ts","sourceRoot":"","sources":["../../src/utils/useKeyPress.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,cAAe,MAAM,YAyBrC,CAAC;AAEF,OAAO,EACH,WAAW,GACd,CAAC"}

package/esm/utils/useKeyPress.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+const useKeyPress = (targetKey) => {
+    const [keyPressed, setKeyPressed] = useState(false);
+    useEffect(() => {
+        const handleKeyDown = ({ key }) => {
+            if (key === targetKey) {
+                setKeyPressed(true);
+            }
+        };
+        const handleKeyUp = ({ key }) => {
+            if (key === targetKey) {
+                setKeyPressed(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, [targetKey]);
+    return keyPressed;
+};
+export { useKeyPress, };
+//# sourceMappingURL=useKeyPress.js.map

package/esm/utils/useKeyPress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyPress.js","sourceRoot":"","sources":["../../src/utils/useKeyPress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,GAAG,CAAC,SAAiB,EAAE,EAAE;IACtC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,aAAa,GAAG,CAAC,EAAE,GAAG,EAAiB,EAAQ,EAAE;YACnD,IAAI,GAAG,KAAK,SAAS,EAAE;gBACnB,aAAa,CAAC,IAAI,CAAC,CAAC;aACvB;QACL,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,EAAE,GAAG,EAAiB,EAAQ,EAAE;YACjD,IAAI,GAAG,KAAK,SAAS,EAAE;gBACnB,aAAa,CAAC,KAAK,CAAC,CAAC;aACxB;QACL,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YACrD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACrD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,UAAU,CAAC;AACtB,CAAC,CAAC;AAEF,OAAO,EACH,WAAW,GACd,CAAC"}

package/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.9.5",
+  "version": "0.12.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -28,7 +28,8 @@
   "types": "./esm/index.d.ts",
   "module": "./esm/index.js",
   "dependencies": {
-    "classnames": "^2.3.1"
+    "classnames": "^2.3.1",
+    "oop-timers": "^4.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -51,7 +52,7 @@
     "husky": "^7.0.4",
     "jest": "^27.5.1",
     "must": "^0.13.4",
-    "next": "^11.1.4",
+    "next": "^12.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.2.4",

package/src/components/icons/Back.tsx

@@ -7,7 +7,7 @@ interface Props {
 const Back: React.FC<Props> = (props) => {
     return (
         <svg
-            width={"9"}
+            width={"16"}
             height={"16"}
             viewBox={"0 0 9 16"}
             xmlns={"http://www.w3.org/2000/svg"}

package/src/components/icons/Battery.tsx

@@ -7,8 +7,9 @@ interface Props {
 const Battery: React.FC<Props> = (props) => {
     return (
         <svg
-            width={"13"}
-            height={"17"}
+            width={"16"}
+            height={"16"}
+            viewBox={"0 0 13 17"}
             xmlns={"http://www.w3.org/2000/svg"}
             className={props.className}
         >

package/src/components/icons/Checkmark.tsx

@@ -7,17 +7,14 @@ interface Props {
 const Checkmark: React.FC<Props> = (props) => {
     return (
         <svg
-            xmlns={"http://www.w3.org/2000/svg"}
             width={"16"}
             height={"16"}
-            viewBox={"0 0 45.701 45.7"}
+            viewBox={"0 0 26 18"}
+            xmlns={"http://www.w3.org/2000/svg"}
             className={props.className}
         >
-            <path
-                d={"M20.687 38.332a5.308 5.308 0 01-7.505 0L1.554 26.704A5.306 5.306 0 119.059 19.2l6.928 6.927a1.344 1.344 0 001.896 0L36.642 7.368a5.308 5.308 0 017.505 7.504l-23.46 23.46z"}
-            />
+            <path d={"M26 1.6q0-.7-.4-1.15Q25.15 0 24.55 0q-.65 0-1.1.45L9.5 14.35l-6.95-7Q2.1 6.9 1.5 6.9q-.65 0-1.05.45Q0 7.8 0 8.4q0 .7.45 1.15l8 8.05q.45.4 1.05.4.6 0 1.05-.4l15-14.95Q26 2.2 26 1.6"} />
         </svg>
-
     );
 };
 

package/src/components/icons/Config.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Config: React.FC<Props> = (props) => {
+    return (
+        <svg
+            width={"16"}
+            height={"16"}
+            viewBox={"0 0 90 90"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path d={"M87.55 26.85 85.2 21.5l-5.25.6q-2.4.3-3.7.25-1.3-.05-2.35-.65-1-.6-2.5-1.95-1.55-1.3-2.25-2.3-.75-1-.95-2.5-.25-1.45-.25-4.25l-.1-6.15L56.65 0l-4.1 4.5q-1.7 1.8-2.85 2.75-1.25.95-2.35 1.3-1.15.3-2.7.3-1.5 0-2.6-.3-1.2-.35-2.35-1.25-1.2-.9-2.85-2.65L32.75.4 28 2.25q-2.05.8-3.65 1.65-1.6.75-2 1.15-.4.45-.6 2.15-.25 1.75-.1 4 .1 2.1-.05 3.45-.15 1.35-.65 2.4-.45 1-1.45 2.1-1 1.25-1.95 1.8-.9.6-2.4.8-1.45.2-4.15.25l-6.1.1L.1 33 4 36.9q1.55 1.6 2.8 3.4 1.2 1.8 1.5 2.9.5 2.7-.95 5.55Q6 51.55 3.1 53.8L0 56.35 4.9 67.7h4.85q6.5 0 9.4 3 2.95 2.95 2.5 9.1-.25 2.25.1 3.55.3 1.2 1.75 2.1 1.45.85 4.6 2l4.85 1.95 3.5-3.7q8.75-9.1 17.2.7l3 3.6 11.4-4.85-.3-4.2q-.45-6.55 2.7-9.85 3.15-3.35 9.9-3.2l5.35.2 4.1-11.4-3.7-3q-3.25-2.7-4.2-6.2-.95-3.5.35-6.85 1.3-3.25 4.85-5.35 1.2-.65 2-1.35.85-.65.9-.95-.05-.35-.75-2.1-.6-1.7-1.7-4.05m-28.25.8q2 1.5 3.5 3.55 1.45 2.05 2.75 4.9 1.95 4.4 1.9 8.95-.1 4.5-2.2 9.05-2 4.35-5 7.15-2.9 2.75-7.1 4.45-8.65 3.25-17.25-.8-2.9-1.3-4.9-2.8-2.05-1.55-3.5-3.6-1.45-2-2.75-4.9-1.9-4.2-1.9-8.75 0-4.5 1.9-8.75 1.3-2.85 2.75-4.9 1.45-2.05 3.5-3.55 2-1.55 4.9-2.85 4.65-2.3 9.25-2.3t9.25 2.3q2.9 1.3 4.9 2.85"} />
+        </svg>
+    );
+};
+
+export { Config };

package/src/components/icons/Dots.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Dots: React.FC<Props> = (props) => {
+    return (
+        <svg
+            width={"16"}
+            height={"16"}
+            viewBox={"0 0 16 72"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path d={"M13.65 13.65Q16 11.3 16 8q0-3.3-2.35-5.65Q11.3 0 8 0 4.7 0 2.35 2.35 0 4.7 0 8q0 3.3 2.35 5.65Q4.7 16 8 16q3.3 0 5.65-2.35M8 44q3.3 0 5.65-2.35Q16 39.3 16 36q0-3.3-2.35-5.65Q11.3 28 8 28q-3.3 0-5.65 2.35Q0 32.7 0 36q0 3.3 2.35 5.65Q4.7 44 8 44M8 72q3.3 0 5.65-2.35Q16 67.3 16 64q0-3.3-2.35-5.65Q11.3 56 8 56q-3.3 0-5.65 2.35Q0 60.7 0 64q0 3.3 2.35 5.65Q4.7 72 8 72"} />
+        </svg>
+    );
+};
+
+export { Dots };

package/src/components/icons/Forward.tsx

@@ -7,7 +7,7 @@ interface Props {
 const Forward: React.FC<Props> = (props) => {
     return (
         <svg
-            width={"9"}
+            width={"16"}
             height={"16"}
             viewBox={"0 0 9 16"}
             xmlns={"http://www.w3.org/2000/svg"}

package/src/components/icons/Heart.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Heart: React.FC<Props> = (props) => {
+    return (
+        <svg
+            width={"16"}
+            height={"16"}
+            viewBox={"0 0 55 46"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path d={"M54 8.5q-1.1-2.35-2.15-3.35Q50.9 4.2 49.4 3 47.75 1.65 44.9.75h-.05q-2.7-.85-5.55-.7-.05 0-.1.05-2.9.35-5.3 1.7-.8.35-1.9 1.15l.05-.05q-1.15.7-2.1 1.55-.75.55-1.55 1-.45.2-.9.15-.15-.05-.25-.05-.35-.05-.75-.35-.1-.05-.15-.1-.7-.4-1.35-.95l-.05-.05q-.85-.75-1.75-1.25-2.15-1.6-4.65-2.25Q15.9-.1 13.2.05q-.05 0-.15.05Q9.9.6 7 2.4h-.05q-2.7 1.75-4.5 4.45v.05Q.7 9.6.15 12.85q-.05.05-.05.1-.4 3.3 1.1 6.75v.1q1.25 2.45 3.2 4.6 1.6 2.05 3.55 4l3.8 3.8q0 .05.05.05 1.9 1.8 3.7 3.65v.05q3.9 3.75 6.05 5.8l.05.05q2.25 2.25 3.1 2.75l-.05-.05 1 .75q.85.75 2.05.75.3 0 .55-.1 1-.4 2-1.3.75-.75 2.1-1.85h.05q1.35-1.25 3-2.75h.05q1.6-1.55 3.35-3.2 1.75-1.65 3.7-3.7v.05l4.1-4 .05-.05q2.15-2.2 4-4.55v-.05q1.9-2.55 3.1-5.1h-.05q1.3-2.7 1.3-5.65 0-3-1-5.25m-4.25-1.25q.75.8 1.5 2.5t.75 4q0 2.25-1 4.35v.05q-1.05 2.25-2.7 4.55h-.05Q46.5 24.9 44.5 27l-4.1 4q-1.95 1.9-3.65 3.6-1.75 1.6-3.35 3.2-.05 0-.05.05-1.6 1.45-2.9 2.6-1.45 1.2-2.25 1.95-.35.3-.7.55-.5-.45-1.25-.95-.7-.45-2.6-2.35-2.15-2.1-6.05-5.9-1.8-1.8-3.75-3.7v.05l-3.8-3.8h.05q-1.85-1.9-3.4-3.85-.05-.1-.1-.1-1.65-1.8-2.7-3.9-1.1-2.6-.8-5.1.4-2.65 1.85-4.8 1.5-2.2 3.65-3.65 2.3-1.4 4.8-1.85 2.2-.15 4.35.45h.05q2 .55 3.7 1.8l.1.1q.7.45 1.45 1.05.85.65 1.65 1.15 1.25.95 2.4.95 1.4.25 2.75-.5l-.05.05q1.05-.6 2.1-1.35 0-.05.05-.05.75-.7 1.7-1.25 0-.05.05-.05.85-.6 1.45-.85.05-.05.15-.1 1.95-1.1 4.3-1.4h-.1q2.25-.15 4.45.55 2.3.75 3.6 1.75 1.35 1.05 2.2 1.9"} />
+        </svg>
+    );
+};
+
+export { Heart };

package/src/components/icons/Icon.tsx

@@ -6,6 +6,10 @@ import { Back } from "./Back.js";
 import { Forward } from "./Forward.js";
 import { Search } from "./Search.js";
 import { Battery } from "./Battery.js";
+import { Heart } from "./Heart.js";
+import { Trash } from "./Trash.js";
+import { Config } from "./Config.js";
+import { Dots } from "./Dots.js";
 
 enum ICON {
     checkmark = "checkmark",
@@ -13,6 +17,10 @@ enum ICON {
     forward = "forward",
     search = "search",
     battery = "battery",
+    heart = "heart",
+    trash = "trash",
+    config = "config",
+    dots = "dots",
 }
 
 interface Props {
@@ -26,6 +34,10 @@ const iconsMap = new Map<ICON, AnyComponent>([
     [ICON.forward, Forward],
     [ICON.search, Search],
     [ICON.battery, Battery],
+    [ICON.heart, Heart],
+    [ICON.trash, Trash],
+    [ICON.config, Config],
+    [ICON.dots, Dots],
 ]);
 
 const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {

package/src/components/icons/Search.tsx

@@ -7,9 +7,9 @@ interface Props {
 const Search: React.FC<Props> = (props) => {
     return (
         <svg
-            baseProfile={"basic"}
             width={"16"}
             height={"16"}
+            viewBox={"0 0 16 16"}
             xmlns={"http://www.w3.org/2000/svg"}
             className={props.className}
         >

package/src/components/icons/Trash.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Trash: React.FC<Props> = (props) => {
+    return (
+        <svg
+            width={"16"}
+            height={"16"}
+            viewBox={"0 0 41 37"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path d={"M35.7 9.25h3.95q1.4-.4 1.35-1.6-.1-1.2-1.35-1.45H25.6V1.25Q25.6 0 24.4 0h-8.7q-1.1-.05-1.2 1.25V6.2H1.35Q-.1 6.6 0 7.75.1 9 1.35 9.25H5.4v26.5q.15 1.2 1.25 1.25H34.5q1.1-.1 1.2-1.25V9.25M22.6 6.2h-5.05V3.1h5.05v3.1M8.45 33.9V9.25H32.7V33.9H8.45"} />
+        </svg>
+    );
+};
+
+export { Trash };

package/src/components/layout/header/Header.module.scss

@@ -15,6 +15,12 @@
     --background-color: var(--toolbar-bg);
 }
 
+.header--colored {
+    --border-color: var(--custom-header-color);
+    --background-color: var(--custom-header-color);
+    color: var(--custom-text-color);
+}
+
 .header--top, .header--bottom {
     padding: 0 16.666px;
     min-height: 44px;

package/src/components/layout/header/Header.tsx

@@ -8,7 +8,7 @@ import { EqualActions } from "../../ui/action/EqualActions.js";
 
 interface Props {
     center?: boolean;
-    variant?: "toolbar";
+    variant?: "toolbar" | "colored";
     /**
      * This indicates just how the borders are drawn and how content is aligned, not the actual position on the screen.
      * To set up position on the screen you need to properly style parent element.
@@ -34,6 +34,7 @@ const Header: React.FC<Props> = (props) => {
     const cls = classnames(styles.header, {
         [styles["header--center"]]: center,
         [styles["header--toolbar"]]: variant === "toolbar",
+        [styles["header--colored"]]: variant === "colored",
     }, styles[`header--${position}`], props.className);
 
     let contents = children;

package/src/components/layout/header/HeaderIconAction.module.scss

@@ -4,7 +4,7 @@
     border-radius: 666px;
     display: inline-block;
     border: calc(2px / var(--ratio-border)) solid transparent;
-    color: var(--header-text);
+    color: currentColor;
 
     &:hover {
         background: #00000022;
@@ -19,4 +19,5 @@
     width: 16px;
     height: 16px;
     display: block;
+    fill: currentColor;
 }

package/src/components/layout/header/StickyHeader.tsx

@@ -7,7 +7,12 @@ import styles from "./StickyHeader.module.scss";
 const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");
 
 interface Content {
-    Content: React.FC;
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    Content: React.FC<ContentProps>;
+}
+
+interface ContentProps {
+    className?: string;
 }
 
 interface Props {
@@ -35,7 +40,12 @@ const StickyHeader: React.FC<Props> & Content = (props) => {
     content = content as never;
 
     const cls = classnames(styles.stickyHeader, styles[`stickyHeader--${position}`]);
-    const contentCls = classnames(styles.stickyHeader__content, styles[`stickyHeader__content--${position}`]);
+
+    const contentCls = classnames(
+        styles.stickyHeader__content,
+        styles[`stickyHeader__content--${position}`],
+        (content as { props: ContentProps }).props.className,
+    );
 
     return (
         <div className={cls}>

package/src/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/src/components/ui/drawer/Drawer.tsx

@@ -0,0 +1,88 @@
+import React, { Component } from "react";
+import { Timeout } from "oop-timers";
+
+import styles from "./Drawer.module.scss";
+import { HandleEsc } from "../../utils/HandleEsc";
+
+const RENDER_TIMEOUT = 500;
+
+interface Props {
+    isOpen: boolean;
+    closeOnEsc?: boolean;
+    onClose: () => void;
+}
+
+interface State {
+    shouldRenderWhenClosed: boolean;
+}
+
+class Drawer extends Component<Props, State> {
+    public constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            shouldRenderWhenClosed: false,
+        };
+    }
+
+    public componentDidMount() {
+        this.timeout = new Timeout(() => {
+            // eslint-disable-next-line react/no-did-mount-set-state
+            this.setState({ shouldRenderWhenClosed: false });
+        }, RENDER_TIMEOUT);
+    }
+
+    public componentDidUpdate(prevProps: Props) {
+        if (!prevProps.isOpen && this.props.isOpen) {
+            this.onOpen();
+        }
+
+        if (prevProps.isOpen && !this.props.isOpen) {
+            this.onClose();
+        }
+    }
+
+    public componentWillUnmount() {
+        this.timeout?.stop();
+        this.timeout = null;
+    }
+
+    private timeout: Timeout | null = null;
+
+    private onOpen() {
+        this.timeout?.stop();
+        this.setState({ shouldRenderWhenClosed: true });
+    }
+
+    private onClose() {
+        this.timeout?.start();
+    }
+
+    private readonly handleEsc = () => {
+        this.props.onClose();
+    };
+
+    public render() {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        const y = this.props.isOpen ? 0 : 100;
+        const style = {
+            transform: `translateY(${y}%)`,
+        };
+
+        const shouldRender = this.props.isOpen || this.state.shouldRenderWhenClosed;
+
+        const closeOnEsc = this.props.closeOnEsc ?? true;
+        const esc = closeOnEsc && <HandleEsc onPress={this.handleEsc} />;
+
+        return (
+            <div className={styles.drawer} style={style}>
+                {esc}
+                <div className={styles.content}>
+                    {shouldRender && this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+export { Drawer };

package/src/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);
+}