@stackshift-ui/signin-signup 6.0.5 → 6.0.6

package/dist/chunk-4YOZ4R43.mjs

@@ -0,0 +1,266 @@
+import {
+  logoLink,
+  thankYouPageLink
+} from "./chunk-NGYQAQA4.mjs";
+
+// src/signin_signup_b.tsx
+import { Button } from "@stackshift-ui/button";
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Form } from "@stackshift-ui/form";
+import { FormField } from "@stackshift-ui/form-field";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Input } from "@stackshift-ui/input";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SigninSignup_B({ logo, form, formLinks, signInLink }) {
+  return /* @__PURE__ */ jsx(Section, { className: "py-10 bg-primary lg:py-20", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Container, { maxWidth: 576, children: [
+    /* @__PURE__ */ jsx(LogoSection, { logo }),
+    /* @__PURE__ */ jsxs(Card, { borderRadius: "md", className: "p-6 mb-6 bg-white lg:mb-10 lg:p-12", children: [
+      /* @__PURE__ */ jsx(SubtitleAndHeadingText, { form }),
+      /* @__PURE__ */ jsx(SignupForm, { form, signInLink })
+    ] }),
+    /* @__PURE__ */ jsx(FormLinks, { formLinks })
+  ] }) }) });
+}
+function LogoSection({ logo }) {
+  var _a;
+  if (!logo) return null;
+  return /* @__PURE__ */ jsx("div", { className: "mb-10", children: /* @__PURE__ */ jsx(
+    Link,
+    {
+      "aria-label": `Go to ${logoLink(logo) === "/" ? "home page" : logoLink(logo)}`,
+      className: "flex justify-center mx-auto text-3xl font-bold leading-none",
+      href: logoLink(logo),
+      target: logo == null ? void 0 : logo.linkTarget,
+      rel: (logo == null ? void 0 : logo.linkTarget) === "_blank" ? "noopener noreferrer" : "",
+      children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: logo == null ? void 0 : logo.image,
+          alt: (_a = logo == null ? void 0 : logo.alt) != null ? _a : "signup-logo",
+          width: 100,
+          height: 100,
+          className: "flex justify-center text-3xl font-bold leading-none text-white"
+        }
+      )
+    }
+  ) });
+}
+function SubtitleAndHeadingText({ form }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+    /* @__PURE__ */ jsx(Text, { muted: true, children: form == null ? void 0 : form.subtitle }),
+    /* @__PURE__ */ jsx(Heading, { className: "text-2xl lg:text-2xl", children: form == null ? void 0 : form.name })
+  ] });
+}
+function SignupForm({ form, signInLink }) {
+  var _a;
+  if (!(form == null ? void 0 : form.fields)) return null;
+  const [showPasswords, setShowPasswords] = React.useState({});
+  const togglePasswordVisibility = (fieldName) => {
+    setShowPasswords((prev) => ({
+      ...prev,
+      [fieldName]: !prev[fieldName]
+    }));
+  };
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      id: (_a = form == null ? void 0 : form.id) != null ? _a : void 0,
+      name: "SignUp-VariantB-Form",
+      className: "form-signup",
+      thankyouPage: thankYouPageLink(form == null ? void 0 : form.thankYouPage),
+      children: [
+        /* @__PURE__ */ jsx(
+          FormFields,
+          {
+            form,
+            showPassword: showPasswords,
+            togglePasswordVisibility
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "webriq-recaptcha" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(FormButtonLabel, { form }),
+          /* @__PURE__ */ jsx(SigninLink, { signInLink })
+        ] })
+      ]
+    }
+  );
+}
+function FormFields({
+  form,
+  showPassword,
+  togglePasswordVisibility
+}) {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(Flex, { className: "flex-col lg:flex-row gap-3", children: (_b = (_a = form == null ? void 0 : form.fields) == null ? void 0 : _a.slice(0, 2)) == null ? void 0 : _b.map((formFields, index) => {
+      var _a2;
+      return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+        FormField,
+        {
+          noLabel: true,
+          variant: "secondary",
+          placeholder: formFields == null ? void 0 : formFields.placeholder,
+          required: formFields == null ? void 0 : formFields.isRequired,
+          name: (_a2 = formFields == null ? void 0 : formFields.name) != null ? _a2 : "",
+          items: formFields == null ? void 0 : formFields.items,
+          type: formFields == null ? void 0 : formFields.type,
+          ...formFields
+        }
+      ) }, index);
+    }) }),
+    (_d = (_c = form == null ? void 0 : form.fields) == null ? void 0 : _c.slice(2)) == null ? void 0 : _d.map((formFields, index) => {
+      var _a2;
+      return /* @__PURE__ */ jsx("div", { className: "my-3", children: (formFields == null ? void 0 : formFields.type) === "inputPassword" && formFields.name ? /* @__PURE__ */ jsx(
+        PasswordField,
+        {
+          formFields,
+          showPassword: showPassword[formFields.name] || false,
+          togglePassword: () => togglePasswordVisibility(formFields.name)
+        }
+      ) : /* @__PURE__ */ jsx(
+        FormField,
+        {
+          noLabel: true,
+          variant: "secondary",
+          name: (_a2 = formFields == null ? void 0 : formFields.name) != null ? _a2 : "",
+          placeholder: formFields == null ? void 0 : formFields.placeholder,
+          required: formFields == null ? void 0 : formFields.isRequired,
+          items: formFields == null ? void 0 : formFields.items,
+          type: formFields == null ? void 0 : formFields.type,
+          ...formFields
+        }
+      ) }, index);
+    })
+  ] });
+}
+function PasswordField({
+  formFields,
+  showPassword,
+  togglePassword
+}) {
+  var _a;
+  return /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        noLabel: true,
+        ariaLabel: (_a = formFields == null ? void 0 : formFields.placeholder) != null ? _a : formFields == null ? void 0 : formFields.name,
+        variant: "secondary",
+        type: showPassword ? "text" : "password",
+        placeholder: formFields == null ? void 0 : formFields.placeholder,
+        name: formFields == null ? void 0 : formFields.name,
+        required: formFields == null ? void 0 : formFields.isRequired
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "unstyled",
+        as: "button",
+        ariaLabel: showPassword ? "Show password" : "Hide password",
+        className: "focus:outline-none mr-4",
+        type: "button",
+        onClick: togglePassword,
+        children: /* @__PURE__ */ jsx(PasswordIcon, { showPassword })
+      }
+    )
+  ] });
+}
+function FormButtonLabel({ form }) {
+  var _a;
+  if (!(form == null ? void 0 : form.buttonLabel)) return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      as: "button",
+      className: "w-full py-4 mb-3",
+      ariaLabel: (_a = form == null ? void 0 : form.buttonLabel) != null ? _a : "Sign Up form submit button",
+      variant: "custom",
+      type: "submit",
+      children: form == null ? void 0 : form.buttonLabel
+    }
+  );
+}
+function SigninLink({ signInLink }) {
+  if (!(signInLink == null ? void 0 : signInLink.label)) return null;
+  return /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-900", children: [
+    /* @__PURE__ */ jsx("span", { children: "Already have an account?" }),
+    " ",
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        as: "link",
+        variant: "link",
+        link: signInLink,
+        className: "text-xs text-primary hover:underline",
+        ariaLabel: signInLink == null ? void 0 : signInLink.label,
+        children: signInLink == null ? void 0 : signInLink.label
+      }
+    )
+  ] });
+}
+function FormLinks({ formLinks }) {
+  if (!formLinks) return null;
+  return /* @__PURE__ */ jsx("p", { className: "text-xs text-center text-secondary-foreground", children: formLinks == null ? void 0 : formLinks.map((link, index, { length }) => /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        as: "link",
+        variant: "link",
+        link,
+        className: "text-xs underline text-secondary-foreground hover:text-gray-50",
+        ariaLabel: link == null ? void 0 : link.label,
+        children: link == null ? void 0 : link.label
+      }
+    ),
+    index === length - 1 ? null : index === length - 2 ? /* @__PURE__ */ jsx("span", { children: "\xA0and\xA0" }) : /* @__PURE__ */ jsx("span", { children: "\xA0,\xA0" })
+  ] }, index)) });
+}
+function PasswordIcon({ showPassword }) {
+  return /* @__PURE__ */ jsx(React.Fragment, { children: showPassword ? /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "w-5 h-5 my-auto ml-4 text-gray-500",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      role: "img",
+      width: "1em",
+      height: "1em",
+      preserveAspectRatio: "xMidYMid meet",
+      viewBox: "0 0 16 16",
+      children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
+        /* @__PURE__ */ jsx("path", { d: "M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755c-.165.165-.337.328-.517.486l.708.709z" }),
+        /* @__PURE__ */ jsx("path", { d: "M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" }),
+        /* @__PURE__ */ jsx("path", { d: "M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884l-12-12l.708-.708l12 12l-.708.708z" })
+      ] })
+    }
+  ) : /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "w-5 h-5 my-auto ml-4 text-gray-500",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      role: "img",
+      width: "1em",
+      height: "1em",
+      preserveAspectRatio: "xMidYMid meet",
+      viewBox: "0 0 16 16",
+      children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
+        /* @__PURE__ */ jsx("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0z" })
+      ] })
+    }
+  ) });
+}
+
+export {
+  SigninSignup_B
+};

