react-miui 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.22.0] - 2023-07-03
+### Breaking
+- `Button` no longer accepts `variant`, it has direct `inline` and `outline` props now
+- `Modal` no longer accepts `variant`, it has direct `full` & `position` props (position still supports `bottom` only)
+- `Modal.NegateMargin` replaced with improved `Modal.RemovePadding`
+### Fixed
+- some Button, Select & PopOption styles when using new css reset
+### Dev
+- `Button` converted to stitches
+- `Select` converted to stitches
+- `Modal` & `ModalButtons` converted to stitches
+
 ## [0.21.0] - 2022-06-13
 ### Breaking
 - `Section` no longer accepts `variant`, it has direct `horizontal` and `vertical` props now

package/dist/components/form/Select.d.ts

@@ -1,6 +1,2 @@
-import React from "react";
-interface Props {
-}
-declare const Select: React.FC<React.SelectHTMLAttributes<HTMLSelectElement> & Props>;
-export { Select, };
+export { Select } from "./Select.styled.js";
 //# sourceMappingURL=Select.d.ts.map

package/dist/components/form/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;CACd;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAQ3E,CAAC;AAEF,OAAO,EACH,MAAM,GACT,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/form/Select.js

@@ -1,27 +1,6 @@
 "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.Select = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
-const Select = (_a) => {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    const wrapperCls = (0, classnames_1.default)(Select_module_scss_1.default.select, className);
-    return (react_1.default.createElement("select", Object.assign({ className: wrapperCls }, props), children));
-};
-exports.Select = Select;
+var Select_styled_js_1 = require("./Select.styled.js");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_styled_js_1.Select; } });
 //# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AAEpC,8EAA0C;AAK1C,MAAM,MAAM,GAAoE,CAAC,EAAiC,EAAE,EAAE;QAArC,EAAE,SAAS,EAAE,QAAQ,OAAY,EAAP,KAAK,cAA/B,yBAAiC,CAAF;IAC5G,MAAM,UAAU,GAAG,IAAA,oBAAU,EAAC,4BAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAExD,OAAO,CACH,wDAAQ,SAAS,EAAE,UAAU,IAAM,KAAK,GACnC,QAAQ,CACJ,CACZ,CAAC;AACN,CAAC,CAAC;AAGE,wBAAM"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":";;;AAAA,uDAA4C;AAAnC,0GAAA,MAAM,OAAA"}

package/dist/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/dist/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/dist/components/form/Select.stories.js

@@ -0,0 +1,26 @@
+"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 Select_js_1 = require("./Select.js");
+const meta = {
+    title: "Components/Form/Select",
+    component: Select_js_1.Select,
+    tags: ["autodocs", "form"],
+};
+const Primary = {
+    args: {
+        children: [
+            react_1.default.createElement("option", { key: "1", value: "1" }, "First"),
+            react_1.default.createElement("option", { key: "2", value: "2" }, "Second"),
+            react_1.default.createElement("option", { key: "3", value: "3" }, "Third"),
+        ],
+        disabled: false,
+    },
+};
+exports.Primary = Primary;
+exports.default = meta;
+//# sourceMappingURL=Select.stories.js.map

package/dist/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,kDAA0B;AAI1B,2CAAqC;AAErC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,kBAAM;IACjB,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE;YACN,0CAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,YAAgB;YAC5C,0CAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,aAAiB;YAC7C,0CAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,YAAgB;SAC/C;QACD,QAAQ,EAAE,KAAK;KAClB;CACJ,CAAC;AAGE,0BAAO;AAGX,kBAAe,IAAI,CAAC"}

package/dist/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/dist/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/dist/components/form/Select.styled.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const theme_js_1 = require("../../theme.js");
+const Select = (0, theme_js_1.styled)("select", {
+    "boxSizing": "border-box",
+    "height": (0, theme_js_1.dimensionsPxToRem)(103),
+    "color": "$text",
+    "display": "flex",
+    "alignItems": "center",
+    "width": "100%",
+    "background": "white",
+    "fontFamily": "inherit",
+    "borderRadius": (0, theme_js_1.pxToRem)(2),
+    "padding": `0 ${(0, theme_js_1.dimensionsPxToRem)(36)}`,
+    "border": `${(0, theme_js_1.borderPxToRem)(1)} solid $border`,
+    "appearance": "auto",
+    "&:disabled": {
+        background: "$inputDisabledBg",
+        color: "$inputDisabledText",
+    },
+});
+exports.Select = Select;
+//# sourceMappingURL=Select.styled.js.map

