keystone-design-bootstrap 1.0.86 → 1.0.87

package/dist/design_system/portal/index.js

@@ -0,0 +1,3113 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/design_system/portal/PortalPage.tsx
+import React8 from "react";
+import Link from "next/link";
+import { cookies } from "next/headers";
+
+// src/utils/cx.ts
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+
+// src/design_system/logo/keystone-logo-minimal.tsx
+var KEYSTONE_APP_URL = "https://www.keystone.app";
+var KeystoneLogoMinimal = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    __spreadProps(__spreadValues({
+      viewBox: "0 0 36 41",
+      fill: "none",
+      "aria-hidden": "true"
+    }, props), {
+      className: cx("text-[#6ECC8B]", props.className)
+    }),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M36 13.6677L24.0031 20.4999L36 27.3321V40.9966L11.998 27.3288V13.671L36 0.0032959V13.6677Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M11.9971 27.3288V40.9958L0 34.1644V20.4973L11.9971 27.3288Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M11.9971 13.671L0.00476074 20.4999L0 20.4973V6.83551L11.9971 0.00402832V13.671Z",
+        fill: "currentColor"
+      }
+    )
+  );
+};
+
+// src/design_system/logo/keystone-wordmark.tsx
+var KeystoneWordmark = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    __spreadProps(__spreadValues({
+      viewBox: "0 0 104 20",
+      fill: "none",
+      "aria-hidden": "true"
+    }, props), {
+      className: cx("text-[#6ECC8B]", props.className)
+    }),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M3.14032 0L3.1612 8.23754H3.82871L9.47236 2.94575H13.0328V3.34299L6.45695 9.52024L13.2946 16.1684V16.5656H9.53903L3.8267 11.0811H3.15919V16.5584H0V0H3.14032Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M18.4299 2.62219C22.4643 2.62219 24.8242 5.10147 24.8242 9.20756V10.6049H14.6121C14.6635 12.8878 16.0848 14.486 18.4167 14.486C20.7485 14.486 21.6835 13.2718 21.8892 12.243H24.5535V12.6403C24.1957 14.422 22.5534 16.8876 18.4552 16.8876C14.357 16.8876 11.7031 14.4462 11.7031 9.7505C11.7031 5.05478 14.3675 2.62662 18.4295 2.62662L18.4299 2.62219ZM21.9647 8.28025C21.939 6.42119 20.7365 4.9932 18.3914 4.9932C16.0463 4.9932 14.8181 6.45903 14.6506 8.28025H21.9667H21.9647Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M27.5146 2.93809L31.2554 12.994H31.459L35.1865 2.93809H38.2369V3.33534L31.565 19.9996H28.5147V19.6024L29.7417 16.5942L24.3848 3.33292V2.93567H27.5142L27.5146 2.93809Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M44.1191 2.63538C47.759 2.63538 49.8832 4.19177 50.1017 6.73947V7.13671H47.3345C47.2445 5.53847 45.965 4.98667 44.1319 4.98667C42.2989 4.98667 41.3129 5.54088 41.3129 6.5982C41.3129 7.65551 42.1338 7.9956 43.3002 8.18115L45.8103 8.57839C48.4747 9.0022 50.2796 10.1214 50.2796 12.6027C50.2796 15.084 48.3591 16.8767 44.4898 16.8767C40.6205 16.8767 38.3782 15.082 38.1855 12.6667V12.2695H41.0045C41.133 13.8677 42.5692 14.5258 44.4898 14.5258C46.4104 14.5258 47.3859 13.8391 47.3859 12.7706C47.3859 11.702 46.5521 11.2782 45.1332 11.0552L42.623 10.658C40.1129 10.2607 38.4324 9.12818 38.4324 6.66219C38.4324 4.1962 40.4944 2.6378 44.1215 2.6378H44.1195L44.1191 2.63538Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M54.2257 2.93729V0H57.2632V2.93729H62.247V5.35257H57.2632V13.7724L57.4668 13.9821H62.1679V16.5673H57.8765C55.5828 16.5673 54.2237 15.353 54.2237 13.0327V5.35217H50.2773V2.93689L54.2257 2.93729Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M69.219 2.62219C73.3325 2.62219 76.2025 5.13004 76.2025 9.74608C76.2025 14.3621 73.3325 16.8832 69.219 16.8832C65.1056 16.8832 62.25 14.3754 62.25 9.74608C62.25 5.11676 65.1052 2.62219 69.219 2.62219ZM69.219 14.4442C71.6003 14.4442 73.1265 12.7687 73.1265 9.74648C73.1265 6.72426 71.6023 5.06202 69.219 5.06202C66.8358 5.06202 65.3241 6.73754 65.3241 9.74648C65.3241 12.7554 66.8482 14.4442 69.219 14.4442Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M80.2535 2.94007V4.45661H80.4568C81.3785 3.16304 82.8641 2.64868 84.6606 2.64868C87.7989 2.64868 89.7472 4.29763 89.7472 7.66236V16.5681H86.7097V7.93846C86.7097 6.03755 85.698 5.15451 83.8907 5.15451C81.9315 5.15451 80.3539 6.30238 80.3539 8.95392V16.566H77.3164V2.94007H80.2535Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M97.6065 2.62219C101.64 2.62219 104 5.10147 104 9.20756V10.6049H93.7886C93.838 12.8878 95.261 14.486 97.5933 14.486C99.9255 14.486 100.859 13.2718 101.065 12.243H103.729V12.6403C103.371 14.422 101.73 16.8876 97.6314 16.8876C93.5328 16.8876 90.8789 14.4462 90.8789 9.7505C90.8789 5.05478 93.5437 2.62662 97.6057 2.62662L97.6065 2.62219ZM101.141 8.28025C101.115 6.42119 99.9127 4.9932 97.568 4.9932C95.2233 4.9932 93.9943 6.45903 93.8272 8.28025H101.143H101.141Z",
+        fill: "currentColor"
+      }
+    )
+  );
+};
+
+// src/design_system/logo/keystone-brand-lockup.tsx
+function KeystoneBrandLockup(_a) {
+  var _b = _a, {
+    className,
+    iconClassName,
+    wordmarkClassName
+  } = _b, props = __objRest(_b, [
+    "className",
+    "iconClassName",
+    "wordmarkClassName"
+  ]);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), { className: cx("flex flex-col items-start gap-2", className) }), /* @__PURE__ */ React.createElement(KeystoneLogoMinimal, { className: cx("h-4 w-auto shrink-0", iconClassName) }), /* @__PURE__ */ React.createElement(KeystoneWordmark, { className: cx("h-4 w-auto shrink-0", wordmarkClassName) }));
+}
+
+// src/design_system/portal/LogoutButton.tsx
+import { useRouter } from "next/navigation";
+function LogoutButton() {
+  const router = useRouter();
+  const handleLogout = async () => {
+    await fetch("/api/consumer/logout", { method: "POST" });
+    router.refresh();
+  };
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleLogout,
+      className: "text-xs text-tertiary hover:text-primary transition-colors"
+    },
+    "Sign out"
+  );
+}
+
+// src/design_system/portal/LoginModalController.tsx
+import React4, { useState as useState2, useEffect as useEffect3, useTransition } from "react";
+import { useRouter as useRouter3 } from "next/navigation";
+
+// src/design_system/elements/modal/modal.tsx
+import React2, { useEffect, useRef } from "react";
+var MAX_WIDTH_CLASSES = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl"
+};
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  titleId = "modal-title",
+  children,
+  footer,
+  hideHeader = false,
+  ariaLabel,
+  overlayClassName,
+  panelClassName,
+  maxWidth = "md"
+}) {
+  const overlayRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (!isOpen) return;
+    const previouslyFocused = document.activeElement;
+    (_a = closeButtonRef.current) == null ? void 0 : _a.focus();
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+      previouslyFocused == null ? void 0 : previouslyFocused.focus();
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const maxWidthClass = MAX_WIDTH_CLASSES[maxWidth];
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      ref: overlayRef,
+      className: overlayClassName != null ? overlayClassName : "fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/50",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel,
+      "aria-labelledby": !ariaLabel && title && !hideHeader ? titleId : void 0,
+      onClick: (e) => e.target === overlayRef.current && onClose()
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        className: panelClassName != null ? panelClassName : `bg-primary border border-secondary rounded-lg shadow-xl w-full overflow-hidden ${maxWidthClass} max-h-[90vh] flex flex-col`,
+        onClick: (e) => e.stopPropagation()
+      },
+      !hideHeader && /* @__PURE__ */ React2.createElement("div", { className: "flex items-start justify-between gap-4 p-4 md:p-6 border-b border-secondary flex-shrink-0" }, title ? /* @__PURE__ */ React2.createElement(
+        "h2",
+        {
+          id: titleId,
+          className: "font-display text-lg font-normal text-fg-primary md:text-xl flex-1 min-w-0"
+        },
+        title
+      ) : /* @__PURE__ */ React2.createElement("span", { className: "flex-1", "aria-hidden": true }), /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          ref: closeButtonRef,
+          type: "button",
+          onClick: onClose,
+          className: "shrink-0 p-1 text-fg-primary hover:text-brand-accent rounded focus:outline-none focus:ring-2 focus:ring-brand-accent",
+          "aria-label": "Close"
+        },
+        /* @__PURE__ */ React2.createElement(
+          "svg",
+          {
+            className: "w-5 h-5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": true
+          },
+          /* @__PURE__ */ React2.createElement(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M6 18L18 6M6 6l12 12"
+            }
+          )
+        )
+      )),
+      /* @__PURE__ */ React2.createElement("div", { className: "overflow-y-auto flex-1 p-4 md:p-6" }, children),
+      footer && /* @__PURE__ */ React2.createElement("div", { className: "flex-shrink-0 border-t border-secondary" }, footer)
+    )
+  );
+}
+
+// src/design_system/portal/LoginForm.tsx
+import React3, { useEffect as useEffect2, useMemo, useState } from "react";
+import { useRouter as useRouter2 } from "next/navigation";
+
+// src/utils/countries.tsx
+import Image from "next/image";
+var countries = [
+  {
+    name: "Afghanistan",
+    code: "AF",
+    flag: "https://www.untitledui.com/images/flags/AF.svg",
+    phoneCode: "93",
+    phoneMask: "+93-##-###-####"
+  },
+  {
+    name: "Albania",
+    code: "AL",
+    flag: "https://www.untitledui.com/images/flags/AL.svg",
+    phoneCode: "355",
+    phoneMask: "+355 (###) ###-###"
+  },
+  {
+    name: "Algeria",
+    code: "DZ",
+    flag: "https://www.untitledui.com/images/flags/DZ.svg",
+    phoneCode: "213",
+    phoneMask: "+213-##-###-####"
+  },
+  {
+    name: "Andorra",
+    code: "AD",
+    flag: "https://www.untitledui.com/images/flags/AD.svg",
+    phoneCode: "376",
+    phoneMask: "+376-###-###"
+  },
+  {
+    name: "Angola",
+    code: "AO",
+    flag: "https://www.untitledui.com/images/flags/AO.svg",
+    phoneCode: "244",
+    phoneMask: "+244 (###) ###-###"
+  },
+  {
+    name: "Antigua and Barbuda",
+    code: "AG",
+    flag: "https://www.untitledui.com/images/flags/AG.svg",
+    phoneCode: "+1-268",
+    phoneMask: "+1 (268) ###-####"
+  },
+  {
+    name: "Argentina",
+    code: "AR",
+    flag: "https://www.untitledui.com/images/flags/AR.svg",
+    phoneCode: "54",
+    phoneMask: "+54 (###) ###-####"
+  },
+  {
+    name: "Armenia",
+    code: "AM",
+    flag: "https://www.untitledui.com/images/flags/AM.svg",
+    phoneCode: "374",
+    phoneMask: "+374-##-###-###"
+  },
+  {
+    name: "Australia",
+    code: "AU",
+    flag: "https://www.untitledui.com/images/flags/AU.svg",
+    phoneCode: "61",
+    phoneMask: "+61-#-####-####"
+  },
+  {
+    name: "Austria",
+    code: "AT",
+    flag: "https://www.untitledui.com/images/flags/AT.svg",
+    phoneCode: "43",
+    phoneMask: "+43 (###) ###-####"
+  },
+  {
+    name: "Azerbaijan",
+    code: "AZ",
+    flag: "https://www.untitledui.com/images/flags/AZ.svg",
+    phoneCode: "994",
+    phoneMask: "+994-##-###-##-##"
+  },
+  {
+    name: "Bahamas",
+    code: "BS",
+    flag: "https://www.untitledui.com/images/flags/BS.svg",
+    phoneCode: "+1-242",
+    phoneMask: "+1 (242) ###-####"
+  },
+  {
+    name: "Bahrain",
+    code: "BH",
+    flag: "https://www.untitledui.com/images/flags/BH.svg",
+    phoneCode: "973",
+    phoneMask: "+973-####-####"
+  },
+  {
+    name: "Bangladesh",
+    code: "BD",
+    flag: "https://www.untitledui.com/images/flags/BD.svg",
+    phoneCode: "880",
+    phoneMask: "+880-##-###-###"
+  },
+  {
+    name: "Barbados",
+    code: "BB",
+    flag: "https://www.untitledui.com/images/flags/BB.svg",
+    phoneCode: "+1-246",
+    phoneMask: "+1 (246) ###-####"
+  },
+  {
+    name: "Belarus",
+    code: "BY",
+    flag: "https://www.untitledui.com/images/flags/BY.svg",
+    phoneCode: "375",
+    phoneMask: "+375 (##) ###-##-##"
+  },
+  {
+    name: "Belgium",
+    code: "BE",
+    flag: "https://www.untitledui.com/images/flags/BE.svg",
+    phoneCode: "32",
+    phoneMask: "+32 (###) ###-###"
+  },
+  {
+    name: "Belize",
+    code: "BZ",
+    flag: "https://www.untitledui.com/images/flags/BZ.svg",
+    phoneCode: "501",
+    phoneMask: "+501-###-####"
+  },
+  {
+    name: "Benin",
+    code: "BJ",
+    flag: "https://www.untitledui.com/images/flags/BJ.svg",
+    phoneCode: "229",
+    phoneMask: "+229-##-##-####"
+  },
+  {
+    name: "Bhutan",
+    code: "BT",
+    flag: "https://www.untitledui.com/images/flags/BT.svg",
+    phoneCode: "975",
+    phoneMask: "+975-#-###-###"
+  },
+  {
+    name: "Bolivia",
+    code: "BO",
+    flag: "https://www.untitledui.com/images/flags/BO.svg",
+    phoneCode: "591",
+    phoneMask: "+591-#-###-####"
+  },
+  {
+    name: "Bosnia and Herzegovina",
+    code: "BA",
+    flag: "https://www.untitledui.com/images/flags/BA.svg",
+    phoneCode: "387",
+    phoneMask: "+387-##-####"
+  },
+  {
+    name: "Botswana",
+    code: "BW",
+    flag: "https://www.untitledui.com/images/flags/BW.svg",
+    phoneCode: "267",
+    phoneMask: "+267-##-###-###"
+  },
+  {
+    name: "Brazil",
+    code: "BR",
+    flag: "https://www.untitledui.com/images/flags/BR.svg",
+    phoneCode: "55",
+    phoneMask: "+55 (##) 9####-####"
+  },
+  {
+    name: "Brunei",
+    code: "BN",
+    flag: "https://www.untitledui.com/images/flags/BN.svg",
+    phoneCode: "673",
+    phoneMask: "+673-###-####"
+  },
+  {
+    name: "Bulgaria",
+    code: "BG",
+    flag: "https://www.untitledui.com/images/flags/BG.svg",
+    phoneCode: "359",
+    phoneMask: "+359 (###) ###-###"
+  },
+  {
+    name: "Burkina Faso",
+    code: "BF",
+    flag: "https://www.untitledui.com/images/flags/BF.svg",
+    phoneCode: "226",
+    phoneMask: "+226-##-##-####"
+  },
+  {
+    name: "Burundi",
+    code: "BI",
+    flag: "https://www.untitledui.com/images/flags/BI.svg",
+    phoneCode: "257",
+    phoneMask: "+257-##-##-####"
+  },
+  {
+    name: "Cambodia",
+    code: "KH",
+    flag: "https://www.untitledui.com/images/flags/KH.svg",
+    phoneCode: "855",
+    phoneMask: "+855-##-###-###"
+  },
+  {
+    name: "Cameroon",
+    code: "CM",
+    flag: "https://www.untitledui.com/images/flags/CM.svg",
+    phoneCode: "237",
+    phoneMask: "+237-####-####"
+  },
+  {
+    name: "Canada",
+    code: "CA",
+    flag: "https://www.untitledui.com/images/flags/CA.svg",
+    phoneCode: "1",
+    phoneMask: "+1 (###) ###-####"
+  },
+  {
+    name: "Central African Republic",
+    code: "CF",
+    flag: "https://www.untitledui.com/images/flags/CF.svg",
+    phoneCode: "236",
+    phoneMask: "+236-##-##-####"
+  },
+  {
+    name: "Chad",
+    code: "TD",
+    flag: "https://www.untitledui.com/images/flags/TD.svg",
+    phoneCode: "235",
+    phoneMask: "+235-##-##-##-##"
+  },
+  {
+    name: "Chile",
+    code: "CL",
+    flag: "https://www.untitledui.com/images/flags/CL.svg",
+    phoneCode: "56",
+    phoneMask: "+56-#-####-####"
+  },
+  {
+    name: "China",
+    code: "CN",
+    flag: "https://www.untitledui.com/images/flags/CN.svg",
+    phoneCode: "86",
+    phoneMask: "+86-##-#####-#####"
+  },
+  {
+    name: "Colombia",
+    code: "CO",
+    flag: "https://www.untitledui.com/images/flags/CO.svg",
+    phoneCode: "57",
+    phoneMask: "+57 (###) ###-####"
+  },
+  {
+    name: "Comoros",
+    code: "KM",
+    flag: "https://www.untitledui.com/images/flags/KM.svg",
+    phoneCode: "269",
+    phoneMask: "+269-##-#####"
+  },
+  {
+    name: "Costa Rica",
+    code: "CR",
+    flag: "https://www.untitledui.com/images/flags/CR.svg",
+    phoneCode: "506",
+    phoneMask: "+506-####-####"
+  },
+  {
+    name: "Croatia",
+    code: "HR",
+    flag: "https://www.untitledui.com/images/flags/HR.svg",
+    phoneCode: "385",
+    phoneMask: "+385-##-###-###"
+  },
+  {
+    name: "Cuba",
+    code: "CU",
+    flag: "https://www.untitledui.com/images/flags/CU.svg",
+    phoneCode: "53",
+    phoneMask: "+53-#-###-####"
+  },
+  {
+    name: "Cyprus",
+    code: "CY",
+    flag: "https://www.untitledui.com/images/flags/CY.svg",
+    phoneCode: "357",
+    phoneMask: "+357-##-###-###"
+  },
+  {
+    name: "Czech Republic",
+    code: "CZ",
+    flag: "https://www.untitledui.com/images/flags/CZ.svg",
+    phoneCode: "420",
+    phoneMask: "+420 (###) ###-###"
+  },
+  {
+    name: "Democratic Republic of the Congo",
+    code: "CD",
+    flag: "https://www.untitledui.com/images/flags/CD.svg",
+    phoneCode: "243",
+    phoneMask: "+243 (###) ###-###"
+  },
+  {
+    name: "Denmark",
+    code: "DK",
+    flag: "https://www.untitledui.com/images/flags/DK.svg",
+    phoneCode: "45",
+    phoneMask: "+45-##-##-##-##"
+  },
+  {
+    name: "Djibouti",
+    code: "DJ",
+    flag: "https://www.untitledui.com/images/flags/DJ.svg",
+    phoneCode: "253",
+    phoneMask: "+253-##-##-##-##"
+  },
+  {
+    name: "Dominica",
+    code: "DM",
+    flag: "https://www.untitledui.com/images/flags/DM.svg",
+    phoneCode: "+1-767",
+    phoneMask: "+1 (767) ###-####"
+  },
+  {
+    name: "Dominican Republic",
+    code: "DO",
+    flag: "https://www.untitledui.com/images/flags/DO.svg",
+    phoneCode: "+1-809",
+    phoneMask: "+1 (809) ###-####"
+  },
+  {
+    name: "East Timor",
+    code: "TL",
+    flag: "https://www.untitledui.com/images/flags/TL.svg",
+    phoneCode: "670",
+    phoneMask: "+670-78#-#####"
+  },
+  {
+    name: "Ecuador",
+    code: "EC",
+    flag: "https://www.untitledui.com/images/flags/EC.svg",
+    phoneCode: "593",
+    phoneMask: "+593-#-###-####"
+  },
+  {
+    name: "Egypt",
+    code: "EG",
+    flag: "https://www.untitledui.com/images/flags/EG.svg",
+    phoneCode: "20",
+    phoneMask: "+20 (###) ###-####"
+  },
+  {
+    name: "El Salvador",
+    code: "SV",
+    flag: "https://www.untitledui.com/images/flags/SV.svg",
+    phoneCode: "503",
+    phoneMask: "+503-##-##-####"
+  },
+  {
+    name: "Equatorial Guinea",
+    code: "GQ",
+    flag: "https://www.untitledui.com/images/flags/GQ.svg",
+    phoneCode: "240",
+    phoneMask: "+240-##-###-####"
+  },
+  {
+    name: "Eritrea",
+    code: "ER",
+    flag: "https://www.untitledui.com/images/flags/ER.svg",
+    phoneCode: "291",
+    phoneMask: "+291-#-###-###"
+  },
+  {
+    name: "Estonia",
+    code: "EE",
+    flag: "https://www.untitledui.com/images/flags/EE.svg",
+    phoneCode: "372",
+    phoneMask: "+372-###-####"
+  },
+  {
+    name: "Eswatini",
+    code: "SZ",
+    flag: "https://www.untitledui.com/images/flags/SZ.svg",
+    phoneCode: "268",
+    phoneMask: "+268-##-##-####"
+  },
+  {
+    name: "Ethiopia",
+    code: "ET",
+    flag: "https://www.untitledui.com/images/flags/ET.svg",
+    phoneCode: "251",
+    phoneMask: "+251-##-###-####"
+  },
+  {
+    name: "Fiji",
+    code: "FJ",
+    flag: "https://www.untitledui.com/images/flags/FJ.svg",
+    phoneCode: "679",
+    phoneMask: "+679-##-#####"
+  },
+  {
+    name: "Finland",
+    code: "FI",
+    flag: "https://www.untitledui.com/images/flags/FI.svg",
+    phoneCode: "358",
+    phoneMask: "+358 (###) ###-##-##"
+  },
+  {
+    name: "France",
+    code: "FR",
+    flag: "https://www.untitledui.com/images/flags/FR.svg",
+    phoneCode: "33",
+    phoneMask: "+590 (###) ###-###"
+  },
+  {
+    name: "Gabon",
+    code: "GA",
+    flag: "https://www.untitledui.com/images/flags/GA.svg",
+    phoneCode: "241",
+    phoneMask: "+241-#-##-##-##"
+  },
+  {
+    name: "Gambia",
+    code: "GM",
+    flag: "https://www.untitledui.com/images/flags/GM.svg",
+    phoneCode: "220",
+    phoneMask: "+220 (###) ##-##"
+  },
+  {
+    name: "Georgia",
+    code: "GE",
+    flag: "https://www.untitledui.com/images/flags/GE.svg",
+    phoneCode: "995",
+    phoneMask: "+995 (###) ###-###"
+  },
+  {
+    name: "Germany",
+    code: "DE",
+    flag: "https://www.untitledui.com/images/flags/DE.svg",
+    phoneCode: "49",
+    phoneMask: "+49-###-###"
+  },
+  {
+    name: "Ghana",
+    code: "GH",
+    flag: "https://www.untitledui.com/images/flags/GH.svg",
+    phoneCode: "233",
+    phoneMask: "+233 (###) ###-###"
+  },
+  {
+    name: "Greece",
+    code: "GR",
+    flag: "https://www.untitledui.com/images/flags/GR.svg",
+    phoneCode: "30",
+    phoneMask: "+30 (###) ###-####"
+  },
+  {
+    name: "Grenada",
+    code: "GD",
+    flag: "https://www.untitledui.com/images/flags/GD.svg",
+    phoneCode: "+1-473",
+    phoneMask: "+1 (473) ###-####"
+  },
+  {
+    name: "Guatemala",
+    code: "GT",
+    flag: "https://www.untitledui.com/images/flags/GT.svg",
+    phoneCode: "502",
+    phoneMask: "+502-#-###-####"
+  },
+  {
+    name: "Guinea",
+    code: "GN",
+    flag: "https://www.untitledui.com/images/flags/GN.svg",
+    phoneCode: "224",
+    phoneMask: "+224-##-###-###"
+  },
+  {
+    name: "Guinea-Bissau",
+    code: "GW",
+    flag: "https://www.untitledui.com/images/flags/GW.svg",
+    phoneCode: "245",
+    phoneMask: "+245-#-######"
+  },
+  {
+    name: "Guyana",
+    code: "GY",
+    flag: "https://www.untitledui.com/images/flags/GY.svg",
+    phoneCode: "592",
+    phoneMask: "+592-###-####"
+  },
+  {
+    name: "Haiti",
+    code: "HT",
+    flag: "https://www.untitledui.com/images/flags/HT.svg",
+    phoneCode: "509",
+    phoneMask: "+509-##-##-####"
+  },
+  {
+    name: "Honduras",
+    code: "HN",
+    flag: "https://www.untitledui.com/images/flags/HN.svg",
+    phoneCode: "504",
+    phoneMask: "+504-####-####"
+  },
+  {
+    name: "Hungary",
+    code: "HU",
+    flag: "https://www.untitledui.com/images/flags/HU.svg",
+    phoneCode: "36",
+    phoneMask: "+36 (###) ###-###"
+  },
+  {
+    name: "Iceland",
+    code: "IS",
+    flag: "https://www.untitledui.com/images/flags/IS.svg",
+    phoneCode: "354",
+    phoneMask: "+354-###-####"
+  },
+  {
+    name: "India",
+    code: "IN",
+    flag: "https://www.untitledui.com/images/flags/IN.svg",
+    phoneCode: "91",
+    phoneMask: "+91 (####) ###-###"
+  },
+  {
+    name: "Indonesia",
+    code: "ID",
+    flag: "https://www.untitledui.com/images/flags/ID.svg",
+    phoneCode: "62",
+    phoneMask: "+62 (8##) ###-##-###"
+  },
+  {
+    name: "Iran",
+    code: "IR",
+    flag: "https://www.untitledui.com/images/flags/IR.svg",
+    phoneCode: "98",
+    phoneMask: "+98 (###) ###-####"
+  },
+  {
+    name: "Iraq",
+    code: "IQ",
+    flag: "https://www.untitledui.com/images/flags/IQ.svg",
+    phoneCode: "964",
+    phoneMask: "+964 (###) ###-####"
+  },
+  {
+    name: "Ireland",
+    code: "IE",
+    flag: "https://www.untitledui.com/images/flags/IE.svg",
+    phoneCode: "353",
+    phoneMask: "+353 (###) ###-###"
+  },
+  {
+    name: "Israel",
+    code: "IL",
+    flag: "https://www.untitledui.com/images/flags/IL.svg",
+    phoneCode: "972",
+    phoneMask: "+972-#-###-####"
+  },
+  {
+    name: "Italy",
+    code: "IT",
+    flag: "https://www.untitledui.com/images/flags/IT.svg",
+    phoneCode: "39",
+    phoneMask: "+39 (###) ####-###"
+  },
+  {
+    name: "Jamaica",
+    code: "JM",
+    flag: "https://www.untitledui.com/images/flags/JM.svg",
+    phoneCode: "+1-876",
+    phoneMask: "+1 (876) ###-####"
+  },
+  {
+    name: "Japan",
+    code: "JP",
+    flag: "https://www.untitledui.com/images/flags/JP.svg",
+    phoneCode: "81",
+    phoneMask: "+81 (###) ###-###"
+  },
+  {
+    name: "Jordan",
+    code: "JO",
+    flag: "https://www.untitledui.com/images/flags/JO.svg",
+    phoneCode: "962",
+    phoneMask: "+962-#-####-####"
+  },
+  {
+    name: "Kazakhstan",
+    code: "KZ",
+    flag: "https://www.untitledui.com/images/flags/KZ.svg",
+    phoneCode: "7",
+    phoneMask: "+7 (7##) ###-##-##"
+  },
+  {
+    name: "Kenya",
+    code: "KE",
+    flag: "https://www.untitledui.com/images/flags/KE.svg",
+    phoneCode: "254",
+    phoneMask: "+254-###-######"
+  },
+  {
+    name: "Kiribati",
+    code: "KI",
+    flag: "https://www.untitledui.com/images/flags/KI.svg",
+    phoneCode: "686",
+    phoneMask: "+686-##-###"
+  },
+  {
+    name: "Kuwait",
+    code: "KW",
+    flag: "https://www.untitledui.com/images/flags/KW.svg",
+    phoneCode: "965",
+    phoneMask: "+965-####-####"
+  },
+  {
+    name: "Kyrgyzstan",
+    code: "KG",
+    flag: "https://www.untitledui.com/images/flags/KG.svg",
+    phoneCode: "996",
+    phoneMask: "+996 (###) ###-###"
+  },
+  {
+    name: "Laos",
+    code: "LA",
+    flag: "https://www.untitledui.com/images/flags/LA.svg",
+    phoneCode: "856",
+    phoneMask: "+856-##-###-###"
+  },
+  {
+    name: "Latvia",
+    code: "LV",
+    flag: "https://www.untitledui.com/images/flags/LV.svg",
+    phoneCode: "371",
+    phoneMask: "+371-##-###-###"
+  },
+  {
+    name: "Lebanon",
+    code: "LB",
+    flag: "https://www.untitledui.com/images/flags/LB.svg",
+    phoneCode: "961",
+    phoneMask: "+961-#-###-###"
+  },
+  {
+    name: "Lesotho",
+    code: "LS",
+    flag: "https://www.untitledui.com/images/flags/LS.svg",
+    phoneCode: "266",
+    phoneMask: "+266-#-###-####"
+  },
+  {
+    name: "Liberia",
+    code: "LR",
+    flag: "https://www.untitledui.com/images/flags/LR.svg",
+    phoneCode: "231",
+    phoneMask: "+231-##-###-###"
+  },
+  {
+    name: "Libya",
+    code: "LY",
+    flag: "https://www.untitledui.com/images/flags/LY.svg",
+    phoneCode: "218",
+    phoneMask: "+218-21-###-####"
+  },
+  {
+    name: "Liechtenstein",
+    code: "LI",
+    flag: "https://www.untitledui.com/images/flags/LI.svg",
+    phoneCode: "423",
+    phoneMask: "+423 (###) ###-####"
+  },
+  {
+    name: "Lithuania",
+    code: "LT",
+    flag: "https://www.untitledui.com/images/flags/LT.svg",
+    phoneCode: "370",
+    phoneMask: "+370 (###) ##-###"
+  },
+  {
+    name: "Luxembourg",
+    code: "LU",
+    flag: "https://www.untitledui.com/images/flags/LU.svg",
+    phoneCode: "352",
+    phoneMask: "+352 (###) ###-###"
+  },
+  {
+    name: "Madagascar",
+    code: "MG",
+    flag: "https://www.untitledui.com/images/flags/MG.svg",
+    phoneCode: "261",
+    phoneMask: "+261-##-##-#####"
+  },
+  {
+    name: "Malawi",
+    code: "MW",
+    flag: "https://www.untitledui.com/images/flags/MW.svg",
+    phoneCode: "265",
+    phoneMask: "+265-#-####-####"
+  },
+  {
+    name: "Malaysia",
+    code: "MY",
+    flag: "https://www.untitledui.com/images/flags/MY.svg",
+    phoneCode: "60",
+    phoneMask: "+60-#-###-###"
+  },
+  {
+    name: "Maldives",
+    code: "MV",
+    flag: "https://www.untitledui.com/images/flags/MV.svg",
+    phoneCode: "960",
+    phoneMask: "+960-###-####"
+  },
+  {
+    name: "Mali",
+    code: "ML",
+    flag: "https://www.untitledui.com/images/flags/ML.svg",
+    phoneCode: "223",
+    phoneMask: "+223-##-##-####"
+  },
+  {
+    name: "Malta",
+    code: "MT",
+    flag: "https://www.untitledui.com/images/flags/MT.svg",
+    phoneCode: "356",
+    phoneMask: "+356-####-####"
+  },
+  {
+    name: "Marshall Islands",
+    code: "MH",
+    flag: "https://www.untitledui.com/images/flags/MH.svg",
+    phoneCode: "692",
+    phoneMask: "+692-###-####"
+  },
+  {
+    name: "Mauritania",
+    code: "MR",
+    flag: "https://www.untitledui.com/images/flags/MR.svg",
+    phoneCode: "222",
+    phoneMask: "+222-##-##-####"
+  },
+  {
+    name: "Mauritius",
+    code: "MU",
+    flag: "https://www.untitledui.com/images/flags/MU.svg",
+    phoneCode: "230",
+    phoneMask: "+230-###-####"
+  },
+  {
+    name: "Mexico",
+    code: "MX",
+    flag: "https://www.untitledui.com/images/flags/MX.svg",
+    phoneCode: "52",
+    phoneMask: "+52-##-##-####"
+  },
+  {
+    name: "Micronesia",
+    code: "FM",
+    flag: "https://www.untitledui.com/images/flags/FM.svg",
+    phoneCode: "691",
+    phoneMask: "+691-###-####"
+  },
+  {
+    name: "Moldova",
+    code: "MD",
+    flag: "https://www.untitledui.com/images/flags/MD.svg",
+    phoneCode: "373",
+    phoneMask: "+373-####-####"
+  },
+  {
+    name: "Monaco",
+    code: "MC",
+    flag: "https://www.untitledui.com/images/flags/MC.svg",
+    phoneCode: "377",
+    phoneMask: "+377-##-###-###"
+  },
+  {
+    name: "Mongolia",
+    code: "MN",
+    flag: "https://www.untitledui.com/images/flags/MN.svg",
+    phoneCode: "976",
+    phoneMask: "+976-##-##-####"
+  },
+  {
+    name: "Montenegro",
+    code: "ME",
+    flag: "https://www.untitledui.com/images/flags/ME.svg",
+    phoneCode: "382",
+    phoneMask: "+382-##-###-###"
+  },
+  {
+    name: "Morocco",
+    code: "MA",
+    flag: "https://www.untitledui.com/images/flags/MA.svg",
+    phoneCode: "212",
+    phoneMask: "+212-##-####-###"
+  },
+  {
+    name: "Mozambique",
+    code: "MZ",
+    flag: "https://www.untitledui.com/images/flags/MZ.svg",
+    phoneCode: "258",
+    phoneMask: "+258-##-###-###"
+  },
+  {
+    name: "Myanmar",
+    code: "MM",
+    flag: "https://www.untitledui.com/images/flags/MM.svg",
+    phoneCode: "95",
+    phoneMask: "+95-###-###"
+  },
+  {
+    name: "Namibia",
+    code: "NA",
+    flag: "https://www.untitledui.com/images/flags/NA.svg",
+    phoneCode: "264",
+    phoneMask: "+264-##-###-####"
+  },
+  {
+    name: "Nauru",
+    code: "NR",
+    flag: "https://www.untitledui.com/images/flags/NR.svg",
+    phoneCode: "674",
+    phoneMask: "+674-###-####"
+  },
+  {
+    name: "Nepal",
+    code: "NP",
+    flag: "https://www.untitledui.com/images/flags/NP.svg",
+    phoneCode: "977",
+    phoneMask: "+977-##-###-###"
+  },
+  {
+    name: "Netherlands",
+    code: "NL",
+    flag: "https://www.untitledui.com/images/flags/NL.svg",
+    phoneCode: "31",
+    phoneMask: "+31-##-###-####"
+  },
+  {
+    name: "New Zealand",
+    code: "NZ",
+    flag: "https://www.untitledui.com/images/flags/NZ.svg",
+    phoneCode: "64",
+    phoneMask: "+64 (###) ###-####"
+  },
+  {
+    name: "Nicaragua",
+    code: "NI",
+    flag: "https://www.untitledui.com/images/flags/NI.svg",
+    phoneCode: "505",
+    phoneMask: "+505-####-####"
+  },
+  {
+    name: "Niger",
+    code: "NE",
+    flag: "https://www.untitledui.com/images/flags/NE.svg",
+    phoneCode: "227",
+    phoneMask: "+227-##-##-####"
+  },
+  {
+    name: "Nigeria",
+    code: "NG",
+    flag: "https://www.untitledui.com/images/flags/NG.svg",
+    phoneCode: "234",
+    phoneMask: "+234 (###) ###-####"
+  },
+  {
+    name: "North Korea",
+    code: "KP",
+    flag: "https://www.untitledui.com/images/flags/KP.svg",
+    phoneCode: "850",
+    phoneMask: "+850-####-#############"
+  },
+  {
+    name: "North Macedonia",
+    code: "MK",
+    flag: "https://www.untitledui.com/images/flags/MK.svg",
+    phoneCode: "389",
+    phoneMask: "+389-##-###-###"
+  },
+  {
+    name: "Norway",
+    code: "NO",
+    flag: "https://www.untitledui.com/images/flags/NO.svg",
+    phoneCode: "47",
+    phoneMask: "+47 (###) ##-###"
+  },
+  {
+    name: "Oman",
+    code: "OM",
+    flag: "https://www.untitledui.com/images/flags/OM.svg",
+    phoneCode: "968",
+    phoneMask: "+968-##-###-###"
+  },
+  {
+    name: "Pakistan",
+    code: "PK",
+    flag: "https://www.untitledui.com/images/flags/PK.svg",
+    phoneCode: "92",
+    phoneMask: "+92 (###) ###-####"
+  },
+  {
+    name: "Palau",
+    code: "PW",
+    flag: "https://www.untitledui.com/images/flags/PW.svg",
+    phoneCode: "680",
+    phoneMask: "+680-###-####"
+  },
+  {
+    name: "Panama",
+    code: "PA",
+    flag: "https://www.untitledui.com/images/flags/PA.svg",
+    phoneCode: "507",
+    phoneMask: "+507-###-####"
+  },
+  {
+    name: "Papua New Guinea",
+    code: "PG",
+    flag: "https://www.untitledui.com/images/flags/PG.svg",
+    phoneCode: "675",
+    phoneMask: "+675 (###) ##-###"
+  },
+  {
+    name: "Paraguay",
+    code: "PY",
+    flag: "https://www.untitledui.com/images/flags/PY.svg",
+    phoneCode: "595",
+    phoneMask: "+595 (###) ###-###"
+  },
+  {
+    name: "Peru",
+    code: "PE",
+    flag: "https://www.untitledui.com/images/flags/PE.svg",
+    phoneCode: "51",
+    phoneMask: "+51 (###) ###-###"
+  },
+  {
+    name: "Philippines",
+    code: "PH",
+    flag: "https://www.untitledui.com/images/flags/PH.svg",
+    phoneCode: "63",
+    phoneMask: "+63 (###) ###-####"
+  },
+  {
+    name: "Poland",
+    code: "PL",
+    flag: "https://www.untitledui.com/images/flags/PL.svg",
+    phoneCode: "48",
+    phoneMask: "+48 (###) ###-###"
+  },
+  {
+    name: "Portugal",
+    code: "PT",
+    flag: "https://www.untitledui.com/images/flags/PT.svg",
+    phoneCode: "351",
+    phoneMask: "+351-##-###-####"
+  },
+  {
+    name: "Qatar",
+    code: "QA",
+    flag: "https://www.untitledui.com/images/flags/QA.svg",
+    phoneCode: "974",
+    phoneMask: "+974-####-####"
+  },
+  {
+    name: "Romania",
+    code: "RO",
+    flag: "https://www.untitledui.com/images/flags/RO.svg",
+    phoneCode: "40",
+    phoneMask: "+40-##-###-####"
+  },
+  {
+    name: "Russia",
+    code: "RU",
+    flag: "https://www.untitledui.com/images/flags/RU.svg",
+    phoneCode: "7",
+    phoneMask: "+7 (###) ###-##-##"
+  },
+  {
+    name: "Rwanda",
+    code: "RW",
+    flag: "https://www.untitledui.com/images/flags/RW.svg",
+    phoneCode: "250",
+    phoneMask: "+250 (###) ###-###"
+  },
+  {
+    name: "Saint Kitts and Nevis",
+    code: "KN",
+    flag: "https://www.untitledui.com/images/flags/KN.svg",
+    phoneCode: "+1-869",
+    phoneMask: "+1 (869) ###-####"
+  },
+  {
+    name: "Saint Lucia",
+    code: "LC",
+    flag: "https://www.untitledui.com/images/flags/LC.svg",
+    phoneCode: "+1-758",
+    phoneMask: "+1 (758) ###-####"
+  },
+  {
+    name: "Saint Vincent and the Grenadines",
+    code: "VC",
+    flag: "https://www.untitledui.com/images/flags/VC.svg",
+    phoneCode: "+1-784",
+    phoneMask: "+1 (784) ###-####"
+  },
+  {
+    name: "Samoa",
+    code: "WS",
+    flag: "https://www.untitledui.com/images/flags/WS.svg",
+    phoneCode: "685",
+    phoneMask: "+685-##-####"
+  },
+  {
+    name: "San Marino",
+    code: "SM",
+    flag: "https://www.untitledui.com/images/flags/SM.svg",
+    phoneCode: "378",
+    phoneMask: "+378-####-######"
+  },
+  {
+    name: "Sao Tome and Principe",
+    code: "ST",
+    flag: "https://www.untitledui.com/images/flags/ST.svg",
+    phoneCode: "239",
+    phoneMask: "+239-##-#####"
+  },
+  {
+    name: "Saudi Arabia",
+    code: "SA",
+    flag: "https://www.untitledui.com/images/flags/SA.svg",
+    phoneCode: "966",
+    phoneMask: "+966-#-###-####"
+  },
+  {
+    name: "Senegal",
+    code: "SN",
+    flag: "https://www.untitledui.com/images/flags/SN.svg",
+    phoneCode: "221",
+    phoneMask: "+221-##-###-####"
+  },
+  {
+    name: "Serbia",
+    code: "RS",
+    flag: "https://www.untitledui.com/images/flags/RS.svg",
+    phoneCode: "381",
+    phoneMask: "+381-##-###-####"
+  },
+  {
+    name: "Seychelles",
+    code: "SC",
+    flag: "https://www.untitledui.com/images/flags/SC.svg",
+    phoneCode: "248",
+    phoneMask: "+248-#-###-###"
+  },
+  {
+    name: "Sierra Leone",
+    code: "SL",
+    flag: "https://www.untitledui.com/images/flags/SL.svg",
+    phoneCode: "232",
+    phoneMask: "+232-##-######"
+  },
+  {
+    name: "Singapore",
+    code: "SG",
+    flag: "https://www.untitledui.com/images/flags/SG.svg",
+    phoneCode: "65",
+    phoneMask: "+65-####-####"
+  },
+  {
+    name: "Slovakia",
+    code: "SK",
+    flag: "https://www.untitledui.com/images/flags/SK.svg",
+    phoneCode: "421",
+    phoneMask: "+421 (###) ###-###"
+  },
+  {
+    name: "Slovenia",
+    code: "SI",
+    flag: "https://www.untitledui.com/images/flags/SI.svg",
+    phoneCode: "386",
+    phoneMask: "+386-##-###-###"
+  },
+  {
+    name: "Solomon Islands",
+    code: "SB",
+    flag: "https://www.untitledui.com/images/flags/SB.svg",
+    phoneCode: "677",
+    phoneMask: "+677-#####"
+  },
+  {
+    name: "Somalia",
+    code: "SO",
+    flag: "https://www.untitledui.com/images/flags/SO.svg",
+    phoneCode: "252",
+    phoneMask: "+252-#-###-###"
+  },
+  {
+    name: "South Africa",
+    code: "ZA",
+    flag: "https://www.untitledui.com/images/flags/ZA.svg",
+    phoneCode: "27",
+    phoneMask: "+27-##-###-####"
+  },
+  {
+    name: "South Korea",
+    code: "KR",
+    flag: "https://www.untitledui.com/images/flags/KR.svg",
+    phoneCode: "82",
+    phoneMask: "+82-##-###-####"
+  },
+  {
+    name: "South Sudan",
+    code: "SS",
+    flag: "https://www.untitledui.com/images/flags/SS.svg",
+    phoneCode: "211",
+    phoneMask: "+211-##-###-####"
+  },
+  {
+    name: "Spain",
+    code: "ES",
+    flag: "https://www.untitledui.com/images/flags/ES.svg",
+    phoneCode: "34",
+    phoneMask: "+34 (###) ###-###"
+  },
+  {
+    name: "Sri Lanka",
+    code: "LK",
+    flag: "https://www.untitledui.com/images/flags/LK.svg",
+    phoneCode: "94",
+    phoneMask: "+94-##-###-####"
+  },
+  {
+    name: "Suriname",
+    code: "SR",
+    flag: "https://www.untitledui.com/images/flags/SR.svg",
+    phoneCode: "597",
+    phoneMask: "+597-###-###"
+  },
+  {
+    name: "Sweden",
+    code: "SE",
+    flag: "https://www.untitledui.com/images/flags/SE.svg",
+    phoneCode: "46",
+    phoneMask: "+46-##-###-####"
+  },
+  {
+    name: "Switzerland",
+    code: "CH",
+    flag: "https://www.untitledui.com/images/flags/CH.svg",
+    phoneCode: "41",
+    phoneMask: "+41-##-###-####"
+  },
+  {
+    name: "Syria",
+    code: "SY",
+    flag: "https://www.untitledui.com/images/flags/SY.svg",
+    phoneCode: "963",
+    phoneMask: "+963-##-####-###"
+  },
+  {
+    name: "Tajikistan",
+    code: "TJ",
+    flag: "https://www.untitledui.com/images/flags/TJ.svg",
+    phoneCode: "992",
+    phoneMask: "+992-##-###-####"
+  },
+  {
+    name: "Tanzania",
+    code: "TZ",
+    flag: "https://www.untitledui.com/images/flags/TZ.svg",
+    phoneCode: "255",
+    phoneMask: "+255-##-###-####"
+  },
+  {
+    name: "Thailand",
+    code: "TH",
+    flag: "https://www.untitledui.com/images/flags/TH.svg",
+    phoneCode: "66",
+    phoneMask: "+66-##-###-###"
+  },
+  {
+    name: "Togo",
+    code: "TG",
+    flag: "https://www.untitledui.com/images/flags/TG.svg",
+    phoneCode: "228",
+    phoneMask: "+228-##-###-###"
+  },
+  {
+    name: "Tonga",
+    code: "TO",
+    flag: "https://www.untitledui.com/images/flags/TO.svg",
+    phoneCode: "676",
+    phoneMask: "+676-#####"
+  },
+  {
+    name: "Trinidad and Tobago",
+    code: "TT",
+    flag: "https://www.untitledui.com/images/flags/TT.svg",
+    phoneCode: "+1-868",
+    phoneMask: "+1 (868) ###-####"
+  },
+  {
+    name: "Tunisia",
+    code: "TN",
+    flag: "https://www.untitledui.com/images/flags/TN.svg",
+    phoneCode: "216",
+    phoneMask: "+216-##-###-###"
+  },
+  {
+    name: "Turkey",
+    code: "TR",
+    flag: "https://www.untitledui.com/images/flags/TR.svg",
+    phoneCode: "90",
+    phoneMask: "+90 (###) ###-####"
+  },
+  {
+    name: "Turkmenistan",
+    code: "TM",
+    flag: "https://www.untitledui.com/images/flags/TM.svg",
+    phoneCode: "993",
+    phoneMask: "+993-#-###-####"
+  },
+  {
+    name: "Tuvalu",
+    code: "TV",
+    flag: "https://www.untitledui.com/images/flags/TV.svg",
+    phoneCode: "688",
+    phoneMask: "+688-2####"
+  },
+  {
+    name: "Uganda",
+    code: "UG",
+    flag: "https://www.untitledui.com/images/flags/UG.svg",
+    phoneCode: "256",
+    phoneMask: "+256 (###) ###-###"
+  },
+  {
+    name: "Ukraine",
+    code: "UA",
+    flag: "https://www.untitledui.com/images/flags/UA.svg",
+    phoneCode: "380",
+    phoneMask: "+380 (##) ###-##-##"
+  },
+  {
+    name: "United Arab Emirates",
+    code: "AE",
+    flag: "https://www.untitledui.com/images/flags/AE.svg",
+    phoneCode: "971",
+    phoneMask: "+971-#-###-####"
+  },
+  {
+    name: "United Kingdom",
+    code: "GB",
+    flag: "https://www.untitledui.com/images/flags/GB.svg",
+    phoneCode: "44"
+  },
+  {
+    name: "United States",
+    code: "US",
+    flag: "https://www.untitledui.com/images/flags/US.svg",
+    phoneCode: "1",
+    phoneMask: "+1 (###) ###-####"
+  },
+  {
+    name: "Uruguay",
+    code: "UY",
+    flag: "https://www.untitledui.com/images/flags/UY.svg",
+    phoneCode: "598",
+    phoneMask: "+598-#-###-##-##"
+  },
+  {
+    name: "Uzbekistan",
+    code: "UZ",
+    flag: "https://www.untitledui.com/images/flags/UZ.svg",
+    phoneCode: "998",
+    phoneMask: "+998-##-###-####"
+  },
+  {
+    name: "Vanuatu",
+    code: "VU",
+    flag: "https://www.untitledui.com/images/flags/VU.svg",
+    phoneCode: "678",
+    phoneMask: "+678-#####"
+  },
+  {
+    name: "Venezuela",
+    code: "VE",
+    flag: "https://www.untitledui.com/images/flags/VE.svg",
+    phoneCode: "58",
+    phoneMask: "+58 (###) ###-####"
+  },
+  {
+    name: "Vietnam",
+    code: "VN",
+    flag: "https://www.untitledui.com/images/flags/VN.svg",
+    phoneCode: "84",
+    phoneMask: "+84 (###) ####-###"
+  },
+  {
+    name: "Yemen",
+    code: "YE",
+    flag: "https://www.untitledui.com/images/flags/YE.svg",
+    phoneCode: "967",
+    phoneMask: "+967-##-###-###"
+  },
+  {
+    name: "Zambia",
+    code: "ZM",
+    flag: "https://www.untitledui.com/images/flags/ZM.svg",
+    phoneCode: "260",
+    phoneMask: "+260-##-###-####"
+  },
+  {
+    name: "Zimbabwe",
+    code: "ZW",
+    flag: "https://www.untitledui.com/images/flags/ZW.svg",
+    phoneCode: "263",
+    phoneMask: "+263-#-######"
+  }
+];
+var phoneCodeOptions = countries.map((country) => ({
+  id: country.code,
+  label: country.code
+}));
+var countriesOptions = countries.map((country) => ({
+  id: country.code,
+  label: country.name,
+  icon: (props) => {
+    const restProps = __objRest(props, []);
+    return /* @__PURE__ */ React.createElement(Image, __spreadProps(__spreadValues({}, restProps), { src: country.flag, alt: `${country.name} flag`, width: 20, height: 15 }));
+  }
+}));
+
+// src/utils/phone-helpers.ts
+function getNationalMask(country) {
+  if (!(country == null ? void 0 : country.phoneMask)) return "";
+  const code = country.phoneCode.startsWith("+") ? country.phoneCode : `+${country.phoneCode}`;
+  const escaped = code.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return country.phoneMask.replace(new RegExp(`^\\s*${escaped}[\\s-]*`), "").trim();
+}
+function formatDigitsToMask(digits, mask) {
+  if (digits.length === 0) return "";
+  let i = 0;
+  let out = "";
+  for (const c of mask) {
+    if (c === "#") {
+      if (i < digits.length) out += digits[i++];
+      else break;
+    } else if (i < digits.length) {
+      out += c;
+    }
+  }
+  return out;
+}
+
+// src/tracking/firePixelEvent.ts
+var STORAGE_KEY = "ks_pud";
+async function sha256Hex(str) {
+  const buffer = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(str));
+  return Array.from(new Uint8Array(buffer)).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+function getFbq() {
+  if (typeof window === "undefined") return void 0;
+  return window.fbq;
+}
+function getRegisteredPixelIds() {
+  var _a;
+  return (_a = window.__ks_pixel_ids) != null ? _a : [];
+}
+function applyStoredUserData(fbq) {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    if (!raw) return;
+    const hashed = JSON.parse(raw);
+    if (Object.keys(hashed).length === 0) return;
+    getRegisteredPixelIds().forEach((id) => fbq("init", id, hashed));
+  } catch (e) {
+  }
+}
+async function setPixelUserData(userData) {
+  const hashed = {};
+  if (userData.email) {
+    hashed.em = await sha256Hex(userData.email.trim().toLowerCase());
+  }
+  if (userData.phone) {
+    const digits = userData.phone.replace(/\D/g, "");
+    if (digits) hashed.ph = await sha256Hex(digits);
+  }
+  if (Object.keys(hashed).length === 0) return;
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(hashed));
+  } catch (e) {
+  }
+  const fbq = getFbq();
+  if (fbq) {
+    getRegisteredPixelIds().forEach((id) => fbq("init", id, hashed));
+  }
+}
+function firePixelEvent(event, params, eventId) {
+  const fbq = getFbq();
+  if (!fbq) {
+    console.debug("[MetaPixel] skipped \u2014 fbq not loaded", { event });
+    return;
+  }
+  applyStoredUserData(fbq);
+  const normalized = {};
+  if (params == null ? void 0 : params.contentName) normalized.content_name = params.contentName;
+  if (params == null ? void 0 : params.contentCategory) normalized.content_category = params.contentCategory;
+  const customData = Object.keys(normalized).length > 0 ? normalized : void 0;
+  const eventData = eventId ? { eventID: eventId } : void 0;
+  console.debug("[MetaPixel]", event, normalized, eventId ? { eventID: eventId } : "");
+  fbq("track", event, customData, eventData);
+}
+
+// src/tracking/captureEvent.ts
+import posthog from "posthog-js";
+function captureEvent(event, ...args) {
+  posthog.capture(event, args[0]);
+}
+
+// src/design_system/portal/LoginForm.tsx
+var inputClass = "block w-full rounded-input border border-primary bg-primary px-3 py-2.5 text-base text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors";
+var labelClass = "block text-sm text-secondary mb-1";
+function LoginForm({ onSuccess, onClose }) {
+  const router = useRouter2();
+  const [step, setStep] = useState("identifier");
+  const [phoneValue, setPhoneValue] = useState("");
+  const [selectedCountry, setSelectedCountry] = useState("US");
+  const [verificationCode, setVerificationCode] = useState("");
+  const [verificationToken, setVerificationToken] = useState(null);
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [resendAvailableAt, setResendAvailableAt] = useState(null);
+  const [secondsUntilResend, setSecondsUntilResend] = useState(0);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+  useEffect2(() => {
+    captureEvent("portal_login_started");
+  }, []);
+  useEffect2(() => {
+    const funnelStep = step === "identifier" ? "identifier" : step === "verify" ? "signin" : "signup";
+    captureEvent("portal_login_step_viewed", { step: funnelStep });
+  }, [step]);
+  const country = useMemo(() => countries.find((c) => c.code === selectedCountry), [selectedCountry]);
+  const phoneCode = country ? country.phoneCode.startsWith("+") ? country.phoneCode : `+${country.phoneCode}` : "+1";
+  const nationalMask = useMemo(() => getNationalMask(country), [country]);
+  const nationalPlaceholder = nationalMask ? nationalMask.replace(/#/g, "0") : "(555) 000-0000";
+  const countryOptions = useMemo(
+    () => countries.map((c) => ({ label: c.phoneCode.startsWith("+") ? c.phoneCode : `+${c.phoneCode}`, value: c.code })),
+    []
+  );
+  const phoneDigits = phoneValue.replace(/\D/g, "");
+  const fullPhone = phoneDigits.length > 0 ? `${phoneCode}${phoneDigits}` : null;
+  useEffect2(() => {
+    if (!resendAvailableAt) {
+      setSecondsUntilResend(0);
+      return;
+    }
+    const tick = () => {
+      const remaining = Math.max(0, Math.ceil((resendAvailableAt - Date.now()) / 1e3));
+      setSecondsUntilResend(remaining);
+    };
+    tick();
+    const interval = window.setInterval(tick, 1e3);
+    return () => window.clearInterval(interval);
+  }, [resendAvailableAt]);
+  const phoneInput = (value, onChange, required = false) => /* @__PURE__ */ React3.createElement("div", { className: "flex rounded-input border border-primary overflow-hidden focus-within:border-brand focus-within:ring-1 focus-within:ring-brand transition-colors" }, /* @__PURE__ */ React3.createElement(
+    "select",
+    {
+      value: selectedCountry,
+      onChange: (e) => {
+        setSelectedCountry(e.target.value);
+        onChange("");
+      },
+      className: "border-r border-secondary bg-secondary px-2 py-2.5 text-base text-secondary focus:outline-none",
+      "aria-label": "Country code"
+    },
+    countryOptions.map((opt) => /* @__PURE__ */ React3.createElement("option", { key: opt.value, value: opt.value }, opt.label))
+  ), /* @__PURE__ */ React3.createElement(
+    "input",
+    {
+      type: "tel",
+      value,
+      onChange: (e) => {
+        const digits = e.target.value.replace(/\D/g, "");
+        onChange(nationalMask ? formatDigitsToMask(digits, nationalMask) : digits);
+      },
+      placeholder: nationalPlaceholder,
+      className: "flex-1 px-3 py-2.5 text-base text-primary placeholder-quaternary bg-transparent focus:outline-none",
+      autoComplete: "tel",
+      required
+    }
+  ));
+  const finishPasswordlessAuth = async ({
+    token,
+    firstNameValue,
+    lastNameValue,
+    emailValue
+  }) => {
+    const res = await fetch("/api/consumer/passwordless_auth", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify({
+        phone: fullPhone,
+        verification_token: token,
+        first_name: firstNameValue.trim(),
+        last_name: lastNameValue.trim(),
+        email: emailValue.trim()
+      })
+    });
+    const result = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError(result.error || "Authentication failed. Please try again.");
+      captureEvent("portal_login_failed", { step: "signup", reason: result.error || "passwordless_auth_failed" });
+      return false;
+    }
+    firePixelEvent("Lead");
+    captureEvent("portal_login_step_advanced", { from_step: "signup", to_step: "authenticated", reason: "passwordless_auth_success" });
+    captureEvent("portal_login_completed", { flow: "signup" });
+    setResendAvailableAt(null);
+    setSecondsUntilResend(0);
+    if (onSuccess) onSuccess();
+    else router.refresh();
+    return true;
+  };
+  const handleSendCode = async (e) => {
+    e.preventDefault();
+    if (!fullPhone) {
+      setError("Enter your phone number to continue.");
+      captureEvent("portal_login_failed", { step: "identifier", reason: "validation_missing_phone" });
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    captureEvent("portal_login_step_submitted", { step: "identifier" });
+    try {
+      const res = await fetch("/api/consumer/send_code", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ phone: fullPhone })
+      });
+      const result = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        if (result.code === "cooldown_active" && typeof result.retry_in_seconds === "number") {
+          setResendAvailableAt(Date.now() + result.retry_in_seconds * 1e3);
+        }
+        setError(result.error || "Could not send verification code.");
+        return;
+      }
+      await setPixelUserData({ phone: fullPhone });
+      firePixelEvent("Lead");
+      setResendAvailableAt(result.resend_available_at ? new Date(result.resend_available_at).getTime() : Date.now() + 5 * 60 * 1e3);
+      setStep("verify");
+      captureEvent("portal_login_step_advanced", { from_step: "identifier", to_step: "signin", reason: "verification_code_sent" });
+    } catch (e2) {
+      setError("Could not send verification code.");
+      captureEvent("portal_login_failed", { step: "identifier", reason: "network_error" });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleVerifyCode = async (e) => {
+    e.preventDefault();
+    const code = verificationCode.replace(/\D/g, "");
+    if (!fullPhone || code.length !== 4) {
+      setError("Enter the 4-digit code sent to your phone.");
+      captureEvent("portal_login_failed", { step: "signin", reason: "validation_invalid_code" });
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    captureEvent("portal_login_step_submitted", { step: "signin" });
+    try {
+      const res = await fetch("/api/consumer/verify_code", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ phone: fullPhone, code })
+      });
+      const result = await res.json().catch(() => ({}));
+      if (!res.ok || !result.verification_token) {
+        setError(result.error || "That code is invalid or expired.");
+        captureEvent("portal_login_failed", { step: "signin", reason: result.code || "verification_failed" });
+        return;
+      }
+      setVerificationToken(result.verification_token);
+      setFirstName(result.first_name || "");
+      setLastName(result.last_name || "");
+      setEmail(result.email || "");
+      const hasCompleteExistingProfile = typeof result.first_name === "string" && result.first_name.trim().length > 0 && typeof result.last_name === "string" && result.last_name.trim().length > 0 && typeof result.email === "string" && result.email.trim().length > 0;
+      if (hasCompleteExistingProfile) {
+        captureEvent("portal_login_step_advanced", {
+          from_step: "signin",
+          to_step: "authenticated",
+          reason: "verification_success_profile_complete"
+        });
+        await finishPasswordlessAuth({
+          token: result.verification_token,
+          firstNameValue: result.first_name,
+          lastNameValue: result.last_name,
+          emailValue: result.email
+        });
+        return;
+      }
+      setStep("profile");
+      captureEvent("portal_login_step_advanced", { from_step: "signin", to_step: "signup", reason: "verification_success" });
+    } catch (e2) {
+      setError("That code is invalid or expired.");
+      captureEvent("portal_login_failed", { step: "signin", reason: "network_error" });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleResendCode = async () => {
+    if (!fullPhone || loading || secondsUntilResend > 0) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/consumer/send_code", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ phone: fullPhone })
+      });
+      const result = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        if (result.code === "cooldown_active" && typeof result.retry_in_seconds === "number") {
+          setResendAvailableAt(Date.now() + result.retry_in_seconds * 1e3);
+        }
+        setError(result.error || "Could not request a new code yet.");
+        return;
+      }
+      setVerificationCode("");
+      setResendAvailableAt(result.resend_available_at ? new Date(result.resend_available_at).getTime() : Date.now() + 5 * 60 * 1e3);
+    } catch (e) {
+      setError("Could not request a new code yet.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleProfileSubmit = async (e) => {
+    e.preventDefault();
+    if (!fullPhone || !verificationToken) {
+      setError("Verification expired. Please request a new code.");
+      setStep("identifier");
+      return;
+    }
+    if (!firstName.trim() || !lastName.trim() || !email.trim()) {
+      setError("Please enter your first name, last name, and email.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    captureEvent("portal_login_step_submitted", { step: "signup" });
+    try {
+      await finishPasswordlessAuth({
+        token: verificationToken,
+        firstNameValue: firstName,
+        lastNameValue: lastName,
+        emailValue: email
+      });
+    } catch (e2) {
+      setError("Authentication failed. Please try again.");
+      captureEvent("portal_login_failed", { step: "signup", reason: "network_error" });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const goBackToPhone = () => {
+    setStep("identifier");
+    setVerificationCode("");
+    setVerificationToken(null);
+    setFirstName("");
+    setLastName("");
+    setEmail("");
+    setResendAvailableAt(null);
+    setError(null);
+  };
+  const formatCountdown = (totalSeconds) => {
+    const mins = Math.floor(totalSeconds / 60);
+    const secs = totalSeconds % 60;
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+  const headerTitle = step === "identifier" ? "Welcome" : step === "verify" ? "Verify your phone" : "Last step";
+  const headerSubtitle = step === "identifier" ? "Enter your phone number to get started." : step === "verify" ? "We sent a 4-digit verification code by text." : "Enter your first name, last name, and email.";
+  return /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", { className: "flex items-start justify-between gap-4 mb-5" }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("h3", { className: "text-lg font-normal text-primary" }, headerTitle), /* @__PURE__ */ React3.createElement("p", { className: "mt-0.5 text-sm text-tertiary" }, headerSubtitle)), onClose && /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onClose,
+      className: "shrink-0 p-1 text-tertiary hover:text-primary transition-colors",
+      "aria-label": "Close"
+    },
+    /* @__PURE__ */ React3.createElement("svg", { className: "size-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5 }, /* @__PURE__ */ React3.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }))
+  )), error && /* @__PURE__ */ React3.createElement("div", { className: "mb-4 rounded-input border border-error bg-error-primary px-3 py-2 text-sm text-error-primary" }, error), /* @__PURE__ */ React3.createElement("div", { className: "relative overflow-hidden transition-all duration-300 ease-out" }, step === "identifier" && /* @__PURE__ */ React3.createElement("form", { onSubmit: handleSendCode, className: "space-y-3" }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("label", { className: labelClass }, "Phone number"), phoneInput(phoneValue, setPhoneValue, true)), /* @__PURE__ */ React3.createElement("div", { className: "pt-1" }, /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "submit",
+      disabled: loading,
+      className: "w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
+    },
+    loading ? "Sending code\u2026" : "Continue"
+  ))), step === "verify" && /* @__PURE__ */ React3.createElement("form", { onSubmit: handleVerifyCode, className: "space-y-3" }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("label", { className: labelClass }, "Verification code"), /* @__PURE__ */ React3.createElement(
+    "input",
+    {
+      type: "text",
+      value: verificationCode,
+      onChange: (e) => setVerificationCode(e.target.value.replace(/\D/g, "").slice(0, 4)),
+      placeholder: "0000",
+      className: inputClass,
+      autoComplete: "one-time-code",
+      inputMode: "numeric",
+      required: true
+    }
+  )), /* @__PURE__ */ React3.createElement("div", { className: "pt-1" }, /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "submit",
+      disabled: loading,
+      className: "w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
+    },
+    loading ? "Verifying\u2026" : "Verify code"
+  )), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleResendCode,
+      disabled: loading || secondsUntilResend > 0,
+      className: "w-full text-center text-sm text-tertiary hover:text-primary transition-colors disabled:opacity-50"
+    },
+    secondsUntilResend > 0 ? `Request new code in ${formatCountdown(secondsUntilResend)}` : "Request new code"
+  ), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: goBackToPhone,
+      className: "w-full text-center text-sm text-tertiary hover:text-primary transition-colors"
+    },
+    "\u2190 Use a different phone number"
+  )), step === "profile" && /* @__PURE__ */ React3.createElement("form", { onSubmit: handleProfileSubmit, className: "space-y-3" }, /* @__PURE__ */ React3.createElement("div", { className: "grid grid-cols-2 gap-3" }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("label", { className: labelClass }, "First name"), /* @__PURE__ */ React3.createElement(
+    "input",
+    {
+      type: "text",
+      value: firstName,
+      onChange: (e) => setFirstName(e.target.value),
+      placeholder: "Jane",
+      className: inputClass,
+      autoComplete: "given-name",
+      required: true
+    }
+  )), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("label", { className: labelClass }, "Last name"), /* @__PURE__ */ React3.createElement(
+    "input",
+    {
+      type: "text",
+      value: lastName,
+      onChange: (e) => setLastName(e.target.value),
+      placeholder: "Smith",
+      className: inputClass,
+      autoComplete: "family-name",
+      required: true
+    }
+  ))), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("label", { className: labelClass }, "Email address"), /* @__PURE__ */ React3.createElement(
+    "input",
+    {
+      type: "email",
+      value: email,
+      onChange: (e) => setEmail(e.target.value),
+      placeholder: "you@example.com",
+      className: inputClass,
+      autoComplete: "email",
+      required: true
+    }
+  )), /* @__PURE__ */ React3.createElement("div", { className: "pt-1" }, /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "submit",
+      disabled: loading,
+      className: "w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
+    },
+    loading ? "Finishing\u2026" : "Continue"
+  )), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: goBackToPhone,
+      className: "w-full text-center text-sm text-tertiary hover:text-primary transition-colors"
+    },
+    "\u2190 Use a different phone number"
+  ))));
+}
+
+// src/design_system/portal/LoginModalController.tsx
+var keystoneFooter = /* @__PURE__ */ React4.createElement("div", { className: "px-6 py-4 bg-secondary flex flex-col items-center gap-1" }, /* @__PURE__ */ React4.createElement("a", { href: KEYSTONE_APP_URL, target: "_blank", rel: "noopener noreferrer", "aria-label": "Visit Keystone website" }, /* @__PURE__ */ React4.createElement(KeystoneLogoMinimal, { className: "h-5 w-auto shrink-0" })), /* @__PURE__ */ React4.createElement(
+  "a",
+  {
+    href: KEYSTONE_APP_URL,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "text-xs text-quaternary hover:text-secondary transition-colors"
+  },
+  "Powered by Keystone Universal Login"
+));
+function LoginModalController() {
+  const [open, setOpen] = useState2(false);
+  const [redirectUrl, setRedirectUrl] = useState2(null);
+  const [refreshing, setRefreshing] = useState2(false);
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter3();
+  useEffect3(() => {
+    const handleClick = (e) => {
+      const trigger = e.target.closest("[data-open-login-modal]");
+      if (trigger) {
+        e.preventDefault();
+        setRedirectUrl(trigger.getAttribute("data-login-redirect"));
+        setOpen(true);
+      }
+    };
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, []);
+  const handleSuccess = () => {
+    setRefreshing(true);
+    startTransition(() => {
+      if (redirectUrl) {
+        router.push(redirectUrl);
+        setRedirectUrl(null);
+      } else {
+        router.refresh();
+      }
+    });
+  };
+  useEffect3(() => {
+    if (!(refreshing && !isPending)) return;
+    const timeout = window.setTimeout(() => {
+      setOpen(false);
+      setRefreshing(false);
+    }, 0);
+    return () => window.clearTimeout(timeout);
+  }, [refreshing, isPending]);
+  return /* @__PURE__ */ React4.createElement(
+    Modal,
+    {
+      isOpen: open,
+      onClose: refreshing ? () => {
+      } : () => setOpen(false),
+      hideHeader: true,
+      ariaLabel: "Sign in or create account",
+      footer: refreshing ? void 0 : keystoneFooter
+    },
+    refreshing ? /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col items-center justify-center py-12 gap-3" }, /* @__PURE__ */ React4.createElement("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-brand border-t-transparent" }), /* @__PURE__ */ React4.createElement("p", { className: "text-sm text-tertiary" }, "Signing you in\u2026")) : /* @__PURE__ */ React4.createElement(LoginForm, { onSuccess: handleSuccess, onClose: () => setOpen(false) })
+  );
+}
+
+// src/design_system/portal/MessageComposer.tsx
+import React5, { useState as useState3, useTransition as useTransition2, useRef as useRef3, useEffect as useEffect5, useCallback as useCallback2 } from "react";
+import { useRouter as useRouter4 } from "next/navigation";
+
+// src/design_system/chat/useRealtimeReplyOrchestrator.ts
+import { useCallback, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { createConsumer } from "@rails/actioncable";
+function useRealtimeReplyOrchestrator({
+  debugLabel,
+  fetchRealtimeData,
+  loadLatestHasReply,
+  onReplyResolved,
+  onAgentThinking
+}) {
+  const cableRef = useRef2(null);
+  const subscriptionRef = useRef2(null);
+  const subscribedContactRef = useRef2(null);
+  const clearRealtime = useCallback(() => {
+    if (subscriptionRef.current) {
+      subscriptionRef.current.unsubscribe();
+      subscriptionRef.current = null;
+    }
+    if (cableRef.current) {
+      cableRef.current.disconnect();
+      cableRef.current = null;
+    }
+    subscribedContactRef.current = null;
+  }, []);
+  const resolveReply = useCallback(() => {
+    onReplyResolved();
+  }, [onReplyResolved]);
+  const subscribeRealtime = useCallback((realtime) => {
+    const token = realtime.token;
+    const contactIdForStream = realtime.contact_id;
+    const cableUrl = realtime.cable_url;
+    if (!token || !contactIdForStream || !cableUrl) return;
+    if (subscribedContactRef.current === contactIdForStream && subscriptionRef.current && cableRef.current) {
+      return;
+    }
+    clearRealtime();
+    const cable = createConsumer(`${cableUrl}?token=${encodeURIComponent(token)}`);
+    cableRef.current = cable;
+    subscribedContactRef.current = contactIdForStream;
+    subscriptionRef.current = cable.subscriptions.create(
+      { channel: "ContactCommunicationsChannel", contact_id: String(contactIdForStream) },
+      {
+        connected: () => {
+          console.info(`[${debugLabel}] realtime connected contact_id=${contactIdForStream}`);
+        },
+        disconnected: () => {
+          console.warn(`[${debugLabel}] realtime disconnected contact_id=${contactIdForStream}`);
+        },
+        rejected: () => {
+          console.warn(`[${debugLabel}] realtime rejected contact_id=${contactIdForStream}`);
+        },
+        received: async (data) => {
+          var _a;
+          console.info(`[${debugLabel}] realtime received type=${(_a = data == null ? void 0 : data.type) != null ? _a : "unknown"} contact_id=${contactIdForStream}`);
+          if ((data == null ? void 0 : data.type) === "agent_thinking") {
+            onAgentThinking == null ? void 0 : onAgentThinking();
+            return;
+          }
+          if ((data == null ? void 0 : data.type) !== "new_communication") return;
+          try {
+            const hasReply = await loadLatestHasReply();
+            if (hasReply) {
+              resolveReply();
+            }
+          } catch (error) {
+            console.error(`[${debugLabel}] realtime receive handling error`, error);
+          }
+        }
+      }
+    );
+  }, [clearRealtime, debugLabel, loadLatestHasReply, onAgentThinking, resolveReply]);
+  const ensureRealtimeSubscription = useCallback(async () => {
+    try {
+      const realtime = await fetchRealtimeData();
+      if (!realtime) return;
+      subscribeRealtime(realtime);
+    } catch (e) {
+    }
+  }, [fetchRealtimeData, subscribeRealtime]);
+  const beginReplyWait = useCallback((options) => {
+    if (options == null ? void 0 : options.realtimeData) {
+      subscribeRealtime(options.realtimeData);
+    } else {
+      void ensureRealtimeSubscription();
+    }
+  }, [ensureRealtimeSubscription, subscribeRealtime]);
+  useEffect4(() => {
+    return () => {
+      clearRealtime();
+    };
+  }, [clearRealtime]);
+  return {
+    ensureRealtimeSubscription,
+    subscribeRealtime,
+    beginReplyWait
+  };
+}
+
+// src/design_system/portal/MessageComposer.tsx
+function MessageComposer({ contactId }) {
+  const [body, setBody] = useState3("");
+  const [error, setError] = useState3(null);
+  const [isPending, startTransition] = useTransition2();
+  const textareaRef = useRef3(null);
+  const router = useRouter4();
+  const hasAgentReplyWithBody = useCallback2(async () => {
+    const response = await fetch(`/api/chat/?contact_id=${encodeURIComponent(contactId)}`);
+    if (!response.ok) return false;
+    const result = await response.json();
+    const messages = (result == null ? void 0 : result.data) || [];
+    const latest = messages[messages.length - 1];
+    return (latest == null ? void 0 : latest.sender_type) === "agent" && (latest == null ? void 0 : latest.body) != null && String(latest.body).trim() !== "";
+  }, [contactId]);
+  const fetchRealtimeData = useCallback2(async () => {
+    var _a, _b, _c;
+    const response = await fetch(`/api/chat/?action=realtime_token&contact_id=${encodeURIComponent(contactId)}`);
+    if (!response.ok) return null;
+    const result = await response.json();
+    const token = (_a = result == null ? void 0 : result.data) == null ? void 0 : _a.token;
+    const streamContactId = (_b = result == null ? void 0 : result.data) == null ? void 0 : _b.contact_id;
+    const cableUrl = (_c = result == null ? void 0 : result.data) == null ? void 0 : _c.cable_url;
+    if (!token || !streamContactId || !cableUrl) return null;
+    return { token, contact_id: streamContactId, cable_url: cableUrl };
+  }, [contactId]);
+  const {
+    beginReplyWait,
+    ensureRealtimeSubscription
+  } = useRealtimeReplyOrchestrator({
+    debugLabel: "MessageComposer",
+    fetchRealtimeData,
+    loadLatestHasReply: hasAgentReplyWithBody,
+    onReplyResolved: () => {
+      router.refresh();
+    }
+  });
+  useEffect5(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+  }, [body]);
+  useEffect5(() => {
+    void ensureRealtimeSubscription();
+  }, [ensureRealtimeSubscription]);
+  function submit() {
+    if (!body.trim() || isPending) return;
+    setError(null);
+    startTransition(async () => {
+      var _a, _b, _c, _d;
+      try {
+        const res = await fetch("/api/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ contact_id: contactId, body: body.trim() })
+        });
+        const result = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          setError(result.error || "Failed to send message.");
+        } else {
+          setBody("");
+          router.refresh();
+          const hasBackgroundReplyJob = Boolean((_a = result == null ? void 0 : result.data) == null ? void 0 : _a.job_id);
+          if (hasBackgroundReplyJob) {
+            const realtimeFromSend = ((_b = result == null ? void 0 : result.data) == null ? void 0 : _b.realtime_token) && ((_c = result == null ? void 0 : result.data) == null ? void 0 : _c.contact_id) && ((_d = result == null ? void 0 : result.data) == null ? void 0 : _d.cable_url) ? {
+              token: result.data.realtime_token,
+              contact_id: result.data.contact_id,
+              cable_url: result.data.cable_url
+            } : null;
+            beginReplyWait({ realtimeData: realtimeFromSend });
+          }
+        }
+      } catch (e) {
+        setError("Failed to send message.");
+      }
+    });
+  }
+  function handleSubmit(e) {
+    e.preventDefault();
+    submit();
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+  }
+  return /* @__PURE__ */ React5.createElement("form", { onSubmit: handleSubmit, className: "border-t border-secondary px-4 py-3" }, error && /* @__PURE__ */ React5.createElement("p", { className: "mb-2 text-xs text-red-600" }, error), /* @__PURE__ */ React5.createElement("div", { className: "flex items-end gap-2" }, /* @__PURE__ */ React5.createElement(
+    "textarea",
+    {
+      ref: textareaRef,
+      value: body,
+      onChange: (e) => setBody(e.target.value),
+      onKeyDown: handleKeyDown,
+      placeholder: "Type a message\u2026 (Enter to send)",
+      rows: 1,
+      disabled: isPending,
+      className: "flex-1 resize-none rounded-input border border-primary bg-primary px-3 py-2 text-sm text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors disabled:opacity-50"
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      type: "submit",
+      disabled: !body.trim() || isPending,
+      className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-interactive bg-brand-solid text-white transition-colors hover:bg-brand-solid_hover disabled:opacity-40 disabled:cursor-not-allowed",
+      "aria-label": "Send message"
+    },
+    isPending ? /* @__PURE__ */ React5.createElement("svg", { className: "size-4 animate-spin", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React5.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })) : /* @__PURE__ */ React5.createElement("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 }, /* @__PURE__ */ React5.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.269 20.876L5.999 12zm0 0h7.5" }))
+  )));
+}
+
+// src/design_system/portal/RowThumbnail.tsx
+import React6 from "react";
+
+// src/lib/hooks/use-image-cycle.ts
+import { useState as useState4, useEffect as useEffect6, useMemo as useMemo2 } from "react";
+var CYCLE_INTERVAL_MIN_MS = 6e3;
+var CYCLE_INTERVAL_MAX_MS = 8e3;
+var CROSSFADE_DURATION_MS = 600;
+function seedToUnit(seed) {
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0 >>> 0;
+  }
+  return (h >>> 0) / 4294967296;
+}
+function shuffleWithSeed(array, seed) {
+  if (array.length <= 1) return array;
+  const arr = [...array];
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0 >>> 0;
+  }
+  const next = (step) => {
+    h = Math.imul(1664525, h + step >>> 0) + 1013904223 >>> 0;
+    return (h >>> 0) / 4294967296;
+  };
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(next(i) * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+function photoUrlFromAttachment(pa) {
+  var _a, _b, _c;
+  return ((_a = pa.photo) == null ? void 0 : _a.large_url) || ((_b = pa.photo) == null ? void 0 : _b.medium_url) || ((_c = pa.photo) == null ? void 0 : _c.thumbnail_url);
+}
+function photoAltFromAttachment(pa) {
+  var _a, _b;
+  return ((_a = pa.photo) == null ? void 0 : _a.alt_text) || ((_b = pa.photo) == null ? void 0 : _b.title) || "";
+}
+function useImageCycle(photoAttachments, seed) {
+  const list = useMemo2(() => {
+    const arr = Array.isArray(photoAttachments) && photoAttachments.length > 0 ? photoAttachments : [];
+    if (arr.length === 0) return [];
+    return shuffleWithSeed(arr, seed).map((pa) => {
+      var _a;
+      return { url: (_a = photoUrlFromAttachment(pa)) != null ? _a : "", alt: photoAltFromAttachment(pa) };
+    }).filter((x) => x.url);
+  }, [photoAttachments, seed]);
+  const [currentIndex, setCurrentIndex] = useState4(0);
+  const [transitioning, setTransitioning] = useState4(false);
+  const intervalMs = useMemo2(
+    () => CYCLE_INTERVAL_MIN_MS + Math.floor(seedToUnit(seed) * (CYCLE_INTERVAL_MAX_MS - CYCLE_INTERVAL_MIN_MS + 1)),
+    [seed]
+  );
+  useEffect6(() => {
+    if (list.length <= 1) return;
+    const id = setInterval(() => setTransitioning(true), intervalMs);
+    return () => clearInterval(id);
+  }, [list.length, intervalMs]);
+  useEffect6(() => {
+    if (!transitioning || list.length <= 1) return;
+    const t = setTimeout(() => {
+      setCurrentIndex((i) => (i + 1) % list.length);
+      setTransitioning(false);
+    }, CROSSFADE_DURATION_MS);
+    return () => clearTimeout(t);
+  }, [transitioning, list.length]);
+  const nextIndex = list.length > 1 ? (currentIndex + 1) % list.length : 0;
+  return { list, currentIndex, nextIndex, transitioning };
+}
+
+// src/design_system/portal/RowThumbnail.tsx
+var CROSSFADE_STYLE = { transitionDuration: `${CROSSFADE_DURATION_MS}ms` };
+function RowThumbnail({
+  photoAttachments,
+  seed,
+  alt,
+  sizeClassName = "w-14 h-14"
+}) {
+  var _a, _b, _c, _d, _e;
+  const { list, currentIndex, nextIndex, transitioning } = useImageCycle(photoAttachments, seed);
+  const displayAlt = ((_a = list[currentIndex]) == null ? void 0 : _a.alt) || alt;
+  if (list.length === 0) {
+    return /* @__PURE__ */ React6.createElement("div", { className: `${sizeClassName} shrink-0 rounded-component bg-secondary border border-tertiary flex items-center justify-center` }, /* @__PURE__ */ React6.createElement("svg", { className: "size-5 text-quaternary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5 }, /* @__PURE__ */ React6.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" })));
+  }
+  if (list.length === 1) {
+    return /* @__PURE__ */ React6.createElement("div", { className: `${sizeClassName} shrink-0 rounded-component overflow-hidden` }, /* @__PURE__ */ React6.createElement(
+      "img",
+      {
+        src: list[0].url,
+        alt: list[0].alt || alt,
+        className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+      }
+    ));
+  }
+  return /* @__PURE__ */ React6.createElement("div", { className: `${sizeClassName} shrink-0 rounded-component overflow-hidden relative` }, /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `absolute inset-0 ${transitioning ? "transition-opacity ease-in-out" : "transition-none"}`,
+      style: __spreadValues({ opacity: transitioning ? 0 : 1 }, transitioning ? CROSSFADE_STYLE : {})
+    },
+    /* @__PURE__ */ React6.createElement(
+      "img",
+      {
+        src: list[currentIndex].url,
+        alt: (_c = (_b = list[currentIndex]) == null ? void 0 : _b.alt) != null ? _c : displayAlt,
+        className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+      }
+    )
+  ), /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `absolute inset-0 ${transitioning ? "transition-opacity ease-in-out" : "transition-none"}`,
+      style: __spreadValues({ opacity: transitioning ? 1 : 0 }, transitioning ? CROSSFADE_STYLE : {})
+    },
+    /* @__PURE__ */ React6.createElement(
+      "img",
+      {
+        src: list[nextIndex].url,
+        alt: (_e = (_d = list[nextIndex]) == null ? void 0 : _d.alt) != null ? _e : displayAlt,
+        className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+      }
+    )
+  ));
+}
+
+// src/design_system/portal/PortalTabTracker.tsx
+import { useEffect as useEffect7 } from "react";
+function PortalTabTracker({ event, params, tab }) {
+  useEffect7(() => {
+    firePixelEvent(event, params);
+    captureEvent("portal_tab_viewed", { tab });
+  }, []);
+  return null;
+}
+
+// src/design_system/portal/BookIframePanel.tsx
+import React7, { useState as useState5, useEffect as useEffect8, useRef as useRef4 } from "react";
+function BookIframePanel({ bookingHref, businessName }) {
+  const [hasOpened, setHasOpened] = useState5(false);
+  const [modalOpen, setModalOpen] = useState5(false);
+  const [isVisible, setIsVisible] = useState5(false);
+  const closeTimerRef = useRef4(null);
+  const openModal = () => {
+    setHasOpened(true);
+    setModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsVisible(false);
+    closeTimerRef.current = setTimeout(() => setModalOpen(false), 300);
+  };
+  useEffect8(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+  useEffect8(() => {
+    if (!modalOpen) return;
+    let cancelled = false;
+    const id = requestAnimationFrame(
+      () => requestAnimationFrame(() => {
+        if (!cancelled) setIsVisible(true);
+      })
+    );
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(id);
+    };
+  }, [modalOpen]);
+  useEffect8(() => {
+    document.body.style.overflow = modalOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [modalOpen]);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "relative rounded-component border border-secondary overflow-hidden", style: { height: "70vh" } }, /* @__PURE__ */ React7.createElement(
+    "iframe",
+    {
+      src: bookingHref,
+      className: "w-full h-full pointer-events-none select-none",
+      title: "Booking preview",
+      tabIndex: -1,
+      "aria-hidden": "true"
+    }
+  ), /* @__PURE__ */ React7.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center px-6 py-8 backdrop-blur-[3.9px] bg-primary/70" }, /* @__PURE__ */ React7.createElement("div", { className: "w-full max-w-sm rounded-component border border-secondary bg-primary px-6 py-6 text-center shadow-sm" }, /* @__PURE__ */ React7.createElement("p", { className: "text-xl font-bold text-primary" }, "Booking Instructions"), /* @__PURE__ */ React7.createElement("p", { className: "mt-5 text-sm text-secondary leading-relaxed" }, "We use a separate platform that may ask for an additional sign in or intake details to fully create your profile and collect your appointment information."), /* @__PURE__ */ React7.createElement("div", { className: "mt-5 flex flex-wrap items-center justify-center gap-3" }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      onClick: openModal,
+      className: "inline-flex items-center gap-2 rounded-interactive bg-brand-solid px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
+    },
+    "Start Booking"
+  ), /* @__PURE__ */ React7.createElement(
+    "a",
+    {
+      href: bookingHref,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "inline-flex items-center gap-1.5 rounded-interactive border border-secondary bg-secondary px-5 py-2.5 text-sm font-semibold text-primary transition-colors hover:bg-secondary_hover"
+    },
+    "Open in New Tab",
+    /* @__PURE__ */ React7.createElement("svg", { className: "size-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 }, /* @__PURE__ */ React7.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" }))
+  ))))), hasOpened && /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      className: `fixed inset-0 z-50 flex flex-col bg-primary transition-[opacity,transform] duration-300 ease-out ${modalOpen && isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3 pointer-events-none"}`
+    },
+    /* @__PURE__ */ React7.createElement("div", { className: "flex shrink-0 items-center justify-between border-b border-secondary bg-primary px-4 py-3" }, /* @__PURE__ */ React7.createElement("span", { className: "text-sm font-semibold text-primary" }, businessName, " Booking"), /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        onClick: closeModal,
+        className: "inline-flex items-center gap-2 rounded-interactive bg-brand-solid px-4 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
+      },
+      /* @__PURE__ */ React7.createElement("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5 }, /* @__PURE__ */ React7.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })),
+      "Close"
+    )),
+    /* @__PURE__ */ React7.createElement(
+      "iframe",
+      {
+        src: bookingHref,
+        className: "min-h-0 flex-1 w-full",
+        title: "Book appointment",
+        allow: "payment"
+      }
+    )
+  ));
+}
+
+// src/lib/consumer-session.ts
+var CONSUMER_TOKEN_COOKIE = "ks_consumer_token";
+function getApiUrl() {
+  return process.env.API_URL || "http://localhost:3000/api/v1";
+}
+async function consumerFetch(path, token) {
+  var _a;
+  try {
+    const res = await fetch(`${getApiUrl()}${path}`, {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`
+      },
+      cache: "no-store"
+    });
+    if (!res.ok) return null;
+    const json = await res.json();
+    return (_a = json.data) != null ? _a : json;
+  } catch (e) {
+    return null;
+  }
+}
+async function fetchConsumerMe(token) {
+  return consumerFetch("/consumer/me", token);
+}
+async function fetchConsumerConversations(token) {
+  var _a;
+  const apiKey = process.env.API_KEY;
+  const headers = __spreadValues({
+    "Content-Type": "application/json",
+    Authorization: `Bearer ${token}`
+  }, apiKey ? { "X-API-Key": apiKey } : {});
+  try {
+    const res = await fetch(`${getApiUrl()}/consumer/me/conversations`, { headers, cache: "no-store" });
+    if (!res.ok) return [];
+    const json = await res.json();
+    return (_a = json.data) != null ? _a : [];
+  } catch (e) {
+    return [];
+  }
+}
+async function fetchConsumerMessages(token, contactId) {
+  var _a, _b;
+  try {
+    const res = await fetch(
+      `${getApiUrl()}/consumer/me/contacts/${contactId}/messages?per_page=100`,
+      {
+        headers: { Authorization: `Bearer ${token}` },
+        cache: "no-store"
+      }
+    );
+    if (!res.ok) return { messages: [], contact: null };
+    const json = await res.json();
+    return {
+      messages: (_a = json.data) != null ? _a : [],
+      contact: (_b = json.contact) != null ? _b : null
+    };
+  } catch (e) {
+    return { messages: [], contact: null };
+  }
+}
+
+// src/lib/server-api.ts
+var API_URL = process.env.API_URL || "http://localhost:3000/api/v1";
+var API_KEY = process.env.API_KEY || "";
+async function serverFetch(endpoint, options = {}) {
+  var _a;
+  const url = `${API_URL}${endpoint}`;
+  try {
+    const fetchOptions = {
+      headers: {
+        "X-API-Key": API_KEY,
+        "Content-Type": "application/json"
+      },
+      cache: options.cache
+    };
+    if (options.revalidate) {
+      fetchOptions.next = { revalidate: options.revalidate };
+    }
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      console.error(`[Server API] Error ${response.status} for ${endpoint}`);
+      return null;
+    }
+    const json = await response.json();
+    return (_a = json.data) != null ? _a : json;
+  } catch (error) {
+    console.error(`[Server API] Failed to fetch ${endpoint}:`, error);
+    return null;
+  }
+}
+var defaultOptions = { revalidate: 60 };
+async function getCompanyInformation() {
+  return serverFetch("/public/company_information", defaultOptions);
+}
+async function getServices() {
+  return serverFetch("/public/services", defaultOptions);
+}
+async function getPackages() {
+  return serverFetch("/public/packages", defaultOptions);
+}
+
+// src/design_system/portal/PortalPage.tsx
+var ALL_TABS = ["services", "packages", "specials", "messages", "book"];
+var DEFAULT_TABS = ["book", "services", "packages", "specials", "messages"];
+async function checkIframeAllowed(url) {
+  var _a;
+  try {
+    const fetchOptions = {
+      method: "HEAD",
+      redirect: "follow",
+      // Cache for 1 hour — booking platforms rarely change their embedding policy.
+      next: { revalidate: 3600 }
+    };
+    const res = await fetch(url, fetchOptions);
+    const xfo = (_a = res.headers.get("x-frame-options")) == null ? void 0 : _a.toUpperCase();
+    if (xfo === "DENY" || xfo === "SAMEORIGIN") return false;
+    const csp = res.headers.get("content-security-policy");
+    if (csp) {
+      const match = csp.match(/frame-ancestors\s+([^;]+)/i);
+      if (match) {
+        const policy = match[1].trim();
+        if (policy === "'none'") return false;
+      }
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function formatCents(cents) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0
+  }).format(cents / 100);
+}
+function formatTime(iso) {
+  return new Date(iso).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+}
+function getInitials(str) {
+  return str.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+}
+function aggregateSpecials(services, packages) {
+  var _a, _b, _c;
+  const seen = /* @__PURE__ */ new Set();
+  const specials = [];
+  for (const service of services) {
+    for (const item of (_a = service.service_items) != null ? _a : []) {
+      for (const offer of (_b = item.offers) != null ? _b : []) {
+        if (offer.active === false || offer.expired) continue;
+        if (seen.has(offer.id)) continue;
+        seen.add(offer.id);
+        specials.push({
+          id: offer.id,
+          name: offer.name,
+          value_terms: offer.value_terms,
+          expires_at: offer.expires_at,
+          parentName: item.name,
+          parentType: "service",
+          photoAttachments: item.photo_attachments
+        });
+      }
+    }
+  }
+  for (const pkg of packages) {
+    for (const offer of (_c = pkg.offers) != null ? _c : []) {
+      if (offer.active === false || offer.expired) continue;
+      if (seen.has(offer.id)) continue;
+      seen.add(offer.id);
+      specials.push({
+        id: offer.id,
+        name: offer.name,
+        value_terms: offer.value_terms,
+        expires_at: offer.expires_at,
+        parentName: pkg.name,
+        parentType: "package",
+        photoAttachments: pkg.photo_attachments
+      });
+    }
+  }
+  return specials;
+}
+function LockButton({ label = "View price" }) {
+  return /* @__PURE__ */ React8.createElement(
+    "button",
+    {
+      "data-open-login-modal": true,
+      className: "cursor-pointer rounded px-1.5 py-0.5 text-xs text-quaternary underline underline-offset-2 transition-colors hover:text-secondary"
+    },
+    label
+  );
+}
+function LoginWall({ message, cta }) {
+  return /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col items-center justify-center py-20 text-center" }, /* @__PURE__ */ React8.createElement("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-secondary" }, /* @__PURE__ */ React8.createElement("svg", { className: "size-5 text-quaternary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5 }, /* @__PURE__ */ React8.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" }))), /* @__PURE__ */ React8.createElement("p", { className: "text-sm font-medium text-primary" }, message), /* @__PURE__ */ React8.createElement(
+    "button",
+    {
+      "data-open-login-modal": true,
+      className: "mt-4 cursor-pointer rounded-interactive bg-brand-solid px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
+    },
+    cta
+  ));
+}
+function EmptyState({ message }) {
+  return /* @__PURE__ */ React8.createElement("div", { className: "rounded-component border border-secondary bg-secondary py-16 text-center" }, /* @__PURE__ */ React8.createElement("p", { className: "text-sm text-tertiary" }, message));
+}
+function ServiceItemRow({
+  item,
+  isLoggedIn,
+  specialsEnabled,
+  specialsHref
+}) {
+  var _a;
+  const activeOffers = ((_a = item.offers) != null ? _a : []).filter((o) => o.active !== false && !o.expired);
+  return /* @__PURE__ */ React8.createElement("div", { className: "group flex items-center gap-3 px-4 py-3" }, /* @__PURE__ */ React8.createElement(
+    RowThumbnail,
+    {
+      photoAttachments: item.photo_attachments,
+      seed: `item-${item.id}`,
+      alt: item.name
+    }
+  ), /* @__PURE__ */ React8.createElement("div", { className: "flex-1 min-w-0 flex items-center justify-between gap-3" }, /* @__PURE__ */ React8.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React8.createElement("p", { className: "text-base font-medium text-primary" }, item.name), item.summary && /* @__PURE__ */ React8.createElement("p", { className: "mt-0.5 text-sm text-tertiary" }, item.summary), item.duration_minutes != null && item.duration_minutes > 0 && /* @__PURE__ */ React8.createElement("p", { className: "mt-0.5 text-xs text-quaternary" }, item.duration_minutes, " min"), specialsEnabled && activeOffers.length > 0 && /* @__PURE__ */ React8.createElement("div", { className: "mt-1.5 flex flex-wrap gap-1" }, activeOffers.map(
+    (offer) => isLoggedIn ? /* @__PURE__ */ React8.createElement(
+      Link,
+      {
+        key: offer.id,
+        href: specialsHref,
+        className: "inline-flex items-center rounded-badge bg-secondary border border-brand px-2 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors"
+      },
+      "Special: ",
+      offer.name
+    ) : /* @__PURE__ */ React8.createElement(
+      "button",
+      {
+        key: offer.id,
+        "data-open-login-modal": true,
+        "data-login-redirect": specialsHref,
+        className: "inline-flex items-center rounded-badge bg-secondary border border-brand px-2 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors cursor-pointer"
+      },
+      "Special: ",
+      offer.name
+    )
+  ))), /* @__PURE__ */ React8.createElement("div", { className: "shrink-0 text-right" }, isLoggedIn ? item.price_cents != null ? /* @__PURE__ */ React8.createElement("span", { className: "text-sm font-semibold text-primary" }, formatCents(item.price_cents)) : item.pricing_info ? /* @__PURE__ */ React8.createElement("span", { className: "text-sm text-secondary" }, item.pricing_info) : null : item.price_cents != null || item.pricing_info ? /* @__PURE__ */ React8.createElement(LockButton, null) : null)));
+}
+function ServicesPanel({
+  services,
+  isLoggedIn,
+  specialsEnabled,
+  portalHref
+}) {
+  const activeServices = services.filter((s) => {
+    var _a, _b;
+    return ((_b = (_a = s.service_items) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
+  });
+  const specialsHref = `${portalHref}?tab=specials`;
+  if (activeServices.length === 0) {
+    return /* @__PURE__ */ React8.createElement(EmptyState, { message: "No services listed yet." });
+  }
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(PortalTabTracker, { event: "ViewContent", params: { contentName: "Services", contentCategory: "Services" }, tab: "services" }), /* @__PURE__ */ React8.createElement("div", { className: "divide-y divide-tertiary rounded-component border border-secondary bg-primary overflow-hidden" }, activeServices.map((service) => {
+    var _a, _b;
+    return /* @__PURE__ */ React8.createElement("details", { key: service.id, className: "group", open: true }, /* @__PURE__ */ React8.createElement("summary", { className: "flex cursor-pointer list-none items-center justify-between px-5 py-4 hover:bg-secondary transition-colors" }, /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("span", { className: "font-medium text-primary" }, service.name), service.summary && /* @__PURE__ */ React8.createElement("p", { className: "mt-0.5 text-sm text-tertiary" }, service.summary)), /* @__PURE__ */ React8.createElement("div", { className: "ml-4 flex items-center gap-2 shrink-0" }, /* @__PURE__ */ React8.createElement("span", { className: "text-xs text-quaternary" }, (_b = (_a = service.service_items) == null ? void 0 : _a.length) != null ? _b : 0, " items"), /* @__PURE__ */ React8.createElement("svg", { className: "size-4 text-quaternary transition-transform group-open:rotate-180", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 }, /* @__PURE__ */ React8.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })))), service.service_items && service.service_items.length > 0 && /* @__PURE__ */ React8.createElement("div", { className: "border-t border-tertiary bg-secondary divide-y divide-tertiary" }, service.service_items.map((item) => /* @__PURE__ */ React8.createElement(
+      ServiceItemRow,
+      {
+        key: item.id,
+        item,
+        isLoggedIn,
+        specialsEnabled,
+        specialsHref
+      }
+    ))));
+  })));
+}
+function PackagesPanel({
+  packages,
+  isLoggedIn,
+  specialsEnabled,
+  portalHref
+}) {
+  const specialsHref = `${portalHref}?tab=specials`;
+  if (packages.length === 0) return /* @__PURE__ */ React8.createElement(EmptyState, { message: "No packages available yet." });
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(PortalTabTracker, { event: "ViewContent", params: { contentName: "Packages", contentCategory: "Packages" }, tab: "packages" }), /* @__PURE__ */ React8.createElement("div", { className: "grid gap-4 sm:grid-cols-2" }, packages.map((pkg) => {
+    var _a;
+    const activeOffers = ((_a = pkg.offers) != null ? _a : []).filter((o) => o.active !== false && !o.expired);
+    return /* @__PURE__ */ React8.createElement("div", { key: pkg.id, className: "group rounded-component border border-secondary bg-primary p-4 flex flex-col gap-3" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React8.createElement(
+      RowThumbnail,
+      {
+        photoAttachments: pkg.photo_attachments,
+        seed: `pkg-${pkg.id}`,
+        alt: pkg.name,
+        sizeClassName: "w-16 h-16"
+      }
+    ), /* @__PURE__ */ React8.createElement("div", { className: "flex-1 min-w-0 flex items-start justify-between gap-2" }, /* @__PURE__ */ React8.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React8.createElement("h4", { className: "font-semibold text-primary" }, pkg.name), pkg.summary && /* @__PURE__ */ React8.createElement("p", { className: "mt-0.5 text-sm text-tertiary" }, pkg.summary)), /* @__PURE__ */ React8.createElement("div", { className: "shrink-0 text-right" }, isLoggedIn ? pkg.price_cents != null ? /* @__PURE__ */ React8.createElement("span", { className: "text-xl font-bold text-primary" }, formatCents(pkg.price_cents)) : pkg.pricing_info ? /* @__PURE__ */ React8.createElement("span", { className: "text-sm font-medium text-secondary" }, pkg.pricing_info) : null : pkg.price_cents != null || pkg.pricing_info ? /* @__PURE__ */ React8.createElement(LockButton, null) : null))), pkg.package_items && pkg.package_items.length > 0 && /* @__PURE__ */ React8.createElement("ul", { className: "space-y-1.5" }, pkg.package_items.map((item, idx) => {
+      var _a2, _b;
+      return /* @__PURE__ */ React8.createElement("li", { key: idx, className: "flex items-center gap-2 text-sm text-secondary" }, /* @__PURE__ */ React8.createElement("span", { className: "size-1.5 rounded-full bg-quaternary shrink-0" }), item.quantity > 1 && /* @__PURE__ */ React8.createElement("span", { className: "font-medium text-primary" }, item.quantity, "\xD7"), (_b = (_a2 = item.service_item) == null ? void 0 : _a2.name) != null ? _b : "\u2014");
+    })), specialsEnabled && activeOffers.length > 0 && /* @__PURE__ */ React8.createElement("div", { className: "flex flex-wrap gap-1.5" }, activeOffers.map(
+      (offer) => isLoggedIn ? /* @__PURE__ */ React8.createElement(
+        Link,
+        {
+          key: offer.id,
+          href: specialsHref,
+          className: "inline-flex items-center rounded-badge bg-secondary border border-brand px-2.5 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors"
+        },
+        "Special: ",
+        offer.name
+      ) : /* @__PURE__ */ React8.createElement(
+        "button",
+        {
+          key: offer.id,
+          "data-open-login-modal": true,
+          "data-login-redirect": specialsHref,
+          className: "inline-flex items-center rounded-badge bg-secondary border border-brand px-2.5 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors cursor-pointer"
+        },
+        "Special: ",
+        offer.name
+      )
+    )));
+  })));
+}
+function SpecialsPanel({ specials }) {
+  if (specials.length === 0) {
+    return /* @__PURE__ */ React8.createElement(EmptyState, { message: "No active specials right now. Check back soon." });
+  }
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(PortalTabTracker, { event: "ViewContent", params: { contentName: "Specials", contentCategory: "Specials" }, tab: "specials" }), /* @__PURE__ */ React8.createElement("div", { className: "space-y-3" }, specials.map((special) => /* @__PURE__ */ React8.createElement("div", { key: special.id, className: "group flex items-start gap-3 rounded-component border border-secondary bg-primary px-4 py-4" }, /* @__PURE__ */ React8.createElement(
+    RowThumbnail,
+    {
+      photoAttachments: special.photoAttachments,
+      seed: `special-${special.id}`,
+      alt: special.parentName
+    }
+  ), /* @__PURE__ */ React8.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React8.createElement("p", { className: "font-semibold text-primary" }, special.name), special.value_terms && /* @__PURE__ */ React8.createElement("p", { className: "mt-0.5 text-sm text-secondary" }, special.value_terms), /* @__PURE__ */ React8.createElement("p", { className: "mt-1 text-xs text-quaternary" }, special.parentType === "service" ? "Service" : "Package", ": ", special.parentName), special.expires_at && /* @__PURE__ */ React8.createElement("p", { className: "mt-0.5 text-xs text-quaternary" }, "Expires ", new Date(special.expires_at).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })))))));
+}
+function MessagesPanel({
+  messages,
+  contactSummary,
+  contactId,
+  businessName
+}) {
+  var _a, _b;
+  const threadBusiness = ((_a = contactSummary == null ? void 0 : contactSummary.business) == null ? void 0 : _a.company_name) || ((_b = contactSummary == null ? void 0 : contactSummary.business) == null ? void 0 : _b.name) || businessName;
+  return /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col rounded-component border border-secondary bg-primary overflow-hidden" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-2.5 border-b border-secondary px-4 py-3 shrink-0" }, /* @__PURE__ */ React8.createElement("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-brand-solid text-xs font-semibold text-white shrink-0" }, getInitials(threadBusiness)), /* @__PURE__ */ React8.createElement("span", { className: "text-sm font-semibold text-primary" }, threadBusiness)), /* @__PURE__ */ React8.createElement("div", { className: "overflow-y-auto px-4 py-4 space-y-3", style: { height: "70vh" } }, messages.length === 0 ? /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col items-center justify-center h-full py-16 text-center" }, /* @__PURE__ */ React8.createElement("div", { className: "mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-secondary" }, /* @__PURE__ */ React8.createElement("svg", { className: "size-5 text-quaternary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5 }, /* @__PURE__ */ React8.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" }))), /* @__PURE__ */ React8.createElement("p", { className: "text-sm font-medium text-primary" }, "No messages yet"), /* @__PURE__ */ React8.createElement("p", { className: "mt-1 text-xs text-tertiary" }, "Send a message to start the conversation.")) : messages.map((m) => {
+    const isOutbound = m.direction === "outbound";
+    return /* @__PURE__ */ React8.createElement("div", { key: m.id, className: `flex ${isOutbound ? "justify-start" : "justify-end"}` }, /* @__PURE__ */ React8.createElement("div", { className: `max-w-[80%] rounded-component px-4 py-2.5 text-sm ${isOutbound ? "bg-secondary text-primary" : "bg-brand-solid text-white"}` }, m.sender_display_name && /* @__PURE__ */ React8.createElement("p", { className: "mb-0.5 text-xs font-medium opacity-60" }, m.sender_display_name), /* @__PURE__ */ React8.createElement("p", { className: "whitespace-pre-wrap leading-relaxed" }, m.body || "\u2014"), /* @__PURE__ */ React8.createElement("p", { className: "mt-1 text-right text-[10px] opacity-50" }, formatTime(m.created_at))));
+  })), contactId && /* @__PURE__ */ React8.createElement(MessageComposer, { contactId }));
+}
+function BookPanel({
+  bookingHref,
+  bookingLabel,
+  bookingAllowsIframe,
+  isLoggedIn,
+  businessName
+}) {
+  if (!isLoggedIn) {
+    return /* @__PURE__ */ React8.createElement(LoginWall, { message: "Continue to view booking options.", cta: "View Booking Options" });
+  }
+  if (bookingAllowsIframe) {
+    return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(PortalTabTracker, { event: "InitiateCheckout", tab: "booking" }), /* @__PURE__ */ React8.createElement(BookIframePanel, { bookingHref, businessName }));
+  }
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(PortalTabTracker, { event: "InitiateCheckout", tab: "booking" }), /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col items-center justify-center py-20 text-center" }, /* @__PURE__ */ React8.createElement("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-secondary" }, /* @__PURE__ */ React8.createElement("svg", { className: "size-5 text-quaternary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5 }, /* @__PURE__ */ React8.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 9v7.5" }))), /* @__PURE__ */ React8.createElement("p", { className: "text-sm font-medium text-primary" }, "Ready to book?"), /* @__PURE__ */ React8.createElement("p", { className: "mt-1 text-sm text-tertiary" }, "You'll be taken to our booking system."), /* @__PURE__ */ React8.createElement(
+    "a",
+    {
+      href: bookingHref,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "mt-5 inline-flex items-center gap-2 rounded-interactive bg-brand-solid px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
+    },
+    bookingLabel,
+    /* @__PURE__ */ React8.createElement("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 }, /* @__PURE__ */ React8.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" }))
+  )));
+}
+async function PortalPage({
+  searchParams,
+  portalHref = "/portal",
+  bookingHref,
+  bookingLabel = "Book Now",
+  enabledTabs,
+  tabLabels,
+  forceExternalBooking = false,
+  contactHref = "/contact"
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const params = (_a = await searchParams) != null ? _a : {};
+  const contactIdParsed = params.contact ? parseInt(params.contact, 10) : NaN;
+  const contactId = Number.isFinite(contactIdParsed) ? contactIdParsed : null;
+  const cookieStore = await cookies();
+  const token = (_c = (_b = cookieStore.get(CONSUMER_TOKEN_COOKIE)) == null ? void 0 : _b.value) != null ? _c : null;
+  const [services, packages, companyInformation, consumer, conversations] = await Promise.all([
+    getServices(),
+    getPackages(),
+    getCompanyInformation(),
+    token ? fetchConsumerMe(token) : Promise.resolve(null),
+    token ? fetchConsumerConversations(token) : Promise.resolve([])
+  ]);
+  const resolvedBookingHref = (_d = bookingHref != null ? bookingHref : companyInformation == null ? void 0 : companyInformation.external_management_url) != null ? _d : null;
+  const hasCustomTabOrder = Array.isArray(enabledTabs) && enabledTabs.length > 0;
+  const requestedTabs = (enabledTabs != null ? enabledTabs : DEFAULT_TABS).filter((tab2, index, arr) => ALL_TABS.includes(tab2) && arr.indexOf(tab2) === index);
+  const normalizedTabs = requestedTabs.length > 0 ? requestedTabs : DEFAULT_TABS;
+  const nonBookTabs = normalizedTabs.filter((tab2) => tab2 !== "book");
+  const includesBookTab = normalizedTabs.includes("book");
+  const labelForTab = (tab2) => {
+    var _a2, _b2, _c2, _d2, _e2;
+    if (tab2 === "book") return (_a2 = tabLabels == null ? void 0 : tabLabels.book) != null ? _a2 : bookingLabel;
+    if (tab2 === "services") return (_b2 = tabLabels == null ? void 0 : tabLabels.services) != null ? _b2 : "Services";
+    if (tab2 === "packages") return (_c2 = tabLabels == null ? void 0 : tabLabels.packages) != null ? _c2 : "Packages";
+    if (tab2 === "specials") return (_d2 = tabLabels == null ? void 0 : tabLabels.specials) != null ? _d2 : "Specials";
+    return (_e2 = tabLabels == null ? void 0 : tabLabels.messages) != null ? _e2 : "Messages";
+  };
+  const tabs = hasCustomTabOrder ? normalizedTabs.map((tab2) => ({ id: tab2, label: labelForTab(tab2) })) : [
+    ...includesBookTab && resolvedBookingHref ? [{ id: "book", label: labelForTab("book") }] : [],
+    ...nonBookTabs.map((tab2) => ({ id: tab2, label: labelForTab(tab2) })),
+    ...includesBookTab && !resolvedBookingHref ? [{ id: "book", label: labelForTab("book") }] : []
+  ];
+  const selectableTabIds = tabs.map((tab2) => tab2.id);
+  const tabParam = selectableTabIds.includes(params.tab) ? params.tab : null;
+  const tab = tabParam != null ? tabParam : tabs[0].id;
+  const bookingAllowsIframe = !forceExternalBooking && tab === "book" && resolvedBookingHref ? await checkIframeAllowed(resolvedBookingHref) : false;
+  const businessName = (companyInformation == null ? void 0 : companyInformation.company_name) || "Member Portal";
+  const isLoggedIn = !!consumer;
+  const resolvedContactId = (_f = contactId != null ? contactId : (_e = conversations[0]) == null ? void 0 : _e.contact_id) != null ? _f : null;
+  const businessContact = (_g = consumer == null ? void 0 : consumer.contacts) == null ? void 0 : _g.find((c) => c.id === resolvedContactId);
+  const consumerDisplayName = (businessContact == null ? void 0 : businessContact.display_name) || ((_i = (_h = consumer == null ? void 0 : consumer.contacts) == null ? void 0 : _h[0]) == null ? void 0 : _i.display_name) || (consumer == null ? void 0 : consumer.primary_identifier) || (consumer == null ? void 0 : consumer.email) || (consumer == null ? void 0 : consumer.phone) || null;
+  const messageData = token && tab === "messages" && resolvedContactId ? await fetchConsumerMessages(token, resolvedContactId) : { messages: [], contact: null };
+  const serviceList = services != null ? services : [];
+  const packageList = packages != null ? packages : [];
+  const specials = aggregateSpecials(serviceList, packageList);
+  const specialsEnabled = selectableTabIds.includes("specials");
+  return /* @__PURE__ */ React8.createElement("div", { className: "min-h-screen bg-primary" }, /* @__PURE__ */ React8.createElement("div", { className: "border-b border-secondary bg-primary sticky top-0 z-40 shrink-0" }, /* @__PURE__ */ React8.createElement("div", { className: "mx-auto max-w-4xl px-4 py-4" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-quaternary" }, "Member Portal"), /* @__PURE__ */ React8.createElement("h1", { className: "text-xl font-bold text-primary leading-tight" }, businessName)), /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-3" }, isLoggedIn ? /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-3" }, consumerDisplayName && /* @__PURE__ */ React8.createElement("div", { className: "hidden sm:flex items-center gap-2 rounded-full border border-secondary bg-secondary px-3 py-1.5" }, /* @__PURE__ */ React8.createElement("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-brand-solid text-[9px] font-bold text-white shrink-0" }, getInitials(consumerDisplayName)), /* @__PURE__ */ React8.createElement("span", { className: "text-xs font-medium text-secondary max-w-[120px] truncate" }, consumerDisplayName)), /* @__PURE__ */ React8.createElement(LogoutButton, null)) : /* @__PURE__ */ React8.createElement(
+    "button",
+    {
+      "data-open-login-modal": true,
+      className: "cursor-pointer rounded-interactive border border-secondary px-3 py-1.5 text-xs font-medium text-secondary hover:bg-secondary transition-colors"
+    },
+    "Sign in"
+  ), /* @__PURE__ */ React8.createElement("div", { className: "border-l border-tertiary pl-3" }, /* @__PURE__ */ React8.createElement(
+    "a",
+    {
+      href: KEYSTONE_APP_URL,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": "Visit Keystone website"
+    },
+    /* @__PURE__ */ React8.createElement(
+      KeystoneBrandLockup,
+      {
+        className: "gap-2",
+        iconClassName: "h-3.5",
+        wordmarkClassName: "hidden sm:block h-2.5"
+      }
+    )
+  )))), /* @__PURE__ */ React8.createElement("div", { className: "relative mt-4" }, /* @__PURE__ */ React8.createElement("div", { className: "flex gap-1 overflow-x-auto pb-px scrollbar-none" }, tabs.map((t) => {
+    const isActive = tab === t.id;
+    const isGated = !isLoggedIn && (t.id === "specials" || t.id === "messages" || t.id === "book");
+    const href = `${portalHref}?tab=${t.id}`;
+    const className = `shrink-0 rounded-interactive px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap ${isActive ? "bg-brand-solid text-white" : "text-secondary hover:bg-secondary hover:text-primary"}`;
+    if (isGated) {
+      return /* @__PURE__ */ React8.createElement(
+        "button",
+        {
+          key: t.id,
+          "data-open-login-modal": true,
+          "data-login-redirect": href,
+          className
+        },
+        t.label
+      );
+    }
+    return /* @__PURE__ */ React8.createElement(Link, { key: t.id, href, className }, t.label);
+  })), /* @__PURE__ */ React8.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-primary to-transparent md:hidden" })))), /* @__PURE__ */ React8.createElement("div", { className: "mx-auto max-w-4xl px-4 py-8" }, tab === "services" && /* @__PURE__ */ React8.createElement(
+    ServicesPanel,
+    {
+      services: serviceList,
+      isLoggedIn,
+      specialsEnabled,
+      portalHref
+    }
+  ), tab === "packages" && /* @__PURE__ */ React8.createElement(
+    PackagesPanel,
+    {
+      packages: packageList,
+      isLoggedIn,
+      specialsEnabled,
+      portalHref
+    }
+  ), tab === "specials" && (isLoggedIn ? /* @__PURE__ */ React8.createElement(SpecialsPanel, { specials }) : /* @__PURE__ */ React8.createElement(LoginWall, { message: "Continue to view specials.", cta: "View Specials" })), tab === "messages" && (isLoggedIn ? /* @__PURE__ */ React8.createElement(
+    MessagesPanel,
+    {
+      messages: messageData.messages,
+      contactSummary: messageData.contact,
+      contactId: resolvedContactId,
+      businessName
+    }
+  ) : /* @__PURE__ */ React8.createElement(LoginWall, { message: "Continue to view your messages.", cta: "View Messages" })), tab === "book" && (resolvedBookingHref ? /* @__PURE__ */ React8.createElement(
+    BookPanel,
+    {
+      bookingHref: resolvedBookingHref,
+      bookingLabel,
+      bookingAllowsIframe,
+      isLoggedIn,
+      businessName
+    }
+  ) : /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col items-center justify-center py-20 text-center" }, /* @__PURE__ */ React8.createElement("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-secondary" }, /* @__PURE__ */ React8.createElement("svg", { className: "size-5 text-quaternary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5 }, /* @__PURE__ */ React8.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 9v7.5" }))), /* @__PURE__ */ React8.createElement("p", { className: "text-sm font-medium text-primary" }, "Ready to book?"), /* @__PURE__ */ React8.createElement("p", { className: "mt-1 text-sm text-tertiary max-w-xs" }, "Give us a call or submit a request on our", " ", /* @__PURE__ */ React8.createElement("a", { href: contactHref, className: "underline underline-offset-2 hover:text-primary transition-colors" }, "contact page"), " ", "and we'll get you scheduled.")))), /* @__PURE__ */ React8.createElement(LoginModalController, null));
+}
+export {
+  LoginForm,
+  LoginModalController,
+  LogoutButton,
+  PortalPage
+};
+//# sourceMappingURL=index.js.map