react-miui 0.23.6 → 0.23.7-beta.0

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { ICON } from "../../icons/Icon.js";
+import { Header } from "./Header.js";
+import { HeaderIconAction } from "./HeaderIconAction.js";
+const meta = {
+    title: "Components/Layout/Header/Header",
+    component: Header,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        before: {
+            control: {
+                type: "text",
+            },
+        },
+        after: {
+            control: {
+                type: "text",
+            },
+        },
+    },
+    args: {
+        before: "Left side",
+        children: "Title",
+        after: "[Icons]",
+    },
+};
+const Primary = {};
+const LongContent = {
+    render: (args) => {
+        const longContent = new Array(1000).fill(null).map((_, key) => React.createElement("div", { key: key }, "content"));
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Header, { ...args }),
+            longContent));
+    },
+};
+const handleClick = () => { alert(1); };
+const WithButtons = {
+    args: {
+        before: (React.createElement(React.Fragment, null,
+            React.createElement(HeaderIconAction, { icon: ICON.back, onClick: handleClick }),
+            React.createElement(HeaderIconAction, { icon: ICON.checkmark, onClick: handleClick }))),
+    },
+};
+const Vertical = {
+    args: {
+        before: (React.createElement(React.Fragment, null,
+            React.createElement(HeaderIconAction, { icon: ICON.back, onClick: handleClick }),
+            React.createElement(HeaderIconAction, { icon: ICON.checkmark, onClick: handleClick }))),
+        after: null,
+        position: "left",
+        children: "M",
+    },
+};
+export { Primary, LongContent, WithButtons, Vertical, };
+export default meta;
+//# sourceMappingURL=Header.stories.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,MAAM;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;AAC1B,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,6BAAK,GAAG,EAAE,GAAG,cAAe,CAAC,CAAC;QAE7F,OAAO,CACH;YACI,oBAAC,MAAM,OAAK,IAAI,GAAI;YACnB,WAAW,CAEb,CACN,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,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,oBAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI;YAC3D,oBAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,GAAI,CACjE,CACN;KACJ;CACJ,CAAC;AAEF,MAAM,QAAQ,GAAU;IACpB,IAAI,EAAE;QACF,MAAM,EAAE,CACJ;YACI,oBAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI;YAC3D,oBAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,GAAI,CACjE,CACN;QACD,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,GAAG;KAChB;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,GACX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/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/esm/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/esm/components/layout/header/Header.styled.js

