@wavv/ui 1.9.15 → 2.0.0-alpha.0

package/build/index.d.ts

@@ -2,15 +2,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ElementType, FocusEvent, ReactNode, ChangeEvent, HTMLProps, ReactElement, MouseEvent as MouseEvent$1, KeyboardEvent as KeyboardEvent$1, CSSProperties, MutableRefObject, RefObject, FormEvent } from 'react';
-import * as src_lib_components_Tooltip from 'src/lib/components/Tooltip';
 import * as _emotion_styled from '@emotion/styled';
 import { StyledComponent } from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
 import { EditorChangeType } from 'draft-js';
-import * as src_lib_components_FormControl from 'src/lib/components/FormControl';
-import * as src_lib_components_Dropdown_Dropdown from 'src/lib/components/Dropdown/Dropdown';
-import * as src_lib_components_Dropdown_DropdownUtils from 'src/lib/components/Dropdown/DropdownUtils';
-import * as src_lib_components_helpers_getIcon from 'src/lib/components/helpers/getIcon';
 
 declare const colors: {
     logo1: string;
@@ -559,8 +554,9 @@ type MinWidthHeight = MinWidth & MinHeight;
 type MarginPadding = Margin & Padding;
 type FlexPosition = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
 type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-type As = {
-    as?: ElementType<unknown>;
+type As = ElementType;
+type AsProp = {
+    as?: As;
 };
 type InputFocusEvent = FocusEvent<HTMLInputElement>;
 type MergeField$1 = {
@@ -658,7 +654,7 @@ type AudioProps = {
     onPlay?: (event: ChangeEvent<HTMLAudioElement>) => void;
     onPause?: (event: ChangeEvent<HTMLAudioElement>) => void;
     onStop?: (event: ChangeEvent<HTMLAudioElement>) => void;
-} & Margin & Width & As & HTMLProps<HTMLDivElement>;
+} & Margin & Width & AsProp & HTMLProps<HTMLDivElement>;
 declare const Audio: react.ForwardRefExoticComponent<Omit<AudioProps, "ref"> & react.RefAttributes<AudioRef>>;
 
 type ChartData$1 = {
@@ -716,7 +712,7 @@ type OptionItem = {
     [key: string]: unknown;
 };
 type DropdownItemProps<OptionType> = {
-    setValue?: (v: OptionType, event: MouseEvent$1) => void;
+    setValue?: (v: OptionType, event: MouseEvent$1 | Event) => void;
     close?: () => void;
     children: ReactNode;
     /** Sets the value of the option that will be returned in the object */
@@ -730,11 +726,11 @@ 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$1) => void;
+    onClick?: (event: MouseEvent$1 | Event) => void;
     /** The id of the Item element */
     id: number | string;
 };
-type SetEvent = MouseEvent$1 | ChangeEvent | KeyboardEvent;
+type SetEvent = MouseEvent$1 | ChangeEvent | KeyboardEvent | Event;
 type SetValueFunc = <OptionType extends OptionItem>(selection: OptionType | string | null, event?: SetEvent) => void;
 
 declare function ActivityHistory(props: react.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
@@ -1070,7 +1066,7 @@ type IconNames = keyof typeof icons;
 
 type ButtonAttributes = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'size'> & {
     type?: 'button' | 'reset' | 'submit';
-} & As;
+} & AsProp;
 type ButtonBaseProps = {
     children?: ReactNode;
     joined?: 'left' | 'right' | 'middle';
@@ -1202,18 +1198,66 @@ type ButtonComponentProps = {
     joined?: never;
 } & BasicButtonProps & DropdownProps$2 & Margin;
 
+type DivProps$1 = Omit<HTMLProps<HTMLDivElement>, 'as'> & AsProp;
+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$1;
+declare const Tooltip: {
+    ({ trigger, children, content, position, offset, zIndex, width, maxWidth, textAlign, open, disabled, id, bgColor, color, container, afterShow, afterHide, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+    Header: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+    } & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+    } & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+
 /** Button Component */
 declare const Button: {
     (props: ButtonComponentProps): react_jsx_runtime.JSX.Element;
-    Group: ({ children, disabled, outline, size, small, large, secondary, negative, positive, caution, collapse, ...props }: {
-        children: (react.ReactElement<BasicButtonProps | ButtonComponentProps, string | react.JSXElementConstructor<any>> | react.ReactElement<src_lib_components_Tooltip.TooltipProps, string | react.JSXElementConstructor<any>>) | (react.ReactElement<BasicButtonProps | ButtonComponentProps, string | react.JSXElementConstructor<any>> | react.ReactElement<src_lib_components_Tooltip.TooltipProps, string | react.JSXElementConstructor<any>>)[];
+    Group: ({ children, disabled, outline, size, small, large, secondary, negative, positive, caution, collapse, ...props }: ({
+        children: (react.ReactElement<BasicButtonProps | ButtonComponentProps, string | react.JSXElementConstructor<any>> | react.ReactElement<TooltipProps, string | react.JSXElementConstructor<any>>) | (react.ReactElement<BasicButtonProps | ButtonComponentProps, string | react.JSXElementConstructor<any>> | react.ReactElement<TooltipProps, string | react.JSXElementConstructor<any>>)[];
         disabled?: boolean | undefined;
         size?: "small" | "large" | "medium" | undefined;
         small?: boolean | undefined;
         large?: boolean | undefined;
         outline?: boolean | undefined;
         collapse?: boolean | undefined;
-    } & ButtonStyles & Margin & Width) => react_jsx_runtime.JSX.Element | null;
+    } & ButtonStyles) & Margin & Width) => react_jsx_runtime.JSX.Element | null;
 };
 
 type CalendarProps = {
@@ -1247,7 +1291,7 @@ type CheckboxProps = {
     partial?: boolean;
     /** The function called with the checkbox value after the checkbox is changed */
     onChange: (val: boolean) => void;
-} & Margin & As & CheckboxAttributes;
+} & Margin & AsProp & CheckboxAttributes;
 declare const Checkbox: ({ id, label, labelPosition, checked, partial, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: CheckboxProps) => react_jsx_runtime.JSX.Element;
 
 type RestLanguage = 'rest-get' | 'rest-post' | 'rest-put' | 'rest-delete' | 'rest-options';
@@ -1365,57 +1409,9 @@ 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) => react_jsx_runtime.JSX.Element | null;
 
-type DivProps$1 = Omit<HTMLProps<HTMLDivElement>, 'as'> & As;
-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$1;
-declare const Tooltip: {
-    ({ trigger, children, content, position, offset, zIndex, width, maxWidth, textAlign, open, disabled, id, bgColor, color, container, afterShow, afterHide, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
-    Header: _emotion_styled.StyledComponent<{
-        theme?: _emotion_react.Theme | undefined;
-        as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
-    } & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Body: _emotion_styled.StyledComponent<{
-        theme?: _emotion_react.Theme | undefined;
-        as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
-    } & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-};
-
 type IconType = IconNames | IconProps | ReactElement<IconProps> | ReactElement<TooltipProps>;
 
 type OnClear = () => void;
@@ -1432,7 +1428,7 @@ type Phone = {
     onChange?: OnChangePhone;
 };
 type InputTypes = Default$1 | Phone;
-type DefaultInputProps = Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as'> & As;
+type DefaultInputProps = Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as'> & AsProp;
 type InputProps = {
     /** The id of the input element */
     id?: string;
@@ -1552,7 +1548,7 @@ declare const Input: react.ForwardRefExoticComponent<(Omit<{
     onClick?: ((event?: MouseEvent$1) => void) | undefined;
     /** A callback function that is run upon clicking the clear icon */
     onClear?: OnClear | undefined;
-} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Default$1 & Margin & Padding, "ref"> | Omit<{
+} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & AsProp & Default$1 & Margin & 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 */
@@ -1611,7 +1607,7 @@ declare const Input: react.ForwardRefExoticComponent<(Omit<{
     onClick?: ((event?: MouseEvent$1) => void) | undefined;
     /** A callback function that is run upon clicking the clear icon */
     onClear?: OnClear | undefined;
-} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Phone & Margin & Padding, "ref">) & react.RefAttributes<InputRef>>;
+} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & AsProp & Phone & Margin & Padding, "ref">) & react.RefAttributes<InputRef>>;
 
 type RestInputProps = Omit<InputProps, 'value' | 'onChange' | 'onError'>;
 type DropdownProps$1<OptionType> = {
@@ -1694,7 +1690,36 @@ declare const Dropdown: {
     Item<OptionType_1 extends OptionItem>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps<OptionType_1>): react_jsx_runtime.JSX.Element;
 };
 
-type DivProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'as'> & As;
+type ItemProps$1 = {
+    selected?: boolean;
+    noSelect?: boolean;
+    disabled?: boolean;
+    contentPosition?: FlexPosition;
+    color?: string;
+    accented?: boolean;
+} & ThemeProp;
+
+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$1 | 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;
+};
+
+type DivProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'as'> & AsProp;
 type WithChildren = {
     children: ReactNode;
     onChange?: never;
@@ -1702,7 +1727,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$1 | Event) => void;
 };
 type EitherChildrenOrOptions<OptionType> = WithChildren | WithOptions<OptionType>;
 type DropdownMenuProps<OptionType> = {
@@ -1738,27 +1763,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>): react_jsx_runtime.JSX.Element;
-    Item: ({ children, id, disabled, onClick, ...props }: ItemProps$1) => react_jsx_runtime.JSX.Element;
+    Item: ({ children, id, disabled, onClick, ...props }: OptionsItemProps) => react_jsx_runtime.JSX.Element;
     Sub({ children, id, label, zIndex, disabled, container, ...props }: SubProps): react_jsx_runtime.JSX.Element;
     Separator(): react_jsx_runtime.JSX.Element;
 };
-type BaseItemProps = {
-    children: ReactNode;
-    disabled?: boolean;
-};
-type ItemProps$1 = {
-    /** 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 */
@@ -1767,7 +1777,9 @@ 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$1;
 
 type GridProps = {
     /** If a number, rows creates n number rows of an equal size. If a string, rows sets the gridTemplateRows property   */
@@ -1829,14 +1841,7 @@ type FormProps = {
 declare const Form: {
     ({ children, rows, columns, rowGap, columnGap, onSubmit, ...rest }: FormProps): react_jsx_runtime.JSX.Element;
     Group({ children, rows, columns, rowGap, columnGap, disabled, ...rest }: FormGroupProps): 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;
     }): react_jsx_runtime.JSX.Element;
     Input: react.ForwardRefExoticComponent<(Omit<{
@@ -1846,8 +1851,8 @@ declare const Form: {
         placeholderColor?: string | undefined;
         description?: string | undefined;
         isLoading?: boolean | undefined;
-        iconLeft?: src_lib_components_helpers_getIcon.IconType | undefined;
-        iconRight?: src_lib_components_helpers_getIcon.IconType | undefined;
+        iconLeft?: IconType | undefined;
+        iconRight?: IconType | undefined;
         invalid?: boolean | undefined;
         borderless?: boolean | undefined;
         borderRadius?: string | number | undefined;
@@ -1869,7 +1874,7 @@ declare const Form: {
         onBlur?: ((event?: InputFocusEvent | undefined) => void) | undefined;
         onClick?: ((event?: react.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
         onClear?: (() => void) | undefined;
-    } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & {
+    } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & AsProp & {
         phone?: undefined;
         onChange?: ((event: react.ChangeEvent<HTMLInputElement>) => void) | undefined;
     } & Margin & Padding, "ref"> | Omit<{
@@ -1879,8 +1884,8 @@ declare const Form: {
         placeholderColor?: string | undefined;
         description?: string | undefined;
         isLoading?: boolean | undefined;
-        iconLeft?: src_lib_components_helpers_getIcon.IconType | undefined;
-        iconRight?: src_lib_components_helpers_getIcon.IconType | undefined;
+        iconLeft?: IconType | undefined;
+        iconRight?: IconType | undefined;
         invalid?: boolean | undefined;
         borderless?: boolean | undefined;
         borderRadius?: string | number | undefined;
@@ -1902,12 +1907,12 @@ declare const Form: {
         onBlur?: ((event?: InputFocusEvent | undefined) => void) | undefined;
         onClick?: ((event?: react.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
         onClear?: (() => void) | undefined;
-    } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & {
+    } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & AsProp & {
         phone: true;
         onChange?: ((event: react.ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void) | undefined;
     } & Margin & Padding, "ref">) & react.RefAttributes<InputRef>>;
     Dropdown: {
-        <OptionType extends 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 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 }: {
             children?: ReactNode;
             onChange?: ((item: OptionType | null) => void) | undefined;
             onTextChange?: ((text: string) => void) | undefined;
@@ -1945,8 +1950,8 @@ declare const Form: {
             restrictInput?: boolean | ((text: string) => boolean) | undefined;
             inputRef?: react.RefObject<InputRef> | undefined;
             optionsParent?: string | undefined;
-        } & Width & Height & Margin & src_lib_components_Dropdown_Dropdown.RestInputProps): react_jsx_runtime.JSX.Element;
-        Item<OptionType_1 extends src_lib_components_Dropdown_DropdownUtils.OptionItem>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: src_lib_components_Dropdown_DropdownUtils.DropdownItemProps<OptionType_1>): react_jsx_runtime.JSX.Element;
+        } & Width & Height & Margin & RestInputProps): react_jsx_runtime.JSX.Element;
+        Item<OptionType_1 extends OptionItem>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps<OptionType_1>): react_jsx_runtime.JSX.Element;
     };
     Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
         id?: string | undefined;
@@ -1954,7 +1959,7 @@ declare const Form: {
         labelPosition?: "right" | "left" | undefined;
         disabled?: boolean | undefined;
         checked?: boolean | undefined;
-    } & Margin & As & HTMLProps<HTMLInputElement>) => react_jsx_runtime.JSX.Element;
+    } & Margin & AsProp & HTMLProps<HTMLInputElement>) => react_jsx_runtime.JSX.Element;
     Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
         id?: string | undefined;
         label?: string | undefined;
@@ -1962,7 +1967,7 @@ declare const Form: {
         disabled?: boolean | undefined;
         checked?: boolean | undefined;
         onChange: (val: boolean) => void;
-    } & Margin & As & src_lib_components_FormControl.CheckboxAttributes) => react_jsx_runtime.JSX.Element;
+    } & Margin & AsProp & CheckboxAttributes) => 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;
@@ -1971,11 +1976,11 @@ declare const Form: {
         checked?: boolean | undefined;
         partial?: boolean | undefined;
         onChange: (val: boolean) => void;
-    } & Margin & As & src_lib_components_FormControl.CheckboxAttributes) => react_jsx_runtime.JSX.Element;
+    } & Margin & AsProp & CheckboxAttributes) => react_jsx_runtime.JSX.Element;
     Label: ({ children, iconLeft, iconRight, disabled, pill, ...rest }: {
         children?: ReactNode;
-        iconLeft?: src_lib_components_helpers_getIcon.IconType | undefined;
-        iconRight?: src_lib_components_helpers_getIcon.IconType | undefined;
+        iconLeft?: IconType | undefined;
+        iconRight?: IconType | undefined;
         pill?: boolean | undefined;
         disabled?: boolean | undefined;
     } & Margin) => react_jsx_runtime.JSX.Element;