package/dist/chunk-7U35HRM4.mjs

@@ -0,0 +1 @@
+import{a as i,b as y}from"./chunk-4DDN6JI4.mjs";import{Button as x}from"@stackshift-ui/button";import{Container as w}from"@stackshift-ui/container";import{Flex as v}from"@stackshift-ui/flex";import{Form as S}from"@stackshift-ui/form";import{FormField as g}from"@stackshift-ui/form-field";import{Heading as z}from"@stackshift-ui/heading";import{Image as R}from"@stackshift-ui/image";import{Input as N}from"@stackshift-ui/input";import{Link as A}from"@stackshift-ui/link";import{Section as L}from"@stackshift-ui/section";import{Text as C}from"@stackshift-ui/text";import M from"react";import{Fragment as P,jsx as e,jsxs as c}from"react/jsx-runtime";function q({logo:a,form:n,formLinks:u,signInLink:p}){return e(L,{className:"py-10 rounded-md bg-gray-50 lg:py-20",children:c(w,{maxWidth:576,children:[e(B,{logo:a}),c(w,{className:"mb-6 text-center lg:mb-10",children:[e(T,{form:n}),e(Y,{form:n,signInLink:p,thankYouPage:y(n==null?void 0:n.thankYouPage)})]}),e(d,{formLinks:u})]})})}function B({logo:a}){var n;return a?e("div",{className:"mb-10",children:e(A,{"aria-label":`Go to ${i(a)==="/"?"home page":i(a)}`,className:"flex justify-center mx-auto text-3xl font-bold leading-none",href:i(a),target:a==null?void 0:a.linkTarget,rel:(a==null?void 0:a.linkTarget)==="_blank"?"noopener noreferrer":"",children:e(R,{src:a==null?void 0:a.image,alt:(n=a==null?void 0:a.alt)!=null?n:"signup-logo",width:100,height:100,className:"flex justify-center mx-auto text-3xl font-bold leading-none"})})}):null}function T({form:a}){return c("div",{className:"mb-6",children:[a!=null&&a.subtitle?e(C,{muted:!0,children:a==null?void 0:a.subtitle}):null,a!=null&&a.name?e(z,{className:"text-2xl lg:text-2xl",children:a==null?void 0:a.name}):null]})}function Y({form:a,signInLink:n,thankYouPage:u}){var b,s;if(!(a!=null&&a.fields))return null;let[p,l]=M.useState({}),t=h=>{l(r=>({...r,[h]:!r[h]}))};return c(S,{id:(b=a==null?void 0:a.id)!=null?b:void 0,name:"SignUp-VariantA-Form",className:"form-signup",thankyouPage:u,children:[e(H,{form:a,showPasswords:p,togglePasswordVisibility:t}),e("div",{children:e("div",{className:"webriq-recaptcha"})}),e("div",{className:"text-center",children:(a==null?void 0:a.buttonLabel)&&e(x,{as:"button",variant:"custom",ariaLabel:(s=a==null?void 0:a.buttonLabel)!=null?s:"Sign Up form submit button",className:"w-full py-4 text-sm font-bold tex-gray-50",type:"submit",children:a==null?void 0:a.buttonLabel})}),n&&e(U,{signInLink:n})]})}function H({form:a,showPasswords:n,togglePasswordVisibility:u}){var p,l;return c(P,{children:[e(v,{wrap:!0,className:"-mx-2",children:(p=a==null?void 0:a.fields)==null?void 0:p.slice(0,2).map((t,b)=>{var s;return e("div",{className:"w-full px-2 mb-3 lg:w-1/2",children:t.type==="inputText"?e(N,{textSize:"sm",variant:"primary",noLabel:!0,placeholder:t==null?void 0:t.placeholder,required:t==null?void 0:t.isRequired,className:"w-full py-4 text-xs bg-white",name:t==null?void 0:t.name,ariaLabel:t==null?void 0:t.label,...t,type:"text"}):e(g,{className:"py-4",textSize:"sm",noLabel:!0,variant:"primary",name:(s=t==null?void 0:t.name)!=null?s:"",placeholder:t==null?void 0:t.placeholder,required:t==null?void 0:t.isRequired,items:t==null?void 0:t.items,type:t==null?void 0:t.type,...t})},b)})}),(l=a==null?void 0:a.fields)==null?void 0:l.slice(2).map((t,b)=>{var s;return e("div",{className:"my-3",children:t.type==="inputPassword"&&t.name?e(V,{formFields:t,showPassword:n[t.name]||!1,togglePassword:()=>u(t.name)}):e(g,{className:"py-4",textSize:"sm",noLabel:!0,variant:"primary",placeholder:t==null?void 0:t.placeholder,required:t==null?void 0:t.isRequired,name:(s=t==null?void 0:t.name)!=null?s:"",items:t==null?void 0:t.items,type:t==null?void 0:t.type,...t})},b)})]})}function U({signInLink:a}){return a!=null&&a.label?c("div",{className:"w-full text-center mt-3",children:[e("span",{className:"text-xs text-gray-500",children:"Already have an account? "}),e(x,{as:"link",variant:"link",link:a,className:"text-xs text-primary cursor-pointer hover:underline",ariaLabel:a==null?void 0:a.label,children:a==null?void 0:a.label})]}):null}function V({formFields:a,showPassword:n,togglePassword:u}){var p;return c(v,{className:"relative",children:[e(N,{className:"py-4",textSize:"sm",noLabel:!0,"aria-label":(p=a==null?void 0:a.placeholder)!=null?p:a==null?void 0:a.name,variant:"primary",type:n?"text":"password",placeholder:a==null?void 0:a.placeholder,name:a==null?void 0:a.name,required:a==null?void 0:a.isRequired}),e(x,{as:"button",variant:"unstyled",ariaLabel:n?"Show password":"Hide password",className:"absolute top-0 right-0 h-full p-2",type:"button",onClick:u,children:e(W,{showPassword:n})})]})}function d({formLinks:a}){return a?e("p",{className:"mt-10 text-xs text-center text-gray-700",children:a==null?void 0:a.map((n,u,{length:p})=>c("span",{children:[e(x,{as:"link",variant:"link",link:n,className:"text-xs text-primary cursor-pointer hover:underline",ariaLabel:n==null?void 0:n.label,children:n==null?void 0:n.label}),u===p-1?null:u===p-2?e("span",{children:"\xA0and\xA0"}):e("span",{children:"\xA0,\xA0"})]},u))}):null}function W({showPassword:a}){return e(P,{children:a?e("svg",{className:"w-5 h-5 my-auto ml-4 text-gray-500",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 16 16",children:c("g",{fill:"currentColor",children:[e("path",{d:"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755c-.165.165-.337.328-.517.486l.708.709z"}),e("path",{d:"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"}),e("path",{d:"M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884l-12-12l.708-.708l12 12l-.708.708z"})]})}):e("svg",{className:"w-5 h-5 my-auto ml-4 text-gray-500",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 16 16",children:c("g",{fill:"currentColor",children:[e("path",{d:"M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"}),e("path",{d:"M8 5.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0z"})]})})})}export{q as a};

