@norges-domstoler/dds-components 21.7.0 → 21.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import { ComponentPropsWithRef, HTMLAttributes, Ref, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ComponentProps, AnchorHTMLAttributes, SVGAttributes, JSX, LabelHTMLAttributes, RefCallback, RefObject, KeyboardEvent as KeyboardEvent$1, Dispatch, SetStateAction, ButtonHTMLAttributes, AriaRole, InputHTMLAttributes, ChangeEvent, FocusEvent, MouseEventHandler, ForwardedRef, ForwardRefExoticComponent, MouseEvent as MouseEvent$1, ReactElement } from 'react';
3
+ import { ComponentPropsWithRef, DependencyList, Ref, RefCallback, Dispatch, SetStateAction, ChangeEvent, RefObject, ElementType, ComponentPropsWithoutRef, CSSProperties, HTMLAttributes, ReactNode, KeyboardEvent as KeyboardEvent$1, ComponentProps, SVGAttributes, JSX, AnchorHTMLAttributes, LabelHTMLAttributes, ButtonHTMLAttributes, AriaRole, InputHTMLAttributes, FocusEvent, MouseEventHandler, ForwardedRef, ForwardRefExoticComponent, MouseEvent as MouseEvent$1, ReactElement } from 'react';
4
4
  import * as CSS from 'csstype';
5
5
  import { Property, StandardProperties } from 'csstype';
6
6
  import { Strategy, UseFloatingReturn, Placement as Placement$1 } from '@floating-ui/react-dom';
@@ -9,7 +9,7 @@ import { DateValue, AriaCalendarProps } from '@react-aria/calendar';
9
9
  import { DateValue as DateValue$1, CalendarDate, Time } from '@internationalized/date';
10
10
  import { AriaDatePickerProps } from '@react-types/datepicker';
11
11
  import { AriaDateFieldOptions, useDatePicker, AriaTimeFieldProps } from '@react-aria/datepicker';
12
- import { OptionProps, GroupBase, SingleValueProps, SelectInstance, Props as Props$1 } from 'react-select';
12
+ import { OptionProps, GroupBase, SingleValueProps, SelectInstance, Props } from 'react-select';
13
13
 
14
14
  declare function handleElementWithBackdropMount(container: HTMLElement): void;
15
15
  declare function handleElementWithBackdropUnmount(container: HTMLElement): void;
@@ -18,6 +18,26 @@ type BackdropProps = {
18
18
  isMounted?: boolean;
19
19
  zIndex: 'drawer' | 'modal';
20
20
  } & Pick<ComponentPropsWithRef<'div'>, 'children' | 'onClick' | 'ref'>;
