@norges-domstoler/dds-components 8.0.1 → 9.0.0

package/dist/cjs/types/CheckboxPickedHTMLAttributes.d.ts

@@ -0,0 +1,2 @@
+import { InputHTMLAttributes } from 'react';
+export declare type CheckboxPickedHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'checked' | 'defaultChecked' | 'value' | 'defaultValue' | 'onChange' | 'onBlur'>;

package/dist/cjs/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Direction';
 export * from './BaseComponentProps';
+export * from './CheckboxPickedHTMLAttributes';

package/dist/components/Breadcrumbs/Breadcrumb.js

@@ -7,6 +7,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../Typography/Link/Link.js';

package/dist/components/Button/Button.stories.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onFocus" | "onBlur" | "onClick">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type">, "id" | "className"> & {
         size?: import("./Button.types").ButtonSize | undefined;
         label?: string | undefined;
         purpose?: import("./Button.types").ButtonPurpose | undefined;
@@ -13,12 +13,12 @@ declare const _default: {
         href?: string | undefined;
         target?: string | undefined;
     } & {
-        type?: "button" | "submit" | "reset" | undefined;
         onFocus?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
         onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+        type?: "button" | "submit" | "reset" | undefined;
     } & {
-        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onFocus" | "onBlur" | "onClick"> | undefined;
+        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type"> | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;
     argTypes: {
         label: {

package/dist/components/Card/CardAccordion/CardAccordionHeader.js

@@ -8,6 +8,7 @@ import { AnimatedChevronUpDown } from '../../../helpers/Chevron/AnimatedChevronU
 import '../../../helpers/HiddenInput/HiddenInput.js';
 import '../../../helpers/Input/Input.styles.js';
 import '../../../helpers/Input/Input.tokens.js';
+import '../../InputMessage/InputMessage.js';
 import '../../../helpers/Paper/Paper.js';
 import '../../../helpers/RequiredMarker/RequiredMarker.js';
 import { removeButtonStyling } from '../../../helpers/styling/removeButtonStyling.js';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -4,15 +4,6 @@ export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<Om
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
     indeterminate?: boolean | undefined;
-} & {
-    'aria-describedby'?: string | undefined;
-    name?: string | undefined;
-    checked?: boolean | undefined;
-    defaultChecked?: boolean | undefined;
-    value?: string | number | readonly string[] | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-} & {
+} & import("../../types").CheckboxPickedHTMLAttributes & {
     htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur"> | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -7,6 +7,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { joinClassNames, getBaseHTMLProps } from '../../types/BaseComponentProps.js';

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -1,23 +1,14 @@
 import { CheckboxProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "value" | "checked">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         indeterminate?: boolean | undefined;
-    } & {
-        name?: string | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        'aria-describedby'?: string | undefined;
-        onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
-        value?: string | number | readonly string[] | undefined;
-        checked?: boolean | undefined;
-    } & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "value" | "checked"> | undefined;
+    } & import("../../types").CheckboxPickedHTMLAttributes & {
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

package/dist/components/Checkbox/Checkbox.types.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { BaseComponentProps } from '../../types';
-declare type PickedHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'checked' | 'defaultChecked' | 'value' | 'defaultValue' | 'onChange' | 'onBlur'>;
+import { CheckboxPickedHTMLAttributes } from '../../types/CheckboxPickedHTMLAttributes';
 export declare type CheckboxProps = BaseComponentProps<HTMLInputElement, {
     /** Ledetekst for inputelementet. */
     label?: string;
@@ -12,5 +12,4 @@ export declare type CheckboxProps = BaseComponentProps<HTMLInputElement, {
     readOnly?: boolean;
     /**Brukes ved nøstet struktur der alle Checkbox som hører til en gruppe kan bli valgt ved å trykke på en forelder Checkbox. Hvis enkelte <Checkbox /> blir valgt men ikke alle skal forelder <Checkbox /> få tilstanden indeterminate - verken checked eller ikke. */
     indeterminate?: boolean;
-} & PickedHTMLAttributes, Omit<InputHTMLAttributes<HTMLInputElement>, keyof PickedHTMLAttributes>>;
-export {};
+} & CheckboxPickedHTMLAttributes, Omit<InputHTMLAttributes<HTMLInputElement>, keyof CheckboxPickedHTMLAttributes>>;

package/dist/components/Checkbox/CheckboxGroup.js

@@ -7,9 +7,9 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import { renderInputMessage } from '../../helpers/Input/Input.utils.js';
 import '../../helpers/Paper/Paper.js';
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
-import { InputMessage } from '../InputMessage/InputMessage.js';
 import { checkboxGroupTokens } from './CheckboxGroup.tokens.js';
 import { CheckboxGroupContext } from './CheckboxGroupContext.js';
 import { Typography } from '../Typography/Typography/Typography.js';
@@ -68,11 +68,7 @@ var CheckboxGroup = function CheckboxGroup(props) {
       id: uniqueGroupId
     }, {
       children: [label, " ", showRequiredMarker && jsx(RequiredMarker, {})]
-    })), tip && jsx(InputMessage, {
-      messageType: "tip",
-      message: tip,
-      id: tipId
-    }), jsx(CheckboxGroupContext.Provider, Object.assign({
+    })), renderInputMessage(tip, tipId), jsx(CheckboxGroupContext.Provider, Object.assign({
       value: Object.assign({}, contextProps)
     }, {
       children: jsx(GroupContainer, Object.assign({
@@ -83,11 +79,7 @@ var CheckboxGroup = function CheckboxGroup(props) {
       }, {
         children: children
       }))
-    })), errorMessage && jsx(InputMessage, {
-      messageType: "error",
-      message: errorMessage,
-      id: errorMessageId
-    })]
+    })), renderInputMessage(undefined, undefined, errorMessage, errorMessageId)]
   }));
 };
 

