react-miui 0.23.6 → 0.23.7-beta.0

package/esm/components/layout/header/HeaderIconAction.styled.d.ts

@@ -0,0 +1,243 @@
+/// <reference types="react" />
+declare const Btn: import("@stitches/react/types/styled-component").StyledComponent<"button", {}, {}, 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 A: import("@stitches/react/types/styled-component").StyledComponent<"a", {}, {}, 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 StyledIcon: import("@stitches/react/types/styled-component").StyledComponent<import("react").FC<import("../../icons/Icon").IconProps>, {}, {}, 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 { Btn, A, StyledIcon, };
+//# sourceMappingURL=HeaderIconAction.styled.d.ts.map

package/esm/components/layout/header/HeaderIconAction.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconAction.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.styled.ts"],"names":[],"mappings":";AAyBA,QAAA,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAiC,CAAC;AAC3C,QAAA,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA4B,CAAC;AAEpC,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKd,CAAC;AAEH,OAAO,EACH,GAAG,EACH,CAAC,EACD,UAAU,GACb,CAAC"}

package/esm/components/layout/header/HeaderIconAction.styled.js

@@ -0,0 +1,30 @@
+import { styled } from "../../../theme.js";
+import { Icon } from "../../icons/Icon.js";
+const sharedStyles = {
+    "blockSize": "100%",
+    "aspectRatio": "1",
+    "background": "none",
+    "borderRadius": "666px",
+    "display": "inline-flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "border": "calc(2px / var(--ratio-border)) solid transparent",
+    "color": "currentColor",
+    "&:hover": {
+        background: "#00000022",
+    },
+    "&:active": {
+        background: "#00000011",
+        color: "currentColor",
+    },
+};
+const Btn = styled("button", sharedStyles);
+const A = styled("a", sharedStyles);
+const StyledIcon = styled(Icon, {
+    width: "16px",
+    height: "16px",
+    display: "block",
+    fill: "currentColor",
+});
+export { Btn, A, StyledIcon, };
+//# sourceMappingURL=HeaderIconAction.styled.js.map

package/esm/components/layout/header/HeaderIconAction.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconAction.styled.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.styled.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,YAAY,GAAa;IAC3B,WAAW,EAAE,MAAM;IACnB,aAAa,EAAE,GAAG;IAClB,YAAY,EAAE,MAAM;IACpB,cAAc,EAAE,OAAO;IACvB,SAAS,EAAE,aAAa;IACxB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAC1B,QAAQ,EAAE,mDAAmD;IAC7D,OAAO,EAAE,cAAc;IAEvB,SAAS,EAAE;QACP,UAAU,EAAE,WAAW;KAC1B;IACD,UAAU,EAAE;QACR,UAAU,EAAE,WAAW;QACvB,KAAK,EAAE,cAAc;KACxB;CACJ,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AAC3C,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AAEpC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE;IAC5B,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,cAAc;CACvB,CAAC,CAAC;AAEH,OAAO,EACH,GAAG,EACH,CAAC,EACD,UAAU,GACb,CAAC"}

