@digdir/designsystemet-react 1.1.5 → 1.1.6

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/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 };

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

@@ -1,5 +1,5 @@
 'use client';
-import { Card as Card$1 } from './card.js';
+import { Card } from './card.js';
 import { CardBlock } from './card-block.js';
 
 /**
@@ -12,9 +12,9 @@ import { CardBlock } from './card-block.js';
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = Object.assign(Card$1, {
+const CardComponent = Object.assign(Card, {
     Block: CardBlock,
 });
-Card.Block.displayName = 'Card.Block';
+CardComponent.Block.displayName = 'Card.Block';
 
-export { Card, CardBlock };
+export { CardComponent as Card, CardBlock };

package/dist/esm/components/checkbox/checkbox.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';
  * <Checkbox label="I agree" value="agree" />
  */
 const Checkbox = forwardRef(function Checkbox({ '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: 'checkbox', 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: 'checkbox', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
 });
 
 export { Checkbox };

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

@@ -1,15 +1,15 @@
 'use client';
 import { ChipRemovable, ChipRadio, ChipCheckbox, ChipButton } from './chips.js';
 
-const Chip = {
+const ChipComponent = {
     Button: ChipButton,
     Checkbox: ChipCheckbox,
     Radio: ChipRadio,
     Removable: ChipRemovable,
 };
-Chip.Button.displayName = 'Chip.Button';
-Chip.Checkbox.displayName = 'Chip.Checkbox';
-Chip.Radio.displayName = 'Chip.Radio';
-Chip.Removable.displayName = 'Chip.Removable';
+ChipComponent.Button.displayName = 'Chip.Button';
+ChipComponent.Checkbox.displayName = 'Chip.Checkbox';
+ChipComponent.Radio.displayName = 'Chip.Radio';
+ChipComponent.Removable.displayName = 'Chip.Removable';
 
-export { Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };
+export { ChipComponent as Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

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

@@ -1,5 +1,5 @@
 'use client';
-import { Details as Details$1 } from './details.js';
+import { Details } from './details.js';
 import { DetailsContent } from './details-content.js';
 import { DetailsSummary } from './details-summary.js';
 
@@ -12,11 +12,11 @@ import { DetailsSummary } from './details-summary.js';
  *  <Details.Content>Content</Details.Content>
  * </Details>
  */
-const Details = Object.assign(Details$1, {
+const DetailsComponent = Object.assign(Details, {
     Summary: DetailsSummary,
     Content: DetailsContent,
 });
-Details.Summary.displayName = 'Details.Summary';
-Details.Content.displayName = 'Details.Content';
+DetailsComponent.Summary.displayName = 'Details.Summary';
+DetailsComponent.Content.displayName = 'Details.Content';
 
-export { Details, DetailsContent, DetailsSummary };
+export { DetailsComponent as Details, DetailsContent, DetailsSummary };

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

@@ -1,5 +1,5 @@
 'use client';
-import { Dialog as Dialog$1 } from './dialog.js';
+import { Dialog } from './dialog.js';
 import { DialogBlock } from './dialog-block.js';
 import { DialogTrigger } from './dialog-trigger.js';
 import { DialogTriggerContext } from './dialog-trigger-context.js';
@@ -17,13 +17,13 @@ import { DialogTriggerContext } from './dialog-trigger-context.js';
  *   </Dialog>
  * </Dialog.TriggerContext>
  */
-const Dialog = Object.assign(Dialog$1, {
+const DialogComponent = Object.assign(Dialog, {
     Block: DialogBlock,
     TriggerContext: DialogTriggerContext,
     Trigger: DialogTrigger,
 });
-Dialog.Block.displayName = 'Dialog.Block';
-Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
-Dialog.Trigger.displayName = 'Dialog.Trigger';
+DialogComponent.Block.displayName = 'Dialog.Block';
+DialogComponent.TriggerContext.displayName = 'Dialog.TriggerContext';
+DialogComponent.Trigger.displayName = 'Dialog.Trigger';
 
-export { Dialog, DialogBlock, DialogTrigger, DialogTriggerContext };
+export { DialogComponent as Dialog, DialogBlock, DialogTrigger, DialogTriggerContext };

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

@@ -3,6 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Button } from '../button/button.js';
 
+/**
+ * DropdownButton component, used to display a button in the DropdownItem.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
 const DropdownButton = forwardRef(function DropdownButton({ ...rest }, ref) {
     return jsx(Button, { ref: ref, variant: 'tertiary', ...rest });
 });

package/dist/esm/components/dropdown/dropdown-heading.js

@@ -3,6 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Heading } from '../heading/heading.js';
 
+/**
+ * DropdownHeading component, used to display a heading in the Dropdown.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownHeading>Heading</DropdownHeading>
+ * </Dropdown>
+ */
 const DropdownHeading = forwardRef(function DropdownHeading({ className, ...rest }, ref) {
     return jsx(Heading, { ref: ref, ...rest });
 });

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

@@ -2,6 +2,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * DropdownItem component, used to display an item in the Dropdown. Used within a DropdownList.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
 const DropdownItem = forwardRef(function DropdownItem({ className, ...rest }, ref) {
     return jsx("li", { ref: ref, ...rest });
 });

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

@@ -2,6 +2,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * DropdownList component, used to display a list of items in the Dropdown.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
 const DropdownList = forwardRef(function DropdownList({ className, ...rest }, ref) {
     return jsx("ul", { ref: ref, ...rest });
 });

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

@@ -6,17 +6,17 @@ import { PopoverTriggerContext } from '../popover/popover-trigger-context.js';
  * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
  *
  * @example
- * <Dropdown.TriggerContext>
- *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ * <DropdownTriggerContext>
+ *  <DropdownTrigger>Dropdown</DropdownTrigger>
  *  <Dropdown>
- *   <Dropdown.Heading>Heading</Dropdown.Heading>
- *    <Dropdown.List>
- *      <Dropdown.Item>
- *        <Dropdown.Button>Button</Dropdown.Button>
- *      </Dropdown.Item>
- *    </Dropdown.List>
+ *   <DropdownHeading>Heading</DropdownHeading>
+ *    <DropdownList>
+ *      <DropdownItem>
+ *        <DropdownButton>Button</DropdownButton>
+ *      </DropdownItem>
+ *    </DropdownList>
  *  </Dropdown>
- * </Dropdown.TriggerContext>
+ * </DropdownTriggerContext>
  */
 const DropdownTriggerContext = ({ children, }) => {
     return jsx(PopoverTriggerContext, { children: children });