@norges-domstoler/dds-components 9.2.0-beta.0 → 9.2.0

package/dist/cjs/components/ProgressTracker/ProgressTracker.tokens.d.ts

@@ -1,4 +1,9 @@
 import { IconSize } from '../Icon';
+import { StaticTypographyType } from '../Typography';
+export declare const typographyTypes: {
+    number: StaticTypographyType;
+    label: StaticTypographyType;
+};
 export declare const progressTrackerTokens: {
     itemsWrapper: {
         gap: string;
@@ -15,7 +20,6 @@ export declare const progressTrackerTokens: {
         size: string;
         borderWidth: string;
         iconSize: IconSize;
-        fontSize: string;
         active: {
             borderColor: string;
             color: string;
@@ -48,17 +52,16 @@ export declare const progressTrackerTokens: {
         };
     };
     itemText: {
-        fontFamily: string;
-        fontSize: string;
+        textDecoration: string;
         active: {
             color: string;
-            textDecoration: string;
+            textDecorationColor: string;
         };
         inactive: {
             color: string;
-            textDecoration: string;
+            textDecorationColor: string;
             hover: {
-                textDecoration: string;
+                textDecorationColor: string;
             };
         };
         disabled: {

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

@@ -1,22 +1,22 @@
 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"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "aria-describedby" | "onChange" | "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;
+        'aria-describedby'?: string | undefined;
+        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | 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;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "aria-describedby" | "onChange" | "checked" | "readOnly" | "required"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

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

@@ -1,6 +1,5 @@
 import { ChangeEvent, HTMLAttributes, ReactElement, Ref } from 'react';
-import { BaseComponentPropsWithChildren } from '../../types';
-declare type Direction = 'column' | 'row';
+import { BaseComponentPropsWithChildren, Direction } from '../../types';
 export declare type RadioButtonGroupProps<T extends string | number> = BaseComponentPropsWithChildren<HTMLDivElement, {
     /** Gir alle barna `name` prop.*/
     name?: string;
@@ -51,8 +50,7 @@ export declare const RadioButtonGroup: <T extends string | number = string>(prop
 } & {
     children?: import("react").ReactNode;
 } & {
-    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined; /**Funksjonen for onChange-event for barna. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
 } & {
     ref?: Ref<HTMLDivElement> | undefined;
 }) => ReactElement;
-export {};

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

@@ -10,7 +10,7 @@ declare const _default: {
         tip?: string | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
-        direction?: ("row" | "column") | undefined;
+        direction?: import("../../types").Direction | undefined;
         value?: T | undefined;
         groupId?: string | undefined;
     } & {

package/dist/cjs/components/Search/Search.tokens.d.ts

@@ -1,3 +1,8 @@
+import { StaticTypographyType } from '../Typography';
+import { SearchSize } from './Search';
+export declare const typographyTypes: {
+    [k in SearchSize]: StaticTypographyType;
+};
 export declare const searchTokens: {
     input: {
         base: {
@@ -6,40 +11,16 @@ export declare const searchTokens: {
         };
         sizes: {
             small: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 paddingTop: string;
                 paddingBottom: string;
                 paddingLeft: string;
             };
             medium: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 paddingTop: string;
                 paddingBottom: string;
                 paddingLeft: string;
             };
             large: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 paddingTop: string;
                 paddingBottom: string;
                 paddingLeft: string;

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

@@ -1,3 +1,17 @@
+import { InputSize, InputTypographyTypes } from '../../helpers';
+import { StaticTypographyType } from '../Typography';
+export declare const typographyTypes: {
+    control: InputTypographyTypes;
+    option: InputTypographyTypes;
+    placeholder: {
+        [k in InputSize]: StaticTypographyType;
+    };
+    noOptionsMessage: {
+        [k in InputSize]: StaticTypographyType;
+    };
+    groupHeading: StaticTypographyType;
+    multiValueLabel: StaticTypographyType;
+};
 export declare const selectTokens: {
     control: {
         borderRadius: string;
@@ -25,36 +39,12 @@ export declare const selectTokens: {
         };
         sizes: {
             medium: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 padding: string;
             };
             small: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 padding: string;
             };
             tiny: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 padding: string;
             };
         };
@@ -72,38 +62,6 @@ export declare const selectTokens: {
     };
     placeholder: {
         color: string;
-        sizes: {
-            medium: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            small: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            tiny: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-        };
     };
     menu: {
         border: string;
@@ -115,29 +73,12 @@ export declare const selectTokens: {
     };
     groupHeading: {
         color: string;
-        font: {
-            lineHeight: any;
-            fontSize: string;
-            letterSpacing: any;
-            fontFamily: any;
-            fontWeight: any;
-            fontStyle: any;
-        };
         padding: string;
     };
     option: {
         base: {
             gap: string;
             padding: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
-            color: string;
             backgroundColor: string;
         };
         hover: {
@@ -149,46 +90,8 @@ export declare const selectTokens: {
             backgroundColor: string;
         };
         selected: {
-            lineHeight: any;
-            fontSize: string;
-            letterSpacing: any;
-            fontFamily: any;
-            fontWeight: any;
-            fontStyle: any;
             backgroundColor: string;
         };
-        sizes: {
-            medium: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            small: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-            tiny: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-            };
-        };
     };
     valueContainer: {
         isMulti: {
@@ -214,14 +117,6 @@ export declare const selectTokens: {
     multiValueLabel: {
         padding: string;
         color: string;
-        font: {
-            lineHeight: any;
-            fontSize: string;
-            letterSpacing: any;
-            fontFamily: any;
-            fontWeight: any;
-            fontStyle: any;
-        };
     };
     multiValueRemove: {
         base: {
@@ -239,14 +134,6 @@ export declare const selectTokens: {
     noOptionsMessage: {
         padding: string;
         color: string;
-        font: {
-            lineHeight: any;
-            fontSize: string;
-            letterSpacing: any;
-            fontFamily: any;
-            fontWeight: any;
-            fontStyle: any;
-        };
     };
     clearIndicator: {
         base: {

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

@@ -6,7 +6,7 @@ export declare type SkipToContentProps = BaseComponentProps<HTMLAnchorElement, {
     /**Spesifiserer hvor det skal hoppes til via `id`-attributtet til innholdet. */
     href: string;
     /**Avstand fra top i nærmeste posisjonert container. */
-    top?: Property.Top<string | number>;
+    top?: Property.Top;
 }>;
 export declare const SkipToContent: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLAnchorElement>, "className" | "id"> & {
     /** Teksten som vises i lenka. */
@@ -14,7 +14,7 @@ export declare const SkipToContent: import("react").ForwardRefExoticComponent<Pi
     /**Spesifiserer hvor det skal hoppes til via `id`-attributtet til innholdet. */
     href: string;
     /**Avstand fra top i nærmeste posisjonert container. */
-    top?: Property.Top<string | number> | undefined;
+    top?: Property.Top<0 | (string & {})> | undefined;
 } & {
     htmlProps?: import("react").HTMLAttributes<HTMLAnchorElement> | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -4,7 +4,7 @@ declare const _default: {
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLAnchorElement>, "id" | "className"> & {
         text?: string | undefined;
         href: string;
-        top?: import("csstype").Property.Top<string | number> | undefined;
+        top?: import("csstype").Property.Top<0 | (string & {})> | undefined;
     } & {
         htmlProps?: import("react").HTMLAttributes<HTMLAnchorElement> | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -1,19 +1,14 @@
-import { CSSObject } from 'styled-components';
 export declare const skipToContentTokens: {
     link: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
+        base: {
+            color: string;
         };
-        focusOutline: {
+        hover: {
             color: string;
-            width: string;
         };
     };
     wrapper: {
-        base: CSSObject;
+        backgroundColor: string;
+        padding: string;
     };
 };

package/dist/cjs/components/SplitButton/SplitButton.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps, ButtonSize } from '../Button';
+import { OverflowMenuButtonItem } from '../OverflowMenu';
+export declare type SplitButtonProps = {
+    /**Størrelse på komponenten. */
+    size?: ButtonSize;
+    /**Props for primær handling. Samme props som for `<Button />` unntatt `size`, `purpose`, og `appearance`. */
+    primaryAction: Omit<ButtonProps, 'size' | 'apperance' | 'purpose'>;
+    /**Props for sekunære handlinger. */
+    secondaryActions: OverflowMenuButtonItem[];
+};
+export declare const SplitButton: import("react").ForwardRefExoticComponent<SplitButtonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/SplitButton/SplitButton.stories.d.ts

@@ -0,0 +1,9 @@
+import { SplitButtonProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<SplitButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Overview: (args: SplitButtonProps) => JSX.Element;
+export declare const Default: (args: SplitButtonProps) => JSX.Element;
+export declare const FullWidth: () => JSX.Element;

package/dist/cjs/components/SplitButton/index.d.ts

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

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

@@ -1,16 +1,5 @@
 export declare const tableTokens: {
     row: {
-        base: {
-            color: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
-        };
         body: {
             odd: {
                 backgroundColor: string;
@@ -26,14 +15,6 @@ export declare const tableTokens: {
             };
             mode: {
                 sum: {
-                    font: {
-                        lineHeight: any;
-                        fontSize: string;
-                        letterSpacing: any;
-                        fontFamily: any;
-                        fontWeight: any;
-                        fontStyle: any;
-                    };
                     borderTop: string;
                     borderBottom: string;
                     backgroundColor: string;

package/dist/cjs/components/Tabs/Tabs.tokens.d.ts

@@ -1,33 +1,32 @@
-import { CSSObject } from 'styled-components';
 export declare const tabsTokens: {
-    tabList: CSSObject;
+    tabList: {
+        borderBottom: string;
+    };
     tab: {
-        base: CSSObject;
-        direction: {
-            row: {
-                base: CSSObject;
-            };
-            column: {
-                base: CSSObject;
-            };
+        base: {
+            borderBottom: string;
+            color: string;
+            padding: string;
+        };
+        row: {
+            gap: string;
+        };
+        column: {
+            gap: string;
         };
         active: {
-            base: CSSObject;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            borderColor: string;
         };
         hover: {
-            base: CSSObject;
-            active: {
-                base: CSSObject;
-            };
-        };
-        focus: {
-            base: CSSObject;
+            color: string;
+            boxShadow: string;
+            borderColor: string;
         };
     };
     panel: {
-        base: CSSObject;
-        focusVisible: {
-            base: CSSObject;
-        };
+        padding: string;
     };
 };

package/dist/cjs/components/Tag/Tag.d.ts

@@ -6,7 +6,7 @@ export declare type TagProps = BaseComponentProps<HTMLSpanElement, {
     /**Formål med status eller kategorisering. Påvirker styling. */
     purpose?: TagPurpose;
 }>;
-export declare const Tag: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "id" | "className"> & {
+export declare const Tag: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "className" | "id"> & {
     /**Tekst som vises i `<Tag />.` */
     text?: string | undefined;
     /**Formål med status eller kategorisering. Påvirker styling. */

package/dist/cjs/components/Tag/Tag.tokens.d.ts

@@ -1,26 +1,31 @@
-import { CSSObject } from 'styled-components';
+import { StaticTypographyType } from '../Typography';
+export declare const typographyType: StaticTypographyType;
 export declare const tagTokens: {
     wrapper: {
-        base: CSSObject;
-        type: {
-            success: {
-                base: CSSObject;
+        border: string;
+        borderRadius: string;
+        padding: string;
+        purpose: {
+            default: {
+                backgroundColor: string;
+                borderColor: string;
             };
-            warning: {
-                base: CSSObject;
+            success: {
+                borderColor: string;
+                backgroundColor: string;
             };
             danger: {
-                base: CSSObject;
+                borderColor: string;
+                backgroundColor: string;
             };
-            default: {
-                base: CSSObject;
+            warning: {
+                borderColor: string;
+                backgroundColor: string;
             };
             info: {
-                base: CSSObject;
+                borderColor: string;
+                backgroundColor: string;
             };
         };
     };
-    inner: {
-        base: CSSObject;
-    };
 };

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

@@ -1,8 +1,5 @@
 export declare const textInputTokens: {
     input: {
-        multiline: {
-            paddingBottom: string;
-        };
         withIcon: {
             medium: {
                 paddingLeft: string;

package/dist/cjs/components/ToggleBar/ToggleBar.tokens.d.ts

@@ -1,3 +1,8 @@
+import { StaticTypographyType } from '../Typography';
+import { ToggleBarSize } from './ToggleBar.types';
+export declare const typographyTypes: {
+    [k in ToggleBarSize]: StaticTypographyType;
+};
 export declare const toggleBarTokens: {
     outerContainer: {
         gap: string;
@@ -20,14 +25,6 @@ export declare const toggleBarTokens: {
                 };
                 withText: {
                     padding: string;
-                    font: {
-                        lineHeight: any;
-                        fontSize: string;
-                        letterSpacing: any;
-                        fontFamily: any;
-                        fontWeight: any;
-                        fontStyle: any;
-                    };
                     gap: string;
                 };
             };
@@ -38,14 +35,6 @@ export declare const toggleBarTokens: {
                 };
                 withText: {
                     padding: string;
-                    font: {
-                        lineHeight: any;
-                        fontSize: string;
-                        letterSpacing: any;
-                        fontFamily: any;
-                        fontWeight: any;
-                        fontStyle: any;
-                    };
                     gap: string;
                 };
             };
@@ -56,14 +45,6 @@ export declare const toggleBarTokens: {
                 };
                 withText: {
                     padding: string;
-                    font: {
-                        lineHeight: any;
-                        fontSize: string;
-                        letterSpacing: any;
-                        fontFamily: any;
-                        fontWeight: any;
-                        fontStyle: any;
-                    };
                     gap: string;
                 };
             };
@@ -74,14 +55,6 @@ export declare const toggleBarTokens: {
                 };
                 withText: {
                     padding: string;
-                    font: {
-                        lineHeight: any;
-                        fontSize: string;
-                        letterSpacing: any;
-                        fontFamily: any;
-                        fontWeight: any;
-                        fontStyle: any;
-                    };
                     gap: string;
                 };
             };

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

@@ -1,11 +1,11 @@
 import { ToggleButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
     } & import("../../types").CheckboxPickedHTMLAttributes & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {