react-miui 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -6,6 +6,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [UNRELEASED]
 (nothing yet)
 
+## [0.8.0] - 2022-01-27
+### Added
+- modal component
+- toaster component
+### Changed
+- List, Item, Header components support inset variant
+- Item has new prop - `selected` for marking current active item
+### Fixed
+- Item border is on the item itself, not on the child element (fixes some compatibility issues and 1px shorter button element)
+- passing `variant` prop into button html element on Button component
+### Dev
+- fixed menu scrolling
+
 ## [0.7.0] - 2022-01-11
 ### Added
 - textarea component

package/dist/components/layout/list/Header.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
-declare const Header: React.FC;
+declare type Variant = "inset";
+interface Props {
+    variant?: Variant | Variant[];
+}
+declare const Header: React.FC<Props>;
 export { Header };
 //# sourceMappingURL=Header.d.ts.map

package/dist/components/layout/list/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAOnB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAa3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/layout/list/Header.js

@@ -8,8 +8,13 @@ const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Item_module_scss_1 = __importDefault(require("./Item.module.scss"));
 const Header_module_scss_1 = __importDefault(require("./Header.module.scss"));
+const makeVariants_1 = require("../../../utils/makeVariants");
 const Header = (props) => {
-    return (react_1.default.createElement("li", { className: classnames_1.default(Item_module_scss_1.default.item, Header_module_scss_1.default.header) },
+    const v = makeVariants_1.makeVariants(props.variant);
+    const cls = classnames_1.default(Item_module_scss_1.default.item, Header_module_scss_1.default.header, {
+        [Item_module_scss_1.default.inset]: v.includes("inset"),
+    });
+    return (react_1.default.createElement("li", { className: cls },
         react_1.default.createElement("div", null, props.children)));
 };
 exports.Header = Header;

package/dist/components/layout/list/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,0EAAwC;AACxC,8EAAgD;AAEhD,MAAM,MAAM,GAAa,CAAC,KAAK,EAAE,EAAE;IAE/B,OAAO,CACH,sCAAI,SAAS,EAAE,oBAAU,CAAC,0BAAM,CAAC,IAAI,EAAE,4BAAY,CAAC,MAAM,CAAC;QACvD,2CAAM,KAAK,CAAC,QAAQ,CAAO,CAC1B,CACR,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,0EAAwC;AACxC,8EAAgD;AAChD,8DAA2D;AAQ3D,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,CAAC,GAAG,2BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,oBAAU,CAAC,0BAAM,CAAC,IAAI,EAAE,4BAAY,CAAC,MAAM,EAAE;QACrD,CAAC,0BAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;KACtC,CAAC,CAAC;IAGH,OAAO,CACH,sCAAI,SAAS,EAAE,GAAG;QACd,2CAAM,KAAK,CAAC,QAAQ,CAAO,CAC1B,CACR,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

package/dist/components/layout/list/Item.d.ts

@@ -4,6 +4,7 @@ import { Label } from "./Label.js";
 interface LinkProps {
     href: string;
 }
+declare type Variant = "inset";
 interface Props {
     href?: string;
     to?: string;
@@ -11,6 +12,8 @@ interface Props {
     className?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
     ratio?: string;
+    variant?: Variant | Variant[];
+    selected?: boolean | undefined;
 }
 interface SubComponents {
     Label: typeof Label;

package/dist/components/layout/list/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AAGD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aA6C7B,CAAC;AAKF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,aAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAClC;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AAMD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAyD7B,CAAC;AAKF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/layout/list/Item.js

@@ -20,9 +20,21 @@ const classnames_1 = __importDefault(require("classnames"));
 const Item_module_scss_1 = __importDefault(require("./Item.module.scss"));
 const Value_js_1 = require("./Value.js");
 const Label_js_1 = require("./Label.js");
+const makeVariants_1 = require("../../../utils/makeVariants");
+const Icon_1 = require("../../icons/Icon");
+const icon = react_1.default.createElement(Icon_1.Icon, { className: Item_module_scss_1.default.icon, name: Icon_1.ICON.forward });
+const noIcon = react_1.default.createElement("span", { className: Item_module_scss_1.default.icon });
 const Item = (props) => {
-    const { className, children, href, to, onClick, Link, ratio } = props, restProps = __rest(props, ["className", "children", "href", "to", "onClick", "Link", "ratio"]);
+    const { className, children, href, to, onClick, Link, ratio, variant, selected } = props, restProps = __rest(props, ["className", "children", "href", "to", "onClick", "Link", "ratio", "variant", "selected"]);
+    const v = makeVariants_1.makeVariants(variant);
     const cls = classnames_1.default(Item_module_scss_1.default.item, className);
+    const innerCls = classnames_1.default(Item_module_scss_1.default.content, {
+        [Item_module_scss_1.default.inset]: v.includes("inset"),
+        [Item_module_scss_1.default.selected]: selected,
+    });
+    const pre = typeof selected === "boolean"
+        ? (selected ? icon : noIcon)
+        : null;
     const liProps = {
         className: cls,
     };
@@ -35,7 +47,9 @@ const Item = (props) => {
         if (index in r) {
             flex = r[index];
         }
-        return react_1.default.createElement("div", { style: { flex } }, child);
+        return react_1.default.createElement("div", { style: { flex } },
+            pre,
+            child);
     });
     if (to) {
         if (!Link) {
@@ -43,7 +57,7 @@ const Item = (props) => {
         }
         return react_1.default.createElement("li", Object.assign({}, liProps),
             react_1.default.createElement(Link, Object.assign({ href: to }, restProps),
-                react_1.default.createElement("a", { className: Item_module_scss_1.default.content }, ren)));
+                react_1.default.createElement("a", { className: innerCls }, ren)));
     }
     if (href) {
         const aProps = Object.assign({}, restProps);
@@ -51,14 +65,14 @@ const Item = (props) => {
             aProps.onClick = onClick;
         }
         return react_1.default.createElement("li", Object.assign({}, liProps),
-            react_1.default.createElement("a", Object.assign({ href: href }, aProps, { className: Item_module_scss_1.default.content }), ren));
+            react_1.default.createElement("a", Object.assign({ href: href }, aProps, { className: innerCls }), ren));
     }
     if (onClick) {
         return (react_1.default.createElement("li", Object.assign({}, liProps),
-            react_1.default.createElement("button", Object.assign({ className: classnames_1.default(Item_module_scss_1.default.button, Item_module_scss_1.default.content), onClick: props.onClick }, restProps), ren)));
+            react_1.default.createElement("button", Object.assign({ className: classnames_1.default(Item_module_scss_1.default.button, innerCls), onClick: props.onClick }, restProps), ren)));
     }
     return react_1.default.createElement("li", Object.assign({}, liProps),
-        react_1.default.createElement("div", Object.assign({}, restProps, { className: Item_module_scss_1.default.content }), ren));
+        react_1.default.createElement("div", Object.assign({}, restProps, { className: innerCls }), ren));
 };
 exports.Item = Item;
 Item.Label = Label_js_1.Label;

