mitre-form-component 0.0.14 → 0.0.15

package/dist/index.cjs

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Form/index.tsx
-var import_react = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 
 // src/components/styles/utils.ts
 function flex(direction = "row", alignItems, justifyContent) {
@@ -147,9 +147,169 @@ var Text = import_styled_components.default.p`
   margin-top: 10px;
 `;
 
+// src/components/styles/global.ts
+var import_styled_components2 = require("styled-components");
+var import_react = require("react");
+var GlobalStyles = import_styled_components2.createGlobalStyle`
+  :root {
+    --red: #e52e4d;
+    --white: #FFF;
+    --black: #2F2F2F;
+    --black-2:#1E1E1E;
+    --alphaBlack: #000000;
+    --black-2:#1E1E1E;
+    --black-3:#353535;
+
+    --yellow-400:#FFD789;
+    --yellow-500: #F6C76B;
+    --gray-40:#F0F0F0;
+    --gray-45:#767676;
+    --gray-50: #686A69;
+    --gray-60: #8F8F8F;
+    --gray-100: #B6B6B6;
+    --gray-150: #B9B9B9;
+    --gray-200: #D2D2D2;
+    --gray-300: #EBEBEB;
+    --gray-400: #ECECEC;
+    --gray-500: #F4F4F4;
+    --gray-550:#6F6F6F;
+    --gray-600:#686868;
+    --gray-700: #535353;
+    --gray-800:#9D9D9D;
+    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);
+    --green:#57C06E;
+    --green-2:#2DCE68;
+    --blue:#007BFF;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+
+    @media (max-width: 1080px) {
+      font-size: 93.75%;
+    }
+    @media (max-width: 720px) {
+      font-size: 87.5%;
+    }
+  }
+
+  body {
+    background: var(--white);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  body, input, textarea, select, button {
+    font-family: "Montserrat", sans-serif;
+    font-weight: 400;
+  } 
+
+  h1, h2, h3, h4, h5, h6, strong {
+    font-weight: 600;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  [disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .hidden {
+    overflow: hidden;
+  }
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    background: var(--gray-500);
+    width: 6px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--gray-50);
+  }
+
+  .aligncenter {
+    text-align: center;
+  }
+
+  .width-190px {
+    width:190px;
+  }
+
+  .hidden-content {
+    display:none !important;
+  }
+
+  .global-margin-bottom {
+    margin-bottom:20px;
+  }
+
+  .background-light-gray {
+    background:#F4F4F4;
+  }
+
+  .full-width-and-height {
+    height:100%;
+    width:100%;
+  }
+
+  .flex-direction-column {
+    flex-direction:column;
+  }
+
+  .bold {
+    font-weight:700;
+  }
+
+  .margin-center-x {
+    margin:0 auto;
+  }
+
+  .border-none {
+    border:none;
+  }
+
+  .text-center {
+    text-align:center;
+  }
+
+  .relative {
+    position:relative;
+  }
+
+  /* accessibility */
+  body ._access-menu p._text-center{
+    font-family: "Montserrat", sans-serif;
+    font-style: italic;
+    font-size: 1.2rem!important;
+    margin-top: 6px;
+    margin-bottom: 3px;
+  } 
+
+`;
+var FontLoader = () => {
+  (0, import_react.useEffect)(() => {
+    const link = document.createElement("link");
+    link.href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap";
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+  }, []);
+  return null;
+};
+var global_default = FontLoader;
+
 // src/components/Form/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var MitreFormComponent = import_react.default.forwardRef(({
+var MitreFormComponent = import_react2.default.forwardRef(({
   productId,
   apiUrl,
   apiToken,
@@ -163,30 +323,34 @@ var MitreFormComponent = import_react.default.forwardRef(({
   backgroundColor = "#cecece",
   innerPadding = "1rem"
 }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormContainer, { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(HeaderContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, { children: "Atendimento por mensagem" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Informe seus dados e retornaremos a mensagem." })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonContainer, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      "A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "a",
-        {
-          href: "https://www.mitrerealty.com.br/politica-de-privacidade",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: "Pol\xEDtica de Privacidade"
-        }
-      ),
-      ". Ao clicar em ",
-      '"',
-      "enviar",
-      '"',
-      ", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(global_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStyles, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormContainer, { ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(HeaderContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, { children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Informe seus dados e retornaremos a mensagem." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonContainer, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+        "A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            href: "https://www.mitrerealty.com.br/politica-de-privacidade",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Pol\xEDtica de Privacidade"
+          }
+        ),
+        ". Ao clicar em ",
+        '"',
+        "enviar",
+        '"',
+        ", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
+      ] })
     ] })
   ] });
 });

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/Form/index.tsx","../src/components/styles/utils.ts","../src/components/Form/styles.ts"],"sourcesContent":["import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n","import React, { useState } from \"react\";\n\nimport { \n  FormContainer, \n  HeaderContainer, \n  ButtonContainer, \n  Form, \n  Title, \n  Text \n} from \"./styles\";\n\nexport interface MitreFormComponentProps {\n  productId: string;\n  apiUrl: string;\n  apiToken: string;\n  utm_source: string;\n  utm_medium: string;\n  utm_campaign: string;\n  utm_term: string;\n  showHeader?: boolean;\n  colorPrimary?: string;\n  textColor?: string;\n  backgroundColor?: string;\n  innerPadding?: string;\n}\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n  productId,\n  apiUrl,\n  apiToken,\n  utm_source,\n  utm_medium,\n  utm_campaign,\n  utm_term,\n  showHeader =  true,\n  colorPrimary = \"#F6C76B\",\n  textColor = \"#2F2F2F\",\n  backgroundColor = \"#cecece\",\n  innerPadding = \"1rem\",\n}, ref) => {\n  return (\n    <FormContainer ref={ref} >\n      <HeaderContainer>\n        <Title >Atendimento por mensagem</Title>\n\n        <Text >Informe seus dados e retornaremos a mensagem.</Text>\n      </HeaderContainer>\n\n      \n\n        <h6>* Campos de preenchimento obrigatório.</h6>\n\n        <ButtonContainer>\n        </ButtonContainer>\n\n        <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}\n        <a\n          href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          Política de Privacidade\n        </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n    </FormContainer>\n  );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\nexport default MitreFormComponent;\n","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n  direction: directionType = \"row\",\n  alignItems?: alignItemsType,\n  justifyContent?: jutifyContentType\n) {\n  return `\n    align-items:${alignItems || null};\n    display:flex;\n    flex-direction:${direction};\n    justify-content:${justifyContent || null};\n  `;\n}\n\nexport const alignX = `\n  left:50%;\n  transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n  left:50%;\n  top:50%;\n  transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n  &:hover {\n    cursor:pointer;\n    filter:brightness(98%);\n  }\n\n  &:active {\n    filter:brightness(95%);\n  }\n`;\n\nexport const opacityEffect = `\n  &:hover {\n    cursor:pointer;\n    opacity:.9;\n  }\n\n  &:active {\n    opacity:.7;\n  }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n  tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div`\n  ${flex(\"column\")}\n  align-items: stretch;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  /* Hide scrollbars for WebKit browsers */\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Hide scrollbars for Firefox */\n  scrollbar-width: none;\n\n  box-sizing: border-box;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n  margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: 0.75rem;\n`;\n\nexport const Form = styled.form`\n  label {\n    font-weight: 700;\n  }\n\n  input {\n    background: white;\n    margin-bottom: 0.75rem;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n    text-align: start;\n  }\n\n  a {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n  }\n\n  h6 {\n    text-align: start;\n    margin-left: 10px;\n  }\n\n  & > div {\n    margin-bottom: 10px;,\n  }\n\n  button {\n    ${opacityEffect}\n    color: var(--black);\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    width: 60%;\n    margin-top: 10px;\n    margin-bottom: 10px;\n  }\n`;\n\nexport const Title = styled.h2`\n  font-size: 1.25rem;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0em;\n`;\n\nexport const Text = styled.p`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 23px;\n  letter-spacing: 0em;\n  margin-top: 10px;\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAgC;;;ACKzB,SAAS,KACd,YAA2B,OAC3B,YACA,gBACA;AACA,SAAO;AAAA,kBACS,cAAc,IAAI;AAAA;AAAA,qBAEf,SAAS;AAAA,sBACR,kBAAkB,IAAI;AAAA;AAE5C;AAwBO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACvC7B,+BAAmB;AAEZ,IAAM,gBAAgB,yBAAAA,QAAO;AAAA,IAChC,KAAK,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBX,IAAM,kBAAkB,yBAAAA,QAAO;AAAA;AAAA;AAI/B,IAAM,kBAAkB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,IAAM,OAAO,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAmCrB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWZ,IAAM,QAAQ,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB,IAAM,OAAO,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AF9CrB;AAhBN,IAAM,qBAAqB,aAAAC,QAAM,WAAoD,CAAC;AAAA,EACpF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,eAAe;AACjB,GAAG,QAAQ;AACT,SACE,6CAAC,iBAAc,KACb;AAAA,iDAAC,mBACC;AAAA,kDAAC,SAAO,sCAAwB;AAAA,MAEhC,4CAAC,QAAM,2DAA6C;AAAA,OACtD;AAAA,IAIE,4CAAC,QAAG,uDAAsC;AAAA,IAE1C,4CAAC,mBACD;AAAA,IAEA,6CAAC,OAAE;AAAA;AAAA,MAAqK;AAAA,MACxK;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,KAAI;AAAA,UACL;AAAA;AAAA,MAED;AAAA,MAAI;AAAA,MAAgB;AAAA,MAAI;AAAA,MAAO;AAAA,MAAI;AAAA,OAAmI;AAAA,KAE1K;AAEJ,CAAC;AAED,mBAAmB,cAAc;AACjC,IAAO,eAAQ;;;ADnEf,IAAO,gBAAQ;","names":["styled","React"]}
+{"version":3,"sources":["../src/index.ts","../src/components/Form/index.tsx","../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/components/styles/global.ts"],"sourcesContent":["import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n","import React, { useState } from \"react\";\n\nimport { \n  FormContainer, \n  HeaderContainer, \n  ButtonContainer, \n  Form, \n  Title, \n  Text \n} from \"./styles\";\nimport FontLoader, { GlobalStyles } from \"../styles/global\";\n\nexport interface MitreFormComponentProps {\n  productId: string;\n  apiUrl: string;\n  apiToken: string;\n  utm_source: string;\n  utm_medium: string;\n  utm_campaign: string;\n  utm_term: string;\n  showHeader?: boolean;\n  colorPrimary?: string;\n  textColor?: string;\n  backgroundColor?: string;\n  innerPadding?: string;\n}\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n  productId,\n  apiUrl,\n  apiToken,\n  utm_source,\n  utm_medium,\n  utm_campaign,\n  utm_term,\n  showHeader =  true,\n  colorPrimary = \"#F6C76B\",\n  textColor = \"#2F2F2F\",\n  backgroundColor = \"#cecece\",\n  innerPadding = \"1rem\",\n}, ref) => {\n  return (\n    <>\n      <FontLoader />\n      <GlobalStyles />\n      <FormContainer ref={ref} >\n        <HeaderContainer>\n          <Title >Atendimento por mensagem</Title>\n\n          <Text >Informe seus dados e retornaremos a mensagem.</Text>\n        </HeaderContainer>\n\n        \n\n          <h6>* Campos de preenchimento obrigatório.</h6>\n\n          <ButtonContainer>\n          </ButtonContainer>\n\n          <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}\n          <a\n            href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            Política de Privacidade\n          </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n      </FormContainer>\n    </>\n  );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\nexport default MitreFormComponent;\n","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n  direction: directionType = \"row\",\n  alignItems?: alignItemsType,\n  justifyContent?: jutifyContentType\n) {\n  return `\n    align-items:${alignItems || null};\n    display:flex;\n    flex-direction:${direction};\n    justify-content:${justifyContent || null};\n  `;\n}\n\nexport const alignX = `\n  left:50%;\n  transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n  left:50%;\n  top:50%;\n  transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n  &:hover {\n    cursor:pointer;\n    filter:brightness(98%);\n  }\n\n  &:active {\n    filter:brightness(95%);\n  }\n`;\n\nexport const opacityEffect = `\n  &:hover {\n    cursor:pointer;\n    opacity:.9;\n  }\n\n  &:active {\n    opacity:.7;\n  }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n  tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div`\n  ${flex(\"column\")}\n  align-items: stretch;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  /* Hide scrollbars for WebKit browsers */\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Hide scrollbars for Firefox */\n  scrollbar-width: none;\n\n  box-sizing: border-box;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n  margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: 0.75rem;\n`;\n\nexport const Form = styled.form`\n  label {\n    font-weight: 700;\n  }\n\n  input {\n    background: white;\n    margin-bottom: 0.75rem;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n    text-align: start;\n  }\n\n  a {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n  }\n\n  h6 {\n    text-align: start;\n    margin-left: 10px;\n  }\n\n  & > div {\n    margin-bottom: 10px;,\n  }\n\n  button {\n    ${opacityEffect}\n    color: var(--black);\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    width: 60%;\n    margin-top: 10px;\n    margin-bottom: 10px;\n  }\n`;\n\nexport const Title = styled.h2`\n  font-size: 1.25rem;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0em;\n`;\n\nexport const Text = styled.p`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 23px;\n  letter-spacing: 0em;\n  margin-top: 10px;\n`;\n","import { createGlobalStyle } from \"styled-components\";\nimport React, { useEffect } from \"react\";\n\nexport const GlobalStyles = createGlobalStyle`\n  :root {\n    --red: #e52e4d;\n    --white: #FFF;\n    --black: #2F2F2F;\n    --black-2:#1E1E1E;\n    --alphaBlack: #000000;\n    --black-2:#1E1E1E;\n    --black-3:#353535;\n\n    --yellow-400:#FFD789;\n    --yellow-500: #F6C76B;\n    --gray-40:#F0F0F0;\n    --gray-45:#767676;\n    --gray-50: #686A69;\n    --gray-60: #8F8F8F;\n    --gray-100: #B6B6B6;\n    --gray-150: #B9B9B9;\n    --gray-200: #D2D2D2;\n    --gray-300: #EBEBEB;\n    --gray-400: #ECECEC;\n    --gray-500: #F4F4F4;\n    --gray-550:#6F6F6F;\n    --gray-600:#686868;\n    --gray-700: #535353;\n    --gray-800:#9D9D9D;\n    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);\n    --green:#57C06E;\n    --green-2:#2DCE68;\n    --blue:#007BFF;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  html {\n    scroll-behavior: smooth;\n\n    @media (max-width: 1080px) {\n      font-size: 93.75%;\n    }\n    @media (max-width: 720px) {\n      font-size: 87.5%;\n    }\n  }\n\n  body {\n    background: var(--white);\n    -webkit-font-smoothing: antialiased;\n  }\n\n  body, input, textarea, select, button {\n    font-family: \"Montserrat\", sans-serif;\n    font-weight: 400;\n  } \n\n  h1, h2, h3, h4, h5, h6, strong {\n    font-weight: 600;\n  }\n\n  button {\n    cursor: pointer;\n  }\n\n  [disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  .hidden {\n    overflow: hidden;\n  }\n\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n    background: var(--gray-500);\n    width: 6px;\n    height: 10px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: var(--gray-50);\n  }\n\n  .aligncenter {\n    text-align: center;\n  }\n\n  .width-190px {\n    width:190px;\n  }\n\n  .hidden-content {\n    display:none !important;\n  }\n\n  .global-margin-bottom {\n    margin-bottom:20px;\n  }\n\n  .background-light-gray {\n    background:#F4F4F4;\n  }\n\n  .full-width-and-height {\n    height:100%;\n    width:100%;\n  }\n\n  .flex-direction-column {\n    flex-direction:column;\n  }\n\n  .bold {\n    font-weight:700;\n  }\n\n  .margin-center-x {\n    margin:0 auto;\n  }\n\n  .border-none {\n    border:none;\n  }\n\n  .text-center {\n    text-align:center;\n  }\n\n  .relative {\n    position:relative;\n  }\n\n  /* accessibility */\n  body ._access-menu p._text-center{\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-size: 1.2rem!important;\n    margin-top: 6px;\n    margin-bottom: 3px;\n  } \n\n`;\n\nconst FontLoader: React.FC = () => {\n  useEffect(() => {\n    const link = document.createElement(\"link\");\n    link.href =\n      \"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap\";\n    link.rel = \"stylesheet\";\n    document.head.appendChild(link);\n  }, []);\n\n  return null;\n};\n\nexport default FontLoader;\n"],"mappings":"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","names":["import_react","styled","import_styled_components","React"]}

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/Form/index.tsx
-import React from "react";
+import React2 from "react";
 
 // src/components/styles/utils.ts
 function flex(direction = "row", alignItems, justifyContent) {
@@ -111,9 +111,169 @@ var Text = styled.p`
   margin-top: 10px;
 `;
 
+// src/components/styles/global.ts
+import { createGlobalStyle } from "styled-components";
+import { useEffect } from "react";
+var GlobalStyles = createGlobalStyle`
+  :root {
+    --red: #e52e4d;
+    --white: #FFF;
+    --black: #2F2F2F;
+    --black-2:#1E1E1E;
+    --alphaBlack: #000000;
+    --black-2:#1E1E1E;
+    --black-3:#353535;
+
+    --yellow-400:#FFD789;
+    --yellow-500: #F6C76B;
+    --gray-40:#F0F0F0;
+    --gray-45:#767676;
+    --gray-50: #686A69;
+    --gray-60: #8F8F8F;
+    --gray-100: #B6B6B6;
+    --gray-150: #B9B9B9;
+    --gray-200: #D2D2D2;
+    --gray-300: #EBEBEB;
+    --gray-400: #ECECEC;
+    --gray-500: #F4F4F4;
+    --gray-550:#6F6F6F;
+    --gray-600:#686868;
+    --gray-700: #535353;
+    --gray-800:#9D9D9D;
+    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);
+    --green:#57C06E;
+    --green-2:#2DCE68;
+    --blue:#007BFF;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+
+    @media (max-width: 1080px) {
+      font-size: 93.75%;
+    }
+    @media (max-width: 720px) {
+      font-size: 87.5%;
+    }
+  }
+
+  body {
+    background: var(--white);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  body, input, textarea, select, button {
+    font-family: "Montserrat", sans-serif;
+    font-weight: 400;
+  } 
+
+  h1, h2, h3, h4, h5, h6, strong {
+    font-weight: 600;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  [disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .hidden {
+    overflow: hidden;
+  }
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    background: var(--gray-500);
+    width: 6px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--gray-50);
+  }
+
+  .aligncenter {
+    text-align: center;
+  }
+
+  .width-190px {
+    width:190px;
+  }
+
+  .hidden-content {
+    display:none !important;
+  }
+
+  .global-margin-bottom {
+    margin-bottom:20px;
+  }
+
+  .background-light-gray {
+    background:#F4F4F4;
+  }
+
+  .full-width-and-height {
+    height:100%;
+    width:100%;
+  }
+
+  .flex-direction-column {
+    flex-direction:column;
+  }
+
+  .bold {
+    font-weight:700;
+  }
+
+  .margin-center-x {
+    margin:0 auto;
+  }
+
+  .border-none {
+    border:none;
+  }
+
+  .text-center {
+    text-align:center;
+  }
+
+  .relative {
+    position:relative;
+  }
+
+  /* accessibility */
+  body ._access-menu p._text-center{
+    font-family: "Montserrat", sans-serif;
+    font-style: italic;
+    font-size: 1.2rem!important;
+    margin-top: 6px;
+    margin-bottom: 3px;
+  } 
+
+`;
+var FontLoader = () => {
+  useEffect(() => {
+    const link = document.createElement("link");
+    link.href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap";
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+  }, []);
+  return null;
+};
+var global_default = FontLoader;
+
 // src/components/Form/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var MitreFormComponent = React.forwardRef(({
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MitreFormComponent = React2.forwardRef(({
   productId,
   apiUrl,
   apiToken,
@@ -127,30 +287,34 @@ var MitreFormComponent = React.forwardRef(({
   backgroundColor = "#cecece",
   innerPadding = "1rem"
 }, ref) => {
-  return /* @__PURE__ */ jsxs(FormContainer, { ref, children: [
-    /* @__PURE__ */ jsxs(HeaderContainer, { children: [
-      /* @__PURE__ */ jsx(Title, { children: "Atendimento por mensagem" }),
-      /* @__PURE__ */ jsx(Text, { children: "Informe seus dados e retornaremos a mensagem." })
-    ] }),
-    /* @__PURE__ */ jsx("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-    /* @__PURE__ */ jsx(ButtonContainer, {}),
-    /* @__PURE__ */ jsxs("p", { children: [
-      "A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
-      " ",
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "https://www.mitrerealty.com.br/politica-de-privacidade",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: "Pol\xEDtica de Privacidade"
-        }
-      ),
-      ". Ao clicar em ",
-      '"',
-      "enviar",
-      '"',
-      ", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(global_default, {}),
+    /* @__PURE__ */ jsx(GlobalStyles, {}),
+    /* @__PURE__ */ jsxs(FormContainer, { ref, children: [
+      /* @__PURE__ */ jsxs(HeaderContainer, { children: [
+        /* @__PURE__ */ jsx(Title, { children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ jsx(Text, { children: "Informe seus dados e retornaremos a mensagem." })
+      ] }),
+      /* @__PURE__ */ jsx("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+      /* @__PURE__ */ jsx(ButtonContainer, {}),
+      /* @__PURE__ */ jsxs("p", { children: [
+        "A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "https://www.mitrerealty.com.br/politica-de-privacidade",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Pol\xEDtica de Privacidade"
+          }
+        ),
+        ". Ao clicar em ",
+        '"',
+        "enviar",
+        '"',
+        ", voc\xEA concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por voc\xEA para finalidade informada"
+      ] })
     ] })
   ] });
 });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Form/index.tsx","../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { \n  FormContainer, \n  HeaderContainer, \n  ButtonContainer, \n  Form, \n  Title, \n  Text \n} from \"./styles\";\n\nexport interface MitreFormComponentProps {\n  productId: string;\n  apiUrl: string;\n  apiToken: string;\n  utm_source: string;\n  utm_medium: string;\n  utm_campaign: string;\n  utm_term: string;\n  showHeader?: boolean;\n  colorPrimary?: string;\n  textColor?: string;\n  backgroundColor?: string;\n  innerPadding?: string;\n}\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n  productId,\n  apiUrl,\n  apiToken,\n  utm_source,\n  utm_medium,\n  utm_campaign,\n  utm_term,\n  showHeader =  true,\n  colorPrimary = \"#F6C76B\",\n  textColor = \"#2F2F2F\",\n  backgroundColor = \"#cecece\",\n  innerPadding = \"1rem\",\n}, ref) => {\n  return (\n    <FormContainer ref={ref} >\n      <HeaderContainer>\n        <Title >Atendimento por mensagem</Title>\n\n        <Text >Informe seus dados e retornaremos a mensagem.</Text>\n      </HeaderContainer>\n\n      \n\n        <h6>* Campos de preenchimento obrigatório.</h6>\n\n        <ButtonContainer>\n        </ButtonContainer>\n\n        <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}\n        <a\n          href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          Política de Privacidade\n        </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n    </FormContainer>\n  );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\nexport default MitreFormComponent;\n","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n  direction: directionType = \"row\",\n  alignItems?: alignItemsType,\n  justifyContent?: jutifyContentType\n) {\n  return `\n    align-items:${alignItems || null};\n    display:flex;\n    flex-direction:${direction};\n    justify-content:${justifyContent || null};\n  `;\n}\n\nexport const alignX = `\n  left:50%;\n  transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n  left:50%;\n  top:50%;\n  transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n  &:hover {\n    cursor:pointer;\n    filter:brightness(98%);\n  }\n\n  &:active {\n    filter:brightness(95%);\n  }\n`;\n\nexport const opacityEffect = `\n  &:hover {\n    cursor:pointer;\n    opacity:.9;\n  }\n\n  &:active {\n    opacity:.7;\n  }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n  tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div`\n  ${flex(\"column\")}\n  align-items: stretch;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  /* Hide scrollbars for WebKit browsers */\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Hide scrollbars for Firefox */\n  scrollbar-width: none;\n\n  box-sizing: border-box;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n  margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: 0.75rem;\n`;\n\nexport const Form = styled.form`\n  label {\n    font-weight: 700;\n  }\n\n  input {\n    background: white;\n    margin-bottom: 0.75rem;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n    text-align: start;\n  }\n\n  a {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n  }\n\n  h6 {\n    text-align: start;\n    margin-left: 10px;\n  }\n\n  & > div {\n    margin-bottom: 10px;,\n  }\n\n  button {\n    ${opacityEffect}\n    color: var(--black);\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    width: 60%;\n    margin-top: 10px;\n    margin-bottom: 10px;\n  }\n`;\n\nexport const Title = styled.h2`\n  font-size: 1.25rem;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0em;\n`;\n\nexport const Text = styled.p`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 23px;\n  letter-spacing: 0em;\n  margin-top: 10px;\n`;\n","import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n"],"mappings":";AAAA,OAAO,WAAyB;;;ACKzB,SAAS,KACd,YAA2B,OAC3B,YACA,gBACA;AACA,SAAO;AAAA,kBACS,cAAc,IAAI;AAAA;AAAA,qBAEf,SAAS;AAAA,sBACR,kBAAkB,IAAI;AAAA;AAE5C;AAwBO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACvC7B,OAAO,YAAY;AAEZ,IAAM,gBAAgB,OAAO;AAAA,IAChC,KAAK,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBX,IAAM,kBAAkB,OAAO;AAAA;AAAA;AAI/B,IAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,IAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAmCrB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWZ,IAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB,IAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AF9CrB,SACE,KADF;AAhBN,IAAM,qBAAqB,MAAM,WAAoD,CAAC;AAAA,EACpF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,eAAe;AACjB,GAAG,QAAQ;AACT,SACE,qBAAC,iBAAc,KACb;AAAA,yBAAC,mBACC;AAAA,0BAAC,SAAO,sCAAwB;AAAA,MAEhC,oBAAC,QAAM,2DAA6C;AAAA,OACtD;AAAA,IAIE,oBAAC,QAAG,uDAAsC;AAAA,IAE1C,oBAAC,mBACD;AAAA,IAEA,qBAAC,OAAE;AAAA;AAAA,MAAqK;AAAA,MACxK;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,KAAI;AAAA,UACL;AAAA;AAAA,MAED;AAAA,MAAI;AAAA,MAAgB;AAAA,MAAI;AAAA,MAAO;AAAA,MAAI;AAAA,OAAmI;AAAA,KAE1K;AAEJ,CAAC;AAED,mBAAmB,cAAc;AACjC,IAAO,eAAQ;;;AGnEf,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../src/components/Form/index.tsx","../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/components/styles/global.ts","../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { \n  FormContainer, \n  HeaderContainer, \n  ButtonContainer, \n  Form, \n  Title, \n  Text \n} from \"./styles\";\nimport FontLoader, { GlobalStyles } from \"../styles/global\";\n\nexport interface MitreFormComponentProps {\n  productId: string;\n  apiUrl: string;\n  apiToken: string;\n  utm_source: string;\n  utm_medium: string;\n  utm_campaign: string;\n  utm_term: string;\n  showHeader?: boolean;\n  colorPrimary?: string;\n  textColor?: string;\n  backgroundColor?: string;\n  innerPadding?: string;\n}\n\nconst MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({\n  productId,\n  apiUrl,\n  apiToken,\n  utm_source,\n  utm_medium,\n  utm_campaign,\n  utm_term,\n  showHeader =  true,\n  colorPrimary = \"#F6C76B\",\n  textColor = \"#2F2F2F\",\n  backgroundColor = \"#cecece\",\n  innerPadding = \"1rem\",\n}, ref) => {\n  return (\n    <>\n      <FontLoader />\n      <GlobalStyles />\n      <FormContainer ref={ref} >\n        <HeaderContainer>\n          <Title >Atendimento por mensagem</Title>\n\n          <Text >Informe seus dados e retornaremos a mensagem.</Text>\n        </HeaderContainer>\n\n        \n\n          <h6>* Campos de preenchimento obrigatório.</h6>\n\n          <ButtonContainer>\n          </ButtonContainer>\n\n          <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}\n          <a\n            href=\"https://www.mitrerealty.com.br/politica-de-privacidade\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            Política de Privacidade\n          </a>. Ao clicar em {'\"'}enviar{'\"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>\n\n      </FormContainer>\n    </>\n  );\n});\n\nMitreFormComponent.displayName = \"MitreFormComponent\";\nexport default MitreFormComponent;\n","type directionType = \"column\" | \"row\";\ntype alignItemsType = \"center\" | \"flex-start\";\n\ntype jutifyContentType = \"center\" | \"space-between\";\n\nexport function flex(\n  direction: directionType = \"row\",\n  alignItems?: alignItemsType,\n  justifyContent?: jutifyContentType\n) {\n  return `\n    align-items:${alignItems || null};\n    display:flex;\n    flex-direction:${direction};\n    justify-content:${justifyContent || null};\n  `;\n}\n\nexport const alignX = `\n  left:50%;\n  transform:translateX(-50%);\n`;\n\nexport const alignXAndY = `\n  left:50%;\n  top:50%;\n  transform:translate(-50%, -50%);\n`;\n\nexport const darkEffect = `\n  &:hover {\n    cursor:pointer;\n    filter:brightness(98%);\n  }\n\n  &:active {\n    filter:brightness(95%);\n  }\n`;\n\nexport const opacityEffect = `\n  &:hover {\n    cursor:pointer;\n    opacity:.9;\n  }\n\n  &:active {\n    opacity:.7;\n  }\n`;\n\nexport const modalZIndex = 9999;\n\nexport const breakpoints = {\n  tablet: \"1024px\",\n};\n","import { flex, opacityEffect } from \"../styles/utils\";\nimport styled from \"styled-components\";\n\nexport const FormContainer = styled.div`\n  ${flex(\"column\")}\n  align-items: stretch;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  /* Hide scrollbars for WebKit browsers */\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Hide scrollbars for Firefox */\n  scrollbar-width: none;\n\n  box-sizing: border-box;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled.div`\n  margin-bottom: 1rem;\n`;\n\nexport const ButtonContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: 0.75rem;\n`;\n\nexport const Form = styled.form`\n  label {\n    font-weight: 700;\n  }\n\n  input {\n    background: white;\n    margin-bottom: 0.75rem;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n    text-align: start;\n  }\n\n  a {\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-weight: 200;\n    font-size: 0.8rem;\n  }\n\n  h6 {\n    text-align: start;\n    margin-left: 10px;\n  }\n\n  & > div {\n    margin-bottom: 10px;,\n  }\n\n  button {\n    ${opacityEffect}\n    color: var(--black);\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    width: 60%;\n    margin-top: 10px;\n    margin-bottom: 10px;\n  }\n`;\n\nexport const Title = styled.h2`\n  font-size: 1.25rem;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0em;\n`;\n\nexport const Text = styled.p`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 23px;\n  letter-spacing: 0em;\n  margin-top: 10px;\n`;\n","import { createGlobalStyle } from \"styled-components\";\nimport React, { useEffect } from \"react\";\n\nexport const GlobalStyles = createGlobalStyle`\n  :root {\n    --red: #e52e4d;\n    --white: #FFF;\n    --black: #2F2F2F;\n    --black-2:#1E1E1E;\n    --alphaBlack: #000000;\n    --black-2:#1E1E1E;\n    --black-3:#353535;\n\n    --yellow-400:#FFD789;\n    --yellow-500: #F6C76B;\n    --gray-40:#F0F0F0;\n    --gray-45:#767676;\n    --gray-50: #686A69;\n    --gray-60: #8F8F8F;\n    --gray-100: #B6B6B6;\n    --gray-150: #B9B9B9;\n    --gray-200: #D2D2D2;\n    --gray-300: #EBEBEB;\n    --gray-400: #ECECEC;\n    --gray-500: #F4F4F4;\n    --gray-550:#6F6F6F;\n    --gray-600:#686868;\n    --gray-700: #535353;\n    --gray-800:#9D9D9D;\n    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);\n    --green:#57C06E;\n    --green-2:#2DCE68;\n    --blue:#007BFF;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  html {\n    scroll-behavior: smooth;\n\n    @media (max-width: 1080px) {\n      font-size: 93.75%;\n    }\n    @media (max-width: 720px) {\n      font-size: 87.5%;\n    }\n  }\n\n  body {\n    background: var(--white);\n    -webkit-font-smoothing: antialiased;\n  }\n\n  body, input, textarea, select, button {\n    font-family: \"Montserrat\", sans-serif;\n    font-weight: 400;\n  } \n\n  h1, h2, h3, h4, h5, h6, strong {\n    font-weight: 600;\n  }\n\n  button {\n    cursor: pointer;\n  }\n\n  [disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  .hidden {\n    overflow: hidden;\n  }\n\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n    background: var(--gray-500);\n    width: 6px;\n    height: 10px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: var(--gray-50);\n  }\n\n  .aligncenter {\n    text-align: center;\n  }\n\n  .width-190px {\n    width:190px;\n  }\n\n  .hidden-content {\n    display:none !important;\n  }\n\n  .global-margin-bottom {\n    margin-bottom:20px;\n  }\n\n  .background-light-gray {\n    background:#F4F4F4;\n  }\n\n  .full-width-and-height {\n    height:100%;\n    width:100%;\n  }\n\n  .flex-direction-column {\n    flex-direction:column;\n  }\n\n  .bold {\n    font-weight:700;\n  }\n\n  .margin-center-x {\n    margin:0 auto;\n  }\n\n  .border-none {\n    border:none;\n  }\n\n  .text-center {\n    text-align:center;\n  }\n\n  .relative {\n    position:relative;\n  }\n\n  /* accessibility */\n  body ._access-menu p._text-center{\n    font-family: \"Montserrat\", sans-serif;\n    font-style: italic;\n    font-size: 1.2rem!important;\n    margin-top: 6px;\n    margin-bottom: 3px;\n  } \n\n`;\n\nconst FontLoader: React.FC = () => {\n  useEffect(() => {\n    const link = document.createElement(\"link\");\n    link.href =\n      \"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap\";\n    link.rel = \"stylesheet\";\n    document.head.appendChild(link);\n  }, []);\n\n  return null;\n};\n\nexport default FontLoader;\n","import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n"],"mappings":"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","names":["React","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mitre-form-component",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "private": false,
   "description": "Componente de formulário de captação de leads para ser usado em projetos da Mitre Realty.",
   "type": "module",