techsbcn-storybook 0.1.7 → 0.2.0

package/dist/components/fields/ButtonComponent/ButtonComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './ButtonComponent.scss';
+export interface ButtonComponentProps {
+    className?: string;
+    label?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    onClick?: () => void;
+    loading?: boolean;
+    form?: string;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+}
+export declare const ButtonComponent: React.FC<ButtonComponentProps>;

package/dist/components/fields/TextFieldComponent/TextFieldComponent.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import './TextFieldComponent.scss';
+export declare type InputType = 'text' | 'radio' | 'checkbox' | 'textarea' | 'submit' | 'date' | 'hidden' | 'number' | 'range' | 'password' | 'time' | 'file';
+interface TextFieldComponentProps {
+    id?: string;
+    label?: string;
+    name?: string;
+    value?: string | number;
+    className?: string;
+    type?: InputType;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    minNumber?: number;
+    maxNumber?: number;
+    error?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    helperText?: string;
+    textFieldRef?: any;
+    inputRef?: React.Ref<any>;
+    autoComplete?: string;
+    multiline?: boolean;
+    rows?: number;
+    maxLength?: number;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    step?: number | string;
+}
+declare const TextFieldComponent: React.FC<TextFieldComponentProps>;
+export default TextFieldComponent;

package/dist/components/forms/ChangePasswordForm.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface ChangePasswordFormProps {
+    onClick: (data: any) => void;
+    loading: boolean;
+    topComponent?: React.ReactNode;
+    bottomComponent?: React.ReactNode;
+    requiredText: {
+        requiredTextPassword: string;
+        requiredTextSamePassword: string;
+    };
+    valuesText: {
+        buttonText: string;
+        text1: string;
+        placeholder1?: string;
+        text2: string;
+        placeholder2?: string;
+    };
+}
+declare const ChangePasswordForm: React.FC<ChangePasswordFormProps>;
+export default ChangePasswordForm;

package/dist/components/forms/LoginForm.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface LoginFormProps {
+    onClick: (data: any) => void;
+    topComponent?: React.ReactNode;
+    bottomComponent?: React.ReactNode;
+    loading: boolean;
+    requiredText: {
+        requiredTextMail: string;
+        requiredTextPassword: string;
+    };
+    valuesText: {
+        buttonText: string;
+        text1: string;
+        placeholder1?: string;
+        text2: string;
+        placeholder2?: string;
+    };
+}
+declare const LoginForm: React.FC<LoginFormProps>;
+export default LoginForm;

package/dist/components/forms/ResetPasswordForm.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface resetPasswordFormProps {
+    onClick: (data: any) => void;
+    loading: boolean;
+    topComponent?: React.ReactNode;
+    bottomComponent?: React.ReactNode;
+    requiredText: {
+        requiredTextMail: string;
+    };
+    valuesText: {
+        buttonText: string;
+        text: string;
+        placeholder?: string;
+    };
+}
+declare const ResetPasswordForm: React.FC<resetPasswordFormProps>;
+export default ResetPasswordForm;

package/dist/components/wrappers/PublicFormWrapper/PublicFormWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './PublicFormWrapper.scss';
+interface PublicFormWrapperProps {
+    className?: string;
+}
+declare const PublicFormWrapper: React.FC<PublicFormWrapperProps>;
+export default PublicFormWrapper;

package/dist/index.d.ts

@@ -1,2 +1,6 @@
-export * from './stories/button/Button';
-export * from './stories/thing/Thing';
+export * from './components/wrappers/PublicFormWrapper/PublicFormWrapper';
+export * from './components/fields/ButtonComponent/ButtonComponent';
+export * from './components/fields/TextFieldComponent/TextFieldComponent';
+export * from './components/forms/LoginForm';
+export * from './components/forms/ChangePasswordForm';
+export * from './components/forms/ResetPasswordForm';

package/dist/stories/button/Button.stories.d.ts

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react';
-import { ButtonProps } from './Button';
 declare const meta: Meta;
 export default meta;
-export declare const Default: Story<ButtonProps>;
-export declare const Primary: Story<ButtonProps>;
-export declare const Secondary: Story<ButtonProps>;
+export declare const Default: Story<import("@storybook/react").Args>;
+export declare const LoginButton: Story<import("@storybook/react").Args>;
+export declare const ModalCancel: Story<import("@storybook/react").Args>;
+export declare const Loading: Story<import("@storybook/react").Args>;

package/dist/techsbcn-storybook.cjs.development.js

@@ -4,7 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
+require('@mui/material');
+var _ = require('@mui/material/');
+require('yup');
+require('react-hook-form');
+require('@hookform/resolvers/yup');
+require('@mui/icons-material');
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -33,27 +40,29 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".btn.primary {\n  background-color: blue;\n  color: white;\n}\n.btn.secondary {\n  background-color: red;\n  color: black;\n}";
+var css_248z = ".public-form-wrapper .wrapper-box {\n  background: white;\n  border-radius: 5px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;\n}";
 styleInject(css_248z);
 
-var Button = function Button(_ref) {
-  var label = _ref.label,
-      primary = _ref.primary;
-  return React.createElement("button", {
-    className: "btn " + (primary ? 'primary' : 'secondary')
-  }, label);
-};
-
-var css_248z$1 = ".thing {\n  background-color: black;\n  color: white;\n}";
+var css_248z$1 = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  box-shadow: none !important;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-label {\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white !important;\n}";
 styleInject(css_248z$1);
 
