@vibe/core 3.73.0 → 3.74.0

package/dist/metadata.json

@@ -5766,6 +5766,17 @@
           "name": "boolean"
         }
       },
+      "enableNestedDialogLayer": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, provides a LayerProvider context for nested dialogs to render correctly.\nThis is useful when you have components that use Dialog internally (like Dropdown)\ninside another Dialog, ensuring proper z-index stacking and click-outside behavior.",
+        "name": "enableNestedDialogLayer",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "A CSS class name to apply to the component.",
@@ -19218,42 +19229,16 @@
     "subComponents": []
   },
   {
-    "filePath": "src/components/Modal/footers/ModalFooter/ModalFooter.tsx",
+    "filePath": "src/components/next/AttentionBox/AttentionBox.tsx",
     "aggregator": "next",
     "symbols": [
-      "default as ModalFooter",
-      "type ModalFooterProps"
+      "default as AttentionBox",
+      "AttentionBoxProps",
+      "AttentionBoxType"
     ],
-    "displayName": "ModalFooter",
+    "displayName": "AttentionBox",
     "description": "",
     "props": {
-      "renderSideAction": {
-        "defaultValue": null,
-        "description": "Content displayed on the left side of the footer.",
-        "name": "renderSideAction",
-        "required": false,
-        "type": {
-          "name": "React.ReactNode"
-        }
-      },
-      "primaryButton": {
-        "defaultValue": null,
-        "description": "Props for the primary action button.",
-        "name": "primaryButton",
-        "required": true,
-        "type": {
-          "name": "ModalFooterActionProps"
-        }
-      },
-      "secondaryButton": {
-        "defaultValue": null,
-        "description": "Props for the optional secondary action button.",
-        "name": "secondaryButton",
-        "required": false,
-        "type": {
-          "name": "ModalFooterActionProps"
-        }
-      },
       "className": {
         "defaultValue": null,
         "description": "A CSS class name to apply to the component.",
@@ -19280,166 +19265,174 @@
         "type": {
           "name": "string"
         }
-      }
-    },
-    "import": "import { ModalFooter } from \"@vibe/core/next\"",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx",
-    "aggregator": "next",
-    "symbols": [
-      "default as ModalFooterWizard",
-      "type ModalFooterWizardProps"
-    ],
-    "displayName": "ModalFooterWizard",
-    "description": "",
-    "props": {
-      "stepCount": {
+      },
+      "text": {
         "defaultValue": null,
-        "description": "The total number of steps in the wizard.\nRenders the corresponding number of step indicators (\"dots\") in the footer.",
-        "name": "stepCount",
-        "required": true,
+        "description": "The main text content",
+        "name": "text",
+        "required": false,
         "type": {
-          "name": "number"
+          "name": "string"
         }
       },
-      "activeStep": {
+      "children": {
         "defaultValue": null,
-        "description": "The current active step (0-based index).\nHighlights the corresponding step indicator (\"dot\") in the footer.",
-        "name": "activeStep",
-        "required": true,
+        "description": "Custom children to override the default text content",
+        "name": "children",
+        "required": false,
         "type": {
-          "name": "number"
+          "name": "ReactNode"
         }
       },
-      "onStepClick": {
-        "defaultValue": null,
-        "description": "Callback fired when a step indicator (\"dot\") is clicked.",
-        "name": "onStepClick",
-        "required": true,
+      "compact": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "When true, the attention box will be displayed in compact mode of one-liner",
+        "name": "compact",
+        "required": false,
         "type": {
-          "name": "(stepIndex: number) => void"
+          "name": "boolean"
         }
       },
-      "primaryButton": {
+      "title": {
         "defaultValue": null,
-        "description": "Props for the primary action button.",
-        "name": "primaryButton",
-        "required": true,
+        "description": "The title of the attention box",
+        "name": "title",
+        "required": false,
         "type": {
-          "name": "ModalFooterActionProps"
+          "name": "string"
         }
       },
-      "secondaryButton": {
-        "defaultValue": null,
-        "description": "Props for the optional secondary action button.",
-        "name": "secondaryButton",
+      "type": {
+        "defaultValue": {
+          "value": "primary"
+        },
+        "description": "The variant type of the attention box",
+        "name": "type",
         "required": false,
         "type": {
-          "name": "ModalFooterActionProps"
+          "name": "enum",
+          "raw": "AttentionBoxType",
+          "value": [
+            {
+              "value": "\"primary\""
+            },
+            {
+              "value": "\"positive\""
+            },
+            {
+              "value": "\"negative\""
+            },
+            {
+              "value": "\"warning\""
+            },
+            {
+              "value": "\"neutral\""
+            }
+          ]
         }
       },
-      "className": {
-        "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+      "iconType": {
+        "defaultValue": {
+          "value": "svg"
+        },
+        "description": "The type of the icon",
+        "name": "iconType",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "enum",
+          "raw": "IconType",
+          "value": [
+            {
+              "value": "\"svg\""
+            },
+            {
+              "value": "\"font\""
+            },
+            {
+              "value": "\"src\""
+            }
+          ]
         }
       },
-      "data-testid": {
+      "icon": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "The icon to display. Pass `false` to hide the icon entirely, or omit to use the default icon for the type.",
+        "name": "icon",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "false | SubIcon"
         }
       },
-      "id": {
+      "onClose": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "Callback when the close button is clicked",
+        "name": "onClose",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void"
         }
-      }
-    },
-    "import": "import { ModalFooterWizard } from \"@vibe/core/next\"",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx",
-    "aggregator": "next",
-    "symbols": [
-      "default as ModalBasicLayout",
-      "type ModalBasicLayoutProps"
-    ],
-    "displayName": "ModalBasicLayout",
-    "description": "",
-    "props": {
-      "children": {
+      },
+      "closeButtonAriaLabel": {
         "defaultValue": null,
-        "description": "The content of the layout, structured as:\n1. Header content\n2. Main content",
-        "name": "children",
-        "required": true,
+        "description": "Custom aria label for the close button",
+        "name": "closeButtonAriaLabel",
+        "required": false,
         "type": {
-          "name": "React.ReactNode"
+          "name": "string"
         }
       },
-      "className": {
-        "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+      "animate": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Whether to animate the entrance",
+        "name": "animate",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "data-testid": {
+      "action": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "Action button configuration",
+        "name": "action",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "AttentionBoxButtonProps"
         }
       },
-      "id": {
+      "link": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "Link configuration",
+        "name": "link",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "Omit<LinkProps, \"inlineText\">"
         }
       }
     },
