@memori.ai/memori-react 1.0.0-alpha.1

package/dist/components/ui/Checkbox.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisabledChecked = exports.Disabled = exports.Checked = exports.Default = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Checkbox_1 = tslib_1.__importDefault(require("./Checkbox"));
+const meta = {
+    title: 'UI/Checkbox',
+    component: Checkbox_1.default,
+    argTypes: {
+        label: {
+            control: {
+                type: 'text',
+            },
+        },
+        className: {
+            control: {
+                type: 'text',
+            },
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+const Template = args => react_1.default.createElement(Checkbox_1.default, { ...args });
+exports.Default = Template.bind({});
+exports.Default.args = {
+    label: 'Check me',
+};
+exports.Checked = Template.bind({});
+exports.Checked.args = {
+    label: 'Uncheck me',
+    checked: true,
+};
+exports.Disabled = Template.bind({});
+exports.Disabled.args = {
+    label: 'Do not check me',
+    disabled: true,
+};
+exports.DisabledChecked = Template.bind({});
+exports.DisabledChecked.args = {
+    label: 'Do not uncheck me',
+    checked: true,
+    disabled: true,
+};
+//# sourceMappingURL=Checkbox.stories.js.map

package/dist/components/ui/Checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/ui/Checkbox.stories.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAE1B,kEAA6C;AAE7C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,kBAAQ;IACnB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;aAChB;SACF;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC7B;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEpB,MAAM,QAAQ,GAAiB,IAAI,CAAC,EAAE,CAAC,8BAAC,kBAAQ,OAAK,IAAI,GAAI,CAAC;AAIjD,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AAEW,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,IAAI;CACd,CAAC;AAEW,QAAA,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,gBAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,iBAAiB;IACxB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEW,QAAA,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,uBAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,mBAAmB;IAC1B,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,IAAI;CACf,CAAC"}

package/dist/components/ui/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/Checkbox.test.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Checkbox_1 = tslib_1.__importDefault(require("./Checkbox"));
+it('renders Checkbox unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Checkbox_1.default, { label: "Check me" }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Checkbox checked unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Checkbox_1.default, { label: "Check me", checked: true }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Checkbox disabled unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Checkbox_1.default, { label: "Check me", disabled: true }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Checkbox checked and disabled unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Checkbox_1.default, { label: "Check me", checked: true, disabled: true }));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=Checkbox.test.js.map

package/dist/components/ui/Checkbox.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.test.js","sourceRoot":"","sources":["../../../src/components/ui/Checkbox.test.tsx"],"names":[],"mappings":";;;AAAA,0DAA0B;AAC1B,kDAAgD;AAChD,kEAAkC;AAElC,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;IACpC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,kBAAQ,IAAC,KAAK,EAAC,UAAU,GAAG,CAAC,CAAC;IAC5D,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;IAC5C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,kBAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,SAAG,CAAC,CAAC;IACpE,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;IAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,kBAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,SAAG,CAAC,CAAC;IACrE,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,kBAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,QAAC,QAAQ,SAAG,CAAC,CAAC;IAC7E,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC"}

package/dist/components/ui/Drawer.css

@@ -0,0 +1,138 @@
+.memori-drawer {
+    position: relative;
+    z-index: 60;
+}
+
+.memori-drawer--backdrop {
+    position: fixed;
+    z-index: 40;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.memori-drawer--container {
+    position: fixed;
+    z-index: 50;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+}
+
+.memori-drawer--container-scrollable {
+    display: flex;
+    min-height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-drawer--panel {
+    position: relative;
+    width: var(--memori-drawer--width, 100%);
+    height: 100%;
+    padding: 1.5rem 2rem;
+    margin-right: 0;
+    margin-left: auto;
+    background-color: #fff;
+    font-family: 'Exo 2', sans-serif;
+}
+
+@media (min-width: 768px) {
+    .memori-drawer--panel {
+        width: var(--memori-drawer--width--md, 80%);
+    }
+}
+
+@media (min-width: 1024px) {
+    .memori-drawer--panel {
+        width: var(--memori-drawer--width--lg, 60%);
+    }
+}
+
+.memori-drawer--panel.memori-drawer--with-footer {
+    padding-bottom: 0;
+}
+
+.memori-drawer--panel .memori-spin {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+}
+
+.memori-drawer--panel-left {
+    margin-right: auto;
+    margin-left: 0;
+}
+
+.memori-drawer--close {
+    position: absolute;
+    z-index: 70;
+    top: 0;
+    left: -3.5rem;
+    padding: 0.5rem;
+}
+
+.memori-drawer--close button {
+    border-color: #fff;
+    color: #fff;
+}
+
+.memori-drawer--panel-left .memori-drawer--close {
+    right: -3.5rem;
+    left: auto;
+}
+
+.memori-drawer--footer {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: 1px solid rgba(0, 0, 0, 0.25);
+    margin-top: auto;
+    background-color: #fff;
+}
+
+.memori-drawer--footer button+button {
+    margin-left: 0.5em;
+}
+
+.ease-out {
+    transition-timing-function: ease-out;
+}
+
+.ease-in {
+    transition-timing-function: ease-in;
+}
+
+.duration-300 {
+    transition-duration: 300ms;
+}
+
+.duration-200 {
+    transition-duration: 200ms;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-100 {
+    opacity: 1;
+}
+
+.max-w-0 {
+    max-width: 0;
+}
+
+.max-w-100 {
+    max-width: 100%;
+}

package/dist/components/ui/Drawer.d.ts

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import './Drawer.css';
+export interface Props {
+    open?: boolean;
+    onClose: (value: boolean) => void;
+    className?: string;
+    title?: string | JSX.Element | React.ReactNode;
+    description?: string | JSX.Element | React.ReactNode;
+    children: JSX.Element | React.ReactNode;
+    footer?: JSX.Element | React.ReactNode;
+    loading?: boolean;
+    closable?: boolean;
+    side?: 'left' | 'right';
+    width?: string;
+    widthMd?: string;
+    widthLg?: string;
+}
+declare const Drawer: FC<Props>;
+export default Drawer;

package/dist/components/ui/Drawer.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@headlessui/react");
+const Spin_1 = tslib_1.__importDefault(require("./Spin"));
+const Button_1 = tslib_1.__importDefault(require("./Button"));
+const Close_1 = tslib_1.__importDefault(require("../icons/Close"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+require("./Drawer.css");
+const Drawer = ({ open = false, onClose, className, title, description, children, footer, loading = false, side = 'right', closable = true, width = '100%', widthMd = '80%', widthLg = '60%', }) => (react_1.default.createElement(react_2.Transition, { appear: true, show: open, as: react_1.default.Fragment },
+    react_1.default.createElement(react_2.Dialog, { open: open, onClose: onClose, className: (0, classnames_1.default)('memori-drawer', className) },
+        react_1.default.createElement(react_2.Transition.Child, { as: react_1.default.Fragment, enter: "ease-out duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "ease-in duration-200", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
+            react_1.default.createElement("div", { className: "memori-drawer--backdrop" })),
+        react_1.default.createElement("div", { className: "memori-drawer--container" },
+            react_1.default.createElement("div", { className: "memori-drawer--container-scrollable" },
+                react_1.default.createElement(react_2.Transition.Child, { as: react_1.default.Fragment, enter: "ease-out duration-300", enterFrom: "max-w-0 opacity-0", enterTo: "max-w-100 opacity-100", leave: "ease-in duration-200", leaveFrom: "max-w-100 opacity-100", leaveTo: "max-w-0 opacity-0" },
+                    react_1.default.createElement(react_2.Dialog.Panel, { className: (0, classnames_1.default)('memori-drawer--panel', {
+                            'memori-drawer--panel-left': side === 'left',
+                            'memori-drawer--with-footer': !!footer,
+                        }) },
+                        react_1.default.createElement("style", { dangerouslySetInnerHTML: {
+                                __html: `
+                    .memori-drawer--panel {
+                      --memori-drawer--width: ${width};
+                      --memori-drawer--width-lg: ${widthLg};
+                      --memori-drawer--width-md: ${widthMd};
+                    }
+                  `,
+                            } }),
+                        closable && (react_1.default.createElement("div", { className: "memori-drawer--close" },
+                            react_1.default.createElement(Button_1.default, { shape: "circle", outlined: true, icon: react_1.default.createElement(Close_1.default, null), onClick: () => onClose(false) }))),
+                        react_1.default.createElement(Spin_1.default, { spinning: loading },
+                            title && (react_1.default.createElement(react_2.Dialog.Title, { className: "memori-drawer--title" }, title)),
+                            description && (react_1.default.createElement(react_2.Dialog.Description, { className: "memori-drawer--description" }, description)),
+                            children,
+                            footer && (react_1.default.createElement("div", { className: "memori-drawer--footer" }, footer))))))))));
+exports.default = Drawer;
+//# sourceMappingURL=Drawer.js.map

package/dist/components/ui/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/ui/Drawer.tsx"],"names":[],"mappings":";;;AAAA,0DAAkC;AAClC,6CAAuD;AACvD,0DAA0B;AAC1B,8DAA8B;AAC9B,mEAAmC;AACnC,oEAA4B;AAE5B,wBAAsB;AAkBtB,MAAM,MAAM,GAAc,CAAC,EACzB,IAAI,GAAG,KAAK,EACZ,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,OAAO,EACd,QAAQ,GAAG,IAAI,EACf,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,GACT,EAAE,EAAE,CAAC,CACX,8BAAC,kBAAU,IAAC,MAAM,QAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,eAAK,CAAC,QAAQ;IAC/C,8BAAC,cAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,IAAA,oBAAE,EAAC,eAAe,EAAE,SAAS,CAAC;QAEzC,8BAAC,kBAAU,CAAC,KAAK,IACf,EAAE,EAAE,eAAK,CAAC,QAAQ,EAClB,KAAK,EAAC,uBAAuB,EAC7B,SAAS,EAAC,WAAW,EACrB,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,WAAW;YAEnB,uCAAK,SAAS,EAAC,yBAAyB,GAAG,CAC1B;QACnB,uCAAK,SAAS,EAAC,0BAA0B;YACvC,uCAAK,SAAS,EAAC,qCAAqC;gBAClD,8BAAC,kBAAU,CAAC,KAAK,IACf,EAAE,EAAE,eAAK,CAAC,QAAQ,EAClB,KAAK,EAAC,uBAAuB,EAC7B,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAC,uBAAuB,EAC/B,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAC,mBAAmB;oBAE3B,8BAAC,cAAM,CAAC,KAAK,IACX,SAAS,EAAE,IAAA,oBAAE,EAAC,sBAAsB,EAAE;4BACpC,2BAA2B,EAAE,IAAI,KAAK,MAAM;4BAC5C,4BAA4B,EAAE,CAAC,CAAC,MAAM;yBACvC,CAAC;wBAEF,yCACE,uBAAuB,EAAE;gCACvB,MAAM,EAAE;;gDAEsB,KAAK;mDACF,OAAO;mDACP,OAAO;;mBAEvC;6BACF,GACD;wBACD,QAAQ,IAAI,CACX,uCAAK,SAAS,EAAC,sBAAsB;4BACnC,8BAAC,gBAAM,IACL,KAAK,EAAC,QAAQ,EACd,QAAQ,QACR,IAAI,EAAE,8BAAC,eAAK,OAAG,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAC7B,CACE,CACP;wBACD,8BAAC,cAAI,IAAC,QAAQ,EAAE,OAAO;4BACpB,KAAK,IAAI,CACR,8BAAC,cAAM,CAAC,KAAK,IAAC,SAAS,EAAC,sBAAsB,IAC3C,KAAK,CACO,CAChB;4BACA,WAAW,IAAI,CACd,8BAAC,cAAM,CAAC,WAAW,IAAC,SAAS,EAAC,4BAA4B,IACvD,WAAW,CACO,CACtB;4BAEA,QAAQ;4BAER,MAAM,IAAI,CACT,uCAAK,SAAS,EAAC,uBAAuB,IAAE,MAAM,CAAO,CACtD,CACI,CACM,CACE,CACf,CACF,CACC,CACE,CACd,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/dist/components/ui/Drawer.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './Drawer';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<Props>;
+export declare const Open: Story<Props>;
+export declare const WithTitle: Story<Props>;
+export declare const WithTitleAndDescription: Story<Props>;
+export declare const Loading: Story<Props>;
+export declare const WithFooter: Story<Props>;
+export declare const SideLeft: Story<Props>;
+export declare const WithALotOfContent: Story<Props>;

package/dist/components/ui/Drawer.stories.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithALotOfContent = exports.SideLeft = exports.WithFooter = exports.Loading = exports.WithTitleAndDescription = exports.WithTitle = exports.Open = exports.Default = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Drawer_1 = tslib_1.__importDefault(require("./Drawer"));
+const Button_1 = tslib_1.__importDefault(require("./Button"));
+const meta = {
+    title: 'UI/Drawer',
+    component: Drawer_1.default,
+    argTypes: {
+        title: {
+            control: {
+                type: 'text',
+            },
+        },
+        description: {
+            control: {
+                type: 'text',
+            },
+        },
+        loading: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        open: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        className: {
+            control: {
+                type: 'text',
+            },
+        },
+        side: {
+            control: {
+                type: 'select',
+                options: ['left', 'right'],
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+const content = (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
+    react_1.default.createElement("h3", null, "Suspendisse a sodales nulla, sed semper nisi."),
+    react_1.default.createElement("p", null, "Proin tincidunt enim in felis aliquet, a ultricies purus bibendum."),
+    react_1.default.createElement("ul", null,
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus."),
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus."),
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus.")),
+    react_1.default.createElement("p", null, "Nulla at urna diam."),
+    react_1.default.createElement("h3", null, "Suspendisse a sodales nulla, sed semper nisi."),
+    react_1.default.createElement("p", null, "Proin tincidunt enim in felis aliquet, a ultricies purus bibendum."),
+    react_1.default.createElement("ul", null,
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus."),
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus."),
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus.")),
+    react_1.default.createElement("p", null, "Nulla at urna diam."),
+    react_1.default.createElement("p", null, "Nulla at urna diam."),
+    react_1.default.createElement("h3", null, "Suspendisse a sodales nulla, sed semper nisi."),
+    react_1.default.createElement("p", null, "Proin tincidunt enim in felis aliquet, a ultricies purus bibendum."),
+    react_1.default.createElement("ul", null,
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus."),
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus."),
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus.")),
+    react_1.default.createElement("p", null, "Nulla at urna diam.")));
+const footer = (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(Button_1.default, { primary: true }, "OK"),
+    react_1.default.createElement(Button_1.default, null, "Cancel")));
+const Template = args => {
+    const [isOpen, setIsOpen] = react_1.default.useState(!!args.open || false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, { onClick: () => setIsOpen(true) }, "Click me"),
+        react_1.default.createElement(Drawer_1.default, { ...args, open: isOpen, onClose: () => setIsOpen(false), footer: args.footer }, content)));
+};
+const TemplateWithALotOfContent = args => {
+    const [isOpen, setIsOpen] = react_1.default.useState(!!args.open || false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, { onClick: () => setIsOpen(true) }, "Click me"),
+        react_1.default.createElement(Drawer_1.default, { ...args, open: isOpen, onClose: () => setIsOpen(false), footer: args.footer },
+            content,
+            content,
+            content,
+            content,
+            content)));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    open: false,
+};
+exports.Open = Template.bind({});
+exports.Open.args = {
+    open: true,
+};
+exports.WithTitle = Template.bind({});
+exports.WithTitle.args = {
+    open: true,
+    title: 'Drawer Title',
+};
+exports.WithTitleAndDescription = Template.bind({});
+exports.WithTitleAndDescription.args = {
+    open: true,
+    title: 'Drawer Title',
+    description: 'Drawer Description',
+};
+exports.Loading = Template.bind({});
+exports.Loading.args = {
+    open: true,
+    title: 'Drawer Title',
+    description: 'Drawer Description',
+    loading: true,
+};
+exports.WithFooter = Template.bind({});
+exports.WithFooter.args = {
+    open: true,
+    title: 'Drawer Title',
+    description: 'Drawer Description',
+    footer,
+};
+exports.SideLeft = Template.bind({});
+exports.SideLeft.args = {
+    open: true,
+    side: 'left',
+};
+exports.WithALotOfContent = TemplateWithALotOfContent.bind({});
+exports.WithALotOfContent.args = {
+    open: true,
+    title: 'Drawer Title',
+    description: 'Drawer Description',
+    footer,
+};
+//# sourceMappingURL=Drawer.stories.js.map

package/dist/components/ui/Drawer.stories.js.map

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

package/dist/components/ui/Drawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/Drawer.test.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Drawer_1 = tslib_1.__importDefault(require("./Drawer"));
+const Button_1 = tslib_1.__importDefault(require("./Button"));
+const content = (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
+    react_1.default.createElement("h3", null, "Suspendisse a sodales nulla, sed semper nisi."),
+    react_1.default.createElement("p", null, "Proin tincidunt enim in felis aliquet, a ultricies purus bibendum."),
+    react_1.default.createElement("ul", null,
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus."),
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus."),
+        react_1.default.createElement("li", null, "Quisque in ultrices lectus.")),
+    react_1.default.createElement("p", null, "Nulla at urna diam.")));
+const footer = (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(Button_1.default, { primary: true }, "Ok"),
+    react_1.default.createElement(Button_1.default, null, "Cancel")));
+beforeEach(() => {
+    window.IntersectionObserver = jest.fn(() => ({
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+        disconnect: jest.fn(),
+        takeRecords: jest.fn(),
+    }));
+});
+it('renders Drawer unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Drawer_1.default, { open: false, onClose: jest.fn() }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer open unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Drawer_1.default, { open: true, onClose: jest.fn() }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer with title unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Drawer_1.default, { open: true, onClose: jest.fn(), title: "Lorem ipsum" }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer with description unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Drawer_1.default, { open: true, onClose: jest.fn(), description: "Lorem ipsum dolor sit amet" }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer loading unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Drawer_1.default, { open: true, onClose: jest.fn(), loading: true }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer with footer unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Drawer_1.default, { open: true, onClose: jest.fn(), footer: footer }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer non closable unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Drawer_1.default, { open: true, onClose: jest.fn(), closable: false }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer side left unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Drawer_1.default, { open: true, onClose: jest.fn(), side: "left" }, content));
+    expect(container).toMatchSnapshot();
+});
+it('renders Drawer with custom widths unchanged', () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(Drawer_1.default, { open: true, onClose: jest.fn(), width: "100%", widthMd: "90%", widthLg: "80%" }, content));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=Drawer.test.js.map

package/dist/components/ui/Drawer.test.js.map

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

package/dist/components/ui/Message.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare const Message: () => JSX.Element;
+declare const message: {
+    error: {
+        (...data: any[]): void;
+        (message?: any, ...optionalParams: any[]): void;
+    };
+    info: {
+        (...data: any[]): void;
+        (message?: any, ...optionalParams: any[]): void;
+    };
+    success: {
+        (...data: any[]): void;
+        (message?: any, ...optionalParams: any[]): void;
+    };
+};
+export { Message };
+export default message;

package/dist/components/ui/Message.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Message = () => react_1.default.createElement("div", null, "Message");
+exports.Message = Message;
+const message = {
+    error: console.error,
+    info: console.info,
+    success: console.log,
+};
+exports.default = message;
+//# sourceMappingURL=Message.js.map

package/dist/components/ui/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/ui/Message.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAE1B,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,qDAAkB,CAAC;AAQhC,0BAAO;AANhB,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,IAAI,EAAE,OAAO,CAAC,IAAI;IAClB,OAAO,EAAE,OAAO,CAAC,GAAG;CACrB,CAAC;AAGF,kBAAe,OAAO,CAAC"}

package/dist/components/ui/Modal.css

@@ -0,0 +1,98 @@
+.memori-modal {
+    position: relative;
+    z-index: 60;
+}
+
+.memori-modal--backdrop {
+    position: fixed;
+    z-index: 40;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.memori-modal--container {
+    position: fixed;
+    z-index: 50;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+}
+
+.memori-modal--container-scrollable {
+    display: flex;
+    min-height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-modal--panel {
+    position: relative;
+    max-width: var(--memori-modal--width, 100%);
+    padding: 1.5rem;
+    border-radius: 10px;
+    margin-right: auto;
+    margin-left: auto;
+    background-color: #fff;
+    font-family: 'Exo 2', sans-serif;
+}
+
+@media (min-width: 768px) {
+    .memori-modal--panel {
+        max-width: var(--memori-modal--width-md, 80%);
+        padding: 2rem 3rem;
+    }
+}
+
+.memori-modal--footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1.5rem;
+}
+
+.memori-modal--footer button+button {
+    margin-left: 0.5em;
+}
+
+.memori-modal--close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5rem;
+}
+
+.ease-out {
+    transition-timing-function: ease-out;
+}
+
+.ease-in {
+    transition-timing-function: ease-in;
+}
+
+.duration-300 {
+    transition-duration: 300ms;
+}
+
+.duration-200 {
+    transition-duration: 200ms;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-100 {
+    opacity: 1;
+}
+
+.scale-95 {
+    transform: scale(0.95);
+}
+
+.scale-100 {
+    transform: scale(1);
+}