@digdir/designsystemet-react 0.52.0-alpha.0

package/dist/esm/components/Spinner/Spinner.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"spinner":"fds-spinner-spinner-ecd53b7b","rotate-animation":"fds-spinner-rotate-animation-ecd53b7b","spinnerCircle":"fds-spinner-spinnerCircle-ecd53b7b","stroke-animation":"fds-spinner-stroke-animation-ecd53b7b","default":"fds-spinner-default-ecd53b7b","interaction":"fds-spinner-interaction-ecd53b7b","inverted":"fds-spinner-inverted-ecd53b7b","background":"fds-spinner-background-ecd53b7b","invertedBackground":"fds-spinner-invertedBackground-ecd53b7b"};
+
+export { classes as default };

package/dist/esm/components/Table/Table.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './Table.module.css.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+const Table = React.forwardRef(({ zebra = false, size = 'medium', stickyHeader = false, border = false, className, children, ...rest }, ref) => {
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { ref: ref, className: clsx(classes[size], zebra && classes.zebra, stickyHeader && classes.stickyHeader, border && classes.border, classes.table, className), ...rest, children: children }) }));
+});
+Table.displayName = 'Table';
+
+export { Table };

package/dist/esm/components/Table/Table.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"table":"fds-table-table-c4ff6291","stickyHeader":"fds-table-stickyHeader-c4ff6291","border":"fds-table-border-c4ff6291","row":"fds-table-row-c4ff6291","small":"fds-table-small-c4ff6291","medium":"fds-table-medium-c4ff6291","large":"fds-table-large-c4ff6291","head":"fds-table-head-c4ff6291","headerCell":"fds-table-headerCell-c4ff6291","sortable":"fds-table-sortable-c4ff6291","sorted":"fds-table-sorted-c4ff6291","cell":"fds-table-cell-c4ff6291","zebra":"fds-table-zebra-c4ff6291"};
+
+export { classes as default };

package/dist/esm/components/Table/TableBody.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+
+const TableBody = React.forwardRef(({ children, ...rest }, ref) => {
+    return (jsx("tbody", { ref: ref, ...rest, children: children }));
+});
+TableBody.displayName = 'TableBody';
+
+export { TableBody };

package/dist/esm/components/Table/TableCell.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './Table.module.css.js';
+
+const TableCell = React.forwardRef(({ className, children, ...rest }, ref) => {
+    return (jsx("td", { ref: ref, className: clsx(classes.cell, className), ...rest, children: children }));
+});
+TableCell.displayName = 'TableCell';
+
+export { TableCell };

package/dist/esm/components/Table/TableHead.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './Table.module.css.js';
+
+const TableHead = React.forwardRef(({ className, children, ...rest }, ref) => {
+    return (jsx("thead", { ref: ref, className: clsx(classes.head, className), ...rest, children: children }));
+});
+TableHead.displayName = 'TableHead';
+
+export { TableHead };

