@digdir/designsystemet-react 1.1.2 → 1.1.4

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

@@ -1,35 +0,0 @@
-'use client';
-import { ErrorSummary as ErrorSummary$1 } from './ErrorSummary.js';
-import { ErrorSummaryHeading } from './ErrorSummaryHeading.js';
-import { ErrorSummaryItem } from './ErrorSummaryItem.js';
-import { ErrorSummaryLink } from './ErrorSummaryLink.js';
-import { ErrorSummaryList } from './ErrorSummaryList.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 ErrorSummary = Object.assign(ErrorSummary$1, {
-    Heading: ErrorSummaryHeading,
-    Item: ErrorSummaryItem,
-    List: ErrorSummaryList,
-    Link: ErrorSummaryLink,
-});
-ErrorSummary.Item.displayName = 'ErrorSummary.Item';
-ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
-ErrorSummary.List.displayName = 'ErrorSummary.List';
-ErrorSummary.Link.displayName = 'ErrorSummary.Link';
-
-export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryLink, ErrorSummaryList };

package/dist/esm/components/Field/Field.js

@@ -1,28 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef, useRef, useEffect } from 'react';
-import { fieldObserver } from './fieldObserver.js';
-import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.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 = forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
-    const Component = asChild ? Slot : 'div';
-    const fieldRef = useRef(null);
-    const mergedRefs = useMergeRefs([fieldRef, ref]);
-    useEffect(() => fieldObserver(fieldRef.current), []);
-    return (jsx(Component, { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
-});
-
-export { Field };

package/dist/esm/components/Field/FieldCounter.js

@@ -1,38 +0,0 @@
-'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import { isInputLike } from './fieldObserver.js';
-import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
-import { Paragraph } from '../Paragraph/Paragraph.js';
-
-const label = (text, count) => text.replace('%d', Math.abs(count).toString());
-/**
- * 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 = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
-    const [count, setCount] = useState(0);
-    const counterRef = useRef(null);
-    const hasExceededLimit = count > limit;
-    const remainder = limit - count;
-    useEffect(() => {
-        const field = counterRef.current?.closest('.ds-field');
-        const input = Array.from(field?.getElementsByTagName('*') || []).find(isInputLike);
-        const onInput = ({ target }) => {
-            if (isInputLike(target))
-                setCount(target.value.length);
-        };
-        if (input)
-            onInput({ target: input }); // Initial setup
-        field?.addEventListener('input', onInput);
-        return () => field?.removeEventListener('input', onInput);
-    }, [setCount]);
-    return (jsxs(Fragment, { children: [jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsx(ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsx(Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
-});
-
-export { FieldCounter };

package/dist/esm/components/Field/fieldObserver.js

@@ -1,93 +0,0 @@
-'use client';
-function fieldObserver(fieldElement) {
-    if (!fieldElement)
-        return;
-    const elements = new Map();
-    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
-    let input = null;
-    let describedby = '';
-    const process = (mutations) => {
-        const changed = [];
-        const removed = [];
-        // Merge MutationRecords
-        for (const mutation of mutations) {
-            if (mutation.attributeName)
-                changed.push(mutation.target ?? fieldElement);
-            changed.push(...(mutation.addedNodes || []));
-            removed.push(...(mutation.removedNodes || []));
-        }
-        // Register elements
-        for (const el of changed) {
-            if (!isElement(el))
-                continue;
-            if (isLabel(el))
-                elements.set(el, el.htmlFor);
-            else if (el.hasAttribute('data-field'))
-                elements.set(el, el.id);
-            else if (isInputLike(el)) {
-                input = el;
-                describedby = el.getAttribute('aria-describedby') || '';
-            }
-        }
-        // Reset removed elements
-        for (const el of removed) {
-            if (!isElement(el))
-                continue;
-            if (input === el)
-                input = null;
-            if (elements.has(el)) {
-                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
-                elements.delete(el);
-            }
-        }
-        // Connect elements
-        const describedbyIds = [describedby]; // Keep original aria-describedby
-        const inputId = input?.id || uuid;
-        for (const [el, value] of elements) {
-            const descriptionType = el.getAttribute('data-field');
-            const id = descriptionType ? `${inputId}:${descriptionType}` : inputId;
-            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
-        }
-        setAttr(input, 'id', inputId);
-        setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());
-    };
-    const observer = createOptimizedMutationObserver(process);
-    observer.observe(fieldElement, {
-        attributeFilter: ['id', 'for', 'aria-describedby'],
-        attributes: true,
-        childList: true,
-        subtree: true,
-    });
-    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
-    observer.takeRecords(); // Clear initial setup queue
-    return () => observer.disconnect();
-}
-// Utilities
-const isElement = (node) => node instanceof Element;
-const isLabel = (node) => node instanceof HTMLLabelElement;
-const isInputLike = (node) => node instanceof HTMLElement &&
-    'validity' in node &&
-    !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
-const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
-// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
-function createOptimizedMutationObserver(callback) {
-    const queue = [];
-    const observer = new MutationObserver((mutations) => {
-        if (!queue.length)
-            requestAnimationFrame(process);
-        queue.push(...mutations);
-    });
-    const process = () => {
-        callback(queue, observer);
-        queue.length = 0; // Reset queue
-        observer.takeRecords(); // Clear queue due to DOM changes in callback
-    };
-    return observer;
-}
-
-export { fieldObserver, isElement, isInputLike, isLabel };

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

@@ -1,29 +0,0 @@
-'use client';
-import { Field as Field$1 } from './Field.js';
-import { FieldAffix, FieldAffixes } from './FieldAffix.js';
-import { FieldCounter } from './FieldCounter.js';
-import { FieldDescription } from './FieldDescription.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 = Object.assign(Field$1, {
-    Description: FieldDescription,
-    Affixes: FieldAffixes,
-    Affix: FieldAffix,
-    Counter: FieldCounter,
-});
-Field.Description.displayName = 'Field.Description';
-Field.Affixes.displayName = 'Field.Affixes';
-Field.Affix.displayName = 'Field.Affix';
-Field.Counter.displayName = 'Field.Counter';
-
-export { Field, FieldAffix, FieldAffixes, FieldCounter, FieldDescription };

package/dist/esm/components/Fieldset/FieldsetDescription.js

@@ -1,18 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Paragraph } from '../Paragraph/Paragraph.js';
-
-/**
- * FieldsetDescription component, used to display a description for a fieldset.
- *
- * @example
- * <Fieldset.Description>
- *   Gi en kort beskrivelse i begge feltene
- * </Fieldset.Description>
- */
-const FieldsetDescription = forwardRef(function FieldsetDescription(rest, ref) {
-    return jsx(Paragraph, { ref: ref, ...rest });
-});
-
-export { FieldsetDescription };

package/dist/esm/components/Fieldset/FieldsetLegend.js

@@ -1,16 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Label } from '../Label/Label.js';
-
-/**
- * FieldsetLegend component, used to display a legend for a fieldset.
- *
- * @example
- * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
- */
-const FieldsetLegend = forwardRef(function FieldsetLegend(rest, ref) {
-    return (jsx(Label, { asChild: true, children: jsx("legend", { ref: ref, ...rest }) }));
-});
-
-export { FieldsetLegend };

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

