@uppsala-designsystem/ui 1.5.0

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

@@ -0,0 +1,30 @@
+'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');
+
+/**
+ * DialogBlock component, used to separate content in a Dialog.
+ *
+ * @example
+ * <Dialog>
+ *   <Dialog.Block>
+ *     Header
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Content
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Footer
+ *   </Dialog.Block>
+ * </Dialog>
+ */
+const DialogBlock = react.forwardRef(function DialogBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-dialog__block', className), ref: ref, ...rest }));
+});
+
+exports.DialogBlock = DialogBlock;

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

@@ -0,0 +1,33 @@
+'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/DialogTriggerContext.js

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const Context = react.createContext({
+    current: null,
+});
+/**
+ * DialogTriggerContext component, used to provide a context for a dialog trigger.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTriggerContext = ({ children, }) => {
+    const contextRef = react.useRef(null);
+    return jsxRuntime.jsx(Context.Provider, { value: contextRef, children: children });
+};
+DialogTriggerContext.displayName = 'DialogTriggerContext';
+
+exports.Context = Context;
+exports.DialogTriggerContext = DialogTriggerContext;

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

@@ -0,0 +1,34 @@
+'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/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.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 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

@@ -0,0 +1,12 @@
+'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({ className, ...rest }, ref) {
+    return jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', ...rest });
+});
+
+exports.DropdownButton = DropdownButton;

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

@@ -0,0 +1,12 @@
+'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/DropdownItem.js

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

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

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

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

@@ -0,0 +1,13 @@
+'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

@@ -0,0 +1,29 @@
+'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

@@ -0,0 +1,49 @@
+'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/ErrorSummary.js

@@ -0,0 +1,37 @@
+'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 ErrorSummaryContext = react.createContext({
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+/**
+ * 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, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', className, ...rest }, ref) {
+    const randomId = react.useId();
+    const [headingId, setHeadingId] = react.useState(randomId);
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsxRuntime.jsx(Component, { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
+});
+
+exports.ErrorSummary = ErrorSummary;
+exports.ErrorSummaryContext = ErrorSummaryContext;

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

@@ -0,0 +1,18 @@
+'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

@@ -0,0 +1,19 @@
+'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 href='#'>Link to error</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

@@ -0,0 +1,15 @@
+'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

@@ -0,0 +1,12 @@
+'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

@@ -0,0 +1,41 @@
+'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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var cl = require('clsx/lite');
+var react = require('react');
+var fieldObserver = require('./fieldObserver.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, ...rest }, ref) {
+    const fieldRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([fieldRef, ref]);
+    react.useEffect(() => fieldObserver.fieldObserver(fieldRef.current), []);
+    return (jsxRuntime.jsx("div", { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
+});
+
+exports.Field = Field;

package/dist/cjs/components/Field/FieldAffix.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/FieldCounter.js

@@ -0,0 +1,40 @@
+'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-komponent, används för att visa en räknare för ett formulärfält.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tecken kvar' over='%d tecken för mycket' />
+ * </Field>
+ */
+const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = "%d tecken kvar", over = "%d tecken för mycket", ...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 }); // Initiering
+        field?.addEventListener("input", onInput);
+        return () => field?.removeEventListener("input", onInput);
+    }, []);
+    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;

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

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const FieldDescription = react.forwardRef(function FieldDescription(rest, ref) {
+    return jsxRuntime.jsx("div", { "data-field": 'description', ref: ref, ...rest });
+});
+
+exports.FieldDescription = FieldDescription;