react-miui 0.23.5 → 0.23.7-beta.0

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

@@ -16,29 +16,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderIconAction = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Icon_1 = require("../../icons/Icon");
-const HeaderIconAction_module_scss_1 = __importDefault(require("./HeaderIconAction.module.scss"));
+const HeaderIconAction_styled_1 = require("./HeaderIconAction.styled");
 const HeaderIconAction = (props) => {
-    const { icon, label, href, to, Link, className } = props, restProps = __rest(props, ["icon", "label", "href", "to", "Link", "className"]);
+    const { icon, href, to, Link, className } = props, restProps = __rest(props, ["icon", "href", "to", "Link", "className"]);
     let content = icon;
     if (typeof icon === "string") {
-        content = react_1.default.createElement(Icon_1.Icon, { className: HeaderIconAction_module_scss_1.default.icon, name: icon });
+        content = react_1.default.createElement(HeaderIconAction_styled_1.StyledIcon, { name: icon });
     }
     if (to) {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
-        const aCls = (0, classnames_1.default)(props.className, HeaderIconAction_module_scss_1.default.a);
         return react_1.default.createElement(Link, Object.assign({ href: to }, restProps),
-            react_1.default.createElement("a", { className: aCls }, content));
+            react_1.default.createElement(HeaderIconAction_styled_1.A, { className: props.className }, content));
     }
     if (href) {
-        const aCls = (0, classnames_1.default)(props.className, HeaderIconAction_module_scss_1.default.a);
-        return react_1.default.createElement("a", Object.assign({ href: href, className: aCls }, restProps), content);
+        return react_1.default.createElement(HeaderIconAction_styled_1.A, Object.assign({ href: href, className: props.className }, restProps), content);
     }
-    const btnCls = (0, classnames_1.default)(props.className, HeaderIconAction_module_scss_1.default.btn);
-    return (react_1.default.createElement("button", { className: btnCls, onClick: props.onClick }, content));
+    return (react_1.default.createElement(HeaderIconAction_styled_1.Btn, { className: props.className, onClick: props.onClick }, content));
 };
 exports.HeaderIconAction = HeaderIconAction;
 //# sourceMappingURL=HeaderIconAction.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconAction.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAG1B,4DAAoC;AAIpC,2CAAwC;AAExC,kGAAoD;AAiBpD,MAAM,gBAAgB,GAAoB,CAAC,KAAK,EAAE,EAAE;IAChD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAhE,oDAAwD,CAAQ,CAAC;IAEvE,IAAI,OAAO,GAAc,IAAI,CAAC;IAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,GAAG,8BAAC,WAAI,IAAC,SAAS,EAAE,sCAAM,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,IAAA,oBAAU,EAAC,KAAK,CAAC,SAAS,EAAE,sCAAM,CAAC,CAAC,CAAC,CAAC;QACnD,OAAO,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS;YAAE,qCAAG,SAAS,EAAE,IAAI,IAAG,OAAO,CAAK,CAAO,CAAC;IACnF,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACP,MAAM,IAAI,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,SAAS,EAAE,sCAAM,CAAC,CAAC,CAAC,CAAC;QACnD,OAAO,mDAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,IAAM,SAAS,GAAG,OAAO,CAAK,CAAC;IACxE,CAAC;IAED,MAAM,MAAM,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,SAAS,EAAE,sCAAM,CAAC,GAAG,CAAC,CAAC;IACvD,OAAO,CACH,0CAAQ,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAC5C,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEO,4CAAgB"}
+{"version":3,"file":"HeaderIconAction.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAK1B,uEAA+D;AAsC/D,MAAM,gBAAgB,GAAoB,CAAC,KAAK,EAAE,EAAE;IAChD,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAzD,2CAAiD,CAAQ,CAAC;IAEhE,IAAI,OAAO,GAAc,IAAI,CAAC;IAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,GAAG,8BAAC,oCAAU,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,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS;YAAE,8BAAC,2BAAC,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,IAAG,OAAO,CAAK,CAAO,CAAC;IAC9F,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACP,OAAO,8BAAC,2BAAC,kBAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,IAAM,SAAS,GAAG,OAAO,CAAK,CAAC;IACnF,CAAC;IAED,OAAO,CACH,8BAAC,6BAAG,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAClD,OAAO,CACN,CACT,CAAC;AACN,CAAC,CAAC;AAEO,4CAAgB"}

package/dist/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/dist/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/dist/components/layout/header/HeaderIconAction.stories.js

