@nulogy/components 11.0.0-beta.4 → 11.0.0

package/dist/src/Select/Select.d.ts

@@ -1,33 +1,32 @@
 import React, { ReactNode } from "react";
-import Select from "react-select/base";
-import { PropsValue } from "react-select";
-import type { GroupBase, Props, StylesConfig } from "react-select";
-import { StyledProps } from "../StyledProps";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
-export type NDSOptionValue = string | number | boolean | null;
-export interface NDSOption {
-    label: ReactNode;
-    value: NDSOptionValue;
+import { GroupBase } from "react-windowed-select";
+import type { Props as SelectProps } from "react-select";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+interface WindowedSelectProps extends SelectProps {
+    windowThreshold?: number;
+}
+interface NDSOptionType {
+    label: string;
+    value: unknown;
 }
-interface CustomProps<IsMulti extends boolean, Group extends GroupBase<NDSOption>> extends StyledProps {
-    autocomplete?: Props<NDSOption, IsMulti, Group>["isSearchable"];
+interface CustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
+    autocomplete?: SelectProps<Option, IsMulti, Group>["isSearchable"];
     labelText?: string;
-    size?: ComponentSize;
     requirementText?: string;
     helpText?: ReactNode;
-    disabled?: Props<NDSOption, IsMulti, Group>["isDisabled"];
+    disabled?: SelectProps<Option, IsMulti, Group>["isDisabled"];
     errorMessage?: string;
     errorList?: string[];
-    initialIsOpen?: Props<NDSOption, IsMulti, Group>["defaultMenuIsOpen"];
-    multiselect?: Props<NDSOption, IsMulti, Group>["isMulti"];
+    initialIsOpen?: SelectProps<Option, IsMulti, Group>["defaultMenuIsOpen"];
+    multiselect?: SelectProps<Option, IsMulti, Group>["isMulti"];
     maxHeight?: string;
-    defaultValue?: PropsValue<NDSOptionValue>;
-    value?: PropsValue<NDSOptionValue>;
-    options: NDSOption[];
-    onChange?: (newValue: PropsValue<NDSOptionValue>) => void;
-    windowThreshold?: number;
-    styles?: (selectStyles: StylesConfig<NDSOption, IsMulti, Group>) => StylesConfig<NDSOption, IsMulti, Group>;
+    variant?: ComponentVariant;
+    error?: boolean;
+    options: NDSOptionType[];
+    onChange?: (newValue: unknown) => void;
+    [key: string]: any;
 }
-export type NDSSelectProps<IsMulti extends boolean = boolean, Group extends GroupBase<NDSOption> = GroupBase<NDSOption>> = Omit<Props<NDSOption, IsMulti, Group>, keyof CustomProps<IsMulti, Group> | "isSearchable" | "isDisabled" | "defaultMenuIsOpen" | "isMulti" | "styles"> & CustomProps<IsMulti, Group>;
-declare const NDSSelect: React.ForwardRefExoticComponent<Omit<Props<NDSOption, boolean, GroupBase<NDSOption>>, "isDisabled" | "isMulti" | "isSearchable" | "defaultMenuIsOpen" | keyof CustomProps<IsMulti, Group>> & CustomProps<boolean, GroupBase<NDSOption>> & React.RefAttributes<Select<NDSOption, boolean, GroupBase<NDSOption>>>>;
-export default NDSSelect;
+export type NDSSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<WindowedSelectProps, "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue" | "options" | "onChange"> & CustomProps<Option, IsMulti, Group>;
+declare const ReactSelect: React.ForwardRefExoticComponent<Omit<Omit<WindowedSelectProps, "isDisabled" | "isMulti" | "isSearchable" | "onChange" | "options" | "defaultMenuIsOpen" | "defaultInputValue"> & CustomProps<unknown, boolean, GroupBase<unknown>>, "ref"> & React.RefAttributes<unknown>>;
+export declare const getOption: (options: NDSOptionType[], value: unknown) => unknown;
+export default ReactSelect;

package/dist/src/Select/Select.story.d.ts

@@ -4,8 +4,6 @@ declare const _default: {
 };
 export default _default;
 export declare const _Select: () => React.JSX.Element;
-export declare const WithDifferentSizes: () => React.JSX.Element;
-export declare const WithStyledProps: () => React.JSX.Element;
 export declare const WithABlankValue: {
     (): React.JSX.Element;
     story: {
@@ -104,6 +102,11 @@ export declare const WithCustomOptionComponent: {
         name: string;
     };
 };
-export declare const UsingRefToControlFocus: () => React.JSX.Element;
+export declare const UsingRefToControlFocus: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
 export declare const WithTopMenuPlacement: () => React.JSX.Element;
-export declare const WithCustomStyles: () => React.JSX.Element;
+export declare const WithCustomProps: () => React.JSX.Element;

package/dist/src/Select/SelectComponents.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
-import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps, GroupBase } from "react-select";
-import { NDSOption } from "./Select";
-export declare function SelectControl<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectMultiValue<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectClearIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectDropdownIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectMenu<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectContainer<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectInput<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare const SelectControl: (props: any) => React.JSX.Element;
+export declare const SelectMultiValue: (props: any) => React.JSX.Element;
+export declare const SelectClearIndicator: (props: any) => React.JSX.Element;
+export declare const SelectDropdownIndicator: (props: any) => React.JSX.Element;
+export declare const SelectMenu: (props: any) => React.JSX.Element;
+export declare const SelectContainer: (props: any) => React.JSX.Element;
+export declare const SelectInput: (props: any) => React.JSX.Element;

package/dist/src/Select/SelectOption.d.ts

@@ -1,15 +1,14 @@
 import React from "react";
-import { GroupBase, OptionProps } from "react-select";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
-import { NDSOption } from "./Select";
-type StyledOptionProps = {
+import { OptionProps } from "react-windowed-select";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+type SelectOptionProps = {
     isSelected: boolean;
     isFocused: boolean;
-    size: ComponentSize;
+    variant: ComponentVariant;
 };
-export declare const StyledOption: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledOptionProps, never>;
-export type SelectOptionProps<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = OptionProps<Option, IsMulti, Group> & {
-    size?: ComponentSize;
-};
-export declare function SelectOption<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectOptionProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare const StyledOption: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SelectOptionProps, never>;
+interface CustomOptionProps extends OptionProps {
+    variant?: ComponentVariant;
+}
+export declare function SelectOption(props: CustomOptionProps): React.JSX.Element;
 export {};

package/dist/src/Select/customReactSelectStyles.d.ts

@@ -2,7 +2,7 @@ import type { CSSObject } from "styled-components";
 import type { GroupBase, MenuPlacement, StylesConfig } from "react-select";
 import type { CSSProperties } from "react";
 import type { DefaultNDSThemeType } from "../theme.type";
-import type { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 type Placement = "top" | "bottom";
 export declare function getControlBorderRadius({ border, isMenuOpen, menuLength, menuPlacement, theme, }: {
     border: Placement;
@@ -19,15 +19,15 @@ export declare function getMenuBorderRadius({ border, menuPlacement, theme, }: {
     radius: string | number;
     style: CSSProperties["borderBottomStyle"];
 };
-type SizeConfig = {
-    [key in ComponentSize]: CSSObject;
+type VariantConfig = {
+    [key in ComponentVariant]: CSSObject;
 };
-export declare function stylesForSize(config: SizeConfig, size: ComponentSize): CSSObject;
-export declare const showIndicatorSeparator: ({ isMulti, hasValue, hasDefaultOptions }: {
-    isMulti: any;
+export declare function stylesForVariant(config: VariantConfig, variant?: ComponentVariant): CSSObject;
+export declare function showIndicatorSeparator({ hasValue, isClearable, isMulti }: {
     hasValue: any;
-    hasDefaultOptions: any;
-}) => any;
+    isClearable: any;
+    isMulti: any;
+}): any;
 interface Args {
     theme: DefaultNDSThemeType;
     [key: string]: any;

package/dist/src/Select/index.d.ts

@@ -1,3 +1,3 @@
 export { SelectOption } from "./SelectOption";
-export { default as Select, type NDSOption, type NDSOptionValue } from "./Select";
+export { default as Select } from "./Select";
 export * from "./SelectComponents";

package/dist/src/Summary/Summary.d.ts

@@ -3,5 +3,5 @@ import { BoxProps } from "../Box/Box";
 type SummaryProps = Omit<BoxProps, "as"> & {
     breakpoint?: number | string;
 };
-declare const Summary: React.FC<SummaryProps>;
+declare const Summary: React.FC<React.PropsWithChildren<SummaryProps>>;
 export default Summary;

package/dist/src/Summary/SummaryContext.d.ts

@@ -3,5 +3,5 @@ type SummaryContextValue = {
     breakpoint: number;
 };
 export declare function useSummaryContext(): SummaryContextValue;
-export declare const SummaryContextProvider: React.FC<SummaryContextValue>;
+export declare const SummaryContextProvider: React.FC<React.PropsWithChildren<SummaryContextValue>>;
 export {};

package/dist/src/Summary/SummaryItem.d.ts

@@ -4,5 +4,5 @@ type SummaryItemProps = Omit<FlexProps, "as"> & {
     value: number | string;
     status: React.ReactNode;
 };
-declare const SummaryItem: React.FC<SummaryItemProps>;
+declare const SummaryItem: React.FC<React.PropsWithChildren<SummaryItemProps>>;
 export default SummaryItem;

package/dist/src/Switcher/Switch.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 export type SwitchProps = Omit<React.ComponentPropsWithRef<"button">, "value"> & {
     value?: string;
     selected?: boolean;
-    size?: ComponentSize;
+    variant?: ComponentVariant;
 };
 declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default Switch;

package/dist/src/Switcher/Switcher.d.ts

@@ -1,11 +1,11 @@
 import React, { ReactElement } from "react";
-import type { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import type { SwitchProps } from "./Switch";
 type SwitcherProps = {
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     children?: ReactElement<SwitchProps>[];
     selected?: string;
     onChange?: (value: string) => void;
 };
-declare const Switcher: React.FC<SwitcherProps>;
+declare const Switcher: React.FC<React.PropsWithChildren<SwitcherProps>>;
 export default Switcher;

package/dist/src/Switcher/Switcher.story.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 export declare const WithSelectedValue: () => React.JSX.Element;
-export declare const WithDifferentSizes: () => React.JSX.Element;
 export declare const WithOtherInteractiveElements: () => React.JSX.Element;
 export declare const WithContent: () => React.JSX.Element;
 declare const _default: {

package/dist/src/Table/BaseTable.d.ts

@@ -17,21 +17,5 @@ export type BaseTableProps<ColumnMetaData> = {
     onMouseEnter?: any;
     onMouseLeave?: any;
 };
-declare function BaseTable<ColumnMetaData>({ columns, rows, noRowsContent, keyField, id, loading, footerRows, rowHovers, compact, className, stickyHeader, onRowMouseEnter, onRowMouseLeave, ...props }: BaseTableProps<ColumnMetaData>): React.JSX.Element;
-declare namespace BaseTable {
-    var propTypes: any;
-    var defaultProps: {
-        noRowsContent: string;
-        keyField: string;
-        id: any;
-        loading: boolean;
-        footerRows: any[];
-        rowHovers: boolean;
-        compact: boolean;
-        className: any;
-        stickyHeader: boolean;
-        onRowMouseEnter: () => void;
-        onRowMouseLeave: () => void;
-    };
-}
+declare function BaseTable<ColumnMetaData>({ noRowsContent, keyField, loading, footerRows, rowHovers, compact, stickyHeader, onRowMouseEnter, onRowMouseLeave, columns, rows, id, className, ...props }: BaseTableProps<ColumnMetaData>): React.JSX.Element;
 export default BaseTable;

package/dist/src/Table/SortingColumnHeader.d.ts

@@ -1,25 +1,10 @@
 import React from "react";
-import PropTypes from "prop-types";
-declare const SortingColumnHeader: {
-    ({ onChange, label, ascending, active, ariaLabel }: {
-        onChange: any;
-        label: any;
-        ascending: any;
-        active: any;
-        ariaLabel: any;
-    }): React.JSX.Element;
-    propTypes: {
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        ariaLabel: PropTypes.Requireable<string>;
-        label: PropTypes.Requireable<string>;
-        ascending: PropTypes.Requireable<boolean>;
-        active: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        ariaLabel: any;
-        label: any;
-        ascending: boolean;
-        active: boolean;
-    };
-};
+interface SortingColumnHeaderProps {
+    onChange?: React.MouseEventHandler<HTMLButtonElement>;
+    ariaLabel?: string;
+    label?: string;
+    ascending?: boolean;
+    active?: boolean;
+}
+declare function SortingColumnHeader({ onChange, label, ariaLabel, ascending, active, }: SortingColumnHeaderProps): React.JSX.Element;
 export default SortingColumnHeader;

package/dist/src/Table/StatefulTable.d.ts

@@ -26,14 +26,6 @@ type StatefulTableState = {
 };
 declare class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnMetaData>, StatefulTableState> {
     static defaultProps: {
-        hasSelectableRows: boolean;
-        selectedRows: any[];
-        isHeaderSelected: boolean;
-        onRowExpansionChange: () => void;
-        selectAllAriaLabel: any;
-        deselectAllAriaLabel: any;
-        paginationCss: any;
-        paginationProps: {};
         noRowsContent: string;
         keyField: string;
         id: any;
@@ -45,6 +37,14 @@ declare class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps
         stickyHeader: boolean;
         onRowMouseEnter: () => void;
         onRowMouseLeave: () => void;
+        hasSelectableRows: boolean;
+        selectedRows: any[];
+        isHeaderSelected: boolean;
+        onRowExpansionChange: () => void;
+        selectAllAriaLabel: any;
+        deselectAllAriaLabel: any;
+        paginationCss: any;
+        paginationProps: {};
     };
     constructor(props: any);
     static getDerivedStateFromProps(nextProps: any, prevState: any): {

package/dist/src/Table/StyledTh.d.ts

@@ -1,8 +1,6 @@
-import { DefaultNDSThemeType } from "../theme.type";
 type StyledThProps = {
     width?: any;
     compact?: boolean;
-    theme?: DefaultNDSThemeType;
     sticky?: any;
 };
 declare const StyledTh: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, StyledThProps, never>;

package/dist/src/Table/Table.d.ts

@@ -1,33 +1,13 @@
 import React from "react";
+import SortingColumnHeader from "./SortingColumnHeader";
 import { StatefulTableProps } from "./StatefulTable";
 import { ColumnType, RowType, CellInfoType } from "./Table.types";
-export type TableProps<ColumnMetadata> = StatefulTableProps<ColumnMetadata>;
-export type TableColumnType<ColumnMetadata> = ColumnType<ColumnMetadata>;
+export type TableProps<ColumnMetadata = unknown> = StatefulTableProps<ColumnMetadata>;
+export type TableColumnType<ColumnMetadata = unknown> = ColumnType<ColumnMetadata>;
 export type TableRowType = RowType;
-export type TableCellInfoType<ColumnMetadata> = CellInfoType<ColumnMetadata>;
+export type TableCellInfoType<ColumnMetadata = unknown> = CellInfoType<ColumnMetadata>;
 declare function Table<ColumnMetadata>({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }: TableProps<ColumnMetadata>): React.JSX.Element;
 declare namespace Table {
-    var SortingHeader: {
-        ({ onChange, label, ascending, active, ariaLabel }: {
-            onChange: any;
-            label: any;
-            ascending: any;
-            active: any;
-            ariaLabel: any;
-        }): React.JSX.Element;
-        propTypes: {
-            onChange: import("prop-types").Validator<(...args: any[]) => any>;
-            ariaLabel: import("prop-types").Requireable<string>;
-            label: import("prop-types").Requireable<string>;
-            ascending: import("prop-types").Requireable<boolean>;
-            active: import("prop-types").Requireable<boolean>;
-        };
-        defaultProps: {
-            ariaLabel: any;
-            label: any;
-            ascending: boolean;
-            active: boolean;
-        };
-    };
+    var SortingHeader: typeof SortingColumnHeader;
 }
 export default Table;

package/dist/src/Table/Table.types.d.ts

@@ -1,5 +1,4 @@
 import type { Key } from "react";
-import PropTypes from "prop-types";
 export type RowType = any;
 export interface CellInfoType<ColumnMetadata> {
     cellData: any;
@@ -24,30 +23,4 @@ export type ColumnType<ColumnMetadata> = {
     key?: never | undefined;
 });
 export type Columns<ColumnMetadata> = ColumnType<ColumnMetadata>[];
-export declare const columnPropType: PropTypes.Requireable<PropTypes.InferProps<{
-    align: PropTypes.Requireable<string>;
-    label: PropTypes.Requireable<string>;
-    dataKey: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
-    key: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
-    cellFormatter: PropTypes.Requireable<(...args: any[]) => any>;
-    cellRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-    headerRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-    width: PropTypes.Requireable<string>;
-}>>;
-export declare const rowPropType: PropTypes.Requireable<{
-    [x: string]: NonNullable<PropTypes.ReactNodeLike>;
-}>;
-export declare const columnsPropType: PropTypes.Requireable<PropTypes.InferProps<{
-    align: PropTypes.Requireable<string>;
-    label: PropTypes.Requireable<string>;
-    dataKey: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
-    key: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
-    cellFormatter: PropTypes.Requireable<(...args: any[]) => any>;
-    cellRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-    headerRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-    width: PropTypes.Requireable<string>;
-}>[]>;
-export declare const rowsPropType: PropTypes.Requireable<{
-    [x: string]: NonNullable<PropTypes.ReactNodeLike>;
-}[]>;
 export {};

package/dist/src/Table/TableCell.d.ts

@@ -3,8 +3,8 @@ type TableCellProps = {
     column?: any;
     row?: any;
     colSpan?: number;
-    cellData?: object | React.ReactNode | boolean;
+    cellData?: Record<string, unknown> | React.ReactNode | boolean;
     compact?: boolean;
 };
-declare const TableCell: React.FC<TableCellProps>;
+declare const TableCell: ({ column, row, cellData, colSpan, compact }: TableCellProps) => React.JSX.Element;
 export default TableCell;

package/dist/src/Table/TableFoot.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { RowType, Columns } from "./Table.types";
 declare function TableFoot<ColumnMetadata>({ columns, rows, keyField, loading, compact, }: {
     columns: Columns<ColumnMetadata>;
@@ -8,29 +7,4 @@ declare function TableFoot<ColumnMetadata>({ columns, rows, keyField, loading, c
     loading?: boolean;
     compact?: boolean;
 }): React.JSX.Element;
-declare namespace TableFoot {
-    var propTypes: {
-        columns: PropTypes.Validator<PropTypes.InferProps<{
-            align: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-            dataKey: PropTypes.Requireable<PropTypes.Requireable<number> | PropTypes.Requireable<string>>;
-            key: PropTypes.Requireable<PropTypes.Requireable<number> | PropTypes.Requireable<string>>;
-            cellFormatter: PropTypes.Requireable<(...args: any[]) => any>;
-            cellRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-            headerRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-            width: PropTypes.Requireable<string>;
-        }>[]>;
-        rows: PropTypes.Validator<{
-            [x: string]: NonNullable<PropTypes.ReactNodeLike>;
-        }[]>;
-        keyField: PropTypes.Requireable<string>;
-        loading: PropTypes.Requireable<boolean>;
-        compact: PropTypes.Requireable<boolean>;
-    };
-    var defaultProps: {
-        keyField: string;
-        loading: boolean;
-        compact: boolean;
-    };
-}
 export default TableFoot;

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

@@ -1,12 +1,12 @@
 import React from "react";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 type TabButtonProps = React.ComponentPropsWithRef<"button"> & {
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     selected?: boolean;
     fullWidth?: boolean;
 };
-type TabProps = TabButtonProps & {
+export type TabProps = TabButtonProps & {
     label?: React.ReactNode;
 };
-declare const Tab: React.FC<TabProps>;
+declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default Tab;

package/dist/src/Tabs/TabContainer.d.ts

@@ -1,2 +1,2 @@
-declare const TabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps, never>;
+declare const TabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box").BoxProps, never>;
 export default TabContainer;

package/dist/src/Tabs/TabScrollIndicator.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
+type Side = "left" | "right";
 type TabScrollIndicatorProps = {
-    onClick?: (...args: any[]) => any;
-    side?: "left" | "right";
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    side?: Side;
     width?: string | number;
     ariaLabelLeft?: string;
     ariaLabelRight?: string;
 };
-declare const TabScrollIndicator: React.FC<TabScrollIndicatorProps>;
+declare const TabScrollIndicator: React.FC<React.PropsWithChildren<TabScrollIndicatorProps>>;
 export default TabScrollIndicator;

package/dist/src/Tabs/Tabs.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 export type TabsProps = {
     className?: string;
     selectedIndex?: number;
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     defaultSelectedIndex?: number;
     renderTabContentOnlyWhenSelected?: boolean;
     fitted?: boolean;
@@ -14,7 +14,8 @@ export type TabsState = {
 };
 declare class Tabs extends React.Component<TabsProps, TabsState> {
     static contextType: React.Context<{
-        size: ComponentSize;
+        variant: ComponentVariant;
+        children?: React.ReactNode;
     }>;
     constructor(props: any);
     getSelectedIndex(): any;

package/dist/src/Tabs/Tabs.story.d.ts

@@ -53,4 +53,3 @@ export declare const WithContentLoadedOnSelection: {
     };
 };
 export declare const WithConditionallyRenderedTabs: () => React.JSX.Element;
-export declare const WithDifferentSizes: () => React.JSX.Element;

package/dist/src/Textarea/StyledTextarea.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { DefaultNDSThemeType } from "../theme.type";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 export type StyledTextareaProps = React.ComponentPropsWithRef<"textarea"> & SpaceProps & {
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     theme?: DefaultNDSThemeType;
     errorMessage?: string;
     errorList?: string[];
@@ -14,7 +14,7 @@ export type StyledTextareaProps = React.ComponentPropsWithRef<"textarea"> & Spac
 declare const StyledTextarea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     ref?: React.Ref<HTMLTextAreaElement>;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     theme?: DefaultNDSThemeType;
     errorMessage?: string;
     errorList?: string[];

package/dist/src/Textarea/Textarea.story.d.ts

@@ -12,4 +12,3 @@ export declare const WithErrorList: () => React.JSX.Element;
 export declare const WithCustomNumberOfRows: () => React.JSX.Element;
 export declare const WithCustomId: () => React.JSX.Element;
 export declare const UsingRefToControlFocus: () => React.JSX.Element;
-export declare const WithDifferentSizes: () => React.JSX.Element;

package/dist/src/TimePicker/TimePicker.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 type TimePickerProps = SpaceProps & {
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     disabled?: boolean;
     value?: string;
     timeFormat?: string;
@@ -38,5 +38,5 @@ export declare const getTimeOptions: (interval: any, timeFormat: any, minTime: a
     value: string;
     label: string;
 }[];
-declare const TimePicker: React.FC<TimePickerProps>;
+declare const TimePicker: React.FC<React.PropsWithChildren<TimePickerProps>>;
 export default TimePicker;

package/dist/src/TimePicker/TimePicker.story.d.ts

@@ -63,4 +63,3 @@ export declare const UsingRefToControlFocus: {
         name: string;
     };
 };
-export declare const WithDifferentSizes: () => React.JSX.Element;

package/dist/src/TimePicker/TimePickerOption.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 declare const TimePickerOption: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, React.ClassAttributes<HTMLLIElement> & React.LiHTMLAttributes<HTMLLIElement> & {
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     isSelected: boolean;
     isFocused: boolean;
     isClosest: boolean;

package/dist/src/TimeRange/TimeRange.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 declare const TimeRange: React.ForwardRefExoticComponent<Omit<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     timeFormat?: string;
     onRangeChange?: Function;
     onStartTimeChange?: Function;

package/dist/src/Toast/Toast.d.ts

@@ -32,15 +32,5 @@ export declare const toastAnimationConfig: {
         };
     };
 };
-export declare const Toast: {
-    ({ triggered, onHide, onShow, isCloseable, children, showDuration, onHidden, zIndex, ...props }: ToastProps): React.JSX.Element;
-    defaultProps: {
-        triggered: boolean;
-        isCloseable: boolean;
-        showDuration: number;
-        onShow: () => void;
-        onHide: () => void;
-        onHidden: () => void;
-    };
-};
+export declare const Toast: ({ triggered, isCloseable, showDuration, onHide, onShow, children, onHidden, zIndex, ...props }: ToastProps) => React.JSX.Element;
 export default Toast;