@feelflow/ffid-sdk 2.10.0 → 2.12.0

package/dist/{chunk-55KLWKM7.cjs → chunk-5ZMR3NNO.cjs}

@@ -457,9 +457,118 @@ function createBillingMethods(deps) {
 var EXT_PLANS_ENDPOINT = "/api/v1/subscriptions/ext/plans";
 var EXT_SUBSCRIPTION_ENDPOINT = "/api/v1/subscriptions/ext";
 var EXT_SUBSCRIBE_ENDPOINT = "/api/v1/subscriptions/ext/subscribe";
+var FFIDSDKError = class extends Error {
+  code;
+  constructor(code, message) {
+    super(message);
+    this.name = "FFIDSDKError";
+    this.code = code;
+  }
+};
 function isBlankString(value) {
   return typeof value !== "string" || value.trim() === "";
 }
+var MALFORMED_PREVIEW_CODE = "MALFORMED_PLAN_CHANGE_PREVIEW";
+var MALFORMED_SEAT_PREVIEW_CODE = "MALFORMED_SEAT_CHANGE_PREVIEW";
+var SEAT_ESTIMATE_REASONS = /* @__PURE__ */ new Set(["no_stripe_data", "custom_pricing", "stripe_error"]);
+function validatePlanChangePreview(preview) {
+  if (preview === null || typeof preview !== "object") {
+    throw new FFIDSDKError(
+      MALFORMED_PREVIEW_CODE,
+      "SDK: server returned malformed PlanChangePreview \u2014 expected object, got " + (preview === null ? "null" : typeof preview)
+    );
+  }
+  const p = preview;
+  const flag = p.willApplyAtPeriodEnd;
+  if (typeof flag !== "boolean") {
+    throw new FFIDSDKError(
+      MALFORMED_PREVIEW_CODE,
+      `SDK: server returned malformed PlanChangePreview \u2014 willApplyAtPeriodEnd must be boolean (got ${typeof flag})`
+    );
+  }
+  const { proratedAmount, effectiveDate } = p;
+  if (flag === true) {
+    if (proratedAmount !== 0) {
+      throw new FFIDSDKError(
+        MALFORMED_PREVIEW_CODE,
+        `SDK: server returned malformed PlanChangePreview \u2014 willApplyAtPeriodEnd=true requires proratedAmount=0 (got ${JSON.stringify(proratedAmount)})`
+      );
+    }
+    if (effectiveDate !== null && typeof effectiveDate !== "string") {
+      throw new FFIDSDKError(
+        MALFORMED_PREVIEW_CODE,
+        `SDK: server returned malformed PlanChangePreview \u2014 willApplyAtPeriodEnd=true requires effectiveDate to be string or null (got ${typeof effectiveDate})`
+      );
+    }
+    return;
+  }
+  if (effectiveDate !== null) {
+    throw new FFIDSDKError(
+      MALFORMED_PREVIEW_CODE,
+      `SDK: server returned malformed PlanChangePreview \u2014 willApplyAtPeriodEnd=false requires effectiveDate=null (got ${JSON.stringify(effectiveDate)})`
+    );
+  }
+  if (typeof proratedAmount !== "number") {
+    throw new FFIDSDKError(
+      MALFORMED_PREVIEW_CODE,
+      `SDK: server returned malformed PlanChangePreview \u2014 willApplyAtPeriodEnd=false requires proratedAmount to be a number (got ${typeof proratedAmount})`
+    );
+  }
+}
+function validateSeatChangePreview(preview) {
+  if (preview === null || typeof preview !== "object") {
+    throw new FFIDSDKError(
+      MALFORMED_SEAT_PREVIEW_CODE,
+      "SDK: server returned malformed SeatChangePreview \u2014 expected object, got " + (preview === null ? "null" : typeof preview)
+    );
+  }
+  const p = preview;
+  if (p.type !== "seat-change") {
+    throw new FFIDSDKError(
+      MALFORMED_SEAT_PREVIEW_CODE,
+      `SDK: server returned malformed SeatChangePreview \u2014 type must be 'seat-change' (got ${JSON.stringify(p.type)})`
+    );
+  }
+  const numericFields = [
+    "currentQuantity",
+    "newQuantity",
+    "unitPrice",
+    "proratedAmount",
+    "nextInvoiceAmount"
+  ];
+  for (const key of numericFields) {
+    if (typeof p[key] !== "number") {
+      throw new FFIDSDKError(
+        MALFORMED_SEAT_PREVIEW_CODE,
+        `SDK: server returned malformed SeatChangePreview \u2014 ${key} must be a number (got ${typeof p[key]})`
+      );
+    }
+  }
+  if (p.nextInvoiceDate !== null && typeof p.nextInvoiceDate !== "string") {
+    throw new FFIDSDKError(
+      MALFORMED_SEAT_PREVIEW_CODE,
+      `SDK: server returned malformed SeatChangePreview \u2014 nextInvoiceDate must be string or null (got ${typeof p.nextInvoiceDate})`
+    );
+  }
+  if (typeof p.isEstimate !== "boolean") {
+    throw new FFIDSDKError(
+      MALFORMED_SEAT_PREVIEW_CODE,
+      `SDK: server returned malformed SeatChangePreview \u2014 isEstimate must be boolean (got ${typeof p.isEstimate})`
+    );
+  }
+  if (p.estimateReason !== void 0 && !SEAT_ESTIMATE_REASONS.has(p.estimateReason)) {
+    throw new FFIDSDKError(
+      MALFORMED_SEAT_PREVIEW_CODE,
+      `SDK: server returned malformed SeatChangePreview \u2014 estimateReason must be one of 'no_stripe_data' | 'custom_pricing' | 'stripe_error' (got ${JSON.stringify(p.estimateReason)})`
+    );
+  }
+  if (!Array.isArray(p.lineItems)) {
+    throw new FFIDSDKError(
+      MALFORMED_SEAT_PREVIEW_CODE,
+      `SDK: server returned malformed SeatChangePreview \u2014 lineItems must be an array (got ${typeof p.lineItems})`
+    );
+  }
+}
 function createSubscriptionMethods(deps) {
   const { fetchWithAuth, createError } = deps;
   async function listPlans() {
@@ -546,7 +655,7 @@ function createSubscriptionMethods(deps) {
         error: createError("VALIDATION_ERROR", "subscriptionId \u3068 planCode \u306F\u5FC5\u9808\u3067\u3059")
       };
     }
-    return fetchWithAuth(
+    const response = await fetchWithAuth(
       `${EXT_SUBSCRIPTION_ENDPOINT}/${encodeURIComponent(params.subscriptionId)}/plan/preview`,
       {
         method: "POST",
@@ -556,6 +665,36 @@ function createSubscriptionMethods(deps) {
         })
       }
     );
+    if (response.data !== void 0) {
+      validatePlanChangePreview(response.data.preview);
+    }
+    return response;
+  }
+  async function previewSeatChange(params) {
+    if (isBlankString(params.subscriptionId)) {
+      return {
+        error: createError("VALIDATION_ERROR", "subscriptionId \u306F\u5FC5\u9808\u3067\u3059")
+      };
+    }
+    if (typeof params.quantity !== "number" || !Number.isInteger(params.quantity) || params.quantity < 1) {
+      return {
+        error: createError(
+          "VALIDATION_ERROR",
+          `quantity \u306F 1 \u4EE5\u4E0A\u306E\u6574\u6570\u3067\u3042\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059 (received: ${String(params.quantity)})`
+        )
+      };
+    }
+    const response = await fetchWithAuth(
+      `${EXT_SUBSCRIPTION_ENDPOINT}/${encodeURIComponent(params.subscriptionId)}/seats/preview`,
+      {
+        method: "POST",
+        body: JSON.stringify({ quantity: params.quantity })
+      }
+    );
+    if (response.data !== void 0) {
+      validateSeatChangePreview(response.data.preview);
+    }
+    return response;
   }
   return {
     listPlans,
@@ -564,7 +703,8 @@ function createSubscriptionMethods(deps) {
     changePlan,
     cancelSubscription,
     cancelPendingDowngrade,
-    previewPlanChange
+    previewPlanChange,
+    previewSeatChange
   };
 }
 
@@ -621,7 +761,7 @@ function createMembersMethods(deps) {
 }
 
 // src/client/version-check.ts
-var SDK_VERSION = "2.10.0";
+var SDK_VERSION = "2.12.0";
 var SDK_USER_AGENT = `FFID-SDK/${SDK_VERSION} (TypeScript)`;
 var SDK_VERSION_HEADER = "X-FFID-SDK-Version";
 function sdkHeaders() {
@@ -1958,7 +2098,8 @@ function createFFIDClient(config) {
     changePlan,
     cancelSubscription,
     cancelPendingDowngrade,
-    previewPlanChange
+    previewPlanChange,
+    previewSeatChange
   } = createSubscriptionMethods({
     fetchWithAuth,
     createError
@@ -2048,6 +2189,7 @@ function createFFIDClient(config) {
     cancelSubscription,
     cancelPendingDowngrade,
     previewPlanChange,
+    previewSeatChange,
     verifyAccessToken,
     getSubscribeUrl,
     redirectToSubscribe,
@@ -3422,43 +3564,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    ungrouped.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value)),
-    groupKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx("optgroup", { label: groupLabelByKey.get(key) ?? key, children: itemsByKey.get(key).map((opt) => /* @__PURE__ */ jsxRuntime.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,
@@ -3498,7 +3606,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    ungrouped.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value)),
+    groupKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx("optgroup", { label: groupLabelByKey.get(key) ?? key, children: itemsByKey.get(key).map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value)) }, key))
+  ] });
+}
 function FFIDInquiryForm({
   mode,
   prefill,
@@ -3515,6 +3674,9 @@ function FFIDInquiryForm({
   onChange,
   separateLegalCheckboxes = false,
   messagePlaceholder,
+  requireCategorySelection = false,
+  unstyled = false,
+  classNames,
   locale = "ja",
   className
 }) {
@@ -3532,11 +3694,20 @@ function FFIDInquiryForm({
     return null;
   }, [isAuth, organizations, preselectedOrganizationId]);
   const initialCategory = react.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] = react.useState(prefill?.name ?? "");
   const [email, setEmail] = react.useState(prefill?.email ?? "");
   const [company, setCompany] = react.useState(isAuth ? "" : prefill?.company ?? "");
@@ -3555,7 +3726,7 @@ function FFIDInquiryForm({
   const resolvedMessagePlaceholder = react.useMemo(() => {
     if (messagePlaceholder === void 0) return void 0;
     if (typeof messagePlaceholder === "string") return messagePlaceholder;
-    return messagePlaceholder({ category });
+    return messagePlaceholder({ category: category === "" ? null : category });
   }, [messagePlaceholder, category]);
   const [hydrated, setHydrated] = react.useState(false);
   react.useEffect(() => {
@@ -3566,6 +3737,7 @@ function FFIDInquiryForm({
     onChangeRef.current = onChange;
   }, [onChange]);
   react.useEffect(() => {
+    if (category === "") return;
     onChangeRef.current?.({
       name: name.trim(),
       email: email.trim(),
@@ -3596,6 +3768,7 @@ function FFIDInquiryForm({
     turnstileToken,
     locale
   ]);
+  const s = (style) => styleOrUndefined(style, unstyled);
   async function handleSubmit(e) {
     e.preventDefault();
     setFormError(null);
@@ -3616,15 +3789,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 {
@@ -3649,9 +3824,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);
@@ -3665,35 +3838,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__ */ jsxRuntime.jsxs("a", { href: termsHref, target: "_blank", rel: "noopener noreferrer", className: classNames?.legalLink, children: [
+      "\u5229\u7528\u898F\u7D04 (v",
+      termsVersion,
+      ")"
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "\u5229\u7528\u898F\u7D04 (v",
+      termsVersion,
+      ")"
+    ] });
+  }
+  function renderPrivacyLink() {
+    return privacyHref ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
+      privacyVersion,
+      ")"
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
       onSubmit: handleSubmit,
-      className,
+      className: cx(className, classNames?.form),
       noValidate: true,
       "data-hydrated": hydrated ? "true" : void 0,
       children: [
-        showOrgBlock && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-org", children: "\u554F\u3044\u5408\u308F\u305B\u308B\u7ACB\u5834" }),
+        showOrgBlock && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: s(fieldsetStyle), className: cx(classNames?.field, classNames?.orgSelectWrapper), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-org", children: "\u554F\u3044\u5408\u308F\u305B\u308B\u7ACB\u5834" }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "select",
             {
               id: "ffid-inquiry-org",
-              style: inputStyle,
+              style: s(inputStyle),
+              className: classNames?.select,
               value: organizationId ?? "",
               onChange: (e) => setOrganizationId(e.target.value || null),
               children: [
@@ -3706,13 +3900,14 @@ function FFIDInquiryForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-name", children: "\u304A\u540D\u524D" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-name", children: "\u304A\u540D\u524D" }),
           /* @__PURE__ */ jsxRuntime.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),
@@ -3721,13 +3916,14 @@ function FFIDInquiryForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-email", children: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-email", children: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9" }),
           /* @__PURE__ */ jsxRuntime.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),
@@ -3737,26 +3933,28 @@ function FFIDInquiryForm({
           )
         ] }),
         !isAuth && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldsetStyle, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-company", children: "\u4F1A\u793E\u540D (\u4EFB\u610F)" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-company", children: "\u4F1A\u793E\u540D (\u4EFB\u610F)" }),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: fieldsetStyle, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-phone", children: "\u96FB\u8A71\u756A\u53F7 (\u4EFB\u610F)" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-phone", children: "\u96FB\u8A71\u756A\u53F7 (\u4EFB\u610F)" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
                 id: "ffid-inquiry-phone",
-                style: inputStyle,
+                style: s(inputStyle),
+                className: classNames?.input,
                 type: "tel",
                 value: phone,
                 onChange: (e) => setPhone(e.target.value)
@@ -3764,26 +3962,32 @@ function FFIDInquiryForm({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-category", children: "\u304A\u554F\u3044\u5408\u308F\u305B\u7A2E\u5225" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-category", children: "\u304A\u554F\u3044\u5408\u308F\u305B\u7A2E\u5225" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "", disabled: true, className: classNames?.categoryPlaceholderOption, children: CATEGORY_PLACEHOLDER_LABEL_JA }),
+                renderCategoryOptions(categoryOptions)
+              ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, htmlFor: "ffid-inquiry-message", children: "\u304A\u554F\u3044\u5408\u308F\u305B\u5185\u5BB9" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: s(fieldsetStyle), className: classNames?.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: s(labelStyle), className: classNames?.label, htmlFor: "ffid-inquiry-message", children: "\u304A\u554F\u3044\u5408\u308F\u305B\u5185\u5BB9" }),
           /* @__PURE__ */ jsxRuntime.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,
@@ -3792,138 +3996,118 @@ function FFIDInquiryForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { style: { ...fieldsetStyle, border: "none", padding: 0 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("legend", { style: { ...labelStyle, marginBottom: SPACING_SM }, children: "\u30CB\u30E5\u30FC\u30B9\u30EC\u30BF\u30FC\u8CFC\u8AAD (\u4EFB\u610F)" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: SPACING_SM, marginBottom: SPACING_SM }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "fieldset",
+          {
+            style: s({ ...fieldsetStyle, border: "none", padding: 0 }),
+            className: classNames?.newsletterFieldset,
+            children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("label", { style: s(rowStyle), className: classNames?.newsletterRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: classNames?.newsletterCheckbox,
+                    checked: inquiryFollowup,
+                    onChange: (e) => setInquiryFollowup(e.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("label", { style: s(rowStyleLast), className: classNames?.newsletterRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: classNames?.newsletterCheckbox,
+                    checked: general,
+                    onChange: (e) => setGeneral(e.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: s(spanStyle), children: "\u5B9A\u671F\u30CB\u30E5\u30FC\u30B9\u30EC\u30BF\u30FC\u3092\u53D7\u3051\u53D6\u308B" })
+              ] })
+            ]
+          }
+        ),
+        separateLegalCheckboxes ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: s(fieldsetStyle), className: classNames?.legalBlock, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: s(legalRowFirst), className: classNames?.legalRow, children: [
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { style: s(spanStyle), children: [
+              renderTermsLink(),
+              " \u306B\u540C\u610F\u3057\u307E\u3059\u3002"
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: SPACING_SM }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked: general,
-                onChange: (e) => setGeneral(e.target.checked)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: FONT_SIZE_SM }, children: "\u5B9A\u671F\u30CB\u30E5\u30FC\u30B9\u30EC\u30BF\u30FC\u3092\u53D7\u3051\u53D6\u308B" })
-          ] })
-        ] }),
-        separateLegalCheckboxes ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldsetStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "label",
-            {
-              style: {
-                display: "flex",
-                alignItems: "flex-start",
-                gap: SPACING_SM,
-                marginBottom: SPACING_SM
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: agreedTerms,
-                    onChange: (e) => setAgreedTerms(e.target.checked),
-                    required: true
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: FONT_SIZE_SM }, children: [
-                  termsHref ? /* @__PURE__ */ jsxRuntime.jsxs("a", { href: termsHref, target: "_blank", rel: "noopener noreferrer", children: [
-                    "\u5229\u7528\u898F\u7D04 (v",
-                    termsVersion,
-                    ")"
-                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    "\u5229\u7528\u898F\u7D04 (v",
-                    termsVersion,
-                    ")"
-                  ] }),
-                  " ",
-                  "\u306B\u540C\u610F\u3057\u307E\u3059\u3002"
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "flex-start", gap: SPACING_SM }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: s(legalRowLast), className: classNames?.legalRow, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
                 type: "checkbox",
+                className: classNames?.legalCheckbox,
                 checked: agreedPrivacy,
                 onChange: (e) => setAgreedPrivacy(e.target.checked),
                 required: true
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: FONT_SIZE_SM }, children: [
-              privacyHref ? /* @__PURE__ */ jsxRuntime.jsxs("a", { href: privacyHref, target: "_blank", rel: "noopener noreferrer", children: [
-                "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
-                privacyVersion,
-                ")"
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
-                privacyVersion,
-                ")"
-              ] }),
-              " ",
-              "\u306B\u540C\u610F\u3057\u307E\u3059\u3002"
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: s(spanStyle), children: [
+              renderPrivacyLink(),
+              " \u306B\u540C\u610F\u3057\u307E\u3059\u3002"
             ] })
           ] })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldsetStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "flex-start", gap: SPACING_SM }, children: [
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: s(fieldsetStyle), className: classNames?.legalBlock, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { style: s(legalRowLast), className: classNames?.legalRow, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               type: "checkbox",
+              className: classNames?.legalCheckbox,
               checked: agreedLegal,
               onChange: (e) => setAgreedLegal(e.target.checked),
               required: true
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: FONT_SIZE_SM }, children: [
-            termsHref ? /* @__PURE__ */ jsxRuntime.jsxs("a", { href: termsHref, target: "_blank", rel: "noopener noreferrer", children: [
-              "\u5229\u7528\u898F\u7D04 (v",
-              termsVersion,
-              ")"
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              "\u5229\u7528\u898F\u7D04 (v",
-              termsVersion,
-              ")"
-            ] }),
-            " ",
-            "\u3068",
-            " ",
-            privacyHref ? /* @__PURE__ */ jsxRuntime.jsxs("a", { href: privacyHref, target: "_blank", rel: "noopener noreferrer", children: [
-              "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
-              privacyVersion,
-              ")"
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC (v",
-              privacyVersion,
-              ")"
-            ] }),
-            " ",
-            "\u306B\u540C\u610F\u3057\u307E\u3059\u3002"
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: s(spanStyle), children: [
+            renderTermsLink(),
+            " \u3068 ",
+            renderPrivacyLink(),
+            " \u306B\u540C\u610F\u3057\u307E\u3059\u3002"
           ] })
         ] }) }),
-        !isAuth && turnstileSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldsetStyle, children: turnstileSlot }),
-        formError && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", style: { ...errorTextStyle, marginBottom: SPACING_MD }, children: formError }),
+        !isAuth && turnstileSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { style: s(fieldsetStyle), className: classNames?.field, children: turnstileSlot }),
+        formError && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            role: "alert",
+            style: s({ ...errorTextStyle, marginBottom: SPACING_MD }),
+            className: classNames?.errorText,
+            children: formError
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.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"
           }
@@ -3940,6 +4124,7 @@ exports.FFIDInquiryForm = FFIDInquiryForm;
 exports.FFIDLoginButton = FFIDLoginButton;
 exports.FFIDOrganizationSwitcher = FFIDOrganizationSwitcher;
 exports.FFIDProvider = FFIDProvider;
+exports.FFIDSDKError = FFIDSDKError;
 exports.FFIDSubscriptionBadge = FFIDSubscriptionBadge;
 exports.FFIDUserMenu = FFIDUserMenu;
 exports.FFID_ANNOUNCEMENTS_ERROR_CODES = FFID_ANNOUNCEMENTS_ERROR_CODES;