@wavv/ui 1.9.4 → 1.9.5-beta.1

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

@@ -0,0 +1,56 @@
+import { KeyboardEvent, CSSProperties as CSS } from 'react';
+import { EditorChangeType } from 'draft-js';
+import { DraftEditorRef, InputFocusEvent, Margin, MergeField } from './types';
+declare const DraftEditor: import("react").ForwardRefExoticComponent<{
+    /** Controlled text value of the editor */
+    value: string;
+    /** Function called after editor change with the text value and boolean indicating missing merge fields */
+    onChange?: ((text: string, hasMissing: boolean, reason: EditorChangeType | null) => void) | undefined;
+    /** Function called after the enter key is pressed */
+    onEnterKey?: ((e: KeyboardEvent) => void) | undefined;
+    /** Callback run after onFocus event */
+    onFocus?: ((event?: InputFocusEvent) => void) | undefined;
+    /** Callback run after onBlur event */
+    onBlur?: ((event?: InputFocusEvent) => void) | undefined;
+    /** Array of MergeFields ({ id: string, label: string, value?: string }) for the editor to use/parse */
+    mergeFields?: MergeField[] | undefined;
+    /** Placeholder text of editor when value is empty */
+    placeholder?: string | undefined;
+    /** Places a description message below the editor */
+    description?: string | undefined;
+    /** Sets the Editor's bottom border and description text to red */
+    invalid?: boolean | undefined;
+    /** Width of the editor */
+    width?: string | number | undefined;
+    /** Height of the editor */
+    height?: number | undefined;
+    /** Max Height of the editor. Editor contents will scroll after this height is reached */
+    maxHeight?: number | undefined;
+    /** Removes the border from the editor */
+    borderless?: boolean | undefined;
+    /** Removes the padding from the editor */
+    noPadding?: boolean | undefined;
+    /** Disables any editing capability of the editor */
+    readOnly?: boolean | undefined;
+    /** Displays the value of the merge field rather than the label */
+    displayMergedValues?: boolean | undefined;
+    /** Sets the text color of the editor */
+    color?: string | undefined;
+    /** Sets the overflow css value of the editor */
+    overflow?: CSS['overflow'];
+    /** Truncates the editor text to the number of lines specified and adds an ellipsis textOverflow */
+    clampLines?: number | undefined;
+    /** Places a label element above the input. The value will set the text of the label */
+    label?: string | undefined;
+    /** Disables the input */
+    disabled?: boolean | undefined;
+    /** Sets the input borderRadius */
+    borderRadius?: string | number | undefined;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string | undefined;
+    /** Sets the editor fontSize */
+    fontSize?: string | number | undefined;
+    /** Removes the border, padding, and backgroundColor from the DraftEditor */
+    textOnly?: boolean | undefined;
+} & Margin & import("react").RefAttributes<DraftEditorRef>>;
+export default DraftEditor;

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

@@ -0,0 +1,85 @@
+import { ReactNode, RefObject } from 'react';
+import { InputProps } from '../Input';
+import { Margin, WidthHeight, InputFocusEvent, InputRef } from '../types';
+import { OptionItem, DropdownItemProps } from './DropdownUtils';
+export type RestInputProps = Omit<InputProps, 'value' | 'onChange' | 'onError'>;
+type DropdownProps<OptionType> = {
+    children?: ReactNode;
+    /** The function to be called when an option is selected */
+    onChange?: (item: OptionType | null) => void;
+    /** The function to be called when the search input is updated */
+    onTextChange?: (text: string) => void;
+    /** The value of the Dropdown */
+    value?: string | number;
+    /** The function to be called when the Dropdown is opened */
+    afterShow?: () => void;
+    /** The function to be called when the Dropdown is closed */
+    afterHide?: () => void;
+    /** The function to be called when the Dropdown input is focused */
+    onFocus?: (event?: InputFocusEvent) => void;
+    /** The function to be called when the Dropdown input is blurred */
+    onBlur?: (event?: InputFocusEvent) => void;
+    /** The function to be called when the Dropdown input goes to or from an invalid state */
+    onError?: (invalid: boolean) => void;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** Sets the input placeholder color */
+    placeholderColor?: string;
+    /** The options to be displayed */
+    options?: OptionType[];
+    /** Removes the border from the Dropdown input */
+    borderless?: boolean;
+    /** Sets the input borderColor */
+    borderColor?: string;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string;
+    /** Removes the caret icon from the right side of the Dropdown */
+    hideIcon?: boolean;
+    /** Displays a spinner icon on the right side of the input */
+    isLoading?: boolean;
+    /** Resets the selected text in the dropdown after an option is selected */
+    clearOnSelect?: boolean;
+    /** As the dropdown is searched, the options narrow down according to the search value */
+    filter?: boolean;
+    /** Removes the border and background-color from the Dropdown input */
+    textOnly?: boolean;
+    /** Adds a label to the Dropdown input */
+    label?: string;
+    /** Sets the id of the Dropdown input or trigger */
+    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?: 'left' | 'right' | 'top' | 'bottom';
+    /** Sets the Dropdown fontSize */
+    fontSize?: number | string;
+    /** Places a description message below the Dropdown */
+    description?: string;
+    /** Disables the Dropdown */
+    disabled?: boolean;
+    /** Sets the Dropdown's bottom border and description text to red */
+    invalid?: boolean;
+    /** Allows the Dropdown input to be edited */
+    search?: boolean;
+    /** Prevents the search Dropdown from accepting any input other than what matches the provided options */
+    restrictInput?: boolean | ((text: string) => boolean);
+    /** The ref of the Dropdown's input */
+    inputRef?: RefObject<InputRef>;
+    /** The selector (id or className) of the element the options should open in relataion to */
+    optionsParent?: string;
+} & 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, 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/types/components/Dropdown/DropdownUtils.d.ts

