@norges-domstoler/dds-components 13.2.0 → 13.4.0

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

@@ -1,51 +1,52 @@
-import { RadioButtonProps } from '.';
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required">, "className" | "id"> & {
-        label?: string | undefined;
-        disabled?: boolean | undefined;
-        error?: boolean | undefined;
-    } & {
-        'aria-describedby'?: string | undefined;
-        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
-        name?: string | undefined;
-        value?: string | number | readonly string[] | undefined;
-        checked?: boolean | undefined;
-        readOnly?: boolean | undefined;
-        required?: boolean | undefined;
-    } & {
-        children?: import("react").ReactNode;
-    } & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required"> | undefined;
-    } & import("react").RefAttributes<HTMLInputElement>>;
-    argTypes: {
-        label: {
-            control: {
-                type: string;
-            };
-        };
-        error: {
-            control: {
-                type: string;
-            };
-        };
-        disabled: {
-            control: {
-                type: string;
-            };
-        };
-        readOnly: {
-            control: {
-                type: string;
-            };
-        };
-        className: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Overview: (args: RadioButtonProps) => JSX.Element;
-export declare const Default: (args: RadioButtonProps) => JSX.Element;
+/// <reference types="react" />
+import { RadioButtonProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required">, "id" | "className"> & {
+        label?: string | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+    } & {
+        'aria-describedby'?: string | undefined;
+        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+        name?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
+        checked?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        required?: boolean | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & {
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required"> | undefined;
+    } & import("react").RefAttributes<HTMLInputElement>>;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        error: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        className: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Default: (args: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,12 @@
-import { InputHTMLAttributes } from 'react';
-import { BaseComponentPropsWithChildren } from '../../types';
-type PickedInputHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'readOnly' | 'checked' | 'value' | 'required' | 'onChange' | 'aria-describedby'>;
-export type RadioButtonProps = BaseComponentPropsWithChildren<HTMLInputElement, {
-    /**Ledetekst for alternativet. */
-    label?: string;
-    /**Spesifiserer om input er disabled. */
-    disabled?: boolean;
-    /**Indikerer valideringsfeil. Påvirker styling. */
-    error?: boolean;
-} & PickedInputHTMLAttributes, Omit<InputHTMLAttributes<HTMLInputElement>, keyof PickedInputHTMLAttributes>>;
-export {};
+import { InputHTMLAttributes } from 'react';
+import { BaseComponentPropsWithChildren } from '../../types';
+type PickedInputHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'readOnly' | 'checked' | 'value' | 'required' | 'onChange' | 'aria-describedby'>;
+export type RadioButtonProps = BaseComponentPropsWithChildren<HTMLInputElement, {
+    /**Ledetekst for alternativet. */
+    label?: string;
+    /**Spesifiserer om input er disabled. */
+    disabled?: boolean;
+    /**Indikerer valideringsfeil. Påvirker styling. */
+    error?: boolean;
+} & PickedInputHTMLAttributes, Omit<InputHTMLAttributes<HTMLInputElement>, keyof PickedInputHTMLAttributes>>;
+export {};

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

@@ -1,56 +1,56 @@
-import { ChangeEvent, HTMLAttributes, ReactElement, Ref } from 'react';
-import { BaseComponentPropsWithChildren, Direction } from '../../types';
-export type RadioButtonGroupProps<T extends string | number> = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /** Gir alle barna `name` prop.*/
-    name?: string;
-    /**Ledetekst for hele gruppen. */
-    label?: string;
-    /**Funksjonen for onChange-event for barna. */
-    onChange?: (event: ChangeEvent<HTMLInputElement>, value: T | undefined) => void;
-    /**Legger en markør (*) bak label som indikerer at input er påkrevd. Gjør alle barna påkrevd ved å gi dem `required` prop. */
-    required?: boolean;
-    /**Meldingen som vises ved valideringsfeil. Gir alle barna error prop. */
-    errorMessage?: string;
-    /**Hjelpetekst for gruppen. */
-    tip?: string;
-    /**Gir alle barna `disabled` prop. */
-    disabled?: boolean;
-    /**Gir alle barna `readOnly` prop */
-    readOnly?: boolean;
-    /**Retningen radioknappene skal gjengis i. */
-    direction?: Direction;
-    /**Default verdi - en `<RadioButton />` blir forhåndsvalgt. **OBS!** brukes kun når brukeren ikke skal fylle ut selv. */
-    value?: T | undefined;
-    /**custom id for for gruppen, knytter `label` til gruppen via `aria-label`. */
-    groupId?: string;
-}, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>>;
-export declare const RadioButtonGroup: <T extends string | number = string>(props: Pick<Omit<HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
-    /** Gir alle barna `name` prop.*/
-    name?: string | undefined;
-    /**Ledetekst for hele gruppen. */
-    label?: string | undefined;
-    /**Funksjonen for onChange-event for barna. */
-    onChange?: ((event: ChangeEvent<HTMLInputElement>, value: T | undefined) => void) | undefined;
-    /**Legger en markør (*) bak label som indikerer at input er påkrevd. Gjør alle barna påkrevd ved å gi dem `required` prop. */
-    required?: boolean | undefined;
-    /**Meldingen som vises ved valideringsfeil. Gir alle barna error prop. */
-    errorMessage?: string | undefined;
-    /**Hjelpetekst for gruppen. */
-    tip?: string | undefined;
-    /**Gir alle barna `disabled` prop. */
-    disabled?: boolean | undefined;
-    /**Gir alle barna `readOnly` prop */
-    readOnly?: boolean | undefined;
-    /**Retningen radioknappene skal gjengis i. */
-    direction?: Direction | undefined;
-    /**Default verdi - en `<RadioButton />` blir forhåndsvalgt. **OBS!** brukes kun når brukeren ikke skal fylle ut selv. */
-    value?: T | undefined;
-    /**custom id for for gruppen, knytter `label` til gruppen via `aria-label`. */
-    groupId?: string | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & {
-    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
-} & {
-    ref?: Ref<HTMLDivElement> | undefined;
-}) => ReactElement;
+import { ChangeEvent, HTMLAttributes, ReactElement, Ref } from 'react';
+import { BaseComponentPropsWithChildren, Direction } from '../../types';
+export type RadioButtonGroupProps<T extends string | number> = BaseComponentPropsWithChildren<HTMLDivElement, {
+    /** Gir alle barna `name` prop.*/
+    name?: string;
+    /**Ledetekst for hele gruppen. */
+    label?: string;
+    /**Funksjonen for onChange-event for barna. */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, value: T | undefined) => void;
+    /**Legger en markør (*) bak label som indikerer at input er påkrevd. Gjør alle barna påkrevd ved å gi dem `required` prop. */
+    required?: boolean;
+    /**Meldingen som vises ved valideringsfeil. Gir alle barna error prop. */
+    errorMessage?: string;
+    /**Hjelpetekst for gruppen. */
+    tip?: string;
+    /**Gir alle barna `disabled` prop. */
+    disabled?: boolean;
+    /**Gir alle barna `readOnly` prop */
+    readOnly?: boolean;
+    /**Retningen radioknappene skal gjengis i. */
+    direction?: Direction;
+    /**Default verdi - en `<RadioButton />` blir forhåndsvalgt. **OBS!** brukes kun når brukeren ikke skal fylle ut selv. */
+    value?: T | undefined;
+    /**custom id for for gruppen, knytter `label` til gruppen via `aria-label`. */
+    groupId?: string;
+}, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>>;
+export declare const RadioButtonGroup: <T extends string | number = string>(props: Pick<Omit<HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
+    /** Gir alle barna `name` prop.*/
+    name?: string | undefined;
+    /**Ledetekst for hele gruppen. */
+    label?: string | undefined;
+    /**Funksjonen for onChange-event for barna. */
+    onChange?: ((event: ChangeEvent<HTMLInputElement>, value: T | undefined) => void) | undefined;
+    /**Legger en markør (*) bak label som indikerer at input er påkrevd. Gjør alle barna påkrevd ved å gi dem `required` prop. */
+    required?: boolean | undefined;
+    /**Meldingen som vises ved valideringsfeil. Gir alle barna error prop. */
+    errorMessage?: string | undefined;
+    /**Hjelpetekst for gruppen. */
+    tip?: string | undefined;
+    /**Gir alle barna `disabled` prop. */
+    disabled?: boolean | undefined;
+    /**Gir alle barna `readOnly` prop */
+    readOnly?: boolean | undefined;
+    /**Retningen radioknappene skal gjengis i. */
+    direction?: Direction | undefined;
+    /**Default verdi - en `<RadioButton />` blir forhåndsvalgt. **OBS!** brukes kun når brukeren ikke skal fylle ut selv. */
+    value?: T | undefined;
+    /**custom id for for gruppen, knytter `label` til gruppen via `aria-label`. */
+    groupId?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
+} & {
+    ref?: Ref<HTMLDivElement> | undefined;
+}) => ReactElement;

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -16,8 +16,13 @@ import '../../utils/color.js';
 import '../../hooks/useScreenSize.js';
 import { RadioButtonGroupContext } from './RadioButtonGroupContext.js';
 import { Typography } from '../Typography/Typography/Typography.js';
