venice-ui 1.0.0 → 1.0.2

package/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["@typescript-eslint", "react", "prettier"],
+  "rules": {
+    "@typescript-eslint/rule-name": "error",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error"
+  }
+}

package/.prettierignore

@@ -0,0 +1,10 @@
+_src/**
+.storybook
+*.DS_Store
+tsconfig.json
+*.snap
+*.mdx
+*.svg
+*.hbs
+*.mdx
+*.jpg

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all"  
+}

package/README.md

@@ -1,2 +1,2 @@
-# venice-ui
-cl for pixelcorn pp
+# venice-ui
+cl for pixelcorn pp

package/dist/cjs/Theme/Theme.d.ts

@@ -0,0 +1,45 @@
+export declare const Theme: {
+    colors: {
+        primary: string;
+        text: string;
+        disableText: string;
+        disableBackground: string;
+        white: string;
+        black: string;
+        gray_1: string;
+        overlayer: string;
+    };
+    fontSize: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    lineHeight: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    padding: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+    };
+    zIndex: {
+        modalOverlayer: number;
+    };
+    borderRadius: {
+        s: string;
+        m: string;
+        l: string;
+    };
+    shadow: {
+        m: string;
+    };
+};

package/dist/cjs/Theme/Theme.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Theme = void 0;
+exports.Theme = {
+    colors: {
+        primary: "#4c95c5",
+        text: '#333333',
+        disableText: "#cccccc",
+        disableBackground: '#dddddd',
+        white: "#ffffff",
+        black: "#333333",
+        gray_1: "#b7b7b7",
+        overlayer: 'rgba(255,255,255,0.2)'
+    },
+    fontSize: {
+        xs: "12px",
+        s: "14px",
+        m: "16px",
+        l: "22px",
+        xl: "32px",
+    },
+    lineHeight: {
+        xs: "14px",
+        s: "16px",
+        m: "18px",
+        l: "24px",
+        xl: "36px",
+    },
+    padding: {
+        xs: "2px",
+        s: "4px",
+        m: "8px",
+        l: "16px",
+        xl: "32px",
+        xxl: '48px',
+    },
+    zIndex: {
+        modalOverlayer: 1000,
+    },
+    borderRadius: {
+        s: '2px',
+        m: '4px',
+        l: '8px',
+    },
+    shadow: {
+        m: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);'
+    }
+};
+//# sourceMappingURL=Theme.js.map

package/dist/cjs/Theme/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../../src/Theme/Theme.ts"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAAG;IACnB,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,SAAS;QAC5B,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,uBAAuB;KACnC;IAED,QAAQ,EAAE;QACR,EAAE,EAAE,MAAM;QACV,CAAC,EAAE,MAAM;QACT,CAAC,EAAE,MAAM;QACT,CAAC,EAAE,MAAM;QACT,EAAE,EAAE,MAAM;KACX;IACD,UAAU,EAAE;QACV,EAAE,EAAE,MAAM;QACV,CAAC,EAAE,MAAM;QACT,CAAC,EAAE,MAAM;QACT,CAAC,EAAE,MAAM;QACT,EAAE,EAAE,MAAM;KACX;IAED,OAAO,EAAE;QACP,EAAE,EAAE,KAAK;QACT,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,MAAM;QACT,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,MAAM;KACZ;IACD,MAAM,EAAC;QACL,cAAc,EAAE,IAAI;KACrB;IACD,YAAY,EAAE;QACZ,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,KAAK;KACT;IACD,MAAM,EAAC;QACL,CAAC,EAAE,iEAAiE;KACrE;CACF,CAAC"}

package/dist/cjs/components/Aligment/Aligment.stories.d.ts

@@ -0,0 +1,7 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<import("styled-components").StyledComponent<"div", any, import("./Aligment.styles").IAligmentProps, never>>;
+export default _default;
+export declare const Default: ComponentStory<import("styled-components").StyledComponent<"div", any, import("./Aligment.styles").IAligmentProps, never>>;
+export declare const Column: ComponentStory<import("styled-components").StyledComponent<"div", any, import("./Aligment.styles").IAligmentProps, never>>;
+export declare const WithColor: ComponentStory<import("styled-components").StyledComponent<"div", any, import("./Aligment.styles").IAligmentProps, never>>;
+export declare const WithPadding: ComponentStory<import("styled-components").StyledComponent<"div", any, import("./Aligment.styles").IAligmentProps, never>>;

package/dist/cjs/components/Aligment/Aligment.stories.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithPadding = exports.WithColor = exports.Column = exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const Aligment_styles_1 = require("./Aligment.styles");
+const example_1 = require("../../example");
+const Theme_1 = require("../../Theme/Theme");
+exports.default = {
+    title: 'Layout/Aligment',
+    component: Aligment_styles_1.Aligment,
+    argTypes: {
+        width: { control: 'text', defaultValue: '100%', default: '100%' },
+        direction: {
+            options: ['row', 'row-reverse', 'column', 'column-reverse'],
+            control: 'select',
+        },
+        align: {
+            options: [
+                'stretch',
+                'flex-start',
+                'flex-end',
+                'center',
+                'baseline',
+                'first baseline',
+                'last baseline',
+                'start',
+                'end',
+                'self-start',
+                'self-end',
+            ],
+            control: 'select',
+        },
+        justify: {
+            options: [
+                'flex-start',
+                'flex-end',
+                'center',
+                'space-between',
+                'space-around',
+                'space-evenly',
+                'start',
+                'end',
+                'left',
+            ],
+            control: 'select',
+        },
+        wrap: {
+            options: ['wrap', 'nowrap', 'wrap-reverse'],
+            control: 'select',
+        },
+        backgroundColor: {
+            control: { type: 'color' },
+        },
+        vPadding: { control: 'text' },
+        hPadding: { control: 'text' },
+    },
+};
+const Template = (args) => (react_1.default.createElement(Aligment_styles_1.Aligment, Object.assign({}, args),
+    react_1.default.createElement(example_1.ExmpleBlockWrapper, null,
+        react_1.default.createElement(example_1.ExmpleBlock, { width: "20px", height: "40px" }, "1")),
+    react_1.default.createElement(example_1.ExmpleBlockWrapper, null,
+        react_1.default.createElement(example_1.ExmpleBlock, { width: "60px", height: "30px" }, "2")),
+    react_1.default.createElement(example_1.ExmpleBlockWrapper, null,
+        react_1.default.createElement(example_1.ExmpleBlock, { width: "30px", height: "60px" }, "3")),
+    react_1.default.createElement(example_1.ExmpleBlockWrapper, null,
+        react_1.default.createElement(example_1.ExmpleBlock, { width: "40px", height: "40px" }, "4"))));
+exports.Default = Template.bind({});
+exports.Default.args = {
+    direction: 'row',
+    align: 'center',
+    justify: 'space-between',
+    wrap: 'wrap',
+    backgroundColor: 'transparent',
+    vPadding: '0px',
+    hPadding: '0px',
+};
+exports.Column = Template.bind({});
+exports.Column.args = {
+    direction: 'column',
+    align: 'center',
+    justify: 'space-between',
+    wrap: 'wrap',
+    backgroundColor: 'transparent',
+    vPadding: '0px',
+    hPadding: '0px',
+};
+exports.WithColor = Template.bind({});
+exports.WithColor.args = {
+    direction: 'row',
+    align: 'center',
+    justify: 'space-between',
+    wrap: 'wrap',
+    backgroundColor: Theme_1.Theme.colors.primary,
+    vPadding: '0px',
+    hPadding: '0px',
+};
+exports.WithPadding = Template.bind({});
+exports.WithPadding.args = {
+    direction: 'row',
+    align: 'center',
+    justify: 'space-between',
+    wrap: 'wrap',
+    backgroundColor: Theme_1.Theme.colors.primary,
+    vPadding: Theme_1.Theme.padding.xl,
+    hPadding: Theme_1.Theme.padding.xl,
+};
+//# sourceMappingURL=Aligment.stories.js.map

package/dist/cjs/components/Aligment/Aligment.stories.js.map

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

package/dist/cjs/components/Aligment/Aligment.styles.d.ts

@@ -0,0 +1,11 @@
+export interface IAligmentProps {
+    direction?: string;
+    justify?: string;
+    align?: string;
+    width?: string;
+    wrap?: string;
+    vPadding?: string;
+    hPadding?: string;
+    backgroundColor?: string;
+}
+export declare const Aligment: import("styled-components").StyledComponent<"div", any, IAligmentProps, never>;

package/dist/cjs/components/Aligment/Aligment.styles.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Aligment = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Aligment = styled_components_1.default.div `
+  box-sizing: border-box;
+  display: flex;
+  width: ${p => p.width ? p.width : '100%'};
+  flex-direction: ${p => p.direction ? p.direction : 'row'};
+  justify-content: ${p => p.justify ? p.justify : 'space-between'};
+  align-items: ${p => p.align ? p.align : 'center'};
+  flex-wrap: ${p => p.wrap ? p.wrap : 'wrap'};
+  padding: ${p => p.vPadding ? p.vPadding : '0'} ${p => p.hPadding ? p.hPadding : '0'};
+  background-color: ${p => p.backgroundColor ? p.backgroundColor : 'transparent'}
+`;
+//# sourceMappingURL=Aligment.styles.js.map

package/dist/cjs/components/Aligment/Aligment.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Aligment.styles.js","sourceRoot":"","sources":["../../../../src/components/Aligment/Aligment.styles.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAuC;AAY1B,QAAA,QAAQ,GAAG,2BAAM,CAAC,GAAG,CAAgB;;;WAGvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;oBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;qBACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe;iBAChD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;eACnC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM;aAC/B,CAAC,CAAA,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG;sBAC7D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa;CAC/E,CAAC"}

package/dist/cjs/components/Aligment/index.d.ts

@@ -0,0 +1 @@
+export { Aligment } from './Aligment.styles';

package/dist/cjs/components/Aligment/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Aligment = void 0;
+var Aligment_styles_1 = require("./Aligment.styles");
+Object.defineProperty(exports, "Aligment", { enumerable: true, get: function () { return Aligment_styles_1.Aligment; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Aligment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Aligment/index.ts"],"names":[],"mappings":";;;AAAA,qDAA4C;AAAnC,2GAAA,QAAQ,OAAA"}

package/dist/cjs/components/Button/Button.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export interface IButtonProps {
+    text: string;
+    mode?: string;
+    size?: string;
+    right?: boolean;
+    left?: boolean;
+    onClick: () => void;
+}
+export declare const Button: FC<IButtonProps>;

package/dist/cjs/components/Button/Button.js

@@ -0,0 +1,13 @@
+"use strict";
+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 Button_styles_1 = require("./Button.styles");
+const Button = ({ text, mode = 'primary', size = 'regular', right = false, left = false, onClick, }) => {
+    return (react_1.default.createElement(Button_styles_1.ButtonElement, { mode: mode, size: size, right: right, left: left, onClick: onClick }, text));
+};
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

package/dist/cjs/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAiC;AACjC,mDAA+C;AAUxC,MAAM,MAAM,GAAqB,CAAC,EACvC,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,KAAK,EACb,IAAI,GAAG,KAAK,EACZ,OAAO,GACR,EAAE,EAAE;IACH,OAAO,CACL,8BAAC,6BAAa,IACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,IAEf,IAAI,CACS,CACjB,CAAA;AACH,CAAC,CAAA;AAnBY,QAAA,MAAM,UAmBlB"}

package/dist/cjs/components/Button/Button.stories.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./Button").IButtonProps>>;
+export default _default;
+export declare const Default: ComponentStory<React.FC<import("./Button").IButtonProps>>;
+export declare const Inverse: ComponentStory<React.FC<import("./Button").IButtonProps>>;
+export declare const Ghost: ComponentStory<React.FC<import("./Button").IButtonProps>>;

package/dist/cjs/components/Button/Button.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ghost = exports.Inverse = exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const Button_1 = require("./Button");
+exports.default = {
+    title: 'Elements/Button',
+    component: Button_1.Button,
+    argTypes: {
+        text: { control: 'text' },
+        mode: {
+            options: ['primary', 'inverse', 'ghost'],
+            control: 'select',
+        },
+        size: {
+            options: ['regular', 'small', 'flat'],
+            control: 'select',
+        },
+        right: { control: 'boolean' },
+        left: { control: 'boolean' },
+    },
+    args: {
+        text: 'Click me',
+    },
+};
+const Template = (args) => react_1.default.createElement(Button_1.Button, Object.assign({}, args));
+exports.Default = Template.bind({});
+exports.Default.args = {
+    size: 'regular',
+    mode: 'primary',
+    left: false,
+    right: false,
+};
+exports.Inverse = Template.bind({});
+exports.Inverse.args = {
+    size: 'regular',
+    mode: 'inverse',
+    left: false,
+    right: false,
+};
+exports.Ghost = Template.bind({});
+exports.Ghost.args = {
+    size: 'regular',
+    mode: 'ghost',
+    left: false,
+    right: false,
+};
+//# sourceMappingURL=Button.stories.js.map

package/dist/cjs/components/Button/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAGzB,qCAAiC;AAEjC,kBAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,eAAM;IACjB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACxC,OAAO,EAAE,QAAQ;SAClB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC;YACrC,OAAO,EAAE,QAAQ;SAClB;QACD,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAG7B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;KACjB;CAC8B,CAAA;AAEjC,MAAM,QAAQ,GAAkC,CAAC,IAAI,EAAE,EAAE,CAAC,8BAAC,eAAM,oBAAK,IAAI,EAAG,CAAA;AAEhE,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,eAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,KAAK;CACb,CAAA;AAEY,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,eAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,KAAK;CACb,CAAA;AAEY,QAAA,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACtC,aAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,KAAK;CACb,CAAA"}

package/dist/cjs/components/Button/Button.styles.d.ts

@@ -0,0 +1,8 @@
+interface IButtonElement {
+    mode: string;
+    size: string;
+    right: boolean;
+    left: boolean;
+}
+export declare const ButtonElement: import("styled-components").StyledComponent<"button", any, IButtonElement, never>;
+export {};

package/dist/cjs/components/Button/Button.styles.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonElement = void 0;
+const polished_1 = require("polished");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme/Theme");
+exports.ButtonElement = styled_components_1.default.button `
+  transition: 300ms;
+  border-radius: ${Theme_1.Theme.borderRadius.s};
+  overflow: hidden;
+  cursor: pointer;
+  box-sizing: border-box;
+  margin-left: ${(p) => (p.right ? Theme_1.Theme.padding.m : '0')};
+  margin-right: ${(p) => (p.left ? Theme_1.Theme.padding.m : '0')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+
+  ${(p) => p.mode === 'primary' &&
+    `background-color: ${Theme_1.Theme.colors.primary};
+    color: ${Theme_1.Theme.colors.white};
+    border: 1px solid rgba(0,0,0,0.15);`}
+  ${(p) => p.mode === 'inverse' &&
+    `background-color: ${Theme_1.Theme.colors.white};
+    color: ${Theme_1.Theme.colors.primary};
+    border: 1px solid ${Theme_1.Theme.colors.primary};
+    `}
+  ${(p) => p.mode === 'ghost' &&
+    `background-color:transparent;
+    color: ${Theme_1.Theme.colors.primary};
+    border:none;`}
+  ${(p) => p.size === 'regular' &&
+    `font-size: ${Theme_1.Theme.fontSize.m};
+    line-height: ${Theme_1.Theme.lineHeight.m};
+    padding: ${Theme_1.Theme.padding.m} ${Theme_1.Theme.padding.l};`}
+  ${(p) => p.size === 'small' &&
+    `font-size: ${Theme_1.Theme.fontSize.s};
+    line-height: ${Theme_1.Theme.lineHeight.s};
+    padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};`}
+  ${(p) => p.size === 'flat' &&
+    `font-size: ${Theme_1.Theme.fontSize.m};
+    line-height: ${Theme_1.Theme.lineHeight.m};
+    padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.s};`}
+  &:hover {
+    transition: 300ms;
+    ${(p) => p.mode === 'primary' &&
+    `background-color: ${(0, polished_1.lighten)(0.1, Theme_1.Theme.colors.primary)};`}
+    ${(p) => p.mode === 'inverse' &&
+    `background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)}`};
+    ${(p) => p.mode === 'ghost' && `color: ${(0, polished_1.lighten)(0.2, Theme_1.Theme.colors.primary)};`}
+  }
+
+  &.disable,
+  button[disabled] {
+    color: ${Theme_1.Theme.colors.disableText};
+    cursor: default;
+    &:hover {
+      color: ${Theme_1.Theme.colors.disableBackground};
+    }
+  }
+`;
+//# sourceMappingURL=Button.styles.js.map

package/dist/cjs/components/Button/Button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.styles.tsx"],"names":[],"mappings":";;;;;;AAAA,uCAAkC;AAClC,0EAAsC;AACtC,6CAAyC;AAS5B,QAAA,aAAa,GAAG,2BAAM,CAAC,MAAM,CAAgB;;mBAEvC,aAAK,CAAC,YAAY,CAAC,CAAC;;;;iBAItB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;kBACvC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;;;;;;IAMrD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,SAAS;IACpB,qBAAqB,aAAK,CAAC,MAAM,CAAC,OAAO;aAChC,aAAK,CAAC,MAAM,CAAC,KAAK;wCACS;IACpC,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,SAAS;IACpB,qBAAqB,aAAK,CAAC,MAAM,CAAC,KAAK;aAC9B,aAAK,CAAC,MAAM,CAAC,OAAO;wBACT,aAAK,CAAC,MAAM,CAAC,OAAO;KACvC;IACD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,OAAO;IAClB;aACS,aAAK,CAAC,MAAM,CAAC,OAAO;iBAChB;IACb,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,SAAS;IACpB,cAAc,aAAK,CAAC,QAAQ,CAAC,CAAC;mBACf,aAAK,CAAC,UAAU,CAAC,CAAC;eACtB,aAAK,CAAC,OAAO,CAAC,CAAC,IAAI,aAAK,CAAC,OAAO,CAAC,CAAC,GAAG;IAChD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,OAAO;IAClB,cAAc,aAAK,CAAC,QAAQ,CAAC,CAAC;mBACf,aAAK,CAAC,UAAU,CAAC,CAAC;eACtB,aAAK,CAAC,OAAO,CAAC,CAAC,IAAI,aAAK,CAAC,OAAO,CAAC,CAAC,GAAG;IAChD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,MAAM;IACjB,cAAc,aAAK,CAAC,QAAQ,CAAC,CAAC;mBACf,aAAK,CAAC,UAAU,CAAC,CAAC;eACtB,aAAK,CAAC,OAAO,CAAC,CAAC,IAAI,aAAK,CAAC,OAAO,CAAC,CAAC,GAAG;;;MAG9C,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,SAAS;IACpB,qBAAqB,IAAA,kBAAO,EAAC,GAAG,EAAE,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;MAC1D,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,SAAS;IACpB,qBAAqB,IAAA,kBAAO,EAAC,GAAG,EAAE,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;MACzD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,UAAU,IAAA,kBAAO,EAAC,GAAG,EAAE,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;aAK9D,aAAK,CAAC,MAAM,CAAC,WAAW;;;eAGtB,aAAK,CAAC,MAAM,CAAC,iBAAiB;;;CAG5C,CAAA"}

package/dist/cjs/components/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/cjs/components/Button/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Button/index.ts"],"names":[],"mappings":";;;AAAA,mCAA+B;AAAvB,gGAAA,MAAM,OAAA"}

package/dist/cjs/components/Icons/Icon.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface IIconActionProps {
+    name: string;
+    size?: number;
+    color?: string;
+    bgColor?: boolean;
+    onClick?: () => void;
+}
+export declare const Icon: FC<IIconActionProps>;

package/dist/cjs/components/Icons/Icon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const react_1 = __importDefault(require("react"));
+const Theme_1 = require("../../Theme/Theme");
+const Icon_styles_1 = require("./Icon.styles");
+const IconsPath_1 = require("./IconsPath");
+const Icon = ({ size = 24, name, color = Theme_1.Theme.colors.text, bgColor, onClick, }) => {
+    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: onClick, bgColor: bgColor },
+        react_1.default.createElement("svg", { width: size, height: size, viewBox: '0 0 48 48', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
+            react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: color }))));
+};
+exports.Icon = Icon;
+//# sourceMappingURL=Icon.js.map

package/dist/cjs/components/Icons/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/Icons/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAiC;AACjC,6CAAyC;AACzC,+CAA2C;AAC3C,2CAAuC;AAShC,MAAM,IAAI,GAAyB,CAAC,EACzC,IAAI,GAAG,EAAE,EACT,IAAI,EACJ,KAAK,GAAG,aAAK,CAAC,MAAM,CAAC,IAAI,EACzB,OAAO,EACP,OAAO,GACR,EAAE,EAAE;IACH,OAAO,CACL,8BAAC,yBAAW,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO;QAC7C,uCACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,WAAW,EACpB,mBAAmB,EAAC,eAAe,EACnC,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,IAAI,EAAE,IAAI;YAEV,wCAAM,CAAC,EAAE,qBAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,GAAI,CACrC,CACM,CACf,CAAA;AACH,CAAC,CAAA;AAtBY,QAAA,IAAI,QAsBhB"}

package/dist/cjs/components/Icons/Icon.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./Icon").IIconActionProps>>;
+export default _default;
+export declare const Default: ComponentStory<React.FC<import("./Icon").IIconActionProps>>;
+export declare const Size: ComponentStory<React.FC<import("./Icon").IIconActionProps>>;
+export declare const Color: ComponentStory<React.FC<import("./Icon").IIconActionProps>>;
+export declare const ActionDefault: ComponentStory<React.FC<import("./Icon").IIconActionProps>>;
+export declare const ActionColor: ComponentStory<React.FC<import("./Icon").IIconActionProps>>;

package/dist/cjs/components/Icons/Icon.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionColor = exports.ActionDefault = exports.Color = exports.Size = exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("./Icon");
+const Theme_1 = require("../../Theme/Theme");
+const Aligment_1 = require("../Aligment");
+exports.default = {
+    title: 'Elements/Icon',
+    component: Icon_1.Icon,
+    argTypes: {
+        name: {
+            options: ['person', 'menu', 'remove', 'add', 'close'],
+            control: 'select',
+        },
+        size: { control: 'number' },
+        color: { control: { type: 'color' } },
+        bgColor: { control: 'boolean' },
+    },
+    args: {
+        onClick: undefined
+    }
+};
+const Template = (args) => (react_1.default.createElement(Icon_1.Icon, Object.assign({}, args)));
+exports.Default = Template.bind({});
+exports.Default.args = {
+    name: 'person',
+    size: 48
+};
+exports.Size = Template.bind({});
+exports.Size.args = {
+    name: 'person',
+    size: 24
+};
+exports.Color = Template.bind({});
+exports.Color.args = {
+    name: 'person',
+    size: 48,
+    color: Theme_1.Theme.colors.primary
+};
+exports.ActionDefault = Template.bind({});
+exports.ActionDefault.args = {
+    name: 'person',
+    size: 48,
+    onClick: () => console.log('click')
+};
+const DarkTemplate = (args) => (react_1.default.createElement(Aligment_1.Aligment, { backgroundColor: Theme_1.Theme.colors.black },
+    react_1.default.createElement(Icon_1.Icon, Object.assign({}, args))));
+exports.ActionColor = DarkTemplate.bind({});
+exports.ActionColor.args = {
+    name: 'person',
+    size: 48,
+    bgColor: true,
+    color: Theme_1.Theme.colors.white,
+    onClick: () => console.log('click')
+};
+//# sourceMappingURL=Icon.stories.js.map

package/dist/cjs/components/Icons/Icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../../src/components/Icons/Icon.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAGzB,iCAA6B;AAC7B,6CAAyC;AACzC,0CAAsC;AAEtC,kBAAe;IACb,KAAK,EAAE,eAAe;IAEtB,SAAS,EAAE,WAAI;IACf,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC;YACrD,OAAO,EAAE,QAAQ;SAClB;QACD,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;QACrC,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAChC;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;KACnB;CAC4B,CAAA;AAE/B,MAAM,QAAQ,GAAgC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtD,8BAAC,WAAI,oBAAK,IAAI,EAAG,CAClB,CAAA;AAEY,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,eAAO,CAAC,IAAI,GAAE;IACZ,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,EAAE;CACT,CAAA;AACY,QAAA,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrC,YAAI,CAAC,IAAI,GAAE;IACT,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,EAAE;CACT,CAAA;AACY,QAAA,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACtC,aAAK,CAAC,IAAI,GAAE;IACV,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,aAAK,CAAC,MAAM,CAAC,OAAO;CAC5B,CAAA;AACY,QAAA,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,qBAAa,CAAC,IAAI,GAAE;IAClB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,GAAE,EAAE,CAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;CAClC,CAAA;AACD,MAAM,YAAY,GAAgC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC1D,8BAAC,mBAAQ,IAAC,eAAe,EAAE,aAAK,CAAC,MAAM,CAAC,KAAK;IAAE,8BAAC,WAAI,oBAAK,IAAI,EAAG,CAAW,CAC5E,CAAA;AACY,QAAA,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAChD,mBAAW,CAAC,IAAI,GAAE;IAChB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,IAAI;IACb,KAAK,EAAC,aAAK,CAAC,MAAM,CAAC,KAAK;IACxB,OAAO,EAAE,GAAE,EAAE,CAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;CAClC,CAAA"}

package/dist/cjs/components/Icons/Icon.styles.d.ts

@@ -0,0 +1,6 @@
+interface IIconElementProps {
+    bgColor?: boolean;
+    onClick?: () => void;
+}
+export declare const IconElement: import("styled-components").StyledComponent<"div", any, IIconElementProps, never>;
+export {};