@@ -0,0 +1,56 @@
+import { ChangeEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+import { FlexPosition, ThemeProp } from '../types';
+export type OptionItem = {
+    id: number | string;
+    label: string;
+    header?: string;
+    body?: string;
+    leftElement?: ReactElement;
+    rightElement?: ReactElement;
+    onClick?: (event?: MouseEvent | Event) => void;
+    value?: unknown;
+    [key: string]: unknown;
+};
+export type DropdownItemProps<OptionType> = {
+    setValue?: (v: OptionType, event: MouseEvent) => void;
+    close?: () => void;
+    children: ReactNode;
+    /** Sets the value of the option that will be returned in the object */
+    value?: number | string;
+    /** Sets the label property of the object to be returned. Only required if the content of the Item is anything other than a string (icons, other elements) */
+    displayText?: string;
+    /** The flex positioning of the Item contents */
+    contentPosition?: FlexPosition;
+    /** The color of the Option text */
+    color?: string;
+    /** Sets the Option text color to theme.accent */
+    accented?: boolean;
+    /** Callback function to override the default onChange function of Dropdown. */
+    onClick?: (event: MouseEvent) => void;
+    /** The id of the Item element */
+    id: number | string;
+};
+export type SetEvent = MouseEvent | ChangeEvent | KeyboardEvent;
+export type SetValueFunc = <OptionType extends OptionItem>(selection: OptionType | string | null, event?: SetEvent) => void;
+type toggleFunc = (event?: MouseEvent) => void;
+type StatePieces = {
+    selected: number;
+    search?: boolean;
+    filter?: boolean;
+    inputText?: string;
+};
+type FilterState = Omit<StatePieces, 'selected'>;
+export declare const getFilteredOptions: <OptionType extends OptionItem>(options: OptionType[], state: FilterState) => OptionType[];
+export declare const getItemContentFromOption: <OptionType extends OptionItem>(option: OptionType) => import("react/jsx-runtime").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) => (ReactElement<DropdownItemProps<OptionType>, string | import("react").JSXElementConstructor<any>> | null)[];
+export declare const getCombinedChildren: <OptionType extends OptionItem>(options: OptionType[], children: ReactNode, setValue: SetValueFunc, toggle: toggleFunc, state: StatePieces) => (ReactElement<any, string | import("react").JSXElementConstructor<any>> | null)[];
+export declare const ItemHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemSubtext: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

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

@@ -0,0 +1,4 @@
+import Dropdown from './Dropdown';
+export default Dropdown;
+export type { RestInputProps as InputProps } from './Dropdown';
+export type { OptionItem as DropdownOption } from './DropdownUtils';

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

