react-miui 0.23.6 → 0.23.7-beta.0

package/.storybook/preview.tsx

@@ -17,6 +17,7 @@ const preview: Preview = {
                 <style id={"miui-css-reset"} dangerouslySetInnerHTML={{__html: cssReset}}/>
                 <style>
                     {`.docblock-argstable textarea[id] { box-sizing: content-box; }`}
+                    {`#storybook-root { height: 100%; }`}
                 </style>
                 <Story/>
             </>

package/CHANGELOG.md

@@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [EZEZ Changelog](https://ezez.dev/guidelines/changelog/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [UNRELEASED]
+### Changed
+- `Header`, `StickyHeader` and `HeaderIconAction` converted to stitches
+### Fixed
+- `HeaderIconAction` sometimes is squashed
+### Removed
+- unused `label` prop from `HeaderIconAction`
+
 ## [0.23.6] - 2023-12-29
 ### Fixed
 - `Header` missing classNames

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

@@ -16,4 +16,5 @@ interface Props {
 }
 declare const Icon: React.FC<Props>;
 export { Icon, ICON };
+export type { Props as IconProps, };
 //# sourceMappingURL=Icon.d.ts.map

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;AAc1B,aAAK,IAAI;IACL,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CAChB;AAED,UAAU,KAAK;IACX,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAcD,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;AAc1B,aAAK,IAAI;IACL,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CAChB;AAED,UAAU,KAAK;IACX,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAcD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAEtB,YAAY,EACR,KAAK,IAAI,SAAS,GACrB,CAAC"}

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ReactNode } from "react";
-import { Div } from "../../native";
+import type { Div } from "../../native";
 interface Props {
     center?: boolean;
     variant?: "toolbar" | "colored";

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;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,UAAU,KAAK;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKhC,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK,CA8C9D,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;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAOxC,UAAU,KAAK;IAIX,MAAM,CAAC,EAAE,OAAO,CAAC;IAIjB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKhC,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAI/C,MAAM,CAAC,EAAE,SAAS,CAAC;IAInB,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK,CAsC9D,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -16,38 +16,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const Action_1 = require("../../ui/action/Action");
 const EqualActions_1 = require("../../ui/action/EqualActions");
-const native_1 = require("../../native");
-const Header_module_scss_1 = __importDefault(require("./Header.module.scss"));
+const Header_styled_1 = require("./Header.styled");
 const Header = (props) => {
-    const { center, variant, position = "top", className: _className, before: _before, after: _after, children } = props, rest = __rest(props, ["center", "variant", "position", "className", "before", "after", "children"]);
+    const { position = "top", before: _before, after: _after, children } = props, rest = __rest(props, ["position", "before", "after", "children"]);
     const chld = react_1.default.Children.toArray(props.children);
     const justActions = chld.every(c => {
         return c && typeof c === "object" && "type" in c && c.type === Action_1.Action;
     });
-    const cls = (0, classnames_1.default)(Header_module_scss_1.default.header, {
-        [Header_module_scss_1.default["header--center"]]: center,
-        [Header_module_scss_1.default["header--toolbar"]]: variant === "toolbar",
-        [Header_module_scss_1.default["header--colored"]]: variant === "colored",
-    }, Header_module_scss_1.default[`header--${position}`], props.className);
     let contents = children;
     if (justActions) {
         const mode = position === "top" || position === "bottom" ? "horizontal" : "vertical";
-        contents = react_1.default.createElement(EqualActions_1.EqualActions, { className: Header_module_scss_1.default.actions, mode: mode }, contents);
+        contents = react_1.default.createElement(EqualActions_1.EqualActions, { mode: mode }, contents);
     }
     let before;
     if (props.before != null) {
-        before = react_1.default.createElement("div", { className: Header_module_scss_1.default.before }, props.before);
+        before = react_1.default.createElement(Header_styled_1.Before, null, props.before);
     }
     let after;
     if (props.after != null) {
-        after = react_1.default.createElement("div", { className: Header_module_scss_1.default.after }, props.after);
+        after = react_1.default.createElement(Header_styled_1.After, null, props.after);
     }
-    return (react_1.default.createElement(native_1.Div, Object.assign({ className: cls }, rest),
+    return (react_1.default.createElement(Header_styled_1.StyledHeader, Object.assign({}, rest, { position: position, "data-header-position": position }),
         before,
-        react_1.default.createElement("div", { className: Header_module_scss_1.default.contents }, contents),
+        react_1.default.createElement(Header_styled_1.Contents, null, contents),
         after));
 };
 exports.Header = Header;

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;AAG1B,4DAAoC;AAEpC,mDAAgD;AAChD,+DAA4D;AAC5D,yCAAmC;AAEnC,8EAA0C;AAc1C,MAAM,MAAM,GAAuD,CAAC,KAAK,EAAE,EAAE;IACzE,MAAM,EACF,MAAM,EACN,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EACrD,QAAQ,KAER,KAAK,EADF,IAAI,UACP,KAAK,EAPH,6EAOL,CAAQ,CAAC;IAEV,MAAM,IAAI,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QAC/B,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,eAAM,CAAC;IAC1E,CAAC,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,4BAAM,CAAC,MAAM,EAAE;QAClC,CAAC,4BAAM,CAAC,gBAAgB,CAAW,CAAC,EAAE,MAAM;QAC5C,CAAC,4BAAM,CAAC,iBAAiB,CAAW,CAAC,EAAE,OAAO,KAAK,SAAS;QAC5D,CAAC,4BAAM,CAAC,iBAAiB,CAAW,CAAC,EAAE,OAAO,KAAK,SAAS;KAC/D,EAAE,4BAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnD,IAAI,QAAQ,GAAG,QAAQ,CAAC;IACxB,IAAI,WAAW,EAAE,CAAC;QACd,MAAM,IAAI,GAAG,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;QACrF,QAAQ,GAAG,8BAAC,2BAAY,IAAC,SAAS,EAAE,4BAAM,CAAC,OAAiB,EAAE,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAgB,CAAC;IACxG,CAAC;IAED,IAAI,MAAiB,CAAC;IACtB,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;QACvB,MAAM,GAAG,uCAAK,SAAS,EAAE,4BAAM,CAAC,MAAM,IAAG,KAAK,CAAC,MAAM,CAAO,CAAC;IACjE,CAAC;IAED,IAAI,KAAgB,CAAC;IACrB,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;QACtB,KAAK,GAAG,uCAAK,SAAS,EAAE,4BAAM,CAAC,KAAK,IAAG,KAAK,CAAC,KAAK,CAAO,CAAC;IAC9D,CAAC;IAED,OAAO,CACH,8BAAC,YAAG,kBAAC,SAAS,EAAE,GAAG,IAAM,IAAI;QACxB,MAAM;QACP,uCAAK,SAAS,EAAE,4BAAM,CAAC,QAAQ,IAC1B,QAAQ,CACP;QACL,KAAK,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAK1B,mDAAgD;AAChD,+DAA4D;AAE5D,mDAAwE;AA0BxE,MAAM,MAAM,GAAuD,CAAC,KAAK,EAAE,EAAE;IACzE,MAAM,EACF,QAAQ,GAAG,KAAK,EAChB,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAC9B,QAAQ,KAER,KAAK,EADF,IAAI,UACP,KAAK,EALH,2CAKL,CAAQ,CAAC;IAEV,MAAM,IAAI,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QAC/B,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,eAAM,CAAC;IAC1E,CAAC,CAAC,CAAC;IAEH,IAAI,QAAQ,GAAG,QAAQ,CAAC;IACxB,IAAI,WAAW,EAAE,CAAC;QACd,MAAM,IAAI,GAAG,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;QACrF,QAAQ,GAAG,8BAAC,2BAAY,IAAC,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAgB,CAAC;IACnE,CAAC;IAED,IAAI,MAAiB,CAAC;IACtB,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;QACvB,MAAM,GAAG,8BAAC,sBAAM,QAAE,KAAK,CAAC,MAAM,CAAU,CAAC;IAC7C,CAAC;IAED,IAAI,KAAgB,CAAC;IACrB,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;QACtB,KAAK,GAAG,8BAAC,qBAAK,QAAE,KAAK,CAAC,KAAK,CAAS,CAAC;IACzC,CAAC;IAED,OAAO,CACH,8BAAC,4BAAY,oBAAK,IAAI,IAAE,QAAQ,EAAE,QAAQ,0BAAwB,QAAQ;QACrE,MAAM;QACP,8BAAC,wBAAQ,QACJ,QAAQ,CACF;QACV,KAAK,CACK,CAClB,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

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

@@ -0,0 +1,11 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import { Header } from "./Header";
+declare const meta: Meta;
+type Story = StoryObj<typeof Header>;
+declare const Primary: Story;
+declare const LongContent: Story;
+declare const WithButtons: Story;
+declare const Vertical: Story;
+export { Primary, LongContent, WithButtons, Vertical, };
+export default meta;
+//# sourceMappingURL=Header.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAsBX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KAAU,CAAC;AAC1B,QAAA,MAAM,WAAW,EAAE,KAalB,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,KASlB,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAYf,CAAC;AAEF,OAAO,EACH,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,GACX,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Vertical = exports.WithButtons = exports.LongContent = exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../../icons/Icon");
+const Header_1 = require("./Header");
+const HeaderIconAction_1 = require("./HeaderIconAction");
+const meta = {
+    title: "Components/Layout/Header/Header",
+    component: Header_1.Header,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        before: {
+            control: {
+                type: "text",
+            },
+        },
+        after: {
+            control: {
+                type: "text",
+            },
+        },
+    },
+    args: {
+        before: "Left side",
+        children: "Title",
+        after: "[Icons]",
+    },
+};
+const Primary = {};
+exports.Primary = Primary;
+const LongContent = {
+    render: (args) => {
+        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,
+            react_1.default.createElement(Header_1.Header, Object.assign({}, args)),
+            longContent));
+    },
+};
+exports.LongContent = LongContent;
+const handleClick = () => { alert(1); };
+const WithButtons = {
+    args: {
+        before: (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: Icon_1.ICON.back, onClick: handleClick }),
+            react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: Icon_1.ICON.checkmark, onClick: handleClick }))),
+    },
+};
+exports.WithButtons = WithButtons;
+const Vertical = {
+    args: {
+        before: (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: Icon_1.ICON.back, onClick: handleClick }),
+            react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, { icon: Icon_1.ICON.checkmark, onClick: handleClick }))),
+        after: null,
+        position: "left",
+        children: "M",
+    },
+};
+exports.Vertical = Vertical;
+exports.default = meta;
+//# sourceMappingURL=Header.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAI1B,2CAAwC;AAExC,qCAAkC;AAClC,yDAAsD;AAEtD,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,eAAM;IACjB,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;IAE5B,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,OAAO,EAAE;gBACL,IAAI,EAAE,MAAM;aACf;SACJ;QACD,KAAK,EAAE;YACH,OAAO,EAAE;gBACL,IAAI,EAAE,MAAM;aACf;SACJ;KACJ;IACD,IAAI,EAAE;QACF,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,SAAS;KACnB;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU,EAAE,CAAC;AA4CtB,0BAAO;AA3CX,MAAM,WAAW,GAAU;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAEb,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;QAE7F,OAAO,CACH;YACI,8BAAC,eAAM,oBAAK,IAAI,EAAI;YACnB,WAAW,CAEb,CACN,CAAC;IACN,CAAC;CACJ,CAAC;AA+BE,kCAAW;AA7Bf,MAAM,WAAW,GAAG,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAExC,MAAM,WAAW,GAAU;IACvB,IAAI,EAAE;QACF,MAAM,EAAE,CACJ;YACI,8BAAC,mCAAgB,IAAC,IAAI,EAAE,WAAI,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI;YAC3D,8BAAC,mCAAgB,IAAC,IAAI,EAAE,WAAI,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,GAAI,CACjE,CACN;KACJ;CACJ,CAAC;AAmBE,kCAAW;AAjBf,MAAM,QAAQ,GAAU;IACpB,IAAI,EAAE;QACF,MAAM,EAAE,CACJ;YACI,8BAAC,mCAAgB,IAAC,IAAI,EAAE,WAAI,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI;YAC3D,8BAAC,mCAAgB,IAAC,IAAI,EAAE,WAAI,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,GAAI,CACjE,CACN;QACD,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,GAAG;KAChB;CACJ,CAAC;AAME,4BAAQ;AAGZ,kBAAe,IAAI,CAAC"}

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

