@prokodo/ui 0.0.40 → 0.0.42

package/README.md

@@ -21,7 +21,7 @@
 - ✨ **Adaptive Island Components (AIC)**: A rendering strategy where each component loads only the JavaScript it needs — when needed.
 - ⚡️ **Modern stack**: Vite, React 19, TypeScript, and SCSS Modules
 - 💅 **Design consistency**: Theming via design tokens and BEM-style naming
-- 🧩 **Component-rich**: 35+ reusable UI components
+- 🧩 **Component-rich**: 40+ reusable UI components
 - 🧪 **Reliable**: Fully tested with Jest and Testing Library
 - 📚 **Storybook**: Explore the components at [ui.prokodo.com](https://ui.prokodo.com)
 - 📦 **Ready-to-install**: Distributed via npm for non-production use under the BUSL-1.1 license
@@ -130,18 +130,8 @@ export default function GalleryPage() {
 
 ### Compatibility of the components
 
-✅ = Available as RSC (<[ComponentName] />) and for client exportable (<[ComponentName]Client />)
-❌ = Not available
-\- = Currently only for RSC optimized
-
-> If RSC and client have ✅-symbol means available as RSC (<[ComponentName] />) & extra client export (<[ComponentName]Client />)
-
-## 📦 Available Components
-
-### Compatibility of the components
-
-✅ = Available as AIC (renders zero-JS RSC and self-hydrates when needed) and can also used as a client‐only entry.
-– = RSC (AIC) only; no client‐side bundle. (Best practice: Use it only in RSC)
+- ✅ = Available as AIC (renders zero-JS RSC and self-hydrates when needed) and can also used as a client‐only entry.
+- \- = RSC (AIC) only; no client‐side bundle needed. (Useable in both, but best practice to use in RSC only)
 
 | Component             | ✅ AIC (RSC + optional client)   | ✅ SSR-Compatible (`"use client"`) |
 |-----------------------|:--------------------------------:|:---------------------------------:|
@@ -158,6 +148,7 @@ export default function GalleryPage() {
 | DatePicker            | ✅                               | ✅                                 |
 | Dialog                | ✅                               | ✅                                 |
 | Drawer                | ✅                               | ✅                                 |
+| DynamicList           | ✅                               | ✅                                 |
 | Form                  | ✅                               | ✅                                 |
 | FormResponse          | ✅                               | –                                  |
 | Grid/GridRow          | ✅                               | –                                  |
@@ -176,12 +167,14 @@ export default function GalleryPage() {
 | PostTeaser            | ❌ (Experimental - Coming soon)  | –                                  |
 | PostWidget            | ❌ (Experimental - Coming soon)  | –                                  |
 | PostWidgetCarousel    | ❌ (Experimental - Coming soon)  | -                                  |
+| ProgressBar           | ✅                               | ✅                                 |
 | Quote                 | ✅                               | –                                  |
 | RichText              | ✅                               | ✅                                 |
 | Select                | ✅                               | ✅                                 |
 | SideNav               | ✅                               | ✅                                 |
 | Skeleton              | ✅                               | –                                  |
 | Slider                | ✅                               | ✅                                 |
+| Snackbar & Provider   | ✅                               | ✅                                 |
 | Stepper               | ✅                               | ✅                                 |
 | Switch                | ✅                               | ✅                                 |
 | Table                 | ✅                               | –                                  |

package/dist/components/accordion/Accordion.client.js

@@ -11,7 +11,7 @@ function AccordionClient(props) {
     (index, e) => {
       const next = expandedIndex === index ? null : index;
       setExpandedIndex(next);
-      onChange == null ? void 0 : onChange(index, e, next !== null);
+      onChange == null ? void 0 : onChange(next !== null ? index : void 0, e, next !== null);
     },
     [expandedIndex, onChange]
   );

package/dist/components/animatedText/AnimatedText.client.js

@@ -17,21 +17,21 @@ function AnimatedTextClient({
     const t0 = window.setTimeout(() => {
       const id = window.setInterval(() => {
         setIndex((i) => {
-          if (i + 1 >= children.length) {
+          if (i + 1 >= (children == null ? void 0 : children.length)) {
             clearInterval(id);
-            return children.length;
+            return children == null ? void 0 : children.length;
           }
           return i + 1;
         });
       }, speed);
     }, delay);
     return () => clearTimeout(t0);
-  }, [children.length, delay, disabled, speed]);
+  }, [children == null ? void 0 : children.length, delay, disabled, speed]);
   return /* @__PURE__ */ jsx(
     AnimatedTextView,
     {
       ...rest,
-      text: children.slice(0, index)
+      text: children == null ? void 0 : children.slice(0, index)
     }
   );
 }

package/dist/components/dialog/Dialog.client.js

@@ -80,7 +80,12 @@ function DialogClient({ open = false, closeOnBackdropClick = true, onChange, ...
         }, "onMouseDown")
       },
       onClose: closeDialog,
-      onMouseDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onMouseDown")
+      onMouseDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onMouseDown"),
+      onCloseKeyDown: /* @__PURE__ */ __name((e) => {
+        if (e.key === "Enter") {
+          closeDialog();
+        }
+      }, "onCloseKeyDown")
     }
   );
 }