@@ -0,0 +1,112 @@
+import { dimensionsPxToRem, pxToRem, styled } from "../../../theme.js";
+import { EqualActions } from "../../ui/action/EqualActions.js";
+const Contents = styled("div", {
+    flex: 1,
+    display: "flex",
+});
+const Before = styled("div", {
+    display: "flex",
+});
+const After = styled("div", {
+    display: "flex",
+});
+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.toString()}`]: {
+        margin: `${dimensionsPxToRem(56)} 0`,
+    },
+};
+const leftRightShared = {
+    padding: "16.666px 0",
+    width: "44px",
+    flexDirection: "column",
+    [`& ${Contents.toString()}`]: {
+        flexDirection: "column",
+        alignItems: "center",
+    },
+    [`& ${Before.toString()}`]: {
+        flexDirection: "column",
+        ...leftRightBeforeAfter,
+    },
+    [`& ${After.toString()}`]: {
+        flexDirection: "column",
+        ...leftRightBeforeAfter,
+    },
+    [`& ${EqualActions.toString()}`]: {
+        margin: `0 ${dimensionsPxToRem(56)}`,
+    },
+};
+const StyledHeader = styled("div", {
+    "--border-color": "$colors$headerBorder",
+    "--background-color": "$colors$headerBg",
+    "backgroundClip": "padding-box",
+    "background": "var(--background-color)",
+    "display": "flex",
+    "alignItems": "center",
+    "fontSize": pxToRem(15),
+    "fontWeight": "bold",
+    "boxSizing": "border-box",
+    "color": "$headerText",
+    "gap": 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: {
+                borderBottom: "0.37px solid var(--border-color)",
+                ...topBottomShared,
+            },
+            bottom: {
+                borderTop: "0.37px solid var(--border-color)",
+                order: 2,
+                ...topBottomShared,
+            },
+            left: {
+                borderRight: "0.37px solid var(--border-color)",
+                ...leftRightShared,
+            },
+            right: {
+                borderLeft: "0.37px solid var(--border-color)",
+                order: 2,
+                ...leftRightShared,
+            },
+        },
+        center: {
+            true: {
+                [`& ${Contents.toString()}`]: {
+                    justifyContent: "center",
+                },
+            },
+        },
+    },
+});
+export { StyledHeader, Contents, Before, After, };
+//# sourceMappingURL=Header.styled.js.map

package/esm/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/esm/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/esm/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"}

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

@@ -1,27 +1,22 @@
 import React from "react";
-import classnames from "classnames";
-import { Icon } from "../../icons/Icon.js";
-import styles from "./HeaderIconAction.module.scss";
+import { A, Btn, StyledIcon } from "./HeaderIconAction.styled.js";
 const HeaderIconAction = (props) => {
-    const { icon, label, href, to, Link, className, ...restProps } = props;
+    const { icon, href, to, Link, className, ...restProps } = props;
     let content = icon;
     if (typeof icon === "string") {
-        content = React.createElement(Icon, { className: styles.icon, name: icon });
+        content = React.createElement(StyledIcon, { name: icon });
     }
     if (to) {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
-        const aCls = classnames(props.className, styles.a);
         return React.createElement(Link, { href: to, ...restProps },
-            React.createElement("a", { className: aCls }, content));
+            React.createElement(A, { className: props.className }, content));
     }
     if (href) {
-        const aCls = classnames(props.className, styles.a);
-        return React.createElement("a", { href: href, className: aCls, ...restProps }, content);
+        return React.createElement(A, { href: href, className: props.className, ...restProps }, content);
     }
-    const btnCls = classnames(props.className, styles.btn);
-    return (React.createElement("button", { className: btnCls, onClick: props.onClick }, content));
+    return (React.createElement(Btn, { className: props.className, onClick: props.onClick }, content));
 };
 export { HeaderIconAction };
 //# sourceMappingURL=HeaderIconAction.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconAction.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAiBpD,MAAM,gBAAgB,GAAoB,CAAC,KAAK,EAAE,EAAE;IAChD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEvE,IAAI,OAAO,GAAc,IAAI,CAAC;IAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,GAAG,oBAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,IAAc,EAAE,IAAI,EAAE,IAAY,GAAI,CAAC;IAC7E,CAAC;IAED,IAAI,EAAE,EAAE,CAAC;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACpE,CAAC;QAED,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;QACnD,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS;YAAE,2BAAG,SAAS,EAAE,IAAI,IAAG,OAAO,CAAK,CAAO,CAAC;IACnF,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACP,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;QACnD,OAAO,2BAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,KAAM,SAAS,IAAG,OAAO,CAAK,CAAC;IACxE,CAAC;IAED,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;IACvD,OAAO,CACH,gCAAQ,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAC5C,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"HeaderIconAction.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAsC/D,MAAM,gBAAgB,GAAoB,CAAC,KAAK,EAAE,EAAE;IAChD,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEhE,IAAI,OAAO,GAAc,IAAI,CAAC;IAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,GAAG,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;IACjD,CAAC;IAED,IAAI,EAAE,EAAE,CAAC;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACpE,CAAC;QAED,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS;YAAE,oBAAC,CAAC,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,IAAG,OAAO,CAAK,CAAO,CAAC;IAC9F,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACP,OAAO,oBAAC,CAAC,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,KAAM,SAAS,IAAG,OAAO,CAAK,CAAC;IACnF,CAAC;IAED,OAAO,CACH,oBAAC,GAAG,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAClD,OAAO,CACN,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,9 @@
+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 MultipleIcons: Story;
+export { Primary, MultipleIcons, };
+export default meta;
+//# sourceMappingURL=HeaderIconAction.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconAction.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAWX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KAAU,CAAC;AAE1B,QAAA,MAAM,aAAa,EAAE,KAepB,CAAC;AAEF,OAAO,EACH,OAAO,EACP,aAAa,GAChB,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { Header } from "./Header.js";
+import { HeaderIconAction } from "./HeaderIconAction.js";
+const meta = {
+    title: "Components/Layout/Header/HeaderIconAction",
+    component: HeaderIconAction,
+    tags: ["autodocs", "layout"],
+    render: (args) => {
+        return (React.createElement(Header, { before: React.createElement(HeaderIconAction, { ...args, icon: React.createElement(React.Fragment, null, "i") }) }, "On the left you can see the icon"));
+    },
+};
+const Primary = {};
+const MultipleIcons = {
+    render: ({ onClick: _onClick, ...args }) => {
+        const after = (React.createElement(React.Fragment, null,
+            React.createElement("div", null, "some text"),
+            React.createElement(HeaderIconAction, { ...args, icon: React.createElement(React.Fragment, null, "i") }),
+            React.createElement(HeaderIconAction, { ...args, icon: React.createElement(React.Fragment, null, "i") })));
+        return (React.createElement(Header, { after: after }, "On the left you can see the icon"));
+    },
+};
+export { Primary, MultipleIcons, };
+export default meta;
+//# sourceMappingURL=HeaderIconAction.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconAction.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,2CAA2C;IAClD,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,CACH,oBAAC,MAAM,IAAC,MAAM,EAAE,oBAAC,gBAAgB,OAAK,IAAI,EAAE,IAAI,EAAE,8CAAM,GAAI,uCAEnD,CACZ,CAAC;IACN,CAAC;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU,EAAE,CAAC;AAE1B,MAAM,aAAa,GAAU;IACzB,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,CACV;YACI,6CAAoB;YACpB,oBAAC,gBAAgB,OAAK,IAAI,EAAE,IAAI,EAAE,8CAAM,GAAI;YAC5C,oBAAC,gBAAgB,OAAK,IAAI,EAAE,IAAI,EAAE,8CAAM,GAAI,CAC7C,CACN,CAAC;QACF,OAAO,CACH,oBAAC,MAAM,IAAC,KAAK,EAAE,KAAK,uCAEX,CACZ,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,EACP,aAAa,GAChB,CAAC;AAEF,eAAe,IAAI,CAAC"}