react-miui 0.2.0 → 0.4.2

package/esm/components/icons/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,IAAK,IAGJ;AAHD,WAAK,IAAI;IACL,+BAAuB,CAAA;IACvB,qBAAa,CAAA;AACjB,CAAC,EAHI,IAAI,KAAJ,IAAI,QAGR;AAOD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAqB;IACzC,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAC3B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,IAAI,GAAoB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3D,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,CAAC,CAAC,EAAE;QACJ,MAAM,IAAI,SAAS,CAAC,gBAAgB,GAAG,QAAQ,CAAC,CAAC;KACpD;IACD,OAAO,oBAAC,CAAC,OAAK,KAAK,GAAI,CAAC;AAC5B,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,IAAK,IAIJ;AAJD,WAAK,IAAI;IACL,+BAAuB,CAAA;IACvB,qBAAa,CAAA;IACb,2BAAmB,CAAA;AACvB,CAAC,EAJI,IAAI,KAAJ,IAAI,QAIR;AAOD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAqB;IACzC,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAC3B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;IACjB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC;CAC1B,CAAC,CAAC;AAEH,MAAM,IAAI,GAAoB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3D,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,CAAC,CAAC,EAAE;QACJ,MAAM,IAAI,SAAS,CAAC,gBAAgB,GAAG,QAAQ,CAAC,CAAC;KACpD;IACD,OAAO,oBAAC,CAAC,OAAK,KAAK,GAAI,CAAC;AAC5B,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}

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

@@ -1,8 +1,8 @@
 import React from "react";
 import classnames from "classnames";
 import styles from "./Header.module.scss";
