@digdir/designsystemet-react 1.1.5 → 1.1.7

package/dist/esm/components/pagination/pagination-button.js

@@ -7,9 +7,9 @@ import { Button } from '../button/button.js';
  * PaginationButton component, use within a Pagination.Item.
  *
  * @example
- * <Pagination.Item>
- *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- * </Pagination.Item>
+ * <PaginationItem>
+ *   <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ * </PaginationItem>
  */
 const PaginationButton = forwardRef(function PaginationButton(rest, ref) {
     return jsx(Button, { ref: ref, ...rest });

package/dist/esm/components/pagination/pagination-item.js

@@ -7,11 +7,11 @@ import { forwardRef } from 'react';
  * PaginationItem component, use within a Pagination.List.
  *
  * @example
- * <Pagination.List>
- *   <Pagination.Item>
- *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- *   </Pagination.Item>
- * </Pagination.List>
+ * <PaginationList>
+ *   <PaginationItem>
+ *     <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *   </PaginationItem>
+ * </PaginationList>
  */
 const PaginationItem = forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'li';

package/dist/esm/components/pagination/pagination-list.js

@@ -8,11 +8,11 @@ import { forwardRef } from 'react';
  *
  * @example
  * <Pagination>
- *   <Pagination.List>
- *     <Pagination.Item>
- *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- *     </Pagination.Item>
- *   </Pagination.List>
+ *   <PaginationList>
+ *     <PaginationItem>
+ *       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *     </PaginationItem>
+ *   </PaginationList>
  * </Pagination>
  */
 const PaginationList = forwardRef(function PaginationList({ asChild, ...rest }, ref) {

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

@@ -1,5 +1,5 @@
 'use client';
-import { Popover as Popover$1 } from './popover.js';
+import { Popover } from './popover.js';
 import { PopoverTrigger } from './popover-trigger.js';
 import { PopoverTriggerContext } from './popover-trigger-context.js';
 
@@ -14,11 +14,11 @@ import { PopoverTriggerContext } from './popover-trigger-context.js';
  *   </Popover>
  * </Popover.TriggerContext>
  */
-const Popover = Object.assign(Popover$1, {
+const PopoverComponent = Object.assign(Popover, {
     TriggerContext: PopoverTriggerContext,
     Trigger: PopoverTrigger,
 });
-Popover.TriggerContext.displayName = 'Popover.TriggerContext';
-Popover.Trigger.displayName = 'Popover.Trigger';
+PopoverComponent.TriggerContext.displayName = 'Popover.TriggerContext';
+PopoverComponent.Trigger.displayName = 'Popover.Trigger';
 
-export { Popover, PopoverTrigger, PopoverTriggerContext };
+export { PopoverComponent as Popover, PopoverTrigger, PopoverTriggerContext };

package/dist/esm/components/popover/popover-trigger-context.js

@@ -6,12 +6,12 @@ import { createContext, useId, useState } from 'react';
  * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
  *
  * @example
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  */
 const PopoverTriggerContext = ({ children, }) => {
     const randomPopoverId = useId();

package/dist/esm/components/popover/popover-trigger.js

@@ -9,22 +9,22 @@ import { Context } from './popover-trigger-context.js';
  * PopoverTrigger component, used to trigger a popover.
  *
  * @example
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  *
  * @example inline
- * <Popover.TriggerContext>
+ * <PopoverTriggerContext>
  *   <Paragraph>
- *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+ *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
  *   </Paragraph>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  */
 const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
     const { popoverId } = useContext(Context);

package/dist/esm/components/radio/radio.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Field } from '../field/index.js';
+import { Field as FieldComponent } from '../field/index.js';
 import { Input } from '../input/input.js';
 import { Label } from '../label/label.js';
 import { ValidationMessage } from '../validation-message/validation-message.js';
@@ -13,7 +13,7 @@ import { ValidationMessage } from '../validation-message/validation-message.js';
  * <Radio label="I agree" value="agree" />
  */
 const Radio = forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
-    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
+    return (jsxs(FieldComponent, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
 });
 
 export { Radio };

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

@@ -1,5 +1,5 @@
 'use client';
-import { Search as Search$1 } from './search.js';
+import { Search } from './search.js';
 import { SearchButton } from './search-button.js';
 import { SearchClear } from './search-clear.js';
 import { SearchInput } from './search-input.js';
@@ -20,13 +20,13 @@ import { SearchInput } from './search-input.js';
  *   <Search.Clear />
  * </Search>
  */
-const Search = Object.assign(Search$1, {
+const SearchComponent = Object.assign(Search, {
     Clear: SearchClear,
     Button: SearchButton,
     Input: SearchInput,
 });
-Search.Clear.displayName = 'Search.Clear';
-Search.Button.displayName = 'Search.Button';
-Search.Input.displayName = 'Search.Input';
+SearchComponent.Clear.displayName = 'Search.Clear';
+SearchComponent.Button.displayName = 'Search.Button';
+SearchComponent.Input.displayName = 'Search.Input';
 
-export { Search, SearchButton, SearchClear, SearchInput };
+export { SearchComponent as Search, SearchButton, SearchClear, SearchInput };

package/dist/esm/components/search/search-button.js

@@ -8,8 +8,8 @@ import { Button } from '../button/button.js';
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Button>Søk</Search.Button>
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchButton>Søk</SearchButton>
  * </Search>
  */
 const SearchButton = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {

package/dist/esm/components/search/search-clear.js

@@ -9,8 +9,8 @@ import { setReactInputValue } from '../Combobox/utilities.js';
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Clear />
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchClear />
  * </Search>
  */
 const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {

package/dist/esm/components/search/search-input.js

@@ -8,7 +8,7 @@ import { Input } from '../input/input.js';
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
+ *   <SearchInput aria-label='Søk' />
  * </Search>
  */
 const SearchInput = forwardRef(function SearchInput({ ...rest }, ref) {

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

@@ -1,5 +1,5 @@
 'use client';
-import { Select as Select$1 } from './select.js';
+import { Select } from './select.js';
 import { SelectOptgroup } from './select-optgroup.js';
 import { SelectOption } from './select-option.js';
 
@@ -12,11 +12,11 @@ import { SelectOption } from './select-option.js';
  *   <Select.Option value='2'>Option 2</Select.Option>
  * </Select>
  */
-const Select = Object.assign(Select$1, {
+const SelectComponent = Object.assign(Select, {
     Option: SelectOption,
     Optgroup: SelectOptgroup,
 });
-Select.Option.displayName = 'Select.Option';
-Select.Optgroup.displayName = 'Select.Optgroup';
+SelectComponent.Option.displayName = 'Select.Option';
+SelectComponent.Optgroup.displayName = 'Select.Optgroup';
 
-export { Select, SelectOptgroup, SelectOption };
+export { SelectComponent as Select, SelectOptgroup, SelectOption };

package/dist/esm/components/select/select-optgroup.js

@@ -8,10 +8,10 @@ import { forwardRef } from 'react';
  *
  * @example
  * <Select>
- *   <Select.Optgroup label='Group 1'>
- *     <Select.Option value='1'>Option 1</Select.Option>
- *     <Select.Option value='2'>Option 2</Select.Option>
- *   </Select.Optgroup>
+ *   <SelectOptgroup label='Group 1'>
+ *     <SelectOption value='1'>Option 1</SelectOption>
+ *     <SelectOption value='2'>Option 2</SelectOption>
+ *   </SelectOptgroup>
  * </Select>
  */
 const SelectOptgroup = forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {

package/dist/esm/components/select/select-option.js

@@ -8,8 +8,8 @@ import { forwardRef } from 'react';
  *
  * @example
  * <Select>
- *   <Select.Option value='1'>Option 1</Select.Option>
- *   <Select.Option value='2'>Option 2</Select.Option>
+ *   <SelectOption value='1'>Option 1</SelectOption>
+ *   <SelectOption value='2'>Option 2</SelectOption>
  * </Select>
  */
 const SelectOption = forwardRef(function SelectOption({ asChild, ...rest }, ref) {

package/dist/esm/components/suggestion/suggestion.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, createContext, useRef, useId, useState, useEffect, useCallback } from 'react';
 import '@u-elements/u-combobox';
 import cl from 'clsx/lite';
-import { Chip } from '../chip/index.js';
+import { Chip as ChipComponent } from '../chip/index.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 const SuggestionContext = createContext({
@@ -92,7 +92,7 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
             }
         setIsEmpty(index === disabled);
     }, [filter]);
-    return (jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, uComboboxRef }, children: jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [selectedItems.map((item) => (jsx(Chip.Removable, { value: item.value, asChild: true, children: jsx("data", { children: renderSelected(item) }) }, item.value))), children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+    return (jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, uComboboxRef }, children: jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [selectedItems.map((item) => (jsx(ChipComponent.Removable, { value: item.value, asChild: true, children: jsx("data", { children: renderSelected(item) }) }, item.value))), children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
 });
 
 export { Suggestion, SuggestionContext };

package/dist/esm/components/switch/switch.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Field } from '../field/index.js';
+import { Field as FieldComponent } from '../field/index.js';
 import { Input } from '../input/input.js';
 import { Label } from '../label/label.js';
 
@@ -12,7 +12,7 @@ import { Label } from '../label/label.js';
  * <Switch label="I agree" value="agree" />
  */
 const Switch = forwardRef(function Switch({ 'data-size': size, children, className, description, label, position, style, ...rest }, ref) {
-    return (jsxs(Field, { className: className, "data-position": position, "data-size": size, style: style, children: [jsx(Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description })] }));
+    return (jsxs(FieldComponent, { className: className, "data-position": position, "data-size": size, style: style, children: [jsx(Input, { type: 'checkbox', role: 'switch', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description })] }));
 });
 
 export { Switch };

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

@@ -1,5 +1,5 @@
 'use client';
-import { Table as Table$1 } from './table.js';
+import { Table } from './table.js';
 import { TableBody } from './table-body.js';
 import { TableCell } from './table-cell.js';
 import { TableFoot } from './table-foot.js';
@@ -32,7 +32,7 @@ import { TableRow } from './table-row.js';
  *   </Table.Foot>
  * </Table>
  */
-const Table = Object.assign(Table$1, {
+const TableComponent = Object.assign(Table, {
     Head: TableHead,
     Body: TableBody,
     Row: TableRow,
@@ -40,12 +40,12 @@ const Table = Object.assign(Table$1, {
     HeaderCell: TableHeaderCell,
     Foot: TableFoot,
 });
-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';
-Table.Foot.displayName = 'Table.Foot';
+TableComponent.displayName = 'Table';
+TableComponent.Head.displayName = 'Table.Head';
+TableComponent.Body.displayName = 'Table.Body';
+TableComponent.Row.displayName = 'Table.Row';
+TableComponent.Cell.displayName = 'Table.Cell';
+TableComponent.HeaderCell.displayName = 'Table.HeaderCell';
+TableComponent.Foot.displayName = 'Table.Foot';
 
-export { Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };
+export { TableComponent as Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };

package/dist/esm/components/table/table-body.js

@@ -6,12 +6,12 @@ import { forwardRef } from 'react';
  * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
  *
  * @example
- * <Table.Body>
- *   <Table.Row>
- *     <Table.Cell>John</Table.Cell>
- *     <Table.Cell>25</Table.Cell>
- *   </Table.Row>
- * </Table.Body>
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John</TableCell>
+ *     <TableCell>25</TableCell>
+ *   </TableRow>
+ * </TableBody>
  */
 const TableBody = forwardRef(function TableBody(rest, ref) {
     return jsx("tbody", { ref: ref, ...rest });

package/dist/esm/components/table/table-cell.js

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
  * TableCell component, used to display the cells of a table. Renders a native HTML td element.
  *
  * @example
- * <Table.Cell>John</Table.Cell>
+ * <TableCell>John</TableCell>
  */
 const TableCell = forwardRef(function TableCell(rest, ref) {
     return jsx("td", { ref: ref, ...rest });

package/dist/esm/components/table/table-foot.js

@@ -6,12 +6,12 @@ import { forwardRef } from 'react';
  * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
  *
  * @example
- * <Table.Foot>
- *   <Table.Row>
- *     <Table.Cell>Total</Table.Cell>
- *     <Table.Cell>2</Table.Cell>
- *   </Table.Row>
- * </Table.Foot>
+ * <TableFoot>
+ *   <TableRow>
+ *     <TableCell>Total</TableCell>
+ *     <TableCell>2</TableCell>
+ *   </TableRow>
+ * </TableFoot>
  */
 const TableFoot = forwardRef(function TableFoot(rest, ref) {
     return jsx("tfoot", { ref: ref, ...rest });

package/dist/esm/components/table/table-head.js

@@ -6,12 +6,12 @@ import { forwardRef } from 'react';
  * TableHead component, used to display the header of a table. Renders a native HTML thead element.
  *
  * @example
- * <Table.Head>
- *   <Table.Row>
- *     <Table.HeaderCell>Name</Table.HeaderCell>
- *     <Table.HeaderCell>Age</Table.HeaderCell>
- *   </Table.Row>
- * </Table.Head>
+ * <TableHead>
+ *   <TableRow>
+ *     <TableHeaderCell>Name</TableHeaderCell>
+ *     <TableHeaderCell>Age</TableHeaderCell>
+ *   </TableRow>
+ * </TableHead>
  */
 const TableHead = forwardRef(function TableHead(rest, ref) {
     return jsx("thead", { ref: ref, ...rest });

package/dist/esm/components/table/table-header-cell.js

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
  * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
  *
  * @example
- * <Table.HeaderCell>Name</Table.HeaderCell>
+ * <TableHeaderCell>Name</TableHeaderCell>
  */
 const TableHeaderCell = forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
     return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsx("button", { type: 'button', children: children }) : children }));

package/dist/esm/components/table/table-row.js

@@ -6,10 +6,10 @@ import { forwardRef } from 'react';
  * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
  *
  * @example
- * <Table.Row>
- *   <Table.Cell>John</Table.Cell>
- *   <Table.Cell>25</Table.Cell>
- * </Table.Row>
+ * <TableRow>
+ *   <TableCell>John</TableCell>
+ *   <TableCell>25</TableCell>
+ * </TableRow>
  */
 const TableRow = forwardRef(function TableRow(rest, ref) {
     return jsx("tr", { ref: ref, ...rest });

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

@@ -1,5 +1,5 @@
 'use client';
-import { Tabs as Tabs$1 } from './tabs.js';
+import { Tabs } from './tabs.js';
 import { TabsList } from './tabs-list.js';
 import { TabsPanel } from './tabs-panel.js';
 import { TabsTab } from './tabs-tab.js';
@@ -19,13 +19,13 @@ import { TabsTab } from './tabs-tab.js';
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
  */
-const Tabs = Object.assign(Tabs$1, {
+const TabsComponent = Object.assign(Tabs, {
     List: TabsList,
     Tab: TabsTab,
     Panel: TabsPanel,
 });
-Tabs.Tab.displayName = 'Tabs.Tab';
-Tabs.List.displayName = 'Tabs.List';
-Tabs.Panel.displayName = 'Tabs.Panel';
+TabsComponent.Tab.displayName = 'Tabs.Tab';
+TabsComponent.List.displayName = 'Tabs.List';
+TabsComponent.Panel.displayName = 'Tabs.Panel';
 
-export { Tabs, TabsList, TabsPanel, TabsTab };
+export { TabsComponent as Tabs, TabsList, TabsPanel, TabsTab };

package/dist/esm/components/tabs/tabs-list.js

@@ -8,10 +8,10 @@ import { Context } from './tabs.js';
  * The container for all `Tab` components.
  *
  * @example
- * <Tabs.List>
- *  <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
- *  <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
- * </Tabs.List>
+ * <TabsList>
+ *  <TabsTab value='1'>Tab 1</TabsTab>
+ *  <TabsTab value='2'>Tab 2</TabsTab>
+ * </TabsList>
  */
 const TabsList = forwardRef(function TabsList({ children, ...rest }, ref) {
     const { value } = useContext(Context);

package/dist/esm/components/tabs/tabs-panel.js

@@ -8,7 +8,7 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
  * A single content item in a Tabs component.
  *
  * @example
- * <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ * <TabsPanel value='1'>content 1</TabsPanel>
  */
 const TabsPanel = forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
     const { value: tabsValue } = useContext(Context);

package/dist/esm/components/tabs/tabs-tab.js

@@ -8,7 +8,7 @@ import { Context } from './tabs.js';
  * A single item in a Tabs component.
  *
  * @example
- * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ * <TabsTab value='1'>Tab 1</TabsTab>
  */
 const TabsTab = forwardRef(function TabsTab({ value, id, ...rest }, ref) {
     const tabs = useContext(Context);

package/dist/esm/components/textfield/textfield.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Field } from '../field/index.js';
+import { Field as FieldComponent } from '../field/index.js';
 import { Input } from '../input/input.js';
 import { Label } from '../label/label.js';
 import { Textarea } from '../textarea/textarea.js';
@@ -19,7 +19,7 @@ import { FieldAffixes, FieldAffix } from '../field/field-affix.js';
  * <Textfield label="Textfield label">
  */
 const Textfield = forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
-    return (jsxs(Field, { className: className, "data-size": size, style: style, children: [!!label && jsx(Label, { children: label }), !!description && jsx(FieldDescription, { children: description }), jsxs(FieldAffixes, { children: [prefix === undefined || jsx(FieldAffix, { children: prefix }), multiline === true ? (jsx(Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsx(Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsx(FieldAffix, { children: suffix })] }), !!error && jsx(ValidationMessage, { children: error }), !!counter && (jsx(Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
+    return (jsxs(FieldComponent, { className: className, "data-size": size, style: style, children: [!!label && jsx(Label, { children: label }), !!description && jsx(FieldDescription, { children: description }), jsxs(FieldAffixes, { children: [prefix === undefined || jsx(FieldAffix, { children: prefix }), multiline === true ? (jsx(Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsx(Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsx(FieldAffix, { children: suffix })] }), !!error && jsx(ValidationMessage, { children: error }), !!counter && (jsx(FieldComponent.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
 });
 
 export { Textfield };

package/dist/esm/components/toggle-group/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { ToggleGroup as ToggleGroup$1 } from './toggle-group.js';
+import { ToggleGroup } from './toggle-group.js';
 import { ToggleGroupItem } from './toggle-group-item.js';
 
 /**
@@ -12,9 +12,9 @@ import { ToggleGroupItem } from './toggle-group-item.js';
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = Object.assign(ToggleGroup$1, {
+const ToggleGroupComponent = Object.assign(ToggleGroup, {
     Item: ToggleGroupItem,
 });
-ToggleGroup.Item.displayName = 'ToggleGroup.Item';
+ToggleGroupComponent.Item.displayName = 'ToggleGroup.Item';
 
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroupComponent as ToggleGroup, ToggleGroupItem };

package/dist/esm/components/toggle-group/toggle-group-item.js

@@ -8,7 +8,7 @@ import { useToggleGroupItem } from './use-toggle-groupitem.js';
 /**
  * A single item in a ToggleGroup.
  * @example
- * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
  */
 const ToggleGroupItem = forwardRef(function ToggleGroupItem(rest, ref) {
     const { active, buttonProps, value } = useToggleGroupItem(rest);

package/dist/esm/index.js

@@ -1,4 +1,14 @@
 'use client';
+export { omit } from './components/Combobox/omit/omit.js';
+export { RovingFocusItem } from './utilities/roving-focus/roving-focus-item.js';
+export { RovingFocusRoot } from './utilities/roving-focus/roving-focus-root.js';
+export { useCheckboxGroup } from './utilities/hooks/use-checkbox-group/use-checkbox-group.js';
+export { useDebounceCallback } from './utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+export { useIsomorphicLayoutEffect } from './utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js';
+export { useMediaQuery } from './utilities/hooks/deprecated/use-media-query/use-media-query.js';
+export { usePagination } from './utilities/hooks/use-pagination/use-pagination.js';
+export { useRadioGroup } from './utilities/hooks/use-radio-group/use-radio-group.js';
+export { useSynchronizedAnimation } from './utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
 export { Alert } from './components/alert/alert.js';
 export { Avatar } from './components/avatar/avatar.js';
 export { Badge } from './components/badge/index.js';
@@ -95,14 +105,3 @@ export { ToggleGroup } from './components/toggle-group/index.js';
 export { ToggleGroupItem } from './components/toggle-group/toggle-group-item.js';
 export { Tooltip } from './components/tooltip/tooltip.js';
 export { ValidationMessage } from './components/validation-message/validation-message.js';
-export { useCheckboxGroup } from './utilities/hooks/use-checkbox-group/use-checkbox-group.js';
-export { useDebounceCallback } from './utilities/hooks/use-debounce-callback/use-debounce-callback.js';
-export { useIsomorphicLayoutEffect } from './utilities/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js';
-export { useMediaQuery } from './utilities/hooks/use-media-query/use-media-query.js';
-export { usePagination } from './utilities/hooks/use-pagination/use-pagination.js';
-export { useRadioGroup } from './utilities/hooks/use-radio-group/use-radio-group.js';
-export { useSynchronizedAnimation } from './utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
-export { omit } from './utilities/omit/omit.js';
-export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/roving-focus/roving-focus-item.js';
-export { RovingFocusRoot } from './utilities/roving-focus/roving-focus-root.js';
-export { useRovingFocus } from './utilities/roving-focus/use-roving-focus.js';

package/dist/esm/utilities/hooks/use-synchronized-animation/use-synchronized-animation.js

@@ -1,9 +1,10 @@
 'use client';
-import { useRef } from 'react';
-import { useIsomorphicLayoutEffect } from '../use-isomorphic-layout-effect/use-isomorphic-layout-effect.js';
+import { useRef, useLayoutEffect, useEffect } from 'react';
 
 // Inspired by Sam Selikoff
 // https://github.com/samselikoff/2022-02-24-use-synchronized-animation/blob/main/src/App.js
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /**
  * Synchronizes the css animation of multiple elements with the same `animationName`.
  *
@@ -43,4 +44,4 @@ function useSynchronizedAnimation(animationName) {
     return ref;
 }
 
-export { useSynchronizedAnimation };
+export { useIsomorphicLayoutEffect, useSynchronizedAnimation };

package/dist/react-types.d.ts

@@ -1,5 +1,4 @@
-import type { Size } from '@digdir/designsystemet-react';
-import type { Color } from '@digdir/designsystemet-react/colors';
+import type { Color, Size } from '@digdir/designsystemet/types';
 
 declare global {
   namespace React {

package/dist/types/colors.d.ts

@@ -1,24 +1,2 @@
-declare const emptyObjectSymbol: unique symbol;
-type EmptyObject = {
-    [emptyObjectSymbol]?: never;
-};
-/**
- * Base interface for available colors in Designsystemet.
- * The CLI will generate augmentations of this interface to allow
- * type safety of custom color names.
- */
-export interface MainAndSupportColors {
-}
-/**
- * If {@link MainAndSupportColors} has been extended to include color names, return T,
- * otherwise return the arbitrary string type.
- */
-type ColorWithFallback<T> = MainAndSupportColors extends EmptyObject ? string : T;
-export type SeverityInfo = 'info';
-export type SeveritySuccess = 'success';
-export type SeverityWarning = 'warning';
-export type SeverityDanger = 'danger';
-export type SeverityColors = SeverityInfo | SeveritySuccess | SeverityWarning | SeverityDanger;
-export type Color = ColorWithFallback<'neutral' | keyof MainAndSupportColors>;
-export {};
+export type { Color, SeverityColors, } from '@digdir/designsystemet/types';
 //# sourceMappingURL=colors.d.ts.map