@norges-domstoler/dds-components 5.4.1 → 6.0.0

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

@@ -10,10 +10,10 @@ import { HTMLAttributes, PropsWithChildren } from 'react';
  * @template TOtherProps Andre props komponenten skal eksponere til konsumenter.
  * @template THTMLAttributesProps Standard `HTMLAttributes<T>` men kan overstyres for f.eks knapper hvis man trenger en annen basetype for `htmlProps`.
  */
-export declare type BaseComponentProps<TElement extends Element, TOtherProps extends Record<string, unknown> = Record<string, unknown>, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = {
+export declare type BaseComponentProps<TElement extends Element, TOtherProps extends Record<string, unknown> = Record<string, unknown>, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = Pick<THTMLAttributesProps, 'id' | 'className'> & TOtherProps & {
     /**Ekstra HTML-attributter som vil settes på elementet som genereres. Untatt `id` og `className` som settes på toppnivå. */
     htmlProps?: THTMLAttributesProps;
-} & Pick<THTMLAttributesProps, 'id' | 'className'> & TOtherProps;
+};
 /**
  * Utvidelese av {@link BaseComponentProps} med prop for `children`.
  *

package/dist/cjs/utils/color.d.ts

@@ -1,6 +1,30 @@
+import { Property } from 'csstype';
 export declare type ColorAlphaFormat = 'hex8' | 'decimal';
 export declare const convertAlpha: (value: number | string, typeFrom: ColorAlphaFormat, typeTo: ColorAlphaFormat) => string | number | undefined;
 export declare const hexToRGBA: (hex: string) => string;
 export declare const addAlphaToRGB: (rgb: string, alpha: number | string) => string;
 export declare const RGBToHex: (value: string) => string;
 export declare const changeRGBAAlpha: (value: string, alpha: number) => string;
+export declare const textColors: {
+    interactive: string;
+    primary: string;
+    danger: string;
+    success: string;
+    warning: string;
+    onLight: string;
+    onDark: string;
+    gray1: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+    gray8: string;
+    gray9: string;
+};
+export declare type DDSTextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
+export declare const textColorsArray: string[];
+export declare type TextColor = DDSTextColor | Property.Color;
+export declare function isTextColor(color: string): color is DDSTextColor;
+export declare const getTextColor: (color: TextColor) => string;

package/dist/components/Breadcrumbs/Breadcrumb.js

@@ -1,7 +1,8 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/Typography/Typography.js';
+import '../Typography/Link/Link.js';
 
 var isAnchorTypographyProps = function isAnchorTypographyProps(props) {
   return props.href != undefined;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -3,11 +3,11 @@ export declare type BreadcrumbsProps = BaseComponentPropsWithChildren<HTMLElemen
     /** Spesifiserer om versjonen for små skjermer skal vises; den viser `<Breadcrumb />` kun til den forrige siden.  */
     smallScreen?: boolean;
 }>;
