@digdir/designsystemet-react 1.1.4 → 1.1.6

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

@@ -10,7 +10,7 @@ var breadcrumbsList = require('./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>
@@ -24,16 +24,16 @@ var breadcrumbsList = require('./breadcrumbs-list.js');
  *  </Breadcrumbs.List>
  * </Breadcrumbs>
  */
-const Breadcrumbs = Object.assign(breadcrumbs.Breadcrumbs, {
+const BreadcrumbsComponent = Object.assign(breadcrumbs.Breadcrumbs, {
     List: breadcrumbsList.BreadcrumbsList,
     Item: breadcrumbsItem.BreadcrumbsItem,
     Link: breadcrumbsLink.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';
 
 exports.BreadcrumbsItem = breadcrumbsItem.BreadcrumbsItem;
 exports.BreadcrumbsLink = breadcrumbsLink.BreadcrumbsLink;
 exports.BreadcrumbsList = breadcrumbsList.BreadcrumbsList;
-exports.Breadcrumbs = Breadcrumbs;
+exports.Breadcrumbs = BreadcrumbsComponent;

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

@@ -14,10 +14,10 @@ var cardBlock = require('./card-block.js');
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = Object.assign(card.Card, {
+const CardComponent = Object.assign(card.Card, {
     Block: cardBlock.CardBlock,
 });
-Card.Block.displayName = 'Card.Block';
+CardComponent.Block.displayName = 'Card.Block';
 
 exports.CardBlock = cardBlock.CardBlock;
-exports.Card = Card;
+exports.Card = CardComponent;

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

@@ -3,19 +3,19 @@
 
 var chips = require('./chips.js');
 
-const Chip = {
+const ChipComponent = {
     Button: chips.ChipButton,
     Checkbox: chips.ChipCheckbox,
     Radio: chips.ChipRadio,
     Removable: chips.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';
 
 exports.ChipButton = chips.ChipButton;
 exports.ChipCheckbox = chips.ChipCheckbox;
 exports.ChipRadio = chips.ChipRadio;
 exports.ChipRemovable = chips.ChipRemovable;
-exports.Chip = Chip;
+exports.Chip = ChipComponent;

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

@@ -14,13 +14,13 @@ var detailsSummary = require('./details-summary.js');
  *  <Details.Content>Content</Details.Content>
  * </Details>
  */
-const Details = Object.assign(details.Details, {
+const DetailsComponent = Object.assign(details.Details, {
     Summary: detailsSummary.DetailsSummary,
     Content: detailsContent.DetailsContent,
 });
-Details.Summary.displayName = 'Details.Summary';
-Details.Content.displayName = 'Details.Content';
+DetailsComponent.Summary.displayName = 'Details.Summary';
+DetailsComponent.Content.displayName = 'Details.Content';
 
 exports.DetailsContent = detailsContent.DetailsContent;
 exports.DetailsSummary = detailsSummary.DetailsSummary;
-exports.Details = Details;
+exports.Details = DetailsComponent;

package/dist/cjs/components/dialog/dialog.js

@@ -73,8 +73,9 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
     /* handle closing */
     react.useEffect(() => {
         const handleClose = (event) => onClose?.(event);
-        dialogRef.current?.addEventListener('close', handleClose);
-        return () => dialogRef.current?.removeEventListener('close', handleClose);
+        const currentRef = dialogRef.current;
+        currentRef?.addEventListener('close', handleClose);
+        return () => currentRef?.removeEventListener('close', handleClose);
     }, [onClose]);
     return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
 });

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

@@ -19,16 +19,16 @@ var dialogTriggerContext = require('./dialog-trigger-context.js');
  *   </Dialog>
  * </Dialog.TriggerContext>
  */
-const Dialog = Object.assign(dialog.Dialog, {
+const DialogComponent = Object.assign(dialog.Dialog, {
     Block: dialogBlock.DialogBlock,
     TriggerContext: dialogTriggerContext.DialogTriggerContext,
     Trigger: dialogTrigger.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';
 
 exports.DialogBlock = dialogBlock.DialogBlock;
 exports.DialogTrigger = dialogTrigger.DialogTrigger;
 exports.DialogTriggerContext = dialogTriggerContext.DialogTriggerContext;
-exports.Dialog = Dialog;
+exports.Dialog = DialogComponent;

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

@@ -5,6 +5,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var button = require('../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 = react.forwardRef(function DropdownButton({ ...rest }, ref) {
     return jsxRuntime.jsx(button.Button, { ref: ref, variant: 'tertiary', ...rest });
 });

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

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

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

@@ -4,6 +4,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('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 = react.forwardRef(function DropdownItem({ className, ...rest }, ref) {
     return jsxRuntime.jsx("li", { ref: ref, ...rest });
 });

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

@@ -4,6 +4,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('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 = react.forwardRef(function DropdownList({ className, ...rest }, ref) {
     return jsxRuntime.jsx("ul", { ref: ref, ...rest });
 });

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

@@ -8,17 +8,17 @@ var popoverTriggerContext = require('../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 jsxRuntime.jsx(popoverTriggerContext.PopoverTriggerContext, { children: children });

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

@@ -5,6 +5,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var popoverTrigger = require('../popover/popover-trigger.js');
 
+/**
+ * DropdownTrigger component, used within a Dropdown.TriggerContext to open a Dropdown.
+ *
+ * @example
+ * <Dropdown.TriggerContext>
+ *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ *  <Dropdown>
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *    <Dropdown.List>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
+ *    </Dropdown.List>
+ *  </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
 const DropdownTrigger = react.forwardRef(function DropdownTrigger({ asChild, ...rest }, ref) {
     return jsxRuntime.jsx(popoverTrigger.PopoverTrigger, { ref: ref, ...rest });
 });

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

@@ -12,7 +12,7 @@ var dropdownTriggerContext = require('./dropdown-trigger-context.js');
 /**
  * Dropdown component, used to display a list of options.
  *
- * @example
+ * @example with TriggerContext
  * <Dropdown.TriggerContext>
  *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
  *   <Dropdown placement='bottom-end'>
@@ -24,8 +24,19 @@ var dropdownTriggerContext = require('./dropdown-trigger-context.js');
  *     </Dropdown.List>
  *   </Dropdown>
  * </Dropdown.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-dropdown">Trigger</Button>
+ * <Dropdown id="my-dropdown">
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *   <Dropdown.List>
+ *     <Dropdown.Item>
+ *       <Dropdown.Button>Item</Dropdown.Button>
+ *     </Dropdown.Item>
+ *   </Dropdown.List>
+ * </Dropdown>
  */
-const Dropdown = Object.assign(dropdown.Dropdown, {
+const DropdownComponent = Object.assign(dropdown.Dropdown, {
     TriggerContext: dropdownTriggerContext.DropdownTriggerContext,
     Heading: dropdownHeading.DropdownHeading,
     List: dropdownList.DropdownList,
@@ -33,12 +44,12 @@ const Dropdown = Object.assign(dropdown.Dropdown, {
     Button: dropdownButton.DropdownButton,
     Trigger: dropdownTrigger.DropdownTrigger,
 });
-Dropdown.TriggerContext.displayName = 'Dropdown.TriggerContext';
-Dropdown.List.displayName = 'Dropdown.List';
-Dropdown.Heading.displayName = 'Dropdown.Heading';
-Dropdown.Item.displayName = 'Dropdown.Item';
-Dropdown.Button.displayName = 'Dropdown.Button';
-Dropdown.Trigger.displayName = 'Dropdown.Trigger';
+DropdownComponent.TriggerContext.displayName = 'Dropdown.TriggerContext';
+DropdownComponent.List.displayName = 'Dropdown.List';
+DropdownComponent.Heading.displayName = 'Dropdown.Heading';
+DropdownComponent.Item.displayName = 'Dropdown.Item';
+DropdownComponent.Button.displayName = 'Dropdown.Button';
+DropdownComponent.Trigger.displayName = 'Dropdown.Trigger';
 
 exports.DropdownButton = dropdownButton.DropdownButton;
 exports.DropdownHeading = dropdownHeading.DropdownHeading;
@@ -46,4 +57,4 @@ exports.DropdownItem = dropdownItem.DropdownItem;
 exports.DropdownList = dropdownList.DropdownList;
 exports.DropdownTrigger = dropdownTrigger.DropdownTrigger;
 exports.DropdownTriggerContext = dropdownTriggerContext.DropdownTriggerContext;
-exports.Dropdown = Dropdown;
+exports.Dropdown = DropdownComponent;

package/dist/cjs/components/error-summary/error-summary-heading.js

@@ -6,6 +6,14 @@ var react = require('react');
 var heading = require('../heading/heading.js');
 var errorSummary = require('./error-summary.js');
 
+/**
+ * ErrorSummary heading component, used to display a heading for the error summary.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummaryHeading>Heading</ErrorSummaryHeading>
+ * </ErrorSummary>
+ */
 const ErrorSummaryHeading = react.forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
     const { headingId, setHeadingId } = react.useContext(errorSummary.ErrorSummaryContext);
     react.useEffect(() => {

package/dist/cjs/components/error-summary/error-summary-item.js

@@ -10,11 +10,11 @@ var listItem = require('../list/list-item.js');
  * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
  *
  * @example
- * <ErrorSummary.Item>
- *  <ErrorSummary.Link href="#">
+ * <ErrorSummaryItem>
+ *  <ErrorSummaryLink href="#">
  *    Link to error
- *  </ErrorSummary.Link>
- * </ErrorSummary.Item>
+ *  </ErrorSummaryLink>
+ * </ErrorSummaryItem>
  */
 const ErrorSummaryItem = react.forwardRef(function ErrorSummaryItem({ ...rest }, ref) {
     return jsxRuntime.jsx(listItem.ListItem, { ref: ref, ...rest });

package/dist/cjs/components/error-summary/error-summary-link.js

@@ -6,7 +6,14 @@ var react = require('react');
 var link = require('../link/link.js');
 
 /**
- * Link component used in ErrorSummary.
+ * ErrorSummary link component, used to link to a specific error. Used within an ErrorSummary.Item.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummaryItem>
+ *     <ErrorSummaryLink href='#'>Error 1</ErrorSummaryLink>
+ *   </ErrorSummaryItem>
+ * </ErrorSummary>
  */
 const ErrorSummaryLink = react.forwardRef(function ErrorSummaryLink({ ...rest }, ref) {
     return jsxRuntime.jsx(link.Link, { ref: ref, "data-color": 'neutral', ...rest });

package/dist/cjs/components/error-summary/error-summary-list.js

@@ -5,6 +5,21 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var index = require('../list/index.js');
 
+/**
+ * ErrorSummary list component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
 const ErrorSummaryList = react.forwardRef(function ErrorSummaryList({ ...rest }, ref) {
     return jsxRuntime.jsx(index.List.Unordered, { ...rest, ref: ref });
 });

package/dist/cjs/components/error-summary/index.js

@@ -23,19 +23,19 @@ var errorSummaryList = require('./error-summary-list.js');
  *   </ErrorSummary.List>
  * </ErrorSummary>
  */
-const ErrorSummary = Object.assign(errorSummary.ErrorSummary, {
+const ErrorSummaryComponent = Object.assign(errorSummary.ErrorSummary, {
     Heading: errorSummaryHeading.ErrorSummaryHeading,
     Item: errorSummaryItem.ErrorSummaryItem,
     List: errorSummaryList.ErrorSummaryList,
     Link: errorSummaryLink.ErrorSummaryLink,
 });
-ErrorSummary.Item.displayName = 'ErrorSummary.Item';
-ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
-ErrorSummary.List.displayName = 'ErrorSummary.List';
-ErrorSummary.Link.displayName = 'ErrorSummary.Link';
+ErrorSummaryComponent.Item.displayName = 'ErrorSummary.Item';
+ErrorSummaryComponent.Heading.displayName = 'ErrorSummary.Heading';
+ErrorSummaryComponent.List.displayName = 'ErrorSummary.List';
+ErrorSummaryComponent.Link.displayName = 'ErrorSummary.Link';
 
 exports.ErrorSummaryHeading = errorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = errorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryLink = errorSummaryLink.ErrorSummaryLink;
 exports.ErrorSummaryList = errorSummaryList.ErrorSummaryList;
-exports.ErrorSummary = ErrorSummary;
+exports.ErrorSummary = ErrorSummaryComponent;

package/dist/cjs/components/field/field-description.js

@@ -4,6 +4,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+/**
+ * Field description component, used to provide additional information below the input.
+ *
+ * @example
+ * <FieldDescription>Additional information</FieldDescription>
+ */
 const FieldDescription = react.forwardRef(function FieldDescription(rest, ref) {
     return jsxRuntime.jsx("div", { "data-field": 'description', ref: ref, ...rest });
 });

package/dist/cjs/components/field/field-observer.js

@@ -44,7 +44,7 @@ function fieldObserver(fieldElement) {
             }
         }
         // Connect elements
-        const describedbyIds = [describedby]; // Keep original aria-describedby
+        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
         const inputId = input?.id || uuid;
         // Reset type counters since we reprocess all elements
         typeCounter.clear();
@@ -62,10 +62,12 @@ function fieldObserver(fieldElement) {
             }
             if (!value)
                 setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
-            if (descriptionType === 'validation')
-                describedbyIds.unshift(el.id); // Validations to the front
-            else if (descriptionType)
-                describedbyIds.push(el.id); // Other descriptions to the back
+            if (!describedbyIds.includes(el.id)) {
+                if (descriptionType === 'validation')
+                    describedbyIds.unshift(el.id); // Validations to the front
+                else if (descriptionType)
+                    describedbyIds.push(el.id); // Other descriptions to the back
+            }
         }
         setAttr(input, 'id', inputId);
         setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());

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

@@ -17,19 +17,19 @@ var fieldDescription = require('./field-description.js');
  *   <ValidationMessage>Feilmelding</ValidationMessage>
  * </Field>
  */
-const Field = Object.assign(field.Field, {
+const FieldComponent = Object.assign(field.Field, {
     Description: fieldDescription.FieldDescription,
     Affixes: fieldAffix.FieldAffixes,
     Affix: fieldAffix.FieldAffix,
     Counter: fieldCounter.FieldCounter,
 });
-Field.Description.displayName = 'Field.Description';
-Field.Affixes.displayName = 'Field.Affixes';
-Field.Affix.displayName = 'Field.Affix';
-Field.Counter.displayName = 'Field.Counter';
+FieldComponent.Description.displayName = 'Field.Description';
+FieldComponent.Affixes.displayName = 'Field.Affixes';
+FieldComponent.Affix.displayName = 'Field.Affix';
+FieldComponent.Counter.displayName = 'Field.Counter';
 
 exports.FieldAffix = fieldAffix.FieldAffix;
 exports.FieldAffixes = fieldAffix.FieldAffixes;
 exports.FieldCounter = fieldCounter.FieldCounter;
 exports.FieldDescription = fieldDescription.FieldDescription;
-exports.Field = Field;
+exports.Field = FieldComponent;

package/dist/cjs/components/fieldset/fieldset-description.js

@@ -9,9 +9,9 @@ var paragraph = require('../paragraph/paragraph.js');
  * FieldsetDescription component, used to display a description for a fieldset.
  *
  * @example
- * <Fieldset.Description>
+ * <FieldsetDescription>
  *   Gi en kort beskrivelse i begge feltene
- * </Fieldset.Description>
+ * </FieldsetDescription>
  */
 const FieldsetDescription = react.forwardRef(function FieldsetDescription(rest, ref) {
     return jsxRuntime.jsx(paragraph.Paragraph, { ref: ref, ...rest });

package/dist/cjs/components/fieldset/fieldset-legend.js

@@ -9,7 +9,7 @@ var label = require('../label/label.js');
  * FieldsetLegend component, used to display a legend for a fieldset.
  *
  * @example
- * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ * <FieldsetLegend>Skriv inn dine svar</FieldsetLegend>
  */
 const FieldsetLegend = react.forwardRef(function FieldsetLegend(rest, ref) {
     return (jsxRuntime.jsx(label.Label, { asChild: true, children: jsxRuntime.jsx("legend", { ref: ref, ...rest }) }));

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

@@ -20,13 +20,13 @@ var fieldsetLegend = require('./fieldset-legend.js');
  *   </Field>
  * </Fieldset>
  */
-const Fieldset = Object.assign(fieldset.Fieldset, {
+const FieldsetComponent = Object.assign(fieldset.Fieldset, {
     Legend: fieldsetLegend.FieldsetLegend,
     Description: fieldsetDescription.FieldsetDescription,
 });
-Fieldset.Legend.displayName = 'Fieldset.Legend';
-Fieldset.Description.displayName = 'Fieldset.Description';
+FieldsetComponent.Legend.displayName = 'Fieldset.Legend';
+FieldsetComponent.Description.displayName = 'Fieldset.Description';
 
 exports.FieldsetDescription = fieldsetDescription.FieldsetDescription;
 exports.FieldsetLegend = fieldsetLegend.FieldsetLegend;
-exports.Fieldset = Fieldset;
+exports.Fieldset = FieldsetComponent;

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

@@ -4,16 +4,16 @@
 var listItem = require('./list-item.js');
 var lists = require('./lists.js');
 
-const List = {
+const ListComponent = {
     Item: listItem.ListItem,
     Ordered: lists.ListOrdered,
     Unordered: lists.ListUnordered,
 };
-List.Item.displayName = 'List.Item';
-List.Ordered.displayName = 'List.Ordered';
-List.Unordered.displayName = 'List.Unordered';
+ListComponent.Item.displayName = 'List.Item';
+ListComponent.Ordered.displayName = 'List.Ordered';
+ListComponent.Unordered.displayName = 'List.Unordered';
 
 exports.ListItem = listItem.ListItem;
 exports.ListOrdered = lists.ListOrdered;
 exports.ListUnordered = lists.ListUnordered;
-exports.List = List;
+exports.List = ListComponent;

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

@@ -5,6 +5,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 
+/**
+ * Component that provides a list item.
+ *
+ * @example
+ * <List.Item>Item</List.Item>
+ */
 const ListItem = react.forwardRef(function ListItem({ asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'li';
     return jsxRuntime.jsx(Component, { ...rest, ref: ref });

package/dist/cjs/components/list/lists.js

@@ -15,10 +15,10 @@ const render = (tagName, { asChild, className, ...rest }, ref) => {
  * Renders a native `ul` element.
  *
  * @example
- * <List.Unordered>
- *   <List.Item>Item 1</List.Item>
- *   <List.Item>Item 2</List.Item>
- * </List.Unordered>
+ * <ListUnordered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListUnordered>
  */
 const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);
@@ -28,10 +28,10 @@ const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
  * Renders a native `ol` element.
  *
  * @example
- * <List.Ordered>
- *   <List.Item>Item 1</List.Item>
- *   <List.Item>Item 2</List.Item>
- * </List.Ordered>
+ * <ListOrdered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListOrdered>
  */
 const ListOrdered = react.forwardRef(function ListOrdered(props, ref) {
     return render('ol', props, ref);

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

@@ -24,16 +24,16 @@ var paginationList = require('./pagination-list.js');
  *   </Pagination.List>
  * </Pagination>
  */
-const Pagination = Object.assign(pagination.Pagination, {
+const PaginationComponent = Object.assign(pagination.Pagination, {
     List: paginationList.PaginationList,
     Item: paginationItem.PaginationItem,
     Button: paginationButton.PaginationButton,
 });
-Pagination.List.displayName = 'Pagination.List';
-Pagination.Item.displayName = 'Pagination.Item';
-Pagination.Button.displayName = 'Pagination.Button';
+PaginationComponent.List.displayName = 'Pagination.List';
+PaginationComponent.Item.displayName = 'Pagination.Item';
+PaginationComponent.Button.displayName = 'Pagination.Button';
 
 exports.PaginationButton = paginationButton.PaginationButton;
 exports.PaginationItem = paginationItem.PaginationItem;
 exports.PaginationList = paginationList.PaginationList;
-exports.Pagination = Pagination;
+exports.Pagination = PaginationComponent;

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

@@ -9,9 +9,9 @@ var button = require('../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 = react.forwardRef(function PaginationButton(rest, ref) {
     return jsxRuntime.jsx(button.Button, { ref: ref, ...rest });

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

@@ -9,11 +9,11 @@ var react = require('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 = react.forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'li';