### Install Styled-Components Dependency (Yarn)

Source: https://coral.insea.io/developer/versions/v2.33.4/index

Installs the styled-components peer dependency using Yarn. Coral relies on styled-components for its styling.

```bash
yarn add styled-components
```

--------------------------------

### Install Coral package

Source: https://coral.insea.io/developer/versions/v2.43.1/index

Installs the Coral package from npm or yarn. This is the primary step to integrate Coral into your project.

```bash
yarn add @seaweb/coral
# or `npm install @seaweb/coral`
```

--------------------------------

### Install Styled Components Peer Dependency

Source: https://coral.insea.io/developer/versions/v2.36.0/index

Installs the styled-components library, which is a peer dependency for Coral. This must be installed separately.

```shell
yarn add styled-components

```

--------------------------------

### Install Coral Package using Yarn or npm

Source: https://coral.insea.io/developer/versions/v2.56.1/index

Instructions for installing the Coral package using either Yarn or npm. This step assumes the .npmrc file has already been configured.

```bash
yarn add @seaweb/coral

```

```bash
npm install @seaweb/coral

```

--------------------------------

### Install Coral Package using Yarn

Source: https://coral.insea.io/developer/versions/v2.36.0/index

Installs the Coral package using the Yarn package manager. This command adds the Coral library to your project's dependencies.

```shell
yarn add @seaweb/coral

```

--------------------------------

### Install Coral Package using NPM

Source: https://coral.insea.io/developer/versions/v2.36.0/index

Installs the Coral package using the NPM package manager. This command adds the Coral library to your project's dependencies.

```shell
npm install @seaweb/coral

```

--------------------------------

### Install Coral Package (Yarn/NPM)

Source: https://coral.insea.io/developer/versions/v2.33.4/index

Installs the Coral UI package using either Yarn or NPM. This command adds the Coral library to your project's dependencies.

```bash
yarn add @seaweb/coral
```

```bash
npm install @seaweb/coral
```

--------------------------------

### Configure NPM Registry

Source: https://coral.insea.io/developer/versions/v2.33.4/index

Sets the NPM registry to the private Seagroup registry. This is a prerequisite for installing the Coral package. Ensure this file is placed next to your package.json.

```text
registry = https://npm.seagroup.com/
```

--------------------------------

### Configure npm Registry for Sea Coral

Source: https://coral.insea.io/developer/versions/v2.56.1/index

This snippet shows how to configure your npm registry to point to the Sea Coral registry. It requires creating a .npmrc file in your project's root directory.

```text
registry = https://npm.sea.com/

```

--------------------------------

### Configure npm registry

Source: https://coral.insea.io/developer/versions/v2.43.1/index

Sets the npm registry to the Sea Coral private registry. This is a prerequisite for installing Coral packages.

```javascript
registry = https://npm.sea.com/
```

--------------------------------

### Configure NPM Registry

Source: https://coral.insea.io/developer/versions/v2.36.0/index

Sets the NPM registry to use the Seagroup registry. This is a configuration step required before installing Coral packages.

```shell
registry = "https://npm.seagroup.com/"

```

--------------------------------

### Pusher Basic Usage Example

Source: https://coral.insea.io/developer/Utilities/Pusher

Demonstrates the fundamental implementation of the Pusher component. This example shows how to push a message using the `usePusherContext` hook, which should be called within the Pusher component itself. It assumes Pusher is placed at the top level of the application.

```jsx
import { Pusher } from "@your-design-system/pusher";
import { usePusherContext } from "@your-design-system/pusher";

function App() {
  const push = usePusherContext();

  return (
    <Pusher>
      <button onClick={() => push("This is a basic push message!")}>Push Message</button>
    </Pusher>
  );
}
```

--------------------------------

### RangePickerInputStart Component Props

Source: https://coral.insea.io/developer/Input/RangePicker

Defines the properties for the RangePickerInputStart component, allowing customization of an input element's start adornment. It supports disabled state and change events.

```typescript
import { ChangeEvent } from 'react';

interface RangePickerInputStartProps {
  as?: any;
  disabled?: boolean;
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
  value?: string;
}
```

--------------------------------

### Pusher Container Positions Example

Source: https://coral.insea.io/developer/Utilities/Pusher

Illustrates how to control the display position of Pusher messages. By default, messages appear at 'TopCenter'. This example shows how to override the default by passing a `position` option to the `push` function, selecting from predefined `PusherPositions`.

