react-miui 0.17.2 → 0.18.0

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

@@ -1,4 +1,5 @@
 import React from "react";
+import classnames from "classnames";
 import { Icon } from "../../icons/Icon.js";
 import styles from "./Pop.module.scss";
 const PopOption = (props) => {
@@ -6,7 +7,7 @@ const PopOption = (props) => {
     const ic = props.icon
         ? React.createElement(Icon, { name: props.icon, className: styles.icon })
         : (((_a = props.forceEmptyIcon) !== null && _a !== void 0 ? _a : true) ? React.createElement("span", { className: styles.fakeIcon }) : null);
-    return (React.createElement("li", { className: styles.li },
+    return (React.createElement("li", { className: classnames(props.className, styles.li) },
         React.createElement("button", { onClick: props.onClick, className: styles.button },
             ic,
             props.children)));

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

@@ -1 +1 @@
-{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACzC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,oBAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QACpD,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAErF,OAAO,CACH,4BAAI,SAAS,EAAE,MAAM,CAAC,EAAE;QACpB,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM;YAAG,EAAE;YAAE,KAAK,CAAC,QAAQ,CAAU,CACtF,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAUvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACzC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,oBAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QACpD,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAErF,OAAO,CACH,4BAAI,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC;QACjD,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM;YAAG,EAAE;YAAE,KAAK,CAAC,QAAQ,CAAU,CACtF,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

@@ -6,6 +6,7 @@ interface Stat {
 interface Props {
     stats: Stat[];
     variant?: "dark";
+    className?: string;
 }
 declare const Stats: React.FC<Props>;
 export { Stats };

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

@@ -1 +1 @@
-{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stats/Stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,IAAI;IACV,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;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"}
+{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stats/Stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,IAAI;IACV,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,UAAU,KAAK;IACX,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwB1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -11,7 +11,7 @@ const Stats = (props) => {
     }
     const cls = classnames(styles.stats, {
         [styles["stats-dark"]]: props.variant === "dark",
-    });
+    }, props.className);
     return (React.createElement("ul", { className: cls }, list));
 };
 export { Stats };

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

@@ -1 +1 @@
-{"version":3,"file":"Stats.js","sourceRoot":"","sources":["../../../../src/components/ui/stats/Stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;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,4BAAI,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI;QACtC,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,CAAC,CAAC,KAAK,CAAQ;QAC/C,8BAAM,SAAS,EAAE,MAAM,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,4BAAI,GAAG,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI,CAAC,CAAC;KAClG;IAED,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;QACjC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,KAAK,MAAM;KACnD,CAAC,CAAC;IAEH,OAAO,CACH,4BAAI,SAAS,EAAE,GAAG,IACb,IAAI,CACJ,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Stats.js","sourceRoot":"","sources":["../../../../src/components/ui/stats/Stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAazC,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,4BAAI,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI;QACtC,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,CAAC,CAAC,KAAK,CAAQ;QAC/C,8BAAM,SAAS,EAAE,MAAM,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,4BAAI,GAAG,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI,CAAC,CAAC;KAClG;IAED,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;QACjC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,KAAK,MAAM;KACnD,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEpB,OAAO,CACH,4BAAI,SAAS,EAAE,GAAG,IACb,IAAI,CACJ,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/ui/tabs/Selector.d.ts

@@ -4,6 +4,7 @@ interface Props<T extends string> {
     values: Value<T>[];
     value?: string;
     onChange?: (value: string) => void;
+    className?: string;
 }
 declare const Selector: <T extends string>(props: Props<T>) => React.ReactElement<any, any> | null;
 export { Selector };

package/esm/components/ui/tabs/Selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAOjD,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC5B,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,QAAA,MAAM,QAAQ,4EAeb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAOjD,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC5B,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,4EAeb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/esm/components/ui/tabs/Selector.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from "react";
+import classnames from "classnames";
 import { toObjectValue } from "../../../utils/index.js";
 import { Item } from "./Item.js";
 import styles from "./Selector.module.scss";
@@ -15,7 +16,7 @@ const Selector = (props) => {
         const ov = toObjectValue(v);
         return React.createElement(Item, { key: ov.value, value: ov, onClick: handleCurrent, active: crr === ov.value });
     });
-    return React.createElement("div", { className: styles.selector }, vals);
+    return React.createElement("div", { className: classnames(props.className, styles.selector) }, vals);
 };
 export { Selector };
 //# sourceMappingURL=Selector.js.map

package/esm/components/ui/tabs/Selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAQ5C,MAAM,QAAQ,GAAG,CAAmB,KAAe,EAAkC,EAAE;;IACnF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;;QAChD,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,MAAM,GAAG,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,OAAO,CAAC;IAEnC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QAC9B,MAAM,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAC5B,OAAO,oBAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,KAAK,GAAI,CAAC;IAChG,CAAC,CAAC,CAAC;IACH,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,IAAG,IAAI,CAAO,CAAC;AACzD,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Selector.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAS5C,MAAM,QAAQ,GAAG,CAAmB,KAAe,EAAkC,EAAE;;IACnF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;;QAChD,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,MAAM,GAAG,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,OAAO,CAAC;IAEnC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QAC9B,MAAM,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAC5B,OAAO,oBAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,KAAK,GAAI,CAAC;IAChG,CAAC,CAAC,CAAC;IACH,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAG,IAAI,CAAO,CAAC;AACtF,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/esm/components/ui/toaster/Toaster.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import type { Toast } from "./types";
-declare type ToasterFn = (text: string) => void;
+type ToasterFn = (text: string) => void;
 interface Props {
+    children: React.ReactNode;
 }
 interface State {
     list: Toast[];

package/esm/components/ui/toaster/Toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAKrC,aAAK,SAAS,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AASxC,UAAU,KAAK;CAAG;AAClB,UAAU,KAAK;IACX,IAAI,EAAE,KAAK,EAAE,CAAC;CACjB;AAID,cAAM,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACpC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO;IAQjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CA6BnB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK5B;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAa/B;IAEc,MAAM;CAYzB;AAED,QAAA,MAAM,UAAU,iBAAmC,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAKrC,KAAK,SAAS,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AASxC,UAAU,KAAK;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AACD,UAAU,KAAK;IACX,IAAI,EAAE,KAAK,EAAE,CAAC;CACjB;AAID,cAAM,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACpC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO;IAQjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CA6BnB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK5B;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAa/B;IAEc,MAAM;CAYzB;AAED,QAAA,MAAM,UAAU,iBAAmC,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC"}

package/esm/components/ui/toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,MAAM,cAAc,GAAG,aAAa,CAAY,GAAG,EAAE;IACjD,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC;AAChC,IAAI,OAAO,GAAG,CAAC,CAAC;AAOhB,MAAM,eAAe,GAAG,IAAI,CAAC;AAE7B,MAAM,eAAgB,SAAQ,KAAK,CAAC,SAAuB;IACvD,YAAmB,KAAY,EAAE,OAAgB;QAC7C,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAOT,SAAI,GAAG,CAAC,IAAY,EAAE,EAAE;YACrC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAExB,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;YACtC,MAAM,IAAI,GAAG,KAAK,CAAC;YAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACnB,GAAG,IAAI;gBACP,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;wBACjB,EAAE;wBACF,IAAI;wBACJ,IAAI;qBACP,CAAC;aACL,CAAC,CAAC,CAAC;YAEJ,UAAU,CAAC,GAAG,EAAE;gBACZ,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBACnB,GAAG,IAAI;oBACP,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;wBACpB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;4BACb,OAAO,CAAC,CAAC;yBACZ;wBACD,OAAO;4BACH,GAAG,CAAC;4BACJ,IAAI,EAAE,IAAI;yBACb,CAAC;oBACN,CAAC,CAAC;iBACL,CAAC,CAAC,CAAC;YACR,CAAC,EAAE,eAAe,CAAC,CAAC;QACxB,CAAC,CAAC;QAEe,kBAAa,GAAG,CAAC,EAAe,EAAE,EAAE;YACjD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACnB,GAAG,IAAI;gBACP,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;aAC3C,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;QAEe,qBAAgB,GAAG,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACnB,GAAG,IAAI;gBACP,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;oBACpB,IAAI,CAAC,CAAC,IAAI,EAAE;wBACR,OAAO,CAAC,CAAC;qBACZ;oBACD,OAAO;wBACH,GAAG,CAAC;wBACJ,IAAI,EAAE,IAAI;qBACb,CAAC;gBACN,CAAC,CAAC;aACL,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;QAxDE,IAAI,CAAC,KAAK,GAAG;YACT,IAAI,EAAE,EAAE;SACX,CAAC;IACN,CAAC;IAuDe,MAAM;QAClB,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAC5C,OAAO,oBAAC,YAAY,IAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,GAAI,CAAC;QAC/E,CAAC,CAAC,CAAC;QAEH,OAAO,CACH,oBAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,IAAI;YACpC,aAAa;YACb,IAAI,CAAC,KAAK,CAAC,QAAQ,CACE,CAC7B,CAAC;IACN,CAAC;CACJ;AAED,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.tsx"],"names":[],"mappings":"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"}

package/esm/components/utils/If.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 interface Props {
     condition?: unknown;
+    children: React.ReactNode;
 }
 declare const If: React.FC<Props>;
 export { If };

package/esm/components/utils/If.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"If.d.ts","sourceRoot":"","sources":["../../../src/components/utils/If.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKvB,CAAC;AAEF,OAAO,EAAE,EAAE,EAAE,CAAC"}
+{"version":3,"file":"If.d.ts","sourceRoot":"","sources":["../../../src/components/utils/If.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKvB,CAAC;AAEF,OAAO,EAAE,EAAE,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"If.js","sourceRoot":"","sources":["../../../src/components/utils/If.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,EAAE,GAAoB,CAAC,KAAK,EAAE,EAAE;IAClC,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;QAC1B,OAAO,0CAAG,KAAK,CAAC,QAAQ,CAAI,CAAC;KAChC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,OAAO,EAAE,EAAE,EAAE,CAAC"}
+{"version":3,"file":"If.js","sourceRoot":"","sources":["../../../src/components/utils/If.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,EAAE,GAAoB,CAAC,KAAK,EAAE,EAAE;IAClC,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;QAC1B,OAAO,0CAAG,KAAK,CAAC,QAAQ,CAAI,CAAC;KAChC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,OAAO,EAAE,EAAE,EAAE,CAAC"}

package/esm/types/form.d.ts

@@ -2,6 +2,6 @@ interface ObjectValue {
     value: string;
     label: string;
 }
-declare type Value<T extends string> = T | ObjectValue;
+type Value<T extends string> = T | ObjectValue;
 export type { ObjectValue, Value, };
 //# sourceMappingURL=form.d.ts.map

package/esm/types/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/types/form.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE;AACtD,aAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,WAAW,CAAC;AAE/C,YAAY,EACR,WAAW,EACX,KAAK,GACR,CAAC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/types/form.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE;AACtD,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,WAAW,CAAC;AAE/C,YAAY,EACR,WAAW,EACX,KAAK,GACR,CAAC"}

package/esm/types.d.ts

@@ -1,4 +1,4 @@
 import type React from "react";
-declare type AnyComponent = React.ComponentClass | React.FC;
+type AnyComponent<P> = React.ComponentClass<P> | React.FC<P>;
 export type { AnyComponent, };
 //# sourceMappingURL=types.d.ts.map

package/esm/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,aAAK,YAAY,GAAG,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,EAAE,CAAC;AAEpD,YAAY,EACR,YAAY,GACf,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,YAAY,CAAC,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAE7D,YAAY,EACR,YAAY,GACf,CAAC"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-miui",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
     "test": "NODE_ENV=test jest",
-    "docs": "typedoc src/index.ts --out docs --includeVersion --pluginPages ./pagesconfig.json",
+    "docs": "typedoc src/index.ts --skipErrorChecking --out docs --includeVersion --pluginPages ./pagesconfig.json",
     "compile": "yarn compile:esm && yarn compile:cjs",
     "compile:esm": "rm -rf esm && tsc --project tsconfig.esm.json && node ./build-scripts/compile.esm.after.mjs",
     "compile:cjs": "rm -rf dist && tsc --project tsconfig.cjs.json && node ./build-scripts/compile.cjs.after.mjs",
@@ -16,60 +16,65 @@
     "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
     "start:dev": "next dev",
     "deploy:dev": "next build && next export && netlify deploy --dir out",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "updates": "npx --yes npm-check-updates --dep prod",
+    "updates:dev": "npx --yes npm-check-updates --dep dev",
+    "updates:all": "npx --yes npm-check-updates"
   },
   "exports": {
     "./global.scss": "./src/global.scss",
     ".": {
       "require": "./dist/index.js",
-      "default": "./esm/index.js"
+      "default": "./esm/index.js",
+      "types": "./esm/index.d.ts"
     }
   },
   "main": "./dist/index.js",
   "types": "./esm/index.d.ts",
   "module": "./esm/index.js",
   "dependencies": {
-    "classnames": "^2.3.1",
-    "nodemon": "^2.0.19",
+    "classnames": "^2.3.2",
+    "nodemon": "^2.0.20",
     "oop-timers": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-typescript": "^7.12.7",
-    "@dzek69/eslint-config-base": "^2.2.0",
+    "@babel/core": "^7.19.3",
+    "@babel/preset-env": "^7.19.3",
+    "@babel/preset-typescript": "^7.18.6",
+    "@dzek69/eslint-config-base": "^2.3.0",
     "@dzek69/eslint-config-import": "^1.0.0",
     "@dzek69/eslint-config-import-typescript": "^1.0.0",
     "@dzek69/eslint-config-react": "^1.2.2",
-    "@dzek69/eslint-config-typescript": "^1.0.1",
+    "@dzek69/eslint-config-typescript": "^1.0.2",
     "@knodes/typedoc-plugin-pages": "^0.23.1",
     "@types/jest": "^29.2.0",
-    "@types/react": "^17.0.4",
-    "@types/react-dom": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.30.3",
-    "@typescript-eslint/parser": "^5.30.3",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
     "babel-plugin-module-extension": "^0.1.3",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^8.18.0",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "eslint": "^8.24.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.24.0",
     "fast-glob": "^3.2.7",
-    "fs-extra": "^9.0.1",
+    "fs-extra": "^10.1.0",
     "husky": "^8.0.1",
     "jest": "^29.2.2",
     "must": "^0.13.4",
-    "next": "^12.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-use": "^17.2.4",
+    "next": "^13.1.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-use": "^17.4.0",
     "sass": "^1.35.2",
     "ts-node": "^10.9.1",
-    "typedoc": "^0.23.8",
-    "typescript": "^4.7.4"
+    "typedoc": "^0.23.15",
+    "typescript": "^4.9.5",
+    "prettier": "^2.8.3"
   },
   "peerDependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "husky": {
     "hooks": {
@@ -77,7 +82,7 @@
     }
   },
   "libraryTemplate": {
-    "version": "3.5.3",
+    "version": "3.7.0",
     "language": "typescript",
     "fixDefaultForCommonJS": true,
     "jsx": true

package/src/components/form/Checkbox.tsx

@@ -13,13 +13,15 @@ interface Props {
     checked?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    className?: string;
+    children: React.ReactNode;
 }
 
 const Checkbox: React.FC<Props> = (props) => {
     const style: React.CSSProperties = {};
     props.color && (style.color = props.color);
 
-    const cls = classnames(styles.checkbox, {
+    const cls = classnames(props.className, styles.checkbox, {
         [styles.disabled]: props.disabled,
         [styles.readOnly]: props.readOnly,
     });

package/src/components/form/Label.tsx

@@ -9,6 +9,8 @@ import styles from "./Label.module.scss";
 interface Props {
     label?: React.ReactNode;
     variant?: "big";
+    className?: string;
+    children: React.ReactNode;
 }
 
 const Label: React.FC<Props> = (props) => {
@@ -20,8 +22,10 @@ const Label: React.FC<Props> = (props) => {
 
     const label = props.label ? <div className={labelCls}>{props.label}</div> : null;
 
+    const rootCls = classnames(props.className, styles.label);
+
     return (
-        <label className={styles.label}>
+        <label className={rootCls}>
             {label}
             {props.children}
         </label>

package/src/components/form/Toggle.tsx

@@ -11,6 +11,7 @@ interface Props {
     undeterminedClickValue?: boolean;
     disabled?: boolean;
     value: boolean | null;
+    className?: string;
 }
 
 const Toggle: React.FC<Props> = (props) => {
@@ -24,7 +25,7 @@ const Toggle: React.FC<Props> = (props) => {
         props.onChange(e.target.checked);
     }, [props.onChange, props.value]);
 
-    const cls = classnames(styles.container, {
+    const cls = classnames(props.className, styles.container, {
         [styles.disabled]: props.disabled,
     });
 

package/src/components/icons/Icon.tsx

@@ -29,7 +29,7 @@ interface Props {
     className?: string;
 }
 
-const iconsMap = new Map<ICON, AnyComponent>([
+const iconsMap = new Map<ICON, AnyComponent<{ className?: string }>>([
     [ICON.checkmark, Checkmark],
     [ICON.back, Back],
     [ICON.forward, Forward],

package/src/components/layout/card/Card.tsx

@@ -10,11 +10,13 @@ type Variants = "margin";
 
 interface Props {
     variant?: Variants;
+    className?: string;
+    children: React.ReactNode;
 }
 
 const Card: React.FC<Props> = (props) => {
     const v = makeVariants(props.variant);
-    const cls = classnames(styles.card, {
+    const cls = classnames(props.className, styles.card, {
         [styles.margin]: v.includes("margin"),
     });
 

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

@@ -19,6 +19,7 @@ interface Props {
     className?: string;
     before?: ReactNode;
     after?: ReactNode;
+    children: React.ReactNode;
 }
 
 const Header: React.FC<Props> = (props) => {

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

@@ -1,6 +1,8 @@
 import React from "react";
 import type { ReactNode } from "react";
 
+import classnames from "classnames";
+
 import type { ICON } from "../../icons/Icon";
 
 import { Icon } from "../../icons/Icon.js";
@@ -9,6 +11,7 @@ import styles from "./HeaderIconAction.module.scss";
 
 interface LinkProps { // @TODO extract? - same on list item
     href: string;
+    children: React.ReactNode;
 }
 
 interface Props {
@@ -18,11 +21,11 @@ interface Props {
     to?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
     label?: ReactNode;
-    // if className ever goes here make sure that `a` gets classnames merged
+    className?: string;
 }
 
 const HeaderIconAction: React.FC<Props> = (props) => {
-    const { icon, label, href, to, Link, ...restProps } = props;
+    const { icon, label, href, to, Link, className, ...restProps } = props;
 
     let content: ReactNode = icon;
     if (typeof icon === "string") {
@@ -34,15 +37,18 @@ const HeaderIconAction: React.FC<Props> = (props) => {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        return <Link href={to} {...restProps}><a className={styles.a}>{content}</a></Link>;
+        const aCls = classnames(props.className, styles.a);
+        return <Link href={to} {...restProps}><a className={aCls}>{content}</a></Link>;
     }
 
     if (href) {
-        return <a href={href} className={styles.a} {...restProps}>{content}</a>;
+        const aCls = classnames(props.className, styles.a);
+        return <a href={href} className={aCls} {...restProps}>{content}</a>;
     }
 
+    const btnCls = classnames(props.className, styles.btn);
     return (
-        <button className={styles.btn} onClick={props.onClick}>
+        <button className={btnCls} onClick={props.onClick}>
             {content}
         </button>
     );

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

@@ -14,11 +14,13 @@ interface Content {
 
 interface ContentProps {
     className?: string;
+    children: React.ReactNode;
 }
 
 interface Props {
     position?: "top" | "left" | "right" | "bottom";
     className?: string;
+    children: React.ReactNode;
 }
 
 const StickyHeader: React.FC<Props> & Content = (props) => {

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

@@ -12,6 +12,7 @@ type Variant = "inset";
 interface Props {
     className?: string;
     variant?: Variant | Variant[];
+    children: React.ReactNode;
 }
 
 const Header: React.FC<Props> = (props) => {

package/src/components/layout/list/Item.tsx

@@ -11,6 +11,7 @@ import { Label } from "./Label.js";
 
 interface LinkProps {
     href: string;
+    children: React.ReactNode;
 }
 
 type Variant = "inset";
@@ -24,6 +25,7 @@ interface Props {
     ratio?: string; // @TODO number/number/number/.. type?
     variant?: Variant | Variant[];
     selected?: boolean | undefined;
+    children: React.ReactNode;
 }
 
 interface SubComponents {

package/src/components/layout/list/Label.tsx

@@ -8,6 +8,7 @@ import styles from "./Label.module.scss";
 interface Props {
     sub?: ReactNode;
     className?: string;
+    children: React.ReactNode;
 }
 
 const Label: React.FC<Props> = (props) => {

package/src/components/layout/list/List.tsx

@@ -13,6 +13,7 @@ type Variant = "inset";
 interface Props {
     className?: string;
     variant?: Variant | Variant[];
+    children: React.ReactNode;
 }
 
 interface SubComponents {

package/src/components/layout/list/Value.tsx

@@ -6,6 +6,7 @@ import styles from "./Value.module.scss";
 
 interface Props {
     className?: string;
+    children: React.ReactNode;
 }
 
 const Value: React.FC<Props> = (props) => {

package/src/components/layout/section/SearchContainer.tsx

@@ -1,10 +1,17 @@
 import React from "react";
 
+import classnames from "classnames";
+
 import styles from "./SearchContainer.module.scss";
 
-const SearchContainer: React.FC = (props) => {
+interface Props {
+    className?: string;
+    children: React.ReactNode;
+}
+
+const SearchContainer: React.FC<Props> = (props) => {
     return (
-        <section className={styles.section}>{props.children}</section>
+        <section className={classnames(props.className, styles.section)}>{props.children}</section>
     );
 };
 

package/src/components/layout/section/Section.tsx

@@ -15,12 +15,14 @@ type Variant = "horizontal" | "vertical";
 
 interface Props {
     variant?: Variant | Variant[];
+    className?: string;
+    children: React.ReactNode;
 }
 
 const Section: React.FC<Props> & SubComponents = (props) => {
     const v = makeVariants(props.variant);
 
-    const cls = classnames(styles.section, {
+    const cls = classnames(props.className, styles.section, {
         [styles.vertical]: v.includes("vertical"),
         [styles.horizontal]: v.includes("horizontal"),
     });

package/src/components/layout/section/SectionContainer.tsx

@@ -2,7 +2,11 @@ import React from "react";
 
 import styles from "./SectionContainer.module.scss";
 
-const SectionContainer: React.FC = (props) => {
+interface Props {
+    children: React.ReactNode;
+}
+
+const SectionContainer: React.FC<Props> = (props) => {
     return (
         <div className={styles.container}>{props.children}</div>
     );

package/src/components/ui/action/Action.tsx

@@ -11,6 +11,7 @@ import styles from "./Action.module.scss";
 
 interface LinkProps { // @TODO extract? - same on list item
     href: string;
+    children: React.ReactNode;
 }
 
 interface Props {

package/src/components/ui/action/EqualActions.tsx

@@ -8,6 +8,7 @@ import styles from "./EqualActions.module.scss";
 interface Props {
     className?: string;
     mode?: "horizontal" | "vertical";
+    children: React.ReactNode;
 }
 
 const EqualActions: React.FC<Props> = (props) => {

package/src/components/ui/directionPad/Pad.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import classnames from "classnames";
+
 import { PadButton as Button } from "./Button.js";
 import { PadMiddle as Middle } from "./Middle.js";
 import styles from "./Pad.module.scss";
@@ -11,11 +13,12 @@ interface Props {
     onRightPress?: () => void;
     onMiddlePress?: () => void;
     middleLabel?: string;
+    className?: string;
 }
 
 const Pad: React.FC<Props> = (props) => {
     return (
-        <div className={styles.pad}>
+        <div className={classnames(props.className, styles.pad)}>
             <div className={styles.pad__line}>
                 <Button onClick={props.onUpPress} />
             </div>

package/src/components/ui/drawer/Drawer.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 
 import { Timeout } from "oop-timers";
+import classnames from "classnames";
 
 import { HandleEsc } from "../../utils/HandleEsc.js";
 
@@ -12,6 +13,8 @@ interface Props {
     isOpen: boolean;
     closeOnEsc?: boolean;
     onClose: () => void;
+    className?: string;
+    children: React.ReactNode;
 }
 
 interface State {
@@ -76,8 +79,10 @@ class Drawer extends Component<Props, State> {
         const closeOnEsc = this.props.closeOnEsc ?? true;
         const esc = closeOnEsc && <HandleEsc onPress={this.handleEsc} />;
 
+        const cls = classnames(this.props.className, styles.drawer);
+
         return (
-            <div className={styles.drawer} style={style}>
+            <div className={cls} style={style}>
                 {esc}
                 <div className={styles.content}>
                     {shouldRender && this.props.children}

package/src/components/ui/message/Message.tsx

@@ -8,6 +8,7 @@ interface Props {
     type: "warning" | "error" | "info" | "tip";
     variant?: "box";
     className?: string;
+    children: React.ReactNode;
 }
 
 const Message: React.FC<Props> = (props) => {