@loadsmart/loadsmart-ui 8.0.6 → 8.1.0-beta.1

package/dist/DragDropFile.context.js

@@ -0,0 +1,29 @@
+import React, { createContext, useCallback, useContext, useMemo } from "react";
+//#region src/components/DragDropFile/DragDropFile.context.tsx
+var DragDropFileContext = createContext(void 0);
+var DragDropFileProvider = ({ fileList, onFilesAdded, onFileRemoved, onRetryUpload, children }) => {
+	const onRemoveFile = useCallback((removedItem, index) => {
+		onFileRemoved([...fileList.slice(0, index), ...fileList.slice(index + 1)], removedItem, index);
+	}, [fileList]);
+	const contextValue = useMemo(() => ({
+		fileList,
+		onFilesAdded,
+		onRemoveFile,
+		onRetryUpload
+	}), [
+		fileList,
+		onFilesAdded,
+		onRemoveFile,
+		onRetryUpload
+	]);
+	return /* @__PURE__ */ React.createElement(DragDropFileContext.Provider, { value: contextValue }, children);
+};
+var useDragDropFileContext = () => {
+	const context = useContext(DragDropFileContext);
+	if (!context) throw new Error("useDragDropFileContext must be used within an DragDropFileProvider");
+	return context;
+};
+//#endregion
+export { DragDropFileContext, DragDropFileProvider, useDragDropFileContext };
+
+//# sourceMappingURL=DragDropFile.context.js.map

package/dist/DragDropFile.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropFile.context.js","names":["React","createContext","useContext","useCallback","useMemo","DragDropFileContextValue","DragDropFileProviderProps","FileWithStatus","DragDropFileContext","undefined","DragDropFileProvider","fileList","onFilesAdded","onFileRemoved","onRetryUpload","children","onRemoveFile","removedItem","index","slice","contextValue","useDragDropFileContext","context","Error"],"sources":["../src/components/DragDropFile/DragDropFile.context.tsx"],"sourcesContent":["import React, { createContext, useContext, useCallback, useMemo } from 'react'\n\nimport type { DragDropFileContextValue, DragDropFileProviderProps, FileWithStatus } from './types'\n\nexport const DragDropFileContext = createContext<DragDropFileContextValue | undefined>(undefined)\n\nexport const DragDropFileProvider = ({\n  fileList,\n  onFilesAdded,\n  onFileRemoved,\n  onRetryUpload,\n  children,\n}: DragDropFileProviderProps) => {\n  const onRemoveFile = useCallback(\n    (removedItem: FileWithStatus, index: number) => {\n      onFileRemoved([...fileList.slice(0, index), ...fileList.slice(index + 1)], removedItem, index)\n    },\n    [fileList]\n  )\n\n  const contextValue = useMemo(\n    () => ({ fileList, onFilesAdded, onRemoveFile, onRetryUpload }),\n    [fileList, onFilesAdded, onRemoveFile, onRetryUpload]\n  )\n\n  return (\n    <DragDropFileContext.Provider value={contextValue}>{children}</DragDropFileContext.Provider>\n  )\n}\n\nexport const useDragDropFileContext = (): DragDropFileContextValue => {\n  const context = useContext(DragDropFileContext)\n\n  if (!context) {\n    throw new Error('useDragDropFileContext must be used within an DragDropFileProvider')\n  }\n\n  return context\n}\n"],"mappings":";;AAIA,IAAaQ,sBAAsBP,cAAoDQ,KAAAA,EAAU;AAEjG,IAAaC,wBAAwB,EACnCC,UACAC,cACAC,eACAC,eACAC,eAC+B;CAC/B,MAAMC,eAAeb,aAClBc,aAA6BC,UAAkB;AAC9CL,gBAAc,CAAC,GAAGF,SAASQ,MAAM,GAAGD,MAAM,EAAE,GAAGP,SAASQ,MAAMD,QAAQ,EAAE,CAAC,EAAED,aAAaC,MAAM;IAEhG,CAACP,SACH,CAAC;CAED,MAAMS,eAAehB,eACZ;EAAEO;EAAUC;EAAcI;EAAcF;EAAe,GAC9D;EAACH;EAAUC;EAAcI;EAAcF;EACzC,CAAC;AAED,QACE,sBAAA,cAAC,oBAAoB,UAArB,EAA8B,OAAOM,cAAuD,EAAxCL,SAAwC;;AAIhG,IAAaM,+BAAyD;CACpE,MAAMC,UAAUpB,WAAWM,oBAAoB;AAE/C,KAAI,CAACc,QACH,OAAM,IAAIC,MAAM,qEAAqE;AAGvF,QAAOD"}