-var Thing = function Thing(_ref) {
-  var children = _ref.children;
-  return React.createElement("div", {
-    className: "thing"
-  }, children || "the snozzberries taste like snozzberries");
+var ButtonComponent = function ButtonComponent(props) {
+  return React__default.createElement(_.Button, {
+    type: props.type && props.type,
+    variant: "contained",
+    form: props.form && props.form,
+    className: "main-background-color " + (props.className ? props.className : ''),
+    startIcon: !props.loading && props.startIcon,
+    endIcon: !props.loading && props.endIcon,
+    onClick: props.onClick,
+    disabled: !props.loading && props.disabled
+  }, props.loading ? React__default.createElement(_.CircularProgress, {
+    size: 25
+  }) : props.label);
 };
 
-exports.Button = Button;
-exports.Thing = Thing;
+var css_248z$2 = ".text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 22px !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: grey !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n}";
+styleInject(css_248z$2);
+
+exports.ButtonComponent = ButtonComponent;
 //# sourceMappingURL=techsbcn-storybook.cjs.development.js.map

package/dist/techsbcn-storybook.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"techsbcn-storybook.cjs.development.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/stories/button/Button.tsx","../src/stories/thing/Thing.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React, { FC, HTMLAttributes } from 'react';\r\n\r\nimport './Button.scss'\r\n\r\nexport interface ButtonProps extends HTMLAttributes<HTMLDivElement> {  \r\n  label?: string;\r\n  primary?: boolean;\r\n}\r\n\r\nexport const Button: FC<ButtonProps> = ({ label, primary }) => {\r\n  return <button className={`btn ${primary ? 'primary' : 'secondary'}`}>{label}</button>\r\n};\r\n","import React, { FC, HTMLAttributes, ReactChild } from 'react';\r\n\r\nimport './Thing.scss'\r\n\r\nexport interface ThingProps extends HTMLAttributes<HTMLDivElement> {\r\n  children?: ReactChild;\r\n}\r\n\r\nexport const Thing: FC<ThingProps> = ({ children }) => {\r\n  return <div className=\"thing\">{children || `the snozzberries taste like snozzberries`}</div>;\r\n};\r\n"],"names":["Button","label","primary","React","className","Thing","children"],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;IChBaA,MAAM,GAAoB,SAA1BA,MAA0B;MAAGC,aAAAA;MAAOC,eAAAA;AAC/C,SAAOC,mBAAA,SAAA;AAAQC,IAAAA,SAAS,YAASF,OAAO,GAAG,SAAH,GAAe,WAA/B;GAAjB,EAAgED,KAAhE,CAAP;AACD,CAFM;;;;;ICDMI,KAAK,GAAmB,SAAxBA,KAAwB;MAAGC,gBAAAA;AACtC,SAAOH,mBAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;GAAf,EAAwBE,QAAQ,8CAAhC,CAAP;AACD,CAFM;;;;;"}
+{"version":3,"file":"techsbcn-storybook.cjs.development.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/fields/ButtonComponent/ButtonComponent.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from 'react';\r\nimport { Button, CircularProgress } from '@mui/material/';\r\nimport './ButtonComponent.scss';\r\n\r\nexport interface ButtonComponentProps {\r\n  className?: string;\r\n  label?: string;\r\n  startIcon?: React.ReactNode;\r\n  endIcon?: React.ReactNode;\r\n  onClick?: () => void;\r\n  loading?: boolean;\r\n  form?: string;\r\n  type?: 'button' | 'submit' | 'reset';\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {\r\n  return (\r\n    <Button\r\n      type={props.type && props.type}\r\n      variant=\"contained\"\r\n      form={props.form && props.form}\r\n      className={`main-background-color ${props.className ? props.className : ''}`}\r\n      startIcon={!props.loading && props.startIcon}\r\n      endIcon={!props.loading && props.endIcon}\r\n      onClick={props.onClick}\r\n      disabled={!props.loading && props.disabled}\r\n    >\r\n      {props.loading ? <CircularProgress size={25} /> : props.label}\r\n    </Button>\r\n  );\r\n};\r\n"],"names":["ButtonComponent","props","React","Button","type","variant","form","className","startIcon","loading","endIcon","onClick","disabled","CircularProgress","size","label"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;ICTaA,eAAe,GAAmC,SAAlDA,eAAkD,CAACC,KAAD;AAC7D,SACEC,4BAAA,CAACC,QAAD;AACEC,IAAAA,IAAI,EAAEH,KAAK,CAACG,IAAN,IAAcH,KAAK,CAACG;AAC1BC,IAAAA,OAAO,EAAC;AACRC,IAAAA,IAAI,EAAEL,KAAK,CAACK,IAAN,IAAcL,KAAK,CAACK;AAC1BC,IAAAA,SAAS,8BAA2BN,KAAK,CAACM,SAAN,GAAkBN,KAAK,CAACM,SAAxB,GAAoC,EAA/D;AACTC,IAAAA,SAAS,EAAE,CAACP,KAAK,CAACQ,OAAP,IAAkBR,KAAK,CAACO;AACnCE,IAAAA,OAAO,EAAE,CAACT,KAAK,CAACQ,OAAP,IAAkBR,KAAK,CAACS;AACjCC,IAAAA,OAAO,EAAEV,KAAK,CAACU;AACfC,IAAAA,QAAQ,EAAE,CAACX,KAAK,CAACQ,OAAP,IAAkBR,KAAK,CAACW;GARpC,EAUGX,KAAK,CAACQ,OAAN,GAAgBP,4BAAA,CAACW,kBAAD;AAAkBC,IAAAA,IAAI,EAAE;GAAxB,CAAhB,GAAiDb,KAAK,CAACc,KAV1D,CADF;AAcD,CAfM;;;;;;;"}

package/dist/techsbcn-storybook.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;function n(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}n(".btn.primary {\n  background-color: blue;\n  color: white;\n}\n.btn.secondary {\n  background-color: red;\n  color: black;\n}"),n(".thing {\n  background-color: black;\n  color: white;\n}"),exports.Button=function(e){return t.createElement("button",{className:"btn "+(e.primary?"primary":"secondary")},e.label)},exports.Thing=function(e){return t.createElement("div",{className:"thing"},e.children||"the snozzberries taste like snozzberries")};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,o=(t=require("react"))&&"object"==typeof t&&"default"in t?t.default:t;require("@mui/material");var n=require("@mui/material/");function e(t,o){void 0===o&&(o={});var n=o.insertAt;if(t&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}require("yup"),require("react-hook-form"),require("@hookform/resolvers/yup"),require("@mui/icons-material"),e(".public-form-wrapper .wrapper-box {\n  background: white;\n  border-radius: 5px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;\n}"),e(".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  box-shadow: none !important;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-label {\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white !important;\n}"),e(".text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 22px !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: grey !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n}"),exports.ButtonComponent=function(t){return o.createElement(n.Button,{type:t.type&&t.type,variant:"contained",form:t.form&&t.form,className:"main-background-color "+(t.className?t.className:""),startIcon:!t.loading&&t.startIcon,endIcon:!t.loading&&t.endIcon,onClick:t.onClick,disabled:!t.loading&&t.disabled},t.loading?o.createElement(n.CircularProgress,{size:25}):t.label)};
 //# sourceMappingURL=techsbcn-storybook.cjs.production.min.js.map

package/dist/techsbcn-storybook.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"techsbcn-storybook.cjs.production.min.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/stories/button/Button.tsx","../src/stories/thing/Thing.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React, { FC, HTMLAttributes } from 'react';\r\n\r\nimport './Button.scss'\r\n\r\nexport interface ButtonProps extends HTMLAttributes<HTMLDivElement> {  \r\n  label?: string;\r\n  primary?: boolean;\r\n}\r\n\r\nexport const Button: FC<ButtonProps> = ({ label, primary }) => {\r\n  return <button className={`btn ${primary ? 'primary' : 'secondary'}`}>{label}</button>\r\n};\r\n","import React, { FC, HTMLAttributes, ReactChild } from 'react';\r\n\r\nimport './Thing.scss'\r\n\r\nexport interface ThingProps extends HTMLAttributes<HTMLDivElement> {\r\n  children?: ReactChild;\r\n}\r\n\r\nexport const Thing: FC<ThingProps> = ({ children }) => {\r\n  return <div className=\"thing\">{children || `the snozzberries taste like snozzberries`}</div>;\r\n};\r\n"],"names":["styleInject","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","React","className","primary","label","children"],"mappings":"gJAAA,SAASA,EAAYC,EAAKC,QACX,IAARA,IAAiBA,EAAM,IAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAKF,GAA2B,oBAAbG,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,qNCdP,mBAC9Be,0BAAQC,oBADgCC,QACJ,UAAY,gBADfC,sBCDL,mBAC5BH,uBAAKC,UAAU,WADgBG"}
+{"version":3,"file":"techsbcn-storybook.cjs.production.min.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/fields/ButtonComponent/ButtonComponent.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from 'react';\r\nimport { Button, CircularProgress } from '@mui/material/';\r\nimport './ButtonComponent.scss';\r\n\r\nexport interface ButtonComponentProps {\r\n  className?: string;\r\n  label?: string;\r\n  startIcon?: React.ReactNode;\r\n  endIcon?: React.ReactNode;\r\n  onClick?: () => void;\r\n  loading?: boolean;\r\n  form?: string;\r\n  type?: 'button' | 'submit' | 'reset';\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {\r\n  return (\r\n    <Button\r\n      type={props.type && props.type}\r\n      variant=\"contained\"\r\n      form={props.form && props.form}\r\n      className={`main-background-color ${props.className ? props.className : ''}`}\r\n      startIcon={!props.loading && props.startIcon}\r\n      endIcon={!props.loading && props.endIcon}\r\n      onClick={props.onClick}\r\n      disabled={!props.loading && props.disabled}\r\n    >\r\n      {props.loading ? <CircularProgress size={25} /> : props.label}\r\n    </Button>\r\n  );\r\n};\r\n"],"names":["styleInject","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","props","React","Button","variant","form","className","startIcon","loading","endIcon","onClick","disabled","CircularProgress","size","label"],"mappings":"yMAAA,SAASA,EAAYC,EAAKC,QACX,IAARA,IAAiBA,EAAM,IAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAKF,GAA2B,oBAAbG,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,0wECPiB,SAACe,UAE5DC,gBAACC,UACCT,KAAMO,EAAMP,MAAQO,EAAMP,KAC1BU,QAAQ,YACRC,KAAMJ,EAAMI,MAAQJ,EAAMI,KAC1BC,oCAAoCL,EAAMK,UAAYL,EAAMK,UAAY,IACxEC,WAAYN,EAAMO,SAAWP,EAAMM,UACnCE,SAAUR,EAAMO,SAAWP,EAAMQ,QACjCC,QAAST,EAAMS,QACfC,UAAWV,EAAMO,SAAWP,EAAMU,UAEjCV,EAAMO,QAAUN,gBAACU,oBAAiBC,KAAM,KAASZ,EAAMa"}