-import { Action } from "../../ui/action/Action";
-import { EqualActions } from "../../ui/action/EqualActions";
+import { Action } from "../../ui/action/Action.js";
+import { EqualActions } from "../../ui/action/EqualActions.js";
 const Header = (props) => {
     const { center, children, variant, position = "top" } = props;
     let justActions = false;

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAgB5D,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAE9D,IAAI,WAAW,GAAG,KAAK,CAAC;IACxB,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,EAAE;QAC7C,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACpD,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACzB,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC;QAC1E,CAAC,CAAC,CAAC;KACN;IAED,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;QAClC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,MAAM;QAClC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,OAAO,KAAK,SAAS;KACrD,EAAE,MAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnD,IAAI,QAAQ,GAAG,QAAQ,CAAC;IACxB,IAAI,WAAW,EAAE;QACb,QAAQ,GAAG,oBAAC,YAAY,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAgB,CAAC;KACjF;IAED,IAAI,MAAiB,CAAC;IACtB,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,EAAE;QACtB,MAAM,GAAG,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,KAAK,CAAC,MAAM,CAAO,CAAC;KAChE;IAED,IAAI,KAAgB,CAAC;IACrB,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;QACrB,KAAK,GAAG,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAC,KAAK,CAAO,CAAC;KAC7D;IAED,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG;QACd,MAAM;QACP,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,IAC1B,QAAQ,CACP;QACL,KAAK,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAgB/D,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAE9D,IAAI,WAAW,GAAG,KAAK,CAAC;IACxB,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,EAAE;QAC7C,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACpD,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACzB,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC;QAC1E,CAAC,CAAC,CAAC;KACN;IAED,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;QAClC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,MAAM;QAClC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,OAAO,KAAK,SAAS;KACrD,EAAE,MAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnD,IAAI,QAAQ,GAAG,QAAQ,CAAC;IACxB,IAAI,WAAW,EAAE;QACb,QAAQ,GAAG,oBAAC,YAAY,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAgB,CAAC;KACjF;IAED,IAAI,MAAiB,CAAC;IACtB,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,EAAE;QACtB,MAAM,GAAG,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,KAAK,CAAC,MAAM,CAAO,CAAC;KAChE;IAED,IAAI,KAAgB,CAAC;IACrB,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;QACrB,KAAK,GAAG,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAC,KAAK,CAAO,CAAC;KAC7D;IAED,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG;QACd,MAAM;QACP,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,IAC1B,QAAQ,CACP;QACL,KAAK,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/layout/list/Header.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const Header: React.FC;
+export { Header };
+//# sourceMappingURL=Header.d.ts.map

package/esm/components/layout/list/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAOnB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/layout/list/Header.js

@@ -0,0 +1,10 @@
+import React from "react";
+import classnames from "classnames";
+import styles from "./Item.module.scss";
+import headerStyles from "./Header.module.scss";
+const Header = (props) => {
+    return (React.createElement("li", { className: classnames(styles.item, headerStyles.header) },
+        React.createElement("div", null, props.children)));
+};
+export { Header };
+//# sourceMappingURL=Header.js.map

package/esm/components/layout/list/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAEhD,MAAM,MAAM,GAAa,CAAC,KAAK,EAAE,EAAE;IAE/B,OAAO,CACH,4BAAI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC;QACvD,iCAAM,KAAK,CAAC,QAAQ,CAAO,CAC1B,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -0,0 +1,8 @@
+.header > * {
+    padding-top: calc(80px / var(--ratio-dimensions));
+    padding-bottom: calc(40px / var(--ratio-dimensions));
+
+    font-size: calc(26px / var(--ratio-font));
+    color: var(--sub);
+    text-transform: uppercase;
+}

package/esm/components/layout/list/Item.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
+import { Value } from "./Value.js";
+import { Label } from "./Label.js";
 interface LinkProps {
     href: string;
 }
@@ -8,7 +10,12 @@ interface Props {
     onClick?: () => void;
     className?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    ratio?: string;
 }
-declare const Item: React.FC<Props>;
+interface SubComponents {
+    Label: typeof Label;
+    Value: typeof Value;
+}
+declare const Item: React.FC<Props> & SubComponents;
 export { Item };
 //# sourceMappingURL=Item.d.ts.map

package/esm/components/layout/list/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;CAChE;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8BzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AAGD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aA6C7B,CAAC;AAKF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/layout/list/Item.js

@@ -1,18 +1,32 @@
 import React from "react";
 import classnames from "classnames";
 import styles from "./Item.module.scss";
+import { Value } from "./Value.js";
+import { Label } from "./Label.js";
 const Item = (props) => {
-    const { className, children, href, to, onClick, Link, ...restProps } = props;
+    const { className, children, href, to, onClick, Link, ratio, ...restProps } = props;
     const cls = classnames(styles.item, className);
     const liProps = {
         className: cls,
     };
+    const r = ratio ? ratio.split("/") : [];
+    const ren = React.Children.map(props.children, (child, index) => {
+        let flex = undefined;
+        if (!r.length && child && typeof child === "object" && "type" in child && child.type === Value) {
+            return child;
+        }
+        if (index in r) {
+            flex = r[index];
+        }
+        return React.createElement("div", { style: { flex } }, child);
+    });
     if (to) {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
         return React.createElement("li", { ...liProps },
-            React.createElement(Link, { href: to, ...restProps }, children));
+            React.createElement(Link, { href: to, ...restProps },
+                React.createElement("a", { className: styles.content }, ren)));
     }
     if (href) {
         const aProps = { ...restProps };
@@ -20,14 +34,16 @@ const Item = (props) => {
             aProps.onClick = onClick;
         }
         return React.createElement("li", { ...liProps },
-            React.createElement("a", { href: href, ...aProps }, children));
+            React.createElement("a", { href: href, ...aProps, className: styles.content }, ren));
     }
     if (onClick) {
         return (React.createElement("li", { ...liProps },
-            React.createElement("button", { className: styles.button, onClick: props.onClick, ...restProps }, children)));
+            React.createElement("button", { className: classnames(styles.button, styles.content), onClick: props.onClick, ...restProps }, ren)));
     }
     return React.createElement("li", { ...liProps },
-        React.createElement("div", { ...restProps }, children));
+        React.createElement("div", { ...restProps, className: styles.content }, ren));
 };
+Item.Label = Label;
+Item.Value = Value;
 export { Item };
 //# sourceMappingURL=Item.js.map

