@digdir/designsystemet-react 1.1.4 → 1.1.6

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

@@ -10,11 +10,11 @@ var react = require('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 = react.forwardRef(function PaginationList({ asChild, ...rest }, ref) {

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

@@ -16,13 +16,13 @@ var popoverTriggerContext = require('./popover-trigger-context.js');
  *   </Popover>
  * </Popover.TriggerContext>
  */
-const Popover = Object.assign(popover.Popover, {
+const PopoverComponent = Object.assign(popover.Popover, {
     TriggerContext: popoverTriggerContext.PopoverTriggerContext,
     Trigger: popoverTrigger.PopoverTrigger,
 });
-Popover.TriggerContext.displayName = 'Popover.TriggerContext';
-Popover.Trigger.displayName = 'Popover.Trigger';
+PopoverComponent.TriggerContext.displayName = 'Popover.TriggerContext';
+PopoverComponent.Trigger.displayName = 'Popover.Trigger';
 
 exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
 exports.PopoverTriggerContext = popoverTriggerContext.PopoverTriggerContext;
-exports.Popover = Popover;
+exports.Popover = PopoverComponent;

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

@@ -8,12 +8,12 @@ var react = require('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 = react.useId();

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

@@ -11,22 +11,22 @@ var popoverTriggerContext = require('./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 = react.forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
     const { popoverId } = react.useContext(popoverTriggerContext.Context);

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

@@ -22,16 +22,16 @@ var searchInput = require('./search-input.js');
  *   <Search.Clear />
  * </Search>
  */
-const Search = Object.assign(search.Search, {
+const SearchComponent = Object.assign(search.Search, {
     Clear: searchClear.SearchClear,
     Button: searchButton.SearchButton,
     Input: searchInput.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';
 
 exports.SearchButton = searchButton.SearchButton;
 exports.SearchClear = searchClear.SearchClear;
 exports.SearchInput = searchInput.SearchInput;
-exports.Search = Search;
+exports.Search = SearchComponent;

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

@@ -10,8 +10,8 @@ var button = require('../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 = react.forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {

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

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

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

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

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

@@ -14,13 +14,13 @@ var selectOption = require('./select-option.js');
  *   <Select.Option value='2'>Option 2</Select.Option>
  * </Select>
  */
-const Select = Object.assign(select.Select, {
+const SelectComponent = Object.assign(select.Select, {
     Option: selectOption.SelectOption,
     Optgroup: selectOptgroup.SelectOptgroup,
 });
-Select.Option.displayName = 'Select.Option';
-Select.Optgroup.displayName = 'Select.Optgroup';
+SelectComponent.Option.displayName = 'Select.Option';
+SelectComponent.Optgroup.displayName = 'Select.Optgroup';
 
 exports.SelectOptgroup = selectOptgroup.SelectOptgroup;
 exports.SelectOption = selectOption.SelectOption;
-exports.Select = Select;
+exports.Select = SelectComponent;

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

@@ -10,10 +10,10 @@ var react = require('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 = react.forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {

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

@@ -10,8 +10,8 @@ var react = require('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 = react.forwardRef(function SelectOption({ asChild, ...rest }, ref) {

package/dist/cjs/components/suggestion/suggestion-chips.js

@@ -1,14 +1,12 @@
 'use client';
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var index = require('../chip/index.js');
-var suggestion = require('./suggestion.js');
-
-const SuggestionChips = ({ render = ({ label }) => label, }) => {
-    const { selectedItems = [] } = react.useContext(suggestion.SuggestionContext);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedItems.map((item) => (jsxRuntime.jsx(index.Chip.Removable, { value: item.value, asChild: true, children: jsxRuntime.jsx("data", { children: render(item) }) }, item.value))) }));
+/**
+ * @deprecated Suggestion.Chips is deprecated, use `renderSelected` on `Suggestion` instead
+ */
+const SuggestionChips = () => {
+    console.warn('Suggestion: Using <Suggestion.Chips> is deprecated - please remove from your code.');
+    return null;
 };
 SuggestionChips.displayName = 'SuggestionChips';
 

package/dist/cjs/components/suggestion/suggestion-input.js

@@ -18,20 +18,17 @@ var suggestion = require('./suggestion.js');
  * </Suggestion>
  */
 const SuggestionInput = react.forwardRef(function SuggestionList({ value, onInput, onChange, ...rest }, ref) {
-    const { listId, handleFilter } = react.useContext(suggestion.SuggestionContext);
+    const { handleFilter } = react.useContext(suggestion.SuggestionContext);
     react.useEffect(handleFilter, [value]); // Filter if controlled value
     if (onChange)
         console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onValueChange on Suggest instead, or onInput if fetching API results');
     if (value)
         console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use value on Suggest instead.');
-    const popoverProps = Object.assign({
-        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: listId,
-    }, rest);
     return (jsxRuntime.jsx(input.Input, { placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
         , ref: ref, onInput: (event) => {
             onInput?.(event); // Should run first
             handleFilter?.(); // Filter if uncontrolled value
-        }, ...popoverProps }));
+        }, ...rest }));
 });
 
 exports.SuggestionInput = SuggestionInput;

package/dist/cjs/components/suggestion/suggestion-list.js

@@ -6,7 +6,6 @@ var react = require('react');
 require('@u-elements/u-datalist');
 var dom = require('@floating-ui/dom');
 var suggestion = require('./suggestion.js');
-var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 /**
  * Component that provides a Suggestion list.
@@ -20,17 +19,12 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
  * </Suggestion>
  */
 const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
-    const { listId, setListId, handleFilter } = react.useContext(suggestion.SuggestionContext);
-    const listRef = react.useRef(null);
-    const mergedRefs = useMergeRefs.useMergeRefs([ref, listRef]);
+    const { handleFilter, uComboboxRef } = react.useContext(suggestion.SuggestionContext);
     react.useEffect(handleFilter); // Must run on every render
-    react.useEffect(() => {
-        id && setListId(id);
-    }, [id]);
     // Position with floating-ui
     react.useEffect(() => {
-        const list = listRef.current;
-        const trigger = document.querySelector(`[popovertarget="${list?.id}"]`);
+        const trigger = uComboboxRef?.current?.control;
+        const list = uComboboxRef?.current?.list;
         if (list && trigger) {
             return dom.autoUpdate(trigger, list, () => {
                 dom.computePosition(trigger, list, {
@@ -42,8 +36,8 @@ const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d
                 });
             });
         }
-    }, [listId]);
-    return (jsxRuntime.jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: mergedRefs, id: listId, popover: 'manual', ...rest }));
+    }, []);
+    return (jsxRuntime.jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: ref, popover: 'manual', ...rest }));
 });
 const triggerWidth = {
     name: 'TriggerWidth',

package/dist/cjs/components/suggestion/suggestion-option.js

@@ -4,6 +4,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+/**
+ * A component for rendering individual options in the Suggestion list.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
 const SuggestionOption = react.forwardRef(function SuggestionOption({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("u-option", { class: className, ref: ref, ...rest }));
 });

package/dist/cjs/components/suggestion/suggestion.js

@@ -5,10 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('@u-elements/u-combobox');
 var cl = require('clsx/lite');
+var index = require('../chip/index.js');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 const SuggestionContext = react.createContext({
-    setListId: () => undefined,
     handleFilter: () => undefined,
 });
 const text = (el) => el.textContent?.trim() || '';
@@ -29,21 +29,26 @@ const nextItems = (data, prev, multiple) => {
         : [...sanitizeItems(prev), item];
 };
 const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
-const Suggestion = react.forwardRef(function Suggestion({ children, className, creatable = false, defaultValue, filter = true, multiple = false, name, onValueChange, value, ...rest }, ref) {
+const deprecate = (from, to) => console.warn(`Suggestion: Using "${from}" is deprecated, please use "${to}" instead.`);
+const Suggestion = react.forwardRef(function Suggestion({ children, className, creatable = false, defaultSelected: _defaultSelected, defaultValue, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange: _onSelectedChange, onValueChange, renderSelected = ({ label }) => label, selected: _selected, value, ...rest }, ref) {
+    // For backwards compatibility:
+    const selected = _selected ?? value;
+    const defaultSelected = _defaultSelected ?? defaultValue;
+    const onSelectedChange = _onSelectedChange ?? onValueChange;
+    if (value)
+        deprecate('value', 'selected');
+    if (defaultValue)
+        deprecate('defaultValue', 'defaultSelected');
+    if (onValueChange)
+        deprecate('onValueChange', 'onSelectedChange');
     const uComboboxRef = react.useRef(null);
     const genId = react.useId();
     const selectId = rest.id ? `${rest.id}-select` : genId;
-    const isContolled = value !== undefined;
+    const isControlled = selected !== undefined;
     const mergedRefs = useMergeRefs.useMergeRefs([ref, uComboboxRef]);
     const [isEmpty, setIsEmpty] = react.useState(false);
-    const [selectedItems, setSelectedItems] = react.useState(sanitizeItems(defaultValue || value));
-    const [listId, setListId] = react.useState(rest.id ? `${rest.id}-list` : `${genId}-list`);
-    // Update if controlled values
-    const prevControlled = react.useRef(value);
-    if (value !== prevControlled.current) {
-        prevControlled.current = value;
-        setSelectedItems(sanitizeItems(prevControlled.current));
-    }
+    const [defaultItems, setDefaultItems] = react.useState(sanitizeItems(defaultSelected));
+    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
     /**
      * Listerners and handling of adding/removing
      */
@@ -53,14 +58,21 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
             event.preventDefault();
             const multiple = combobox?.multiple;
             const data = event.detail;
-            if (isContolled)
-                onValueChange?.(nextItems(data, prevControlled.current, multiple));
+            if (isControlled)
+                onSelectedChange?.(nextItems(data, selectedItems, multiple));
             else
-                setSelectedItems((prevItems) => nextItems(data, prevItems, multiple));
+                setDefaultItems(nextItems(data, selectedItems, multiple));
         };
         combobox?.addEventListener('beforechange', beforeChange);
         return () => combobox?.removeEventListener('beforechange', beforeChange);