```jsx
import { Pusher, PusherPositions } from "@your-design-system/pusher";
import { usePusherContext } from "@your-design-system/pusher";

function App() {
  const push = usePusherContext();

  return (
    <Pusher>
      <button onClick={() => push("Message in the middle center", PusherPositions.MiddleCenter)}>
        Push Middle Center
      </button>
    </Pusher>
  );
}
```

--------------------------------

### Lightbox API

Source: https://coral.insea.io/developer/Pattern/Lightbox

API documentation for the Lightbox component, detailing its available properties, types, default values, and descriptions.

```APIDOC
## Lightbox API

### Description
API documentation for the Lightbox component, detailing its available properties, types, default values, and descriptions.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Props
- **activeIndex** (number) - Optional - Controls which image is active.
- **as** (any) - Optional - Tag or component to use. A simple tag (e.g., div, span) is recommended.
- **collapse** (boolean) - Optional - 
- **flipKey** (string) - Optional - 
- **immediate** (boolean) - Optional - Disables the zooming animation when set to true.
- **initialActiveIndex** (number) - Optional - 
- **onChange** ((activeIndex: number) => void) - Optional - Callback function when the active index changes.
- **overlayElement** (ReactElement<any, string | JSXElementConstructor<any>>) - Optional - Custom React element to render within the overlay. Defaults to `<LightboxOverlay />`.
- **theme** (Theme<StyledTheme>) - Optional - Theme object for styling the Lightbox component.

### Request Example
N/A (Component API)

### Response
#### Success Response (200)
N/A (Component API)

#### Response Example
N/A (Component API)
```

--------------------------------

### Basic Select Component Usage

Source: https://coral.insea.io/developer/Input/Select

Demonstrates the fundamental usage of the Select component, likely for a simple dropdown selection. No specific props are shown, indicating default configuration.

```jsx
<Select />
```

--------------------------------

### Stepper Component API

Source: https://coral.insea.io/developer/Navigation/Stepper

API documentation for the Stepper component and its related sub-components.

```APIDOC
## Step Component API

### Description
Defines the properties for an individual step within the Stepper component.

### Properties

#### `as`
- **Type**: `any`
- **Default**: `null`
- **Description**: Tag or component to use for rendering the step. A simple tag (e.g., `div`, `span`) is recommended.

#### `connector`
- **Type**: `ReactNode`
- **Default**: `null`
- **Description**: Renders a custom connector for the step.

#### `description`
- **Type**: `ReactElement<any, string | JSXElementConstructor<any>>`
- **Default**: `null`
- **Description**: Renders a description for the step.

#### `index`
- **Type**: `number`
- **Default**: `null`
- **Description**: The index of the step.

#### `status`
- **Type**: `StepStatuses`
- **Default**: `null`
- **Description**: The current status of the step (e.g., 'wait', 'process', 'finish', 'error').

#### `title`
- **Type**: `ReactNode`
- **Default**: `null`
- **Description**: The title of the step.
```

```APIDOC
## StepButton Component API

### Description
Represents a clickable button for a step, allowing user interaction.

### Properties

#### `as`
- **Type**: `any`
- **Default**: `null`
- **Description**: Tag or component to use for rendering the step button. A simple tag (e.g., `div`, `span`) is recommended.

#### `clickable`
- **Type**: `boolean`
- **Default**: `true` if `onClick` is provided, otherwise `false`.
- **Description**: Determines if the step button is clickable.

#### `disabled`
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Equivalent to the button's `disabled` property.

#### `icon`
- **Type**: `ReactNode`
- **Default**: `null`
- **Description**: Custom icon to display within the step button.

#### `iconWrapperProps`
- **Type**: `HTMLAttributes<HTMLDivElement>`
- **Default**: `null`
- **Description**: Props to apply to the icon wrapper element.

#### `keyboardClickKeys`
- **Type**: `string[]`
- **Default**: `null`
- **Description**: Keys that trigger a click event when the button is focused.

#### `onBlur`
- **Type**: `FocusEventHandler<HTMLDivElement>`
- **Default**: `null`
- **Description**: Callback function for when the button loses focus.

#### `onClick`
- **Type**: `MouseEventHandler<HTMLDivElement>`
- **Default**: `null`
- **Description**: Callback function for when the button is clicked.

#### `onKeyDown`
- **Type**: `KeyboardEventHandler<HTMLDivElement>`
- **Default**: `null`
- **Description**: Callback function for when a key is pressed while the button is focused.

#### `onKeyUp`
- **Type**: `KeyboardEventHandler<HTMLDivElement>`
- **Default**: `null`
- **Description**: Callback function for when a key is released while the button is focused.

#### `onMouseDown`
- **Type**: `MouseEventHandler<HTMLDivElement>`
- **Default**: `null`
- **Description**: Callback function for when the mouse button is pressed down over the button.

#### `onMouseLeave`
- **Type**: `MouseEventHandler<HTMLDivElement>`
- **Default**: `null`
- **Description**: Callback function for when the mouse leaves the button area.

#### `onMouseUp`
- **Type**: `MouseEventHandler<HTMLDivElement>`
- **Default**: `null`
- **Description**: Callback function for when the mouse button is released over the button.

#### `onRelease`
- **Type**: `EventHandler<SyntheticEvent<HTMLDivElement, Event>>`
- **Default**: `null`
- **Description**: Callback that's triggered after a click action (e.g., mouseup and keyup of enter or space).

#### `onTouchEnd`
- **Type**: `TouchEventHandler<HTMLDivElement>`
- **Default**: `null`
- **Description**: Callback function for when the touch action ends on the button.

#### `onTouchStart`
- **Type**: `TouchEventHandler<HTMLDivElement>`
- **Default**: `null`
- **Description**: Callback function for when the touch action starts on the button.

#### `title`
- **Type**: `ReactNode`
- **Default**: `null`
- **Description**: The title of the step button.
```

