react-miui 0.20.1 → 0.22.0

package/dist/components/ui/modal/Modal.stories.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithList = exports.WithRemovedPaddingSections = exports.Primary = void 0;
+const react_1 = __importStar(require("react"));
+const Button_js_1 = require("../button/Button.js");
+const Label_js_1 = require("../../form/Label.js");
+const Input_js_1 = require("../../form/input/Input.js");
+const Checkbox_js_1 = require("../../form/Checkbox.js");
+const List_js_1 = require("../../layout/list/List.js");
+const Modal_js_1 = require("./Modal.js");
+const ModalButtons_js_1 = require("./ModalButtons.js");
+const Modal_styled_1 = require("./Modal.styled");
+const meta = {
+    title: "Components/UI/Modal",
+    component: Modal_js_1.Modal,
+    tags: ["autodocs", "ui"],
+};
+const handleNoop = () => undefined;
+const Primary = {
+    args: {},
+    render: () => {
+        const [open, setIsOpen] = (0, react_1.useState)(false);
+        const handleClose = (0, react_1.useCallback)(() => {
+            setIsOpen(false);
+        }, []);
+        const handleOpen = (0, react_1.useCallback)(() => {
+            setIsOpen(true);
+        }, []);
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(Button_js_1.Button, { onClick: handleOpen }, "Open modal"),
+            react_1.default.createElement(Modal_js_1.Modal, { onClose: handleClose, isOpen: open, title: "95.5 MHz", position: "bottom", full: true },
+                react_1.default.createElement(Label_js_1.Label, null,
+                    react_1.default.createElement(Input_js_1.Input, { placeholder: "New station" })),
+                react_1.default.createElement(Label_js_1.Label, null,
+                    react_1.default.createElement(Checkbox_js_1.Checkbox, { name: "", onChange: handleNoop, checked: true }, "Remember me")),
+                react_1.default.createElement(ModalButtons_js_1.ModalButtons, null,
+                    react_1.default.createElement(ModalButtons_js_1.ModalButtons.Button, { onClick: handleClose }, "Cancel"),
+                    react_1.default.createElement(ModalButtons_js_1.ModalButtons.Button, { variant: "main", onClick: handleClose }, "Ok")))));
+    },
+};
+exports.Primary = Primary;
+const WithRemovedPaddingSections = {
+    args: {},
+    render: () => {
+        const [open, setIsOpen] = (0, react_1.useState)(false);
+        const handleClose = (0, react_1.useCallback)(() => {
+            setIsOpen(false);
+        }, []);
+        const handleOpen = (0, react_1.useCallback)(() => {
+            setIsOpen(true);
+        }, []);
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(Button_js_1.Button, { onClick: handleOpen }, "Open modal"),
+            react_1.default.createElement(Modal_js_1.Modal, { onClose: handleClose, isOpen: open, position: "bottom", full: true },
+                react_1.default.createElement(Modal_styled_1.RemovePadding, null,
+                    react_1.default.createElement(Label_js_1.Label, null,
+                        react_1.default.createElement(Input_js_1.Input, { placeholder: "New station" }))),
+                react_1.default.createElement(Label_js_1.Label, null,
+                    react_1.default.createElement(Input_js_1.Input, { placeholder: "New station" })),
+                react_1.default.createElement(Modal_styled_1.RemovePadding, null,
+                    react_1.default.createElement(Label_js_1.Label, null,
+                        react_1.default.createElement(Input_js_1.Input, { placeholder: "New station" }))))));
+    },
+};
+exports.WithRemovedPaddingSections = WithRemovedPaddingSections;
+const WithList = {
+    args: {},
+    render: () => {
+        const [open, setIsOpen] = (0, react_1.useState)(false);
+        const handleClose = (0, react_1.useCallback)(() => {
+            setIsOpen(false);
+        }, []);
+        const handleOpen = (0, react_1.useCallback)(() => {
+            setIsOpen(true);
+        }, []);
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(Button_js_1.Button, { onClick: handleOpen }, "Open modal"),
+            react_1.default.createElement(Modal_js_1.Modal, { onClose: handleClose, isOpen: open, position: "bottom", full: true },
+                react_1.default.createElement(Modal_styled_1.RemovePadding, null,
+                    react_1.default.createElement(List_js_1.List, { inset: true },
+                        react_1.default.createElement(List_js_1.List.Item, { selected: false, onClick: handleClose }, "First item"),
+                        react_1.default.createElement(List_js_1.List.Item, { selected: true, onClick: handleClose }, "Second item"),
+                        react_1.default.createElement(List_js_1.List.Item, { selected: false, onClick: handleClose }, "Third item"),
+                        react_1.default.createElement(List_js_1.List.Item, { selected: false, onClick: handleClose }, "Last option"))))));
+    },
+};
+exports.WithList = WithList;
+exports.default = meta;
+//# sourceMappingURL=Modal.stories.js.map

