react-miui 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -6,6 +6,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [UNRELEASED]
 (nothing yet)
 
+## [0.2.0] - 2021-11-21
+### Added
+- `back` icon
+- support for button icons in the header
+- basic, WIP support for focus indicator
+### Changed
+- Header component no longer has padding by default
+### Fixed
+- Actions should be named EqualActions everywhere, some texts were not updated before releasing
+- some examples leading to 404 page (WIP)
+
 ## [0.1.0] - 2021-11-19
 ### Added
 - Icon component

package/assets/back.svg

@@ -0,0 +1 @@
+<svg width="9" height="16" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M8.05.1L0 7.95l8.05 7.85v.05q.15.15.4.15t.4-.15q.15-.2.15-.4 0-.25-.15-.4V15H8.8L1.65 7.95l7.2-7Q9 .75 9 .55q0-.25-.2-.4Q8.65 0 8.4 0q-.2 0-.35.1"/></svg>

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

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

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

@@ -0,0 +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,CAM1B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/icons/Back.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.Back = void 0;
+const react_1 = __importDefault(require("react"));
+const Back = (props) => {
+    return (react_1.default.createElement("svg", { width: "9", height: "16", viewBox: "0 0 9 16", xmlns: "http://www.w3.org/2000/svg", className: props.className },
+        react_1.default.createElement("path", { fill: "currentColor", d: "M8.05.1L0 7.95l8.05 7.85v.05q.15.15.4.15t.4-.15q.15-.2.15-.4 0-.25-.15-.4V15H8.8L1.65 7.95l7.2-7Q9 .75 9 .55q0-.25-.2-.4Q8.65 0 8.4 0q-.2 0-.35.1" })));
+};
+exports.Back = Back;
+//# sourceMappingURL=Back.js.map

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

@@ -0,0 +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,uCAAK,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,4BAA4B,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;QAC/G,wCAAM,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,mJAAmJ,GAAI,CACpL,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}

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

@@ -1,9 +1,11 @@
 import React from "react";
 declare enum ICON {
-    checkmark = "checkmark"
+    checkmark = "checkmark",
+    back = "back"
 }
 interface Props {
     name: ICON;
+    className?: string;
 }
 declare const Icon: React.FC<Props>;
 export { Icon, 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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,aAAK,IAAI;IACL,SAAS,cAAc;CAC1B;AAED,UAAU,KAAK;IACX,IAAI,EAAE,IAAI,CAAC;CACd;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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,aAAK,IAAI;IACL,SAAS,cAAc;IACvB,IAAI,SAAS;CAChB;AAED,UAAU,KAAK;IACX,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAOD,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

@@ -17,15 +17,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICON = exports.Icon = void 0;
 const react_1 = __importDefault(require("react"));
 const Checkmark_1 = require("./Checkmark");
+const Back_1 = require("./Back");
 var ICON;
 (function (ICON) {
     ICON["checkmark"] = "checkmark";
+    ICON["back"] = "back";
 })(ICON || (ICON = {}));
 exports.ICON = ICON;
 const iconsMap = new Map([
-    [
-        ICON.checkmark, Checkmark_1.Checkmark,
-    ],
+    [ICON.checkmark, Checkmark_1.Checkmark],
+    [ICON.back, Back_1.Back],
 ]);
 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":";;;;;;;;;;;;;;;;;AAEA,kDAA0B;AAC1B,2CAAwC;AAExC,IAAK,IAEJ;AAFD,WAAK,IAAI;IACL,+BAAuB,CAAA;AAC3B,CAAC,EAFI,IAAI,KAAJ,IAAI,QAER;AAoBc,oBAAI;AAdnB,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAqB;IACzC;QACI,IAAI,CAAC,SAAS,EAAE,qBAAS;KAC5B;CACJ,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":";;;;;;;;;;;;;;;;;AAEA,kDAA0B;AAC1B,2CAAwC;AACxC,iCAA8B;AAE9B,IAAK,IAGJ;AAHD,WAAK,IAAI;IACL,+BAAuB,CAAA;IACvB,qBAAa,CAAA;AACjB,CAAC,EAHI,IAAI,KAAJ,IAAI,QAGR;AAoBc,oBAAI;AAbnB,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAqB;IACzC,CAAC,IAAI,CAAC,SAAS,EAAE,qBAAS,CAAC;IAC3B,CAAC,IAAI,CAAC,IAAI,EAAE,WAAI,CAAC;CACpB,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/layout/header/Header.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
+import type { ReactNode } from "react";
 interface Props {
     center?: boolean;
     variant?: "toolbar";
     position?: "top" | "left" | "right" | "bottom";
     className?: string;
+    before?: ReactNode;
+    after?: ReactNode;
 }
 declare const Header: React.FC<Props>;
 export { Header };

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,KAAK;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0B3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,KAAK;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IAKpB,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAGD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwC3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -24,9 +24,20 @@ const Header = (props) => {
     }, Header_module_scss_1.default[`header--${position}`], props.className);
     let contents = children;
     if (justActions) {
-        contents = react_1.default.createElement(EqualActions_1.EqualActions, null, contents);
+        contents = react_1.default.createElement(EqualActions_1.EqualActions, { className: Header_module_scss_1.default.actions }, contents);
     }