package/dist/components/Datepicker/Datepicker.js

@@ -2,12 +2,12 @@ import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginB
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId } from 'react';
-import { InputMessage } from '../InputMessage/InputMessage.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import { StatefulInput, OuterInputContainer } from '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import { renderInputMessage } from '../../helpers/Input/Input.utils.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import styled, { css } from 'styled-components';
@@ -85,15 +85,7 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       showRequiredStyling: showRequiredStyling
     }, {
       children: label
-    })), jsx(StyledInput, Object.assign({}, inputProps)), hasErrorMessage && jsx(InputMessage, {
-      message: errorMessage,
-      id: errorMessageId,
-      messageType: "error"
-    }), tip && !hasErrorMessage && jsx(InputMessage, {
-      message: tip,
-      id: tipId,
-      messageType: "tip"
-    })]
+    })), jsx(StyledInput, Object.assign({}, inputProps)), renderInputMessage(tip, tipId, errorMessage, errorMessageId)]
   }));
 });
 

package/dist/components/Drawer/Drawer.js

@@ -10,6 +10,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import { Paper } from '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';

package/dist/components/GlobalMessage/GlobalMessage.js

@@ -12,6 +12,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';

package/dist/components/InternalHeader/InternalHeader.js

@@ -8,6 +8,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';

package/dist/components/LocalMessage/LocalMessage.js

@@ -12,6 +12,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';

package/dist/components/Modal/Modal.js

@@ -20,6 +20,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';

package/dist/components/Pagination/Pagination.js

@@ -9,6 +9,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';

package/dist/components/Popover/Popover.js

@@ -24,6 +24,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import { Paper } from '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../Typography/Link/Link.js';

package/dist/components/RadioButton/RadioButton.js

@@ -7,6 +7,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps, joinClassNames } from '../../types/BaseComponentProps.js';

package/dist/components/RadioButton/RadioButton.stories.d.ts

@@ -1,14 +1,14 @@
 import { RadioButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "aria-describedby" | "onChange" | "value" | "checked" | "readOnly" | "required">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required">, "id" | "className"> & {
         label?: string | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        name?: string | undefined;
         'aria-describedby'?: string | undefined;
         onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+        name?: string | undefined;
         value?: string | number | readonly string[] | undefined;
         checked?: boolean | undefined;
         readOnly?: boolean | undefined;
@@ -16,7 +16,7 @@ declare const _default: {
     } & {
         children?: import("react").ReactNode;
     } & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "aria-describedby" | "onChange" | "value" | "checked" | "readOnly" | "required"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

package/dist/components/RadioButton/RadioButtonGroup.d.ts

@@ -51,7 +51,7 @@ export declare const RadioButtonGroup: <T extends string | number = string>(prop
 } & {
     children?: import("react").ReactNode;
 } & {
-    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined; /**Funksjonen for onChange-event for barna. */
 } & {
     ref?: Ref<HTMLDivElement> | undefined;
 }) => ReactElement;

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -8,9 +8,9 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import { renderInputMessage } from '../../helpers/Input/Input.utils.js';
 import '../../helpers/Paper/Paper.js';
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
-import { InputMessage } from '../InputMessage/InputMessage.js';
 import { radioButtonGroupTokens } from './RadioButtonGroup.tokens.js';
 import { RadioButtonGroupContext } from './RadioButtonGroupContext.js';
 import { Typography } from '../Typography/Typography/Typography.js';