package/dist/components/ui/modal/Modal.stories.js.map

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

package/dist/components/ui/modal/Modal.styled.d.ts

@@ -0,0 +1,329 @@
+declare const NEGATIVE_PADDING: string;
+declare const OverlayStyled: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {
+    position?: "bottom";
+    isClosing?: boolean | "true";
+}, {}, import("@stitches/react/types/css-util.js").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.js").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 RemovePadding: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util.js").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.js").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 ContainerStyled: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {
+    full?: boolean | "true";
+    isClosing?: boolean | "true";
+}, {}, import("@stitches/react/types/css-util.js").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.js").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 TitleStyled: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util.js").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.js").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 { OverlayStyled, RemovePadding, ContainerStyled, TitleStyled, NEGATIVE_PADDING, };
+//# sourceMappingURL=Modal.styled.d.ts.map

package/dist/components/ui/modal/Modal.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB,QAAe,CAAC;AAWtC,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BjB,CAAC;AAaH,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEjB,CAAC;AAEH,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BnB,CAAC;AAEH,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKf,CAAC;AAEH,OAAO,EACH,aAAa,EACb,aAAa,EACb,eAAe,EACf,WAAW,EAEX,gBAAgB,GACnB,CAAC"}

package/dist/components/ui/modal/Modal.styled.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NEGATIVE_PADDING = exports.TitleStyled = exports.ContainerStyled = exports.RemovePadding = exports.OverlayStyled = void 0;
+const theme_js_1 = require("../../../theme.js");
+const PADDING = (0, theme_js_1.pxToRem)(20);
+const NEGATIVE_PADDING = (0, theme_js_1.pxToRem)(-20);
+exports.NEGATIVE_PADDING = NEGATIVE_PADDING;
+const overlay = (0, theme_js_1.keyframes)({
+    from: {
+        background: "#00000000",
+    },
+    to: {
+        background: "#0000004c",
+    },
+});
+const OverlayStyled = (0, theme_js_1.styled)("div", {
+    position: "fixed",
+    zIndex: 4,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    animation: `${overlay.toString()} 300ms`,
+    animationFillMode: "forwards",
+    variants: {
+        position: {
+            bottom: {
+                alignItems: "flex-end",
+                paddingBottom: (0, theme_js_1.dimensionsPxToRem)(24),
+            },
+        },
+        isClosing: {
+            true: {
+                animationDirection: "reverse",
+            },
+        },
+    },
+});
+exports.OverlayStyled = OverlayStyled;
+const container = (0, theme_js_1.keyframes)({
+    from: {
+        transform: "translateY(30px)",
+        opacity: 0,
+    },
+    to: {
+        transform: "translateY(0)",
+        opacity: 1,
+    },
+});
+const RemovePadding = (0, theme_js_1.styled)("div", {
+    mx: NEGATIVE_PADDING,
+});
+exports.RemovePadding = RemovePadding;
+const ContainerStyled = (0, theme_js_1.styled)("div", {
+    background: "$modalBg",
+    borderRadius: (0, theme_js_1.dimensionsPxToRem)(12),
+    maxWidth: (0, theme_js_1.pxToRem)(333),
+    maxHeight: "100%",
+    width: "calc(100% - 30px)",
+    padding: PADDING,
+    position: "relative",
+    boxSizing: "border-box",
+    animation: `${container.toString()} 300ms`,
+    animationFillMode: "forwards",
+    variants: {
+        full: {
+            true: {
+                width: "calc(100vw - 30px)",
+                maxWidth: (0, theme_js_1.dimensionsPxToRem)(1000),
+            },
+        },
+        isClosing: {
+            true: {
+                animationDirection: "reverse",
+            },
+        },
+    },
+});
+exports.ContainerStyled = ContainerStyled;
+const TitleStyled = (0, theme_js_1.styled)("div", {
+    fontSize: (0, theme_js_1.fontPxToRem)(40),
+    textAlign: "center",
+    color: "black",
+    margin: `${(0, theme_js_1.dimensionsPxToRem)(90)} 0`,
+});
+exports.TitleStyled = TitleStyled;
+//# sourceMappingURL=Modal.styled.js.map

