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

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const Fieldset = react.forwardRef(function Fieldset({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("fieldset", { className: cl('ds-fieldset', className), suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
+        : true, ref: ref, ...rest }));
+});
+
+exports.Fieldset = Fieldset;

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

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var fieldset = require('./fieldset.js');
+var fieldsetDescription = require('./fieldset-description.js');
+var fieldsetLegend = require('./fieldset-legend.js');
+
+/**
+ * Fieldset component, used to wrap a form field.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const FieldsetComponent = Object.assign(fieldset.Fieldset, {
+    Legend: fieldsetLegend.FieldsetLegend,
+    Description: fieldsetDescription.FieldsetDescription,
+});
+FieldsetComponent.Legend.displayName = 'Fieldset.Legend';
+FieldsetComponent.Description.displayName = 'Fieldset.Description';
+
+exports.FieldsetDescription = fieldsetDescription.FieldsetDescription;
+exports.FieldsetLegend = fieldsetLegend.FieldsetLegend;
+exports.Fieldset = FieldsetComponent;

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

@@ -0,0 +1,20 @@
+'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');
+
+/**
+ * Use `Heading` to render h1-6 elements with heading text styles.
+ *
+ * @example
+ * <Heading data-size='lg' level={2}>Heading</Heading>
+ */
+const Heading = react.forwardRef(function Heading({ level = 2, className, asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : `h${level}`;
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-heading`, className), ref: ref, ...rest }));
+});
+
+exports.Heading = Heading;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Input renders a native `input` element.
+ *
+ * @example
+ * <Input />
+ */
+const Input = react.forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
+    return (jsxRuntime.jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, suppressHydrationWarning // Since <ds-field> adds attributes
+        : true, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for checkbox / radio / switch
+            onClick?.(event);
+        }, ...rest }));
+});
+
+exports.Input = Input;

package/dist/cjs/components/label/label.js

@@ -0,0 +1,21 @@
+'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');
+
+/**
+ * Use `Label` for labels. Renders a native `label` element.
+ *
+ * @example
+ * <Label data-size='lg' weight='medium'>Label</Label>
+ */
+const Label = react.forwardRef(function Label({ className, weight, asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'label';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl('ds-label', className), suppressHydrationWarning // Since <ds-field> will add for attribute dynamically
+        : true, "data-weight": weight, ...rest }));
+});
+
+exports.Label = Label;

package/dist/cjs/components/link/link.js

@@ -0,0 +1,21 @@
+'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');
+
+/**
+ * Link component, renders a native `a` element.
+ *
+ * @example
+ * <Link href='#'>Link</Link>
+ */
+const Link = react.forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'a';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-link', className), ref: ref, ...rest }));
+});
+Link.displayName = 'Link';
+
+exports.Link = Link;

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+var listItem = require('./list-item.js');
+var lists = require('./lists.js');
+
+const ListComponent = {
+    Item: listItem.ListItem,
+    Ordered: lists.ListOrdered,
+    Unordered: lists.ListUnordered,
+};
+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 = ListComponent;

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

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

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

@@ -0,0 +1,41 @@
+'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');
+
+const render = (tagName, { asChild, className, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : tagName;
+    return jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
+};
+/**
+ * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
+ *
+ * @example
+ * <ListUnordered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListUnordered>
+ */
+const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
+    return render('ul', props, ref);
+});
+/**
+ * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
+ *
+ * @example
+ * <ListOrdered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListOrdered>
+ */
+const ListOrdered = react.forwardRef(function ListOrdered(props, ref) {
+    return render('ol', props, ref);
+});
+
+exports.ListOrdered = ListOrdered;
+exports.ListUnordered = ListUnordered;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var pagination = require('./pagination.js');
+var paginationButton = require('./pagination-button.js');
+var paginationItem = require('./pagination-item.js');
+var paginationList = require('./pagination-list.js');
+
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const PaginationComponent = Object.assign(pagination.Pagination, {
+    List: paginationList.PaginationList,
+    Item: paginationItem.PaginationItem,
+    Button: paginationButton.PaginationButton,
+});
+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 = PaginationComponent;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var button = require('../button/button.js');
+
+/**
+ * PaginationButton component, use within a Pagination.Item.
+ *
+ * @example
+ * <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 });
+});
+
+exports.PaginationButton = PaginationButton;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+/**
+ * PaginationItem component, use within a Pagination.List.
+ *
+ * @example
+ * <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';
+    return jsxRuntime.jsx(Component, { ref: ref, ...rest });
+});
+
+exports.PaginationItem = PaginationItem;

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

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <PaginationList>
+ *     <PaginationItem>
+ *       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *     </PaginationItem>
+ *   </PaginationList>
+ * </Pagination>
+ */
+const PaginationList = react.forwardRef(function PaginationList({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'ul';
+    return jsxRuntime.jsx(Component, { ref: ref, ...rest });
+});
+
+exports.PaginationList = PaginationList;

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

@@ -0,0 +1,36 @@
+'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');
+
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
+const Pagination = react.forwardRef(function Pagination({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'ds-pagination';
+    return (jsxRuntime.jsx(Component, { ...(asChild
+            ? { className: cl('ds-pagination', className) }
+            : { class: cl('ds-pagination', className) }), suppressHydrationWarning // Since ds-pagination will change aria-label and role after hydration
+        : true, ref: ref, ...rest }));
+});
+
+exports.Pagination = Pagination;

package/dist/cjs/components/paragraph/paragraph.js

@@ -0,0 +1,21 @@
+'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');
+
+/**
+ * Use `Paragraph` to display text with paragraph text styles.
+ * Renders a native `p` element.
+ *
+ * @example
+ * <Paragraph data-size='lg'>Paragraph</Paragraph>
+ */
+const Paragraph = react.forwardRef(function Paragraph({ className, asChild, variant = 'default', ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'p';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl(`ds-paragraph`, className), "data-variant": variant, ...rest }));
+});
+
+exports.Paragraph = Paragraph;

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var popover = require('./popover.js');
+var popoverTrigger = require('./popover-trigger.js');
+var popoverTriggerContext = require('./popover-trigger-context.js');
+
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const PopoverComponent = Object.assign(popover.Popover, {
+    TriggerContext: popoverTriggerContext.PopoverTriggerContext,
+    Trigger: popoverTrigger.PopoverTrigger,
+});
+PopoverComponent.TriggerContext.displayName = 'Popover.TriggerContext';
+PopoverComponent.Trigger.displayName = 'Popover.Trigger';
+
+exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
+exports.PopoverTriggerContext = popoverTriggerContext.PopoverTriggerContext;
+exports.Popover = PopoverComponent;

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

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+ *
+ * @example
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ */
+const PopoverTriggerContext = ({ children, }) => {
+    const randomPopoverId = react.useId();
+    const [popoverId, setPopoverId] = react.useState(randomPopoverId);
+    return (jsxRuntime.jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
+};
+PopoverTriggerContext.displayName = 'PopoverTriggerContext';
+const Context = react.createContext({});
+
+exports.Context = Context;
+exports.PopoverTriggerContext = PopoverTriggerContext;

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

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var button = require('../button/button.js');
+var popoverTriggerContext = require('./popover-trigger-context.js');
+
+/**
+ * PopoverTrigger component, used to trigger a popover.
+ *
+ * @example
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ *
+ * @example inline
+ * <PopoverTriggerContext>
+ *   <Paragraph>
+ *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
+ *   </Paragraph>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </PopoverTriggerContext>
+ */
+const PopoverTrigger = react.forwardRef(function PopoverTrigger({ id, inline, asChild, popovertarget, popoverTarget, ...rest }, ref) {
+    const { popoverId } = react.useContext(popoverTriggerContext.Context);
+    const Component = asChild ? reactSlot.Slot : inline ? 'button' : button.Button;
+    const popoverVal = popoverTarget ?? popovertarget ?? popoverId;
+    const popoverKey = react.version.startsWith('19')
+        ? 'popoverTarget'
+        : 'popovertarget';
+    return (jsxRuntime.jsx(Component, { ref: ref, "data-popover": inline ? 'inline' : undefined, [popoverKey]: popoverVal, ...rest }));
+});
+
+exports.PopoverTrigger = PopoverTrigger;

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

@@ -0,0 +1,104 @@
+'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');
+require('@digdir/designsystemet-web');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+var popoverTriggerContext = require('./popover-trigger-context.js');
+
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example with TriggerContext
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-popover">Open Popover</Button>
+ * <Popover id="my-popover">
+ *   Content
+ * </Popover>
+ */
+const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const popoverRef = react.useRef(null);
+    const mergedRefs = useMergeRefs.useMergeRefs([popoverRef, ref]);
+    const { popoverId, setPopoverId } = react.useContext(popoverTriggerContext.Context);
+    const [internalOpen, setInternalOpen] = react.useState(false);
+    const controlledOpen = open ?? internalOpen;
+    // NOTE: This code is purely to add React controlled component ability to Popover API
+    react.useEffect(() => {
+        const popover = popoverRef.current;
+        const trigger = `[popovertarget="${popover?.id}"],[commandfor="${popover?.id}"]`;
+        const handleClick = (event) => {
+            const el = event.target;
+            const isTrigger = el?.closest?.(trigger);
+            const isOutside = !isTrigger && !popover?.contains(el);
+            if (isTrigger)
+                event.preventDefault(); // Prevent native Popover API
+            if (controlledOpen && (isTrigger || isOutside)) {
+                setInternalOpen(false);
+                onClose?.();
+            }
+            else if (!controlledOpen && isTrigger) {
+                setInternalOpen(true);
+                onOpen?.();
+            }
+        };
+        const handleKeydown = (event) => {
+            if (event.key === 'Escape' && controlledOpen && isTopLayer(popover)) {
+                event.preventDefault(); // Prevent closing fullscreen in Safari
+                document.querySelector(trigger)?.focus?.(); // Move focus back to trigger since `popover="manual"` doesn't do this
+                setInternalOpen(false);
+                onClose?.();
+            }
+        };
+        popover?.togglePopover?.(controlledOpen);
+        if (controlledOpen) {
+            const options = { detail: document.querySelector(trigger) };
+            popover?.dispatchEvent(new CustomEvent('ds-toggle-source', options)); // Since togglePopover({ source }) is not supported in all browsers yet
+        }
+        document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
+        document.addEventListener('keydown', handleKeydown);
+        return () => {
+            document.removeEventListener('click', handleClick, true);
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }, [controlledOpen]);
+    // Update context with id
+    react.useEffect(() => {
+        if (id)
+            setPopoverId?.(id);
+    }, [id]);
+    return (jsxRuntime.jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, popover: 'manual', "data-placement": placement, "data-variant": variant, ref: mergedRefs, suppressHydrationWarning // Since _ds-floating adds attributes
+        : true, ...rest }));
+});
+// NOTE: This is not able to check if the popover is the most recently added #topLayer,
+// so we need another method in time, or remove the controlled popover="manual" in a v2
+const isTopLayer = (checkElement) => {
+    if (!checkElement)
+        return false;
+    const { x, y, width, height } = checkElement.getBoundingClientRect();
+    const topElement = document.elementFromPoint(x + width / 2, y + height / 2);
+    // If the element on top is on browser #top-layer but not same as provided element, then provided element is not on top
+    for (let el = topElement; el; el = el.parentElement) {
+        if (checkElement === el)
+            return true; // If the topElement is same as provided element, it's on top
+        if (el instanceof HTMLDialogElement && el.open)
+            return false; // Check for open dialog
+        if (el.classList.contains(':popover-open'))
+            return false; // Polyfill support
+        if (el.matches(':popover-open'))
+            return false; // Native support
+    }
+    return false;
+};
+
+exports.Popover = Popover;

package/dist/cjs/components/radio/radio.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../field/index.js');
+var input = require('../input/input.js');
+var label = require('../label/label.js');
+var validationMessage = require('../validation-message/validation-message.js');
+
+/**
+ * Radio used to select multiple options.
+ *
+ * @example
+ * <Radio label="I agree" value="agree" />
+ */
+const Radio = react.forwardRef(function Radio({ 'data-size': size, children, className, description, error, label: label$1, position, style, variant, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { "data-size": size, "data-variant": variant, "data-position": position, className: className, style: style, children: [jsxRuntime.jsx(input.Input, { type: 'radio', ref: ref, ...rest }), !!label$1 && jsxRuntime.jsx(label.Label, { weight: 'regular', children: label$1 }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!error && jsxRuntime.jsx(validationMessage.ValidationMessage, { children: error })] }));
+});
+
+exports.Radio = Radio;

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

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+var search = require('./search.js');
+var searchButton = require('./search-button.js');
+var searchClear = require('./search-clear.js');
+var searchInput = require('./search-input.js');
+
+/**
+ * Search component, use to display different variations of a search input
+ *
+ * @example with button
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
+const SearchComponent = Object.assign(search.Search, {
+    Clear: searchClear.SearchClear,
+    Button: searchButton.SearchButton,
+    Input: searchInput.SearchInput,
+});
+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 = SearchComponent;