@wavv/ui 1.9.4 → 1.9.5

package/build/types/components/Modal.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { ThemeProp } from '../theme';
+import { FlexPosition, Height, Margin, Padding, PositionType, WidthHeight } from './types';
+type ModalProps = {
+    children: ReactNode;
+    /** The selector (id or className) of the app's root element */
+    rootSelector?: string;
+    /** Controls whether or not the Modal is open */
+    visible: boolean;
+    /** The function called when the Modal is closed */
+    onClose: () => void;
+    /** Displays a close icon in the top right of the Modal */
+    closeIcon?: boolean;
+    /** Prevents the Modal from closing if the overlay outside the modal is clicked */
+    preventOverlayClose?: boolean;
+    /** Sets the color of the modal overlay */
+    overlayColor?: string;
+    /** Overrides the backgroundColor of the modal container */
+    backgroundColor?: string;
+    /** Styles the Modal as an actionable toast */
+    small?: boolean;
+    /** Removes the overlay background, and allows the modal to be positioned anywhere on the page */
+    noOverlay?: boolean;
+    /** Centers the horizontal position of the Modal. Used in conjunction with `noOverlay` */
+    centerX?: boolean;
+    /** Centers the vertical position of the Modal. Used in conjunction with `noOverlay` */
+    centerY?: boolean;
+    /** Sets the position of the modal container */
+    position?: PositionType;
+    /** Sets the `top` position of the modal. Used in conjunction with `noOverlay` */
+    top?: number | string;
+    /** Sets the `bottom` position of the modal. Used in conjunction with `noOverlay` */
+    bottom?: number | string;
+    /** Sets the `right` position of the modal. Used in conjunction with `noOverlay` */
+    right?: number | string;
+    /** Sets the `left` position of the modal. Used in conjunction with `noOverlay` */
+    left?: number | string;
+    /** Sets the zIndex of the modal container */
+    zIndex?: number;
+} & WidthHeight & Padding;
+declare const Modal: {
+    ({ children, rootSelector, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayColor, backgroundColor, small, noOverlay, centerX, centerY, position, top, bottom, right, left, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, zIndex, }: ModalProps): import("react").ReactPortal | null;
+    Header: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Text: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        primary?: boolean | undefined;
+        fontSize?: string | number | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & Height & Margin, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Footer: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        justify?: FlexPosition | undefined;
+        inline?: boolean | undefined;
+    } & Margin, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default Modal;

package/build/types/components/MultiSelect.d.ts

@@ -0,0 +1,46 @@
+import React, { ReactNode } from 'react';
+import { DropdownOption, InputProps } from './Dropdown';
+import { Width, Margin, MultiSelectRef } from './types';
+type DropdownProps = Omit<InputProps, 'children'>;
+type MultiSelectProps = {
+    /** The list of dropdown options to display */
+    options: DropdownOption[];
+    /** The list of selected options */
+    items: DropdownOption[];
+    /** A function that gives control of the list items to the user */
+    children?: (listOpen: boolean, disabled: boolean) => ReactNode;
+    /** Text to display in place of the complete list of items */
+    listLabel?: string;
+    /** Text to display in front of the list of selected items */
+    listText?: string;
+    /** The name of the items list to display (1/5 items) */
+    itemsTitle?: string;
+    /** The maximum number of items allowed to be selected */
+    maxItems?: number;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** As the dropdown is searched, the options narrow down according to the search value */
+    filter?: boolean;
+    /** Prevents the Dropdown from accepting any input other than what matches the provided options */
+    restrictInput?: boolean | ((text: string) => boolean);
+    /** Disables the Dropdown */
+    disabled?: boolean;
+    /** Hides the maxItems count and the itemsTitle */
+    hideItemsInfo?: boolean;
+    /** The selector (id or className) of the element the options should open in relation to */
+    optionsParent?: string;
+    /** Causes the MultiSelect to collapse if listLabel is also present */
+    compact?: boolean;
+    /** Sets the backgroundColor */
+    backgroundColor?: string;
+    /** Removes the bottom border */
+    borderless?: boolean;
+    /** Function called after an item is selected */
+    addItem: (item: DropdownOption | null) => void;
+    /** Function called after an item is removed */
+    removeItem: (item: DropdownOption | null) => void;
+    /** The function to be called when the input is updated */
+    onTextChange?: (text: string) => void;
+} & Width & Margin & DropdownProps;
+declare const MultiSelect: React.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React.RefAttributes<MultiSelectRef>>;
+export default MultiSelect;

