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

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Button from './Button';
+import Loading from '../icons/Loading';
+it('renders empty Button unchanged', () => {
+    const { container } = render(React.createElement(Button, null));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button unchanged', () => {
+    const { container } = render(React.createElement(Button, null, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button primary unchanged', () => {
+    const { container } = render(React.createElement(Button, { primary: true }, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button outlined unchanged', () => {
+    const { container } = render(React.createElement(Button, { outlined: true }, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button padded unchanged', () => {
+    const { container } = render(React.createElement(Button, { padded: true }, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button block unchanged', () => {
+    const { container } = render(React.createElement(Button, { block: true }, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button with icon unchanged', () => {
+    const { container } = render(React.createElement(Button, { icon: React.createElement(Loading, null) }, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button with icon only unchanged', () => {
+    const { container } = render(React.createElement(Button, { icon: React.createElement(Loading, null) }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button danger unchanged', () => {
+    const { container } = render(React.createElement(Button, { danger: true }, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button loading unchanged', () => {
+    const { container } = render(React.createElement(Button, { loading: true }, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button disabled unchanged', () => {
+    const { container } = render(React.createElement(Button, { disabled: true }, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button with title unchanged', () => {
+    const { container } = render(React.createElement(Button, { title: "Button title" }, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button square unchanged', () => {
+    const { container } = render(React.createElement(Button, { shape: "square" }, "Click me"));
+    expect(container).toMatchSnapshot();
+});
+it('renders Button circle unchanged', () => {
+    const { container } = render(React.createElement(Button, { shape: "circle", icon: React.createElement(Loading, null) }));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=Button.test.js.map

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

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

package/esm/components/ui/Card.css

@@ -0,0 +1,60 @@
+.memori-card {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    border-radius: 10px;
+    margin: 0 0 1rem;
+    background-color: #fff;
+    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
+}
+
+.memori-card--hoverable {
+    transition: box-shadow 0.3s;
+}
+
+.memori-card--hoverable:hover {
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
+}
+
+.memori-card--hoverable:focus,
+.memori-card--hoverable:focus-within {
+    outline-color: var(--memori-primary);
+}
+
+.memori-card--cover {
+    display: flex;
+    overflow: hidden;
+    height: 200px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px 10px 0 0;
+    background-color: #eee;
+}
+
+.memori-card--cover img {
+    min-width: 100%;
+    min-height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.memori-card--content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 1.5rem 1rem;
+}
+
+.memori-card--title {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.memori-card--description {
+    margin: 0;
+    color: #999;
+    font-size: 0.875rem;
+    font-weight: 400;
+}

package/esm/components/ui/Card.d.ts

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import './Card.css';
+export interface Props {
+    children?: React.ReactChild;
+    loading?: boolean;
+    className?: string;
+    title?: string;
+    description?: string;
+    cover?: JSX.Element | React.ReactNode | string;
+    hoverable?: boolean;
+}
+declare const Card: FC<Props>;
+export default Card;

package/esm/components/ui/Card.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import cx from 'classnames';
+import Spin from './Spin';
+import './Card.css';
+const Card = ({ loading = false, className, title, description, cover, hoverable = false, children, }) => (React.createElement("div", { className: cx('memori-card', className, {
+        'memori-card--loading': loading,
+        'memori-card--with-cover': cover,
+        'memori-card--hoverable': hoverable,
+    }) },
+    React.createElement(Spin, { spinning: loading },
+        cover && React.createElement("div", { className: "memori-card--cover" }, cover),
+        React.createElement("div", { className: "memori-card--content" },
+            title && React.createElement("h3", { className: "memori-card--title" }, title),
+            description && (React.createElement("p", { className: "memori-card--description" }, description)),
+            React.createElement("div", { className: "memori-card--children" }, children)))));
+export default Card;
+//# sourceMappingURL=Card.js.map

package/esm/components/ui/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/ui/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,YAAY,CAAC;AAYpB,MAAM,IAAI,GAAc,CAAC,EACvB,OAAO,GAAG,KAAK,EACf,SAAS,EACT,KAAK,EACL,WAAW,EACX,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,QAAQ,GACT,EAAE,EAAE,CAAC,CACJ,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;QACtC,sBAAsB,EAAE,OAAO;QAC/B,yBAAyB,EAAE,KAAK;QAChC,wBAAwB,EAAE,SAAS;KACpC,CAAC;IAEF,oBAAC,IAAI,IAAC,QAAQ,EAAE,OAAO;QACpB,KAAK,IAAI,6BAAK,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAO;QAC3D,6BAAK,SAAS,EAAC,sBAAsB;YAClC,KAAK,IAAI,4BAAI,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAM;YACxD,WAAW,IAAI,CACd,2BAAG,SAAS,EAAC,0BAA0B,IAAE,WAAW,CAAK,CAC1D;YACD,6BAAK,SAAS,EAAC,uBAAuB,IAAE,QAAQ,CAAO,CACnD,CACD,CACH,CACP,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/ui/Card.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './Card';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<Props>;
+export declare const WithTitleAndDescription: Story<Props>;
+export declare const Loading: Story<Props>;
+export declare const WithCover: Story<Props>;
+export declare const WithChildren: Story<Props>;
+export declare const Hoverable: Story<Props>;

package/esm/components/ui/Card.stories.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import Card from './Card';
+import Button from './Button';
+const meta = {
+    title: 'UI/Card',
+    component: Card,
+    argTypes: {
+        title: {
+            control: {
+                type: 'text',
+            },
+        },
+        description: {
+            control: {
+                type: 'text',
+            },
+        },
+        children: {
+            control: {
+                type: 'text',
+            },
+        },
+        className: {
+            control: {
+                type: 'text',
+            },
+        },
+        loading: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const Template = args => React.createElement(Card, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Card title',
+    loading: false,
+};
+export const WithTitleAndDescription = Template.bind({});
+WithTitleAndDescription.args = {
+    title: 'Card title',
+    description: 'Card description',
+    loading: false,
+};
+export const Loading = Template.bind({});
+Loading.args = {
+    title: 'Card title',
+    description: 'Card description',
+    loading: true,
+};
+export const WithCover = Template.bind({});
+WithCover.args = {
+    title: 'Card title',
+    description: 'Card description',
+    cover: React.createElement("img", { src: "https://picsum.photos/200/300", alt: "cover" }),
+    loading: false,
+};
+export const WithChildren = Template.bind({});
+WithChildren.args = {
+    title: 'Card title',
+    description: 'Card description',
+    children: (React.createElement("div", null,
+        React.createElement("p", null, "Some text"),
+        React.createElement(Button, { primary: true }, "Show more"))),
+    loading: false,
+};
+export const Hoverable = Template.bind({});
+Hoverable.args = {
+    title: 'Card title',
+    description: 'Card description',
+    loading: false,
+    hoverable: true,
+};
+//# sourceMappingURL=Card.stories.js.map

package/esm/components/ui/Card.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/components/ui/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,IAAe,MAAM,QAAQ,CAAC;AACrC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;aAChB;SACF;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC7B;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,QAAQ,GAAiB,IAAI,CAAC,EAAE,CAAC,oBAAC,IAAI,OAAK,IAAI,GAAI,CAAC;AAI1D,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzD,uBAAuB,CAAC,IAAI,GAAG;IAC7B,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;IAC/B,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;IAC/B,OAAO,EAAE,IAAI;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;IAC/B,KAAK,EAAE,6BAAK,GAAG,EAAC,+BAA+B,EAAC,GAAG,EAAC,OAAO,GAAG;IAC9D,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAClB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,CACR;QACE,2CAAgB;QAChB,oBAAC,MAAM,IAAC,OAAO,sBAAmB,CAC9B,CACP;IACD,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;IAC/B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;CAChB,CAAC"}

package/esm/components/ui/Card.test.d.ts

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

package/esm/components/ui/Card.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Card from './Card';
+it('renders Card unchanged', () => {
+    const { container } = render(React.createElement(Card, null));
+    expect(container).toMatchSnapshot();
+});
+it('renders Card with title unchanged', () => {
+    const { container } = render(React.createElement(Card, { title: "Card title" }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Card with description unchanged', () => {
+    const { container } = render(React.createElement(Card, { description: "Card description" }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Card with cover unchanged', () => {
+    const { container } = render(React.createElement(Card, { cover: React.createElement("img", { src: "#", alt: "" }) }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Card with children unchanged', () => {
+    const { container } = render(React.createElement(Card, null,
+        React.createElement("p", null, "Ciao")));
+    expect(container).toMatchSnapshot();
+});
+it('renders Card loading unchanged', () => {
+    const { container } = render(React.createElement(Card, { title: "Card title", loading: true }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Card with custom CSS class unchanged', () => {
+    const { container } = render(React.createElement(Card, { className: "lorem-ipsum" }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Card hoverable unchanged', () => {
+    const { container } = render(React.createElement(Card, { title: "lorem-ipsum", hoverable: true }));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=Card.test.js.map

package/esm/components/ui/Card.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.test.js","sourceRoot":"","sources":["../../../src/components/ui/Card.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;IAChC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,IAAI,OAAG,CAAC,CAAC;IACvC,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;IAC3C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAC,YAAY,GAAG,CAAC,CAAC;IAC1D,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;IACjD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,IAAI,IAAC,WAAW,EAAC,kBAAkB,GAAG,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;IAC3C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAE,6BAAK,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,EAAE,GAAG,GAAI,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;IAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,IAAI;QACH,sCAAW,CACN,CACR,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;IACxC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAC,YAAY,EAAC,OAAO,SAAG,CAAC,CAAC;IAClE,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;IACtD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,IAAI,IAAC,SAAS,EAAC,aAAa,GAAG,CAAC,CAAC;IAC/D,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;IAC1C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAC,aAAa,EAAC,SAAS,SAAG,CAAC,CAAC;IACrE,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC"}

package/esm/components/ui/Checkbox.css

@@ -0,0 +1,111 @@
+:root,
+#root {
+    --memori-primary: rgb(102, 103, 171);
+    --memori-primary-text: #fff;
+}
+
+.memori-checkbox {
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: baseline;
+    padding: 0;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.88);
+    cursor: pointer;
+    font-family: 'Exo 2', sans-serif;
+    font-size: 14px;
+    line-height: unset;
+    list-style: none;
+}
+
+.memori-checkbox--input-wrapper {
+    position: relative;
+    top: 0.2em;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.memori-checkbox--inner {
+    position: relative;
+    top: 0;
+    display: block;
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    border-top-color: rgb(217, 217, 217);
+    border-right-color: rgb(217, 217, 217);
+    border-bottom-color: rgb(217, 217, 217);
+    border-left-color: rgb(217, 217, 217);
+    background-color: #fff;
+    border-collapse: separate;
+    direction: ltr;
+    inset-inline-start: 0;
+    transition: all 0.3s;
+}
+
+.memori-checkbox--inner::after {
+    position: absolute;
+    top: 50%;
+    display: table;
+    width: 5.7142857142857135px;
+    height: 9.142857142857142px;
+    box-sizing: border-box;
+    border: 2px solid #fff;
+    border-top: 0;
+    border-inline-start: 0;
+    content: '';
+    inset-inline-start: 21.5%;
+    opacity: 0;
+    transform: rotate(45deg) scale(0) translate(-50%, -50%);
+    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+}
+
+.memori-checkbox--input {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    inset: 0;
+    opacity: 0;
+}
+
+.memori-checkbox--text {
+    padding-inline-end: 8px;
+    padding-inline-start: 8px;
+}
+
+.memori-checkbox--disabled {
+    cursor: not-allowed;
+}
+
+.memori-checkbox--disabled .memori-checkbox--input {
+    cursor: not-allowed;
+}
+
+.memori-checkbox--disabled .memori-checkbox--inner {
+    border-color: #d9d9d9;
+    background: rgba(0, 0, 0, 0.04);
+}
+
+.memori-checkbox--disabled .memori-checkbox--inner::after {
+    border-color: rgba(0, 0, 0, 0.25);
+}
+
+.memori-checkbox--disabled .memori-checkbox--text {
+    color: rgba(0, 0, 0, 0.25);
+}
+
+.memori-checkbox--input:checked:not(:disabled) + .memori-checkbox--inner {
+    z-index: 2;
+    border-color: var(--memori-primary);
+    background-color: var(--memori-primary);
+}
+
+.memori-checkbox--input:checked + .memori-checkbox--inner::after {
+    opacity: 1;
+    transform: rotate(45deg) scale(1) translate(-50%, -50%);
+    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}

package/esm/components/ui/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+import './Checkbox.css';
+export interface Props extends React.HTMLAttributes<HTMLInputElement> {
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+}
+declare const Checkbox: FC<Props>;
+export default Checkbox;

package/esm/components/ui/Checkbox.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import cx from 'classnames';
+import './Checkbox.css';
+const Checkbox = ({ label, className, disabled = false, checked, children, ...props }) => (React.createElement("label", { className: cx('memori-checkbox', className, {
+        'memori-checkbox--disabled': disabled,
+    }) },
+    React.createElement("span", { className: "memori-checkbox--input-wrapper" },
+        React.createElement("input", { type: "checkbox", ...props, disabled: disabled, defaultChecked: checked, className: "memori-checkbox--input" }),
+        React.createElement("span", { className: "memori-checkbox--inner" })),
+    React.createElement("span", { className: "memori-checkbox--text" }, label)));
+export default Checkbox;
+//# sourceMappingURL=Checkbox.js.map

package/esm/components/ui/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/ui/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AAQxB,MAAM,QAAQ,GAAc,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,+BACE,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,EAAE;QAC1C,2BAA2B,EAAE,QAAQ;KACtC,CAAC;IAEF,8BAAM,SAAS,EAAC,gCAAgC;QAC9C,+BACE,IAAI,EAAC,UAAU,KACX,KAAK,EACT,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,OAAO,EACvB,SAAS,EAAC,wBAAwB,GAClC;QACF,8BAAM,SAAS,EAAC,wBAAwB,GAAG,CACtC;IACP,8BAAM,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAQ,CAChD,CACT,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/components/ui/Checkbox.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './Checkbox';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<Props>;
+export declare const Checked: Story<Props>;
+export declare const Disabled: Story<Props>;
+export declare const DisabledChecked: Story<Props>;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import Checkbox from './Checkbox';
+const meta = {
+    title: 'UI/Checkbox',
+    component: Checkbox,
+    argTypes: {
+        label: {
+            control: {
+                type: 'text',
+            },
+        },
+        className: {
+            control: {
+                type: 'text',
+            },
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const Template = args => React.createElement(Checkbox, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Check me',
+};
+export const Checked = Template.bind({});
+Checked.args = {
+    label: 'Uncheck me',
+    checked: true,
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    label: 'Do not check me',
+    disabled: true,
+};
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+    label: 'Do not uncheck me',
+    checked: true,
+    disabled: true,
+};
+//# sourceMappingURL=Checkbox.stories.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,QAAmB,MAAM,YAAY,CAAC;AAE7C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,QAAQ;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,eAAe,IAAI,CAAC;AAEpB,MAAM,QAAQ,GAAiB,IAAI,CAAC,EAAE,CAAC,oBAAC,QAAQ,OAAK,IAAI,GAAI,CAAC;AAI9D,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,IAAI;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,iBAAiB;IACxB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,mBAAmB;IAC1B,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,IAAI;CACf,CAAC"}

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Checkbox from './Checkbox';
+it('renders Checkbox unchanged', () => {
+    const { container } = render(React.createElement(Checkbox, { label: "Check me" }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Checkbox checked unchanged', () => {
+    const { container } = render(React.createElement(Checkbox, { label: "Check me", checked: true }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Checkbox disabled unchanged', () => {
+    const { container } = render(React.createElement(Checkbox, { label: "Check me", disabled: true }));
+    expect(container).toMatchSnapshot();
+});
+it('renders Checkbox checked and disabled unchanged', () => {
+    const { container } = render(React.createElement(Checkbox, { label: "Check me", checked: true, disabled: true }));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=Checkbox.test.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;IACpC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,QAAQ,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,MAAM,CAAC,oBAAC,QAAQ,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,MAAM,CAAC,oBAAC,QAAQ,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,MAAM,CAAC,oBAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,QAAC,QAAQ,SAAG,CAAC,CAAC;IAC7E,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC"}