@@ -0,0 +1,43 @@
+"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.MultipleIcons = exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const Header_1 = require("./Header");
+const HeaderIconAction_1 = require("./HeaderIconAction");
+const meta = {
+    title: "Components/Layout/Header/HeaderIconAction",
+    component: HeaderIconAction_1.HeaderIconAction,
+    tags: ["autodocs", "layout"],
+    render: (args) => {
+        return (react_1.default.createElement(Header_1.Header, { before: react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, Object.assign({}, args, { icon: react_1.default.createElement(react_1.default.Fragment, null, "i") })) }, "On the left you can see the icon"));
+    },
+};
+const Primary = {};
+exports.Primary = Primary;
+const MultipleIcons = {
+    render: (_a) => {
+        var { onClick: _onClick } = _a, args = __rest(_a, ["onClick"]);
+        const after = (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", null, "some text"),
+            react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, Object.assign({}, args, { icon: react_1.default.createElement(react_1.default.Fragment, null, "i") })),
+            react_1.default.createElement(HeaderIconAction_1.HeaderIconAction, Object.assign({}, args, { icon: react_1.default.createElement(react_1.default.Fragment, null, "i") }))));
+        return (react_1.default.createElement(Header_1.Header, { after: after }, "On the left you can see the icon"));
+    },
+};
+exports.MultipleIcons = MultipleIcons;
+exports.default = meta;
+//# sourceMappingURL=HeaderIconAction.stories.js.map

package/dist/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,kDAA0B;AAI1B,qCAAkC;AAClC,yDAAsD;AAEtD,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,2CAA2C;IAClD,SAAS,EAAE,mCAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,CACH,8BAAC,eAAM,IAAC,MAAM,EAAE,8BAAC,mCAAgB,oBAAK,IAAI,IAAE,IAAI,EAAE,kEAAM,IAAI,uCAEnD,CACZ,CAAC;IACN,CAAC;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU,EAAE,CAAC;AAoBtB,0BAAO;AAlBX,MAAM,aAAa,GAAU;IACzB,MAAM,EAAE,CAAC,EAA8B,EAAE,EAAE;YAAlC,EAAE,OAAO,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA5B,WAA8B,CAAF;QACjC,MAAM,KAAK,GAAG,CACV;YACI,uDAAoB;YACpB,8BAAC,mCAAgB,oBAAK,IAAI,IAAE,IAAI,EAAE,kEAAM,IAAI;YAC5C,8BAAC,mCAAgB,oBAAK,IAAI,IAAE,IAAI,EAAE,kEAAM,IAAI,CAC7C,CACN,CAAC;QACF,OAAO,CACH,8BAAC,eAAM,IAAC,KAAK,EAAE,KAAK,uCAEX,CACZ,CAAC;IACN,CAAC;CACJ,CAAC;AAIE,sCAAa;AAGjB,kBAAe,IAAI,CAAC"}

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledIcon = exports.A = exports.Btn = void 0;
+const theme_1 = require("../../../theme");
+const Icon_1 = require("../../icons/Icon");
+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 = (0, theme_1.styled)("button", sharedStyles);
+exports.Btn = Btn;
+const A = (0, theme_1.styled)("a", sharedStyles);
+exports.A = A;
+const StyledIcon = (0, theme_1.styled)(Icon_1.Icon, {
+    width: "16px",
+    height: "16px",
+    display: "block",
+    fill: "currentColor",
+});
+exports.StyledIcon = StyledIcon;
+//# sourceMappingURL=HeaderIconAction.styled.js.map

package/dist/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,0CAAwC;AACxC,2CAAwC;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,IAAA,cAAM,EAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AAWvC,kBAAG;AAVP,MAAM,CAAC,GAAG,IAAA,cAAM,EAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AAWhC,cAAC;AATL,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,WAAI,EAAE;IAC5B,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,cAAc;CACvB,CAAC,CAAC;AAKC,gCAAU"}

package/dist/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/dist/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/dist/components/layout/header/StickyHeader.js

@@ -1,17 +1,27 @@
 "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.StickyHeader = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const Header_1 = require("./Header");