package/dist/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,6CAAmF;AAEnF,MAAM,MAAM,GAAG,IAAA,iBAAM,EAAC,QAAQ,EAAE;IAC5B,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,IAAA,4BAAiB,EAAC,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,IAAA,kBAAO,EAAC,CAAC,CAAC;IAC1B,SAAS,EAAE,KAAK,IAAA,4BAAiB,EAAC,EAAE,CAAC,EAAE;IACvC,QAAQ,EAAE,GAAG,IAAA,wBAAa,EAAC,CAAC,CAAC,gBAAgB;IAC7C,YAAY,EAAE,MAAM;IAEpB,YAAY,EAAE;QACV,UAAU,EAAE,kBAAkB;QAC9B,KAAK,EAAE,oBAAoB;KAC9B;CACJ,CAAC,CAAC;AAGC,wBAAM"}

package/dist/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/dist/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/dist/components/ui/button/Button.js

@@ -1,32 +1,6 @@
 "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.Button = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../../utils/index.js");
-const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
-const Button = (_a) => {
-    var { className, children, variant } = _a, props = __rest(_a, ["className", "children", "variant"]);
-    const variants = (0, index_js_1.makeVariants)(variant);
-    const cls = (0, classnames_1.default)(Button_module_scss_1.default.btn, {
-        [Button_module_scss_1.default["btn--inline"]]: variants.includes("inline"),
-        [Button_module_scss_1.default["btn--outline"]]: variants.includes("outline"),
-    }, className);
-    return (react_1.default.createElement("button", Object.assign({}, props, { className: cls, disabled: props.disabled }), children));
-};
-exports.Button = Button;
+var Button_styled_js_1 = require("./Button.styled.js");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_styled_js_1.Button; } });
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AAEpC,sDAAuD;AAEvD,8EAA0C;AAQ1C,MAAM,MAAM,GAAoE,CAAC,EAEhF,EAAE,EAAE;QAF4E,EAC7E,SAAS,EAAE,QAAQ,EAAE,OAAO,OAC/B,EADoC,KAAK,cADuC,oCAEhF,CADyC;IAEtC,MAAM,QAAQ,GAAG,IAAA,uBAAY,EAAC,OAAO,CAAC,CAAC;IAEvC,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,4BAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,4BAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,4BAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,EAAE,SAAS,CAAC,CAAC;IAEd,OAAO,CACH,0DACQ,KAAK,IACT,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAC1B,QAAQ,CACD,CACZ,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":";;;AAAA,uDAA4C;AAAnC,0GAAA,MAAM,OAAA"}

package/dist/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/dist/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/dist/components/ui/button/Button.stories.js

@@ -0,0 +1,62 @@
+"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.MultipleAtOnce = exports.Primary = void 0;
+const react_1 = __importStar(require("react"));
+const theme_js_1 = require("../../../theme.js");
+const Button_js_1 = require("./Button.js");
+const meta = {
+    title: "Components/UI/Button",
+    component: Button_js_1.Button,
+    tags: ["autodocs", "ui"],
+};
+const Primary = {
+    args: {
+        children: "Click me",
+        onClick: () => { alert("Clicked"); },
+    },
+};
+exports.Primary = Primary;
+const Container = (0, theme_js_1.styled)("div", {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "1rem",
+});
+const MultipleAtOnce = {
+    render: () => {
+        const handleClick = (0, react_1.useCallback)(() => {
+            alert("Clicked");
+        }, []);
+        return (react_1.default.createElement(Container, null,
+            react_1.default.createElement(Button_js_1.Button, { onClick: handleClick }, "Basic button"),
+            react_1.default.createElement(Button_js_1.Button, { disabled: true, onClick: handleClick }, "Disabled button"),
+            react_1.default.createElement(Button_js_1.Button, { inline: true, onClick: handleClick }, "Inline button"),
+            react_1.default.createElement(Button_js_1.Button, { outline: true, onClick: handleClick }, "Outline button")));
+    },
+};
+exports.MultipleAtOnce = MultipleAtOnce;
+exports.default = meta;
+//# sourceMappingURL=Button.stories.js.map

package/dist/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,+CAA2C;AAI3C,gDAA2C;AAE3C,2CAAqC;AAIrC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,kBAAM;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;AA2BE,0BAAO;AAzBX,MAAM,SAAS,GAAG,IAAA,iBAAM,EAAC,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,IAAA,mBAAW,EAAC,GAAG,EAAE;YACjC,KAAK,CAAC,SAAS,CAAC,CAAC;QACrB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACH,8BAAC,SAAS;YACN,8BAAC,kBAAM,IAAC,OAAO,EAAE,WAAW,mBAAuB;YACnD,8BAAC,kBAAM,IAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,sBAA0B;YACtE,8BAAC,kBAAM,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,oBAAwB;YAClE,8BAAC,kBAAM,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,qBAAyB,CAC5D,CACf,CAAC;IACN,CAAC;CACJ,CAAC;AAIE,wCAAc;AAGlB,kBAAe,IAAI,CAAC"}