-import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import '../Typography/Label/Label.js';
+import '../Typography/Paragraph/Paragraph.js';
+import '../Typography/Heading/Heading.js';
 import '../Typography/Link/Link.js';
+import '../Typography/Legend/Legend.js';
+import '../Typography/Caption/Caption.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { OuterGroupContainer, GroupContainer } from '../../helpers/SelectionControl/SelectionControl.styles.js';
 import '../../helpers/SelectionControl/SelectionControl.tokens.js';
 
@@ -93,5 +98,7 @@ var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
   }));
 };
 var RadioButtonGroup = /*#__PURE__*/forwardRef(RadioButtonGroupInner);
+// @ts-expect-error TODO fix RadioButtonGroup type
+RadioButtonGroup.displayName = 'RadioButtonGroup';
 
 export { RadioButtonGroup };

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

@@ -1,64 +1,65 @@
-import { RadioButtonGroupProps } from '.';
-declare const _default: {
-    title: string;
-    component: <T extends string | number = string>(props: Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
-        name?: string | undefined;
-        label?: string | undefined;
-        onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, value: T | undefined) => void) | undefined;
-        required?: boolean | undefined;
-        errorMessage?: string | undefined;
-        tip?: string | undefined;
-        disabled?: boolean | undefined;
-        readOnly?: boolean | undefined;
-        direction?: import("../../types").Direction | undefined;
-        value?: T | undefined;
-        groupId?: string | undefined;
-    } & {
-        children?: import("react").ReactNode;
-    } & {
-        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
-    } & {
-        ref?: import("react").Ref<HTMLDivElement> | undefined;
-    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    argTypes: {
-        label: {
-            control: {
-                type: string;
-            };
-        };
-        errorMessage: {
-            control: {
-                type: string;
-            };
-        };
-        tip: {
-            control: {
-                type: string;
-            };
-        };
-        disabled: {
-            control: {
-                type: string;
-            };
-        };
-        readOnly: {
-            control: {
-                type: string;
-            };
-        };
-        required: {
-            control: {
-                type: string;
-            };
-        };
-    };
-    parameters: {
-        controls: {
-            exclude: string[];
-        };
-    };
-};
-export default _default;
-export declare const Overview: (args: RadioButtonGroupProps<string>) => JSX.Element;
-export declare const Default: (args: RadioButtonGroupProps<number>) => JSX.Element;
-export declare const WithDefaultValue: (args: RadioButtonGroupProps<number>) => JSX.Element;
+/// <reference types="react" />
+import { RadioButtonGroupProps } from '.';
+declare const _default: {
+    title: string;
+    component: <T extends string | number = string>(props: Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange">, "id" | "className"> & {
+        name?: string | undefined;
+        label?: string | undefined;
+        onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, value: T | undefined) => void) | undefined;
+        required?: boolean | undefined;
+        errorMessage?: string | undefined;
+        tip?: string | undefined;
+        disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        direction?: import("../../types").Direction | undefined;
+        value?: T | undefined;
+        groupId?: string | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & {
+        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
+    } & {
+        ref?: import("react").Ref<HTMLDivElement> | undefined;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        errorMessage: {
+            control: {
+                type: string;
+            };
+        };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: RadioButtonGroupProps<string>) => import("react/jsx-runtime").JSX.Element;
+export declare const Default: (args: RadioButtonGroupProps<number>) => import("react/jsx-runtime").JSX.Element;
+export declare const WithDefaultValue: (args: RadioButtonGroupProps<number>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,13 @@
-import React, { ChangeEvent } from 'react';
-export interface RadioButtonGroup {
-    disabled?: boolean;
-    readOnly?: boolean;
-    name?: string;
-    value?: string | number | null;
-    error?: boolean;
-    errorMessageId?: string;
-    required?: boolean;
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-}
-export declare const RadioButtonGroupContext: React.Context<Nullable<RadioButtonGroup>>;
-export declare const useRadioButtonGroup: () => Nullable<RadioButtonGroup>;
+import React, { ChangeEvent } from 'react';
+export interface RadioButtonGroup {
+    disabled?: boolean;
+    readOnly?: boolean;
+    name?: string;
+    value?: string | number | null;
+    error?: boolean;
+    errorMessageId?: string;
+    required?: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const RadioButtonGroupContext: React.Context<Nullable<RadioButtonGroup>>;
+export declare const useRadioButtonGroup: () => Nullable<RadioButtonGroup>;

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

@@ -1,3 +1,3 @@
-export * from './RadioButton';
-export * from './RadioButton.types';
-export * from './RadioButtonGroup';
+export * from './RadioButton';
+export * from './RadioButton.types';
+export * from './RadioButtonGroup';

package/dist/components/ScrollableContainer/ScrollableContainer.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
-import { BaseComponentPropsWithChildren } from '../../types';
-import { Property } from 'csstype';
-export type ScrollableContainerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /**Høyde på innholdscontainer. */
-    contentHeight?: Property.Height;
-}>;
-export declare const ScrollableContainer: (props: ScrollableContainerProps) => JSX.Element;
+import { BaseComponentPropsWithChildren } from '../../types';
+import { Property } from 'csstype';
+export type ScrollableContainerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    /**Høyde på innholdscontainer. */
+    contentHeight?: Property.Height;
+}>;
+export declare const ScrollableContainer: {
+    (props: ScrollableContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/ScrollableContainer/ScrollableContainer.js

@@ -46,5 +46,6 @@ var ScrollableContainer = function ScrollableContainer(props) {
     })]
   }));
 };
