@digdir/designsystemet-react 1.1.2 → 1.1.4

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

@@ -1,21 +0,0 @@
-'use client';
-'use strict';
-
-var Chips = require('./Chips.js');
-
-const Chip = {
-    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';
-
-exports.ChipButton = Chips.ChipButton;
-exports.ChipCheckbox = Chips.ChipCheckbox;
-exports.ChipRadio = Chips.ChipRadio;
-exports.ChipRemovable = Chips.ChipRemovable;
-exports.Chip = Chip;

package/dist/cjs/components/Details/Details.js

@@ -1,43 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cl = require('clsx/lite');
-var react = require('react');
-require('@u-elements/u-details');
-var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
-
-/**
- * Details component, contains `Details.Summary` and `Details.Content` components.
- *
- * @example
- * <Details>
- *  <Details.Summary>Header</Details.Summary>
- *  <Details.Content>Content</Details.Content>
- * </Details>
- */
-const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, variant = 'default', onToggle, ...rest }, ref) {
-    const detailsRef = react.useRef(null);
-    const initialOpen = react.useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
-    const mergedRefs = useMergeRefs.useMergeRefs([detailsRef, ref]);
-    const onToggleRef = react.useRef(onToggle); // Using ref to enable access inside useEffect without re-binding event listeners
-    const openRef = react.useRef(open);
-    onToggleRef.current = onToggle;
-    openRef.current = open;
-    // Provide onToggle event and controlled state
-    react.useEffect(() => {
-        const details = detailsRef.current;
-        const handleToggle = (event) => {
-            if (!details || details?.open === openRef.current)
-                return;
-            onToggleRef.current?.(event);
-            if (openRef.current !== undefined)
-                details.open = openRef.current; // Don't update DOM unless controlled state changes
-        };
-        details?.addEventListener('toggle', handleToggle, true);
-        return () => details?.removeEventListener('toggle', handleToggle, true);
-    }, []);
-    return (jsxRuntime.jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
-});
-
-exports.Details = Details;

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

@@ -1,26 +0,0 @@
-'use client';
-'use strict';
-
-var Details$1 = require('./Details.js');
-var DetailsContent = require('./DetailsContent.js');
-var DetailsSummary = require('./DetailsSummary.js');
-
-/**
- * Details component, contains `Details.Summary` and `Details.Content` components.
- *
- * @example
- * <Details>
- *  <Details.Summary>Header</Details.Summary>
- *  <Details.Content>Content</Details.Content>
- * </Details>
- */
-const Details = Object.assign(Details$1.Details, {
-    Summary: DetailsSummary.DetailsSummary,
-    Content: DetailsContent.DetailsContent,
-});
-Details.Summary.displayName = 'Details.Summary';
-Details.Content.displayName = 'Details.Content';
-
-exports.DetailsContent = DetailsContent.DetailsContent;
-exports.DetailsSummary = DetailsSummary.DetailsSummary;
-exports.Details = Details;

package/dist/cjs/components/Dialog/Dialog.js

