@vibe/core 3.78.0 → 3.80.0

package/dist/metadata.json

@@ -927,6 +927,27 @@
           "name": "boolean"
         }
       },
+      "ariaLive": {
+        "defaultValue": null,
+        "description": "The aria-live attribute value for the alert banner text.",
+        "name": "ariaLive",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"polite\" | \"assertive\" | \"off\"",
+          "value": [
+            {
+              "value": "\"polite\""
+            },
+            {
+              "value": "\"assertive\""
+            },
+            {
+              "value": "\"off\""
+            }
+          ]
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "A CSS class name to apply to the component.",
@@ -2077,116 +2098,232 @@
     "subComponents": []
   },
   {
-    "filePath": "src/components/Box/Box.tsx",
+    "filePath": "src/components/BreadcrumbsBar/BreadcrumbsBar.tsx",
     "aggregator": "core",
     "symbols": [
-      "default as Box",
-      "type BoxProps",
-      "BorderColor",
-      "BackgroundColor",
-      "BoxTextColor",
-      "BaseBoxSize",
-      "BoxSize",
-      "Shadow",
-      "RoundedSize"
+      "default as BreadcrumbsBar",
+      "type BreadcrumbBarProps"
     ],
-    "displayName": "Box",
+    "displayName": "BreadcrumbsBar",
     "description": "",
     "props": {
-      "elementType": {
+      "type": {
         "defaultValue": {
-          "value": "div"
+          "value": "indication"
         },
-        "description": "The HTML element or custom component used as the root.",
-        "name": "elementType",
+        "description": "The type of the breadcrumb bar, determining if it is navigational or for indication only.",
+        "name": "type",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "enum",
+          "raw": "BreadcrumbsBarType",
+          "value": [
+            {
+              "value": "\"navigation\""
+            },
+            {
+              "value": "\"indication\""
+            }
+          ]
         }
       },
       "children": {
         "defaultValue": null,
-        "description": "The content inside the box.",
+        "description": "The breadcrumb items displayed in the bar.",
         "name": "children",
+        "required": true,
+        "type": {
+          "name": "ReactElement<BreadcrumbItemProps | BreadcrumbMenuProps, string | JSXElementConstructor<any>> | ReactElement<...>[]"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "ElementContent"
+          "name": "string"
         }
       },
-      "disabled": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "If true, the box is disabled.",
-        "name": "disabled",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "border": {
+      "id": {
         "defaultValue": null,
-        "description": "If true, applies a border to the box.",
-        "name": "border",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { BreadcrumbsBar } from \"@vibe/core\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenu.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as BreadcrumbMenu",
+      "type BreadcrumbMenuProps"
+    ],
+    "displayName": "BreadcrumbMenu",
+    "description": "",
+    "props": {
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
         }
       },
-      "borderColor": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "The color of the border.",
-        "name": "borderColor",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BorderColor",
-          "value": [
-            {
-              "value": "\"uiBorderColor\""
-            },
-            {
-              "value": "\"layoutBorderColor\""
-            }
-          ]
+          "name": "string"
         }
       },
-      "rounded": {
+      "id": {
         "defaultValue": null,
-        "description": "The border radius of the box.",
-        "name": "rounded",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { BreadcrumbMenu } from \"@vibe/core\"",
+    "parentComponent": "BreadcrumbsBar",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/Button/Button.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as Button",
+      "type ButtonProps",
+      "ButtonType",
+      "ButtonInputType",
+      "ButtonColor",
+      "ButtonSize"
+    ],
+    "displayName": "Button",
+    "description": "",
+    "props": {
+      "className": {
+        "defaultValue": null,
+        "description": "Custom class names to pass to the component",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "activeButtonClassName": {
+        "defaultValue": null,
+        "description": "",
+        "name": "activeButtonClassName",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "kind": {
+        "defaultValue": {
+          "value": "primary"
+        },
+        "description": "The button's kind",
+        "name": "kind",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "RoundedSize",
+          "raw": "ButtonType",
           "value": [
             {
-              "value": "\"big\""
+              "value": "\"primary\""
             },
             {
-              "value": "\"small\""
+              "value": "\"secondary\""
             },
             {
-              "value": "\"medium\""
+              "value": "\"tertiary\""
             }
           ]
         }
       },
-      "shadow": {
+      "onClick": {
         "defaultValue": null,
-        "description": "The shadow style applied to the box.",
-        "name": "shadow",
+        "description": "Callback function to run when the button is clicked",
+        "name": "onClick",
+        "required": false,
+        "type": {
+          "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": "medium"
+        },
+        "description": "The button's size",
+        "name": "size",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "Shadow",
+          "raw": "ButtonSize",
           "value": [
             {
-              "value": "\"small\""
+              "value": "\"xxs\""
             },
             {
-              "value": "\"medium\""
+              "value": "\"xs\""
             },
             {
-              "value": "\"xs\""
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
             },
             {
               "value": "\"large\""
@@ -2194,664 +2331,345 @@
           ]
         }
       },
-      "margin": {
-        "defaultValue": null,
-        "description": "The margin applied to all sides.",
-        "name": "margin",
+      "color": {
+        "defaultValue": {
+          "value": "primary"
+        },
+        "description": "The button's color",
+        "name": "color",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "BoxSize",
+          "raw": "ButtonColor",
           "value": [
             {
-              "value": "\"small\""
+              "value": "\"primary\""
             },
             {
-              "value": "\"medium\""
+              "value": "\"positive\""
             },
             {
-              "value": "\"xs\""
+              "value": "\"negative\""
             },
             {
-              "value": "\"large\""
+              "value": "\"inverted\""
             },
             {
-              "value": "\"xl\""
+              "value": "\"on-primary-color\""
             },
             {
-              "value": "\"xxl\""
+              "value": "\"on-inverted-background\""
             },
             {
-              "value": "\"xxxl\""
+              "value": "\"brand\""
             },
             {
-              "value": "\"auto\""
+              "value": "\"fixed-light\""
+            },
+            {
+              "value": "\"fixed-dark\""
             }
           ]
         }
       },
-      "marginX": {
-        "defaultValue": null,
-        "description": "The horizontal margin.",
-        "name": "marginX",
+      "type": {
+        "defaultValue": {
+          "value": "button"
+        },
+        "description": "The button's type",
+        "name": "type",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "BoxSize",
+          "raw": "ButtonInputType",
           "value": [
             {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
+              "value": "\"button\""
             },
             {
-              "value": "\"xxxl\""
+              "value": "\"submit\""
             },
             {
-              "value": "\"auto\""
+              "value": "\"reset\""
             }
           ]
         }
       },
-      "marginY": {
-        "defaultValue": null,
-        "description": "The vertical margin.",
-        "name": "marginY",
+      "disabled": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Whether the button should be disabled or not",
+        "name": "disabled",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            },
-            {
-              "value": "\"auto\""
-            }
-          ]
+          "name": "boolean"
         }
       },
-      "marginTop": {
-        "defaultValue": null,
-        "description": "The top margin.",
-        "name": "marginTop",
+      "rightIcon": {
+        "defaultValue": {
+          "value": "null"
+        },
+        "description": "Icon to place on the right",
+        "name": "rightIcon",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            },
-            {
-              "value": "\"auto\""
-            }
-          ]
+          "name": "SubIcon"
         }
       },