-    }, [isContolled, setSelectedItems]);
+    }, [selectedItems, isControlled]);
+    // Before match event listener
+    react.useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeMatch = (e) => onBeforeMatch?.(e);
+        combobox?.addEventListener('beforematch', beforeMatch);
+        return () => combobox?.removeEventListener('beforematch', beforeMatch);
+    }, [onBeforeMatch]);
     const handleFilter = react.useCallback(() => {
         const { control: input, options = [] } = uComboboxRef?.current || {};
         const filterFn = filter === true ? defaultFilter : filter;
@@ -82,7 +94,7 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
             }
         setIsEmpty(index === disabled);
     }, [filter]);
-    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, listId, setListId, handleFilter }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && (jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, uComboboxRef }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [selectedItems.map((item) => (jsxRuntime.jsx(index.Chip.Removable, { value: item.value, asChild: true, children: jsxRuntime.jsx("data", { children: renderSelected(item) }) }, item.value))), children, !!name && (jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
 });
 
 exports.Suggestion = Suggestion;

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

@@ -34,7 +34,7 @@ var tableRow = require('./table-row.js');
  *   </Table.Foot>
  * </Table>
  */
-const Table = Object.assign(table.Table, {
+const TableComponent = Object.assign(table.Table, {
     Head: tableHead.TableHead,
     Body: tableBody.TableBody,
     Row: tableRow.TableRow,
@@ -42,13 +42,13 @@ const Table = Object.assign(table.Table, {
     HeaderCell: tableHeaderCell.TableHeaderCell,
     Foot: tableFoot.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';
 
 exports.TableBody = tableBody.TableBody;
 exports.TableCell = tableCell.TableCell;
@@ -56,4 +56,4 @@ exports.TableFoot = tableFoot.TableFoot;
 exports.TableHead = tableHead.TableHead;
 exports.TableHeaderCell = tableHeaderCell.TableHeaderCell;
 exports.TableRow = tableRow.TableRow;
-exports.Table = Table;
+exports.Table = TableComponent;

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

@@ -8,12 +8,12 @@ var react = require('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 = react.forwardRef(function TableBody(rest, ref) {
     return jsxRuntime.jsx("tbody", { ref: ref, ...rest });

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

@@ -8,7 +8,7 @@ var react = require('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 = react.forwardRef(function TableCell(rest, ref) {
     return jsxRuntime.jsx("td", { ref: ref, ...rest });

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

@@ -8,12 +8,12 @@ var react = require('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 = react.forwardRef(function TableFoot(rest, ref) {
     return jsxRuntime.jsx("tfoot", { ref: ref, ...rest });

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

@@ -8,12 +8,12 @@ var react = require('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 = react.forwardRef(function TableHead(rest, ref) {
     return jsxRuntime.jsx("thead", { ref: ref, ...rest });

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

@@ -8,7 +8,7 @@ var react = require('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 = react.forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
     return (jsxRuntime.jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsxRuntime.jsx("button", { type: 'button', children: children }) : children }));

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

@@ -8,10 +8,10 @@ var react = require('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 = react.forwardRef(function TableRow(rest, ref) {
     return jsxRuntime.jsx("tr", { ref: ref, ...rest });

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

@@ -21,16 +21,16 @@ var tabsTab = require('./tabs-tab.js');
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
  */
-const Tabs = Object.assign(tabs.Tabs, {
+const TabsComponent = Object.assign(tabs.Tabs, {
     List: tabsList.TabsList,
     Tab: tabsTab.TabsTab,
     Panel: tabsPanel.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';
 
 exports.TabsList = tabsList.TabsList;
 exports.TabsPanel = tabsPanel.TabsPanel;
 exports.TabsTab = tabsTab.TabsTab;
-exports.Tabs = Tabs;
+exports.Tabs = TabsComponent;

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

@@ -10,10 +10,10 @@ var tabs = require('./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 = react.forwardRef(function TabsList({ children, ...rest }, ref) {
     const { value } = react.useContext(tabs.Context);

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

@@ -10,7 +10,7 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
  * 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 = react.forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
     const { value: tabsValue } = react.useContext(tabs.Context);

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

@@ -10,7 +10,7 @@ var tabs = require('./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 = react.forwardRef(function TabsTab({ value, id, ...rest }, ref) {
     const tabs$1 = react.useContext(tabs.Context);

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

@@ -14,10 +14,10 @@ var toggleGroupItem = require('./toggle-group-item.js');
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
  * </ToggleGroup>
  */
-const ToggleGroup = Object.assign(toggleGroup.ToggleGroup, {
+const ToggleGroupComponent = Object.assign(toggleGroup.ToggleGroup, {
     Item: toggleGroupItem.ToggleGroupItem,
 });
-ToggleGroup.Item.displayName = 'ToggleGroup.Item';
+ToggleGroupComponent.Item.displayName = 'ToggleGroup.Item';
 
 exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
-exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroup = ToggleGroupComponent;

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

@@ -10,7 +10,7 @@ var useToggleGroupitem = require('./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 = react.forwardRef(function ToggleGroupItem(rest, ref) {
     const { active, buttonProps, value } = useToggleGroupitem.useToggleGroupItem(rest);

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

@@ -1,5 +1,5 @@
 'use client';
-import { Breadcrumbs as Breadcrumbs$1 } from './breadcrumbs.js';
+import { Breadcrumbs } from './breadcrumbs.js';
 import { BreadcrumbsItem } from './breadcrumbs-item.js';
 import { BreadcrumbsLink } from './breadcrumbs-link.js';
 import { BreadcrumbsList } from './breadcrumbs-list.js';
@@ -8,7 +8,7 @@ import { BreadcrumbsList } from './breadcrumbs-list.js';
  * `Breadcrumbs` is a component that displays a list of breadcrumbs.
  *
  * @example
- * <Breadcrumbs aria-label='Du er her:' {...args}>
+ * <Breadcrumbs aria-label='Du er her:'>
  *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
  *    Nivå 1
  *  </Breadcrumbs.Link>
@@ -22,13 +22,13 @@ import { BreadcrumbsList } from './breadcrumbs-list.js';
  *  </Breadcrumbs.List>
  * </Breadcrumbs>
  */
-const Breadcrumbs = Object.assign(Breadcrumbs$1, {
+const BreadcrumbsComponent = Object.assign(Breadcrumbs, {
     List: BreadcrumbsList,
     Item: BreadcrumbsItem,
     Link: BreadcrumbsLink,
 });
-Breadcrumbs.List.displayName = 'Breadcrumbs.List';
-Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
-Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
+BreadcrumbsComponent.List.displayName = 'Breadcrumbs.List';
+BreadcrumbsComponent.Item.displayName = 'Breadcrumbs.Item';
+BreadcrumbsComponent.Link.displayName = 'Breadcrumbs.Link';
 
-export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList };
+export { BreadcrumbsComponent as Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList };