@m4l/components 9.63.0 → 9.64.0

package/components/DynamicForm/subcomponents/DynamicFormContent/DynamicFormContent.js

@@ -1,147 +1,82 @@
-import { jsx as r, jsxs as b } from "@emotion/react/jsx-runtime";
-import { forwardRef as O, useMemo as E, memo as g } from "react";
-import N from "clsx";
-import { useModuleDictionary as W, useEnvironment as L } from "@m4l/core";
-import { NotificationCheckCircleFill as A, NotificationWarningFill as T } from "@m4l/icons";
-import { Icon as H } from "@m4l/base";
-import { TEST_PROP_ID as z } from "../../../../test/constants_no_mock.js";
-import { ActionsContainer as G } from "../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
-import { ActionFormIntro as P } from "../../../CommonActions/components/ActionFormIntro/ActionFormIntro.js";
-import { PropertyValue as k } from "../../../PropertyValue/PropertyValue.js";
-import { useDynamicFormConditionals as x } from "../../hooks/useDynamicFormConditionals/useDynamicFormConditionals.js";
-import { resolveFieldRenderHelperMessage as V } from "../../helpers/resolveFieldRenderHelperMessage/resolveFieldRenderHelperMessage.js";
-import { resolveFieldInputLabel as j } from "../../helpers/resolveFieldInputLabel/resolveFieldInputLabel.js";
-import { resolveAdaptiveFieldLayout as B } from "../../helpers/resolveAdaptiveFieldLayout/resolveAdaptiveFieldLayout.js";
-import { DYNAMIC_FORM_DICTIONARY as R } from "../../dictionary.js";
-import { DYNAMIC_FORM_CLASSES as f } from "../../constants.js";
-import { DynamicFormSubmitFeedbackStyled as U, DynamicFormContentRootStyled as Y, DynamicFormFormHeaderStyled as q, DynamicFormFormTitleStyled as K, DynamicFormFormDescriptionStyled as $, DynamicFormFieldsFlowStyled as J, DynamicFormActionsRowStyled as Q, DynamicFormFieldWrapperStyled as X } from "../../slots/DynamicFormSlots.js";
-import { resolveFormHeader as Z } from "../../helpers/resolveFormHeader/resolveFormHeader.js";
-import { resolveFieldTypeComponentProps as ee, resolveFieldMandatory as oe } from "../../helpers/resolveFieldContractAliases/resolveFieldContractAliases.js";
-import { resolveFieldComponent as re } from "../../helpers/resolveFieldComponent/resolveFieldComponent.js";
-import { Chip as te } from "../../../Chip/Chip.js";
-const ie = /* @__PURE__ */ new Set([
-  "RHFCheckableList"
-]);
-function ae(p) {
-  const t = p.fieldType?.componentId;
-  return t && ie.has(t) ? "verticalGrow" : "default";
-}
-function le(p) {
-  const t = [];
-  let e = [];
-  return p.forEach((o) => {
-    const l = ae(o);
-    if (l === "verticalGrow") {
-      e.length > 0 && (t.push({
-        layout: "default",
-        fields: e
-      }), e = []), t.push({
-        layout: l,
-        fields: [o]
-      });
-      return;
-    }
-    e.push(o);
-  }), e.length > 0 && t.push({
-    layout: "default",
-    fields: e
-  }), t;
-}
-const C = g(function(t) {
-  const {
-    field: e,
-    currentSize: o,
-    fieldWrapperClassName: l,
-    fieldFlow: D,
-    layout: y,
-    readOnly: h = !1
-  } = t, { getLabel: F } = W(), { host_api_remote: S } = L(), n = y === "verticalGrow";
-  if (typeof e.name != "string" || e.name.trim() === "")
-    return null;
-  const s = h || ee(e.fieldType)?.readOnly === !0, i = V(
-    e,
-    F
-  ), c = j(e, F), v = oe(e), m = B({
-    hasHelperMessage: !s && !!i,
-    label: c,
-    mandatory: !s && v,
-    requestedSemanticWidth: e.metadata?.semanticWidth,
-    size: o
-  }), d = re(e, {
-    size: o,
-    getLabel: F,
-    hostApiRemote: S,
-    readOnly: s,
-    suppressLabel: !0
-  });
-  return d ? /* @__PURE__ */ r(
-    X,
-    {
-      ownerState: {
-        readOnly: s,
-        fieldFlow: D,
-        gridColumnSpan: m.gridColumnSpan,
-        layout: y,
-        isFullWidth: m.isFullWidth,
-        semanticWidth: e.metadata?.semanticWidth,
-        wrapperWidth: m.wrapperWidth
-      },
-      className: N(
-        l,
-        f.fieldWrapper
-      ),
-      children: /* @__PURE__ */ r(
-        k,
-        {
-          controlWidth: m.controlWidth,
-          labelOverflow: "visible",
-          labelWidth: m.labelWidth,
-          property: c,
-          value: d,
-          isForm: !0,
-          ...!s && {
-            mandatory: v,
-            helperMessage: i
-          },
-          valueHeight: n ? "100%" : void 0
-        }
-      )
-    }
-  ) : null;
-});
-C.displayName = "DynamicFormFieldRow";
-const ne = O((p, t) => {
+import { jsx as o, jsxs as N } from "@emotion/react/jsx-runtime";
+import { forwardRef as H, useMemo as b } from "react";
+import k from "clsx";
+import { useModuleDictionary as U } from "@m4l/core";
+import { NotificationCheckCircleFill as B, NotificationWarningFill as G } from "@m4l/icons";
+import { Icon as P } from "@m4l/base";
+import { TEST_PROP_ID as W } from "../../../../test/constants_no_mock.js";
+import { ActionsContainer as Y } from "../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { ActionFormIntro as j } from "../../../CommonActions/components/ActionFormIntro/ActionFormIntro.js";
+import { useDynamicFormConditionals as L } from "../../hooks/useDynamicFormConditionals/useDynamicFormConditionals.js";
+import { DYNAMIC_FORM_DICTIONARY as f } from "../../dictionary.js";
+import { DYNAMIC_FORM_CLASSES as l } from "../../constants.js";
+import { DynamicFormFieldsFlow as V } from "../DynamicFormFieldsFlow/DynamicFormFieldsFlow.js";
+import { DynamicFormSection as q } from "../DynamicFormSection/DynamicFormSection.js";
+import { DynamicFormSectionsGridStyled as J, DynamicFormSubmitFeedbackStyled as K, DynamicFormContentRootStyled as Q, DynamicFormFormHeaderStyled as X, DynamicFormFormTitleStyled as Z, DynamicFormFormDescriptionStyled as $, DynamicFormUngroupedCardStyled as oo, DynamicFormActionsRowStyled as eo } from "../../slots/DynamicFormSlots.js";
+import { resolveFormHeader as ro } from "../../helpers/resolveFormHeader/resolveFormHeader.js";
+import { resolveFormSections as to } from "../../helpers/resolveFormSections/resolveFormSections.js";
+import { Chip as g } from "../../../Chip/Chip.js";
+const io = H((_, E) => {
   const {
-    data: e,
-    currentSize: o,
-    fieldWrapperClassName: l,
-    dataTestId: D,
-    dataMeta: y,
-    coupled: h = !1,
-    actionFormIntroProps: F,
-    renderActions: S,
-    readOnly: n = !1,
-    suppressFormHeader: s = !0,
+    data: s,
+    contractIssues: R = [],
+    currentSize: r,
+    fieldWrapperClassName: F,
+    dataTestId: T,
+    dataMeta: u,
+    coupled: S = !1,
+    actionFormIntroProps: A,
+    renderActions: y,
+    readOnly: t = !1,
+    suppressFormHeader: M = !0,
     submitFeedbackStatus: i,
-    fieldFlow: c = "responsiveWrap"
-  } = p, { getLabel: v } = W(), { visibleFields: m } = x(e), d = s ? null : Z(e.form), I = le(m), w = E(
+    fieldFlow: n = "responsiveWrap"
+  } = _, { getLabel: h } = U(), { visibleFields: C } = L(s), c = M ? null : ro(s.form), a = b(
+    () => to(s.fields ?? []),
+    [s.fields]
+  ), v = new Set(C.map((e) => e.id)), D = C.filter((e) => !a.ownerByFieldId.has(e.id)), m = b(
     () => ({
-      size: o,
-      readOnly: n,
-      fieldFlow: c
+      size: r,
+      readOnly: t,
+      fieldFlow: n
     }),
-    [o, c, n]
-  ), M = !h && i ? /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(
-    te,
+    [r, n, t]
+  ), d = a.sections.map(({ field: e, fields: p }) => ({
+    section: e,
+    fields: p.filter((x) => v.has(x.id))
+  })).filter(({ fields: e }) => e.length > 0), O = d.length > 0 ? /* @__PURE__ */ o(J, { ownerState: m, children: d.map(({ section: e, fields: p }) => /* @__PURE__ */ o(
+    q,
+    {
+      section: e,
+      fields: p,
+      currentSize: r,
+      fieldWrapperClassName: F,
+      fieldFlow: n,
+      readOnly: t,
+      ownerState: m
+    },
+    e.id
+  )) }) : null, I = /* @__PURE__ */ o(
+    V,
+    {
+      fields: D,
+      currentSize: r,
+      fieldWrapperClassName: F,
+      fieldFlow: n,
+      readOnly: t,
+      ownerState: m
+    }
+  ), w = R.length > 0 || a.issues.length > 0, z = !S && i ? /* @__PURE__ */ o(K, { children: /* @__PURE__ */ o(
+    g,
     {
-      size: o,
-      label: v(
-        i === "success" ? R.SUBMIT_SUCCESS_MESSAGE : R.SUBMIT_ERROR_MESSAGE
+      size: r,
+      label: h(
+        i === "success" ? f.SUBMIT_SUCCESS_MESSAGE : f.SUBMIT_ERROR_MESSAGE
       ),
-      startIcon: /* @__PURE__ */ r(
-        H,
+      startIcon: /* @__PURE__ */ o(
+        P,
         {
-          src: i === "success" ? /* @__PURE__ */ r(A, {}) : /* @__PURE__ */ r(T, {}),
+          src: i === "success" ? /* @__PURE__ */ o(B, {}) : /* @__PURE__ */ o(G, {}),
           color: i === "success" ? "chips.success.contained.color" : "chips.error.contained.color"
         }
       ),
@@ -149,96 +84,69 @@ const ne = O((p, t) => {
       opacity: !0
     }
   ) }) : null;
-  return /* @__PURE__ */ b(
-    Y,
+  return /* @__PURE__ */ N(
+    Q,
     {
-      ref: t,
-      ownerState: w,
-      className: N(f.contentRoot),
-      ...typeof y == "string" ? { "data-meta": y } : {},
-      ...process.env.NODE_ENV !== "production" ? { [z]: D } : {},
+      ref: E,
+      ownerState: m,
+      className: k(l.contentRoot),
+      ...typeof u == "string" ? { "data-meta": u } : {},
+      ...process.env.NODE_ENV !== "production" ? { [W]: T } : {},
       children: [
-        d?.title && /* @__PURE__ */ b(
-          q,
+        c?.title && /* @__PURE__ */ N(
+          X,
           {
-            className: f.formHeader,
+            className: l.formHeader,
             children: [
-              /* @__PURE__ */ r(
-                K,
+              /* @__PURE__ */ o(
+                Z,
                 {
-                  className: f.formTitle,
+                  className: l.formTitle,
                   component: "h2",
-                  size: o,
+                  size: r,
                   variant: "paragraphDens",
-                  children: d.title
+                  children: c.title
                 }
               ),
-              d.description && /* @__PURE__ */ r(
+              c.description && /* @__PURE__ */ o(
                 $,
                 {
-                  className: f.formDescription,
+                  className: l.formDescription,
                   color: "text.secondary",
                   component: "p",
-                  size: o,
+                  size: r,
                   variant: "bodyStandard",
-                  children: d.description
+                  children: c.description
                 }
               )
             ]
           }
         ),
-        M,
-        I.map((u) => {
-          if (u.layout === "verticalGrow") {
-            const a = u.fields[0];
-            return a ? /* @__PURE__ */ r(
-              C,
-              {
-                field: a,
-                currentSize: o,
-                fieldWrapperClassName: l,
-                fieldFlow: c,
-                layout: u.layout,
-                readOnly: n
-              },
-              a.id
-            ) : null;
+        z,
+        w && /* @__PURE__ */ o(
+          g,
+          {
+            size: r,
+            label: h(f.SECTION_CONTRACT_NOTICE),
+            color: "warning",
+            opacity: !0
           }
-          const _ = u.fields.map((a) => a.id).join("-");
-          return /* @__PURE__ */ r(
-            J,
-            {
-              ownerState: w,
-              className: f.fieldsFlow,
-              children: u.fields.map((a) => /* @__PURE__ */ r(
-                C,
-                {
-                  field: a,
-                  currentSize: o,
-                  fieldWrapperClassName: l,
-                  fieldFlow: c,
-                  layout: u.layout,
-                  readOnly: n
-                },
-                a.id
-              ))
-            },
-            `flow-${_}`
-          );
-        }),
-        !h && !n && /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(G, { children: S ? S() : /* @__PURE__ */ r(
-          P,
+        ),
+        O,
+        d.length > 0 ? D.length > 0 && /* @__PURE__ */ o(oo, { children: I }) : I,
+        !S && !t && /* @__PURE__ */ o(eo, { children: /* @__PURE__ */ o(Y, { children: y ? y() : /* @__PURE__ */ o(
+          j,
           {
-            size: o,
+            size: r,
             color: "default",
-            ...F
+            ...A
           }
         ) }) })
       ]
     }
   );
 });
-ne.displayName = "DynamicFormContent";
+io.displayName = "DynamicFormContent";
 export {
-  ne as DynamicFormContent
+  io as DynamicFormContent
 };

package/components/DynamicForm/subcomponents/DynamicFormFieldsFlow/DynamicFormFieldsFlow.d.ts

@@ -0,0 +1,4 @@
+import { DynamicFormFieldsFlowProps } from './types';
+/** Render one independently measured flow without creating another form provider. */
+export declare function DynamicFormFieldsFlow(props: DynamicFormFieldsFlowProps): (import("@emotion/react/jsx-runtime").JSX.Element | null)[];
+//# sourceMappingURL=DynamicFormFieldsFlow.d.ts.map

package/components/DynamicForm/subcomponents/DynamicFormFieldsFlow/DynamicFormFieldsFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicFormFieldsFlow.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DynamicForm/subcomponents/DynamicFormFieldsFlow/DynamicFormFieldsFlow.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAGV,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAmIjB,qFAAqF;AACrF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,+DAmDtE"}

package/components/DynamicForm/subcomponents/DynamicFormFieldsFlow/DynamicFormFieldsFlow.js

@@ -0,0 +1,140 @@
+import { jsx as m } from "@emotion/react/jsx-runtime";
+import { memo as W } from "react";
+import L from "clsx";
+import { useModuleDictionary as b, useEnvironment as g } from "@m4l/core";
+import { PropertyValue as C } from "../../../PropertyValue/PropertyValue.js";
+import { resolveFieldRenderHelperMessage as D } from "../../helpers/resolveFieldRenderHelperMessage/resolveFieldRenderHelperMessage.js";
+import { resolveFieldInputLabel as O } from "../../helpers/resolveFieldInputLabel/resolveFieldInputLabel.js";
+import { resolveAdaptiveFieldLayout as R } from "../../helpers/resolveAdaptiveFieldLayout/resolveAdaptiveFieldLayout.js";
+import { DYNAMIC_FORM_CLASSES as S } from "../../constants.js";
+import { DynamicFormFieldsFlowStyled as M, DynamicFormFieldWrapperStyled as I } from "../../slots/DynamicFormSlots.js";
+import { isSupportedInformationalField as N } from "../../helpers/fieldContractAllowlist/fieldContractAllowlist.js";
+import { resolveFieldReadOnly as _, resolveFieldMandatory as E } from "../../helpers/resolveFieldContractAliases/resolveFieldContractAliases.js";
+import { resolveFieldComponent as G } from "../../helpers/resolveFieldComponent/resolveFieldComponent.js";
+const A = /* @__PURE__ */ new Set([
+  "RHFCheckableList"
+]);
+function H(a) {
+  const o = a.fieldType?.componentId;
+  return o && A.has(o) ? "verticalGrow" : "default";
+}
+function z(a) {
+  const o = [];
+  let e = [];
+  return a.forEach((l) => {
+    const i = H(l);
+    if (i === "verticalGrow") {
+      e.length > 0 && (o.push({ layout: "default", fields: e }), e = []), o.push({ layout: i, fields: [l] });
+      return;
+    }
+    e.push(l);
+  }), e.length > 0 && o.push({ layout: "default", fields: e }), o;
+}
+const y = W(function(o) {
+  const {
+    field: e,
+    currentSize: l,
+    fieldWrapperClassName: i,
+    fieldFlow: u,
+    layout: p,
+    readOnly: F = !1
+  } = o, { getLabel: t } = b(), { host_api_remote: c } = g(), r = p === "verticalGrow", n = N(e);
+  if (!n && (typeof e.name != "string" || e.name.trim() === ""))
+    return null;
+  const s = _(e, F), h = n ? void 0 : D(e, t), v = n ? typeof e.label == "string" ? e.label : "" : O(e, t), w = E(e), d = R({
+    hasHelperMessage: !s && !!h,
+    label: n ? "" : v,
+    mandatory: !n && !s && w,
+    requestedSemanticWidth: e.metadata?.semanticWidth,
+    size: l
+  }), f = G(e, {
+    size: l,
+    getLabel: t,
+    hostApiRemote: c,
+    readOnly: s,
+    suppressLabel: !0
+  });
+  return f ? /* @__PURE__ */ m(
+    I,
+    {
+      ownerState: {
+        readOnly: s,
+        fieldFlow: u,
+        gridColumnSpan: d.gridColumnSpan,
+        layout: p,
+        isFullWidth: d.isFullWidth,
+        semanticWidth: e.metadata?.semanticWidth,
+        wrapperWidth: d.wrapperWidth
+      },
+      className: L(i, S.fieldWrapper),
+      children: n ? f : /* @__PURE__ */ m(
+        C,
+        {
+          controlWidth: d.controlWidth,
+          labelOverflow: "visible",
+          labelWidth: d.labelWidth,
+          property: v,
+          value: f,
+          isForm: !0,
+          ...!s && {
+            mandatory: w,
+            helperMessage: h
+          },
+          valueHeight: r ? "100%" : void 0
+        }
+      )
+    }
+  ) : null;
+});
+y.displayName = "DynamicFormFieldRow";
+function U(a) {
+  const {
+    fields: o,
+    currentSize: e,
+    fieldWrapperClassName: l,
+    fieldFlow: i,
+    readOnly: u,
+    ownerState: p
+  } = a;
+  return z(o).map((t) => {
+    if (t.layout === "verticalGrow") {
+      const r = t.fields[0];
+      return r ? /* @__PURE__ */ m(
+        y,
+        {
+          field: r,
+          currentSize: e,
+          fieldWrapperClassName: l,
+          fieldFlow: i,
+          layout: t.layout,
+          readOnly: u
+        },
+        r.id
+      ) : null;
+    }
+    const c = t.fields.map((r) => r.id).join("-");
+    return /* @__PURE__ */ m(
+      M,
+      {
+        ownerState: p,
+        className: S.fieldsFlow,
+        children: t.fields.map((r) => /* @__PURE__ */ m(
+          y,
+          {
+            field: r,
+            currentSize: e,
+            fieldWrapperClassName: l,
+            fieldFlow: i,
+            layout: t.layout,
+            readOnly: u
+          },
+          r.id
+        ))
+      },
+      `flow-${c}`
+    );
+  });
+}
+export {
+  U as DynamicFormFieldsFlow
+};

package/components/DynamicForm/subcomponents/DynamicFormFieldsFlow/types.d.ts

@@ -0,0 +1,22 @@
+import { DynamicFormContentProps, DynamicFormFieldFlow, DynamicFormFieldLayout, DynamicFormOwnerState, Field } from '../../types';
+export interface DynamicFormFieldRowProps {
+    field: Field;
+    currentSize: DynamicFormContentProps['currentSize'];
+    fieldWrapperClassName?: string;
+    fieldFlow: DynamicFormFieldFlow;
+    layout: DynamicFormFieldLayout;
+    readOnly?: boolean;
+}
+export interface DynamicFormFieldSegment {
+    layout: DynamicFormFieldLayout;
+    fields: Field[];
+}
+export interface DynamicFormFieldsFlowProps {
+    fields: Field[];
+    currentSize: DynamicFormContentProps['currentSize'];
+    fieldWrapperClassName?: string;
+    fieldFlow: DynamicFormFieldFlow;
+    readOnly: boolean;
+    ownerState: DynamicFormOwnerState;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/DynamicForm/subcomponents/DynamicFormFieldsFlow/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DynamicForm/subcomponents/DynamicFormFieldsFlow/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,EACN,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAC;IACpD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,EAAE,oBAAoB,CAAC;IAChC,MAAM,EAAE,sBAAsB,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,sBAAsB,CAAC;IAC/B,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB;AAED,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,WAAW,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAC;IACpD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,EAAE,oBAAoB,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,qBAAqB,CAAC;CACnC"}

package/components/DynamicForm/subcomponents/DynamicFormSection/DynamicFormSection.d.ts

@@ -0,0 +1,4 @@
+import { DynamicFormSectionProps } from './types';
+/** Render one accessible section around fields owned by the same form provider. */
+export declare function DynamicFormSection(props: DynamicFormSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DynamicFormSection.d.ts.map

package/components/DynamicForm/subcomponents/DynamicFormSection/DynamicFormSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicFormSection.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DynamicForm/subcomponents/DynamicFormSection/DynamicFormSection.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAavD,mFAAmF;AACnF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,oDAiEhE"}

package/components/DynamicForm/subcomponents/DynamicFormSection/DynamicFormSection.js

@@ -0,0 +1,73 @@
+import { jsxs as r, jsx as i } from "@emotion/react/jsx-runtime";
+import { useId as p } from "react";
+import { useModuleDictionary as D } from "@m4l/core";
+import { LayoutListDetailsOutlined as F } from "@m4l/icons";
+import { DYNAMIC_FORM_DICTIONARY as f } from "../../dictionary.js";
+import { DynamicFormFieldsFlow as u } from "../DynamicFormFieldsFlow/DynamicFormFieldsFlow.js";
+import { DynamicFormSectionRootStyled as h, DynamicFormSectionLegendStyled as b, DynamicFormSectionHeadingStyled as I, DynamicFormSectionIconSurfaceStyled as L, DynamicFormSectionIconStyled as g, DynamicFormSectionHeadingCopyStyled as C, DynamicFormSectionLabelStyled as O, DynamicFormSectionDescriptionStyled as v, DynamicFormSectionBodyStyled as x } from "./slots.js";
+function R(d) {
+  const {
+    section: e,
+    fields: a,
+    currentSize: o,
+    fieldWrapperClassName: m,
+    fieldFlow: l,
+    readOnly: s,
+    ownerState: y
+  } = d, { getLabel: S } = D(), n = p(), c = typeof e.label == "string" && e.label.trim() ? e.label.trim() : S(f.SECTION_TITLE_FALLBACK), t = typeof e.description == "string" && e.description.trim() ? e.description.trim() : void 0;
+  return /* @__PURE__ */ r(
+    h,
+    {
+      "aria-describedby": t ? n : void 0,
+      children: [
+        /* @__PURE__ */ i(b, { children: c }),
+        /* @__PURE__ */ r(I, { children: [
+          /* @__PURE__ */ i(L, { "aria-hidden": "true", children: /* @__PURE__ */ i(
+            g,
+            {
+              src: /* @__PURE__ */ i(F, {}),
+              size: o,
+              "aria-hidden": "true"
+            }
+          ) }),
+          /* @__PURE__ */ r(C, { children: [
+            /* @__PURE__ */ i(
+              O,
+              {
+                component: "h3",
+                size: o,
+                variant: "subtitleStandard",
+                children: c
+              }
+            ),
+            t && /* @__PURE__ */ i(
+              v,
+              {
+                component: "p",
+                id: n,
+                color: "text.secondary",
+                size: o,
+                variant: "bodyStandard",
+                children: t
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(
+          u,
+          {
+            fields: a,
+            currentSize: o,
+            fieldWrapperClassName: m,
+            fieldFlow: l,
+            readOnly: s,
+            ownerState: y
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  R as DynamicFormSection
+};

package/components/DynamicForm/subcomponents/DynamicFormSection/cardStyles.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from '@mui/material/styles';
+/** Give grouped and ungrouped fields the same section-only card surface. */
+export declare function createDynamicFormSectionCardStyles(theme: Theme): {
+    boxSizing: "border-box";
+    minWidth: number;
+    width: string;
+    padding: string;
+    border: string;
+    borderRadius: string;
+    backgroundColor: string;
+    boxShadow: string;
+};
+//# sourceMappingURL=cardStyles.d.ts.map

package/components/DynamicForm/subcomponents/DynamicFormSection/cardStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardStyles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DynamicForm/subcomponents/DynamicFormSection/cardStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,4EAA4E;AAC5E,wBAAgB,kCAAkC,CAAC,KAAK,EAAE,KAAK;;;;;;;;;EAW9D"}

package/components/DynamicForm/subcomponents/DynamicFormSection/cardStyles.js

@@ -0,0 +1,15 @@
+function a(r) {
+  return {
+    boxSizing: "border-box",
+    minWidth: 0,
+    width: "100%",
+    padding: r.vars.size.baseSpacings.sp5,
+    border: `1px solid ${r.vars.palette.border.secondary}`,
+    borderRadius: r.vars.size.borderRadius.r3,
+    backgroundColor: r.vars.palette.background.default,
+    boxShadow: r.vars.customShadows.z1
+  };
+}
+export {
+  a as createDynamicFormSectionCardStyles
+};

package/components/DynamicForm/subcomponents/DynamicFormSection/slots.d.ts

@@ -0,0 +1,10 @@
+export declare const DynamicFormSectionRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {}>;
+export declare const DynamicFormSectionLegendStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {}>;
+export declare const DynamicFormSectionHeadingStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DynamicFormSectionIconSurfaceStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const DynamicFormSectionIconStyled: import('@emotion/styled').StyledComponent<import('@m4l/base').IconProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const DynamicFormSectionHeadingCopyStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DynamicFormSectionLabelStyled: import('@emotion/styled').StyledComponent<Omit<import('@m4l/base').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const DynamicFormSectionDescriptionStyled: import('@emotion/styled').StyledComponent<Omit<import('@m4l/base').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const DynamicFormSectionBodyStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=slots.d.ts.map