@norges-domstoler/dds-components 7.0.0 → 7.1.0

package/dist/components/InputMessage/InputMessage.js

@@ -5,6 +5,13 @@ import { Icon } from '../Icon/Icon.js';
 import { inputMessageTokens } from './InputMessage.tokens.js';
 import { Typography } from '../Typography/Typography/Typography.js';
 import { forwardRef } from 'react';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../Typography/Link/Link.js';
 import '../../icons/utils/StyledSvg.js';
@@ -15,7 +22,7 @@ var InputMessageWrapper = styled.div.withConfig({
   componentId: "sc-c954fy-0"
 })(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
   var messageType = _ref.messageType;
-  return messageType === 'tip' ? css(["background-color:", ";padding:", ";"], inputMessageTokens.message.tip.backgroundColor, inputMessageTokens.message.tip.padding) : messageType === 'error' ? css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
+  return messageType === 'tip' ? css(["background-color:", ";"], inputMessageTokens.message.tip.backgroundColor) : messageType === 'error' ? css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
 }, inputMessageTokens.icon.marginTop);
 var InputMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   var message = props.message,

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

@@ -1,7 +1,7 @@
 import { InputMessageProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
         message: string;
         messageType: import("./InputMessage").InputMessageType;
     } & {

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

@@ -2,7 +2,6 @@ export declare const inputMessageTokens: {
     message: {
         tip: {
             backgroundColor: string;
-            padding: string;
         };
         error: {
             padding: string;

package/dist/components/InputMessage/InputMessage.tokens.js

@@ -4,8 +4,7 @@ var colors = ddsBaseTokens.colors,
     spacing = ddsBaseTokens.spacing;
 var message = {
   tip: {
-    backgroundColor: colors.DdsColorNeutralsWhite,
-    padding: "".concat(spacing.SizesDdsSpacingLocalX025, " 0")
+    backgroundColor: colors.DdsColorNeutralsWhite
   },
   error: {
     padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05),

package/dist/components/InternalHeader/InternalHeader.js

@@ -3,6 +3,13 @@ import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
 import { Typography } from '../Typography/Typography/Typography.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../Typography/Link/Link.js';
 import { Button } from '../Button/Button.js';

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

@@ -1,7 +1,7 @@
 import { ListProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLOListElement | HTMLUListElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLOListElement | HTMLUListElement>, "className" | "id"> & {
         listType?: import("./List").ListType | undefined;
         typographyType?: import("./List").ListTypographyType | undefined;
     } & {

package/dist/components/LocalMessage/LocalMessage.js

@@ -7,6 +7,13 @@ import { forwardRef, useState } from 'react';
 import { localMessageTokens } from './LocalMessage.tokens.js';
 import { Icon } from '../Icon/Icon.js';
 import { Typography } from '../Typography/Typography/Typography.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../Typography/Link/Link.js';
 import '../../icons/utils/StyledSvg.js';

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

@@ -1,7 +1,7 @@
 import { LocalMessageProps } from './LocalMessage';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
         message?: string | undefined;
         purpose?: import("./LocalMessage").LocalMessagePurpose | undefined;
         closable?: boolean | undefined;

package/dist/components/Modal/Modal.js

@@ -13,8 +13,6 @@ import { useMountTransition } from '../../hooks/useMountTransition.js';
 import '../../hooks/useScreenSize.js';
 import { createPortal } from 'react-dom';
 import { Typography } from '../Typography/Typography/Typography.js';
-import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import '../Typography/Link/Link.js';
 import { Backdrop } from '../../helpers/Backdrop/Backdrop.js';
 import { handleElementWithBackdropMount, handleElementWithBackdropUnmount } from '../../helpers/Backdrop/Backdrop.utils.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
@@ -23,6 +21,8 @@ import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import '../Typography/Link/Link.js';
 import '../../icons/utils/StyledSvg.js';
 import { CloseIcon } from '../../icons/tsx/close.js';
 import '../../helpers/styling/focusVisible.js';

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

@@ -1,7 +1,7 @@
 import { ModalProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
         isOpen?: boolean | undefined;
         onClose?: (() => void) | undefined;
         parentElement?: HTMLElement | undefined;

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

@@ -1,7 +1,7 @@
 import { OverflowMenuProps, OverflowMenuContextItem, OverflowMenuNavItem } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
         items?: OverflowMenuContextItem[] | undefined;
         userProps?: ({
             name: string;

package/dist/components/Pagination/Pagination.js

@@ -4,6 +4,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Typography } from '../Typography/Typography/Typography.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../Typography/Link/Link.js';
 import { Button } from '../Button/Button.js';

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

@@ -1,7 +1,7 @@
 import { PaginationProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLElement>, "onChange">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLElement>, "onChange">, "className" | "id"> & {
         itemsAmount: number;
         defaultItemsPerPage?: number | undefined;
         defaultActivePage?: number | undefined;

package/dist/components/Popover/Popover.js

@@ -15,6 +15,13 @@ import '../../hooks/useScreenSize.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Button } from '../Button/Button.js';
 import { Typography } from '../Typography/Typography/Typography.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../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';

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

@@ -2,7 +2,7 @@ import { PopoverProps } from '.';
 import { Placement } from '../../hooks';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
         title?: import("react").ReactNode;
         isOpen?: boolean | undefined;
         withCloseButton?: boolean | undefined;

package/dist/components/RadioButton/RadioButton.js

@@ -2,9 +2,6 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId } from 'react';
 import { Typography } from '../Typography/Typography/Typography.js';
-import { getBaseHTMLProps, joinClassNames } from '../../types/BaseComponentProps.js';
-import '../Typography/Link/Link.js';
-import { useRadioButtonGroup } from './RadioButtonGroupContext.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
@@ -12,6 +9,9 @@ import '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
+import { getBaseHTMLProps, joinClassNames } from '../../types/BaseComponentProps.js';
+import '../Typography/Link/Link.js';
+import { useRadioButtonGroup } from './RadioButtonGroupContext.js';
 import { Container, CustomSelectionControl } from '../../helpers/SelectionControl/SelectionControl.styles.js';
 import '../../helpers/SelectionControl/SelectionControl.tokens.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>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "aria-describedby" | "onChange" | "value" | "checked" | "readOnly" | "required">, "className" | "id"> & {
         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>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "aria-describedby" | "onChange" | "value" | "checked" | "readOnly" | "required"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

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

@@ -1,7 +1,7 @@
 import { RadioButtonGroupProps } from '.';
 declare const _default: {
     title: string;
-    component: <T extends string | number = string>(props: Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange">, "id" | "className"> & {
+    component: <T extends string | number = string>(props: Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
         name?: string | undefined;
         label?: string | undefined;
         onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, value: T | undefined) => void) | undefined;

package/dist/components/Select/Select.js

@@ -2,14 +2,6 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId } from 'react';
 import ReactSelect, { components } from 'react-select';
-import '../../helpers/Backdrop/Backdrop.js';
-import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
-import '../../helpers/HiddenInput/HiddenInput.js';
-import '../../helpers/Input/Input.styles.js';
-import '../../helpers/Input/Input.tokens.js';
-import { getFormInputIconSize } from '../../helpers/Input/Input.utils.js';
-import '../../helpers/Paper/Paper.js';
-import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../../icons/utils/StyledSvg.js';
 import { CheckIcon } from '../../icons/tsx/check.js';
 import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
@@ -22,6 +14,7 @@ import { prefix, getCustomStyles, Container, InnerSingleValue, StyledIcon } from
 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';
 
 var Option = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
@@ -166,7 +159,7 @@ var SelectInner = function SelectInner(props, ref) {
   var singleValueId = !isMulti ? "".concat(uniqueId, "-singleValue") : undefined;
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
-  var showRequiredMarker = required || ariaRequired;
+  var showRequiredStyling = !!(required || ariaRequired);
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
   var containerProps = {
@@ -224,10 +217,11 @@ var SelectInner = function SelectInner(props, ref) {
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
   return jsxs(Container, Object.assign({}, containerProps, {
-    children: [hasLabel && jsxs(Label, Object.assign({
-      htmlFor: uniqueId
+    children: [hasLabel && jsx(Label, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
     }, {
-      children: [label, " ", showRequiredMarker && jsx(RequiredMarker, {})]
+      children: label
     })), jsx(ReactSelect, Object.assign({}, reactSelectProps, {
       ref: ref
     })), errorMessage && jsx(InputMessage, {

package/dist/components/Select/Select.styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { focusVisibleLink } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/focusVisible.js';
 import { hoverDangerInputfield, hoverInputfield } from '../../helpers/styling/hover.js';
 import { focusInputfield } from '../../helpers/styling/focus.js';
 import { dangerInputfield } from '../../helpers/styling/danger.js';
@@ -199,7 +199,10 @@ var getCustomStyles = function getCustomStyles() {
         }
       }), state.isSelected && {
         backgroundColor: _option.selected.backgroundColor
-      }), state.isFocused && focusVisibleLink);
+      }), state.isFocused && {
+        color: _option.focus.color,
+        backgroundColor: _option.focus.backgroundColor
+      });
     },
     noOptionsMessage: function noOptionsMessage() {
       return Object.assign({

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

@@ -144,6 +144,10 @@ export declare const selectTokens: {
             color: string;
             backgroundColor: string;
         };
+        focus: {
+            color: string;
+            backgroundColor: string;
+        };
         selected: {
             lineHeight: any;
             fontSize: string;

package/dist/components/Select/Select.tokens.js

@@ -112,6 +112,10 @@ var option = {
     color: textDefault.textColor,
     backgroundColor: colors.DdsColorInteractiveLightest
   },
+  focus: {
+    color: textDefault.textColor,
+    backgroundColor: colors.DdsColorInteractiveLightest
+  },
   selected: Object.assign({
     backgroundColor: colors.DdsColorNeutralsWhite
   }, fontPackages.body_sans_02.base),

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

@@ -1,7 +1,7 @@
 import { SkipToContentProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLAnchorElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLAnchorElement>, "className" | "id"> & {
         text?: string | undefined;
         href: string;
         top?: import("csstype").Property.Top<string | number> | undefined;

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
         activeStep?: number | undefined;
     } & {
         children?: import("react").ReactNode;

package/dist/components/Tag/Tag.js

@@ -4,6 +4,13 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { tagTokens } from './Tag.tokens.js';
 import { Typography } from '../Typography/Typography/Typography.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../Typography/Link/Link.js';
 

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

@@ -1,7 +1,7 @@
 import { TagProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "className" | "id"> & {
         text?: string | undefined;
         purpose?: import("./Tag").TagPurpose | undefined;
     } & {

package/dist/components/TextInput/CharCounter.js

@@ -4,13 +4,19 @@ import { useId } from 'react';
 import styled from 'styled-components';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography/Typography.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../Typography/Link/Link.js';
-import { charCounterTokens } from './CharCounter.tokens.js';
 
 var Wrapper = styled(Typography).withConfig({
   displayName: "CharCounter__Wrapper",
   componentId: "sc-qty1z2-0"
-})(["margin-left:auto;", ""], charCounterTokens.base);
+})(["margin-left:auto;"]);
 
 function CharCounter(props) {
   var current = props.current,

package/dist/components/TextInput/TextInput.js

@@ -2,6 +2,8 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useEffect, useId } from 'react';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+import CharCounter from './CharCounter.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
@@ -9,9 +11,7 @@ import { OuterInputContainer, InputContainer, StatefulInput } from '../../helper
 import '../../helpers/Input/Input.tokens.js';
 import { getFormInputIconSize } 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 CharCounter from './CharCounter.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { TextArea, StyledIcon, StyledInput, MessageContainer } from './TextInput.styles.js';
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
@@ -119,12 +119,13 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     style: style,
     width: getWidth(componentSize, width)
   };
-  var showRequiredMarker = required || ariaRequired;
+  var showRequiredStyling = !!(required || ariaRequired);
   return jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
-    children: [hasLabel && jsxs(Label, Object.assign({
-      htmlFor: uniqueId
+    children: [hasLabel && jsx(Label, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
     }, {
-      children: [label, showRequiredMarker && jsx(RequiredMarker, {})]
+      children: label
     })), multiline ? jsx(TextArea, Object.assign({
       ref: textAreaRef,
       as: "textarea",

package/dist/components/ToggleBar/ToggleBar.js

@@ -12,6 +12,13 @@ import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { combineHandlers } from '../../utils/combineHandlers.js';
 import '../../utils/color.js';
 import { Typography } from '../Typography/Typography/Typography.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../Typography/Link/Link.js';
 import { ToggleBarContext } from './ToggleBar.context.js';
 import { toggleBarTokens } from './ToggleBar.tokens.js';

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

@@ -1,7 +1,7 @@
 import { ToggleButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "className" | "id"> & {
         label?: string | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
     } & {

package/dist/components/ToggleButton/ToggleButtonGroup.js

@@ -4,6 +4,13 @@ import { useId } from 'react';
 import styled, { css } from 'styled-components';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography/Typography.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../Typography/Link/Link.js';
 import { toggleButtonTokens } from './ToggleButton.tokens.js';
 

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

@@ -1,7 +1,7 @@
 import { TooltipProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "style" | "children" | "onMouseLeave" | "onMouseOver">, "className" | "id"> & {
         text: string;
         placement?: import("../..").Placement | undefined;
         children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & import("react").RefAttributes<HTMLElement>;
@@ -12,7 +12,7 @@ declare const _default: {
         onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
     } & {
-        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver"> | undefined;
+        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "style" | "children" | "onMouseLeave" | "onMouseOver"> | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     argTypes: {
         text: {

package/dist/components/Typography/Caption/Caption.stories.d.ts

@@ -4,7 +4,7 @@ declare type StoryTProps = {
 } & CaptionProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLTableCaptionElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLTableCaptionElement>, "className" | "id"> & {
         withMargins?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;

package/dist/components/Typography/Heading/Heading.stories.d.ts

@@ -4,7 +4,7 @@ declare type StoryTProps = {
 } & HeadingProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHeadingElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHeadingElement>, "className" | "id"> & {
         level: import("./Heading").HeadingLevel;
         typographyType?: import("..").TypographyHeadingType | undefined;
     } & {

package/dist/components/Typography/Label/Label.d.ts

@@ -2,8 +2,12 @@ import { LabelHTMLAttributes } from 'react';
 import { BaseComponentPropsWithChildren } from '../../../types';
 import { BaseTypographyProps } from '../Typography';
 declare type PickedHTMLAttributes = Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
-export declare type LabelProps = BaseComponentPropsWithChildren<HTMLLabelElement, BaseTypographyProps & PickedHTMLAttributes, Omit<LabelHTMLAttributes<HTMLLabelElement>, keyof PickedHTMLAttributes>>;
-export declare const Label: import("react").ForwardRefExoticComponent<Pick<Omit<LabelHTMLAttributes<HTMLLabelElement>, "htmlFor">, "className" | "id"> & {
+declare type BaseLabelProps = {
+    /** Spesifiserer om input etiketten er knyttet til er påkrevd; påvirker styling. */
+    showRequiredStyling?: boolean;
+};
+export declare type LabelProps = BaseComponentPropsWithChildren<HTMLLabelElement, BaseLabelProps & BaseTypographyProps & PickedHTMLAttributes, Omit<LabelHTMLAttributes<HTMLLabelElement>, keyof PickedHTMLAttributes>>;
+export declare const Label: import("react").ForwardRefExoticComponent<Pick<Omit<LabelHTMLAttributes<HTMLLabelElement>, "htmlFor">, "className" | "id"> & BaseLabelProps & {
     withMargins?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;

package/dist/components/Typography/Label/Label.js

@@ -1,21 +1,29 @@
 import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import '../../../helpers/Backdrop/Backdrop.js';
+import '../../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../../helpers/HiddenInput/HiddenInput.js';
+import '../../../helpers/Input/Input.styles.js';
+import '../../../helpers/Input/Input.tokens.js';
+import '../../../helpers/Paper/Paper.js';
+import { RequiredMarker } from '../../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography.js';
 
 var Label = /*#__PURE__*/forwardRef(function (props, ref) {
-  var id = props.id,
+  var showRequiredStyling = props.showRequiredStyling,
+      id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
       children = props.children,
-      rest = __rest(props, ["id", "className", "htmlProps", "children"]);
+      rest = __rest(props, ["showRequiredStyling", "id", "className", "htmlProps", "children"]);
 
-  return jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+  return jsxs(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
     ref: ref,
     typographyType: "supportingStyleLabel01"
   }, {
-    children: children
+    children: [children, " ", showRequiredStyling && jsx(RequiredMarker, {})]
   }));
 });
 

package/dist/components/Typography/Label/Label.stories.d.ts

@@ -4,7 +4,9 @@ declare type StoryTProps = {
 } & LabelProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").LabelHTMLAttributes<HTMLLabelElement>, "htmlFor">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").LabelHTMLAttributes<HTMLLabelElement>, "htmlFor">, "className" | "id"> & {
+        showRequiredStyling?: boolean | undefined;
+    } & {
         withMargins?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;

package/dist/components/Typography/Legend/Legend.stories.d.ts

@@ -4,7 +4,7 @@ declare type StoryTProps = {
 } & LegendProps;
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLLegendElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLLegendElement>, "className" | "id"> & {
         withMargins?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;