package/dist/components/dialog/Dialog.module.scss.js

@@ -7,6 +7,8 @@ const styles = {
   "prokodo-Dialog__container--scroll-paper": "prokodo-Dialog__container--scroll-paper",
   "prokodo-Dialog__container--scroll-body": "prokodo-Dialog__container--scroll-body",
   "prokodo-Dialog__header": "prokodo-Dialog__header",
+  "prokodo-Dialog__header__button": "prokodo-Dialog__header__button",
+  "prokodo-Dialog__header__button__icon": "prokodo-Dialog__header__button__icon",
   "prokodo-Dialog__close": "prokodo-Dialog__close",
   "prokodo-Dialog__close__label": "prokodo-Dialog__close__label",
   "prokodo-Dialog__title--is-hidden": "prokodo-Dialog__title--is-hidden",

package/dist/components/dialog/Dialog.view.js

@@ -5,6 +5,7 @@ import { create } from "../../helpers/bem.js";
 import styles from "./Dialog.module.scss.js";
 import { Button } from "../button/Button.js";
 import { Headline } from "../headline/Headline.js";
+import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Dialog");
 function DialogView({
   open,
@@ -25,6 +26,7 @@ function DialogView({
   titleProps = {},
   children,
   onClose,
+  onCloseKeyDown,
   wrapperProps,
   closeOnBackdropClick = true,
   closeButtonProps,
@@ -39,69 +41,82 @@ function DialogView({
     fullScreen,
     "is-visible": Boolean(open)
   };
-  const renderDialog = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "aria-describedby": "dialog-content",
-      "aria-labelledby": "dialog-title",
-      "aria-modal": "true",
-      role: "dialog",
-      ...rest,
-      className: bem(void 0, wrapperMods, className),
-      children: [
-        /* @__PURE__ */ jsxs("div", { ref: containerRef, className: bem("container", containerMods), children: [
-          /* @__PURE__ */ jsxs("div", { className: bem("header", void 0, classNameHeader), children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(
-                Headline,
+  const renderDialog = /* @__PURE__ */ __name(() => {
+    var _a;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-describedby": "dialog-content",
+        "aria-labelledby": "dialog-title",
+        "aria-modal": "true",
+        role: "dialog",
+        ...rest,
+        className: bem(void 0, wrapperMods, className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { ref: containerRef, className: bem("container", containerMods), children: [
+            /* @__PURE__ */ jsxs("div", { className: bem("header", void 0, classNameHeader), children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  Headline,
+                  {
+                    ...titleProps,
+                    className: bem("title", { "is-hidden": hideTitle }),
+                    id: "dialog-title",
+                    children: title
+                  }
+                ),
+                renderHeader == null ? void 0 : renderHeader()
+              ] }),
+              !Boolean(hideCloseButton) && /* @__PURE__ */ jsxs(
+                "button",
                 {
-                  ...titleProps,
-                  className: bem("title", { "is-hidden": hideTitle }),
-                  id: "dialog-title",
-                  children: title
+                  ...closeButtonProps,
+                  ref: closeButtonRef,
+                  "aria-label": (closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) ?? (translations == null ? void 0 : translations.close),
+                  className: bem("header__button", void 0, closeButtonProps == null ? void 0 : closeButtonProps.className),
+                  onClick: onClose,
+                  onKeyDown: onCloseKeyDown,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: "Cancel01Icon",
+                        size: "xs",
+                        ...closeButtonProps == null ? void 0 : closeButtonProps.iconProps,
+                        className: bem("header__button__icon", void 0, (_a = closeButtonProps == null ? void 0 : closeButtonProps.iconProps) == null ? void 0 : _a.className)
+                      }
+                    ),
+                    (closeButtonProps == null ? void 0 : closeButtonProps.title) ?? (translations == null ? void 0 : translations.close) ?? "Close"
+                  ]
                 }
-              ),
-              renderHeader == null ? void 0 : renderHeader()
+              )
             ] }),
-            !Boolean(hideCloseButton) && /* @__PURE__ */ jsx(
-              Button,
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                "aria-label": translations == null ? void 0 : translations.close,
-                color: "inherit",
-                iconProps: { name: "Cancel01Icon", size: "sm" },
-                variant: "outlined",
-                ...closeButtonProps,
-                ref: closeButtonRef,
-                title: (translations == null ? void 0 : translations.close) ?? "Close",
-                onClick: onClose
+                ...contentProps,
+                ref: contentRef,
+                id: "dialog-content",
+                className: bem(
+                  "content",
+                  { [`scroll-${scroll}`]: true },
+                  contentProps.className
+                ),
+                children
               }
-            )
+            ),
+            actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: bem("actions"), children: [
+              /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
+              actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action, title: (action == null ? void 0 : action.title) ?? "" }, action.id)),
+              /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 })
+            ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ...contentProps,
-              ref: contentRef,
-              id: "dialog-content",
-              className: bem(
-                "content",
-                { [`scroll-${scroll}`]: true },
-                contentProps.className
-              ),
-              children
-            }
-          ),
-          actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: bem("actions"), children: [
-            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
-            actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action, title: (action == null ? void 0 : action.title) ?? "" }, action.id)),
-            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 })
-          ] })
-        ] }),
-        containerChildren
-      ]
-    }
-  ), "renderDialog");
+          containerChildren
+        ]
+      }
+    );
+  }, "renderDialog");
   if (!closeOnBackdropClick || fullScreen) return renderDialog();
   return /* @__PURE__ */ jsx(
     "div",

package/dist/components/dynamic-list/DynamicList.client.js

@@ -0,0 +1,91 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect, useCallback } from "react";
+import { isString } from "../../helpers/validations.js";
+import { DynamicListView } from "./DynamicList.view.js";
+function DynamicListClient({
+  fields,
+  value: controlledItems,
+  onChange,
+  buttonAddProps,
+  buttonDeleteProps,
+  ...props
+}) {
+  const isSingle = fields.length === 1;
+  const [items, setItems] = useState(
+    () => controlledItems ?? []
+  );
+  useEffect(() => {
+    if (controlledItems !== void 0) {
+      setItems(controlledItems);
+    }
+  }, [controlledItems]);
+  const handleChange = useCallback(
+    (e) => {
+      const target = e.target;
+      const idx = Number(target.dataset.index);
+      const key = target.dataset.field;
+      const { value } = target;
+      if (Number.isNaN(idx) || !isString(key)) return;
+      const next = items.map((it, i) => {
+        if (i !== idx) return it;
+        return isSingle ? value : { ...it, [key]: value };
+      });
+      setItems(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [items, onChange, isSingle]
+  );
+  const handleAdd = useCallback(
+    (e) => {
+      var _a;
+      const empty = isSingle ? "" : fields.reduce((obj, f) => {
+        obj[f.name] = "";
+        return obj;
+      }, {});
+      const next = [...items, empty];
+      setItems(next);
+      (_a = buttonAddProps == null ? void 0 : buttonAddProps.onClick) == null ? void 0 : _a.call(buttonAddProps, e);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [items, onChange, isSingle, fields, buttonAddProps]
+  );
+  const handleDelete = useCallback(
+    (e) => {
+      var _a;
+      const idx = Number(e.currentTarget.dataset.index);
+      if (Number.isNaN(idx)) return;
+      const next = items.filter((_, i) => i !== idx);
+      setItems(next);
+      (_a = buttonDeleteProps == null ? void 0 : buttonDeleteProps.onClick) == null ? void 0 : _a.call(buttonDeleteProps, e, idx);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [items, onChange, buttonDeleteProps]
+  );
+  return /* @__PURE__ */ jsx(
+    DynamicListView,
+    {
+      ...props,
+      fields,
+      value: items,
+      buttonAddProps: {
+        ...buttonAddProps,
+        onClick: handleAdd
+      },
+      buttonDeleteProps: {
+        ...buttonDeleteProps,
+        onClick: handleDelete
+      },
+      fieldProps: {
+        onChange: handleChange
+      }
+    }
+  );
+}
+__name(DynamicListClient, "DynamicListClient");
+const DynamicListClient$1 = memo(DynamicListClient);
+export {
+  DynamicListClient$1 as default
+};

package/dist/components/dynamic-list/DynamicList.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createIsland } from "../../helpers/createIsland.js";
+import DynamicListServer from "./DynamicList.server.js";
+const DynamicList = createIsland({
+  name: "DynamicList",
+  Server: DynamicListServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./DynamicList.lazy.js"), "loadLazy")
+});
+export {
+  DynamicList
+};

package/dist/components/dynamic-list/DynamicList.lazy.js

@@ -0,0 +1,12 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import DynamicListClient from "./DynamicList.client.js";
+import DynamicListServer from "./DynamicList.server.js";
+const DynamicList_lazy = createLazyWrapper({
+  name: "DynamicList",
+  Client: DynamicListClient,
+  Server: DynamicListServer
+});
+export {
+  DynamicList_lazy as default
+};

package/dist/components/dynamic-list/DynamicList.module.scss.js

@@ -0,0 +1,20 @@
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
+  "prokodo-DynamicList": "prokodo-DynamicList",
+  "prokodo-DynamicList__list": "prokodo-DynamicList__list",
+  "prokodo-DynamicList__list__item": "prokodo-DynamicList__list__item",
+  "prokodo-DynamicList__list__item--is-multi": "prokodo-DynamicList__list__item--is-multi",
+  "prokodo-DynamicList__field--is-multi": "prokodo-DynamicList__field--is-multi",
+  "prokodo-DynamicList__delete__button--is-multi": "prokodo-DynamicList__delete__button--is-multi",
+  "prokodo-DynamicList__helperText": "prokodo-DynamicList__helperText",
+  "prokodo-DynamicList__helperText__content": "prokodo-DynamicList__helperText__content",
+  "prokodo-DynamicList__helperText__content--is-error": "prokodo-DynamicList__helperText__content--is-error",
+  gradientMove,
+  fadeInKeyframe
+};
+export {
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
+};

package/dist/components/dynamic-list/DynamicList.server.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { DynamicListView } from "./DynamicList.view.js";
+function DynamicListServer(props) {
+  const { buttonDeleteProps, ...rest } = props;
+  return /* @__PURE__ */ jsx(DynamicListView, { ...rest, buttonDeleteProps: {
+    ...buttonDeleteProps,
+    onClick: void 0
+  } });
+}
+__name(DynamicListServer, "DynamicListServer");
+export {
+  DynamicListServer as default
+};

package/dist/components/dynamic-list/DynamicList.view.js

@@ -0,0 +1,128 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./DynamicList.module.scss.js";
+import { Input } from "../input/Input.js";
+import { Button } from "../button/Button.js";
+import { Label } from "../label/Label.js";
+const bem = create(styles, "DynamicList");
+function DynamicListView({
+  id,
+  label,
+  labelProps,
+  disabled,
+  required,
+  className,
+  classNameList,
+  fields,
+  value = [],
+  fieldProps,
+  buttonAddProps,
+  buttonDeleteProps,
+  name = "items",
+  errorText,
+  helperText
+}) {
+  const isError = Boolean(errorText);
+  const hasHelper = Boolean(helperText);
+  const errorId = isError ? `${id}-error` : void 0;
+  const helperId = hasHelper ? `${id}-helper` : void 0;
+  const single = fields.length === 1;
+  const mod = { "is-multi": !Boolean(single) };
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "aria-describedby": isError ? errorId : helperId,
+      "aria-labelledby": `${name}-legend`,
+      className: bem(void 0, void 0, className),
+      children: [
+        isString(label) && /* @__PURE__ */ jsx(
+          Label,
+          {
+            ...labelProps,
+            "aria-disabled": disabled,
+            className: bem("list-label", void 0, labelProps == null ? void 0 : labelProps.className),
+            error: isError,
+            id: (labelProps == null ? void 0 : labelProps.id) ?? `${name}-legend`,
+            label,
+            required,
+            type: "legend"
+          }
+        ),
+        value.map((item, idx) => /* @__PURE__ */ jsxs(
+          "ul",
+          {
+            "aria-describedby": errorId ?? helperId,
+            className: bem("list", mod, classNameList),
+            children: [
+              /* @__PURE__ */ jsx("li", { className: bem("list__item"), children: fields.map((field) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  fullWidth: true,
+                  ...field,
+                  ...fieldProps,
+                  className: bem("field", mod, field == null ? void 0 : field.className),
+                  "data-field": field == null ? void 0 : field.name,
+                  "data-index": idx,
+                  disabled: disabled ?? (fieldProps == null ? void 0 : fieldProps.disabled) ?? (field == null ? void 0 : field.disabled),
+                  id: `${name}-${idx}-${field.name}`,
+                  required: required ?? (fieldProps == null ? void 0 : fieldProps.required) ?? (field == null ? void 0 : field.required),
+                  value: single ? item : item[field.name],
+                  name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`
+                },
+                field.name
+              )) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": `Remove ${label} entry ${idx + 1}`,
+                  color: "error",
+                  "data-index": idx,
+                  iconProps: {
+                    name: "Delete02Icon"
+                  },
+                  ...buttonDeleteProps,
+                  className: bem("delete__button", mod, buttonDeleteProps == null ? void 0 : buttonDeleteProps.className)
+                }
+              )
+            ]
+          },
+          idx
+        )),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            title: "Add item",
+            variant: "outlined",
+            ...buttonAddProps,
+            className: bem("button", void 0, buttonAddProps == null ? void 0 : buttonAddProps.className)
+          }
+        ),
+        (isError || hasHelper) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-live": isError ? "assertive" : "polite",
+            className: bem("helperText"),
+            id: errorId ?? helperId,
+            role: isError ? "alert" : void 0,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: bem("helperText__content", {
+                  "is-error": isError
+                }),
+                children: errorText ?? helperText
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+__name(DynamicListView, "DynamicListView");
+export {
+  DynamicListView
+};

package/dist/components/dynamic-list/index.js

@@ -0,0 +1,4 @@
+import { DynamicList } from "./DynamicList.js";
+export {
+  DynamicList
+};

package/dist/components/form/Form.client.js

@@ -66,6 +66,10 @@ const FormClient = memo((props) => {
     (field, value) => {
       const idx = formState.findIndex((f) => f.name === field.name);
       if (idx < 0) return;
+      if (field.fieldType === "dynamic-list") {
+        updateSingleField(idx, { value });
+        return;
+      }
       if (!field.conditions || field.conditions.length === 0) {
         updateSingleField(idx, { value });
         return;

package/dist/components/form/Form.server.js

@@ -6,6 +6,8 @@ const FormServer = /* @__PURE__ */ __name((props) => {
   const {
     fields,
     messages,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onChangeForm,
     ...rest
   } = props;
   const emptyState = fields ?? [];

package/dist/components/form/Form.view.js

@@ -3,7 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsxs, jsx } from "react/jsx-runtime";
 import { createElement } from "react";
 import { create } from "../../helpers/bem.js";
-import { isArray } from "../../helpers/validations.js";
+import { isArray, isNull } from "../../helpers/validations.js";
 import styles from "./Form.module.scss.js";
 import { FormField } from "./FormField.js";
 import { FormResponse } from "./FormResponse.js";
@@ -83,10 +83,9 @@ const FormView = /* @__PURE__ */ __name(({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
           (hideResponse === false || hideResponse === void 0) && /* @__PURE__ */ jsx(FormResponse, { messages: formMessages }),
-          ((_a = honeypot == null ? void 0 : honeypot.value) == null ? void 0 : _a.length) === 0 && /* @__PURE__ */ jsx(
+          !isNull(button) && ((_a = honeypot == null ? void 0 : honeypot.value) == null ? void 0 : _a.length) === 0 && /* @__PURE__ */ jsx(
             Button,
             {
-              fullWidth: true,
               "aria-label": "Submit form",
               title: "Submit",
               type: "submit",

package/dist/components/form/FormField.client.js

@@ -5,6 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { create } from "../../helpers/bem.js";
 import styles from "./FormField.module.scss.js";
+import { DynamicList } from "../dynamic-list/DynamicList.js";
 import { GridRow } from "../grid/GridRow.js";
 import { DatePicker } from "../datePicker/DatePicker.js";
 import { Input } from "../input/Input.js";
@@ -21,7 +22,7 @@ function FormFieldClient({
   onValidate,
   ...props
 }) {
-  var _a, _b;
+  var _a, _b, _c;
   const renderFieldContainer = useCallback((children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }), []);
   if (visible === false) return null;
   switch (fieldType) {
@@ -88,6 +89,26 @@ function FormFieldClient({
           }
         )
       );
+    case "dynamic-list":
+      const p = props;
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          DynamicList,
+          {
+            priority: true,
+            ...p,
+            value: p == null ? void 0 : p.value,
+            fields: (_c = p == null ? void 0 : p.fields) == null ? void 0 : _c.map((field) => ({
+              ...field,
+              onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(p, err), "onValidate")
+            })),
+            onChange: /* @__PURE__ */ __name((items) => onChange == null ? void 0 : onChange(
+              props,
+              items
+            ), "onChange")
+          }
+        )
+      );
     default:
       return null;
   }