package/esm/components/layout/list/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAcxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7E,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG;QACZ,SAAS,EAAE,GAAG;KACjB,CAAC;IAEF,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,+BAAQ,OAAO;YAAE,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS,IAAG,QAAQ,CAAQ,CAAK,CAAC;KACjF;IACD,IAAI,IAAI,EAAE;QACN,MAAM,MAAM,GAAqD,EAAE,GAAG,SAAS,EAAE,CAAC;QAClF,IAAI,OAAO,EAAE;YACT,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;SAC5B;QACD,OAAO,+BAAQ,OAAO;YAAE,2BAAG,IAAI,EAAE,IAAI,KAAM,MAAM,IAAG,QAAQ,CAAK,CAAK,CAAC;KAC1E;IACD,IAAI,OAAO,EAAE;QACT,OAAO,CACH,+BAAQ,OAAO;YACX,gCAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,KAAM,SAAS,IAAG,QAAQ,CAAU,CAC3F,CACR,CAAC;KACL;IACD,OAAO,+BAAQ,OAAO;QAAE,gCAAS,SAAS,IAAG,QAAQ,CAAO,CAAK,CAAC;AACtE,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAqBnC,MAAM,IAAI,GAAoC,CAAC,KAAK,EAAE,EAAE;IACpD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpF,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG;QACZ,SAAS,EAAE,GAAG;KACjB,CAAC;IAEF,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAExC,MAAM,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC5D,IAAI,IAAI,GAAG,SAAS,CAAC;QACrB,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE;YAC5F,OAAO,KAAK,CAAC;SAChB;QACD,IAAI,KAAK,IAAI,CAAC,EAAE;YACZ,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;SACnB;QACD,OAAO,6BAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAG,KAAK,CAAO,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,+BAAQ,OAAO;YAAE,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS;gBAAE,2BAAG,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,GAAG,CAAK,CAAO,CAAK,CAAC;KAC9G;IACD,IAAI,IAAI,EAAE;QACN,MAAM,MAAM,GAAqD,EAAE,GAAG,SAAS,EAAE,CAAC;QAClF,IAAI,OAAO,EAAE;YACT,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;SAC5B;QACD,OAAO,+BAAQ,OAAO;YAAE,2BAAG,IAAI,EAAE,IAAI,KAAM,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,GAAG,CAAK,CAAK,CAAC;KAChG;IACD,IAAI,OAAO,EAAE;QACT,OAAO,CACH,+BAAQ,OAAO;YACX,gCAAQ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,KAAK,SAAS,IAC7F,GAAG,CACC,CACR,CACR,CAAC;KACL;IACD,OAAO,+BAAQ,OAAO;QAAE,gCAAS,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,GAAG,CAAO,CAAK,CAAC;AAC5F,CAAC,CAAC;AAEF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/layout/list/Item.module.scss

@@ -2,7 +2,7 @@
     list-style-type: none;
     margin: 0;
     padding: 0;
-    font-size: 15px;
+    font-size: calc(34px / var(--ratio-font));
 
     &:not(:first-child) > * {
         border-top: 0.37px solid var(--header-border);
@@ -10,7 +10,7 @@
 
     > * {
         display: block;
-        padding: 20px 0;
+        padding: 0;
         text-decoration: none;
     }
 }
@@ -20,4 +20,12 @@
     background: none;
     width: 100%;
     text-align: left;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.content {
+    display: flex;
+    min-height: calc(174px / var(--ratio-dimensions));
+    align-items: center;
 }

package/esm/components/layout/list/Label.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ReactNode } from "react";
+interface Props {
+    sub?: ReactNode;
+}
+declare const Label: React.FC<Props>;
+export { Label };
+//# sourceMappingURL=Label.d.ts.map

package/esm/components/layout/list/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,KAAK;IACX,GAAG,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAS1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/layout/list/Label.js

@@ -0,0 +1,10 @@
+import React from "react";
+import styles from "./Label.module.scss";
+const Label = (props) => {
+    const sub = props.sub ? React.createElement("div", { className: styles.sub }, props.sub) : null;
+    return (React.createElement("div", { className: styles.root },
+        React.createElement("div", null, props.children),
+        sub));
+};
+export { Label };
+//# sourceMappingURL=Label.js.map

package/esm/components/layout/list/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAMzC,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,IAAG,KAAK,CAAC,GAAG,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACvB,iCAAM,KAAK,CAAC,QAAQ,CAAO;QAC1B,GAAG,CACF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/layout/list/Label.module.scss

@@ -0,0 +1,9 @@
+.sub {
+    font-size: calc(27px / var(--ratio-font));
+    color: var(--sub);
+    margin-top: calc(27px / var(--ratio-font) / 3);
+}
+
+.root {
+    padding: calc(54px / var(--ratio-dimensions)) 0;
+}