package/dist/components/layout/list/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,0EAAwC;AACxC,yCAAmC;AACnC,yCAAmC;AAqBnC,MAAM,IAAI,GAAoC,CAAC,KAAK,EAAE,EAAE;IACpD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAA7E,mEAAqE,CAAQ,CAAC;IACpF,MAAM,GAAG,GAAG,oBAAU,CAAC,0BAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG;QACZ,SAAS,EAAE,GAAG;KACjB,CAAC;IAEF,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAExC,MAAM,GAAG,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC5D,IAAI,IAAI,GAAG,SAAS,CAAC;QACrB,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,gBAAK,EAAE;YAC5F,OAAO,KAAK,CAAC;SAChB;QACD,IAAI,KAAK,IAAI,CAAC,EAAE;YACZ,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;SACnB;QACD,OAAO,uCAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAG,KAAK,CAAO,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,sDAAQ,OAAO;YAAE,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS;gBAAE,qCAAG,SAAS,EAAE,0BAAM,CAAC,OAAO,IAAG,GAAG,CAAK,CAAO,CAAK,CAAC;KAC9G;IACD,IAAI,IAAI,EAAE;QACN,MAAM,MAAM,qBAA0D,SAAS,CAAE,CAAC;QAClF,IAAI,OAAO,EAAE;YACT,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;SAC5B;QACD,OAAO,sDAAQ,OAAO;YAAE,mDAAG,IAAI,EAAE,IAAI,IAAM,MAAM,IAAE,SAAS,EAAE,0BAAM,CAAC,OAAO,KAAG,GAAG,CAAK,CAAK,CAAC;KAChG;IACD,IAAI,OAAO,EAAE;QACT,OAAO,CACH,sDAAQ,OAAO;YACX,wDAAQ,SAAS,EAAE,oBAAU,CAAC,0BAAM,CAAC,MAAM,EAAE,0BAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAAK,SAAS,GAC7F,GAAG,CACC,CACR,CACR,CAAC;KACL;IACD,OAAO,sDAAQ,OAAO;QAAE,uDAAS,SAAS,IAAE,SAAS,EAAE,0BAAM,CAAC,OAAO,KAAG,GAAG,CAAO,CAAK,CAAC;AAC5F,CAAC,CAAC;AAKO,oBAAI;AAHb,IAAI,CAAC,KAAK,GAAG,gBAAK,CAAC;AACnB,IAAI,CAAC,KAAK,GAAG,gBAAK,CAAC"}
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"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"}