package/build/types/components/Notification.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Margin, Position, ThemeProp } from './types';
+declare const Notification: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    /** The color of the dot */
+    color?: string | undefined;
+    /** The width/height of the dot */
+    size?: string | number | undefined;
+    /** Styles the dot to accommodate containing a number */
+    number?: boolean | undefined;
+} & ThemeProp & Margin & Position, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default Notification;

package/build/types/components/Options.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode, MouseEvent, RefObject } from 'react';
+import { FlexPosition, Width } from './types';
+type OptionsProps = {
+    children: ReactNode;
+    /** The id of the Options container */
+    id?: string;
+    /** A ref to the Options container element */
+    containerRef?: RefObject<HTMLDivElement>;
+    /** Offsets the vertical position of the Options */
+    offsetY?: number;
+    /** Offsets the horizontal position of the Options */
+    offsetX?: number;
+    /** Centers the vertical position of the Options relative to the Options trigger */
+    centerY?: boolean;
+    /** Centers the horizontal position of the Options relative to the Options trigger */
+    centerX?: boolean;
+    /** The direction, in relation to the trigger, the options should open */
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    /** Overrides the default maxHeight of 200px */
+    maxHeight?: number;
+    /** The selector (id or className) of the element the options should open in relataion to */
+    parentSelector?: string;
+} & Width;
+declare const Options: {
+    ({ id, children, containerRef, parentSelector, width, maxHeight, offsetY, offsetX, centerY, centerX, direction, }: OptionsProps): import("react/jsx-runtime").JSX.Element;
+    Item({ children, id, onClick, selected, noSelect, contentPosition, color, accented, ...props }: OptionsItemProps): import("react/jsx-runtime").JSX.Element;
+};
+type OptionsItemProps = {
+    children?: ReactNode;
+    /** The id of the Option item */
+    id?: number | string;
+    /** The function to be called when the Option item is clicked */
+    onClick: (event: MouseEvent) => void;
+    /** Controls whether the Option appears to be hovered */
+    selected?: boolean;
+    /** Prevents the Option from appearing to be hovered */
+    noSelect?: boolean;
+    /** The flex positioning of the Option contents */
+    contentPosition?: FlexPosition;
+    /** The color of the Option text */
+    color?: string;
+    /** Sets the Option text color to theme.accent */
+    accented?: boolean;
+};
+export default Options;

package/build/types/components/Pagination.d.ts