-    "import": "import { ModalBasicLayout } from \"@vibe/core/next\"",
+    "import": "import { AttentionBox } from \"@vibe/core/next\"",
+    "parentComponent": "next",
     "subComponents": []
   },
   {
-    "filePath": "src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx",
+    "filePath": "src/components/next/Dropdown/Dropdown.tsx",
     "aggregator": "next",
     "symbols": [
-      "default as ModalMediaLayout",
-      "type ModalMediaLayoutProps"
+      "default as Dropdown",
+      "DropdownOption",
+      "DropdownGroupOption",
+      "BaseDropdownProps",
+      "DropdownSizes",
+      "DropdownDirection",
+      "DropdownMultiControllerProps",
+      "DropdownSingleControllerProps"
     ],
-    "displayName": "ModalMediaLayout",
+    "displayName": "Dropdown",
     "description": "",
     "props": {
-      "children": {
-        "defaultValue": null,
-        "description": "The content of the layout, structured as:\n1. Media content\n2. Header content\n3. Main content",
-        "name": "children",
-        "required": true,
-        "type": {
-          "name": "React.ReactNode"
-        }
-      },
       "className": {
         "defaultValue": null,
         "description": "A CSS class name to apply to the component.",
@@ -19466,98 +19459,51 @@
         "type": {
           "name": "string"
         }
-      }
-    },
-    "import": "import { ModalMediaLayout } from \"@vibe/core/next\"",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx",
-    "aggregator": "next",
-    "symbols": [
-      "default as ModalSideBySideLayout",
-      "type ModalSideBySideLayoutProps"
-    ],
-    "displayName": "ModalSideBySideLayout",
-    "description": "",
-    "props": {
-      "children": {
+      },
+      "options": {
         "defaultValue": null,
-        "description": "The content of the layout, structured as:\n1. Header content\n2. Main content\n3. Media content",
-        "name": "children",
+        "description": "The list of options available in the list.",
+        "name": "options",
         "required": true,
         "type": {
-          "name": "React.ReactNode"
+          "name": "DropdownGroupOption<Item>"
         }
       },
-      "className": {
+      "tooltipProps": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "Props to be passed to the Tooltip component that wraps the dropdown.",
+        "name": "tooltipProps",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "Partial<TooltipProps>"
         }
       },
-      "data-testid": {
+      "withGroupDivider": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "If true, displays dividers between grouped options.",
+        "name": "withGroupDivider",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "id": {
+      "stickyGroupTitle": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "If true, makes the group title sticky.",
+        "name": "stickyGroupTitle",
         "required": false,
-        "type": {
-          "name": "string"
-        }
-      }
-    },
-    "import": "import { ModalSideBySideLayout } from \"@vibe/core/next\"",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/Modal/Modal/Modal.tsx",
-    "aggregator": "next",
-    "symbols": [
-      "default as Modal"
-    ],
-    "displayName": "Modal",
-    "description": "",
-    "props": {
-      "id": {
-        "defaultValue": null,
-        "description": "Unique identifier for the modal.",
-        "name": "id",
-        "required": true,
-        "type": {
-          "name": "string"
-        }
-      },
-      "show": {
-        "defaultValue": null,
-        "description": "Controls the visibility of the modal.",
-        "name": "show",
-        "required": true,
         "type": {
           "name": "boolean"
         }
       },
       "size": {
-        "defaultValue": {
-          "value": "medium"
-        },
-        "description": "Determines the width and max-height of the modal.",
+        "defaultValue": null,
+        "description": "The size of the dropdown.",
         "name": "size",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "ModalSize",
+          "raw": "DropdownSizes",
           "value": [
             {
               "value": "\"small\""
@@ -19567,563 +19513,451 @@
             },
             {
               "value": "\"large\""
-            },
-            {
-              "value": "\"full-view\""
             }
           ]
         }
       },
-      "closeButtonTheme": {
+      "dir": {
         "defaultValue": null,
-        "description": "Theme color for the close button.",
-        "name": "closeButtonTheme",
+        "description": "The direction of the dropdown.",
+        "name": "dir",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "ModalTopActionsTheme",
+          "raw": "DropdownDirection",
           "value": [
             {
-              "value": "\"dark\""
+              "value": "\"ltr\""
             },
             {
-              "value": "\"light\""
+              "value": "\"rtl\""
+            },
+            {
+              "value": "\"auto\""
             }
           ]
         }
       },
-      "closeButtonAriaLabel": {
+      "searchable": {
         "defaultValue": null,
-        "description": "Accessibility label for the close button.",
-        "name": "closeButtonAriaLabel",
+        "description": "If true, the dropdown is searchable.",
+        "name": "searchable",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "onClose": {
-        "defaultValue": {
-          "value": "() => {}"
-        },
-        "description": "Callback fired when the modal should close.",
-        "name": "onClose",
+      "optionRenderer": {
+        "defaultValue": null,
+        "description": "The function to call to render an option.",
+        "name": "optionRenderer",
         "required": false,
         "type": {
-          "name": "(event: any) => void"
+          "name": "(option: Item) => React.ReactNode"
         }
       },
-      "autoFocus": {
-        "defaultValue": {
-          "value": "true"
-        },
-        "description": "This is intended for advanced use-cases.\nIt allows you to control the default focus behavior when the modal mounts.\nMake sure to use this prop only when you understand the implications.\n\nDetermines if focus should automatically move to the first focusable element when the component mounts.\nWhen set to `false` - disables the automatic focus behavior.\n- Notice this might break keyboard and general accessibility and should be used with caution.",
-        "name": "autoFocus",
+      "menuRenderer": {
+        "defaultValue": null,
+        "description": "The function to call to render the menu.",
+        "name": "menuRenderer",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "(props: { children: React.ReactNode; filteredOptions: ListGroup<Item>[]; selectedItems: Item[]; getItemProps: (options: any) => Record<string, unknown>; }) => React.ReactNode"
         }
       },
-      "allowFocusEscapeTo": {
+      "noOptionsMessage": {
         "defaultValue": null,
-        "description": "Specifies elements/containers that should be allowed to receive focus outside this modal.\nWhen focus moves to these elements, the focus lock will ignore them.\nThis allows other UI components (tooltips, dropdowns, nested modals, etc.) to receive focus.\n\nAccepts:\n- CSS selectors (string)\n- Refs to elements (React.RefObject<HTMLElement>)\n- Direct element references (HTMLElement)",
-        "name": "allowFocusEscapeTo",
+        "description": "The message to display when there are no options.",
+        "name": "noOptionsMessage",
         "required": false,
         "type": {
-          "name": "any[]"
+          "name": "any"
         }
       },
-      "onFocusAttempt": {
+      "placeholder": {
         "defaultValue": null,
-        "description": "This is intended for advanced use-cases.\nIt allows you to control which elements the focus lock should manage.\nMake sure to use this prop only when you understand the implications.\n\n**Note:** If you only need to allow focus to specific selectors, use `allowFocusEscapeTo` instead.\n\nCalled whenever focus is attempting to move to any element (inside or outside the modal).\nReturn:\n- `true` to let focus-lock **manage** this element (keep it within the modal's focus trap).\n- `false` to let focus-lock **ignore** this element (allow focus to move outside the modal).\n- An HTMLElement to redirect focus to that element instead.\n- Any other value (e.g., null, undefined) would act as `false`.\n@example // Complex custom logic\n<Modal\n  onFocusAttempt={(el) => {\n    if (el?.dataset.customBehavior) return false;\n    return true;\n  }}\n/>",
-        "name": "onFocusAttempt",
+        "description": "The placeholder to display when the dropdown is empty.",
+        "name": "placeholder",
         "required": false,
         "type": {
-          "name": "(nextFocusedElement?: HTMLElement) => boolean | HTMLElement"
+          "name": "string"
         }
       },
-      "renderHeaderAction": {
+      "disabled": {
         "defaultValue": null,
-        "description": "Additional action to render in the header area.",
-        "name": "renderHeaderAction",
+        "description": "If true, the dropdown is disabled.",
+        "name": "disabled",
         "required": false,
         "type": {
-          "name": "any"
+          "name": "boolean"
         }
       },
-      "anchorElementRef": {
+      "readOnly": {
         "defaultValue": null,
-        "description": "Reference to an element that triggered the modal, used for animations.",
-        "name": "anchorElementRef",
+        "description": "If true, the dropdown is read only.",
+        "name": "readOnly",
         "required": false,
         "type": {
-          "name": "React.RefObject<HTMLElement>"
+          "name": "boolean"
         }
       },
-      "alertModal": {
+      "error": {
         "defaultValue": null,
-        "description": "When true, prevents closing the modal when clicking the overlay (\"click-outside\") or pressing ESC.",
-        "name": "alertModal",
+        "description": "If true, the dropdown is in an error state.",
+        "name": "error",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "container": {
-        "defaultValue": {
-          "value": "document.body"
-        },
-        "description": "The target element to render the modal into.",
-        "name": "container",
+      "helperText": {
+        "defaultValue": null,
+        "description": "The helper text to display below the dropdown.",
+        "name": "helperText",
         "required": false,
         "type": {
-          "name": "any"
+          "name": "string"
         }
       },
-      "children": {
+      "required": {
         "defaultValue": null,
-        "description": "Modal content.",
-        "name": "children",
-        "required": true,
+        "description": "If true, the dropdown is required.",
+        "name": "required",
+        "required": false,
         "type": {
-          "name": "React.ReactNode"
+          "name": "boolean"
         }
       },
-      "style": {
+      "label": {
         "defaultValue": null,
-        "description": "Additional inline styles for the modal.",
-        "name": "style",
+        "description": "The label to display above the dropdown.",
+        "name": "label",
         "required": false,
         "type": {
-          "name": "React.CSSProperties"
+          "name": "string"
         }
       },
-      "zIndex": {
+      "ariaLabel": {
         "defaultValue": null,
-        "description": "The z-index to be used for the modal and overlay.",
-        "name": "zIndex",
+        "description": "The ARIA label for the dropdown.",
+        "name": "ariaLabel",
         "required": false,
         "type": {
-          "name": "number"
+          "name": "string"
         }
       },
-      "aria-labelledby": {
+      "inputAriaLabel": {
         "defaultValue": null,
-        "description": "If provided, overrides the automatically generated aria-labelledby, that is assigned when used with ModalHeader.",
-        "name": "aria-labelledby",
+        "description": "The ARIA label for the dropdown input.",
+        "name": "inputAriaLabel",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "aria-describedby": {
+      "menuAriaLabel": {
         "defaultValue": null,
-        "description": "If provided, overrides the automatically generated aria-describedby, that is assigned when used with ModalHeader.",
-        "name": "aria-describedby",
+        "description": "The ARIA label for the menu container.",
+        "name": "menuAriaLabel",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "className": {
+      "clearAriaLabel": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "The ARIA label for the clear button.",
+        "name": "clearAriaLabel",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "data-testid": {
+      "inputValue": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "The current value of the input field.",
+        "name": "inputValue",
         "required": false,
         "type": {
           "name": "string"
         }
-      }
-    },
-    "import": "import { Modal } from \"@vibe/core/next\"",
-    "subComponents": [
-      "Modal.types"
-    ]
-  },
-  {
-    "filePath": "src/components/Modal/ModalHeader/ModalHeader.tsx",
-    "aggregator": "next",
-    "symbols": [
-      "default as ModalHeader",
-      "type ModalHeaderProps"
-    ],
-    "displayName": "ModalHeader",
-    "description": "",
-    "props": {
-      "title": {
+      },
+      "maxMenuHeight": {
         "defaultValue": null,
-        "description": "Main heading text of the modal.\n\n- If you pass a **string**, `ModalHeader` will generate an internal ID and communicate it to the parent `Modal`\n  so that `aria-labelledby` is set automatically (unless `Modal` receives `aria-labelledby` prop).\n- If you pass a **ReactNode** (such as a custom component), **you must**:\n  1. Assign an **`id`** to that element (or a nested element), and\n  2. Pass that **same `id`** as the `aria-labelledby` prop to the `Modal`.\n\nThis ensures that assistive technologies know which element is the modal's title.\n@see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)",
-        "name": "title",
-        "required": true,
+        "description": "The maximum height of the dropdown menu.",
+        "name": "maxMenuHeight",
+        "required": false,
         "type": {
-          "name": "any"
+          "name": "number"
         }
       },
-      "description": {
+      "isMenuOpen": {
         "defaultValue": null,
-        "description": "Descriptive text or content below the title.\n- If you pass a **string**, this will automatically set an internally generated `aria-describedby` on the parent Modal.\n- If you pass a **ReactNode** (e.g., a complex component), we recommend assigning an **`id`** to that component (or a nested element),\n  and then pass that same ID in `aria-describedby` to the **Modal** (overriding the internal ID).\n\nThis ensures that assistive technologies know which element is the modal's descriptive content.\n@see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)",
-        "name": "description",
+        "description": "If true, controls the menu open state.",
+        "name": "isMenuOpen",
         "required": false,
         "type": {
-          "name": "any"
+          "name": "boolean"
         }
       },
-      "descriptionIcon": {
+      "closeMenuOnSelect": {
         "defaultValue": null,
-        "description": "Icon to display before the description. Can only be passed when description is supplied.",
-        "name": "descriptionIcon",
+        "description": "If true, closes the menu when an option is selected.",
+        "name": "closeMenuOnSelect",
         "required": false,
         "type": {
-          "name": "SubIcon | { name: SubIcon; className?: string; }"
+          "name": "boolean"
         }
       },
-      "className": {
+      "autoFocus": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "If true, the dropdown menu will be auto focused.",
+        "name": "autoFocus",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "data-testid": {
+      "clearable": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "If true, the dropdown will have a clear button.",
+        "name": "clearable",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "id": {
+      "onBlur": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "Callback fired when the dropdown loses focus.",
+        "name": "onBlur",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(event: React.FocusEvent<HTMLDivElement>) => void"
         }
-      }
-    },
-    "import": "import { ModalHeader } from \"@vibe/core/next\"",
-    "parentComponent": "Modal",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/Modal/ModalContent/ModalContent.tsx",
-    "aggregator": "next",
-    "symbols": [
-      "default as ModalContent",
-      "type ModalContentProps"
-    ],
-    "displayName": "ModalContent",
-    "description": "",
-    "props": {
-      "children": {
+      },
+      "onClear": {
         "defaultValue": null,
-        "description": "The main content of the modal.",
-        "name": "children",
+        "description": "Callback fired when the clear button is clicked.",
+        "name": "onClear",
         "required": false,
         "type": {
-          "name": "React.ReactNode"
+          "name": "() => void"
         }
       },
-      "className": {
+      "onFocus": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "Callback fired when the dropdown gains focus.",
+        "name": "onFocus",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(event: React.FocusEvent<HTMLDivElement>) => void"
         }
       },
-      "data-testid": {
+      "onInputChange": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "Callback fired when the dropdown input value changes.",
+        "name": "onInputChange",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(input: string) => void"
         }
       },
-      "id": {
+      "onKeyDown": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "Callback fired when a key is pressed inside the dropdown.",
+        "name": "onKeyDown",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(event: React.KeyboardEvent<HTMLDivElement>) => void"
         }
-      }
-    },
-    "import": "import { ModalContent } from \"@vibe/core/next\"",
-    "parentComponent": "Modal",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/Modal/ModalMedia/ModalMedia.tsx",
-    "aggregator": "next",
-    "symbols": [
-      "default as ModalMedia",
-      "type ModalMediaProps"
-    ],
-    "displayName": "ModalMedia",
-    "description": "",
-    "props": {
-      "children": {
+      },
+      "onMenuOpen": {
         "defaultValue": null,
-        "description": "The media content displayed in the modal.",
-        "name": "children",
-        "required": true,
+        "description": "Callback fired when the dropdown menu opens.",
+        "name": "onMenuOpen",
+        "required": false,
         "type": {
-          "name": "React.ReactNode"
+          "name": "() => void"
         }
       },
-      "className": {
+      "onMenuClose": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "Callback fired when the dropdown menu closes.",
+        "name": "onMenuClose",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "() => void"
         }
       },
-      "data-testid": {
+      "onOptionSelect": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "Callback fired when an option is selected.",
+        "name": "onOptionSelect",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(option: Item) => void"
         }
       },
-      "id": {
+      "onScroll": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "Callback fired when scrolling inside the dropdown.",
+        "name": "onScroll",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(event: React.UIEvent<HTMLUListElement>) => void"
         }
-      }
-    },
-    "import": "import { ModalMedia } from \"@vibe/core/next\"",
-    "parentComponent": "Modal",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/next/AttentionBox/AttentionBox.tsx",
-    "aggregator": "next",
-    "symbols": [
-      "default as AttentionBox",
-      "AttentionBoxProps",
-      "AttentionBoxType"
-    ],
-    "displayName": "AttentionBox",
-    "description": "",
-    "props": {
-      "className": {
+      },
+      "filterOption": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "A function to customize the filtering of options.\nIt receives an option and the current input value, and should return true if the option should be included, false otherwise.",
+        "name": "filterOption",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(option: Item, inputValue: string) => boolean"
         }
       },
-      "data-testid": {
+      "showSelectedOptions": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "If false, selected options will be hidden from the list. Defaults to true.",
+        "name": "showSelectedOptions",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "id": {
+      "menuWrapperClassName": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "The class name to be applied to the menu wrapper.",
+        "name": "menuWrapperClassName",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "text": {
+      "loading": {
         "defaultValue": null,
-        "description": "The main text content",
-        "name": "text",
+        "description": "If true, displays a loading indicator in the dropdown controls.",
+        "name": "loading",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "children": {
+      "multi": {
         "defaultValue": null,
-        "description": "Custom children to override the default text content",
-        "name": "children",
+        "description": "If true, the dropdown allows multiple selections.\nIf true, the dropdown allows multiple selections. Defaults to false.",
+        "name": "multi",
         "required": false,
         "type": {
-          "name": "ReactNode"
+          "name": "boolean"
         }
       },
-      "compact": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "When true, the attention box will be displayed in compact mode of one-liner",
-        "name": "compact",
+      "multiline": {
+        "defaultValue": null,
+        "description": "If true, the dropdown allows multiple lines of selected items. (Not available for single select)",
+        "name": "multiline",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "title": {
+      "onOptionRemove": {
         "defaultValue": null,
-        "description": "The title of the attention box",
-        "name": "title",
+        "description": "Callback fired when an option is removed in multi-select mode. Only available when multi is true.\nCallback fired when an option is removed in multi-select mode. (Not available for single select)",
+        "name": "onOptionRemove",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(option: Item) => void"
         }
       },
-      "type": {
-        "defaultValue": {
-          "value": "primary"
-        },
-        "description": "The variant type of the attention box",
-        "name": "type",
+      "valueRenderer": {
+        "defaultValue": null,
+        "description": "The function to call to render the selected value on single select mode.",
+        "name": "valueRenderer",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "AttentionBoxType",
-          "value": [
-            {
-              "value": "\"primary\""
-            },
-            {
-              "value": "\"positive\""
-            },
-            {
-              "value": "\"negative\""
-            },
-            {
-              "value": "\"warning\""
-            },
-            {
-              "value": "\"neutral\""
-            }
-          ]
+          "name": "(option: Item) => React.ReactNode"
         }
       },
-      "iconType": {
-        "defaultValue": {
-          "value": "svg"
-        },
-        "description": "The type of the icon",
-        "name": "iconType",
-        "required": false,
-        "type": {
-          "name": "enum",
-          "raw": "IconType",
-          "value": [
-            {
-              "value": "\"svg\""
-            },
-            {
-              "value": "\"font\""
-            },
-            {
-              "value": "\"src\""
-            }
-          ]
-        }
-      },
-      "icon": {
-        "defaultValue": null,
-        "description": "The icon to display. Pass `false` to hide the icon entirely, or omit to use the default icon for the type.",
-        "name": "icon",
-        "required": false,
-        "type": {
-          "name": "false | SubIcon"
-        }
-      },
-      "onClose": {
+      "defaultValue": {
         "defaultValue": null,
-        "description": "Callback when the close button is clicked",
-        "name": "onClose",
+        "description": "The default selected values for multi-select.\nThe default selected value for single-select.",
+        "name": "defaultValue",
         "required": false,
         "type": {
-          "name": "(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void"
+          "name": "BaseListItemData<Record<string, unknown>> | Item[]"
         }
       },
-      "closeButtonAriaLabel": {
+      "value": {
         "defaultValue": null,
-        "description": "Custom aria label for the close button",
-        "name": "closeButtonAriaLabel",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "animate": {
-        "defaultValue": {
-          "value": "true"
-        },
-        "description": "Whether to animate the entrance",
-        "name": "animate",
+        "description": "The controlled selected values for multi-select.\nThe controlled selected value for single-select.",
+        "name": "value",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "BaseListItemData<Record<string, unknown>> | Item[]"
         }
       },
-      "action": {
+      "onChange": {
         "defaultValue": null,
-        "description": "Action button configuration",
-        "name": "action",
+        "description": "Callback fired when the selected values change in multi-select mode.\nCallback fired when the selected value changes in single-select mode.",
+        "name": "onChange",
         "required": false,
         "type": {
-          "name": "AttentionBoxButtonProps"
+          "name": "((options: Item[]) => void) | ((option: Item) => void)"
         }
       },
-      "link": {
+      "ref": {
         "defaultValue": null,
-        "description": "Link configuration",
-        "name": "link",
+        "description": "",
+        "name": "ref",
         "required": false,
         "type": {
-          "name": "Omit<LinkProps, \"inlineText\">"
+          "name": "React.ForwardedRef<HTMLDivElement>"
         }
       }
     },
-    "import": "import { AttentionBox } from \"@vibe/core/next\"",
+    "import": "import { Dropdown } from \"@vibe/core/next\"",
     "parentComponent": "next",
     "subComponents": []
   },
   {
-    "filePath": "src/components/next/Dropdown/Dropdown.tsx",
+    "filePath": "src/components/Modal/footers/ModalFooter/ModalFooter.tsx",
     "aggregator": "next",
     "symbols": [
-      "default as Dropdown",
-      "DropdownOption",
-      "DropdownGroupOption",
-      "BaseDropdownProps",
-      "DropdownSizes",
-      "DropdownDirection",
-      "DropdownMultiControllerProps",
-      "DropdownSingleControllerProps"
+      "default as ModalFooter",
+      "type ModalFooterProps"
     ],
-    "displayName": "Dropdown",
+    "displayName": "ModalFooter",
     "description": "",
     "props": {
+      "renderSideAction": {
+        "defaultValue": null,
+        "description": "Content displayed on the left side of the footer.",
+        "name": "renderSideAction",
+        "required": false,
+        "type": {
+          "name": "React.ReactNode"
+        }
+      },
+      "primaryButton": {
+        "defaultValue": null,
+        "description": "Props for the primary action button.",
+        "name": "primaryButton",
+        "required": true,
+        "type": {
+          "name": "ModalFooterActionProps"
+        }
+      },
+      "secondaryButton": {
+        "defaultValue": null,
+        "description": "Props for the optional secondary action button.",
+        "name": "secondaryButton",
+        "required": false,
+        "type": {
+          "name": "ModalFooterActionProps"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "A CSS class name to apply to the component.",
@@ -20150,466 +19984,643 @@
         "type": {
           "name": "string"
         }
-      },
-      "options": {
+      }
+    },
+    "import": "import { ModalFooter } from \"@vibe/core/next\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as ModalFooterWizard",
+      "type ModalFooterWizardProps"
+    ],
+    "displayName": "ModalFooterWizard",
+    "description": "",
+    "props": {
+      "stepCount": {
         "defaultValue": null,
-        "description": "The list of options available in the list.",
-        "name": "options",
+        "description": "The total number of steps in the wizard.\nRenders the corresponding number of step indicators (\"dots\") in the footer.",
+        "name": "stepCount",
         "required": true,
         "type": {
-          "name": "DropdownGroupOption<Item>"
+          "name": "number"
         }
       },
-      "tooltipProps": {
+      "activeStep": {
         "defaultValue": null,
-        "description": "Props to be passed to the Tooltip component that wraps the dropdown.",
-        "name": "tooltipProps",
-        "required": false,
+        "description": "The current active step (0-based index).\nHighlights the corresponding step indicator (\"dot\") in the footer.",
+        "name": "activeStep",
+        "required": true,
         "type": {
-          "name": "Partial<TooltipProps>"
+          "name": "number"
         }
       },
-      "withGroupDivider": {
+      "onStepClick": {
         "defaultValue": null,
-        "description": "If true, displays dividers between grouped options.",
-        "name": "withGroupDivider",
-        "required": false,
+        "description": "Callback fired when a step indicator (\"dot\") is clicked.",
+        "name": "onStepClick",
+        "required": true,
         "type": {
-          "name": "boolean"
+          "name": "(stepIndex: number) => void"
         }
       },
-      "stickyGroupTitle": {
+      "primaryButton": {
         "defaultValue": null,
-        "description": "If true, makes the group title sticky.",
-        "name": "stickyGroupTitle",
-        "required": false,
+        "description": "Props for the primary action button.",
+        "name": "primaryButton",
+        "required": true,
         "type": {
-          "name": "boolean"
+          "name": "ModalFooterActionProps"
         }
       },
-      "size": {
+      "secondaryButton": {
         "defaultValue": null,
-        "description": "The size of the dropdown.",
-        "name": "size",
+        "description": "Props for the optional secondary action button.",
+        "name": "secondaryButton",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "DropdownSizes",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"large\""
-            }
-          ]
+          "name": "ModalFooterActionProps"
         }
       },
-      "dir": {
+      "className": {
         "defaultValue": null,
-        "description": "The direction of the dropdown.",
-        "name": "dir",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "DropdownDirection",
-          "value": [
-            {
-              "value": "\"ltr\""
-            },
-            {
-              "value": "\"rtl\""
-            },
-            {
-              "value": "\"auto\""
-            }
-          ]
+          "name": "string"
         }
       },
-      "searchable": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "If true, the dropdown is searchable.",
-        "name": "searchable",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "optionRenderer": {
+      "id": {
         "defaultValue": null,
-        "description": "The function to call to render an option.",
-        "name": "optionRenderer",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "(option: Item) => React.ReactNode"
+          "name": "string"
         }
-      },
-      "menuRenderer": {
+      }
+    },
+    "import": "import { ModalFooterWizard } from \"@vibe/core/next\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as ModalBasicLayout",
+      "type ModalBasicLayoutProps"
+    ],
+    "displayName": "ModalBasicLayout",
+    "description": "",
+    "props": {
+      "children": {
         "defaultValue": null,
-        "description": "The function to call to render the menu.",
-        "name": "menuRenderer",
-        "required": false,
+        "description": "The content of the layout, structured as:\n1. Header content\n2. Main content",
+        "name": "children",
+        "required": true,
         "type": {
-          "name": "(props: { children: React.ReactNode; filteredOptions: ListGroup<Item>[]; selectedItems: Item[]; getItemProps: (options: any) => Record<string, unknown>; }) => React.ReactNode"
+          "name": "React.ReactNode"
         }
       },
-      "noOptionsMessage": {
+      "className": {
         "defaultValue": null,
-        "description": "The message to display when there are no options.",
-        "name": "noOptionsMessage",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "any"
+          "name": "string"
         }
       },
-      "placeholder": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "The placeholder to display when the dropdown is empty.",
-        "name": "placeholder",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "disabled": {
+      "id": {
         "defaultValue": null,
-        "description": "If true, the dropdown is disabled.",
-        "name": "disabled",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { ModalBasicLayout } from \"@vibe/core/next\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as ModalMediaLayout",
+      "type ModalMediaLayoutProps"
+    ],
+    "displayName": "ModalMediaLayout",
+    "description": "",
+    "props": {
+      "children": {
+        "defaultValue": null,
+        "description": "The content of the layout, structured as:\n1. Media content\n2. Header content\n3. Main content",
+        "name": "children",
+        "required": true,
+        "type": {
+          "name": "React.ReactNode"
         }
       },
-      "readOnly": {
+      "className": {
         "defaultValue": null,
-        "description": "If true, the dropdown is read only.",
-        "name": "readOnly",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "error": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "If true, the dropdown is in an error state.",
-        "name": "error",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "helperText": {
+      "id": {
         "defaultValue": null,
-        "description": "The helper text to display below the dropdown.",
-        "name": "helperText",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
           "name": "string"
         }
+      }
+    },
+    "import": "import { ModalMediaLayout } from \"@vibe/core/next\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as ModalSideBySideLayout",
+      "type ModalSideBySideLayoutProps"
+    ],
+    "displayName": "ModalSideBySideLayout",
+    "description": "",
+    "props": {
+      "children": {
+        "defaultValue": null,
+        "description": "The content of the layout, structured as:\n1. Header content\n2. Main content\n3. Media content",
+        "name": "children",
+        "required": true,
+        "type": {
+          "name": "React.ReactNode"
+        }
       },
-      "required": {
+      "className": {
         "defaultValue": null,
-        "description": "If true, the dropdown is required.",
-        "name": "required",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "label": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "The label to display above the dropdown.",
-        "name": "label",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "ariaLabel": {
+      "id": {
         "defaultValue": null,
-        "description": "The ARIA label for the dropdown.",
-        "name": "ariaLabel",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
           "name": "string"
         }
+      }
+    },
+    "import": "import { ModalSideBySideLayout } from \"@vibe/core/next\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Modal/Modal/Modal.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as Modal"
+    ],
+    "displayName": "Modal",
+    "description": "",
+    "props": {
+      "id": {
+        "defaultValue": null,
+        "description": "Unique identifier for the modal.",
+        "name": "id",
+        "required": true,
+        "type": {
+          "name": "string"
+        }
       },
-      "inputAriaLabel": {
+      "show": {
         "defaultValue": null,
-        "description": "The ARIA label for the dropdown input.",
-        "name": "inputAriaLabel",
+        "description": "Controls the visibility of the modal.",
+        "name": "show",
+        "required": true,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "size": {
+        "defaultValue": {
+          "value": "medium"
+        },
+        "description": "Determines the width and max-height of the modal.",
+        "name": "size",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "enum",
+          "raw": "ModalSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"full-view\""
+            }
+          ]
         }
       },
-      "menuAriaLabel": {
+      "closeButtonTheme": {
         "defaultValue": null,
-        "description": "The ARIA label for the menu container.",
-        "name": "menuAriaLabel",
+        "description": "Theme color for the close button.",
+        "name": "closeButtonTheme",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "enum",
+          "raw": "ModalTopActionsTheme",
+          "value": [
+            {
+              "value": "\"dark\""
+            },
+            {
+              "value": "\"light\""
+            }
+          ]
         }
       },
-      "clearAriaLabel": {
+      "closeButtonAriaLabel": {
         "defaultValue": null,
-        "description": "The ARIA label for the clear button.",
-        "name": "clearAriaLabel",
+        "description": "Accessibility label for the close button.",
+        "name": "closeButtonAriaLabel",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "inputValue": {
+      "onClose": {
+        "defaultValue": {
+          "value": "() => {}"
+        },
+        "description": "Callback fired when the modal should close.",
+        "name": "onClose",
+        "required": false,
+        "type": {
+          "name": "(event: any) => void"
+        }
+      },
+      "autoFocus": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "This is intended for advanced use-cases.\nIt allows you to control the default focus behavior when the modal mounts.\nMake sure to use this prop only when you understand the implications.\n\nDetermines if focus should automatically move to the first focusable element when the component mounts.\nWhen set to `false` - disables the automatic focus behavior.\n- Notice this might break keyboard and general accessibility and should be used with caution.",
+        "name": "autoFocus",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "allowFocusEscapeTo": {
         "defaultValue": null,
-        "description": "The current value of the input field.",
-        "name": "inputValue",
+        "description": "Specifies elements/containers that should be allowed to receive focus outside this modal.\nWhen focus moves to these elements, the focus lock will ignore them.\nThis allows other UI components (tooltips, dropdowns, nested modals, etc.) to receive focus.\n\nAccepts:\n- CSS selectors (string)\n- Refs to elements (React.RefObject<HTMLElement>)\n- Direct element references (HTMLElement)",
+        "name": "allowFocusEscapeTo",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "any[]"
         }
       },
-      "maxMenuHeight": {
+      "onFocusAttempt": {
         "defaultValue": null,
-        "description": "The maximum height of the dropdown menu.",
-        "name": "maxMenuHeight",
+        "description": "This is intended for advanced use-cases.\nIt allows you to control which elements the focus lock should manage.\nMake sure to use this prop only when you understand the implications.\n\n**Note:** If you only need to allow focus to specific selectors, use `allowFocusEscapeTo` instead.\n\nCalled whenever focus is attempting to move to any element (inside or outside the modal).\nReturn:\n- `true` to let focus-lock **manage** this element (keep it within the modal's focus trap).\n- `false` to let focus-lock **ignore** this element (allow focus to move outside the modal).\n- An HTMLElement to redirect focus to that element instead.\n- Any other value (e.g., null, undefined) would act as `false`.\n@example // Complex custom logic\n<Modal\n  onFocusAttempt={(el) => {\n    if (el?.dataset.customBehavior) return false;\n    return true;\n  }}\n/>",
+        "name": "onFocusAttempt",
         "required": false,
         "type": {
-          "name": "number"
+          "name": "(nextFocusedElement?: HTMLElement) => boolean | HTMLElement"
         }
       },
-      "isMenuOpen": {
+      "renderHeaderAction": {
         "defaultValue": null,
-        "description": "If true, controls the menu open state.",
-        "name": "isMenuOpen",
+        "description": "Additional action to render in the header area.",
+        "name": "renderHeaderAction",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "any"
         }
       },
-      "closeMenuOnSelect": {
+      "anchorElementRef": {
         "defaultValue": null,
-        "description": "If true, closes the menu when an option is selected.",
-        "name": "closeMenuOnSelect",
+        "description": "Reference to an element that triggered the modal, used for animations.",
+        "name": "anchorElementRef",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "React.RefObject<HTMLElement>"
         }
       },
-      "autoFocus": {
+      "alertModal": {
         "defaultValue": null,
-        "description": "If true, the dropdown menu will be auto focused.",
-        "name": "autoFocus",
+        "description": "When true, prevents closing the modal when clicking the overlay (\"click-outside\") or pressing ESC.",
+        "name": "alertModal",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "clearable": {
-        "defaultValue": null,
-        "description": "If true, the dropdown will have a clear button.",
-        "name": "clearable",
+      "container": {
+        "defaultValue": {
+          "value": "document.body"
+        },
+        "description": "The target element to render the modal into.",
+        "name": "container",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "any"
         }
       },
-      "onBlur": {
+      "children": {
         "defaultValue": null,
-        "description": "Callback fired when the dropdown loses focus.",
-        "name": "onBlur",
-        "required": false,
+        "description": "Modal content.",
+        "name": "children",
+        "required": true,
         "type": {
-          "name": "(event: React.FocusEvent<HTMLDivElement>) => void"
+          "name": "React.ReactNode"
         }
       },
-      "onClear": {
+      "style": {
         "defaultValue": null,
-        "description": "Callback fired when the clear button is clicked.",
-        "name": "onClear",
+        "description": "Additional inline styles for the modal.",
+        "name": "style",
         "required": false,
         "type": {
-          "name": "() => void"
+          "name": "React.CSSProperties"
         }
       },
-      "onFocus": {
+      "zIndex": {
         "defaultValue": null,
-        "description": "Callback fired when the dropdown gains focus.",
-        "name": "onFocus",
+        "description": "The z-index to be used for the modal and overlay.",
+        "name": "zIndex",
         "required": false,
         "type": {
-          "name": "(event: React.FocusEvent<HTMLDivElement>) => void"
+          "name": "number"
         }
       },
-      "onInputChange": {
+      "aria-labelledby": {
         "defaultValue": null,
-        "description": "Callback fired when the dropdown input value changes.",
-        "name": "onInputChange",
+        "description": "If provided, overrides the automatically generated aria-labelledby, that is assigned when used with ModalHeader.",
+        "name": "aria-labelledby",
         "required": false,
         "type": {
-          "name": "(input: string) => void"
+          "name": "string"
         }
       },
-      "onKeyDown": {
+      "aria-describedby": {
         "defaultValue": null,
-        "description": "Callback fired when a key is pressed inside the dropdown.",
-        "name": "onKeyDown",
+        "description": "If provided, overrides the automatically generated aria-describedby, that is assigned when used with ModalHeader.",
+        "name": "aria-describedby",
         "required": false,
         "type": {
-          "name": "(event: React.KeyboardEvent<HTMLDivElement>) => void"
+          "name": "string"
         }
       },
-      "onMenuOpen": {
+      "className": {
         "defaultValue": null,
-        "description": "Callback fired when the dropdown menu opens.",
-        "name": "onMenuOpen",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "() => void"
+          "name": "string"
         }
       },
-      "onMenuClose": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "Callback fired when the dropdown menu closes.",
-        "name": "onMenuClose",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "() => void"
+          "name": "string"
         }
-      },
-      "onOptionSelect": {
+      }
+    },
+    "import": "import { Modal } from \"@vibe/core/next\"",
+    "subComponents": [
+      "Modal.types"
+    ]
+  },
+  {
+    "filePath": "src/components/Modal/ModalHeader/ModalHeader.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as ModalHeader",
+      "type ModalHeaderProps"
+    ],
+    "displayName": "ModalHeader",
+    "description": "",
+    "props": {
+      "title": {
         "defaultValue": null,
-        "description": "Callback fired when an option is selected.",
-        "name": "onOptionSelect",
-        "required": false,
+        "description": "Main heading text of the modal.\n\n- If you pass a **string**, `ModalHeader` will generate an internal ID and communicate it to the parent `Modal`\n  so that `aria-labelledby` is set automatically (unless `Modal` receives `aria-labelledby` prop).\n- If you pass a **ReactNode** (such as a custom component), **you must**:\n  1. Assign an **`id`** to that element (or a nested element), and\n  2. Pass that **same `id`** as the `aria-labelledby` prop to the `Modal`.\n\nThis ensures that assistive technologies know which element is the modal's title.\n@see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)",
+        "name": "title",
+        "required": true,
         "type": {
-          "name": "(option: Item) => void"
+          "name": "any"
         }
       },
-      "onScroll": {
+      "description": {
         "defaultValue": null,
-        "description": "Callback fired when scrolling inside the dropdown.",
-        "name": "onScroll",
+        "description": "Descriptive text or content below the title.\n- If you pass a **string**, this will automatically set an internally generated `aria-describedby` on the parent Modal.\n- If you pass a **ReactNode** (e.g., a complex component), we recommend assigning an **`id`** to that component (or a nested element),\n  and then pass that same ID in `aria-describedby` to the **Modal** (overriding the internal ID).\n\nThis ensures that assistive technologies know which element is the modal's descriptive content.\n@see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)",
+        "name": "description",
         "required": false,
         "type": {
-          "name": "(event: React.UIEvent<HTMLUListElement>) => void"
+          "name": "any"
         }
       },
-      "filterOption": {
+      "descriptionIcon": {
         "defaultValue": null,
-        "description": "A function to customize the filtering of options.\nIt receives an option and the current input value, and should return true if the option should be included, false otherwise.",
-        "name": "filterOption",
+        "description": "Icon to display before the description. Can only be passed when description is supplied.",
+        "name": "descriptionIcon",
         "required": false,
         "type": {
-          "name": "(option: Item, inputValue: string) => boolean"
+          "name": "SubIcon | { name: SubIcon; className?: string; }"
         }
       },
-      "showSelectedOptions": {
+      "className": {
         "defaultValue": null,
-        "description": "If false, selected options will be hidden from the list. Defaults to true.",
-        "name": "showSelectedOptions",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "menuWrapperClassName": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "The class name to be applied to the menu wrapper.",
-        "name": "menuWrapperClassName",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "loading": {
+      "id": {
         "defaultValue": null,
-        "description": "If true, displays a loading indicator in the dropdown controls.",
-        "name": "loading",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
-      },
-      "multi": {
+      }
+    },
+    "import": "import { ModalHeader } from \"@vibe/core/next\"",
+    "parentComponent": "Modal",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Modal/ModalContent/ModalContent.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as ModalContent",
+      "type ModalContentProps"
+    ],
+    "displayName": "ModalContent",
+    "description": "",
+    "props": {
+      "children": {
         "defaultValue": null,
-        "description": "If true, the dropdown allows multiple selections.\nIf true, the dropdown allows multiple selections. Defaults to false.",
-        "name": "multi",
+        "description": "The main content of the modal.",
+        "name": "children",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "React.ReactNode"
         }
       },
-      "multiline": {
+      "className": {
         "defaultValue": null,
-        "description": "If true, the dropdown allows multiple lines of selected items. (Not available for single select)",
-        "name": "multiline",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "onOptionRemove": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "Callback fired when an option is removed in multi-select mode. Only available when multi is true.\nCallback fired when an option is removed in multi-select mode. (Not available for single select)",
-        "name": "onOptionRemove",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "(option: Item) => void"
+          "name": "string"
         }
       },
-      "valueRenderer": {
+      "id": {
         "defaultValue": null,
-        "description": "The function to call to render the selected value on single select mode.",
-        "name": "valueRenderer",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "(option: Item) => React.ReactNode"
+          "name": "string"
         }
-      },
-      "defaultValue": {
+      }
+    },
+    "import": "import { ModalContent } from \"@vibe/core/next\"",
+    "parentComponent": "Modal",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Modal/ModalMedia/ModalMedia.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as ModalMedia",
+      "type ModalMediaProps"
+    ],
+    "displayName": "ModalMedia",
+    "description": "",
+    "props": {
+      "children": {
         "defaultValue": null,
-        "description": "The default selected values for multi-select.\nThe default selected value for single-select.",
-        "name": "defaultValue",
-        "required": false,
+        "description": "The media content displayed in the modal.",
+        "name": "children",
+        "required": true,
         "type": {
-          "name": "BaseListItemData<Record<string, unknown>> | Item[]"
+          "name": "React.ReactNode"
         }
       },
-      "value": {
+      "className": {
         "defaultValue": null,
-        "description": "The controlled selected values for multi-select.\nThe controlled selected value for single-select.",
-        "name": "value",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "BaseListItemData<Record<string, unknown>> | Item[]"
+          "name": "string"
         }
       },
-      "onChange": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "Callback fired when the selected values change in multi-select mode.\nCallback fired when the selected value changes in single-select mode.",
-        "name": "onChange",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "((options: Item[]) => void) | ((option: Item) => void)"
+          "name": "string"
         }
       },
-      "ref": {
+      "id": {
         "defaultValue": null,
-        "description": "",
-        "name": "ref",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "React.ForwardedRef<HTMLDivElement>"
+          "name": "string"
         }
       }
     },
-    "import": "import { Dropdown } from \"@vibe/core/next\"",
-    "parentComponent": "next",
+    "import": "import { ModalMedia } from \"@vibe/core/next\"",
+    "parentComponent": "Modal",
     "subComponents": []
   }
 ]