@norges-domstoler/dds-components 1.2.0 → 2.2.0

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Button: import("react").ForwardRefExoticComponent<{
     size?: import("./Button.types").ButtonSize | undefined;
     label?: string | undefined;
@@ -9,6 +10,6 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
     loading?: boolean | undefined;
     className?: string | undefined;
     style?: import("react").CSSProperties | undefined;
-    Icon?: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
+    Icon?: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
     fullWidth?: boolean | undefined;
 } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,5 +1,5 @@
-import { SvgIconTypeMap } from '@material-ui/core/SvgIcon';
-import { OverridableComponent } from '@material-ui/core/OverridableComponent';
+import { SvgIconTypeMap } from '@mui/material/SvgIcon';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
 import React, { ButtonHTMLAttributes } from 'react';
 export declare type ButtonPurpose = 'primary' | 'secondary' | 'danger';
 export declare type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';

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

@@ -1,8 +1,20 @@
-import { AnchorHTMLAttributes, HTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, HTMLAttributes, RefObject } from 'react';
 export declare type CardColor = 'filledDark' | 'filledLight' | 'strokeDark' | 'strokeLight';
 export declare type CardType = 'info' | 'navigation' | 'expandable';
-export declare type CardProps = {
+export declare type InfoCardProps = {
     color?: CardColor;
-    cardType?: CardType;
-} & (HTMLAttributes<HTMLDivElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
-export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+    cardType: 'info';
+    cardRef?: RefObject<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>;
+export declare type NavigationCardProps = {
+    color?: CardColor;
+    cardType: 'navigation';
+    cardRef?: RefObject<HTMLAnchorElement>;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare type ExpandableCardProps = {
+    color?: CardColor;
+    cardType: 'expandable';
+    cardRef?: RefObject<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>;
+export declare type CardProps = InfoCardProps | NavigationCardProps | ExpandableCardProps;
+export declare const Card: (props: CardProps) => JSX.Element;

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

@@ -3,10 +3,10 @@ import * as CSS from 'csstype';
 export declare type CardAccordionBodyProps = {
     isExpanded?: boolean;
     headerId?: string;
-    paddingTop?: CSS.PaddingTopProperty<string>;
+    paddingTop?: CSS.Property.PaddingTop<string>;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const CardAccordionBody: import("react").ForwardRefExoticComponent<{
     isExpanded?: boolean | undefined;
     headerId?: string | undefined;
-    paddingTop?: string | undefined;
+    paddingTop?: CSS.Property.PaddingTop<string> | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
     error?: boolean | undefined;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CheckboxProps } from './Checkbox.types';
 export declare const CustomCheckbox: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Input: import("styled-components").StyledComponent<"input", any, {

package/dist/components/Datepicker/Datepicker.d.ts

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 import { InputProps } from '../../helpers/Input';
+import * as CSS from 'csstype';
 export declare type DatepickerProps = InputProps;
 export declare const Datepicker: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
-    width?: string | undefined;
+    width?: CSS.Property.Width<string> | undefined;
     tip?: string | undefined;
     errorMessage?: string | undefined;
 } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/DescriptionList/DescriptionListDesc.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import { OverridableComponent } from '@material-ui/core/OverridableComponent';
-import { SvgIconTypeMap } from '@material-ui/core';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { SvgIconTypeMap } from '@mui/material';
 export declare type DescriptionListDescProps = {
     Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
 } & HTMLAttributes<HTMLElement>;

package/dist/components/DescriptionList/DescriptionListGroup.d.ts

@@ -1,8 +1,8 @@
 import { HTMLAttributes } from 'react';
 import * as CSS from 'csstype';
 export declare type DescriptionListGroupProps = {
-    margin?: CSS.MarginProperty<string>;
+    margin?: CSS.Property.Margin<string>;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const DescriptionListGroup: import("react").ForwardRefExoticComponent<{
-    margin?: string | undefined;
+    margin?: CSS.Property.Margin<string> | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Drawer/Drawer.d.ts

@@ -1,11 +1,11 @@
 import { HTMLAttributes, ReactNode, RefObject } from 'react';
-import { WidthProperty, MinWidthProperty, MaxWidthProperty } from 'csstype';
+import { Property } from 'csstype';
 export declare type DrawerSize = 'small' | 'large';
 export declare type DrawerPlacement = 'left' | 'right';
 export declare type WidthProps = {
-    minWidth?: MinWidthProperty<string>;
-    maxWidth?: MaxWidthProperty<string>;
-    width?: WidthProperty<string>;
+    minWidth?: Property.MinWidth<string>;
+    maxWidth?: Property.MaxWidth<string>;
+    width?: Property.Width<string>;
 };
 export declare type DrawerProps = {
     isOpen?: boolean;

package/dist/components/GlobalMessage/GlobalMessage.tokens.d.ts

@@ -21,15 +21,21 @@ export declare const globalMessageTokens: {
     icon: {
         marginRight: string;
         info: {
-            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+                muiName: string;
+            };
             color: string;
         };
         danger: {
-            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+                muiName: string;
+            };
             color: string;
         };
         warning: {
-            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+                muiName: string;
+            };
             color: string;
         };
     };

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

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+export declare type InputMessageType = 'error' | 'tip';
+export declare type InputMessageProps = {
+    message: string;
+    messageType: InputMessageType;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const InputMessage: import("react").ForwardRefExoticComponent<{
+    message: string;
+    messageType: InputMessageType;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/{helpers → components}/InputMessage/InputMessage.tokens.d.ts

@@ -2,7 +2,6 @@ import { CSSObject } from 'styled-components';
 export declare const inputMessageTokens: {
     padding: string;
     base: CSSObject;
-    defaultMaxWidth: string;
     tip: {
         base: CSSObject;
     };

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

@@ -0,0 +1 @@
+export * from './InputMessage';

package/dist/components/InternalHeader/InternalHeader.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { InternalHeaderProps } from './InternalHeader.types';
 export declare const InternalHeader: ({ applicationName, smallScreen, navigationElements, contextMenuElements, currentPageHref, userProps, onCurrentPageChange, ...rest }: InternalHeaderProps) => JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InternalHeaderProps } from './InternalHeader.types';
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type BannerProps = {

package/dist/components/InternalHeader/InternalHeader.types.d.ts

@@ -1,5 +1,5 @@
-import { OverridableComponent } from '@material-ui/core/OverridableComponent';
-import { SvgIconTypeMap } from '@material-ui/core/SvgIcon';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { SvgIconTypeMap } from '@mui/material/SvgIcon';
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
 export declare type NavigationLinkProps = {
     href: string;

package/dist/components/LocalMessage/LocalMessage.d.ts

@@ -7,7 +7,7 @@ export declare type LocalMessageProps = {
     purpose?: LocalMessagePurpose;
     closable?: boolean;
     onClose?: () => void;
-    width?: CSS.WidthProperty<string>;
+    width?: CSS.Property.Width<string>;
     layout?: LocalMessageLayout;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const LocalMessage: import("react").ForwardRefExoticComponent<{
@@ -15,6 +15,6 @@ export declare const LocalMessage: import("react").ForwardRefExoticComponent<{
     purpose?: LocalMessagePurpose | undefined;
     closable?: boolean | undefined;
     onClose?: (() => void) | undefined;
-    width?: string | undefined;
+    width?: CSS.Property.Width<string> | undefined;
     layout?: LocalMessageLayout | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LocalMessage/LocalMessage.tokens.d.ts

@@ -1,8 +1,9 @@
 import { CSSObject } from 'styled-components';
+import * as CSS from 'csstype';
 export declare const localMessageTokens: {
     container: {
         base: CSSObject;
-        defaultWidth: string;
+        defaultWidth: CSS.Property.Width<string>;
         info: {
             base: CSSObject;
         };
@@ -40,27 +41,39 @@ export declare const localMessageTokens: {
     icon: {
         marginRight: string;
         info: {
-            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+                muiName: string;
+            };
             color: string;
         };
         danger: {
-            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+                muiName: string;
+            };
             color: string;
         };
         warning: {
-            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+                muiName: string;
+            };
             color: string;
         };
         success: {
-            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+                muiName: string;
+            };
             color: string;
         };
         tips: {
-            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+                muiName: string;
+            };
             color: string;
         };
         confidential: {
-            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+                muiName: string;
+            };
             color: string;
         };
     };

package/dist/components/OverflowMenu/OverflowMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { OverflowMenuContextItem, OverflowMenuNavItem } from '.';
 declare type ContainerProps = {
     isOpen?: boolean;

package/dist/components/OverflowMenu/OverflowMenu.types.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconTypeMap } from '@material-ui/core';
-import { OverridableComponent } from '@material-ui/core/OverridableComponent';
-import { Placement } from '../../hooks/useReactPopper';
+import { SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { Placement } from '../../hooks/useFloatPosition';
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, RefObject } from 'react';
 export declare type OverflowMenuContextItem = {
     title: string;

package/dist/components/OverflowMenu/OverflowMenuItem.d.ts

@@ -1,6 +1,6 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, Dispatch, SetStateAction } from 'react';
-import { OverridableComponent } from '@material-ui/core/OverridableComponent';
-import { SvgIconTypeMap } from '@material-ui/core/SvgIcon';
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, Dispatch, SetStateAction } from 'react';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { SvgIconTypeMap } from '@mui/material/SvgIcon';
 import { IconWrapper } from '../../helpers/IconWrapper';
 export declare const Span: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Link: import("styled-components").StyledComponent<"a", any, {}, never>;
@@ -14,4 +14,4 @@ export declare type OverflowMenuItemProps = {
     index?: number;
     isMenuClosed?: boolean;
 } & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement> | HTMLAttributes<HTMLSpanElement>);
-export declare const OverflowMenuItem: import("react").ForwardRefExoticComponent<OverflowMenuItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const OverflowMenuItem: React.ForwardRefExoticComponent<OverflowMenuItemProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/Pagination/Pagination.d.ts

@@ -1,5 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { SelectOption } from '../Select';
+export declare type PaginationOption = {
+    label: string;
+    value: number;
+};
 export declare type PaginationProps = {
     itemsAmount: number;
     defaultItemsPerPage?: number;
@@ -7,8 +10,8 @@ export declare type PaginationProps = {
     withPagination?: boolean;
     withCounter?: boolean;
     withSelect?: boolean;
-    selectOptions?: SelectOption[];
-    onSelectOptionChange?: (option: SelectOption | null) => void;
+    selectOptions?: PaginationOption[];
+    onSelectOptionChange?: (option: PaginationOption | null) => void;
     smallScreen?: boolean;
     onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, page: number) => void;
 } & Omit<HTMLAttributes<HTMLElement>, 'onChange'>;
@@ -19,8 +22,8 @@ export declare const Pagination: import("react").ForwardRefExoticComponent<{
     withPagination?: boolean | undefined;
     withCounter?: boolean | undefined;
     withSelect?: boolean | undefined;
-    selectOptions?: SelectOption[] | undefined;
-    onSelectOptionChange?: ((option: SelectOption | null) => void) | undefined;
+    selectOptions?: PaginationOption[] | undefined;
+    onSelectOptionChange?: ((option: PaginationOption | null) => void) | undefined;
     smallScreen?: boolean | undefined;
     onChange?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, page: number) => void) | undefined;
 } & Omit<HTMLAttributes<HTMLElement>, "onChange"> & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Popover/Popover.d.ts

@@ -1,13 +1,13 @@
-import { HTMLAttributes, ReactNode, RefObject } from 'react';
-import { Placement } from '../../hooks';
 import * as CSS from 'csstype';
+import { HTMLAttributes, ReactNode } from 'react';
+import { Placement } from '../../hooks';
 export declare type PopoverSizeProps = {
-    width?: CSS.WidthProperty<string>;
-    height?: CSS.HeightProperty<string>;
-    minWidth?: CSS.MinWidthProperty<string>;
-    minHeight?: CSS.MinHeightProperty<string>;
-    maxWidth?: CSS.MaxWidthProperty<string>;
-    maxHeight?: CSS.MaxHeightProperty<string>;
+    width?: CSS.Property.Width<string>;
+    height?: CSS.Property.Height<string>;
+    minWidth?: CSS.Property.MinWidth<string>;
+    minHeight?: CSS.Property.MinHeight<string>;
+    maxWidth?: CSS.Property.MaxWidth<string>;
+    maxHeight?: CSS.Property.MaxHeight<string>;
 };
 export declare type PopoverProps = {
     title?: string | ReactNode;
@@ -15,7 +15,7 @@ export declare type PopoverProps = {
     onCloseButtonBlur?: () => void;
     isOpen?: boolean;
     withCloseButton?: boolean;
-    anchorElement?: RefObject<HTMLElement>;
+    anchorElement?: HTMLElement;
     placement?: Placement;
     offset?: number;
     sizeProps?: PopoverSizeProps;
@@ -26,7 +26,7 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
     onCloseButtonBlur?: (() => void) | undefined;
     isOpen?: boolean | undefined;
     withCloseButton?: boolean | undefined;
-    anchorElement?: RefObject<HTMLElement> | undefined;
+    anchorElement?: HTMLElement | undefined;
     placement?: Placement | undefined;
     offset?: number | undefined;
     sizeProps?: PopoverSizeProps | undefined;

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const RadioButton: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
     disabled?: boolean | undefined;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RadioButtonProps } from './RadioButton.types';
 export declare const CustomRadioButton: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Input: import("styled-components").StyledComponent<"input", any, {

package/dist/components/RadioButton/RadioButtonGroup.d.ts

@@ -12,7 +12,7 @@ export declare type RadioButtonGroupProps = {
     groupId?: string;
     children?: React.ReactNode;
     required?: boolean;
-    onChange?: (event: ChangeEvent<HTMLInputElement>, value: any) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, value: unknown) => void;
     className?: string;
     style?: React.CSSProperties;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;

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

@@ -2,21 +2,16 @@ import * as CSS from 'csstype';
 import React from 'react';
 import { GroupBase, Props as ReactSelectProps, SelectInstance } from 'react-select';
 export declare function searchFilter(text: string, search: string): boolean;
-export declare type SelectOption = {
-    label: string;
-    value: string | number;
-    data?: unknown;
-};
-export declare type SelectProps<IsMulti extends boolean> = {
+export declare type SelectProps<TOption, IsMulti extends boolean> = {
     label?: string;
     required?: boolean;
     readOnly?: boolean;
     errorMessage?: string;
     tip?: string;
-    width?: CSS.WidthProperty<string>;
+    width?: CSS.Property.Width<string>;
     className?: string;
     style?: React.CSSProperties;
-} & ReactSelectProps<SelectOption, IsMulti, GroupBase<SelectOption>>;
-declare type ForwardRefType<IsMulti extends boolean> = React.ForwardedRef<SelectInstance<SelectOption, IsMulti, GroupBase<SelectOption>>>;
-export declare const Select: <IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<IsMulti>, ref: ForwardRefType<IsMulti>) => JSX.Element;
+} & ReactSelectProps<TOption, IsMulti, GroupBase<TOption>>;
+declare type ForwardRefType<TOption, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<TOption, IsMulti, GroupBase<TOption>>>;
+export declare const Select: <TOption, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<TOption, IsMulti>, ref: ForwardRefType<TOption, IsMulti>) => JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
+/// <reference types="react" />
 import { GroupBase, StylesConfig } from 'react-select';
 import { IconWrapper } from '../../helpers/IconWrapper';
-import { SelectOption } from './Select';
 export declare const prefix = "dds-select";
 export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare type StyledContainerProps = {
@@ -15,5 +15,5 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div",
     width?: string | number | undefined;
 }, never>;
 export declare const SelectedIconWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, {}, never>;
-export declare const CustomStyles: Partial<StylesConfig<SelectOption, boolean, GroupBase<SelectOption>>>;
+export declare const getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
 export {};

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

@@ -1,9 +1,10 @@
 import { CSSObject } from 'styled-components';
+import * as CSS from 'csstype';
 export declare const multiValueContainerMinHeight: string;
 export declare const selectTokens: {
     container: {
         base: CSSObject;
-        defaultWidth: string;
+        defaultWidth: CSS.Property.Width<string>;
         hover: {
             base: CSSObject;
         };

package/dist/components/SkipToContent/SkipToContent.d.ts

@@ -3,10 +3,10 @@ import * as CSS from 'csstype';
 export declare type SkipToContentProps = {
     text?: string;
     href: string;
-    top?: CSS.TopProperty<string | number>;
+    top?: CSS.Property.Top<string | number>;
 } & HTMLAttributes<HTMLAnchorElement>;
 export declare const SkipToContent: import("react").ForwardRefExoticComponent<{
     text?: string | undefined;
     href: string;
-    top?: CSS.TopProperty<string | number> | undefined;
+    top?: CSS.Property.Top<string | number> | undefined;
 } & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/SkipToContent/SkipToContent.tokens.d.ts

@@ -2,6 +2,12 @@ import { CSSObject } from 'styled-components';
 export declare const skipToContentTokens: {
     link: {
         base: CSSObject;
+        hover: {
+            base: CSSObject;
+        };
+        focus: {
+            base: CSSObject;
+        };
         focusOutline: {
             color: string;
             width: string;

package/dist/components/Spinner/Spinner.d.ts

@@ -3,6 +3,6 @@ import * as CSS from 'csstype';
 import { TextColor } from '../Typography';
 export declare type SpinnerProps = {
     color?: TextColor | string;
-    size?: CSS.WidthProperty<string>;
+    size?: CSS.Property.Width<string>;
 } & HTMLAttributes<SVGElement>;
 export declare function Spinner({ size, color, ...rest }: SpinnerProps): JSX.Element;

package/dist/components/TextInput/TextInput.d.ts

@@ -5,7 +5,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     style?: React.CSSProperties | undefined;
 } & {
     label?: string | undefined;
-    width?: string | undefined;
+    width?: import("csstype").Property.Width<string> | undefined;
     tip?: string | undefined;
     errorMessage?: string | undefined;
 } & React.InputHTMLAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TextInputProps } from './TextInput.types';
 export declare const TextArea: import("styled-components").StyledComponent<"textarea", any, Pick<import("../../helpers/Input").InputProps, "label" | "readOnly" | "disabled"> & {
     hasErrorMessage: boolean;

package/dist/components/TextInput/TextInput.tokens.d.ts

@@ -1,4 +1,5 @@
 import { CSSObject } from 'styled-components';
+import * as CSS from 'csstype';
 export declare const textInputTokens: {
     general: {
         input: {
@@ -49,7 +50,7 @@ export declare const textInputTokens: {
         };
     };
     wrapper: {
-        defaultWidth: string;
+        defaultWidth: CSS.Property.Width<string>;
     };
     container: {
         multiline: {

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,11 @@
+import { SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { InputHTMLAttributes } from 'react';
+export declare type ToggleButtonProps = {
+    label?: string;
+    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+} & InputHTMLAttributes<HTMLInputElement>;
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<{
+    label?: string | undefined;
+    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
+} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ToggleButton/ToggleButton.tokens.d.ts

@@ -0,0 +1,22 @@
+import { CSSObject } from 'styled-components';
+export declare const toggleButtonTokens: {
+    base: CSSObject;
+    hover: {
+        base: CSSObject;
+    };
+    focus: {
+        base: CSSObject;
+    };
+    checked: {
+        base: CSSObject;
+        hover: {
+            base: CSSObject;
+        };
+    };
+    group: {
+        base: CSSObject;
+    };
+    container: {
+        base: CSSObject;
+    };
+};

package/dist/components/ToggleButton/ToggleButtonGroup.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+declare type Direction = 'row' | 'column';
+export declare type ToggleButtonGroupProps = {
+    direction?: Direction;
+    label?: string;
+    labelId?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ToggleButtonGroup: ({ children, direction, label, labelId, ...props }: ToggleButtonGroupProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './ToggleButton';
+export * from './ToggleButtonGroup';

package/dist/components/Tooltip/Tooltip.tokens.d.ts

@@ -11,11 +11,4 @@ export declare const tooltipTokens: {
             fill: string;
         };
     };
-    arrowPlacementTemplate: {
-        top: string;
-        bottom: string;
-        left: string;
-        right: string;
-    };
-    offset: number;
 };

package/dist/helpers/Chevron/AnimatedChevronUpDown.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import * as CSS from 'csstype';
 declare type SvgChevronProps = {
     isUp?: boolean;
-    height?: CSS.HeightProperty<string>;
-    width?: CSS.WidthProperty<string>;
+    height?: CSS.Property.Height<string>;
+    width?: CSS.Property.Width<string>;
 };
 export declare const AnimatedChevronUpDown: ({ isUp, height, width }: SvgChevronProps) => JSX.Element;
 export {};