react-miui 0.15.2 → 0.15.5

package/esm/components/form/choice/ChoiceItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceItem.js","sourceRoot":"","sources":["../../../../src/components/form/choice/ChoiceItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAU3C,MAAM,UAAU,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC1C,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAsC,EAAE,EAAE;QACxE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACH,+BAAO,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC;QACtC,+BACI,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EACxB,OAAO,EAAE,KAAK,CAAC,MAAM,EACrB,QAAQ,EAAE,YAAY,GACxB;QACF,kCAAO,KAAK,CAAC,KAAK,CAAC,KAAK,CAAQ,CAC5B,CACX,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"ChoiceItem.js","sourceRoot":"","sources":["../../../../src/components/form/choice/ChoiceItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAU3C,MAAM,UAAU,GAAG,CAAmB,KAAe,EAAkC,EAAE;IACrF,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAsC,EAAE,EAAE;QACxE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAuC,CAAC,CAAC;IAC5E,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACH,+BAAO,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC;QACtC,+BACI,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EACxB,OAAO,EAAE,KAAK,CAAC,MAAM,EACrB,QAAQ,EAAE,YAAY,GACxB;QACF,kCAAO,KAAK,CAAC,KAAK,CAAC,KAAK,CAAQ,CAC5B,CACX,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -1,6 +1,7 @@
 .header {
     --border-color: var(--header-border);
     --background-color: var(--header-bg);
+    background-clip: padding-box;
     background: var(--background-color);
     display: flex;
     align-items: center;

package/esm/components/layout/header/StickyHeader.d.ts

@@ -7,6 +7,7 @@ interface ContentProps {
 }
 interface Props {
     position?: "top" | "left" | "right" | "bottom";
+    className?: string;
 }
 declare const StickyHeader: React.FC<Props> & Content;
 export { StickyHeader };

package/esm/components/layout/header/StickyHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,OAAO;IAEb,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;CACnC;AAED,UAAU,YAAY;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;CAClD;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,OAoCrC,CAAC;AAMF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StickyHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,OAAO;IAEb,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;CACnC;AAED,UAAU,YAAY;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,OAoCrC,CAAC;AAMF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/components/layout/header/StickyHeader.js

@@ -15,7 +15,7 @@ const StickyHeader = (props) => {
     }
     header = header;
     content = content;
-    const cls = classnames(styles.stickyHeader, styles[`stickyHeader--${position}`]);
+    const cls = classnames(styles.stickyHeader, styles[`stickyHeader--${position}`], props.className);
     const contentCls = classnames(styles.stickyHeader__content, styles[`stickyHeader__content--${position}`], content.props.className);
     return (React.createElement("div", { className: cls },
         React.cloneElement(header, { position }),

package/esm/components/layout/header/StickyHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"StickyHeader.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,MAAM,GAAG,GAAG,IAAI,SAAS,CAAC,mEAAmE,CAAC,CAAC;AAe/F,MAAM,YAAY,GAA8B,CAAC,KAAK,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;IAEzC,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAGxD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;QACvB,MAAM,GAAG,CAAC;KACb;IAED,IAAI,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,EACtF,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC;IAE1G,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE;QACrB,MAAM,GAAG,CAAC;KACb;IAED,MAAM,GAAG,MAAe,CAAC;IACzB,OAAO,GAAG,OAAgB,CAAC;IAE3B,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,iBAAiB,QAAQ,EAAE,CAAC,CAAC,CAAC;IAEjF,MAAM,UAAU,GAAG,UAAU,CACzB,MAAM,CAAC,qBAAqB,EAC5B,MAAM,CAAC,0BAA0B,QAAQ,EAAE,CAAC,EAC3C,OAAmC,CAAC,KAAK,CAAC,SAAS,CACvD,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG;QACd,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC;QACzC,6BAAK,SAAS,EAAE,UAAU,IACrB,OAAO,CACN,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,YAAY,CAAC,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpC,OAAO,0CAAG,QAAQ,CAAI,CAAC;AAC3B,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StickyHeader.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,MAAM,GAAG,GAAG,IAAI,SAAS,CAAC,mEAAmE,CAAC,CAAC;AAgB/F,MAAM,YAAY,GAA8B,CAAC,KAAK,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;IAEzC,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAGxD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;QACvB,MAAM,GAAG,CAAC;KACb;IAED,IAAI,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,EACtF,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC;IAE1G,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE;QACrB,MAAM,GAAG,CAAC;KACb;IAED,MAAM,GAAG,MAAe,CAAC;IACzB,OAAO,GAAG,OAAgB,CAAC;IAE3B,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,iBAAiB,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAElG,MAAM,UAAU,GAAG,UAAU,CACzB,MAAM,CAAC,qBAAqB,EAC5B,MAAM,CAAC,0BAA0B,QAAQ,EAAE,CAAC,EAC3C,OAAmC,CAAC,KAAK,CAAC,SAAS,CACvD,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG;QACd,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC;QACzC,6BAAK,SAAS,EAAE,UAAU,IACrB,OAAO,CACN,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,YAAY,CAAC,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpC,OAAO,0CAAG,QAAQ,CAAI,CAAC;AAC3B,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/components/layout/table/Table.js

@@ -7,7 +7,7 @@ const Table = ({ className, children, variant, ...props }) => {
     const cls = classnames(className, {
         [styles.table]: !v.includes("raw"),
         [styles.striped]: v.includes("striped"),
-        [styles.full]: v.includes("wide"),
+        [styles.wide]: v.includes("wide"),
         [styles.centered]: v.includes("centered"),
     });
     return React.createElement("table", { className: cls, ...props }, children);

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

@@ -14,42 +14,43 @@
     background: white;
     margin: 0;
     padding: 0;
+    list-style-type: none;
+}
 
-    ul, li {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
+.li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 
-    li + 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));
-        }
+.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;
 
-        &:hover {
-            background: var(--active-bg);
-        }
+    &:hover {
+        background: var(--active-bg);
     }
 }
 
+.icon {
+    fill: currentColor;
+    margin-right: calc(42px / var(--ratio-dimensions));
+}
+
 .fakeIcon {
     display: inline-block;
     width: 16px;

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

@@ -1 +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"}
+{"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,CAU9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

@@ -4,10 +4,10 @@ import styles from "./Pop.module.scss";
 const PopOption = (props) => {
     var _a;
     const ic = props.icon
-        ? React.createElement(Icon, { name: 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", null,
-        React.createElement("button", { onClick: props.onClick },
+    return (React.createElement("li", { 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;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,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,GAAI;QAC5B,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;QAAI,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO;YAAG,EAAE;YAAE,KAAK,CAAC,QAAQ,CAAU,CAAK,CACzE,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;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,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"}

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

@@ -1,10 +1,10 @@
 import React from "react";
 import type { Value } from "../../../types/form";
-interface Props {
-    values: Value[];
+interface Props<T extends string> {
+    values: Value<T>[];
     value?: string;
     onChange?: (value: string) => void;
 }
-declare const Selector: React.FC<Props>;
+declare const Selector: <T extends string>(props: Props<T>) => React.ReactElement<any, any> | null;
 export { Selector };
 //# sourceMappingURL=Selector.d.ts.map

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;AAKjD,UAAU,KAAK;IACX,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAe7B,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;AAErD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAKjD,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"}

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;AAGrD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAQ5C,MAAM,QAAQ,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACxC,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,+CAAd,KAAK,EAAY,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;AAGrD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,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,+CAAd,KAAK,EAAY,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"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface Props {
+    condition?: unknown;
+}
+declare const If: React.FC<Props>;
+export { If };
+//# sourceMappingURL=If.d.ts.map

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

@@ -0,0 +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"}

package/esm/components/utils/If.js

@@ -0,0 +1,9 @@
+import React from "react";
+const If = (props) => {
+    if (Boolean(props.condition)) {
+        return React.createElement(React.Fragment, null, props.children);
+    }
+    return null;
+};
+export { If };
+//# sourceMappingURL=If.js.map

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

@@ -0,0 +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"}

package/esm/index.d.ts

@@ -28,5 +28,6 @@ export * from "./components/ui/stats/Stats.js";
 export * from "./components/ui/tabs/Selector.js";
 export * from "./components/ui/toaster/Toaster.js";
 export * from "./components/utils/HandleEsc.js";
+export * from "./components/utils/If.js";
 export * from "./components/utils/Spacer.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,6BAA6B,CAAC;AAC5C,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;AACvD,cAAc,oCAAoC,CAAC;AAEnD,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,gCAAgC,CAAC;AAE/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,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,6BAA6B,CAAC;AAC5C,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;AACvD,cAAc,oCAAoC,CAAC;AAEnD,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,gCAAgC,CAAC;AAE/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}

package/esm/index.js

@@ -28,5 +28,6 @@ export * from "./components/ui/stats/Stats.js";
 export * from "./components/ui/tabs/Selector.js";
 export * from "./components/ui/toaster/Toaster.js";
 export * from "./components/utils/HandleEsc.js";
+export * from "./components/utils/If.js";
 export * from "./components/utils/Spacer.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,6BAA6B,CAAC;AAC5C,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;AACvD,cAAc,oCAAoC,CAAC;AAEnD,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,gCAAgC,CAAC;AAE/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,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,6BAA6B,CAAC;AAC5C,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;AACvD,cAAc,oCAAoC,CAAC;AAEnD,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,gCAAgC,CAAC;AAE/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}

package/esm/types/form.d.ts

@@ -2,6 +2,6 @@ interface ObjectValue {
     value: string;
     label: string;
 }
-declare type Value = string | ObjectValue;
+declare 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,GAAG,MAAM,GAAG,WAAW,CAAC;AAElC,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,aAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,WAAW,CAAC;AAE/C,YAAY,EACR,WAAW,EACX,KAAK,GACR,CAAC"}

package/esm/utils/toObjectValue.d.ts

@@ -1,4 +1,4 @@
 import type { ObjectValue, Value } from "../types/form";
-declare const toObjectValue: (s: Value) => ObjectValue;
+declare const toObjectValue: <T extends string>(s: Value<T>) => ObjectValue;
 export { toObjectValue, };
 //# sourceMappingURL=toObjectValue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toObjectValue.d.ts","sourceRoot":"","sources":["../../src/utils/toObjectValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,aAAa,MAAO,KAAK,KAAG,WAEjC,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}
+{"version":3,"file":"toObjectValue.d.ts","sourceRoot":"","sources":["../../src/utils/toObjectValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,aAAa,qCAAoC,WAEtD,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}

package/esm/utils/toObjectValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"toObjectValue.js","sourceRoot":"","sources":["../../src/utils/toObjectValue.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,CAAC,CAAQ,EAAe,EAAE;IAC5C,OAAO,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}
+{"version":3,"file":"toObjectValue.js","sourceRoot":"","sources":["../../src/utils/toObjectValue.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,CAAmB,CAAW,EAAe,EAAE;IACjE,OAAO,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.15.2",
+  "version": "0.15.5",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {

package/src/components/form/choice/Choice.module.scss

@@ -15,7 +15,7 @@
 
     span {
         display: flex;
-        padding: 0;
+        padding: 0 1em;
         flex: 1;
         height: 100%;
         align-items: center;
@@ -23,6 +23,7 @@
         font-size: calc(24px / var(--ratio-font));
         color: var(--choice-text);
         background: var(--choice-bg);
+        white-space: nowrap;
     }
 
     display: flex;
@@ -30,6 +31,9 @@
     position: relative;
     border-radius: 8px;
     overflow: hidden;
+    width: max-content;
+    margin-left: auto;
+    margin-right: auto;
 
     label {
         flex: 1;
@@ -41,3 +45,12 @@
         }
     }
 }
+
+.wide {
+    width: 100%;
+}
+
+.left {
+    margin-left: unset;
+    margin-right: unset;
+}

package/src/components/form/choice/Choice.tsx

@@ -1,18 +1,25 @@
 import React from "react";
+import classnames from "classnames";
 
-import type { Value } from "../../../types/form";
-import { toObjectValue } from "../../../utils";
+import type { ObjectValue, Value } from "../../../types/form";
+import { makeVariants, toObjectValue } from "../../../utils";
 import { ChoiceItem } from "./ChoiceItem";
 import styles from "./Choice.module.scss";
 
-interface Props {
-    values: Value[];
+type Variant = "wide" | "left";
+
+interface Props<T extends string> {
+    values: Value<T>[];
     value: string;
     name: string;
-    onChange: (value: string) => void;
+    onChange: (value: Exclude<Value<T>, ObjectValue>) => void;
+    className?: string;
+    variant?: Variant | Variant[];
 }
 
-const Choice: React.FC<Props> = (props) => {
+// @TODO auto width mode by default?
+
+const Choice = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<T>>> => {
     const opts = props.values.map(option => {
         const opt = toObjectValue(option);
         return (
@@ -26,7 +33,15 @@ const Choice: React.FC<Props> = (props) => {
         );
     });
 
-    return <div className={styles.choice}>{opts}</div>;
+    const v = makeVariants(props.variant);
+
+    const cls = classnames(
+        styles.choice, props.className,
+        { [styles.wide]: v.includes("wide") },
+        { [styles.left]: v.includes("left") },
+    );
+
+    return <div className={cls}>{opts}</div>;
 };
 
 export { Choice };

package/src/components/form/choice/ChoiceItem.tsx

@@ -1,16 +1,16 @@
 import React, { useCallback } from "react";
-import type { ObjectValue } from "../../../types/form";
+import type { ObjectValue, Value } from "../../../types/form";
 
-interface Props {
+interface Props<T extends string> {
     name: string;
     value: ObjectValue;
-    onChange: (value: string) => void;
+    onChange: (value: Exclude<Value<T>, ObjectValue>) => void;
     active: boolean;
 }
 
-const ChoiceItem: React.FC<Props> = (props) => {
+const ChoiceItem = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<T>>> => {
     const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        props.onChange(e.currentTarget.value);
+        props.onChange(e.currentTarget.value as Exclude<Value<T>, ObjectValue>);
     }, [props.onChange]);
 
     return (

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

@@ -1,6 +1,7 @@
 .header {
     --border-color: var(--header-border);
     --background-color: var(--header-bg);
+    background-clip: padding-box;
     background: var(--background-color);
     display: flex;
     align-items: center;

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

@@ -17,6 +17,7 @@ interface ContentProps {
 
 interface Props {
     position?: "top" | "left" | "right" | "bottom";
+    className?: string;
 }
 
 const StickyHeader: React.FC<Props> & Content = (props) => {
@@ -39,7 +40,7 @@ const StickyHeader: React.FC<Props> & Content = (props) => {
     header = header as never; // @TODO find a better way to silence TS on cloneElement
     content = content as never;
 
-    const cls = classnames(styles.stickyHeader, styles[`stickyHeader--${position}`]);
+    const cls = classnames(styles.stickyHeader, styles[`stickyHeader--${position}`], props.className);
 
     const contentCls = classnames(
         styles.stickyHeader__content,

package/src/components/layout/table/Table.tsx

@@ -18,7 +18,7 @@ const Table: React.FC<React.TableHTMLAttributes<HTMLTableElement> & Props> = (
     const cls = classnames(className, {
         [styles.table]: !v.includes("raw"),
         [styles.striped]: v.includes("striped"),
-        [styles.full]: v.includes("wide"),
+        [styles.wide]: v.includes("wide"),
         [styles.centered]: v.includes("centered"),
     });
     return <table className={cls} {...props}>{children}</table>;

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

@@ -14,42 +14,43 @@
     background: white;
     margin: 0;
     padding: 0;
+    list-style-type: none;
+}
 
-    ul, li {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
+.li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 
-    li + 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));
-        }
+.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;
 
-        &:hover {
-            background: var(--active-bg);
-        }
+    &:hover {
+        background: var(--active-bg);
     }
 }
 
+.icon {
+    fill: currentColor;
+    margin-right: calc(42px / var(--ratio-dimensions));
+}
+
 .fakeIcon {
     display: inline-block;
     width: 16px;

package/src/components/ui/pop/PopOption.tsx

@@ -13,11 +13,13 @@ interface Props {
 
 const PopOption: React.FC<Props> = (props) => {
     const ic = props.icon
-        ? <Icon name={props.icon} />
+        ? <Icon name={props.icon} className={styles.icon} />
         : ((props.forceEmptyIcon ?? true) ? <span className={styles.fakeIcon} /> : null);
 
     return (
-        <li><button onClick={props.onClick}>{ic}{props.children}</button></li>
+        <li className={styles.li}>
+            <button onClick={props.onClick} className={styles.button}>{ic}{props.children}</button>
+        </li>
     );
 };
 

package/src/components/ui/tabs/Selector.tsx

@@ -5,13 +5,13 @@ import { toObjectValue } from "../../../utils";
 import { Item } from "./Item";
 import styles from "./Selector.module.scss";
 
-interface Props {
-    values: Value[];
+interface Props<T extends string> {
+    values: Value<T>[];
     value?: string;
     onChange?: (value: string) => void;
 }
 
-const Selector: React.FC<Props> = (props) => {
+const Selector = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<T>>> => {
     const [current, setCurrent] = useState(props.value);
 
     const handleCurrent = useCallback((value: string) => {

package/src/components/utils/If.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+interface Props {
+    condition?: unknown;
+}
+
+const If: React.FC<Props> = (props) => {
+    if (Boolean(props.condition)) { // eslint-disable-line no-extra-boolean-cast
+        return <>{props.children}</>;
+    }
+    return null;
+};
+
+export { If };

package/src/demo/Main.module.scss

@@ -5,12 +5,18 @@
     flex-direction: column;
 }
 
+.header {
+    margin: 0;
+    padding: 20px 20px 0;
+}
+
 .component {
     padding: 20px;
     flex: 1;
     overflow: auto;
     display: flex;
     flex-direction: column;
+    margin-top: 20px;
 
     &--transparent {
         background-position: 0px 0px, 10px 10px;

package/src/demo/Main.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import classnames from "classnames";
 
 import type { AnyComponent } from "../types";
@@ -8,6 +8,7 @@ import styles from "./Main.module.scss";
 
 import { safeUseHash } from "./utils/safeUseHash";
 import { componentsMap } from "./componentsMap";
+import { Choice } from "../components/form/choice/Choice";
 
 type BG = "white" | "transparent" | "mobile";
 
@@ -41,23 +42,15 @@ const getComponentByHash = (hash: string): ComponentInfo | null => {
     return null;
 };
 
+const values: BG[] = ["white", "transparent", "mobile"];
+
 const Main: React.FC = (props) => {
-    const [bg, setBg] = useState<BG>("white");
+    const [bg, handleBgChange] = useState<BG>("white");
 
     const hash = safeUseHash();
     const hashWithoutHash = hash.substr(1);
     const info = getComponentByHash(hashWithoutHash);
 
-    const handleTransparentBg = useCallback(() => {
-        setBg("transparent");
-    }, []);
-    const handleWhiteBg = useCallback(() => {
-        setBg("white");
-    }, []);
-    const handleMobileBg = useCallback(() => {
-        setBg("mobile");
-    }, []);
-
     if (!info) {
         return (
             <div className={styles.container}>
@@ -77,9 +70,7 @@ const Main: React.FC = (props) => {
     return (
         <div className={styles.container}>
             <h1 className={styles.header}>{info.name}</h1>
-            <button onClick={handleTransparentBg}>Transparent</button>
-            <button onClick={handleWhiteBg}>White</button>
-            <button onClick={handleMobileBg}>Mobile</button>
+            <Choice values={values} value={bg} name={"x"} onChange={handleBgChange} />
 
             <div className={componentCls}>
                 <Component />