```APIDOC
## StepConnector Component API

### Description
Component used to render the connector between steps.

### Properties

#### `as`
- **Type**: `any`
- **Default**: `null`
- **Description**: Tag or component to use for rendering the step connector. A simple tag (e.g., `div`, `span`) is recommended.
```

```APIDOC
## StepDescription Component API

### Description
Component used to render the description part of a step, particularly useful in vertical steppers.

### Properties

#### `as`
- **Type**: `any`
- **Default**: `null`
- **Description**: Tag or component to use for rendering the step description. A simple tag (e.g., `div`, `span`) is recommended.
```

--------------------------------

### Configure Portal Container in Coral

Source: https://coral.insea.io/developer/Guides

This guide explains how to override the default portal container behavior for Coral components. By default, React Portals render differently on client-side versus server-side. This allows custom logic, such as rendering a specific component inline.

```javascript
import { setConfigs, defaultGetPortalContainer } from '@seaweb/coral/utils/configs';


setConfigs({
  getPortalContainer: (componentName, propName, options) => {
    if (componentName === 'SelectList') return null;
    return defaultGetPortalContainer(componentName, propName, options);
  },
});
```

--------------------------------

### Drawer Component API

Source: https://coral.insea.io/developer/Pattern/Drawer

Configuration options for the main Drawer component, controlling its visibility, focus management, scrolling behavior, and more.

```APIDOC
## Drawer Component

### Description
Controls the display and behavior of a side drawer, including focus trapping and scroll locking. It adheres to WAI-ARIA Dialog (Modal) practices for accessibility.

### Props

#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* **as** (any) - Optional - Tag or component to render as. Built-in tags like `div` or `span` are recommended.
* **autoFocus** (boolean) - Optional - If true, the drawer will automatically focus an element upon opening.
* **basis** (number) - Optional - Defines the basis value for the drawer's layout.
* **container** (HTMLElement) - Optional - Specifies the DOM element that the drawer should be mounted to.
* **disableFocusLock** (boolean) - Optional - If true, focus trapping will be disabled.
* **disableScrollLock** (boolean) - Optional - If true, body scrolling will not be locked when the drawer is open.
* **elevationLevel** (number) - Optional - Sets the elevation level for visual depth.
* **immediate** (boolean) - Optional - Controls immediate rendering or behavior.
* **initialIsOpen** (boolean) - Optional - Determines if the drawer is open by default.
* **isOpen** (boolean) - Optional - Controls the open/closed state of the drawer.
* **onClose** ( () => void ) - Optional - Callback function executed when the drawer is closed.
* **onOutsideClick** ( MouseEventHandler<HTMLDivElement> ) - Optional - Callback function executed when a click occurs outside the drawer.
* **placement** (DrawerPlacements) - Optional - Specifies the side from which the drawer appears (e.g., 'left', 'right').
* **restrainDismissal** (boolean) - Optional - If true, prevents dismissal actions under certain conditions.
* **returnFocusTo** (Element) - Optional - Specifies the element to which focus should return after the drawer closes.
* **showOverlay** (boolean) - Optional - If true, an overlay will be displayed behind the drawer.
* **stack** (boolean) - Optional - If true, allows the drawer to be stacked with other drawers.
```

