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

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

@@ -1,12 +1,14 @@
-import { CSSObject } from 'styled-components';
+import { StaticTypographyType } from '../Typography';
+export declare const typographyType: StaticTypographyType;
 export declare const chipTokens: {
     container: {
-        base: CSSObject;
+        gap: string;
+        padding: string;
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
     };
     group: {
-        base: CSSObject;
-    };
-    text: {
-        base: CSSObject;
+        gap: string;
     };
 };

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

@@ -1,38 +1,16 @@
+import { StaticTypographyType } from '../Typography';
+import { DescriptionListAppearance } from './DescriptionList';
+export declare const termTypographyTypes: {
+    [k in DescriptionListAppearance]: StaticTypographyType;
+};
+export declare const descTypographyType: StaticTypographyType;
 export declare const descriptionListTokens: {
     term: {
         appearance: {
             small: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 color: string;
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
             };
             bold: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: number;
-                fontStyle: any;
                 color: string;
             };
         };
@@ -42,14 +20,6 @@ export declare const descriptionListTokens: {
     };
     desc: {
         base: {
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
             gap: string;
             color: string;
         };

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

@@ -1,8 +1,13 @@
-import { CSSObject } from 'styled-components';
-export declare const dividerColors: {
-    primary: string;
-    primaryLighter: string;
-};
 export declare const dividerTokens: {
-    base: CSSObject;
+    borderTop: string;
+    marginTop: string;
+    marginBottom: string;
+    color: {
+        primary: {
+            borderColor: string;
+        };
+        primaryLighter: {
+            borderColor: string;
+        };
+    };
 };

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

@@ -1,17 +1,9 @@
-import { CSSObject } from 'styled-components';
 export declare const drawerTokens: {
     container: {
-        base: CSSObject;
-        size: {
-            large: {
-                base: CSSObject;
-            };
-            small: {
-                base: CSSObject;
-            };
-        };
+        padding: string;
     };
     contentContainer: {
-        base: CSSObject;
+        gap: string;
+        padding: string;
     };
 };

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

@@ -1,48 +1,50 @@
-import { CSSObject } from 'styled-components';
-import { ErrorIcon, InfoIcon, WarningIcon } from '../../icons/tsx';
+import { SvgIcon } from '../../icons/utils';
+import { ButtonPurpose } from '../Button';
+import { StaticTypographyType } from '../Typography';
+import { GlobalMessagePurpose } from './GlobalMessage';
+export declare const typographyType: StaticTypographyType;
+export declare const purposeVariants: {
+    [k in GlobalMessagePurpose]: {
+        icon: SvgIcon;
+        closeButtonPurpose: ButtonPurpose;
+    };
+};
 export declare const globalMessageTokens: {
     container: {
-        base: CSSObject;
+        borderBottom: string;
+        padding: string;
         info: {
-            base: CSSObject;
+            borderColor: string;
+            backgroundColor: string;
         };
         danger: {
-            base: CSSObject;
+            borderColor: string;
+            backgroundColor: string;
         };
         warning: {
-            base: CSSObject;
+            borderColor: string;
+            backgroundColor: string;
         };
     };
     contentContainer: {
-        base: CSSObject;
+        paddingRight: string;
+        paddingTop: string;
+        paddingBottom: string;
+        gap: string;
         withClosable: {
-            base: CSSObject;
+            paddingRight: string;
         };
     };
     icon: {
         marginRight: string;
         info: {
-            icon: typeof InfoIcon;
             color: string;
         };
         danger: {
-            icon: typeof ErrorIcon;
             color: string;
         };
         warning: {
-            icon: typeof WarningIcon;
             color: string;
         };
     };
-    button: {
-        info: {
-            purpose: string;
-        };
-        danger: {
-            purpose: string;
-        };
-        warning: {
-            purpose: string;
-        };
-    };
 };

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

@@ -1,16 +1,17 @@
 import { BaseComponentPropsWithChildren } from '../../types';
-import { Property } from 'csstype';
+import { StandardProperties } from 'csstype';
+import { ScreenSizeLiteral } from './Grid.utils';
 import { HTMLAttributes } from 'react';
-declare type MaxWidthGrid = {
-    xs?: Property.MaxWidth;
-    sm?: Property.MaxWidth;
-    md?: Property.MaxWidth;
-    lg?: Property.MaxWidth;
-    xl?: Property.MaxWidth;
+declare type BreakpointBasedProps<T extends keyof StandardProperties> = {
+    [k in ScreenSizeLiteral]?: StandardProperties[T];
 };
+declare type RowGapGrid = BreakpointBasedProps<'rowGap'>;
+declare type MaxWidthGrid = BreakpointBasedProps<'maxWidth'>;
 declare type BaseGridProps = {
     /**Maksimal bredde. Gjøres per brekkepunkt.  */
     maxWidth?: MaxWidthGrid;
+    /** CSS `row-gap`. Gjøres per brekkepunkt. */
+    rowGap?: RowGapGrid;
 } & Pick<HTMLAttributes<HTMLElement>, 'style'>;
 declare type GridDivProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**HTML tag som returneres. */

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

@@ -2,7 +2,7 @@ export declare const gridTokens: {
     0: {
         grid: {
             columns: number;
-            gap: string;
+            columnGap: string;
             marginLeft: string;
             marginRight: string;
         };
@@ -18,7 +18,7 @@ export declare const gridTokens: {
     1: {
         grid: {
             columns: number;
-            gap: string;
+            columnGap: string;
             marginLeft: string;
             marginRight: string;
         };
@@ -34,7 +34,7 @@ export declare const gridTokens: {
     2: {
         grid: {
             columns: number;
-            gap: string;
+            columnGap: string;
             marginLeft: string;
             marginRight: string;
         };
@@ -50,7 +50,7 @@ export declare const gridTokens: {
     3: {
         grid: {
             columns: number;
-            gap: string;
+            columnGap: string;
             marginLeft: string;
             marginRight: string;
         };
@@ -66,7 +66,7 @@ export declare const gridTokens: {
     4: {
         grid: {
             columns: number;
-            gap: string;
+            columnGap: string;
             marginLeft: string;
             marginRight: string;
         };

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

@@ -16,10 +16,11 @@ export declare const StyledOverflowMenu: import("styled-components").StyledCompo
     userProps?: ({
         name: string;
         href?: string | undefined;
-    } & (import("react").AnchorHTMLAttributes<HTMLAnchorElement> | import("react").ButtonHTMLAttributes<HTMLButtonElement>)) | undefined;
-    navItems?: import("../OverflowMenu").OverflowMenuNavItem[] | undefined;
+    } & (import("react").ButtonHTMLAttributes<HTMLButtonElement> | import("react").AnchorHTMLAttributes<HTMLAnchorElement>)) | undefined;
+    navItems?: import("../OverflowMenu").OverflowMenuLinkItem[] | undefined;
     isOpen?: boolean | undefined;
     onClose?: (() => void) | undefined;
+    onToggle?: (() => void) | undefined;
     anchorRef?: import("react").RefObject<HTMLButtonElement> | undefined;
     placement?: import("../..").Placement | undefined;
     offset?: number | undefined;

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

@@ -1,18 +1,13 @@
+import { StaticTypographyType } from '../Typography';
+export declare const typographyTypes: {
+    [k: string]: StaticTypographyType;
+};
 export declare const internalHeaderTokens: {
     navLink: {
         base: {
             color: string;
-            textDecoration: string;
             backgroundColor: string;
             padding: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
         };
         hover: {
             color: string;

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

@@ -8,7 +8,7 @@ export declare type ListProps = BaseComponentPropsWithChildren<HTMLUListElement
     /**Spesifiserer typografi for listen. Komponenten arver i utgangspunktet fra forelder, men hvis forelder stiller ikke med relevant styling  må det velges `TypographyBodyType` som brukes i `<body>` ellers på siden. */
     typographyType?: ListTypographyType;
 }>;
-export declare const List: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLUListElement | HTMLOListElement>, "id" | "className"> & {
+export declare const List: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLUListElement | HTMLOListElement>, "className" | "id"> & {
     /**Spesifiserer om komponenten skal returnere `<ul />` (punktliste) eller `<ol />` (nummerert liste). */
     listType?: ListType | undefined;
     /**Spesifiserer typografi for listen. Komponenten arver i utgangspunktet fra forelder, men hvis forelder stiller ikke med relevant styling  må det velges `TypographyBodyType` som brukes i `<body>` ellers på siden. */

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

@@ -1,12 +1,24 @@
-import { CSSObject } from 'styled-components';
 export declare const listTokens: {
-    base: CSSObject;
-    spaceLeft: string;
-    sizes: {
-        bodySans01: CSSObject;
-        bodySans02: CSSObject;
-        bodySans03: CSSObject;
-        bodySans04: CSSObject;
-        inherit: CSSObject;
+    list: {
+        base: {
+            margin: string;
+            color: string;
+        };
+        ol: {
+            paddingLeft: string;
+        };
+        ul: {
+            paddingLeft: string;
+        };
+    };
+    listItem: {
+        lineHeight: string;
+        ul: {
+            paddingLeft: string;
+        };
     };
+    bullet: {
+        top: string;
+    };
+    spaceLeft: string;
 };

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

@@ -1,89 +1,85 @@
-import { CSSObject } from 'styled-components';
-import { Property } from 'csstype';
-import { ErrorIcon, TipIcon, InfoIcon, WarningIcon, CheckCircledIcon } from '../../icons/tsx';
+import { SvgIcon } from '../../icons/utils';
+import { ButtonPurpose } from '../Button';
+import { StaticTypographyType } from '../Typography';
+import { LocalMessagePurpose } from './LocalMessage';
+export declare const typographyType: StaticTypographyType;
+export declare const purposeVariants: {
+    [k in LocalMessagePurpose]: {
+        icon: SvgIcon;
+        closeButtonPurpose: ButtonPurpose;
+    };
+};
 export declare const localMessageTokens: {
     container: {
-        base: CSSObject;
-        defaultWidth: Property.Width<string>;
-        info: {
-            base: CSSObject;
-        };
-        danger: {
-            base: CSSObject;
-        };
-        warning: {
-            base: CSSObject;
-        };
-        success: {
-            base: CSSObject;
-        };
-        tips: {
-            base: CSSObject;
-        };
-        confidential: {
-            base: CSSObject;
+        base: {
+            boxShadow: string;
+            borderRadius: string;
+            border: string;
+            padding: string;
+        };
+        purpose: {
+            info: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            warning: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            danger: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            success: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            tips: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            confidential: {
+                borderColor: string;
+                backgroundColor: string;
+            };
         };
     };
     contentContainer: {
-        base: CSSObject;
+        paddingRight: string;
+        paddingTop: string;
+        paddingBottom: string;
         withClosable: {
-            base: CSSObject;
+            paddingRight: string;
         };
         vertical: {
-            base: CSSObject;
+            paddingBottom: string;
         };
     };
     topContainer: {
-        base: CSSObject;
+        paddingTop: string;
         withClosable: {
-            base: CSSObject;
+            paddingTop: string;
         };
     };
     icon: {
         marginRight: string;
         info: {
-            icon: typeof InfoIcon;
             color: string;
         };
         danger: {
-            icon: typeof ErrorIcon;
             color: string;
         };
         warning: {
-            icon: typeof WarningIcon;
             color: string;
         };
         success: {
-            icon: typeof CheckCircledIcon;
             color: string;
         };
         tips: {
-            icon: typeof TipIcon;
             color: string;
         };
         confidential: {
-            icon: typeof ErrorIcon;
             color: string;
         };
     };
-    button: {
-        info: {
-            purpose: string;
-        };
-        danger: {
-            purpose: string;
-        };
-        warning: {
-            purpose: string;
-        };
-        success: {
-            purpose: string;
-        };
-        confidential: {
-            purpose: string;
-        };
-        tips: {
-            purpose: string;
-        };
-    };
 };

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

@@ -1,13 +1,12 @@
-import { CSSObject } from 'styled-components';
 export declare const modalTokens: {
-    base: CSSObject;
-    focus: {
-        base: CSSObject;
+    container: {
+        padding: string;
     };
     contentContainer: {
-        base: CSSObject;
+        paddingRight: string;
+        gap: string;
     };
     actionsContainer: {
-        base: CSSObject;
+        gap: string;
     };
 };

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

@@ -1,4 +1,4 @@
-import { OverflowMenuContextItem, OverflowMenuNavItem } from '.';
+import { OverflowMenuContextItem } from '.';
 declare type ContainerProps = {
     isOpen: boolean;
 };
@@ -9,10 +9,11 @@ export declare const OverflowMenu: import("react").ForwardRefExoticComponent<Pic
     userProps?: ({
         name: string;
         href?: string | undefined;
-    } & (import("react").AnchorHTMLAttributes<HTMLAnchorElement> | import("react").ButtonHTMLAttributes<HTMLButtonElement>)) | undefined;
-    navItems?: OverflowMenuNavItem[] | undefined;
+    } & (import("react").ButtonHTMLAttributes<HTMLButtonElement> | import("react").AnchorHTMLAttributes<HTMLAnchorElement>)) | undefined;
+    navItems?: import("./OverflowMenu.types").OverflowMenuLinkItem[] | undefined;
     isOpen?: boolean | undefined;
     onClose?: (() => void) | undefined;
+    onToggle?: (() => void) | undefined;
     anchorRef?: import("react").RefObject<HTMLButtonElement> | undefined;
     placement?: import("../../hooks").Placement | undefined;
     offset?: number | undefined;

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

@@ -1,4 +1,4 @@
-import { OverflowMenuProps, OverflowMenuContextItem, OverflowMenuNavItem } from '.';
+import { OverflowMenuProps, OverflowMenuContextItem } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
@@ -6,10 +6,11 @@ declare const _default: {
         userProps?: ({
             name: string;
             href?: string | undefined;
-        } & (import("react").AnchorHTMLAttributes<HTMLAnchorElement> | import("react").ButtonHTMLAttributes<HTMLButtonElement>)) | undefined;
-        navItems?: OverflowMenuNavItem[] | undefined;
+        } & (import("react").ButtonHTMLAttributes<HTMLButtonElement> | import("react").AnchorHTMLAttributes<HTMLAnchorElement>)) | undefined;
+        navItems?: import("./OverflowMenu.types").OverflowMenuLinkItem[] | undefined;
         isOpen?: boolean | undefined;
         onClose?: (() => void) | undefined;
+        onToggle?: (() => void) | undefined;
         anchorRef?: import("react").RefObject<HTMLButtonElement> | undefined;
         placement?: import("../..").Placement | undefined;
         offset?: number | undefined;

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

@@ -1,3 +1,5 @@
+import { StaticTypographyType } from '../Typography';
+export declare const typographyType: StaticTypographyType;
 export declare const overflowMenuTokens: {
     container: {
         border: string;
@@ -11,14 +13,6 @@ export declare const overflowMenuTokens: {
             backgroundColor: string;
             padding: string;
             gap: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
         };
     };
     link: {

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

@@ -2,14 +2,14 @@ import { Placement } from '../../hooks/useFloatPosition';
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, RefObject } from 'react';
 import { BaseComponentProps } from '../../types';
 import { SvgIcon } from '../../icons/utils';
-export declare type OverflowMenuContextItem = {
+declare type OverflowMenuItemBase = {
     title: string;
     icon?: SvgIcon;
-} & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
-export declare type OverflowMenuNavItem = {
-    title: string;
-    icon?: SvgIcon;
-} & AnchorHTMLAttributes<HTMLAnchorElement>;
+};
+export declare type OverflowMenuButtonItem = OverflowMenuItemBase & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare type OverflowMenuLinkItem = OverflowMenuItemBase & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare type OverflowMenuContextItem = OverflowMenuButtonItem | OverflowMenuLinkItem;
+export declare type OverflowMenuNavItem = OverflowMenuLinkItem;
 declare type UserProps = {
     name: string;
     href?: string;
@@ -25,6 +25,8 @@ export declare type OverflowMenuProps = BaseComponentProps<HTMLDivElement, {
     isOpen?: boolean;
     /**Callback for å lukke menyen. **OBS!** nødvendig kun hvis `<OverflowMenuGroup />` ikke brukes.  */
     onClose?: () => void;
+    /**Callback for å toggle menyen. **OBS!** nødvendig kun hvis `<OverflowMenuGroup />` ikke brukes.  */
+    onToggle?: () => void;
     /**Ref til elementet som styrer menyen. **OBS!** nødvendig kun hvis ``<OverflowMenuGroup />` ikke brukes.  */
     anchorRef?: RefObject<HTMLButtonElement>;
     /**Plassering av menyen i forhold til anchor-elementet. */

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

@@ -1,15 +1,14 @@
-import { CSSObject } from 'styled-components';
 export declare const paginationTokens: {
-    container: {
-        spaceBetweenItems: string;
+    outerContainer: {
+        gap: string;
     };
     indicatorsContainer: {
-        spacing: string;
+        gap: string;
     };
-    list: {
-        base: CSSObject;
+    truncationIcon: {
+        color: string;
     };
-    paginationItem: {
-        spacing: string;
+    list: {
+        gap: string;
     };
 };

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

@@ -8,7 +8,6 @@ export declare const popoverTokens: {
         padding: string;
     };
     closeButton: {
-        position: string;
         top: string;
         right: string;
     };