package/dist/components/layout/list/Item.module.scss

@@ -4,7 +4,7 @@
     padding: 0;
     font-size: calc(34px / var(--ratio-font));
 
-    &:not(:first-child) > * {
+    &:not(:first-child) {
         border-top: 0.37px solid var(--header-border);
     }
 
@@ -29,3 +29,18 @@
     min-height: calc(174px / var(--ratio-dimensions));
     align-items: center;
 }
+
+.inset {
+    padding-left: calc(37px / var(--ratio-dimensions));
+    padding-right: calc(37px / var(--ratio-dimensions));
+}
+
+.icon {
+    width: 7px;
+    margin-right: 10px;
+    display: inline-block;
+}
+
+.selected {
+    color: var(--main-color);
+}

package/dist/components/layout/list/List.d.ts

@@ -1,8 +1,13 @@
 import React from "react";
 import { Header } from "./Header.js";
+declare type Variant = "inset";
+interface Props {
+    className?: string;
+    variant?: Variant | Variant[];
+}
 interface SubComponents {
     Header: typeof Header;
 }
-declare const List: React.FC & SubComponents;
+declare const List: React.FC<Props> & SubComponents;
 export { List };
 //# sourceMappingURL=List.d.ts.map

package/dist/components/layout/list/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,GAAG,aAItB,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKrC,aAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAqB7B,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/layout/list/List.js

@@ -5,10 +5,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
 const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const Header_js_1 = require("./Header.js");
+const makeVariants_1 = require("../../../utils/makeVariants");
+const Item_1 = require("./Item");
 const List_module_scss_1 = __importDefault(require("./List.module.scss"));
 const List = (props) => {
-    return (react_1.default.createElement("ul", { className: List_module_scss_1.default.list }, props.children));
+    const v = makeVariants_1.makeVariants(props.variant);
+    const chld = react_1.default.Children.map(props.children, (child) => {
+        if (child && typeof child === "object" && "type" in child && (child.type === Item_1.Item || child.type === Header_js_1.Header)) {
+            return react_1.default.cloneElement(child, {
+                variant: props.variant,
+            });
+        }
+        return child;
+    });
+    return (react_1.default.createElement("ul", { className: classnames_1.default(List_module_scss_1.default.list, {
+            [List_module_scss_1.default.inset]: v.includes("inset"),
+        }) }, chld));
 };
 exports.List = List;
 List.Header = Header_js_1.Header;