+ScrollableContainer.displayName = 'ScrollableContainer';
 
 export { ScrollableContainer };

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

@@ -1,15 +1,18 @@
-import { ScrollableContainerProps } from '.';
-declare const _default: {
-    title: string;
-    component: (props: ScrollableContainerProps) => JSX.Element;
-    argTypes: {
-        contentHeight: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Default: (args: ScrollableContainerProps) => JSX.Element;
-export declare const JustScrollbar: () => JSX.Element;
+import { ScrollableContainerProps } from '.';
+declare const _default: {
+    title: string;
+    component: {
+        (props: ScrollableContainerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    argTypes: {
+        contentHeight: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: ScrollableContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const JustScrollbar: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,25 +1,25 @@
-export declare const scrollbarWidthNumberPx = 10;
-export declare const scrollbarTokens: {
-    minThumbHeightPx: number;
-    track: {
-        backgroundColor: string;
-        borderRadius: string;
-        width: string;
-    };
-    thumb: {
-        base: {
-            backgroundColor: string;
-            borderRadius: string;
-            width: string;
-        };
-        hover: {
-            backgroundColor: string;
-        };
-    };
-    content: {
-        paddingRight: string;
-    };
-    outerContainer: {
-        padding: string;
-    };
-};
+export declare const scrollbarWidthNumberPx = 10;
+export declare const scrollbarTokens: {
+    minThumbHeightPx: number;
+    track: {
+        backgroundColor: string;
+        borderRadius: string;
+        width: string;
+    };
+    thumb: {
+        base: {
+            backgroundColor: string;
+            borderRadius: string;
+            width: string;
+        };
+        hover: {
+            backgroundColor: string;
+        };
+    };
+    content: {
+        paddingRight: string;
+    };
+    outerContainer: {
+        padding: string;
+    };
+};

package/dist/components/ScrollableContainer/Scrollbar.d.ts

@@ -1,7 +1,10 @@
-import { RefObject } from 'react';
-import { BaseComponentProps } from '../../types';
-export type ScrollbarProps = BaseComponentProps<HTMLDivElement, {
-    /** Ref til container med innholdet som skal scrolles. */
-    contentRef?: RefObject<HTMLDivElement>;
-}>;
-export declare const Scrollbar: (props: ScrollbarProps) => JSX.Element | null;
+import { RefObject } from 'react';
+import { BaseComponentProps } from '../../types';
+export type ScrollbarProps = BaseComponentProps<HTMLDivElement, {
+    /** Ref til container med innholdet som skal scrolles. */
+    contentRef?: RefObject<HTMLDivElement>;
+}>;
+export declare const Scrollbar: {
+    (props: ScrollbarProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/ScrollableContainer/Scrollbar.js

@@ -159,5 +159,6 @@ var Scrollbar = function Scrollbar(props) {
     })
   })) : null;
 };
+Scrollbar.displayName = 'Scrollbar';
 
 export { Scrollbar };

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

@@ -1,3 +1,3 @@
-export * from './Scrollbar';
-export * from './ScrollableContainer';
-export * from './scrollbarStyling';
+export * from './Scrollbar';
+export * from './ScrollableContainer';
+export * from './scrollbarStyling';

package/dist/components/ScrollableContainer/scrollbarStyling.d.ts

@@ -1,26 +1,26 @@
-/**
- * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
- */
-export declare const scrollbarStyling: {
-    webkit: {
-        '&::-webkit-scrollbar': {
-            width: string;
-            height: string;
-        };
-        '&::-webkit-scrollbar-track': {
-            background: string;
-            borderRadius: string;
-        };
-        '&::-webkit-scrollbar-thumb': {
-            background: string;
-            borderRadius: string;
-        };
-    };
-    '&::-webkit-scrollbar-thumb:hover': {
-        background: string;
-    };
-    firefox: {
-        scrollbarColor: string;
-        scrollbarWidth: "thin";
-    };
-};
+/**
+ * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
+ */
+export declare const scrollbarStyling: {
+    webkit: {
+        '&::-webkit-scrollbar': {
+            width: string;
+            height: string;
+        };
+        '&::-webkit-scrollbar-track': {
+            background: string;
+            borderRadius: string;
+        };
+        '&::-webkit-scrollbar-thumb': {
+            background: string;
+            borderRadius: string;
+        };
+    };
+    '&::-webkit-scrollbar-thumb:hover': {
+        background: string;
+    };
+    firefox: {
+        scrollbarColor: string;
+        scrollbarWidth: "thin";
+    };
+};