react-miui 0.9.2 → 0.10.0

package/CHANGELOG.md

@@ -6,6 +6,27 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [UNRELEASED]
 (nothing yet)
 
+## [0.10.0] - 2022-02-17
+### Added
+- `Message` component
+
+## [0.9.5] - 2022-02-17
+### Changed
+- all checkbox props to optional
+
+## [0.9.4] - 2022-02-17
+### Fixed
+- checkbox onChange typings
+
+## [0.9.3] - 2022-02-17
+### Added
+- disabled/readonly support for checkbox
+- disabled/readonly support for input
+### Changed
+- checkbox styles to less collide with disabled/readonly styles
+### Fixed
+- input text prefix wrapping
+
 ## [0.9.2] - 2022-02-15
 ### Changed
 - Added class support to list label and list value components

package/dist/components/form/Checkbox.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 interface Props {
     color?: string;
-    name: string;
-    onChange: () => void;
-    checked: boolean;
+    name?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    checked?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
 }
 declare const Checkbox: React.FC<Props>;
 export { Checkbox };

package/dist/components/form/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAW7B,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6B7B,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/form/Checkbox.js

@@ -5,16 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const Checkbox_module_scss_1 = __importDefault(require("./Checkbox.module.scss"));
 const Checkmark_js_1 = require("../icons/Checkmark.js");
 const Checkbox = (props) => {
     const style = {};
     props.color && (style.color = props.color);
-    return (react_1.default.createElement("label", { className: Checkbox_module_scss_1.default.checkbox },
-        react_1.default.createElement("input", { type: "checkbox", name: props.name, onChange: props.onChange, checked: props.checked }),
-        react_1.default.createElement("span", { style: style },
+    const cls = classnames_1.default(Checkbox_module_scss_1.default.checkbox, {
+        [Checkbox_module_scss_1.default.disabled]: props.disabled,
+        [Checkbox_module_scss_1.default.readOnly]: props.readOnly,
+    });
+    const checkmarkCls = classnames_1.default(Checkbox_module_scss_1.default.checkmark, {
+        [Checkbox_module_scss_1.default.checkmarkDisabled]: props.disabled,
+        [Checkbox_module_scss_1.default.checkmarkChecked]: props.checked,
+        [Checkbox_module_scss_1.default.checkmarkReadOnly]: props.readOnly,
+    });
+    return (react_1.default.createElement("label", { className: cls },
+        react_1.default.createElement("input", { type: "checkbox", name: props.name, onChange: props.onChange, checked: props.checked, disabled: props.disabled, readOnly: props.readOnly }),
+        react_1.default.createElement("span", { style: style, className: checkmarkCls },
             react_1.default.createElement(Checkmark_js_1.Checkmark, null)),
-        react_1.default.createElement("span", null, props.children)));
+        react_1.default.createElement("span", { className: Checkbox_module_scss_1.default.label }, props.children)));
 };
 exports.Checkbox = Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,kFAA4C;AAC5C,wDAAkD;AASlD,MAAM,QAAQ,GAAoB,CAAC,KAAK,EAAE,EAAE;IACxC,MAAM,KAAK,GAAwB,EAAE,CAAC;IACtC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACH,yCAAO,SAAS,EAAE,8BAAM,CAAC,QAAQ;QAC7B,yCAAO,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI;QAC/F,wCAAM,KAAK,EAAE,KAAK;YAAE,8BAAC,wBAAS,OAAG,CAAO;QACxC,4CAAO,KAAK,CAAC,QAAQ,CAAQ,CACzB,CACX,CAAC;AACN,CAAC,CAAC;AAEO,4BAAQ"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,kFAA4C;AAC5C,wDAAkD;AAWlD,MAAM,QAAQ,GAAoB,CAAC,KAAK,EAAE,EAAE;IACxC,MAAM,KAAK,GAAwB,EAAE,CAAC;IACtC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,GAAG,GAAG,oBAAU,CAAC,8BAAM,CAAC,QAAQ,EAAE;QACpC,CAAC,8BAAM,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;QACjC,CAAC,8BAAM,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;KACpC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,oBAAU,CAAC,8BAAM,CAAC,SAAS,EAAE;QAC9C,CAAC,8BAAM,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,QAAQ;QAC1C,CAAC,8BAAM,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,OAAO;QACxC,CAAC,8BAAM,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,QAAQ;KAC7C,CAAC,CAAC;IAEH,OAAO,CACH,yCAAO,SAAS,EAAE,GAAG;QACjB,yCACI,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B;QACF,wCAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY;YAAE,8BAAC,wBAAS,OAAG,CAAO;QACjE,wCAAM,SAAS,EAAE,8BAAM,CAAC,KAAK,IAAG,KAAK,CAAC,QAAQ,CAAQ,CAClD,CACX,CAAC;AACN,CAAC,CAAC;AAEO,4BAAQ"}

