@saasquatch/mint-components 2.2.1-3 → 2.2.1-4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.2.1-3",
+  "version": "2.2.1-4",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",

package/dist/mint-components/p-bc7a8051.entry.js

@@ -1,25 +0,0 @@
-import{h as r,r as t}from"./p-083180bf.js";import{i as a}from"./p-f2793763.js";import{k as o,f as e,n}from"./p-a7fc1e02.js";import{d as s,q as i,w as l,J as p,$ as c,i as d,o as u}from"./p-d0993bb9.js";import{c as m}from"./p-c1086930.js";import{g as b}from"./p-9ec99ced.js";import{c as f}from"./p-cef45012.js";import{T as h}from"./p-c813ec64.js";import{S as v,V as y}from"./p-38c7775a.js";import{u as q}from"./p-3366b81e.js";const x=s.gql`
-  mutation upsertUser($userInput: UserInput!) {
-    upsertUser(userInput: $userInput) {
-      id
-      accountId
-      email
-    }
-  }
-`,g=s.gql`
-  query user {
-    viewer {
-      ... on User {
-        id
-        accountId
-        email
-        impactConnection {
-          user {
-            id
-            email
-          }
-        }
-      }
-    }
-  }
-`;const k=f({Wrapper:{display:"flex",flexDirection:"column",gap:"var(--sl-spacing-medium)",marginTop:"var(--sl-spacing-medium)"},InputsContainer:{display:"flex",gap:"var(--sl-spacing-medium)",position:"relative",flexDirection:"column",maxWidth:"320px"},ContinueButton:{width:"100%",maxWidth:"100px"},SkeletonOne:{width:"50%",height:"16px"},SkeletonTwo:{width:"30%",height:"34px"},SkeletonThree:{width:"15%",height:"24px"},ErrorInput:{"&::part(base)":{border:"var(--sqm-border-thickness) solid var(--sqm-danger-color-border)",borderRadius:"var(--sqm-input-border-radius)"},"&::part(help-text)":{color:"var(--sqm-danger-color-text)"}}}),w=k.toString();function j(t){const{states:o,callbacks:e,text:n}=t;return r("div",{part:"sqm-base"},r("style",{type:"text/css"},'\n:host {\n  display: block;\n}\n:host([hidden]): {\n  display: none;\n}\n\na {\n  color: inherit;\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n*::part(primarybutton-base),\nsl-button[type="primary"]::part(base) {\n  font-family: var(--sqm-primary-font);\n  width: 100%;\n  background-color: var(--sqm-primary-button-background);\n  color: var(--sqm-primary-button-color);\n  border-color: var(--sqm-primary-button-color-border);\n  border-radius: var(--sqm-primary-button-radius);\n}\n\n*::part(primarybutton-base):hover,\nsl-button[type="primary"]::part(base):hover{\n  background-color: var(--sqm-primary-button-background-hover);\n  border-color: var(--sqm-primary-button-border-color-hover);\n  color: var(--sqm-primary-button-color-hover);\n}\n\n\n*::part(primarybutton-base):focus,\nsl-button[type="primary"]::part(base):focus {\n  box-shadow: none;\n}\n\n*::part(secondarybutton-base),\nsl-button[type="secondary"]::part(base) {\nfont-family: var(--sqm-primary-font);\n  background-color: var(--sqm-secondary-button-background);\n  color: var(--sqm-secondary-button-color);\n  border-color: var(--sqm-secondary-button-color-border);\n  border-radius: var(--sqm-secondary-button-radius);\n}\n\n*::part(secondarybutton-base):hover,\nsl-button[type="secondary"]::part(base):hover {\n  background-color: var(--sqm-secondary-button-background-hover);\n  color: var(--sqm-secondary-button-color-hover);\n  border-color: var(--sqm-secondary-button-border-color-hover);\n}\n\n*::part(input-label), *::part(select-label), *::part(textarea-label){\n  font-family: var(--sqm-primary-font);\n  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));\n  font-weight: var(--sl-font-weight-semibold);\n  color: var(--sqm-input-label-color, var(--sqm-text), black);\n}\n\n*::part(input-base), *::part(select-base), *::part(textarea-base){\n  font-family: var(--sqm-primary-font);\n  background-color: var(--sqm-input-background, #fff);\n  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);\n  color: var(--sqm-input-color, white);\n  border-width: var(--sqm-border-thickness, 1px);\n}\n\n*::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{\n  border-color: var(--sqm-border-color-hover);\n}\n\n*::part(input-base):focus, *::part(select-base):focus, *::part(textarea-base):focus{\n  border-color: var(--sqm-border-color-focus);\n}\n\nsqm-name-fields::part(input-base) {\n  font-family: var(--sqm-primary-font);\n  background-color: var(--sqm-input-background, #fff);\n  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);\n  color: var(--sqm-input-color, white);\n  border-width: var(--sqm-border-thickness, 1px);\n}\n\nsl-input::part(base):focus,\nsl-select::part(form-control-wrapper):focus,\nsl-textarea::part(textarea-label):focus {\n  border-color: var(--sqm-border-color-focus);\n}\n\n*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{\n  background: var(--sqm-input-disabled-background, #f5f5f5);\n  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));\n}\n\n*::part(input):-webkit-autofill {\n  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;\n  -webkit-text-fill-color: var(--sqm-input-color, white) !important;\n}\n\n*::part(input):-webkit-autofill:hover {\n  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;\n  -webkit-text-fill-color: var(--sqm-input-color, white) !important;\n}\n\n*::part(input):-webkit-autofill:focus {\n  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;\n  -webkit-text-fill-color: var(--sqm-input-color, white) !important;\n}\n\n*::part(input)::placeholder,\n*::part(select)::placeholder, \n*::part(textarea)::placeholder {\n  font-family: var(--sqm-primary-font);\n  color: var(--sqm-text-subdued);\n}\n\n*::part(input)::-webkit-input-placeholder,\n*::part(select)::-webkit-input-placeholder,\n*::part(textarea)::-webkit-input-placeholder {\n  font-family: var(--sqm-primary-font);\n  color: var(--sqm-text-subdued);\n}\n\n*::part(input)::-moz-placeholder,\n*::part(select)::-moz-placeholder,\n*::part(textarea)::-moz-placeholder {\n  font-family: var(--sqm-primary-font);\n  opacity: 1; /* Firefox adds an opacity to placeholders by default */\n  color: var(--sqm-text-subdued);\n}\n\n*::part(input)::-ms-input-placeholder,\n*::part(select)::-ms-input-placeholder,\n*::part(textarea)::-ms-input-placeholder {\n  font-family: var(--sqm-primary-font);\n  color: var(--sqm-text-subdued);\n}\n\n\n',w),o.sendCodeError&&r("sqm-form-message",{type:"error"},r("p",{part:"alert-title"},n.sendCodeErrorHeader),a.formatMessage({id:"sendCodeErrorDescription",defaultMessage:n.sendCodeErrorDescription},{supportLink:r("a",{target:"_blank",href:"mailto:advocate-support@impact.com"},n.supportLink)})),o.initialLoading?r("div",{class:k.classes.Wrapper},r("sqm-skeleton",{height:"16px",width:"50%"}),r("sqm-skeleton",{height:"16px",width:"50%"}),r("sqm-skeleton",{height:"16px",width:"50%"}),r("sqm-skeleton",{height:"34px",width:"30%"}),r("sqm-skeleton",{height:"24px",width:"15%"}),r("sl-button",{submit:!0,class:k.classes.ContinueButton,loading:!0,exportparts:"base: primarybutton-base",type:"primary"},n.sendCodeText)):r("div",{class:k.classes.Wrapper},r(h,{type:"p"},n.verifyEmailHeaderText),r("sl-form",{"onSl-submit":e.submitEmail},r("div",{class:k.classes.InputsContainer},r("sl-input",Object.assign({exportparts:"label: input-label, base: input-base",label:n.emailLabel,value:o.email||"",type:"email",id:"email",name:"email",disabled:!!o.email||o.loading},o.error?{class:k.classes.ErrorInput,helpText:n.emailValidationErrorText}:{})),r("sl-button",{submit:!0,class:k.classes.ContinueButton,loading:o.loading,exportparts:"base: primarybutton-base",type:"primary"},n.sendCodeText)))))}const I=class{constructor(r){t(this,r),this.verifyEmailHeaderText="Start by verifying your email. We’ll send you a code through our referral provider, impact.com.",this.sendCodeErrorHeader="There was an error sending your code",this.supportLink="support team",this.sendCodeErrorDescription="Please try again. If this problem continues, contact our program {supportLink}.",this.emailLabel="Email",this.sendCodeText="Send code",this.emailValidationErrorText="Please enter a valid email",n(this)}disconnectedCallback(){}getTextProps(){return b(this)}render(){const t=d()?function(r){const t=u(v);return m({states:{error:!0,initialLoading:!1,loading:!1,email:"test@example.com",sendCodeError:!0},callbacks:{submitEmail:async()=>t(!0)},text:r.getTextProps()},r.demoData||{},{arrayMerge:(r,t)=>t})}(this):function(r){const[t,a]=i(v),[n,s]=i(y),[d,u]=o(!1),[m,b]=o(!1),[f,h]=o(!1),{initialized:k,send:[w,{}]}=q(),[j]=function(){const r=p(),[t,{loading:a,data:o,errors:e}]=c(x);return[async a=>{try{const o=await t({userInput:{id:r.id,accountId:r.accountId,email:a}});if(o instanceof Error||!o)throw new Error;return o}catch(r){return void console.error("Could not set email on user",r)}},{loading:a,data:o,errors:e}]}(),[I,z]=o(!0),{data:E,loading:C}=l(g,{}),S=/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;return e((()=>{(null==E?void 0:E.viewer)&&u(!!E.viewer.email)}),[E]),e((()=>{k&&z(!1)}),[k]),{callbacks:{submitEmail:async r=>{if(r.preventDefault(),!(null==E?void 0:E.viewer))return;z(!0);const t=E.viewer.email;if(!t){const t=r.detail.formData.get("email").toString();if(!S.test(t))return void b(!0);const a=await j(t);a&&a.user.email||b(!0)}if(!k)return;const o=await w();o&&o.success?(s(t),a(!0)):h(!0),z(!1)}},states:{loading:I,initialLoading:C&&!k,error:m,email:null==E?void 0:E.viewer.email,sendCodeError:f},text:r.getTextProps()}}(this);return r(j,Object.assign({},t))}};export{I as sqm_email_verification}