@wavv/ui 1.9.15 → 2.0.0-alpha.0

package/build/types/components/Dropdown/DropdownUtils.d.ts

@@ -12,7 +12,7 @@ export type OptionItem = {
     [key: string]: unknown;
 };
 export type DropdownItemProps<OptionType> = {
-    setValue?: (v: OptionType, event: MouseEvent) => void;
+    setValue?: (v: OptionType, event: MouseEvent | Event) => void;
     close?: () => void;
     children: ReactNode;
     /** Sets the value of the option that will be returned in the object */
@@ -26,11 +26,11 @@ export type DropdownItemProps<OptionType> = {
     /** Sets the Option text color to theme.accent */
     accented?: boolean;
     /** Callback function to override the default onChange function of Dropdown. */
-    onClick?: (event: MouseEvent) => void;
+    onClick?: (event: MouseEvent | Event) => void;
     /** The id of the Item element */
     id: number | string;
 };
-export type SetEvent = MouseEvent | ChangeEvent | KeyboardEvent;
+export type SetEvent = MouseEvent | ChangeEvent | KeyboardEvent | Event;
 export type SetValueFunc = <OptionType extends OptionItem>(selection: OptionType | string | null, event?: SetEvent) => void;
 type toggleFunc = (event?: MouseEvent) => void;
 type StatePieces = {

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

@@ -1,7 +1,9 @@
-import { HTMLProps, ReactNode } from 'react';
+import { HTMLProps, MouseEvent, ReactNode } from 'react';
 import { OptionItem } from './Dropdown/DropdownUtils';
-import { As, FlexPosition, PopPosition } from './types';
-type DivProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'as'> & As;
+import { ItemProps } from './OptionHelpers/Item';
+import type { OptionsItemProps } from './OptionHelpers/types';
+import type { AsProp, PopPosition } from './types';
+type DivProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'as'> & AsProp;
 type WithChildren = {
     children: ReactNode;
     onChange?: never;
@@ -9,7 +11,7 @@ type WithChildren = {
 type WithOptions<OptionType> = {
     options: OptionType[];
     /** The function called after an option from the options array is selected */
-    onChange?: (option: OptionType, event: Event) => void;
+    onChange?: (option: OptionType, event: MouseEvent | Event) => void;
 };
 type EitherChildrenOrOptions<OptionType> = WithChildren | WithOptions<OptionType>;
 type DropdownMenuProps<OptionType> = {
@@ -45,27 +47,12 @@ type DropdownMenuProps<OptionType> = {
 } & EitherChildrenOrOptions<OptionType> & DivProps;
 declare const DropdownMenu: {
     <OptionType extends OptionItem>({ children, options, id, position, trigger, open, offset, arrow, width, maxHeight, container, zIndex, disableScrollLock, onChange, afterShow, afterHide, ...props }: DropdownMenuProps<OptionType>): import("react/jsx-runtime").JSX.Element;
-    Item: ({ children, id, disabled, onClick, ...props }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, id, disabled, onClick, ...props }: OptionsItemProps) => import("react/jsx-runtime").JSX.Element;
     Sub({ children, id, label, zIndex, disabled, container, ...props }: SubProps): import("react/jsx-runtime").JSX.Element;
     Separator(): import("react/jsx-runtime").JSX.Element;
 };
-type BaseItemProps = {
-    children: ReactNode;
-    disabled?: boolean;
-};
-type ItemProps = {
-    /** The id of the item */
-    id?: string | number;
-    /** The function to be called when the item is clicked */
-    onClick?: (event: Event) => void;
-    /** The flex positioning of the item contents */
-    contentPosition?: FlexPosition;
-    /** The color of the item text */
-    color?: string;
-    /** Sets the item text color to theme.accent */
-    accented?: boolean;
-} & BaseItemProps;
 type SubProps = {
+    children?: ReactNode;
     /** The id of the sub menu's content container */
     id?: string;
     /** The text or element to display as the sub menu item's trigger */
@@ -74,5 +61,7 @@ type SubProps = {
     zIndex?: number;
     /** Specify a container element to portal the sub menu content into */
     container?: HTMLElement;
-} & BaseItemProps;
+    /** Prevents the Sub menu from being triggered */
+    disabled?: boolean;
+} & ItemProps;
 export default DropdownMenu;

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

@@ -9,14 +9,7 @@ type FormProps = {
 declare const Form: {
     ({ children, rows, columns, rowGap, columnGap, onSubmit, ...rest }: FormProps): import("react/jsx-runtime").JSX.Element;
     Group({ children, rows, columns, rowGap, columnGap, disabled, ...rest }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
-    Field({ children, inline, align, disabled, ...props }: {
-        /** Sets the flexDirection of the Field to 'row' instead of 'column' */
-        inline?: boolean | undefined;
-        /** Sets the vertical alignment of the Field's contents */
-        align?: "center" | "top" | "bottom" | undefined;
-        /** Disables pointer events and reduces the opacity of the Field's contents  */
-        disabled?: boolean | undefined;
-    } & Margin & {
+    Field({ children, inline, align, disabled, ...props }: FieldProps & {
         children?: ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
     Input: import("react").ForwardRefExoticComponent<(Omit<{
@@ -26,8 +19,8 @@ declare const Form: {
         placeholderColor?: string | undefined;
         description?: string | undefined;
         isLoading?: boolean | undefined;
-        iconLeft?: import("src/lib/components/helpers/getIcon").IconType | undefined;
-        iconRight?: import("src/lib/components/helpers/getIcon").IconType | undefined;
+        iconLeft?: import("./helpers/getIcon").IconType | undefined;
+        iconRight?: import("./helpers/getIcon").IconType | undefined;
         invalid?: boolean | undefined;
         borderless?: boolean | undefined;
         borderRadius?: string | number | undefined;
@@ -49,7 +42,7 @@ declare const Form: {
         onBlur?: ((event?: import("./types").InputFocusEvent | undefined) => void) | undefined;
         onClick?: ((event?: import("react").MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
         onClear?: (() => void) | undefined;
-    } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & import("./types").As & {
+    } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & import("./types").AsProp & {
         phone?: undefined;
         onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
     } & Margin & import("./types").Padding, "ref"> | Omit<{
@@ -59,8 +52,8 @@ declare const Form: {
         placeholderColor?: string | undefined;
         description?: string | undefined;
         isLoading?: boolean | undefined;
-        iconLeft?: import("src/lib/components/helpers/getIcon").IconType | undefined;
-        iconRight?: import("src/lib/components/helpers/getIcon").IconType | undefined;
+        iconLeft?: import("./helpers/getIcon").IconType | undefined;
+        iconRight?: import("./helpers/getIcon").IconType | undefined;
         invalid?: boolean | undefined;
         borderless?: boolean | undefined;
         borderRadius?: string | number | undefined;
@@ -82,12 +75,12 @@ declare const Form: {
         onBlur?: ((event?: import("./types").InputFocusEvent | undefined) => void) | undefined;
         onClick?: ((event?: import("react").MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
         onClear?: (() => void) | undefined;
-    } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & import("./types").As & {
+    } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & import("./types").AsProp & {
         phone: true;
         onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void) | undefined;
     } & Margin & import("./types").Padding, "ref">) & import("react").RefAttributes<import("./types").InputRef>>;
     Dropdown: {
-        <OptionType extends import("src/lib/components/Dropdown/DropdownUtils").OptionItem>({ onChange, onTextChange, afterShow, afterHide, onFocus, onBlur, onError, placeholder, placeholderColor, value, options, children, borderless, borderColor, backgroundColor, hideIcon, clearOnSelect, textOnly, width, height, isLoading, margin, marginTop, marginBottom, marginRight, marginLeft, label, id, name, trigger, centerY, centerX, offsetY, offsetX, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, ...props }: {
+        <OptionType extends import("./Dropdown").DropdownOption>({ onChange, onTextChange, afterShow, afterHide, onFocus, onBlur, onError, placeholder, placeholderColor, value, options, children, borderless, borderColor, backgroundColor, hideIcon, clearOnSelect, textOnly, width, height, isLoading, margin, marginTop, marginBottom, marginRight, marginLeft, label, id, name, trigger, centerY, centerX, offsetY, offsetX, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, ...props }: {
             children?: ReactNode;
             onChange?: ((item: OptionType | null) => void) | undefined;
             onTextChange?: ((text: string) => void) | undefined;
@@ -125,8 +118,8 @@ declare const Form: {
             restrictInput?: boolean | ((text: string) => boolean) | undefined;
             inputRef?: import("react").RefObject<import("./types").InputRef> | undefined;
             optionsParent?: string | undefined;
-        } & import("./types").Width & import("./types").Height & Margin & import("src/lib/components/Dropdown/Dropdown").RestInputProps): import("react/jsx-runtime").JSX.Element;
-        Item<OptionType_1 extends import("src/lib/components/Dropdown/DropdownUtils").OptionItem>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: import("src/lib/components/Dropdown/DropdownUtils").DropdownItemProps<OptionType_1>): import("react/jsx-runtime").JSX.Element;
+        } & import("./types").Width & import("./types").Height & Margin & import("./Dropdown").InputProps): import("react/jsx-runtime").JSX.Element;
+        Item<OptionType_1 extends import("./Dropdown").DropdownOption>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: import("./Dropdown/DropdownUtils").DropdownItemProps<OptionType_1>): import("react/jsx-runtime").JSX.Element;
     };
     Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
         id?: string | undefined;
@@ -134,7 +127,7 @@ declare const Form: {
         labelPosition?: "right" | "left" | undefined;
         disabled?: boolean | undefined;
         checked?: boolean | undefined;
-    } & Margin & import("./types").As & HTMLProps<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+    } & Margin & import("./types").AsProp & HTMLProps<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
     Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
         id?: string | undefined;
         label?: string | undefined;
@@ -142,7 +135,7 @@ declare const Form: {
         disabled?: boolean | undefined;
         checked?: boolean | undefined;
         onChange: (val: boolean) => void;
-    } & Margin & import("./types").As & import("src/lib/components/FormControl").CheckboxAttributes) => import("react/jsx-runtime").JSX.Element;
+    } & Margin & import("./types").AsProp & import("./FormControl").CheckboxAttributes) => import("react/jsx-runtime").JSX.Element;
     Checkbox: ({ id, label, labelPosition, checked, partial, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
         id?: string | undefined;
         label?: string | undefined;
@@ -151,11 +144,11 @@ declare const Form: {
         checked?: boolean | undefined;
         partial?: boolean | undefined;
         onChange: (val: boolean) => void;
-    } & Margin & import("./types").As & import("src/lib/components/FormControl").CheckboxAttributes) => import("react/jsx-runtime").JSX.Element;
+    } & Margin & import("./types").AsProp & import("./FormControl").CheckboxAttributes) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, iconLeft, iconRight, disabled, pill, ...rest }: {
         children?: ReactNode;
-        iconLeft?: import("src/lib/components/helpers/getIcon").IconType | undefined;
-        iconRight?: import("src/lib/components/helpers/getIcon").IconType | undefined;
+        iconLeft?: import("./helpers/getIcon").IconType | undefined;
+        iconRight?: import("./helpers/getIcon").IconType | undefined;
         pill?: boolean | undefined;
         disabled?: boolean | undefined;
     } & Margin) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { HTMLProps, ReactNode } from 'react';
 import { IconNames } from './icons';
-import { As, MarginPadding } from '../types';
+import { AsProp, MarginPadding } from '../types';
 export type Sizes = number | 'small' | 'medium' | 'large';
 type DivAttributes = Omit<HTMLProps<HTMLDivElement>, 'size'>;
 type ConditionalProps = {
@@ -33,6 +33,6 @@ export type IconProps = {
     style?: {
         [key: string]: string | number;
     };
-} & ConditionalProps & MarginPadding & As & DivAttributes;
+} & ConditionalProps & MarginPadding & AsProp & DivAttributes;
 declare const Icon: ({ name, svg, size, width, height, color, hoverColor, pointer, inheritColor, animation, style, onClick, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Icon;

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

@@ -1,6 +1,6 @@
 import { ChangeEvent, HTMLProps, MouseEvent, MutableRefObject } from 'react';
 import { IconType } from './helpers/getIcon';
-import { As, InputFocusEvent, InputRef, MarginPadding } from './types';
+import { AsProp, InputFocusEvent, InputRef, MarginPadding } from './types';
 type OnClear = () => void;
 type OnChangeDefault = (event: ChangeEvent<HTMLInputElement>) => void;
 type OnChangePhone = (event: ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void;
@@ -15,7 +15,7 @@ type Phone = {
     onChange?: OnChangePhone;
 };
 type InputTypes = Default | Phone;
-type DefaultInputProps = Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as'> & As;
+type DefaultInputProps = Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as'> & AsProp;
 export type InputProps = {
     /** The id of the input element */
     id?: string;
@@ -135,7 +135,7 @@ declare const Input: import("react").ForwardRefExoticComponent<(Omit<{
     onClick?: ((event?: MouseEvent) => void) | undefined;
     /** A callback function that is run upon clicking the clear icon */
     onClear?: OnClear | undefined;
-} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Default & import("./types").Margin & import("./types").Padding, "ref"> | Omit<{
+} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & AsProp & Default & import("./types").Margin & import("./types").Padding, "ref"> | Omit<{
     /** The id of the input element */
     id?: string | undefined;
     /** Places a label element above the input. The value will set the text of the label */
@@ -194,5 +194,5 @@ declare const Input: import("react").ForwardRefExoticComponent<(Omit<{
     onClick?: ((event?: MouseEvent) => void) | undefined;
     /** A callback function that is run upon clicking the clear icon */
     onClear?: OnClear | undefined;
-} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Phone & import("./types").Margin & import("./types").Padding, "ref">) & import("react").RefAttributes<InputRef>>;
+} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & AsProp & Phone & import("./types").Margin & import("./types").Padding, "ref">) & import("react").RefAttributes<InputRef>>;
 export default Input;

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

@@ -2,10 +2,10 @@ declare const MessageHr: ({ text, color, style, }: {
     /** The text to be displayed */
     text: string | number;
     /** The color of the text displayed */
-    color?: string | undefined;
+    color?: string;
     /** Sets the style prop of the text */
     style?: {
         [key: string]: string | number;
-    } | undefined;
+    };
 }) => import("react/jsx-runtime").JSX.Element;
 export default MessageHr;

package/build/types/components/OptionHelpers/Container.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { MaxHeight, ThemeProp, Width } from '../types';
+export type ContainerProps = {
+    zIndex?: number;
+} & Width & MaxHeight;
+declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & ThemeProp & {
+    zIndex?: number | undefined;
+} & Width & MaxHeight, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default Container;

package/build/types/components/OptionHelpers/Item.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { FlexPosition, ThemeProp } from '../types';
+export type ItemProps = {
+    selected?: boolean;
+    noSelect?: boolean;
+    disabled?: boolean;
+    contentPosition?: FlexPosition;
+    color?: string;
+    accented?: boolean;
+} & ThemeProp;
+declare const Item: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    selected?: boolean | undefined;
+    noSelect?: boolean | undefined;
+    disabled?: boolean | undefined;
+    contentPosition?: FlexPosition | undefined;
+    color?: string | undefined;
+    accented?: boolean | undefined;
+} & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default Item;

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

@@ -0,0 +1,21 @@
+import type { MouseEvent, ReactNode } from 'react';
+import type { FlexPosition } from '../types';
+export 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 | Event) => void;
+    /** Controls whether the Option appears to be hovered */
+    selected?: boolean;
+    /** Prevents the Option from appearing to be hovered */
+    noSelect?: boolean;
+    /** Prevents the Option from being selected */
+    disabled?: 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;
+};

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

@@ -1,5 +1,6 @@
-import { ReactNode, MouseEvent, RefObject } from 'react';
-import { FlexPosition, Width } from './types';
+import { ReactNode, RefObject } from 'react';
+import type { OptionsItemProps } from './OptionHelpers/types';
+import type { Width } from './types';
 type OptionsProps = {
     children: ReactNode;
     /** The id of the Options container */
@@ -18,28 +19,11 @@ type OptionsProps = {
     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 */
+    /** The selector (id or className) of the element the options should open in relation 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/Radio.d.ts

@@ -1,5 +1,5 @@
 import { HTMLProps } from 'react';
-import { Margin, As } from './types';
+import { Margin, AsProp } from './types';
 type RadioProps = {
     /** Id of the input element */
     id?: string;
@@ -11,6 +11,6 @@ type RadioProps = {
     disabled?: boolean;
     /** Controls the checked property of the radio */
     checked?: boolean;
-} & Margin & As & HTMLProps<HTMLInputElement>;
+} & Margin & AsProp & 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/Table/Body.d.ts

@@ -1,6 +1,6 @@
 import { HTMLProps, ReactNode } from 'react';
-import { As, Height, MaxHeight } from '../types';
-type DefaultBodyProps = Omit<HTMLProps<HTMLTableSectionElement>, 'as'> & As;
+import { AsProp, Height, MaxHeight } from '../types';
+type DefaultBodyProps = Omit<HTMLProps<HTMLTableSectionElement>, 'as'> & AsProp;
 type BodyProps = {
     children: ReactNode;
 } & Height & MaxHeight & DefaultBodyProps;

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

@@ -1,7 +1,8 @@
-import { HTMLProps } from 'react';
-import { As, FlexDirection, FlexPosition } from '../types';
-type DefaultContentProps = Omit<HTMLProps<HTMLDivElement>, 'as'> & As;
+import { HTMLProps, ReactNode } from 'react';
+import { As, AsProp, ComponentPropsWithAs, FlexDirection, FlexPosition } from '../types';
+type DefaultContentProps = Omit<HTMLProps<HTMLDivElement>, 'as'> & AsProp;
 export type ContentProps = {
+    children?: ReactNode;
     /** The flex positioning of the content */
     contentPosition?: FlexPosition;
     /** The flex direction of the content */
@@ -13,19 +14,5 @@ export type ContentProps = {
     /** The flex gap of the content */
     gap?: number | string;
 } & DefaultContentProps;
-declare const Content: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    /** The flex positioning of the content */
-    contentPosition?: FlexPosition | undefined;
-    /** The flex direction of the content */
-    direction?: FlexDirection | undefined;
-    /** The flex positioning of the content */
-    justify?: FlexPosition | undefined;
-    /** The flex alignment of the content */
-    align?: FlexPosition | undefined;
-    /** The flex gap of the content */
-    gap?: string | number | undefined;
-} & Omit<HTMLProps<HTMLDivElement>, "as"> & As, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export default Content;
+declare const TableContent: <T extends As = "div">({ as, children, ...props }: ComponentPropsWithAs<T, ContentProps>) => import("react/jsx-runtime").JSX.Element;
+export default TableContent;

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

@@ -16,25 +16,27 @@ declare const Table: {
         sorted?: import("./types").SortDir | undefined;
         sortKey?: string | undefined;
     } & {
+        children?: ReactNode;
         contentPosition?: import("../types").FlexPosition | undefined;
         direction?: import("../types").FlexDirection | undefined;
         justify?: import("../types").FlexPosition | undefined;
         align?: import("../types").FlexPosition | undefined;
         gap?: string | number | undefined;
-    } & Omit<import("react").HTMLProps<HTMLDivElement>, "as"> & import("../types").As) => import("react/jsx-runtime").JSX.Element;
+    } & Omit<import("react").HTMLProps<HTMLDivElement>, "as"> & import("../types").AsProp) => 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;
+    } & import("../types").Height & import("../types").MaxHeight & Omit<import("react").HTMLProps<HTMLTableSectionElement>, "as"> & import("../types").AsProp) => 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, ...rest }: {
         children?: ReactNode;
         defaultValue?: string | undefined;
     } & import("../types").Padding & {
+        children?: ReactNode;
         contentPosition?: import("../types").FlexPosition | undefined;
         direction?: import("../types").FlexDirection | undefined;
         justify?: import("../types").FlexPosition | undefined;
         align?: import("../types").FlexPosition | undefined;
         gap?: string | number | undefined;
-    } & Omit<import("react").HTMLProps<HTMLDivElement>, "as"> & import("../types").As) => import("react/jsx-runtime").JSX.Element;
+    } & Omit<import("react").HTMLProps<HTMLDivElement>, "as"> & import("../types").AsProp) => import("react/jsx-runtime").JSX.Element;
 };
 export default Table;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, Dispatch, HTMLProps, ReactNode, SetStateAction } from 'react';