package/dist/components/Banner/Banner.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode, default as React } from 'react';
-import { StyledComponent } from 'styled-components';
 export interface BannerProps {
     readonly className?: string;
     readonly variant?: 'success' | 'danger' | 'warning' | 'neutral';
@@ -16,8 +15,8 @@ export interface BannerActionProps extends BannerProps {
     readonly onActionButtonClick?: () => void;
     readonly onSecondaryActionButtonClick?: () => void;
 }
-export declare const CloseButton: StyledComponent<any, any, any, any>;
-export declare const Icon: StyledComponent<any, any, any, any>;
+export declare const CloseButton: any;
+export declare const Icon: any;
 declare function Banner({ scale, variant, icon, title, description, onClose, dismissible, ...others }: BannerProps): React.JSX.Element | null;
 export declare function BannerLarge({ scale, variant, icon, title, description, onClose, dismissible, ...others }: BannerProps): React.JSX.Element | null;
 export declare function BannerAction({ scale, variant, icon, title, action, secondaryAction, onActionButtonClick, onSecondaryActionButtonClick, ...others }: BannerActionProps): React.JSX.Element;

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

@@ -1,7 +1,7 @@
 import { default as React, ButtonHTMLAttributes, ReactNode } from 'react';
 import { IconProps } from '../Icon';
 import { ColorScheme } from '../../utils/types/ColorScheme';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase, Substitute } from 'styled-components/dist/types';
 export type ButtonVariants = 'primary' | 'secondary' | 'warning' | 'icon' | 'tertiary';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     readonly className?: string;
@@ -12,7 +12,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     readonly scale?: 'small' | 'default' | 'large';
     readonly loading?: boolean;
 }
-export declare const Children: StyledComponent<"span", any, ButtonProps, never>;
+export declare const Children: IStyledComponentBase<"web", Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ButtonProps>> & string;
 export declare const BaseButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export declare function Caret(props: Omit<IconProps, 'name'>): React.JSX.Element;

package/dist/components/Calendar/Pickers/PickerButton.d.ts

@@ -1,3 +1,2 @@
-import { StyledComponent } from 'styled-components';
-declare const _default: StyledComponent<any, any, any, any>;
+declare const _default: any;
 export default _default;

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

@@ -9,8 +9,8 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
 declare function Card({ flagged, status, children, ...others }: CardProps): React.JSX.Element;
 declare namespace Card {
     var Title: typeof CardTitle;
-    var Subtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-    var Separator: import("styled-components").StyledComponent<"hr", any, {}, never>;
-    var Body: import("styled-components").StyledComponent<"div", any, {}, never>;
+    var Subtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    var Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>> & string;
+    var Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 }
 export default Card;

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

@@ -1,9 +1,10 @@
 import { ReactNode, HTMLAttributes, default as React } from 'react';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase } from 'styled-components/dist/types';
+import { FastOmit } from 'styled-components';
 export interface CardTitleProps extends HTMLAttributes<HTMLElement> {
     readonly leading?: ReactNode;
 }
-declare const Wrapper: StyledComponent<"div", any, {}, never>;
+declare const Wrapper: IStyledComponentBase<"web", FastOmit<React.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare function CardTitle({ children, leading, ...others }: CardTitleProps): React.JSX.Element;
 export { Wrapper as CardTitleWrapper };
 export default CardTitle;

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

@@ -2,9 +2,8 @@ import { default as React } from 'react';
 import { CalendarDate } from '../Calendar';
 import { DatePickerProps } from './DatePicker.types';
 import { TextFieldProps } from '../TextField';