-    return (react_1.default.createElement("div", { className: cls }, contents));
+    let before;
+    if (props.before != null) {
+        before = react_1.default.createElement("div", { className: Header_module_scss_1.default.before }, props.before);
+    }
+    let after;
+    if (props.after != null) {
+        after = react_1.default.createElement("div", { className: Header_module_scss_1.default.after }, props.after);
+    }
+    return (react_1.default.createElement("div", { className: cls },
+        before,
+        react_1.default.createElement("div", { className: Header_module_scss_1.default.contents }, contents),
+        after));
 };
 exports.Header = Header;
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,8EAA0C;AAC1C,mDAAgD;AAChD,+DAA4D;AAS5D,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAE9D,IAAI,WAAW,GAAG,KAAK,CAAC;IACxB,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,EAAE;QAC7C,MAAM,IAAI,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACpD,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACzB,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,eAAM,CAAC;QAC1E,CAAC,CAAC,CAAC;KACN;IAED,MAAM,GAAG,GAAG,oBAAU,CAAC,4BAAM,CAAC,MAAM,EAAE;QAClC,CAAC,4BAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,MAAM;QAClC,CAAC,4BAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,OAAO,KAAK,SAAS;KACrD,EAAE,4BAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnD,IAAI,QAAQ,GAAG,QAAQ,CAAC;IACxB,IAAI,WAAW,EAAE;QACb,QAAQ,GAAG,8BAAC,2BAAY,QAAE,QAAQ,CAAgB,CAAC;KACtD;IAED,OAAO,CACH,uCAAK,SAAS,EAAE,GAAG,IACd,QAAQ,CACP,CACT,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAGpC,8EAA0C;AAC1C,mDAAgD;AAChD,+DAA4D;AAgB5D,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAE9D,IAAI,WAAW,GAAG,KAAK,CAAC;IACxB,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,EAAE;QAC7C,MAAM,IAAI,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACpD,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACzB,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,eAAM,CAAC;QAC1E,CAAC,CAAC,CAAC;KACN;IAED,MAAM,GAAG,GAAG,oBAAU,CAAC,4BAAM,CAAC,MAAM,EAAE;QAClC,CAAC,4BAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,MAAM;QAClC,CAAC,4BAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,OAAO,KAAK,SAAS;KACrD,EAAE,4BAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnD,IAAI,QAAQ,GAAG,QAAQ,CAAC;IACxB,IAAI,WAAW,EAAE;QACb,QAAQ,GAAG,8BAAC,2BAAY,IAAC,SAAS,EAAE,4BAAM,CAAC,OAAO,IAAG,QAAQ,CAAgB,CAAC;KACjF;IAED,IAAI,MAAiB,CAAC;IACtB,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,EAAE;QACtB,MAAM,GAAG,uCAAK,SAAS,EAAE,4BAAM,CAAC,MAAM,IAAG,KAAK,CAAC,MAAM,CAAO,CAAC;KAChE;IAED,IAAI,KAAgB,CAAC;IACrB,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;QACrB,KAAK,GAAG,uCAAK,SAAS,EAAE,4BAAM,CAAC,KAAK,IAAG,KAAK,CAAC,KAAK,CAAO,CAAC;KAC7D;IAED,OAAO,CACH,uCAAK,SAAS,EAAE,GAAG;QACd,MAAM;QACP,uCAAK,SAAS,EAAE,4BAAM,CAAC,QAAQ,IAC1B,QAAQ,CACP;QACL,KAAK,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

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