package/esm/components/layout/list/List.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
-declare const List: React.FC;
+import { Header } from "./Header.js";
+interface SubComponents {
+    Header: typeof Header;
+}
+declare const List: React.FC & SubComponents;
 export { List };
 //# sourceMappingURL=List.d.ts.map

package/esm/components/layout/list/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAIjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,GAAG,aAItB,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/layout/list/List.js

@@ -1,7 +1,9 @@
 import React from "react";
+import { Header } from "./Header.js";
 import styles from "./List.module.scss";
 const List = (props) => {
     return (React.createElement("ul", { className: styles.list }, props.children));
 };
+List.Header = Header;
 export { List };
 //# sourceMappingURL=List.js.map

package/esm/components/layout/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,OAAO,CACH,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,QAAQ,CAAM,CACpD,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAMxC,MAAM,IAAI,GAA6B,CAAC,KAAK,EAAE,EAAE;IAC7C,OAAO,CACH,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,QAAQ,CAAM,CACpD,CAAC;AACN,CAAC,CAAC;AAEF,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/layout/list/Value.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const Value: React.FC;
+export { Value };
+//# sourceMappingURL=Value.d.ts.map

package/esm/components/layout/list/Value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAIlB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/layout/list/Value.js

@@ -0,0 +1,7 @@
+import React from "react";
+import styles from "./Value.module.scss";
+const Value = (props) => {
+    return (React.createElement("div", { className: styles.value }, props.children));
+};
+export { Value };
+//# sourceMappingURL=Value.js.map

package/esm/components/layout/list/Value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,KAAK,GAAa,CAAC,KAAK,EAAE,EAAE;IAC9B,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAC,QAAQ,CAAO,CACvD,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/layout/list/Value.module.scss

@@ -0,0 +1,7 @@
+.value {
+    color: var(--icon);
+    font-size: calc(26px / var(--ratio-font));
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+}