package/dist/esm/components/Table/TableHeaderCell.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@navikt/aksel-icons';
+import * as React from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import utilityClasses from '../../utilities/utility.module.css.js';
+import classes from './Table.module.css.js';
+
+const SORT_ICON = {
+    ascending: jsx(ChevronUpIcon, {}),
+    descending: jsx(ChevronDownIcon, {}),
+};
+const TableHeaderCell = React.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
+    const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsx(ChevronUpDownIcon, {}));
+    return (jsxs("th", { className: clsx(sortable && classes.sortable, sort && classes.sorted, classes.headerCell, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: utilityClasses.focusable, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+});
+TableHeaderCell.displayName = 'TableHeaderCell';
+
+export { TableHeaderCell };

package/dist/esm/components/Table/TableRow.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './Table.module.css.js';
+
+const TableRow = React.forwardRef(({ className, children, ...rest }, ref) => {
+    return (jsx("tr", { className: clsx(classes.row, className), ref: ref, ...rest, children: children }));
+});
+TableRow.displayName = 'TableRow';
+
+export { TableRow };

package/dist/esm/components/Table/index.js

@@ -0,0 +1,22 @@
+'use client';
+import { Table as Table$1 } from './Table.js';
+import { TableHead } from './TableHead.js';
+import { TableBody } from './TableBody.js';
+import { TableRow } from './TableRow.js';
+import { TableCell } from './TableCell.js';
+import { TableHeaderCell } from './TableHeaderCell.js';
+
+const Table = Table$1;
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.HeaderCell = TableHeaderCell;
+Table.displayName = 'Table';
+Table.Head.displayName = 'Table.Head';
+Table.Body.displayName = 'Table.Body';
+Table.Row.displayName = 'Table.Row';
+Table.Cell.displayName = 'Table.Cell';
+Table.HeaderCell.displayName = 'Table.HeaderCell';
+
+export { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow };

package/dist/esm/components/Tabs/Tab/Tab.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import classes from './Tab.module.css.js';
+import { useTabItem } from './useTab.js';
+import { RovingTabindexItem } from '../../../utilities/RovingTabIndex/RovingTabindexItem.js';
+
+const Tab = forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { active, size = 'medium', ...useTabRest } = useTabItem(props);
+    return (jsx(RovingTabindexItem, { ...rest, asChild: true, children: jsx("button", { ...useTabRest, className: clsx(classes.tabItem, classes[size], active && classes.isActive, className), ref: ref, children: children }) }));
+});
+Tab.displayName = 'Tab';
+
+export { Tab };

package/dist/esm/components/Tabs/Tab/Tab.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"tabItem":"fds-tab-tabItem-cb5410d6","small":"fds-tab-small-cb5410d6","medium":"fds-tab-medium-cb5410d6","large":"fds-tab-large-cb5410d6","isActive":"fds-tab-isActive-cb5410d6"};
+
+export { classes as default };

package/dist/esm/components/Tabs/Tab/useTab.js

@@ -0,0 +1,24 @@
+'use client';
+import { useContext, useId } from 'react';
+import { TabsContext } from '../Tabs.js';
+
+/** Handles props for `Tab` in context with `Tabs` */
+const useTabItem = (props) => {
+    const { value, ...rest } = props;
+    const tabs = useContext(TabsContext);
+    const active = tabs.value == value;
+    const buttonId = `tab-${useId()}`;
+    return {
+        ...rest,
+        active: active,
+        size: tabs?.size,
+        id: buttonId,
+        'aria-selected': active,
+        role: 'tab',
+        onClick: () => {
+            tabs.onChange?.(value);
+        },
+    };
+};
+
+export { useTabItem };

package/dist/esm/components/Tabs/TabContent/TabContent.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { TabsContext } from '../Tabs.js';
+import classes from './TabContent.module.css.js';
+
+const TabContent = forwardRef(({ children, value, className, ...rest }, ref) => {
+    const { value: tabsValue, size = 'medium' } = useContext(TabsContext);
+    const active = value == tabsValue;
+    const onlyText = typeof children === 'string';
+    return (jsx(Fragment, { children: active && (jsx("div", { className: clsx(classes[size], classes.tabContent, onlyText && classes.onlyText, className), ref: ref, ...rest, children: children })) }));
+});
+TabContent.displayName = 'TabContent';
+
+export { TabContent };

package/dist/esm/components/Tabs/TabContent/TabContent.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"tabContent":"fds-tabcontent-tabContent-627713c2","small":"fds-tabcontent-small-627713c2","medium":"fds-tabcontent-medium-627713c2","large":"fds-tabcontent-large-627713c2","onlyText":"fds-tabcontent-onlyText-627713c2"};
+
+export { classes as default };