@@ -0,0 +1,78 @@
+import { HTMLProps, ReactNode } from 'react';
+import { OptionItem } from './Dropdown/DropdownUtils';
+import { As, FlexPosition, PopPosition } from './types';
+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> = {
+    children?: ReactNode;
+    /** The options to be displayed */
+    options?: OptionType[];
+    /** The id of the menu container */
+    id?: string | number;
+    /** The position of the menu body and arrow in relation to the trigger */
+    position?: PopPosition;
+    /** The element that will trigger the opening of the menu */
+    trigger: ReactNode;
+    /** Controls the open state of the menu */
+    open?: boolean;
+    /** Offset of the menu from the trigger */
+    offset?: number;
+    /** Controls the visibility of the the menu arrow */
+    arrow?: boolean;
+    /** The width of the menu */
+    width?: number | string;
+    /** Overrides the default maxHeight of 200px */
+    maxHeight?: number;
+    /** Specify a container element to portal the content into */
+    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 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, 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;
+    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 = {
+    /** The id of the sub menu's content container */
+    id?: string;
+    /** The text or element to display as the sub menu item's trigger */
+    label: string | ReactNode;
+    /** zIndex of the sub menu's portal container */
+    zIndex?: number;
+    /** Specify a container element to portal the sub menu content into */
+    container?: HTMLElement;
+} & BaseItemProps;
+export default DropdownMenu;

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

@@ -0,0 +1,174 @@
+import { FormEvent, HTMLProps, ReactNode } from 'react';
+import { GridProps } from './Grid';
+import { Margin } from './types';
+type FormProps = {
+    children?: ReactNode;
+    /** The function to be run after the form is submitted */
+    onSubmit?: (event: FormEvent) => void;
+} & GridProps & HTMLProps<HTMLFormElement>;
+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 & {
+        children?: ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Input: import("react").ForwardRefExoticComponent<(Omit<{
+        id?: string | undefined;
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        placeholderColor?: string | undefined;
+        description?: string | undefined;
+        isLoading?: boolean | undefined;
+        iconLeft?: import("./helpers/getIcon").IconType | undefined;
+        iconRight?: import("./helpers/getIcon").IconType | undefined;
+        invalid?: boolean | undefined;
+        borderless?: boolean | undefined;
+        borderRadius?: string | number | undefined;
+        borderColor?: string | undefined;
+        backgroundColor?: string | undefined;
+        fontSize?: string | number | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        containerRef?: import("react").MutableRefObject<HTMLDivElement> | undefined;
+        value?: string | number | undefined;
+        disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        preventFocus?: boolean | undefined;
+        pointer?: boolean | undefined;
+        textOnly?: boolean | undefined;
+        search?: boolean | undefined;
+        onFocus?: ((event?: import("./types").InputFocusEvent | undefined) => void) | undefined;
+        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 & {
+        phone?: undefined;
+        onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
+    } & Margin & import("./types").Padding, "ref"> | Omit<{
+        id?: string | undefined;
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        placeholderColor?: string | undefined;
+        description?: string | undefined;
+        isLoading?: boolean | undefined;
+        iconLeft?: import("./helpers/getIcon").IconType | undefined;
+        iconRight?: import("./helpers/getIcon").IconType | undefined;
+        invalid?: boolean | undefined;
+        borderless?: boolean | undefined;
+        borderRadius?: string | number | undefined;
+        borderColor?: string | undefined;
+        backgroundColor?: string | undefined;
+        fontSize?: string | number | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        containerRef?: import("react").MutableRefObject<HTMLDivElement> | undefined;
+        value?: string | number | undefined;
+        disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        preventFocus?: boolean | undefined;
+        pointer?: boolean | undefined;
+        textOnly?: boolean | undefined;
+        search?: boolean | undefined;
+        onFocus?: ((event?: import("./types").InputFocusEvent | undefined) => void) | undefined;
+        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 & {
+        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("./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;
+            value?: string | number | undefined;
+            afterShow?: (() => void) | undefined;
+            afterHide?: (() => void) | undefined;
+            onFocus?: ((event?: import("./types").InputFocusEvent | undefined) => void) | undefined;
+            onBlur?: ((event?: import("./types").InputFocusEvent | undefined) => void) | undefined;
+            onError?: ((invalid: boolean) => void) | undefined;
+            placeholder?: string | undefined;
+            placeholderColor?: string | undefined;
+            options?: OptionType[] | undefined;
+            borderless?: boolean | undefined;
+            borderColor?: string | undefined;
+            backgroundColor?: string | undefined;
+            hideIcon?: boolean | undefined;
+            isLoading?: boolean | undefined;
+            clearOnSelect?: boolean | undefined;
+            filter?: boolean | undefined;
+            textOnly?: boolean | undefined;
+            label?: string | undefined;
+            id?: string | undefined;
+            name?: string | 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;
+            invalid?: boolean | undefined;
+            search?: boolean | undefined;
+            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("./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;
+        label?: string | undefined;
+        labelPosition?: "right" | "left" | undefined;
+        disabled?: boolean | undefined;
+        checked?: boolean | undefined;
+    } & 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;
+        labelPosition?: "right" | "left" | undefined;
+        disabled?: boolean | undefined;
+        checked?: boolean | undefined;
+        onChange: (val: boolean) => void;
+    } & 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;
+        labelPosition?: "right" | "left" | undefined;
+        disabled?: boolean | undefined;
+        checked?: boolean | undefined;
+        partial?: boolean | undefined;
+        onChange: (val: boolean) => void;
+    } & 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;
+        iconRight?: import("./helpers/getIcon").IconType | undefined;
+        pill?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } & Margin) => import("react/jsx-runtime").JSX.Element;
+};
+type FormGroupProps = {
+    /** Disables pointer events and reduces the opacity of the Group's contents  */
+    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;
+export default Form;

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

@@ -0,0 +1,18 @@
+import { HTMLProps } from 'react';
+import { Margin, ThemeProp } from './types';
+export declare const ControlContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    labelRight?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & Margin & ThemeProp, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const ControlInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ThemeProp, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const ControlLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export type CheckboxAttributes = Omit<HTMLProps<HTMLInputElement>, 'onChange'>;

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

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { StyledComponent } from '@emotion/styled';
+import { MarginPadding, WidthHeight } from './types';
+export type GridProps = {
+    /** If a number, rows creates n number rows of an equal size. If a string, rows sets the gridTemplateRows property   */
+    rows?: string | number;
+    /** The amount of pixels between each row */
+    rowGap?: number;
+    /** If a number, columns creates n number columns of an equal size. If a string, columns sets the gridTemplateColumns property   */
+    columns?: string | number;
+    /** The amount of pixels between each column */
+    columnGap?: number;
+    /** Sets the gridGap property */
+    gap?: number;
+    /** Sets the gridTemplate property */
+    template?: string;
+    /** Sets the alignContent property */
+    alignContent?: string;
+    /** Sets the alignItems property */
+    alignItems?: string;
+    /** Sets the justifyContent property */
+    justifyContent?: string;
+    /** Sets the justifyItems property */
+    justifyItems?: string;
+    children?: ReactNode;
+} & WidthHeight & MarginPadding;
+type ItemProps = {
+    /** Sets the gridRow property */
+    row?: number;
+    /** Sets the gridRowStart property */
+    rowStart?: number;
+    /** Sets the gridRowEnd property */
+    rowEnd?: number;
+    /** Sets the gridColumn property */
+    column?: number;
+    /** Sets the gridColumnStart property */
+    columnStart?: number;
+    /** Sets the gridColumnEnd property */
+    columnEnd?: number;
+    /** Sets the gridArea property */
+    area?: number;
+    /** Sets the alignSelf property */
+    alignSelf?: string;
+    /** Sets the justifySelf property */
+    justifySelf?: string;
+    /** Sets the placeSelf property */
+    placeSelf?: string;
+    /** Sets the border property */
+    border?: string;
+} & MarginPadding;
+interface GridType extends StyledComponent<GridProps> {
+    Item?: StyledComponent<ItemProps>;
+}
+declare const Grid: GridType;
+export default Grid;

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

@@ -0,0 +1,38 @@
+import { HTMLProps, ReactNode } from 'react';
+import { IconNames } from './icons';
+import { As, MarginPadding } from '../types';
+export type Sizes = number | 'small' | 'medium' | 'large';
+type DivAttributes = Omit<HTMLProps<HTMLDivElement>, 'size'>;
+type ConditionalProps = {
+    /** Name of the specific icon to use */
+    name: IconNames;
+    svg?: never;
+} | {
+    /** The SVG element to wrap with the Icon component */
+    svg: ReactNode | (() => JSX.Element);
+    name?: never;
+};
+export type IconProps = {
+    /** Sets the width and height of the icon */
+    size?: Sizes;
+    /** Sets the width of the icon */
+    width?: number | string;
+    /** Sets the height of the icon */
+    height?: number | string;
+    /** Sets the color of the icon */
+    color?: string;
+    /** Sets the color of the icon when hovered */
+    hoverColor?: string;
+    /** Sets the cursor as a pointer when hovered */
+    pointer?: boolean;
+    /** Sets the color of the icon to the parent element's color */
+    inheritColor?: boolean;
+    /** CSS Animation shorthand property */
+    animation?: string;
+    /** Sets the style prop of the Icon wrapper element */
+    style?: {
+        [key: string]: string | number;
+    };
+} & ConditionalProps & MarginPadding & As & 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;