package/dist/techsbcn-storybook.esm.js

@@ -1,4 +1,10 @@
 import React from 'react';
+import '@mui/material';
+import { Button, CircularProgress } from '@mui/material/';
+import 'yup';
+import 'react-hook-form';
+import '@hookform/resolvers/yup';
+import '@mui/icons-material';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -27,26 +33,29 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".btn.primary {\n  background-color: blue;\n  color: white;\n}\n.btn.secondary {\n  background-color: red;\n  color: black;\n}";
+var css_248z = ".public-form-wrapper .wrapper-box {\n  background: white;\n  border-radius: 5px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;\n}";
 styleInject(css_248z);
 
-var Button = function Button(_ref) {
-  var label = _ref.label,
-      primary = _ref.primary;
-  return React.createElement("button", {
-    className: "btn " + (primary ? 'primary' : 'secondary')
-  }, label);
-};
-
-var css_248z$1 = ".thing {\n  background-color: black;\n  color: white;\n}";
+var css_248z$1 = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  box-shadow: none !important;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-label {\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white !important;\n}";
 styleInject(css_248z$1);
 
-var Thing = function Thing(_ref) {
-  var children = _ref.children;
-  return React.createElement("div", {
-    className: "thing"
-  }, children || "the snozzberries taste like snozzberries");
+var ButtonComponent = function ButtonComponent(props) {
+  return React.createElement(Button, {
+    type: props.type && props.type,
+    variant: "contained",
+    form: props.form && props.form,
+    className: "main-background-color " + (props.className ? props.className : ''),
+    startIcon: !props.loading && props.startIcon,
+    endIcon: !props.loading && props.endIcon,
+    onClick: props.onClick,
+    disabled: !props.loading && props.disabled
+  }, props.loading ? React.createElement(CircularProgress, {
+    size: 25
+  }) : props.label);
 };
 
-export { Button, Thing };
+var css_248z$2 = ".text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 22px !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: grey !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n}";
+styleInject(css_248z$2);
+
+export { ButtonComponent };
 //# sourceMappingURL=techsbcn-storybook.esm.js.map

package/dist/techsbcn-storybook.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"techsbcn-storybook.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/stories/button/Button.tsx","../src/stories/thing/Thing.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React, { FC, HTMLAttributes } from 'react';\r\n\r\nimport './Button.scss'\r\n\r\nexport interface ButtonProps extends HTMLAttributes<HTMLDivElement> {  \r\n  label?: string;\r\n  primary?: boolean;\r\n}\r\n\r\nexport const Button: FC<ButtonProps> = ({ label, primary }) => {\r\n  return <button className={`btn ${primary ? 'primary' : 'secondary'}`}>{label}</button>\r\n};\r\n","import React, { FC, HTMLAttributes, ReactChild } from 'react';\r\n\r\nimport './Thing.scss'\r\n\r\nexport interface ThingProps extends HTMLAttributes<HTMLDivElement> {\r\n  children?: ReactChild;\r\n}\r\n\r\nexport const Thing: FC<ThingProps> = ({ children }) => {\r\n  return <div className=\"thing\">{children || `the snozzberries taste like snozzberries`}</div>;\r\n};\r\n"],"names":["Button","label","primary","React","className","Thing","children"],"mappings":";;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;IChBaA,MAAM,GAAoB,SAA1BA,MAA0B;MAAGC,aAAAA;MAAOC,eAAAA;AAC/C,SAAOC,mBAAA,SAAA;AAAQC,IAAAA,SAAS,YAASF,OAAO,GAAG,SAAH,GAAe,WAA/B;GAAjB,EAAgED,KAAhE,CAAP;AACD,CAFM;;;;;ICDMI,KAAK,GAAmB,SAAxBA,KAAwB;MAAGC,gBAAAA;AACtC,SAAOH,mBAAA,MAAA;AAAKC,IAAAA,SAAS,EAAC;GAAf,EAAwBE,QAAQ,8CAAhC,CAAP;AACD,CAFM;;;;"}
+{"version":3,"file":"techsbcn-storybook.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/fields/ButtonComponent/ButtonComponent.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from 'react';\r\nimport { Button, CircularProgress } from '@mui/material/';\r\nimport './ButtonComponent.scss';\r\n\r\nexport interface ButtonComponentProps {\r\n  className?: string;\r\n  label?: string;\r\n  startIcon?: React.ReactNode;\r\n  endIcon?: React.ReactNode;\r\n  onClick?: () => void;\r\n  loading?: boolean;\r\n  form?: string;\r\n  type?: 'button' | 'submit' | 'reset';\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {\r\n  return (\r\n    <Button\r\n      type={props.type && props.type}\r\n      variant=\"contained\"\r\n      form={props.form && props.form}\r\n      className={`main-background-color ${props.className ? props.className : ''}`}\r\n      startIcon={!props.loading && props.startIcon}\r\n      endIcon={!props.loading && props.endIcon}\r\n      onClick={props.onClick}\r\n      disabled={!props.loading && props.disabled}\r\n    >\r\n      {props.loading ? <CircularProgress size={25} /> : props.label}\r\n    </Button>\r\n  );\r\n};\r\n"],"names":["ButtonComponent","props","React","Button","type","variant","form","className","startIcon","loading","endIcon","onClick","disabled","CircularProgress","size","label"],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;ICTaA,eAAe,GAAmC,SAAlDA,eAAkD,CAACC,KAAD;AAC7D,SACEC,mBAAA,CAACC,MAAD;AACEC,IAAAA,IAAI,EAAEH,KAAK,CAACG,IAAN,IAAcH,KAAK,CAACG;AAC1BC,IAAAA,OAAO,EAAC;AACRC,IAAAA,IAAI,EAAEL,KAAK,CAACK,IAAN,IAAcL,KAAK,CAACK;AAC1BC,IAAAA,SAAS,8BAA2BN,KAAK,CAACM,SAAN,GAAkBN,KAAK,CAACM,SAAxB,GAAoC,EAA/D;AACTC,IAAAA,SAAS,EAAE,CAACP,KAAK,CAACQ,OAAP,IAAkBR,KAAK,CAACO;AACnCE,IAAAA,OAAO,EAAE,CAACT,KAAK,CAACQ,OAAP,IAAkBR,KAAK,CAACS;AACjCC,IAAAA,OAAO,EAAEV,KAAK,CAACU;AACfC,IAAAA,QAAQ,EAAE,CAACX,KAAK,CAACQ,OAAP,IAAkBR,KAAK,CAACW;GARpC,EAUGX,KAAK,CAACQ,OAAN,GAAgBP,mBAAA,CAACW,gBAAD;AAAkBC,IAAAA,IAAI,EAAE;GAAxB,CAAhB,GAAiDb,KAAK,CAACc,KAV1D,CADF;AAcD,CAfM;;;;;;;"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.7",
+  "version": "0.2.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -14,26 +14,31 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "lint": "eslint . src/**/*.{ts,tsx} --fix",
     "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
