dynamic-mui 2.1.0 → 2.3.0

package/README.md

@@ -1,67 +1,385 @@
 # dynamic-mui
 
-A powerful, dynamic form builder and generator for React using Material UI.
+**Build rich, dynamic forms in React from a JSON schema — powered by Material UI.**
 
-## Features (v2.0.0)
-
-- **Dynamic Form Generation**: Render complex forms from JSON schema.
-- **Visual Form Builder**: Drag-and-drop interface to build forms visually.
-- **New Documentation Mode**: Integrated documentation sidebar with component details.
-- **Advanced Validation**: Mandatory field validation with visual indicators (`*` and red error states).
-- **Rich Component Library**: Includes TextField, Select, Date/Time Pickers, Checkbox, Radio, Switch, Signature, and more.
-- **JSON Editing**: Edit form schema directly or use the visual builder.
-- **Data Preview**: View current form data in real-time.
-
-## Installation
+Render complex, reactive forms without writing form code. Fields can show/hide,
+enable/disable, become required, compute their value, and drive each other's
+options — all declaratively from data. Comes with 45+ controls, a typed schema
+helper, an imperative API, i18n, and an optional visual builder / AI module.
 
 ```bash
+npm install dynamic-mui
+# peer dependencies (if you don't already have them)
 npm install @mui/material @emotion/react @emotion/styled
-npm install dynamic-mui --save
 ```
 
-## Usage
+---
+
+## Quick start
 
 ```tsx
-import { FormGenerator } from 'dynamic-mui';
+import { FormGenerator, FormData } from 'dynamic-mui';
 
-const formSchema = [
+const schema = [
   {
     type: 'textfield',
+    props: { id: 'name', MuiAttributes: { label: 'Full name', fullWidth: true } },
+    rules: { validation: [{ rule: 'mandatory', message: 'Name is required' }] },
+    layout: { row: 1, xs: 12, md: 6 },
+  },
+  {
+    type: 'select',
     props: {
-        id: 'name',
-        label: 'Full Name',
-        MuiAttributes: { fullWidth: true, variant: 'outlined' },
-        rules: {
-            validation: [{ rule: 'mandatory', message: 'Name is required' }]
-        }
+      id: 'role',
+      options: [{ value: 'dev', label: 'Developer' }, { value: 'design', label: 'Designer' }],
+      MuiBoxAttributes: { label: 'Role' },
     },
-    layout: { row: 1, xs: 12, md: 6 }
-  }
+    layout: { row: 1, xs: 12, md: 6 },
+  },
 ];
 
-export default function DynamicForm() {
-  const handleSubmit = (data) => {
-    console.log('Form Data:', data);
-  };
-
+export default function MyForm() {
   return (
     <FormGenerator
-      data={formSchema}
-      onSubmit={handleSubmit}
+      guid="my-form"
+      data={schema}
+      onSubmit={(values, errors) => {
+        if (errors.length === 0) console.log(FormData('my-form'));
+      }}
     />
   );
 }
 ```
 