@@ -16,13 +16,18 @@
 }
 
 .header--top, .header--bottom {
-    padding: 13px 16.666px;
+    padding: 0 16.666px;
     min-height: 44px;
 }
 .header--left, .header--right {
-    padding: 16.666px 13px;
+    padding: 16.666px 0;
     min-width: 44px;
     flex-direction: column;
+
+    > .contents {
+        flex-direction: column;
+        align-items: center;
+    }
 }
 
 .header--top {
@@ -40,6 +45,45 @@
     order: 2;
 }
 
-.header--center {
+.contents {
+    flex: 1;
+    display: flex;
+}
+
+.header--center > .contents {
     justify-content: center;
 }
+
+.header--top, .header--bottom {
+    .before {
+        margin-right: calc(50px / var(--ratio-dimensions));
+    }
+
+    .after {
+        margin-left: calc(50px / var(--ratio-dimensions));
+    }
+
+    .actions {
+        margin: calc(56px / var(--ratio-dimensions)) 0;
+    }
+}
+
+.header--left, .header--right {
+    .before {
+        margin-bottom: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .after {
+        margin-top: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .actions {
+        margin: 0 calc(56px / var(--ratio-dimensions));
+    }
+}
+
+.before, .after {
+    display: flex;
+}

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

@@ -0,0 +1,17 @@
+import React from "react";
+import type { ReactNode } from "react";
+import type { ICON } from "../../icons/Icon";
+interface LinkProps {
+    href: string;
+}
+interface Props {
+    icon?: ICON | Exclude<ReactNode, string>;
+    onClick?: () => void;
+    href?: string;
+    to?: string;
+    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    label?: ReactNode;
+}
+declare const HeaderIconAction: React.VFC<Props>;
+export { HeaderIconAction };
+//# sourceMappingURL=HeaderIconAction.d.ts.map

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+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.HeaderIconAction = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../../icons/Icon");
+const HeaderIconAction_module_scss_1 = __importDefault(require("./HeaderIconAction.module.scss"));
+const HeaderIconAction = (props) => {
+    const { icon, label, href, to, Link } = props, restProps = __rest(props, ["icon", "label", "href", "to", "Link"]);
+    let content = icon;
+    if (typeof icon === "string") {
+        content = react_1.default.createElement(Icon_1.Icon, { className: HeaderIconAction_module_scss_1.default.icon, name: icon });
+    }
+    if (to) {
+        if (!Link) {
+            throw new TypeError("`to` prop given without `Link` component");
+        }
+        return react_1.default.createElement(Link, Object.assign({ href: to }, restProps),
+            react_1.default.createElement("a", { className: HeaderIconAction_module_scss_1.default.a }, content));
+    }
+    if (href) {
+        return react_1.default.createElement("a", Object.assign({ href: href, className: HeaderIconAction_module_scss_1.default.a }, restProps), content);
+    }
+    return (react_1.default.createElement("button", { className: HeaderIconAction_module_scss_1.default.btn, onClick: props.onClick }, content));
+};
+exports.HeaderIconAction = HeaderIconAction;
+//# sourceMappingURL=HeaderIconAction.js.map

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

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

package/dist/components/layout/header/HeaderIconAction.module.scss

@@ -0,0 +1,22 @@
+.btn, .a {
+    padding: 7px;
+    background: none;
+    border-radius: 666px;
+    display: inline-block;
+    border: calc(2px / var(--ratio-border)) solid transparent;
+    color: var(--header-text);
+
+    &:hover {
+        background: #00000022;
+    }
+    &:active {
+        background: #00000011;
+        color: currentColor;
+    }
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"EqualActions.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAiBzB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"EqualActions.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiBjC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -7,16 +7,17 @@ exports.EqualActions = void 0;
 const react_1 = __importDefault(require("react"));
 const Action_1 = require("./Action");
 const EqualActions_module_scss_1 = __importDefault(require("./EqualActions.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
 const EqualActions = (props) => {
     react_1.default.Children.forEach(props.children, (child) => {
         if (!child || typeof child !== "object" || !("type" in child) || child.type !== Action_1.Action) {
-            throw new TypeError("Every child of Actions must be an Action component");
+            throw new TypeError("Every child of EqualActions must be an Action component");
         }
     });
     const style = {
         "--actions-count": react_1.default.Children.count(props.children),
     };
-    return (react_1.default.createElement("div", { className: EqualActions_module_scss_1.default.actions, style: style }, props.children));
+    return (react_1.default.createElement("div", { className: classnames_1.default(EqualActions_module_scss_1.default.actions, props.className), style: style }, props.children));
 };
 exports.EqualActions = EqualActions;
 //# sourceMappingURL=EqualActions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EqualActions.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qCAAkC;AAElC,0FAAgD;AAEhD,MAAM,YAAY,GAAa,CAAC,KAAK,EAAE,EAAE;IACrC,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAM,EAAE;YACpF,MAAM,IAAI,SAAS,CAAC,oDAAoD,CAAC,CAAC;SAC7E;IACL,CAAC,CAAC,CAAC;IAGH,MAAM,KAAK,GAAG;QACV,iBAAiB,EAAE,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;KACnC,CAAC;IAEzB,OAAO,CACH,uCAAK,SAAS,EAAE,kCAAM,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,IACvC,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oCAAY"}
+{"version":3,"file":"EqualActions.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qCAAkC;AAElC,0FAAgD;AAChD,4DAAoC;AAMpC,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAM,EAAE;YACpF,MAAM,IAAI,SAAS,CAAC,yDAAyD,CAAC,CAAC;SAClF;IACL,CAAC,CAAC,CAAC;IAGH,MAAM,KAAK,GAAG;QACV,iBAAiB,EAAE,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;KACnC,CAAC;IAEzB,OAAO,CACH,uCAAK,SAAS,EAAE,oBAAU,CAAC,kCAAM,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACpE,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oCAAY"}

package/dist/demo/Menu.module.scss

@@ -35,5 +35,7 @@
         &:hover {
             background: var(--active-bg);
         }
+
+        --focus-bg-set: var(--focus-color);
     }
 }

package/dist/demo/components/layout/header/Header.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
 declare const HeaderDemo: () => JSX.Element;
-export { HeaderDemo };
+declare const CenteredHeaderDemo: () => JSX.Element;
+declare const HeaderWithButtonsDemo: () => JSX.Element;
+declare const HeaderWithButtonsOnSideDemo: () => JSX.Element;
+export { HeaderDemo, CenteredHeaderDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };
 //# sourceMappingURL=Header.d.ts.map

package/dist/demo/components/layout/header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":";AAIA,QAAA,MAAM,UAAU,mBAUf,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":";AAMA,QAAA,MAAM,UAAU,mBAUf,CAAC;AAEF,QAAA,MAAM,kBAAkB,mBASvB,CAAC;AAKF,QAAA,MAAM,qBAAqB,mBAqD1B,CAAC;AAEF,QAAA,MAAM,2BAA2B,mBAqBhC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,CAAC"}

package/dist/demo/components/layout/header/Header.js

@@ -3,9 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderDemo = void 0;
+exports.HeaderWithButtonsOnSideDemo = exports.HeaderWithButtonsDemo = exports.CenteredHeaderDemo = exports.HeaderDemo = void 0;
 const react_1 = __importDefault(require("react"));
+const link_1 = __importDefault(require("next/link"));
 const index_js_1 = require("../../../../index.js");
+const HeaderIconAction_1 = require("../../../../components/layout/header/HeaderIconAction");
 const HeaderDemo = () => {
     const longContent = new Array(1000).fill(null).map((_, key) => react_1.default.createElement("div", { key: key }, "content"));
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -13,4 +15,41 @@ const HeaderDemo = () => {
         longContent));
 };
 exports.HeaderDemo = HeaderDemo;
+const CenteredHeaderDemo = () => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_js_1.Header, { center: true }, "Messages"),
+        react_1.default.createElement("div", null, "Header text is centered")));
+};
+exports.CenteredHeaderDemo = CenteredHeaderDemo;
+const handleClick = () => { alert(1); };
+const HeaderWithButtonsDemo = () => {
+    const demo = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: index_js_1.ICON.back, onClick: handleClick }),
+        react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: index_js_1.ICON.checkmark, onClick: handleClick })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_js_1.Header, { center: true, before: "A text" }, "Messages"),
+        react_1.default.createElement("div", null, "Header text is centered"),
+        react_1.default.createElement(index_js_1.Header, { before: "A text" }, "Messages"),
+        react_1.default.createElement("div", null, "Header text is start aligned"),
+        react_1.default.createElement(index_js_1.Header, { before: demo }, "Messages"),
+        react_1.default.createElement("div", null, "Some button icons are added on the left to left aligned title"),
+        react_1.default.createElement(index_js_1.Header, { before: demo, center: true }, "Messages"),
+        react_1.default.createElement("div", null, "Some button icons are added on the left to centered aligned title"),
+        react_1.default.createElement(index_js_1.Header, { before: react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: index_js_1.ICON.back, to: "/react-miui", Link: link_1.default }), center: true }, "Messages"),
+        react_1.default.createElement("div", null, "Some internal link icons are added on the left to centered aligned title"),
+        react_1.default.createElement(index_js_1.Header, { before: react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: index_js_1.ICON.back, href: "https://www.npmjs.com/package/react-miui" }), center: true }, "Messages"),
+        react_1.default.createElement("div", null, "Some external link icons are added on the left to centered aligned title"),
+        react_1.default.createElement(index_js_1.Header, { before: react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: index_js_1.ICON.back, href: "https://www.npmjs.com/package/react-miui" }), after: react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: index_js_1.ICON.checkmark, href: "https://www.npmjs.com/package/react-miui" }), center: true }, "Messages"),
+        react_1.default.createElement("div", null, "Some external link icons are added on both sides to centered aligned title")));
+};
+exports.HeaderWithButtonsDemo = HeaderWithButtonsDemo;
+const HeaderWithButtonsOnSideDemo = () => {
+    const demo = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: index_js_1.ICON.back, onClick: handleClick }),
+        react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: index_js_1.ICON.checkmark, onClick: handleClick })));
+    return (react_1.default.createElement(index_js_1.StickyHeader, { position: "left" },
+        react_1.default.createElement(index_js_1.Header, { center: true, before: demo, after: demo }, "M"),
+        react_1.default.createElement(index_js_1.StickyHeader.Content, null, "Header is on the side")));
+};
+exports.HeaderWithButtonsOnSideDemo = HeaderWithButtonsOnSideDemo;
 //# sourceMappingURL=Header.js.map