-  "peerDependencies": {
-    "react": ">=16"
-  },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "export CI=true && yarn build && lint-staged && yarn test",
+      "pre-push": "export CI=true && yarn build && lint-staged && yarn test"
     }
   },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint . src/**/*.{ts,tsx} --fix"
+    ],
+    "*.{js,jsx}": [
+      "eslint --fix"
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {}
+    }
   },
   "name": "techsbcn-storybook",
   "author": "techsbcn",
@@ -48,29 +53,79 @@
       "limit": "10 KB"
     }
   ],
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@size-limit/preset-small-lib": "^5.0.2",
-    "@storybook/addon-essentials": "^6.3.6",
+    "@babel/core": "^7.16.0",
+    "@emotion/react": "^11.7.0",
+    "@emotion/styled": "^11.6.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@hookform/resolvers": "^2.8.3",
+    "@mui/icons-material": "^5.2.0",
+    "@mui/material": "^5.2.1",
+    "@size-limit/preset-small-lib": "^7.0.3",
+    "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.3.6",
-    "@storybook/addons": "^6.3.6",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addons": "^6.3.12",
     "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.6",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
-    "babel-loader": "^8.2.2",
-    "husky": "^7.0.1",
-    "postcss": "^8.3.6",
+    "@storybook/react": "^6.3.12",
+    "@types/jest": "^27.0.3",
+    "@types/react": "^17.0.36",
+    "@types/react-dom": "^17.0.11",
+    "@types/yup": "^0.29.13",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.3",
+    "eslint": "^8.3.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^7.0.4",
+    "i18next": "^21.5.3",
+    "i18next-browser-languagedetector": "^6.1.2",
+    "lint-staged": "^12.1.2",
+    "postcss": "^8.3.11",
+    "prettier": "^2.4.1",
+    "prettier-eslint": "^13.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.20.4",
+    "react-i18next": "^11.14.3",
     "react-is": "^17.0.2",
     "react-scripts": "^4.0.3",