package/dist/chunk-NGYQAQA4.mjs

@@ -0,0 +1,30 @@
+// src/helper/index.ts
+var logoLink = (logo) => {
+  var _a, _b, _c;
+  if ((logo == null ? void 0 : logo.internalLink) && (logo == null ? void 0 : logo.type) === "linkInternal") {
+    if ((_b = (_a = logo == null ? void 0 : logo.internalLink) == null ? void 0 : _a.toLowerCase()) == null ? void 0 : _b.includes("home")) {
+      return "/";
+    }
+    return `/${logo.internalLink}`;
+  } else if ((logo == null ? void 0 : logo.externalLink) && (logo == null ? void 0 : logo.type) === "linkExternal") {
+    return (_c = logo == null ? void 0 : logo.externalLink) != null ? _c : "/";
+  } else {
+    return "/";
+  }
+};
+var thankYouPageLink = (link) => {
+  if (!link) {
+    return "/thank-you";
+  } else {
+    if ((link == null ? void 0 : link.linkType) === "linkInternal") {
+      return `/${link == null ? void 0 : link.internalLink}`;
+    } else {
+      return link == null ? void 0 : link.externalLink;
+    }
+  }
+};
+
+export {
+  logoLink,
+  thankYouPageLink
+};

package/dist/chunk-NJKLN5F4.mjs