package/dist/components/form/Checkbox.module.scss

@@ -6,42 +6,66 @@
         margin: 0;
         vertical-align: middle;
 
-        + span {
-            border-radius: 100px;
-            background: var(--inactive-bg);
-            width: 18px;
-            height: 18px;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            vertical-align: middle;
-
-            svg {
-                width: 9px;
-                height: 9px;
-                fill: white;
-            }
-
-            + span {
-                vertical-align: middle;
-            }
-        }
-
         &:focus-visible {
-            + span {
+            + .checkmark {
                 box-shadow: 0 0 5px black;
             }
         }
 
-        &:checked {
-            + span {
-                color: var(--main-color);
-                background: currentColor;
-            }
+        + .checkmark + .label:not(:empty) {
+            margin-left: 0.75em;
         }
+    }
+}
 
-        + span + span:not(:empty) {
-            margin-left: 0.5em;
-        }
+.checkmark {
+    border-radius: 100px;
+    background: none;
+    border: 1px solid var(--inactive-bg);
+    width: 18px;
+    height: 18px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    box-sizing: border-box;
+
+    svg {
+        display: none;
+        width: 9px;
+        height: 9px;
+        fill: white;
+    }
+
+    + .label {
+        vertical-align: middle;
+    }
+}
+
+.checkmarkChecked {
+    border-width: 0;
+    color: var(--main-color);
+    background: currentColor;
+
+    svg {
+        display: inline-block;
+    }
+
+    &.checkmarkDisabled {
+        background: var(--inactive-dark-bg);
+    }
+}
+
+.checkmarkDisabled {
+    background: var(--active-bg);
+
+    + .label {
+        color: var(--input-disabled-text);
+    }
+}
+
+.checkmarkReadOnly {
+    + .label {
+        color: var(--input-disabled-text);
     }
 }

package/dist/components/form/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAgCxF,CAAC;AAEF,OAAO,EACH,KAAK,GACR,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAkCxF,CAAC;AAEF,OAAO,EACH,KAAK,GACR,CAAC"}

package/dist/components/form/Input.js

@@ -50,6 +50,8 @@ const Input = (_a) => {
     }, [onBlur]);
     const wrapperCls = classnames_1.default(Input_module_scss_1.default.wrapper, {
         [Input_module_scss_1.default.wrapperFocused]: focused,
+        [Input_module_scss_1.default.disabled]: props.disabled,
+        [Input_module_scss_1.default.readOnly]: props.readOnly,
     }, className);
     const prefixElem = prefix ? react_1.default.createElement("div", { className: Input_module_scss_1.default.prefix }, prefix) : null;
     const suffixElem = suffix ? react_1.default.createElement("div", { className: Input_module_scss_1.default.suffix }, suffix) : null;

package/dist/components/form/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/form/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,4DAAoC;AAEpC,4EAAyC;AAQzC,MAAM,KAAK,GAAkF,CAAC,EAK7F,EAAE,EAAE;QALyF,EAC1F,SAAS,EAAE,QAAQ,EACnB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,OAElB,EADM,KAAK,cAJkF,kEAK7F,CADW;IAER,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,mBAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACtE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,mBAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACrE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,UAAU,GAAG,oBAAU,CAAC,2BAAM,CAAC,OAAO,EAAE;QAC1C,CAAC,2BAAM,CAAC,cAAc,CAAC,EAAE,OAAO;KACnC,EAAE,SAAS,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,2BAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IACjF,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,2BAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,OAAO,CACH,uCAAK,SAAS,EAAE,UAAU;QACrB,UAAU;QACX,yDAAW,KAAK,IAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,2BAAM,CAAC,KAAK,IAAI;QACtF,UAAU,CACT,CACT,CAAC;AACN,CAAC,CAAC;AAGE,sBAAK"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/form/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,4DAAoC;AAEpC,4EAAyC;AAQzC,MAAM,KAAK,GAAkF,CAAC,EAK7F,EAAE,EAAE;QALyF,EAC1F,SAAS,EAAE,QAAQ,EACnB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,OAElB,EADM,KAAK,cAJkF,kEAK7F,CADW;IAER,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,mBAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACtE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,mBAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACrE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,UAAU,GAAG,oBAAU,CAAC,2BAAM,CAAC,OAAO,EAAE;QAC1C,CAAC,2BAAM,CAAC,cAAc,CAAC,EAAE,OAAO;QAChC,CAAC,2BAAM,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;QACjC,CAAC,2BAAM,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;KACpC,EAAE,SAAS,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,2BAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IACjF,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,2BAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,OAAO,CACH,uCAAK,SAAS,EAAE,UAAU;QACrB,UAAU;QACX,yDAAW,KAAK,IAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,2BAAM,CAAC,KAAK,IAAI;QACtF,UAAU,CACT,CACT,CAAC;AACN,CAAC,CAAC;AAGE,sBAAK"}