package/dist/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/dist/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/dist/components/ui/button/Button.styled.js

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

package/dist/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,gDAAmG;AAKnG,MAAM,MAAM,GAAG,IAAA,iBAAM,EAAC,QAAQ,EAAE;IAC5B,QAAQ,EAAE,IAAA,4BAAiB,EAAC,GAAG,CAAC;IAChC,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,GAAG,IAAA,wBAAa,EAAC,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,IAAA,sBAAW,EAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,IAAA,kBAAO,EAAC,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;AAGC,wBAAM"}

package/dist/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/dist/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/dist/components/ui/modal/Modal.js

@@ -22,23 +22,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const react_dom_1 = require("react-dom");
-const index_js_1 = require("../../../utils/index.js");
-const ModalNoMargin_js_1 = require("./ModalNoMargin.js");
-const Modal_module_scss_1 = __importDefault(require("./Modal.module.scss"));
-const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, portal = true, variant, }) => {
+const Modal_styled_1 = require("./Modal.styled");
+const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, portal = true, position, full, }) => {
     const [isClosing, setIsClosing] = (0, react_1.useState)(false);
     const [isRendered, setIsRendered] = (0, react_1.useState)(false);
     const overlayRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
-    const v = (0, index_js_1.makeVariants)(variant);
     (0, react_1.useEffect)(() => {
         if (!isOpen || !closeOnEsc) {
             return;
@@ -74,7 +67,7 @@ const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "
         overlayRef.current.style.removeProperty("animation");
         containerRef.current.style.removeProperty("animation");
     }, [isClosing]);
-    const titleElem = title && react_1.default.createElement("div", { className: Modal_module_scss_1.default.title }, title);
+    const titleElem = title ? react_1.default.createElement(Modal_styled_1.TitleStyled, null, title) : null;
     const handleOverlayClick = (0, react_1.useCallback)((e) => {
         if (e.target !== e.currentTarget) {
             return;
@@ -95,18 +88,34 @@ const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "
     if (!isRendered) {
         return null;
     }
-    const overlayCls = (0, classnames_1.default)(Modal_module_scss_1.default.overlay, {
-        [Modal_module_scss_1.default.isClosing]: isClosing,
-        [Modal_module_scss_1.default.overlayOnBottom]: v.includes("bottom"),
-    });
-    const containerCls = (0, classnames_1.default)(Modal_module_scss_1.default.container, className, {
-        [Modal_module_scss_1.default.isClosing]: isClosing,
-        [Modal_module_scss_1.default.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_1.default.Children.count(children);
+    const chld = react_1.default.Children.map(children, (child, index) => {
+        var _a;
+        if (react_1.default.isValidElement(child)) {
+            if (child.type === Modal_styled_1.RemovePadding) {
+                const css = (_a = child.props.css) !== null && _a !== void 0 ? _a : {};
+                if (index === 0 && titleElem == null) {
+                    css.marginTop = Modal_styled_1.NEGATIVE_PADDING;
+                }
+                if (index === childrenCount - 1) {
+                    css.marginBottom = Modal_styled_1.NEGATIVE_PADDING;
+                }
+                return react_1.default.cloneElement(child, { css });
+            }
+            return child;
+        }
+        return child;
     });
-    const tree = (react_1.default.createElement("div", { className: overlayCls, onClick: handleOverlayClick, ref: overlayRef, onAnimationEnd: handleAnimationEnd },
-        react_1.default.createElement("div", { className: containerCls, ref: containerRef },
+    const tree = (react_1.default.createElement(Modal_styled_1.OverlayStyled, Object.assign({}, overlayVariants, { onClick: handleOverlayClick, ref: overlayRef, onAnimationEnd: handleAnimationEnd }),
+        react_1.default.createElement(Modal_styled_1.ContainerStyled, Object.assign({ className: className }, containerVariants, { ref: containerRef }),
             titleElem,
-            children)));
+            chld)));
     if (portal) {
         const root = typeof portal === "boolean" ? document.body : portal;
         return (0, react_dom_1.createPortal)(tree, root);
@@ -114,5 +123,5 @@ const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "
     return tree;
 };
 exports.Modal = Modal;
-Modal.NegateMargin = ModalNoMargin_js_1.ModalNegateMargin;
+Modal.RemovePadding = Modal_styled_1.RemovePadding;
 //# sourceMappingURL=Modal.js.map