npm - mitre-form-component - Versions diffs - 0.0.13 → 0.0.15 - Mend

mitre-form-component 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs CHANGED Viewed

@@ -34,6 +34,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
+// src/components/Form/index.tsx
+var import_react2 = __toESM(require("react"), 1);
 // src/components/styles/utils.ts
 function flex(direction = "row", alignItems, justifyContent) {
   return `
@@ -144,36 +147,213 @@ 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 = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormContainer, { 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"
+var MitreFormComponent = import_react2.default.forwardRef(({
+  productId,
+  apiUrl,
+  apiToken,
+  utm_source,
+  utm_medium,
+  utm_campaign,
+  utm_term,
+  showHeader = true,
+  colorPrimary = "#F6C76B",
+  textColor = "#2F2F2F",
+  backgroundColor = "#cecece",
+  innerPadding = "1rem"
+}, ref) => {
+  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"
+      ] })
     ] })
   ] });
-};
+});
 MitreFormComponent.displayName = "MitreFormComponent";
 var Form_default = MitreFormComponent;

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/components/Form/index.tsx"],"sourcesContent":["import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\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 React, { useState } from \"react\";\n\nimport { \n FormContainer, \n HeaderContainer, \n ButtonContainer, \n Form, \n Title, \n Text \n} from \"./styles\";\n\nconst MitreFormComponent = ( ) => {\n \n return (\n <FormContainer >\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACKO,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;;;ACzErB;AAJN,IAAM,qBAAqB,MAAO;AAEhC,SACE,6CAAC,iBACC;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;AAEA,mBAAmB,cAAc;AACjC,IAAO,eAAQ;;;AHxCf,IAAO,gBAAQ;","names":["styled"]}
1	+ {"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.d.cts CHANGED Viewed

@@ -1,8 +1,19 @@
 import React from 'react';
-declare const MitreFormComponent: {
-    (): React.JSX.Element;
-    displayName: string;
-};
+interface MitreFormComponentProps {
+    productId: string;
+    apiUrl: string;
+    apiToken: string;
+    utm_source: string;
+    utm_medium: string;
+    utm_campaign: string;
+    utm_term: string;
+    showHeader?: boolean;
+    colorPrimary?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    innerPadding?: string;
+}
+declare const MitreFormComponent: React.ForwardRefExoticComponent<MitreFormComponentProps & React.RefAttributes<HTMLDivElement>>;
 export { MitreFormComponent as default };

package/dist/index.d.ts CHANGED Viewed

@@ -1,8 +1,19 @@
 import React from 'react';
-declare const MitreFormComponent: {
-    (): React.JSX.Element;
-    displayName: string;
-};
+interface MitreFormComponentProps {
+    productId: string;
+    apiUrl: string;
+    apiToken: string;
+    utm_source: string;
+    utm_medium: string;
+    utm_campaign: string;
+    utm_term: string;
+    showHeader?: boolean;
+    colorPrimary?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    innerPadding?: string;
+}
+declare const MitreFormComponent: React.ForwardRefExoticComponent<MitreFormComponentProps & React.RefAttributes<HTMLDivElement>>;
 export { MitreFormComponent as default };

package/dist/index.js CHANGED Viewed

@@ -1,3 +1,6 @@
+// src/components/Form/index.tsx
+import React2 from "react";
 // src/components/styles/utils.ts
 function flex(direction = "row", alignItems, justifyContent) {
   return `
@@ -108,36 +111,213 @@ 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 = () => {
-  return /* @__PURE__ */ jsxs(FormContainer, { 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"
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MitreFormComponent = React2.forwardRef(({
+  productId,
+  apiUrl,
+  apiToken,
+  utm_source,
+  utm_medium,
+  utm_campaign,
+  utm_term,
+  showHeader = true,
+  colorPrimary = "#F6C76B",
+  textColor = "#2F2F2F",
+  backgroundColor = "#cecece",
+  innerPadding = "1rem"
+}, ref) => {
+  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"
+      ] })
     ] })
   ] });
-};
+});
 MitreFormComponent.displayName = "MitreFormComponent";
 var Form_default = MitreFormComponent;

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/styles/utils.ts","../src/components/Form/styles.ts","../src/components/Form/index.tsx","../src/index.ts"],"sourcesContent":["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 React, { useState } from \"react\";\n\nimport { \n FormContainer, \n HeaderContainer, \n ButtonContainer, \n Form, \n Title, \n Text \n} from \"./styles\";\n\nconst MitreFormComponent = ( ) => {\n \n return (\n <FormContainer >\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","import MitreFormComponent from \"./components/Form\";\n\nexport default MitreFormComponent;\n//export type { MitreFormComponentProps } from \"./components/Form\";\n"],"mappings":";AAKO,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;;;ACzErB,SACE,KADF;AAJN,IAAM,qBAAqB,MAAO;AAEhC,SACE,qBAAC,iBACC;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;AAEA,mBAAmB,cAAc;AACjC,IAAO,eAAQ;;;ACxCf,IAAO,gBAAQ;","names":[]}
1	+ {"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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mitre-form-component",
-  "version": "0.0.13",
+  "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",