@@ -1,82 +0,0 @@
-'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');
-var DialogTriggerContext = require('./DialogTriggerContext.js');
-var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
-var Button = require('../Button/Button.js');
-
-/**
- * Dialog component, used to display a dialog dialog.
- *
- * @example with TriggerContext
- * <Dialog.TriggerContext>
- *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
- *   <Dialog>
- *     <Dialog.Block>
- *       Content
- *     </Dialog.Block>
- *   </Dialog>
- * </Dialog.TriggerContext>
- *
- * @example without TriggerContext
- * const dialogRef = useRef<HTMLDialogElement>(null);
- *
- * ...
- *
- * <Button onClick={() => dialogRef.current?.showModal()}>Open Dialog</Button>
- * <Dialog ref={dialogRef}>
- *   Content
- * </Dialog>
- */
-const Dialog = react.forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
-    const contextRef = react.useContext(DialogTriggerContext.Context);
-    const dialogRef = react.useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
-    const Component = asChild ? reactSlot.Slot : 'dialog';
-    const mergedRefs = useMergeRefs.useMergeRefs([contextRef, ref, dialogRef]);
-    const showProp = modal ? 'showModal' : 'show';
-    react.useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]); // Toggle open based on prop
-    react.useEffect(() => {
-        const dialog = dialogRef.current;
-        const handleClosedby = (event) => {
-            const { clientY: y, clientX: x, target } = event;
-            if (event instanceof KeyboardEvent)
-                return (closedby === 'none' &&
-                    event.key === 'Escape' &&
-                    event.preventDefault()); // Skip ESC-key if closedby="none"
-            if (window.getSelection()?.toString())
-                return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
-            if (dialog && target === dialog && closedby === 'any') {
-                const { top, left, right, bottom } = dialog.getBoundingClientRect();
-                const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
-                if (!isInDialog)
-                    dialog?.close(); // Both <dialog> and ::backdrop is considered same event.target
-            }
-        };
-        const handleAutoFocus = () => {
-            const autofocus = dialog?.querySelector('[autofocus]');
-            if (document.activeElement !== autofocus)
-                autofocus?.focus();
-        };
-        dialog?.addEventListener('animationend', handleAutoFocus);
-        dialog?.addEventListener('click', handleClosedby);
-        dialog?.addEventListener('keydown', handleClosedby);
-        return () => {
-            dialog?.removeEventListener('animationend', handleAutoFocus);
-            dialog?.removeEventListener('click', handleClosedby);
-            dialog?.removeEventListener('keydown', handleClosedby);
-        };
-    }, [closedby]);
-    /* handle closing */
-    react.useEffect(() => {
-        const handleClose = (event) => onClose?.(event);
-        dialogRef.current?.addEventListener('close', handleClose);
-        return () => dialogRef.current?.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] }));
-});
-
-exports.Dialog = Dialog;

package/dist/cjs/components/Dialog/DialogTrigger.js

@@ -1,33 +0,0 @@
-'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 DialogTriggerContext = require('./DialogTriggerContext.js');
-
-/**
- * DialogTrigger component, used within a Dialog.TriggerContext to open a dialog.
- *
- * @example
- * <Dialog.TriggerContext>
- *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
- *   <Dialog>
- *     Content
- *   </Dialog>
- * </Dialog.TriggerContext>
- */
-const DialogTrigger = react.forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
-    const contextRef = react.useContext(DialogTriggerContext.Context);
-    const Component = asChild ? reactSlot.Slot : Button.Button;
-    const openDialog = () => {
-        /* check if element has `data-modal`, it it has, use `showModal` */
-        contextRef.current?.getAttribute('data-modal') === 'true'
-            ? contextRef.current?.showModal()
-            : contextRef.current?.show();
-    };
-    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, ...rest }));
-});
-
-exports.DialogTrigger = DialogTrigger;

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

@@ -1,34 +0,0 @@
-'use client';
-'use strict';
-
-var Dialog$1 = require('./Dialog.js');
-var DialogBlock = require('./DialogBlock.js');
-var DialogTrigger = require('./DialogTrigger.js');
-var DialogTriggerContext = require('./DialogTriggerContext.js');
-
-/**
- * Dialog component, used to display a Dialog dialog.
- *
- * @example
- * <Dialog.TriggerContext>
- *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
- *   <Dialog>
- *     <Dialog.Block>
- *       Content
- *     </Dialog.Block>
- *   </Dialog>
- * </Dialog.TriggerContext>
- */
-const Dialog = Object.assign(Dialog$1.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';
-
-exports.DialogBlock = DialogBlock.DialogBlock;
-exports.DialogTrigger = DialogTrigger.DialogTrigger;
-exports.DialogTriggerContext = DialogTriggerContext.DialogTriggerContext;
-exports.Dialog = Dialog;

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -1,40 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cl = require('clsx/lite');
-var react = require('react');
-var index = require('../Popover/index.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(index.Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
-});
-
-exports.Dropdown = Dropdown;

package/dist/cjs/components/Dropdown/DropdownButton.js

@@ -1,12 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var Button = require('../Button/Button.js');
-
-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/DropdownHeading.js

@@ -1,12 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var Heading = require('../Heading/Heading.js');
-
-const DropdownHeading = react.forwardRef(function DropdownHeading({ className, ...rest }, ref) {
-    return jsxRuntime.jsx(Heading.Heading, { ref: ref, ...rest });
-});
-
-exports.DropdownHeading = DropdownHeading;