-    "rollup-plugin-postcss": "^4.0.0",
-    "sass": "^1.37.0",
-    "size-limit": "^5.0.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.43.4",
+    "size-limit": "^7.0.3",
     "tsdx": "^0.14.1",
-    "tslib": "^2.3.0",
-    "typescript": "^4.3.5"
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2",
+    "yarn-upgrade-all": "^0.5.4",
+    "yup": "^0.32.11"
+  },
+  "peerDependencies": {
+    "react": "*"
   }
 }

package/src/components/fields/ButtonComponent/ButtonComponent.scss

@@ -0,0 +1,31 @@
+$size-form: (calc(100vw - 300px) / (1600 - 300));
+$body-size: calc(12pt + (14 - 12) * #{$size-form});
+
+.MuiButton-root {
+    width: auto;
+    padding: 0.8rem 1rem!important;
+    text-transform: inherit !important;
+    line-height: inherit !important;
+    font-size: $body-size !important;
+    box-shadow: none !important;
+    &.btn-login{
+        width: 100%;
+    }
+    &.btn-modal-cancel{
+        background-color: #666666 !important;
+    }
+    &:hover{
+        box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%) !important;
+    }
+    .MuiCircularProgress-root{
+        color:white !important;
+    }
+    .MuiButton-label{
+        font-size: $body-size !important;
+        .MuiCircularProgress-root{
+            color:white !important;
+        }
+    }
+
+}
+

package/src/components/fields/ButtonComponent/ButtonComponent.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Button, CircularProgress } from '@mui/material/';
+import './ButtonComponent.scss';
+
+export interface ButtonComponentProps {
+  className?: string;
+  label?: string;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  onClick?: () => void;
+  loading?: boolean;
+  form?: string;
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+}
+
+export const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {
+  return (
+    <Button
+      type={props.type && props.type}
+      variant="contained"
+      form={props.form && props.form}
+      className={`main-background-color ${props.className ? props.className : ''}`}
+      startIcon={!props.loading && props.startIcon}
+      endIcon={!props.loading && props.endIcon}
+      onClick={props.onClick}
+      disabled={!props.loading && props.disabled}
+    >
+      {props.loading ? <CircularProgress size={25} /> : props.label}
+    </Button>
+  );
+};

package/src/components/fields/TextFieldComponent/TextFieldComponent.scss

@@ -0,0 +1,37 @@
+.text-field-component{
+    .MuiFormLabel-root + .MuiInputBase-formControl{
+        margin-top: 22px !important;
+    }
+    .MuiInputBase-root{
+        color: grey !important;
+        border: 1px solid grey;
+        padding: 0.43rem 0.87rem;
+        background-color: white !important;
+        border-radius: 3px!important;
+        &.Mui-error{
+            border: 1px solid #F24726!important;
+        }
+        &:not(.Mui-disabled):hover {
+            border:1px solid grey;
+        }
+        &.Mui-focused{
+            border:1px solid grey;
+        }
+        .MuiInputBase-input{
+            color: #666666 !important;
+            background-color: white !important;
+            &::placeholder{
+                text-overflow: ellipsis !important;
+                color: #666666 !important;
+                opacity: 1;
+            }
+        }
+        .Mui-disabled{
+            -webkit-text-fill-color: #666666 !important;
+        }
+    }
+    .MuiFormHelperText-root{
+        padding: 0 !important;
+        font-size: 0.85rem!important;
+    }
+}