--------------------------------

### TreeMultiSelect: Basic Usage Example

Source: https://coral.insea.io/developer/Input/TreeMultiSelect

Demonstrates the default behavior of the TreeMultiSelect component where only selected options are checked or unchecked without showing a partially checked status.

```javascript
import { TreeMultiSelect } from '@your-ui-library/TreeMultiSelect';

// Basic usage example
<TreeMultiSelect
  // ... other props
/>;
```

--------------------------------

### Radio Component API

Source: https://coral.insea.io/developer/Input/Radio

API documentation for the Radio component, detailing its properties and their types.

```APIDOC
## Radio Component API

### Description
API documentation for the Radio component, detailing its properties and their types.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Props
- **as** (any) - Optional - Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
- **disabled** (boolean) - Optional - Equivalent to button's disabled property.
- **icon** (ReactElement<RadioIconProps, string | JSXElementConstructor<any>>) - Optional - Custom icon for the radio button. Defaults to `<RadioIcon />`.
- **index** (number) - Optional - Index of the radio button within a group.
- **invalid** (boolean) - Optional - Indicates if the radio button's value is invalid.
- **keyboardClickKeys** (string[]) - Optional - Keys that trigger a click event when focused.
- **onBlur** (FocusEventHandler<HTMLDivElement>) - Optional - Callback function triggered on blur event.
- **onClick** (MouseEventHandler<HTMLDivElement>) - Optional - Callback function triggered on click event.
- **onKeyDown** (KeyboardEventHandler<HTMLDivElement>) - Optional - Callback function triggered on key down event.
- **onKeyUp** (KeyboardEventHandler<HTMLDivElement>) - Optional - Callback function triggered on key up event.
- **onMouseDown** (MouseEventHandler<HTMLDivElement>) - Optional - Callback function triggered on mouse down event.
- **onMouseLeave** (MouseEventHandler<HTMLDivElement>) - Optional - Callback function triggered on mouse leave event.
- **onMouseUp** (MouseEventHandler<HTMLDivElement>) - Optional - Callback function triggered on mouse up event.
- **onRelease** (EventHandler<SyntheticEvent<HTMLDivElement, Event>>) - Optional - Callback that's triggered after click i.e. mouseup and keyup of enter or space.
- **onTouchEnd** (TouchEventHandler<HTMLDivElement>) - Optional - Callback function triggered on touch end event.
- **onTouchStart** (TouchEventHandler<HTMLDivElement>) - Optional - Callback function triggered on touch start event.
- **value** (Value) - Optional - The value associated with the radio button.
```

--------------------------------

### Skip Spring Animations in Coral

Source: https://coral.insea.io/developer/Guides

This configuration disables spring animations, which can be slow during unit testing and may not render correctly in screenshot tests. It ensures animations do not run server-side. This is useful for testing environments.

```javascript
import { setConfigs } from '@seaweb/coral/utils/configs';


setConfigs({ skipSpringAnimation: true });
```

--------------------------------

### LightboxArrowButton API

Source: https://coral.insea.io/developer/Pattern/Lightbox

API documentation for the LightboxArrowButton component, detailing its available properties, types, default values, and descriptions.

```APIDOC
## LightboxArrowButton API

### Description
API documentation for the LightboxArrowButton component, detailing its available properties, types, default values, and descriptions.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Props
- **as** (any) - Optional - Tag or component to use. A simple tag (e.g., div, span) is recommended.
- **colorType** (ColorTypes) - Optional - Sets the color based on the theme. If a color is specified, that prop is used instead.
- **direction** (ArrowDirections) - Optional - Specifies the direction of the arrow.
- **disabled** (boolean) - Optional - Equivalent to the button's `disabled` property.
- **keyboardClickKeys** (string[]) - Optional - 
- **leftIcon** (ReactNode) - Optional - Element to display before the label.
- **loading** (boolean) - Optional - 
- **onBlur** (FocusEventHandler<HTMLDivElement>) - Optional - Callback triggered when the element loses focus.
- **onClick** (MouseEventHandler<HTMLDivElement>) - Optional - Callback triggered on click.
- **onKeyDown** (KeyboardEventHandler<HTMLDivElement>) - Optional - Callback triggered when a key is pressed down.
- **onKeyUp** (KeyboardEventHandler<HTMLDivElement>) - Optional - Callback triggered when a key is released.
- **onMouseDown** (MouseEventHandler<HTMLDivElement>) - Optional - Callback triggered on mouse down.
- **onMouseLeave** (MouseEventHandler<HTMLDivElement>) - Optional - Callback triggered when the mouse leaves the element.
- **onMouseUp** (MouseEventHandler<HTMLDivElement>) - Optional - Callback triggered on mouse up.
- **onRelease** (EventHandler<SyntheticEvent<HTMLDivElement, Event>>) - Optional - Callback triggered after a click (e.g., mouseup and keyup of enter or space).
- **onTouchEnd** (TouchEventHandler<HTMLDivElement>) - Optional - Callback triggered when a touch event ends.
- **onTouchStart** (TouchEventHandler<HTMLDivElement>) - Optional - Callback triggered when a touch event starts.
- **radius** (number) - Optional - 
- **rightIcon** (ReactNode) - Optional - Element to display after the label.
- **size** (ButtonSizes) - Optional - Specifies the size of the button.
- **variant** (ButtonVariants) - Optional - Specifies the variant of the button. Prefers naming it `variant` because `type` is a known button HTML property.

### Request Example
N/A (Component API)

### Response
#### Success Response (200)
N/A (Component API)

#### Response Example
N/A (Component API)
```