@@ -1,28 +0,0 @@
-'use client';
-import { Fieldset as Fieldset$1 } from './Fieldset.js';
-import { FieldsetDescription } from './FieldsetDescription.js';
-import { FieldsetLegend } from './FieldsetLegend.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 Fieldset = Object.assign(Fieldset$1, {
-    Legend: FieldsetLegend,
-    Description: FieldsetDescription,
-});
-Fieldset.Legend.displayName = 'Fieldset.Legend';
-Fieldset.Description.displayName = 'Fieldset.Description';
-
-export { Fieldset, FieldsetDescription, FieldsetLegend };

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

@@ -1,14 +0,0 @@
-'use client';
-import { ListItem } from './ListItem.js';
-import { ListUnordered, ListOrdered } from './Lists.js';
-
-const List = {
-    Item: ListItem,
-    Ordered: ListOrdered,
-    Unordered: ListUnordered,
-};
-List.Item.displayName = 'List.Item';
-List.Ordered.displayName = 'List.Ordered';
-List.Unordered.displayName = 'List.Unordered';
-
-export { List, ListItem, ListOrdered, ListUnordered };

package/dist/esm/components/Pagination/PaginationButton.js

@@ -1,18 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Button } from '../Button/Button.js';
-
-/**
- * PaginationButton component, use within a Pagination.Item.
- *
- * @example
- * <Pagination.Item>
- *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- * </Pagination.Item>
- */
-const PaginationButton = forwardRef(function PaginationButton(rest, ref) {
-    return jsx(Button, { ref: ref, ...rest });
-});
-
-export { PaginationButton };

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

