@norges-domstoler/dds-components 5.5.0 → 7.0.0

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

@@ -1,141 +1,261 @@
-import { CSSObject } from 'styled-components';
-import { Property } from 'csstype';
-export declare const multiValueContainerMinHeight: string;
 export declare const selectTokens: {
-    container: {
-        base: CSSObject;
-        defaultWidth: Property.Width<string>;
-        hover: {
-            base: CSSObject;
+    control: {
+        borderRadius: string;
+        border: string;
+        borderColor: string;
+        backgroundColor: string;
+        color: string;
+        disabled: {
+            backgroundColor: string;
+            borderColor: string;
         };
-        focus: {
-            base: CSSObject;
+        readOnly: {
+            borderColor: string;
+            backgroundColor: string;
         };
-        danger: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-            focus: {
-                base: CSSObject;
+        isMulti: {
+            sizes: {
+                medium: {
+                    padding: string;
+                };
+                small: {
+                    padding: string;
+                };
             };
         };
-        disabled: {
-            base: CSSObject;
-        };
-        readOnly: {
-            base: CSSObject;
+        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;
+            };
         };
     };
-    label: {
-        base: CSSObject;
+    dropdownIndicator: {
+        base: {
+            color: string;
+        };
         hover: {
-            base: CSSObject;
+            color: string;
         };
-        focus: {
-            base: CSSObject;
+        readOnly: {
+            color: string;
         };
     };
-    input: {
-        base: CSSObject;
-        noLabel: {
-            base: CSSObject;
-        };
-        isMulti: {
-            noLabel: {
-                base: CSSObject;
+    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;
+                };
             };
         };
     };
-    placeholder: {
-        base: CSSObject;
-    };
     menu: {
-        base: CSSObject;
-        spaceTop: number;
+        border: string;
+        borderColor: string;
+        backgroundColor: string;
+        borderRadius: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    groupHeading: {
+        color: string;
+        font: {
+            lineHeight: any;
+            fontSize: string;
+            letterSpacing: any;
+            fontFamily: any;
+            fontWeight: any;
+            fontStyle: any;
+        };
+        padding: string;
     };
     option: {
-        base: CSSObject;
+        base: {
+            gap: string;
+            padding: string;
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+            color: string;
+            backgroundColor: string;
+        };
         hover: {
-            base: CSSObject;
+            color: string;
+            backgroundColor: string;
         };
         selected: {
-            base: CSSObject;
-            icon: {
-                margin: string;
+            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: {
-        withLabel: {
-            base: CSSObject;
-        };
-        noLabel: {
-            base: CSSObject;
+        isMulti: {
+            gap: string;
         };
+    };
+    inputContainer: {
         isMulti: {
-            base: CSSObject;
-            withLabel: {
-                base: CSSObject;
-            };
-            noLabel: {
-                base: CSSObject;
-            };
+            minHeight: string;
         };
     };
     multiValue: {
-        base: CSSObject;
+        base: {
+            borderRadius: string;
+        };
         enabled: {
-            base: CSSObject;
+            backgroundColor: string;
         };
         disabled: {
-            base: CSSObject;
+            backgroundColor: string;
         };
     };
     multiValueLabel: {
-        base: CSSObject;
-    };
-    multiValueRemove: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
+        padding: string;
+        color: string;
+        font: {
+            lineHeight: any;
+            fontSize: string;
+            letterSpacing: any;
+            fontFamily: any;
+            fontWeight: any;
+            fontStyle: any;
         };
     };
-    indicatorsContainer: {
-        withLabel: {
-            base: CSSObject;
-        };
-        noLabel: {
-            base: CSSObject;
-        };
-        isMulti: {
-            withLabel: {
-                base: CSSObject;
-            };
-            noLabel: {
-                base: CSSObject;
-            };
+    multiValueRemove: {
+        base: {
+            color: string;
+            padding: string;
+            borderTopRightRadius: string;
+            borderBottomRightRadius: string;
         };
-    };
-    dropdownIndicator: {
-        base: CSSObject;
         hover: {
-            base: CSSObject;
-        };
-        readOnly: {
-            base: CSSObject;
+            color: string;
+            backgroundColor: string;
+            boxShadow: string;
         };
     };
     noOptionsMessage: {
-        base: CSSObject;
+        padding: string;
+        color: string;
+        font: {
+            lineHeight: any;
+            fontSize: string;
+            letterSpacing: any;
+            fontFamily: any;
+            fontWeight: any;
+            fontStyle: any;
+        };
     };
     clearIndicator: {
-        base: CSSObject;
+        base: {
+            color: string;
+        };
         hover: {
-            base: CSSObject;
+            color: string;
         };
     };
     loadingIndicator: {
-        base: CSSObject;
+        color: string;
+    };
+    icon: {
+        marginRight: string;
     };
 };

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

@@ -1,14 +1,11 @@
 import { ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
 import { BaseComponentPropsWithChildren } from '../../types';
-import { Property } from 'csstype';
 import { SvgIcon } from '../../icons/utils';
 export declare type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
     /**Spesifiserer om fanen er aktiv. */
     active?: boolean;
     /** Ikon. */
     icon?: SvgIcon;
-    /** Custom bredde for enkel fane. */
-    width?: Property.Width;
     /** Spesifiserer om `<Tab />` skal ha fokus. **OBS!** settes automatisk av forelder.*/
     focus?: boolean;
     /**  Callback som setter fokus. **OBS!** settes automatisk av forelder.*/
@@ -21,8 +18,6 @@ export declare const Tab: import("react").ForwardRefExoticComponent<Pick<Omit<Bu
     active?: boolean | undefined;
     /** Ikon. */
     icon?: SvgIcon | undefined;
-    /** Custom bredde for enkel fane. */
-    width?: Property.Width<0 | (string & {})> | undefined;
     /** Spesifiserer om `<Tab />` skal ha fokus. **OBS!** settes automatisk av forelder.*/
     focus?: boolean | undefined;
     /**  Callback som setter fokus. **OBS!** settes automatisk av forelder.*/

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

@@ -1,6 +1,5 @@
 import { RefObject } from 'react';
 import { Direction } from '../../types';
-import { Property } from 'csstype';
 declare type Tabs = {
     activeTab: number;
     tabsId: string;
@@ -10,7 +9,6 @@ declare type Tabs = {
     hasTabFocus: boolean;
     setHasTabFocus: (hasFocus: boolean) => void;
     tabContentDirection: Direction;
-    tabWidth: Property.Width;
 };
 export declare const TabsContext: import("react").Context<Tabs>;
 export declare const useTabsContext: () => Tabs;

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

@@ -8,8 +8,8 @@ export declare type TabsProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     onChange?: (index: number) => void;
     /** Retningen ikon og tekst vises i `<Tab />`-elementer. */
     tabContentDirection?: Direction;
-    /**Custom bredde lik for alle `<Tab />`. */
-    tabWidth?: Property.Width;
+    /**Bredde for hele komponenten. */
+    width?: Property.Width;
 }, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>>;
 export declare const Tabs: import("react").ForwardRefExoticComponent<Pick<Omit<HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
     /** Indeksen til den aktive fanen. **OBS!** Ved å sette denne vil brukere aldri kunne endre tab uten at du også registrerer en `onChange`-lytter for å ta vare på aktiv tab utenfor komponenten. */
@@ -18,8 +18,8 @@ export declare const Tabs: import("react").ForwardRefExoticComponent<Pick<Omit<H
     onChange?: ((index: number) => void) | undefined;
     /** Retningen ikon og tekst vises i `<Tab />`-elementer. */
     tabContentDirection?: Direction | undefined;
-    /**Custom bredde lik for alle `<Tab />`. */
-    tabWidth?: Property.Width<0 | (string & {})> | undefined;
+    /**Bredde for hele komponenten. */
+    width?: Property.Width<0 | (string & {})> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

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

@@ -6,5 +6,6 @@ export declare const Overview: Story<TabsProps>;
 export declare const Default: Story<TabsProps>;
 export declare const WithIcon: Story<TabsProps>;
 export declare const ActiveTab: Story<TabsProps>;
-export declare const TabWidth: Story<TabsProps>;
+export declare const WithWidth: Story<TabsProps>;
+export declare const TabLongNames: Story<TabsProps>;
 export declare const ManyTabs: Story<TabsProps>;

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

@@ -1,11 +1,6 @@
 import { CSSObject } from 'styled-components';
 export declare const tabsTokens: {
-    tabList: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
-        };
-    };
+    tabList: CSSObject;
     tab: {
         base: CSSObject;
         direction: {

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

@@ -1,10 +1,14 @@
 import React from 'react';
+import { InputSize } from '../../helpers';
+import { Property } from 'csstype';
 export declare const TextInput: React.ForwardRefExoticComponent<{
     multiline?: boolean | undefined;
     withCharacterCounter?: boolean | undefined;
+    icon?: import("../../icons/utils").SvgIcon | undefined;
 } & {
     label?: string | undefined;
-    width?: import("csstype").Property.Width<string> | undefined;
+    componentSize?: InputSize | undefined;
+    width?: Property.Width<string> | undefined;
     tip?: string | undefined;
     errorMessage?: string | undefined;
 } & React.InputHTMLAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLInputElement>>;

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

@@ -4,8 +4,10 @@ declare const _default: {
     component: import("react").ForwardRefExoticComponent<{
         multiline?: boolean | undefined;
         withCharacterCounter?: boolean | undefined;
+        icon?: import("../../icons/utils").SvgIcon | undefined;
     } & {
         label?: string | undefined;
+        componentSize?: import("../../helpers").InputSize | undefined;
         width?: import("csstype").Property.Width<string> | undefined;
         tip?: string | undefined;
         errorMessage?: string | undefined;
@@ -60,6 +62,7 @@ declare const _default: {
 };
 export default _default;
 export declare const TextInputOverview: (args: TextInputProps) => JSX.Element;
+export declare const TextInputOverviewSizes: () => JSX.Element;
 export declare const TextareaOverview: (args: TextInputProps) => JSX.Element;
 export declare const Default: (args: TextInputProps) => JSX.Element;
 export declare const WithLabel: (args: TextInputProps) => JSX.Element;

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

@@ -1,9 +1,17 @@
-import { TextInputProps } from './TextInput.types';
-export declare const TextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
+import { InputSize } from '../../helpers';
+import { Icon } from '../Icon';
+export declare const TextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly" | "componentSize"> & {
     hasErrorMessage: boolean;
-    hasLabel: import("../../helpers").LabelPresence;
-}, never>;
+} & StyledInputProps, never>;
 export declare const MessageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare type LabelProps = Pick<TextInputProps, 'multiline' | 'disabled' | 'readOnly'>;
-export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, import("../../helpers").StyledLabelProps & LabelProps, never>;
+declare type StyledIconProps = {
+    size: InputSize;
+};
+export declare const StyledIcon: import("styled-components").StyledComponent<typeof Icon, any, StyledIconProps, never>;
+declare type StyledInputProps = {
+    hasIcon?: boolean;
+};
+export declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly" | "componentSize"> & {
+    hasErrorMessage: boolean;
+} & StyledInputProps, never>;
 export {};

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

@@ -1,54 +1,35 @@
-import { CSSObject } from 'styled-components';
-import { Property } from 'csstype';
 export declare const textInputTokens: {
-    general: {
-        input: {
-            borderRadius: string;
-            borderWidth: string;
-            borderColor: string;
-            textColor: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
+    input: {
+        multiline: {
+            paddingBottom: string;
+        };
+        withIcon: {
+            medium: {
+                paddingLeft: string;
             };
-            hover: {
-                backgroundColor: string;
-                borderColor: string;
-                borderWidth: string;
+            small: {
+                paddingLeft: string;
             };
-            focus: {
-                borderColor: string;
-                borderWidth: string;
+            tiny: {
+                paddingLeft: string;
             };
         };
-        label: {
-            hover: {
-                textColor: string;
+    };
+    icon: {
+        color: string;
+        sizes: {
+            medium: {
+                top: string;
+                left: string;
             };
-            focus: {
-                textColor: string;
+            small: {
+                top: string;
+                left: string;
+            };
+            tiny: {
+                top: string;
+                left: string;
             };
         };
     };
-    multiline: {
-        base: CSSObject;
-        hasLabel: {
-            base: CSSObject;
-        };
-        noLabel: {
-            base: CSSObject;
-        };
-    };
-    label: {
-        multiline: {
-            base: CSSObject;
-        };
-    };
-    wrapper: {
-        defaultWidth: Property.Width<string>;
-    };
 };

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

@@ -1,8 +1,11 @@
 import { InputHTMLAttributes } from 'react';
 import { InputProps } from '../../helpers';
+import { SvgIcon } from '../../icons/utils';
 export declare type TextInputProps = {
     /**Gjør inputfeltet om til `<textarea>`. */
     multiline?: boolean;
     /** Spesifiserer om tegntelleren skal vises. */
     withCharacterCounter?: boolean;
+    /** Ikonet som vises i komponenten. */
+    icon?: SvgIcon;
 } & InputProps & InputHTMLAttributes<HTMLTextAreaElement>;

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

@@ -3,7 +3,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
         text: string;
-        placement?: import("../../hooks").Placement | undefined;
+        placement?: import("../..").Placement | undefined;
         children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & import("react").RefAttributes<HTMLElement>;
         delay?: number | undefined;
         tooltipId?: string | undefined;

package/dist/cjs/components/Typography/Link/Link.d.ts

@@ -12,7 +12,7 @@ export declare const Link: import("react").ForwardRefExoticComponent<Pick<Omit<A
     /**Spesifiserer om lenken fører til et eksternt nettsted eller åpnes i nytt vindu. Påvirker styling og setter `target` prop. */
     external?: boolean | undefined;
     /**Spesifiserer typografistil basert på utvalget for brødtekst.  */
-    typographyType?: TypographyBodyType | undefined;
+    typographyType?: ("bodySans01" | "bodySans02" | "bodySans03" | "bodySans04") | undefined;
 } & {
     withMargins?: boolean | undefined;
 } & {

package/dist/cjs/components/Typography/Link/Link.stories.d.ts

@@ -6,7 +6,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "href" | "target">, "id" | "className"> & {
         external?: boolean | undefined;
-        typographyType?: import("..").TypographyBodyType | undefined;
+        typographyType?: ("bodySans01" | "bodySans02" | "bodySans03" | "bodySans04") | undefined;
     } & {
         withMargins?: boolean | undefined;
     } & {

package/dist/cjs/components/Typography/Paragraph/Paragraph.d.ts

@@ -6,7 +6,7 @@ export declare type ParagraphProps = BaseComponentPropsWithChildren<HTMLParagrap
 } & BaseTypographyProps>;
 export declare const Paragraph: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLParagraphElement>, "id" | "className"> & {
     /**Spesifiserer typografistil basert på utvalget for brødtekst og ingress.  */
-    typographyType?: TypographyBodyType | TypographyLeadType | undefined;
+    typographyType?: ("bodySans01" | "bodySans02" | "bodySans03" | "bodySans04") | TypographyLeadType | undefined;
 } & {
     withMargins?: boolean | undefined;
 } & {

package/dist/cjs/components/Typography/Paragraph/Paragraph.stories.d.ts

@@ -5,7 +5,7 @@ declare type StoryTProps = {
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLParagraphElement>, "id" | "className"> & {
-        typographyType?: import("..").TypographyBodyType | import("..").TypographyLeadType | undefined;
+        typographyType?: ("bodySans01" | "bodySans02" | "bodySans03" | "bodySans04") | import("..").TypographyLeadType | undefined;
     } & {
         withMargins?: boolean | undefined;
     } & {

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

@@ -1,11 +1,10 @@
 import { CSSProperties, ElementType, HTMLAttributes, PropsWithChildren } from 'react';
 import { TextColor } from '../../../utils';
 declare type TypographyBodySansType = 'bodySans01' | 'bodySans02' | 'bodySans03' | 'bodySans04';
-declare type TypographyBodySerifType = 'bodySerif01' | 'bodySerif02' | 'bodySerif03' | 'bodySerif04';
-export declare type TypographyBodyType = TypographyBodySansType | TypographyBodySerifType;
+export declare type TypographyBodyType = TypographyBodySansType;
 export declare type TypographyHeadingType = 'headingSans01' | 'headingSans02' | 'headingSans03' | 'headingSans04' | 'headingSans05' | 'headingSans06' | 'headingSans07' | 'headingSans08';
 export declare type TypographyLeadType = 'leadSans01' | 'leadSans02' | 'leadSans03' | 'leadSans04' | 'leadSans05';
-declare type TypographySupportingType = 'supportingStyleInputText01' | 'supportingStyleInputText02' | 'supportingStyleInputText03' | 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStyleTiny01' | 'supportingStyleTiny02';
+declare type TypographySupportingType = 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStylePlaceholderText02' | 'supportingStylePlaceholderText03' | 'supportingStyleTiny01' | 'supportingStyleTiny02';
 export declare type AnchorTypographyType = 'a';
 export declare type LabelTypographyType = 'supportingStyleLabel01';
 export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;