--------------------------------

### Pusher Max Concurrency Example

Source: https://coral.insea.io/developer/Utilities/Pusher

Demonstrates how to limit the number of Pusher messages displayed simultaneously. The `maxDisplay` prop on the `Pusher` component sets this limit. If `maxDisplay` is `null`, there is no limit. The default value for `maxDisplay` is 2.

```jsx
import { Pusher } from "@your-design-system/pusher";
import { usePusherContext } from "@your-design-system/pusher";

function App() {
  const push = usePusherContext();

  return (
    <Pusher maxDisplay={1}> 
      <button onClick={() => push("Max 1 message at a time!")}>Push Message</button>
    </Pusher>
  );
}
```

--------------------------------

### Box Component API

Source: https://coral.insea.io/developer/Foundation/Box

This section details the properties available for the Box component, including their types, default values, and descriptions. It covers CSS equivalents for layout control.

```APIDOC
## Box Component API

### Description
Provides detailed information about the props available for the Box component, enabling flexible grid-based layouts and CSS flexbox configurations.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Props
- **alignContent** (AlignContent) - Default: `stretch` - Equivalent to CSS `align-content` property.
- **alignItems** (AlignItems) - Default: `stretch` - Equivalent to CSS `align-items` property.
- **as** (any) - Optional - Tag or component for the Box element. A simple tag (e.g., `div`, `span`) is recommended.
- **direction** (FlexDirection) - Default: `row` - Equivalent to CSS `flex-direction` property.
- **gap** (Gap) - Default: `0` - Determines spacing between child Boxes. Accepts a number for horizontal gap or a pair of numbers for horizontal and vertical gaps respectively.
- **justify** (JustifyContent) - Default: `flex-start` - Equivalent to CSS `justify-content` property.
- **span** (number) - Default: `24` - Defines the width of the box within a 24-span grid system. Wraps to the next row if the total span exceeds 24.
- **wrap** (FlexWrap) - Default: `wrap` - Equivalent to CSS `flex-wrap` property.

### Request Example
```json
{
  "alignItems": "center",
  "justify": "center",
  "gap": 12,
  "span": 12
}
```

### Response
#### Success Response (200)
N/A (Component API)

#### Response Example
N/A (Component API)
```

--------------------------------

### Pusher Durations and Close Function Example

Source: https://coral.insea.io/developer/Utilities/Pusher

Explains how to manage the display duration of Pusher messages and how to manually close them. The `duration` option can be set to a number (milliseconds) or `null` for never closing. The `push` function returns a `close` function, useful for limiting concurrent messages.

```jsx
import { Pusher } from "@your-design-system/pusher";
import { usePusherContext } from "@your-design-system/pusher";

function App() {
  const push = usePusherContext();

  const handlePushOne = () => {
    const close = push("This message will stay until closed manually.", undefined, null);
    // You can later call close() to remove this message.
  };

  return (
    <Pusher>
      <button onClick={handlePushOne}>Push One</button>
    </Pusher>
  );
}
```

--------------------------------

### Spinner API

Source: https://coral.insea.io/developer/Feedback/Spinner

This section details the properties available for the Spinner component.