-## Local Development (Playground)
+Every field is an object of `{ type, props, layout, rules?, ...engine }`.
+`layout` uses MUI Grid units (`row`, `xs`, `sm`, `md`, `lg`).
+
+---
+
+## Reading & writing form data
+
+Data lives in a store keyed by the form's `guid`:
+
+```ts
+import { FormData, ClearFormData, useForm } from 'dynamic-mui';
+
+FormData('my-form');        // { name: 'Ada', role: 'dev' }
+ClearFormData('my-form');   // reset one form (or all forms if called with no guid)
+
+const values = useForm('my-form'); // reactive hook inside a component
+```
+
+Prefill a form with `patch`:
+
+```tsx
+<FormGenerator guid="my-form" data={schema} patch={{ name: 'Ada', role: 'dev' }} />
+```
+
+Conditional fields, subforms, computed values, and `requiredWhen` all evaluate
+correctly from the **initial** `patch` — not just after the first edit.
+
+### Imperative API (`apiRef`)
+
+```tsx
+import { useRef } from 'react';
+import { FormGenerator, FormApi } from 'dynamic-mui';
+
+const api = useRef<FormApi>(null);
+
+<FormGenerator guid="my-form" data={schema} apiRef={api} />;
+
+api.current?.getValues();          // current values
+api.current?.setValues({ ... });   // patch values in
+api.current?.validate();           // boolean — runs validation, shows errors
+api.current?.getErrors();          // array of { id, rule, message }
+api.current?.reset();              // clear values
+api.current?.submit();             // trigger the submit flow
+
+// Dirty tracking
+api.current?.isDirty();            // changed since it loaded?
+api.current?.getInitialValues();   // the starting snapshot
+api.current?.resetToInitial();     // undo all edits
+api.current?.markPristine();       // adopt current values as the new baseline (after save)
+
+// Print & PDF (see below)
+api.current?.print({ title: 'Report' });
+await api.current?.exportPdf({ title: 'Report', filename: 'report.pdf' });
+```
+
+Set `warnOnUnsavedChanges` to prompt the user before they leave the page while
+the form is dirty.
+
+---
+
+## Review, read-only, print & PDF
+
+```tsx
+// Read-only: full layout, every control disabled
+<FormGenerator guid="f" data={schema} patch={values} readOnly />
+
+// Review: a clean label → value summary instead of inputs
+<FormGenerator guid="f" data={schema} patch={values} reviewMode />
+```
+
+The review summary resolves option labels (not raw values), Yes/No for booleans,
+joins multi-values, skips hidden and display-only fields, and follows matching
+subforms — ideal for a "confirm before submit" step.
+
+`print()` opens the browser dialog for that same summary (users can Save as PDF)
+— **no dependencies**. `exportPdf()` downloads a real PDF and needs the optional
+`pdfmake` package (lazy-loaded, never bundled into the core):
+
+```bash
+npm i pdfmake   # only if you use exportPdf()
+```
+
+---
+
+## Submit bar
+
+Render a visible (optionally sticky) submit button, fully configurable:
+
+```tsx
+<FormGenerator
+  guid="wo" data={schema}
+  stickySubmit                       // pins to the bottom of the scroll area
+  cancelLabel="Cancel" onCancel={...}
+  submitButton={{
+    label: 'Dispatch work order',
+    color: 'success',                // MUI palette name or any CSS color
+    gradient: ['#f59e0b', '#ef4444'],// optional gradient fill (overrides color)
+    icon: 'engineering',             // leading Material icon; also `endIcon`
+    variant: 'contained',            // contained | outlined | text
+    loadingLabel: 'Dispatching…',
+  }}
+  onSubmit={async (values, errors) => { if (!errors.length) await save(values); }}
+/>
+```
+
+If `onSubmit` returns a Promise, the button shows a **spinner automatically**
+until it settles (or drive it yourself with `submitButton.loading`).
+`submitLabel="Save"` is a shortcut for `submitButton={{ label: 'Save' }}`.
+
+---
+
+## Dynamic rule engine
+
+Add these keys to any field to make the form reactive. All conditions run
+against the live form values.
+
+| Key           | What it does                                              |
+| ------------- | --------------------------------------------------------- |
+| `visibleWhen` | Show the field only when a condition holds                |
+| `disabledWhen`| Disable the field when a condition holds                  |
+| `requiredWhen`| Make the field required when a condition holds            |
+| `formula`     | Compute the field's value from other fields               |
+| `dependsOn` + `optionsMap` | Swap a field's options based on another field |
+| `subforms`    | Reveal a group of fields for a matching parent value      |
+
+A condition is `{ field, op, value }` with operators `eq`, `neq`, `gt`, `gte`,
+`lt`, `lte`, `in`, `nin`, `contains`, `startsWith`, `endsWith`, `empty`,
+`notEmpty`, `truthy`, `falsy`, plus `all` / `any` / `none` groups.
+
+```ts
+// Show + require "reason" only when status is "other"
+{
+  type: 'textfield',
+  props: { id: 'reason', MuiAttributes: { label: 'Reason' } },
+  visibleWhen: { field: 'status', op: 'eq', value: 'other' },
+  requiredWhen: { field: 'status', op: 'eq', value: 'other' },
+  requiredMessage: 'Please tell us why',
+  layout: { row: 2, xs: 12 },
+}
+
+// Live total = qty * price
+{
+  type: 'computed',
+  props: { id: 'total', format: '0,0.00', MuiAttributes: { label: 'Total' } },
+  formula: 'qty * price',
+  layout: { row: 3, xs: 12 },
+}
+
+// State options depend on the selected country (one control, not many)
+{
+  type: 'select',
+  props: { id: 'state', MuiBoxAttributes: { label: 'State' } },
+  dependsOn: 'country',
+  optionsMap: {
+    us: [{ value: 'ca', label: 'California' }],
+    in: [{ value: 'ka', label: 'Karnataka' }],
+  },
+  layout: { row: 4, xs: 12 },
+}
+```
+
+`formula` supports `+ - * / %`, parentheses, unary minus, and
+`SUM/AVG/MIN/MAX/ROUND/ABS/FLOOR/CEIL`.
+
+---
 