-import { StyledComponent } from 'styled-components';
 export declare const formatter: any;
-export declare const ClearButton: StyledComponent<any, any, any, any>;
+export declare const ClearButton: any;
 interface DateInputProps extends Omit<TextFieldProps, 'onChange'> {
     readonly onChange: (date: CalendarDate) => void;
 }

package/dist/components/Dialog/Dialog.d.ts

@@ -25,11 +25,11 @@ export interface DialogActionCancelProps extends Omit<ButtonProps, 'onClick' | '
 declare function DialogActionCancel({ onCancel, children, ...others }: DialogActionCancelProps): React.JSX.Element;
 declare function Dialog({ scale, open, ...others }: DialogProps): React.JSX.Element;
 declare namespace Dialog {
-    var Header: import("styled-components").StyledComponent<"h1", any, {}, never>;
-    var Body: import("styled-components").StyledComponent<"div", any, {}, never>;
+    var Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+    var Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     var ActionConfirm: typeof DialogActionConfirm;
     var ActionCancel: typeof DialogActionCancel;
     var Actions: typeof DialogActions;
-    var Close: import("styled-components").StyledComponent<any, any, any, any>;
+    var Close: any;
 }
 export default Dialog;

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

@@ -1,12 +1,10 @@
 import { default as React } from 'react';
 import { StackProps } from '../Layout/Stack';
-import { DropZoneProps } from './types';
-import { StyledComponent } from 'styled-components';
-export declare const DragDropFileWrapper: StyledComponent<any, any, any, any>;
-export declare const DropZoneWrapper: StyledComponent<(props: StackProps) => React.JSX.Element, any, Pick<DropZoneProps, "disabled"> & {
-    $error?: boolean;
-}, never>;
-export declare const HiddenInput: StyledComponent<"input", any, {}, never>;
-export declare const UploadIcon: StyledComponent<any, any, any, any>;
-export declare const FileListUL: StyledComponent<(props: StackProps) => React.JSX.Element, any, {}, never>;
-export declare const Divider: StyledComponent<"div", any, {}, never>;
+import { IStyledComponentBase } from 'styled-components/dist/types';
+import { FastOmit } from 'styled-components';
+export declare const DragDropFileWrapper: any;
+export declare const DropZoneWrapper: IStyledComponentBase<"web", any> & string & Omit<(props: StackProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export declare const HiddenInput: IStyledComponentBase<"web", FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const UploadIcon: any;
+export declare const FileListUL: IStyledComponentBase<"web", any> & string & Omit<(props: StackProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export declare const Divider: IStyledComponentBase<"web", FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -37,8 +37,8 @@ declare namespace Dropdown {
     var Menu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
     var Section: typeof DropdownMenuSection;
     var Item: typeof DropdownMenuItem;
-    var Separator: import("styled-components").StyledComponent<"hr", any, {
-        'aria-hidden': true;
-    }, "aria-hidden">;
+    var Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
+        ref?: ((instance: HTMLHRElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLHRElement> | null | undefined;
+    }>, never>, never>> & string;
 }
 export default Dropdown;

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

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
 import { DropdownMenuItemProps, DropdownMenuProps, DropdownMenuSectionProps } from './Dropdown.types';
-import { StyledComponent } from 'styled-components';
-export declare const DropdownSeparator: StyledComponent<"hr", any, {
-    'aria-hidden': true;
-}, "aria-hidden">;
+import { IStyledComponentBase, Substitute } from 'styled-components/dist/types';
+import { FastOmit } from 'styled-components';
+export declare const DropdownSeparator: IStyledComponentBase<"web", FastOmit<FastOmit<Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
+    ref?: ((instance: HTMLHRElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLHRElement> | null | undefined;
+}>, never>, never>> & string;
 export declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
 export declare function DropdownMenuItem(props: DropdownMenuItemProps): React.JSX.Element;
 export declare function DropdownMenuSection(props: DropdownMenuSectionProps): React.JSX.Element;

package/dist/components/Layout/Layout.utils.d.ts

@@ -1,3 +1,2 @@
-import { FlattenInterpolation } from 'styled-components';
-import { ThemedProps } from '../../theming';
-export declare const getSpace: (prop: string) => FlattenInterpolation<ThemedProps>;
+import { RuleSet } from 'styled-components';
+export declare const getSpace: (prop: string) => RuleSet;

package/dist/components/Layout/Stack.d.ts

@@ -1,17 +1,17 @@
 import { default as React, HTMLAttributes } from 'react';
 import { Spacing, JustifyValue, AlignValue } from './Layout.types';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase, Substitute } from 'styled-components/dist/types';
 export interface StackProps extends HTMLAttributes<HTMLElement> {
     readonly space?: Spacing;
     readonly justify?: JustifyValue;
     readonly align?: AlignValue;
     readonly as?: string | React.ComponentType<any>;
 }
-export declare const StackContainer: StyledComponent<"div", any, {
+export declare const StackContainer: IStyledComponentBase<"web", Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $space: StackProps["space"];
     $justify: StackProps["justify"];
     $align: StackProps["align"];
-}, never>;
+}>> & string;
 /**
  * Stack layout component.
  */

package/dist/components/Loaders/LoadingBar.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
-import { StyledComponent } from 'styled-components';
-export declare const Bar: StyledComponent<"div", any, {
+import { IStyledComponentBase, Substitute } from 'styled-components/dist/types';
+export declare const Bar: IStyledComponentBase<"web", Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     width?: number;
     velocity?: number;
-}, never>;
+}>> & string;
 export interface LoadingBarProps {
     readonly alignment?: 'left' | 'center' | 'right';
     readonly title?: React.ReactNode;

package/dist/components/Modal/Modal.d.ts

@@ -16,6 +16,6 @@ declare namespace Modal {
         readonly title: string;
         readonly children?: ReactNode;
     }) => React.JSX.Element;
-    var Close: import("styled-components").StyledComponent<any, any, any, any>;
+    var Close: any;
 }
 export default Modal;

