@norges-domstoler/dds-components 8.0.0 → 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/OverflowMenu/OverflowMenu.tokens.d.ts

@@ -23,10 +23,10 @@ export declare const overflowMenuTokens: {
     };
     link: {
         hover: {
-            color: string;
+            backgroundColor: string;
         };
         active: {
-            color: string;
+            backgroundColor: string;
         };
     };
     divider: {

package/dist/components/OverflowMenu/OverflowMenu.tokens.js

@@ -10,17 +10,17 @@ var element = {
     color: colors.DdsColorNeutralsGray9,
     textDecoration: 'none',
     backgroundColor: colors.DdsColorNeutralsWhite,
-    padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX15),
+    padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1),
     gap: spacing.SizesDdsSpacingLocalX025,
     font: fontPackages.body_sans_01.base
   }
 };
 var link = {
   hover: {
-    color: colors.DdsColorInteractiveDark
+    backgroundColor: colors.DdsColorInteractiveLightest
   },
   active: {
-    color: colors.DdsColorInteractiveDark
+    backgroundColor: colors.DdsColorInteractiveLightest
   }
 };
 var container = {

package/dist/components/OverflowMenu/OverflowMenuItem.js

@@ -25,7 +25,7 @@ var Span = styled.span.withConfig({
 var Link = styled.a.withConfig({
   displayName: "OverflowMenuItem__Link",
   componentId: "sc-1ka2asi-1"
-})(["user-select:text;border:none;cursor:pointer;outline:inherit;width:100%;", " @media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", "}"], elementBaseCSS, link.hover.color, link.active.color, focusVisibleLink);
+})(["user-select:text;border:none;cursor:pointer;outline:inherit;width:100%;", " @media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{background-color:", ";}&:active{background-color:", ";}&:focus-visible,&.focus-visible{", "}"], elementBaseCSS, link.hover.backgroundColor, link.active.backgroundColor, focusVisibleLink);
 
 var isAnchorProps = function isAnchorProps(props) {
   return props.href !== undefined;

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.d.ts

@@ -31,8 +31,6 @@ export declare type PopoverProps = BaseComponentPropsWithChildren<HTMLDivElement
     sizeProps?: PopoverSizeProps;
     /** **OBS!** Propen settes automatisk av `<PopoverGroup />`. Funksjon kjørt ved lukking. */
     onClose?: () => void;
-    /**Spesifiserer hvilken DOM node `<Popover />` skal ha som forelder via React portal. Brukes med f.eks `document.getElementById("id")` (skaper ikke ny DOM node). */
-    parentElement?: HTMLElement;
 }>;
 export declare const Popover: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
     /**Tittel. */
@@ -55,8 +53,6 @@ export declare const Popover: import("react").ForwardRefExoticComponent<Pick<imp
     sizeProps?: PopoverSizeProps | undefined;
     /** **OBS!** Propen settes automatisk av `<PopoverGroup />`. Funksjon kjørt ved lukking. */
     onClose?: (() => void) | undefined;
-    /**Spesifiserer hvilken DOM node `<Popover />` skal ha som forelder via React portal. Brukes med f.eks `document.getElementById("id")` (skaper ikke ny DOM node). */
-    parentElement?: HTMLElement | undefined;
 } & {
     children?: ReactNode;
 } & {

package/dist/components/Popover/Popover.js

@@ -24,13 +24,13 @@ 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';
 import { popoverTokens } from './Popover.tokens.js';
 import '../../icons/utils/StyledSvg.js';
 import { CloseIcon } from '../../icons/tsx/close.js';
-import { createPortal } from 'react-dom';
 
 var Spacing = ddsBaseTokens.spacing;
 var wrapper = popoverTokens.wrapper,
@@ -77,15 +77,13 @@ var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
       children = props.children,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom' : _props$placement,
-      _props$parentElement = props.parentElement,
-      parentElement = _props$parentElement === void 0 ? document.body : _props$parentElement,
       _props$offset = props.offset,
       offset = _props$offset === void 0 ? Spacing.SizesDdsSpacingLocalX05NumberPx : _props$offset,
       id = props.id,
       className = props.className,
       _props$htmlProps = props.htmlProps,
       htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-      rest = __rest(props, ["title", "isOpen", "withCloseButton", "onBlur", "onCloseButtonClick", "onClose", "anchorElement", "children", "placement", "parentElement", "offset", "id", "className", "htmlProps"]);
+      rest = __rest(props, ["title", "isOpen", "withCloseButton", "onBlur", "onCloseButtonClick", "onClose", "anchorElement", "children", "placement", "offset", "id", "className", "htmlProps"]);
 
   var popoverRef = useReturnFocusOnBlur(isOpen, function () {
     onClose && onClose();
@@ -118,7 +116,7 @@ var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
     style: Object.assign(Object.assign({}, htmlProps.style), styles.floating),
     role: 'dialog'
   });
-  return isOpen || hasTransitionedIn ? /*#__PURE__*/createPortal(jsxs(Wrapper, Object.assign({}, wrapperProps, {
+  return isOpen || hasTransitionedIn ? jsxs(Wrapper, Object.assign({}, wrapperProps, {
     elevation: 3,
     border: "light"
   }, {
@@ -141,7 +139,7 @@ var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
       onClick: onCloseButtonClick,
       "aria-label": "Lukk"
     })]
-  })), parentElement) : null;
+  })) : null;
 });
 
 export { Popover };

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

@@ -13,7 +13,6 @@ declare const _default: {
         onBlur?: (() => void) | undefined;
         sizeProps?: import("./Popover").PopoverSizeProps | undefined;
         onClose?: (() => void) | undefined;
-        parentElement?: HTMLElement | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {

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>>;