@@ -1985,6 +1990,14 @@ type FormGroupProps = {
     disabled?: boolean;
     children?: ReactNode;
 } & GridProps;
+type FieldProps = {
+    /** Sets the flexDirection of the Field to 'row' instead of 'column' */
+    inline?: boolean;
+    /** Sets the vertical alignment of the Field's contents */
+    align?: 'top' | 'bottom' | 'center';
+    /** Disables pointer events and reduces the opacity of the Field's contents  */
+    disabled?: boolean;
+} & Margin;
 
 type ImageViewerProps = {
     /** Controls whether or not the ImageViewer is open */
@@ -2150,11 +2163,11 @@ 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;
+    };
 }) => react_jsx_runtime.JSX.Element;
 
 type ModalProps = {
@@ -2293,30 +2306,13 @@ 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): react_jsx_runtime.JSX.Element;
     Item({ children, id, onClick, selected, noSelect, contentPosition, color, accented, ...props }: OptionsItemProps): 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$1) => 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;
-};
 
 type PaginationProps = {
     /** The callback function that responds with the active page */
@@ -2379,7 +2375,7 @@ 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) => react_jsx_runtime.JSX.Element;
 
 type ResetStylesProps = {
@@ -2486,7 +2482,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;
@@ -2513,26 +2509,28 @@ declare const Table: {
         sorted?: SortDir | undefined;
         sortKey?: string | undefined;
     } & {
+        children?: ReactNode;
         contentPosition?: FlexPosition | undefined;
         direction?: FlexDirection | undefined;
         justify?: FlexPosition | undefined;
         align?: FlexPosition | undefined;
         gap?: string | number | undefined;
-    } & Omit<react.HTMLProps<HTMLDivElement>, "as"> & As) => react_jsx_runtime.JSX.Element;
+    } & Omit<react.HTMLProps<HTMLDivElement>, "as"> & AsProp) => react_jsx_runtime.JSX.Element;
     Body: ({ children, height, maxHeight, ...rest }: {
         children: ReactNode;
-    } & Height & MaxHeight & Omit<react.HTMLProps<HTMLTableSectionElement>, "as"> & As) => react_jsx_runtime.JSX.Element;
+    } & Height & MaxHeight & Omit<react.HTMLProps<HTMLTableSectionElement>, "as"> & AsProp) => react_jsx_runtime.JSX.Element;
     Row: ({ children, columns, onClick, columnStyles, ...rest }: TableHeaderRow) => react_jsx_runtime.JSX.Element;
     Column: ({ children, contentPosition, direction, justify, align, gap, defaultValue, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, ...rest }: {
         children?: ReactNode;
         defaultValue?: string | undefined;
     } & Padding & {
+        children?: ReactNode;
         contentPosition?: FlexPosition | undefined;
         direction?: FlexDirection | undefined;
         justify?: FlexPosition | undefined;
         align?: FlexPosition | undefined;
         gap?: string | number | undefined;
-    } & Omit<react.HTMLProps<HTMLDivElement>, "as"> & As) => react_jsx_runtime.JSX.Element;
+    } & Omit<react.HTMLProps<HTMLDivElement>, "as"> & AsProp) => react_jsx_runtime.JSX.Element;
 };
 
 type ToggleProps = {
@@ -2548,7 +2546,7 @@ 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) => react_jsx_runtime.JSX.Element;
 
 type TabItem = {
@@ -2722,4 +2720,4 @@ declare const positionProps: ({ position, top, bottom, right, left }: Position)
     left: string | number | undefined;
 };
 