@@ -1,34 +0,0 @@
-'use client';
-import { Pagination as Pagination$1 } from './Pagination.js';
-import { PaginationButton } from './PaginationButton.js';
-import { PaginationItem } from './PaginationItem.js';
-import { PaginationList } from './PaginationList.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 Pagination = Object.assign(Pagination$1, {
-    List: PaginationList,
-    Item: PaginationItem,
-    Button: PaginationButton,
-});
-Pagination.List.displayName = 'Pagination.List';
-Pagination.Item.displayName = 'Pagination.Item';
-Pagination.Button.displayName = 'Pagination.Button';
-
-export { Pagination, PaginationButton, PaginationItem, PaginationList };

package/dist/esm/components/Popover/Popover.js

@@ -1,131 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
-import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
-import { Context } from './PopoverTriggerContext.js';
-import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.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 = forwardRef(function Popover({ id, className, onClose, onOpen, open, variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
-    const Component = asChild ? Slot : 'div';
-    const popoverRef = useRef(null);
-    const mergedRefs = useMergeRefs([popoverRef, ref]);
-    const { popoverId, setPopoverId } = useContext(Context);
-    const [internalOpen, setInternalOpen] = useState(false);
-    const controlledOpen = open ?? internalOpen;
-    // NOTE: This code is purely to add React controlled component ability to Popover API
-    useEffect(() => {
-        const popover = popoverRef.current;
-        const handleClick = (event) => {
-            const el = event.target;
-            const isTrigger = el?.closest?.(`[popovertarget="${popover?.id}"]`);
-            const isOutside = !isTrigger && !popover?.contains(el);
-            if (isTrigger) {
-                event.preventDefault(); // Prevent native Popover API
-                setInternalOpen((open) => !open);
-                onOpen?.();
-            }
-            if (isOutside) {
-                setInternalOpen(false);
-                onClose?.();
-            }
-        };
-        const handleKeydown = (event) => {
-            if (event.key !== 'Escape' || !controlledOpen)
-                return;
-            event.preventDefault(); // Prevent closing fullscreen in Safari
-            setInternalOpen(false);
-            onClose?.();
-        };
-        popover?.togglePopover?.(controlledOpen);
-        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]);
-    // Position with floating-ui
-    useEffect(() => {
-        const popover = popoverRef.current;
-        const trigger = document.querySelector(`[popovertarget="${popover?.id}"]`);
-        if (popover && trigger && controlledOpen)
-            return autoUpdate(trigger, popover, () => {
-                computePosition(trigger, popover, {
-                    placement,
-                    strategy: 'fixed',
-                    middleware: [
-                        offset((data) => {
-                            // get pseudo element arrow size
-                            const styles = getComputedStyle(data.elements.floating, '::before');
-                            return parseFloat(styles.height);
-                        }),
-                        ...(autoPlacement
-                            ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]
-                            : []),
-                        arrowPseudoElement,
-                    ],
-                }).then(({ x, y }) => {
-                    popover.style.translate = `${x}px ${y}px`;
-                });
-            });
-    }, [controlledOpen, placement, id, autoPlacement]);
-    // Update context with id
-    useEffect(() => {
-        if (id)
-            setPopoverId?.(id);
-    }, [id]);
-    return (jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, popover: 'manual', "data-variant": variant, ref: mergedRefs, ...rest }));
-});
-const arrowPseudoElement = {
-    name: 'ArrowPseudoElement',
-    fn(data) {
-        const { elements, rects, placement } = data;
-        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
-        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
-        if (rects.reference.width > rects.floating.width) {
-            arrowX = `${Math.round(rects.floating.width / 2)}px`;
-        }
-        if (rects.reference.height > rects.floating.height) {
-            arrowY = `${Math.round(rects.floating.height / 2)}px`;
-        }
-        switch (placement.split('-')[0]) {
-            case 'top':
-                arrowY = '100%';
-                break;
-            case 'right':
-                arrowX = '0';
-                break;
-            case 'bottom':
-                arrowY = '0';
-                break;
-            case 'left':
-                arrowX = '100%';
-                break;
-        }
-        elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom
-        elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX);
-        elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY);
-        return data;
-    },
-};
-
-export { Popover };

