quirk-ui 0.1.76 → 0.1.78

package/dist/{FormField-BO1hKjUb.js → FormField-Rqe3qF_t.js}

@@ -1,40 +1,45 @@
 import { jsx as s } from "react/jsx-runtime";
-import { Input as q } from "./core/components/Input/index.mjs";
-import { Textarea as v } from "./core/components/Textarea/index.mjs";
-import { Select as p } from "./core/components/Select/index.mjs";
-import { Checkbox as g } from "./core/components/Checkbox/index.mjs";
-import { Radio as z } from "./core/components/Radio/index.mjs";
+import { Input as v } from "./core/components/Input/index.mjs";
+import { Textarea as T } from "./core/components/Textarea/index.mjs";
+import { Select as b } from "./core/components/Select/index.mjs";
+import { Checkbox as d } from "./core/components/Checkbox/index.mjs";
+import { Radio as W } from "./core/components/Radio/index.mjs";
 import { Fieldset as h } from "./core/components/Fieldset/index.mjs";
-import { DatePicker as T } from "./core/components/DatePicker/index.mjs";
-import { Range as k } from "./core/components/Range/index.mjs";
-import './FormField.css';const C = "_formBlock_wgqzg_1", y = "_container_wgqzg_7", f = "_heading_wgqzg_20", B = "_eyebrow_wgqzg_26", L = "_title_wgqzg_30", F = "_progress_wgqzg_36", H = "_progressHeader_wgqzg_42", G = "_stepLabel_wgqzg_48", $ = "_stepCount_wgqzg_54", S = "_stepDescription_wgqzg_59", D = "_fields_wgqzg_67", O = "_fieldFull_wgqzg_74", V = "_fieldHalf_wgqzg_78", M = "_fieldThird_wgqzg_86", P = "_actions_wgqzg_96", W = "_submitButton_wgqzg_103", I = "_success_wgqzg_109", R = "_errorBanner_wgqzg_122", i = {
-  formBlock: C,
-  container: y,
-  heading: f,
-  eyebrow: B,
-  title: L,
-  progress: F,
-  progressHeader: H,
-  stepLabel: G,
-  stepCount: $,
-  stepDescription: S,
-  fields: D,
-  fieldFull: O,
-  fieldHalf: V,
-  fieldThird: M,
-  actions: P,
-  submitButton: W,
-  success: I,
-  errorBanner: R
+import { DatePicker as k } from "./core/components/DatePicker/index.mjs";
+import { Range as w } from "./core/components/Range/index.mjs";
+import './FormField.css';const L = "_formBlock_b7mbf_1", C = "_container_b7mbf_7", F = "_formInner_b7mbf_20", y = "_maxWidthSm_b7mbf_26", B = "_maxWidthMd_b7mbf_29", q = "_maxWidthLg_b7mbf_32", S = "_maxWidthFull_b7mbf_35", H = "_heading_b7mbf_41", G = "_eyebrow_b7mbf_47", M = "_title_b7mbf_51", $ = "_progress_b7mbf_57", I = "_progressHeader_b7mbf_63", D = "_stepLabel_b7mbf_69", O = "_stepCount_b7mbf_75", V = "_stepDescription_b7mbf_80", P = "_fields_b7mbf_88", R = "_fieldFull_b7mbf_95", j = "_fieldHalf_b7mbf_99", N = "_fieldThird_b7mbf_107", z = "_actions_b7mbf_117", A = "_submitButton_b7mbf_124", E = "_success_b7mbf_130", J = "_errorBanner_b7mbf_143", c = {
+  formBlock: L,
+  container: C,
+  formInner: F,
+  maxWidthSm: y,
+  maxWidthMd: B,
+  maxWidthLg: q,
+  maxWidthFull: S,
+  heading: H,
+  eyebrow: G,
+  title: M,
+  progress: $,
+  progressHeader: I,
+  stepLabel: D,
+  stepCount: O,
+  stepDescription: V,
+  fields: P,
+  fieldFull: R,
+  fieldHalf: j,
+  fieldThird: N,
+  actions: z,
+  submitButton: A,
+  success: E,
+  errorBanner: J
 };
-function c(e) {
+function u(e) {
   return (e ?? []).map((r) => ({
     label: r.label,
     value: r.value.current,
     disabled: r.disabled
   }));
 }
-function m(e) {
+function p(e) {
   return (e ?? []).map((r) => ({
     label: r.label,
     options: r.options.map((n) => ({
@@ -44,12 +49,12 @@ function m(e) {
     }))
   }));
 }
-function Y({ field: e, value: r, error: n, onChange: o }) {
+function ae({ field: e, value: r, error: n, onChange: o }) {
   const a = e.name.current, _ = {
-    full: i.fieldFull,
-    half: i.fieldHalf,
-    third: i.fieldThird
-  }[e.width ?? "full"], u = {
+    full: c.fieldFull,
+    half: c.fieldHalf,
+    third: c.fieldThird
+  }[e.width ?? "full"], i = {
     id: a,
     name: a,
     label: e.label,
@@ -57,7 +62,7 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
     disabled: e.disabled,
     helperText: e.helperText,
     error: n
-  }, d = () => {
+  }, m = () => {
     switch (e.fieldType) {
       // ── Text-based inputs ──────────────────────────────────────────────
       case "text":
@@ -66,9 +71,9 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
       case "number":
       case "url":
         return /* @__PURE__ */ s(
-          q,
+          v,
           {
-            ...u,
+            ...i,
             type: e.fieldType === "phone" ? "tel" : e.fieldType,
             placeholder: e.placeholder,
             value: r ?? "",
@@ -81,9 +86,9 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
       // ── Textarea ───────────────────────────────────────────────────────
       case "textarea":
         return /* @__PURE__ */ s(
-          v,
+          T,
           {
-            ...u,
+            ...i,
             placeholder: e.placeholder,
             value: r ?? "",
             rows: e.rows ?? 4,
@@ -95,11 +100,11 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
         );
       // ── Select ─────────────────────────────────────────────────────────
       case "select": {
-        const t = e.useOptionGroups ? m(e.optionGroups) : c(e.options);
+        const t = e.useOptionGroups ? p(e.optionGroups) : u(e.options);
         return /* @__PURE__ */ s(
-          p,
+          b,
           {
-            ...u,
+            ...i,
             placeholder: e.placeholder,
             options: t,
             value: r ?? "",
@@ -110,11 +115,11 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
       }
       // ── Multi-select ───────────────────────────────────────────────────
       case "multiselect": {
-        const t = e.useOptionGroups ? m(e.optionGroups) : c(e.options);
+        const t = e.useOptionGroups ? p(e.optionGroups) : u(e.options);
         return /* @__PURE__ */ s(
-          p,
+          b,
           {
-            ...u,
+            ...i,
             multiple: !0,
             options: t,
             value: r ?? [],
@@ -126,10 +131,10 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
       // ── Single checkbox ────────────────────────────────────────────────
       case "checkbox":
         return /* @__PURE__ */ s(
-          g,
+          d,
           {
-            id: u.id,
-            name: u.name,
+            id: i.id,
+            name: i.name,
             label: e.label,
             required: e.required,
             disabled: e.disabled,
@@ -142,17 +147,17 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
       // ── Checkbox group ─────────────────────────────────────────────────
       case "checkboxGroup": {
         const t = r ?? [];
-        return /* @__PURE__ */ s(h, { legend: e.label, error: !!n, helperText: n, children: c(e.options).map((l) => /* @__PURE__ */ s(
-          g,
+        return /* @__PURE__ */ s(h, { legend: e.label, error: !!n, helperText: n, children: u(e.options).map((l) => /* @__PURE__ */ s(
+          d,
           {
             id: `${a}-${l.value}`,
             name: `${a}[]`,
             label: l.label,
             checked: t.includes(l.value),
             disabled: l.disabled || e.disabled,
-            onChange: (b) => {
-              const w = b.target.checked ? [...t, l.value] : t.filter((x) => x !== l.value);
-              o(a, w);
+            onChange: (x) => {
+              const f = x.target.checked ? [...t, l.value] : t.filter((g) => g !== l.value);
+              o(a, f);
             }
           },
           l.value
@@ -160,8 +165,8 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
       }
       // ── Radio group ────────────────────────────────────────────────────
       case "radio":
-        return /* @__PURE__ */ s(h, { legend: e.label, error: !!n, helperText: n, children: c(e.options).map((t) => /* @__PURE__ */ s(
-          z,
+        return /* @__PURE__ */ s(h, { legend: e.label, error: !!n, helperText: n, children: u(e.options).map((t) => /* @__PURE__ */ s(
+          W,
           {
             id: `${a}-${t.value}`,
             name: a,
@@ -177,10 +182,10 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
       // ── Date picker ────────────────────────────────────────────────────
       case "date":
         return /* @__PURE__ */ s(
-          T,
+          k,
           {
-            id: u.id,
-            name: u.name,
+            id: i.id,
+            name: i.name,
             label: e.label,
             required: e.required,
             disabled: e.disabled,
@@ -193,9 +198,9 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
       // ── Range ──────────────────────────────────────────────────────────
       case "range":
         return /* @__PURE__ */ s(
-          k,
+          w,
           {
-            ...u,
+            ...i,
             value: r ?? e.rangeMin ?? 0,
             min: e.rangeMin ?? 0,
             max: e.rangeMax ?? 100,
@@ -220,9 +225,9 @@ function Y({ field: e, value: r, error: n, onChange: o }) {
         return null;
     }
   };
-  return e.fieldType === "hidden" ? d() : /* @__PURE__ */ s("div", { className: `${_}`, children: d() });
+  return e.fieldType === "hidden" ? m() : /* @__PURE__ */ s("div", { className: `${_}`, children: m() });
 }
 export {
-  Y as F,
-  i as s
+  ae as F,
+  c as s
 };

package/dist/FormField-fg7Q2UyZ.cjs

@@ -0,0 +1 @@
+"use strict";require('./FormField.css');const a=require("react/jsx-runtime"),v=require("./core/components/Input/index.cjs"),q=require("./core/components/Textarea/index.cjs"),b=require("./core/components/Select/index.cjs"),_=require("./core/components/Checkbox/index.cjs"),T=require("./core/components/Radio/index.cjs"),m=require("./core/components/Fieldset/index.cjs"),k=require("./core/components/DatePicker/index.cjs"),W=require("./core/components/Range/index.cjs"),F="_formBlock_b7mbf_1",j="_container_b7mbf_7",C="_formInner_b7mbf_20",w="_maxWidthSm_b7mbf_26",L="_maxWidthMd_b7mbf_29",y="_maxWidthLg_b7mbf_32",S="_maxWidthFull_b7mbf_35",B="_heading_b7mbf_41",$="_eyebrow_b7mbf_47",H="_title_b7mbf_51",G="_progress_b7mbf_57",I="_progressHeader_b7mbf_63",M="_stepLabel_b7mbf_69",D="_stepCount_b7mbf_75",O="_stepDescription_b7mbf_80",P="_fields_b7mbf_88",R="_fieldFull_b7mbf_95",V="_fieldHalf_b7mbf_99",N="_fieldThird_b7mbf_107",z="_actions_b7mbf_117",A="_submitButton_b7mbf_124",E="_success_b7mbf_130",J="_errorBanner_b7mbf_143",u={formBlock:F,container:j,formInner:C,maxWidthSm:w,maxWidthMd:L,maxWidthLg:y,maxWidthFull:S,heading:B,eyebrow:$,title:H,progress:G,progressHeader:I,stepLabel:M,stepCount:D,stepDescription:O,fields:P,fieldFull:R,fieldHalf:V,fieldThird:N,actions:z,submitButton:A,success:E,errorBanner:J};function i(e){return(e??[]).map(n=>({label:n.label,value:n.value.current,disabled:n.disabled}))}function h(e){return(e??[]).map(n=>({label:n.label,options:n.options.map(s=>({label:s.label,value:s.value.current,disabled:s.disabled}))}))}function K({field:e,value:n,error:s,onChange:l}){const r=e.name.current,p={full:u.fieldFull,half:u.fieldHalf,third:u.fieldThird}[e.width??"full"],c={id:r,name:r,label:e.label,required:e.required,disabled:e.disabled,helperText:e.helperText,error:s},d=()=>{switch(e.fieldType){case"text":case"email":case"phone":case"number":case"url":return a.jsx(v.Input,{...c,type:e.fieldType==="phone"?"tel":e.fieldType,placeholder:e.placeholder,value:n??"",minLength:e.minLength,maxLength:e.maxLength,fullWidth:!0,onChange:t=>l(r,t.target.value)});case"textarea":return a.jsx(q.Textarea,{...c,placeholder:e.placeholder,value:n??"",rows:e.rows??4,maxLength:e.maxLength,showCharCount:e.showCharCount,fullWidth:!0,onChange:t=>l(r,t.target.value)});case"select":{const t=e.useOptionGroups?h(e.optionGroups):i(e.options);return a.jsx(b.Select,{...c,placeholder:e.placeholder,options:t,value:n??"",fullWidth:!0,onChange:o=>l(r,o.target.value)})}case"multiselect":{const t=e.useOptionGroups?h(e.optionGroups):i(e.options);return a.jsx(b.Select,{...c,multiple:!0,options:t,value:n??[],showSelectedCount:!0,onChange:o=>l(r,o)})}case"checkbox":return a.jsx(_.Checkbox,{id:c.id,name:c.name,label:e.label,required:e.required,disabled:e.disabled,helperText:s??e.helperText,error:!!s,checked:n??!1,onChange:t=>l(r,t.target.checked)});case"checkboxGroup":{const t=n??[];return a.jsx(m.Fieldset,{legend:e.label,error:!!s,helperText:s,children:i(e.options).map(o=>a.jsx(_.Checkbox,{id:`${r}-${o.value}`,name:`${r}[]`,label:o.label,checked:t.includes(o.value),disabled:o.disabled||e.disabled,onChange:x=>{const g=x.target.checked?[...t,o.value]:t.filter(f=>f!==o.value);l(r,g)}},o.value))})}case"radio":return a.jsx(m.Fieldset,{legend:e.label,error:!!s,helperText:s,children:i(e.options).map(t=>a.jsx(T.Radio,{id:`${r}-${t.value}`,name:r,value:t.value,label:t.label,checked:n===t.value,disabled:t.disabled||e.disabled,required:e.required,onChange:()=>l(r,t.value)},t.value))});case"date":return a.jsx(k.DatePicker,{id:c.id,name:c.name,label:e.label,required:e.required,disabled:e.disabled,helperText:s??e.helperText,error:!!s,value:n??null,onChange:t=>l(r,t)});case"range":return a.jsx(W.Range,{...c,value:n??e.rangeMin??0,min:e.rangeMin??0,max:e.rangeMax??100,step:e.rangeStep??1,valuePrefix:e.rangeValuePrefix,valueSuffix:e.rangeValueSuffix,showValue:!0,onChange:t=>l(r,t)});case"hidden":return a.jsx("input",{type:"hidden",name:r,value:n??e.hiddenValue??""});default:return null}};return e.fieldType==="hidden"?d():a.jsx("div",{className:`${p}`,children:d()})}exports.FormField=K;exports.styles=u;

package/dist/FormField.css

@@ -1 +1 @@
-._formBlock_wgqzg_1{width:100%;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}._container_wgqzg_7{width:100%;max-width:var(--layout-width, 1250px);margin:0 auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-lg)}._heading_wgqzg_20{display:flex;flex-direction:column;gap:var(--spacing-sm)}._eyebrow_wgqzg_26{font-weight:var(--font-weight-bold)}._title_wgqzg_30{text-wrap:balance}._progress_wgqzg_36{display:flex;flex-direction:column;gap:var(--spacing-sm)}._progressHeader_wgqzg_42{display:flex;justify-content:space-between;align-items:center}._stepLabel_wgqzg_48{font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);color:var(--color-text-primary)}._stepCount_wgqzg_54{font-size:var(--font-size-sm);color:var(--color-secondary-50)}._stepDescription_wgqzg_59{color:var(--color-secondary-75);font-size:var(--font-size-md);margin:0}._fields_wgqzg_67{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}._fieldFull_wgqzg_74{width:100%}._fieldHalf_wgqzg_78{width:calc(50% - var(--spacing-md) / 2)}@media (max-width: 767px){._fieldHalf_wgqzg_78{width:100%}}._fieldThird_wgqzg_86{width:calc(33.333% - var(--spacing-md) * 2 / 3)}@media (max-width: 767px){._fieldThird_wgqzg_86{width:100%}}._actions_wgqzg_96{display:flex;align-items:center;gap:var(--spacing-md);padding-top:var(--spacing-sm)}._submitButton_wgqzg_103{margin-left:auto}._success_wgqzg_109{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-lg);padding:var(--spacing-xl);background-color:var(--color-states-success-bg);color:var(--color-states-success-text);border-radius:var(--radius-md)}._errorBanner_wgqzg_122{padding:var(--spacing-md);background-color:var(--color-states-error-bg);color:var(--color-states-error-text);border-radius:var(--radius-md);font-size:var(--font-size-sm)}
+._formBlock_b7mbf_1{width:100%;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}._container_b7mbf_7{width:100%;max-width:var(--layout-width, 1250px);margin:0 auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-lg)}._formInner_b7mbf_20{width:100%;margin-left:auto;margin-right:auto}._maxWidthSm_b7mbf_26{max-width:480px}._maxWidthMd_b7mbf_29{max-width:640px}._maxWidthLg_b7mbf_32{max-width:800px}._maxWidthFull_b7mbf_35{max-width:100%}._heading_b7mbf_41{display:flex;flex-direction:column;gap:var(--spacing-sm)}._eyebrow_b7mbf_47{font-weight:var(--font-weight-bold)}._title_b7mbf_51{text-wrap:balance}._progress_b7mbf_57{display:flex;flex-direction:column;gap:var(--spacing-sm)}._progressHeader_b7mbf_63{display:flex;justify-content:space-between;align-items:center}._stepLabel_b7mbf_69{font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);color:var(--color-text-primary)}._stepCount_b7mbf_75{font-size:var(--font-size-sm);color:var(--color-secondary-50)}._stepDescription_b7mbf_80{color:var(--color-secondary-75);font-size:var(--font-size-md);margin:0}._fields_b7mbf_88{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}._fieldFull_b7mbf_95{width:100%}._fieldHalf_b7mbf_99{width:calc(50% - var(--spacing-md) / 2)}@media (max-width: 767px){._fieldHalf_b7mbf_99{width:100%}}._fieldThird_b7mbf_107{width:calc(33.333% - var(--spacing-md) * 2 / 3)}@media (max-width: 767px){._fieldThird_b7mbf_107{width:100%}}._actions_b7mbf_117{display:flex;align-items:center;gap:var(--spacing-md);padding-top:var(--spacing-sm)}._submitButton_b7mbf_124{margin-left:auto}._success_b7mbf_130{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-lg);padding:var(--spacing-xl);background-color:var(--color-states-success-bg);color:var(--color-states-success-text);border-radius:var(--radius-md)}._errorBanner_b7mbf_143{padding:var(--spacing-md);background-color:var(--color-states-error-bg);color:var(--color-states-error-text);border-radius:var(--radius-md);font-size:var(--font-size-sm)}

package/dist/main.d.ts

@@ -663,7 +663,7 @@ declare type FooterUtilityItem = {
 
 export declare function Form({ method, action, encType, target, noValidate, layout, spacing, maxWidth, fullWidth, className, style, children, onSubmit, onChange, onReset, ...restProps }: FormProps): JSX.Element;
 
-export declare function FormBlock({ id, heading, layout, steps, submitLabel, nextLabel, backLabel, successMessage, errorMessage, styleOptions, renderRichText, onSubmit, }: FormBlockProps_2): JSX.Element;
+export declare function FormBlock({ id, heading, layout, maxWidth, steps, submitLabel, nextLabel, backLabel, successMessage, errorMessage, styleOptions, renderRichText, onSubmit, }: FormBlockProps_2): JSX.Element;
 
 export { FormBlockProps }
 

package/dist/next/blocks/FormBlock/FormField.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../../core/components/Input/index.cjs");require("../../../core/components/Textarea/index.cjs");require("../../../core/components/Select/index.cjs");require("../../../core/components/Checkbox/index.cjs");require("../../../core/components/Radio/index.cjs");require("../../../core/components/Fieldset/index.cjs");require("../../../core/components/DatePicker/index.cjs");require("../../../core/components/Range/index.cjs");const e=require("../../../FormField-wfYSN1Vd.cjs");exports.FormField=e.FormField;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../../core/components/Input/index.cjs");require("../../../core/components/Textarea/index.cjs");require("../../../core/components/Select/index.cjs");require("../../../core/components/Checkbox/index.cjs");require("../../../core/components/Radio/index.cjs");require("../../../core/components/Fieldset/index.cjs");require("../../../core/components/DatePicker/index.cjs");require("../../../core/components/Range/index.cjs");const e=require("../../../FormField-fg7Q2UyZ.cjs");exports.FormField=e.FormField;

package/dist/next/blocks/FormBlock/FormField.mjs

@@ -7,7 +7,7 @@ import "../../../core/components/Radio/index.mjs";
 import "../../../core/components/Fieldset/index.mjs";
 import "../../../core/components/DatePicker/index.mjs";
 import "../../../core/components/Range/index.mjs";
-import { F as l } from "../../../FormField-BO1hKjUb.js";
+import { F as l } from "../../../FormField-Rqe3qF_t.js";
 export {
   l as FormField
 };

package/dist/next/blocks/FormBlock/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),U=require("../../../core/components/Form/index.cjs"),E=require("../../../index-hPJqlEOh.cjs"),V=require("../../../core/components/ProgressBar/index.cjs"),$=require("../../hooks/useStyleClasses.cjs"),r=require("../../../FormField-wfYSN1Vd.cjs"),_=require("./validate.cjs");function I(t,s){switch(s.type){case"SET_VALUE":return{...t,values:{...t.values,[s.name]:s.value},errors:{...t.errors,[s.name]:""}};case"SET_ERRORS":return{...t,errors:s.errors};case"CLEAR_ERROR":return{...t,errors:{...t.errors,[s.name]:""}};case"NEXT_STEP":return{...t,currentStep:t.currentStep+1,errors:{}};case"PREV_STEP":return{...t,currentStep:t.currentStep-1,errors:{}};case"SET_SUBMITTING":return{...t,isSubmitting:s.value};case"SET_RESULT":return{...t,submitResult:s.result,isSubmitting:!1};case"RESET":return{...t,currentStep:0,errors:{},submitResult:null,isSubmitting:!1};default:return t}}function A({id:t,heading:s,layout:f="vertical",steps:S,submitLabel:B="Submit",nextLabel:x="Next",backLabel:T="Back",successMessage:C="Thank you! Your submission has been received.",errorMessage:y="Something went wrong. Please try again.",styleOptions:R,renderRichText:n,onSubmit:v}){const j=$.useStyleClasses(R??{}),F=i.useMemo(()=>_.buildInitialValues(S),[]),[P,c]=i.useReducer(I,{values:F,errors:{},currentStep:0,isSubmitting:!1,submitResult:null}),{values:u,errors:h,currentStep:m,isSubmitting:b,submitResult:a}=P,p=S.length,k=p>1,N=m===p-1,q=(m+1)/p*100,o=S[m],L=i.useCallback((l,d)=>{c({type:"SET_VALUE",name:l,value:d})},[]),g=i.useCallback(()=>{const l=_.validateStep(o.fields,u);if(Object.keys(l).length>0){c({type:"SET_ERRORS",errors:l});return}c({type:"NEXT_STEP"})},[o.fields,u]),w=i.useCallback(()=>{c({type:"PREV_STEP"})},[]),O=i.useCallback(async()=>{const l=_.validateStep(o.fields,u);if(Object.keys(l).length>0){c({type:"SET_ERRORS",errors:l});return}c({type:"SET_SUBMITTING",value:!0});try{const d=await v(u);c({type:"SET_RESULT",result:d})}catch{c({type:"SET_RESULT",result:{success:!1,message:y}})}},[o.fields,u,v,y]);return a!=null&&a.success?e.jsx("section",{id:t,className:`${r.styles.formBlock} ${j}`,children:e.jsx("div",{className:r.styles.container,children:e.jsxs("div",{className:r.styles.success,children:[e.jsx("p",{children:a.message??C}),e.jsx(E.Button,{as:"button",variant:"secondary",onClick:()=>c({type:"RESET"}),children:"Submit another response"})]})})}):e.jsx("section",{id:t,className:`${r.styles.formBlock} ${j}`,children:e.jsxs("div",{className:r.styles.container,children:[((s==null?void 0:s.title)||(s==null?void 0:s.description))&&e.jsxs("div",{className:r.styles.heading,children:[s.eyebrow&&(n==null?void 0:n({blocks:s.eyebrow,className:r.styles.eyebrow})),s.title&&(n==null?void 0:n({blocks:s.title,className:r.styles.title})),s.description&&(n==null?void 0:n({blocks:s.description}))]}),k&&e.jsxs("div",{className:r.styles.progress,children:[e.jsxs("div",{className:r.styles.progressHeader,children:[e.jsx("span",{className:r.styles.stepLabel,children:o.title}),e.jsxs("span",{className:r.styles.stepCount,children:[m+1," / ",p]})]}),e.jsx(V.ProgressBar,{progress:q,variant:"primary",size:"sm",showLabel:!1})]}),o.description&&e.jsx("p",{className:r.styles.stepDescription,children:o.description}),a&&!a.success&&e.jsx("div",{className:r.styles.errorBanner,role:"alert",children:a.message??y}),e.jsxs(U.Form,{layout:f,noValidate:!0,onSubmit:l=>{l.preventDefault(),N?O():g()},children:[e.jsx("div",{className:r.styles.fields,children:o.fields.map(l=>e.jsx(r.FormField,{field:l,value:u[l.name.current],error:h[l.name.current],onChange:L},l._key))}),e.jsxs("div",{className:r.styles.actions,children:[k&&m>0&&e.jsx(E.Button,{as:"button",type:"button",variant:"secondary",onClick:w,disabled:b,children:T}),e.jsx(E.Button,{as:"button",type:"submit",variant:"primary",disabled:b,className:r.styles.submitButton,children:b?"Submitting…":N?B:x})]})]})]})})}exports.FormBlock=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),U=require("../../../core/components/Form/index.cjs"),E=require("../../../index-hPJqlEOh.cjs"),V=require("../../../core/components/ProgressBar/index.cjs"),W=require("../../hooks/useStyleClasses.cjs"),s=require("../../../FormField-fg7Q2UyZ.cjs"),_=require("./validate.cjs");function M(r,t){switch(t.type){case"SET_VALUE":return{...r,values:{...r.values,[t.name]:t.value},errors:{...r.errors,[t.name]:""}};case"SET_ERRORS":return{...r,errors:t.errors};case"CLEAR_ERROR":return{...r,errors:{...r.errors,[t.name]:""}};case"NEXT_STEP":return{...r,currentStep:r.currentStep+1,errors:{}};case"PREV_STEP":return{...r,currentStep:r.currentStep-1,errors:{}};case"SET_SUBMITTING":return{...r,isSubmitting:t.value};case"SET_RESULT":return{...r,submitResult:t.result,isSubmitting:!1};case"RESET":return{...r,currentStep:0,errors:{},submitResult:null,isSubmitting:!1};default:return r}}function A({id:r,heading:t,layout:x="vertical",maxWidth:B="md",steps:p,submitLabel:h="Submit",nextLabel:C="Next",backLabel:T="Back",successMessage:F="Thank you! Your submission has been received.",errorMessage:S="Something went wrong. Please try again.",styleOptions:R,renderRichText:n,onSubmit:v}){const N=W.useStyleClasses(R??{}),j={sm:s.styles.maxWidthSm,md:s.styles.maxWidthMd,lg:s.styles.maxWidthLg,full:s.styles.maxWidthFull}[B],g=u.useMemo(()=>_.buildInitialValues(p),[]),[L,c]=u.useReducer(M,{values:g,errors:{},currentStep:0,isSubmitting:!1,submitResult:null}),{values:i,errors:P,currentStep:m,isSubmitting:d,submitResult:o}=L,y=p.length,k=y>1,f=m===y-1,$=(m+1)/y*100,a=p[m],q=u.useCallback((l,b)=>{c({type:"SET_VALUE",name:l,value:b})},[]),w=u.useCallback(()=>{const l=_.validateStep(a.fields,i);if(Object.keys(l).length>0){c({type:"SET_ERRORS",errors:l});return}c({type:"NEXT_STEP"})},[a.fields,i]),I=u.useCallback(()=>{c({type:"PREV_STEP"})},[]),O=u.useCallback(async()=>{const l=_.validateStep(a.fields,i);if(Object.keys(l).length>0){c({type:"SET_ERRORS",errors:l});return}c({type:"SET_SUBMITTING",value:!0});try{const b=await v(i);c({type:"SET_RESULT",result:b})}catch{c({type:"SET_RESULT",result:{success:!1,message:S}})}},[a.fields,i,v,S]);return o!=null&&o.success?e.jsx("section",{id:r,className:`${s.styles.formBlock} ${N}`,children:e.jsx("div",{className:`${s.styles.formInner} ${j}`,children:e.jsx("div",{className:s.styles.container,children:e.jsxs("div",{className:s.styles.success,children:[e.jsx("p",{children:o.message??F}),e.jsx(E.Button,{as:"button",variant:"secondary",onClick:()=>c({type:"RESET"}),children:"Submit another response"})]})})})}):e.jsx("section",{id:r,className:`${s.styles.formBlock} ${N}`,children:e.jsx("div",{className:`${s.styles.formInner} ${j}`,children:e.jsxs("div",{className:s.styles.container,children:[((t==null?void 0:t.title)||(t==null?void 0:t.description))&&e.jsxs("div",{className:s.styles.heading,children:[t.eyebrow&&(n==null?void 0:n({blocks:t.eyebrow,className:s.styles.eyebrow})),t.title&&(n==null?void 0:n({blocks:t.title,className:s.styles.title})),t.description&&(n==null?void 0:n({blocks:t.description,className:s.styles.description}))]}),k&&e.jsxs("div",{className:s.styles.progress,children:[e.jsxs("div",{className:s.styles.progressHeader,children:[e.jsx("span",{className:s.styles.stepLabel,children:a.title}),e.jsxs("span",{className:s.styles.stepCount,children:[m+1," / ",y]})]}),e.jsx(V.ProgressBar,{progress:$,variant:"primary",size:"sm",showLabel:!1})]}),a.description&&e.jsx("p",{className:s.styles.stepDescription,children:a.description}),o&&!o.success&&e.jsx("div",{className:s.styles.errorBanner,role:"alert",children:o.message??S}),e.jsxs(U.Form,{layout:x,noValidate:!0,onSubmit:l=>{l.preventDefault(),f?O():w()},children:[e.jsx("div",{className:s.styles.fields,children:a.fields.map(l=>e.jsx(s.FormField,{field:l,value:i[l.name.current],error:P[l.name.current],onChange:q},l._key))}),e.jsxs("div",{className:s.styles.actions,children:[k&&m>0&&e.jsx(E.Button,{as:"button",type:"button",variant:"secondary",onClick:I,disabled:d,children:T}),e.jsx(E.Button,{as:"button",type:"submit",variant:"primary",disabled:d,className:s.styles.submitButton,children:d?"Submitting…":f?h:C})]})]})]})})})}exports.FormBlock=A;

package/dist/next/blocks/FormBlock/index.mjs

@@ -1,192 +1,199 @@
-import { jsx as l, jsxs as c } from "react/jsx-runtime";
-import { useMemo as $, useReducer as A, useCallback as S } from "react";
-import { Form as D } from "../../../core/components/Form/index.mjs";
-import { B as f } from "../../../index-paelIj6o.js";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { useMemo as A, useReducer as D, useCallback as S } from "react";
+import { Form as M } from "../../../core/components/Form/index.mjs";
+import { B as y } from "../../../index-paelIj6o.js";
 import { ProgressBar as G } from "../../../core/components/ProgressBar/index.mjs";
-import { useStyleClasses as M } from "../../hooks/useStyleClasses.mjs";
-import { s as r, F as X } from "../../../FormField-BO1hKjUb.js";
-import { buildInitialValues as z, validateStep as B } from "./validate.mjs";
-function H(e, s) {
-  switch (s.type) {
+import { useStyleClasses as X } from "../../hooks/useStyleClasses.mjs";
+import { s, F as z } from "../../../FormField-Rqe3qF_t.js";
+import { buildInitialValues as H, validateStep as B } from "./validate.mjs";
+function Y(r, e) {
+  switch (e.type) {
     case "SET_VALUE":
       return {
-        ...e,
-        values: { ...e.values, [s.name]: s.value },
-        errors: { ...e.errors, [s.name]: "" }
+        ...r,
+        values: { ...r.values, [e.name]: e.value },
+        errors: { ...r.errors, [e.name]: "" }
       };
     case "SET_ERRORS":
-      return { ...e, errors: s.errors };
+      return { ...r, errors: e.errors };
     case "CLEAR_ERROR":
       return {
-        ...e,
-        errors: { ...e.errors, [s.name]: "" }
+        ...r,
+        errors: { ...r.errors, [e.name]: "" }
       };
     case "NEXT_STEP":
-      return { ...e, currentStep: e.currentStep + 1, errors: {} };
+      return { ...r, currentStep: r.currentStep + 1, errors: {} };
     case "PREV_STEP":
-      return { ...e, currentStep: e.currentStep - 1, errors: {} };
+      return { ...r, currentStep: r.currentStep - 1, errors: {} };
     case "SET_SUBMITTING":
-      return { ...e, isSubmitting: s.value };
+      return { ...r, isSubmitting: e.value };
     case "SET_RESULT":
-      return { ...e, submitResult: s.result, isSubmitting: !1 };
+      return { ...r, submitResult: e.result, isSubmitting: !1 };
     case "RESET":
       return {
-        ...e,
+        ...r,
         currentStep: 0,
         errors: {},
         submitResult: null,
         isSubmitting: !1
       };
     default:
-      return e;
+      return r;
   }
 }
-function ss({
-  id: e,
-  heading: s,
+function rs({
+  id: r,
+  heading: e,
   layout: T = "vertical",
-  steps: E,
+  maxWidth: L = "md",
+  steps: d,
   submitLabel: R = "Submit",
-  nextLabel: L = "Next",
-  backLabel: h = "Back",
-  successMessage: w = "Thank you! Your submission has been received.",
-  errorMessage: b = "Something went wrong. Please try again.",
-  styleOptions: C,
+  nextLabel: C = "Next",
+  backLabel: w = "Back",
+  successMessage: P = "Thank you! Your submission has been received.",
+  errorMessage: E = "Something went wrong. Please try again.",
+  styleOptions: $,
   renderRichText: a,
   onSubmit: v
 }) {
-  const N = M(C ?? {}), P = $(
-    () => z(E),
+  const N = X($ ?? {}), _ = {
+    sm: s.maxWidthSm,
+    md: s.maxWidthMd,
+    lg: s.maxWidthLg,
+    full: s.maxWidthFull
+  }[L], g = A(
+    () => H(d),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  ), [U, o] = A(H, {
-    values: P,
+  ), [I, n] = D(Y, {
+    values: g,
     errors: {},
     currentStep: 0,
     isSubmitting: !1,
     submitResult: null
-  }), { values: u, errors: V, currentStep: m, isSubmitting: y, submitResult: i } = U, p = E.length, _ = p > 1, k = m === p - 1, O = (m + 1) / p * 100, n = E[m], g = S((t, d) => {
-    o({ type: "SET_VALUE", name: t, value: d });
-  }, []), F = S(() => {
-    const t = B(n.fields, u);
-    if (Object.keys(t).length > 0) {
-      o({ type: "SET_ERRORS", errors: t });
+  }), { values: u, errors: U, currentStep: m, isSubmitting: b, submitResult: i } = I, p = d.length, h = p > 1, k = m === p - 1, V = (m + 1) / p * 100, c = d[m], F = S((l, f) => {
+    n({ type: "SET_VALUE", name: l, value: f });
+  }, []), O = S(() => {
+    const l = B(c.fields, u);
+    if (Object.keys(l).length > 0) {
+      n({ type: "SET_ERRORS", errors: l });
       return;
     }
-    o({ type: "NEXT_STEP" });
-  }, [n.fields, u]), I = S(() => {
-    o({ type: "PREV_STEP" });
+    n({ type: "NEXT_STEP" });
+  }, [c.fields, u]), W = S(() => {
+    n({ type: "PREV_STEP" });
   }, []), j = S(async () => {
-    const t = B(n.fields, u);
-    if (Object.keys(t).length > 0) {
-      o({ type: "SET_ERRORS", errors: t });
+    const l = B(c.fields, u);
+    if (Object.keys(l).length > 0) {
+      n({ type: "SET_ERRORS", errors: l });
       return;
     }
-    o({ type: "SET_SUBMITTING", value: !0 });
+    n({ type: "SET_SUBMITTING", value: !0 });
     try {
-      const d = await v(u);
-      o({ type: "SET_RESULT", result: d });
+      const f = await v(u);
+      n({ type: "SET_RESULT", result: f });
     } catch {
-      o({
+      n({
         type: "SET_RESULT",
-        result: { success: !1, message: b }
+        result: { success: !1, message: E }
       });
     }
-  }, [n.fields, u, v, b]);
-  return i != null && i.success ? /* @__PURE__ */ l("section", { id: e, className: `${r.formBlock} ${N}`, children: /* @__PURE__ */ l("div", { className: r.container, children: /* @__PURE__ */ c("div", { className: r.success, children: [
-    /* @__PURE__ */ l("p", { children: i.message ?? w }),
-    /* @__PURE__ */ l(
-      f,
+  }, [c.fields, u, v, E]);
+  return i != null && i.success ? /* @__PURE__ */ t("section", { id: r, className: `${s.formBlock} ${N}`, children: /* @__PURE__ */ t("div", { className: `${s.formInner} ${_}`, children: /* @__PURE__ */ t("div", { className: s.container, children: /* @__PURE__ */ o("div", { className: s.success, children: [
+    /* @__PURE__ */ t("p", { children: i.message ?? P }),
+    /* @__PURE__ */ t(
+      y,
       {
         as: "button",
         variant: "secondary",
-        onClick: () => o({ type: "RESET" }),
+        onClick: () => n({ type: "RESET" }),
         children: "Submit another response"
       }
     )
-  ] }) }) }) : /* @__PURE__ */ l("section", { id: e, className: `${r.formBlock} ${N}`, children: /* @__PURE__ */ c("div", { className: r.container, children: [
-    ((s == null ? void 0 : s.title) || (s == null ? void 0 : s.description)) && /* @__PURE__ */ c("div", { className: r.heading, children: [
-      s.eyebrow && (a == null ? void 0 : a({
-        blocks: s.eyebrow,
-        className: r.eyebrow
+  ] }) }) }) }) : /* @__PURE__ */ t("section", { id: r, className: `${s.formBlock} ${N}`, children: /* @__PURE__ */ t("div", { className: `${s.formInner} ${_}`, children: /* @__PURE__ */ o("div", { className: s.container, children: [
+    ((e == null ? void 0 : e.title) || (e == null ? void 0 : e.description)) && /* @__PURE__ */ o("div", { className: s.heading, children: [
+      e.eyebrow && (a == null ? void 0 : a({
+        blocks: e.eyebrow,
+        className: s.eyebrow
       })),
-      s.title && (a == null ? void 0 : a({
-        blocks: s.title,
-        className: r.title
+      e.title && (a == null ? void 0 : a({
+        blocks: e.title,
+        className: s.title
       })),
-      s.description && (a == null ? void 0 : a({
-        blocks: s.description
+      e.description && (a == null ? void 0 : a({
+        blocks: e.description,
+        className: s.description
       }))
     ] }),
-    _ && /* @__PURE__ */ c("div", { className: r.progress, children: [
-      /* @__PURE__ */ c("div", { className: r.progressHeader, children: [
-        /* @__PURE__ */ l("span", { className: r.stepLabel, children: n.title }),
-        /* @__PURE__ */ c("span", { className: r.stepCount, children: [
+    h && /* @__PURE__ */ o("div", { className: s.progress, children: [
+      /* @__PURE__ */ o("div", { className: s.progressHeader, children: [
+        /* @__PURE__ */ t("span", { className: s.stepLabel, children: c.title }),
+        /* @__PURE__ */ o("span", { className: s.stepCount, children: [
           m + 1,
           " / ",
           p
         ] })
       ] }),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ t(
         G,
         {
-          progress: O,
+          progress: V,
           variant: "primary",
           size: "sm",
           showLabel: !1
         }
       )
     ] }),
-    n.description && /* @__PURE__ */ l("p", { className: r.stepDescription, children: n.description }),
-    i && !i.success && /* @__PURE__ */ l("div", { className: r.errorBanner, role: "alert", children: i.message ?? b }),
-    /* @__PURE__ */ c(
-      D,
+    c.description && /* @__PURE__ */ t("p", { className: s.stepDescription, children: c.description }),
+    i && !i.success && /* @__PURE__ */ t("div", { className: s.errorBanner, role: "alert", children: i.message ?? E }),
+    /* @__PURE__ */ o(
+      M,
       {
         layout: T,
         noValidate: !0,
-        onSubmit: (t) => {
-          t.preventDefault(), k ? j() : F();
+        onSubmit: (l) => {
+          l.preventDefault(), k ? j() : O();
         },
         children: [
-          /* @__PURE__ */ l("div", { className: r.fields, children: n.fields.map((t) => /* @__PURE__ */ l(
-            X,
+          /* @__PURE__ */ t("div", { className: s.fields, children: c.fields.map((l) => /* @__PURE__ */ t(
+            z,
             {
-              field: t,
-              value: u[t.name.current],
-              error: V[t.name.current],
-              onChange: g
+              field: l,
+              value: u[l.name.current],
+              error: U[l.name.current],
+              onChange: F
             },
-            t._key
+            l._key
           )) }),
-          /* @__PURE__ */ c("div", { className: r.actions, children: [
-            _ && m > 0 && /* @__PURE__ */ l(
-              f,
+          /* @__PURE__ */ o("div", { className: s.actions, children: [
+            h && m > 0 && /* @__PURE__ */ t(
+              y,
               {
                 as: "button",
                 type: "button",
                 variant: "secondary",
-                onClick: I,
-                disabled: y,
-                children: h
+                onClick: W,
+                disabled: b,
+                children: w
               }
             ),
-            /* @__PURE__ */ l(
-              f,
+            /* @__PURE__ */ t(
+              y,
               {
                 as: "button",
                 type: "submit",
                 variant: "primary",
-                disabled: y,
-                className: r.submitButton,
-                children: y ? "Submitting…" : k ? R : L
+                disabled: b,
+                className: s.submitButton,
+                children: b ? "Submitting…" : k ? R : C
               }
             )
           ] })
         ]
       }
     )
-  ] }) });
+  ] }) }) });
 }
 export {
-  ss as FormBlock
+  rs as FormBlock
 };

package/dist/next.d.ts

@@ -168,7 +168,7 @@ export declare function FeaturedDocumentsBlock({ heading, selectionMode, layout,
 
 export { FeaturedDocumentsBlockProps }
 
-export declare function FormBlock({ id, heading, layout, steps, submitLabel, nextLabel, backLabel, successMessage, errorMessage, styleOptions, renderRichText, onSubmit, }: FormBlockProps_2): JSX.Element;
+export declare function FormBlock({ id, heading, layout, maxWidth, steps, submitLabel, nextLabel, backLabel, successMessage, errorMessage, styleOptions, renderRichText, onSubmit, }: FormBlockProps_2): JSX.Element;
 
 export { FormBlockProps }