@@ -0,0 +1,326 @@
+declare const Contents: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+declare const Before: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+declare const After: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+declare const StyledHeader: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    variant?: "toolbar" | "colored";
+    position?: "left" | "bottom" | "right" | "top";
+    center?: boolean | "true";
+}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+export { StyledHeader, Contents, Before, After, };
+//# sourceMappingURL=Header.styled.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.styled.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEV,CAAC;AAEH,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAET,CAAC;AAyDH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDhB,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,KAAK,GACR,CAAC"}

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.After = exports.Before = exports.Contents = exports.StyledHeader = void 0;
+const theme_1 = require("../../../theme");
+const EqualActions_1 = require("../../ui/action/EqualActions");
+const Contents = (0, theme_1.styled)("div", {
+    flex: 1,
+    display: "flex",
+});
+exports.Contents = Contents;
+const Before = (0, theme_1.styled)("div", {
+    display: "flex",
+});
+exports.Before = Before;
+const After = (0, theme_1.styled)("div", {
+    display: "flex",
+});
+exports.After = After;
+const topBottomBeforeAfter = {
+    height: "100%",
+    padding: "7px 0",
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+};
+const leftRightBeforeAfter = {
+    width: "100%",
+    padding: "0 7px",
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+};
+const topBottomShared = {
+    padding: "0 16.666px",
+    height: "44px",
+    [`& ${Before.toString()}`]: topBottomBeforeAfter,
+    [`& ${After.toString()}`]: topBottomBeforeAfter,
+    [`& ${EqualActions_1.EqualActions.toString()}`]: {
+        margin: `${(0, theme_1.dimensionsPxToRem)(56)} 0`,
+    },
+};
+const leftRightShared = {
+    padding: "16.666px 0",
+    width: "44px",
+    flexDirection: "column",
+    [`& ${Contents.toString()}`]: {
+        flexDirection: "column",
+        alignItems: "center",
+    },
+    [`& ${Before.toString()}`]: Object.assign({ flexDirection: "column" }, leftRightBeforeAfter),
+    [`& ${After.toString()}`]: Object.assign({ flexDirection: "column" }, leftRightBeforeAfter),
+    [`& ${EqualActions_1.EqualActions.toString()}`]: {
+        margin: `0 ${(0, theme_1.dimensionsPxToRem)(56)}`,
+    },
+};
+const StyledHeader = (0, theme_1.styled)("div", {
+    "--border-color": "$colors$headerBorder",
+    "--background-color": "$colors$headerBg",
+    "backgroundClip": "padding-box",
+    "background": "var(--background-color)",
+    "display": "flex",
+    "alignItems": "center",
+    "fontSize": (0, theme_1.pxToRem)(15),
+    "fontWeight": "bold",
+    "boxSizing": "border-box",
+    "color": "$headerText",
+    "gap": (0, theme_1.dimensionsPxToRem)(50),
+    "variants": {
+        variant: {
+            toolbar: {
+                "--border-color": "$colors$toolbarBorder",
+                "--background-color": "$colors$toolbarBg",
+            },
+            colored: {
+                "--border-color": "var(--custom-header-color)",
+                "--background-color": "var(--custom-header-color)",
+                "color": "var(--custom-text-color)",
+            },
+        },
+        position: {
+            top: Object.assign({ borderBottom: "0.37px solid var(--border-color)" }, topBottomShared),
+            bottom: Object.assign({ borderTop: "0.37px solid var(--border-color)", order: 2 }, topBottomShared),
+            left: Object.assign({ borderRight: "0.37px solid var(--border-color)" }, leftRightShared),
+            right: Object.assign({ borderLeft: "0.37px solid var(--border-color)", order: 2 }, leftRightShared),
+        },
+        center: {
+            true: {
+                [`& ${Contents.toString()}`]: {
+                    justifyContent: "center",
+                },
+            },
+        },
+    },
+});
+exports.StyledHeader = StyledHeader;
+//# sourceMappingURL=Header.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.styled.js","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.styled.ts"],"names":[],"mappings":"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"}

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

@@ -11,8 +11,7 @@ interface Props {
     href?: string;
     to?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
-    label?: ReactNode;
-    className?: string;
+    className?: string | undefined;
 }
 declare const HeaderIconAction: React.FC<Props>;
 export { HeaderIconAction };

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;AAIvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAM7C,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;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;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4BrC,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;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,KAAK;IAIX,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAIzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAIrB,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,EAAE,CAAC,EAAE,MAAM,CAAC;IAIZ,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAI7D,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAMD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyBrC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}