package/dist/esm/components/Popover/PopoverTrigger.js

@@ -1,43 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useContext, version } from 'react';
-import { Button } from '../Button/Button.js';
-import { Context } from './PopoverTriggerContext.js';
-
-/**
- * PopoverTrigger component, used to trigger a popover.
- *
- * @example
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
- *   <Popover>
- *     Content
- *   </Popover>
- * </Popover.TriggerContext>
- *
- * @example inline
- * <Popover.TriggerContext>
- *   <Paragraph>
- *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
- *   </Paragraph>
- *   <Popover>
- *     Content
- *   </Popover>
- * </Popover.TriggerContext>
- */
-const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
-    const { popoverId } = useContext(Context);
-    const Component = asChild ? Slot : inline ? 'button' : Button;
-    const popoverProps = Object.assign({
-        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: popoverId,
-        ...(inline
-            ? {
-                'data-popover': 'inline',
-            }
-            : {}),
-    }, rest);
-    return jsx(Component, { ref: ref, ...popoverProps });
-});
-
-export { PopoverTrigger };

package/dist/esm/components/Popover/PopoverTriggerContext.js

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

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

@@ -1,24 +0,0 @@
-'use client';
-import { Popover as Popover$1 } from './Popover.js';
-import { PopoverTrigger } from './PopoverTrigger.js';
-import { PopoverTriggerContext } from './PopoverTriggerContext.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 Popover = Object.assign(Popover$1, {
-    TriggerContext: PopoverTriggerContext,
-    Trigger: PopoverTrigger,
-});
-Popover.TriggerContext.displayName = 'Popover.TriggerContext';
-Popover.Trigger.displayName = 'Popover.Trigger';
-
-export { Popover, PopoverTrigger, PopoverTriggerContext };

package/dist/esm/components/Radio/Radio.js

@@ -1,19 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Field } from '../Field/index.js';
-import { Input } from '../Input/Input.js';
-import { Label } from '../Label/Label.js';
-import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
-
-/**
- * Radio used to select multiple options.
- *
- * @example
- * <Radio label="I agree" value="agree" />
- */
-const Radio = forwardRef(function Radio({ '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: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
-});
-
-export { Radio };

package/dist/esm/components/Search/SearchButton.js

@@ -1,19 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Button } from '../Button/Button.js';
-
-/**
- * SearchButton component, used to display a search button within a Search component.
- *
- * @example
- * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Button>Søk</Search.Button>
- * </Search>
- */
-const SearchButton = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
-    return (jsx(Button, { ref: ref, type: 'submit', ...rest, children: children }));
-});
-
-export { SearchButton };

package/dist/esm/components/Search/SearchClear.js

@@ -1,35 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { setReactInputValue } from '../Combobox/utilities.js';
-import { Button } from '../Button/Button.js';
-
-/**
- * SearchClear component, used to display a clear buttun when the search input is not empty.
- *
- * @example
- * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Clear />
- * </Search>
- */
-const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
-    const handleClear = (e) => {
-        const target = e.target;
-        let input = null;
-        if (target instanceof HTMLElement)
-            input = target.closest('.ds-search')?.querySelector('input');
-        if (!input)
-            throw new Error('Input is missing');
-        /* narrow type to make TS happy */
-        if (!(input instanceof HTMLInputElement))
-            throw new Error('Input is not an input element');
-        e.preventDefault();
-        setReactInputValue(input, '');
-        input.focus();
-        onClick?.(e);
-    };
-    return (jsx(Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
-});
-
-export { SearchClear };