@@ -0,0 +1,30 @@
+// src/signin-signup.tsx
+import { lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+var Variants = {
+  variant_a: lazy(() => import("./signin_signup_a.mjs")),
+  variant_b: lazy(() => import("./signin_signup_b.mjs"))
+};
+var displayName = "SigninSignup";
+var SigninSignup = ({ data }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  const variant = data == null ? void 0 : data.variant;
+  const Variant = variant && (Variants == null ? void 0 : Variants[variant]);
+  const props = {
+    logo: (_b = (_a = data == null ? void 0 : data.variants) == null ? void 0 : _a.logo) != null ? _b : void 0,
+    title: (_d = (_c = data == null ? void 0 : data.variants) == null ? void 0 : _c.title) != null ? _d : void 0,
+    subtitle: (_f = (_e = data == null ? void 0 : data.variants) == null ? void 0 : _e.subtitle) != null ? _f : void 0,
+    text: (_h = (_g = data == null ? void 0 : data.variants) == null ? void 0 : _g.plainText) != null ? _h : void 0,
+    firstButton: (_j = (_i = data == null ? void 0 : data.variants) == null ? void 0 : _i.primaryButton) != null ? _j : void 0,
+    secondButton: (_l = (_k = data == null ? void 0 : data.variants) == null ? void 0 : _k.secondaryButton) != null ? _l : void 0,
+    formLinks: (_n = (_m = data == null ? void 0 : data.variants) == null ? void 0 : _m.formLinks) != null ? _n : void 0,
+    signInLink: (_p = (_o = data == null ? void 0 : data.variants) == null ? void 0 : _o.signinLink) != null ? _p : void 0,
+    form: (_r = (_q = data == null ? void 0 : data.variants) == null ? void 0 : _q.form) != null ? _r : void 0
+  };
+  return Variant ? /* @__PURE__ */ jsx(Variant, { ...props }) : null;
+};
+SigninSignup.displayName = displayName;
+
+export {
+  SigninSignup
+};

package/dist/chunk-ZP54DEPE.mjs

@@ -0,0 +1,291 @@
+import {
+  logoLink,
+  thankYouPageLink
+} from "./chunk-NGYQAQA4.mjs";
+
+// src/signin_signup_a.tsx
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Form } from "@stackshift-ui/form";
+import { FormField } from "@stackshift-ui/form-field";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Input } from "@stackshift-ui/input";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SigninSignup_A({ logo, form, formLinks, signInLink }) {
+  return /* @__PURE__ */ jsx(Section, { className: "py-10 rounded-md bg-gray-50 lg:py-20", children: /* @__PURE__ */ jsxs(Container, { maxWidth: 576, children: [
+    /* @__PURE__ */ jsx(LogoSection, { logo }),
+    /* @__PURE__ */ jsxs(Container, { className: "mb-6 text-center lg:mb-10", children: [
+      /* @__PURE__ */ jsx(SubtitleAndHeadingText, { form }),
+      /* @__PURE__ */ jsx(
+        SignupForm,
+        {
+          form,
+          signInLink,
+          thankYouPage: thankYouPageLink(form == null ? void 0 : form.thankYouPage)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(FormLinks, { formLinks })
+  ] }) });
+}
+function LogoSection({ logo }) {
+  var _a;
+  if (!logo) return null;
+  return /* @__PURE__ */ jsx("div", { className: "mb-10", children: /* @__PURE__ */ jsx(
+    Link,
+    {
+      "aria-label": `Go to ${logoLink(logo) === "/" ? "home page" : logoLink(logo)}`,
+      className: "flex justify-center mx-auto text-3xl font-bold leading-none",
+      href: logoLink(logo),
+      target: logo == null ? void 0 : logo.linkTarget,
+      rel: (logo == null ? void 0 : logo.linkTarget) === "_blank" ? "noopener noreferrer" : "",
+      children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: logo == null ? void 0 : logo.image,
+          alt: (_a = logo == null ? void 0 : logo.alt) != null ? _a : "signup-logo",
+          width: 100,
+          height: 100,
+          className: "flex justify-center mx-auto text-3xl font-bold leading-none"
+        }
+      )
+    }
+  ) });
+}
+function SubtitleAndHeadingText({ form }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+    (form == null ? void 0 : form.subtitle) ? /* @__PURE__ */ jsx(Text, { muted: true, children: form == null ? void 0 : form.subtitle }) : null,
+    (form == null ? void 0 : form.name) ? /* @__PURE__ */ jsx(Heading, { className: "text-2xl lg:text-2xl", children: form == null ? void 0 : form.name }) : null
+  ] });
+}
+function SignupForm({
+  form,
+  signInLink,
+  thankYouPage
+}) {
+  var _a, _b;
+  if (!(form == null ? void 0 : form.fields)) return null;
+  const [showPasswords, setShowPasswords] = React.useState({});
+  const togglePasswordVisibility = (fieldName) => {
+    setShowPasswords((prev) => ({
+      ...prev,
+      [fieldName]: !prev[fieldName]
+    }));
+  };
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      id: (_a = form == null ? void 0 : form.id) != null ? _a : void 0,
+      name: "SignUp-VariantA-Form",
+      className: "form-signup",
+      thankyouPage: thankYouPage,
+      children: [
+        /* @__PURE__ */ jsx(
+          FormFields,
+          {
+            form,
+            showPasswords,
+            togglePasswordVisibility
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "webriq-recaptcha" }) }),
+        /* @__PURE__ */ jsx("div", { className: "text-center", children: (form == null ? void 0 : form.buttonLabel) && /* @__PURE__ */ jsx(
+          Button,
+          {
+            as: "button",
+            variant: "custom",
+            ariaLabel: (_b = form == null ? void 0 : form.buttonLabel) != null ? _b : "Sign Up form submit button",
+            className: "w-full py-4 text-sm font-bold tex-gray-50",
+            type: "submit",
+            children: form == null ? void 0 : form.buttonLabel
+          }
+        ) }),
+        signInLink && /* @__PURE__ */ jsx(SignInLink, { signInLink })
+      ]
+    }
+  );
+}
+function FormFields({
+  form,
+  showPasswords,
+  togglePasswordVisibility
+}) {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Flex, { wrap: true, className: "-mx-2", children: (_a = form == null ? void 0 : form.fields) == null ? void 0 : _a.slice(0, 2).map((formFields, index) => {
+      var _a2;
+      return /* @__PURE__ */ jsx("div", { className: "w-full px-2 mb-3 lg:w-1/2", children: formFields.type === "inputText" ? /* @__PURE__ */ jsx(
+        Input,
+        {
+          textSize: "sm",
+          variant: "primary",
+          noLabel: true,
+          placeholder: formFields == null ? void 0 : formFields.placeholder,
+          required: formFields == null ? void 0 : formFields.isRequired,
+          className: "w-full py-4 text-xs bg-white",
+          name: formFields == null ? void 0 : formFields.name,
+          ariaLabel: formFields == null ? void 0 : formFields.label,
+          ...formFields,
+          type: "text"
+        }
+      ) : /* @__PURE__ */ jsx(
+        FormField,
+        {
+          className: "py-4",
+          textSize: "sm",
+          noLabel: true,
+          variant: "primary",
+          name: (_a2 = formFields == null ? void 0 : formFields.name) != null ? _a2 : "",
+          placeholder: formFields == null ? void 0 : formFields.placeholder,
+          required: formFields == null ? void 0 : formFields.isRequired,
+          items: formFields == null ? void 0 : formFields.items,
+          type: formFields == null ? void 0 : formFields.type,
+          ...formFields
+        }
+      ) }, index);
+    }) }),
+    (_b = form == null ? void 0 : form.fields) == null ? void 0 : _b.slice(2).map((formFields, index) => {
+      var _a2;
+      return /* @__PURE__ */ jsx("div", { className: "my-3", children: formFields.type === "inputPassword" && formFields.name ? (
+        // Check if name exists
+        /* @__PURE__ */ jsx(
+          PasswordField,
+          {
+            formFields,
+            showPassword: showPasswords[formFields.name] || false,
+            togglePassword: () => togglePasswordVisibility(formFields.name)
+          }
+        )
+      ) : /* @__PURE__ */ jsx(
+        FormField,
+        {
+          className: "py-4",
+          textSize: "sm",
+          noLabel: true,
+          variant: "primary",
+          placeholder: formFields == null ? void 0 : formFields.placeholder,
+          required: formFields == null ? void 0 : formFields.isRequired,
+          name: (_a2 = formFields == null ? void 0 : formFields.name) != null ? _a2 : "",
+          items: formFields == null ? void 0 : formFields.items,
+          type: formFields == null ? void 0 : formFields.type,
+          ...formFields
+        }
+      ) }, index);
+    })
+  ] });
+}
+function SignInLink({ signInLink }) {
+  if (!(signInLink == null ? void 0 : signInLink.label)) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full text-center mt-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: "Already have an account? " }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        as: "link",
+        variant: "link",
+        link: signInLink,
+        className: "text-xs text-primary cursor-pointer hover:underline",
+        ariaLabel: signInLink == null ? void 0 : signInLink.label,
+        children: signInLink == null ? void 0 : signInLink.label
+      }
+    )
+  ] });
+}
+function PasswordField({
+  formFields,
+  showPassword,
+  togglePassword
+}) {
+  var _a;
+  return /* @__PURE__ */ jsxs(Flex, { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        className: "py-4",
+        textSize: "sm",
+        noLabel: true,
+        "aria-label": (_a = formFields == null ? void 0 : formFields.placeholder) != null ? _a : formFields == null ? void 0 : formFields.name,
+        variant: "primary",
+        type: showPassword ? "text" : "password",
+        placeholder: formFields == null ? void 0 : formFields.placeholder,
+        name: formFields == null ? void 0 : formFields.name,
+        required: formFields == null ? void 0 : formFields.isRequired
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        as: "button",
+        variant: "unstyled",
+        ariaLabel: showPassword ? "Show password" : "Hide password",
+        className: "absolute top-0 right-0 h-full p-2",
+        type: "button",
+        onClick: togglePassword,
+        children: /* @__PURE__ */ jsx(PasswordIcon, { showPassword })
+      }
+    )
+  ] });
+}
+function FormLinks({ formLinks }) {
+  if (!formLinks) return null;
+  return /* @__PURE__ */ jsx("p", { className: "mt-10 text-xs text-center text-gray-700", children: formLinks == null ? void 0 : formLinks.map((link, index, { length }) => /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        as: "link",
+        variant: "link",
+        link,
+        className: "text-xs text-primary cursor-pointer hover:underline",
+        ariaLabel: link == null ? void 0 : link.label,
+        children: link == null ? void 0 : link.label
+      }
+    ),
+    index === length - 1 ? null : index === length - 2 ? /* @__PURE__ */ jsx("span", { children: "\xA0and\xA0" }) : /* @__PURE__ */ jsx("span", { children: "\xA0,\xA0" })
+  ] }, index)) });
+}
+function PasswordIcon({ showPassword }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: showPassword ? /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "w-5 h-5 my-auto ml-4 text-gray-500",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      role: "img",
+      width: "1em",
+      height: "1em",
+      preserveAspectRatio: "xMidYMid meet",
+      viewBox: "0 0 16 16",
+      children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
+        /* @__PURE__ */ jsx("path", { d: "M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755c-.165.165-.337.328-.517.486l.708.709z" }),
+        /* @__PURE__ */ jsx("path", { d: "M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" }),
+        /* @__PURE__ */ jsx("path", { d: "M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884l-12-12l.708-.708l12 12l-.708.708z" })
+      ] })
+    }
+  ) : /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "w-5 h-5 my-auto ml-4 text-gray-500",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      role: "img",
+      width: "1em",
+      height: "1em",
+      preserveAspectRatio: "xMidYMid meet",
+      viewBox: "0 0 16 16",
+      children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
+        /* @__PURE__ */ jsx("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0z" })
+      ] })
+    }
+  ) });
+}
+
+export {
+  SigninSignup_A
+};