@vibe/core 3.74.0-alpha-10c01.0 → 3.74.0-alpha-f7c48.0

package/dist/metadata.json

@@ -2881,49 +2881,103 @@
     "subComponents": []
   },
   {
-    "filePath": "src/components/ButtonGroup/ButtonGroup.tsx",
+    "filePath": "src/Button/Button.tsx",
     "aggregator": "core",
     "symbols": [
-      "default as ButtonGroup",
-      "type ButtonGroupProps"
+      "default as Button",
+      "type ButtonProps",
+      "ButtonType",
+      "ButtonInputType",
+      "ButtonColor",
+      "ButtonSize"
     ],
-    "displayName": "ButtonGroup",
+    "displayName": "Button",
     "description": "",
     "props": {
-      "options": {
+      "className": {
         "defaultValue": null,
-        "description": "The list of button options.",
-        "name": "options",
-        "required": true,
+        "description": "Custom class names to pass to the component",
+        "name": "className",
+        "required": false,
         "type": {
-          "name": "ButtonGroupOption[]"
+          "name": "string"
         }
       },
-      "value": {
+      "activeButtonClassName": {
+        "defaultValue": null,
+        "description": "",
+        "name": "activeButtonClassName",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "kind": {
         "defaultValue": {
-          "value": ""
+          "value": "primary"
         },
-        "description": "The currently selected button value.",
-        "name": "value",
+        "description": "The button's kind",
+        "name": "kind",
         "required": false,
         "type": {
-          "name": "ButtonValue"
+          "name": "enum",
+          "raw": "ButtonType",
+          "value": [
+            {
+              "value": "\"primary\""
+            },
+            {
+              "value": "\"secondary\""
+            },
+            {
+              "value": "\"tertiary\""
+            }
+          ]
         }
       },
-      "onSelect": {
+      "onClick": {
         "defaultValue": null,
-        "description": "Callback fired when a button is selected.",
-        "name": "onSelect",
+        "description": "Callback function to run when the button is clicked",
+        "name": "onClick",
         "required": false,
         "type": {
-          "name": "(value: ButtonValue, name: string) => void"
+          "name": "(event: React.MouseEvent<HTMLButtonElement>) => void"
+        }
+      },
+      "onMouseDown": {
+        "defaultValue": null,
+        "description": "",
+        "name": "onMouseDown",
+        "required": false,
+        "type": {
+          "name": "(event: React.MouseEvent<HTMLButtonElement>) => void"
+        }
+      },
+      "blurOnMouseUp": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Blur on button click",
+        "name": "blurOnMouseUp",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "name": {
+        "defaultValue": null,
+        "description": "Name of the button - for form submit usages",
+        "name": "name",
+        "required": false,
+        "type": {
+          "name": "string"
         }
       },
       "size": {
         "defaultValue": {
-          "value": "small"
+          "value": "medium"
         },
-        "description": "The size of the buttons.",
+        "description": "The button's size",
         "name": "size",
         "required": false,
         "type": {
@@ -2948,204 +3002,209 @@
           ]
         }
       },
-      "kind": {
+      "color": {
         "defaultValue": {
-          "value": "secondary"
+          "value": "primary"
         },
-        "description": "The style variant of the buttons.",
-        "name": "kind",
+        "description": "The button's color",
+        "name": "color",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "\"secondary\" | \"tertiary\"",
+          "raw": "ButtonColor",
           "value": [
             {
-              "value": "\"secondary\""
+              "value": "\"primary\""
             },
             {
-              "value": "\"tertiary\""
+              "value": "\"positive\""
+            },
+            {
+              "value": "\"negative\""
+            },
+            {
+              "value": "\"inverted\""
+            },
+            {
+              "value": "\"on-primary-color\""
+            },
+            {
+              "value": "\"on-inverted-background\""
+            },
+            {
+              "value": "\"brand\""
+            },
+            {
+              "value": "\"fixed-light\""
+            },
+            {
+              "value": "\"fixed-dark\""
             }
           ]
         }
       },
-      "name": {
+      "type": {
         "defaultValue": {
-          "value": ""
+          "value": "button"
         },
-        "description": "The name of the button group.",
-        "name": "name",
+        "description": "The button's type",
+        "name": "type",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "enum",
+          "raw": "ButtonInputType",
+          "value": [
+            {
+              "value": "\"button\""
+            },
+            {
+              "value": "\"submit\""
+            },
+            {
+              "value": "\"reset\""
+            }
+          ]
         }
       },
       "disabled": {
         "defaultValue": {
           "value": "false"
         },
-        "description": "If true, disables all buttons in the group.",
+        "description": "Whether the button should be disabled or not",
         "name": "disabled",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "groupAriaLabel": {
+      "rightIcon": {
         "defaultValue": {
-          "value": ""
+          "value": "null"
         },
-        "description": "The label of the button group for accessibility.",
-        "name": "groupAriaLabel",
+        "description": "Icon to place on the right",
+        "name": "rightIcon",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "SubIcon"
         }
       },
-      "tooltipPosition": {
-        "defaultValue": null,
-        "description": "The position of the tooltip relative to the button.",
-        "name": "tooltipPosition",
+      "leftIcon": {
+        "defaultValue": {
+          "value": "null"
+        },
+        "description": "Icon to place on the left",
+        "name": "leftIcon",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "TooltipPositions",
-          "value": [
-            {
-              "value": "\"top\""
-            },
-            {
-              "value": "\"right\""
-            },
-            {
-              "value": "\"bottom\""
-            },
-            {
-              "value": "\"left\""
-            }
-          ]
+          "name": "SubIcon"
         }
       },
-      "tooltipHideDelay": {
-        "defaultValue": null,
-        "description": "The delay in milliseconds before the tooltip hides.",
-        "name": "tooltipHideDelay",
+      "success": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "the success props are used when you have async action and wants to display a success message",
+        "name": "success",
         "required": false,
         "type": {
-          "name": "number"
+          "name": "boolean"
         }
       },
-      "tooltipShowDelay": {
-        "defaultValue": null,
-        "description": "The delay in milliseconds before the tooltip shows.",
-        "name": "tooltipShowDelay",
+      "successIcon": {
+        "defaultValue": {
+          "value": "null"
+        },
+        "description": "Success icon name",
+        "name": "successIcon",
         "required": false,
         "type": {
-          "name": "number"
+          "name": "SubIcon"
         }
       },
-      "tooltipContainerSelector": {
-        "defaultValue": null,
-        "description": "CSS selector for the tooltip container.",
-        "name": "tooltipContainerSelector",
+      "successText": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "Success text",
+        "name": "successText",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "tooltipMoveBy": {
+      "loading": {
         "defaultValue": null,
-        "description": "Adjusts the tooltip position.",
-        "name": "tooltipMoveBy",
+        "description": "loading boolean which switches the text to a loader",
+        "name": "loading",
         "required": false,
         "type": {
-          "name": "MoveBy"
+          "name": "boolean"
         }
       },
-      "children": {
+      "loaderClassName": {
         "defaultValue": null,
-        "description": "The content inside the button group.",
-        "name": "children",
+        "description": "className which is applied to loader container *",
+        "name": "loaderClassName",
         "required": false,
         "type": {
-          "name": "React.ReactNode"
+          "name": "string"
         }
       },
-      "fullWidth": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "If true, makes the button group take the full width of its container.",
-        "name": "fullWidth",
+      "style": {
+        "defaultValue": null,
+        "description": "",
+        "name": "style",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "React.CSSProperties"
         }
       },
-      "blurOnMouseUp": {
+      "active": {
         "defaultValue": {
-          "value": "true"
+          "value": "false"
         },
-        "description": "If true, removes focus from the button after clicking.",
-        "name": "blurOnMouseUp",
+        "description": "displays the active state",
+        "name": "active",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "className": {
+      "id": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "id to pass to the button",
+        "name": "id",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "data-testid": {
-        "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+      "marginRight": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "adds 8px margin to the right",
+        "name": "marginRight",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "id": {
-        "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      }
-    },
-    "import": "import { ButtonGroup } from \"@vibe/core\"",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/Checkbox/Checkbox.tsx",
-    "aggregator": "core",
-    "symbols": [
-      "default as Checkbox",
-      "type CheckBoxProps as CheckboxProps"
-    ],
-    "displayName": "Checkbox",
-    "description": "",
-    "props": {
-      "checkboxClassName": {
-        "defaultValue": null,
-        "description": "Class name applied to the checkbox element.",
-        "name": "checkboxClassName",
+      "marginLeft": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "adds 8px margin to the left",
+        "name": "marginLeft",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "labelClassName": {
+      "ariaLabeledBy": {
         "defaultValue": null,
-        "description": "Class name applied to the label element.",
-        "name": "labelClassName",
+        "description": "element id to describe the button accordingly",
+        "name": "ariaLabeledBy",
         "required": false,
         "type": {
           "name": "string"
@@ -3153,135 +3212,135 @@
       },
       "ariaLabel": {
         "defaultValue": null,
-        "description": "The label of the checkbox for accessibility.",
+        "description": "aria label to provide important when providing only Icon",
         "name": "ariaLabel",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "label": {
+      "ariaHasPopup": {
         "defaultValue": null,
-        "description": "The content displayed next to the checkbox.",
-        "name": "label",
+        "description": "aria for a button popup",
+        "name": "ariaHasPopup",
         "required": false,
         "type": {
-          "name": "any"
+          "name": "React.HTMLProps<HTMLButtonElement>"
         }
       },
-      "ariaLabelledBy": {
+      "ariaExpanded": {
         "defaultValue": null,
-        "description": "The ID of an element describing the checkbox.",
-        "name": "ariaLabelledBy",
+        "description": "aria to be set if the popup is open",
+        "name": "ariaExpanded",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "onChange": {
+      "ariaControls": {
         "defaultValue": null,
-        "description": "Callback fired when the checkbox value changes.",
-        "name": "onChange",
+        "description": "aria controls - receives id for the controlled region",
+        "name": "ariaControls",
         "required": false,
         "type": {
-          "name": "(event: React.ChangeEvent<HTMLInputElement>) => void"
+          "name": "string"
         }
       },
-      "checked": {
+      "aria-describedby": {
         "defaultValue": null,
-        "description": "If true, controls the checked state of the checkbox.",
-        "name": "checked",
+        "description": "",
+        "name": "aria-describedby",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "indeterminate": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "If true, displays an indeterminate state.",
-        "name": "indeterminate",
+      "aria-hidden": {
+        "defaultValue": null,
+        "description": "aria to be used for screen reader to know if the button is hidden",
+        "name": "aria-hidden",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "Booleanish"
         }
       },
-      "autoFocus": {
+      "aria-pressed": {
         "defaultValue": null,
-        "description": "If true, the checkbox automatically receives focus.",
-        "name": "autoFocus",
+        "description": "Indicates the current \"pressed\" state of toggle buttons",
+        "name": "aria-pressed",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "boolean | \"true\" | \"false\" | \"mixed\""
         }
       },
-      "disabled": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "If true, the checkbox is disabled.",
-        "name": "disabled",
+      "onFocus": {
+        "defaultValue": null,
+        "description": "On Button Focus callback",
+        "name": "onFocus",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "(event: React.FocusEvent<HTMLButtonElement>) => void"
         }
       },
-      "defaultChecked": {
+      "onBlur": {
         "defaultValue": null,
-        "description": "The initial checked state of the checkbox.",
-        "name": "defaultChecked",
+        "description": "On Button Blur callback",
+        "name": "onBlur",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "(event: React.FocusEvent<HTMLButtonElement>) => void"
         }
       },
-      "value": {
+      "rightFlat": {
         "defaultValue": {
-          "value": ""
+          "value": "false"
         },
-        "description": "The value submitted with the form when checked.",
-        "name": "value",
+        "description": "",
+        "name": "rightFlat",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "name": {
+      "leftFlat": {
         "defaultValue": {
-          "value": ""
+          "value": "false"
         },
-        "description": "The name of the checkbox, used for form submission.",
-        "name": "name",
+        "description": "",
+        "name": "leftFlat",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "tabIndex": {
-        "defaultValue": null,
-        "description": "The tab order of the checkbox.",
-        "name": "tabIndex",
+      "preventClickAnimation": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "",
+        "name": "preventClickAnimation",
         "required": false,
         "type": {
-          "name": "number"
+          "name": "boolean"
         }
       },
-      "separateLabel": {
+      "noSidePadding": {
         "defaultValue": {
           "value": "false"
         },
-        "description": "If true, uses separate labels with htmlFor/id association instead of wrapping the input.\nIf using this the id prop is required for it to function correctly.",
-        "name": "separateLabel",
+        "description": "",
+        "name": "noSidePadding",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "className": {
-        "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+      "defaultTextColorOnPrimaryColor": {
+        "defaultValue": {
+          "value": "rgba(0, 0, 0, 0)"
+        },
+        "description": "default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...)",
+        "name": "defaultTextColorOnPrimaryColor",
         "required": false,
         "type": {
           "name": "string"
@@ -3296,74 +3355,514 @@
           "name": "string"
         }
       },
-      "id": {
+      "insetFocus": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Change the focus indicator from around the button to within it",
+        "name": "insetFocus",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "tabIndex": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "Specifies the tab order of an element",
+        "name": "tabIndex",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "number"
         }
       }
     },
-    "import": "import { Checkbox } from \"@vibe/core\"",
+    "import": "import { Button } from \"@vibe/button\"",
     "subComponents": []
   },
   {
-    "filePath": "src/components/Chips/Chips.tsx",
+    "filePath": "src/components/ButtonGroup/ButtonGroup.tsx",
     "aggregator": "core",
     "symbols": [
-      "default as Chips",
-      "type ChipsProps"
+      "default as ButtonGroup",
+      "type ButtonGroupProps"
     ],
-    "displayName": "Chips",
+    "displayName": "ButtonGroup",
     "description": "",
     "props": {
-      "label": {
-        "defaultValue": {
-          "value": ""
-        },
-        "description": "The text or content displayed inside the chip.",
-        "name": "label",
-        "required": false,
+      "options": {
+        "defaultValue": null,
+        "description": "The list of button options.",
+        "name": "options",
+        "required": true,
         "type": {
-          "name": "ElementContent"
+          "name": "ButtonGroupOption[]"
         }
       },
-      "disabled": {
+      "value": {
         "defaultValue": {
-          "value": "false"
+          "value": ""
         },
-        "description": "If true, the chip is disabled.",
-        "name": "disabled",
+        "description": "The currently selected button value.",
+        "name": "value",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "ButtonValue"
         }
       },
-      "readOnly": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "If true, the chip is read-only and cannot be deleted.",
-        "name": "readOnly",
+      "onSelect": {
+        "defaultValue": null,
+        "description": "Callback fired when a button is selected.",
+        "name": "onSelect",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "(value: ButtonValue, name: string) => void"
         }
       },
-      "rightRenderer": {
-        "defaultValue": null,
-        "description": "A React element displayed on the right side.",
-        "name": "rightRenderer",
+      "size": {
+        "defaultValue": {
+          "value": "small"
+        },
+        "description": "The size of the buttons.",
+        "name": "size",
         "required": false,
         "type": {
-          "name": "ElementContent"
-        }
-      },
-      "leftRenderer": {
-        "defaultValue": null,
-        "description": "A React element displayed on the left side.",
+          "name": "enum",
+          "raw": "ButtonSize",
+          "value": [
+            {
+              "value": "\"xxs\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"large\""
+            }
+          ]
+        }
+      },
+      "kind": {
+        "defaultValue": {
+          "value": "secondary"
+        },
+        "description": "The style variant of the buttons.",
+        "name": "kind",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"secondary\" | \"tertiary\"",
+          "value": [
+            {
+              "value": "\"secondary\""
+            },
+            {
+              "value": "\"tertiary\""
+            }
+          ]
+        }
+      },
+      "name": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "The name of the button group.",
+        "name": "name",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "disabled": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, disables all buttons in the group.",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "groupAriaLabel": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "The label of the button group for accessibility.",
+        "name": "groupAriaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "tooltipPosition": {
+        "defaultValue": null,
+        "description": "The position of the tooltip relative to the button.",
+        "name": "tooltipPosition",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "TooltipPositions",
+          "value": [
+            {
+              "value": "\"top\""
+            },
+            {
+              "value": "\"right\""
+            },
+            {
+              "value": "\"bottom\""
+            },
+            {
+              "value": "\"left\""
+            }
+          ]
+        }
+      },
+      "tooltipHideDelay": {
+        "defaultValue": null,
+        "description": "The delay in milliseconds before the tooltip hides.",
+        "name": "tooltipHideDelay",
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "tooltipShowDelay": {
+        "defaultValue": null,
+        "description": "The delay in milliseconds before the tooltip shows.",
+        "name": "tooltipShowDelay",
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "tooltipContainerSelector": {
+        "defaultValue": null,
+        "description": "CSS selector for the tooltip container.",
+        "name": "tooltipContainerSelector",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "tooltipMoveBy": {
+        "defaultValue": null,
+        "description": "Adjusts the tooltip position.",
+        "name": "tooltipMoveBy",
+        "required": false,
+        "type": {
+          "name": "MoveBy"
+        }
+      },
+      "children": {
+        "defaultValue": null,
+        "description": "The content inside the button group.",
+        "name": "children",
+        "required": false,
+        "type": {
+          "name": "React.ReactNode"
+        }
+      },
+      "fullWidth": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, makes the button group take the full width of its container.",
+        "name": "fullWidth",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "blurOnMouseUp": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "If true, removes focus from the button after clicking.",
+        "name": "blurOnMouseUp",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { ButtonGroup } from \"@vibe/core\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Checkbox/Checkbox.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as Checkbox",
+      "type CheckBoxProps as CheckboxProps"
+    ],
+    "displayName": "Checkbox",
+    "description": "",
+    "props": {
+      "checkboxClassName": {
+        "defaultValue": null,
+        "description": "Class name applied to the checkbox element.",
+        "name": "checkboxClassName",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "labelClassName": {
+        "defaultValue": null,
+        "description": "Class name applied to the label element.",
+        "name": "labelClassName",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ariaLabel": {
+        "defaultValue": null,
+        "description": "The label of the checkbox for accessibility.",
+        "name": "ariaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "label": {
+        "defaultValue": null,
+        "description": "The content displayed next to the checkbox.",
+        "name": "label",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "ariaLabelledBy": {
+        "defaultValue": null,
+        "description": "The ID of an element describing the checkbox.",
+        "name": "ariaLabelledBy",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "Callback fired when the checkbox value changes.",
+        "name": "onChange",
+        "required": false,
+        "type": {
+          "name": "(event: React.ChangeEvent<HTMLInputElement>) => void"
+        }
+      },
+      "checked": {
+        "defaultValue": null,
+        "description": "If true, controls the checked state of the checkbox.",
+        "name": "checked",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "indeterminate": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, displays an indeterminate state.",
+        "name": "indeterminate",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "autoFocus": {
+        "defaultValue": null,
+        "description": "If true, the checkbox automatically receives focus.",
+        "name": "autoFocus",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "disabled": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, the checkbox is disabled.",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "defaultChecked": {
+        "defaultValue": null,
+        "description": "The initial checked state of the checkbox.",
+        "name": "defaultChecked",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "value": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "The value submitted with the form when checked.",
+        "name": "value",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "name": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "The name of the checkbox, used for form submission.",
+        "name": "name",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "tabIndex": {
+        "defaultValue": null,
+        "description": "The tab order of the checkbox.",
+        "name": "tabIndex",
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "separateLabel": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, uses separate labels with htmlFor/id association instead of wrapping the input.\nIf using this the id prop is required for it to function correctly.",
+        "name": "separateLabel",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { Checkbox } from \"@vibe/core\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Chips/Chips.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as Chips",
+      "type ChipsProps"
+    ],
+    "displayName": "Chips",
+    "description": "",
+    "props": {
+      "label": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "The text or content displayed inside the chip.",
+        "name": "label",
+        "required": false,
+        "type": {
+          "name": "ElementContent"
+        }
+      },
+      "disabled": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, the chip is disabled.",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "readOnly": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, the chip is read-only and cannot be deleted.",
+        "name": "readOnly",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "rightRenderer": {
+        "defaultValue": null,
+        "description": "A React element displayed on the right side.",
+        "name": "rightRenderer",
+        "required": false,
+        "type": {
+          "name": "ElementContent"
+        }
+      },
+      "leftRenderer": {
+        "defaultValue": null,
+        "description": "A React element displayed on the left side.",
         "name": "leftRenderer",
         "required": false,
         "type": {
@@ -5766,17 +6265,6 @@
           "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.",
@@ -7870,94 +8358,301 @@
           ]
         }
       },
-      "color": {
+      "color": {
+        "defaultValue": null,
+        "description": "The text color.",
+        "name": "color",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "TypographyColor",
+          "value": [
+            {
+              "value": "\"inherit\""
+            },
+            {
+              "value": "\"primary\""
+            },
+            {
+              "value": "\"secondary\""
+            },
+            {
+              "value": "\"onPrimary\""
+            },
+            {
+              "value": "\"onInverted\""
+            },
+            {
+              "value": "\"fixedLight\""
+            },
+            {
+              "value": "\"fixedDark\""
+            },
+            {
+              "value": "\"negative\""
+            }
+          ]
+        }
+      },
+      "children": {
+        "defaultValue": null,
+        "description": "The content inside the heading.",
+        "name": "children",
+        "required": true,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "element": {
+        "defaultValue": null,
+        "description": "The HTML element tag used for the text component.",
+        "name": "element",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ellipsis": {
+        "defaultValue": null,
+        "description": "If true, truncates overflowing text with an ellipsis.",
+        "name": "ellipsis",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "maxLines": {
+        "defaultValue": null,
+        "description": "The maximum number of lines before truncating with an ellipsis.",
+        "name": "maxLines",
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "tooltipProps": {
+        "defaultValue": null,
+        "description": "Props passed to the tooltip displayed when hovering over the text.",
+        "name": "tooltipProps",
+        "required": false,
+        "type": {
+          "name": "Partial<TooltipProps>"
+        }
+      },
+      "withoutTooltip": {
+        "defaultValue": null,
+        "description": "If true, disables the tooltip that appears when text is truncated.",
+        "name": "withoutTooltip",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { Heading } from \"@vibe/core\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/HiddenText/HiddenText.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as HiddenText",
+      "type HiddenTextProps"
+    ],
+    "displayName": "HiddenText",
+    "description": "",
+    "props": {
+      "text": {
+        "defaultValue": null,
+        "description": "The text content that is hidden but available for assistive technologies.",
+        "name": "text",
+        "required": true,
+        "type": {
+          "name": "string"
+        }
+      },
+      "className": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": {
+          "value": "hiddenText"
+        },
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { HiddenText } from \"@vibe/core\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/Icon/Icon.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as Icon",
+      "type IconProps"
+    ],
+    "displayName": "Icon",
+    "description": "",
+    "props": {
+      "icon": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "The icon name, component, or source URL.",
+        "name": "icon",
+        "required": false,
+        "type": {
+          "name": "SubIcon"
+        }
+      },
+      "iconLabel": {
         "defaultValue": null,
-        "description": "The text color.",
-        "name": "color",
+        "description": "The accessible label for the icon.",
+        "name": "iconLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "iconType": {
+        "defaultValue": {
+          "value": "svg"
+        },
+        "description": "The type of the icon: `svg`, `font`, or `src` (external source).",
+        "name": "iconType",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "TypographyColor",
+          "raw": "IconType",
           "value": [
             {
-              "value": "\"inherit\""
-            },
-            {
-              "value": "\"primary\""
-            },
-            {
-              "value": "\"secondary\""
-            },
-            {
-              "value": "\"onPrimary\""
-            },
-            {
-              "value": "\"onInverted\""
-            },
-            {
-              "value": "\"fixedLight\""
+              "value": "\"svg\""
             },
             {
-              "value": "\"fixedDark\""
+              "value": "\"font\""
             },
             {
-              "value": "\"negative\""
+              "value": "\"src\""
             }
           ]
         }
       },
-      "children": {
-        "defaultValue": null,
-        "description": "The content inside the heading.",
-        "name": "children",
-        "required": true,
+      "iconSize": {
+        "defaultValue": {
+          "value": "16"
+        },
+        "description": "The size of the icon.",
+        "name": "iconSize",
+        "required": false,
         "type": {
-          "name": "ReactNode"
+          "name": "string | number"
         }
       },
-      "element": {
+      "ignoreFocusStyle": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, removes focus styles from the icon.",
+        "name": "ignoreFocusStyle",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "tabindex": {
         "defaultValue": null,
-        "description": "The HTML element tag used for the text component.",
-        "name": "element",
+        "description": "The tab index of the icon for keyboard navigation.",
+        "name": "tabindex",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "string | number"
         }
       },
-      "ellipsis": {
+      "ariaHidden": {
         "defaultValue": null,
-        "description": "If true, truncates overflowing text with an ellipsis.",
-        "name": "ellipsis",
+        "description": "If true, hides the icon from screen readers.",
+        "name": "ariaHidden",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "maxLines": {
+      "style": {
         "defaultValue": null,
-        "description": "The maximum number of lines before truncating with an ellipsis.",
-        "name": "maxLines",
+        "description": "Inline styles applied to the icon.",
+        "name": "style",
         "required": false,
         "type": {
-          "name": "number"
+          "name": "React.CSSProperties"
         }
       },
-      "tooltipProps": {
-        "defaultValue": null,
-        "description": "Props passed to the tooltip displayed when hovering over the text.",
-        "name": "tooltipProps",
+      "useCurrentColor": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, replaces `fill` property with `currentColor` when using an `src` icon.",
+        "name": "useCurrentColor",
         "required": false,
         "type": {
-          "name": "Partial<TooltipProps>"
+          "name": "boolean"
         }
       },
-      "withoutTooltip": {
+      "customColor": {
         "defaultValue": null,
-        "description": "If true, disables the tooltip that appears when text is truncated.",
-        "name": "withoutTooltip",
+        "description": "Overrides the default color with a custom color.",
+        "name": "customColor",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
       "className": {
@@ -7988,32 +8683,113 @@
         }
       }
     },
-    "import": "import { Heading } from \"@vibe/core\"",
+    "import": "import { Icon } from \"@vibe/icon\"",
     "subComponents": []
   },
   {
-    "filePath": "src/components/HiddenText/HiddenText.tsx",
+    "filePath": "src/Icon/CustomSvgIcon/CustomSvgIcon.tsx",
     "aggregator": "core",
     "symbols": [
-      "default as HiddenText",
-      "type HiddenTextProps"
+      "default as CustomSvgIcon",
+      "type CustomSvgIconProps"
     ],
-    "displayName": "HiddenText",
+    "displayName": "CustomSvgIcon",
     "description": "",
     "props": {
-      "text": {
+      "onClick": {
         "defaultValue": null,
-        "description": "The text content that is hidden but available for assistive technologies.",
-        "name": "text",
+        "description": "Callback fired when the icon is clicked.",
+        "name": "onClick",
+        "required": false,
+        "type": {
+          "name": "(event: React.MouseEvent) => void"
+        }
+      },
+      "src": {
+        "defaultValue": null,
+        "description": "The source URL or object of the SVG icon.",
+        "name": "src",
         "required": true,
+        "type": {
+          "name": "string | object"
+        }
+      },
+      "ariaLabel": {
+        "defaultValue": null,
+        "description": "The accessible label for the icon.",
+        "name": "ariaLabel",
+        "required": false,
         "type": {
           "name": "string"
         }
       },
-      "className": {
+      "tabIndex": {
+        "defaultValue": null,
+        "description": "The tab index of the icon for keyboard navigation.",
+        "name": "tabIndex",
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "role": {
+        "defaultValue": null,
+        "description": "The ARIA role of the icon.",
+        "name": "role",
+        "required": false,
+        "type": {
+          "name": "AriaRole"
+        }
+      },
+      "ariaHidden": {
+        "defaultValue": null,
+        "description": "If true, hides the icon from screen readers.",
+        "name": "ariaHidden",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "clickable": {
+        "defaultValue": null,
+        "description": "If true, makes the icon clickable.",
+        "name": "clickable",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "replaceToCurrentColor": {
         "defaultValue": {
-          "value": ""
+          "value": "false"
         },
+        "description": "If true, replaces the `fill` attribute in the SVG with `currentColor`.",
+        "name": "replaceToCurrentColor",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "customColor": {
+        "defaultValue": null,
+        "description": "Overrides the default color of the icon.",
+        "name": "customColor",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Reference to the SVG element.",
+        "name": "ref",
+        "required": false,
+        "type": {
+          "name": "Ref<SVGElement>"
+        }
+      },
+      "className": {
+        "defaultValue": null,
         "description": "A CSS class name to apply to the component.",
         "name": "className",
         "required": false,
@@ -8031,9 +8807,7 @@
         }
       },
       "id": {
-        "defaultValue": {
-          "value": "hiddenText"
-        },
+        "defaultValue": null,
         "description": "An HTML id attribute for the component.",
         "name": "id",
         "required": false,
@@ -8042,7 +8816,7 @@
         }
       }
     },
-    "import": "import { HiddenText } from \"@vibe/core\"",
+    "import": "import { CustomSvgIcon } from \"@vibe/icon\"",
     "subComponents": []
   },
   {
@@ -9570,24 +10344,121 @@
           "name": "SubIcon"
         }
       },
-      "margin": {
+      "margin": {
+        "defaultValue": {
+          "value": "start"
+        },
+        "description": "The position of the icon inside the list item, determining its margins.",
+        "name": "margin",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "ListItemIconMargin",
+          "value": [
+            {
+              "value": "\"start\""
+            },
+            {
+              "value": "\"end\""
+            }
+          ]
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { ListItemIcon } from \"@vibe/core\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/Loader/Loader.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as Loader",
+      "type LoaderProps",
+      "LoaderColors",
+      "LoaderSizes",
+      "LoaderSize"
+    ],
+    "displayName": "Loader",
+    "description": "",
+    "props": {
+      "size": {
+        "defaultValue": null,
+        "description": "The size of the loader, either a predefined size or a custom number.",
+        "name": "size",
+        "required": false,
+        "type": {
+          "name": "LoaderSize"
+        }
+      },
+      "color": {
+        "defaultValue": null,
+        "description": "The color of the loader.",
+        "name": "color",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "LoaderColors",
+          "value": [
+            {
+              "value": "\"primary\""
+            },
+            {
+              "value": "\"secondary\""
+            },
+            {
+              "value": "\"onPrimary\""
+            },
+            {
+              "value": "\"dark\""
+            }
+          ]
+        }
+      },
+      "hasBackground": {
         "defaultValue": {
-          "value": "start"
+          "value": "false"
         },
-        "description": "The position of the icon inside the list item, determining its margins.",
-        "name": "margin",
+        "description": "If true, a background circle is displayed behind the loader.",
+        "name": "hasBackground",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "ListItemIconMargin",
-          "value": [
-            {
-              "value": "\"start\""
-            },
-            {
-              "value": "\"end\""
-            }
-          ]
+          "name": "boolean"
+        }
+      },
+      "wrapperClassName": {
+        "defaultValue": null,
+        "description": "Class name applied to the wrapper element.",
+        "name": "wrapperClassName",
+        "required": false,
+        "type": {
+          "name": "string"
         }
       },
       "className": {
@@ -9618,7 +10489,7 @@
         }
       }
     },
-    "import": "import { ListItemIcon } from \"@vibe/core\"",
+    "import": "import { Loader } from \"@vibe/loader\"",
     "subComponents": []
   },
   {
@@ -19052,387 +19923,151 @@
         "name": "id",
         "required": false,
         "type": {
-          "name": "string"
-        }
-      }
-    },
-    "import": "import { VirtualizedList } from \"@vibe/core\"",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/Typography/Typography.tsx",
-    "aggregator": "core",
-    "symbols": [
-      "default as Typography",
-      "TypographyProps",
-      "TypographyColor",
-      "TypographyAlign"
-    ],
-    "displayName": "Typography",
-    "description": "",
-    "props": {
-      "element": {
-        "defaultValue": {
-          "value": "span"
-        },
-        "description": "The HTML element tag used for the text component.",
-        "name": "element",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "children": {
-        "defaultValue": null,
-        "description": "The content inside the typography component.",
-        "name": "children",
-        "required": true,
-        "type": {
-          "name": "ElementContent"
-        }
-      },
-      "color": {
-        "defaultValue": {
-          "value": "primary"
-        },
-        "description": "The text color.",
-        "name": "color",
-        "required": false,
-        "type": {
-          "name": "enum",
-          "raw": "TypographyColor",
-          "value": [
-            {
-              "value": "\"primary\""
-            },
-            {
-              "value": "\"secondary\""
-            },
-            {
-              "value": "\"onPrimary\""
-            },
-            {
-              "value": "\"onInverted\""
-            },
-            {
-              "value": "\"fixedLight\""
-            },
-            {
-              "value": "\"fixedDark\""
-            },
-            {
-              "value": "\"inherit\""
-            },
-            {
-              "value": "\"negative\""
-            }
-          ]
-        }
-      },
-      "align": {
-        "defaultValue": {
-          "value": "start"
-        },
-        "description": "The text alignment.",
-        "name": "align",
-        "required": false,
-        "type": {
-          "name": "enum",
-          "raw": "TypographyAlign",
-          "value": [
-            {
-              "value": "\"inherit\""
-            },
-            {
-              "value": "\"start\""
-            },
-            {
-              "value": "\"center\""
-            },
-            {
-              "value": "\"end\""
-            }
-          ]
-        }
-      },
-      "ellipsis": {
-        "defaultValue": {
-          "value": "true"
-        },
-        "description": "If true, truncates overflowing text with an ellipsis.",
-        "name": "ellipsis",
-        "required": false,
-        "type": {
-          "name": "boolean"
-        }
-      },
-      "maxLines": {
-        "defaultValue": {
-          "value": "1"
-        },
-        "description": "The maximum number of lines before truncating with an ellipsis.",
-        "name": "maxLines",
-        "required": false,
-        "type": {
-          "name": "number"
-        }
-      },
-      "tooltipProps": {
-        "defaultValue": null,
-        "description": "Props passed to the tooltip displayed when hovering over the text.",
-        "name": "tooltipProps",
-        "required": false,
-        "type": {
-          "name": "Partial<TooltipProps>"
-        }
-      },
-      "withoutTooltip": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "If true, disables the tooltip that appears when text is truncated.",
-        "name": "withoutTooltip",
-        "required": false,
-        "type": {
-          "name": "boolean"
-        }
-      },
-      "className": {
-        "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "data-testid": {
-        "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "id": {
-        "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      }
-    },
-    "import": "import { Typography } from \"@vibe/core\"",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/next/AttentionBox/AttentionBox.tsx",
-    "aggregator": "next",
-    "symbols": [
-      "default as AttentionBox",
-      "AttentionBoxProps",
-      "AttentionBoxType"
-    ],
-    "displayName": "AttentionBox",
-    "description": "",
-    "props": {
-      "className": {
-        "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "data-testid": {
-        "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "id": {
-        "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "text": {
-        "defaultValue": null,
-        "description": "The main text content",
-        "name": "text",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "children": {
-        "defaultValue": null,
-        "description": "Custom children to override the default text content",
-        "name": "children",
-        "required": false,
-        "type": {
-          "name": "ReactNode"
+          "name": "string"
         }
-      },
-      "compact": {
+      }
+    },
+    "import": "import { VirtualizedList } from \"@vibe/core\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Typography/Typography.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as Typography",
+      "TypographyProps",
+      "TypographyColor",
+      "TypographyAlign"
+    ],
+    "displayName": "Typography",
+    "description": "",
+    "props": {
+      "element": {
         "defaultValue": {
-          "value": "false"
+          "value": "span"
         },
-        "description": "When true, the attention box will be displayed in compact mode of one-liner",
-        "name": "compact",
+        "description": "The HTML element tag used for the text component.",
+        "name": "element",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "title": {
+      "children": {
         "defaultValue": null,
-        "description": "The title of the attention box",
-        "name": "title",
-        "required": false,
+        "description": "The content inside the typography component.",
+        "name": "children",
+        "required": true,
         "type": {
-          "name": "string"
+          "name": "ElementContent"
         }
       },
-      "type": {
+      "color": {
         "defaultValue": {
           "value": "primary"
         },
-        "description": "The variant type of the attention box",
-        "name": "type",
+        "description": "The text color.",
+        "name": "color",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "AttentionBoxType",
+          "raw": "TypographyColor",
           "value": [
             {
               "value": "\"primary\""
             },
             {
-              "value": "\"positive\""
+              "value": "\"secondary\""
             },
             {
-              "value": "\"negative\""
+              "value": "\"onPrimary\""
             },
             {
-              "value": "\"warning\""
+              "value": "\"onInverted\""
             },
             {
-              "value": "\"neutral\""
+              "value": "\"fixedLight\""
+            },
+            {
+              "value": "\"fixedDark\""
+            },
+            {
+              "value": "\"inherit\""
+            },
+            {
+              "value": "\"negative\""
             }
           ]
         }
       },
-      "iconType": {
+      "align": {
         "defaultValue": {
-          "value": "svg"
+          "value": "start"
         },
-        "description": "The type of the icon",
-        "name": "iconType",
+        "description": "The text alignment.",
+        "name": "align",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "IconType",
+          "raw": "TypographyAlign",
           "value": [
             {
-              "value": "\"svg\""
+              "value": "\"inherit\""
             },
             {
-              "value": "\"font\""
+              "value": "\"start\""
             },
             {
-              "value": "\"src\""
+              "value": "\"center\""
+            },
+            {
+              "value": "\"end\""
             }
           ]
         }
       },
-      "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",
+      "ellipsis": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "If true, truncates overflowing text with an ellipsis.",
+        "name": "ellipsis",
         "required": false,
         "type": {
-          "name": "false | SubIcon"
+          "name": "boolean"
         }
       },
-      "onClose": {
-        "defaultValue": null,
-        "description": "Callback when the close button is clicked",
-        "name": "onClose",
+      "maxLines": {
+        "defaultValue": {
+          "value": "1"
+        },
+        "description": "The maximum number of lines before truncating with an ellipsis.",
+        "name": "maxLines",
         "required": false,
         "type": {
-          "name": "(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void"
+          "name": "number"
         }
       },
-      "closeButtonAriaLabel": {
+      "tooltipProps": {
         "defaultValue": null,
-        "description": "Custom aria label for the close button",
-        "name": "closeButtonAriaLabel",
+        "description": "Props passed to the tooltip displayed when hovering over the text.",
+        "name": "tooltipProps",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "Partial<TooltipProps>"
         }
       },
-      "animate": {
+      "withoutTooltip": {
         "defaultValue": {
-          "value": "true"
+          "value": "false"
         },
-        "description": "Whether to animate the entrance",
-        "name": "animate",
+        "description": "If true, disables the tooltip that appears when text is truncated.",
+        "name": "withoutTooltip",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "action": {
-        "defaultValue": null,
-        "description": "Action button configuration",
-        "name": "action",
-        "required": false,
-        "type": {
-          "name": "AttentionBoxButtonProps"
-        }
-      },
-      "link": {
-        "defaultValue": null,
-        "description": "Link configuration",
-        "name": "link",
-        "required": false,
-        "type": {
-          "name": "Omit<LinkProps, \"inlineText\">"
-        }
-      }
-    },
-    "import": "import { AttentionBox } from \"@vibe/core/next\"",
-    "parentComponent": "next",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/next/Dropdown/Dropdown.tsx",
-    "aggregator": "next",
-    "symbols": [
-      "default as Dropdown",
-      "DropdownOption",
-      "DropdownGroupOption",
-      "BaseDropdownProps",
-      "DropdownSizes",
-      "DropdownDirection",
-      "DropdownMultiControllerProps",
-      "DropdownSingleControllerProps"
-    ],
-    "displayName": "Dropdown",
-    "description": "",
-    "props": {
       "className": {
         "defaultValue": null,
         "description": "A CSS class name to apply to the component.",
@@ -19459,503 +20094,577 @@
         "type": {
           "name": "string"
         }
-      },
-      "options": {
-        "defaultValue": null,
-        "description": "The list of options available in the list.",
-        "name": "options",
-        "required": true,
-        "type": {
-          "name": "DropdownGroupOption<Item>"
-        }
-      },
-      "tooltipProps": {
-        "defaultValue": null,
-        "description": "Props to be passed to the Tooltip component that wraps the dropdown.",
-        "name": "tooltipProps",
-        "required": false,
-        "type": {
-          "name": "Partial<TooltipProps>"
-        }
-      },
-      "withGroupDivider": {
-        "defaultValue": null,
-        "description": "If true, displays dividers between grouped options.",
-        "name": "withGroupDivider",
-        "required": false,
-        "type": {
-          "name": "boolean"
-        }
-      },
-      "stickyGroupTitle": {
-        "defaultValue": null,
-        "description": "If true, makes the group title sticky.",
-        "name": "stickyGroupTitle",
-        "required": false,
-        "type": {
-          "name": "boolean"
-        }
-      },
-      "size": {
-        "defaultValue": null,
-        "description": "The size of the dropdown.",
-        "name": "size",
-        "required": false,
-        "type": {
-          "name": "enum",
-          "raw": "DropdownSizes",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"large\""
-            }
-          ]
-        }
-      },
-      "dir": {
-        "defaultValue": null,
-        "description": "The direction of the dropdown.",
-        "name": "dir",
-        "required": false,
-        "type": {
-          "name": "enum",
-          "raw": "DropdownDirection",
-          "value": [
-            {
-              "value": "\"ltr\""
-            },
-            {
-              "value": "\"rtl\""
-            },
-            {
-              "value": "\"auto\""
-            }
-          ]
-        }
-      },
-      "searchable": {
+      }
+    },
+    "import": "import { Typography } from \"@vibe/core\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/Modal/footers/ModalFooter/ModalFooter.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as ModalFooter",
+      "type ModalFooterProps"
+    ],
+    "displayName": "ModalFooter",
+    "description": "",
+    "props": {
+      "renderSideAction": {
         "defaultValue": null,
-        "description": "If true, the dropdown is searchable.",
-        "name": "searchable",
+        "description": "Content displayed on the left side of the footer.",
+        "name": "renderSideAction",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "React.ReactNode"
         }
       },
-      "optionRenderer": {
+      "primaryButton": {
         "defaultValue": null,
-        "description": "The function to call to render an option.",
-        "name": "optionRenderer",
-        "required": false,
+        "description": "Props for the primary action button.",
+        "name": "primaryButton",
+        "required": true,
         "type": {
-          "name": "(option: Item) => React.ReactNode"
+          "name": "ModalFooterActionProps"
         }
       },
-      "menuRenderer": {
+      "secondaryButton": {
         "defaultValue": null,
-        "description": "The function to call to render the menu.",
-        "name": "menuRenderer",
+        "description": "Props for the optional secondary action button.",
+        "name": "secondaryButton",
         "required": false,
         "type": {
-          "name": "(props: { children: React.ReactNode; filteredOptions: ListGroup<Item>[]; selectedItems: Item[]; getItemProps: (options: any) => Record<string, unknown>; }) => React.ReactNode"
+          "name": "ModalFooterActionProps"
         }
       },
-      "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 { 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 total number of steps in the wizard.\nRenders the corresponding number of step indicators (\"dots\") in the footer.",
+        "name": "stepCount",
+        "required": true,
+        "type": {
+          "name": "number"
         }
       },
-      "readOnly": {
+      "activeStep": {
         "defaultValue": null,
-        "description": "If true, the dropdown is read only.",
-        "name": "readOnly",
-        "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": "boolean"
+          "name": "number"
         }
       },
-      "error": {
+      "onStepClick": {
         "defaultValue": null,
-        "description": "If true, the dropdown is in an error state.",
-        "name": "error",
-        "required": false,
+        "description": "Callback fired when a step indicator (\"dot\") is clicked.",
+        "name": "onStepClick",
+        "required": true,
         "type": {
-          "name": "boolean"
+          "name": "(stepIndex: number) => void"
         }
       },
-      "helperText": {
+      "primaryButton": {
         "defaultValue": null,
-        "description": "The helper text to display below the dropdown.",
-        "name": "helperText",
-        "required": false,
+        "description": "Props for the primary action button.",
+        "name": "primaryButton",
+        "required": true,
         "type": {
-          "name": "string"
+          "name": "ModalFooterActionProps"
         }
       },
-      "required": {
+      "secondaryButton": {
         "defaultValue": null,
-        "description": "If true, the dropdown is required.",
-        "name": "required",
+        "description": "Props for the optional secondary action button.",
+        "name": "secondaryButton",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "ModalFooterActionProps"
         }
       },
-      "label": {
+      "className": {
         "defaultValue": null,
-        "description": "The label to display above the dropdown.",
-        "name": "label",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "ariaLabel": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "The ARIA label for the dropdown.",
-        "name": "ariaLabel",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "inputAriaLabel": {
+      "id": {
         "defaultValue": null,
-        "description": "The ARIA label for the dropdown input.",
-        "name": "inputAriaLabel",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
           "name": "string"
         }
+      }
+    },
+    "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 content of the layout, structured as:\n1. Header content\n2. Main content",
+        "name": "children",
+        "required": true,
+        "type": {
+          "name": "React.ReactNode"
+        }
       },
-      "menuAriaLabel": {
+      "className": {
         "defaultValue": null,
-        "description": "The ARIA label for the menu container.",
-        "name": "menuAriaLabel",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "clearAriaLabel": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "The ARIA label for the clear button.",
-        "name": "clearAriaLabel",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "inputValue": {
+      "id": {
         "defaultValue": null,
-        "description": "The current value of the input field.",
-        "name": "inputValue",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
           "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"
+        }
       },
-      "maxMenuHeight": {
+      "className": {
         "defaultValue": null,
-        "description": "The maximum height of the dropdown menu.",
-        "name": "maxMenuHeight",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "number"
+          "name": "string"
         }
       },
-      "isMenuOpen": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "If true, controls the menu open state.",
-        "name": "isMenuOpen",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "closeMenuOnSelect": {
+      "id": {
         "defaultValue": null,
-        "description": "If true, closes the menu when an option is selected.",
-        "name": "closeMenuOnSelect",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "boolean"
+          "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"
         }
       },
-      "autoFocus": {
+      "className": {
         "defaultValue": null,
-        "description": "If true, the dropdown menu will be auto focused.",
-        "name": "autoFocus",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "clearable": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "If true, the dropdown will have a clear button.",
-        "name": "clearable",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "onBlur": {
+      "id": {
         "defaultValue": null,
-        "description": "Callback fired when the dropdown loses focus.",
-        "name": "onBlur",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "(event: React.FocusEvent<HTMLDivElement>) => void"
+          "name": "string"
         }
-      },
-      "onClear": {
+      }
+    },
+    "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": "Callback fired when the clear button is clicked.",
-        "name": "onClear",
-        "required": false,
+        "description": "Unique identifier for the modal.",
+        "name": "id",
+        "required": true,
         "type": {
-          "name": "() => void"
+          "name": "string"
         }
       },
-      "onFocus": {
+      "show": {
         "defaultValue": null,
-        "description": "Callback fired when the dropdown gains focus.",
-        "name": "onFocus",
-        "required": false,
+        "description": "Controls the visibility of the modal.",
+        "name": "show",
+        "required": true,
         "type": {
-          "name": "(event: React.FocusEvent<HTMLDivElement>) => void"
+          "name": "boolean"
         }
       },
-      "onInputChange": {
-        "defaultValue": null,
-        "description": "Callback fired when the dropdown input value changes.",
-        "name": "onInputChange",
+      "size": {
+        "defaultValue": {
+          "value": "medium"
+        },
+        "description": "Determines the width and max-height of the modal.",
+        "name": "size",
         "required": false,
         "type": {
-          "name": "(input: string) => void"
+          "name": "enum",
+          "raw": "ModalSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"full-view\""
+            }
+          ]
         }
       },
-      "onKeyDown": {
+      "closeButtonTheme": {
         "defaultValue": null,
-        "description": "Callback fired when a key is pressed inside the dropdown.",
-        "name": "onKeyDown",
+        "description": "Theme color for the close button.",
+        "name": "closeButtonTheme",
         "required": false,
         "type": {
-          "name": "(event: React.KeyboardEvent<HTMLDivElement>) => void"
+          "name": "enum",
+          "raw": "ModalTopActionsTheme",
+          "value": [
+            {
+              "value": "\"dark\""
+            },
+            {
+              "value": "\"light\""
+            }
+          ]
         }
       },
-      "onMenuOpen": {
+      "closeButtonAriaLabel": {
         "defaultValue": null,
-        "description": "Callback fired when the dropdown menu opens.",
-        "name": "onMenuOpen",
+        "description": "Accessibility label for the close button.",
+        "name": "closeButtonAriaLabel",
         "required": false,
         "type": {
-          "name": "() => void"
+          "name": "string"
         }
       },
-      "onMenuClose": {
-        "defaultValue": null,
-        "description": "Callback fired when the dropdown menu closes.",
-        "name": "onMenuClose",
+      "onClose": {
+        "defaultValue": {
+          "value": "() => {}"
+        },
+        "description": "Callback fired when the modal should close.",
+        "name": "onClose",
         "required": false,
         "type": {
-          "name": "() => void"
+          "name": "(event: any) => void"
         }
       },
-      "onOptionSelect": {
-        "defaultValue": null,
-        "description": "Callback fired when an option is selected.",
-        "name": "onOptionSelect",
+      "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": "(option: Item) => void"
+          "name": "boolean"
         }
       },
-      "onScroll": {
+      "allowFocusEscapeTo": {
         "defaultValue": null,
-        "description": "Callback fired when scrolling inside the dropdown.",
-        "name": "onScroll",
+        "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": "(event: React.UIEvent<HTMLUListElement>) => void"
+          "name": "any[]"
         }
       },
-      "filterOption": {
+      "onFocusAttempt": {
         "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": "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": "(option: Item, inputValue: string) => boolean"
+          "name": "(nextFocusedElement?: HTMLElement) => boolean | HTMLElement"
         }
       },
-      "showSelectedOptions": {
+      "renderHeaderAction": {
         "defaultValue": null,
-        "description": "If false, selected options will be hidden from the list. Defaults to true.",
-        "name": "showSelectedOptions",
+        "description": "Additional action to render in the header area.",
+        "name": "renderHeaderAction",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "any"
         }
       },
-      "menuWrapperClassName": {
+      "anchorElementRef": {
         "defaultValue": null,
-        "description": "The class name to be applied to the menu wrapper.",
-        "name": "menuWrapperClassName",
+        "description": "Reference to an element that triggered the modal, used for animations.",
+        "name": "anchorElementRef",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "React.RefObject<HTMLElement>"
         }
       },
-      "loading": {
+      "alertModal": {
         "defaultValue": null,
-        "description": "If true, displays a loading indicator in the dropdown controls.",
-        "name": "loading",
+        "description": "When true, prevents closing the modal when clicking the overlay (\"click-outside\") or pressing ESC.",
+        "name": "alertModal",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "multi": {
-        "defaultValue": null,
-        "description": "If true, the dropdown allows multiple selections.\nIf true, the dropdown allows multiple selections. Defaults to false.",
-        "name": "multi",
+      "container": {
+        "defaultValue": {
+          "value": "document.body"
+        },
+        "description": "The target element to render the modal into.",
+        "name": "container",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "any"
         }
       },
-      "multiline": {
+      "children": {
         "defaultValue": null,
-        "description": "If true, the dropdown allows multiple lines of selected items. (Not available for single select)",
-        "name": "multiline",
-        "required": false,
+        "description": "Modal content.",
+        "name": "children",
+        "required": true,
         "type": {
-          "name": "boolean"
+          "name": "React.ReactNode"
         }
       },
-      "onOptionRemove": {
+      "style": {
         "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": "Additional inline styles for the modal.",
+        "name": "style",
         "required": false,
         "type": {
-          "name": "(option: Item) => void"
+          "name": "React.CSSProperties"
         }
       },
-      "valueRenderer": {
+      "zIndex": {
         "defaultValue": null,
-        "description": "The function to call to render the selected value on single select mode.",
-        "name": "valueRenderer",
+        "description": "The z-index to be used for the modal and overlay.",
+        "name": "zIndex",
         "required": false,
         "type": {
-          "name": "(option: Item) => React.ReactNode"
+          "name": "number"
         }
       },
-      "defaultValue": {
+      "aria-labelledby": {
         "defaultValue": null,
-        "description": "The default selected values for multi-select.\nThe default selected value for single-select.",
-        "name": "defaultValue",
+        "description": "If provided, overrides the automatically generated aria-labelledby, that is assigned when used with ModalHeader.",
+        "name": "aria-labelledby",
         "required": false,
         "type": {
-          "name": "BaseListItemData<Record<string, unknown>> | Item[]"
+          "name": "string"
         }
       },
-      "value": {
+      "aria-describedby": {
         "defaultValue": null,
-        "description": "The controlled selected values for multi-select.\nThe controlled selected value for single-select.",
-        "name": "value",
+        "description": "If provided, overrides the automatically generated aria-describedby, that is assigned when used with ModalHeader.",
+        "name": "aria-describedby",
         "required": false,
         "type": {
-          "name": "BaseListItemData<Record<string, unknown>> | Item[]"
+          "name": "string"
         }
       },
-      "onChange": {
+      "className": {
         "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 CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "((options: Item[]) => void) | ((option: Item) => void)"
+          "name": "string"
         }
       },
-      "ref": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "",
-        "name": "ref",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "React.ForwardedRef<HTMLDivElement>"
+          "name": "string"
         }
       }
     },
-    "import": "import { Dropdown } from \"@vibe/core/next\"",
-    "parentComponent": "next",
-    "subComponents": []
+    "import": "import { Modal } from \"@vibe/core/next\"",
+    "subComponents": [
+      "Modal.types"
+    ]
   },
   {
-    "filePath": "src/components/Modal/footers/ModalFooter/ModalFooter.tsx",
+    "filePath": "src/components/Modal/ModalHeader/ModalHeader.tsx",
     "aggregator": "next",
     "symbols": [
-      "default as ModalFooter",
-      "type ModalFooterProps"
+      "default as ModalHeader",
+      "type ModalHeaderProps"
     ],
-    "displayName": "ModalFooter",
+    "displayName": "ModalHeader",
     "description": "",
     "props": {
-      "renderSideAction": {
+      "title": {
         "defaultValue": null,
-        "description": "Content displayed on the left side of the footer.",
-        "name": "renderSideAction",
-        "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": "React.ReactNode"
+          "name": "any"
         }
       },
-      "primaryButton": {
+      "description": {
         "defaultValue": null,
-        "description": "Props for the primary action button.",
-        "name": "primaryButton",
-        "required": true,
+        "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": "ModalFooterActionProps"
+          "name": "any"
         }
       },
-      "secondaryButton": {
+      "descriptionIcon": {
         "defaultValue": null,
-        "description": "Props for the optional secondary action button.",
-        "name": "secondaryButton",
+        "description": "Icon to display before the description. Can only be passed when description is supplied.",
+        "name": "descriptionIcon",
         "required": false,
         "type": {
-          "name": "ModalFooterActionProps"
+          "name": "SubIcon | { name: SubIcon; className?: string; }"
         }
       },
       "className": {
@@ -19986,62 +20695,27 @@
         }
       }
     },
-    "import": "import { ModalFooter } from \"@vibe/core/next\"",
+    "import": "import { ModalHeader } from \"@vibe/core/next\"",
+    "parentComponent": "Modal",
     "subComponents": []
   },
   {
-    "filePath": "src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx",
+    "filePath": "src/components/Modal/ModalContent/ModalContent.tsx",
     "aggregator": "next",
     "symbols": [
-      "default as ModalFooterWizard",
-      "type ModalFooterWizardProps"
+      "default as ModalContent",
+      "type ModalContentProps"
     ],
-    "displayName": "ModalFooterWizard",
+    "displayName": "ModalContent",
     "description": "",
     "props": {
-      "stepCount": {
-        "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,
-        "type": {
-          "name": "number"
-        }
-      },
-      "activeStep": {
-        "defaultValue": null,
-        "description": "The current active step (0-based index).\nHighlights the corresponding step indicator (\"dot\") in the footer.",
-        "name": "activeStep",
-        "required": true,
-        "type": {
-          "name": "number"
-        }
-      },
-      "onStepClick": {
-        "defaultValue": null,
-        "description": "Callback fired when a step indicator (\"dot\") is clicked.",
-        "name": "onStepClick",
-        "required": true,
-        "type": {
-          "name": "(stepIndex: number) => void"
-        }
-      },
-      "primaryButton": {
-        "defaultValue": null,
-        "description": "Props for the primary action button.",
-        "name": "primaryButton",
-        "required": true,
-        "type": {
-          "name": "ModalFooterActionProps"
-        }
-      },
-      "secondaryButton": {
+      "children": {
         "defaultValue": null,
-        "description": "Props for the optional secondary action button.",
-        "name": "secondaryButton",
+        "description": "The main content of the modal.",
+        "name": "children",
         "required": false,
         "type": {
-          "name": "ModalFooterActionProps"
+          "name": "React.ReactNode"
         }
       },
       "className": {
@@ -20072,22 +20746,23 @@
         }
       }
     },
-    "import": "import { ModalFooterWizard } from \"@vibe/core/next\"",
+    "import": "import { ModalContent } from \"@vibe/core/next\"",
+    "parentComponent": "Modal",
     "subComponents": []
   },
   {
-    "filePath": "src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx",
+    "filePath": "src/components/Modal/ModalMedia/ModalMedia.tsx",
     "aggregator": "next",
     "symbols": [
-      "default as ModalBasicLayout",
-      "type ModalBasicLayoutProps"
+      "default as ModalMedia",
+      "type ModalMediaProps"
     ],
-    "displayName": "ModalBasicLayout",
+    "displayName": "ModalMedia",
     "description": "",
     "props": {
       "children": {
         "defaultValue": null,
-        "description": "The content of the layout, structured as:\n1. Header content\n2. Main content",
+        "description": "The media content displayed in the modal.",
         "name": "children",
         "required": true,
         "type": {
@@ -20122,28 +20797,21 @@
         }
       }
     },
-    "import": "import { ModalBasicLayout } from \"@vibe/core/next\"",
+    "import": "import { ModalMedia } from \"@vibe/core/next\"",
+    "parentComponent": "Modal",
     "subComponents": []
   },
   {
-    "filePath": "src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx",
+    "filePath": "src/components/next/AttentionBox/AttentionBox.tsx",
     "aggregator": "next",
     "symbols": [
-      "default as ModalMediaLayout",
-      "type ModalMediaLayoutProps"
+      "default as AttentionBox",
+      "AttentionBoxProps",
+      "AttentionBoxType"
     ],
-    "displayName": "ModalMediaLayout",
+    "displayName": "AttentionBox",
     "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.",
@@ -20170,30 +20838,174 @@
         "type": {
           "name": "string"
         }
+      },
+      "text": {
+        "defaultValue": null,
+        "description": "The main text content",
+        "name": "text",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "children": {
+        "defaultValue": null,
+        "description": "Custom children to override the default text content",
+        "name": "children",
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "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": "boolean"
+        }
+      },
+      "title": {
+        "defaultValue": null,
+        "description": "The title of the attention box",
+        "name": "title",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "type": {
+        "defaultValue": {
+          "value": "primary"
+        },
+        "description": "The variant type of the attention box",
+        "name": "type",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "AttentionBoxType",
+          "value": [
+            {
+              "value": "\"primary\""
+            },
+            {
+              "value": "\"positive\""
+            },
+            {
+              "value": "\"negative\""
+            },
+            {
+              "value": "\"warning\""
+            },
+            {
+              "value": "\"neutral\""
+            }
+          ]
+        }
+      },
+      "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": null,
+        "description": "Callback when the close button is clicked",
+        "name": "onClose",
+        "required": false,
+        "type": {
+          "name": "(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void"
+        }
+      },
+      "closeButtonAriaLabel": {
+        "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",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "action": {
+        "defaultValue": null,
+        "description": "Action button configuration",
+        "name": "action",
+        "required": false,
+        "type": {
+          "name": "AttentionBoxButtonProps"
+        }
+      },
+      "link": {
+        "defaultValue": null,
+        "description": "Link configuration",
+        "name": "link",
+        "required": false,
+        "type": {
+          "name": "Omit<LinkProps, \"inlineText\">"
+        }
       }
     },
-    "import": "import { ModalMediaLayout } from \"@vibe/core/next\"",
+    "import": "import { AttentionBox } from \"@vibe/core/next\"",
+    "parentComponent": "next",
     "subComponents": []
   },
   {
-    "filePath": "src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx",
+    "filePath": "src/components/next/Dropdown/Dropdown.tsx",
     "aggregator": "next",
     "symbols": [
-      "default as ModalSideBySideLayout",
-      "type ModalSideBySideLayoutProps"
+      "default as Dropdown",
+      "DropdownOption",
+      "DropdownGroupOption",
+      "BaseDropdownProps",
+      "DropdownSizes",
+      "DropdownDirection",
+      "DropdownMultiControllerProps",
+      "DropdownSingleControllerProps"
     ],
-    "displayName": "ModalSideBySideLayout",
+    "displayName": "Dropdown",
     "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"
-        }
-      },
       "className": {
         "defaultValue": null,
         "description": "A CSS class name to apply to the component.",
@@ -20220,48 +21032,69 @@
         "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": {
+      },
+      "searchable": {
         "defaultValue": null,
-        "description": "Unique identifier for the modal.",
-        "name": "id",
-        "required": true,
+        "description": "If true, the dropdown is searchable.",
+        "name": "searchable",
+        "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "show": {
+      "boxMode": {
         "defaultValue": null,
-        "description": "Controls the visibility of the modal.",
-        "name": "show",
+        "description": "If true, the dropdown menu is displayed inline without a popup/dialog.",
+        "name": "boxMode",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "options": {
+        "defaultValue": null,
+        "description": "The list of options available in the list.",
+        "name": "options",
         "required": true,
+        "type": {
+          "name": "DropdownGroupOption<Item>"
+        }
+      },
+      "tooltipProps": {
+        "defaultValue": null,
+        "description": "Props to be passed to the Tooltip component that wraps the dropdown.",
+        "name": "tooltipProps",
+        "required": false,
+        "type": {
+          "name": "Partial<TooltipProps>"
+        }
+      },
+      "withGroupDivider": {
+        "defaultValue": null,
+        "description": "If true, displays dividers between grouped options.",
+        "name": "withGroupDivider",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "stickyGroupTitle": {
+        "defaultValue": null,
+        "description": "If true, makes the group title sticky.",
+        "name": "stickyGroupTitle",
+        "required": false,
         "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\""
@@ -20271,356 +21104,403 @@
             },
             {
               "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": {
+      "optionRenderer": {
         "defaultValue": null,
-        "description": "Accessibility label for the close button.",
-        "name": "closeButtonAriaLabel",
+        "description": "The function to call to render an option.",
+        "name": "optionRenderer",
+        "required": false,
+        "type": {
+          "name": "(option: Item) => React.ReactNode"
+        }
+      },
+      "menuRenderer": {
+        "defaultValue": null,
+        "description": "The function to call to render the menu.",
+        "name": "menuRenderer",
+        "required": false,
+        "type": {
+          "name": "(props: { children: React.ReactNode; filteredOptions: ListGroup<Item>[]; selectedItems: Item[]; getItemProps: (options: any) => Record<string, unknown>; }) => React.ReactNode"
+        }
+      },
+      "noOptionsMessage": {
+        "defaultValue": null,
+        "description": "The message to display when there are no options.",
+        "name": "noOptionsMessage",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "placeholder": {
+        "defaultValue": null,
+        "description": "The placeholder to display when the dropdown is empty.",
+        "name": "placeholder",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "onClose": {
-        "defaultValue": {
-          "value": "() => {}"
-        },
-        "description": "Callback fired when the modal should close.",
-        "name": "onClose",
+      "disabled": {
+        "defaultValue": null,
+        "description": "If true, the dropdown is disabled.",
+        "name": "disabled",
         "required": false,
         "type": {
-          "name": "(event: any) => void"
+          "name": "boolean"
         }
       },
-      "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",
+      "readOnly": {
+        "defaultValue": null,
+        "description": "If true, the dropdown is read only.",
+        "name": "readOnly",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "allowFocusEscapeTo": {
+      "error": {
         "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": "If true, the dropdown is in an error state.",
+        "name": "error",
         "required": false,
         "type": {
-          "name": "any[]"
+          "name": "boolean"
         }
       },
-      "onFocusAttempt": {
+      "helperText": {
         "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 helper text to display below the dropdown.",
+        "name": "helperText",
         "required": false,
         "type": {
-          "name": "(nextFocusedElement?: HTMLElement) => boolean | HTMLElement"
+          "name": "string"
         }
       },
-      "renderHeaderAction": {
+      "required": {
         "defaultValue": null,
-        "description": "Additional action to render in the header area.",
-        "name": "renderHeaderAction",
+        "description": "If true, the dropdown is required.",
+        "name": "required",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "label": {
+        "defaultValue": null,
+        "description": "The label to display above the dropdown.",
+        "name": "label",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ariaLabel": {
+        "defaultValue": null,
+        "description": "The ARIA label for the dropdown.",
+        "name": "ariaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "inputAriaLabel": {
+        "defaultValue": null,
+        "description": "The ARIA label for the dropdown input.",
+        "name": "inputAriaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "menuAriaLabel": {
+        "defaultValue": null,
+        "description": "The ARIA label for the menu container.",
+        "name": "menuAriaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "clearAriaLabel": {
+        "defaultValue": null,
+        "description": "The ARIA label for the clear button.",
+        "name": "clearAriaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "inputValue": {
+        "defaultValue": null,
+        "description": "The current value of the input field.",
+        "name": "inputValue",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "maxMenuHeight": {
+        "defaultValue": null,
+        "description": "The maximum height of the dropdown menu.",
+        "name": "maxMenuHeight",
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "isMenuOpen": {
+        "defaultValue": null,
+        "description": "If true, controls the menu open state.",
+        "name": "isMenuOpen",
         "required": false,
         "type": {
-          "name": "any"
+          "name": "boolean"
         }
       },
-      "anchorElementRef": {
+      "closeMenuOnSelect": {
         "defaultValue": null,
-        "description": "Reference to an element that triggered the modal, used for animations.",
-        "name": "anchorElementRef",
+        "description": "If true, closes the menu when an option is selected.",
+        "name": "closeMenuOnSelect",
         "required": false,
         "type": {
-          "name": "React.RefObject<HTMLElement>"
+          "name": "boolean"
         }
       },
-      "alertModal": {
+      "autoFocus": {
         "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 menu will be auto focused.",
+        "name": "autoFocus",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "container": {
-        "defaultValue": {
-          "value": "document.body"
-        },
-        "description": "The target element to render the modal into.",
-        "name": "container",
+      "clearable": {
+        "defaultValue": null,
+        "description": "If true, the dropdown will have a clear button.",
+        "name": "clearable",
         "required": false,
         "type": {
-          "name": "any"
+          "name": "boolean"
         }
       },
-      "children": {
+      "onBlur": {
         "defaultValue": null,
-        "description": "Modal content.",
-        "name": "children",
-        "required": true,
+        "description": "Callback fired when the dropdown loses focus.",
+        "name": "onBlur",
+        "required": false,
         "type": {
-          "name": "React.ReactNode"
+          "name": "(event: React.FocusEvent<HTMLDivElement>) => void"
         }
       },
-      "style": {
+      "onClear": {
         "defaultValue": null,
-        "description": "Additional inline styles for the modal.",
-        "name": "style",
+        "description": "Callback fired when the clear button is clicked.",
+        "name": "onClear",
         "required": false,
         "type": {
-          "name": "React.CSSProperties"
+          "name": "() => void"
         }
       },
-      "zIndex": {
+      "onFocus": {
         "defaultValue": null,
-        "description": "The z-index to be used for the modal and overlay.",
-        "name": "zIndex",
+        "description": "Callback fired when the dropdown gains focus.",
+        "name": "onFocus",
         "required": false,
         "type": {
-          "name": "number"
+          "name": "(event: React.FocusEvent<HTMLDivElement>) => void"
         }
       },
-      "aria-labelledby": {
+      "onInputChange": {
         "defaultValue": null,
-        "description": "If provided, overrides the automatically generated aria-labelledby, that is assigned when used with ModalHeader.",
-        "name": "aria-labelledby",
+        "description": "Callback fired when the dropdown input value changes.",
+        "name": "onInputChange",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(input: string) => void"
         }
       },
-      "aria-describedby": {
+      "onKeyDown": {
         "defaultValue": null,
-        "description": "If provided, overrides the automatically generated aria-describedby, that is assigned when used with ModalHeader.",
-        "name": "aria-describedby",
+        "description": "Callback fired when a key is pressed inside the dropdown.",
+        "name": "onKeyDown",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(event: React.KeyboardEvent<HTMLDivElement>) => void"
         }
       },
-      "className": {
+      "onMenuOpen": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "Callback fired when the dropdown menu opens.",
+        "name": "onMenuOpen",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "() => void"
         }
       },
-      "data-testid": {
+      "onMenuClose": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "Callback fired when the dropdown menu closes.",
+        "name": "onMenuClose",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "() => void"
         }
-      }
-    },
-    "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": {
+      },
+      "onOptionSelect": {
         "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": "Callback fired when an option is selected.",
+        "name": "onOptionSelect",
+        "required": false,
         "type": {
-          "name": "any"
+          "name": "(option: Item) => void"
         }
       },
-      "description": {
+      "onScroll": {
         "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": "Callback fired when scrolling inside the dropdown.",
+        "name": "onScroll",
         "required": false,
         "type": {
-          "name": "any"
+          "name": "(event: React.UIEvent<HTMLUListElement>) => void"
         }
       },
-      "descriptionIcon": {
+      "filterOption": {
         "defaultValue": null,
-        "description": "Icon to display before the description. Can only be passed when description is supplied.",
-        "name": "descriptionIcon",
+        "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": "SubIcon | { name: SubIcon; className?: string; }"
+          "name": "(option: Item, inputValue: string) => boolean"
         }
       },
-      "className": {
+      "showSelectedOptions": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "If false, selected options will be hidden from the list. Defaults to true.",
+        "name": "showSelectedOptions",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "data-testid": {
+      "menuWrapperClassName": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "The class name to be applied to the menu wrapper.",
+        "name": "menuWrapperClassName",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "id": {
+      "loading": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "If true, displays a loading indicator in the dropdown controls.",
+        "name": "loading",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
-      }
-    },
-    "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": {
+      },
+      "multi": {
         "defaultValue": null,
-        "description": "The main content of the modal.",
-        "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": "React.ReactNode"
+          "name": "boolean"
         }
       },
-      "className": {
+      "multiline": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "If true, the dropdown allows multiple lines of selected items. (Not available for single select)",
+        "name": "multiline",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "data-testid": {
+      "onOptionRemove": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "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"
         }
       },
-      "id": {
+      "valueRenderer": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "The function to call to render the selected value on single select mode.",
+        "name": "valueRenderer",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(option: Item) => React.ReactNode"
         }
-      }
-    },
-    "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": {
         "defaultValue": null,
-        "description": "The media content displayed in the modal.",
-        "name": "children",
-        "required": true,
+        "description": "The default selected values for multi-select.\nThe default selected value for single-select.",
+        "name": "defaultValue",
+        "required": false,
         "type": {
-          "name": "React.ReactNode"
+          "name": "BaseListItemData<Record<string, unknown>> | Item[]"
         }
       },
-      "className": {
+      "value": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "The controlled selected values for multi-select.\nThe controlled selected value for single-select.",
+        "name": "value",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "BaseListItemData<Record<string, unknown>> | Item[]"
         }
       },
-      "data-testid": {
+      "onChange": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "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": "string"
+          "name": "((options: Item[]) => void) | ((option: Item) => void)"
         }
       },
-      "id": {
+      "ref": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "",
+        "name": "ref",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "React.ForwardedRef<HTMLDivElement>"
         }
       }
     },
-    "import": "import { ModalMedia } from \"@vibe/core/next\"",
-    "parentComponent": "Modal",
+    "import": "import { Dropdown } from \"@vibe/core/next\"",
+    "parentComponent": "next",
     "subComponents": []
   }
 ]