-To run the local playground and test changes:
+## Validation
+
+Per-field rules live under `rules.validation`:
+
+```ts
+rules: { validation: [{ rule: 'mandatory', message: 'Required' }] }
+```
+
+Cross-field validators compare against another field:
+`equalsField`, `notEqualsField`, `gtField`, `gteField`, `ltField`, `lteField`.
+
+```ts
+// "confirm" must equal "password"
+rules: { validation: [{ rule: 'equalsField', field: 'password', message: 'Passwords must match' }] }
+```
+
+Turn on an accessible summary and auto-focus of the first error with
+`validationSummary`. Hidden (`visibleWhen`) fields are excluded from validation.
+
+---
+
+## Typed schema (`defineForm`)
+
+Get full TypeScript autocompletion and compile-time checks for your schema:
+
+```ts
+import { defineForm, FormGenerator } from 'dynamic-mui';
+
+const schema = defineForm([
+  { type: 'textfield', props: { id: 'email', MuiAttributes: { label: 'Email' } }, layout: { row: 1, xs: 12 } },
+]);
+
+<FormGenerator guid="typed" data={schema} />;
+```
+
+---
+
+## Extensibility & DX
+
+- **Custom controls** — register your own field types; they get the same
+  `ControlProps` as built-ins and participate fully in the engine:
+  ```ts
+  import { registerControl } from 'dynamic-mui';
+  registerControl('color-swatch', ({ attributes, onChange }) => /* your component */);
+  // then: { type: 'color-swatch', props: { id: 'brand' } }
+  ```
+- **Zod / Yup validation** — validate the whole form against an existing schema
+  (`zod`/`yup` are never bundled — the resolvers duck-type the object you pass):
+  ```ts
+  import { zodResolver } from 'dynamic-mui';
+  <FormGenerator data={fields} resolver={zodResolver(z.object({ email: z.string().email() }))} />
+  ```
+- **Async / remote validation** — per-field server checks (debounced, race-safe,
+  gates submit): `asyncValidators={{ username: async (v) => taken(v) ? 'Taken' : null }}`.
+- **Typed values** — `FormApi<T>`, `FormData<T>(guid)`, `useForm<T>(guid)` give
+  autocompleted, type-checked values.
+
+### Headless engine — `useFormEngine`
+
+The whole dynamic engine (rules, validation, dynamic options, subforms) with **no
+UI** — render your own components:
+
+```tsx
+import { useFormEngine, zodResolver } from 'dynamic-mui';
+
+function MyForm() {
+  const form = useFormEngine(schema, { resolver: zodResolver(mySchema) });
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); form.submit(save); }}>
+      {form.visibleFields.map((f) => (
+        <MyInput key={f.id} value={f.value} required={f.required}
+          disabled={f.disabled} options={f.options} error={f.error}
+          onChange={(v) => form.setValue(f.id, v)} />
+      ))}
+    </form>
+  );
+}
+```
+
+Exposes `values`, `errors`, `fields`/`visibleFields`, `setValue`/`setValues`,
+`validate()`, `submit(onValid)`, `isValid`, `isDirty`, `reset()`, `getFieldState(id)`.
+
+### Schema linter — `validateSchema`
+
+Catch config mistakes before runtime (great in a test or build step):
+
+```ts
+import { validateSchema } from 'dynamic-mui';
+
+const issues = validateSchema(mySchema); // SchemaIssue[]; [] = clean
+// flags duplicate ids, dependsOn → missing field, orphan optionsMap,
+// rule/cross-field references to unknown fields, subform conditions
+// that aren't real options, …
+if (issues.some((i) => i.level === 'error')) throw new Error('Bad form schema');
+```
+
+---
+
+## Internationalisation
+
+Override the built-in strings:
+
+```tsx
+<FormGenerator guid="fr" data={schema}
+  messages={{ required: 'Champ obligatoire', errorSummary: '{n} champ(s) à corriger' }} />
+```
+
+Or plug in **any** i18n system with a `translate` function — it localizes every
+user-facing string (labels, placeholders, helper text, option labels, validation
+messages, typography, submit/cancel labels), keeping the schema in one language:
+
+```tsx
+// works with i18next, react-intl, or a plain dictionary
+const t = (s) => dictionary[s] ?? s;
+
+<FormGenerator guid="form" data={schema} translate={t} />
+```
+
+Switching the language re-renders the form translated while preserving values.
+
+---
+
+## Controls
+
+Text & numbers · password · OTP · phone / international phone · currency ·
+select · async autocomplete · autocomplete · cascade select · chip select ·
+radio · checkbox · switch · toggle buttons · slider · rating · NPS · stepper ·
+date / time / date-time / date-range pickers · file upload · signature ·
+color picker · markdown & rich-text editors · tags · key-value · matrix ·
+editable & data tables · line items · address · geo / location · consent ·
+alert · divider · typography · charts (bar / line / pie / mixed), and more.
+
+Each control is configured through `props` (its `MuiAttributes` /
+`MuiBoxAttributes` map straight onto the underlying MUI component).
+
+### Theming
+
+Controls render under **your** MUI theme. Date/time pickers automatically match
+the size and variant of your text fields, so a picker lines up with the fields
+beside it.
+
+---
+
+## AI module (optional)
+
+`dynamic-mui/ai` provides AI-assisted building blocks (generate a form from a
+prompt, autofill, text assist, schema review) that talk to **your** proxy/relay
+so your provider key stays server-side. See [`examples/`](./examples) for a
+ready-to-deploy proxy (including an AWS Lambda BYOK relay).
+
+---
+
+## Playground
+
+```bash
+npm install
+npm run dev        # visual builder + live demo gallery
+```
 