-export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<{
-    htmlProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
-} & Pick<import("react").HTMLAttributes<HTMLElement>, "className" | "id"> & {
+export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLElement>, "className" | "id"> & {
     /** Spesifiserer om versjonen for små skjermer skal vises; den viser `<Breadcrumb />` kun til den forrige siden.  */
     smallScreen?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -3,11 +3,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, Children } from 'react';
 import styled from 'styled-components';
 import { breadcrumbTokens } from './Breadcrumb.tokens.js';
-import { removeListStyling } from '../../helpers/styling/removeListStyling.js';
+import { Icon } from '../Icon/Icon.js';
+import '../../icons/utils/StyledSvg.js';
 import { ArrowLeftIcon } from '../../icons/tsx/arrowLeft.js';
 import { ChevronRightIcon } from '../../icons/tsx/chevronRight.js';
-import { Icon } from '../Icon/Icon.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { removeListStyling } from '../../helpers/styling/removeListStyling.js';
 
 var icon = breadcrumbTokens.icon,
     list = breadcrumbTokens.list,

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

@@ -1,12 +1,12 @@
 import { BreadcrumbsProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
-    } & Pick<import("react").HTMLAttributes<HTMLElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLElement>, "id" | "className"> & {
         smallScreen?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;
+    } & {
+        htmlProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     } & import("react").RefAttributes<HTMLElement>>;
     argTypes: {
         smallScreen: {

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

@@ -1,6 +1,4 @@
-export declare const Button: import("react").ForwardRefExoticComponent<{
-    htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onFocus" | "onBlur" | "type"> | undefined;
-} & Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onFocus" | "onBlur" | "type">, "id" | "className"> & {
+export declare const Button: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onFocus" | "onBlur" | "type">, "id" | "className"> & {
     size?: import("./Button.types").ButtonSize | undefined;
     label?: string | undefined;
     purpose?: import("./Button.types").ButtonPurpose | undefined;
@@ -16,4 +14,6 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
     onFocus?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
     onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
     type?: "button" | "submit" | "reset" | undefined;
+} & {
+    htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onFocus" | "onBlur" | "type"> | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -2,10 +2,10 @@ import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { buttonTokens } from './Button.tokens.js';
-import { StyledIconWrapperSpan, ButtonWrapper, Label } from './Button.styles.js';
+import { Icon } from '../Icon/Icon.js';
 import { Spinner } from '../Spinner/Spinner.js';
+import { StyledIconWrapperSpan, ButtonWrapper, Label } from './Button.styles.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { Icon } from '../Icon/Icon.js';
 
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,

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

@@ -1,9 +1,7 @@
 import { ButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type"> | undefined;
-    } & Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type">, "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;
@@ -19,6 +17,8 @@ declare const _default: {
         onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
         onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
         type?: "button" | "submit" | "reset" | undefined;
+    } & {
+        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type"> | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;
     argTypes: {
         label: {

package/dist/components/Button/Button.styles.js

@@ -1,7 +1,10 @@
 import styled, { css } from 'styled-components';
-import { typographyTokens } from '../Typography/Typography.tokens.js';
-import { buttonTokens } from './Button.tokens.js';
 import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import { selection } from '../../helpers/styling/selection.js';
+import { buttonTokens } from './Button.tokens.js';
 
 var ButtonWrapper = styled.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
@@ -30,7 +33,7 @@ var ButtonWrapper = styled.button.withConfig({
       isLoading = _ref5.isLoading,
       iconPosition = _ref5.iconPosition;
   return fullWidth && (!hasIcon || !hasLabel || isLoading ? css(["justify-content:center;"]) : hasIcon && hasLabel && iconPosition === 'left' ? css(["justify-content:left;"]) : css(["justify-content:space-between;"]));
-}, buttonTokens.focus.base, typographyTokens.selection.base);
+}, buttonTokens.focus.base, selection);
 var StyledIconWrapperSpan = styled.span.withConfig({
   displayName: "Buttonstyles__StyledIconWrapperSpan",
   componentId: "sc-14dutqk-1"

package/dist/components/Button/Button.tokens.js

@@ -1,6 +1,12 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 import { calculateHeightWithLineHeight } from '../../utils/text.js';
+import '../../utils/color.js';
+import 'styled-components';
 import { focusVisible } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import '../../helpers/styling/selection.js';
 
 var Colors = ddsBaseTokens.colors,
     Border = ddsBaseTokens.border,

package/dist/components/Card/Card.js

@@ -2,13 +2,17 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
 import { cardTokens } from './Card.tokens.js';
-import { typographyTokens } from '../Typography/Typography.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import { selection } from '../../helpers/styling/selection.js';
 
 var Container = styled.div.withConfig({
   displayName: "Card__Container",
   componentId: "sc-410ao9-0"
-})(["", " &::selection,*::selection{", "}@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s;}", " ", ""], cardTokens.base, typographyTokens.selection.base, function (_ref) {
+})(["", " &::selection,*::selection{", "}@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s;}", " ", ""], cardTokens.base, selection, function (_ref) {
   var color = _ref.color;
   return color && css(["", ""], cardTokens.colors[color].base);
 }, function (_ref2) {

package/dist/components/Card/Card.tokens.js

@@ -1,6 +1,10 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
-import { hoverWithBorder } from '../../helpers/styling/hover.js';
+import 'styled-components';
 import { focusVisibleWithBorder } from '../../helpers/styling/focusVisible.js';
+import { hoverWithBorder } from '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import '../../helpers/styling/selection.js';
 
 var Colors = ddsBaseTokens.colors,
     Border = ddsBaseTokens.border,

package/dist/components/Card/CardAccordion/CardAccordion.d.ts

@@ -3,11 +3,11 @@ export declare type CardAccordionProps = BaseComponentPropsWithChildren<HTMLDivE
     /**Spesifiserer om body skal være utvidet ved innlastning. */
     isExpanded?: boolean;
 }>;
-export declare const CardAccordion: import("react").ForwardRefExoticComponent<{
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+export declare const CardAccordion: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
     /**Spesifiserer om body skal være utvidet ved innlastning. */
     isExpanded?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Card/CardAccordion/CardAccordionBody.d.ts

@@ -8,9 +8,7 @@ export declare type CardAccordionBodyProps = BaseComponentPropsWithChildren<HTML
     /**Overskriver default padding på toppen. Brukes når barn har spacing på toppen, f.eks. en overskrift. */
     paddingTop?: Property.PaddingTop<string>;
 }>;
-export declare const CardAccordionBody: import("react").ForwardRefExoticComponent<{
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+export declare const CardAccordionBody: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller komponenten om den skal utvides.  */
     isExpanded?: boolean | undefined;
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller `id` til `<CardAccordionHeader />`.  */
@@ -19,4 +17,6 @@ export declare const CardAccordionBody: import("react").ForwardRefExoticComponen
     paddingTop?: Property.PaddingTop<string> | undefined;
 } & {
     children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Card/CardAccordion/CardAccordionHeader.d.ts

@@ -8,9 +8,7 @@ export declare type CardAccordionHeaderProps = BaseComponentPropsWithChildren<HT
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller `id` til `<CardAccordionBody />`.  */
     bodyId?: string;
 }, ButtonHTMLAttributes<HTMLButtonElement>>;
-export declare const CardAccordionHeader: import("react").ForwardRefExoticComponent<{
-    htmlProps?: ButtonHTMLAttributes<HTMLButtonElement> | undefined;
-} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "id"> & {
+export declare const CardAccordionHeader: import("react").ForwardRefExoticComponent<Pick<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "id"> & {
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller body er utvidet.  */
     isExpanded?: boolean | undefined;
     /** **OBS!** denne propen blir satt automatisk av forelder. Callback for å styre utvidelse og sammentrukking.  */
@@ -19,4 +17,6 @@ export declare const CardAccordionHeader: import("react").ForwardRefExoticCompon
     bodyId?: string | undefined;
 } & {
     children?: import("react").ReactNode;
+} & {
+    htmlProps?: ButtonHTMLAttributes<HTMLButtonElement> | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -3,8 +3,19 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { cardAccordionHeaderTokens } from './CardAccordionHeader.tokens.js';
+import '../../../helpers/Backdrop/Backdrop.js';
 import { AnimatedChevronUpDown } from '../../../helpers/Chevron/AnimatedChevronUpDown.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 { removeButtonStyling } from '../../../helpers/styling/removeButtonStyling.js';
+import '../../../helpers/styling/focusVisible.js';
+import '../../../helpers/styling/hover.js';
+import '../../../helpers/styling/focus.js';
+import '../../../helpers/styling/danger.js';
+import '../../../helpers/styling/selection.js';
 import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
 
 var ContentWrapper = styled.div.withConfig({

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

@@ -1,6 +1,4 @@
-export declare const Checkbox: import("react").ForwardRefExoticComponent<{
-    htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur"> | undefined;
-} & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur">, "id" | "className"> & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur">, "id" | "className"> & {
     label?: string | undefined;
     error?: boolean | undefined;
     disabled?: boolean | undefined;
@@ -15,4 +13,6 @@ export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     defaultValue?: string | number | readonly string[] | undefined;
     onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
     onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+} & {
+    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

@@ -1,12 +1,20 @@
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId } from 'react';
+import { Typography } from '../Typography/Typography/Typography.js';
+import { joinClassNames, getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import '../Typography/Link/Link.js';
 import { Container, CustomCheckbox } from './Checkbox.styles.js';
 import { useCheckboxGroup } from './CheckboxGroupContext.js';
 import { spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
-import { joinClassNames, getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import '../../utils/color.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
-import { Typography } from '../Typography/Typography.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 
 var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   var id = props.id,

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

@@ -1,9 +1,7 @@
 import { CheckboxProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
-    } & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "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;
@@ -18,6 +16,8 @@ declare const _default: {
         name?: string | undefined;
         value?: string | number | readonly string[] | undefined;
         checked?: boolean | undefined;
+    } & {
+        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.styles.js

@@ -1,6 +1,10 @@
 import styled, { css } from 'styled-components';
-import { checkboxTokens } from './Checkbox.tokens.js';
 import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import '../../helpers/styling/selection.js';
+import { checkboxTokens } from './Checkbox.tokens.js';
 
 var CustomCheckbox = styled.span.withConfig({
   displayName: "Checkboxstyles__CustomCheckbox",

package/dist/components/Checkbox/Checkbox.tokens.js

@@ -1,7 +1,10 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import 'styled-components';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
 import { hoverInputfield, hoverDangerInputfield } from '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
 import { dangerInputfield } from '../../helpers/styling/danger.js';
-import { focusVisible } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/selection.js';
 
 var Colors = ddsBaseTokens.colors,
     Spacing = ddsBaseTokens.spacing,

package/dist/components/Checkbox/CheckboxGroup.js

@@ -2,13 +2,21 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import styled, { css } from 'styled-components';
+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 { InputMessage } from '../InputMessage/InputMessage.js';
 import { checkboxGroupTokens } from './CheckboxGroup.tokens.js';
 import { CheckboxGroupContext } from './CheckboxGroupContext.js';
-import { derivativeIdGenerator } from '../../utils/idGenerator.js';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/Typography/Typography.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
-import { InputMessage } from '../InputMessage/InputMessage.js';
+import '../Typography/Link/Link.js';
+import { derivativeIdGenerator } from '../../utils/idGenerator.js';
+import '../../utils/color.js';
 
 var Container = styled.div.withConfig({
   displayName: "CheckboxGroup__Container",

package/dist/components/Chip/Chip.d.ts

@@ -5,11 +5,11 @@ export declare type ChipProps = BaseComponentProps<HTMLDivElement, {
     /** Ekstra logikk når `<Chip />` lukkes. */
     onClose?: () => void;
 }>;
-export declare const Chip: import("react").ForwardRefExoticComponent<{
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+export declare const Chip: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
     /** Teksten som vises i komponenten. */
     text?: string | undefined;
     /** Ekstra logikk når `<Chip />` lukkes. */
     onClose?: (() => void) | undefined;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Chip/Chip.js

@@ -3,9 +3,10 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import styled from 'styled-components';
+import { Button } from '../Button/Button.js';
 import { chipTokens } from './Chip.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { Button } from '../Button/Button.js';
+import '../../icons/utils/StyledSvg.js';
 import { CloseIcon } from '../../icons/tsx/close.js';
 
 var Container = styled.div.withConfig({

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

@@ -1,11 +1,11 @@
 import { ChipProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-    } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         text?: string | undefined;
         onClose?: (() => void) | undefined;
+    } & {
+        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     argTypes: {
         text: {

package/dist/components/Datepicker/Datepicker.d.ts

@@ -1,9 +1,9 @@
 import { InputProps } from '../../helpers';
 declare type DatepickerType = 'date' | 'datetime-local';
-export declare type DatepickerProps = Modify<InputProps, {
+export declare type DatepickerProps = Omit<InputProps, 'type'> & {
     /** Angi dato-input med eller uten klokkeslett. */
     type?: DatepickerType;
-}>;
+};
 export declare const Datepicker: import("react").ForwardRefExoticComponent<Omit<InputProps, "type"> & {
     /** Angi dato-input med eller uten klokkeslett. */
     type?: DatepickerType | undefined;

package/dist/components/Datepicker/Datepicker.js

@@ -1,19 +1,29 @@
 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, InputContainer, Label } from '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import styled from 'styled-components';
-import { typographyTokens } from '../Typography/Typography.tokens.js';
+import { spaceSeparatedIdListGenerator, derivativeIdGenerator } from '../../utils/idGenerator.js';
+import '../../utils/color.js';
 import CalendarIcon from '../../assets/svg/calendar_today.svg.js';
 import { datepickerTokens } from './Datepicker.tokens.js';
-import { StatefulInput, OuterInputContainer, InputContainer, Label } from '../../helpers/Input/Input.styles.js';
-import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
-import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
-import { InputMessage } from '../InputMessage/InputMessage.js';
+import '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import { selection } from '../../helpers/styling/selection.js';
 
 var StyledInput = styled(StatefulInput).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
-})(["&::-webkit-calendar-picker-indicator{background-image:", ";", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}&::-webkit-datetime-edit-fields-wrapper{padding:0;}&::-webkit-calendar-picker-indicator:focus-visible{", "}&::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}&::-webkit-datetime-edit-day-field:focus,&::-webkit-datetime-edit-month-field:focus,&::-webkit-datetime-edit-year-field:focus,&::-webkit-datetime-edit-hour-field:focus,&::-webkit-datetime-edit-minute-field:focus{", "}"], "url(\"".concat(CalendarIcon, "\")"), datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
+})(["&::-webkit-calendar-picker-indicator{background-image:", ";", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}&::-webkit-datetime-edit-fields-wrapper{padding:0;}&::-webkit-calendar-picker-indicator:focus-visible{", "}&::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}&::-webkit-datetime-edit-day-field:focus,&::-webkit-datetime-edit-month-field:focus,&::-webkit-datetime-edit-year-field:focus,&::-webkit-datetime-edit-hour-field:focus,&::-webkit-datetime-edit-minute-field:focus{", "}"], "url(\"".concat(CalendarIcon, "\")"), datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, selection);
 var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var id = _a.id,
       _a$type = _a.type,

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -4,11 +4,11 @@ export declare type DescriptionListProps = BaseComponentPropsWithChildren<HTMLDL
     /**Påvirker tekst styling. */
     appearance?: DescriptionListAppearance;
 }>;
-export declare const DescriptionList: import("react").ForwardRefExoticComponent<{
-    htmlProps?: import("react").HTMLAttributes<HTMLDListElement> | undefined;
-} & Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
     /**Påvirker tekst styling. */
     appearance?: DescriptionListAppearance | undefined;
 } & {
     children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDListElement> | undefined;
 } & import("react").RefAttributes<HTMLDListElement>>;

package/dist/components/DescriptionList/DescriptionList.js

@@ -2,9 +2,13 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { typographyTokens } from '../Typography/Typography.tokens.js';
-import { descriptionListTokens } from './DescriptionList.tokens.js';
+import '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import { selection } from '../../helpers/styling/selection.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { descriptionListTokens } from './DescriptionList.tokens.js';
 
 var term = descriptionListTokens.term,
     desc = descriptionListTokens.desc,
@@ -12,7 +16,7 @@ var term = descriptionListTokens.term,
 var DList = styled.dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
-})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], typographyTokens.selection.base, function (_ref) {
+})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
   var appearance = _ref.appearance;
   return appearance && css(["dt{", " color:", ";line-height:", ";font-size:", ";letter-spacing:", ";font-family:", ";font-weight:", ";font-style:", ";}"], term.appearance[appearance].font, term.appearance[appearance].color, term.appearance[appearance].lineHeight, term.appearance[appearance].fontSize, term.appearance[appearance].letterSpacing, term.appearance[appearance].fontFamily, term.appearance[appearance].fontWeight, term.appearance[appearance].fontStyle);
 }, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);

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

@@ -1,12 +1,12 @@
 import { DescriptionListProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: import("react").HTMLAttributes<HTMLDListElement> | undefined;
-    } & Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
         appearance?: import("./DescriptionList").DescriptionListAppearance | undefined;
     } & {
         children?: import("react").ReactNode;
+    } & {
+        htmlProps?: import("react").HTMLAttributes<HTMLDListElement> | undefined;
     } & import("react").RefAttributes<HTMLDListElement>>;
 };
 export default _default;

package/dist/components/DescriptionList/DescriptionListDesc.d.ts

@@ -4,11 +4,11 @@ export declare type DescriptionListDescProps = BaseComponentPropsWithChildren<HT
     /**Ikon som vises ved siden av teksten. */
     icon?: SvgIcon;
 }>;
-export declare const DescriptionListDesc: import("react").ForwardRefExoticComponent<{
-    htmlProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
-} & Pick<import("react").HTMLAttributes<HTMLElement>, "className" | "id"> & {
+export declare const DescriptionListDesc: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLElement>, "className" | "id"> & {
     /**Ikon som vises ved siden av teksten. */
     icon?: SvgIcon | undefined;
 } & {
     children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/components/DescriptionList/DescriptionListDesc.js

@@ -3,8 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { descriptionListTokens } from './DescriptionList.tokens.js';
-import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Icon } from '../Icon/Icon.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
 var DListDesc = styled.dd.withConfig({
   displayName: "DescriptionListDesc__DListDesc",