```APIDOC
## Spinner API

### Description

This API documentation outlines the configurable properties for the Spinner component.

### Method

N/A (Component API)

### Endpoint

N/A (Component API)

### Parameters

#### Props

- **as** (any) - Optional - Tag or component to render the spinner. A simple tag (e.g., `div`, `span`) is recommended.
- **color** (string) - Optional - The color of the spinner.
- **colorType** (ColorTypes) - Optional - The type of color to apply (default: `neuFore3rd`).
- **height** (Height<string | number>) - Optional - The height of the spinner.
- **orientation** (SpinnerOrientations) - Optional - The orientation of the spinner (default: `vertical`). Can be `vertical` or `horizontal`.
- **progressCircleProps** (Omit<ProgressCircleProps, "value" | "colorType" | "trailColorType">) - Optional - Props to customize the underlying ProgressCircle component.
- **size** (SpinnerSizes) - Optional - The size of the spinner (default: `medium`). Can be `small`, `medium`, or `large`.

### Request Example

```json
{
  "as": "div",
  "color": "#000000",
  "orientation": "horizontal",
  "size": "large",
  "progressCircleProps": {
    "strokeWidth": 4
  }
}
```

### Response

#### Success Response (200)

N/A (Component renders UI elements, not a typical API response)

#### Response Example

N/A
```

--------------------------------

### EllipsisTooltip Component API

Source: https://coral.insea.io/developer/Feedback/EllipsisTooltip

API documentation for the EllipsisTooltip component, which combines text truncation with a tooltip for full content display.

```APIDOC
## EllipsisTooltip Component

### Description
A component that truncates text with an ellipsis and displays the full content in a tooltip on hover.

### Props

#### Base Ellipsis Tooltip
- **active** (boolean) - Controls whether the tooltip is active. (Type: boolean)
- **arrow** (ArrowProps) - Props for the tooltip arrow. (Type: ArrowProps)
- **as** (any) - The element type to render the component as. (Type: any)
- **closeDelay** (number) - Delay in milliseconds before closing the tooltip. (Type: number)
- **container** (HTMLElement) - The parent DOM element for the tooltip. (Type: HTMLElement)
- **containerProps** (InnerProps) - Props for the tooltip container. (Type: InnerProps)
- **contentProps** (InnerProps) - Props for the tooltip content wrapper. (Type: InnerProps)
- **immediate** (boolean) - If true, the tooltip appears immediately without delay. (Type: boolean)
- **initialActive** (boolean) - The initial active state of the tooltip. (Type: boolean)
- **initialImmediate** (boolean) - The initial state for immediate display. (Type: boolean)
- **isolated** (boolean) - If true, the tooltip operates independently. (Type: boolean)
- **maxRows** (number) - Maximum lines of text before truncating with ellipsis. (Type: number, Default: 1)
- **offset** (Array<number>) - Offset from the target element. (Type: [number, number])
- **onActiveChange** ((active: boolean) => void) - Callback function when the active state changes. (Type: (active: boolean) => void)
- **onImmediateChange** ((immediate: boolean) => void) - Callback function when the immediate state changes. (Type: (immediate: boolean) => void)
- **onOverflowChange** ((overflow: boolean) => void) - Callback function when overflow state changes. (Type: (overflow: boolean) => void)
- **openDelay** (number) - Delay in milliseconds before opening the tooltip. (Type: number)
- **overflow** (boolean) - Manually control the overflow state. (Type: boolean)
- **placement** (string) - Position of the tooltip relative to the target. (Type: "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end")
- **popperOptions** (PopperPopperOptions) - Options for the floating UI popper instance. (Type: PopperPopperOptions)
- **popperUpdateKey** (string) - A key to force an update of the popper. (Type: string)
- **renderChild** ((child: any, handlers: any, ariaAttrs: any) => ReactNode) - Custom function to render the child element. (Type: (child: any, handlers: any, ariaAttrs: any) => ReactNode)
- **springConfig** (Partial<AnimationConfig>) - Configuration object for the spring animation. (Type: Partial<AnimationConfig>)
- **stayOpenOnHover** (boolean) - Keeps the tooltip open while hovering over it. (Type: boolean)
- **title** (ReactNode) - The content to display in the tooltip. (Type: ReactNode)
- **titleContainerProps** (HTMLAttributes<HTMLDivElement>) - Props for the tooltip title's container. (Type: HTMLAttributes<HTMLDivElement>)
- **variant** (TooltipVariants) - The visual style variant of the tooltip. (Type: TooltipVariants)
```

--------------------------------

### VisuallyHidden Component API

Source: https://coral.insea.io/developer/Utilities/VisuallyHidden