package/dist/demo/components/layout/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,mDAA8C;AAE9C,MAAM,UAAU,GAAG,GAAG,EAAE;IAEpB,MAAM,WAAW,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,uCAAK,GAAG,EAAE,GAAG,cAAe,CAAC,CAAC;IAE7F,OAAO,CACH;QACI,8BAAC,iBAAM,qBAAoB;QAC1B,WAAW,CACb,CACN,CAAC;AACN,CAAC,CAAC;AAEO,gCAAU"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAA6B;AAE7B,mDAAkE;AAClE,4FAAyF;AAEzF,MAAM,UAAU,GAAG,GAAG,EAAE;IAEpB,MAAM,WAAW,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,uCAAK,GAAG,EAAE,GAAG,cAAe,CAAC,CAAC;IAE7F,OAAO,CACH;QACI,8BAAC,iBAAM,qBAAoB;QAC1B,WAAW,CACb,CACN,CAAC;AACN,CAAC,CAAC;AA8FO,gCAAU;AA5FnB,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC5B,OAAO,CACH;QACI,8BAAC,iBAAM,IAAC,MAAM,EAAE,IAAI,eAAmB;QACvC,qEAEM,CACP,CACN,CAAC;AACN,CAAC,CAAC;AAmFmB,gDAAkB;AAjFvC,MAAM,WAAW,GAAG,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAGxC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IAC/B,MAAM,IAAI,GAAG,CACT;QACI,8BAAC,mCAAgB,IAAC,IAAI,EAAE,eAAI,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI;QAC3D,8BAAC,mCAAgB,IAAC,IAAI,EAAE,eAAI,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,GAAI,CACjE,CACN,CAAC;IAEF,OAAO,CACH;QACI,8BAAC,iBAAM,IAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,eAAmB;QACzD,qEAEM;QACN,8BAAC,iBAAM,IAAC,MAAM,EAAE,QAAQ,eAAmB;QAC3C,0EAEM;QACN,8BAAC,iBAAM,IAAC,MAAM,EAAE,IAAI,eAAmB;QACvC,2GAEM;QACN,8BAAC,iBAAM,IAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,eAAmB;QACrD,+GAEM;QACN,8BAAC,iBAAM,IACH,MAAM,EAAE,8BAAC,mCAAgB,IAAC,IAAI,EAAE,eAAI,CAAC,IAAI,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,cAAI,GAAI,EAC5E,MAAM,EAAE,IAAI,eAEP;QACT,sHAEM;QACN,8BAAC,iBAAM,IACH,MAAM,EAAE,8BAAC,mCAAgB,IAAC,IAAI,EAAE,eAAI,CAAC,IAAI,EAAE,IAAI,EAAE,0CAA0C,GAAI,EAC/F,MAAM,EAAE,IAAI,eAEP;QACT,sHAEM;QACN,8BAAC,iBAAM,IACH,MAAM,EAAE,8BAAC,mCAAgB,IAAC,IAAI,EAAE,eAAI,CAAC,IAAI,EAAE,IAAI,EAAE,0CAA0C,GAAI,EAC/F,KAAK,EAAE,8BAAC,mCAAgB,IAAC,IAAI,EAAE,eAAI,CAAC,SAAS,EAAE,IAAI,EAAE,0CAA0C,GAAI,EACnG,MAAM,EAAE,IAAI,eAEP;QACT,wHAEM,CACP,CACN,CAAC;AACN,CAAC,CAAC;AAyBuC,sDAAqB;AAvB9D,MAAM,2BAA2B,GAAG,GAAG,EAAE;IACrC,MAAM,IAAI,GAAG,CACT;QACI,8BAAC,mCAAgB,IAAC,IAAI,EAAE,eAAI,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI;QAC3D,8BAAC,mCAAgB,IAAC,IAAI,EAAE,eAAI,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,GAAI,CACjE,CACN,CAAC;IAEF,OAAO,CACH,8BAAC,uBAAY,IAAC,QAAQ,EAAE,MAAM;QAC1B,8BAAC,iBAAM,IACH,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,QAEN;QACT,8BAAC,uBAAY,CAAC,OAAO,gCAEE,CACZ,CAClB,CAAC;AACN,CAAC,CAAC;AAE8D,kEAA2B"}

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