package/dist/components/SideNavigation/Logo/Logo.d.ts

@@ -1,10 +1,10 @@
 import { default as React, ReactNode } from 'react';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase, Substitute } from 'styled-components/dist/types';
 export interface LogoProps {
     readonly url: string;
     readonly className?: string;
     readonly children?: ReactNode;
 }
 declare function Logo({ className, url, children }: LogoProps): React.JSX.Element;
-declare const _default: StyledComponent<typeof Logo, any, LogoProps, never>;
+declare const _default: IStyledComponentBase<"web", Substitute<LogoProps, LogoProps>> & string & Omit<typeof Logo, keyof React.Component<any, {}, any>>;
 export default _default;

package/dist/components/SideNavigation/Menu/Menu.d.ts

@@ -1,8 +1,8 @@
 import { default as React, ReactNode } from 'react';
 import { MenuExpandableProps } from './MenuExpandable';
 import { MenuLinkProps } from './MenuLink';
-import { StyledComponentBase, StyledComponent } from 'styled-components';
-import { NonReactStatics } from 'hoist-non-react-statics';
+import { IStyledComponentBase } from 'styled-components/dist/types';
+import { FastOmit } from 'styled-components';
 export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly label?: string;
 }
@@ -12,8 +12,8 @@ type MenuItemProps = {
     readonly children?: ReactNode;
 } & MenuLinkProps & MenuExpandableProps;
 declare function MenuItem(props: MenuItemProps): React.JSX.Element;
-declare const _default: string & StyledComponentBase<typeof Menu, any, {}, never> & NonReactStatics<typeof Menu, {}> & {
+declare const _default: IStyledComponentBase<"web", FastOmit<MenuProps, never>> & string & Omit<typeof Menu, keyof React.Component<any, {}, any>> & {
     Item: typeof MenuItem;
-    SubItem: StyledComponent<({ url, ...props }: MenuLinkProps) => React.JSX.Element, any, {}, never>;
+    SubItem: IStyledComponentBase<"web", FastOmit<MenuLinkProps, never>> & string & Omit<({ url, ...props }: MenuLinkProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 };
 export default _default;

package/dist/components/SideNavigation/Menu/MenuLink.d.ts

@@ -1,5 +1,6 @@
 import { default as React, ReactNode } from 'react';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase } from 'styled-components/dist/types';
+import { FastOmit } from 'styled-components';
 export interface MenuLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
     readonly label: string;
     readonly leading?: ReactNode;
@@ -7,5 +8,5 @@ export interface MenuLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
     readonly url?: string;
 }
 declare function MenuLink({ url, ...props }: MenuLinkProps): React.JSX.Element;