-      "marginEnd": {
-        "defaultValue": null,
-        "description": "The end (right in LTR, left in RTL) margin.",
-        "name": "marginEnd",
+      "leftIcon": {
+        "defaultValue": {
+          "value": "null"
+        },
+        "description": "Icon to place on the left",
+        "name": "leftIcon",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            },
-            {
-              "value": "\"auto\""
-            }
-          ]
+          "name": "SubIcon"
         }
       },
-      "marginBottom": {
-        "defaultValue": null,
-        "description": "The bottom margin.",
-        "name": "marginBottom",
+      "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": "enum",
-          "raw": "BaseBoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            }
-          ]
+          "name": "boolean"
         }
       },
-      "marginStart": {
+      "successIcon": {
+        "defaultValue": {
+          "value": "null"
+        },
+        "description": "Success icon name",
+        "name": "successIcon",
+        "required": false,
+        "type": {
+          "name": "SubIcon"
+        }
+      },
+      "successText": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "Success text",
+        "name": "successText",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "loading": {
         "defaultValue": null,
-        "description": "The start (left in LTR, right in RTL) margin.",
-        "name": "marginStart",
+        "description": "loading boolean which switches the text to a loader",
+        "name": "loading",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BaseBoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            }
-          ]
+          "name": "boolean"
         }
       },
-      "padding": {
+      "loaderClassName": {
         "defaultValue": null,
-        "description": "The padding applied to all sides.",
-        "name": "padding",
+        "description": "className which is applied to loader container *",
+        "name": "loaderClassName",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BaseBoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            }
-          ]
+          "name": "string"
         }
       },
-      "paddingX": {
+      "style": {
         "defaultValue": null,
-        "description": "The horizontal padding.",
-        "name": "paddingX",
+        "description": "",
+        "name": "style",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BaseBoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            }
-          ]
+          "name": "React.CSSProperties"
         }
       },
-      "paddingY": {
-        "defaultValue": null,
-        "description": "The vertical padding.",
-        "name": "paddingY",
+      "active": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "displays the active state",
+        "name": "active",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BaseBoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            }
-          ]
+          "name": "boolean"
         }
       },
-      "paddingTop": {
+      "id": {
         "defaultValue": null,
-        "description": "The top padding.",
-        "name": "paddingTop",
+        "description": "id to pass to the button",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BaseBoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            }
-          ]
+          "name": "string"
         }
       },
-      "paddingEnd": {
-        "defaultValue": null,
-        "description": "The end (right in LTR, left in RTL) padding.",
-        "name": "paddingEnd",
+      "marginRight": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "adds 8px margin to the right",
+        "name": "marginRight",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BaseBoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            }
-          ]
+          "name": "boolean"
         }
       },
-      "paddingBottom": {
-        "defaultValue": null,
-        "description": "The bottom padding.",
-        "name": "paddingBottom",
+      "marginLeft": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "adds 8px margin to the left",
+        "name": "marginLeft",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BaseBoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            }
-          ]
+          "name": "boolean"
         }
       },
-      "paddingStart": {
+      "ariaLabeledBy": {
         "defaultValue": null,
-        "description": "The start (left in LTR, right in RTL) padding.",
-        "name": "paddingStart",
+        "description": "element id to describe the button accordingly",
+        "name": "ariaLabeledBy",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BaseBoxSize",
-          "value": [
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"large\""
-            },
-            {
-              "value": "\"xl\""
-            },
-            {
-              "value": "\"xxl\""
-            },
-            {
-              "value": "\"xxxl\""
-            }
-          ]
+          "name": "string"
         }
       },
-      "backgroundColor": {
+      "ariaLabel": {
         "defaultValue": null,
-        "description": "The background color of the box.",
-        "name": "backgroundColor",
+        "description": "aria label to provide important when providing only Icon",
+        "name": "ariaLabel",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BackgroundColor",
-          "value": [
-            {
-              "value": "\"primaryBackgroundColor\""
-            },
-            {
-              "value": "\"secondaryBackgroundColor\""
-            },
-            {
-              "value": "\"greyBackgroundColor\""
-            },
-            {
-              "value": "\"allgreyBackgroundColor\""
-            },
-            {
-              "value": "\"invertedColorBackground\""
-            }
-          ]
+          "name": "string"
         }
       },
-      "textColor": {
+      "ariaHasPopup": {
         "defaultValue": null,
-        "description": "The text color inside the box.",
-        "name": "textColor",
+        "description": "aria for a button popup",
+        "name": "ariaHasPopup",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BoxTextColor",
-          "value": [
-            {
-              "value": "\"primaryTextColor\""
-            },
-            {
-              "value": "\"textColorOnInverted\""
-            },
-            {
-              "value": "\"secondaryTextColor\""
-            }
-          ]
+          "name": "React.HTMLProps<HTMLButtonElement>"
         }
       },
