react-magma-dom 7.0.0-next.0 → 7.0.0-next.1

package/dist/components/AlertBase/index.d.ts

@@ -33,7 +33,7 @@ export interface AlertBaseProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 export declare const transitionDuration = 500;
 export declare function buildAlertBackground(props: any): any;
-export declare function buildAlertBorder(props: any): any;
+export declare function buildAlertBorder(props: any): string;
 export declare function buildAlertColor(props: any): any;
 export declare function buildLinkColor(props: any): any;
 export declare function buildLinkHoverColor(props: any): any;

package/dist/components/Badge/index.d.ts

@@ -55,7 +55,7 @@ export declare enum BadgeWeight {
     default = "default",
     light = "light"
 }
-export declare function buildInverseLightWeightBadgeBackground(props: any): string;
+export declare function buildInverseLightWeightBadgeBackground(props: any): any;
 export declare function buildLightWeightBadgeBackground(props: any): any;
 export declare function buildBadgeBackground(props: any): any;
 export declare function buildInverseLightWeightBadgeTextColor(props: any): any;

package/dist/components/Button/index.d.ts

@@ -61,7 +61,7 @@ export interface ButtonStyles {
     size?: ButtonSize;
     /**
      * Determines whether the button appears in all-caps
-     * @default ButtonTextTransform.uppercase
+     * @default ButtonTextTransform.none
      */
     textTransform?: ButtonTextTransform;
     /**

package/dist/components/Card/Card.d.ts

@@ -19,6 +19,16 @@ export interface CardProps extends React.LabelHTMLAttributes<HTMLDivElement> {
      * @default none
      */
     calloutType?: CardCalloutType;
+    /**
+     * Sets the radius size used by the card corners.
+     * @default CardBorderRadius.medium
+     */
+    borderRadius?: CardBorderRadius;
+    /**
+     * Sets whether all corners are rounded or the top-left corner is square.
+     * @default CardCornerTreatment.all
+     */
+    cornerTreatment?: CardCornerTreatment;
     /**
      * If true, card will render with a box-shadow
      * @default false
@@ -46,6 +56,18 @@ export declare enum CardCalloutType {
     warning = "warning",
     info = "info"
 }
+export declare enum CardBorderRadius {
+    none = "none",
+    extraSmall = "extraSmall",
+    small = "small",
+    medium = "medium",
+    large = "large",
+    extraLarge = "extraLarge"
+}
+export declare enum CardCornerTreatment {
+    all = "all",
+    squareTopLeft = "squareTopLeft"
+}
 export declare function buildCalloutBackground(props: CardProps & {
     theme: ThemeInterface;
 }): string;

package/dist/components/Card/Card.stories.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
+import { CardBorderRadius, CardCornerTreatment, CardProps } from '.';
 declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: (args: any) => React.JSX.Element;
+    render: (args: CardProps) => React.JSX.Element;
     args: {
+        borderRadius: CardBorderRadius;
+        cornerTreatment: CardCornerTreatment;
         isInverse: boolean;
         align: string;
         background: string;

package/dist/components/CharacterCounter/CharacterCounter.d.ts

@@ -25,6 +25,10 @@ export interface CharacterCounterProps extends React.HTMLAttributes<HTMLDivEleme
      * @deprecated = true
      */
     maxLength: number;
+    /**
+     * @internal
+     */
+    messageColor?: string;
     /**
      * @internal
      */

package/dist/components/Checkbox/index.d.ts

@@ -12,7 +12,7 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
     checked?: boolean;
     /**
      * Hex code for the background color
-     * @default #3942B0 (theme.colors.primary)
+     * @default #007085 (theme.colors.cyan700)
      */
     color?: string;
     /**
@@ -82,13 +82,19 @@ export declare const HiddenInput: React.FC<React.InputHTMLAttributes<HTMLInputEl
 interface FakeInputStyleProps {
     isChecked?: boolean;
     color: string;
+    disabledColor?: string;
     disabled?: boolean;
     isIndeterminate?: boolean;
     isInverse?: boolean;
     hasError?: boolean;
     hideFocus?: boolean;
+    inverseCheckedColor?: string;
+    inverseDisabledColor?: string;
+    inverseErrorColor?: string;
+    inverseUncheckedColor?: string;
     textPosition?: CheckboxTextPosition;
     theme: ThemeInterface;
+    uncheckedColor?: string;
 }
 export interface StyledFakeInputProps extends FakeInputStyleProps {
     children?: React.ReactNode;

package/dist/components/DatePicker/DateField/DateFieldInput.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ReferenceType } from '@floating-ui/react-dom';
 import { FormFieldContainerBaseProps } from '../../FormFieldContainer';
 export interface DateFieldInputProps extends Omit<FormFieldContainerBaseProps, 'inputSize' | 'fieldId'> {
+    disabled?: boolean;
     id?: string;
     dateFormat?: string;
     inputStyle?: React.CSSProperties;

package/dist/components/DatePicker/DateField/StyledDateFieldInput.d.ts

@@ -4,6 +4,7 @@ export declare const InputsContainer: import("@emotion/styled").StyledComponent<
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">;
 } & {
+    disabled?: boolean;
     hasError?: boolean;
     isInverse?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Dropdown/DropdownMenuItem.d.ts

@@ -30,11 +30,13 @@ export interface DropdownMenuItemProps extends Omit<React.HTMLAttributes<HTMLDiv
 }
 export declare function menuColors(props: any): any;
 export declare function menuBackground(props: any): any;
+export declare function menuFocusBackground(): string;
 export declare const MenuItemStyles: (props: any) => import("@emotion/react").SerializedStyles;
 export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any, "symbol" | "object" | "slot" | "style" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">;
 } & {
+    disabled?: boolean;
     isInverse?: boolean;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/FormFieldContainer/FormFieldContainer.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ThemeInterface } from '../../theme/magma';
 import { InputIconPosition, InputSize } from '../InputBase';
 import { LabelPosition } from '../Label';
 /**
@@ -20,6 +21,14 @@ export interface FormFieldContainerBaseProps {
      * Content of the error message. If a value is provided, the field will be styled as an error state and the error message will display.
      */
     errorMessage?: React.ReactNode;
+    /**
+     * @internal
+     */
+    errorMessageColor?: string;
+    /**
+     * @internal
+     */
+    errorIconColor?: string;
     /**
      * ID of the form field.  Also used in the description ID.
      */
@@ -72,6 +81,14 @@ export interface FormFieldContainerBaseProps {
      * If the labelPosition value is 'left' then Input labels have a specified width in percentage, otherwise no width is set.
      */
     labelWidth?: number;
+    /**
+     * @internal
+     */
+    labelColor?: string;
+    /**
+     * @internal
+     */
+    labelFontWeight?: React.CSSProperties['fontWeight'];
     /**
      * Enables the Character Counter and sets the maximum amount of characters allowed within the Input.
      */
@@ -85,6 +102,10 @@ export interface FormFieldContainerBaseProps {
      * Style properties for the helper or error message
      */
     messageStyle?: React.CSSProperties;
+    /**
+     * @internal
+     */
+    messageColor?: string;
     /**
      * @internal
      */
@@ -94,4 +115,5 @@ export interface FormFieldContainerBaseProps {
      */
     additionalContent?: React.ReactNode;
 }
+export declare const getInputFormFieldColors: (theme: ThemeInterface, isInverse: boolean) => Pick<FormFieldContainerBaseProps, 'errorIconColor' | 'errorMessageColor' | 'labelColor' | 'labelFontWeight' | 'messageColor'>;
 export declare const FormFieldContainer: React.ForwardRefExoticComponent<FormFieldContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Input/InputMessage.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { InputSize } from '../InputBase';
 export interface InputMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    errorColor?: string;
+    errorIconColor?: string;
     hasError?: boolean;
     id?: string;
     /**
@@ -9,5 +11,9 @@ export interface InputMessageProps extends React.HTMLAttributes<HTMLDivElement>
     inputSize?: InputSize;
     isInverse?: boolean;
     maxCount?: number;
+    /**
+     * @internal
+     */
+    messageColor?: string;
 }
 export declare const InputMessage: React.FunctionComponent<InputMessageProps>;

package/dist/components/InputBase/index.d.ts

@@ -23,6 +23,38 @@ export declare enum InputIconPosition {
     right = "right"
 }
 export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * @internal
+     */
+    backgroundColor?: string;
+    /**
+     * @internal
+     */
+    borderColor?: string;
+    /**
+     * @internal
+     */
+    errorBorderColor?: string;
+    /**
+     * @internal
+     */
+    disabledBackgroundColor?: string;
+    /**
+     * @internal
+     */
+    disabledBorderColor?: string;
+    /**
+     * @internal
+     */
+    disabledIconColor?: string;
+    /**
+     * @internal
+     */
+    disabledPlaceholderColor?: string;
+    /**
+     * @internal
+     */
+    disabledTextColor?: string;
     /**
      * @internal
      */
@@ -47,6 +79,10 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
      * Icon to display within the component
      */
     icon?: React.ReactElement<IconProps>;
+    /**
+     * @internal
+     */
+    iconColor?: string;
     /**
      * Text for the aria-label attribute for an icon, if provided
      */
@@ -147,6 +183,14 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
      * @default LabelPosition.top
      */
     labelPosition?: LabelPosition;
+    /**
+     * @internal
+     */
+    placeholderColor?: string;
+    /**
+     * @internal
+     */
+    textColor?: string;
     /**
      * If true, label text will be hidden visually, but will still be read by assistive technology
      * @default false
@@ -163,6 +207,11 @@ export interface InputWrapperStylesProps {
     hasError?: boolean;
     disabled?: boolean;
     inputSize?: InputSize;
+    backgroundColor?: string;
+    borderColor?: string;
+    errorBorderColor?: string;
+    disabledBackgroundColor?: string;
+    disabledBorderColor?: string;
 }
 export declare const inputWrapperStyles: (props: InputWrapperStylesProps) => import("@emotion/react").SerializedStyles;
 export interface InputBaseStylesProps {
@@ -175,6 +224,10 @@ export interface InputBaseStylesProps {
     disabled?: boolean;
     hasError?: boolean;
     isClearable?: boolean;
+    placeholderColor?: string;
+    textColor?: string;
+    disabledPlaceholderColor?: string;
+    disabledTextColor?: string;
 }
 export declare const inputBaseStyles: (props: InputBaseStylesProps) => import("@emotion/react").SerializedStyles;
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{

package/dist/components/Label/index.d.ts

@@ -13,10 +13,18 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * @default LabelPosition.top
      */
     labelPosition?: LabelPosition;
+    /**
+     * @internal
+     */
+    fontWeight?: React.CSSProperties['fontWeight'];
     /**
      * @default InputSize.medium
      */
     size?: InputSize;
+    /**
+     * @internal
+     */
+    textColor?: string;
     theme?: ThemeInterface;
     /**
      * @internal

package/dist/components/NavTabs/NavTab.d.ts

@@ -28,7 +28,7 @@ export interface BaseNavTabProps extends React.HTMLAttributes<HTMLAnchorElement>
     orientation?: TabsOrientation;
     /**
      * Determines whether the tab appears in all-caps
-     * @default TabsTextTransform.uppercase
+     * @default TabsTextTransform.none
      */
     textTransform?: TabsTextTransform;
     /**
@@ -64,9 +64,13 @@ export interface NavTabComponentProps extends BaseNavTabProps {
     isFullWidth?: boolean;
 }
 export declare type NavTabProps = XOR<NavTabChildrenProps, NavTabComponentProps>;
-export declare const StyledCustomTab: React.ForwardRefExoticComponent<NavTabComponentProps & React.RefAttributes<any>>;
+interface StyledCustomTabProps extends NavTabComponentProps {
+    hasStackedIcon?: boolean;
+}
+export declare const StyledCustomTab: React.ForwardRefExoticComponent<StyledCustomTabProps & React.RefAttributes<any>>;
 export declare const NavTab: React.ForwardRefExoticComponent<({} & NavTabComponentProps & React.RefAttributes<any>) | ({
     component?: never;
     iconPosition?: never;
     isFullWidth?: never;
 } & NavTabChildrenProps & React.RefAttributes<any>)>;
+export {};

package/dist/components/NavTabs/NavTabs.d.ts

@@ -2,8 +2,13 @@ import * as React from 'react';
 import { TabsBorderPosition, TabsIconPosition, TabsProps } from '../Tabs';
 import { Omit } from '../../utils';
 import { TabsOrientation, TabsTextTransform } from '../Tabs/shared';
-export interface NavTabsProps extends Omit<TabsProps, 'onChange'> {
+export interface NavTabsProps extends Omit<TabsProps, 'hasBorder' | 'onChange'> {
     'aria-label'?: string;
+    /**
+     * If true, a divider border is displayed
+     * @default false
+     */
+    hasBorder?: boolean;
 }
 interface NavTabsContextInterface {
     borderPosition?: TabsBorderPosition;

package/dist/components/Radio/index.d.ts

@@ -10,7 +10,7 @@ export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>
     css?: any;
     /**
      * Hex code for the background color
-     * @default theme.colors.primary
+     * @default theme.colors.cyan700
      */
     color?: string;
     /**

package/dist/components/Select/components.d.ts

@@ -23,7 +23,7 @@ export declare type SelectComponents<T> = {
 export declare const DefaultClearIndicator: (props: any) => React.JSX.Element;
 export declare const DefaultDropdownIndicator: (props: any) => React.JSX.Element;
 export declare const DefaultLoadingIndicator: (props: any) => React.JSX.Element;
-export declare function DefaultItem<T>({ itemRef, itemString, isInverse, isDisabled, isSelected, ...props }: ItemRenderOptions<T>): React.JSX.Element;
+export declare function DefaultItem<T>({ itemRef, itemString, isInverse, isDisabled, isSelected, theme, ...props }: ItemRenderOptions<T>): React.JSX.Element;
 export declare function defaultComponents<T>(props: SelectComponents<T>): {
     ClearIndicator: React.FunctionComponent<({} & import("../IconButton").IconTextButtonProps) | ({
         children?: never;

package/dist/components/Select/shared.d.ts

@@ -39,6 +39,10 @@ export declare const StyledItem: import("@emotion/styled").StyledComponent<{
     isFocused?: boolean;
     isDisabled?: boolean;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const SelectedItemIndicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const SelectedItemsWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">;

package/dist/components/SelectionControls/StyledLabel.d.ts

@@ -4,5 +4,6 @@ export interface StyledLabelProps {
     htmlFor: string;
     isInverse?: boolean;
     style?: React.CSSProperties;
+    textColor?: string;
 }
 export declare const StyledLabel: React.FunctionComponent<StyledLabelProps>;

package/dist/components/StyledButton/styles.d.ts

@@ -9,6 +9,8 @@ export declare function buildBorderWidth(props: any): "1px solid" | 0;
 export declare function buildBorderColor(props: any): any;
 export declare function buildColor(props: any): any;
 export declare function buildFocusBackground(props: any): any;
+export declare function buildHoverBackground(props: any): any;
 export declare function buildFocusColor(props: any): any;
+export declare function buildHoverColor(props: any): any;
 export declare function buildActiveBackground(props: any): any;
 export declare function buildActiveColor(props: any): any;

package/dist/components/Table/Table.d.ts

@@ -103,10 +103,7 @@ interface TableContextInterface {
 export declare const TableContext: React.Context<TableContextInterface>;
 export declare const TableContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">; /**
-     * If true, row will be visually highlighted on hover
-     * @default false
-     */
+    as?: React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">;
 } & {
     isInverse?: boolean;
     minWidth: number;
@@ -114,29 +111,20 @@ export declare const TableContainer: import("@emotion/styled").StyledComponent<{
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">; /**
-     * If true, row will be visually highlighted on hover
-     * @default false
-     */
+    as?: React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">;
 } & {
     minWidth: number;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledTableTitle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">; /**
-     * If true, row will be visually highlighted on hover
-     * @default false
-     */
+    as?: React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">;
 } & {
     isInverse: boolean;
     isTitleNode: boolean;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const StyledTable: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">; /**
-     * If true, row will be visually highlighted on hover
-     * @default false
-     */
+    as?: React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">;
 } & {
     hasOutsideBorder?: boolean;
     hasSquareCorners?: boolean;

package/dist/components/Tabs/Tab.d.ts

@@ -15,7 +15,7 @@ export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     unstyled?: boolean;
     /**
      * Determines whether the tab appears in all-caps
-     * @default TabsTextTransform.uppercase
+     * @default TabsTextTransform.none
      */
     textTransform?: TabsTextTransform;
     /**