-declare const _default: StyledComponent<typeof MenuLink, any, {}, never>;
+declare const _default: IStyledComponentBase<"web", FastOmit<MenuLinkProps, never>> & string & Omit<typeof MenuLink, keyof React.Component<any, {}, any>>;
 export default _default;

package/dist/components/SideNavigation/SideNavigation.d.ts

@@ -5,15 +5,15 @@ export interface SideNavigationProps {
 }
 declare function SideNavigation({ className, children }: SideNavigationProps): React.JSX.Element;
 declare namespace SideNavigation {
-    var Logo: import("styled-components").StyledComponent<({ className, url, children }: import("./Logo/Logo").LogoProps) => React.JSX.Element, any, import("./Logo/Logo").LogoProps, never>;
-    var Menu: string & import("styled-components").StyledComponentBase<({ label, children, ...props }: import("./Menu/Menu").MenuProps) => React.JSX.Element, any, {}, never> & import("hoist-non-react-statics").NonReactStatics<({ label, children, ...props }: import("./Menu/Menu").MenuProps) => React.JSX.Element, {}> & {
+    var Logo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("./Logo/Logo").LogoProps, import("./Logo/Logo").LogoProps>> & string & Omit<({ className, url, children }: import("./Logo/Logo").LogoProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+    var Menu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("./Menu/Menu").MenuProps, never>> & string & Omit<({ label, children, ...props }: import("./Menu/Menu").MenuProps) => React.JSX.Element, keyof React.Component<any, {}, any>> & {
         Item: (props: {
             readonly active?: boolean;
             readonly children?: ReactNode;
         } & import("./Menu/MenuLink").MenuLinkProps & import("./Menu/MenuExpandable").MenuExpandableProps) => React.JSX.Element;
-        SubItem: import("styled-components").StyledComponent<({ url, ...props }: import("./Menu/MenuLink").MenuLinkProps) => React.JSX.Element, any, {}, never>;
+        SubItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("./Menu/MenuLink").MenuLinkProps, never>> & string & Omit<({ url, ...props }: import("./Menu/MenuLink").MenuLinkProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
     };
     var Separator: typeof import("./Separator").Separator;
-    var CloseButton: import("styled-components").StyledComponent<any, any, any, any>;
+    var CloseButton: any;
 }
 export default SideNavigation;

package/dist/components/Steps/StepsStep.d.ts

@@ -1,10 +1,11 @@
 import { default as React, ReactNode } from 'react';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase } from 'styled-components/dist/types';
+import { FastOmit } from 'styled-components';
 export interface StepsStepProps {
     readonly id: number | string;
     readonly className?: string;
     readonly children?: ReactNode;
 }
-export declare const StepWrapper: StyledComponent<"article", any, {}, never>;
+export declare const StepWrapper: IStyledComponentBase<"web", FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 declare function StepsStep({ children, id, ...others }: StepsStepProps): React.JSX.Element;
 export default StepsStep;

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

@@ -9,7 +9,7 @@ declare namespace Table {
     var Row: typeof TableRow;
     var Cell: typeof TableCell;
     var HeadCell: typeof TableHeadCell;
-    var Foot: import("styled-components").StyledComponent<"tfoot", any, {}, never>;
+    var Foot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>> & string;
     var Caption: typeof TableCaption;
     var Selection: {
         Actions: typeof TableSelectionActions;

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

@@ -1,2 +1 @@
-import { StyledComponent } from 'styled-components';
-export declare const NoPaddingButton: StyledComponent<any, any, any, any>;
+export declare const NoPaddingButton: any;

package/dist/components/TablePagination/TablePaginationActions.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { TablePaginationActionsProps } from './TablePagination.types';
-import { StyledComponent } from 'styled-components';
-export declare const ActionIcon: StyledComponent<any, any, any, any>;
+export declare const ActionIcon: any;
 declare function TablePaginationActions({ variant, disabled, onPageChange, page, count, rowsPerPage, }: TablePaginationActionsProps): React.JSX.Element;
 export default TablePaginationActions;

package/dist/components/Text/Text.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
+import { ReactNode, DetailedHTMLProps, HTMLAttributes } from 'react';
 import { TypographyOptions, TypographyVariants } from '../../styles/typography';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase, Substitute } from 'styled-components/dist/types';
 export interface TextProps {
     readonly variant?: TypographyVariants;
     readonly italic?: TypographyOptions['italic'];
     readonly color?: TypographyOptions['color'];
     readonly children?: ReactNode;
 }
-declare const Text: StyledComponent<"span", any, TextProps, never>;
+declare const Text: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TextProps>> & string;
 export default Text;

package/dist/components/TextField/TextField.d.ts

@@ -1,7 +1,8 @@
 import { default as React, InputHTMLAttributes, ReactNode } from 'react';
 import { ColorScheme } from '../../utils/types/ColorScheme';
 import { default as Status } from '../../utils/types/Status';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase, Substitute } from 'styled-components/dist/types';
+import { FastOmit } from 'styled-components';
 interface WithAdditionalProps {
     readonly scale?: 'small' | 'default' | 'large';
     readonly status?: Status;
@@ -13,7 +14,11 @@ export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement>, W
     readonly className?: string;
     readonly children?: ReactNode;
 }
-export declare const Leading: StyledComponent<"span", any, WithAdditionalProps, never>;
-export declare const Trailing: StyledComponent<"span", any, WithAdditionalProps, never>;
+export declare const Leading: IStyledComponentBase<"web", Substitute<Omit< FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof WithAdditionalProps> & WithAdditionalProps, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLSpanElement> | null | undefined;
+}, WithAdditionalProps>> & string;
+export declare const Trailing: IStyledComponentBase<"web", Substitute<Omit< FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof WithAdditionalProps> & WithAdditionalProps, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLSpanElement> | null | undefined;
+}, WithAdditionalProps>> & string;
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/components/ToggleGroup/Toggle.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { ToggleGroupOptionProps } from './ToggleGroup.types';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase } from 'styled-components/dist/types';
+import { FastOmit } from 'styled-components';
 declare function Toggle({ value, children, disabled, ...others }: ToggleGroupOptionProps): React.JSX.Element;