-const StickyHeader_module_scss_1 = __importDefault(require("./StickyHeader.module.scss"));
+const StickyHeader_styled_1 = require("./StickyHeader.styled");
 const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");
 const StickyHeader = (props) => {
-    const position = props.position || "top";
-    const children = react_1.default.Children.toArray(props.children);
+    const { children: _children, position = "top" } = props, rest = __rest(props, ["children", "position"]);
+    const children = react_1.default.Children.toArray(_children);
     if (children.length !== 2) {
         throw err;
     }
@@ -21,11 +31,10 @@ const StickyHeader = (props) => {
     }
     header = header;
     content = content;
-    const cls = (0, classnames_1.default)(StickyHeader_module_scss_1.default.stickyHeader, StickyHeader_module_scss_1.default[`stickyHeader--${position}`], props.className);
-    const contentCls = (0, classnames_1.default)(StickyHeader_module_scss_1.default.stickyHeader__content, StickyHeader_module_scss_1.default[`stickyHeader__content--${position}`], content.props.className);
-    return (react_1.default.createElement("div", { className: cls },
+    const contentCls = content.props.className;
+    return (react_1.default.createElement(StickyHeader_styled_1.StyledStickyHeader, Object.assign({}, rest, { position: position }),
         react_1.default.cloneElement(header, { position }),
-        react_1.default.createElement("div", { className: contentCls }, content)));
+        react_1.default.createElement(StickyHeader_styled_1.Content, { className: contentCls, position: position }, content)));
 };
 exports.StickyHeader = StickyHeader;
 StickyHeader.Content = ({ children }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"StickyHeader.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AAEpC,qCAAkC;AAElC,0FAAgD;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,eAAK,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,eAAM,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,IAAA,oBAAU,EAAC,kCAAM,CAAC,YAAY,EAAE,kCAAM,CAAC,iBAAiB,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAElG,MAAM,UAAU,GAAG,IAAA,oBAAU,EACzB,kCAAM,CAAC,qBAAqB,EAC5B,kCAAM,CAAC,0BAA0B,QAAQ,EAAE,CAAC,EAC3C,OAAmC,CAAC,KAAK,CAAC,SAAS,CACvD,CAAC;IAEF,OAAO,CACH,uCAAK,SAAS,EAAE,GAAG;QACd,eAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC;QACzC,uCAAK,SAAS,EAAE,UAAU,IACrB,OAAO,CACN,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAMO,oCAAY;AAJrB,YAAY,CAAC,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpC,OAAO,8DAAG,QAAQ,CAAI,CAAC;AAC3B,CAAC,CAAC"}
+{"version":3,"file":"StickyHeader.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,qCAAkC;AAClC,+DAAoE;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,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA1D,wBAAkD,CAAQ,CAAC;IAEjE,MAAM,QAAQ,GAAG,eAAK,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,eAAM,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,8BAAC,wCAAkB,oBAAK,IAAI,IAAE,QAAQ,EAAE,QAAQ;QAC3C,eAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC;QACzC,8BAAC,6BAAO,IAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,IAC7C,OAAO,CACF,CACO,CACxB,CAAC;AACN,CAAC,CAAC;AAMO,oCAAY;AAJrB,YAAY,CAAC,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpC,OAAO,8DAAG,QAAQ,CAAI,CAAC;AAC3B,CAAC,CAAC"}

package/dist/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/dist/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/dist/components/layout/header/StickyHeader.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const StickyHeader_1 = require("./StickyHeader");
+const Header_1 = require("./Header");
+const meta = {
+    title: "Components/Layout/Header/StickyHeader",
+    component: StickyHeader_1.StickyHeader,
+    tags: ["autodocs", "layout"],
+};
+const Primary = {
+    render: (args) => {
+        const longContent = new Array(1000).fill(null).map((_, key) => react_1.default.createElement("div", { key: key }, "content"));
+        return (react_1.default.createElement(StickyHeader_1.StickyHeader, Object.assign({}, args),
+            react_1.default.createElement(Header_1.Header, null,
+                "x",
+                react_1.default.createElement("br", null),
+                "x",
+                react_1.default.createElement("br", null),
+                "x"),
+            react_1.default.createElement(StickyHeader_1.StickyHeader.Content, null, longContent)));
+    },
+};
+exports.Primary = Primary;
+exports.default = meta;
+//# sourceMappingURL=StickyHeader.stories.js.map

package/dist/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,kDAA0B;AAI1B,iDAA8C;AAC9C,qCAAkC;AAElC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,uCAAuC;IAC9C,SAAS,EAAE,2BAAY;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,uCAAK,GAAG,EAAE,GAAG,cAAe,CAAC,CAAC;QAE7F,OAAO,CACH,8BAAC,2BAAY,oBAAK,IAAI;YAClB,8BAAC,eAAM;;gBAAE,yCAAM;;gBAAC,yCAAM;oBAAU;YAChC,8BAAC,2BAAY,CAAC,OAAO,QAAE,WAAW,CAAwB,CAC/C,CAClB,CAAC;IACN,CAAC;CACJ,CAAC;AAGE,0BAAO;AAGX,kBAAe,IAAI,CAAC"}