package/dist/cjs/components/Dropdown/DropdownTrigger.js

@@ -1,13 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../Popover/index.js');
-var PopoverTrigger = require('../Popover/PopoverTrigger.js');
-
-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/DropdownTriggerContext.js

@@ -1,29 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-require('../Popover/index.js');
-var PopoverTriggerContext = require('../Popover/PopoverTriggerContext.js');
-
-/**
- * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
- *
- * @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 DropdownTriggerContext = ({ children, }) => {
-    return jsxRuntime.jsx(PopoverTriggerContext.PopoverTriggerContext, { children: children });
-};
-DropdownTriggerContext.displayName = 'DropdownTriggerContext';
-
-exports.DropdownTriggerContext = DropdownTriggerContext;

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

@@ -1,49 +0,0 @@
-'use client';
-'use strict';
-
-var Dropdown$1 = require('./Dropdown.js');
-var DropdownButton = require('./DropdownButton.js');
-var DropdownHeading = require('./DropdownHeading.js');
-var DropdownItem = require('./DropdownItem.js');
-var DropdownList = require('./DropdownList.js');
-var DropdownTrigger = require('./DropdownTrigger.js');
-var DropdownTriggerContext = require('./DropdownTriggerContext.js');
-
-/**
- * Dropdown component, used to display a list of options.
- *
- * @example
- * <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>
- */
-const Dropdown = Object.assign(Dropdown$1.Dropdown, {
-    TriggerContext: DropdownTriggerContext.DropdownTriggerContext,
-    Heading: DropdownHeading.DropdownHeading,
-    List: DropdownList.DropdownList,
-    Item: DropdownItem.DropdownItem,
-    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';
-
-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 = Dropdown;

package/dist/cjs/components/ErrorSummary/ErrorSummaryHeading.js

@@ -1,18 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var ErrorSummary = require('./ErrorSummary.js');
-var Heading = require('../Heading/Heading.js');
-
-const ErrorSummaryHeading = react.forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
-    const { headingId, setHeadingId } = react.useContext(ErrorSummary.ErrorSummaryContext);
-    react.useEffect(() => {
-        if (id && headingId !== id)
-            setHeadingId(id);
-    }, [headingId, id, setHeadingId]);
-    return jsxRuntime.jsx(Heading.Heading, { id: headingId, ref: ref, ...rest });
-});
-
-exports.ErrorSummaryHeading = ErrorSummaryHeading;

package/dist/cjs/components/ErrorSummary/ErrorSummaryItem.js

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

package/dist/cjs/components/ErrorSummary/ErrorSummaryLink.js

@@ -1,15 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var Link = require('../Link/Link.js');
-
-/**
- * Link component used in 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/ErrorSummary/ErrorSummaryList.js

@@ -1,12 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var index = require('../List/index.js');
-
-const ErrorSummaryList = react.forwardRef(function ErrorSummaryList({ ...rest }, ref) {
-    return jsxRuntime.jsx(index.List.Unordered, { ...rest, ref: ref });
-});
-
-exports.ErrorSummaryList = ErrorSummaryList;

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

@@ -1,41 +0,0 @@
-'use client';
-'use strict';
-
-var ErrorSummary$1 = require('./ErrorSummary.js');
-var ErrorSummaryHeading = require('./ErrorSummaryHeading.js');
-var ErrorSummaryItem = require('./ErrorSummaryItem.js');
-var ErrorSummaryLink = require('./ErrorSummaryLink.js');
-var ErrorSummaryList = require('./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.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';
-
-exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
-exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
-exports.ErrorSummaryLink = ErrorSummaryLink.ErrorSummaryLink;
-exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
-exports.ErrorSummary = ErrorSummary;

package/dist/cjs/components/Field/Field.js

@@ -1,30 +0,0 @@
-'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');
-var fieldObserver = require('./fieldObserver.js');
-var useMergeRefs = require('../../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 = react.forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    const fieldRef = react.useRef(null);
-    const mergedRefs = useMergeRefs.useMergeRefs([fieldRef, ref]);
-    react.useEffect(() => fieldObserver.fieldObserver(fieldRef.current), []);
-    return (jsxRuntime.jsx(Component, { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
-});
-
-exports.Field = Field;

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

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