chore(alert): update docs and refactor

apps/docs/content/docs/components/alert.mdx

@@ -13,7 +13,7 @@ Alerts are temporary notifications that provide concise feedback about an action
 
 ---
 
-
+<CarbonAd/>
 
 ## Installation
 
@@ -66,19 +66,32 @@ If `isClosable` is true, a close button appears on the alert, which can be used
 
 ## Slots
 
-- **base**: Alert wrapper, it handles alignment, placement, and general appearance.
-- **mainWrapper**: Wraps the `title` and `description` of the alert.
-- **closeButton**: The `closeButton`, it is at the top-right corner of alert.
-- **description**: The description of the alert.
-- **title**: The title of the alert.
-- **closeIcon**: close icon that is wrapped inside the `closeButton`.
-- **alertIcon**: icon that appears at the top-left corner.
+- **base**:
+  Alert wrapper, it handles alignment, placement, and general appearance.
+- **mainWrapper**:
+  Wraps the `title` and `description` of the alert.
+- **closeButton**:
+  The `closeButton`, it is at the top-right corner of alert.
+- **description**:
+  The description of the alert.
+- **title**:
+  The title of the alert.
+- **closeIcon**:
+  close icon that is wrapped inside the `closeButton`.
+- **alertIcon**:
+  icon that appears at the top-left corner.
+
+<Spacer y={4} />
+
+### Custom Alert Styles
+
+You can customize the alert styles  by using the `classNames` property.
 
-### Custom Styles
+Here's an example of how to customize the alert styles:
 
-You can customize the `Alert` component by passing custom Tailwind CSS classes to the component slots.
+<CodeDemo title="Custom Alert Styles" files={alertContent.customStyles} />
 
-<CodeDemo title="Custom Styles" highlightedLines="12-32" files={alertContent.customStyles} />
+<Spacer y={4} />
 
 ### Custom Implementation
 

packages/components/alert/src/index.ts

@@ -1,2 +1,10 @@
 import Alert from "./alert";
+
+// export types
+export type {AlertProps} from "./alert";
+
+// export hooks
+export {useAlert} from "./use-alert";
+
+// export component
 export {Alert};