package/esm/components/layout/header/StickyHeader.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface Content {
+interface ContentComponent {
     Content: React.FC<ContentProps>;
 }
 interface ContentProps {
@@ -11,6 +11,6 @@ interface Props {
     className?: string;
     children: React.ReactNode;
 }
-declare const StickyHeader: React.FC<Props> & Content;
+declare const StickyHeader: React.FC<Props> & ContentComponent;
 export { StickyHeader };
 //# sourceMappingURL=StickyHeader.d.ts.map

package/esm/components/layout/header/StickyHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,UAAU,OAAO;IAEb,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;CACnC;AAED,UAAU,YAAY;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,OAoCrC,CAAC;AAMF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StickyHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,gBAAgB;IAEtB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;CACnC;AAED,UAAU,YAAY;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,gBA8BrC,CAAC;AAMF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/components/layout/header/StickyHeader.js

@@ -1,11 +1,10 @@
 import React from "react";
-import classnames from "classnames";
 import { Header } from "./Header.js";
-import styles from "./StickyHeader.module.scss";
+import { Content, StyledStickyHeader } from "./StickyHeader.styled.js";
 const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");
 const StickyHeader = (props) => {
-    const position = props.position || "top";
-    const children = React.Children.toArray(props.children);
+    const { children: _children, position = "top", ...rest } = props;
+    const children = React.Children.toArray(_children);
     if (children.length !== 2) {
         throw err;
     }
@@ -15,11 +14,10 @@ const StickyHeader = (props) => {
     }
     header = header;
     content = content;
-    const cls = classnames(styles.stickyHeader, styles[`stickyHeader--${position}`], props.className);
-    const contentCls = classnames(styles.stickyHeader__content, styles[`stickyHeader__content--${position}`], content.props.className);
-    return (React.createElement("div", { className: cls },
+    const contentCls = content.props.className;
+    return (React.createElement(StyledStickyHeader, { ...rest, position: position },
         React.cloneElement(header, { position }),
-        React.createElement("div", { className: contentCls }, content)));
+        React.createElement(Content, { className: contentCls, position: position }, content)));
 };
 StickyHeader.Content = ({ children }) => {
     return React.createElement(React.Fragment, null, children);

package/esm/components/layout/header/StickyHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"StickyHeader.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,MAAM,GAAG,GAAG,IAAI,SAAS,CAAC,mEAAmE,CAAC,CAAC;AAkB/F,MAAM,YAAY,GAA8B,CAAC,KAAK,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;IAEzC,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAGxD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,MAAM,GAAG,CAAC;IACd,CAAC;IAED,IAAI,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,EACtF,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC;IAE1G,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;QACtB,MAAM,GAAG,CAAC;IACd,CAAC;IAED,MAAM,GAAG,MAAe,CAAC;IACzB,OAAO,GAAG,OAAgB,CAAC;IAE3B,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,iBAAiB,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAElG,MAAM,UAAU,GAAG,UAAU,CACzB,MAAM,CAAC,qBAAqB,EAC5B,MAAM,CAAC,0BAA0B,QAAQ,EAAE,CAAC,EAC3C,OAAmC,CAAC,KAAK,CAAC,SAAS,CACvD,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG;QACd,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC;QACzC,6BAAK,SAAS,EAAE,UAAU,IACrB,OAAO,CACN,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,YAAY,CAAC,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpC,OAAO,0CAAG,QAAQ,CAAI,CAAC;AAC3B,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StickyHeader.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEpE,MAAM,GAAG,GAAG,IAAI,SAAS,CAAC,mEAAmE,CAAC,CAAC;AAkB/F,MAAM,YAAY,GAAuC,CAAC,KAAK,EAAE,EAAE;IAC/D,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjE,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAGnD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,MAAM,GAAG,CAAC;IACd,CAAC;IAED,IAAI,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,EACtF,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC;IAE1G,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;QACtB,MAAM,GAAG,CAAC;IACd,CAAC;IAED,MAAM,GAAG,MAAe,CAAC;IACzB,OAAO,GAAG,OAAgB,CAAC;IAE3B,MAAM,UAAU,GAAI,OAAmC,CAAC,KAAK,CAAC,SAAS,CAAC;IAExE,OAAO,CACH,oBAAC,kBAAkB,OAAK,IAAI,EAAE,QAAQ,EAAE,QAAQ;QAC3C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC;QACzC,oBAAC,OAAO,IAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,IAC7C,OAAO,CACF,CACO,CACxB,CAAC;AACN,CAAC,CAAC;AAEF,YAAY,CAAC,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpC,OAAO,0CAAG,QAAQ,CAAI,CAAC;AAC3B,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/components/layout/header/StickyHeader.stories.d.ts

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

package/esm/components/layout/header/StickyHeader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyHeader.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,QAAA,MAAM,OAAO,EAAE,KAYd,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/layout/header/StickyHeader.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { StickyHeader } from "./StickyHeader.js";
+import { Header } from "./Header.js";
+const meta = {
+    title: "Components/Layout/Header/StickyHeader",
+    component: StickyHeader,
+    tags: ["autodocs", "layout"],
+};
+const Primary = {
+    render: (args) => {
+        const longContent = new Array(1000).fill(null).map((_, key) => React.createElement("div", { key: key }, "content"));
+        return (React.createElement(StickyHeader, { ...args },
+            React.createElement(Header, null,
+                "x",
+                React.createElement("br", null),
+                "x",
+                React.createElement("br", null),
+                "x"),
+            React.createElement(StickyHeader.Content, null, longContent)));
+    },
+};
+export { Primary, };
+export default meta;
+//# sourceMappingURL=StickyHeader.stories.js.map

package/esm/components/layout/header/StickyHeader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyHeader.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,uCAAuC;IAC9C,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;CAC/B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,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,6BAAK,GAAG,EAAE,GAAG,cAAe,CAAC,CAAC;QAE7F,OAAO,CACH,oBAAC,YAAY,OAAK,IAAI;YAClB,oBAAC,MAAM;;gBAAE,+BAAM;;gBAAC,+BAAM;oBAAU;YAChC,oBAAC,YAAY,CAAC,OAAO,QAAE,WAAW,CAAwB,CAC/C,CAClB,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/layout/header/StickyHeader.styled.d.ts

@@ -0,0 +1,166 @@
+declare const StyledStickyHeader: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    position?: "left" | "bottom" | "right" | "top";
+}, {}, 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 Content: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    position?: "left" | "bottom" | "right" | "top";
+}, {}, 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 { Content, StyledStickyHeader, };
+//# sourceMappingURL=StickyHeader.styled.d.ts.map

package/esm/components/layout/header/StickyHeader.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyHeader.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiBtB,CAAC;AAEH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgBX,CAAC;AAEH,OAAO,EACH,OAAO,EACP,kBAAkB,GACrB,CAAC"}

package/esm/components/layout/header/StickyHeader.styled.js

@@ -0,0 +1,36 @@
+import { styled } from "../../../theme.js";
+const StyledStickyHeader = styled("div", {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    variants: {
+        position: {
+            top: {},
+            left: {
+                flexDirection: "row",
+            },
+            bottom: {},
+            right: {
+                flexDirection: "row",
+            },
+        },
+    },
+});
+const Content = styled("div", {
+    flex: 1,
+    overflow: "auto",
+    variants: {
+        position: {
+            top: {},
+            bottom: {
+                order: 1,
+            },
+            left: {},
+            right: {
+                order: 1,
+            },
+        },
+    },
+});
+export { Content, StyledStickyHeader, };
+//# sourceMappingURL=StickyHeader.styled.js.map

package/esm/components/layout/header/StickyHeader.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyHeader.styled.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,EAAE;IACrC,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IAEvB,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,GAAG,EAAE,EAAE;YACP,IAAI,EAAE;gBACF,aAAa,EAAE,KAAK;aACvB;YACD,MAAM,EAAE,EAAE;YACV,KAAK,EAAE;gBACH,aAAa,EAAE,KAAK;aACvB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE;IAC1B,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,MAAM;IAEhB,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,GAAG,EAAE,EAAE;YACP,MAAM,EAAE;gBACJ,KAAK,EAAE,CAAC;aACX;YACD,IAAI,EAAE,EAAE;YACR,KAAK,EAAE;gBACH,KAAK,EAAE,CAAC;aACX;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,OAAO,EACP,kBAAkB,GACrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.23.6",
+  "version": "0.23.7-beta.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -78,12 +78,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use": "^17.4.0",
+    "resolve-tspaths": "^0.8.15",
     "sass": "^1.35.2",
     "storybook": "^7.6.6",
     "ts-node": "^10.9.1",
     "typedoc": "^0.23.28",
-    "typescript": "^5.2.2",
-    "resolve-tspaths": "^0.8.15"
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/components/icons/Icon.tsx

@@ -50,3 +50,7 @@ const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {
 };
 
 export { Icon, ICON };
+
+export type {
+    Props as IconProps,
+};