@feelflow/ffid-sdk 2.9.0 → 2.11.0

package/dist/{chunk-5SD6KOYJ.js → chunk-2OAFWUEL.js}

@@ -619,7 +619,7 @@ function createMembersMethods(deps) {
 }
 
 // src/client/version-check.ts
-var SDK_VERSION = "2.9.0";
+var SDK_VERSION = "2.11.0";
 var SDK_USER_AGENT = `FFID-SDK/${SDK_VERSION} (TypeScript)`;
 var SDK_VERSION_HEADER = "X-FFID-SDK-Version";
 function sdkHeaders() {
@@ -3420,43 +3420,9 @@ var FFID_INQUIRY_CATEGORIES = [
   "press",
   "other"
 ];
-var DEFAULT_CATEGORY_LABELS_JA = {
-  general: "\u4E00\u822C\u7684\u306A\u304A\u554F\u3044\u5408\u308F\u305B",
-  sales: "\u3054\u5C0E\u5165\u30FB\u304A\u898B\u7A4D\u3082\u308A",
-  support: "\u30B5\u30DD\u30FC\u30C8",
-  partnership: "\u30D1\u30FC\u30C8\u30CA\u30FC\u30B7\u30C3\u30D7",
-  press: "\u53D6\u6750\u30FB\u30D7\u30EC\u30B9",
-  other: "\u305D\u306E\u4ED6"
-};
-function defaultCategories() {
-  return FFID_INQUIRY_CATEGORIES.map((value) => ({
-    value,
-    label: DEFAULT_CATEGORY_LABELS_JA[value]
-  }));
-}
-function renderCategoryOptions(options) {
-  const hasAnyGroup = options.some((o) => !!o.group);
-  if (!hasAnyGroup) {
-    return options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value));
-  }
-  const ungrouped = options.filter((o) => !o.group);
-  const groupKeys = [];
-  const groupLabelByKey = /* @__PURE__ */ new Map();
-  const itemsByKey = /* @__PURE__ */ new Map();
-  for (const opt of options) {
-    if (!opt.group) continue;
-    if (!itemsByKey.has(opt.group)) {
-      groupKeys.push(opt.group);
-      itemsByKey.set(opt.group, []);
-      groupLabelByKey.set(opt.group, opt.groupLabel ?? opt.group);
-    }
-    itemsByKey.get(opt.group).push(opt);
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    ungrouped.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value)),
-    groupKeys.map((key) => /* @__PURE__ */ jsx("optgroup", { label: groupLabelByKey.get(key) ?? key, children: itemsByKey.get(key).map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value)) }, key))
-  ] });
-}
+var CATEGORY_PLACEHOLDER_LABEL_JA = "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044";
+var CATEGORY_REQUIRED_ERROR_JA = "\u304A\u554F\u3044\u5408\u308F\u305B\u7A2E\u5225\u3092\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044\u3002";
+var SUBMIT_BUTTON_OPACITY_PENDING = 0.6;
 var labelStyle = {
   display: "block",
   fontSize: FONT_SIZE_SM,
@@ -3496,7 +3462,58 @@ var submitButtonStyle = {
   borderRadius: BORDER_RADIUS_MD,
   cursor: "pointer"
 };
-var SUBMIT_BUTTON_OPACITY_PENDING = 0.6;
+var successBlockStyle = {
+  padding: SPACING_LG,
+  border: BORDER_DEFAULT,
+  borderRadius: BORDER_RADIUS_MD,
+  background: "#f0fdf4",
+  color: "#166534",
+  fontSize: FONT_SIZE_SM
+};
+function cx(...parts) {
+  const joined = parts.filter((p) => !!p).join(" ");
+  return joined.length > 0 ? joined : void 0;
+}
+function styleOrUndefined(style, unstyled) {
+  return unstyled ? void 0 : style;
+}
+var DEFAULT_CATEGORY_LABELS_JA = {
+  general: "\u4E00\u822C\u7684\u306A\u304A\u554F\u3044\u5408\u308F\u305B",
+  sales: "\u3054\u5C0E\u5165\u30FB\u304A\u898B\u7A4D\u3082\u308A",
+  support: "\u30B5\u30DD\u30FC\u30C8",
+  partnership: "\u30D1\u30FC\u30C8\u30CA\u30FC\u30B7\u30C3\u30D7",
+  press: "\u53D6\u6750\u30FB\u30D7\u30EC\u30B9",
+  other: "\u305D\u306E\u4ED6"
+};
+function defaultCategories() {
+  return FFID_INQUIRY_CATEGORIES.map((value) => ({
+    value,
+    label: DEFAULT_CATEGORY_LABELS_JA[value]
+  }));
+}
+function renderCategoryOptions(options) {
+  const hasAnyGroup = options.some((o) => !!o.group);
+  if (!hasAnyGroup) {
+    return options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value));
+  }
+  const ungrouped = options.filter((o) => !o.group);
+  const groupKeys = [];
+  const groupLabelByKey = /* @__PURE__ */ new Map();
+  const itemsByKey = /* @__PURE__ */ new Map();
+  for (const opt of options) {
+    if (!opt.group) continue;
+    if (!itemsByKey.has(opt.group)) {
+      groupKeys.push(opt.group);
+      itemsByKey.set(opt.group, []);
+      groupLabelByKey.set(opt.group, opt.groupLabel ?? opt.group);
+    }
+    itemsByKey.get(opt.group).push(opt);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ungrouped.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value)),
+    groupKeys.map((key) => /* @__PURE__ */ jsx("optgroup", { label: groupLabelByKey.get(key) ?? key, children: itemsByKey.get(key).map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value)) }, key))
+  ] });
+}
 function FFIDInquiryForm({
   mode,
   prefill,
@@ -3512,6 +3529,10 @@ function FFIDInquiryForm({
   onSubmit,
   onChange,
   separateLegalCheckboxes = false,
+  messagePlaceholder,
+  requireCategorySelection = false,
+  unstyled = false,
+  classNames,
   locale = "ja",
   className
 }) {
@@ -3529,11 +3550,20 @@ function FFIDInquiryForm({
     return null;
   }, [isAuth, organizations, preselectedOrganizationId]);
   const initialCategory = useMemo(() => {
-    const fallback = categoryOptions[0]?.value ?? "general";
     const requested = prefill?.category;
-    if (!requested) return fallback;
-    return categoryOptions.some((opt) => opt.value === requested) ? requested : fallback;
-  }, [categoryOptions, prefill?.category]);
+    if (requested && categoryOptions.some((opt) => opt.value === requested)) {
+      return requested;
+    }
+    if (requireCategorySelection) return "";
+    const first = categoryOptions[0]?.value;
+    if (first === void 0) {
+      console.error(
+        "[FFIDInquiryForm] categoryOptions is empty; set requireCategorySelection=true or provide at least one category. Submits will be blocked until a value is picked."
+      );
+      return "";
+    }
+    return first;
+  }, [categoryOptions, prefill?.category, requireCategorySelection]);
   const [name, setName] = useState(prefill?.name ?? "");
   const [email, setEmail] = useState(prefill?.email ?? "");
   const [company, setCompany] = useState(isAuth ? "" : prefill?.company ?? "");
@@ -3549,6 +3579,11 @@ function FFIDInquiryForm({
   const [submitting, setSubmitting] = useState(false);
   const [formError, setFormError] = useState(null);
   const [successMessage, setSuccessMessage] = useState(null);
+  const resolvedMessagePlaceholder = useMemo(() => {
+    if (messagePlaceholder === void 0) return void 0;
+    if (typeof messagePlaceholder === "string") return messagePlaceholder;
+    return messagePlaceholder({ category: category === "" ? null : category });
+  }, [messagePlaceholder, category]);
   const [hydrated, setHydrated] = useState(false);
   useEffect(() => {
     setHydrated(true);
@@ -3558,6 +3593,7 @@ function FFIDInquiryForm({
     onChangeRef.current = onChange;
   }, [onChange]);
   useEffect(() => {
+    if (category === "") return;
     onChangeRef.current?.({
       name: name.trim(),
       email: email.trim(),
@@ -3588,6 +3624,7 @@ function FFIDInquiryForm({
     turnstileToken,
     locale
   ]);
+  const s = (style) => styleOrUndefined(style, unstyled);
   async function handleSubmit(e) {
     e.preventDefault();
     setFormError(null);
@@ -3608,15 +3645,17 @@ function FFIDInquiryForm({
       setFormError("\u5229\u7528\u898F\u7D04\u3068\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC\u3078\u306E\u540C\u610F\u304C\u5FC5\u8981\u3067\u3059\u3002");
       return;
     }
+    if (requireCategorySelection && !category) {
+      setFormError(CATEGORY_REQUIRED_ERROR_JA);
+      return;
+    }
     if (!message.trim()) {
       setFormError("\u304A\u554F\u3044\u5408\u308F\u305B\u5185\u5BB9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002");
       return;
     }
-    if (!isAuth) {
-      if (!name.trim() || !email.trim()) {
-        setFormError("\u304A\u540D\u524D\u3068\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002");
-        return;
-      }
+    if (!isAuth && (!name.trim() || !email.trim())) {
+      setFormError("\u304A\u540D\u524D\u3068\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002");
+      return;
     }
     setSubmitting(true);
     try {
@@ -3641,9 +3680,7 @@ function FFIDInquiryForm({
         );
         setMessage("");
       } else {
-        setFormError(
-          result.message ?? "\u9001\u4FE1\u306B\u5931\u6557\u3057\u307E\u3057\u305F\u3002\u6642\u9593\u3092\u304A\u3044\u3066\u518D\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002"
-        );
+        setFormError(result.message ?? "\u9001\u4FE1\u306B\u5931\u6557\u3057\u307E\u3057\u305F\u3002\u6642\u9593\u3092\u304A\u3044\u3066\u518D\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002");
       }
     } catch (err) {
       console.error("[FFIDInquiryForm] onSubmit threw", err);
@@ -3657,35 +3694,56 @@ function FFIDInquiryForm({
       "div",
       {
         role: "status",
-        className,
-        style: {
-          padding: SPACING_LG,
-          border: BORDER_DEFAULT,
-          borderRadius: BORDER_RADIUS_MD,
-          background: "#f0fdf4",
-          color: "#166534",
-          fontSize: FONT_SIZE_SM
-        },
+        className: cx(className, classNames?.form, classNames?.successBlock),
+        style: s(successBlockStyle),
         children: successMessage
       }
     );
   }
   const showOrgBlock = isAuth && organizations.length >= 1;
+  const rowStyle = { display: "flex", alignItems: "center", gap: SPACING_SM, marginBottom: SPACING_SM };
+  const rowStyleLast = { display: "flex", alignItems: "center", gap: SPACING_SM };
+  const legalRowFirst = { display: "flex", alignItems: "flex-start", gap: SPACING_SM, marginBottom: SPACING_SM };
+  const legalRowLast = { display: "flex", alignItems: "flex-start", gap: SPACING_SM };
+  const spanStyle = { fontSize: FONT_SIZE_SM };
+  function renderTermsLink() {
+    return termsHref ? /* @__PURE__ */ jsxs("a", { href: termsHref, target: "_blank", rel: "noopener noreferrer", className: classNames?.legalLink, children: [
+      "\u5229\u7528\u898F\u7D04 (v",
+      termsVersion,
+      ")"
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      "\u5229\u7528\u898F\u7D04 (v",
+      termsVersion,
+      ")"
+    ] });
+  }
+  function renderPrivacyLink() {
+    return privacyHref ? /* @__PURE__ */ jsxs("a", { href: privacyHref, target: "_blank", rel: "noopener noreferrer", className: classNames?.legalLink, children: [
+      "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
+      privacyVersion,
+      ")"
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
+      privacyVersion,
+      ")"
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: handleSubmit,
-      className,
+      className: cx(className, classNames?.form),
       noValidate: true,
       "data-hydrated": hydrated ? "true" : void 0,
       children: [
-        showOrgBlock && /* @__PURE__ */ jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-org", children: "\u554F\u3044\u5408\u308F\u305B\u308B\u7ACB\u5834" }),
+        showOrgBlock && /* @__PURE__ */ jsxs("div", { style: s(fieldsetStyle), className: cx(classNames?.field, classNames?.orgSelectWrapper), children: [
+          /* @__PURE__ */ jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-org", children: "\u554F\u3044\u5408\u308F\u305B\u308B\u7ACB\u5834" }),
           /* @__PURE__ */ jsxs(
             "select",
             {
               id: "ffid-inquiry-org",
-              style: inputStyle,
+              style: s(inputStyle),
+              className: classNames?.select,
               value: organizationId ?? "",
               onChange: (e) => setOrganizationId(e.target.value || null),
               children: [
@@ -3698,13 +3756,14 @@ function FFIDInquiryForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-name", children: "\u304A\u540D\u524D" }),
+        /* @__PURE__ */ jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+          /* @__PURE__ */ jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-name", children: "\u304A\u540D\u524D" }),
           /* @__PURE__ */ jsx(
             "input",
             {
               id: "ffid-inquiry-name",
-              style: isNameReadOnly ? readOnlyStyle : inputStyle,
+              style: s(isNameReadOnly ? readOnlyStyle : inputStyle),
+              className: cx(classNames?.input, isNameReadOnly ? classNames?.readOnlyInput : void 0),
               type: "text",
               value: name,
               onChange: (e) => setName(e.target.value),
@@ -3713,13 +3772,14 @@ function FFIDInquiryForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-email", children: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9" }),
+        /* @__PURE__ */ jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+          /* @__PURE__ */ jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-email", children: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9" }),
           /* @__PURE__ */ jsx(
             "input",
             {
               id: "ffid-inquiry-email",
-              style: isEmailReadOnly ? readOnlyStyle : inputStyle,
+              style: s(isEmailReadOnly ? readOnlyStyle : inputStyle),
+              className: cx(classNames?.input, isEmailReadOnly ? classNames?.readOnlyInput : void 0),
               type: "email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
@@ -3729,26 +3789,28 @@ function FFIDInquiryForm({
           )
         ] }),
         !isAuth && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { style: fieldsetStyle, children: [
-            /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-company", children: "\u4F1A\u793E\u540D (\u4EFB\u610F)" }),
+          /* @__PURE__ */ jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+            /* @__PURE__ */ jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-company", children: "\u4F1A\u793E\u540D (\u4EFB\u610F)" }),
             /* @__PURE__ */ jsx(
               "input",
               {
                 id: "ffid-inquiry-company",
-                style: inputStyle,
+                style: s(inputStyle),
+                className: classNames?.input,
                 type: "text",
                 value: company,
                 onChange: (e) => setCompany(e.target.value)
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { style: fieldsetStyle, children: [
-            /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-phone", children: "\u96FB\u8A71\u756A\u53F7 (\u4EFB\u610F)" }),
+          /* @__PURE__ */ jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+            /* @__PURE__ */ jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-phone", children: "\u96FB\u8A71\u756A\u53F7 (\u4EFB\u610F)" }),
             /* @__PURE__ */ jsx(
               "input",
               {
                 id: "ffid-inquiry-phone",
-                style: inputStyle,
+                style: s(inputStyle),
+                className: classNames?.input,
                 type: "tel",
                 value: phone,
                 onChange: (e) => setPhone(e.target.value)
@@ -3756,165 +3818,152 @@ function FFIDInquiryForm({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-category", children: "\u304A\u554F\u3044\u5408\u308F\u305B\u7A2E\u5225" }),
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+          /* @__PURE__ */ jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-category", children: "\u304A\u554F\u3044\u5408\u308F\u305B\u7A2E\u5225" }),
+          /* @__PURE__ */ jsxs(
             "select",
             {
               id: "ffid-inquiry-category",
-              style: inputStyle,
+              style: s(inputStyle),
+              className: classNames?.select,
               value: category,
               onChange: (e) => setCategory(e.target.value),
-              children: renderCategoryOptions(categoryOptions)
+              required: requireCategorySelection,
+              children: [
+                requireCategorySelection && /* @__PURE__ */ jsx("option", { value: "", disabled: true, className: classNames?.categoryPlaceholderOption, children: CATEGORY_PLACEHOLDER_LABEL_JA }),
+                renderCategoryOptions(categoryOptions)
+              ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-message", children: "\u304A\u554F\u3044\u5408\u308F\u305B\u5185\u5BB9" }),
+        /* @__PURE__ */ jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+          /* @__PURE__ */ jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-message", children: "\u304A\u554F\u3044\u5408\u308F\u305B\u5185\u5BB9" }),
           /* @__PURE__ */ jsx(
             "textarea",
             {
               id: "ffid-inquiry-message",
-              style: { ...inputStyle, minHeight: 180, resize: "vertical" },
+              style: s({ ...inputStyle, minHeight: 180, resize: "vertical" }),
+              className: classNames?.textarea,
               value: message,
               onChange: (e) => setMessage(e.target.value),
+              placeholder: resolvedMessagePlaceholder,
               required: true,
               maxLength: 1e4
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("fieldset", { style: { ...fieldsetStyle, border: "none", padding: 0 }, children: [
-          /* @__PURE__ */ jsx("legend", { style: { ...labelStyle, marginBottom: SPACING_SM }, children: "\u30CB\u30E5\u30FC\u30B9\u30EC\u30BF\u30FC\u8CFC\u8AAD (\u4EFB\u610F)" }),
-          /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: SPACING_SM, marginBottom: SPACING_SM }, children: [
+        /* @__PURE__ */ jsxs(
+          "fieldset",
+          {
+            style: s({ ...fieldsetStyle, border: "none", padding: 0 }),
+            className: classNames?.newsletterFieldset,
+            children: [
+              /* @__PURE__ */ jsx(
+                "legend",
+                {
+                  style: s({ ...labelStyle, marginBottom: SPACING_SM }),
+                  className: cx(classNames?.label, classNames?.newsletterLegend),
+                  children: "\u30CB\u30E5\u30FC\u30B9\u30EC\u30BF\u30FC\u8CFC\u8AAD (\u4EFB\u610F)"
+                }
+              ),
+              /* @__PURE__ */ jsxs("label", { style: s(rowStyle), className: classNames?.newsletterRow, children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: classNames?.newsletterCheckbox,
+                    checked: inquiryFollowup,
+                    onChange: (e) => setInquiryFollowup(e.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: s(spanStyle), children: "\u304A\u554F\u3044\u5408\u308F\u305B\u306B\u95A2\u9023\u3059\u308B\u6848\u5185\u3092\u53D7\u3051\u53D6\u308B" })
+              ] }),
+              /* @__PURE__ */ jsxs("label", { style: s(rowStyleLast), className: classNames?.newsletterRow, children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: classNames?.newsletterCheckbox,
+                    checked: general,
+                    onChange: (e) => setGeneral(e.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: s(spanStyle), children: "\u5B9A\u671F\u30CB\u30E5\u30FC\u30B9\u30EC\u30BF\u30FC\u3092\u53D7\u3051\u53D6\u308B" })
+              ] })
+            ]
+          }
+        ),
+        separateLegalCheckboxes ? /* @__PURE__ */ jsxs("div", { style: s(fieldsetStyle), className: classNames?.legalBlock, children: [
+          /* @__PURE__ */ jsxs("label", { style: s(legalRowFirst), className: classNames?.legalRow, children: [
             /* @__PURE__ */ jsx(
               "input",
               {
                 type: "checkbox",
-                checked: inquiryFollowup,
-                onChange: (e) => setInquiryFollowup(e.target.checked)
+                className: classNames?.legalCheckbox,
+                checked: agreedTerms,
+                onChange: (e) => setAgreedTerms(e.target.checked),
+                required: true
               }
             ),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: FONT_SIZE_SM }, children: "\u304A\u554F\u3044\u5408\u308F\u305B\u306B\u95A2\u9023\u3059\u308B\u6848\u5185\u3092\u53D7\u3051\u53D6\u308B" })
+            /* @__PURE__ */ jsxs("span", { style: s(spanStyle), children: [
+              renderTermsLink(),
+              " \u306B\u540C\u610F\u3057\u307E\u3059\u3002"
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: SPACING_SM }, children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked: general,
-                onChange: (e) => setGeneral(e.target.checked)
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: FONT_SIZE_SM }, children: "\u5B9A\u671F\u30CB\u30E5\u30FC\u30B9\u30EC\u30BF\u30FC\u3092\u53D7\u3051\u53D6\u308B" })
-          ] })
-        ] }),
-        separateLegalCheckboxes ? /* @__PURE__ */ jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsxs(
-            "label",
-            {
-              style: {
-                display: "flex",
-                alignItems: "flex-start",
-                gap: SPACING_SM,
-                marginBottom: SPACING_SM
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: agreedTerms,
-                    onChange: (e) => setAgreedTerms(e.target.checked),
-                    required: true
-                  }
-                ),
-                /* @__PURE__ */ jsxs("span", { style: { fontSize: FONT_SIZE_SM }, children: [
-                  termsHref ? /* @__PURE__ */ jsxs("a", { href: termsHref, target: "_blank", rel: "noopener noreferrer", children: [
-                    "\u5229\u7528\u898F\u7D04 (v",
-                    termsVersion,
-                    ")"
-                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    "\u5229\u7528\u898F\u7D04 (v",
-                    termsVersion,
-                    ")"
-                  ] }),
-                  " ",
-                  "\u306B\u540C\u610F\u3057\u307E\u3059\u3002"
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "flex-start", gap: SPACING_SM }, children: [
+          /* @__PURE__ */ jsxs("label", { style: s(legalRowLast), className: classNames?.legalRow, children: [
             /* @__PURE__ */ jsx(
               "input",
               {
                 type: "checkbox",
+                className: classNames?.legalCheckbox,
                 checked: agreedPrivacy,
                 onChange: (e) => setAgreedPrivacy(e.target.checked),
                 required: true
               }
             ),
-            /* @__PURE__ */ jsxs("span", { style: { fontSize: FONT_SIZE_SM }, children: [
-              privacyHref ? /* @__PURE__ */ jsxs("a", { href: privacyHref, target: "_blank", rel: "noopener noreferrer", children: [
-                "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
-                privacyVersion,
-                ")"
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
-                privacyVersion,
-                ")"
-              ] }),
-              " ",
-              "\u306B\u540C\u610F\u3057\u307E\u3059\u3002"
+            /* @__PURE__ */ jsxs("span", { style: s(spanStyle), children: [
+              renderPrivacyLink(),
+              " \u306B\u540C\u610F\u3057\u307E\u3059\u3002"
             ] })
           ] })
-        ] }) : /* @__PURE__ */ jsx("div", { style: fieldsetStyle, children: /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "flex-start", gap: SPACING_SM }, children: [
+        ] }) : /* @__PURE__ */ jsx("div", { style: s(fieldsetStyle), className: classNames?.legalBlock, children: /* @__PURE__ */ jsxs("label", { style: s(legalRowLast), className: classNames?.legalRow, children: [
           /* @__PURE__ */ jsx(
             "input",
             {
               type: "checkbox",
+              className: classNames?.legalCheckbox,
               checked: agreedLegal,
               onChange: (e) => setAgreedLegal(e.target.checked),
               required: true
             }
           ),
-          /* @__PURE__ */ jsxs("span", { style: { fontSize: FONT_SIZE_SM }, children: [
-            termsHref ? /* @__PURE__ */ jsxs("a", { href: termsHref, target: "_blank", rel: "noopener noreferrer", children: [
-              "\u5229\u7528\u898F\u7D04 (v",
-              termsVersion,
-              ")"
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              "\u5229\u7528\u898F\u7D04 (v",
-              termsVersion,
-              ")"
-            ] }),
-            " ",
-            "\u3068",
-            " ",
-            privacyHref ? /* @__PURE__ */ jsxs("a", { href: privacyHref, target: "_blank", rel: "noopener noreferrer", children: [
-              "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
-              privacyVersion,
-              ")"
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
-              privacyVersion,
-              ")"
-            ] }),
-            " ",
-            "\u306B\u540C\u610F\u3057\u307E\u3059\u3002"
+          /* @__PURE__ */ jsxs("span", { style: s(spanStyle), children: [
+            renderTermsLink(),
+            " \u3068 ",
+            renderPrivacyLink(),
+            " \u306B\u540C\u610F\u3057\u307E\u3059\u3002"
           ] })
         ] }) }),
-        !isAuth && turnstileSlot && /* @__PURE__ */ jsx("div", { style: fieldsetStyle, children: turnstileSlot }),
-        formError && /* @__PURE__ */ jsx("p", { role: "alert", style: { ...errorTextStyle, marginBottom: SPACING_MD }, children: formError }),
+        !isAuth && turnstileSlot && /* @__PURE__ */ jsx("div", { style: s(fieldsetStyle), className: classNames?.field, children: turnstileSlot }),
+        formError && /* @__PURE__ */ jsx(
+          "p",
+          {
+            role: "alert",
+            style: s({ ...errorTextStyle, marginBottom: SPACING_MD }),
+            className: classNames?.errorText,
+            children: formError
+          }
+        ),
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "submit",
-            style: {
+            style: s({
               ...submitButtonStyle,
               opacity: submitting ? SUBMIT_BUTTON_OPACITY_PENDING : 1,
               cursor: submitting ? "not-allowed" : "pointer"
-            },
+            }),
+            className: classNames?.submitButton,
             disabled: submitting,
             children: submitting ? "\u9001\u4FE1\u4E2D..." : "\u9001\u4FE1\u3059\u308B"
           }