-1. `npm install`
-2. `npm run dev`
-3. Open `http://localhost:5173` (or the port shown in terminal).
+Build forms visually, browse every control in multiple configurations, explore
+real-world example forms, view the generated JSON, and copy it into your app.
 
-The playground allows you to build forms visually, view the generated JSON, and test validation.
+---
 
 ## License
 

package/dist/accordion-DqBdGRim.mjs

@@ -0,0 +1,23 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import m from "react";
+import { Accordion as s, AccordionSummary as l, Typography as p, Icon as u, AccordionDetails as f } from "@mui/material";
+import { F as A } from "./index-CddjLTWF.mjs";
+import { v as h } from "./v4-BysszJq8.mjs";
+function j({ attributes: r = {}, patch: c, onChange: i }) {
+  const { MuiAttributes: n = {}, label: e = "Accordion", subFields: t = [] } = r, d = m.useMemo(() => h(), []);
+  return /* @__PURE__ */ a(s, { ...n, children: [
+    /* @__PURE__ */ o(l, { expandIcon: /* @__PURE__ */ o(u, { children: "expand_more" }), children: /* @__PURE__ */ o(p, { children: e }) }),
+    /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(
+      A,
+      {
+        guid: d,
+        data: t,
+        patch: c,
+        onChange: i
+      }
+    ) })
+  ] });
+}
+export {
+  j as default
+};

package/dist/accordion-lvbD_BpX.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),r=require("@mui/material"),a=require("./index-D08GIfqF.js"),l=require("./v4-CqdK_b8Y.js");function x({attributes:n={},patch:o,onChange:c}){const{MuiAttributes:i={},label:t="Accordion",subFields:s=[]}=n,d=u.useMemo(()=>l.v4(),[]);return e.jsxs(r.Accordion,{...i,children:[e.jsx(r.AccordionSummary,{expandIcon:e.jsx(r.Icon,{children:"expand_more"}),children:e.jsx(r.Typography,{children:t})}),e.jsx(r.AccordionDetails,{children:e.jsx(a.FormGenerator,{guid:d,data:s,patch:o,onChange:c})})]})}exports.default=x;

package/dist/addressfield-CGX3UppE.mjs