@@ -29,7 +29,7 @@ const ActionDemo = () => {
             " - onClick action"),
         react_1.default.createElement("div", null,
             react_1.default.createElement(Action_1.Action, { icon: Icon_1.ICON.checkmark, onClick: handleClick, label: "Pineapple" }),
-            " - onClick action")));
+            " - onClick action with label")));
 };
 exports.ActionDemo = ActionDemo;
 const ActionsOnLeft = () => {
@@ -72,7 +72,7 @@ const ActionLabelsOnBottom = () => {
 exports.ActionLabelsOnBottom = ActionLabelsOnBottom;
 const ActionsDemo = () => {
     return (react_1.default.createElement("div", null,
-        "To make every action take the same amount of horizontal space you need to wrap every Action with Actions wrapper. Some components (like Header) will do that automatically for you. If you need to use Actions outside of such components - manually wrap them with Actions.",
+        "To make every action take the same amount of horizontal space you need to wrap every Action with EqualActions wrapper. Some components (like Header) will do that automatically for you. If you need to use Actions outside of such components - manually wrap them with EqualActions.",
         react_1.default.createElement("div", null,
             react_1.default.createElement(EqualActions_1.EqualActions, null,
                 react_1.default.createElement(Action_1.Action, { icon: Icon_1.ICON.checkmark, label: "Add" }),

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

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/action/Action.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/action/Action.tsx"],"names":[],"mappings":"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"}

package/dist/demo/components/ui/icons/Icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/ui/icons/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAkBtB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/ui/icons/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAiBtB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/demo/components/ui/icons/Icons.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconsDemo = void 0;
 const react_1 = __importDefault(require("react"));
 const index_js_1 = require("../../../../index.js");
+const Icons_module_scss_1 = __importDefault(require("./Icons.module.scss"));
 const IconsDemo = () => {
     const icons = Object.values(index_js_1.ICON).map((value) => {
-        return (react_1.default.createElement("li", { key: value },
-            react_1.default.createElement(index_js_1.Icon, { name: value }),
-            value));
+        return (react_1.default.createElement(index_js_1.Item, { key: value },
+            react_1.default.createElement("div", { className: Icons_module_scss_1.default.row },
+                value,
+                react_1.default.createElement(index_js_1.Icon, { name: value }))));
     });
-    return (react_1.default.createElement("div", null,
-        "Icons:",
-        react_1.default.createElement("ul", null, icons)));
+    return (react_1.default.createElement(index_js_1.List, null, icons));
 };
 exports.IconsDemo = IconsDemo;
 //# sourceMappingURL=Icons.js.map

package/dist/demo/components/ui/icons/Icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/icons/Icons.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,mDAAkD;AAElD,MAAM,SAAS,GAAa,GAAG,EAAE;IAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,eAAI,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5C,OAAO,CACH,sCAAI,GAAG,EAAE,KAAK;YACV,8BAAC,eAAI,IAAC,IAAI,EAAE,KAAK,GAAI;YACpB,KAAK,CACL,CACR,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,CACH;;QAEI,0CACK,KAAK,CACL,CACH,CACT,CAAC;AACN,CAAC,CAAC;AAEO,8BAAS"}
+{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/icons/Icons.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,mDAA8D;AAE9D,4EAAyC;AAEzC,MAAM,SAAS,GAAa,GAAG,EAAE;IAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,eAAI,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5C,OAAO,CACH,8BAAC,eAAI,IAAC,GAAG,EAAE,KAAK;YACZ,uCAAK,SAAS,EAAE,2BAAM,CAAC,GAAG;gBACrB,KAAK;gBACN,8BAAC,eAAI,IAAC,IAAI,EAAE,KAAK,GAAI,CACnB,CACH,CACV,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,8BAAC,eAAI,QACA,KAAK,CACH,CACV,CAAC;AACN,CAAC,CAAC;AAEO,8BAAS"}

package/dist/demo/components/ui/icons/Icons.module.scss

@@ -0,0 +1,4 @@
+.row {
+    display: flex;
+    justify-content: space-between;
+}

package/dist/demo/componentsMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"componentsMap.d.ts","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoB7C,UAAU,MAAM;IAEZ,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC7B;AAED,UAAU,UAAU;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,YAAY,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,EAAE,MAyEpB,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC;AAEF,YAAY,EACR,MAAM,EACN,UAAU,GACb,CAAC"}
+{"version":3,"file":"componentsMap.d.ts","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAyB7C,UAAU,MAAM;IAEZ,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC7B;AAED,UAAU,UAAU;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,YAAY,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,EAAE,MAyFpB,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC;AAEF,YAAY,EACR,MAAM,EACN,UAAU,GACb,CAAC"}

package/dist/demo/componentsMap.js

@@ -22,29 +22,45 @@ const componentsMap = {
         name: "Header",
         Component: Header_1.HeaderDemo,
         children: {
-            Sticky: {
-                name: "Sticky header",
-                Component: StickyHeader_1.StickyHeaderDemo,
-            },
-            StickyBottom: {
-                name: "On bottom",
-                Component: StickyHeader_1.StickyHeaderBottomDemo,
-            },
-            StickyTopBottom: {
-                name: "On top & bottom",
-                Component: StickyHeader_1.StickyHeaderTopBottomDemo,
+            Centered: {
+                name: "Centered",
+                Component: Header_1.CenteredHeaderDemo,
             },
-            StickyLeft: {
-                name: "On left",
-                Component: StickyHeader_1.StickyHeaderLeftDemo,
+            WithButtons: {
+                name: "With buttons",
+                Component: Header_1.HeaderWithButtonsDemo,
+                children: {
+                    OnLeft: {
+                        name: "On the side",
+                        Component: Header_1.HeaderWithButtonsOnSideDemo,
+                    },
+                },
             },
-            StickyRight: {
-                name: "On right",
-                Component: StickyHeader_1.StickyHeaderRightDemo,
-            },
-            StickyLeftCentered: {
-                name: "On left centered",
-                Component: StickyHeader_1.StickyHeaderLeftCenterDemo,
+            Sticky: {
+                name: "Sticky",
+                Component: StickyHeader_1.StickyHeaderDemo,
+                children: {
+                    StickyBottom: {
+                        name: "On bottom",
+                        Component: StickyHeader_1.StickyHeaderBottomDemo,
+                    },
+                    StickyTopBottom: {
+                        name: "On top & bottom",
+                        Component: StickyHeader_1.StickyHeaderTopBottomDemo,
+                    },
+                    StickyLeft: {
+                        name: "On left",
+                        Component: StickyHeader_1.StickyHeaderLeftDemo,
+                    },
+                    StickyRight: {
+                        name: "On right",
+                        Component: StickyHeader_1.StickyHeaderRightDemo,
+                    },
+                    StickyLeftCentered: {
+                        name: "On left centered",
+                        Component: StickyHeader_1.StickyHeaderLeftCenterDemo,
+                    },
+                },
             },
         },
     },
@@ -64,8 +80,8 @@ const componentsMap = {
                 name: "Actions on left header",
                 Component: Action_1.ActionsOnLeft,
             },
-            Actions: {
-                name: "Actions (wrapper)",
+            EqualActions: {
+                name: "EqualActions (wrapper)",
                 Component: Action_1.ActionsDemo,
             },
         },