package/dist/esm/components/Tabs/TabList/TabList.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import classes from './TabList.module.css.js';
+import { RovingTabindexRoot } from '../../../utilities/RovingTabIndex/RovingTabindexRoot.js';
+
+const TabList = forwardRef(({ children, className, ...rest }, ref) => {
+    return (jsx(RovingTabindexRoot, { role: 'tablist', className: clsx(classes.tabItemList, className), ref: ref, ...rest, children: children }));
+});
+TabList.displayName = 'TabList';
+
+export { TabList };

package/dist/esm/components/Tabs/TabList/TabList.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"tabItemList":"fds-tablist-tabItemList-382bc5da"};
+
+export { classes as default };

package/dist/esm/components/Tabs/Tabs.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useState } from 'react';
+
+const TabsContext = createContext({});
+const Tabs = forwardRef(({ children, value, defaultValue, onChange, size = 'medium', ...rest }, ref) => {
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    return (jsx(TabsContext.Provider, { value: {
+            value,
+            defaultValue,
+            onChange: onValueChange,
+            size,
+        }, children: jsx("div", { ref: ref, ...rest, children: children }) }));
+});
+Tabs.displayName = 'Tabs';
+
+export { Tabs, TabsContext };

package/dist/esm/components/Tabs/index.js

@@ -0,0 +1,15 @@
+'use client';
+import { Tabs as Tabs$1 } from './Tabs.js';
+import { Tab } from './Tab/Tab.js';
+import { TabList } from './TabList/TabList.js';
+import { TabContent } from './TabContent/TabContent.js';
+
+const Tabs = Tabs$1;
+Tabs.Tab = Tab;
+Tabs.List = TabList;
+Tabs.Content = TabContent;
+Tabs.Tab.displayName = 'Tabs.Tab';
+Tabs.List.displayName = 'Tabs.List';
+Tabs.Content.displayName = 'Tabs.Content';
+
+export { Tab, TabContent, TabList, Tabs };

package/dist/esm/components/Tag/Tag.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './Tag.module.css.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+const Tag = forwardRef(({ children, color = 'neutral', size = 'medium', className, ...rest }, ref) => {
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("span", { className: clsx(classes.tag, classes[color], classes[size], className), ref: ref, ...rest, children: children }) }));
+});
+Tag.displayName = 'Tag';
+
+export { Tag };

package/dist/esm/components/Tag/Tag.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"tag":"fds-tag-tag-e4c97db9","small":"fds-tag-small-e4c97db9","medium":"fds-tag-medium-e4c97db9","large":"fds-tag-large-e4c97db9","neutral":"fds-tag-neutral-e4c97db9","info":"fds-tag-info-e4c97db9","success":"fds-tag-success-e4c97db9","warning":"fds-tag-warning-e4c97db9","danger":"fds-tag-danger-e4c97db9","first":"fds-tag-first-e4c97db9","second":"fds-tag-second-e4c97db9","third":"fds-tag-third-e4c97db9"};
+
+export { classes as default };

package/dist/esm/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, forwardRef, useId, useState } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './ToggleGroup.module.css.js';
+import { RovingTabindexRoot } from '../../utilities/RovingTabIndex/RovingTabindexRoot.js';
+
+const ToggleGroupContext = createContext({});
+/** `ToggleGroup` component.
+ * @example
+ * ```tsx
+ * <ToggleGroup onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ * ```
+ */
+const ToggleGroup = forwardRef(({ children, value, defaultValue, onChange, size = 'medium', name, className, ...rest }, ref) => {
+    const nameId = useId();
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+        value = uncontrolledValue;
+    }
+    return (jsx("div", { className: clsx(classes.toggleGroupContainer, className), ref: ref, ...rest, children: jsxs(ToggleGroupContext.Provider, { value: {
+                value,
+                defaultValue,
+                name: name ?? `togglegroup-name-${nameId}`,
+                onChange: onValueChange,
+                size,
+            }, children: [name && (jsx("input", { type: 'hidden', name: name, value: value })), jsx(RovingTabindexRoot, { asChild: true, valueId: value, children: jsx("div", { className: classes.groupContent, role: 'radiogroup', children: children }) })] }) }));
+});
+ToggleGroup.displayName = 'ToggleGroup';
+
+export { ToggleGroup, ToggleGroupContext };

