@digdir/designsystemet-react 0.0.0-ci-snapshot-release-pr-comment-20260612060845

package/dist/cjs/components/divider/divider.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Divider component, used to separate content. Uses `hr` element.
+ *
+ * @example
+ * <Divider />
+ */
+const Divider = react.forwardRef(function Divider({ className, ...rest }, ref) {
+    return (
+    // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is
+    jsxRuntime.jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
+});
+
+exports.Divider = Divider;

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

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.DropdownButton = DropdownButton;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+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(rest, ref) {
+    return jsxRuntime.jsx(heading.Heading, { ref: ref, ...rest });
+});
+
+exports.DropdownHeading = DropdownHeading;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+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(rest, ref) {
+    return jsxRuntime.jsx("li", { ref: ref, ...rest });
+});
+
+exports.DropdownItem = DropdownItem;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+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(rest, ref) {
+    return jsxRuntime.jsx("ul", { ref: ref, ...rest });
+});
+
+exports.DropdownList = DropdownList;

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var popoverTriggerContext = require('../popover/popover-trigger-context.js');
+
+/**
+ * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
+ * @example
+ * <DropdownTriggerContext>
+ *  <DropdownTrigger>Dropdown</DropdownTrigger>
+ *  <Dropdown>
+ *   <DropdownHeading>Heading</DropdownHeading>
+ *    <DropdownList>
+ *      <DropdownItem>
+ *        <DropdownButton>Button</DropdownButton>
+ *      </DropdownItem>
+ *    </DropdownList>
+ *  </Dropdown>
+ * </DropdownTriggerContext>
+ */
+const DropdownTriggerContext = ({ children, }) => {
+    return jsxRuntime.jsx(popoverTriggerContext.PopoverTriggerContext, { children: children });
+};
+DropdownTriggerContext.displayName = 'DropdownTriggerContext';
+
+exports.DropdownTriggerContext = DropdownTriggerContext;

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.DropdownTrigger = DropdownTrigger;

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

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var popover = require('../popover/popover.js');
+
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example with TriggerContext
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </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 = react.forwardRef(function DropdownContent({ placement = 'bottom-end', className, ...rest }, ref) {
+    return (jsxRuntime.jsx(popover.Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
+});
+
+exports.Dropdown = Dropdown;

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

@@ -0,0 +1,60 @@
+'use client';
+'use strict';
+
+var dropdown = require('./dropdown.js');
+var dropdownButton = require('./dropdown-button.js');
+var dropdownHeading = require('./dropdown-heading.js');
+var dropdownItem = require('./dropdown-item.js');
+var dropdownList = require('./dropdown-list.js');
+var dropdownTrigger = require('./dropdown-trigger.js');
+var dropdownTriggerContext = require('./dropdown-trigger-context.js');
+
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example with TriggerContext
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </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 DropdownComponent = Object.assign(dropdown.Dropdown, {
+    TriggerContext: dropdownTriggerContext.DropdownTriggerContext,
+    Heading: dropdownHeading.DropdownHeading,
+    List: dropdownList.DropdownList,
+    Item: dropdownItem.DropdownItem,
+    Button: dropdownButton.DropdownButton,
+    Trigger: dropdownTrigger.DropdownTrigger,
+});
+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;
+exports.DropdownItem = dropdownItem.DropdownItem;
+exports.DropdownList = dropdownList.DropdownList;
+exports.DropdownTrigger = dropdownTrigger.DropdownTrigger;
+exports.DropdownTriggerContext = dropdownTriggerContext.DropdownTriggerContext;
+exports.Dropdown = DropdownComponent;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var heading = require('../heading/heading.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(rest, ref) {
+    return jsxRuntime.jsx(heading.Heading, { ref: ref, suppressHydrationWarning: true, ...rest }); // Suppress hydration warning since we will get an ID from <ds-error-summary>
+});
+
+exports.ErrorSummaryHeading = ErrorSummaryHeading;

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

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

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var link = require('../link/link.js');
+
+/**
+ * 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 });
+});
+
+exports.ErrorSummaryLink = ErrorSummaryLink;

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

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.ErrorSummaryList = ErrorSummaryList;

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

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <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 ErrorSummary = react.forwardRef(function ErrorSummary({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'ds-error-summary';
+    return (jsxRuntime.jsx(Component, { ...(asChild
+            ? { className: cl('ds-error-summary', className) }
+            : { class: cl('ds-error-summary', className) }), ref: ref, suppressHydrationWarning: true, ...rest }));
+});
+
+exports.ErrorSummary = ErrorSummary;

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

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var errorSummary = require('./error-summary.js');
+var errorSummaryHeading = require('./error-summary-heading.js');
+var errorSummaryItem = require('./error-summary-item.js');
+var errorSummaryLink = require('./error-summary-link.js');
+var errorSummaryList = require('./error-summary-list.js');
+
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <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 ErrorSummaryComponent = Object.assign(errorSummary.ErrorSummary, {
+    Heading: errorSummaryHeading.ErrorSummaryHeading,
+    Item: errorSummaryItem.ErrorSummaryItem,
+    List: errorSummaryList.ErrorSummaryList,
+    Link: errorSummaryLink.ErrorSummaryLink,
+});
+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 = ErrorSummaryComponent;

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

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * FieldAffixes component, used to wrap a form field.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
+const FieldAffixes = react.forwardRef(function FieldAffixes({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("div", { className: cl('ds-field-affixes', className), ref: ref, ...rest }));
+});
+/**
+ * FieldAffix component, used to wrap a form field.
+ * Use together with Field.Affixes.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
+const FieldAffix = react.forwardRef(function FieldAffix({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-field-affix', className), "aria-hidden": 'true', ref: ref, ...rest }));
+});
+
+exports.FieldAffix = FieldAffix;
+exports.FieldAffixes = FieldAffixes;

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

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../../utilities/index.js');
+var validationMessage = require('../validation-message/validation-message.js');
+
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
+const FieldCounter = react.forwardRef(function FieldCounter({ limit, under, over, hint, ...rest }, _ref) {
+    if (hint)
+        index.warn('hint attribute is deprecated on Field.Counter');
+    return (jsxRuntime.jsx(validationMessage.ValidationMessage, { suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-field": 'counter', "data-limit": limit, "data-under": under, "data-over": over, ...rest }));
+});
+
+exports.FieldCounter = FieldCounter;

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

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+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", { suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-field": 'description', ref: ref, ...rest }));
+});
+
+exports.FieldDescription = FieldDescription;

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

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const Field = react.forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'ds-field';
+    const fieldRef = react.useRef(null);
+    const mergedRefs = useMergeRefs.useMergeRefs([fieldRef, ref]);
+    return (jsxRuntime.jsx(Component, { ...(asChild
+            ? { className: cl('ds-field', className) }
+            : { class: cl('ds-field', className) }), suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, "data-position": position, ref: mergedRefs, ...rest }));
+});
+
+exports.Field = Field;

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

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+var field = require('./field.js');
+var fieldAffix = require('./field-affix.js');
+var fieldCounter = require('./field-counter.js');
+var fieldDescription = require('./field-description.js');
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const FieldComponent = Object.assign(field.Field, {
+    Description: fieldDescription.FieldDescription,
+    Affixes: fieldAffix.FieldAffixes,
+    Affix: fieldAffix.FieldAffix,
+    Counter: fieldCounter.FieldCounter,
+});
+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 = FieldComponent;

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

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var paragraph = require('../paragraph/paragraph.js');
+
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <FieldsetDescription>
+ *   Gi en kort beskrivelse i begge feltene
+ * </FieldsetDescription>
+ */
+const FieldsetDescription = react.forwardRef(function FieldsetDescription(rest, ref) {
+    return (jsxRuntime.jsx(paragraph.Paragraph, { suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
+        : true, ref: ref, ...rest }));
+});
+
+exports.FieldsetDescription = FieldsetDescription;

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var label = require('../label/label.js');
+
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <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", { suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
+            : true, ref: ref, ...rest }) }));
+});
+
+exports.FieldsetLegend = FieldsetLegend;