@wavv/ui 1.8.0-beta.7 → 1.8.0

package/build/esm/types/assets/icons/Stop.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function Stop(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function Stop(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default Stop;

package/build/esm/types/assets/icons/StopOutline.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function StopOutline(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function StopOutline(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default StopOutline;

package/build/esm/types/assets/icons/Template.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function Template(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function Template(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default Template;

package/build/esm/types/assets/icons/ToggleOff.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function ToggleOff(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function ToggleOff(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default ToggleOff;

package/build/esm/types/assets/icons/ToggleOn.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function ToggleOn(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function ToggleOn(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default ToggleOn;

package/build/esm/types/assets/icons/Trash.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function Trash(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function Trash(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default Trash;

package/build/esm/types/assets/icons/Twitter.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function Twitter(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function Twitter(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default Twitter;

package/build/esm/types/assets/icons/Upload.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function Upload(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function Upload(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default Upload;

package/build/esm/types/assets/icons/Video.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function Video(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function Video(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default Video;

package/build/esm/types/assets/icons/Voicemail.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function Voicemail(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function Voicemail(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default Voicemail;

package/build/esm/types/assets/icons/VolOn.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function VolOn(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function VolOn(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default VolOn;

package/build/esm/types/assets/icons/Warning.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function Warning(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function Warning(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default Warning;

package/build/esm/types/assets/icons/WarningCircleOutline.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function WarningCircleOutline(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function WarningCircleOutline(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default WarningCircleOutline;

package/build/esm/types/assets/icons/Youtube.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function Youtube(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+declare function Youtube(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default Youtube;

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

@@ -26,8 +26,8 @@ type AccordionProps = {
     height?: number | string;
 } & Margin;
 declare const Accordion: {
-    ({ children, defaultItem, preventCollapse, triggers, spaced, background, innerBackground, width, maxHeight, height, ...rest }: AccordionProps): JSX.Element;
-    Item({ children, id, text, content, trigger, spaced, background, innerBackground }: ItemProps): JSX.Element;
+    ({ children, defaultItem, preventCollapse, triggers, spaced, background, innerBackground, width, maxHeight, height, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+    Item({ children, id, text, content, trigger, spaced, background, innerBackground }: ItemProps): import("react/jsx-runtime").JSX.Element;
 };
 type ItemProps = {
     /** The id of the Item */

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { ChartProps } from './ChartHelpers';
 type Props = {
     /** Stacks multiple data points within a single bar */
     stacked?: boolean;
 } & ChartProps;
-declare const BarChart: ({ data, legend, keys, stacked, ...rest }: Props) => JSX.Element;
+declare const BarChart: ({ data, legend, keys, stacked, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BarChart;

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

@@ -3,7 +3,7 @@ import { Margin } from '../types';
 import { BasicButtonProps, ButtonComponentProps } from './ButtonTypes';
 /** Button Component */
 declare const Button: {
-    (props: ButtonComponentProps): JSX.Element;
+    (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("../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;
@@ -12,6 +12,6 @@ declare const Button: {
         large?: boolean | undefined;
         outline?: boolean | undefined;
         collapse?: boolean | undefined;
-    } & import("./ButtonTypes").ButtonStyles & Margin & import("../types").Width) => JSX.Element | null;
+    } & import("./ButtonTypes").ButtonStyles & Margin & import("../types").Width) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Button;

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

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

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

@@ -113,6 +113,10 @@ export type ButtonDropdownProps = {
     direction?: 'top' | 'bottom';
     afterShow?: () => void;
     afterHide?: () => void;
+    /** zIndex of the menu's portal container */
+    zIndex?: number;
+    /** Enables the page to scroll when the menu is open */
+    disableScrollLock?: boolean;
 } & BasicButtonProps;
 export type ButtonComponentProps = {
     /** Sets the text of the button */

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

@@ -14,5 +14,5 @@ type GroupProps = {
     outline?: boolean;
     collapse?: boolean;
 } & ButtonStyles & Margin & Width;
-declare const Group: ({ children, disabled, outline, size, small, large, secondary, negative, positive, caution, collapse, ...props }: GroupProps) => JSX.Element | null;
+declare const Group: ({ children, disabled, outline, size, small, large, secondary, negative, positive, caution, collapse, ...props }: GroupProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Group;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type CalendarProps = {
     /** Optional date the initial selected calendar day should be set to. */
     date?: Date;
@@ -11,5 +10,5 @@ type CalendarProps = {
     /** Removes the Calendar's boxShadow */
     noShadow?: boolean;
 };
-declare const Calendar: ({ date, onChange, preventPast, preventFuture, noShadow }: CalendarProps) => JSX.Element;
+declare const Calendar: ({ date, onChange, preventPast, preventFuture, noShadow }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export default Calendar;

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

@@ -20,17 +20,17 @@ export type ChartProps = {
     /** Allows the chart to grow and shrink (default if no explicit width) */
     responsive?: boolean;
 } & Margin & WidthHeight;
-export declare const ChartStyles: () => JSX.Element;
+export declare const ChartStyles: () => import("react/jsx-runtime").JSX.Element;
 export declare const ChartContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & Margin & import("./types").Width & import("./types").Height & {
     responsive?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TooltipContent: ({ active, payload, label }: TooltipProps<number, string>) => JSX.Element | null;
-export declare const Tooltip: () => JSX.Element;
+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;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CheckboxAttributes } from './FormControl';
 import { Margin, As } from './types';
 type CheckboxProps = {
@@ -17,5 +16,5 @@ type CheckboxProps = {
     /** The function called with the checkbox value after the checkbox is changed */
     onChange: (val: boolean) => void;
 } & Margin & As & CheckboxAttributes;
-declare const Checkbox: ({ id, label, labelPosition, checked, partial, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: CheckboxProps) => JSX.Element;
+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/esm/types/components/Code/Code.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Language } from 'prism-react-renderer';
 import { Margin } from '../types';
 type RestLanguage = 'rest-get' | 'rest-post' | 'rest-put' | 'rest-delete' | 'rest-options';
@@ -23,5 +22,5 @@ type CodeProps = {
     /** Hides the line numbers in the code snippet */
     noNumbers?: boolean;
 } & Children & Margin;
-declare const Code: ({ children, code, className: metaData, lang: langProp, lineHighlights: lineHighlightsProp, noNumbers: noNumbersProp, margin, marginTop, marginBottom, marginRight, marginLeft, }: CodeProps) => JSX.Element;
+declare const Code: ({ children, code, className: metaData, lang: langProp, lineHighlights: lineHighlightsProp, noNumbers: noNumbersProp, margin, marginTop, marginBottom, marginRight, marginLeft, }: CodeProps) => import("react/jsx-runtime").JSX.Element;
 export default Code;

package/build/esm/types/components/Code/Copy.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 declare const Copy: ({ content }: {
     content: string;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Copy;

package/build/esm/types/components/Code/Endpoint.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 declare const Endpoint: ({ method, url }: {
     method: string;
     url: string;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Endpoint;

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

@@ -49,8 +49,18 @@ type DropdownProps<OptionType> = {
     id?: string;
     /** Sets the name of the Dropdown input */
     name?: string;
+    /** (DEPRECATED! Use the DropdownMenu component instead.) An HTML element/React component to trigger the opening and closing of the dropdown instead of an input */
+    trigger?: ReactNode;
+    /** Center the Dropdown options vertically with the trigger */
+    centerY?: boolean;
+    /** Center the Dropdown options horizontally with the trigger */
+    centerX?: boolean;
+    /** Pixel amount the Dropdown options are offset vertically from the trigger */
+    offsetY?: number;
+    /** Pixel amount the Dropdown options are offset horizontally from the trigger */
+    offsetX?: number;
     /** The direction the options should open in relation to the trigger  */
-    direction?: 'top' | 'bottom';
+    direction?: 'left' | 'right' | 'top' | 'bottom';
     /** Sets the Dropdown fontSize */
     fontSize?: number | string;
     /** Places a description message below the Dropdown */
@@ -67,14 +77,9 @@ type DropdownProps<OptionType> = {
     inputRef?: RefObject<InputRef>;
     /** The selector (id or className) of the element the options should open in relataion to */
     optionsParent?: string;
-    /** zIndex of the options container */
-    zIndex?: number;
-    disableScrollLock?: boolean;
-    /** Specify a container element to portal the options content into */
-    container?: HTMLElement;
 } & WidthHeight & Margin & RestInputProps;
 declare const Dropdown: {
-    <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, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, zIndex, disableScrollLock, container, ...props }: DropdownProps<OptionType>): JSX.Element;
-    Item<OptionType_1 extends OptionItem>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps<OptionType_1>): JSX.Element;
+    <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 }: DropdownProps<OptionType>): import("react/jsx-runtime").JSX.Element;
+    Item<OptionType_1 extends OptionItem>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps<OptionType_1>): import("react/jsx-runtime").JSX.Element;
 };
 export default Dropdown;

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

@@ -41,7 +41,7 @@ type StatePieces = {
 };
 type FilterState = Omit<StatePieces, 'selected'>;
 export declare const getFilteredOptions: <OptionType extends OptionItem>(options: OptionType[], state: FilterState) => OptionType[];
-export declare const getOptionsFromArray: <OptionType extends OptionItem>(options: OptionType[], setValue: SetValueFunc, toggle: toggleFunc, state: FilterState) => JSX.Element[];
+export declare const getOptionsFromArray: <OptionType extends OptionItem>(options: OptionType[], setValue: SetValueFunc, toggle: toggleFunc, state: FilterState) => import("react/jsx-runtime").JSX.Element[];
 export declare const getOptionsFromChildren: <OptionType extends OptionItem>(children: ReactNode, setValue: SetValueFunc, toggle: toggleFunc) => (React.ReactElement<DropdownItemProps<OptionType>, string | React.JSXElementConstructor<any>> | null)[];
 export declare const getCombinedChildren: <OptionType extends OptionItem>(options: OptionType[], children: ReactNode, setValue: SetValueFunc, toggle: toggleFunc, state: StatePieces) => (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
 export {};

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

@@ -1,12 +1,15 @@
 import { HTMLProps, ReactNode } from 'react';
 import { As, FlexPosition, PopPosition } from './types';
 import { OptionItem } from './Dropdown/DropdownUtils';
-type DivProps = Omit<HTMLProps<HTMLDivElement>, 'as'> & As;
+type DivProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'as'> & As;
 type WithChildren = {
     children: ReactNode;
+    onChange?: never;
 };
 type WithOptions<OptionType> = {
     options: OptionType[];
+    /** The function called after an option from the options array is selected */
+    onChange?: (option: OptionType, event: Event) => void;
 };
 type EitherChildrenOrOptions<OptionType> = WithChildren | WithOptions<OptionType>;
 type DropdownMenuProps<OptionType> = {
@@ -33,19 +36,18 @@ type DropdownMenuProps<OptionType> = {
     container?: HTMLElement;
     /** zIndex of the menu's portal container */
     zIndex?: number;
+    /** Enables the page to scroll when the menu is open */
     disableScrollLock?: boolean;
-    /** The function called after an option from the options array is selected */
-    onOptionSelect?: (option: OptionType, event: Event) => void;
     /** The function called after the menu opens */
     afterShow?: () => void;
     /** The function called after the menu closes */
     afterHide?: () => void;
 } & EitherChildrenOrOptions<OptionType> & DivProps;
 declare const DropdownMenu: {
-    <OptionType extends OptionItem>({ children, options, id, position, trigger, open, offset, arrow, width, maxHeight, container, zIndex, disableScrollLock, onOptionSelect, afterShow, afterHide, ...props }: DropdownMenuProps<OptionType>): JSX.Element;
-    Item: ({ children, id, disabled, onClick, ...props }: ItemProps) => JSX.Element;
-    Sub({ children, id, label, zIndex, disabled, container, ...props }: SubProps): JSX.Element;
-    Separator(): JSX.Element;
+    <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;
+    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;

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

@@ -6,11 +6,11 @@ type FormProps = {
     onSubmit?: (event: FormEvent) => void;
 } & GridProps & HTMLProps<HTMLFormElement>;
 declare const Form: {
-    ({ children, rows, columns, rowGap, columnGap, onSubmit, ...rest }: FormProps): JSX.Element;
-    Group({ children, rows, columns, rowGap, columnGap, disabled, ...rest }: FormGroupProps): JSX.Element;
+    ({ 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 }: FieldProps & {
         children?: ReactNode;
-    }): JSX.Element;
+    }): import("react/jsx-runtime").JSX.Element;
     Input: import("react").ForwardRefExoticComponent<(Omit<{
         id?: string | undefined;
         label?: string | undefined;
@@ -43,7 +43,7 @@ declare const Form: {
     } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & import("./types").As & {
         phone?: undefined;
         onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
-    } & import("./types").Margin, "ref"> | Omit<{
+    } & import("./types").Margin & import("./types").Padding, "ref"> | Omit<{
         id?: string | undefined;
         label?: string | undefined;
         placeholder?: string | undefined;
@@ -75,9 +75,9 @@ declare const Form: {
     } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & import("./types").As & {
         phone: true;
         onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void) | undefined;
-    } & import("./types").Margin, "ref">) & import("react").RefAttributes<import("./types").InputRef>>;
+    } & import("./types").Margin & import("./types").Padding, "ref">) & import("react").RefAttributes<import("./types").InputRef>>;
     Dropdown: {
-        <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, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, zIndex, disableScrollLock, container, ...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;
@@ -101,7 +101,12 @@ declare const Form: {
             label?: string | undefined;
             id?: string | undefined;
             name?: string | undefined;
-            direction?: "top" | "bottom" | undefined;
+            trigger?: ReactNode;
+            centerY?: boolean | undefined;
+            centerX?: boolean | undefined;
+            offsetY?: number | undefined;
+            offsetX?: number | undefined;
+            direction?: "top" | "bottom" | "right" | "left" | undefined;
             fontSize?: string | number | undefined;
             description?: string | undefined;
             disabled?: boolean | undefined;
@@ -110,11 +115,8 @@ declare const Form: {
             restrictInput?: boolean | ((text: string) => boolean) | undefined;
             inputRef?: import("react").RefObject<import("./types").InputRef> | undefined;
             optionsParent?: string | undefined;
-            zIndex?: number | undefined;
-            disableScrollLock?: boolean | undefined;
-            container?: HTMLElement | undefined;
-        } & import("./types").Width & import("./types").Height & import("./types").Margin & import("./Dropdown").InputProps): 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>): JSX.Element;
+        } & import("./types").Width & import("./types").Height & import("./types").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;
@@ -122,7 +124,7 @@ declare const Form: {
         labelPosition?: "right" | "left" | undefined;
         disabled?: boolean | undefined;
         checked?: boolean | undefined;
-    } & import("./types").Margin & import("./types").As & HTMLProps<HTMLInputElement>) => JSX.Element;
+    } & import("./types").Margin & import("./types").As & 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;
@@ -130,7 +132,7 @@ declare const Form: {
         disabled?: boolean | undefined;
         checked?: boolean | undefined;
         onChange: (val: boolean) => void;
-    } & import("./types").Margin & import("./types").As & import("./FormControl").CheckboxAttributes) => JSX.Element;
+    } & import("./types").Margin & import("./types").As & 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;
@@ -139,14 +141,14 @@ declare const Form: {
         checked?: boolean | undefined;
         partial?: boolean | undefined;
         onChange: (val: boolean) => void;
-    } & import("./types").Margin & import("./types").As & import("./FormControl").CheckboxAttributes) => JSX.Element;
+    } & import("./types").Margin & import("./types").As & import("./FormControl").CheckboxAttributes) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, iconLeft, iconRight, disabled, pill, ...rest }: {
         children?: ReactNode;
         iconLeft?: import("./helpers/getIcon").IconType | undefined; /** The function to be run after the form is submitted */
         iconRight?: import("./helpers/getIcon").IconType | undefined;
         pill?: boolean | undefined;
         disabled?: boolean | undefined;
-    } & import("./types").Margin) => JSX.Element;
+    } & import("./types").Margin) => import("react/jsx-runtime").JSX.Element;
 };
 type FormGroupProps = {
     /** Disables pointer events and reduces the opacity of the Group's contents  */

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

@@ -32,5 +32,5 @@ export type IconProps = {
         [key: string]: string | number;
     };
 } & ConditionalProps & MarginPadding & As & DivAttributes;
-declare const Icon: ({ name, svg, size, width, height, color, hoverColor, pointer, inheritColor, style, onClick, ...props }: IconProps) => JSX.Element | null;
+declare const Icon: ({ name, svg, size, width, height, color, hoverColor, pointer, inheritColor, style, onClick, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Icon;

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

@@ -116,7 +116,7 @@ declare const icons: {
     card: typeof Card;
     'caret-down': typeof CaretDown;
     'caret-up': typeof CaretUp;
-    check: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    check: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     'check-circle': typeof CheckCircle;
     'check-circle-outline': typeof CheckCircleOutline;
     checkbox: typeof Checkbox;
@@ -183,12 +183,12 @@ declare const icons: {
     rocket: typeof Rocket;
     schedule: typeof Schedule;
     'schedule-outline': typeof ScheduleOutline;
-    screenshot: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    screenshot: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     search: typeof Search;
     settings: typeof Settings;
-    share: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
-    'shield-check': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
-    'shield-slash': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    share: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    'shield-check': (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    'shield-slash': (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     sort: typeof Sort;
     spotify: typeof Spotify;
     star: typeof Star;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type ImageViewerProps = {
     /** Controls whether or not the ImageViewer is open */
     visible: boolean;
@@ -17,5 +16,5 @@ type ImageViewerProps = {
     /** The opacity of the ImageViewer background */
     opacity?: number;
 };
-declare const ImageViewer: ({ visible, close, images, startIndex, alt, maxWidth, maxHeight, opacity }: ImageViewerProps) => JSX.Element | null;
+declare const ImageViewer: ({ visible, close, images, startIndex, alt, maxWidth, maxHeight, opacity }: ImageViewerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ImageViewer;

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

@@ -1,6 +1,6 @@
-import { ChangeEvent, MutableRefObject, MouseEvent, HTMLProps } from 'react';
-import { As, InputFocusEvent, InputRef, Margin } from './types';
+import { ChangeEvent, HTMLProps, MouseEvent, MutableRefObject } from 'react';
 import { IconType } from './helpers/getIcon';
+import { As, InputFocusEvent, InputRef, MarginPadding } from './types';
 type OnClear = () => void;
 type OnChangeDefault = (event: ChangeEvent<HTMLInputElement>) => void;
 type OnChangePhone = (event: ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void;
@@ -63,7 +63,7 @@ export type InputProps = {
     pointer?: boolean;
     /** Removes the padding from the input */
     textOnly?: boolean;
-    /** Adds a search icon to the left of the input and a clear icon and funcitonality to the right */
+    /** Adds a search icon to the left of the input and a clear icon and functionality to the right */
     search?: boolean;
     /** Callback run after onFocus event */
     onFocus?: (event?: InputFocusEvent) => void;
@@ -73,7 +73,7 @@ export type InputProps = {
     onClick?: (event?: MouseEvent) => void;
     /** A callback function that is run upon clicking the clear icon */
     onClear?: OnClear;
-} & DefaultInputProps & InputTypes & Margin;
+} & DefaultInputProps & InputTypes & MarginPadding;
 declare const Input: import("react").ForwardRefExoticComponent<(Omit<{
     /** The id of the input element */
     id?: string | undefined;
@@ -121,7 +121,7 @@ declare const Input: import("react").ForwardRefExoticComponent<(Omit<{
     pointer?: boolean | undefined;
     /** Removes the padding from the input */
     textOnly?: boolean | undefined;
-    /** Adds a search icon to the left of the input and a clear icon and funcitonality to the right */
+    /** Adds a search icon to the left of the input and a clear icon and functionality to the right */
     search?: boolean | undefined;
     /** Callback run after onFocus event */
     onFocus?: ((event?: InputFocusEvent) => void) | undefined;
@@ -131,7 +131,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 & Margin, "ref"> | Omit<{
+} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & 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 */
@@ -178,7 +178,7 @@ declare const Input: import("react").ForwardRefExoticComponent<(Omit<{
     pointer?: boolean | undefined;
     /** Removes the padding from the input */
     textOnly?: boolean | undefined;
-    /** Adds a search icon to the left of the input and a clear icon and funcitonality to the right */
+    /** Adds a search icon to the left of the input and a clear icon and functionality to the right */
     search?: boolean | undefined;
     /** Callback run after onFocus event */
     onFocus?: ((event?: InputFocusEvent) => void) | undefined;
@@ -188,5 +188,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 & Margin, "ref">) & import("react").RefAttributes<InputRef>>;
+} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Phone & import("./types").Margin & import("./types").Padding, "ref">) & import("react").RefAttributes<InputRef>>;
 export default Input;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Margin, ThemeProp, InputFocusEvent } from './types';
+import { InputFocusEvent, ThemeProp } from './types';
 type FocusCallBack = (event?: InputFocusEvent) => void;
 export declare const useInputFocus: (onFocus?: FocusCallBack, onBlur?: FocusCallBack, focusCondition?: boolean) => {
     focused: boolean;
@@ -22,7 +22,7 @@ export declare const InputContainer: import("@emotion/styled").StyledComponent<{
     invalid?: boolean | undefined;
     disabled?: boolean | undefined;
     hasLabel?: boolean | undefined;
-} & import("./types").Width & import("./types").Height & Margin & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & import("./types").Width & import("./types").Height & import("./types").Margin & import("./types").Padding & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -53,7 +53,7 @@ declare const _default: {
         invalid?: boolean | undefined;
         disabled?: boolean | undefined;
         hasLabel?: boolean | undefined;
-    } & import("./types").Width & import("./types").Height & Margin & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    } & import("./types").Width & import("./types").Height & import("./types").Margin & import("./types").Padding & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
     Wrapper: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;

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

@@ -12,5 +12,5 @@ type LabelProps = {
     /** Reduces the emphasis of the Pill colors */
     disabled?: boolean;
 } & Margin;
-declare const Label: ({ children, iconLeft, iconRight, disabled, pill, ...rest }: LabelProps) => JSX.Element;
+declare const Label: ({ children, iconLeft, iconRight, disabled, pill, ...rest }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export default Label;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ChartProps } from './ChartHelpers';
-declare const LineChart: ({ data, legend, keys, ...rest }: ChartProps) => JSX.Element;
+declare const LineChart: ({ data, legend, keys, ...rest }: ChartProps) => import("react/jsx-runtime").JSX.Element;
 export default LineChart;

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

@@ -26,9 +26,9 @@ type MenuProps = {
     backgroundColor?: string;
 } & WidthHeight & Padding;
 declare const Menu: {
-    ({ vertical, width, height, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, border, borderTop, borderBottom, borderLeft, borderRight, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, backgroundColor, children, }: MenuProps): JSX.Element;
-    Item: ({ vertical, selected, disabled, contentPosition, onClick, id, children, indent }: MenuItemProps) => JSX.Element;
-    Group: ({ label, defaultOpen, vertical, selected, disabled, contentPosition, onClick, id, children, indent, backgroundColor, }: MenuGroupProps) => JSX.Element;
+    ({ vertical, width, height, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, border, borderTop, borderBottom, borderLeft, borderRight, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, backgroundColor, children, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    Item: ({ vertical, selected, disabled, contentPosition, onClick, id, children, indent }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    Group: ({ label, defaultOpen, vertical, selected, disabled, contentPosition, onClick, id, children, indent, backgroundColor, }: MenuGroupProps) => import("react/jsx-runtime").JSX.Element;
 };
 type MenuItemProps = {
     children: ReactNode;

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

@@ -12,7 +12,7 @@ type MessageProps = {
     onClose?: () => void;
 } & Width & Margin;
 declare const Message: {
-    ({ type, content, closeIcon, onClose, width, margin, marginTop, marginBottom, marginRight, marginLeft, children, }: MessageProps): JSX.Element;
+    ({ type, content, closeIcon, onClose, width, margin, marginTop, marginBottom, marginRight, marginLeft, children, }: MessageProps): import("react/jsx-runtime").JSX.Element;
     Header: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;