package/dist/components/form/Input.module.scss

@@ -24,6 +24,27 @@
     padding: 0 calc(36px / var(--ratio-dimensions));
     border: calc(1px / var(--ratio-border)) solid var(--border);
     align-items: center;
+
+    .input {
+        flex: 1;
+    }
+
+    &.disabled {
+        background: var(--input-disabled-bg);
+        color: var(--input-disabled-text);
+
+        .input {
+            color: var(--input-disabled-text);
+        }
+    }
+
+    &.readOnly {
+        color: var(--input-disabled-text);
+
+        .input {
+            color: var(--input-disabled-text);
+        }
+    }
 }
 
 .textarea {

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

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

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

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

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

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

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

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

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

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

package/dist/global.scss

@@ -7,11 +7,12 @@
 
     --background: white;
 
-    --main-color: #008ad2; // used
+    --main-color: #008ad2;
     --main-color-alt: #006AA9;
 
-    --active-bg: #d3d3d3;
-    --inactive-bg: #d3d3d3; // used
+    --active-bg: #e7e7e7;
+    --inactive-bg: #d3d3d3;
+    --inactive-dark-bg: #999;
 
     --toggle-handle-bg: #e0e0e0;
     --toggle-handle-border: #cdcdcd;
@@ -32,6 +33,9 @@
     --modal-button-bg: #f8f8f8;
     --modal-button-border: #c2c2c2;
 
+    --input-disabled-bg: #f3f3f3;
+    --input-disabled-text: #959595;
+
     --choice-bg: #ffffff;
     --choice-text: #999999;
     --choice-active-bg: #f3f3f3;
@@ -43,6 +47,8 @@
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;
+    --blue2: #b7d6f5;
+    --blue3: #dbe6ff;
     --orange1: #ff7200;
     --orange1-darker: #cc5b00;
     --purple1: #7357e8;
@@ -50,6 +56,12 @@
     --green1-darker: #38af2f;
     --pink1: #ff388f;
     --red1: #ea2700;
+    --yellow1: #ffde9d;
+    --yellow2: #e4a429;
+    --yellow3: #fff5db;
+    --pinky1: #f5c0b7;
+    --pinky2: #e07b67;
+    --pinky3: #ffe1db;
 
     --grey1: #737373;
 

package/docs/classes/ToasterProvider.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>ToasterProvider | react-miui - v0.9.2</title>
-	<meta name="description" content="Documentation for react-miui - v0.9.2">
+	<title>ToasterProvider | react-miui - v0.10.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.10.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.9.2</a>
+					<a href="../index.html" class="title">react-miui - v0.10.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -139,7 +139,7 @@
 							<aside class="tsd-sources">
 								<p>Overrides React.Component&lt;Props, State&gt;.constructor</p>
 								<ul>
-									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/toaster/Toaster.tsx#L24">src/components/ui/toaster/Toaster.tsx:24</a></li>
+									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f6209a4/src/components/ui/toaster/Toaster.tsx#L24">src/components/ui/toaster/Toaster.tsx:24</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -418,7 +418,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/toaster/Toaster.tsx#L32">src/components/ui/toaster/Toaster.tsx:32</a></li>
+									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f6209a4/src/components/ui/toaster/Toaster.tsx#L32">src/components/ui/toaster/Toaster.tsx:32</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -441,7 +441,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/toaster/Toaster.tsx#L63">src/components/ui/toaster/Toaster.tsx:63</a></li>
+									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f6209a4/src/components/ui/toaster/Toaster.tsx#L63">src/components/ui/toaster/Toaster.tsx:63</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -464,7 +464,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/toaster/Toaster.tsx#L70">src/components/ui/toaster/Toaster.tsx:70</a></li>
+									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f6209a4/src/components/ui/toaster/Toaster.tsx#L70">src/components/ui/toaster/Toaster.tsx:70</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
@@ -804,7 +804,7 @@
 							<aside class="tsd-sources">
 								<p>Overrides React.Component.render</p>
 								<ul>
-									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/toaster/Toaster.tsx#L85">src/components/ui/toaster/Toaster.tsx:85</a></li>
+									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f6209a4/src/components/ui/toaster/Toaster.tsx#L85">src/components/ui/toaster/Toaster.tsx:85</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Element</span></h4>

package/docs/enums/ICON.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>ICON | react-miui - v0.9.2</title>
-	<meta name="description" content="Documentation for react-miui - v0.9.2">
+	<title>ICON | react-miui - v0.10.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.10.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.9.2</a>
+					<a href="../index.html" class="title">react-miui - v0.10.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -92,7 +92,7 @@
 					<div class="tsd-signature tsd-kind-icon">back<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;back&quot;</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/icons/Icon.tsx#L12">src/components/icons/Icon.tsx:12</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f6209a4/src/components/icons/Icon.tsx#L12">src/components/icons/Icon.tsx:12</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -102,7 +102,7 @@
 					<div class="tsd-signature tsd-kind-icon">battery<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;battery&quot;</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/icons/Icon.tsx#L15">src/components/icons/Icon.tsx:15</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f6209a4/src/components/icons/Icon.tsx#L15">src/components/icons/Icon.tsx:15</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -112,7 +112,7 @@
 					<div class="tsd-signature tsd-kind-icon">checkmark<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;checkmark&quot;</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/icons/Icon.tsx#L11">src/components/icons/Icon.tsx:11</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f6209a4/src/components/icons/Icon.tsx#L11">src/components/icons/Icon.tsx:11</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -122,7 +122,7 @@
 					<div class="tsd-signature tsd-kind-icon">forward<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;forward&quot;</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/icons/Icon.tsx#L13">src/components/icons/Icon.tsx:13</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f6209a4/src/components/icons/Icon.tsx#L13">src/components/icons/Icon.tsx:13</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -132,7 +132,7 @@
 					<div class="tsd-signature tsd-kind-icon">search<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;search&quot;</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/icons/Icon.tsx#L14">src/components/icons/Icon.tsx:14</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f6209a4/src/components/icons/Icon.tsx#L14">src/components/icons/Icon.tsx:14</a></li>
 						</ul>
 					</aside>
 				</section>

package/docs/index.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>react-miui - v0.9.2</title>
-	<meta name="description" content="Documentation for react-miui - v0.9.2">
+	<title>react-miui - v0.10.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.10.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="assets/css/main.css">
 	<link rel="stylesheet" href="assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="index.html" class="title">react-miui - v0.9.2</a>
+					<a href="index.html" class="title">react-miui - v0.10.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -57,7 +57,7 @@
 					<a href="modules.html">Globals</a>
 				</li>
 			</ul>
-			<h1>Project react-miui - v0.9.2</h1>
+			<h1>Project react-miui - v0.10.0</h1>
 		</div>
 	</div>
 </header>

package/docs/modules/Item.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>Item | react-miui - v0.9.2</title>
-	<meta name="description" content="Documentation for react-miui - v0.9.2">
+	<title>Item | react-miui - v0.10.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.10.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.9.2</a>
+					<a href="../index.html" class="title">react-miui - v0.10.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">

package/docs/modules/List.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>List | react-miui - v0.9.2</title>
-	<meta name="description" content="Documentation for react-miui - v0.9.2">
+	<title>List | react-miui - v0.10.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.10.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.9.2</a>
+					<a href="../index.html" class="title">react-miui - v0.10.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">

package/docs/modules/Modal.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>Modal | react-miui - v0.9.2</title>
-	<meta name="description" content="Documentation for react-miui - v0.9.2">
+	<title>Modal | react-miui - v0.10.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.10.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.9.2</a>
+					<a href="../index.html" class="title">react-miui - v0.10.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">

package/docs/modules/ModalButtons.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>ModalButtons | react-miui - v0.9.2</title>
-	<meta name="description" content="Documentation for react-miui - v0.9.2">
+	<title>ModalButtons | react-miui - v0.10.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.10.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.9.2</a>
+					<a href="../index.html" class="title">react-miui - v0.10.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">

package/docs/modules/Section.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>Section | react-miui - v0.9.2</title>
-	<meta name="description" content="Documentation for react-miui - v0.9.2">
+	<title>Section | react-miui - v0.10.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.10.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.9.2</a>
+					<a href="../index.html" class="title">react-miui - v0.10.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">