-export { Accordion, type As, Audio, type AudioRef, BarChart, Button, Calendar, Checkbox, Code, Table$1 as DocTable, DraftEditor, type DraftEditorRef, Dropdown, DropdownMenu, type OptionItem as DropdownOption, type FlexPosition, Form, Grid, type Height, type ITheme, Icon, type IconNames, ImageViewer, InlineCode, Input, type InputRef, _default as InputUtils, Label, LineChart, type Margin, type MarginPadding, type MaxHeight, type MaxWidth, type MaxWidthHeight, Menu, Message, MessageHr, type MinHeight, type MinWidth, type MinWidthHeight, Modal, MultiSelect, type MultiSelectRef, Notification, Options, type Padding, Pagination, PieChart, type Position, Progress, Radio, ResetStyles, ScrollbarStyles, Slider, Spacer, Spinner, type TabItem, Table, Tabs, type ThemeProp, ToastStyles, Toggle, Tooltip, type Action as TransferAction, type Item as TransferItem, TransferList, type Next as TransferNext, type Width, type WidthHeight, colors, copyToClipboard, darkScale, formatDate, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, useConfirm, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelect, useSelectAll, useWindowSize, widthHeightProps };
+export { Accordion, type AsProp as As, Audio, type AudioRef, BarChart, Button, Calendar, Checkbox, Code, Table$1 as DocTable, DraftEditor, type DraftEditorRef, Dropdown, DropdownMenu, type OptionItem as DropdownOption, type FlexPosition, Form, Grid, type Height, type ITheme, Icon, type IconNames, ImageViewer, InlineCode, Input, type InputRef, _default as InputUtils, Label, LineChart, type Margin, type MarginPadding, type MaxHeight, type MaxWidth, type MaxWidthHeight, Menu, Message, MessageHr, type MinHeight, type MinWidth, type MinWidthHeight, Modal, MultiSelect, type MultiSelectRef, Notification, Options, type Padding, Pagination, PieChart, type Position, Progress, Radio, ResetStyles, ScrollbarStyles, Slider, Spacer, Spinner, type TabItem, Table, Tabs, type ThemeProp, ToastStyles, Toggle, Tooltip, type Action as TransferAction, type Item as TransferItem, TransferList, type Next as TransferNext, type Width, type WidthHeight, colors, copyToClipboard, darkScale, formatDate, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, useConfirm, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelect, useSelectAll, useWindowSize, widthHeightProps };

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