Details on the props available for the VisuallyHidden component.

```APIDOC
## VisuallyHidden Component API

### Description
This component helps to hide content visually while ensuring accessibility.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Props
- **as** (void) - Optional - Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
- **forwardedAs** (void) - Optional - 
- **theme** (DefaultTheme) - Optional - 
```

--------------------------------

### PaginationPageSelect

Source: https://coral.insea.io/developer/Navigation/Pagination

Allows users to select a page from a dropdown or similar select interface.

```APIDOC
## PaginationPageSelect Component

### Description
Allows users to select a page from a dropdown or similar select interface. This component integrates with selection mechanisms to choose a specific page.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "example": "<PaginationPageSelect options={[{label: 'Page 1', value: 1}, {label: 'Page 2', value: 2}]} />"
}
```

### Response
#### Success Response (200)
N/A (Component)

#### Response Example
N/A (Component)

### Props
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **id** (string) - Optional - 
- **initialIsOpen** (boolean) - Optional - 
- **initialKeyboardHighlightedIndex** (number) - Optional - 
- **initialMouseHighlightedIndex** (number) - Optional - 
- **initialSearchValue** (string) - Optional - 
- **initialSelectedIndex** (number) - Optional - 
- **initialValue** (SelectValue) - Optional - 
- **inputProps** (SelectSearchProps) - Optional - 
- **isOpen** (boolean) - Optional - 
- **keyboardHighlightedIndex** (number) - Optional - 
- **listOptionProps** (SelectOptionProps) - Optional - 
- **listProps** (SelectListProps) - Optional - 
- **mouseHighlightedIndex** (number) - Optional - 
- **onChange** (ChangeCallback) - Optional - Called when selected value is changed. Different from onSelect, onChange is not called when the value is already selected.
- **onIsOpenChange** ( (isOpen: boolean) => void ) - Optional - 
- **onKeyboardHighlightedIndexChange** ( (index: number) => void ) - Optional - 
- **onMouseHighlightedIndexChange** ( (index: number) => void ) - Optional - 
- **onSearch** (SearchCallback) - Optional - 
- **onSelect** (ChangeCallback) - Optional - 

```

--------------------------------

### Alert Component API

Source: https://coral.insea.io/developer/Feedback/Alert

This section details the properties available for the Alert component, allowing customization of its appearance and behavior.

```APIDOC
## Alert Component API

### Description
Provides an interface for configuring the Alert component, which notifies users of information, warnings, or errors.

### Properties

#### Alert Props

- **actions** (ReactNode) - Optional - Actions to be displayed within the alert.
- **actionsProps** (DivProps) - Optional - Props for the actions container.
- **as** (any) - Optional - Tag or component to render the alert as. A simple tag (e.g., div, span) is recommended.
- **closed** (boolean) - Optional - Controls the closed state of the alert.
- **containerRef** (Ref<HTMLDivElement>) - Optional - Ref for the alert container. Deprecated: Please pass ref directly instead.
- **contentProps** (DivProps) - Optional - Props for the alert content container.
- **descriptionProps** (DivProps) - Optional - Props for the alert description container.
- **footerActions** (ReactNode) - Optional - Actions to be displayed in the footer of the alert.
- **footerActionsProps** (DivProps) - Optional - Props for the footer actions container.
- **icon** (ReactNode) - Optional - Custom icon to display in the alert.
- **iconWrapperProps** (DivProps) - Optional - Props for the icon wrapper.
- **immediate** (boolean) - Optional - Controls immediate rendering behavior.
- **initialClosed** (boolean) - Optional - Sets the initial closed state of the alert.
- **onClose** ( (closed: boolean) => void ) - Optional - Callback function triggered when the alert is closed.
- **title** (ReactNode) - Optional - Title for the alert.
- **titleProps** (DivProps) - Optional - Props for the alert title container.
- **type** (AlertTypes) - Optional - Type of the alert (e.g., 'info', 'warning', 'error'). Defaults to 'info'.

#### AlertClose Props