@@ -66,7 +66,6 @@ var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
     return onChange && onChange(e, e.target.value);
   });
   var hasErrorMessage = !!errorMessage;
-  var hasTip = !!tip;
   var showRequiredMarker = required || ariaRequired;
   var tipId = tip && "".concat(uniqueGroupId, "-tip");
   var errorMessageId = errorMessage && "".concat(uniqueGroupId, "-errorMessage");
@@ -91,11 +90,7 @@ var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
       id: uniqueGroupId
     }, {
       children: [label, " ", showRequiredMarker && jsx(RequiredMarker, {})]
-    })), hasTip && jsx(InputMessage, {
-      message: tip,
-      messageType: "tip",
-      id: tipId
-    }), jsx(RadioButtonGroupContext.Provider, Object.assign({
+    })), renderInputMessage(tip, tipId), jsx(RadioButtonGroupContext.Provider, Object.assign({
       value: Object.assign({}, contextProps)
     }, {
       children: jsx(GroupContainer, Object.assign({
@@ -107,11 +102,7 @@ var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
       }, {
         children: children
       }))
-    })), hasErrorMessage && jsx(InputMessage, {
-      message: errorMessage,
-      messageType: "error",
-      id: errorMessageId
-    })]
+    })), renderInputMessage(undefined, undefined, errorMessage, errorMessageId)]
   }));
 };
 

package/dist/components/Search/Search.js

@@ -9,9 +9,9 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import { Input as Input$1 } from '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import { renderInputMessage } from '../../helpers/Input/Input.utils.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
-import { InputMessage } from '../InputMessage/InputMessage.js';
 import { spaceSeparatedIdListGenerator, derivativeIdGenerator } from '../../utils/idGenerator.js';
 import '../../utils/color.js';
 import { Icon } from '../Icon/Icon.js';
@@ -81,7 +81,6 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
   var generatedId = useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-searchInput");
   var hasLabel = !!label;
-  var hasTip = !!tip;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var containerProps = {
     className: className,
@@ -120,11 +119,7 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
           label: buttonLabel || 'Søk',
           onClick: onClick
         }, otherButtonProps))]
-      })), hasTip && jsx(InputMessage, {
-        id: tipId,
-        messageType: "tip",
-        message: tip
-      })]
+      })), renderInputMessage(tip, tipId)]
     })]
   });
 });

package/dist/components/Select/Select.js

@@ -9,12 +9,11 @@ import { CloseSmallIcon } from '../../icons/tsx/closeSmall.js';
 import { spaceSeparatedIdListGenerator, derivativeIdGenerator } from '../../utils/idGenerator.js';
 import '../../utils/color.js';
 import { Icon } from '../Icon/Icon.js';
-import { InputMessage } from '../InputMessage/InputMessage.js';
 import { prefix, getCustomStyles, Container, InnerSingleValue, StyledIcon } from './Select.styles.js';
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
 import '../Typography/Link/Link.js';
-import { getFormInputIconSize } from '../../helpers/Input/Input.utils.js';
+import { renderInputMessage, getFormInputIconSize } from '../../helpers/Input/Input.utils.js';
 
 var Option = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
@@ -224,15 +223,7 @@ var SelectInner = function SelectInner(props, ref) {
       children: label
     })), jsx(ReactSelect, Object.assign({}, reactSelectProps, {
       ref: ref
-    })), errorMessage && jsx(InputMessage, {
-      messageType: "error",
-      id: errorMessageId,
-      message: errorMessage
-    }), tip && !errorMessage && jsx(InputMessage, {
-      messageType: "tip",
-      id: tipId,
-      message: tip
-    })]
+    })), renderInputMessage(tip, tipId, errorMessage, errorMessageId)]
   }));
 };
 

package/dist/components/Tag/Tag.js

