@digdir/designsystemet-react 1.0.0-rc.12 → 1.0.0-rc.13

package/dist/esm/components/form/Search/Search.js

@@ -8,8 +8,7 @@ import { useSearch } from './useSearch.js';
 import { Button } from '../../Button/Button.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 import { Label } from '../../Typography/Label/Label.js';
-import { omit } from '../../../utilities/objectUtils.js';
-import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
+import { omit } from '../../../utilities/omit/omit.js';
 
 /** Search field
  *
@@ -20,7 +19,7 @@ import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
  */
 const Search = forwardRef((props, ref) => {
     const { label, style, hideLabel = true, variant = 'simple', searchButtonLabel = 'Søk', clearButtonLabel = 'Tøm', defaultValue, value, onChange, onClear, disabled, onSearchClick, htmlSize = 27, className, ...rest } = props;
-    const { inputProps, hasError, errorId, size = 'md' } = useSearch(props);
+    const { inputProps, size = 'md' } = useSearch(props);
     const inputRef = useRef();
     const mergedRef = useMergeRefs([ref, inputRef]);
     const [internalValue, setInternalValue] = useState(defaultValue ?? '');
@@ -41,7 +40,7 @@ const Search = forwardRef((props, ref) => {
     const showClearButton = Boolean(value ?? internalValue) && !disabled;
     return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: clsx('ds-search', inputProps.disabled && 'ds-search--disabled', `ds-search--${size}`, className), children: [label && (jsx(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx('ds-search__label', hideLabel && 'ds-sr-only'), children: jsx("span", { children: label }) })), jsxs("div", { className: 'ds-search__field', children: [jsxs("div", { className: clsx('ds-search__field', `ds-search--${size}`), children: [isSimple && (jsx(MagnifyingGlassIcon, { className: 'ds-search__icon', "aria-hidden": true })), jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: clsx('ds-search__input', `ds-focus`, isSimple
                                         ? 'ds-search__input--simple'
-                                        : 'ds-search__input--with-search-button'), ...omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxs("button", { className: clsx('ds-search__clear-button', `ds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsx("span", { className: `ds-sr-only`, children: clearButtonLabel }), jsx(XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsx(Button, { className: 'ds-search__search-button', size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] }), jsx("div", { className: 'ds-search__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsx(ErrorMessage, { size: size, children: props.error }) })] }) }));
+                                        : 'ds-search__input--with-search-button'), ...omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxs("button", { className: clsx('ds-search__clear-button', `ds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsx("span", { className: `ds-sr-only`, children: clearButtonLabel }), jsx(XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsx(Button, { className: 'ds-search__search-button', size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] })] }) }));
 });
 Search.displayName = 'Search';
 

package/dist/esm/components/form/Switch/Switch.js

@@ -5,7 +5,7 @@ import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import { useSwitch } from './useSwitch.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
-import { omit } from '../../../utilities/objectUtils.js';
+import { omit } from '../../../utilities/omit/omit.js';
 import { Label } from '../../Typography/Label/Label.js';
 
 const Switch = forwardRef((props, ref) => {

package/dist/esm/components/form/Textarea/Textarea.js

@@ -7,7 +7,7 @@ import { CharacterCounter } from '../CharacterCounter.js';
 import { useTextarea } from './useTextarea.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 import { Label } from '../../Typography/Label/Label.js';
-import { omit } from '../../../utilities/objectUtils.js';
+import { omit } from '../../../utilities/omit/omit.js';
 import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
 
 /** Textarea field

package/dist/esm/components/form/Textfield/Textfield.js

@@ -7,7 +7,7 @@ import { CharacterCounter } from '../CharacterCounter.js';
 import { useTextfield } from './useTextfield.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 import { Label } from '../../Typography/Label/Label.js';
-import { omit } from '../../../utilities/objectUtils.js';
+import { omit } from '../../../utilities/omit/omit.js';
 import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
 
 /** Text input field

package/dist/esm/index.js

@@ -1,7 +1,11 @@
 'use client';
 export { default as ErrorSummaryList } from './components/ErrorSummary/ErrorSummaryList.js';
-export { useSynchronizedAnimation } from './hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
-export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+export { useSynchronizedAnimation } from './utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
+export { useIsomorphicLayoutEffect } from './utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+export { RovingFocusRoot } from './utilities/RovingFocus/RovingFocusRoot.js';
+export { useRovingFocus } from './utilities/RovingFocus/useRovingFocus.js';
+export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/RovingFocus/RovingFocusItem.js';
+export { omit } from './utilities/omit/omit.js';
 export { Button } from './components/Button/Button.js';
 export { HelpText } from './components/HelpText/HelpText.js';
 export { Spinner } from './components/Spinner/Spinner.js';
@@ -30,11 +34,11 @@ export { RemovableChip as ChipRemovable } from './components/Chip/Removable/Remo
 export { ToggleChip as ChipToggle } from './components/Chip/Toggle/Toggle.js';
 export { usePagination } from './components/Pagination/usePagination.js';
 export { Pagination } from './components/Pagination/index.js';
-export { default as PaginationRoot } from './components/Pagination/PaginationRoot.js';
+export { PaginationRoot } from './components/Pagination/PaginationRoot.js';
 export { PaginationContent } from './components/Pagination/PaginationContent.js';
-export { default as PaginationItem } from './components/Pagination/PaginationItem.js';
+export { PaginationItem } from './components/Pagination/PaginationItem.js';
 export { PaginationButton } from './components/Pagination/PaginationButton.js';
-export { default as PaginationEllipsis } from './components/Pagination/PaginationEllipsis.js';
+export { PaginationEllipsis } from './components/Pagination/PaginationEllipsis.js';
 export { PaginationNext, PaginationPrevious } from './components/Pagination/PaginationNextPrev.js';
 export { SkipLink } from './components/SkipLink/SkipLink.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';

package/dist/esm/node_modules/@floating-ui/{react-dom/node_modules/@floating-ui/dom → dom}/dist/floating-ui.dom.js

@@ -1,8 +1,8 @@
 'use client';
-import { shift as shift$1, flip as flip$1, arrow as arrow$1, size as size$1, computePosition as computePosition$1 } from '../../../../../core/dist/floating-ui.core.js';
-export { detectOverflow, offset } from '../../../../../core/dist/floating-ui.core.js';
-import { createCoords, rectToClientRect, round, max, min, floor } from '../../../../../utils/dist/floating-ui.utils.js';
-import { getOverflowAncestors, isElement, getWindow, getComputedStyle, getDocumentElement, isHTMLElement, isWebKit, getNodeName, isOverflowElement, getNodeScroll, isTableElement, isContainingBlock, getContainingBlock, getParentNode, isLastTraversableNode } from '../../../../../utils/dist/floating-ui.utils.dom.js';
+import { shift as shift$1, flip as flip$1, arrow as arrow$1, size as size$1, computePosition as computePosition$1 } from '../../core/dist/floating-ui.core.js';
+export { detectOverflow, offset } from '../../core/dist/floating-ui.core.js';
+import { createCoords, rectToClientRect, round, max, min, floor } from '../../utils/dist/floating-ui.utils.js';
+import { getOverflowAncestors, isElement, getWindow, getComputedStyle, getDocumentElement, isHTMLElement, isWebKit, getNodeName, isOverflowElement, getNodeScroll, isTableElement, isContainingBlock, getContainingBlock, getParentNode, isLastTraversableNode } from '../../utils/dist/floating-ui.utils.dom.js';
 
 function getCssDimensions(element) {
   const css = getComputedStyle(element);

package/dist/esm/node_modules/@floating-ui/react/dist/floating-ui.react.js

@@ -8,8 +8,8 @@ export { arrow } from '../../react-dom/dist/floating-ui.react-dom.js';
 import { isElement, isHTMLElement, getOverflowAncestors, getWindow, getNodeName, isLastTraversableNode, getParentNode, getComputedStyle } from '../../utils/dist/floating-ui.utils.dom.js';
 import { tabbable, isTabbable } from '../../../tabbable/dist/index.esm.js';
 import { createPortal } from 'react-dom';
-import { platform } from '../../react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-export { autoUpdate, computePosition, flip, shift, size } from '../../react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { platform } from '../../dom/dist/floating-ui.dom.js';
+export { autoUpdate, computePosition, flip, shift, size } from '../../dom/dist/floating-ui.dom.js';
 
 /**
  * Merges an array of refs into a single memoized callback ref or `null`.

package/dist/esm/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js

@@ -1,6 +1,6 @@
 'use client';
-import { arrow as arrow$1, computePosition } from '../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-export { autoUpdate, flip, platform, shift, size } from '../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { arrow as arrow$1, computePosition } from '../../dom/dist/floating-ui.dom.js';
+export { autoUpdate, flip, platform, shift, size } from '../../dom/dist/floating-ui.dom.js';
 import * as React from 'react';
 import { useLayoutEffect, useEffect } from 'react';
 import * as ReactDOM from 'react-dom';

package/dist/esm/utilities/AnimateHeight/AnimateHeight.js

@@ -2,8 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { usePrevious } from '../../hooks/usePrevious.js';
-import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { usePrevious } from '../hooks/usePrevious.js';
+import { useMediaQuery } from '../hooks/useMediaQuery/useMediaQuery.js';
 
 const transitionDurationInMilliseconds = 250;
 /**

package/dist/esm/utilities/{RovingTabIndex/RovingTabindexItem.js → RovingFocus/RovingFocusItem.js}

@@ -3,22 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { useRovingTabindex } from './useRovingTabindex.js';
+import { useRovingFocus } from './useRovingFocus.js';
 
-/** Get the next focusable RovingTabindexItem */
+/** Get the next focusable RovingFocusItem */
 function getNextFocusableValue(items, value) {
     const currIndex = items.findIndex((item) => item.value === value);
     return items.at(currIndex === items.length - 1 ? 0 : currIndex + 1);
 }
-/** Get the previous focusable RovingTabindexItem */
+/** Get the previous focusable RovingFocusItem */
 function getPrevFocusableValue(items, value) {
     const currIndex = items.findIndex((item) => item.value === value);
     return items.at(currIndex === 0 ? -1 : currIndex - 1);
 }
-const RovingTabindexItem = forwardRef(({ value, asChild, ...rest }, ref) => {
+const RovingFocusItem = forwardRef(({ value, asChild, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
     const focusValue = value ?? (typeof rest.children == 'string' ? rest.children : '');
-    const { getOrderedItems, getRovingProps } = useRovingTabindex(focusValue);
+    const { getOrderedItems, getRovingProps } = useRovingFocus(focusValue);
     const rovingProps = getRovingProps({
         onKeyDown: (e) => {
             rest?.onKeyDown?.(e);
@@ -37,4 +37,4 @@ const RovingTabindexItem = forwardRef(({ value, asChild, ...rest }, ref) => {
     return (jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
 });
 
-export { RovingTabindexItem, getNextFocusableValue, getPrevFocusableValue };
+export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue };

package/dist/esm/utilities/{RovingTabIndex/RovingTabindexRoot.js → RovingFocus/RovingFocusRoot.js}

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, forwardRef, useState, useRef } from 'react';
+import { createContext, forwardRef, useState, useRef, useEffect } from 'react';
 import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
-const RovingTabindexContext = createContext({
+const RovingFocusContext = createContext({
     elements: { current: new Map() },
     getOrderedItems: () => [],
     setFocusableValue: () => {
@@ -15,7 +15,7 @@ const RovingTabindexContext = createContext({
     },
     focusableValue: null,
 });
-const RovingTabindexRoot = forwardRef(({ valueId, asChild, onBlur, onFocus, ...rest }, ref) => {
+const RovingFocusRoot = forwardRef(({ activeValue, asChild, onBlur, onFocus, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
     const [focusableValue, setFocusableValue] = useState(null);
     const [isShiftTabbing, setIsShiftTabbing] = useState(false);
@@ -30,7 +30,10 @@ const RovingTabindexRoot = forwardRef(({ valueId, asChild, onBlur, onFocus, ...r
             .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
             .map(([value, element]) => ({ value, element }));
     };
-    return (jsx(RovingTabindexContext.Provider, { value: {
+    useEffect(() => {
+        setFocusableValue(activeValue ?? null);
+    }, [activeValue]);
+    return (jsx(RovingFocusContext.Provider, { value: {
             elements,
             getOrderedItems,
             focusableValue,
@@ -41,6 +44,7 @@ const RovingTabindexRoot = forwardRef(({ valueId, asChild, onBlur, onFocus, ...r
         }, children: jsx(Component, { ...rest, tabIndex: isShiftTabbing ? -1 : 0, onBlur: (e) => {
                 onBlur?.(e);
                 setIsShiftTabbing(false);
+                setFocusableValue(activeValue ?? null);
             }, onFocus: (e) => {
                 onFocus?.(e);
                 if (e.target !== e.currentTarget)
@@ -51,8 +55,8 @@ const RovingTabindexRoot = forwardRef(({ valueId, asChild, onBlur, onFocus, ...r
                 if (focusableValue != null) {
                     elements.current.get(focusableValue)?.focus();
                 }
-                else if (valueId != null) {
-                    elements.current.get(valueId)?.focus();
+                else if (activeValue != null) {
+                    elements.current.get(activeValue)?.focus();
                 }
                 else {
                     orderedItems.at(0)?.element.focus();
@@ -60,4 +64,4 @@ const RovingTabindexRoot = forwardRef(({ valueId, asChild, onBlur, onFocus, ...r
             }, ref: refs }) }));
 });
 
-export { RovingTabindexContext, RovingTabindexRoot };
+export { RovingFocusContext, RovingFocusRoot };

package/dist/esm/utilities/{RovingTabIndex/useRovingTabindex.js → RovingFocus/useRovingFocus.js}

@@ -1,12 +1,12 @@
 'use client';
 import { useContext } from 'react';
-import { RovingTabindexContext } from './RovingTabindexRoot.js';
+import { RovingFocusContext } from './RovingFocusRoot.js';
 
 // Logic from: https://www.joshuawootonn.com/react-roving-tabindex
 // Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
-/** Handles props for `RovingTabIndex` in context with `RovingTabIndexRoot` */
-const useRovingTabindex = (value) => {
-    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, } = useContext(RovingTabindexContext);
+/** Handles props for `RovingFocus` in context with `RovingFocusRoot` */
+const useRovingFocus = (value) => {
+    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, } = useContext(RovingFocusContext);
     return {
         getOrderedItems,
         isFocusable: focusableValue === value,
@@ -37,4 +37,4 @@ const useRovingTabindex = (value) => {
     };
 };
 
-export { useRovingTabindex };
+export { useRovingFocus };

package/dist/esm/utilities/{useDebounce.js → hooks/useDebounceCallback/useDebounceCallback.js}

@@ -1,7 +1,7 @@
 'use client';
 import { useRef, useEffect } from 'react';
 
-function useDebounce(callback, delay = 50) {
+function useDebounceCallback(callback, delay = 50) {
     const timeoutRef = useRef(null);
     useEffect(() => {
         // Cleanup the previous timeout on re-render
@@ -22,4 +22,4 @@ function useDebounce(callback, delay = 50) {
     return debouncedCallback;
 }
 
-export { useDebounce as default };
+export { useDebounceCallback };

package/dist/esm/utilities/hooks/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,47 @@
+'use client';
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+
+// from https://usehooks-ts.com/react-hook/use-media-query
+const IS_SERVER = typeof window === 'undefined';
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+
+export { useMediaQuery };

package/dist/types/components/Accordion/AccordionContent.d.ts

@@ -1,10 +1,9 @@
-import type { ReactNode, HTMLAttributes } from 'react';
-export type AccordionContentProps = {
-    /** Content inside `Accordion.Content`*/
-    children: ReactNode;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const AccordionContent: import("react").ForwardRefExoticComponent<{
-    /** Content inside `Accordion.Content`*/
-    children: ReactNode;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+import type { HTMLAttributes } from 'react';
+export type AccordionContentProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Accordion content component, contains the content of the accordion item.
+ * @example
+ * <AccordionContent>Content</AccordionContent>
+ */
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=AccordionContent.d.ts.map

package/dist/types/components/Accordion/AccordionContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,gBAAgB;IAJ3B,wCAAwC;cAC9B,SAAS;mFAmCnB,CAAC"}
+{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnE;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,kHAgC3B,CAAC"}

package/dist/types/components/Accordion/AccordionHeading.d.ts

@@ -10,6 +10,11 @@ export type AccordionHeaderProps = {
     /** Heading text */
     children: ReactNode;
 } & HTMLAttributes<HTMLHeadingElement>;
+/**
+ * Accordion header component, contains a button to toggle the content.
+ * @example
+ * <AccordionHeader>Header</AccordionHeader>
+ */
 export declare const AccordionHeading: import("react").ForwardRefExoticComponent<{
     /**
      * Heading level. Use this to make sure the heading is correct according to you page heading levels

package/dist/types/components/Accordion/AccordionHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionHeading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAO1E,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IACjE,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEvC,eAAO,MAAM,gBAAgB;IAX3B;;;OAGG;;IAEH,oCAAoC;oBACpB,kBAAkB,iBAAiB,CAAC,GAAG,SAAS;IAChE,mBAAmB;cACT,SAAS;2FAkDnB,CAAC"}
+{"version":3,"file":"AccordionHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionHeading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAO1E,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IACjE,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;IAhB3B;;;OAGG;;IAEH,oCAAoC;oBACpB,kBAAkB,iBAAiB,CAAC,GAAG,SAAS;IAChE,mBAAmB;cACT,SAAS;2FAuDnB,CAAC"}

package/dist/types/components/Accordion/AccordionItem.d.ts

@@ -4,29 +4,48 @@ export type AccordionItemProps = {
      * Controls open-state.
      *
      * Using this removes automatic control of open-state
+     *
+     * @default undefined
      */
     open?: boolean;
-    /**  Defaults the accordion to open if not controlled */
+    /**
+     * Defaults the accordion to open if not controlled
+     * @default false
+     */
     defaultOpen?: boolean;
     /** Content should be one `<Accordion.Header>` and `<Accordion.Content>` */
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
-export type AccordionItemContextProps = {
+type AccordionItemContextProps = {
     open: boolean;
     toggleOpen: () => void;
     contentId: string;
 };
 export declare const AccordionItemContext: import("react").Context<AccordionItemContextProps | null>;
+/**
+ * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
+ * @example
+ * <AccordionItem>
+ *  <AccordionHeader>Header</AccordionHeader>
+ *  <AccordionContent>Content</AccordionContent>
+ * </AccordionItem>
+ */
 export declare const AccordionItem: import("react").ForwardRefExoticComponent<{
     /**
      * Controls open-state.
      *
      * Using this removes automatic control of open-state
+     *
+     * @default undefined
      */
     open?: boolean | undefined;
-    /**  Defaults the accordion to open if not controlled */
+    /**
+     * Defaults the accordion to open if not controlled
+     * @default false
+     */
     defaultOpen?: boolean | undefined;
     /** Content should be one `<Accordion.Header>` and `<Accordion.Content>` */
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
 //# sourceMappingURL=AccordionItem.d.ts.map

package/dist/types/components/Accordion/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,2DACsB,CAAC;AAExD,eAAO,MAAM,aAAa;IArBxB;;;;OAIG;;IAEH,wDAAwD;;IAExD,2EAA2E;cACjE,SAAS;mFA2CpB,CAAC"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,2DACsB,CAAC;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa;IAlCxB;;;;;;OAMG;;IAEH;;;OAGG;;IAEH,2EAA2E;cACjE,SAAS;mFAmDpB,CAAC"}

package/dist/types/components/Accordion/AccordionRoot.d.ts

@@ -1,20 +1,31 @@
 import type { ReactNode, HTMLAttributes } from 'react';
 export type AccordionRootProps = {
-    /** Accordion background color
+    /**
+     * Accordion background color
      * @default neutral
      */
     color?: 'brand1' | 'brand2' | 'brand3' | 'neutral' | 'subtle';
-    /** Show border */
+    /**
+     * Show border
+     * @default false
+     **/
     border?: boolean;
     /** Instances of `Accordion.Item` */
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
+/**
+ * Accordion root component, contains `Accordion.Item` components.
+ */
 export declare const AccordionRoot: import("react").ForwardRefExoticComponent<{
-    /** Accordion background color
+    /**
+     * Accordion background color
      * @default neutral
      */
     color?: "neutral" | "brand1" | "brand2" | "brand3" | "subtle" | undefined;
-    /** Show border */
+    /**
+     * Show border
+     * @default false
+     **/
     border?: boolean | undefined;
     /** Instances of `Accordion.Item` */
     children: ReactNode;

package/dist/types/components/Accordion/AccordionRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC9D,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,aAAa;IAVxB;;OAEG;;IAEH,kBAAkB;;IAElB,oCAAoC;cAC1B,SAAS;mFAkBpB,CAAC"}
+{"version":3,"file":"AccordionRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC9D;;;QAGI;IACJ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,aAAa;IAjBxB;;;OAGG;;IAEH;;;QAGI;;IAEJ,oCAAoC;cAC1B,SAAS;mFAqBpB,CAAC"}

package/dist/types/components/Accordion/index.d.ts

@@ -12,6 +12,16 @@ type AccordionComponent = {
     Heading: typeof AccordionHeading;
     Content: typeof AccordionContent;
 };
+/**
+ * Accordions are used to toggle the visibility of content.
+ * @example
+ * <Accordion.Root>
+ *  <Accordion.Item>
+ *   <Accordion.Heading>Heading 1</Accordion.Heading>
+ *  <Accordion.Content>Content 1</Accordion.Content>
+ * </Accordion.Item>
+ * <Accordion.Item>
+ */
 declare const Accordion: AccordionComponent;
 export type { AccordionRootProps, AccordionContentProps, AccordionHeaderProps, AccordionItemProps, };
 export { Accordion, AccordionRoot, AccordionItem, AccordionContent, AccordionHeading, };

package/dist/types/components/Accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,OAAO,EAAE,OAAO,gBAAgB,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,SAAS,oBAA2B,CAAC;AAY3C,YAAY,EACV,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,GACnB,CAAC;AACF,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,OAAO,EAAE,OAAO,gBAAgB,CAAC;CAClC,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,oBAA2B,CAAC;AAY3C,YAAY,EACV,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,GACnB,CAAC;AACF,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,CAAC"}

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

@@ -1,14 +1,17 @@
 import type { HTMLAttributes } from 'react';
 type Severity = 'info' | 'warning' | 'success' | 'danger';
 export type AlertProps = {
-    /** Sets color & icon according to severity */
+    /**
+     * Sets color & icon according to severity
+     * @default info
+     */
     severity?: Severity;
-    /** Adds a shadow to elevate the component */
-    elevated?: boolean;
-    /** Sets `title` on the icon.
+    /**
+     * Sets `title` on the icon.
      *
      * Use this to inform screenreaders of severity.
-     *  Defaults to Norwegian. */
+     * Defaults to Norwegian.
+     */
     iconTitle?: string;
     /**
      * Sets the size of the alert.
@@ -18,15 +21,23 @@ export type AlertProps = {
      */
     size?: 'sm' | 'md' | 'lg';
 } & HTMLAttributes<HTMLDivElement>;
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ * @example
+ * <Alert severity='info'>Dette er en informasjonsmelding</Alert>
+ */
 export declare const Alert: import("react").ForwardRefExoticComponent<{
-    /** Sets color & icon according to severity */
+    /**
+     * Sets color & icon according to severity
+     * @default info
+     */
     severity?: Severity | undefined;
-    /** Adds a shadow to elevate the component */
-    elevated?: boolean | undefined;
-    /** Sets `title` on the icon.
+    /**
+     * Sets `title` on the icon.
      *
      * Use this to inform screenreaders of severity.
-     *  Defaults to Norwegian. */
+     * Defaults to Norwegian.
+     */
     iconTitle?: string | undefined;
     /**
      * Sets the size of the alert.

package/dist/types/components/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA4B5C,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;iCAG6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AACnC,eAAO,MAAM,KAAK;IAjBhB,8CAA8C;;IAE9C,6CAA6C;;IAE7C;;;iCAG6B;;IAE7B;;;;;OAKG;;mFA8CJ,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA4B5C,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;;;GAIG;AACH,eAAO,MAAM,KAAK;IA1BhB;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;;;OAKG;;mFA2CJ,CAAC"}

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

@@ -1,6 +1,9 @@
 import type { ButtonHTMLAttributes } from 'react';
 export type ButtonProps = {
-    /** Specify which variant to use */
+    /**
+     * Specify which variant to use
+     * @default primary
+     */
     variant?: 'primary' | 'secondary' | 'tertiary';
     /** Specify which color palette to use
      * @default accent
@@ -11,7 +14,10 @@ export type ButtonProps = {
      * @default md
      */
     size?: 'sm' | 'md' | 'lg';
-    /** If `Button` should fill full width of its container */
+    /**
+     * If `Button` should fill full width of its container
+     * @default false
+     */
     fullWidth?: boolean;
     /** Toggle icon only styling, pass icon as children
      * @default false
@@ -25,9 +31,14 @@ export type ButtonProps = {
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * Button used for interaction
+ * @example
+ * <Button>Click me</Button>
  */
 export declare const Button: import("react").ForwardRefExoticComponent<{
-    /** Specify which variant to use */
+    /**
+     * Specify which variant to use
+     * @default primary
+     */
     variant?: "primary" | "secondary" | "tertiary" | undefined;
     /** Specify which color palette to use
      * @default accent
@@ -38,7 +49,10 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
      * @default md
      */
     size?: "sm" | "md" | "lg" | undefined;
-    /** If `Button` should fill full width of its container */
+    /**
+     * If `Button` should fill full width of its container
+     * @default false
+     */
     fullWidth?: boolean | undefined;
     /** Toggle icon only styling, pass icon as children
      * @default false

package/dist/types/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAMlD,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,MAAM;IA3BjB,mCAAmC;;IAEnC;;OAEG;;IAEH;;;OAGG;;IAEH,0DAA0D;;IAE1D;;OAEG;;IAEH;;;OAGG;;+FAmDJ,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAMlD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;;;GAIG;AACH,eAAO,MAAM,MAAM;IAnCjB;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;+FAqDJ,CAAC"}