- **as** (any) - Optional - Tag or component to render the close button as. A simple tag (e.g., div, span) is recommended.
- **colorType** (ColorTypes) - Optional - Sets the color based on the theme. If a color is specified, that prop is used instead.
- **disabled** (boolean) - Optional - Equivalent to the button's disabled property.
- **keyboardClickKeys** (string[]) - Optional - Keys that trigger a click event.
- **loading** (boolean) - Optional - Indicates if the close button is in a loading state.
- **onBlur** (FocusEventHandler<HTMLDivElement>) - Optional - Callback function for blur events.
- **onClick** (MouseEventHandler<HTMLDivElement>) - Optional - Callback function for click events.
- **onKeyDown** (KeyboardEventHandler<HTMLDivElement>) - Optional - Callback function for key down events.
- **onKeyUp** (KeyboardEventHandler<HTMLDivElement>) - Optional - Callback function for key up events.
- **onMouseDown** (MouseEventHandler<HTMLDivElement>) - Optional - Callback function for mouse down events.
- **onMouseLeave** (MouseEventHandler<HTMLDivElement>) - Optional - Callback function for mouse leave events.
- **onMouseUp** (MouseEventHandler<HTMLDivElement>) - Optional - Callback function for mouse up events.
- **onRelease** ( EventHandler<SyntheticEvent<HTMLDivElement, Event>> ) - Optional - Callback triggered after a click (e.g., mouseup and keyup of enter or space).
- **onTouchEnd** (TouchEventHandler<HTMLDivElement>) - Optional - Callback function for touch end events.
- **onTouchStart** (TouchEventHandler<HTMLDivElement>) - Optional - Callback function for touch start events.
- **radius** (string) - Optional - Radius for the close button.
- **size** (IconButtonSizes) - Optional - Size of the close button.
- **tooltip** (ReactNode) - Optional - Tooltip content for the close button.
- **tooltipProps** (Omit<TooltipProps, "title" | "children">) - Optional - Props for the tooltip.
- **variant** (IconButtonVariants) - Optional - Variant of the close button (e.g., 'flat'). Defaults to 'flat'.
```

--------------------------------

### PaginationList

Source: https://coral.insea.io/developer/Navigation/Pagination

The main container for pagination controls, rendering items and arrows.

```APIDOC
## PaginationList Component

### Description
The main container for pagination controls. It renders the list of page items, navigation arrows, and potentially jumper controls based on the provided configuration.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "example": "<PaginationList totalItems={100} pageSize={10} />"
}
```

### Response
#### Success Response (200)
N/A (Component)

#### Response Example
N/A (Component)

### Props
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **as** (any) - Optional - Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
- **itemSize** (number) - Optional - 
- **renderArrow** ( (type: ArrowTypes) => ReactElement<any, string | JSXElementConstructor<any>> ) - Optional - Custom render function for pagination arrows.
- **renderItem** ( (page: number) => ReactElement<any, string | JSXElementConstructor<any>> ) - Optional - Custom render function for pagination items.
- **renderJumper** ( (type: JumperTypes) => ReactElement<any, string | JSXElementConstructor<any>> ) - Optional - Custom render function for pagination jumper.
- **variant** ( "text" | "outlined" ) - Optional - The variant of pagination style to use. 'Outlined' (default) shows outline styling, 'Minimal' shows a simpler pagination.

```

--------------------------------

### DrawerOverlay Component API

Source: https://coral.insea.io/developer/Pattern/Drawer

Props for the DrawerOverlay component, which displays an overlay behind the Drawer.

```APIDOC
## DrawerOverlay Component

### Description
Component that renders an overlay behind the Drawer, dimming the background content.

### Props

#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* **as** (any) - Optional - Tag or component to render as. Built-in tags like `div` or `span` are recommended.
* **basis** (number) - Optional - Default: `480`. Defines the basis value for the overlay's layout.
* **container** (HTMLElement) - Optional - Specifies the DOM element that the overlay should be mounted to.
* **elevationLevel** (number) - Optional - Default: `3`. Sets the elevation level for visual depth.
* **immediate** (boolean) - Optional - Controls immediate rendering or behavior.
* **initialIsOpen** (boolean) - Optional - Default: `true`. Determines if the overlay is open by default.
* **isOpen** (boolean) - Optional - Controls the open/closed state of the overlay.
* **onClose** ( () => void ) - Optional - Callback function executed when the overlay is closed.
* **onOutsideClick** ( MouseEventHandler<HTMLDivElement> ) - Optional - Callback function executed when a click occurs outside the overlay.
* **placement** (DrawerPlacements) - Optional - Default: `right`. Specifies the side from which the drawer appears (relevant if overlay is tied to drawer placement).
* **restrainDismissal** (boolean) - Optional - If true, prevents dismissal actions under certain conditions.
* **returnFocusTo** (Element) - Optional - Specifies the element to which focus should return after the overlay closes.
* **showOverlay** (boolean) - Optional - Default: `true`. If true, the overlay will be displayed.
```