@@ -9,6 +9,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,7 @@
+import { TextareaHTMLAttributes } from 'react';
+import { CommonInputProps } from '../../helpers/Input';
+export declare const StyledTextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers/Input").InputProps, "disabled" | "readOnly"> & {
+    hasErrorMessage: boolean;
+} & Pick<import("../../helpers/Input").InputProps, "componentSize">, never>;
+export declare type TextAreaProps = CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare const TextArea: import("react").ForwardRefExoticComponent<CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,105 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { StatefulInput, OuterInputContainer } from '../../helpers/Input/Input.styles.js';
+import { inputTokens } from '../../helpers/Input/Input.tokens.js';
+import { getDefaultText, renderInputMessage } from '../../helpers/Input/Input.utils.js';
+import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
+import '../../hooks/useFloatPosition.js';
+import { spaceSeparatedIdListGenerator, derivativeIdGenerator } from '../../utils/idGenerator.js';
+import '../../utils/color.js';
+import '../../hooks/useScreenSize.js';
+import '../ScrollableContainer/Scrollbar.js';
+import '../ScrollableContainer/ScrollableContainer.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
+import '../Typography/Typography/Typography.js';
+import { Label } from '../Typography/Label/Label.js';
+import '../Typography/Link/Link.js';
+import { textAreaTokens } from './TextArea.tokens.js';
+
+var defaultWidth = '320px';
+var textarea = textAreaTokens.textarea;
+var StyledTextArea = styled(StatefulInput).withConfig({
+  displayName: "TextArea__StyledTextArea",
+  componentId: "sc-dg30pn-0"
+})(["", " ", " height:auto;resize:vertical;vertical-align:bottom;padding-bottom:", ";", ""], scrollbarStyling.webkit, scrollbarStyling.firefox, textarea.paddingBottom, inputTokens.input.sizes.medium.font);
+var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      onChange = props.onChange,
+      errorMessage = props.errorMessage,
+      required = props.required,
+      disabled = props.disabled,
+      tip = props.tip,
+      label = props.label,
+      ariaRequired = props['aria-required'],
+      ariaDescribedby = props['aria-describedby'],
+      className = props.className,
+      style = props.style,
+      _props$width = props.width,
+      width = _props$width === void 0 ? defaultWidth : _props$width,
+      rest = __rest(props, ["id", "value", "defaultValue", "onChange", "errorMessage", "required", "disabled", "tip", "label", 'aria-required', 'aria-describedby', "className", "style", "width"]);
+
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-textArea");
+  var textAreaRef = useRef(null);
+  var multiRef = useCombinedRef(ref, textAreaRef);
+
+  var _useState = useState(getDefaultText(value, defaultValue)),
+      _useState2 = _slicedToArray(_useState, 2),
+      text = _useState2[0],
+      setText = _useState2[1];
+
+  useEffect(function () {
+    if (textAreaRef && textAreaRef.current) {
+      textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight + 2, "px");
+    }
+  }, [text]);
+
+  var onChangeHandler = function onChangeHandler(event) {
+    setText(event.target.value);
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  var hasErrorMessage = !!errorMessage;
+  var hasLabel = !!label;
+  var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
+  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
+  var showRequiredStyling = required || !!ariaRequired;
+  var containerProps = {
+    width: width,
+    className: className,
+    style: style
+  };
+  var textAreaProps = Object.assign({
+    ref: multiRef,
+    onChange: onChangeHandler,
+    value: value,
+    defaultValue: defaultValue,
+    id: uniqueId,
+    disabled: disabled,
+    hasErrorMessage: hasErrorMessage,
+    required: required,
+    'aria-required': ariaRequired,
+    'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
+    'aria-invalid': hasErrorMessage ? true : undefined
+  }, rest);
+  return jsxs(OuterInputContainer, Object.assign({}, containerProps, {
+    children: [hasLabel && jsx(Label, Object.assign({
+      showRequiredStyling: showRequiredStyling,
+      htmlFor: uniqueId
+    }, {
+      children: label
+    })), jsx(StyledTextArea, Object.assign({}, textAreaProps, {
+      as: "textarea"
+    })), renderInputMessage(tip, tipId, errorMessage, errorMessageId)]
+  }));
+});
+
+export { StyledTextArea, TextArea };

package/dist/components/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,51 @@
+import { TextAreaProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("../../helpers").CommonInputProps & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        errorMessage: {
+            control: {
+                type: string;
+            };
+        };
+        width: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: TextAreaProps) => JSX.Element;
+export declare const Default: (args: TextAreaProps) => JSX.Element;
+export declare const WithLabel: (args: TextAreaProps) => JSX.Element;

package/dist/components/TextArea/TextArea.tokens.d.ts

@@ -0,0 +1,5 @@
+export declare const textAreaTokens: {
+    textarea: {
+        paddingBottom: string;
+    };
+};

package/dist/components/TextArea/TextArea.tokens.js

@@ -0,0 +1,11 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var spacing = ddsBaseTokens.spacing;
+var textarea = {
+  paddingBottom: spacing.SizesDdsSpacingLocalX05
+};
+var textAreaTokens = {
+  textarea: textarea
+};
+
+export { textAreaTokens };

package/dist/components/TextArea/index.d.ts

@@ -0,0 +1 @@
+export * from './TextArea';

package/dist/components/TextInput/CharCounter.js

@@ -9,6 +9,7 @@ import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
 import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
+import '../InputMessage/InputMessage.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../Typography/Link/Link.js';