react-miui 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [UNRELEASED]
 (nothing yet)
 
+## [0.6.0] - 2022-01-04
+### Added
+- input component
+- label component (for forms)
+- search container
+- icons: battery, search
+### Dev
+- replaced deprecated type VFC with FC
+
 ## [0.5.2] - 2021-12-29
 ### Fixed
 - button component not accepting most of the props

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface Props {
+    children?: never;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+}
+declare const Input: React.FC<Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> & Props>;
+export { Input, };
+//# sourceMappingURL=Input.d.ts.map

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

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

package/dist/components/form/Input.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Input_module_scss_1 = __importDefault(require("./Input.module.scss"));
+const Input = (_a) => {
+    var { className, children, prefix, suffix, onFocus, onBlur } = _a, props = __rest(_a, ["className", "children", "prefix", "suffix", "onFocus", "onBlur"]);
+    const [focused, setFocused] = react_1.useState(false);
+    const handleFocus = react_1.useCallback((e) => {
+        setFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [onFocus]);
+    const handleBlur = react_1.useCallback((e) => {
+        setFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [onBlur]);
+    const wrapperCls = classnames_1.default(Input_module_scss_1.default.wrapper, {
+        [Input_module_scss_1.default.wrapperFocused]: focused,
+    }, 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;
+    return (react_1.default.createElement("div", { className: wrapperCls },
+        prefixElem,
+        react_1.default.createElement("input", Object.assign({}, props, { onFocus: handleFocus, onBlur: handleBlur, className: Input_module_scss_1.default.input })),
+        suffixElem));
+};
+exports.Input = Input;
+//# sourceMappingURL=Input.js.map

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

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

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

@@ -0,0 +1,39 @@
+.input {
+    box-sizing: border-box;
+    height: calc(103px / var(--ratio-dimensions));
+    font-size: calc(34 / var(--ratio-font));
+    color: var(--text);
+    border: none;
+    display: block;
+    width: 100%;
+    background: none;
+
+    &::placeholder {
+        color: var(--sub);
+    }
+}
+
+.wrapper {
+    background: white;
+    display: inline-flex;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 2px;
+    padding: 0 calc(36px / var(--ratio-dimensions));
+    border: calc(1px / var(--ratio-border)) solid var(--border);
+    align-items: center;
+}
+
+.prefix {
+    margin-right: calc(36px / var(--ratio-dimensions));
+    display: flex;
+}
+
+.suffix {
+    margin-left: calc(36px / var(--ratio-dimensions));
+    display: flex;
+}
+
+.wrapperFocused {
+    border-color: var(--focus-color);
+}

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

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

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

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

package/dist/components/form/Label.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const react_1 = __importDefault(require("react"));
+const Label_module_scss_1 = __importDefault(require("./Label.module.scss"));
+const makeVariants_1 = require("../../utils/makeVariants");
+const classnames_1 = __importDefault(require("classnames"));
+const Label = (props) => {
+    const v = makeVariants_1.makeVariants(props.variant);
+    const labelCls = classnames_1.default(Label_module_scss_1.default.text, {
+        [Label_module_scss_1.default.textBig]: v.includes("big"),
+    });
+    const label = props.label ? react_1.default.createElement("div", { className: labelCls }, props.label) : null;
+    return (react_1.default.createElement("label", { className: Label_module_scss_1.default.label },
+        label,
+        props.children));
+};
+exports.Label = Label;
+//# sourceMappingURL=Label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/components/form/Label.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4EAAyC;AACzC,2DAAwD;AACxD,4DAAoC;AAOpC,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,CAAC,GAAG,2BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG,oBAAU,CAAC,2BAAM,CAAC,IAAI,EAAE;QACrC,CAAC,2BAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;KACtC,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,QAAQ,IAAG,KAAK,CAAC,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,OAAO,CACH,yCAAO,SAAS,EAAE,2BAAM,CAAC,KAAK;QACzB,KAAK;QACL,KAAK,CAAC,QAAQ,CACX,CACX,CAAC;AACN,CAAC,CAAC;AAEO,sBAAK"}

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

@@ -0,0 +1,15 @@
+.label + .label {
+    margin-top: 23px;
+    display: block;
+}
+
+.text {
+    font-size: calc(28px / var(--ratio-font));
+    margin-bottom: calc(24px / var(--ratio-dimensions));
+    color: var(--sub);
+}
+
+.textBig {
+    font-size: calc(34px / var(--ratio-font));
+
+}

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

@@ -3,6 +3,6 @@ interface Props {
     onChange: (newState: boolean) => void;
     state: boolean | null;
 }
-declare const Toggle: React.VFC<Props>;
+declare const Toggle: React.FC<Props>;
 export { Toggle };
 //# sourceMappingURL=Toggle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/form/Toggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,UAAU,KAAK;IACX,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAoB5B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/form/Toggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,UAAU,KAAK;IACX,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoB3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/form/Toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA2C;AAE3C,8EAA0C;AAO1C,MAAM,MAAM,GAAqB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,YAAY,GAAG,mBAAW,CAAC,CAAC,CAAgC,EAAE,EAAE;QAClE,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;YACrB,OAAO;SACV;QACD,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElC,OAAO,CACH,yCAAO,SAAS,EAAE,4BAAM,CAAC,SAAS;QAC9B,yCACI,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,uBACV,KAAK,CAAC,KAAK,IAAI,IAAI,EACtC,QAAQ,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,EAC7B,QAAQ,EAAE,YAAY,GACxB;QACF,uCAAK,SAAS,EAAE,4BAAM,CAAC,MAAM,GAAI,CAC7B,CACX,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/form/Toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA2C;AAE3C,8EAA0C;AAO1C,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,YAAY,GAAG,mBAAW,CAAC,CAAC,CAAgC,EAAE,EAAE;QAClE,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;YACrB,OAAO;SACV;QACD,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElC,OAAO,CACH,yCAAO,SAAS,EAAE,4BAAM,CAAC,SAAS;QAC9B,yCACI,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,uBACV,KAAK,CAAC,KAAK,IAAI,IAAI,EACtC,QAAQ,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,EAC7B,QAAQ,EAAE,YAAY,GACxB;QACF,uCAAK,SAAS,EAAE,4BAAM,CAAC,MAAM,GAAI,CAC7B,CACX,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

package/dist/components/icons/Back.d.ts

@@ -2,6 +2,6 @@ import React from "react";
 interface Props {
     className?: string;
 }
-declare const Back: React.VFC<Props>;
+declare const Back: React.FC<Props>;
 export { Back };
 //# sourceMappingURL=Back.d.ts.map

package/dist/components/icons/Back.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Back.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Back.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAY1B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Back.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Back.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAYzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/icons/Back.js.map

@@ -1 +1 @@
-{"version":3,"file":"Back.js","sourceRoot":"","sources":["../../../src/components/icons/Back.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAM1B,MAAM,IAAI,GAAqB,CAAC,KAAK,EAAE,EAAE;IACrC,OAAO,CACH,uCACI,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,4BAA4B,EACnC,SAAS,EAAE,KAAK,CAAC,SAAS;QAE1B,wCAAM,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,mJAAmJ,GAAI,CACpL,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}
+{"version":3,"file":"Back.js","sourceRoot":"","sources":["../../../src/components/icons/Back.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAM1B,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,OAAO,CACH,uCACI,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,4BAA4B,EACnC,SAAS,EAAE,KAAK,CAAC,SAAS;QAE1B,wCAAM,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,mJAAmJ,GAAI,CACpL,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}

package/dist/components/icons/Battery.d.ts

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

package/dist/components/icons/Battery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Battery.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Battery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyB5B,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/icons/Battery.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Battery = void 0;
+const react_1 = __importDefault(require("react"));
+const Battery = (props) => {
+    return (react_1.default.createElement("svg", { width: "13", height: "17", xmlns: "http://www.w3.org/2000/svg", className: props.className },
+        react_1.default.createElement("path", { fill: "none", stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M12.5 2.55q0-.6-.5-.55H9.25q-.65 0-.6-.7v-.2Q8.7.5 8.2.5H4.75q-.4 0-.4.4v.4q.05.75-.75.7H1.1q-.6-.05-.6.55V16q0 .5.6.5h11q.4 0 .4-.45V2.55" }),
+        react_1.default.createElement("path", { fill: "none", stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M8.9 8.6h-2V5.8l-3 4 1.95.05v2.75l3.05-4" })));
+};
+exports.Battery = Battery;
+//# sourceMappingURL=Battery.js.map

package/dist/components/icons/Battery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Battery.js","sourceRoot":"","sources":["../../../src/components/icons/Battery.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAM1B,MAAM,OAAO,GAAoB,CAAC,KAAK,EAAE,EAAE;IACvC,OAAO,CACH,uCACI,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,4BAA4B,EACnC,SAAS,EAAE,KAAK,CAAC,SAAS;QAE1B,wCACI,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,OAAO,EACtB,cAAc,EAAE,OAAO,EACvB,CAAC,EAAE,4IAA4I,GACjJ;QACF,wCACI,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,OAAO,EACtB,cAAc,EAAE,OAAO,EACvB,CAAC,EAAE,0CAA0C,GAC/C,CACA,CAET,CAAC;AACN,CAAC,CAAC;AAEO,0BAAO"}

package/dist/components/icons/Forward.d.ts

@@ -2,6 +2,6 @@ import React from "react";
 interface Props {
     className?: string;
 }
-declare const Forward: React.VFC<Props>;
+declare const Forward: React.FC<Props>;
 export { Forward };
 //# sourceMappingURL=Forward.d.ts.map

package/dist/components/icons/Forward.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Forward.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Forward.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAY7B,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Forward.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Forward.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAY5B,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/icons/Forward.js.map

@@ -1 +1 @@
-{"version":3,"file":"Forward.js","sourceRoot":"","sources":["../../../src/components/icons/Forward.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAM1B,MAAM,OAAO,GAAqB,CAAC,KAAK,EAAE,EAAE;IACxC,OAAO,CACH,uCACI,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,4BAA4B,EACnC,SAAS,EAAE,KAAK,CAAC,SAAS;QAE1B,wCAAM,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,+HAA+H,GAAI,CAChK,CACT,CAAC;AACN,CAAC,CAAC;AAEO,0BAAO"}
+{"version":3,"file":"Forward.js","sourceRoot":"","sources":["../../../src/components/icons/Forward.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAM1B,MAAM,OAAO,GAAoB,CAAC,KAAK,EAAE,EAAE;IACvC,OAAO,CACH,uCACI,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,4BAA4B,EACnC,SAAS,EAAE,KAAK,CAAC,SAAS;QAE1B,wCAAM,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,+HAA+H,GAAI,CAChK,CACT,CAAC;AACN,CAAC,CAAC;AAEO,0BAAO"}

package/dist/components/icons/Icon.d.ts

@@ -2,7 +2,9 @@ import React from "react";
 declare enum ICON {
     checkmark = "checkmark",
     back = "back",
-    forward = "forward"
+    forward = "forward",
+    search = "search",
+    battery = "battery"
 }
 interface Props {
     name: ICON;

package/dist/components/icons/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,IAAI;IACL,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,OAAO,YAAY;CACtB;AAED,UAAU,KAAK;IACX,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAQD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,aAAK,IAAI;IACL,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;CACtB;AAED,UAAU,KAAK;IACX,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAUD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/icons/Icon.js

@@ -19,17 +19,23 @@ const react_1 = __importDefault(require("react"));
 const Checkmark_js_1 = require("./Checkmark.js");
 const Back_js_1 = require("./Back.js");
 const Forward_js_1 = require("./Forward.js");
+const Search_js_1 = require("./Search.js");
+const Battery_js_1 = require("./Battery.js");
 var ICON;
 (function (ICON) {
     ICON["checkmark"] = "checkmark";
     ICON["back"] = "back";
     ICON["forward"] = "forward";
+    ICON["search"] = "search";
+    ICON["battery"] = "battery";
 })(ICON || (ICON = {}));
 exports.ICON = ICON;
 const iconsMap = new Map([
     [ICON.checkmark, Checkmark_js_1.Checkmark],
     [ICON.back, Back_js_1.Back],
     [ICON.forward, Forward_js_1.Forward],
+    [ICON.search, Search_js_1.Search],
+    [ICON.battery, Battery_js_1.Battery],
 ]);
 const Icon = (_a) => {
     var { name: iconName } = _a, props = __rest(_a, ["name"]);

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAG1B,iDAA2C;AAC3C,uCAAiC;AACjC,6CAAuC;AAEvC,IAAK,IAIJ;AAJD,WAAK,IAAI;IACL,+BAAuB,CAAA;IACvB,qBAAa,CAAA;IACb,2BAAmB,CAAA;AACvB,CAAC,EAJI,IAAI,KAAJ,IAAI,QAIR;AAqBc,oBAAI;AAdnB,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAqB;IACzC,CAAC,IAAI,CAAC,SAAS,EAAE,wBAAS,CAAC;IAC3B,CAAC,IAAI,CAAC,IAAI,EAAE,cAAI,CAAC;IACjB,CAAC,IAAI,CAAC,OAAO,EAAE,oBAAO,CAAC;CAC1B,CAAC,CAAC;AAEH,MAAM,IAAI,GAAoB,CAAC,EAA4B,EAAE,EAAE;QAAhC,EAAE,IAAI,EAAE,QAAQ,OAAY,EAAP,KAAK,cAA1B,QAA4B,CAAF;IACrD,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,8BAAC,CAAC,oBAAK,KAAK,EAAI,CAAC;AAC5B,CAAC,CAAC;AAEO,oBAAI"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAG1B,iDAA2C;AAC3C,uCAAiC;AACjC,6CAAuC;AACvC,2CAAqC;AACrC,6CAAuC;AAEvC,IAAK,IAMJ;AAND,WAAK,IAAI;IACL,+BAAuB,CAAA;IACvB,qBAAa,CAAA;IACb,2BAAmB,CAAA;IACnB,yBAAiB,CAAA;IACjB,2BAAmB,CAAA;AACvB,CAAC,EANI,IAAI,KAAJ,IAAI,QAMR;AAuBc,oBAAI;AAhBnB,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAqB;IACzC,CAAC,IAAI,CAAC,SAAS,EAAE,wBAAS,CAAC;IAC3B,CAAC,IAAI,CAAC,IAAI,EAAE,cAAI,CAAC;IACjB,CAAC,IAAI,CAAC,OAAO,EAAE,oBAAO,CAAC;IACvB,CAAC,IAAI,CAAC,MAAM,EAAE,kBAAM,CAAC;IACrB,CAAC,IAAI,CAAC,OAAO,EAAE,oBAAO,CAAC;CAC1B,CAAC,CAAC;AAEH,MAAM,IAAI,GAAoB,CAAC,EAA4B,EAAE,EAAE;QAAhC,EAAE,IAAI,EAAE,QAAQ,OAAY,EAAP,KAAK,cAA1B,QAA4B,CAAF;IACrD,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,8BAAC,CAAC,oBAAK,KAAK,EAAI,CAAC;AAC5B,CAAC,CAAC;AAEO,oBAAI"}

package/dist/components/icons/Search.d.ts

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

package/dist/components/icons/Search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoB3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/icons/Search.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Search = void 0;
+const react_1 = __importDefault(require("react"));
+const Search = (props) => {
+    return (react_1.default.createElement("svg", { baseProfile: "basic", width: "16", height: "16", xmlns: "http://www.w3.org/2000/svg", className: props.className },
+        react_1.default.createElement("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M11.95 6.6q0 2.1-1.5 3.6m0-7.2q1.5 1.55 1.5 3.6M6.9 1.5q2.05 0 3.55 1.5m-7.2 0q1.5-1.5 3.65-1.5M1.75 6.6q0-2.05 1.5-3.6m0 7.2q-1.5-1.5-1.5-3.6m5.15 5.1q-2.15 0-3.65-1.5m6.95.2q-1.4 1.3-3.3 1.3m3.3-1.3l4.1 4.1m-3.85-4.3q-.1.1-.25.2" })));
+};
+exports.Search = Search;
+//# sourceMappingURL=Search.js.map

package/dist/components/icons/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/components/icons/Search.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAM1B,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,OAAO,CACH,uCACI,WAAW,EAAE,OAAO,EACpB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,4BAA4B,EACnC,SAAS,EAAE,KAAK,CAAC,SAAS;QAE1B,wCACI,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,cAAc,EACtB,WAAW,EAAE,GAAG,EAChB,aAAa,EAAE,OAAO,EACtB,cAAc,EAAE,OAAO,EACvB,CAAC,EAAE,wOAAwO,GAC7O,CACA,CAET,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

package/dist/components/layout/header/HeaderIconAction.d.ts

@@ -12,6 +12,6 @@ interface Props {
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
     label?: ReactNode;
 }
-declare const HeaderIconAction: React.VFC<Props>;
+declare const HeaderIconAction: React.FC<Props>;
 export { HeaderIconAction };
 //# sourceMappingURL=HeaderIconAction.d.ts.map

package/dist/components/layout/header/HeaderIconAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconAction.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAI7C,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;CAErB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAyBtC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"HeaderIconAction.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAI7C,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;CAErB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyBrC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/layout/header/HeaderIconAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconAction.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAI1B,2CAAwC;AACxC,kGAAoD;AAgBpD,MAAM,gBAAgB,GAAqB,CAAC,KAAK,EAAE,EAAE;IACjD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAArD,uCAA6C,CAAQ,CAAC;IAE5D,IAAI,OAAO,GAAc,IAAI,CAAC;IAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,OAAO,GAAG,8BAAC,WAAI,IAAC,SAAS,EAAE,sCAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAY,GAAI,CAAC;KAClE;IAED,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS;YAAE,qCAAG,SAAS,EAAE,sCAAM,CAAC,CAAC,IAAG,OAAO,CAAK,CAAO,CAAC;KACtF;IAED,IAAI,IAAI,EAAE;QACN,OAAO,mDAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,sCAAM,CAAC,CAAC,IAAM,SAAS,GAAG,OAAO,CAAK,CAAC;KAC3E;IAED,OAAO,CACH,0CAAQ,SAAS,EAAE,sCAAM,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAChD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEO,4CAAgB"}
+{"version":3,"file":"HeaderIconAction.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAI1B,2CAAwC;AACxC,kGAAoD;AAgBpD,MAAM,gBAAgB,GAAoB,CAAC,KAAK,EAAE,EAAE;IAChD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAArD,uCAA6C,CAAQ,CAAC;IAE5D,IAAI,OAAO,GAAc,IAAI,CAAC;IAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,OAAO,GAAG,8BAAC,WAAI,IAAC,SAAS,EAAE,sCAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAY,GAAI,CAAC;KAClE;IAED,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS;YAAE,qCAAG,SAAS,EAAE,sCAAM,CAAC,CAAC,IAAG,OAAO,CAAK,CAAO,CAAC;KACtF;IAED,IAAI,IAAI,EAAE;QACN,OAAO,mDAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,sCAAM,CAAC,CAAC,IAAM,SAAS,GAAG,OAAO,CAAK,CAAC;KAC3E;IAED,OAAO,CACH,0CAAQ,SAAS,EAAE,sCAAM,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAChD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEO,4CAAgB"}

package/dist/components/layout/section/SearchContainer.d.ts

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

package/dist/components/layout/section/SearchContainer.d.ts.map

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

package/dist/components/layout/section/SearchContainer.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchContainer = void 0;
+const react_1 = __importDefault(require("react"));
+const SearchContainer_module_scss_1 = __importDefault(require("./SearchContainer.module.scss"));
+const SearchContainer = (props) => {
+    return (react_1.default.createElement("section", { className: SearchContainer_module_scss_1.default.section }, props.children));
+};
+exports.SearchContainer = SearchContainer;
+//# sourceMappingURL=SearchContainer.js.map

package/dist/components/layout/section/SearchContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchContainer.js","sourceRoot":"","sources":["../../../../src/components/layout/section/SearchContainer.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,gGAAmD;AAEnD,MAAM,eAAe,GAAa,CAAC,KAAK,EAAE,EAAE;IACxC,OAAO,CACH,2CAAS,SAAS,EAAE,qCAAM,CAAC,OAAO,IAAG,KAAK,CAAC,QAAQ,CAAW,CACjE,CAAC;AACN,CAAC,CAAC;AAEO,0CAAe"}

package/dist/components/layout/section/SearchContainer.module.scss

@@ -0,0 +1,3 @@
+.section {
+    margin: 12px;
+}

package/dist/components/layout/section/Section.module.scss

@@ -15,3 +15,10 @@
     margin-left: 23px;
     margin-right: 23px;
 }
+
+.section > .section.vertical {
+    padding-top: 23px;
+    padding-bottom: 23px;
+    margin-top: 0;
+    margin-bottom: 0;
+}

package/dist/components/ui/action/Action.d.ts

@@ -12,6 +12,6 @@ interface Props {
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
     label?: ReactNode;
 }
-declare const Action: React.VFC<Props>;
+declare const Action: React.FC<Props>;
 export { Action };
 //# sourceMappingURL=Action.d.ts.map

package/dist/components/ui/action/Action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAI7C,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,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;CAErB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAkC5B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAI7C,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,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;CAErB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkC3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAI1B,iDAA2C;AAC3C,8EAA0C;AAgB1C,MAAM,MAAM,GAAqB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAArD,uCAA6C,CAAQ,CAAC;IAE5D,IAAI,QAAQ,GAAc,IAAI,CAAC;IAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,QAAQ,GAAG,8BAAC,cAAI,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;KAC3C;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,4BAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,OAAO,GAAG,CACZ;QACI,uCAAK,SAAS,EAAE,4BAAM,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,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS;YAAE,qCAAG,SAAS,EAAE,4BAAM,CAAC,CAAC,IAAG,OAAO,CAAK,CAAO,CAAC;KACtF;IAED,IAAI,IAAI,EAAE;QACN,OAAO,mDAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,4BAAM,CAAC,CAAC,IAAM,SAAS,GAAG,OAAO,CAAK,CAAC;KAC3E;IAED,OAAO,CACH,0CAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,4BAAM,CAAC,MAAM,IACnD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}
+{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAI1B,iDAA2C;AAC3C,8EAA0C;AAgB1C,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAArD,uCAA6C,CAAQ,CAAC;IAE5D,IAAI,QAAQ,GAAc,IAAI,CAAC;IAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,QAAQ,GAAG,8BAAC,cAAI,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;KAC3C;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,4BAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,OAAO,GAAG,CACZ;QACI,uCAAK,SAAS,EAAE,4BAAM,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,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS;YAAE,qCAAG,SAAS,EAAE,4BAAM,CAAC,CAAC,IAAG,OAAO,CAAK,CAAO,CAAC;KACtF;IAED,IAAI,IAAI,EAAE;QACN,OAAO,mDAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,4BAAM,CAAC,CAAC,IAAM,SAAS,GAAG,OAAO,CAAK,CAAC;KAC3E;IAED,OAAO,CACH,0CAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,4BAAM,CAAC,MAAM,IACnD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

package/dist/global.scss

@@ -2,6 +2,7 @@
 :root {
     --ratio-dimensions: 3;
     --ratio-border:     2.666666;
+    // font is calculated from top to bottom
     --ratio-font:       1.666666;
 
     --background: white;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Input.js";
+export * from "./components/form/Label.js";
 export * from "./components/form/Toggle.js";
 export * from "./components/icons/Icon.js";
 export * from "./components/layout/card/Card.js";
@@ -7,6 +9,7 @@ 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/layout/section/SearchContainer.js";
 export * from "./components/layout/section/Section.js";
 export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"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,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,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,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,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/dist/index.js

@@ -11,6 +11,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/form/Checkbox.js"), exports);
+__exportStar(require("./components/form/Input.js"), exports);
+__exportStar(require("./components/form/Label.js"), exports);
 __exportStar(require("./components/form/Toggle.js"), exports);
 __exportStar(require("./components/icons/Icon.js"), exports);
 __exportStar(require("./components/layout/card/Card.js"), exports);
@@ -19,6 +21,7 @@ __exportStar(require("./components/layout/header/HeaderIconAction.js"), exports)
 __exportStar(require("./components/layout/header/StickyHeader.js"), exports);
 __exportStar(require("./components/layout/list/List.js"), exports);
 __exportStar(require("./components/layout/list/Item.js"), exports);
+__exportStar(require("./components/layout/section/SearchContainer.js"), exports);
 __exportStar(require("./components/layout/section/Section.js"), exports);
 __exportStar(require("./components/ui/action/Action.js"), exports);
 __exportStar(require("./components/ui/action/EqualActions.js"), exports);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,gEAA8C;AAC9C,8DAA4C;AAE5C,6DAA2C;AAE3C,mEAAiD;AACjD,uEAAqD;AACrD,iFAA+D;AAC/D,6EAA2D;AAC3D,mEAAiD;AACjD,mEAAiD;AACjD,yEAAuD;AAEvD,mEAAiD;AACjD,yEAAuD;AACvD,mEAAiD;AACjD,sEAAoD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,gEAA8C;AAC9C,6DAA2C;AAC3C,6DAA2C;AAC3C,8DAA4C;AAE5C,6DAA2C;AAE3C,mEAAiD;AACjD,uEAAqD;AACrD,iFAA+D;AAC/D,6EAA2D;AAC3D,mEAAiD;AACjD,mEAAiD;AACjD,iFAA+D;AAC/D,yEAAuD;AAEvD,mEAAiD;AACjD,yEAAuD;AACvD,mEAAiD;AACjD,sEAAoD"}

package/dist/types.d.ts

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

package/dist/types.d.ts.map

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