package/dist/components/layout/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,2CAAqC;AACrC,0EAAwC;AAMxC,MAAM,IAAI,GAA6B,CAAC,KAAK,EAAE,EAAE;IAC7C,OAAO,CACH,sCAAI,SAAS,EAAE,0BAAM,CAAC,IAAI,IAAG,KAAK,CAAC,QAAQ,CAAM,CACpD,CAAC;AACN,CAAC,CAAC;AAIO,oBAAI;AAFb,IAAI,CAAC,MAAM,GAAG,kBAAM,CAAC"}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,2CAAqC;AACrC,8DAA2D;AAC3D,iCAA8B;AAC9B,0EAAwC;AAaxC,MAAM,IAAI,GAAoC,CAAC,KAAK,EAAE,EAAE;IACpD,MAAM,CAAC,GAAG,2BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,IAAI,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACtD,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,WAAI,IAAI,KAAK,CAAC,IAAI,KAAK,kBAAM,CAAC,EAAE;YACzG,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAE7B,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,CAAC,CAAC;SACN;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,sCACI,SAAS,EAAE,oBAAU,CAAC,0BAAM,CAAC,IAAI,EAAE;YAC/B,CAAC,0BAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;SACtC,CAAC,IACJ,IAAI,CACD,CACR,CAAC;AACN,CAAC,CAAC;AAIO,oBAAI;AAFb,IAAI,CAAC,MAAM,GAAG,kBAAM,CAAC"}

package/dist/components/layout/list/List.module.scss

@@ -2,3 +2,7 @@
     margin: 0 23px;
     padding: 0;
 }
+
+.inset {
+    margin: 0;
+}

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;AAM1B,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAgB3E,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,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClC;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"}

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