@@ -1,5 +1,5 @@
 import { ChangeEvent, HTMLProps } from 'react';
-import { Margin, Width, As, AudioRef } from './types';
+import { Margin, Width, AsProp, AudioRef } from './types';
 type AudioProps = {
     /** The filepath of the audio source */
     src: string;
@@ -24,6 +24,6 @@ type AudioProps = {
     onPlay?: (event: ChangeEvent<HTMLAudioElement>) => void;
     onPause?: (event: ChangeEvent<HTMLAudioElement>) => void;
     onStop?: (event: ChangeEvent<HTMLAudioElement>) => void;
-} & Margin & Width & As & HTMLProps<HTMLDivElement>;
+} & Margin & Width & AsProp & HTMLProps<HTMLDivElement>;
 declare const Audio: import("react").ForwardRefExoticComponent<Omit<AudioProps, "ref"> & import("react").RefAttributes<AudioRef>>;
 export default Audio;

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

@@ -4,14 +4,14 @@ import { BasicButtonProps, ButtonComponentProps } from './ButtonTypes';
 /** Button Component */
 declare const Button: {
     (props: ButtonComponentProps): import("react/jsx-runtime").JSX.Element;
-    Group: ({ children, disabled, outline, size, small, large, secondary, negative, positive, caution, collapse, ...props }: {
-        children: (import("react").ReactElement<BasicButtonProps | ButtonComponentProps, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<import("src/lib/components/Tooltip").TooltipProps, string | import("react").JSXElementConstructor<any>>) | (import("react").ReactElement<BasicButtonProps | ButtonComponentProps, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<import("src/lib/components/Tooltip").TooltipProps, string | import("react").JSXElementConstructor<any>>)[];
+    Group: ({ children, disabled, outline, size, small, large, secondary, negative, positive, caution, collapse, ...props }: ({
+        children: (import("react").ReactElement<BasicButtonProps | ButtonComponentProps, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<import("../Tooltip").TooltipProps, string | import("react").JSXElementConstructor<any>>) | (import("react").ReactElement<BasicButtonProps | ButtonComponentProps, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<import("../Tooltip").TooltipProps, string | import("react").JSXElementConstructor<any>>)[];
         disabled?: boolean | undefined;
         size?: "small" | "large" | "medium" | undefined;
         small?: boolean | undefined;
         large?: boolean | undefined;
         outline?: boolean | undefined;
         collapse?: boolean | undefined;
-    } & import("./ButtonTypes").ButtonStyles & Margin & import("../types").Width) => import("react/jsx-runtime").JSX.Element | null;
+    } & import("./ButtonTypes").ButtonStyles) & Margin & import("../types").Width) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Button;

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

@@ -1,4 +1,4 @@
 declare const ButtonLoader: ({ size }: {
-    size?: number | undefined;
+    size?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ButtonLoader;

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

@@ -1,10 +1,10 @@
 import { HTMLProps, MouseEvent, ReactNode } from 'react';
 import { OptionItem } from '../Dropdown/DropdownUtils';
 import { IconNames } from '../Icon/icons';
-import { Margin, As } from '../types';
+import { Margin, AsProp } from '../types';
 type ButtonAttributes = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'size'> & {
     type?: 'button' | 'reset' | 'submit';
-} & As;
+} & AsProp;
 type ButtonBaseProps = {
     children?: ReactNode;
     joined?: 'left' | 'right' | 'middle';

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

@@ -30,7 +30,7 @@ export declare const ChartContainer: import("@emotion/styled").StyledComponent<{
 export declare const TooltipContent: ({ active, payload, label }: TooltipProps<number, string>) => import("react/jsx-runtime").JSX.Element | null;
 export declare const Tooltip: () => import("react/jsx-runtime").JSX.Element;
 export declare const LegendContent: ({ payload, toggleData, }: {
-    payload?: Payload[] | undefined;
-    toggleData?: ((item: Payload) => void) | undefined;
+    payload?: Payload[];
+    toggleData?: (item: Payload) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import { CheckboxAttributes } from './FormControl';
-import { Margin, As } from './types';
+import { Margin, AsProp } from './types';
 type CheckboxProps = {
     /** Id of the input element */
     id?: string;
@@ -15,6 +15,6 @@ type CheckboxProps = {
     partial?: boolean;
     /** The function called with the checkbox value after the checkbox is changed */
     onChange: (val: boolean) => void;
-} & Margin & As & CheckboxAttributes;
+} & Margin & AsProp & CheckboxAttributes;
 declare const Checkbox: ({ id, label, labelPosition, checked, partial, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export default Checkbox;

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

@@ -1,7 +1,7 @@
 import { ReactNode, RefObject } from 'react';
 import { InputProps } from '../Input';
-import { Margin, WidthHeight, InputFocusEvent, InputRef } from '../types';
-import { OptionItem, DropdownItemProps } from './DropdownUtils';
+import { InputFocusEvent, InputRef, Margin, WidthHeight } from '../types';
+import { DropdownItemProps, OptionItem } from './DropdownUtils';
 export type RestInputProps = Omit<InputProps, 'value' | 'onChange' | 'onError'>;
 type DropdownProps<OptionType> = {
     children?: ReactNode;