package/dist/components/ui/modal/Modal.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.styled.ts"],"names":[],"mappings":";;;AAAA,gDAA+F;AAE/F,MAAM,OAAO,GAAG,IAAA,kBAAO,EAAC,EAAE,CAAC,CAAC;AAC5B,MAAM,gBAAgB,GAAG,IAAA,kBAAO,EAAC,CAAC,EAAE,CAAC,CAAC;AA+FlC,4CAAgB;AA7FpB,MAAM,OAAO,GAAG,IAAA,oBAAS,EAAC;IACtB,IAAI,EAAE;QACF,UAAU,EAAE,WAAW;KAC1B;IACD,EAAE,EAAE;QACA,UAAU,EAAE,WAAW;KAC1B;CACJ,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAChC,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,GAAG,OAAO,CAAC,QAAQ,EAAE,QAAQ;IACxC,iBAAiB,EAAE,UAAU;IAE7B,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,MAAM,EAAE;gBACJ,UAAU,EAAE,UAAU;gBACtB,aAAa,EAAE,IAAA,4BAAiB,EAAC,EAAE,CAAC;aACvC;SACJ;QACD,SAAS,EAAE;YACP,IAAI,EAAE;gBACF,kBAAkB,EAAE,SAAS;aAChC;SACJ;KACJ;CACJ,CAAC,CAAC;AAqDC,sCAAa;AAnDjB,MAAM,SAAS,GAAG,IAAA,oBAAS,EAAC;IACxB,IAAI,EAAE;QACF,SAAS,EAAE,kBAAkB;QAC7B,OAAO,EAAE,CAAC;KACb;IACD,EAAE,EAAE;QACA,SAAS,EAAE,eAAe;QAC1B,OAAO,EAAE,CAAC;KACb;CACJ,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAChC,EAAE,EAAE,gBAAgB;CACvB,CAAC,CAAC;AAuCC,sCAAa;AArCjB,MAAM,eAAe,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAClC,UAAU,EAAE,UAAU;IACtB,YAAY,EAAE,IAAA,4BAAiB,EAAC,EAAE,CAAC;IACnC,QAAQ,EAAE,IAAA,kBAAO,EAAC,GAAG,CAAC;IACtB,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,mBAAmB;IAC1B,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,GAAG,SAAS,CAAC,QAAQ,EAAE,QAAQ;IAC1C,iBAAiB,EAAE,UAAU;IAE7B,QAAQ,EAAE;QAEN,IAAI,EAAE;YACF,IAAI,EAAE;gBACF,KAAK,EAAE,oBAAoB;gBAC3B,QAAQ,EAAE,IAAA,4BAAiB,EAAC,IAAI,CAAC;aACpC;SACJ;QACD,SAAS,EAAE;YACP,IAAI,EAAE;gBACF,kBAAkB,EAAE,SAAS;aAChC;SACJ;KACJ;CACJ,CAAC,CAAC;AAYC,0CAAe;AAVnB,MAAM,WAAW,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAC9B,QAAQ,EAAE,IAAA,sBAAW,EAAC,EAAE,CAAC;IACzB,SAAS,EAAE,QAAQ;IACnB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,GAAG,IAAA,4BAAiB,EAAC,EAAE,CAAC,IAAI;CACvC,CAAC,CAAC;AAMC,kCAAW"}

package/dist/components/ui/modal/ModalButtons.d.ts

