react-miui 0.21.0 → 0.22.0

package/esm/components/form/Select.js

@@ -1,9 +1,2 @@
-import React from "react";
-import classnames from "classnames";
-import styles from "./Select.module.scss";
-const Select = ({ className, children, ...props }) => {
-    const wrapperCls = classnames(styles.select, className);
-    return (React.createElement("select", { className: wrapperCls, ...props }, children));
-};
-export { Select, };
+export { Select } from "./Select.styled.js";
 //# sourceMappingURL=Select.js.map

package/esm/components/form/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAK1C,MAAM,MAAM,GAAoE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClH,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAExD,OAAO,CACH,gCAAQ,SAAS,EAAE,UAAU,KAAM,KAAK,IACnC,QAAQ,CACJ,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EACH,MAAM,GACT,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC"}

package/esm/components/form/Select.stories.d.ts

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

package/esm/components/form/Select.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/form/Select.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KASd,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/form/Select.stories.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Select } from "./Select.js";
+const meta = {
+    title: "Components/Form/Select",
+    component: Select,
+    tags: ["autodocs", "form"],
+};
+const Primary = {
+    args: {
+        children: [
+            React.createElement("option", { key: "1", value: "1" }, "First"),
+            React.createElement("option", { key: "2", value: "2" }, "Second"),
+            React.createElement("option", { key: "3", value: "3" }, "Third"),
+        ],
+        disabled: false,
+    },
+};
+export { Primary, };
+export default meta;
+//# sourceMappingURL=Select.stories.js.map

package/esm/components/form/Select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../../src/components/form/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE;YACN,gCAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,YAAgB;YAC5C,gCAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,aAAiB;YAC7C,gCAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,YAAgB;SAC/C;QACD,QAAQ,EAAE,KAAK;KAClB;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/form/Select.styled.d.ts

@@ -0,0 +1,82 @@
+declare const Select: import("@stitches/react/types/styled-component.js").StyledComponent<"select", {}, {}, 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 { Select, };
+//# sourceMappingURL=Select.styled.d.ts.map

package/esm/components/form/Select.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styled.d.ts","sourceRoot":"","sources":["../../../src/components/form/Select.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkBV,CAAC;AAEH,OAAO,EACH,MAAM,GACT,CAAC"}

package/esm/components/form/Select.styled.js

@@ -0,0 +1,21 @@
+import { borderPxToRem, dimensionsPxToRem, pxToRem, styled } from "../../theme.js";
+const Select = styled("select", {
+    "boxSizing": "border-box",
+    "height": dimensionsPxToRem(103),
+    "color": "$text",
+    "display": "flex",
+    "alignItems": "center",
+    "width": "100%",
+    "background": "white",
+    "fontFamily": "inherit",
+    "borderRadius": pxToRem(2),
+    "padding": `0 ${dimensionsPxToRem(36)}`,
+    "border": `${borderPxToRem(1)} solid $border`,
+    "appearance": "auto",
+    "&:disabled": {
+        background: "$inputDisabledBg",
+        color: "$inputDisabledText",
+    },
+});
+export { Select, };
+//# sourceMappingURL=Select.styled.js.map

package/esm/components/form/Select.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styled.js","sourceRoot":"","sources":["../../../src/components/form/Select.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAEnF,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE;IAC5B,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,OAAO,EAAE,MAAM;IACf,YAAY,EAAE,OAAO;IACrB,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAC1B,SAAS,EAAE,KAAK,iBAAiB,CAAC,EAAE,CAAC,EAAE;IACvC,QAAQ,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB;IAC7C,YAAY,EAAE,MAAM;IAEpB,YAAY,EAAE;QACV,UAAU,EAAE,kBAAkB;QAC9B,KAAK,EAAE,oBAAoB;KAC9B;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,MAAM,GACT,CAAC"}

package/esm/components/ui/button/Button.d.ts

@@ -1,8 +1,2 @@
-import React from "react";
-type Variant = "inline" | "outline";
-interface Props {
-    variant?: Variant | Variant[];
-}
-declare const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props>;
-export { Button };
+export { Button } from "./Button.styled.js";
 //# sourceMappingURL=Button.d.ts.map

package/esm/components/ui/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEpC,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAkB3E,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC"}

package/esm/components/ui/button/Button.js

@@ -1,14 +1,2 @@
-import React from "react";
-import classnames from "classnames";
-import { makeVariants } from "../../../utils/index.js";
-import styles from "./Button.module.scss";
-const Button = ({ className, children, variant, ...props }) => {
-    const variants = makeVariants(variant);
-    const cls = classnames(styles.btn, {
-        [styles["btn--inline"]]: variants.includes("inline"),
-        [styles["btn--outline"]]: variants.includes("outline"),
-    }, className);
-    return (React.createElement("button", { ...props, className: cls, disabled: props.disabled }, children));
-};
-export { Button };
+export { Button } from "./Button.styled.js";
 //# sourceMappingURL=Button.js.map