package/src/components/fields/TextFieldComponent/TextFieldComponent.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { TextField, Box } from '@mui/material/';
+import './TextFieldComponent.scss';
+
+export type InputType =
+  | 'text'
+  | 'radio'
+  | 'checkbox'
+  | 'textarea'
+  | 'submit'
+  | 'date'
+  | 'hidden'
+  | 'number'
+  | 'range'
+  | 'password'
+  | 'time'
+  | 'file';
+
+interface TextFieldComponentProps {
+  id?: string;
+  label?: string;
+  name?: string;
+  value?: string | number;
+  className?: string;
+  type?: InputType;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  minNumber?: number;
+  maxNumber?: number;
+  error?: boolean;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  fullWidth?: boolean;
+  helperText?: string;
+  textFieldRef?: any;
+  inputRef?: React.Ref<any>;
+  autoComplete?: string;
+  multiline?: boolean;
+  rows?: number;
+  maxLength?: number;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  step?: number | string;
+}
+
+const TextFieldComponent: React.FC<TextFieldComponentProps> = (props) => {
+  return (
+    <Box className="text-field-component" width="100%">
+      <TextField
+        error={props.error}
+        id={props.id}
+        label={props.label}
+        defaultValue={props.value}
+        className={props.className}
+        required={props.required}
+        disabled={props.disabled}
+        type={props.type}
+        placeholder={props.placeholder}
+        autoComplete={props.autoComplete}
+        variant="standard"
+        ref={props.inputRef}
+        InputProps={{
+          disableUnderline: true,
+          startAdornment: props.startIcon,
+          endAdornment: props.endIcon,
+          inputProps: {
+            max: props.maxNumber,
+            min: props.minNumber,
+            step: props.step,
+          },
+        }}
+        InputLabelProps={{ shrink: true }}
+        helperText={props.helperText}
+        fullWidth={props.fullWidth}
+        multiline={props.multiline}
+        rows={props.rows}
+        onChange={props.onChange}
+        onKeyUp={props.onKeyUp}
+        inputProps={{
+          maxLength: props.maxLength,
+          step: props.step,
+          max: props.maxNumber,
+          min: props.minNumber,
+        }}
+      />
+    </Box>
+  );
+};
+TextFieldComponent.defaultProps = {
+  fullWidth: true,
+  type: 'text',
+};
+export default TextFieldComponent;

package/src/components/forms/ChangePasswordForm.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import { Box, Grid, IconButton } from '@mui/material/';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { useForm, Controller } from 'react-hook-form';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import TextFieldComponent from '../fields/TextFieldComponent/TextFieldComponent';
+import { ButtonComponent } from '../fields/ButtonComponent/ButtonComponent';
+
+interface ChangePasswordFormProps {
+  onClick: (data: any) => void;
+  loading: boolean;
+  topComponent?: React.ReactNode;
+  bottomComponent?: React.ReactNode;
+  requiredText: { requiredTextPassword: string; requiredTextSamePassword: string };
+  valuesText: { buttonText: string; text1: string; placeholder1?: string; text2: string; placeholder2?: string };
+}
+
+const ChangePasswordForm: React.FC<ChangePasswordFormProps> = (props) => {
+  const validationSchema = yup.object().shape({
+    password: yup.string().required(props.requiredText.requiredTextPassword),
+    passwordConfirmation: yup
+      .string()
+      .when('password', (password: any, schema: any) => {
+        if (password) return schema.required(props.requiredText.requiredTextPassword);
+      })
+      .oneOf([yup.ref('password'), null], props.requiredText.requiredTextSamePassword),
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+  });
+
+  const [showPassword, setShownPassword] = useState(false);
+
+  const handleClickShowPassword = () => {
+    setShownPassword(!showPassword);
+  };
+
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
+  return (
+    <Box>
+      {props.topComponent && <Box m={2}>{props.topComponent}</Box>}
+      <Box m={2}>
+        <Grid container direction="column" spacing={1}>
+          <Grid item>
+            <Controller
+              control={control}
+              name={'password'}
+              render={({ field: { onChange, name, ref } }) => (
+                <TextFieldComponent
+                  label={props.valuesText.text1}
+                  type={showPassword ? 'text' : 'password'}
+                  error={!!errors.password}
+                  placeholder={props.valuesText.placeholder1}
+                  helperText={errors.password?.message}
+                  name={name}
+                  inputRef={ref}
+                  onChange={(e) => {
+                    onChange(e);
+                  }}
+                  endIcon={
+                    <IconButton
+                      aria-label="toggle password visibility"
+                      onClick={handleClickShowPassword}
+                      onMouseDown={handleMouseDownPassword}
+                      size="small"
+                    >
+                      {showPassword ? <Visibility /> : <VisibilityOff />}
+                    </IconButton>
+                  }
+                />
+              )}
+            />
+          </Grid>
+          <Grid item>
+            <Controller
+              control={control}
+              name={'passwordConfirmation'}
+              render={({ field: { onChange, name, ref } }) => (
+                <TextFieldComponent
+                  label={props.valuesText.text2}
+                  placeholder={props.valuesText.placeholder2}
+                  type={showPassword ? 'text' : 'password'}
+                  error={!!errors.passwordConfirmation}
+                  helperText={errors.passwordConfirmation?.message}
+                  name={name}
+                  inputRef={ref}
+                  onChange={(e) => {
+                    onChange(e);
+                  }}
+                  endIcon={
+                    <IconButton
+                      aria-label="toggle password visibility"
+                      onClick={handleClickShowPassword}
+                      onMouseDown={handleMouseDownPassword}
+                      size="small"
+                    >
+                      {showPassword ? <Visibility /> : <VisibilityOff />}
+                    </IconButton>
+                  }
+                />
+              )}
+            />
+          </Grid>
+        </Grid>
+      </Box>
+      <Box m={2}>
+        <ButtonComponent
+          label={props.valuesText.buttonText}
+          className="btn-login"
+          onClick={handleSubmit(props.onClick)}
+          loading={props.loading}
+        />
+      </Box>
+      {props.bottomComponent && <Box m={2}>{props.bottomComponent}</Box>}
+    </Box>
+  );
+};
+
+export default ChangePasswordForm;