@@ -0,0 +1,152 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import S, { useCallback as A } from "react";
+import r from "@mui/material/Grid";
+import i from "@mui/material/TextField";
+import g from "@mui/material/MenuItem";
+import { u as E, m as P, a as I } from "./index-CddjLTWF.mjs";
+const N = [
+  { value: "US", label: "United States" },
+  { value: "CA", label: "Canada" },
+  { value: "MX", label: "Mexico" },
+  { value: "GB", label: "United Kingdom" },
+  { value: "IE", label: "Ireland" },
+  { value: "FR", label: "France" },
+  { value: "DE", label: "Germany" },
+  { value: "ES", label: "Spain" },
+  { value: "IT", label: "Italy" },
+  { value: "NL", label: "Netherlands" },
+  { value: "BE", label: "Belgium" },
+  { value: "CH", label: "Switzerland" },
+  { value: "SE", label: "Sweden" },
+  { value: "NO", label: "Norway" },
+  { value: "DK", label: "Denmark" },
+  { value: "PT", label: "Portugal" },
+  { value: "AU", label: "Australia" },
+  { value: "NZ", label: "New Zealand" },
+  { value: "IN", label: "India" },
+  { value: "CN", label: "China" },
+  { value: "JP", label: "Japan" },
+  { value: "SG", label: "Singapore" },
+  { value: "AE", label: "United Arab Emirates" },
+  { value: "BR", label: "Brazil" },
+  { value: "ZA", label: "South Africa" }
+], U = {
+  street1: "Street address",
+  street2: "Apt, suite, etc. (optional)",
+  city: "City",
+  state: "State / Province",
+  postalCode: "Postal code",
+  country: "Country"
+};
+function D({ attributes: n = {}, rules: h = {}, onChange: c }) {
+  const {
+    id: b = "",
+    MuiAttributes: v = {},
+    countries: o,
+    labels: y = {}
+  } = n, x = Array.isArray(o) && o.length ? o : N, l = { ...U, ...y }, d = h?.validation?.some(
+    (t) => t.rule === "mandatory" || t.rule === "mandatoryselect"
+  ) || !1, [a, p] = S.useState(() => ({
+    street1: "",
+    street2: "",
+    city: "",
+    state: "",
+    postalCode: "",
+    country: "",
+    ...n?.value || {}
+  }));
+  E(() => {
+    p({
+      street1: "",
+      street2: "",
+      city: "",
+      state: "",
+      postalCode: "",
+      country: "",
+      ...n?.value || {}
+    });
+  }, [n?.value]);
+  const s = A(
+    (t) => (C) => {
+      const m = { ...a, [t]: C.target.value };
+      p(m), c?.({ id: b, value: m });
+    },
+    [a, b, c]
+  ), u = P(I, v?.sx);
+  return /* @__PURE__ */ f(r, { container: !0, spacing: 2, ...v, children: [
+    /* @__PURE__ */ e(r, { size: { xs: 12 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        fullWidth: !0,
+        label: l.street1,
+        required: d,
+        value: a.street1 || "",
+        onChange: s("street1"),
+        inputProps: { "aria-label": l.street1 },
+        sx: u
+      }
+    ) }),
+    /* @__PURE__ */ e(r, { size: { xs: 12 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        fullWidth: !0,
+        label: l.street2,
+        value: a.street2 || "",
+        onChange: s("street2"),
+        inputProps: { "aria-label": l.street2 },
+        sx: u
+      }
+    ) }),
+    /* @__PURE__ */ e(r, { size: { xs: 12, sm: 6, md: 5 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        fullWidth: !0,
+        label: l.city,
+        required: d,
+        value: a.city || "",
+        onChange: s("city"),
+        inputProps: { "aria-label": l.city },
+        sx: u
+      }
+    ) }),
+    /* @__PURE__ */ e(r, { size: { xs: 12, sm: 6, md: 4 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        fullWidth: !0,
+        label: l.state,
+        value: a.state || "",
+        onChange: s("state"),
+        inputProps: { "aria-label": l.state },
+        sx: u
+      }
+    ) }),
+    /* @__PURE__ */ e(r, { size: { xs: 12, sm: 6, md: 3 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        fullWidth: !0,
+        label: l.postalCode,
+        value: a.postalCode || "",
+        onChange: s("postalCode"),
+        inputProps: { "aria-label": l.postalCode },
+        sx: u
+      }
+    ) }),
+    /* @__PURE__ */ e(r, { size: { xs: 12, sm: 6 }, children: /* @__PURE__ */ e(
+      i,
+      {
+        select: !0,
+        fullWidth: !0,
+        label: l.country,
+        required: d,
+        value: a.country || "",
+        onChange: s("country"),
+        SelectProps: { inputProps: { "aria-label": l.country } },
+        sx: u,
+        children: x.map((t) => /* @__PURE__ */ e(g, { value: t.value, children: t.label }, t.value))
+      }
+    ) })
+  ] });
+}
+export {
+  D as default
+};