-declare const _default: StyledComponent<typeof Toggle, any, {}, never>;
+declare const _default: IStyledComponentBase<"web", FastOmit<ToggleGroupOptionProps, never>> & string & Omit<typeof Toggle, keyof React.Component<any, {}, any>>;
 export default _default;

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -2,6 +2,6 @@ import { default as React } from 'react';
 import { ToggleGroupOptionProps, ToggleGroupProps } from './ToggleGroup.types';
 declare function ToggleGroup(props: ToggleGroupProps): React.JSX.Element;
 declare namespace ToggleGroup {
-    var Option: import("styled-components").StyledComponent<({ value, children, disabled, ...others }: ToggleGroupOptionProps) => React.JSX.Element, any, {}, never>;
+    var Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ToggleGroupOptionProps, never>> & string & Omit<({ value, children, disabled, ...others }: ToggleGroupOptionProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 }
 export default ToggleGroup;

package/dist/components/TopNavigation/Logo/Logo.d.ts

@@ -1,10 +1,10 @@
 import { default as React, ReactNode } from 'react';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase, Substitute } from 'styled-components/dist/types';
 export interface LogoProps {
     readonly url: string;
     readonly className?: string;
     readonly children?: ReactNode;
 }
 declare function Logo({ url, className, children }: LogoProps): React.JSX.Element;