package/src/components/forms/LoginForm.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { Box, Grid, IconButton } from '@mui/material';
+import * as yup from 'yup';
+import { useForm, Controller } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import TextFieldComponent from '../fields/TextFieldComponent/TextFieldComponent';
+import { ButtonComponent } from '../fields/ButtonComponent/ButtonComponent';
+
+interface LoginFormProps {
+  onClick: (data: any) => void;
+  topComponent?: React.ReactNode;
+  bottomComponent?: React.ReactNode;
+  loading: boolean;
+  requiredText: { requiredTextMail: string; requiredTextPassword: string };
+  valuesText: { buttonText: string; text1: string; placeholder1?: string; text2: string; placeholder2?: string };
+}
+
+const LoginForm: React.FC<LoginFormProps> = (props) => {
+  const LoginSchema = yup.object().shape({
+    email: yup.string().required(props.requiredText.requiredTextMail),
+    password: yup.string().required(props.requiredText.requiredTextPassword),
+  });
+
+  const [showPassword, setShownPassword] = useState(false);
+  const handleClickShowPassword = () => {
+    setShownPassword(!showPassword);
+  };
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(LoginSchema),
+  });
+
+  return (
+    <Box m={2}>
+      {props.topComponent && <Box m={2}>{props.topComponent}</Box>}
+      <Box my={2}>
+        <Grid container direction="column" spacing={1}>
+          <Grid item>
+            <Controller
+              control={control}
+              name={'email'}
+              render={({ field: { onChange, name, ref } }) => (
+                <TextFieldComponent
+                  label={props.valuesText.text1}
+                  placeholder={props.valuesText.placeholder1}
+                  autoComplete="email"
+                  error={!!errors.email}
+                  helperText={errors.email?.message}
+                  name={name}
+                  inputRef={ref}
+                  onChange={(e) => {
+                    onChange(e);
+                  }}
+                />
+              )}
+            />
+          </Grid>
+          <Grid item>
+            <Controller
+              control={control}
+              name={'password'}
+              render={({ field: { onChange, name, ref } }) => (
+                <TextFieldComponent
+                  label={props.valuesText.text2}
+                  placeholder={props.valuesText.placeholder2}
+                  type={showPassword ? 'text' : 'password'}
+                  error={!!errors.password}
+                  helperText={errors.password?.message}
+                  name={name}
+                  inputRef={ref}
+                  onChange={(e) => {
+                    onChange(e);
+                  }}
+                  endIcon={
+                    <IconButton aria-label="toggle password visibility" onClick={handleClickShowPassword} size="small">
+                      {showPassword ? <Visibility /> : <VisibilityOff />}
+                    </IconButton>
+                  }
+                />
+              )}
+            />
+          </Grid>
+        </Grid>
+      </Box>
+      <Box mb={5}>
+        <ButtonComponent
+          label={props.valuesText.buttonText}
+          loading={props.loading}
+          className="btn-login"
+          onClick={handleSubmit(props.onClick)}
+        />
+      </Box>
+      {props.bottomComponent && <Box m={2}>{props.bottomComponent}</Box>}
+    </Box>
+  );
+};
+
+export default LoginForm;

package/src/components/forms/ResetPasswordForm.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import * as yup from 'yup';
+import { useForm, Controller } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import TextFieldComponent from '../fields/TextFieldComponent/TextFieldComponent';
+import { ButtonComponent } from '../fields/ButtonComponent/ButtonComponent';
+
+interface resetPasswordFormProps {
+  onClick: (data: any) => void;
+  loading: boolean;
+  topComponent?: React.ReactNode;
+  bottomComponent?: React.ReactNode;
+  requiredText: { requiredTextMail: string };
+  valuesText: { buttonText: string; text: string; placeholder?: string };
+}
+
+const ResetPasswordForm: React.FC<resetPasswordFormProps> = (props) => {
+  const ResetSchema = yup.object().shape({
+    email: yup.string().required(props.requiredText.requiredTextMail),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(ResetSchema),
+  });
+
+  return (
+    <Box m={2}>
+      {props.topComponent && <Box m={2}>{props.topComponent}</Box>}
+      <Box mx={2} my={2}>
+        <Controller
+          control={control}
+          name={'email'}
+          render={({ field: { onChange, name, ref } }) => (
+            <TextFieldComponent
+              label={props.valuesText.text}
+              placeholder={props.valuesText.placeholder}
+              autoComplete="email"
+              error={!!errors.email}
+              helperText={errors.email?.message}
+              name={name}
+              inputRef={ref}
+              onChange={(e) => {
+                onChange(e);
+              }}
+            />
+          )}
+        />
+      </Box>
+      <Box mx={2} mb={5}>
+        <ButtonComponent
+          label={props.valuesText.buttonText}
+          className="btn-login"
+          onClick={handleSubmit(props.onClick)}
+          loading={props.loading}
+        />
+      </Box>
+      {props.bottomComponent && <Box m={2}>{props.bottomComponent}</Box>}
+    </Box>
+  );
+};
+
+export default ResetPasswordForm;

package/src/components/wrappers/PublicFormWrapper/PublicFormWrapper.scss