package/esm/components/ui/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAQ1C,MAAM,MAAM,GAAoE,CAAC,EAC7E,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EACzC,EAAE,EAAE;IACD,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IAEvC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,EAAE,SAAS,CAAC,CAAC;IAEd,OAAO,CACH,mCACQ,KAAK,EACT,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAC1B,QAAQ,CACD,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC"}

package/esm/components/ui/button/Button.stories.d.ts

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

package/esm/components/ui/button/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KAKd,CAAC;AASF,QAAA,MAAM,cAAc,EAAE,KAerB,CAAC;AAEF,OAAO,EACH,OAAO,EACP,cAAc,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/ui/button/Button.stories.js

@@ -0,0 +1,35 @@
+import React, { useCallback } from "react";
+import { styled } from "../../../theme.js";
+import { Button } from "./Button.js";
+const meta = {
+    title: "Components/UI/Button",
+    component: Button,
+    tags: ["autodocs", "ui"],
+};
+const Primary = {
+    args: {
+        children: "Click me",
+        onClick: () => { alert("Clicked"); },
+    },
+};
+const Container = styled("div", {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "1rem",
+});
+const MultipleAtOnce = {
+    render: () => {
+        const handleClick = useCallback(() => {
+            alert("Clicked");
+        }, []);
+        return (React.createElement(Container, null,
+            React.createElement(Button, { onClick: handleClick }, "Basic button"),
+            React.createElement(Button, { disabled: true, onClick: handleClick }, "Disabled button"),
+            React.createElement(Button, { inline: true, onClick: handleClick }, "Inline button"),
+            React.createElement(Button, { outline: true, onClick: handleClick }, "Outline button")));
+    },
+};
+export { Primary, MultipleAtOnce, };
+export default meta;
+//# sourceMappingURL=Button.stories.js.map

package/esm/components/ui/button/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC;CAC3B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;KACvC;CACJ,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,EAAE;IAC5B,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,YAAY;IACxB,GAAG,EAAE,MAAM;CACd,CAAC,CAAC;AAEH,MAAM,cAAc,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE;QACT,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;YACjC,KAAK,CAAC,SAAS,CAAC,CAAC;QACrB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACH,oBAAC,SAAS;YACN,oBAAC,MAAM,IAAC,OAAO,EAAE,WAAW,mBAAuB;YACnD,oBAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,sBAA0B;YACtE,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,oBAAwB;YAClE,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,qBAAyB,CAC5D,CACf,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,EACP,cAAc,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/ui/button/Button.styled.d.ts

@@ -0,0 +1,85 @@
+declare const Button: import("@stitches/react/types/styled-component.js").StyledComponent<"button", {
+    inline?: boolean | "true";
+    outline?: 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;
+    };
+}>>;
+export { Button, };
+//# sourceMappingURL=Button.styled.d.ts.map

package/esm/components/ui/button/Button.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.styled.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCV,CAAC;AAEH,OAAO,EACH,MAAM,GACT,CAAC"}

package/esm/components/ui/button/Button.styled.js