@@ -0,0 +1,13 @@
+import { Margin, Width } from './types';
+type PaginationProps = {
+    /** The callback function that responds with the active page */
+    onPageNav: (page: number) => void;
+    /** The number of page items */
+    totalPages: number;
+    /** The current page the component should display */
+    page?: number;
+    /** The max number of page items to display */
+    maxVisibleNumbers?: number;
+} & Margin & Width;
+declare const Pagination: ({ onPageNav, page, totalPages, maxVisibleNumbers, width, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/build/types/components/PieChart.d.ts

@@ -0,0 +1,18 @@
+import { Margin } from './types';
+type ChartData = {
+    name: string;
+    value: number;
+    color?: string;
+};
+type Props = {
+    /** The chart data array  */
+    data: ChartData[];
+    /** The width & height of the chart */
+    size?: number;
+    /** The radius of the inner circle */
+    innerRadius?: number;
+    /** Displays a gray chart if no data is present */
+    showWhenEmpty?: boolean;
+} & Margin;
+declare const PieChart: ({ size, data, innerRadius, showWhenEmpty, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default PieChart;

package/build/types/components/Progress/CirclePercent.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties as CSS } from 'react';
+import { Margin } from '../types';
+type Props = {
+    percent: number;
+    size?: number;
+    thickness?: number;
+    color?: CSS['backgroundColor'];
+} & Margin;
+declare const CirclePercent: ({ percent, size, thickness, color, margin, marginTop, marginBottom, marginRight, marginLeft, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CirclePercent;

package/build/types/components/Progress/Progress.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties as CSS } from 'react';
+import { Margin, WidthHeight } from '../types';
+type CircleProps = ({
+    circle?: false;
+    size?: never;
+} & WidthHeight) | {
+    /** Styles the Progress component as a circle */
+    circle: true;
+    /** The width and height of the circle */
+    size?: number;
+    width?: never;
+    height?: never;
+};
+type ProgressProps = {
+    /** The percent completed (0-100) */
+    percent: number;
+    /** The color of the progress bar */
+    color?: CSS['backgroundColor'];
+    /** The thickness of the bar or circle */
+    thickness?: number;
+} & CircleProps & Margin;
+declare const Progress: ({ percent, color, circle, width, height, size, thickness, margin, marginTop, marginBottom, marginRight, marginLeft, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+export default Progress;

package/build/types/components/Progress/index.d.ts

@@ -0,0 +1,2 @@
+import Progress from './Progress';
+export default Progress;

package/build/types/components/Radio.d.ts

@@ -0,0 +1,16 @@
+import { HTMLProps } from 'react';
+import { Margin, As } from './types';
+type RadioProps = {
+    /** Id of the input element */
+    id?: string;
+    /** Places a label element beside the radio. The value will set the text of the label */
+    label?: string;
+    /** Sets the label on the left or right of the radio */
+    labelPosition?: 'left' | 'right';
+    /** Disables the radio */
+    disabled?: boolean;
+    /** Controls the checked property of the radio */
+    checked?: boolean;
+} & Margin & As & HTMLProps<HTMLInputElement>;
+declare const Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export default Radio;

package/build/types/components/Slider.d.ts

@@ -0,0 +1,15 @@
+import { Margin, WidthHeight } from './types';
+type SliderProps = {
+    /** The current position of the slider knob */
+    value: number;
+    /** The max value of the slider */
+    max?: number;
+    /** The number by which the slider should increment/decrement */
+    step?: number;
+    /** Disables the slider */
+    disabled?: boolean;
+    /** The function that is called when the slider knob is changed */
+    onChange?: (progressValue: number) => void;
+} & WidthHeight & Margin;
+declare const Slider: ({ value, max, step, width, height, disabled, onChange, ...props }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;

package/build/types/components/Spacer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const Spacer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("./types").Width & import("./types").Height, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default Spacer;

package/build/types/components/Spinner.d.ts

@@ -0,0 +1,16 @@
+import { Sizes } from './Icon/Icon';
+import { Margin, Position } from './types';
+type SpinnerProps = {
+    /** The size of the loading icon */
+    size?: Sizes;
+    /** The color of the loading icon */
+    color?: string;
+    /** Center positions the Spinner absolutely */
+    center?: boolean;
+    /** If center positioned, adds a background overlay behind the spinner */
+    background?: string | boolean;
+    /** If center positioned, specifies the zIndex of the spinner */
+    zIndex?: number;
+} & Margin & Position;
+declare const Spinner: ({ size, color, center, background, zIndex, margin, marginTop, marginBottom, marginRight, marginLeft, position, top, bottom, right, left, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export default Spinner;

package/build/types/components/Table/Body.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps, ReactNode } from 'react';
+import { As, Height, MaxHeight } from '../types';
+type DefaultBodyProps = Omit<HTMLProps<HTMLTableSectionElement>, 'as'> & As;
+type BodyProps = {
+    children: ReactNode;
+} & Height & MaxHeight & DefaultBodyProps;
+declare const Body: ({ children, height, maxHeight, ...rest }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export default Body;

package/build/types/components/Table/Column.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { Padding } from '../types';
+import { ContentProps } from './Content';
+type ColumnProps = {
+    children?: ReactNode;
+    /** The string value to display if the child text is undefined (i.e. "N/A", "—") */
+    defaultValue?: string;
+} & Padding & ContentProps;
+declare const Column: ({ children, contentPosition, direction, justify, align, gap, defaultValue, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
+export default Column;

package/build/types/components/Table/Content.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { FlexDirection, FlexPosition } from '../types';
+export type ContentProps = {
+    /** The flex positioning of the content */
+    contentPosition?: FlexPosition;
+    /** The flex direction of the content */
+    direction?: FlexDirection;
+    /** The flex positioning of the content */
+    justify?: FlexPosition;
+    /** The flex alignment of the content */
+    align?: FlexPosition;
+    /** The flex gap of the content */
+    gap?: number | string;
+};
+declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ContentProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default Content;

package/build/types/components/Table/Header.d.ts

@@ -0,0 +1,7 @@
+import { TableHeaderRow } from './types';
+type HeaderProps = {
+    /** Compensates for the misalignment caused by a scrollable Table Body */
+    alignToScrollBody?: boolean;
+};
+declare const Header: ({ children, columns, columnStyles, alignToScrollBody, ...rest }: HeaderProps & TableHeaderRow) => import("react/jsx-runtime").JSX.Element;
+export default Header;

package/build/types/components/Table/HeaderCell.d.ts

@@ -0,0 +1,14 @@
+import { MouseEvent, ReactNode } from 'react';
+import { ContentProps } from './Content';
+import { SortDir } from './types';
+type HeaderCellProps = {
+    children?: ReactNode;
+    /** The function to be called when the HeaderCell is clicked */
+    onClick?: (event: MouseEvent) => void;
+    /** Controls the direction of the sort icon indicating the direction of the data */
+    sorted?: SortDir;
+    /** The property of the data object to sort by */
+    sortKey?: string;
+} & ContentProps;
+declare const HeaderCell: ({ children, onClick, contentPosition, justify, align, direction, gap, sorted, sortKey, }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderCell;

package/build/types/components/Table/Row.d.ts

@@ -0,0 +1,3 @@
+import { TableHeaderRow } from './types';
+declare const Row: ({ children, columns, onClick, columnStyles, ...rest }: TableHeaderRow) => import("react/jsx-runtime").JSX.Element;
+export default Row;

package/build/types/components/Table/Table.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { Width } from '../types';
+import { Data, TableProps } from './types';
+declare const Table: {
+    <DataType extends Data>({ children, columns, data, ...rest }: TableProps<DataType>): import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, columns, columnStyles, alignToScrollBody, ...rest }: {
+        alignToScrollBody?: boolean | undefined;
+    } & {
+        columnStyles?: import("react").CSSProperties | undefined;
+    } & {
+        columns?: import("./types").Columns | undefined;
+    } & Width & import("../types").Margin & import("../types").Padding & import("react").HTMLProps<HTMLTableRowElement>) => import("react/jsx-runtime").JSX.Element;
+    HeaderCell: ({ children, onClick, contentPosition, justify, align, direction, gap, sorted, sortKey, }: {
+        children?: ReactNode;
+        onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+        sorted?: import("./types").SortDir | undefined;
+        sortKey?: string | undefined;
+    } & import("./Content").ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, height, maxHeight, ...rest }: {
+        children: ReactNode;
+    } & import("../types").Height & import("../types").MaxHeight & Omit<import("react").HTMLProps<HTMLTableSectionElement>, "as"> & import("../types").As) => import("react/jsx-runtime").JSX.Element;
+    Row: ({ children, columns, onClick, columnStyles, ...rest }: import("./types").TableHeaderRow) => import("react/jsx-runtime").JSX.Element;
+    Column: ({ children, contentPosition, direction, justify, align, gap, defaultValue, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, }: {
+        children?: ReactNode;
+        defaultValue?: string | undefined;
+    } & import("../types").Padding & import("./Content").ContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Table;

package/build/types/components/Table/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Context } from './types';
+declare const TableContext: import("react").Context<Context>;
+export default TableContext;

package/build/types/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+import Table from './Table';
+export default Table;

package/build/types/components/Table/types.d.ts

@@ -0,0 +1,43 @@
+import { CSSProperties, Dispatch, HTMLProps, ReactNode, SetStateAction } from 'react';
+import { As, MarginPadding, Padding, ThemeProp, Width } from '../types';
+export type Data = {
+    [key: string]: unknown;
+};
+export type SetData<DataType> = Dispatch<SetStateAction<DataType[]>>;
+export type Columns = number | string;
+export type SortedChildFunc<DataType> = (data: DataType[]) => ReactNode;
+type Default = {
+    data?: never;
+    children: ReactNode;
+};
+type Sorted<DataType> = {
+    /** The data the table should use to add column sort functionality */
+    data: DataType[];
+    children: SortedChildFunc<DataType>;
+};
+type TableTypes<DataType> = Default | Sorted<DataType>;
+type DefaultTableProps = Omit<HTMLProps<HTMLTableElement>, 'as' | 'children' | 'data'> & As;
+type TableBase = {
+    /** If a number, columns creates n number columns of an equal size. If a string, columns sets the gridTemplateColumns property   */
+    columns?: Columns;
+} & Width & MarginPadding;
+export type TableProps<DataType> = TableBase & TableTypes<DataType> & DefaultTableProps;
+export type TableHeaderRow = {
+    /** CSS styles to be passed to every th/td element in the Header/Row */
+    columnStyles?: CSSProperties;
+} & TableBase & HTMLProps<HTMLTableRowElement>;
+export type TableElements = {
+    as?: string;
+} & ThemeProp & Padding;
+export type SortDir = 'asc' | 'desc' | 'inactive';
+export type ActiveColumn = {
+    key: string;
+    dir: 'asc' | 'desc';
+};
+type SetColumn = Dispatch<SetStateAction<ActiveColumn | undefined>>;
+export type Context = {
+    parentColumns?: Columns;
+    activeColumn?: ActiveColumn;
+    setActiveColumn?: SetColumn;
+};
+export {};

package/build/types/components/Table/utils.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Data } from './types';
+export declare const wrappedChildren: (children: ReactNode, type: 'th' | 'td', style?: CSSProperties) => (import("react/jsx-runtime").JSX.Element | null)[];
+export declare const isEqualContents: (array1?: Data[], array2?: Data[]) => boolean;

package/build/types/components/Tabs.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { Margin } from './types';
+import { IconNames } from './Icon/icons';
+export type TabItem = {
+    /** The id of the tab */
+    id: string | number;
+    /** The text to be displayed in the tab */
+    label: ReactNode;
+    /** Controls whether the tab is visible */
+    visible?: boolean;
+    /** Adds an icon for the specific icon name to the tab */
+    icon?: IconNames;
+    /** Positions the icon to the left or right of the tab text */
+    iconPosition?: 'left' | 'right';
+    /** The color of the icon */
+    iconColor?: string;
+};
+type Props<ItemType> = {
+    /** The tab items to be rendered */
+    items: ItemType[];
+    /** The id of the active tab */
+    activeItem: string | number;
+    /** Controls whether the tabs fill the space of the container */
+    itemWidth?: 'fit' | 'fill';
+    /** The gap between each tab item */
+    itemGap?: string | number;
+    /** The function called with the tab item after the tab is changed */
+    onChange: (tab: ItemType) => void;
+} & Margin;
+declare const Tabs: <ItemType extends TabItem>({ items, activeItem, itemWidth, itemGap, onChange, ...props }: Props<ItemType>) => import("react/jsx-runtime").JSX.Element;
+export default Tabs;

package/build/types/components/Toggle.d.ts

@@ -0,0 +1,18 @@
+import { CheckboxAttributes } from './FormControl';
+import { As, Margin } from './types';
+type ToggleProps = {
+    /** Id of the input element */
+    id?: string;
+    /** Places a label element beside the toggle. The value will set the text of the label */
+    label?: string;
+    /** Sets the label on the left or right of the toggle */
+    labelPosition?: 'left' | 'right';
+    /** Disables the toggle */
+    disabled?: boolean;
+    /** Controls the checked property of the toggle */
+    checked?: boolean;
+    /** The function called with the toggle value after the toggle is changed */
+    onChange: (val: boolean) => void;
+} & Margin & As & CheckboxAttributes;
+declare const Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default Toggle;

package/build/types/components/Tooltip.d.ts

@@ -0,0 +1,50 @@
+import { HTMLProps, ReactNode } from 'react';
+import type { As, PopPosition, ThemeProp } from './types';
+type DivProps = Omit<HTMLProps<HTMLDivElement>, 'as'> & As;
+export type TooltipProps = {
+    children?: ReactNode;
+    /** The element that will trigger the opening of the Tooltip */
+    trigger: ReactNode;
+    /** The text content of the Tooltip */
+    content?: string;
+    /** The position of the Tooltip body and arrow in relation to the trigger */
+    position?: PopPosition;
+    /** Offset of the Tooltip from the trigger */
+    offset?: number;
+    /** zIndex of the Tooltip's portal container */
+    zIndex?: number;
+    /** The width of the Tooltip element */
+    width?: number | string;
+    /** The maxWidth of the Tooltip element */
+    maxWidth?: number | string;
+    /** The textAlignment of the Tooltip text */
+    textAlign?: 'left' | 'right' | 'center';
+    /** Controls the open state of the Tooltip */
+    open?: boolean;
+    /** Prevents the Tooltip from opening */
+    disabled?: boolean;
+    /** The id of the Tooltip element */
+    id?: string;
+    /** The backgroundColor of the Tooltip element */
+    bgColor?: string;
+    /** The text color of the Tooltip element */
+    color?: string;
+    /** Specify a container element to portal the content into */
+    container?: HTMLElement;
+    /** The function called after the Tooltip opens */
+    afterShow?: () => void;
+    /** The function called after the Tooltip closes */
+    afterHide?: () => void;
+} & DivProps;
+declare const Tooltip: {
+    ({ trigger, children, content, position, offset, zIndex, width, maxWidth, textAlign, open, disabled, id, bgColor, color, container, afterShow, afterHide, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    Header: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default Tooltip;

package/build/types/components/TransferList.d.ts

@@ -0,0 +1,47 @@
+import { CSSProperties as CSS, ReactElement } from 'react';
+import { ColorNames } from '../theme/colors';
+import { Margin, Width } from './types';
+type Color = ColorNames | CSS['color'];
+export type Item = {
+    /** Unique ID of the item */
+    id: number | string;
+    /** The text displayed for the transfer item */
+    label: string;
+    /** Used as the data of the item */
+    value?: unknown;
+    /** If both `header` and `body` are provided, this text will be styled as the transfer item's header */
+    header?: string;
+    /** If both `header` and `body` are provided, this text will be styled as the transfer item's body */
+    body?: string;
+    /** Any element to be displayed to the left of the item's label/header/body */
+    leftElement?: ReactElement;
+    /** Any element to be displayed to the right of the item's label/header/body */
+    rightElement?: ReactElement;
+    /** The left border color of the transfer item */
+    color?: Color;
+    /** Used to preselect an item */
+    selected?: boolean;
+    [key: string]: unknown;
+};
+export type Action = 'select' | 'remove';
+export type Next = (item?: Item) => void;
+type TransferListProps = {
+    /** Array of objects that will be rendered as individual items in the list */
+    items: Item[];
+    /** The function called when an item is selected or removed. It passes the entire list of selected items. */
+    onChange: (list: Item[]) => void;
+    /** The function called before an item is selected or removed */
+    beforeItemChange?: (item: Item, action: Action, next: Next) => void;
+    /** The header title of the transfer list */
+    listTitle?: string;
+    /** The text to display in a readOnly state where there are no selected items */
+    noItemsMessage?: string;
+    /** Disables moving items and only displays the list of selected items */
+    readOnly?: boolean;
+    /** Hides the select all button */
+    hideSelectAll?: boolean;
+    /** Hides the remove all button */
+    hideRemoveAll?: boolean;
+} & Width & Margin;
+declare const TransferList: ({ items, onChange, beforeItemChange, listTitle, noItemsMessage, hideSelectAll, hideRemoveAll, readOnly, width, margin, marginTop, marginBottom, marginRight, marginLeft, }: TransferListProps) => import("react/jsx-runtime").JSX.Element;
+export default TransferList;