@@ -20,8 +20,8 @@ const classnames_1 = __importDefault(require("classnames"));
 const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
 const makeVariants_js_1 = require("../../../utils/makeVariants.js");
 const Button = (_a) => {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    const variants = makeVariants_js_1.makeVariants(props.variant);
+    var { className, children, variant } = _a, props = __rest(_a, ["className", "children", "variant"]);
+    const variants = makeVariants_js_1.makeVariants(variant);
     const cls = 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"),

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;AAC1B,4DAAoC;AAEpC,8EAA0C;AAC1C,oEAA8D;AAM9D,MAAM,MAAM,GAAoE,CAAC,EAAiC,EAAE,EAAE;QAArC,EAAE,SAAS,EAAE,QAAQ,OAAY,EAAP,KAAK,cAA/B,yBAAiC,CAAF;IAC5G,MAAM,QAAQ,GAAG,8BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,oBAAU,CAAC,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,kDAA0B;AAC1B,4DAAoC;AAEpC,8EAA0C;AAC1C,oEAA8D;AAM9D,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,8BAAY,CAAC,OAAO,CAAC,CAAC;IAEvC,MAAM,GAAG,GAAG,oBAAU,CAAC,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"}

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { ModalNegateMargin } from "./ModalNoMargin";
+declare type Variant = "bottom" | "full";
+interface Props {
+    onOverlayClick?: (() => void) | "close" | null;
+    closeOnEsc?: boolean;
+    onClose: () => void;
+    isOpen: boolean;
+    title?: React.ReactNode;
+    className?: string;
+    variant?: Variant | Variant[];
+}
+interface SubComponents {
+    NegateMargin: typeof ModalNegateMargin;
+}
+declare const Modal: React.FC<Props> & SubComponents;
+export { Modal };
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,aAAK,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;CACjC;AAED,UAAU,aAAa;IACnB,YAAY,EAAE,OAAO,iBAAiB,CAAC;CAC1C;AAGD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aA4G9B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+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 Modal_module_scss_1 = __importDefault(require("./Modal.module.scss"));
+const makeVariants_1 = require("../../../utils/makeVariants");
+const ModalNoMargin_1 = require("./ModalNoMargin");
+const Modal = ({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, variant, }) => {
+    const [isClosing, setIsClosing] = react_1.useState(false);
+    const [isRendered, setIsRendered] = react_1.useState(false);
+    const overlayRef = react_1.useRef(null);
+    const containerRef = react_1.useRef(null);
+    const v = makeVariants_1.makeVariants(variant);
+    react_1.useEffect(() => {
+        if (!isOpen || !closeOnEsc) {
+            return;
+        }
+        const onKeyDown = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [isOpen, closeOnEsc]);
+    react_1.useEffect(() => {
+        if (!isOpen) {
+            setIsClosing(true);
+            return;
+        }
+        setIsRendered(true);
+        setIsClosing(false);
+    }, [isOpen]);
+    react_1.useEffect(() => {
+        if (!isClosing) {
+            return;
+        }
+        if (!overlayRef.current || !containerRef.current) {
+            return;
+        }
+        overlayRef.current.style.animation = "none";
+        containerRef.current.style.animation = "none";
+        overlayRef.current.offsetHeight;
+        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 handleOverlayClick = react_1.useCallback((e) => {
+        if (e.target !== e.currentTarget) {
+            return;
+        }
+        if (onOverlayClick === "close") {
+            onClose();
+        }
+        if (typeof onOverlayClick === "function") {
+            onOverlayClick();
+        }
+    }, [onOverlayClick, onClose]);
+    const handleAnimationEnd = react_1.useCallback(() => {
+        if (isOpen) {
+            return;
+        }
+        setIsRendered(false);
+    }, [isOpen]);
+    if (!isRendered) {
+        return null;
+    }
+    const overlayCls = 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 = 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"),
+    });
+    return (react_1.default.createElement("div", { className: overlayCls, onClick: handleOverlayClick, ref: overlayRef, onAnimationEnd: handleAnimationEnd },
+        react_1.default.createElement("div", { className: containerCls, ref: containerRef },
+            titleElem,
+            children)));
+};
+exports.Modal = Modal;
+Modal.NegateMargin = ModalNoMargin_1.ModalNegateMargin;
+//# sourceMappingURL=Modal.js.map

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

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

package/dist/components/ui/modal/Modal.module.scss

@@ -0,0 +1,92 @@
+@keyframes overlay {
+    from {
+        background: #00000000;
+    }
+
+    to {
+        background: #0000004c;
+    }
+}
+
+.overlay {
+    position: fixed;
+    z-index: 4;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: overlay 300ms;
+    animation-fill-mode: forwards;
+}
+
+.overlayOnBottom {
+    align-items: flex-end;
+    padding-bottom: calc(24px / var(--ratio-dimensions));
+}
+
+@keyframes container {
+    from {
+        transform: translateY(30px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.container {
+    background: var(--modal-bg);
+    border-radius: calc(12px / var(--ratio-dimensions));
+    max-width: 333px;
+    width: calc(100% - 30px);
+    padding: 20px;
+    position: relative;
+    box-sizing: border-box;
+    animation: container 300ms;
+    animation-fill-mode: forwards;
+}
+
+.full {
+    width: calc(100vw - 30px);
+    max-width: 1000px;
+}
+
+.isClosing {
+    // keep this after .overlay .container to prevent overwriting
+    animation-direction: reverse;
+}
+
+.close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    + .title {
+        margin-right: 40px;
+        margin-top: -4px;
+    }
+}
+
+.title {
+    font-size: calc(40px / var(--ratio-font));
+    text-align: center;
+    color: black;
+    margin: calc(90px / var(--ratio-dimensions)) 0;
+}
+
+.negateMargin {
+    margin: 0 -20px -20px;
+}
+
+.removeMargin {
+    margin: 0;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,aAAK,OAAO,GAAG,MAAM,CAAC;AAEtB,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAUhF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,31 @@
+"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.ModalButton = void 0;
+const react_1 = __importDefault(require("react"));
+const ModalButtons_module_scss_1 = __importDefault(require("./ModalButtons.module.scss"));
+const makeVariants_1 = require("../../../utils/makeVariants");
+const classnames_1 = __importDefault(require("classnames"));
+const ModalButton = (_a) => {
+    var { className, children, variant } = _a, props = __rest(_a, ["className", "children", "variant"]);
+    const v = makeVariants_1.makeVariants(variant);
+    const cls = classnames_1.default(ModalButtons_module_scss_1.default.button, {
+        [ModalButtons_module_scss_1.default.buttonMain]: v.includes("main"),
+    }, className);
+    return react_1.default.createElement("button", Object.assign({}, props, { className: cls }), children);
+};
+exports.ModalButton = ModalButton;
+//# sourceMappingURL=ModalButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalButton.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,0FAAgD;AAChD,8DAA2D;AAC3D,4DAAoC;AAQpC,MAAM,WAAW,GAAoE,CAAC,EAErF,EAAE,EAAE;QAFiF,EAClF,SAAS,EAAE,QAAQ,EAAE,OAAO,OAC/B,EADoC,KAAK,cAD4C,oCAErF,CADyC;IAEtC,MAAM,CAAC,GAAG,2BAAY,CAAC,OAAO,CAAC,CAAC;IAEhC,MAAM,GAAG,GAAG,oBAAU,CAAC,kCAAM,CAAC,MAAM,EAAE;QAClC,CAAC,kCAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;KAC1C,EAAE,SAAS,CAAC,CAAC;IAEd,OAAO,0DAAY,KAAK,IAAE,SAAS,EAAE,GAAG,KAAG,QAAQ,CAAU,CAAC;AAClE,CAAC,CAAC;AAEO,kCAAW"}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { ModalButton } from "./ModalButton";
+interface Props {
+}
+interface SubComponents {
+    Button: typeof ModalButton;
+}
+declare const ModalButtons: React.FC<Props> & SubComponents;
+export { ModalButtons };
+//# sourceMappingURL=ModalButtons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,UAAU,KAAK;CAAG;AAElB,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"}

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

@@ -0,0 +1,15 @@
+"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 ModalButton_1 = require("./ModalButton");
+const ModalButtons_module_scss_1 = __importDefault(require("./ModalButtons.module.scss"));
+const ModalButtons = (props) => {
+    return react_1.default.createElement("div", { className: ModalButtons_module_scss_1.default.container }, props.children);
+};
+exports.ModalButtons = ModalButtons;
+ModalButtons.Button = ModalButton_1.ModalButton;
+//# sourceMappingURL=ModalButtons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalButtons.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAA4C;AAE5C,0FAAgD;AAQhD,MAAM,YAAY,GAAoC,CAAC,KAAK,EAAE,EAAE;IAC5D,OAAO,uCAAK,SAAS,EAAE,kCAAM,CAAC,SAAS,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACpE,CAAC,CAAC;AAGO,oCAAY;AAFrB,YAAY,CAAC,MAAM,GAAG,yBAAW,CAAC"}

package/dist/components/ui/modal/ModalButtons.module.scss

@@ -0,0 +1,32 @@
+.container {
+    display: flex;
+    margin-top: calc(100px / var(--ratio-dimensions));
+    margin-left: -20px;
+    margin-right: -20px;
+    margin-bottom: -20px;
+}
+
+.button {
+    border: none;
+    border-top: 1px solid var(--modal-button-border);
+    background: var(--modal-button-bg);
+    flex: 1;
+    height: calc(156px / var(--ratio-dimensions));
+    font-weight: 500;
+
+    &:not(:first-child) {
+        border-left: 1px solid var(--modal-button-border);
+    }
+
+    &:first-child {
+        border-bottom-left-radius: calc(12px / var(--ratio-dimensions));
+    }
+
+    &:last-child {
+        border-bottom-right-radius: calc(12px / var(--ratio-dimensions));
+    }
+}
+
+.buttonMain {
+    color: var(--main-color);
+}

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface Props {
+}
+declare const ModalNegateMargin: React.FC<Props>;
+export { ModalNegateMargin };
+//# sourceMappingURL=ModalNoMargin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalNoMargin.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalNoMargin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,KAAK;CAAG;AAElB,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAYtC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}