package/esm/components/ui/action/Action.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Icon } from "../../icons/Icon";
+import { Icon } from "../../icons/Icon.js";
 import styles from "./Action.module.scss";
 const Action = (props) => {
     const { icon, label, href, to, Link, ...restProps } = props;

package/esm/components/ui/action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAgB1C,MAAM,MAAM,GAAqB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5D,IAAI,QAAQ,GAAc,IAAI,CAAC;IAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,QAAQ,GAAG,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;KAC3C;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,OAAO,GAAG,CACZ;QACI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,QAAQ,CAAO;QAC9C,SAAS,CACX,CACN,CAAC;IAEF,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS;YAAE,2BAAG,SAAS,EAAE,MAAM,CAAC,CAAC,IAAG,OAAO,CAAK,CAAO,CAAC;KACtF;IAED,IAAI,IAAI,EAAE;QACN,OAAO,2BAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,KAAM,SAAS,IAAG,OAAO,CAAK,CAAC;KAC3E;IAED,OAAO,CACH,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,IACnD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAgB1C,MAAM,MAAM,GAAqB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5D,IAAI,QAAQ,GAAc,IAAI,CAAC;IAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,QAAQ,GAAG,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;KAC3C;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,OAAO,GAAG,CACZ;QACI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,QAAQ,CAAO;QAC9C,SAAS,CACX,CACN,CAAC;IAEF,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS;YAAE,2BAAG,SAAS,EAAE,MAAM,CAAC,CAAC,IAAG,OAAO,CAAK,CAAO,CAAC;KACtF;IAED,IAAI,IAAI,EAAE;QACN,OAAO,2BAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,KAAM,SAAS,IAAG,OAAO,CAAK,CAAC;KAC3E;IAED,OAAO,CACH,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,IACnD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/ui/action/EqualActions.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { Action } from "./Action";
-import styles from "./EqualActions.module.scss";
 import classnames from "classnames";
+import { Action } from "./Action.js";
+import styles from "./EqualActions.module.scss";
 const EqualActions = (props) => {
     React.Children.forEach(props.children, (child) => {
         if (!child || typeof child !== "object" || !("type" in child) || child.type !== Action) {

package/esm/components/ui/action/EqualActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EqualActions.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,UAAU,MAAM,YAAY,CAAC;AAMpC,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;YACpF,MAAM,IAAI,SAAS,CAAC,yDAAyD,CAAC,CAAC;SAClF;IACL,CAAC,CAAC,CAAC;IAGH,MAAM,KAAK,GAAG;QACV,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;KACnC,CAAC;IAEzB,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACpE,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"EqualActions.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.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;AAMhD,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;YACpF,MAAM,IAAI,SAAS,CAAC,yDAAyD,CAAC,CAAC;SAClF;IACL,CAAC,CAAC,CAAC;IAGH,MAAM,KAAK,GAAG;QACV,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;KACnC,CAAC;IAEzB,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACpE,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/components/ui/button/Button.js

@@ -1,7 +1,7 @@
 import React from "react";
-import styles from "./Button.module.scss";
 import classnames from "classnames";
-import { makeVariants } from "../../../demo/utils/makeVariants";
+import styles from "./Button.module.scss";
+import { makeVariants } from "../../../demo/utils/makeVariants.js";
 const Button = (props) => {
     const variants = makeVariants(props.variant);
     const cls = classnames(styles.btn, {

package/esm/components/ui/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAOhE,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,CAAC,CAAC;IAEH,OAAO,CACH,gCAAQ,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAU,CAC9E,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAOnE,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,CAAC,CAAC;IAEH,OAAO,CACH,gCAAQ,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAU,CAC9E,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/global.scss

@@ -10,6 +10,9 @@
     --active-bg: #d3d3d3;
     --inactive-bg: #d3d3d3; // used
 
+    --toggle-handle-bg: #e0e0e0;
+    --toggle-handle-border: #cdcdcd;
+
     --icon: #636363;
     --border: #d5d5d5;
     --button-border: #bababa;
@@ -17,13 +20,16 @@
     --header-border: #c8c8c9;
     --header-bg: #efeff0;
     --header-text: #484848;
+    --text: #323232;
+    --sub: #959595;
 
     --toolbar-border: #ababab;
-    --toolbarf-bg: #f8f8f8;
+    --toolbar-bg: #f8f8f8;
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;
     --orange1: #ff7200;
+    --orange1-darker: #cc5b00;
     --purple1: #7357e8;
     --green1: #3ec234;
     --green1-darker: #38af2f;
@@ -48,4 +54,5 @@
 
 body {
     font-size: 15px;
+    color: var(--text);
 }

package/esm/index.d.ts

@@ -1,9 +1,13 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Toggle.js";
 export * from "./components/icons/Icon.js";
 export * from "./components/layout/header/Header.js";
+export * from "./components/layout/header/HeaderIconAction.js";
 export * from "./components/layout/header/StickyHeader.js";
 export * from "./components/layout/list/List.js";
 export * from "./components/layout/list/Item.js";
+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";
 //# 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,+BAA+B,CAAC;AAE9C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/esm/index.js

@@ -1,9 +1,13 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Toggle.js";
 export * from "./components/icons/Icon.js";
 export * from "./components/layout/header/Header.js";
+export * from "./components/layout/header/HeaderIconAction.js";
 export * from "./components/layout/header/StickyHeader.js";
 export * from "./components/layout/list/List.js";
 export * from "./components/layout/list/Item.js";
+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";
 //# 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,+BAA+B,CAAC;AAE9C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/package.json

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

package/src/components/form/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import styles from "./Checkbox.module.scss";
-import { Checkmark } from "../icons/Checkmark";
+import { Checkmark } from "../icons/Checkmark.js";
 
 interface Props {
     color?: string;

package/src/components/form/Toggle.module.scss

@@ -0,0 +1,46 @@
+.container {
+    --ratio-dimensions: 2.5;
+
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    border-radius: 100px;
+    position: relative;
+    line-height: 0;
+    width: calc(110px / var(--ratio-dimensions));
+    height: calc(62px / var(--ratio-dimensions));
+    padding-left: calc(8px / var(--ratio-dimensions));
+    box-sizing: border-box;
+
+    input {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+
+        &:not(:checked) + .toggle {
+            transform: translateX(0);
+            background: var(--toggle-handle-bg);
+            border-color: var(--toggle-handle-border);
+        }
+
+        &[data-undetermined=true] + .toggle {
+            transform: translateX(calc(24px / var(--ratio-dimensions)));
+            background: var(--toggle-handle-border);
+            border-color: var(--toggle-handle-border);
+        }
+    }
+}
+
+.toggle {
+    box-sizing: border-box;
+    border-radius: 100px;
+    display: inline-block;
+    width: calc(44px / var(--ratio-dimensions));
+    height: calc(44px / var(--ratio-dimensions));
+    border: calc(1px / var(--ratio-border)) solid var(--orange1-darker);
+    background: var(--orange1);
+    transition: transform 200ms, background-color 200ms, border-color 200ms;
+    transform: translateX(calc(48px / var(--ratio-dimensions)));
+}

package/src/components/form/Toggle.tsx

@@ -0,0 +1,33 @@
+import type { ChangeEvent } from "react";
+import React, { useCallback } from "react";
+
+import styles from "./Toggle.module.scss";
+
+interface Props {
+    onChange: (newState: boolean) => void;
+    state: boolean | null;
+}
+
+const Toggle: React.VFC<Props> = (props) => {
+    const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+        if (props.state == null) {
+            return;
+        }
+        props.onChange(e.target.checked);
+    }, [props.onChange, props.state]);
+
+    return (
+        <label className={styles.container}>
+            <input
+                type={"checkbox"}
+                checked={Boolean(props.state)}
+                data-undetermined={props.state == null}
+                readOnly={props.state == null}
+                onChange={handleChange}
+            />
+            <div className={styles.toggle} />
+        </label>
+    );
+};
+
+export { Toggle };

package/src/components/icons/Back.tsx

@@ -6,7 +6,13 @@ interface Props {
 
 const Back: React.VFC<Props> = (props) => {
     return (
-        <svg width={"9"} height={"16"} viewBox={"0 0 9 16"} xmlns={"http://www.w3.org/2000/svg"} className={props.className}>
+        <svg
+            width={"9"}
+            height={"16"}
+            viewBox={"0 0 9 16"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
             <path fill={"currentColor"} d={"M8.05.1L0 7.95l8.05 7.85v.05q.15.15.4.15t.4-.15q.15-.2.15-.4 0-.25-.15-.4V15H8.8L1.65 7.95l7.2-7Q9 .75 9 .55q0-.25-.2-.4Q8.65 0 8.4 0q-.2 0-.35.1"} />
         </svg>
     );

package/src/components/icons/Forward.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Forward: React.VFC<Props> = (props) => {
+    return (
+        <svg
+            width={"9"}
+            height={"16"}
+            viewBox={"0 0 9 16"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path fill={"currentColor"} d={"M.95.15Q.8 0 .55 0t-.4.15Q0 .3 0 .55t.15.4L7.35 8l-7.2 7.05Q0 15.2 0 15.4q0 .25.2.4.15.2.4.2.2 0 .35-.15L9 8 1 .2Q1 .15.95.15"} />
+        </svg>
+    );
+};
+
+export { Forward };

package/src/components/icons/Icon.tsx

@@ -1,12 +1,14 @@
-import type { AnyComponent } from "../../types";
-
 import React from "react";
-import { Checkmark } from "./Checkmark";
-import { Back } from "./Back";
+
+import type { AnyComponent } from "../../types";
+import { Checkmark } from "./Checkmark.js";
+import { Back } from "./Back.js";
+import { Forward } from "./Forward.js";
 
 enum ICON {
     checkmark = "checkmark",
     back = "back",
+    forward = "forward",
 }
 
 interface Props {
@@ -17,6 +19,7 @@ interface Props {
 const iconsMap = new Map<ICON, AnyComponent>([
     [ICON.checkmark, Checkmark],
     [ICON.back, Back],
+    [ICON.forward, Forward],
 ]);
 
 const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {

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

@@ -3,8 +3,8 @@ import classnames from "classnames";
 import type { ReactNode } from "react";
 
 import styles from "./Header.module.scss";
-import { Action } from "../../ui/action/Action";
-import { EqualActions } from "../../ui/action/EqualActions";
+import { Action } from "../../ui/action/Action.js";
+import { EqualActions } from "../../ui/action/EqualActions.js";
 
 interface Props {
     center?: boolean;

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

@@ -0,0 +1,8 @@
+.header > * {
+    padding-top: calc(80px / var(--ratio-dimensions));
+    padding-bottom: calc(40px / var(--ratio-dimensions));
+
+    font-size: calc(26px / var(--ratio-font));
+    color: var(--sub);
+    text-transform: uppercase;
+}