venice-ui 1.0.0 → 1.0.1

package/.circleci/config.yml

@@ -0,0 +1,36 @@
+version: 2
+jobs:
+  build-and-deploy:
+    name: Build bundle
+    docker:
+      - image: "circleci/node:latest"
+    steps: 
+        - checkout
+        - run: "npm run clean"
+        - run: "npm install"
+        - run: "npm run build"
+        - run: 
+            name: Authenticate with registry
+            command:  npm set //registry.npmjs.org/:_authToken=$NPM_TOKEN
+        - run:
+            name: Publish to NPM
+            command:  "npm publish"
+        - run: "echo \"WE'RE ONLINE\""
+  
+workflows:
+  version: 2
+  deploy:
+    jobs:
+      - build-and-deploy:
+          filters:
+            branches:
+              only:
+                - main
+  
+
+
+
+
+      
+      
+

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/.storybook/PCTheme.js

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming';
+import logoUrl from "./public/pc_logo.png"
+
+export default create({
+  base: 'light',
+  brandTitle: 'PixelCorn',
+  brandUrl: 'https://pixelcorn.pl',
+  brandImage: logoUrl,
+  brandTarget: '_self',
+});

package/.storybook/main.js

@@ -1,12 +1,13 @@
 module.exports = {
   "stories": [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+    "@storybook/addon-interactions",
+    '@storybook/addon-a11y'
   ],
-  "framework": "@storybook/react"
+  "framework": "@storybook/react",
 }

package/.storybook/manager.js

@@ -0,0 +1,17 @@
+import { addons } from '@storybook/addons';
+import pixelcornTheme from './PCTheme';
+
+addons.setConfig({
+  theme: pixelcornTheme,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  showToolbar: true,
+  toolbar: {
+    title:{hidden: false},
+    zoom: {hidden: false},
+    eject: {hidden: false},
+    copy: {hidden: false},
+    fullscreen: {hidden: false}
+  }
+});

package/.storybook/preview-head.html

@@ -0,0 +1,18 @@
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+
+body, html, .sbdocs-wrapper{
+  margin:0!important;
+  padding:0!important;
+  font-family: 'Lato', sans-serif;
+  background-color:#eeeeee;
+}
+.sbdocs-wrapper div:first-child{
+  max-width:none;
+}
+#docs-root{
+  font-family: 'Lato', sans-serif;
+  
+}
+
+</style>

package/.storybook/preview.js

@@ -1,3 +1,5 @@
+import { addDecorator } from "@storybook/react";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -6,4 +8,22 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+};
+
+export const decorators = [
+  (Story) => (
+    <div
+      style={{
+
+        width:'100%',
+        padding:"0",
+        margin:'0',
+        minHeight: 250
+      }}
+    >
+      <Story />
+    </div>
+  ),
+];
+
+

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