-declare const _default: StyledComponent<typeof Logo, any, LogoProps, never>;
+declare const _default: IStyledComponentBase<"web", Substitute<LogoProps, LogoProps>> & string & Omit<typeof Logo, keyof React.Component<any, {}, any>>;
 export default _default;

package/dist/components/TopNavigation/Menu/Menu.d.ts

@@ -15,6 +15,6 @@ declare function Menu({ align, children }: MenuProps): React.JSX.Element;
 declare namespace Menu {
     var Item: typeof MenuItem;
     var SubItem: typeof MenuDropdownSubItem;
-    var Separator: import("styled-components").StyledComponent<"hr", any, {}, never>;
+    var Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>> & string;
 }
 export default Menu;

package/dist/components/TopNavigation/Menu/MenuItemDropdown.d.ts

@@ -1,8 +1,9 @@
 import { default as React, ReactNode, HTMLAttributes } from 'react';
-import { StyledComponent } from 'styled-components';
-export declare const MenuDropdown: StyledComponent<any, any, any, any>;
-export declare const MenuDropdownSeparator: StyledComponent<"hr", any, {}, never>;
-export declare const MenuDropdownLabel: StyledComponent<"label", any, {}, never>;
+import { IStyledComponentBase } from 'styled-components/dist/types';
+import { FastOmit } from 'styled-components';
+export declare const MenuDropdown: any;
+export declare const MenuDropdownSeparator: IStyledComponentBase<"web", FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>> & string;
+export declare const MenuDropdownLabel: IStyledComponentBase<"web", FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
 interface MenuDropdownSubItemProps extends HTMLAttributes<HTMLElement> {
     readonly label: string;
     readonly url?: string;

package/dist/components/TopNavigation/OpenSideNavButton/OpenSideNavButton.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
-import { StyledComponent } from 'styled-components';
+import { IStyledComponentBase, Substitute } from 'styled-components/dist/types';
 export interface OpenSideNavButtonProps {
     readonly className?: string;
     readonly onClick: () => void;
 }
 declare function OpenSideNavButton({ className, onClick }: OpenSideNavButtonProps): React.JSX.Element;
-declare const _default: StyledComponent<typeof OpenSideNavButton, any, OpenSideNavButtonProps, never>;
+declare const _default: IStyledComponentBase<"web", Substitute<OpenSideNavButtonProps, OpenSideNavButtonProps>> & string & Omit<typeof OpenSideNavButton, keyof React.Component<any, {}, any>>;
 export default _default;

package/dist/components/TopNavigation/TopNavigation.d.ts

@@ -4,8 +4,8 @@ export interface TopNavigationProps {
 }
 declare function TopNavigation({ children }: TopNavigationProps): React.JSX.Element;
 declare namespace TopNavigation {
-    var Logo: import("styled-components").StyledComponent<({ url, className, children }: import("./Logo/Logo").LogoProps) => React.JSX.Element, any, import("./Logo/Logo").LogoProps, never>;
+    var Logo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("./Logo/Logo").LogoProps, import("./Logo/Logo").LogoProps>> & string & Omit<({ url, className, children }: import("./Logo/Logo").LogoProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
     var Menu: typeof import("./Menu").Menu;
-    var OpenSideNavButton: import("styled-components").StyledComponent<({ className, onClick }: import("./OpenSideNavButton/OpenSideNavButton").OpenSideNavButtonProps) => React.JSX.Element, any, import("./OpenSideNavButton/OpenSideNavButton").OpenSideNavButtonProps, never>;
+    var OpenSideNavButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("./OpenSideNavButton/OpenSideNavButton").OpenSideNavButtonProps, import("./OpenSideNavButton/OpenSideNavButton").OpenSideNavButtonProps>> & string & Omit<({ className, onClick }: import("./OpenSideNavButton/OpenSideNavButton").OpenSideNavButtonProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 }
 export default TopNavigation;

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,2 +1,4 @@
-import { StyledComponent } from 'styled-components';
-export declare const VisuallyHidden: StyledComponent<"span", any, {}, never>;
+import { IStyledComponentBase } from 'styled-components/dist/types';
+import { FastOmit } from 'styled-components';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+export declare const VisuallyHidden: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;