@@ -0,0 +1,7 @@
+.public-form-wrapper{
+    .wrapper-box{
+        background: white;
+        border-radius: 5px;
+        box-shadow: rgb(0 0 0 / 20%) 0px 11px 15px -7px, rgb(0 0 0 / 14%) 0px 24px 38px 3px, rgb(0 0 0 / 12%) 0px 9px 46px 8px;
+    }
+}

package/src/components/wrappers/PublicFormWrapper/PublicFormWrapper.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, Container } from '@mui/material';
+import './PublicFormWrapper.scss';
+
+interface PublicFormWrapperProps {
+  className?: string;
+}
+const PublicFormWrapper: React.FC<PublicFormWrapperProps> = (props) => {
+  return (
+    <Box
+      height="100%"
+      className={`public-form-wrapper ${props.className ? props.className : ''}`}
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Container maxWidth="xs">
+        <Box className="wrapper-box" p={1}>
+          {props.children}
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default PublicFormWrapper;

package/src/index.tsx

@@ -1,2 +1,6 @@
-export * from './stories/button/Button';
-export * from './stories/thing/Thing';
+export * from './components/wrappers/PublicFormWrapper/PublicFormWrapper';
+export * from './components/fields/ButtonComponent/ButtonComponent';
+export * from './components/fields/TextFieldComponent/TextFieldComponent';
+export * from './components/forms/LoginForm';
+export * from './components/forms/ChangePasswordForm';
+export * from './components/forms/ResetPasswordForm';

package/src/stories/button/Button.stories.tsx

@@ -1,17 +1,11 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { Button, ButtonProps } from './Button';
+import { ButtonComponent } from '../../components/fields/ButtonComponent/ButtonComponent';
 
 const meta: Meta = {
   title: 'Button',
-  component: Button,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
+  component: ButtonComponent,
+  argTypes: {},
   parameters: {
     controls: { expanded: true },
   },
@@ -19,24 +13,31 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<ButtonProps> = args => <Button {...args} />;
+const Template: Story = (args) => <ButtonComponent {...args} />;
 
 export const Default = Template.bind({});
 
 Default.args = {
-  label: 'Default'  
+  label: 'Default',
+  onClick: () => console.log('Clicked !'),
+};
+
+export const LoginButton = Template.bind({});
+
+LoginButton.args = {
+  label: 'Login',
+  className: 'btn-login',
 };
 
-export const Primary = Template.bind({});
+export const ModalCancel = Template.bind({});
 
-Primary.args = {
-  label: 'Primary',
-  primary: true
+ModalCancel.args = {
+  label: 'Cancelar',
+  className: 'btn-modal-cancel',
 };
 
-export const Secondary = Template.bind({});
+export const Loading = Template.bind({});
 
-Secondary.args = {
-  label: 'Secondary',
-  primary: false
+Loading.args = {
+  loading: true,
 };

package/src/stories/thing/Thing.stories.tsx

@@ -19,7 +19,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<ThingProps> = args => <Thing {...args} />;
+const Template: Story<ThingProps> = (args) => <Thing {...args} />;
 
 export const Default = Template.bind({});
 

package/src/stories/thing/Thing.tsx

@@ -1,6 +1,6 @@
 import React, { FC, HTMLAttributes, ReactChild } from 'react';
 
-import './Thing.scss'
+import './Thing.scss';
 
 export interface ThingProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactChild;

package/src/styles/Globals.scss

@@ -0,0 +1,46 @@
+$color-grey-background-primary: #515151;
+$color-grey-background-secundary: #5c5c5c;
+$color-red: #F24726;
+
+
+$screen-xxs-min: 320px;
+$screen-xxs-max: 375px;
+$screen-xs-between: 420px;
+$screen-xs-max: 575px;
+$screen-sm-min: 576px;
+$screen-sm-max: 767px;
+$screen-md-min: 768px;
+$screen-md-max: 991px;
+$screen-lg-min: 992px;
+$screen-lg-between: 1100px;
+$screen-lg-max: 1199px;
+$screen-xl-min: 1200px;
+$screen-xl-min-between: 1366px;
+$screen-xl-max: 1440px;
+
+
+$size-form: (calc(100vw - 300px) / (1600 - 300));
+
+$body-size: calc(12pt + (14 - 12) * #{$size-form});
+
+$extra-large-size: calc(30px + (32 - 30) * #{$size-form});
+$large-size: calc(21px + (23 - 21) * #{$size-form});
+$medium-size: calc(14pt + (16 - 14) * #{$size-form});
+$small-size: calc(10pt + (12 - 10) * #{$size-form});
+
+
+::-webkit-scrollbar {
+    display: none;
+}
+body{
+    margin: 0;
+    font-size: $body-size;
+    height: 100vh;
+    a{
+        text-decoration: none;
+        color: inherit;
+    }
+    .cursor-pointer {
+        cursor: pointer;
+    }
+}

package/dist/stories/button/Button.d.ts

@@ -1,7 +0,0 @@
-import { FC, HTMLAttributes } from 'react';
-import './Button.scss';
-export interface ButtonProps extends HTMLAttributes<HTMLDivElement> {
-    label?: string;
-    primary?: boolean;
-}
-export declare const Button: FC<ButtonProps>;

package/src/stories/button/Button.scss

@@ -1,11 +0,0 @@
-.btn {
-    &.primary {
-        background-color: blue;
-        color: white;
-    }
-
-    &.secondary {
-        background-color: red;
-        color: black;
-    }
-}

package/src/stories/button/Button.tsx

@@ -1,12 +0,0 @@
-import React, { FC, HTMLAttributes } from 'react';
-
-import './Button.scss'
-
-export interface ButtonProps extends HTMLAttributes<HTMLDivElement> {  
-  label?: string;
-  primary?: boolean;
-}
-
-export const Button: FC<ButtonProps> = ({ label, primary }) => {
-  return <button className={`btn ${primary ? 'primary' : 'secondary'}`}>{label}</button>
-};