package/dist/esm/components/ToggleGroup/ToggleGroup.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"toggleGroupContainer":"fds-togglegroup-toggleGroupContainer-acca2b17","groupContent":"fds-togglegroup-groupContent-acca2b17"};
+
+export { classes as default };

package/dist/esm/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import classes from './ToggleGroupItem.module.css.js';
+import { useToggleGroupItem } from './useToggleGroupitem.js';
+import { RovingTabindexItem } from '../../../utilities/RovingTabIndex/RovingTabindexItem.js';
+import { Button } from '../../Button/Button.js';
+
+const ToggleGroupItem = forwardRef((props, ref) => {
+    const { children, icon, className, ...rest } = props;
+    const { active, size = 'medium', buttonProps } = useToggleGroupItem(props);
+    return (jsx(RovingTabindexItem, { asChild: true, value: rest.value, children: jsx(Button, { className: clsx(classes.toggleGroupItem, className), icon: icon, color: 'first', variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
+});
+ToggleGroupItem.displayName = 'ToggleGroupItem';
+
+export { ToggleGroupItem };

package/dist/esm/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"toggleGroupItem":"fds-togglegroupitem-toggleGroupItem-4bc7b95"};
+
+export { classes as default };

package/dist/esm/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.js

@@ -0,0 +1,29 @@
+'use client';
+import { useContext, useId } from 'react';
+import { ToggleGroupContext } from '../ToggleGroup.js';
+
+/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingTabIndex` */
+const useToggleGroupItem = (props) => {
+    const { ...rest } = props;
+    const toggleGroup = useContext(ToggleGroupContext);
+    const itemValue = props.value ?? (typeof props.children === 'string' ? props.children : '');
+    const active = toggleGroup.value == itemValue;
+    const buttonId = `togglegroup-item-${useId()}`;
+    return {
+        ...rest,
+        active: active,
+        size: toggleGroup?.size,
+        buttonProps: {
+            id: buttonId,
+            'aria-checked': active,
+            'aria-current': active,
+            role: 'radio',
+            name: toggleGroup.name,
+            onClick: () => {
+                toggleGroup.onChange?.(itemValue);
+            },
+        },
+    };
+};
+
+export { useToggleGroupItem };

package/dist/esm/components/ToggleGroup/index.js

@@ -0,0 +1,9 @@
+'use client';
+import { ToggleGroup as ToggleGroup$1 } from './ToggleGroup.js';
+import { ToggleGroupItem } from './ToggleGroupItem/ToggleGroupItem.js';
+
+const ToggleGroup = ToggleGroup$1;
+ToggleGroup.Item = ToggleGroupItem;
+ToggleGroup.Item.displayName = 'ToggleGroup.Item';
+
+export { ToggleGroup, ToggleGroupItem };

package/dist/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { forwardRef, useState, cloneElement } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { useFloating, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingPortal, FloatingArrow } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import classes from './Tooltip.module.css.js';
+import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { offset, flip, shift } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
+import { arrow } from '../../node_modules/@floating-ui/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
+
+const ARROW_HEIGHT = 7;
+const ARROW_GAP = 4;
+const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal, inverted, className, style, ...rest }, ref) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const Container = portal ? FloatingPortal : React.Fragment;
+    const arrowRef = React.useRef(null);
+    const internalOpen = userOpen ?? isOpen;
+    const { refs, floatingStyles, context } = useFloating({
+        open: internalOpen,
+        onOpenChange: setIsOpen,
+        placement,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(ARROW_HEIGHT + ARROW_GAP),
+            flip({
+                fallbackAxisSideDirection: 'start',
+            }),
+            shift(),
+            arrow({
+                element: arrowRef,
+            }),
+        ],
+    });
+    const { styles: animationStyles } = useTransitionStyles(context, {
+        initial: {
+            opacity: 0,
+        },
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        // Event listeners to change the open state
+        useHover(context, { move: false, delay }),
+        useFocus(context),
+        useDismiss(context),
+        useRole(context, { role: 'tooltip' }),
+    ]);
+    const mergedRef = useMergeRefs([ref, refs.setFloating]);
+    const childMergedRef = useMergeRefs([
+        children
+            .ref,
+        refs.setReference,
+    ]);
+    if (!children ||
+        children?.type === React.Fragment ||
+        children === React.Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>');
+        return null;
+    }
+    return (jsxs(Fragment, { children: [cloneElement(children, getReferenceProps({
+                ref: childMergedRef,
+            })), internalOpen && (jsx(FloatingPortal, { children: jsx(Container, { children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
+                            className: clsx(classes.wrapper, inverted && classes.inverted, className),
+                            ref: mergedRef,
+                            ...rest,
+                        }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: classes.arrow, height: ARROW_HEIGHT })] }) }) }))] }));
+});
+Tooltip.displayName = 'Tooltip';
+
+export { Tooltip };

package/dist/esm/components/Tooltip/Tooltip.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"wrapper":"fds-tooltip-wrapper-47dedd27","inverted":"fds-tooltip-inverted-47dedd27","arrow":"fds-tooltip-arrow-47dedd27"};
+
+export { classes as default };

package/dist/esm/components/Typography/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './ErrorMessage.module.css.js';
+
+/** Use `ErrorMessage` to display text as error message. */
+const ErrorMessage = forwardRef(({ className, size = 'medium', spacing, as = 'div', asChild, error = true, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
+    return (jsx(Component, { ref: ref, className: clsx(classes.errorMessage, classes[size], {
+            [classes.spacing]: !!spacing,
+        }, error && classes.error, className), ...rest }));
+});
+ErrorMessage.displayName = 'ErrorMessage';
+
+export { ErrorMessage };

package/dist/esm/components/Typography/ErrorMessage/ErrorMessage.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"errorMessage":"fds-errormessage-errorMessage-a030a5d1","error":"fds-errormessage-error-a030a5d1","spacing":"fds-errormessage-spacing-a030a5d1","large":"fds-errormessage-large-a030a5d1","medium":"fds-errormessage-medium-a030a5d1","small":"fds-errormessage-small-a030a5d1","xsmall":"fds-errormessage-xsmall-a030a5d1"};
+
+export { classes as default };

package/dist/esm/components/Typography/Heading/Heading.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './Heading.module.css.js';
+
+/** Use `Heading` to render h1-6 elements with heading text styles.  */
+const Heading = forwardRef(({ level = 1, size = 'xlarge', spacing = false, className, as, asChild, ...rest }, ref) => {
+    const Component = asChild
+        ? $5e63c961fc1ce211$export$8c6ed5c666ac1360
+        : as ?? `h${level ?? 1}`;
+    return (jsx(Component, { ref: ref, className: clsx(classes.heading, classes[`size-${size}`], {
+            [classes.spacing]: spacing,
+        }, className), ...rest }));
+});
+Heading.displayName = 'Heading';
+
+export { Heading };

package/dist/esm/components/Typography/Heading/Heading.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"heading":"fds-heading-heading-f77d34ab","spacing":"fds-heading-spacing-f77d34ab","size-3xlarge":"fds-heading-size-3xlarge-f77d34ab","size-2xlarge":"fds-heading-size-2xlarge-f77d34ab","size-xlarge":"fds-heading-size-xlarge-f77d34ab","size-large":"fds-heading-size-large-f77d34ab","size-medium":"fds-heading-size-medium-f77d34ab","size-small":"fds-heading-size-small-f77d34ab","size-xsmall":"fds-heading-size-xsmall-f77d34ab","size-xxsmall":"fds-heading-size-xxsmall-f77d34ab"};
+
+export { classes as default };

package/dist/esm/components/Typography/Ingress/Ingress.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './Ingress.module.css.js';
+
+/** Use `Ingress` to display text as ingress. */
+const Ingress = forwardRef(({ className, size = 'medium', spacing, as = 'p', asChild, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
+    return (jsx(Component, { ref: ref, className: clsx(classes.ingress, classes[size], {
+            [classes.spacing]: !!spacing,
+        }, className), ...rest }));
+});
+Ingress.displayName = 'Ingress';
+
+export { Ingress };

package/dist/esm/components/Typography/Ingress/Ingress.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"ingress":"fds-ingress-ingress-e1a65285","spacing":"fds-ingress-spacing-e1a65285","medium":"fds-ingress-medium-e1a65285"};
+
+export { classes as default };

package/dist/esm/components/Typography/Label/Label.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './Label.module.css.js';
+
+const fontWeightsClasses = {
+    regular: classes.regularWeight,
+    medium: classes.mediumWeight,
+    semibold: classes.semiboldWeight,
+};
+/** Use `Label` for labels. */
+const Label = forwardRef(({ className, size = 'medium', spacing, as = 'label', weight = 'medium', asChild, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
+    return (jsx(Component, { ref: ref, className: clsx(classes.label, classes[size], spacing && classes.spacing, weight && [fontWeightsClasses[weight]], className), ...rest }));
+});
+Label.displayName = 'Label';
+
+export { Label };

package/dist/esm/components/Typography/Label/Label.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"label":"fds-label-label-b9d81987","spacing":"fds-label-spacing-b9d81987","large":"fds-label-large-b9d81987","medium":"fds-label-medium-b9d81987","small":"fds-label-small-b9d81987","xsmall":"fds-label-xsmall-b9d81987","regularWeight":"fds-label-regularWeight-b9d81987","mediumWeight":"fds-label-mediumWeight-b9d81987","semiboldWeight":"fds-label-semiboldWeight-b9d81987"};
+
+export { classes as default };

package/dist/esm/components/Typography/Paragraph/Paragraph.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './Paragraph.module.css.js';
+
+/** Use `Paragraph` to display text with paragraph text styles. */
+const Paragraph = forwardRef(({ className, size = 'medium', spacing, as = 'p', asChild, short, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
+    return (jsx(Component, { ref: ref, className: clsx(classes.paragraph, classes[size], {
+            [classes.spacing]: !!spacing,
+            [classes.short]: short,
+        }, className), ...rest }));
+});
+Paragraph.displayName = 'Paragraph';
+
+export { Paragraph };

package/dist/esm/components/Typography/Paragraph/Paragraph.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"paragraph":"fds-paragraph-paragraph-10d75e13","spacing":"fds-paragraph-spacing-10d75e13","large":"fds-paragraph-large-10d75e13","short":"fds-paragraph-short-10d75e13","medium":"fds-paragraph-medium-10d75e13","small":"fds-paragraph-small-10d75e13","xsmall":"fds-paragraph-xsmall-10d75e13"};
+
+export { classes as default };

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

@@ -0,0 +1,16 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import utilityClasses from '../../utilities/utility.module.css.js';
+import { ErrorMessage } from '../Typography/ErrorMessage/ErrorMessage.js';
+
+const defaultLabel = (count) => count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
+const defaultSrLabel = (maxCount) => `Tekstfelt med plass til ${maxCount} tegn`;
+const CharacterCounter = ({ label = defaultLabel, srLabel: propsSrLabel, maxCount, value, id, size, }) => {
+    const currentCount = maxCount - value.length;
+    const hasExceededLimit = value.length > maxCount;
+    const srLabel = propsSrLabel ? propsSrLabel : defaultSrLabel(maxCount);
+    return (jsxs(Fragment, { children: [jsx("span", { className: utilityClasses.visuallyHidden, id: id, children: srLabel }), jsx(ErrorMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
+};
+CharacterCounter.displayName = 'CharacterCounter';
+
+export { CharacterCounter };