react-miui 0.4.3 → 0.6.0

package/CHANGELOG.md

@@ -6,6 +6,28 @@ 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
+
+## [0.5.1] - 2021-12-17
+### Fixed
+- newest components not exported
+
+## [0.5.0] - 2021-12-17
+### Added
+- Section component + container
+- Card component
+
 ## [0.4.3] - 2021-11-27
 ### Fixed
 - Button component crashing

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/card/Card.d.ts

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

package/dist/components/layout/card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,aAAK,QAAQ,GAAG,QAAQ,CAAC;AAEzB,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,QAAQ,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAWzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/layout/card/Card.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const makeVariants_js_1 = require("../../../utils/makeVariants.js");
+const Card_module_scss_1 = __importDefault(require("./Card.module.scss"));
+const Card = (props) => {
+    const v = makeVariants_js_1.makeVariants(props.variant);
+    const cls = classnames_1.default(Card_module_scss_1.default.card, {
+        [Card_module_scss_1.default.margin]: v.includes("margin"),
+    });
+    return (react_1.default.createElement("div", { className: cls }, props.children));
+};
+exports.Card = Card;
+//# sourceMappingURL=Card.js.map

package/dist/components/layout/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/layout/card/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,oEAA8D;AAC9D,0EAAwC;AAQxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,CAAC,GAAG,8BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,GAAG,GAAG,oBAAU,CAAC,0BAAM,CAAC,IAAI,EAAE;QAChC,CAAC,0BAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;KACxC,CAAC,CAAC;IAIH,OAAO,CACH,uCAAK,SAAS,EAAE,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAO,CAC9C,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}

package/dist/components/layout/card/Card.module.scss

@@ -0,0 +1,15 @@
+.card {
+    background: var(--background);
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+
+    + .card {
+        margin-top: 23px;
+    }
+}
+
+.margin {
+    margin-left: 23px;
+    margin-right: 23px;
+}

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.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { SectionContainer } from "./SectionContainer.js";
+interface SubComponents {
+    Container: typeof SectionContainer;
+}
+declare type Variant = "horizontal" | "vertical";
+interface Props {
+    variant?: Variant | Variant[];
+}
+declare const Section: React.FC<Props> & SubComponents;
+export { Section };
+//# sourceMappingURL=Section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAIzD,UAAU,aAAa;IACnB,SAAS,EAAE,OAAO,gBAAgB,CAAC;CACtC;AAED,aAAK,OAAO,GAAG,YAAY,GAAG,UAAU,CAAC;AAEzC,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAYhC,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/layout/section/Section.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.Section = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const SectionContainer_js_1 = require("./SectionContainer.js");
+const makeVariants_js_1 = require("../../../utils/makeVariants.js");
+const Section_module_scss_1 = __importDefault(require("./Section.module.scss"));
+const Section = (props) => {
+    const v = makeVariants_js_1.makeVariants(props.variant);
+    const cls = classnames_1.default(Section_module_scss_1.default.section, {
+        [Section_module_scss_1.default.vertical]: v.includes("vertical"),
+        [Section_module_scss_1.default.horizontal]: v.includes("horizontal"),
+    });
+    return (react_1.default.createElement("section", { className: cls }, props.children));
+};
+exports.Section = Section;
+Section.Container = SectionContainer_js_1.SectionContainer;
+//# sourceMappingURL=Section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,+DAAyD;AACzD,oEAA8D;AAC9D,gFAA2C;AAY3C,MAAM,OAAO,GAAoC,CAAC,KAAK,EAAE,EAAE;IACvD,MAAM,CAAC,GAAG,8BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,oBAAU,CAAC,6BAAM,CAAC,OAAO,EAAE;QACnC,CAAC,6BAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC;QACzC,CAAC,6BAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;KAChD,CAAC,CAAC;IACH,OAAO,CACH,2CAAS,SAAS,EAAE,GAAG,IAClB,KAAK,CAAC,QAAQ,CACT,CACb,CAAC;AACN,CAAC,CAAC;AAIO,0BAAO;AAFhB,OAAO,CAAC,SAAS,GAAG,sCAAgB,CAAC"}

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

@@ -0,0 +1,24 @@
+.section {
+    background: var(--background);
+}
+
+.section + .section {
+    margin-top: 23px;
+}
+
+.vertical {
+    margin-top: 23px;
+    margin-bottom: 23px;
+}
+
+.horizontal {
+    margin-left: 23px;
+    margin-right: 23px;
+}
+
+.section > .section.vertical {
+    padding-top: 23px;
+    padding-bottom: 23px;
+    margin-top: 0;
+    margin-bottom: 0;
+}

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

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

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

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

package/dist/components/layout/section/SectionContainer.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.SectionContainer = void 0;
+const react_1 = __importDefault(require("react"));
+const SectionContainer_module_scss_1 = __importDefault(require("./SectionContainer.module.scss"));
+const SectionContainer = (props) => {
+    return (react_1.default.createElement("div", { className: SectionContainer_module_scss_1.default.container }, props.children));
+};
+exports.SectionContainer = SectionContainer;
+//# sourceMappingURL=SectionContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContainer.js","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,kGAAoD;AAEpD,MAAM,gBAAgB,GAAa,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,uCAAK,SAAS,EAAE,sCAAM,CAAC,SAAS,IAAG,KAAK,CAAC,QAAQ,CAAO,CAC3D,CAAC;AACN,CAAC,CAAC;AAEO,4CAAgB"}

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

@@ -0,0 +1,4 @@
+.container {
+    background: var(--toolbar-bg);
+    flex: 1;
+}