package/dist/addressfield-DDG15fqJ.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),s=require("@mui/material/Grid"),n=require("@mui/material/TextField"),A=require("@mui/material/MenuItem"),c=require("./index-D08GIfqF.js"),g=[{value:"US",label:"United States"},{value:"CA",label:"Canada"},{value:"MX",label:"Mexico"},{value:"GB",label:"United Kingdom"},{value:"IE",label:"Ireland"},{value:"FR",label:"France"},{value:"DE",label:"Germany"},{value:"ES",label:"Spain"},{value:"IT",label:"Italy"},{value:"NL",label:"Netherlands"},{value:"BE",label:"Belgium"},{value:"CH",label:"Switzerland"},{value:"SE",label:"Sweden"},{value:"NO",label:"Norway"},{value:"DK",label:"Denmark"},{value:"PT",label:"Portugal"},{value:"AU",label:"Australia"},{value:"NZ",label:"New Zealand"},{value:"IN",label:"India"},{value:"CN",label:"China"},{value:"JP",label:"Japan"},{value:"SG",label:"Singapore"},{value:"AE",label:"United Arab Emirates"},{value:"BR",label:"Brazil"},{value:"ZA",label:"South Africa"}],f={street1:"Street address",street2:"Apt, suite, etc. (optional)",city:"City",state:"State / Province",postalCode:"Postal code",country:"Country"};function P({attributes:i={},rules:m={},onChange:b}){const{id:v="",MuiAttributes:x={},countries:o,labels:C={}}=i,S=Array.isArray(o)&&o.length?o:g,l={...f,...C},d=m?.validation?.some(t=>t.rule==="mandatory"||t.rule==="mandatoryselect")||!1,[a,p]=h.useState(()=>({street1:"",street2:"",city:"",state:"",postalCode:"",country:"",...i?.value||{}}));c.useUpdateEffect(()=>{p({street1:"",street2:"",city:"",state:"",postalCode:"",country:"",...i?.value||{}})},[i?.value]);const r=h.useCallback(t=>j=>{const y={...a,[t]:j.target.value};p(y),b?.({id:v,value:y})},[a,v,b]),u=c.mergeSx(c.premiumInputSx,x?.sx);return e.jsxs(s,{container:!0,spacing:2,...x,children:[e.jsx(s,{size:{xs:12},children:e.jsx(n,{fullWidth:!0,label:l.street1,required:d,value:a.street1||"",onChange:r("street1"),inputProps:{"aria-label":l.street1},sx:u})}),e.jsx(s,{size:{xs:12},children:e.jsx(n,{fullWidth:!0,label:l.street2,value:a.street2||"",onChange:r("street2"),inputProps:{"aria-label":l.street2},sx:u})}),e.jsx(s,{size:{xs:12,sm:6,md:5},children:e.jsx(n,{fullWidth:!0,label:l.city,required:d,value:a.city||"",onChange:r("city"),inputProps:{"aria-label":l.city},sx:u})}),e.jsx(s,{size:{xs:12,sm:6,md:4},children:e.jsx(n,{fullWidth:!0,label:l.state,value:a.state||"",onChange:r("state"),inputProps:{"aria-label":l.state},sx:u})}),e.jsx(s,{size:{xs:12,sm:6,md:3},children:e.jsx(n,{fullWidth:!0,label:l.postalCode,value:a.postalCode||"",onChange:r("postalCode"),inputProps:{"aria-label":l.postalCode},sx:u})}),e.jsx(s,{size:{xs:12,sm:6},children:e.jsx(n,{select:!0,fullWidth:!0,label:l.country,required:d,value:a.country||"",onChange:r("country"),SelectProps:{inputProps:{"aria-label":l.country}},sx:u,children:S.map(t=>e.jsx(A,{value:t.value,children:t.label},t.value))})})]})}exports.default=P;