-      "scrollable": {
+      "ariaExpanded": {
         "defaultValue": null,
-        "description": "If true, the box content is scrollable.",
-        "name": "scrollable",
+        "description": "aria to be set if the popup is open",
+        "name": "ariaExpanded",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "style": {
+      "ariaControls": {
         "defaultValue": null,
-        "description": "Inline styles applied to the box.",
-        "name": "style",
+        "description": "aria controls - receives id for the controlled region",
+        "name": "ariaControls",
         "required": false,
         "type": {
-          "name": "React.CSSProperties"
+          "name": "string"
         }
       },
-      "className": {
+      "aria-describedby": {
         "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+        "description": "",
+        "name": "aria-describedby",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "data-testid": {
+      "aria-hidden": {
         "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "aria to be used for screen reader to know if the button is hidden",
+        "name": "aria-hidden",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "Booleanish"
         }
       },
-      "id": {
+      "aria-pressed": {
         "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+        "description": "Indicates the current \"pressed\" state of toggle buttons",
+        "name": "aria-pressed",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean | \"true\" | \"false\" | \"mixed\""
         }
-      }
-    },
-    "import": "import { Box } from \"@vibe/core\"",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/BreadcrumbsBar/BreadcrumbsBar.tsx",
-    "aggregator": "core",
-    "symbols": [
-      "default as BreadcrumbsBar",
-      "type BreadcrumbBarProps"
-    ],
-    "displayName": "BreadcrumbsBar",
-    "description": "",
-    "props": {
-      "type": {
-        "defaultValue": {
-          "value": "indication"
-        },
-        "description": "The type of the breadcrumb bar, determining if it is navigational or for indication only.",
-        "name": "type",
+      },
+      "onFocus": {
+        "defaultValue": null,
+        "description": "On Button Focus callback",
+        "name": "onFocus",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "BreadcrumbsBarType",
-          "value": [
-            {
-              "value": "\"navigation\""
-            },
-            {
-              "value": "\"indication\""
-            }
-          ]
+          "name": "(event: React.FocusEvent<HTMLButtonElement>) => void"
         }
       },
-      "children": {
+      "onBlur": {
         "defaultValue": null,
-        "description": "The breadcrumb items displayed in the bar.",
-        "name": "children",
-        "required": true,
+        "description": "On Button Blur callback",
+        "name": "onBlur",
+        "required": false,
         "type": {
-          "name": "ReactElement<BreadcrumbItemProps | BreadcrumbMenuProps, string | JSXElementConstructor<any>> | ReactElement<...>[]"
+          "name": "(event: React.FocusEvent<HTMLButtonElement>) => void"
         }
       },
-      "className": {
-        "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+      "rightFlat": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "",
+        "name": "rightFlat",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "data-testid": {
-        "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+      "leftFlat": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "",
+        "name": "leftFlat",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "id": {
-        "defaultValue": null,
-        "description": "An HTML id attribute for the component.",
-        "name": "id",
+      "preventClickAnimation": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "",
+        "name": "preventClickAnimation",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
-      }
-    },
-    "import": "import { BreadcrumbsBar } from \"@vibe/core\"",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenu.tsx",
-    "aggregator": "core",
-    "symbols": [
-      "default as BreadcrumbMenu",
-      "type BreadcrumbMenuProps"
-    ],
-    "displayName": "BreadcrumbMenu",
-    "description": "",
-    "props": {
-      "className": {
-        "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+      },
+      "noSidePadding": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "",
+        "name": "noSidePadding",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "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"
@@ -2866,129 +2684,85 @@
           "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 { BreadcrumbMenu } from \"@vibe/core\"",
-    "parentComponent": "BreadcrumbsBar",
+    "import": "import { Button } from \"@vibe/button\"",
     "subComponents": []
   },
   {
-    "filePath": "src/Button/Button.tsx",
+    "filePath": "src/components/ButtonGroup/ButtonGroup.tsx",
     "aggregator": "core",
     "symbols": [
-      "default as Button",
-      "type ButtonProps",
-      "ButtonType",
-      "ButtonInputType",
-      "ButtonColor",
-      "ButtonSize"
+      "default as ButtonGroup",
+      "type ButtonGroupProps"
     ],
-    "displayName": "Button",
+    "displayName": "ButtonGroup",
     "description": "",
     "props": {
-      "className": {
+      "options": {
         "defaultValue": null,
-        "description": "Custom class names to pass to the component",
-        "name": "className",
+        "description": "The list of button options.",
+        "name": "options",
+        "required": true,
+        "type": {
+          "name": "ButtonGroupOption[]"
+        }
+      },
+      "value": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "The currently selected button value.",
+        "name": "value",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "ButtonValue"
         }
       },
-      "activeButtonClassName": {
+      "onSelect": {
         "defaultValue": null,
-        "description": "",
-        "name": "activeButtonClassName",
+        "description": "Callback fired when a button is selected.",
+        "name": "onSelect",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(value: ButtonValue, name: string) => void"
         }
       },
-      "kind": {
+      "size": {
         "defaultValue": {
-          "value": "primary"
+          "value": "small"
         },
-        "description": "The button's kind",
-        "name": "kind",
+        "description": "The size of the buttons.",
+        "name": "size",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "ButtonType",
+          "raw": "ButtonSize",
           "value": [
             {
-              "value": "\"primary\""
+              "value": "\"xxs\""
             },
             {
-              "value": "\"secondary\""
-            },
-            {
-              "value": "\"tertiary\""
-            }
-          ]
-        }
-      },
-      "onClick": {
-        "defaultValue": null,
-        "description": "Callback function to run when the button is clicked",
-        "name": "onClick",
-        "required": false,
-        "type": {
-          "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": "medium"
-        },
-        "description": "The button's size",
-        "name": "size",
-        "required": false,
-        "type": {
-          "name": "enum",
-          "raw": "ButtonSize",
-          "value": [
-            {
-              "value": "\"xxs\""
-            },
-            {
-              "value": "\"xs\""
+              "value": "\"xs\""
             },
             {
               "value": "\"small\""
@@ -3002,987 +2776,542 @@
           ]
         }
       },
-      "color": {
+      "kind": {
         "defaultValue": {
-          "value": "primary"
+          "value": "secondary"
         },
-        "description": "The button's color",
-        "name": "color",
+        "description": "The style variant of the buttons.",
+        "name": "kind",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "ButtonColor",
+          "raw": "\"secondary\" | \"tertiary\"",
           "value": [
             {
-              "value": "\"primary\""
-            },
-            {
-              "value": "\"positive\""
-            },
-            {
-              "value": "\"negative\""
-            },
-            {
-              "value": "\"inverted\""
-            },
-            {
-              "value": "\"on-primary-color\""
-            },
-            {
-              "value": "\"on-inverted-background\""
-            },
-            {
-              "value": "\"brand\""
-            },
-            {
-              "value": "\"fixed-light\""
+              "value": "\"secondary\""
             },
             {
-              "value": "\"fixed-dark\""
+              "value": "\"tertiary\""
             }
           ]
         }
       },
-      "type": {
+      "name": {
         "defaultValue": {
-          "value": "button"
+          "value": ""
         },
-        "description": "The button's type",
-        "name": "type",
+        "description": "The name of the button group.",
+        "name": "name",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "ButtonInputType",
-          "value": [
-            {
-              "value": "\"button\""
-            },
-            {
-              "value": "\"submit\""
-            },
-            {
-              "value": "\"reset\""
-            }
-          ]
+          "name": "string"
         }
       },
       "disabled": {
         "defaultValue": {
           "value": "false"
         },
-        "description": "Whether the button should be disabled or not",
+        "description": "If true, disables all buttons in the group.",
         "name": "disabled",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "rightIcon": {
-        "defaultValue": {
-          "value": "null"
-        },
-        "description": "Icon to place on the right",
-        "name": "rightIcon",
-        "required": false,
-        "type": {
-          "name": "SubIcon"
-        }
-      },
-      "leftIcon": {
-        "defaultValue": {
-          "value": "null"
-        },
-        "description": "Icon to place on the left",
-        "name": "leftIcon",
-        "required": false,
-        "type": {
-          "name": "SubIcon"
-        }
-      },
-      "success": {
+      "groupAriaLabel": {
         "defaultValue": {
-          "value": "false"
+          "value": ""
         },
-        "description": "the success props are used when you have async action and wants to display a success message",
-        "name": "success",
+        "description": "The label of the button group for accessibility.",
+        "name": "groupAriaLabel",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "successIcon": {
-        "defaultValue": {
-          "value": "null"
-        },
-        "description": "Success icon name",
-        "name": "successIcon",
+      "tooltipPosition": {
+        "defaultValue": null,
+        "description": "The position of the tooltip relative to the button.",
+        "name": "tooltipPosition",
         "required": false,
         "type": {
-          "name": "SubIcon"
+          "name": "enum",
+          "raw": "TooltipPositions",
+          "value": [
+            {
+              "value": "\"top\""
+            },
+            {
+              "value": "\"right\""
+            },
+            {
+              "value": "\"bottom\""
+            },
+            {
+              "value": "\"left\""
+            }
+          ]
         }
       },
-      "successText": {
-        "defaultValue": {
-          "value": ""
-        },
-        "description": "Success text",
-        "name": "successText",
+      "tooltipHideDelay": {
+        "defaultValue": null,
+        "description": "The delay in milliseconds before the tooltip hides.",
+        "name": "tooltipHideDelay",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "number"
         }
       },
-      "loading": {
+      "tooltipShowDelay": {
         "defaultValue": null,
-        "description": "loading boolean which switches the text to a loader",
-        "name": "loading",
+        "description": "The delay in milliseconds before the tooltip shows.",
+        "name": "tooltipShowDelay",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "number"
         }
       },
-      "loaderClassName": {
+      "tooltipContainerSelector": {
         "defaultValue": null,
-        "description": "className which is applied to loader container *",
-        "name": "loaderClassName",
+        "description": "CSS selector for the tooltip container.",
+        "name": "tooltipContainerSelector",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "style": {
+      "tooltipMoveBy": {
         "defaultValue": null,
-        "description": "",
-        "name": "style",
-        "required": false,
-        "type": {
-          "name": "React.CSSProperties"
-        }
-      },
-      "active": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "displays the active state",
-        "name": "active",
+        "description": "Adjusts the tooltip position.",
+        "name": "tooltipMoveBy",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "MoveBy"
         }
       },
-      "id": {
+      "children": {
         "defaultValue": null,
-        "description": "id to pass to the button",
-        "name": "id",
+        "description": "The content inside the button group.",
+        "name": "children",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "React.ReactNode"
         }
       },
-      "marginRight": {
+      "fullWidth": {
         "defaultValue": {
           "value": "false"
         },
-        "description": "adds 8px margin to the right",
-        "name": "marginRight",
+        "description": "If true, makes the button group take the full width of its container.",
+        "name": "fullWidth",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "marginLeft": {
+      "blurOnMouseUp": {
         "defaultValue": {
-          "value": "false"
+          "value": "true"
         },
-        "description": "adds 8px margin to the left",
-        "name": "marginLeft",
+        "description": "If true, removes focus from the button after clicking.",
+        "name": "blurOnMouseUp",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "ariaLabeledBy": {
+      "className": {
         "defaultValue": null,
-        "description": "element id to describe the button accordingly",
-        "name": "ariaLabeledBy",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "ariaLabel": {
+      "data-testid": {
         "defaultValue": null,
-        "description": "aria label to provide important when providing only Icon",
-        "name": "ariaLabel",
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "ariaHasPopup": {
+      "id": {
         "defaultValue": null,
-        "description": "aria for a button popup",
-        "name": "ariaHasPopup",
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "React.HTMLProps<HTMLButtonElement>"
+          "name": "string"
         }
-      },
-      "ariaExpanded": {
+      }
+    },
+    "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": "aria to be set if the popup is open",
-        "name": "ariaExpanded",
+        "description": "Class name applied to the checkbox element.",
+        "name": "checkboxClassName",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
-      "ariaControls": {
+      "labelClassName": {
         "defaultValue": null,
-        "description": "aria controls - receives id for the controlled region",
-        "name": "ariaControls",
+        "description": "Class name applied to the label element.",
+        "name": "labelClassName",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "aria-describedby": {
+      "ariaLabel": {
         "defaultValue": null,
-        "description": "",
-        "name": "aria-describedby",
+        "description": "The label of the checkbox for accessibility.",
+        "name": "ariaLabel",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "aria-hidden": {
+      "label": {
         "defaultValue": null,
-        "description": "aria to be used for screen reader to know if the button is hidden",
-        "name": "aria-hidden",
+        "description": "The content displayed next to the checkbox.",
+        "name": "label",
         "required": false,
         "type": {
-          "name": "Booleanish"
+          "name": "any"
         }
       },
-      "aria-pressed": {
+      "ariaLabelledBy": {
         "defaultValue": null,
-        "description": "Indicates the current \"pressed\" state of toggle buttons",
-        "name": "aria-pressed",
+        "description": "The ID of an element describing the checkbox.",
+        "name": "ariaLabelledBy",
         "required": false,
         "type": {
-          "name": "boolean | \"true\" | \"false\" | \"mixed\""
+          "name": "string"
         }
       },
-      "onFocus": {
+      "onChange": {
         "defaultValue": null,
-        "description": "On Button Focus callback",
-        "name": "onFocus",
+        "description": "Callback fired when the checkbox value changes.",
+        "name": "onChange",
         "required": false,
         "type": {
-          "name": "(event: React.FocusEvent<HTMLButtonElement>) => void"
+          "name": "(event: React.ChangeEvent<HTMLInputElement>) => void"
         }
       },
-      "onBlur": {
+      "checked": {
         "defaultValue": null,
-        "description": "On Button Blur callback",
-        "name": "onBlur",
+        "description": "If true, controls the checked state of the checkbox.",
+        "name": "checked",
         "required": false,
         "type": {
-          "name": "(event: React.FocusEvent<HTMLButtonElement>) => void"
+          "name": "boolean"
         }
       },
-      "rightFlat": {
+      "indeterminate": {
         "defaultValue": {
           "value": "false"
         },
-        "description": "",
-        "name": "rightFlat",
+        "description": "If true, displays an indeterminate state.",
+        "name": "indeterminate",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "leftFlat": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "",
-        "name": "leftFlat",
+      "autoFocus": {
+        "defaultValue": null,
+        "description": "If true, the checkbox automatically receives focus.",
+        "name": "autoFocus",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "preventClickAnimation": {
+      "disabled": {
         "defaultValue": {
           "value": "false"
         },
-        "description": "",
-        "name": "preventClickAnimation",
+        "description": "If true, the checkbox is disabled.",
+        "name": "disabled",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "noSidePadding": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "",
-        "name": "noSidePadding",
+      "defaultChecked": {
+        "defaultValue": null,
+        "description": "The initial checked state of the checkbox.",
+        "name": "defaultChecked",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "defaultTextColorOnPrimaryColor": {
+      "value": {
         "defaultValue": {
-          "value": "rgba(0, 0, 0, 0)"
+          "value": ""
         },
-        "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"
-        }
-      },
-      "data-testid": {
-        "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+        "description": "The value submitted with the form when checked.",
+        "name": "value",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "insetFocus": {
+      "name": {
         "defaultValue": {
-          "value": "false"
+          "value": ""
         },
-        "description": "Change the focus indicator from around the button to within it",
-        "name": "insetFocus",
+        "description": "The name of the checkbox, used for form submission.",
+        "name": "name",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
       "tabIndex": {
         "defaultValue": null,
-        "description": "Specifies the tab order of an element",
+        "description": "The tab order of the checkbox.",
         "name": "tabIndex",
         "required": false,
         "type": {
           "name": "number"
         }
-      }
-    },
-    "import": "import { Button } from \"@vibe/button\"",
-    "subComponents": []
-  },
-  {
-    "filePath": "src/components/ButtonGroup/ButtonGroup.tsx",
-    "aggregator": "core",
-    "symbols": [
-      "default as ButtonGroup",
-      "type ButtonGroupProps"
-    ],
-    "displayName": "ButtonGroup",
-    "description": "",
-    "props": {
-      "options": {
-        "defaultValue": null,
-        "description": "The list of button options.",
-        "name": "options",
-        "required": true,
-        "type": {
-          "name": "ButtonGroupOption[]"
-        }
       },
-      "value": {
+      "separateLabel": {
         "defaultValue": {
-          "value": ""
+          "value": "false"
         },
-        "description": "The currently selected button value.",
-        "name": "value",
+        "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": "ButtonValue"
+          "name": "boolean"
         }
       },
-      "onSelect": {
+      "className": {
         "defaultValue": null,
-        "description": "Callback fired when a button is selected.",
-        "name": "onSelect",
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
         "required": false,
         "type": {
-          "name": "(value: ButtonValue, name: string) => void"
+          "name": "string"
         }
       },
-      "size": {
-        "defaultValue": {
-          "value": "small"
-        },
-        "description": "The size of the buttons.",
-        "name": "size",
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "ButtonSize",
-          "value": [
-            {
-              "value": "\"xxs\""
-            },
-            {
-              "value": "\"xs\""
-            },
-            {
-              "value": "\"small\""
-            },
-            {
-              "value": "\"medium\""
-            },
-            {
-              "value": "\"large\""
-            }
-          ]
+          "name": "string"
         }
       },
-      "kind": {
-        "defaultValue": {
-          "value": "secondary"
-        },
-        "description": "The style variant of the buttons.",
-        "name": "kind",
+      "id": {
+        "defaultValue": null,
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
         "required": false,
         "type": {
-          "name": "enum",
-          "raw": "\"secondary\" | \"tertiary\"",
-          "value": [
-            {
-              "value": "\"secondary\""
-            },
-            {
-              "value": "\"tertiary\""
-            }
-          ]
+          "name": "string"
         }
-      },
-      "name": {
+      }
+    },
+    "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 name of the button group.",
-        "name": "name",
+        "description": "The text or content displayed inside the chip.",
+        "name": "label",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "ElementContent"
         }
       },
       "disabled": {
         "defaultValue": {
           "value": "false"
         },
-        "description": "If true, disables all buttons in the group.",
+        "description": "If true, the chip is disabled.",
         "name": "disabled",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
-      "groupAriaLabel": {
+      "readOnly": {
         "defaultValue": {
-          "value": ""
+          "value": "false"
         },
-        "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",
+        "description": "If true, the chip is read-only and cannot be deleted.",
+        "name": "readOnly",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "boolean"
         }
       },
-      "tooltipMoveBy": {
+      "rightRenderer": {
         "defaultValue": null,
-        "description": "Adjusts the tooltip position.",
-        "name": "tooltipMoveBy",
+        "description": "A React element displayed on the right side.",
+        "name": "rightRenderer",
         "required": false,
         "type": {
-          "name": "MoveBy"
+          "name": "ElementContent"
         }
       },
-      "children": {
+      "leftRenderer": {
         "defaultValue": null,
-        "description": "The content inside the button group.",
-        "name": "children",
+        "description": "A React element displayed on the left side.",
+        "name": "leftRenderer",
         "required": false,
         "type": {
-          "name": "React.ReactNode"
+          "name": "ElementContent"
         }
       },
-      "fullWidth": {
+      "rightIcon": {
         "defaultValue": {
-          "value": "false"
+          "value": "null"
         },
-        "description": "If true, makes the button group take the full width of its container.",
-        "name": "fullWidth",
+        "description": "Icon displayed on the right side.",
+        "name": "rightIcon",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "SubIcon"
         }
       },
-      "blurOnMouseUp": {
+      "leftIcon": {
         "defaultValue": {
-          "value": "true"
+          "value": "null"
         },
-        "description": "If true, removes focus from the button after clicking.",
-        "name": "blurOnMouseUp",
+        "description": "Icon displayed on the left side.",
+        "name": "leftIcon",
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "SubIcon"
         }
       },
-      "className": {
-        "defaultValue": null,
-        "description": "A CSS class name to apply to the component.",
-        "name": "className",
+      "rightAvatar": {
+        "defaultValue": {
+          "value": "null"
+        },
+        "description": "Image URL or text for an avatar displayed on the right.",
+        "name": "rightAvatar",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "data-testid": {
-        "defaultValue": null,
-        "description": "A unique identifier for testing purposes.",
-        "name": "data-testid",
+      "rightAvatarType": {
+        "defaultValue": {
+          "value": "img"
+        },
+        "description": "The type of avatar displayed on the right.",
+        "name": "rightAvatarType",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "enum",
+          "raw": "AvatarType",
+          "value": [
+            {
+              "value": "\"img\""
+            },
+            {
+              "value": "\"icon\""
+            },
+            {
+              "value": "\"text\""
+            }
+          ]
         }
       },
-      "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",
+      "leftAvatar": {
+        "defaultValue": {
+          "value": "null"
+        },
+        "description": "Image URL or text for an avatar displayed on the left.",
+        "name": "leftAvatar",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "labelClassName": {
-        "defaultValue": null,
-        "description": "Class name applied to the label element.",
-        "name": "labelClassName",
+      "leftAvatarType": {
+        "defaultValue": {
+          "value": "img"
+        },
+        "description": "The type of avatar displayed on the left.",
+        "name": "leftAvatarType",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "enum",
+          "raw": "AvatarType",
+          "value": [
+            {
+              "value": "\"img\""
+            },
+            {
+              "value": "\"icon\""
+            },
+            {
+              "value": "\"text\""
+            }
+          ]
         }
       },
-      "ariaLabel": {
+      "iconClassName": {
         "defaultValue": null,
-        "description": "The label of the checkbox for accessibility.",
-        "name": "ariaLabel",
+        "description": "Class name applied to left or right icons.",
+        "name": "iconClassName",
         "required": false,
         "type": {
           "name": "string"
         }
       },
-      "label": {
-        "defaultValue": null,
-        "description": "The content displayed next to the checkbox.",
-        "name": "label",
-        "required": false,
-        "type": {
-          "name": "any"
-        }
-      },
-      "ariaLabelledBy": {
+      "avatarClassName": {
         "defaultValue": null,
-        "description": "The ID of an element describing the checkbox.",
-        "name": "ariaLabelledBy",
+        "description": "Class name applied to left or right avatars.",
+        "name": "avatarClassName",
         "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": {
+      "color": {
         "defaultValue": {
-          "value": "false"
+          "value": "primary"
         },
-        "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": {
-          "name": "ElementContent"
-        }
-      },
-      "rightIcon": {
-        "defaultValue": {
-          "value": "null"
-        },
-        "description": "Icon displayed on the right side.",
-        "name": "rightIcon",
-        "required": false,
-        "type": {
-          "name": "SubIcon"
-        }
-      },
-      "leftIcon": {
-        "defaultValue": {
-          "value": "null"
-        },
-        "description": "Icon displayed on the left side.",
-        "name": "leftIcon",
-        "required": false,
-        "type": {
-          "name": "SubIcon"
-        }
-      },
-      "rightAvatar": {
-        "defaultValue": {
-          "value": "null"
-        },
-        "description": "Image URL or text for an avatar displayed on the right.",
-        "name": "rightAvatar",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "rightAvatarType": {
-        "defaultValue": {
-          "value": "img"
-        },
-        "description": "The type of avatar displayed on the right.",
-        "name": "rightAvatarType",
-        "required": false,
-        "type": {
-          "name": "enum",
-          "raw": "AvatarType",
-          "value": [
-            {
-              "value": "\"img\""
-            },
-            {
-              "value": "\"icon\""
-            },
-            {
-              "value": "\"text\""
-            }
-          ]
-        }
-      },
-      "leftAvatar": {
-        "defaultValue": {
-          "value": "null"
-        },
-        "description": "Image URL or text for an avatar displayed on the left.",
-        "name": "leftAvatar",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "leftAvatarType": {
-        "defaultValue": {
-          "value": "img"
-        },
-        "description": "The type of avatar displayed on the left.",
-        "name": "leftAvatarType",
-        "required": false,
-        "type": {
-          "name": "enum",
-          "raw": "AvatarType",
-          "value": [
-            {
-              "value": "\"img\""
-            },
-            {
-              "value": "\"icon\""
-            },
-            {
-              "value": "\"text\""
-            }
-          ]
-        }
-      },
-      "iconClassName": {
-        "defaultValue": null,
-        "description": "Class name applied to left or right icons.",
-        "name": "iconClassName",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "avatarClassName": {
-        "defaultValue": null,
-        "description": "Class name applied to left or right avatars.",
-        "name": "avatarClassName",
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "color": {
-        "defaultValue": {
-          "value": "primary"
-        },
-        "description": "The background color of the chip.",
-        "name": "color",
+        "description": "The background color of the chip.",
+        "name": "color",
         "required": false,
         "type": {
           "name": "enum",
@@ -4278,7 +3607,7 @@
     "subComponents": []
   },
   {
-    "filePath": "src/components/Clickable/Clickable.tsx",
+    "filePath": "src/Clickable/Clickable.tsx",
     "aggregator": "core",
     "symbols": [
       "default as Clickable",
@@ -4462,7 +3791,93 @@
         }
       }
     },
-    "import": "import { Clickable } from \"@vibe/core\"",
+    "import": "import { Clickable } from \"@vibe/clickable\"",
+    "subComponents": [
+      "ClickableWrapper"
+    ]
+  },
+  {
+    "filePath": "src/Clickable/ClickableWrapper.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as ClickableWrapper",
+      "type ClickableWrapperProps"
+    ],
+    "displayName": "ClickableWrapper",
+    "description": "",
+    "props": {
+      "children": {
+        "defaultValue": null,
+        "description": "The content inside the wrapper.",
+        "name": "children",
+        "required": true,
+        "type": {
+          "name": "React.ReactNode"
+        }
+      },
+      "isClickable": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "If true, wraps the content in a `Clickable` component.",
+        "name": "isClickable",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "clickableProps": {
+        "defaultValue": {
+          "value": "{}"
+        },
+        "description": "Props passed to the `Clickable` component.",
+        "name": "clickableProps",
+        "required": false,
+        "type": {
+          "name": "ClickableProps"
+        }
+      },
+      "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 { ClickableWrapper } from \"@vibe/clickable\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/useClickableProps/useClickableProps.ts",
+    "aggregator": "core",
+    "symbols": [
+      "default as useClickableProps"
+    ],
+    "displayName": "useClickableProps",
+    "description": "Return props for adding clickable functionality to the element except for the styles and classNames",
+    "props": {},
+    "import": "import { useClickableProps } from \"@vibe/clickable\"",
     "subComponents": []
   },
   {
@@ -7954,7 +7369,7 @@
     "subComponents": []
   },
   {
-    "filePath": "src/components/Flex/Flex.tsx",
+    "filePath": "src/Flex/Flex.tsx",
     "aggregator": "core",
     "symbols": [
       "default as Flex",
@@ -7981,176 +7396,868 @@
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "FlexDirection",
+          "raw": "FlexDirection",
+          "value": [
+            {
+              "value": "\"row\""
+            },
+            {
+              "value": "\"column\""
+            }
+          ]
+        }
+      },
+      "elementType": {
+        "defaultValue": {
+          "value": "div"
+        },
+        "description": "The HTML element or component used as the root.",
+        "name": "elementType",
+        "required": false,
+        "type": {
+          "name": "React.ElementType"
+        }
+      },
+      "wrap": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, allows wrapping of flex items.",
+        "name": "wrap",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "children": {
+        "defaultValue": null,
+        "description": "The content inside the flex container.",
+        "name": "children",
+        "required": false,
+        "type": {
+          "name": "ElementContent | ElementContent[]"
+        }
+      },
+      "justify": {
+        "defaultValue": {
+          "value": "start"
+        },
+        "description": "Defines how flex items are aligned along the main axis.",
+        "name": "justify",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "FlexJustify",
+          "value": [
+            {
+              "value": "\"start\""
+            },
+            {
+              "value": "\"center\""
+            },
+            {
+              "value": "\"end\""
+            },
+            {
+              "value": "\"stretch\""
+            },
+            {
+              "value": "\"space-around\""
+            },
+            {
+              "value": "\"space-between\""
+            },
+            {
+              "value": "\"initial\""
+            }
+          ]
+        }
+      },
+      "align": {
+        "defaultValue": {
+          "value": "center"
+        },
+        "description": "Defines how flex items are aligned along the cross axis.",
+        "name": "align",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "FlexAlign",
+          "value": [
+            {
+              "value": "\"start\""
+            },
+            {
+              "value": "\"center\""
+            },
+            {
+              "value": "\"end\""
+            },
+            {
+              "value": "\"stretch\""
+            },
+            {
+              "value": "\"initial\""
+            },
+            {
+              "value": "\"baseline\""
+            }
+          ]
+        }
+      },
+      "gap": {
+        "defaultValue": null,
+        "description": "The gap between flex items.",
+        "name": "gap",
+        "required": false,
+        "type": {
+          "name": "number | FlexGap"
+        }
+      },
+      "flex": {
+        "defaultValue": null,
+        "description": "The flex shorthand of the flex container.",
+        "name": "flex",
+        "required": false,
+        "type": {
+          "name": "FlexShorthand"
+        }
+      },
+      "ariaLabel": {
+        "defaultValue": null,
+        "description": "The label of the flex container for accessibility.",
+        "name": "ariaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "tabIndex": {
+        "defaultValue": null,
+        "description": "The tab order of the element.",
+        "name": "tabIndex",
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "onClick": {
+        "defaultValue": null,
+        "description": "Callback fired when the flex container is clicked.",
+        "name": "onClick",
+        "required": false,
+        "type": {
+          "name": "(event: React.MouseEvent) => void"
+        }
+      },
+      "onMouseDown": {
+        "defaultValue": null,
+        "description": "Callback fired when the mouse button is pressed on the flex container.",
+        "name": "onMouseDown",
+        "required": false,
+        "type": {
+          "name": "(event: React.MouseEvent) => void"
+        }
+      },
+      "ariaLabelledby": {
+        "defaultValue": null,
+        "description": "ID of the element describing the flex container.",
+        "name": "ariaLabelledby",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "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 { Flex } from \"@vibe/layout\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/Box/Box.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as Box",
+      "type BoxProps",
+      "BorderColor",
+      "BackgroundColor",
+      "BoxTextColor",
+      "BaseBoxSize",
+      "BoxSize",
+      "Shadow",
+      "RoundedSize"
+    ],
+    "displayName": "Box",
+    "description": "",
+    "props": {
+      "elementType": {
+        "defaultValue": {
+          "value": "div"
+        },
+        "description": "The HTML element or custom component used as the root.",
+        "name": "elementType",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "children": {
+        "defaultValue": null,
+        "description": "The content inside the box.",
+        "name": "children",
+        "required": false,
+        "type": {
+          "name": "ElementContent"
+        }
+      },
+      "disabled": {
+        "defaultValue": null,
+        "description": "If true, the box is disabled.",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "border": {
+        "defaultValue": null,
+        "description": "If true, applies a border to the box.",
+        "name": "border",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "borderColor": {
+        "defaultValue": null,
+        "description": "The color of the border.",
+        "name": "borderColor",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BorderColor",
+          "value": [
+            {
+              "value": "\"uiBorderColor\""
+            },
+            {
+              "value": "\"layoutBorderColor\""
+            }
+          ]
+        }
+      },
+      "rounded": {
+        "defaultValue": null,
+        "description": "The border radius of the box.",
+        "name": "rounded",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "RoundedSize",
+          "value": [
+            {
+              "value": "\"big\""
+            },
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            }
+          ]
+        }
+      },
+      "shadow": {
+        "defaultValue": null,
+        "description": "The shadow style applied to the box.",
+        "name": "shadow",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "Shadow",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            }
+          ]
+        }
+      },
+      "margin": {
+        "defaultValue": null,
+        "description": "The margin applied to all sides.",
+        "name": "margin",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            },
+            {
+              "value": "\"auto\""
+            }
+          ]
+        }
+      },
+      "marginX": {
+        "defaultValue": null,
+        "description": "The horizontal margin.",
+        "name": "marginX",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            },
+            {
+              "value": "\"auto\""
+            }
+          ]
+        }
+      },
+      "marginY": {
+        "defaultValue": null,
+        "description": "The vertical margin.",
+        "name": "marginY",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            },
+            {
+              "value": "\"auto\""
+            }
+          ]
+        }
+      },
+      "marginTop": {
+        "defaultValue": null,
+        "description": "The top margin.",
+        "name": "marginTop",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            },
+            {
+              "value": "\"auto\""
+            }
+          ]
+        }
+      },
+      "marginEnd": {
+        "defaultValue": null,
+        "description": "The end (right in LTR, left in RTL) margin.",
+        "name": "marginEnd",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            },
+            {
+              "value": "\"auto\""
+            }
+          ]
+        }
+      },
+      "marginBottom": {
+        "defaultValue": null,
+        "description": "The bottom margin.",
+        "name": "marginBottom",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BaseBoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            }
+          ]
+        }
+      },
+      "marginStart": {
+        "defaultValue": null,
+        "description": "The start (left in LTR, right in RTL) margin.",
+        "name": "marginStart",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BaseBoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            }
+          ]
+        }
+      },
+      "padding": {
+        "defaultValue": null,
+        "description": "The padding applied to all sides.",
+        "name": "padding",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BaseBoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            }
+          ]
+        }
+      },
+      "paddingX": {
+        "defaultValue": null,
+        "description": "The horizontal padding.",
+        "name": "paddingX",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BaseBoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            }
+          ]
+        }
+      },
+      "paddingY": {
+        "defaultValue": null,
+        "description": "The vertical padding.",
+        "name": "paddingY",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BaseBoxSize",
           "value": [
             {
-              "value": "\"row\""
+              "value": "\"small\""
             },
             {
-              "value": "\"column\""
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
             }
           ]
         }
       },
-      "elementType": {
-        "defaultValue": {
-          "value": "div"
-        },
-        "description": "The HTML element or component used as the root.",
-        "name": "elementType",
-        "required": false,
-        "type": {
-          "name": "React.ElementType"
-        }
-      },
-      "wrap": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "If true, allows wrapping of flex items.",
-        "name": "wrap",
-        "required": false,
-        "type": {
-          "name": "boolean"
-        }
-      },
-      "children": {
+      "paddingTop": {
         "defaultValue": null,
-        "description": "The content inside the flex container.",
-        "name": "children",
-        "required": false,
-        "type": {
-          "name": "ElementContent | ElementContent[]"
-        }
-      },
-      "justify": {
-        "defaultValue": {
-          "value": "start"
-        },
-        "description": "Defines how flex items are aligned along the main axis.",
-        "name": "justify",
+        "description": "The top padding.",
+        "name": "paddingTop",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "FlexJustify",
+          "raw": "BaseBoxSize",
           "value": [
             {
-              "value": "\"start\""
+              "value": "\"small\""
             },
             {
-              "value": "\"center\""
+              "value": "\"medium\""
             },
             {
-              "value": "\"end\""
+              "value": "\"xs\""
             },
             {
-              "value": "\"stretch\""
+              "value": "\"large\""
             },
             {
-              "value": "\"space-around\""
+              "value": "\"xl\""
             },
             {
-              "value": "\"space-between\""
+              "value": "\"xxl\""
             },
             {
-              "value": "\"initial\""
+              "value": "\"xxxl\""
             }
           ]
         }
       },
-      "align": {
-        "defaultValue": {
-          "value": "center"
-        },
-        "description": "Defines how flex items are aligned along the cross axis.",
-        "name": "align",
+      "paddingEnd": {
+        "defaultValue": null,
+        "description": "The end (right in LTR, left in RTL) padding.",
+        "name": "paddingEnd",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "FlexAlign",
+          "raw": "BaseBoxSize",
           "value": [
             {
-              "value": "\"start\""
+              "value": "\"small\""
             },
             {
-              "value": "\"center\""
+              "value": "\"medium\""
             },
             {
-              "value": "\"end\""
+              "value": "\"xs\""
             },
             {
-              "value": "\"stretch\""
+              "value": "\"large\""
             },
             {
-              "value": "\"initial\""
+              "value": "\"xl\""
             },
             {
-              "value": "\"baseline\""
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
             }
           ]
         }
       },
-      "gap": {
-        "defaultValue": null,
-        "description": "The gap between flex items.",
-        "name": "gap",
-        "required": false,
-        "type": {
-          "name": "number | FlexGap"
-        }
-      },
-      "flex": {
+      "paddingBottom": {
         "defaultValue": null,
-        "description": "The flex shorthand of the flex container.",
-        "name": "flex",
+        "description": "The bottom padding.",
+        "name": "paddingBottom",
         "required": false,
         "type": {
-          "name": "FlexShorthand"
+          "name": "enum",
+          "raw": "BaseBoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            }
+          ]
         }
       },
-      "ariaLabel": {
+      "paddingStart": {
         "defaultValue": null,
-        "description": "The label of the flex container for accessibility.",
-        "name": "ariaLabel",
+        "description": "The start (left in LTR, right in RTL) padding.",
+        "name": "paddingStart",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "enum",
+          "raw": "BaseBoxSize",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"large\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            },
+            {
+              "value": "\"xxxl\""
+            }
+          ]
         }
       },
-      "tabIndex": {
+      "backgroundColor": {
         "defaultValue": null,
-        "description": "The tab order of the element.",
-        "name": "tabIndex",
+        "description": "The background color of the box.",
+        "name": "backgroundColor",
         "required": false,
         "type": {
-          "name": "number"
+          "name": "enum",
+          "raw": "BackgroundColor",
+          "value": [
+            {
+              "value": "\"primaryBackgroundColor\""
+            },
+            {
+              "value": "\"secondaryBackgroundColor\""
+            },
+            {
+              "value": "\"greyBackgroundColor\""
+            },
+            {
+              "value": "\"allgreyBackgroundColor\""
+            },
+            {
+              "value": "\"invertedColorBackground\""
+            }
+          ]
         }
       },
-      "onClick": {
+      "textColor": {
         "defaultValue": null,
-        "description": "Callback fired when the flex container is clicked.",
-        "name": "onClick",
+        "description": "The text color inside the box.",
+        "name": "textColor",
         "required": false,
         "type": {
-          "name": "(event: React.MouseEvent) => void"
+          "name": "enum",
+          "raw": "BoxTextColor",
+          "value": [
+            {
+              "value": "\"primaryTextColor\""
+            },
+            {
+              "value": "\"textColorOnInverted\""
+            },
+            {
+              "value": "\"secondaryTextColor\""
+            }
+          ]
         }
       },
-      "onMouseDown": {
+      "scrollable": {
         "defaultValue": null,
-        "description": "Callback fired when the mouse button is pressed on the flex container.",
-        "name": "onMouseDown",
+        "description": "If true, the box content is scrollable.",
+        "name": "scrollable",
         "required": false,
         "type": {
-          "name": "(event: React.MouseEvent) => void"
+          "name": "boolean"
         }
       },
-      "ariaLabelledby": {
+      "style": {
         "defaultValue": null,
-        "description": "ID of the element describing the flex container.",
-        "name": "ariaLabelledby",
+        "description": "Inline styles applied to the box.",
+        "name": "style",
         "required": false,
         "type": {
-          "name": "string"
+          "name": "React.CSSProperties"
         }
       },
       "className": {
@@ -8181,7 +8288,7 @@
         }
       }
     },
-    "import": "import { Flex } from \"@vibe/core\"",
+    "import": "import { Box } from \"@vibe/layout\"",
     "subComponents": []
   },
   {
@@ -20390,6 +20497,24 @@
           "name": "string"
         }
       },
+      "searchable": {
+        "defaultValue": null,
+        "description": "If true, the dropdown is searchable.",
+        "name": "searchable",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "boxMode": {
+        "defaultValue": null,
+        "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.",
@@ -20468,10 +20593,10 @@
           ]
         }
       },
-      "searchable": {
+      "borderless": {
         "defaultValue": null,
-        "description": "If true, the dropdown is searchable.",
-        "name": "searchable",
+        "description": "If true, the dropdown has no visible border by default, but shows border on hover, focus, and active states.",
+        "name": "borderless",
         "required": false,
         "type": {
           "name": "boolean"