21
+ /**
22
+ * Backdrop-komponent, viser et bakgrunnslag for et element som skal låse applikasjonen i bakgrunnen (Modal el.l.).
23
+ *
24
+ * @component
25
+ * @param {Object} props - Props for komponenten.
26
+ * @param {boolean} [props.isMounted] - Angir om backdropen skal være synlig (`true`) eller skjult (`false`). Standard er `false`.
27
+ * @param {'drawer' | 'modal'} props.zIndex - Bestemmer hvilken z-index-klasse som skal brukes, avhengig av konteksten (f.eks. drawer eller modal).
28
+ * @param {React.ReactNode} [props.children] - Eventuelt innhold som skal vises inni backdropen.
29
+ * @param {React.MouseEventHandler<HTMLDivElement>} [props.onClick] - Klikkhåndterer for backdropen, f.eks. for å lukke en modal.
30
+ * @param {React.Ref<HTMLDivElement>} [props.ref] - Referanse til DOM-elementet.
31
+ *
32
+ * @returns {JSX.Element} Et `<div>`-element med riktige klasser basert på synlighet og z-index.
33
+
34
+ * @example
35
+ * ```tsx
36
+ * <Backdrop isMounted={true} zIndex="modal" onClick={handleClose}>
37
+ * <ModalContent />
38
+ * </Backdrop>
39
+ * ```
40
+ */
21
41
  declare const Backdrop: {
22
42
  ({ isMounted, zIndex, ...props }: BackdropProps): react_jsx_runtime.JSX.Element;
23
43
  displayName: string;
@@ -28,8 +48,386 @@ interface SvgChevronProps {
28
48
  height?: Property.Height;
29
49
  width?: Property.Width;
30
50
  }
51
+ /**
52
+ * Animert chevron der armene beveger seg uavhengig av hverandre.
53
+ *
54
+ * @component
55
+ * @param {SvgChevronProps} props - Props for komponenten.
56
+ * @param {boolean} props.isUp - om chevron peker opp.
57
+ * @param {Property.Height} props.height - høyde.
58
+ * @param {Property.Width} props.width - bredde.
59
+ *
60
+ * @returns {JSX.Element} Et `<svg>`-element som animeres basert props.
61
+
62
+ * @example
63
+ * ```tsx
64
+ * const [isExpanded, setIsExpanded] = useState(false);
65
+ * <button onClick={() => setIsExpanded(!isExpanded)}>
66
+ * <AnimatedChevronUpDown isUp={isExpanded} />
67
+ * </button>
68
+ * ```
69
+ */
31
70
  declare const AnimatedChevronUpDown: ({ isUp, height, width, }: SvgChevronProps) => react_jsx_runtime.JSX.Element;
32
71
 
72
+ /**
73
+ * Usynlig `<input>` til bruk for skjermlesere, typisk for custom radioknapper o.l..
74
+ *
75
+ * @component
76
+ * @param {Object} props - Standard HTML-attributter for komponenten.
77
+ *
78
+ * @returns {JSX.Element} Et usynlig `<input>`-element.
79
+
80
+ * @example
81
+ * ```tsx
82
+ * <label htmlFor="id">
83
+ * <HiddenInput id="id" />
84
+ * //visuell erstatning for input
85
+ * </label>
86
+ * });
87
+ * ```
88
+ */
89
+ declare const HiddenInput: ({ className, ...rest }: ComponentPropsWithRef<"input">) => react_jsx_runtime.JSX.Element;
90
+
91
+ /**
92
+ * Hook som returnerer en callback-funksjon som refererer til den nyeste versjonen av den opprinnelige funksjonen.
93
+ * Nyttig når du trenger en stabil referanse (f.eks. i event listeners), men fortsatt ønsker at den skal bruke den nyeste logikken.
94
+ *
95
+ * @template T - Typen til callback-funksjonen.
96
+ * @param {T | undefined} callback - Funksjonen som skal kalles.
97
+ * @param {DependencyList} [deps=[]] - Avhengigheter som styrer når den returnerte funksjonen skal oppdateres.
98
+ * @returns {T} En memorisert funksjon som peker til den nyeste versjonen av `callback`.
99
+ * @example
100
+ * ```tsx
101
+ * function MyComponent() {
102
+ * const [count, setCount] = useState(0);
103
+ *
104
+ * const handleClick = useCallbackRef(() => {
105
+ * console.log('Klikk med count:', count);
106
+ * }, [count]);
107
+ *
108
+ * useEffect(() => {
109
+ * window.addEventListener('click', handleClick);
110
+ * return () => window.removeEventListener('click', handleClick);
111
+ * }, [handleClick]);
112
+ *
113
+ * return <button onClick={() => setCount(c => c + 1)}>Øk</button>;
114
+ * }
115
+ * ```
116
+
117
+ */
118
+ declare function useCallbackRef<T extends (...args: Array<never>) => unknown>(callback: T | undefined, deps?: DependencyList): T;
119
+
120
+ /**
121
+ * Kombinerer refs for et element.
122
+ *
123
+ * @template T elementet som refereres til.
124
+ * @param {Array<Ref<T> | undefined>} refs array med refs.
125
+ * @returns {RefCallback<T>} callback med kombinerte refs.
126
+ * @example
127
+ * ```tsx
128
+ * function MyComponent(ref) {
129
+ *
130
+ * const itemRef = useRef<HTMLDivElement>(null);
131
+ * const combinedRef = useCombinedRef(ref, itemRef);
132
+ *
133
+ * return <div ref={combinedRef}>innhold</div>
134
+ * });
135
+ * ```
136
+ */
137
+ declare function useCombinedRef<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
138
+
139
+ interface UseControllableStateProps<T> {
140
+ /**Verdi. */
141
+ value?: T;
142
+ /**Default verdi. */
143
+ defaultValue?: T | (() => T);
144
+ /** `onChange` funksjon. */
145
+ onChange?: (value: T) => void;
146
+ }
147
+ /**
148
+ * The `useControllableState` hook returns the state and function that updates the state, just like React.useState does.
149
+ */
150
+ /**
151
+ * Håndterer bruk av state slik at den kan bli enten kontrollert eller ukontrollert ut av boksen.
152
+ * @template T typen til verdien.
153
+ * @param {{
154
+ * value?: T;
155
+ * defaultValue?: T | (() => T);
156
+ * onChange?: (value: T) => void;
157
+ * }} props verdi, default verdi ved ukontrollert state og funksjon til å kotrnollere `value`.
158
+ * @returns {[T, Dispatch<SetStateAction<T>>]} state og funksjon til å kontrollere den.
159
+ * @example
160
+ * ```tsx
161
+ * const MyComponent = ({
162
+ * onChange,
163
+ * checked: checkedProp,
164
+ * defaultChecked
165
+ * }) => {
166
+ * const [checked, setChecked] = useControllableState({
167
+ * value: checkedProp,
168
+ * defaultValue: defaultChecked ?? false,
169
+ * onChange,
170
+ * });
171
+ * return (
172
+ * <input
173
+ * checked={checked}
174
+ * onChange={e => setChecked(e.target.checked)}
175
+ * type="checkbox"
176
+ * />
177
+ * ) };
178
+ * ```
179
+ */
180
+ declare function useControllableState<T>(props: UseControllableStateProps<T>): [T, Dispatch<SetStateAction<T>>];
181
+ /**
182
+ * The `useControllableGroupState` hook returns the group value and handleChange function to control it.
183
+ */
184
+ interface UseControllableGroupStateProps<T> extends Pick<UseControllableStateProps<T>, 'defaultValue' | 'value'> {
185
+ onChange?: (event: ChangeEvent<HTMLInputElement>, value: T) => void;
186
+ }
187
+ declare function useControllableGroupState<T>(props: UseControllableGroupStateProps<T>): {
188
+ groupValue: T | undefined;
189
+ handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
190
+ };
191
+
192
+ type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
193
+ interface UseFloatPositionOptions {
194
+ /**
195
+ * Whether to update the position of the floating element on every animation frame if required.
196
+ * This is optimized for performance but can still be costly.
197
+ * @default true
198
+ */
199
+ animationFrame?: boolean;
200
+ /**
201
+ * `offset` is used to displace the floating element from its core placement.
202
+ * The value passed is logical, meaning its effect on the
203
+ * physical result is dependent on the writing direction (e.g. RTL).
204
+ * @default 8
205
+ */
206
+ offset?: number;
207
+ /**
208
+ * Where to place the floating element relative to its reference element.
209
+ * @default 'bottom'
210
+ */
211
+ placement?: Placement;
212
+ }
213
+ interface FloatingStyles {
214
+ position: Strategy;
215
+ top: number;
216
+ left: number;
217
+ }
218
+ interface UseFloatPosition {
219
+ refs: UseFloatingReturn['refs'];
220
+ styles: {
221
+ floating: FloatingStyles;
222
+ arrow: {
223
+ [x: string]: string | number;
224
+ position: Strategy;
225
+ top: string | number;
226
+ left: string | number;
227
+ transform: string;
228
+ } | undefined;
229
+ };
230
+ }
231
+ /**
232
+ * Håndterer posisjonering av et element i forhold til et annet element i DOM.
233
+ * @param {HTMLElement | null} arrowRef pil-elementet.
234
+ * @param {{AnimationFrame: boolean, offset: number, placement: Placement}} options alternativer for float.
235
+ * @returns {{
236
+ * refs: import('@floating-ui/react-dom').UseFloatingReturn['refs'],
237
+ * styles: {
238
+ * floating: import('@floating-ui/react-dom').FloatingStyles,
239
+ * arrow:
240
+ * undefined | {
241
+ * [x: string]: string | number;
242
+ * position: Strategy;
243
+ * top: string | number;
244
+ * left: string | number;
245
+ * transform: string;
246
+ * }
247
+ * }
248
+ * }} Objekt med refs og styling for floating UI.
249
+ * @example
250
+ * ```tsx
251
+ * function MyComponent() {
252
+ *
253
+ * // Hvis du trenger en pil
254
+ * const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
255
+ *
256
+ * const { refs, styles: positionStyles } = useFloatPosition(arrowElement, {
257
+ * placement: 'right',
258
+ * offset: 2,
259
+ * });
260
+ *
261
+ * return (
262
+ * <>
263
+ * <button ref={refs.setReference}>Anchor</button>
264
+ * <div
265
+ * ref={refs.setFloating}
266
+ * style={positionStyles.floating}
267
+ * >
268
+ * <div ref={setArrowElement} style={positionStyles.arrow}>
269
+ * // din pil, f.eks. svg
270
+ * </div>
271
+ * Innhold
272
+ * </div>
273
+ * </>
274
+ * };
275
+ * ```
276
+ */
277
+ declare const useFloatPosition: (arrowRef: HTMLElement | null, options?: UseFloatPositionOptions) => UseFloatPosition;
278
+
279
+ /**
280
+ * Fanger fokus i en loop inni et element.
281
+ * @template {HTMLElement} T typen til container-elementet som fanger fokus.
282
+ * @param {boolean} active om focus skal fanges, f.eks. når en modal åpnes.
283
+ * @param {RefObject<HTMLElement | null> | undefined} initialFocusRef `ref` til elementet som skal motta focus når focus trap er aktiv.
284
+ * @returns {RefObject<T | null>} `ref` til elementet som fanger fokus.
285
+ * @example
286
+ * ```tsx
287
+ * function MyComponent() {
288
+ *
289
+ * const [isOpen, setOpen] = useState(false);
290
+ * const componentRef = useFocusTrap<HTMLDivElement>(isOpen);
291
+ *
292
+ * return isOpen ? <div ref={componentRef}><button>click</button></div> : null;
293
+ *
294
+ * }
295
+ * ```
296
+ */
297
+ declare function useFocusTrap<T extends HTMLElement>(active: boolean, initialFocusRef?: RefObject<HTMLElement | null> | undefined): RefObject<T | null>;
298
+
299
+ /**
300
+ * Sjekker om komponenten er mounted i DOM.
301
+ *
302
+ * @returns {() => boolean} om komponenten er mounted.
303
+ * @example
304
+ * ```tsx
305
+ * function MyComponent() {
306
+ *
307
+ * const isMounted = useIsMounted();
308
+ *
309
+ * useEffect(() => {
310
+ * if(isMounted()) {
311
+ * // logikk når mounted
312
+ * }
313
+ * }, [isMounted]);
314
+ *
315
+ * });
316
+ * ```
317
+ *
318
+ */
319
+ declare const useIsMounted: () => (() => boolean);
320
+
321
+ /**
322
+ * Tillater effekter og animasjoner å bli gjennomført like etter et element blir lagt til eller like før det blir fjernet fra DOM.
323
+ * @param {boolean} isMounted om elementet er mounted.
324
+ * @param {number} unmountDelay hvor lenge transition skal vare før unmount.
325
+ * @returns {boolean} om den har trasisjonert inn.
326
+ * @example
327
+ * ```css
328
+ * // CSS
329
+ * .component {
330
+ * transition: opacity 0.2s;
331
+ * opacity: 0;
332
+ * }
333
+ *
334
+ * .transitionedIn.mounted {
335
+ * opacity: 1;
336
+ * }
337
+ * ```
338
+ * ```jsx
339
+ * // JSX
340
+ * function MyComponent(isMounted) {
341
+ *
342
+ * const hasTransitionedIn = useMountTransition(isMounted, 500);
343
+ *
344
+ * return isMounted || hasTransitionedIn ? (
345
+ * <div
346
+ * className={`component ${hasTransitionedIn && 'transitionedIn'} ${isMounted && 'mounted'}`}
347
+ * >
348
+ * innhold
349
+ * </div>)
350
+ * : null;
351
+ * };
352
+ * ```
353
+ */
354
+ declare const useMountTransition: (isMounted: boolean, unmountDelay: number) => boolean;
355
+
356
+ /**
357
+ * Kjører logikk når brukeren klikker utenfor espesifisert(e) element(er).
358
+ * @param {HTMLElement | null | undefined | Array<HTMLElement | null | undefined>} element HTML element(er) som overvåkes for klikk utenfor.
359
+ * @param {(event: MouseEvent | TouchEvent) => void} handler funksjonen som kjøres ved klikk utenfor.
360
+ * @returns {void}
361
+ * @example
362
+ * ```tsx
363
+ * * function MyComponent() {
364
+ * const [isOpen, setOpen] = useState(true);
365
+ * const ref = useRef<HTMLDivElement>(null);
366
+ * useOnClickOutside(ref.current, () => setOpen(false));
367
+ *
368
+ * return isOpen && <div ref={ref}>innhold</div>
369
+ * };
370
+ * ```
371
+ */
372
+ declare function useOnClickOutside(element: HTMLElement | null | undefined | Array<HTMLElement | null | undefined>, handler: (event: MouseEvent | TouchEvent) => void): void;
373
+
374
+ /**
375
+ * Kjører logikk når spesifisert(e) tast(er) blir trykt ned.
376
+ * @param {string} key tasten som trykkes.
377
+ * @param {(event: KeyboardEvent) => void} handler funksjonen som skal kjøres.
378
+ * @returns {void}
379
+ * @example
380
+ * ```tsx
381
+ * function MyComponent() {
382
+ * const [isOpen, setOpen] = useState(true);
383
+ * useOnKeyDown('Escape', () => setOpen(false));
384
+ *
385
+ * return isOpen ? <div>innhold</div> : null;
386
+ * }
387
+ * ```
388
+ */
389
+ declare const useOnKeyDown: (key: string | Array<string>, handler: (event: KeyboardEvent) => void) => void;
390
+
391
+ /**
392
+ * Returnerer fokus til et element når første eller siste barn i en container mister fokus ved tastaturnavigasjon.
393
+ * @template {HTMLElement} T typen til container som skal returnere fous.
394
+ * @param {boolean} active om container skal få fokus, f.eks. når en modal åpnes.
395
+ * @param {() => void} onBlur ekstra logikk når fokus forlater container.
396
+ * @param {HTMLElement | null | undefined} triggerElement elementet som skal få fokus når fokus forlater container.
397
+ * @returns {RefObject<T | null>} ref til container som skal returnere fokus.
398
+ * @example
399
+ * ```tsx
400
+ * const MyComponent() {
401
+ *
402
+ * const [isOpen, setOpen] = useState(false);
403
+ * const triggerRef = useRef<HTMLButtonElement>(null);
404
+ * const containerRef = useReturnFocusOnBlur<HTMLDivElement>(
405
+ * isOpen,
406
+ * () => setOpen(false),
407
+ * triggerRef.current,
408
+ * );
409
+ *
410
+ * return (
411
+ * <div>
412
+ * <button
413
+ * ref={triggerRef}
414
+ * onClick={() => setOpen(true)}
415
+ * >
416
+ * Åpne popover
417
+ * </button>
418
+ * {isOpen &&
419
+ * <div ref={containerRef}>
420
+ * <button>1</button>
421
+ * <button>2</button>
422
+ * </div>
423
+ * }
424
+ * </div>
425
+ * )
426
+ * }
427
+ * ```
428
+ */
429
+ declare function useReturnFocusOnBlur<T extends HTMLElement>(active: boolean, onBlur: () => void, triggerElement?: HTMLElement | null): RefObject<T | null>;
430
+
33
431
  type Direction$1 = 'row' | 'column';
34
432
 
35
433
  /**
@@ -154,14 +552,72 @@ type ExtractStrict<T, U extends T> = U;
154
552
  type Nullable<T> = T | null;
155
553
  type Callback<T> = (e: T) => void;
156
554
 
157
- type Props = BaseComponentProps<HTMLElement, {
158
- current: number;
159
- max: number;
160
- }>;
161
- declare function CharCounter(props: Props): react_jsx_runtime.JSX.Element;
162
- declare const renderCharCounter: (id: string, isShown: boolean, textLength: number, maxLength?: number) => react_jsx_runtime.JSX.Element | undefined;
555
+ declare const isKeyboardEvent: (e: Event | KeyboardEvent$1<Element>) => e is KeyboardEvent$1<Element>;
556
+ /**
557
+ * Bytter fokus mellom elementer i en gruppe med piltaster og ikke `Tab`, samt looper fokus i gruppen.
558
+ * @param {number} size antall elementer i gruppen.
559
+ * @param {boolean} active om fokus skal kontrolleres av hooken. Når status blir inaktiv vil fokusrekkefølge nullstilles.
560
+ * @param {'row' | 'column'} direction retning elementene blas i.
561
+ * @param {boolean} noWrap om indeksen skal 'wrappe' rundt til 0 hvis den går over size - 1, eller til size - 1 hvis den går under 0.
562
+ * @returns {[focusedIndex: number, setFocus: Dispatch<SetStateAction<number>>]} hook par: indeksen til fokuserte elemenentet og funksjonen som håndterer fokus.
563
+ * @example
564
+ * ```tsx
565
+ * import elements from './elements';
566
+ * import RoveItem from './RoveItem';
567
+ *
568
+ * function MyComponent() {
569
+ * const [focusedIndex, setFocus] = useRoveFocus(elements.length);
570
+ *
571
+ * return (
572
+ * <ul>
573
+ * {elements.map((element, index) => (
574
+ * <li key={element}>
575
+ * <RoveItem index={index} shouldFocus={focusedIndex === index} setFocus={setFocus}>{element.name}</RoveItem>
576
+ * </li>
577
+ * ))}
578
+ * </ul>)
579
+ * }
580
+ * ```
581
+ */
582
+ declare function useRoveFocus(size?: number, active?: boolean, direction?: Direction$1, noWrap?: boolean): [number, Dispatch<SetStateAction<number>>];
163
583
 
164
- declare const HiddenInput: ({ className, ...rest }: ComponentPropsWithRef<"input">) => react_jsx_runtime.JSX.Element;
584
+ declare enum ScreenSize {
585
+ XSmall = 0,
586
+ Small = 1,
587
+ Medium = 2,
588
+ Large = 3,
589
+ XLarge = 4
590
+ }
591
+ /**
592
+ * Sjekker skjermstørrelsen basert på brekkpunkter definerte i designsystemet.
593
+ * @returns den aktuelle skjermstørrelsen basert på {@link ScreenSize}.
594
+ * @example
595
+ * ```tsx
596
+ * function MyComponent() {
597
+ * const screenSize = useScreenSize();
598
+ * const isSmallScreen = screenSize === ScreenSize.Small;
599
+ *
600
+ * return <div className={isSmallScreen && 'smallDiv'} >innhold</div>
601
+ * }
602
+ * ```
603
+ */
604
+ declare const useScreenSize: () => ScreenSize;
605
+
606
+ /**
607
+ * Kjører logikk når vindusstørrelsen endrer seg.
608
+ * @param {() => void} handler funksjonen som skal kjøres.
609
+ * @returns {void}
610
+ * @example
611
+ * ```tsx
612
+ * function MyComponent() {
613
+ * const [width, setWidth] = useState<number>(window.innerWidth);
614
+ * useResize(() => setWidth(window.innerWidth));
615
+ *
616
+ * return <div>vindusstørrelse: {width}px</div>;
617
+ * }
618
+ * ```
619
+ */
620
+ declare const useWindowResize: (handler: () => void) => void;
165
621
 
166
622
  declare const BREAKPOINTS: readonly ["xs", "sm", "md", "lg", "xl"];
167
623
  type Breakpoint = (typeof BREAKPOINTS)[number];
@@ -246,533 +702,64 @@ interface PrimitiveLayoutProps {
246
702
  type ResponsiveProps = PrimitiveDisplayProps & PrimitiveLayoutProps;
247
703
  type ResponsiveStackProps = Omit<ResponsiveProps, 'display' | 'flexDirection'>;
248
704
 
249
- declare function TextOverflowEllipsisWrapper({ className, ...rest }: ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
250
- declare function TextOverflowEllipsisInner({ className, ...rest }: ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
705
+ declare const getLiteralScreenSize: (screenSize: ScreenSize) => Breakpoint;
251
706
 
707
+ type StylelessButtonProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'button'>;
252
708
  /**
253
- * Tekstfarger i kebab-case; camelCase blir deprecated, og kebab-case blir standarden for props som refererer til CSS-variabler.
254
- * TODO: fjerne cameCase på et tidspunkt.
709
+ * Normalisert `<button>` uten styling. Base for custom buttom styling.
710
+ *
711
+ * @component
712
+ * @template T ekstra props ved behov.
713
+ * @param {Object & T} props - Standard HTML-attributter for komponenten med mulig utvidelse.
714
+ *
715
+ * @returns {JSX.Element} `<button>`-element uten styling.
716
+
717
+ * @example
718
+ * ```tsx
719
+ * <StylelessButton className="min-styling">
720
+ * Tekst
721
+ * </StylelessButton>
722
+ * ```
255
723
  */
256
- declare const TEXT_COLORS: readonly ["text-on-action", "text-on-inverse", "text-on-status-default", "text-on-status-strong", "text-action-resting", "text-action-hover", "text-action-visited", "text-default", "text-requiredfield", "text-subtle", "text-medium", "text-on-notification", "icon-on-action", "icon-on-info-default", "icon-on-success-default", "icon-on-danger-default", "icon-on-warning-default", "icon-on-info-strong", "icon-on-success-strong", "icon-on-danger-strong", "icon-on-warning-strong", "icon-on-inverse", "icon-action-resting", "icon-action-hover", "icon-default", "icon-subtle", "icon-medium"];
257
- declare const TEXT_COLORS_CAMEL: readonly ["textOnAction", "textOnInverse", "textOnStatusDefault", "textOnStatusStrong", "textActionResting", "textActionHover", "textActionVisited", "textDefault", "textRequiredfield", "textSubtle", "textMedium", "textOnNotification", "iconOnAction", "iconOnInfoDefault", "iconOnSuccessDefault", "iconOnDangerDefault", "iconOnWarningDefault", "iconOnInfoStrong", "iconOnSuccessStrong", "iconOnDangerStrong", "iconOnWarningStrong", "iconOnInverse", "iconActionResting", "iconActionHover", "iconDefault", "iconSubtle", "iconMedium"];
258
- type DDSTextColor = (typeof TEXT_COLORS)[number];
259
- type DDSTextColorCamel = (typeof TEXT_COLORS_CAMEL)[number];
260
- type TextColor = DDSTextColor | DDSTextColorCamel | Property.Color;
724
+ declare const StylelessButton: ({ className, ...rest }: StylelessButtonProps) => react_jsx_runtime.JSX.Element;
261
725
 
262
- type TypographyBodyType = 'bodyXsmall' | 'bodySmall' | 'bodyMedium' | 'bodyLarge';
263
- type TypographyHeadingType = 'headingXxsmall' | 'headingXsmall' | 'headingSmall' | 'headingMedium' | 'headingLarge' | 'headingXlarge' | 'headingXxlarge';
264
- type TypographyLeadType = 'leadMedium';
265
- type TypographyAnchorType = 'a';
266
- type TypographyLabelType = 'labelMedium';
267
- type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType;
268
- type TypographyType = TypographyAnchorType | TypographyLabelType | OtherTypographyType;
269
- type StaticTypographyType = OtherTypographyType | TypographyLabelType;
270
- type HyphenTypographyType = 'body-xsmall' | 'body-small' | 'body-medium' | 'body-large' | 'heading-xxsmall' | 'heading-xsmall' | 'heading-small' | 'heading-medium' | 'heading-large' | 'heading-xlarge' | 'heading-xxlarge' | 'lead-medium' | 'a' | 'label-medium';
271
- type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
272
- interface BaseTypographyProps {
273
- /**Tekstfarge fra utvalget eller custom. **OBS!** Bruk farger fra `@dds-design-tokens` med navn i kebab-case, f.eks. `text-subtle`. */
274
- color?: TextColor;
275
- /**Spesifiserer om tekstelementet skal ha spacing definert i Elsa.
276
- * Brukes hovedsakelig i artikler og lignende.
277
- * **OBS!** har forskjellig virkning på ulike typografityper.
278
- * `body` og `lead`-typer får margin på bunnen, `heading`-typer får margin på bunnen og padding på toppen mens label får margin topp og bunn.
279
- * */
280
- withMargins?: boolean;
281
- /**HTML style. */
282
- style?: CSSProperties;
283
- }
284
- type TypographyComponentProps = BaseTypographyProps & {
285
- /**Setter `bold` styling. */
286
- bold?: boolean;
287
- /**Setter `italic` styling. */
288
- italic?: boolean;
289
- /**Setter en linje under. */
290
- underline?: boolean;
291
- /**HTML tag som skal brukes istedenfor default definert via `typographyType`. */
292
- as?: ElementType;
293
- };
294
-
295
- type AnchorTypographyProps = BaseComponentProps<HTMLAnchorElement, {
296
- /**nativ `href`-prop ved `typographyType='a'`. */
297
- href?: string | undefined;
298
- /** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
299
- externalLink?: boolean;
300
- /**nativ `target`-prop ved `typographyType='a'`. */
301
- target?: string;
302
- }, AnchorHTMLAttributes<HTMLAnchorElement>>;
303
- type LabelTypographyProps = BaseComponentProps<HTMLLabelElement, HTMLAttributes<HTMLLabelElement>>;
304
- type OtherTypographyProps = BaseComponentProps<HTMLElement, HTMLAttributes<HTMLElement>>;
305
- type TypographyProps = ({
306
- /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
307
- typographyType?: TypographyAnchorType;
308
- } & TypographyComponentProps & Omit<AnchorTypographyProps, 'color'>) | ({
309
- /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
310
- typographyType?: TypographyLabelType;
311
- } & TypographyComponentProps & Omit<LabelTypographyProps, 'color'>) | ({
312
- /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
313
- typographyType?: OtherTypographyType;
314
- } & TypographyComponentProps & Omit<OtherTypographyProps, 'color'>);
315
- declare const Typography: {
316
- (props: TypographyProps): react_jsx_runtime.JSX.Element;
317
- displayName: string;
318
- };
319
-
320
- /**
321
- * Join class names together.
322
- * Will filter out all falsy values.
323
- */
324
- declare function cn(...classNames: Array<unknown>): string;
325
-
326
- type SvgProps = {
327
- title?: string;
328
- } & SVGAttributes<SVGSVGElement>;
329
- type SvgIcon = (props: SvgProps) => JSX.Element;
330
-
331
- declare function SvgWrapper({ height, width, fill, className, title, children, ...props }: SvgProps): react_jsx_runtime.JSX.Element;
332
-
333
- type IconSize = 'small' | 'medium' | 'large' | 'inherit';
334
- type IconProps = BaseComponentProps<SVGSVGElement, {
335
- /**Ikonet importert fra `@norges-domstoler/dds-components`. */
336
- icon: SvgIcon;
337
- /**Størrelsen på ikonet.
338
- * @default "medium"
339
- */
340
- iconSize?: IconSize;
341
- /**Fargen på ikonet.
342
- * @default "currentcolor"
343
- */
344
- color?: TextColor;
345
- }>;
346
- declare function Icon(props: IconProps): react.JSX.Element;
347
- declare namespace Icon {
348
- var displayName: string;
349
- }
350
-
351
- declare const defaultTypographyType: TypographyBodyType;
352
- declare const defaultTypographyTypeClassName: HyphenTypographyType;
353
- declare const getElementType: (element: TypographyType) => ElementType;
354
- declare const isHeading: (type: TypographyType) => type is TypographyHeadingType;
355
- declare const isLegend: (as: ElementType) => boolean;
356
- declare const isCaption: (as: ElementType) => boolean;
357
- declare const inlineElements: Array<ElementType>;
358
- declare const isInlineElement: (as: ElementType) => as is InlineElement;
359
- declare function getTypographyCn(value: TypographyType): HyphenTypographyType;
360
- declare const getColorCn: (color?: TextColor) => string | null;
361
-
362
- type CaptionProps = BaseComponentPropsWithChildren<HTMLTableCaptionElement, BaseTypographyProps, Omit<ComponentProps<'caption'>, 'color'>>;
363
- declare const Caption: {
364
- ({ id, className, htmlProps, children, ...rest }: CaptionProps): react_jsx_runtime.JSX.Element;
365
- displayName: string;
366
- };
367
-
368
- type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
369
- type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
370
- /**Nivå på overskriften. Komponenten returnerer HTML heading element med dette nivået med default styling. */
371
- level: HeadingLevel;
372
- /**Spesifiserer typografistil basert på utvalget for HTML heading elementer. */
373
- typographyType?: TypographyHeadingType;
374
- } & BaseTypographyProps, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>>;
375
- declare const Heading: {
376
- ({ id, className, htmlProps, children, typographyType, level, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
377
- displayName: string;
378
- };
379
-
380
- type PickedHTMLAttributes$4 = Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
381
- interface BaseLabelProps {
382
- /** Om input knyttet til ledeteksten er påkrevd; påvirker styling. */
383
- showRequiredStyling?: boolean;
384
- /** Om input knyttet til ledeteksten er `read-only`; påvirker styling. */
385
- readOnly?: boolean;
386
- }
387
- type LabelProps = BaseComponentPropsWithChildren<HTMLLabelElement, BaseLabelProps & BaseTypographyProps & PickedHTMLAttributes$4, Omit<LabelHTMLAttributes<HTMLLabelElement>, keyof PickedHTMLAttributes$4 | 'color'>>;
388
- declare const Label: {
389
- ({ showRequiredStyling, readOnly, id, className, htmlProps, children, ...rest }: LabelProps): react_jsx_runtime.JSX.Element;
390
- displayName: string;
391
- };
392
-
393
- type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps & {
394
- /**Typografistil basert på utvalget for HTML heading elementer. */
395
- typographyType?: TypographyHeadingType;
396
- }, Omit<HTMLAttributes<HTMLLegendElement>, 'color'>>;
397
- declare const Legend: {
398
- ({ id, className, htmlProps, typographyType, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
399
- displayName: string;
400
- };
401
-
402
- type PickedHTMLAttributes$3 = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href' | 'target'>;
403
- type LinkProps = BaseComponentPropsWithChildren<HTMLAnchorElement, {
404
- /**Spesifiserer om lenken fører til et eksternt nettsted eller åpnes i nytt vindu. Påvirker styling og setter `target` prop. */
405
- external?: boolean;
406
- /**Om lenken kan få `:visited`-styling. */
407
- withVisited?: boolean;
408
- /**Spesifiserer typografistil basert på utvalget for brødtekst. Arver hvis ikke oppgitt. */
409
- typographyType?: TypographyBodyType;
410
- } & BaseTypographyProps & PickedHTMLAttributes$3, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof PickedHTMLAttributes$3 | 'color'>>;
411
- declare const Link: {
412
- ({ id, className, htmlProps, children, typographyType, withMargins, withVisited, external, target, style, color, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
413
- displayName: string;
414
- };
415
-
416
- type ParagraphProps = BaseComponentPropsWithChildren<HTMLParagraphElement, {
417
- /**Spesifiserer typografistil basert på utvalget for brødtekst og ingress. */
418
- typographyType?: TypographyBodyType | TypographyLeadType;
419
- } & BaseTypographyProps, Omit<HTMLAttributes<HTMLParagraphElement>, 'color'>>;
420
- declare const Paragraph: {
421
- ({ id, className, htmlProps, children, typographyType, ...rest }: ParagraphProps): react_jsx_runtime.JSX.Element;
422
- displayName: string;
423
- };
424
-
425
- interface CommonInputProps {
426
- /**Ledetekst. */
427
- label?: string;
428
- /**Bredde for inputfeltet. */
429
- width?: ResponsiveProps['width'];
430
- /**Hjelpetekst. */
431
- tip?: string;
432
- /**Feilmelding. Setter også error state. */
433
- errorMessage?: string;
434
- }
435
- type InputSize = Extract<Size, 'medium' | 'small' | 'xsmall'>;
436
- type InputProps = CommonInputProps & {
437
- /**Størrelse på inputfeltet.
438
- * @default "medium"
439
- */
440
- componentSize?: InputSize;
441
- } & Omit<ComponentPropsWithRef<'input'>, 'width'>;
442
- type StatefulInputProps = {
443
- hasErrorMessage: boolean;
444
- } & Omit<InputProps, keyof CommonInputProps>;
445
- type InputTypographyTypes = Record<InputSize, StaticTypographyType>;
446
-
447
- declare const Input: {
448
- ({ className, ...rest }: ComponentPropsWithRef<"input">): react_jsx_runtime.JSX.Element;
449
- displayName: string;
450
- };
451
- declare const StatefulInput: {
452
- ({ className, componentSize, hasErrorMessage, ...rest }: StatefulInputProps): react_jsx_runtime.JSX.Element;
453
- displayName: string;
454
- };
455
-
456
- type BoxProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveProps>;
457
- declare const Box: {
458
- <T extends ElementType = "div">({ id, className, style, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, height, maxHeight, minHeight, width, maxWidth, minWidth, position, left, right, bottom, top, overflow, overflowX, overflowY, display, textAlign, flexDirection, gap, columnGap, rowGap, alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexBasis, flexFlow, htmlProps, ...rest }: BoxProps<T>): react_jsx_runtime.JSX.Element;
459
- displayName: string;
460
- };
461
-
462
- type GridProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, Omit<{
463
- /** CSS `grid-template-columns`. Støtter standardverdier per brekkpunkt eller samme for alle skjermstørrelser.
464
- * @default {
465
- xs: 'repeat(var(--dds-grid-xs-count), minmax(0, 1fr))',
466
- sm: 'repeat(var(--dds-grid-sm-count), minmax(0, 1fr))',
467
- md: 'repeat(var(--dds-grid-md-count), minmax(0, 1fr))',
468
- lg: 'repeat(var(--dds-grid-lg-count), minmax(0, 1fr))',
469
- xl: 'repeat(var(--dds-grid-xl-count), minmax(0, 1fr))',
470
- }
471
- */
472
- gridTemplateColumns?: ResponsiveProp<Property.GridTemplateColumns>;
473
- } & ResponsiveProps, 'display'>>;
474
- declare const Grid: {
475
- <T extends ElementType = "div">({ id, className, htmlProps, gridTemplateColumns, columnGap, rowGap, marginInline, style, ...rest }: GridProps<T>): react_jsx_runtime.JSX.Element;
476
- displayName: string;
477
- };
478
-
479
- type RelativeColumnsOccupied = 'all' | 'firstHalf' | 'secondHalf';
480
- type ColumnsOccupied = ResponsiveProp<StandardProperties['gridColumn'] | RelativeColumnsOccupied>;
481
- type GridChildProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, {
482
- /**Hvilke kolonner innholdet skal okkupere. Støtter standardverdier for CSS `grid-column` og relative verider `'all'`, `'firstHalf'` eller `'secondHalf'`, per brekkpunkt eller samme for alle skjermstørrelser. */
483
- columnsOccupied?: ColumnsOccupied;
484
- /**CSS `justify-self`. Støtter verdi per brekkpunkt eller samme for alle skjermstørrelser. */
485
- justifySelf?: ResponsiveProp<Property.JustifySelf>;
486
- /**CSS `grid-row`. Støtter verdi per brekkpunkt eller samme for alle skjermstørrelser. */
487
- gridRow?: ResponsiveProp<Property.GridRow>;
488
- } & Omit<ResponsiveProps, 'display'>>;
489
- declare const GridChild: {
490
- <T extends ElementType = "div">({ id, className, htmlProps, style, gridRow, justifySelf, columnsOccupied, ...rest }: GridChildProps<T>): react_jsx_runtime.JSX.Element;
491
- displayName: string;
492
- };
493
-
494
- type PaperElevation = Elevation;
495
- type PaperBorder = BorderColor;
496
- type PaperBorderRadius = BorderRadius;
497
- type PickedAttributes$1<T extends ElementType = 'div'> = Pick<ComponentProps<T>, 'tabIndex' | 'role'>;
498
- type PaperProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, {
499
- /**I hvor stor grad flaten skal framheves. Støtter dds tokens. */
500
- elevation?: PaperElevation;
501
- /**Farge på kantlinje. Støtter dds tokens. */
502
- border?: PaperBorder;
503
- /**Hvor runde hjørner skal være. Støtter dds tokens. */
504
- borderRadius?: PaperBorderRadius;
505
- /**Bakgrunn. Støtter dds tokens. */
506
- background?: PaperBackground;
507
- } & ResponsiveProps & PickedAttributes$1, Omit<ComponentProps<T>, keyof PickedAttributes$1>>;
508
- declare const Paper: <T extends ElementType = "div">({ id, elevation, border, borderRadius, background, className, htmlProps, style, ...rest }: PaperProps<T>) => react_jsx_runtime.JSX.Element;
509
-
510
- type ShowHideProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, PrimitiveDisplayProps>;
511
- declare const ShowHide: {
512
- <T extends ElementType = "div">({ hideBelow, showBelow, className, htmlProps, id, ...rest }: ShowHideProps<T>): react_jsx_runtime.JSX.Element;
513
- displayName: string;
514
- };
515
-
516
- type VStackProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveStackProps>;
517
- declare const VStack: {
518
- <T extends ElementType = "div">({ id, className, htmlProps, ...rest }: VStackProps<T>): react_jsx_runtime.JSX.Element;
519
- displayName: string;
520
- };
521
-
522
- type HStackProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveStackProps>;
523
- declare const HStack: {
524
- <T extends ElementType = "div">({ id, className, htmlProps, ...rest }: HStackProps<T>): react_jsx_runtime.JSX.Element;
525
- displayName: string;
526
- };
527
-
528
- declare function getDefaultText(value?: string | number | ReadonlyArray<string>, defaultValue?: string | number | ReadonlyArray<string>): string;
529
- declare function getInputWidth(width?: ResponsiveProps['width'], defaultW?: ResponsiveProps['width'] | false | null): ResponsiveProps['width'];
530
-
531
- /**
532
- * Kombinerer refs for et element.
533
- * Eksempel på bruk:
534
- * ```
535
- * const MyComponent = ({ref, ...props}) => {
536
- *
537
- * const itemRef = useRef<HTMLDivElement>(null);
538
- * const combinedRef = useCombinedRef(ref, itemRef);
539
- *
540
- * return <div ref={combinedRef} {...props}>innhold</div>
541
- * });
542
- * ```
543
- * @param refs array med refs.
544
- * @template T elementet som refereres til.
545
- * @returns callback med kombinerte refs.
546
- *
547
- * {@link useCombinedRef}
548
- */
549
- declare function useCombinedRef<T>(...refs: Array<Ref<T> | undefined>): RefCallback<T>;
550
-
551
- type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
552
- interface UseFloatPositionOptions {
553
- /**
554
- * Whether to update the position of the floating element on every animation frame if required.
555
- * This is optimized for performance but can still be costly.
556
- * @default true
557
- */
558
- animationFrame?: boolean;
559
- /**
560
- * `offset` is used to displace the floating element from its core placement.
561
- * The value passed is logical, meaning its effect on the
562
- * physical result is dependent on the writing direction (e.g. RTL).
563
- * @default 8
564
- */
565
- offset?: number;
566
- /**
567
- * Where to place the floating element relative to its reference element.
568
- * @default 'bottom'
569
- */
570
- placement?: Placement;
571
- }
572
- interface FloatingStyles {
573
- position: Strategy;
574
- top: number;
575
- left: number;
576
- }
577
- interface UseFloatPosition {
578
- refs: UseFloatingReturn['refs'];
579
- styles: {
580
- floating: FloatingStyles;
581
- arrow: {
582
- [x: string]: string | number;
583
- position: Strategy;
584
- top: string | number;
585
- left: string | number;
586
- transform: string;
587
- } | undefined;
588
- };
589
- }
590
- declare const useFloatPosition: (arrowRef: HTMLElement | null, options?: UseFloatPositionOptions) => UseFloatPosition;
591
-
592
- /**
593
- * Fanger fokus i en loop inni et element. Typisk bruk:
594
- * ```
595
- * const MyComponent = (props) => {
596
- *
597
- * const componentRef = useFocusTrap<HTMLDivElement>(props.isOpen);
598
- *
599
- * return props.isOpen ? <div ref={componentRef}><button>click</button></div> : null;
600
- *
601
- * }
602
- * ```
603
- * @param active om focus skal fanges, f.eks. når en modal åpnes.
604
- * @param initialFocusRef Ref som skal motta focus når focus trap er aktiv.
605
- * @returns ref til elementet som fanger fokus.
606
- */
607
- declare function useFocusTrap<T extends HTMLElement>(active: boolean, initialFocusRef?: RefObject<HTMLElement | null> | undefined): RefObject<T | null>;
608
-
609
- declare const useIsMounted: () => () => boolean;
610
-
611
- /**
612
- * Tillater effekter og animasjoner å bli gjennomført like etter et element blir lagt til eller like før det blir fjernet fra DOM.
613
- * Typisk bruk:
614
- * ```
615
- * // CSS
616
- * .component {
617
- * transition: opacity 0.2s;
618
- * opacity: 0;
619
- * }
620
- *
621
- * .transitionedIn.mounted {
622
- * opacity: 1;
623
- * }
624
- *
625
- * const MyComponent = (props) => {
626
- *
627
- * const hasTransitionedIn = useMountTransition(props.isMounted, 500);
628
- *
629
- * return props.isMounted || hasTransitionedIn ? (
630
- * <div
631
- * className={`component ${hasTransitionedIn && 'transitionedIn'} ${props.isMounted && 'mounted'}`}
632
- * >
633
- * innhold
634
- * </div>)
635
- * : null;
636
- *
637
- * }
638
- * ```
639
- * @param isMounted om elementet er mounted.
640
- * @param unmountDelay hvor lenge transition skal vare før unmount.
641
- * @returns om transition er ferdig.
642
- */
643
- declare const useMountTransition: (isMounted: boolean, unmountDelay: number) => boolean;
644
-
645
- /**
646
- * Kjører logikk når brukeren klikker utenfor et element, f.eks at elementet fjernes fra DOM.
647
- * Typisk bruk:
648
- * ```
649
- * const [isOpen, setOpen] = useState(true);
650
- * const ref = useRef<HTMLElement>(null);
651
- * useOnClickOutside(ref.current, () => setOpen(false));
652
- *
653
- * return <div ref={ref}>innhold</div>
654
- * ```
655
- * @param element HTML elementet man klikker utenfor.
656
- * @param handler funksjonen som kjøres ved klikk utenfor.
657
- */
658
- declare function useOnClickOutside(element: HTMLElement | null | undefined | Array<HTMLElement | null | undefined>, handler: (event: MouseEvent | TouchEvent) => void): void;
659
-
660
- /**
661
- * Kjører logikk når en spesifisert tast blir trykt ned.
662
- * Typisk bruk:
663
- * ```
664
- * const [isOpen, setOpen] = useState(true);
665
- * const ref = useRef<HTMLElement>(null);
666
- * useOnKeyDown(['Escape', 'Esc'], () => setOpen(false));
667
- *
668
- * return isOpen ? <div>innhold</div> : null;
669
- * ```
670
- * @param key tasten som trykkes.
671
- * @param handler funksjonen som skal kjøres.
672
- */
673
- declare const useOnKeyDown: (key: string | Array<string>, handler: (event: KeyboardEvent) => void) => void;
674
-
675
- /**
676
- * Returnerer fokus til et element når første eller siste barn i en container mister fokus ved tastaturnavigasjon. Typisk bruk:
677
- * ```
678
- * const MyComponent = (props) => {
679
- *
680
- * const [isOpen, setOpen] = useState(true);
681
- * const close = () => setOpen(false);
682
- * const triggerRef = useRef<HTMLButtonElement>(null);
683
- * const containerRef = useReturnFocusOnBlur<HTMLDivElement>(
684
- * isOpen,
685
- * triggerRef.current,
686
- * () => close()
687
- * );
688
- *
689
- * return (
690
- * <div>
691
- * <button ref={triggerRef} >Åpne popover</button>
692
- * <div ref={containerRef}>
693
- * <button>gjør noe</button>
694
- * </div>
695
- * </div>
696
- * )
697
- * }
698
- * ```
699
- * @param active om container skal få fokus, f.eks. når en modal åpnes.
700
- * @param triggerElement elementet som skal få fokus når fokus forlater container.
701
- * @param onBlur ekstra logikk når fokus forlater container.
702
- * @returns ref til container som får fokus.
703
- */
704
- declare function useReturnFocusOnBlur<T extends HTMLElement>(active: boolean, onBlur: () => void, triggerElement?: HTMLElement | null): RefObject<T | null>;
705
-
706
- declare const isKeyboardEvent: (e: Event | KeyboardEvent$1<Element>) => e is KeyboardEvent$1<Element>;
726
+ type StylelessListProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'ul'>;
707
727
  /**
708
- * Bytter fokus mellom elementer i en gruppe med piltaster og ikke Tab, og looper fokus i gruppen. Typisk bruk:
709
- * ```
710
- * import elements from './elements';
711
- * import RoveItem from './RoveItem';
728
+ * Normalisert `<ul>` uten styling. Base for custom ul styling.
712
729
  *
713
- * const MyComponent = () => {
714
- * const [focus, setFocus] = useRoveFocus(elements.length);
730
+ * @component
731
+ * @template T ekstra props ved behov.
732
+ * @param {Object & T} props - Standard HTML-attributter for komponenten med mulig utvidelse.
715
733
  *
716
- * return (
717
- * <ul>
718
- * {elements.map((element, index) => (
719
- * <li key={element}>
720
- * <RoveItem index={index} focus={focus === index} setFocus={setFocus}>{element.name}</RoveItem>
721
- * </li>
722
- * ))}
723
- * </ul>)
724
- * }
734
+ * @returns {JSX.Element} `<ul>`-element uten styling.
735
+
736
+ * @example
737
+ * ```tsx
738
+ * <StylelessList className="min-styling">
739
+ * <li>item</li>
740
+ * <li>item</li>
741
+ * </StylelessList>
725
742
  * ```
726
- * @param size antall elementer i gruppen.
727
- * @param active om fokus skal kontrolleres av hooken. Når status blir inaktiv vil fokusrekkefølge nullstilles.
728
- * @param direction retning elementene blas i.
729
- * @param noWrap om indeksen skal 'wrappe' rundt til 0 hvis den går over size - 1, eller til size - 1 hvis den går under 0.
730
- * @returns hook par: indeksen til fokuserte elemenentet og funksjonen som håndterer fokus.
731
743
  */
732
- declare function useRoveFocus(size?: number, active?: boolean, direction?: Direction$1, noWrap?: boolean): [number, Dispatch<SetStateAction<number>>];
733
-
734
- declare enum ScreenSize {
735
- XSmall = 0,
736
- Small = 1,
737
- Medium = 2,
738
- Large = 3,
739
- XLarge = 4
740
- }
744
+ declare const StylelessList: ({ className, ...rest }: StylelessListProps) => react_jsx_runtime.JSX.Element;
745
+ type StylelessOListProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'ol'>;
741
746
  /**
742
- * Sjekker skjermstørrelsen basert brekkpunkter definerte i designsystemet. Eksempel på bruk:
743
- * ```
744
- * const MyComponent = () => {
745
- * const screenSize = useScreenSize();
746
- * const isSmallScreen = screenSize === ScreenSize.Small;
747
+ * Normalisert `<ol>` uten styling. Base for custom ol styling.
747
748
  *
748
- * return <div className={isSmallScreen && 'smallDiv'} >innhold</div>
749
- * }
750
- * ```
751
- * @returns den aktuelle skjermstørrelsen basert på {@link ScreenSize}.
752
- */
753
- declare const useScreenSize: () => ScreenSize;
754
-
755
- /**
756
- * Kjører logikk når vindusstørrelsen endrer seg.
757
- * Typisk bruk:
758
- * ```
759
- * const [width, setWidth] = useState<number>(window.innerWidth);
760
- * useResize(() => setWidth(window.innerWidth));
749
+ * @component
750
+ * @template T ekstra props ved behov.
751
+ * @param {Object & T} props - Standard HTML-attributter for komponenten med mulig utvidelse.
761
752
  *
762
- * return <div>vindusstørrelse: {width}px</div>;
753
+ * @returns {JSX.Element} `<ol>`-element uten styling.
754
+
755
+ * @example
756
+ * ```tsx
757
+ * <StylelessOList className="min-styling">
758
+ * <li>item</li>
759
+ * <li>item</li>
760
+ * </StylelessOList>
763
761
  * ```
764
- * @param handler funksjonen som skal kjøres.
765
762
  */
766
- declare const useWindowResize: (handler: () => void) => void;
767
-
768
- declare const getLiteralScreenSize: (screenSize: ScreenSize) => Breakpoint;
769
-
770
- type StylelessButtonProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'button'>;
771
- declare const StylelessButton: ({ className, ...rest }: StylelessButtonProps) => react_jsx_runtime.JSX.Element;
772
-
773
- type StylelessListProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'ul'>;
774
- declare const StylelessList: ({ className, ...rest }: StylelessListProps) => react_jsx_runtime.JSX.Element;
775
- type StylelessOListProps<TProps extends object = object> = TProps & ComponentPropsWithRef<'ol'>;
776
763
  declare const StylelessOList: ({ className, ...rest }: StylelessOListProps) => react_jsx_runtime.JSX.Element;
777
764
 
778
765
  /**
@@ -818,29 +805,108 @@ declare const hideInput: {
818
805
  width: string;
819
806
  margin: number;
820
807
  };
821
- declare const inheritLinkStyling: {
822
- color: string;
823
- textDecoration: string;
808
+ declare const inheritLinkStyling: {
809
+ color: string;
810
+ textDecoration: string;
811
+ };
812
+ declare const removeButtonStyling: {
813
+ background: string;
814
+ color: string;
815
+ border: string;
816
+ padding: number;
817
+ font: string;
818
+ cursor: string;
819
+ outline: string;
820
+ };
821
+ declare const removeListStyling: {
822
+ listStyle: string;
823
+ padding: number;
824
+ margin: number;
825
+ };
826
+ declare const normalizeButton: {
827
+ margin: number;
828
+ textTransform: Property.TextTransform;
829
+ };
830
+
831
+ type BoxProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveProps>;
832
+ declare const Box: {
833
+ <T extends ElementType = "div">({ id, className, style, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, height, maxHeight, minHeight, width, maxWidth, minWidth, position, left, right, bottom, top, overflow, overflowX, overflowY, display, textAlign, flexDirection, gap, columnGap, rowGap, alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexBasis, flexFlow, htmlProps, ...rest }: BoxProps<T>): react_jsx_runtime.JSX.Element;
834
+ displayName: string;
835
+ };
836
+
837
+ type GridProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, Omit<{
838
+ /** CSS `grid-template-columns`. Støtter standardverdier per brekkpunkt eller samme for alle skjermstørrelser.
839
+ * @default {
840
+ xs: 'repeat(var(--dds-grid-xs-count), minmax(0, 1fr))',
841
+ sm: 'repeat(var(--dds-grid-sm-count), minmax(0, 1fr))',
842
+ md: 'repeat(var(--dds-grid-md-count), minmax(0, 1fr))',
843
+ lg: 'repeat(var(--dds-grid-lg-count), minmax(0, 1fr))',
844
+ xl: 'repeat(var(--dds-grid-xl-count), minmax(0, 1fr))',
845
+ }
846
+ */
847
+ gridTemplateColumns?: ResponsiveProp<Property.GridTemplateColumns>;
848
+ } & ResponsiveProps, 'display'>>;
849
+ declare const Grid: {
850
+ <T extends ElementType = "div">({ id, className, htmlProps, gridTemplateColumns, columnGap, rowGap, marginInline, style, ...rest }: GridProps<T>): react_jsx_runtime.JSX.Element;
851
+ displayName: string;
852
+ };
853
+
854
+ type RelativeColumnsOccupied = 'all' | 'firstHalf' | 'secondHalf';
855
+ type ColumnsOccupied = ResponsiveProp<StandardProperties['gridColumn'] | RelativeColumnsOccupied>;
856
+ type GridChildProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, {
857
+ /**Hvilke kolonner innholdet skal okkupere. Støtter standardverdier for CSS `grid-column` og relative verider `'all'`, `'firstHalf'` eller `'secondHalf'`, per brekkpunkt eller samme for alle skjermstørrelser. */
858
+ columnsOccupied?: ColumnsOccupied;
859
+ /**CSS `justify-self`. Støtter verdi per brekkpunkt eller samme for alle skjermstørrelser. */
860
+ justifySelf?: ResponsiveProp<Property.JustifySelf>;
861
+ /**CSS `grid-row`. Støtter verdi per brekkpunkt eller samme for alle skjermstørrelser. */
862
+ gridRow?: ResponsiveProp<Property.GridRow>;
863
+ } & Omit<ResponsiveProps, 'display'>>;
864
+ declare const GridChild: {
865
+ <T extends ElementType = "div">({ id, className, htmlProps, style, gridRow, justifySelf, columnsOccupied, ...rest }: GridChildProps<T>): react_jsx_runtime.JSX.Element;
866
+ displayName: string;
824
867
  };
825
- declare const removeButtonStyling: {
826
- background: string;
827
- color: string;
828
- border: string;
829
- padding: number;
830
- font: string;
831
- cursor: string;
832
- outline: string;
868
+
869
+ type PaperElevation = Elevation;
870
+ type PaperBorder = BorderColor;
871
+ type PaperBorderRadius = BorderRadius;
872
+ type PickedAttributes$1<T extends ElementType = 'div'> = Pick<ComponentProps<T>, 'tabIndex' | 'role'>;
873
+ type PaperProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, {
874
+ /**I hvor stor grad flaten skal framheves. Støtter dds tokens. */
875
+ elevation?: PaperElevation;
876
+ /**Farge på kantlinje. Støtter dds tokens. */
877
+ border?: PaperBorder;
878
+ /**Hvor runde hjørner skal være. Støtter dds tokens. */
879
+ borderRadius?: PaperBorderRadius;
880
+ /**Bakgrunn. Støtter dds tokens. */
881
+ background?: PaperBackground;
882
+ } & ResponsiveProps & PickedAttributes$1, Omit<ComponentProps<T>, keyof PickedAttributes$1>>;
883
+ declare const Paper: <T extends ElementType = "div">({ id, elevation, border, borderRadius, background, className, htmlProps, style, ...rest }: PaperProps<T>) => react_jsx_runtime.JSX.Element;
884
+
885
+ type ShowHideProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, PrimitiveDisplayProps>;
886
+ declare const ShowHide: {
887
+ <T extends ElementType = "div">({ hideBelow, showBelow, className, htmlProps, id, ...rest }: ShowHideProps<T>): react_jsx_runtime.JSX.Element;
888
+ displayName: string;
833
889
  };
834
- declare const removeListStyling: {
835
- listStyle: string;
836
- padding: number;
837
- margin: number;
890
+
891
+ type VStackProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveStackProps>;
892
+ declare const VStack: {
893
+ <T extends ElementType = "div">({ id, className, htmlProps, ...rest }: VStackProps<T>): react_jsx_runtime.JSX.Element;
894
+ displayName: string;
838
895
  };
839
- declare const normalizeButton: {
840
- margin: number;
841
- textTransform: Property.TextTransform;
896
+
897
+ type HStackProps<T extends ElementType = 'div'> = PolymorphicBaseComponentProps<T, ResponsiveStackProps>;
898
+ declare const HStack: {
899
+ <T extends ElementType = "div">({ id, className, htmlProps, ...rest }: HStackProps<T>): react_jsx_runtime.JSX.Element;
900
+ displayName: string;
842
901
  };
843
902
 
903
+ type SvgProps = {
904
+ title?: string;
905
+ } & SVGAttributes<SVGSVGElement>;
906
+ type SvgIcon = (props: SvgProps) => JSX.Element;
907
+
908
+ declare function SvgWrapper({ height, width, fill, className, title, children, ...props }: SvgProps): react_jsx_runtime.JSX.Element;
909
+
844
910
  declare function AddressShieldedIcon(props: SvgProps): react_jsx_runtime.JSX.Element;
845
911
 
846
912
  declare function AgreementIcon(props: SvgProps): react_jsx_runtime.JSX.Element;
@@ -1322,6 +1388,12 @@ declare namespace index {
1322
1388
  export { index_AddressShieldedIcon as AddressShieldedIcon, index_AgreementIcon as AgreementIcon, index_AppsIcon as AppsIcon, index_ArchiveIcon as ArchiveIcon, index_ArrowDownIcon as ArrowDownIcon, index_ArrowLeftIcon as ArrowLeftIcon, index_ArrowRightIcon as ArrowRightIcon, index_ArrowUpIcon as ArrowUpIcon, index_AttachmentIcon as AttachmentIcon, index_BarChartBoxedIcon as BarChartBoxedIcon, index_BarChartIcon as BarChartIcon, index_BlockIcon as BlockIcon, index_BookIcon as BookIcon, index_BuildCircledIcon as BuildCircledIcon, index_BuildIcon as BuildIcon, index_CalendarIcon as CalendarIcon, index_CalendarMonthIcon as CalendarMonthIcon, index_CalendarViewDayIcon as CalendarViewDayIcon, index_CalendarViewMonthIcon as CalendarViewMonthIcon, index_CalendarViewWeekIcon as CalendarViewWeekIcon, index_CallIcon as CallIcon, index_CaringIcon as CaringIcon, index_ChatIcon as ChatIcon, index_CheckCircledIcon as CheckCircledIcon, index_CheckIcon as CheckIcon, index_ChecklistIcon as ChecklistIcon, index_ChevronDownIcon as ChevronDownIcon, index_ChevronFirstIcon as ChevronFirstIcon, index_ChevronLargeLeftIcon as ChevronLargeLeftIcon, index_ChevronLargeRightIcon as ChevronLargeRightIcon, index_ChevronLastIcon as ChevronLastIcon, index_ChevronLeftIcon as ChevronLeftIcon, index_ChevronRightIcon as ChevronRightIcon, index_ChevronUpIcon as ChevronUpIcon, index_CloseCircledIcon as CloseCircledIcon, index_CloseIcon as CloseIcon, index_CloseSmallIcon as CloseSmallIcon, index_CloudIcon as CloudIcon, index_CollapseIcon as CollapseIcon, index_CommentIcon as CommentIcon, index_CopyIcon as CopyIcon, index_CourtIcon as CourtIcon, index_DateRangeIcon as DateRangeIcon, index_DeathsIcon as DeathsIcon, index_DoubleChevronLeftIcon as DoubleChevronLeftIcon, index_DoubleChevronRightIcon as DoubleChevronRightIcon, index_DownloadDoneIcon as DownloadDoneIcon, index_DownloadIcon as DownloadIcon, index_DragHandleIcon as DragHandleIcon, index_EditIcon as EditIcon, index_ErrorIcon as ErrorIcon, index_ExclaimIcon as ExclaimIcon, index_ExpandIcon as ExpandIcon, index_FacebookIcon as FacebookIcon, index_FamilyIcon as FamilyIcon, index_FeedbackIcon as FeedbackIcon, index_FileAddIcon as FileAddIcon, index_FileIcon as FileIcon, index_FileShieldedIcon as FileShieldedIcon, index_FileTextIcon as FileTextIcon, index_FilterIcon as FilterIcon, index_FilterListIcon as FilterListIcon, index_FilterListOffIcon as FilterListOffIcon, index_FilterOffIcon as FilterOffIcon, index_FindInPageIcon as FindInPageIcon, index_FlickrIcon as FlickrIcon, index_FolderAddIcon as FolderAddIcon, index_FolderIcon as FolderIcon, index_FolderShieldedIcon as FolderShieldedIcon, index_FullscreenExitIcon as FullscreenExitIcon, index_FullscreenIcon as FullscreenIcon, index_GavelIcon as GavelIcon, index_GuardianIcon as GuardianIcon, index_HelpFilledIcon as HelpFilledIcon, index_HelpIcon as HelpIcon, index_HelpSimpleIcon as HelpSimpleIcon, index_HomeIcon as HomeIcon, index_HourglassBottomIcon as HourglassBottomIcon, index_HourglassDisabledIcon as HourglassDisabledIcon, index_HourglassEmptyIcon as HourglassEmptyIcon, index_HourglassFullIcon as HourglassFullIcon, index_HourglassTopIcon as HourglassTopIcon, index_ImageIcon as ImageIcon, index_InfoIcon as InfoIcon, index_InstagramIcon as InstagramIcon, index_JordskifterettIcon as JordskifterettIcon, index_JordskiftesakIcon as JordskiftesakIcon, index_KeyIcon as KeyIcon, index_LagmannsrettIcon as LagmannsrettIcon, index_LanguageIcon as LanguageIcon, index_LibraryAddIcon as LibraryAddIcon, index_LineChartIcon as LineChartIcon, index_LinkIcon as LinkIcon, index_LinkOffIcon as LinkOffIcon, index_LinkedInIcon as LinkedInIcon, index_ListAltIcon as ListAltIcon, index_ListIcon as ListIcon, index_LocationIcon as LocationIcon, index_LockIcon as LockIcon, index_LockOpenIcon as LockOpenIcon, index_LoginIcon as LoginIcon, index_LogoutIcon as LogoutIcon, index_MailIcon as MailIcon, index_MailOpenIcon as MailOpenIcon, index_MenuIcon as MenuIcon, index_MinusCirledIcon as MinusCirledIcon, index_MinusIcon as MinusIcon, index_MoreHorizontalIcon as MoreHorizontalIcon, index_MoreVerticalIcon as MoreVerticalIcon, index_NotarialIcon as NotarialIcon, index_NotificationsIcon as NotificationsIcon, index_NotificationsOffIcon as NotificationsOffIcon, index_OnlineMeetingIcon as OnlineMeetingIcon, index_OpenExternalIcon as OpenExternalIcon, index_PayoutIcon as PayoutIcon, index_PdfIcon as PdfIcon, index_PersonAddIcon as PersonAddIcon, index_PersonIcon as PersonIcon, index_PersonShieldedIcon as PersonShieldedIcon, index_PinIcon as PinIcon, index_PlusCircledIcon as PlusCircledIcon, index_PlusIcon as PlusIcon, index_PowerOfAttorneyIcon as PowerOfAttorneyIcon, index_PrintIcon as PrintIcon, index_PropertyIcon as PropertyIcon, index_PublishIcon as PublishIcon, index_QuestionAnswerIcon as QuestionAnswerIcon, index_ReceiptIcon as ReceiptIcon, index_RedoIcon as RedoIcon, index_RefreshIcon as RefreshIcon, index_ReplayIcon as ReplayIcon, index_SearchIcon as SearchIcon, index_SettingsIcon as SettingsIcon, index_SmsIcon as SmsIcon, index_StarFilledIcon as StarFilledIcon, index_StarHalfFilled as StarHalfFilled, index_StarIcon as StarIcon, index_SyncIcon as SyncIcon, index_ThumbDownFilledIcon as ThumbDownFilledIcon, index_ThumbDownIcon as ThumbDownIcon, index_ThumbUpFilledIcon as ThumbUpFilledIcon, index_ThumbUpIcon as ThumbUpIcon, index_TimeIcon as TimeIcon, index_TingrettIcon as TingrettIcon, index_TipIcon as TipIcon, index_TrashIcon as TrashIcon, index_TrendingDownIcon as TrendingDownIcon, index_TrendingUpIcon as TrendingUpIcon, index_UndoIcon as UndoIcon, index_UnfoldLessIcon as UnfoldLessIcon, index_UnfoldMoreIcon as UnfoldMoreIcon, index_UploadIcon as UploadIcon, index_VisibilityOffIcon as VisibilityOffIcon, index_VisibilityOnIcon as VisibilityOnIcon, index_WarningIcon as WarningIcon, index_WebexIcon as WebexIcon, index_XIcon as XIcon, index_ZoomInIcon as ZoomInIcon, index_ZoomOutIcon as ZoomOutIcon };
1323
1389
  }
1324
1390
 
1391
+ /**
1392
+ * Join class names together.
1393
+ * Will filter out all falsy values.
1394
+ */
1395
+ declare function cn(...classNames: Array<unknown>): string;
1396
+
1325
1397
  type DdsTheme = keyof typeof ddsTokens;
1326
1398
  interface ThemeContextProps {
1327
1399
  theme: DdsTheme;
@@ -2165,6 +2237,187 @@ declare const Accordion: {
2165
2237
  displayName: string;
2166
2238
  };
2167
2239
 
2240
+ declare function TextOverflowEllipsisWrapper({ className, ...rest }: ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
2241
+ declare function TextOverflowEllipsisInner({ className, ...rest }: ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
2242
+
2243
+ /**
2244
+ * Tekstfarger i kebab-case; camelCase blir deprecated, og kebab-case blir standarden for props som refererer til CSS-variabler.
2245
+ * TODO: fjerne cameCase på et tidspunkt.
2246
+ */
2247
+ declare const TEXT_COLORS: readonly ["text-on-action", "text-on-inverse", "text-on-status-default", "text-on-status-strong", "text-action-resting", "text-action-hover", "text-action-visited", "text-default", "text-requiredfield", "text-subtle", "text-medium", "text-on-notification", "icon-on-action", "icon-on-info-default", "icon-on-success-default", "icon-on-danger-default", "icon-on-warning-default", "icon-on-info-strong", "icon-on-success-strong", "icon-on-danger-strong", "icon-on-warning-strong", "icon-on-inverse", "icon-action-resting", "icon-action-hover", "icon-default", "icon-subtle", "icon-medium"];
2248
+ declare const TEXT_COLORS_CAMEL: readonly ["textOnAction", "textOnInverse", "textOnStatusDefault", "textOnStatusStrong", "textActionResting", "textActionHover", "textActionVisited", "textDefault", "textRequiredfield", "textSubtle", "textMedium", "textOnNotification", "iconOnAction", "iconOnInfoDefault", "iconOnSuccessDefault", "iconOnDangerDefault", "iconOnWarningDefault", "iconOnInfoStrong", "iconOnSuccessStrong", "iconOnDangerStrong", "iconOnWarningStrong", "iconOnInverse", "iconActionResting", "iconActionHover", "iconDefault", "iconSubtle", "iconMedium"];
2249
+ type DDSTextColor = (typeof TEXT_COLORS)[number];
2250
+ type DDSTextColorCamel = (typeof TEXT_COLORS_CAMEL)[number];
2251
+ type TextColor = DDSTextColor | DDSTextColorCamel | Property.Color;
2252
+
2253
+ type TypographyBodyType = 'bodyXsmall' | 'bodySmall' | 'bodyMedium' | 'bodyLarge';
2254
+ type TypographyHeadingType = 'headingXxsmall' | 'headingXsmall' | 'headingSmall' | 'headingMedium' | 'headingLarge' | 'headingXlarge' | 'headingXxlarge';
2255
+ type TypographyLeadType = 'leadMedium';
2256
+ type TypographyAnchorType = 'a';
2257
+ type TypographyLabelType = 'labelMedium';
2258
+ type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType;
2259
+ type TypographyType = TypographyAnchorType | TypographyLabelType | OtherTypographyType;
2260
+ type StaticTypographyType = OtherTypographyType | TypographyLabelType;
2261
+ type HyphenTypographyType = 'body-xsmall' | 'body-small' | 'body-medium' | 'body-large' | 'heading-xxsmall' | 'heading-xsmall' | 'heading-small' | 'heading-medium' | 'heading-large' | 'heading-xlarge' | 'heading-xxlarge' | 'lead-medium' | 'a' | 'label-medium';
2262
+ type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
2263
+ interface BaseTypographyProps {
2264
+ /**Tekstfarge fra utvalget eller custom. **OBS!** Bruk farger fra `@dds-design-tokens` med navn i kebab-case, f.eks. `text-subtle`. */
2265
+ color?: TextColor;
2266
+ /**Spesifiserer om tekstelementet skal ha spacing definert i Elsa.
2267
+ * Brukes hovedsakelig i artikler og lignende.
2268
+ * **OBS!** har forskjellig virkning på ulike typografityper.
2269
+ * `body` og `lead`-typer får margin på bunnen, `heading`-typer får margin på bunnen og padding på toppen mens label får margin topp og bunn.
2270
+ * */
2271
+ withMargins?: boolean;
2272
+ /**HTML style. */
2273
+ style?: CSSProperties;
2274
+ }
2275
+ type TypographyComponentProps = BaseTypographyProps & {
2276
+ /**Setter `bold` styling. */
2277
+ bold?: boolean;
2278
+ /**Setter `italic` styling. */
2279
+ italic?: boolean;
2280
+ /**Setter en linje under. */
2281
+ underline?: boolean;
2282
+ /**HTML tag som skal brukes istedenfor default definert via `typographyType`. */
2283
+ as?: ElementType;
2284
+ };
2285
+
2286
+ type AnchorTypographyProps = BaseComponentProps<HTMLAnchorElement, {
2287
+ /**nativ `href`-prop ved `typographyType='a'`. */
2288
+ href?: string | undefined;
2289
+ /** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
2290
+ externalLink?: boolean;
2291
+ /**nativ `target`-prop ved `typographyType='a'`. */
2292
+ target?: string;
2293
+ }, AnchorHTMLAttributes<HTMLAnchorElement>>;
2294
+ type LabelTypographyProps = BaseComponentProps<HTMLLabelElement, HTMLAttributes<HTMLLabelElement>>;
2295
+ type OtherTypographyProps = BaseComponentProps<HTMLElement, HTMLAttributes<HTMLElement>>;
2296
+ type TypographyProps = ({
2297
+ /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
2298
+ typographyType?: TypographyAnchorType;
2299
+ } & TypographyComponentProps & Omit<AnchorTypographyProps, 'color'>) | ({
2300
+ /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
2301
+ typographyType?: TypographyLabelType;
2302
+ } & TypographyComponentProps & Omit<LabelTypographyProps, 'color'>) | ({
2303
+ /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under. */
2304
+ typographyType?: OtherTypographyType;
2305
+ } & TypographyComponentProps & Omit<OtherTypographyProps, 'color'>);
2306
+ declare const Typography: {
2307
+ (props: TypographyProps): react_jsx_runtime.JSX.Element;
2308
+ displayName: string;
2309
+ };
2310
+
2311
+ interface CommonInputProps {
2312
+ /**Ledetekst. */
2313
+ label?: string;
2314
+ /**Bredde for inputfeltet. Kan settes per brekkpunkt, manglende brekkpunter får da default bredde. */
2315
+ width?: ResponsiveProps['width'];
2316
+ /**Hjelpetekst. */
2317
+ tip?: string;
2318
+ /**Feilmelding. Setter også error state. */
2319
+ errorMessage?: string;
2320
+ }
2321
+ type InputSize = Extract<Size, 'medium' | 'small' | 'xsmall'>;
2322
+ type InputProps = CommonInputProps & {
2323
+ /**Størrelse på inputfeltet.
2324
+ * @default "medium"
2325
+ */
2326
+ componentSize?: InputSize;
2327
+ } & Omit<ComponentPropsWithRef<'input'>, 'width'>;
2328
+
2329
+ type IconSize = 'small' | 'medium' | 'large' | 'inherit';
2330
+ type IconProps = BaseComponentProps<SVGSVGElement, {
2331
+ /**Ikonet importert fra `@norges-domstoler/dds-components`. */
2332
+ icon: SvgIcon;
2333
+ /**Størrelsen på ikonet.
2334
+ * @default "medium"
2335
+ */
2336
+ iconSize?: IconSize;
2337
+ /**Fargen på ikonet.
2338
+ * @default "currentcolor"
2339
+ */
2340
+ color?: TextColor;
2341
+ }, Omit<HTMLAttributes<SVGSVGElement>, 'color'>>;
2342
+ declare function Icon(props: IconProps): react.JSX.Element;
2343
+ declare namespace Icon {
2344
+ var displayName: string;
2345
+ }
2346
+
2347
+ declare const defaultTypographyType: TypographyBodyType;
2348
+ declare const defaultTypographyTypeClassName: HyphenTypographyType;
2349
+ declare const getElementType: (element: TypographyType) => ElementType;
2350
+ declare const isHeading: (type: TypographyType) => type is TypographyHeadingType;
2351
+ declare const isLegend: (as: ElementType) => boolean;
2352
+ declare const isCaption: (as: ElementType) => boolean;
2353
+ declare const inlineElements: Array<ElementType>;
2354
+ declare const isInlineElement: (as: ElementType) => as is InlineElement;
2355
+ declare function getTypographyCn(value: TypographyType): HyphenTypographyType;
2356
+ declare const getColorCn: (color?: TextColor) => string | null;
2357
+
2358
+ type CaptionProps = BaseComponentPropsWithChildren<HTMLTableCaptionElement, BaseTypographyProps, Omit<ComponentProps<'caption'>, 'color'>>;
2359
+ declare const Caption: {
2360
+ ({ id, className, htmlProps, children, ...rest }: CaptionProps): react_jsx_runtime.JSX.Element;
2361
+ displayName: string;
2362
+ };
2363
+
2364
+ type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
2365
+ type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
2366
+ /**Nivå på overskriften. Komponenten returnerer HTML heading element med dette nivået med default styling. */
2367
+ level: HeadingLevel;
2368
+ /**Spesifiserer typografistil basert på utvalget for HTML heading elementer. */
2369
+ typographyType?: TypographyHeadingType;
2370
+ } & BaseTypographyProps, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>>;
2371
+ declare const Heading: {
2372
+ ({ id, className, htmlProps, children, typographyType, level, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
2373
+ displayName: string;
2374
+ };
2375
+
2376
+ type PickedHTMLAttributes$4 = Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
2377
+ interface BaseLabelProps {
2378
+ /** Om input knyttet til ledeteksten er påkrevd; påvirker styling. */
2379
+ showRequiredStyling?: boolean;
2380
+ /** Om input knyttet til ledeteksten er `read-only`; påvirker styling. */
2381
+ readOnly?: boolean;
2382
+ }
2383
+ type LabelProps = BaseComponentPropsWithChildren<HTMLLabelElement, BaseLabelProps & BaseTypographyProps & PickedHTMLAttributes$4, Omit<LabelHTMLAttributes<HTMLLabelElement>, keyof PickedHTMLAttributes$4 | 'color'>>;
2384
+ declare const Label: {
2385
+ ({ showRequiredStyling, readOnly, id, className, htmlProps, children, ...rest }: LabelProps): react_jsx_runtime.JSX.Element;
2386
+ displayName: string;
2387
+ };
2388
+
2389
+ type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps & {
2390
+ /**Typografistil basert på utvalget for HTML heading elementer. */
2391
+ typographyType?: TypographyHeadingType;
2392
+ }, Omit<HTMLAttributes<HTMLLegendElement>, 'color'>>;
2393
+ declare const Legend: {
2394
+ ({ id, className, htmlProps, typographyType, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
2395
+ displayName: string;
2396
+ };
2397
+
2398
+ type PickedHTMLAttributes$3 = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href' | 'target'>;
2399
+ type LinkProps = BaseComponentPropsWithChildren<HTMLAnchorElement, {
2400
+ /**Spesifiserer om lenken fører til et eksternt nettsted eller åpnes i nytt vindu. Påvirker styling og setter `target` prop. */
2401
+ external?: boolean;
2402
+ /**Om lenken kan få `:visited`-styling. */
2403
+ withVisited?: boolean;
2404
+ /**Spesifiserer typografistil basert på utvalget for brødtekst. Arver hvis ikke oppgitt. */
2405
+ typographyType?: TypographyBodyType;
2406
+ } & BaseTypographyProps & PickedHTMLAttributes$3, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof PickedHTMLAttributes$3 | 'color'>>;
2407
+ declare const Link: {
2408
+ ({ id, className, htmlProps, children, typographyType, withMargins, withVisited, external, target, style, color, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
2409
+ displayName: string;
2410
+ };
2411
+
2412
+ type ParagraphProps = BaseComponentPropsWithChildren<HTMLParagraphElement, {
2413
+ /**Spesifiserer typografistil basert på utvalget for brødtekst og ingress. */
2414
+ typographyType?: TypographyBodyType | TypographyLeadType;
2415
+ } & BaseTypographyProps, Omit<HTMLAttributes<HTMLParagraphElement>, 'color'>>;
2416
+ declare const Paragraph: {
2417
+ ({ id, className, htmlProps, children, typographyType, ...rest }: ParagraphProps): react_jsx_runtime.JSX.Element;
2418
+ displayName: string;
2419
+ };
2420
+
2168
2421
  type AccordionHeaderProps = Omit<BaseComponentPropsWithChildren<HTMLButtonElement, {
2169
2422
  /**Overskriver default teksttype. */
2170
2423
  typographyType?: StaticTypographyType;
@@ -3486,7 +3739,7 @@ interface SelectOption<TValue = unknown> {
3486
3739
  label: string | number;
3487
3740
  value: TValue;
3488
3741
  }
3489
- type WrappedReactSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = WithRequiredIf<Option extends SelectOption ? false : true, Props$1<Option, IsMulti, Group>, 'getOptionLabel' | 'getOptionValue'>;
3742
+ type WrappedReactSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = WithRequiredIf<Option extends SelectOption ? false : true, Props<Option, IsMulti, Group>, 'getOptionLabel' | 'getOptionValue'>;
3490
3743
  type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
3491
3744
  /**Ledetekst for nedtrekkslisten. */
3492
3745
  label?: string;
@@ -3521,8 +3774,11 @@ declare namespace Select {
3521
3774
  var displayName: string;
3522
3775
  }
3523
3776
 
3524
- type NativeSelectProps = CommonInputProps & Pick<InputProps, 'componentSize' | 'readOnly'> & ComponentPropsWithRef<'select'>;
3525
- declare const NativeSelect: ({ id, children, componentSize, label, multiple, readOnly, errorMessage, tip, required, "aria-required": ariaRequired, "aria-describedby": ariaDescribedby, width, className, style, onKeyDown, onMouseDown, ...rest }: NativeSelectProps) => react_jsx_runtime.JSX.Element;
3777
+ type NativeSelectProps = {
3778
+ /**Om verdien til `<select>` kan tømmes. */
3779
+ clearable?: boolean;
3780
+ } & CommonInputProps & Pick<InputProps, 'componentSize' | 'readOnly'> & ComponentPropsWithRef<'select'>;
3781
+ declare const NativeSelect: ({ ref, id, children, componentSize, label, multiple, readOnly, errorMessage, tip, required, "aria-required": ariaRequired, "aria-describedby": ariaDescribedby, width, className, style, onKeyDown, onMouseDown, clearable, onChange, ...rest }: NativeSelectProps) => react_jsx_runtime.JSX.Element;
3526
3782
  type NativeSelectPlaceholderProps = ComponentPropsWithRef<'option'>;
3527
3783
  declare const NativeSelectPlaceholder: {
3528
3784
  ({ children, value, ...rest }: NativeSelectPlaceholderProps): react_jsx_runtime.JSX.Element;
@@ -3956,7 +4212,7 @@ type ToggleBarProps<T extends string | number> = BaseComponentPropsWithChildren<
3956
4212
  label?: string;
3957
4213
  /**Funksjonen for `onChange`-event for barna. */
3958
4214
  onChange?: (event: ChangeEvent<HTMLInputElement>, value?: T) => void;
3959
- /**Den valgte verdien i gruppen. Hvis satt ved innlastning blir en `<ToggleRadio />` forhåndsvalgt. */
4215
+ /**Den valgte verdien i gruppen. Hvis satt ved innlastning blir en `<ToggleRadio>` forhåndsvalgt. */
3960
4216
  value?: T;
3961
4217
  /** Gir alle barna samme `name` prop.*/
3962
4218
  name?: string;
@@ -4033,9 +4289,11 @@ type TooltipProps = BaseComponentProps<HTMLDivElement, {
4033
4289
  delay?: number;
4034
4290
  /**`id` for tooltip. */
4035
4291
  tooltipId?: string;
4292
+ /**Om tooltip skal alltid være i DOM, eller bli rendret først når den skal vises. */
4293
+ keepMounted?: boolean;
4036
4294
  } & PickedHTMLAttributes, Omit<HTMLAttributes<HTMLDivElement>, 'children' | keyof PickedHTMLAttributes>>;
4037
4295
  declare const Tooltip: {
4038
- ({ text, placement, children, tooltipId, delay, style, onMouseLeave, onMouseOver, id, ref, className, htmlProps, ...rest }: TooltipProps): react_jsx_runtime.JSX.Element;
4296
+ ({ text, placement, children, tooltipId, delay, style, onMouseLeave, onMouseOver, keepMounted, id, ref, className, htmlProps, ...rest }: TooltipProps): react_jsx_runtime.JSX.Element;
4039
4297
  displayName: string;
4040
4298
  };
4041
4299
 
@@ -4045,4 +4303,4 @@ declare const VisuallyHidden: {
4045
4303
  displayName: string;
4046
4304
  };
4047
4305
 
4048
- export { Accordion, AccordionBody, type AccordionBodyProps, AccordionHeader, type AccordionHeaderProps, type AccordionProps, AddTabButton, type AddTabButtonProps, AddressShieldedIcon, AgreementIcon, AnimatedChevronUpDown, AppsIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AttachmentIcon, BORDER_COLORS, BORDER_RADII, BackLink, type BackLinkProps, Backdrop, BarChartBoxedIcon, BarChartIcon, type BaseComponentProps, type BaseComponentPropsWithChildren, type BaseItemProps, type BaseLabelProps, type BaseTypographyProps, BlockIcon, BookIcon, type BorderColor, type BorderRadius, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, type Breakpoint, BuildCircledIcon, BuildIcon, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonPurpose, type ButtonSize, Calendar, CalendarIcon, CalendarMonthIcon, type CalendarProps, CalendarViewDayIcon, CalendarViewMonthIcon, CalendarViewWeekIcon, CallIcon, type Callback, Caption, type CaptionProps, Card, CardExpandable, CardExpandableBody, type CardExpandableBodyProps, CardExpandableHeader, type CardExpandableHeaderProps, type CardExpandableProps, type CardProps, CardSelectable, CardSelectableGroup, type CardSelectableGroupProps, type CardSelectableProps, CaringIcon, CharCounter, ChatIcon, CheckCircledIcon, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxPickedHTMLAttributes, type CheckboxProps, ChecklistIcon, ChevronDownIcon, ChevronFirstIcon, ChevronLargeLeftIcon, ChevronLargeRightIcon, ChevronLastIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, ChipGroup, type ChipGroupProps, type ChipProps, CloseCircledIcon, CloseIcon, CloseSmallIcon, CloudIcon, CollapseIcon, CollapsibleTable, type CollapsibleTableProps, CollapsibleRow as CollapsibleTableRow, type ColumnsOccupied, CommentIcon, type CommonInputProps, Contrast, type ContrastProps, CookieBanner, CookieBannerCheckbox, type CookieBannerCheckboxProps, type CookieBannerProps, CopyIcon, CourtIcon, DatePicker, type DatePickerProps, DateRangeIcon, DdsProvider, type DdsProviderProps, type DdsTheme, DeathsIcon, DescriptionList, type DescriptionListAppearance, DescriptionListDesc, type DescriptionListDescProps, DescriptionListGroup, type DescriptionListGroupProps, type DescriptionListProps, DescriptionListTerm, type DescriptionListTermProps, DetailList, DetailListDesc, type DetailListDescProps, type DetailListProps, DetailListRow, type DetailListRowProps, type DetailListSize, DetailListTerm, type DetailListTermProps, type Direction$1 as Direction, Divider, type DividerColor, type DividerProps, DoubleChevronLeftIcon, DoubleChevronRightIcon, DownloadDoneIcon, DownloadIcon, DragHandleIcon, Drawer, DrawerGroup, type DrawerGroupProps, type DrawerPlacement, type DrawerProps, type DrawerSize, ELEVATIONS, EditIcon, ElementAs, type Elevation, EmptyContent, type EmptyContentProps, ErrorIcon, ExclaimIcon, ExpandIcon, type ExtractStrict, FacebookIcon, FamilyIcon, FavStar, type FavStarProps, Feedback, FeedbackIcon, type FeedbackProps, Fieldset, FieldsetGroup, type FieldsetGroupProps, type FieldsetProps, FileAddIcon, FileIcon, type FileList, FileShieldedIcon, FileTextIcon, FileUploader, type FileUploaderAccept, type FileUploaderProps, FilterIcon, FilterListIcon, FilterListOffIcon, FilterOffIcon, FindInPageIcon, FlickrIcon, type FloatingStyles, FolderAddIcon, FolderIcon, FolderShieldedIcon, Footer, FooterLeft, type FooterLeftProps, FooterList, FooterListGroup, type FooterListGroupProps, FooterListHeader, type FooterListHeaderProps, type FooterListProps, FooterLogo, type FooterLogoProps, type FooterProps, FooterSocialsGroup, type FooterSocialsGroupProps, FooterSocialsList, type FooterSocialsListProps, FullscreenExitIcon, FullscreenIcon, GavelIcon, GlobalMessage, type GlobalMessageProps, type GlobalMessagePurpose, Grid, GridChild, type GridChildProps, type GridProps, GuardianIcon, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, HelpFilledIcon, HelpIcon, HelpSimpleIcon, HiddenInput, HomeIcon, HourglassBottomIcon, HourglassDisabledIcon, HourglassEmptyIcon, HourglassFullIcon, HourglassTopIcon, type HyphenTypographyType, Icon, type IconPosition, type IconProps, type IconSize, ImageIcon, InfoIcon, InlineButton, type InlineButtonProps, InlineEditInput, type InlineEditInputProps, InlineEditSelect, type InlineEditSelectProps, InlineEditTextArea, type InlineEditTextAreaProps, type InlineElement, Input, InputMessage, type InputMessageProps, type InputMessageType, type InputProps, type InputSize, type InputTypographyTypes, InstagramIcon, InternalHeader, type InternalHeaderProps, JordskifterettIcon, JordskiftesakIcon, KeyIcon, Label, type LabelProps, LagmannsrettIcon, LanguageIcon, type Layout, Legend, type LegendProps, LibraryAddIcon, LineChartIcon, Link, LinkIcon, LinkOffIcon, type LinkProps, LinkedInIcon, List, ListAltIcon, ListIcon, ListItem, type ListItemProps, type ListProps, type ListType, type ListTypographyType, LocalMessage, type LocalMessageLayout, type LocalMessageProps, type LocalMessagePurpose, LocationIcon, LockIcon, LockOpenIcon, LoginIcon, LogoutIcon, MailIcon, MailOpenIcon, MenuIcon, MinusCirledIcon, MinusIcon, Modal, ModalActions, type ModalActionsProps, ModalBody, type ModalBodyProps, type ModalProps, MoreHorizontalIcon, MoreVerticalIcon, NativeSelect, NativeSelectPlaceholder, type NativeSelectPlaceholderProps, type NativeSelectProps, NotarialIcon, NotificationsIcon, NotificationsOffIcon, type Nullable, OnlineMeetingIcon, OpenExternalIcon, type OtherTypographyType, OverflowMenu, OverflowMenuButton, type OverflowMenuButtonProps, OverflowMenuDivider, OverflowMenuGroup, type OverflowMenuGroupProps, OverflowMenuLink, type OverflowMenuLinkProps, OverflowMenuList, OverflowMenuListHeader, type OverflowMenuListItemBaseProps, type OverflowMenuProps, OverflowMenuSpan, type OverflowMenuSpanProps, Pagination, type PaginationOption, type PaginationProps, Paper, type PaperBackground, type PaperBorder, type PaperBorderRadius, type PaperElevation, type PaperProps, Paragraph, type ParagraphProps, PayoutIcon, PdfIcon, PersonAddIcon, PersonIcon, PersonShieldedIcon, PhoneInput, type PhoneInputProps, type PhoneInputValue, PinIcon, type Placement, PlusCircledIcon, PlusIcon, type PolymorphicBaseComponentProps, type PolymorphicProps, Popover, PopoverGroup, type PopoverGroupProps, type PopoverProps, type PopoverSizeProps, PowerOfAttorneyIcon, PrintIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressTracker, ProgressTrackerItem, type ProgressTrackerItemProps, type ProgressTrackerProps, PropertyIcon, PublishIcon, QuestionAnswerIcon, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, type RadioValue, type Rating, ReceiptIcon, RedoIcon, RefreshIcon, ReplayIcon, type ResponsiveProps, type ResponsiveStackProps, ScreenSize, Search, SearchAutocompleteWrapper, type SearchAutocompleteWrapperProps, type SearchButtonProps, type SearchData, SearchIcon, type SearchProps, type SearchSize, SearchSuggestions, type SearchSuggestionsProps, Select, type SelectForwardRefType, type SelectOption, type SelectProps, SettingsIcon, ShowHide, type ShowHideProps, type Size, Skeleton, type SkeletonAppearance, type SkeletonProps, SkipToContent, type SkipToContentProps, SmsIcon, type SortOrder, type SpacingScale, Spinner, type SpinnerProps, SplitButton, type SplitButtonPrimaryActionProps, type SplitButtonProps, type SplitButtonPurpose, type SplitButtonSecondaryActionsProps, StarFilledIcon, StarHalfFilled, StarIcon, StatefulInput, type StatefulInputProps, type StaticTypographyType, StylelessButton, type StylelessButtonProps, StylelessList, type StylelessListProps, StylelessOList, type StylelessOListProps, type SvgIcon, type SvgProps, SvgWrapper, SyncIcon, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, type TabSize, Table, Body as TableBody, type TableBodyProps, Cell as TableCell, type TableCellLayout, type TableCellProps, type TableCellType, Foot as TableFoot, type TableFootProps, Head as TableHead, type TableHeadProps, type TableProps, Row as TableRow, type TableRowProps, type TableRowType, type TableSize, SortCell as TableSortCell, type TableSortCellProps, TableWrapper, Tabs, type TabsProps, Tag, type TagAppearance, type TagProps, type TagPurpose, type TextAffixProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TextOverflowEllipsisInner, TextOverflowEllipsisWrapper, ThemeContext, ThemeProvider, type ThemeProviderProps, ThumbDownFilledIcon, ThumbDownIcon, ThumbUpFilledIcon, ThumbUpIcon, TimeIcon, TimePicker, type TimePickerProps, TingrettIcon, TipIcon, Toggle, ToggleBar, type ToggleBarProps, type ToggleBarSize, type ToggleBarValue, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, type ToggleProps, ToggleRadio, type ToggleRadioProps, type ToggleSize, Tooltip, type TooltipProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, Typography, type TypographyAnchorType, type TypographyBodyType, type TypographyComponentProps, type TypographyHeadingType, type TypographyLabelType, type TypographyLeadType, type TypographyProps, type TypographyType, UndoIcon, UnfoldLessIcon, UnfoldMoreIcon, UploadIcon, type UseFloatPositionOptions, VStack, type VStackProps, VisibilityOffIcon, VisibilityOnIcon, VisuallyHidden, type VisuallyHiddenProps, WarningIcon, WebexIcon, type WeightedSearchData, type WidthProps, type WithRequiredIf, XIcon, ZoomInIcon, ZoomOutIcon, calendarDateToNativeDate, cn, countryOptions, createSelectOptions, dateValueToNativeDate, defaultTypographyType, defaultTypographyTypeClassName, focusVisible, focusVisibleInset, focusVisibleTransitionValue, getBaseHTMLProps, getColorCn, getDefaultText, getElementType, getInputWidth, getLiteralScreenSize, getTypographyCn, handleElementWithBackdropMount, handleElementWithBackdropUnmount, hideInput, index as icons, inheritLinkStyling, inlineElements, isAnchorTypographyProps, isBorderColor, isBorderRadius, isCaption, isElevation, isHeading, isInlineElement, isKeyboardEvent, isLegend, isPaperBackground, nativeDateToCalendarDate, nativeDateToDateValue, nativeDateToTime, normalizeButton, outlineInset, outlineOffset, removeButtonStyling, removeListStyling, renderCharCounter, renderInputMessage, scrollbarStyling, typographyTypes, useCombinedRef, useFloatPosition, useFocusTrap, useIsMounted, useMountTransition, useOnClickOutside, useOnKeyDown, useReturnFocusOnBlur, useRoveFocus, useScreenSize, useTheme, useWindowResize, visibilityTransition };
4306
+ export { Accordion, AccordionBody, type AccordionBodyProps, AccordionHeader, type AccordionHeaderProps, type AccordionProps, AddTabButton, type AddTabButtonProps, AddressShieldedIcon, AgreementIcon, AnimatedChevronUpDown, AppsIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AttachmentIcon, BORDER_COLORS, BORDER_RADII, BackLink, type BackLinkProps, Backdrop, BarChartBoxedIcon, BarChartIcon, type BaseComponentProps, type BaseComponentPropsWithChildren, type BaseItemProps, type BaseLabelProps, type BaseTypographyProps, BlockIcon, BookIcon, type BorderColor, type BorderRadius, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, type Breakpoint, BuildCircledIcon, BuildIcon, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonPurpose, type ButtonSize, Calendar, CalendarIcon, CalendarMonthIcon, type CalendarProps, CalendarViewDayIcon, CalendarViewMonthIcon, CalendarViewWeekIcon, CallIcon, type Callback, Caption, type CaptionProps, Card, CardExpandable, CardExpandableBody, type CardExpandableBodyProps, CardExpandableHeader, type CardExpandableHeaderProps, type CardExpandableProps, type CardProps, CardSelectable, CardSelectableGroup, type CardSelectableGroupProps, type CardSelectableProps, CaringIcon, ChatIcon, CheckCircledIcon, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxPickedHTMLAttributes, type CheckboxProps, ChecklistIcon, ChevronDownIcon, ChevronFirstIcon, ChevronLargeLeftIcon, ChevronLargeRightIcon, ChevronLastIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, ChipGroup, type ChipGroupProps, type ChipProps, CloseCircledIcon, CloseIcon, CloseSmallIcon, CloudIcon, CollapseIcon, CollapsibleTable, type CollapsibleTableProps, CollapsibleRow as CollapsibleTableRow, type ColumnsOccupied, CommentIcon, Contrast, type ContrastProps, CookieBanner, CookieBannerCheckbox, type CookieBannerCheckboxProps, type CookieBannerProps, CopyIcon, CourtIcon, DatePicker, type DatePickerProps, DateRangeIcon, DdsProvider, type DdsProviderProps, type DdsTheme, DeathsIcon, DescriptionList, type DescriptionListAppearance, DescriptionListDesc, type DescriptionListDescProps, DescriptionListGroup, type DescriptionListGroupProps, type DescriptionListProps, DescriptionListTerm, type DescriptionListTermProps, DetailList, DetailListDesc, type DetailListDescProps, type DetailListProps, DetailListRow, type DetailListRowProps, type DetailListSize, DetailListTerm, type DetailListTermProps, type Direction$1 as Direction, Divider, type DividerColor, type DividerProps, DoubleChevronLeftIcon, DoubleChevronRightIcon, DownloadDoneIcon, DownloadIcon, DragHandleIcon, Drawer, DrawerGroup, type DrawerGroupProps, type DrawerPlacement, type DrawerProps, type DrawerSize, ELEVATIONS, EditIcon, ElementAs, type Elevation, EmptyContent, type EmptyContentProps, ErrorIcon, ExclaimIcon, ExpandIcon, type ExtractStrict, FacebookIcon, FamilyIcon, FavStar, type FavStarProps, Feedback, FeedbackIcon, type FeedbackProps, Fieldset, FieldsetGroup, type FieldsetGroupProps, type FieldsetProps, FileAddIcon, FileIcon, type FileList, FileShieldedIcon, FileTextIcon, FileUploader, type FileUploaderAccept, type FileUploaderProps, FilterIcon, FilterListIcon, FilterListOffIcon, FilterOffIcon, FindInPageIcon, FlickrIcon, type FloatingStyles, FolderAddIcon, FolderIcon, FolderShieldedIcon, Footer, FooterLeft, type FooterLeftProps, FooterList, FooterListGroup, type FooterListGroupProps, FooterListHeader, type FooterListHeaderProps, type FooterListProps, FooterLogo, type FooterLogoProps, type FooterProps, FooterSocialsGroup, type FooterSocialsGroupProps, FooterSocialsList, type FooterSocialsListProps, FullscreenExitIcon, FullscreenIcon, GavelIcon, GlobalMessage, type GlobalMessageProps, type GlobalMessagePurpose, Grid, GridChild, type GridChildProps, type GridProps, GuardianIcon, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, HelpFilledIcon, HelpIcon, HelpSimpleIcon, HiddenInput, HomeIcon, HourglassBottomIcon, HourglassDisabledIcon, HourglassEmptyIcon, HourglassFullIcon, HourglassTopIcon, type HyphenTypographyType, Icon, type IconPosition, type IconProps, type IconSize, ImageIcon, InfoIcon, InlineButton, type InlineButtonProps, InlineEditInput, type InlineEditInputProps, InlineEditSelect, type InlineEditSelectProps, InlineEditTextArea, type InlineEditTextAreaProps, type InlineElement, InputMessage, type InputMessageProps, type InputMessageType, InstagramIcon, InternalHeader, type InternalHeaderProps, JordskifterettIcon, JordskiftesakIcon, KeyIcon, Label, type LabelProps, LagmannsrettIcon, LanguageIcon, type Layout, Legend, type LegendProps, LibraryAddIcon, LineChartIcon, Link, LinkIcon, LinkOffIcon, type LinkProps, LinkedInIcon, List, ListAltIcon, ListIcon, ListItem, type ListItemProps, type ListProps, type ListType, type ListTypographyType, LocalMessage, type LocalMessageLayout, type LocalMessageProps, type LocalMessagePurpose, LocationIcon, LockIcon, LockOpenIcon, LoginIcon, LogoutIcon, MailIcon, MailOpenIcon, MenuIcon, MinusCirledIcon, MinusIcon, Modal, ModalActions, type ModalActionsProps, ModalBody, type ModalBodyProps, type ModalProps, MoreHorizontalIcon, MoreVerticalIcon, NativeSelect, NativeSelectPlaceholder, type NativeSelectPlaceholderProps, type NativeSelectProps, NotarialIcon, NotificationsIcon, NotificationsOffIcon, type Nullable, OnlineMeetingIcon, OpenExternalIcon, type OtherTypographyType, OverflowMenu, OverflowMenuButton, type OverflowMenuButtonProps, OverflowMenuDivider, OverflowMenuGroup, type OverflowMenuGroupProps, OverflowMenuLink, type OverflowMenuLinkProps, OverflowMenuList, OverflowMenuListHeader, type OverflowMenuListItemBaseProps, type OverflowMenuProps, OverflowMenuSpan, type OverflowMenuSpanProps, Pagination, type PaginationOption, type PaginationProps, Paper, type PaperBackground, type PaperBorder, type PaperBorderRadius, type PaperElevation, type PaperProps, Paragraph, type ParagraphProps, PayoutIcon, PdfIcon, PersonAddIcon, PersonIcon, PersonShieldedIcon, PhoneInput, type PhoneInputProps, type PhoneInputValue, PinIcon, type Placement, PlusCircledIcon, PlusIcon, type PolymorphicBaseComponentProps, type PolymorphicProps, Popover, PopoverGroup, type PopoverGroupProps, type PopoverProps, type PopoverSizeProps, PowerOfAttorneyIcon, PrintIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressTracker, ProgressTrackerItem, type ProgressTrackerItemProps, type ProgressTrackerProps, PropertyIcon, PublishIcon, QuestionAnswerIcon, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, type RadioValue, type Rating, ReceiptIcon, RedoIcon, RefreshIcon, ReplayIcon, type ResponsiveProps, type ResponsiveStackProps, ScreenSize, Search, SearchAutocompleteWrapper, type SearchAutocompleteWrapperProps, type SearchButtonProps, type SearchData, SearchIcon, type SearchProps, type SearchSize, SearchSuggestions, type SearchSuggestionsProps, Select, type SelectForwardRefType, type SelectOption, type SelectProps, SettingsIcon, ShowHide, type ShowHideProps, type Size, Skeleton, type SkeletonAppearance, type SkeletonProps, SkipToContent, type SkipToContentProps, SmsIcon, type SortOrder, type SpacingScale, Spinner, type SpinnerProps, SplitButton, type SplitButtonPrimaryActionProps, type SplitButtonProps, type SplitButtonPurpose, type SplitButtonSecondaryActionsProps, StarFilledIcon, StarHalfFilled, StarIcon, type StaticTypographyType, StylelessButton, type StylelessButtonProps, StylelessList, type StylelessListProps, StylelessOList, type StylelessOListProps, type SvgIcon, type SvgProps, SvgWrapper, SyncIcon, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, type TabSize, Table, Body as TableBody, type TableBodyProps, Cell as TableCell, type TableCellLayout, type TableCellProps, type TableCellType, Foot as TableFoot, type TableFootProps, Head as TableHead, type TableHeadProps, type TableProps, Row as TableRow, type TableRowProps, type TableRowType, type TableSize, SortCell as TableSortCell, type TableSortCellProps, TableWrapper, Tabs, type TabsProps, Tag, type TagAppearance, type TagProps, type TagPurpose, type TextAffixProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TextOverflowEllipsisInner, TextOverflowEllipsisWrapper, ThemeContext, ThemeProvider, type ThemeProviderProps, ThumbDownFilledIcon, ThumbDownIcon, ThumbUpFilledIcon, ThumbUpIcon, TimeIcon, TimePicker, type TimePickerProps, TingrettIcon, TipIcon, Toggle, ToggleBar, type ToggleBarProps, type ToggleBarSize, type ToggleBarValue, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, type ToggleProps, ToggleRadio, type ToggleRadioProps, type ToggleSize, Tooltip, type TooltipProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, Typography, type TypographyAnchorType, type TypographyBodyType, type TypographyComponentProps, type TypographyHeadingType, type TypographyLabelType, type TypographyLeadType, type TypographyProps, type TypographyType, UndoIcon, UnfoldLessIcon, UnfoldMoreIcon, UploadIcon, type UseControllableGroupStateProps, type UseControllableStateProps, type UseFloatPositionOptions, VStack, type VStackProps, VisibilityOffIcon, VisibilityOnIcon, VisuallyHidden, type VisuallyHiddenProps, WarningIcon, WebexIcon, type WeightedSearchData, type WidthProps, type WithRequiredIf, XIcon, ZoomInIcon, ZoomOutIcon, calendarDateToNativeDate, cn, countryOptions, createSelectOptions, dateValueToNativeDate, defaultTypographyType, defaultTypographyTypeClassName, focusVisible, focusVisibleInset, focusVisibleTransitionValue, getBaseHTMLProps, getColorCn, getElementType, getLiteralScreenSize, getTypographyCn, handleElementWithBackdropMount, handleElementWithBackdropUnmount, hideInput, index as icons, inheritLinkStyling, inlineElements, isAnchorTypographyProps, isBorderColor, isBorderRadius, isCaption, isElevation, isHeading, isInlineElement, isKeyboardEvent, isLegend, isPaperBackground, nativeDateToCalendarDate, nativeDateToDateValue, nativeDateToTime, normalizeButton, outlineInset, outlineOffset, removeButtonStyling, removeListStyling, renderInputMessage, scrollbarStyling, typographyTypes, useCallbackRef, useCombinedRef, useControllableGroupState, useControllableState, useFloatPosition, useFocusTrap, useIsMounted, useMountTransition, useOnClickOutside, useOnKeyDown, useReturnFocusOnBlur, useRoveFocus, useScreenSize, useTheme, useWindowResize, visibilityTransition };