@@ -1,12 +1,2 @@
-import React from "react";
-import { ModalButton } from "./ModalButton.js";
-interface Props {
-    className?: string;
-    children: React.ReactNode;
-}
-interface SubComponents {
-    Button: typeof ModalButton;
-}
-declare const ModalButtons: React.FC<Props> & SubComponents;
-export { ModalButtons };
+export { ModalButtons } from "./ModalButtons.styled.js";
 //# sourceMappingURL=ModalButtons.d.ts.map

package/dist/components/ui/modal/ModalButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,WAAW,CAAC;CAC9B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAErC,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"ModalButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/ui/modal/ModalButtons.js

@@ -1,16 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalButtons = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const ModalButton_js_1 = require("./ModalButton.js");
-const ModalButtons_module_scss_1 = __importDefault(require("./ModalButtons.module.scss"));
-const ModalButtons = (props) => {
-    return react_1.default.createElement("div", { className: (0, classnames_1.default)(ModalButtons_module_scss_1.default.container, props.className) }, props.children);
-};
-exports.ModalButtons = ModalButtons;
-ModalButtons.Button = ModalButton_js_1.ModalButton;
+var ModalButtons_styled_js_1 = require("./ModalButtons.styled.js");
+Object.defineProperty(exports, "ModalButtons", { enumerable: true, get: function () { return ModalButtons_styled_js_1.ModalButtons; } });
 //# sourceMappingURL=ModalButtons.js.map

package/dist/components/ui/modal/ModalButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalButtons.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AAEpC,qDAA+C;AAC/C,0FAAgD;AAWhD,MAAM,YAAY,GAAoC,CAAC,KAAK,EAAE,EAAE;IAC5D,OAAO,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,kCAAM,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACjG,CAAC,CAAC;AAGO,oCAAY;AAFrB,YAAY,CAAC,MAAM,GAAG,4BAAW,CAAC"}
+{"version":3,"file":"ModalButtons.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.tsx"],"names":[],"mappings":";;;AAAA,mEAAwD;AAA/C,sHAAA,YAAY,OAAA"}

package/dist/components/ui/modal/ModalButtons.stories.d.ts

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

package/dist/components/ui/modal/ModalButtons.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalButtons.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,QAAA,MAAM,OAAO,EAAE,KAkBd,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/ui/modal/ModalButtons.stories.js

@@ -0,0 +1,25 @@
+"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 ModalButtons_js_1 = require("./ModalButtons.js");
+const Modal_js_1 = require("./Modal.js");
+const meta = {
+    title: "Components/UI/ModalButtons",
+    component: ModalButtons_js_1.ModalButtons,
+    tags: ["autodocs", "ui"],
+};
+const Primary = {
+    args: {},
+    render: () => (react_1.default.createElement(Modal_js_1.Modal, { onClose: () => null, isOpen: true, title: "System message" },
+        react_1.default.createElement("div", null, "Check out these pretty buttons. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur, diam eget aliquam tincidunt, diam nisl ultrices velit, nec aliquet nunc diam eget."),
+        react_1.default.createElement(ModalButtons_js_1.ModalButtons, null,
+            react_1.default.createElement(ModalButtons_js_1.ModalButtons.Button, { onClick: () => null }, "Cancel"),
+            react_1.default.createElement(ModalButtons_js_1.ModalButtons.Button, { variant: "main", onClick: () => null }, "Ok")))),
+};
+exports.Primary = Primary;
+exports.default = meta;
+//# sourceMappingURL=ModalButtons.stories.js.map

package/dist/components/ui/modal/ModalButtons.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalButtons.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAI1B,uDAAiD;AACjD,yCAAmC;AAEnC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,8BAAY;IACvB,IAAI,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC;CAC3B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,8BAAC,gBAAK,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,gBAAgB;QAC7D,4OAGM;QACN,8BAAC,8BAAY;YACT,8BAAC,8BAAY,CAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,aAElB;YACtB,8BAAC,8BAAY,CAAC,MAAM,IAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,SAEnC,CACX,CACX,CACX;CACJ,CAAC;AAGE,0BAAO;AAGX,kBAAe,IAAI,CAAC"}