@@ -0,0 +1,35 @@
+import { borderPxToRem, dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme.js";
+const Button = styled("button", {
+    "height": dimensionsPxToRem(118),
+    "background": "$green1",
+    "border": `${borderPxToRem(1)} solid $green1Darker`,
+    "color": "white",
+    "borderRadius": "1000px",
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "width": "100%",
+    "fontSize": fontPxToRem(26),
+    "padding": "0 1em",
+    "gap": pxToRem(10),
+    "&:disabled": {
+        opacity: 0.5,
+    },
+    "variants": {
+        inline: {
+            true: {
+                width: "auto",
+                display: "inline-flex",
+            },
+        },
+        outline: {
+            true: {
+                background: "white",
+                borderColor: "$buttonBorder",
+                color: "$grey1",
+            },
+        },
+    },
+});
+export { Button, };
+//# sourceMappingURL=Button.styled.js.map

package/esm/components/ui/button/Button.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAKnG,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE;IAC5B,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,sBAAsB;IACnD,OAAO,EAAE,OAAO;IAChB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAC1B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;IAElB,YAAY,EAAE;QACV,OAAO,EAAE,GAAG;KACf;IAED,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,aAAa;aACzB;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,UAAU,EAAE,OAAO;gBACnB,WAAW,EAAE,eAAe;gBAC5B,KAAK,EAAE,QAAQ;aAClB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,MAAM,GACT,CAAC"}

package/esm/components/ui/modal/Modal.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-import { ModalNegateMargin } from "./ModalNoMargin.js";
-type Variant = "bottom" | "full";
+import { ContainerStyled, OverlayStyled, RemovePadding } from "./Modal.styled";
+type OverlayProps = React.ComponentProps<typeof OverlayStyled>;
+type ContainerProps = React.ComponentProps<typeof ContainerStyled>;
 interface Props {
     onOverlayClick?: (() => void) | "close" | null;
     closeOnEsc?: boolean;
@@ -8,12 +9,13 @@ interface Props {
     isOpen: boolean;
     title?: React.ReactNode;
     className?: string;
-    variant?: Variant | Variant[];
     portal?: boolean | HTMLElement;
     children: React.ReactNode;
+    position?: OverlayProps["position"];
+    full?: ContainerProps["full"];
 }
 interface SubComponents {
-    NegateMargin: typeof ModalNegateMargin;
+    RemovePadding: typeof RemovePadding;
 }
 declare const Modal: React.FC<Props> & SubComponents;
 export { Modal };

package/esm/components/ui/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAOxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD,KAAK,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjC,UAAU,KAAK;IACX,cAAc,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,aAAa;IACnB,YAAY,EAAE,OAAO,iBAAiB,CAAC;CAC1C;AAGD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAoH9B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,EAAE,eAAe,EAAoB,aAAa,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAE9G,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAC/D,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAEnE,UAAU,KAAK;IACX,cAAc,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,aAAa,EAAE,OAAO,aAAa,CAAC;CACvC;AAKD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAwI9B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/ui/modal/Modal.js

@@ -1,15 +1,11 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import classnames from "classnames";
 import { createPortal } from "react-dom";
-import { makeVariants } from "../../../utils/index.js";
-import { ModalNegateMargin } from "./ModalNoMargin.js";
-import styles from "./Modal.module.scss";
-const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, portal = true, variant, }) => {
+import { ContainerStyled, NEGATIVE_PADDING, OverlayStyled, RemovePadding, TitleStyled } from "./Modal.styled";
+const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, portal = true, position, full, }) => {
     const [isClosing, setIsClosing] = useState(false);
     const [isRendered, setIsRendered] = useState(false);
     const overlayRef = useRef(null);
     const containerRef = useRef(null);
-    const v = makeVariants(variant);
     useEffect(() => {
         if (!isOpen || !closeOnEsc) {
             return;
@@ -45,7 +41,7 @@ const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "
         overlayRef.current.style.removeProperty("animation");
         containerRef.current.style.removeProperty("animation");
     }, [isClosing]);
-    const titleElem = title && React.createElement("div", { className: styles.title }, title);
+    const titleElem = title ? React.createElement(TitleStyled, null, title) : null;
     const handleOverlayClick = useCallback((e) => {
         if (e.target !== e.currentTarget) {
             return;
@@ -66,24 +62,40 @@ const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "
     if (!isRendered) {
         return null;
     }
-    const overlayCls = classnames(styles.overlay, {
-        [styles.isClosing]: isClosing,
-        [styles.overlayOnBottom]: v.includes("bottom"),
-    });
-    const containerCls = classnames(styles.container, className, {
-        [styles.isClosing]: isClosing,
-        [styles.full]: v.includes("full"),
+    const overlayVariants = {};
+    isClosing && (overlayVariants.isClosing = true);
+    position != null && (overlayVariants.position = position);
+    const containerVariants = {};
+    isClosing && (containerVariants.isClosing = true);
+    full != null && (containerVariants.full = full);
+    const childrenCount = React.Children.count(children);
+    const chld = React.Children.map(children, (child, index) => {
+        var _a;
+        if (React.isValidElement(child)) {
+            if (child.type === RemovePadding) {
+                const css = (_a = child.props.css) !== null && _a !== void 0 ? _a : {};
+                if (index === 0 && titleElem == null) {
+                    css.marginTop = NEGATIVE_PADDING;
+                }
+                if (index === childrenCount - 1) {
+                    css.marginBottom = NEGATIVE_PADDING;
+                }
+                return React.cloneElement(child, { css });
+            }
+            return child;
+        }
+        return child;
     });
-    const tree = (React.createElement("div", { className: overlayCls, onClick: handleOverlayClick, ref: overlayRef, onAnimationEnd: handleAnimationEnd },
-        React.createElement("div", { className: containerCls, ref: containerRef },
+    const tree = (React.createElement(OverlayStyled, { ...overlayVariants, onClick: handleOverlayClick, ref: overlayRef, onAnimationEnd: handleAnimationEnd },
+        React.createElement(ContainerStyled, { className: className, ...containerVariants, ref: containerRef },
             titleElem,
-            children)));
+            chld)));
     if (portal) {
         const root = typeof portal === "boolean" ? document.body : portal;
         return createPortal(tree, root);
     }
     return tree;
 };
-Modal.NegateMargin = ModalNegateMargin;
+Modal.RemovePadding = RemovePadding;
 export { Modal };
 //# sourceMappingURL=Modal.js.map

package/esm/components/ui/modal/Modal.js.map

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

package/esm/components/ui/modal/Modal.stories.d.ts

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

package/esm/components/ui/modal/Modal.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAQvD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAIpC,QAAA,MAAM,OAAO,EAAE,KAsCd,CAAC;AAEF,QAAA,MAAM,0BAA0B,EAAE,KAmCjC,CAAC;AAKF,QAAA,MAAM,QAAQ,EAAE,KA8Bf,CAAC;AAEF,OAAO,EACH,OAAO,EACP,0BAA0B,EAC1B,QAAQ,GACX,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,84 @@
+import React, { useCallback, useState } from "react";
+import { Button } from "../button/Button.js";
+import { Label } from "../../form/Label.js";
+import { Input } from "../../form/input/Input.js";
+import { Checkbox } from "../../form/Checkbox.js";
+import { List } from "../../layout/list/List.js";
+import { Modal } from "./Modal.js";
+import { ModalButtons } from "./ModalButtons.js";
+import { RemovePadding } from "./Modal.styled";
+const meta = {
+    title: "Components/UI/Modal",
+    component: Modal,
+    tags: ["autodocs", "ui"],
+};
+const handleNoop = () => undefined;
+const Primary = {
+    args: {},
+    render: () => {
+        const [open, setIsOpen] = useState(false);
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+        const handleOpen = useCallback(() => {
+            setIsOpen(true);
+        }, []);
+        return (React.createElement("div", null,
+            React.createElement(Button, { onClick: handleOpen }, "Open modal"),
+            React.createElement(Modal, { onClose: handleClose, isOpen: open, title: "95.5 MHz", position: "bottom", full: true },
+                React.createElement(Label, null,
+                    React.createElement(Input, { placeholder: "New station" })),
+                React.createElement(Label, null,
+                    React.createElement(Checkbox, { name: "", onChange: handleNoop, checked: true }, "Remember me")),
+                React.createElement(ModalButtons, null,
+                    React.createElement(ModalButtons.Button, { onClick: handleClose }, "Cancel"),
+                    React.createElement(ModalButtons.Button, { variant: "main", onClick: handleClose }, "Ok")))));
+    },
+};
+const WithRemovedPaddingSections = {
+    args: {},
+    render: () => {
+        const [open, setIsOpen] = useState(false);
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+        const handleOpen = useCallback(() => {
+            setIsOpen(true);
+        }, []);
+        return (React.createElement("div", null,
+            React.createElement(Button, { onClick: handleOpen }, "Open modal"),
+            React.createElement(Modal, { onClose: handleClose, isOpen: open, position: "bottom", full: true },
+                React.createElement(RemovePadding, null,
+                    React.createElement(Label, null,
+                        React.createElement(Input, { placeholder: "New station" }))),
+                React.createElement(Label, null,
+                    React.createElement(Input, { placeholder: "New station" })),
+                React.createElement(RemovePadding, null,
+                    React.createElement(Label, null,
+                        React.createElement(Input, { placeholder: "New station" }))))));
+    },
+};
+const WithList = {
+    args: {},
+    render: () => {
+        const [open, setIsOpen] = useState(false);
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+        const handleOpen = useCallback(() => {
+            setIsOpen(true);
+        }, []);
+        return (React.createElement("div", null,
+            React.createElement(Button, { onClick: handleOpen }, "Open modal"),
+            React.createElement(Modal, { onClose: handleClose, isOpen: open, position: "bottom", full: true },
+                React.createElement(RemovePadding, null,
+                    React.createElement(List, { inset: true },
+                        React.createElement(List.Item, { selected: false, onClick: handleClose }, "First item"),
+                        React.createElement(List.Item, { selected: true, onClick: handleClose }, "Second item"),
+                        React.createElement(List.Item, { selected: false, onClick: handleClose }, "Third item"),
+                        React.createElement(List.Item, { selected: false, onClick: handleClose }, "Last option"))))));
+    },
+};
+export { Primary, WithRemovedPaddingSections, WithList, };
+export default meta;
+//# sourceMappingURL=Modal.stories.js.map