-import { As, MarginPadding, Padding, ThemeProp, Width } from '../types';
+import { AsProp, MarginPadding, Padding, ThemeProp, Width } from '../types';
 export type Data = {
     [key: string]: unknown;
 };
@@ -16,7 +16,7 @@ type Sorted<DataType> = {
     children: SortedChildFunc<DataType>;
 };
 type TableTypes<DataType> = Default | Sorted<DataType>;
-type DefaultTableProps = Omit<HTMLProps<HTMLTableElement>, 'as' | 'children' | 'data'> & As;
+type DefaultTableProps = Omit<HTMLProps<HTMLTableElement>, 'as' | 'children' | 'data'> & AsProp;
 type TableBase = {
     /** If a number, columns creates n number columns of an equal size. If a string, columns sets the gridTemplateColumns property   */
     columns?: Columns;

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

@@ -1,5 +1,5 @@
 import { CheckboxAttributes } from './FormControl';
-import { As, Margin } from './types';
+import { AsProp, Margin } from './types';
 type ToggleProps = {
     /** Id of the input element */
     id?: string;
@@ -13,6 +13,6 @@ type ToggleProps = {
     checked?: boolean;
     /** The function called with the toggle value after the toggle is changed */
     onChange: (val: boolean) => void;
-} & Margin & As & CheckboxAttributes;
+} & Margin & AsProp & 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

@@ -1,6 +1,6 @@
 import { HTMLProps, ReactNode } from 'react';
-import type { As, PopPosition, ThemeProp } from './types';
-type DivProps = Omit<HTMLProps<HTMLDivElement>, 'as'> & As;
+import type { AsProp, PopPosition, ThemeProp } from './types';
+type DivProps = Omit<HTMLProps<HTMLDivElement>, 'as'> & AsProp;
 export type TooltipProps = {
     children?: ReactNode;
     /** The element that will trigger the opening of the Tooltip */

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

@@ -1,4 +1,4 @@
-import { ElementType, FocusEvent } from 'react';
+import { ComponentPropsWithoutRef, ElementType, FocusEvent } from 'react';
 export type { ThemeProp } from '../theme';
 export type Margin = {
     margin?: number | string;
@@ -46,9 +46,14 @@ export type MinWidthHeight = MinWidth & MinHeight;
 export type MarginPadding = Margin & Padding;
 export type FlexPosition = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-export type As = {
-    as?: ElementType<unknown>;
+export type As = ElementType;
+export type AsProp = {
+    as?: As;
 };
+export type MergeWithAs<Component extends As, Props extends object> = Omit<Props, 'as'> & {
+    as?: Component;
+};
+export type ComponentPropsWithAs<Component extends As, Props extends object> = Omit<ComponentPropsWithoutRef<Component>, keyof MergeWithAs<Component, Props>> & MergeWithAs<Component, Props>;
 export type InputFocusEvent = FocusEvent<HTMLInputElement>;
 export type MergeField = {
     id: string;

package/build/types/index.d.ts

@@ -49,7 +49,7 @@ export type { IconNames } from './components/Icon/icons';
 export type { TabItem } from './components/Tabs';
 export type { DropdownOption } from './components/Dropdown';
 export type { Item as TransferItem, Action as TransferAction, Next as TransferNext } from './components/TransferList';
-export type { AudioRef, DraftEditorRef, InputRef, MultiSelectRef, Margin, Padding, Position, MinWidth, MaxWidth, MinHeight, MaxHeight, MinWidthHeight, MaxWidthHeight, Width, Height, WidthHeight, MarginPadding, FlexPosition, As, } from './components/types';
+export type { AudioRef, DraftEditorRef, InputRef, MultiSelectRef, Margin, Padding, Position, MinWidth, MaxWidth, MinHeight, MaxHeight, MinWidthHeight, MaxWidthHeight, Width, Height, WidthHeight, MarginPadding, FlexPosition, AsProp as As, } from './components/types';
 export { default as useEventListener } from './hooks/useEventListener';
 export { default as useOnClickOutside } from './hooks/useOnClickOutside';
 export { default as useSelect } from './hooks/useSelect';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "1.9.15",
+	"version": "2.0.0-alpha.0",
 	"files": [
 		"build/**/*"
 	],
@@ -32,14 +32,14 @@
 		"prism-react-renderer": "^2.3.1",
 		"react-keyed-flatten-children": "^3.0.0",
 		"react-phone-input-auto-format": "^0.1.0",
-		"recharts": "^2.12.3",
+		"recharts": "^2.12.4",
 		"sanitize.css": "^13.0.0",
 		"uuid": "^9.0.1",
 		"webfontloader": "^1.6.28"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.24.3",
-		"@babel/preset-env": "^7.24.3",
+		"@babel/core": "^7.24.4",
+		"@babel/preset-env": "^7.24.4",
 		"@babel/preset-typescript": "^7.24.1",
 		"@emotion/babel-plugin": "^11.11.0",
 		"@emotion/babel-preset-css-prop": "^11.11.0",
@@ -58,21 +58,21 @@
 		"@types/jest": "^29.5.11",
 		"@types/lodash": "^4.17.0",
 		"@types/ncp": "^2.0.8",
-		"@types/node": "^20.12.2",
+		"@types/node": "^20.12.7",
 		"@types/prompts": "^2.4.9",
 		"@types/randomcolor": "^0.5.9",
-		"@types/react": "^18.2.73",
-		"@types/react-dom": "^18.2.23",
+		"@types/react": "^18.2.75",
+		"@types/react-dom": "^18.2.24",
 		"@types/rollup-plugin-peer-deps-external": "^2.2.5",
 		"@types/signale": "^1.4.7",
 		"@types/uuid": "^9.0.7",
 		"@types/webfontloader": "^1.6.38",
-		"@typescript-eslint/eslint-plugin": "^7.4.0",
-		"@typescript-eslint/parser": "^7.4.0",
+		"@typescript-eslint/eslint-plugin": "^7.6.0",
+		"@typescript-eslint/parser": "^7.6.0",
 		"@vitejs/plugin-react": "^4.2.1",
 		"babel-plugin-lodash": "^3.3.4",
 		"chalk": "^5.3.0",
-		"change-case": "^5.4.3",
+		"change-case": "^5.4.4",
 		"eslint": "^8.57.0",
 		"eslint-config-airbnb": "^19.0.4",
 		"eslint-config-prettier": "^9.1.0",
@@ -93,6 +93,7 @@
 		"phone": "^3.1.42",
 		"postcss": "^8.4.38",
 		"prettier": "^3.2.5",
+		"prettier-plugin-organize-imports": "^3.2.4",
 		"prompts": "^2.4.2",
 		"randomcolor": "^0.6.2",
 		"react": "^18.2.0",
@@ -103,15 +104,15 @@
 		"react-toastify": "^10.0.5",
 		"remark-gfm": "^4.0.0",
 		"replace": "^1.2.2",
-		"rollup": "^4.13.2",
+		"rollup": "^4.14.1",
 		"rollup-plugin-dts": "^6.1.0",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.2",
 		"signale": "^1.4.0",
 		"ts-node": "^10.9.2",
 		"tslib": "^2.6.2",
-		"typescript": "5.4.3",
-		"vite": "^5.2.7",
+		"typescript": "5.4.5",
+		"vite": "^5.2.8",
 		"vite-plugin-eslint": "^1.8.1",
 		"vite-plugin-svgr": "^4.2.0"
 	},
@@ -133,6 +134,8 @@
 		"test": "jest --watch",
 		"cli": "npx ts-node --esm --experimental-specifier-resolution=node ./cli",
 		"upgrade-packages": "pnpm up --latest --interactive",
-		"pub": "npm publish --access public"
+		"pub": "npm publish --access public",
+		"pub:alpha": "npm publish --access public --tag alpha",
+		"pub:beta": "npm publish --access public --tag beta"
 	}
 }