@norges-domstoler/dds-components 0.0.0-dev-20260717081939 → 0.0.0-dev-20260720114143

package/dist/index.mjs

@@ -480,9 +480,6 @@ const combineHandlers = (handler1, handler2) => {
 function cn(...classNames) {
 	return classNames.filter(Boolean).join(" ") || void 0;
 }
-function convertCamelToHyphen(value) {
-	return value.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([a-z])([0-9])/g, "$1-$2").toLowerCase();
-}
 /**
 * Returnener verdien hvis den er truthy.
 * Ellers returnerer `undefined`.
@@ -4026,6 +4023,78 @@ const Accordion = ({ isInitiallyExpanded = false, isExpanded, onChange, id, chil
 };
 Accordion.displayName = "Accordion";
 //#endregion
+//#region src/components/Accordion/AccordionHeader.tsx
+const AccordionHeader = ({ children, className, style, htmlProps, typographyType = "heading-medium", bold, ...rest }) => {
+	const { isExpanded, headerProps } = useAccordionContext();
+	const { id, ...restHeaderProps } = headerProps ?? {};
+	const iconState = isExpanded ? "up" : "down";
+	return /* @__PURE__ */ jsx(Box, {
+		as: StylelessButton,
+		padding: "x1 x1.5 x1 x1",
+		...getBaseHTMLProps(id, cn(className, Accordion_module_default["header-button"], AccordionBase_module_default["header-button"], _key1), style, htmlProps, rest),
+		...restHeaderProps,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn(AccordionBase_module_default.header__content, typographyStyles_module_default[typographyType], bold && typographyStyles_module_default.bold),
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: AnimatedChevronUpDownIcon,
+				iconSize: "component",
+				className: Accordion_module_default.chevron,
+				iconState
+			}), children]
+		})
+	});
+};
+AccordionHeader.displayName = "AccordionHeader";
+//#endregion
+//#region src/components/Accordion/AccordionBody.tsx
+const AccordionBody = ({ children, className, style, htmlProps, ...rest }) => {
+	const { bodyContentRef, bodyProps } = useAccordionContext();
+	const { className: bodyContextCn, id, height, ...restBodyProps } = bodyProps ?? {};
+	return /* @__PURE__ */ jsx(Box, {
+		height: `${height}px`,
+		...getBaseHTMLProps(id, cn(className, bodyContextCn), style, htmlProps, rest),
+		...restBodyProps,
+		children: /* @__PURE__ */ jsx(Box, {
+			ref: bodyContentRef,
+			padding: "x0.5 x1.5 x2 x1",
+			children
+		})
+	});
+};
+AccordionBody.displayName = "AccordionBody";
+//#endregion
+//#region src/components/BackLink/BackLink.module.css
+var BackLink_module_default = { "icon": "dds-BackLink-module__icon" };
+//#endregion
+//#region src/components/BackLink/BackLink.tsx
+const BackLink = ({ label, ref, as = "a", ...rest }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		"aria-label": t(texts$29.goBack),
+		className: typographyStyles_module_default["body-short-medium"],
+		children: /* @__PURE__ */ jsxs(HStack, {
+			as,
+			className: cn(typographyStyles_module_default.a, _key1),
+			rel: "noopener noreferer",
+			...rest,
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: ArrowLeftIcon,
+				iconSize: "component",
+				className: cn(BackLink_module_default.icon)
+			}), label]
+		})
+	});
+};
+BackLink.displayName = "BackLink";
+const texts$29 = createTexts({ goBack: {
+	nb: "Gå tilbake",
+	no: "Gå tilbake",
+	nn: "Gå tilbake",
+	en: "Go back",
+	se: "Mana ruovttoluotta"
+} });
+//#endregion
 //#region src/components/Typography/Typography/TextOverflowEllipsis/TextOverflowEllipsis.module.css
 var TextOverflowEllipsis_module_default = {
 	"wrapper": "dds-TextOverflowEllipsis-module__wrapper",
@@ -4050,28 +4119,42 @@ function TextOverflowEllipsisInner({ className, ...rest }) {
 var Typography_module_default = { "container": "dds-Typography-module__container" };
 //#endregion
 //#region src/components/Typography/Typography/Typography.types.ts
+const TG_BODY_SHORT_TYPES = [
+	"body-short-xsmall",
+	"body-short-small",
+	"body-short-medium",
+	"body-short-large"
+];
+const TG_BODY_LONG_TYPES = [
+	"body-long-xsmall",
+	"body-long-small",
+	"body-long-medium",
+	"body-long-large"
+];
+const TG_BODY_TYPES = [...TG_BODY_SHORT_TYPES, ...TG_BODY_LONG_TYPES];
+const TG_LEAD_TYPES = ["lead-medium"];
 const TG_HEADING_TYPES = [
-	"headingXxsmall",
-	"headingXsmall",
-	"headingSmall",
-	"headingMedium",
-	"headingLarge",
-	"headingXlarge",
-	"headingXxlarge"
+	"heading-xxsmall",
+	"heading-xsmall",
+	"heading-small",
+	"heading-medium",
+	"heading-large",
+	"heading-xlarge",
+	"heading-xxlarge"
 ];
 //#endregion
 //#region src/components/Typography/Typography/Typography.utils.ts
 const getElementType = (element) => {
 	switch (element) {
 		case "a": return "a";
-		case "headingXxsmall": return "h6";
-		case "headingXsmall": return "h5";
-		case "headingSmall": return "h4";
-		case "headingMedium": return "h3";
-		case "headingLarge": return "h2";
-		case "headingXlarge":
-		case "headingXxlarge": return "h1";
-		case "labelMedium": return "label";
+		case "heading-xxsmall": return "h6";
+		case "heading-xsmall": return "h5";
+		case "heading-small": return "h4";
+		case "heading-medium": return "h3";
+		case "heading-large": return "h2";
+		case "heading-xlarge":
+		case "heading-xxlarge": return "h1";
+		case "label-medium": return "label";
 		default: return "p";
 	}
 };
@@ -4140,9 +4223,6 @@ const inlineElements = [
 	"wbr"
 ];
 const isInlineElement = (as) => inlineElements.indexOf(as) !== -1;
-function getTypographyCn(value) {
-	return convertCamelToHyphen(value);
-}
 const getColorCn = (color) => {
 	if (!isTextColor(color)) return null;
 	const [prefix] = color.split("-", 1);
@@ -4152,13 +4232,12 @@ const getColorCn = (color) => {
 //#region src/components/Typography/Typography/Typography.tsx
 const isAnchorProps = (props) => props.typographyType === "a";
 const Typography = (props) => {
-	const { typographyType = "bodyLongMedium", as: propAs, children, bold, underline, italic, style, id, withMargins, color, className, htmlProps = {}, ...rest } = props;
+	const { typographyType = "body-long-medium", as: propAs, children, bold, underline, italic, style, id, withMargins, color, className, htmlProps = {}, ...rest } = props;
 	const as = propAs ? propAs : getElementType(typographyType);
-	const typographyCn = getTypographyCn(typographyType);
 	let relProp;
 	if (isAnchorProps(props)) relProp = as === "a" ? "noopener noreferer" : void 0;
 	return /* @__PURE__ */ jsx(Box, {
-		...getBaseHTMLProps(id, cn(className, getColorCn(color), Typography_module_default.container, typographyStyles_module_default[typographyCn], withMargins && typographyStyles_module_default[`${typographyCn}--margins`], isLegend(as) && typographyStyles_module_default.legend, isCaption(as) && typographyStyles_module_default.caption, isCaption(as) && withMargins && typographyStyles_module_default["caption--withMargins"], bold && typographyStyles_module_default.bold, underline && typographyStyles_module_default.underline, italic && typographyStyles_module_default.italic, as === "a" && "dds-focus-module__focusable"), {
+		...getBaseHTMLProps(id, cn(className, getColorCn(color), Typography_module_default.container, typographyStyles_module_default[typographyType], withMargins && typographyStyles_module_default[`${typographyType}--margins`], isLegend(as) && typographyStyles_module_default.legend, isCaption(as) && typographyStyles_module_default.caption, isCaption(as) && withMargins && typographyStyles_module_default["caption--withMargins"], bold && typographyStyles_module_default.bold, underline && typographyStyles_module_default.underline, italic && typographyStyles_module_default.italic, as === "a" && "dds-focus-module__focusable"), {
 			...style,
 			color: color && !isTextColor(color) ? getTextColor(color) : void 0
 		}, htmlProps, rest),
@@ -4173,7 +4252,7 @@ Typography.displayName = "Typography";
 const Caption = ({ id, className, style, htmlProps, children, ...rest }) => {
 	return /* @__PURE__ */ jsx(Typography, {
 		...getBaseHTMLProps(id, className, style, htmlProps, rest),
-		typographyType: "headingLarge",
+		typographyType: "heading-large",
 		as: "caption",
 		children
 	});
@@ -4184,13 +4263,13 @@ Caption.displayName = "Caption";
 const getHeadingElement = (level) => `h${level}`;
 const getDefaultTypographyType = (h) => {
 	switch (h) {
-		case "h1": return "headingXlarge";
-		case "h2": return "headingLarge";
-		case "h3": return "headingMedium";
-		case "h4": return "headingSmall";
-		case "h5": return "headingXsmall";
-		case "h6": return "headingXxsmall";
-		default: return "headingXlarge";
+		case "h1": return "heading-xlarge";
+		case "h2": return "heading-large";
+		case "h3": return "heading-medium";
+		case "h4": return "heading-small";
+		case "h5": return "heading-xsmall";
+		case "h6": return "heading-xxsmall";
+		default: return "heading-xlarge";
 	}
 };
 const Heading = ({ id, className, style, htmlProps, children, typographyType, level, withMargins, withMarginsOverInput, ...rest }) => {
@@ -4225,25 +4304,25 @@ const Label = ({ showRequiredStyling, readOnly, id, className, style, htmlProps,
 	] });
 	const labelProps = { ...getBaseHTMLProps(id, cn(className, readOnly && Label_module_default["read-only"]), style, htmlProps, rest) };
 	return afterLabelContent ? /* @__PURE__ */ jsxs(Typography, {
-		typographyType: "labelMedium",
+		typographyType: "label-medium",
 		as: "div",
 		withMargins: rest.withMargins,
 		children: [/* @__PURE__ */ jsx(Typography, {
 			...labelProps,
-			typographyType: "labelMedium",
+			typographyType: "label-medium",
 			withMargins: false,
 			children: content
 		}), afterLabelContent]
 	}) : /* @__PURE__ */ jsx(Typography, {
 		...labelProps,
-		typographyType: "labelMedium",
+		typographyType: "label-medium",
 		children: content
 	});
 };
 Label.displayName = "Label";
 //#endregion
 //#region src/components/Typography/Legend/Legend.tsx
-const Legend = ({ id, className, style, htmlProps, typographyType = "headingLarge", withMarginsOverInput, withMargins, ...rest }) => {
+const Legend = ({ id, className, style, htmlProps, typographyType = "heading-large", withMarginsOverInput, withMargins, ...rest }) => {
 	return /* @__PURE__ */ jsx(Typography, {
 		...getBaseHTMLProps(id, cn(className, withMarginsOverInput && typographyStyles_module_default["legend--margins-over-input"]), style, htmlProps, rest),
 		as: "legend",
@@ -4259,7 +4338,7 @@ const Link = ({ id, className, htmlProps, children, typographyType, withMargins,
 	const aProps = as === "a" || propIsAnchor ? { rel: "noopener noreferrer" } : {};
 	return /* @__PURE__ */ jsx(ElementAs, {
 		as,
-		...getBaseHTMLProps(id, cn(className, typographyStyles_module_default.a, withIconStyling && typographyStyles_module_default["a--with-icon"], withVisited && typographyStyles_module_default["a--visited"], typographyType && typographyStyles_module_default[getTypographyCn(typographyType)], typographyType && withMargins && typographyStyles_module_default[`${getTypographyCn(typographyType)}--margins`], _key1, getColorCn(color)), {
+		...getBaseHTMLProps(id, cn(className, typographyStyles_module_default.a, withIconStyling && typographyStyles_module_default["a--with-icon"], withVisited && typographyStyles_module_default["a--visited"], typographyType && typographyStyles_module_default[typographyType], typographyType && withMargins && typographyStyles_module_default[`${typographyType}--margins`], _key1, getColorCn(color)), {
 			...style,
 			color: color && !isTextColor(color) ? getTextColor(color) : void 0
 		}, htmlProps, rest),
@@ -4268,9 +4347,8 @@ const Link = ({ id, className, htmlProps, children, typographyType, withMargins,
 	});
 };
 Link.displayName = "Link";
-//#endregion
-//#region src/components/Typography/Paragraph/Paragraph.tsx
-const Paragraph = ({ id, className, style, htmlProps, children, typographyType = "bodyLongMedium", ...rest }) => {
+[...TG_BODY_TYPES, ...TG_LEAD_TYPES];
+const Paragraph = ({ id, className, style, htmlProps, children, typographyType = "body-long-medium", ...rest }) => {
 	return /* @__PURE__ */ jsx(Typography, {
 		...getBaseHTMLProps(id, className, style, htmlProps, rest),
 		typographyType,
@@ -4279,78 +4357,6 @@ const Paragraph = ({ id, className, style, htmlProps, children, typographyType =
 };
 Paragraph.displayName = "Paragraph";
 //#endregion
-//#region src/components/Accordion/AccordionHeader.tsx
-const AccordionHeader = ({ children, className, style, htmlProps, typographyType = "headingMedium", bold, ...rest }) => {
-	const { isExpanded, headerProps } = useAccordionContext();
-	const { id, ...restHeaderProps } = headerProps ?? {};
-	const iconState = isExpanded ? "up" : "down";
-	return /* @__PURE__ */ jsx(Box, {
-		as: StylelessButton,
-		padding: "x1 x1.5 x1 x1",
-		...getBaseHTMLProps(id, cn(className, Accordion_module_default["header-button"], AccordionBase_module_default["header-button"], _key1), style, htmlProps, rest),
-		...restHeaderProps,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: cn(AccordionBase_module_default.header__content, typographyStyles_module_default[getTypographyCn(typographyType)], bold && typographyStyles_module_default.bold),
-			children: [/* @__PURE__ */ jsx(Icon, {
-				icon: AnimatedChevronUpDownIcon,
-				iconSize: "component",
-				className: Accordion_module_default.chevron,
-				iconState
-			}), children]
-		})
-	});
-};
-AccordionHeader.displayName = "AccordionHeader";
-//#endregion
-//#region src/components/Accordion/AccordionBody.tsx
-const AccordionBody = ({ children, className, style, htmlProps, ...rest }) => {
-	const { bodyContentRef, bodyProps } = useAccordionContext();
-	const { className: bodyContextCn, id, height, ...restBodyProps } = bodyProps ?? {};
-	return /* @__PURE__ */ jsx(Box, {
-		height: `${height}px`,
-		...getBaseHTMLProps(id, cn(className, bodyContextCn), style, htmlProps, rest),
-		...restBodyProps,
-		children: /* @__PURE__ */ jsx(Box, {
-			ref: bodyContentRef,
-			padding: "x0.5 x1.5 x2 x1",
-			children
-		})
-	});
-};
-AccordionBody.displayName = "AccordionBody";
-//#endregion
-//#region src/components/BackLink/BackLink.module.css
-var BackLink_module_default = { "icon": "dds-BackLink-module__icon" };
-//#endregion
-//#region src/components/BackLink/BackLink.tsx
-const BackLink = ({ label, ref, as = "a", ...rest }) => {
-	const { t } = useTranslation();
-	return /* @__PURE__ */ jsx("nav", {
-		ref,
-		"aria-label": t(texts$29.goBack),
-		className: typographyStyles_module_default["body-short-medium"],
-		children: /* @__PURE__ */ jsxs(HStack, {
-			as,
-			className: cn(typographyStyles_module_default.a, _key1),
-			rel: "noopener noreferer",
-			...rest,
-			children: [/* @__PURE__ */ jsx(Icon, {
-				icon: ArrowLeftIcon,
-				iconSize: "component",
-				className: cn(BackLink_module_default.icon)
-			}), label]
-		})
-	});
-};
-BackLink.displayName = "BackLink";
-const texts$29 = createTexts({ goBack: {
-	nb: "Gå tilbake",
-	no: "Gå tilbake",
-	nn: "Gå tilbake",
-	en: "Go back",
-	se: "Mana ruovttoluotta"
-} });
-//#endregion
 //#region src/components/Breadcrumbs/Breadcrumb.tsx
 const isAnchorTypographyProps = (props) => {
 	return props.href != void 0;
@@ -4987,7 +4993,7 @@ const CardExpandable = ({ isInitiallyExpanded = false, isExpanded, onChange, id,
 CardExpandable.displayName = "CardExpandable";
 //#endregion
 //#region src/components/Card/CardExpandable/CardExpandableHeader.tsx
-const CardExpandableHeader = ({ children, className, style, htmlProps, padding, typographyType = "headingLarge", bold, ...rest }) => {
+const CardExpandableHeader = ({ children, className, style, htmlProps, padding, typographyType = "heading-large", bold, ...rest }) => {
 	const { isExpanded, headerProps } = useAccordionContext();
 	const containerStyleVariables = { ["--dds-card-accordion-header-container-padding"]: padding ?? "var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x1-5)" };
 	const { id, ...restHeaderProps } = headerProps ?? {};
@@ -4998,7 +5004,7 @@ const CardExpandableHeader = ({ children, className, style, htmlProps, padding,
 		type: "button",
 		children: /* @__PURE__ */ jsx("div", {
 			style: containerStyleVariables,
-			className: cn(CardExpandable_module_default["header-container"], typographyStyles_module_default[getTypographyCn(typographyType)], bold && typographyStyles_module_default.bold),
+			className: cn(CardExpandable_module_default["header-container"], typographyStyles_module_default[typographyType], bold && typographyStyles_module_default.bold),
 			children: /* @__PURE__ */ jsxs("div", {
 				className: (AccordionBase_module_default.header__content, CardExpandable_module_default.header__content),
 				children: [children, /* @__PURE__ */ jsx(Icon, {
@@ -5069,7 +5075,7 @@ const Label$1 = ({ disabled, hasText, controlType, className, ...rest }) => {
 const renderGroupLabel = ({ id, showRequiredStyling, readOnly, label }) => {
 	if (!!label) return /* @__PURE__ */ jsxs(Typography, {
 		as: "span",
-		typographyType: "labelMedium",
+		typographyType: "label-medium",
 		id,
 		className: readOnly ? Label_module_default["read-only"] : void 0,
 		withMargins: true,
@@ -5090,7 +5096,7 @@ const renderGroupLabel = ({ id, showRequiredStyling, readOnly, label }) => {
 //#region src/components/SelectionControl/SelectionControl.utils.tsx
 const selectionControlTypographyProps = {
 	color: "inherit",
-	typographyType: "bodyShortMedium",
+	typographyType: "body-short-medium",
 	as: "span"
 };
 //#endregion
@@ -5181,7 +5187,7 @@ const InputMessage = ({ messageType, id, className, style, htmlProps, children,
 		...commonProps,
 		children: /* @__PURE__ */ jsx(Typography, {
 			...tgCommonProps,
-			typographyType: "bodyShortXsmall",
+			typographyType: "body-short-xsmall",
 			color: "text-subtle"
 		})
 	});
@@ -5552,11 +5558,11 @@ function CookieBannerCheckbox({ headerText, description, id, className, style, h
 			gap: "x0.5",
 			children: [/* @__PURE__ */ jsx(Typography, {
 				as: "span",
-				typographyType: "headingSmall",
+				typographyType: "heading-small",
 				children: headerText
 			}), /* @__PURE__ */ jsx(Typography, {
 				as: "span",
-				typographyType: "bodyLongSmall",
+				typographyType: "body-long-small",
 				children: description
 			})]
 		})
@@ -5574,7 +5580,7 @@ function CookieBanner({ headerText, description, buttons, checkboxes, id, classN
 	const headingId = headerText && (id ?? `cookie-banner-${generatedId}-heading`);
 	const heading = headerText ? /* @__PURE__ */ jsx(Heading, {
 		level: 2,
-		typographyType: "headingMedium",
+		typographyType: "heading-medium",
 		id: headingId,
 		children: headerText
 	}) : "";
@@ -6072,7 +6078,7 @@ function Calendar(props) {
 				}),
 				/* @__PURE__ */ jsx(Heading, {
 					level: 2,
-					typographyType: "headingXsmall",
+					typographyType: "heading-xsmall",
 					className: DateInput_module_default.calendar__header__month,
 					children: title
 				}),
@@ -6806,7 +6812,7 @@ const Drawer = ({ children, header, placement = "right", parentElement, size = "
 				id: headerId,
 				children: typeof header === "string" ? /* @__PURE__ */ jsx(Heading, {
 					level: 2,
-					typographyType: "headingLarge",
+					typographyType: "heading-large",
 					children: header
 				}) : header
 			}), /* @__PURE__ */ jsx(Button, {
@@ -6899,7 +6905,7 @@ function EmptyContent({ headerText, children, headerHeadingLevel = 2, ...rest })
 			className: typographyStyles_module_default["text-color--medium"],
 			children: [headerText && /* @__PURE__ */ jsx(Heading, {
 				level: headerHeadingLevel,
-				typographyType: "headingMedium",
+				typographyType: "heading-medium",
 				children: headerText
 			}), /* @__PURE__ */ jsx(Typography, {
 				as: "div",
@@ -6927,7 +6933,7 @@ var List_module_default = {
 const List = ({ listType = "unordered", typographyType = "inherit", children, id, className, style, htmlProps, ...rest }) => {
 	return /* @__PURE__ */ jsx(listType === "ordered" ? "ol" : "ul", {
 		...getBaseHTMLProps(id, className, style, htmlProps, rest),
-		className: cn(List_module_default.list, List_module_default[`list--${listType}`], typographyType === "inherit" ? List_module_default["list--inherit"] : typographyStyles_module_default[getTypographyCn(typographyType)]),
+		className: cn(List_module_default.list, List_module_default[`list--${listType}`], typographyType === "inherit" ? List_module_default["list--inherit"] : typographyStyles_module_default[typographyType]),
 		children
 	});
 };
@@ -6945,11 +6951,11 @@ const ErrorSummary = ({ heading: pHeading, className, style, children, id, htmlP
 	const { t } = useTranslation();
 	const heading = typeof pHeading === "string" ? /* @__PURE__ */ jsx(Heading, {
 		level: 2,
-		typographyType: "headingSmall",
+		typographyType: "heading-small",
 		children: pHeading
 	}) : pHeading ? pHeading : /* @__PURE__ */ jsx(Heading, {
 		level: 2,
-		typographyType: "headingSmall",
+		typographyType: "heading-small",
 		children: t(texts$20.toProceedCorrectErrors)
 	});
 	return /* @__PURE__ */ jsxs(Paper, {
@@ -7055,7 +7061,7 @@ function CharCounter(props) {
 		id: id ?? `${generatedId}-characterCounter`,
 		className: CharCounter_module_default.container,
 		as: "div",
-		typographyType: "bodyShortXsmall",
+		typographyType: "body-short-xsmall",
 		color: "text-subtle",
 		children: [/* @__PURE__ */ jsxs("span", {
 			"aria-hidden": true,
@@ -8071,7 +8077,7 @@ const Footer = ({ className, ...rest }) => /* @__PURE__ */ jsx(Contrast, {
 //#region src/components/Footer/FooterListHeader.tsx
 const FooterListHeader = (props) => /* @__PURE__ */ jsx(Heading, {
 	level: 2,
-	typographyType: "headingSmall",
+	typographyType: "heading-small",
 	...props
 });
 //#endregion
@@ -8624,7 +8630,7 @@ const InternalHeader = (props) => {
 		...getBaseHTMLProps(id, cn(className, InternalHeader_module_default.bar, !!navigation && InternalHeader_module_default["bar--with-nav"]), style, htmlProps, rest),
 		children: [
 			/* @__PURE__ */ jsx(Typography, {
-				typographyType: "headingSmall",
+				typographyType: "heading-small",
 				bold: true,
 				as: "span",
 				children: applicationHref ? /* @__PURE__ */ jsx("a", {
@@ -8635,7 +8641,7 @@ const InternalHeader = (props) => {
 				}) : applicationName
 			}),
 			/* @__PURE__ */ jsx(Typography, {
-				typographyType: "bodyShortMedium",
+				typographyType: "body-short-medium",
 				as: "span",
 				children: applicationDesc
 			}),
@@ -8848,7 +8854,7 @@ const Modal = ({ isOpen = false, parentElement, children, header, onClose, id, t
 					id: headerId,
 					children: typeof header === "string" ? /* @__PURE__ */ jsx(Heading, {
 						level: 2,
-						typographyType: "headingLarge",
+						typographyType: "heading-large",
 						children: header
 					}) : header
 				}), onClose && /* @__PURE__ */ jsx(Button, {
@@ -8986,7 +8992,7 @@ const NewsPopover = ({ id, className, style, htmlProps, header, news, defaultAct
 			children: /* @__PURE__ */ jsx(Heading, {
 				id: headerId,
 				level: 2,
-				typographyType: "headingSmall",
+				typographyType: "heading-small",
 				children: header
 			})
 		}), /* @__PURE__ */ jsxs(VStack, {
@@ -9806,7 +9812,7 @@ const Pagination = ({ itemsAmount, defaultItemsPerPage = 10, defaultActivePage =
 				componentSize: "small",
 				"aria-label": t(texts$8.itemsPerPage)
 			}), withCounter && /* @__PURE__ */ jsx(Paragraph, {
-				typographyType: "bodyShortMedium",
+				typographyType: "body-short-medium",
 				children: t(texts$8.showsAmountOfTotalItems(activePageFirstItem, activePageLastItem, itemsAmount))
 			})]
 		}), navigation]
@@ -11376,7 +11382,7 @@ const Popover = ({ id, header, withCloseButton = true, onBlur, children, placeme
 				className: Popover_module_default.header,
 				children: typeof header === "string" ? /* @__PURE__ */ jsx(Heading, {
 					level: 2,
-					typographyType: "headingMedium",
+					typographyType: "heading-medium",
 					children: header
 				}) : header
 			}),
@@ -11542,7 +11548,7 @@ const ProgressTrackerItem = (props) => {
 		children: stepNumberContent
 	}), /* @__PURE__ */ jsx(Typography, {
 		as: "div",
-		typographyType: "bodyShortMedium",
+		typographyType: "body-short-medium",
 		className: cn(ProgressTracker_module_default["item-text"], typographyStyles_module_default["a--nested__child"], isInactiveLink && ProgressTracker_module_default["item-text--inactive-link"]),
 		color: getTextColor(),
 		children
@@ -12027,7 +12033,7 @@ const SkipToContent = ({ text = "Til hovedinnhold", top = 0, id, className, html
 			...rest,
 			...htmlProps,
 			id,
-			typographyType: "bodyShortMedium",
+			typographyType: "body-short-medium",
 			children: text
 		})
 	});
@@ -12823,7 +12829,7 @@ const ToggleBar = (props) => {
 			children: [label && /* @__PURE__ */ jsx(Typography, {
 				id: labelId,
 				as: "span",
-				typographyType: "labelMedium",
+				typographyType: "label-medium",
 				children: label
 			}), /* @__PURE__ */ jsx(Grid, {
 				defaultPageLayout: false,
@@ -12955,6 +12961,6 @@ const ToggleButtonGroup = (props) => {
 };
 ToggleButtonGroup.displayName = "ToggleButtonGroup";
 //#endregion
-export { Accordion, AccordionBody, AccordionContextProvider, AccordionHeader, AddTabButton, AddressShieldedIcon, AgreementIcon, AnimatedChevronUpDownIcon, AppsIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AttachmentIcon, BORDER_COLORS, BORDER_RADII, BackLink, Backdrop, BarChartBoxedIcon, BarChartIcon, Bleed, BlockIcon, BookIcon, Box, Breadcrumb, Breadcrumbs, BriefcaseIcon, BuildIcon, BuildingIcon, Button, ButtonGroup, Calendar, CalendarIcon, CalendarMonthIcon, CalendarViewDayIcon, CalendarViewMonthIcon, CalendarViewWeekIcon, CallIcon, Caption, Card, CardExpandable, CardExpandableBody, CardExpandableHeader, CardSelectable, CardSelectableGroup, CaringIcon, ChatIcon, CheckCircledIcon, CheckIcon, Checkbox, CheckboxGroup, ChecklistIcon, ChevronDownIcon, ChevronFirstIcon, ChevronLastIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, ChipGroup, CircleFilledIcon, CircleIcon, CloseCircledIcon, CloseIcon, CloseSmallIcon, CloudIcon, CollapseIcon, CollapsibleTable, CollapsibleRow as CollapsibleTableRow, CommentIcon, Contrast, CookieBanner, CookieBannerCheckbox, CopyIcon, CourtIcon, DETAIL_LIST_SIZES, DatePicker, DateRangeIcon, DdsProvider, DeathsIcon, DescriptionList, DescriptionListDesc, DescriptionListGroup, DescriptionListTerm, DetailList, DetailListDesc, DetailListRow, DetailListTerm, Divider, DoubleChevronLeftIcon, DoubleChevronRightIcon, DownloadDoneIcon, DownloadIcon, DragHandleIcon, Drawer, DrawerGroup, DropdownHeader, DropdownItem, ELEVATIONS, EditAltIcon, EditIcon, ElementAs, EmptyContent, ErrorIcon, ErrorSummary, ErrorSummaryItem, ExclaimIcon, ExpandIcon, FacebookIcon, FamilyIcon, FavStar, Feedback, FeedbackIcon, Fieldset, FieldsetGroup, FileAddIcon, FileIcon, FileShieldedIcon, FileSignedIcon, FileTextIcon, FileUploader, FilterIcon, FilterListIcon, FindInPageIcon, FlagFilledIcon, FlagIcon, FlickrIcon, FloppyDiskIcon, FolderAddIcon, FolderIcon, FolderShieldedIcon, Footer, FooterLeft, FooterList, FooterListGroup, FooterListHeader, FooterLogo, FooterSocialsGroup, FooterSocialsList, FormSummary, FormSummaryEditButton, FormSummaryEmptyValue, FormSummaryError, FormSummaryField, FormSummaryFields, FormSummaryHeader, FormSummaryHeading, FormSummaryLabel, FormSummaryValue, FullscreenExitIcon, FullscreenIcon, GavelIcon, GlobalMessage, Grid, GridChild, GroupIcon, GuardianIcon, HStack, Heading, HelpFilledIcon, HelpIcon, HelpSimpleIcon, HiddenInput, HomeIcon, HourglassEmptyIcon, Icon, ImageIcon, InfoIcon, InlineButton, InlineEditInput, InlineEditSelect, InlineEditTextArea, InputMessage, InstagramIcon, InternalHeader, JordskifterettIcon, JordskiftesakIcon, KeyIcon, L_MESSAGE_PURPOSES, Label, LagmannsrettIcon, LanguageIcon, Legend, LineChartIcon, Link, LinkIcon, LinkOffIcon, LinkedInIcon, List, ListAltIcon, ListIcon, ListItem, LocalMessage, LocationIcon, LocationOffIcon, LockFilledIcon, LockIcon, LockOpenIcon, LoginIcon, LogoutIcon, MailIcon, MailOpenIcon, MapIcon, MenuIcon, MinusCircledIcon, MinusIcon, Modal, ModalActions, ModalBody, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, NativeSelect, NewsPopover, NotarialIcon, NotebookPenIcon, NotificationsIcon, NotificationsOffIcon, OnlineMeetingIcon, OpenExternalIcon, OverflowMenu, OverflowMenuButton, OverflowMenuDivider, OverflowMenuGroup, OverflowMenuLink, OverflowMenuList, OverflowMenuListHeader, OverflowMenuSpan, OverflowMenuToggle, Pagination, PanelLeftIcon, Paper, PaperPlaneIcon, Paragraph, PayoutIcon, PdfIcon, PersonAddIcon, PersonIcon, PersonShieldedIcon, PhoneInput, PinIcon, PlusCircledIcon, PlusIcon, Popover, PopoverGroup, PowerOfAttorneyIcon, PrintIcon, ProgressBar, ProgressTracker, ProgressTrackerItem, PublishIcon, QuestionAnswerIcon, RadioButton, RadioButtonGroup, ReceiptIcon, RedoIcon, RefreshIcon, ReplayIcon, RowsIcon, ScaleIcon, ScreenSize, Search, SearchAutocompleteWrapper, SearchIcon, SearchSuggestions, SectionIcon, Select, SettingsIcon, ShowHide, Skeleton, SkipToContent, SmsIcon, Spinner, SplitButton, StarFilledIcon, StarHalfFilledIcon, StarIcon, StickyNoteIcon, StylelessButton, StylelessList, StylelessOList, SunIcon, SupportIcon, SyncIcon, TG_HEADING_TYPES, Tab, TabList, TabPanel, TabPanels, Table, Body as TableBody, Cell as TableCell, Foot as TableFoot, Head as TableHead, Row as TableRow, SortCell as TableSortCell, TableWrapper, Tabs, Tag, TextArea, TextInput, TextOverflowEllipsisInner, TextOverflowEllipsisWrapper, ThumbDownFilledIcon, ThumbDownIcon, ThumbUpFilledIcon, ThumbUpIcon, TimeIcon, TimePicker, TingrettIcon, TipIcon, Toggle, ToggleBar, ToggleButton, ToggleButtonGroup, ToggleRadio, Tooltip, TrashIcon, TrendingDownIcon, TrendingUpIcon, Typography, UndoIcon, UnfoldLessIcon, UnfoldMoreIcon, UploadIcon, VStack, VisibilityOffIcon, VisibilityOnIcon, VisuallyHidden, WarningIcon, WebexIcon, XIcon, ZoomInIcon, ZoomOutIcon, calendarDateToNativeDate, cn, createPurposes, createSelectOptions, createSizes, dateValueToNativeDate, focusVisible, focusVisibleInset, focusVisibleTransitionValue, getBaseHTMLProps, getColorCn, getElementType, getTypographyCn, handleElementWithBackdropMount, handleElementWithBackdropUnmount, hideInput, icons_exports as icons, inheritLinkStyling, inlineElements, isAnchorTypographyProps, isBorderColor, isBorderRadius, isCaption, isElevation, isHeading, isInlineElement, isKeyboardEvent, isLegend, isPaperBackground, nativeDateToCalendarDate, nativeDateToDateValue, nativeDateToTime, normalizeButton, outlineInset, outlineOffset, removeButtonStyling, removeListStyling, renderInputMessage, scrollbarStyling, useAccordion, useAccordionContext, useCallbackRef, useCombinedRef, useControllableGroupState, useControllableState, useFloatPosition, useFocusTrap, useIsMounted, useMountTransition, useOnClickOutside, useOnKeyDown, useReturnFocusOnBlur, useRoveFocus, useScreenSize, useTheme, useWindowResize };
+export { Accordion, AccordionBody, AccordionContextProvider, AccordionHeader, AddTabButton, AddressShieldedIcon, AgreementIcon, AnimatedChevronUpDownIcon, AppsIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AttachmentIcon, BORDER_COLORS, BORDER_RADII, BackLink, Backdrop, BarChartBoxedIcon, BarChartIcon, Bleed, BlockIcon, BookIcon, Box, Breadcrumb, Breadcrumbs, BriefcaseIcon, BuildIcon, BuildingIcon, Button, ButtonGroup, Calendar, CalendarIcon, CalendarMonthIcon, CalendarViewDayIcon, CalendarViewMonthIcon, CalendarViewWeekIcon, CallIcon, Caption, Card, CardExpandable, CardExpandableBody, CardExpandableHeader, CardSelectable, CardSelectableGroup, CaringIcon, ChatIcon, CheckCircledIcon, CheckIcon, Checkbox, CheckboxGroup, ChecklistIcon, ChevronDownIcon, ChevronFirstIcon, ChevronLastIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, ChipGroup, CircleFilledIcon, CircleIcon, CloseCircledIcon, CloseIcon, CloseSmallIcon, CloudIcon, CollapseIcon, CollapsibleTable, CollapsibleRow as CollapsibleTableRow, CommentIcon, Contrast, CookieBanner, CookieBannerCheckbox, CopyIcon, CourtIcon, DETAIL_LIST_SIZES, DatePicker, DateRangeIcon, DdsProvider, DeathsIcon, DescriptionList, DescriptionListDesc, DescriptionListGroup, DescriptionListTerm, DetailList, DetailListDesc, DetailListRow, DetailListTerm, Divider, DoubleChevronLeftIcon, DoubleChevronRightIcon, DownloadDoneIcon, DownloadIcon, DragHandleIcon, Drawer, DrawerGroup, DropdownHeader, DropdownItem, ELEVATIONS, EditAltIcon, EditIcon, ElementAs, EmptyContent, ErrorIcon, ErrorSummary, ErrorSummaryItem, ExclaimIcon, ExpandIcon, FacebookIcon, FamilyIcon, FavStar, Feedback, FeedbackIcon, Fieldset, FieldsetGroup, FileAddIcon, FileIcon, FileShieldedIcon, FileSignedIcon, FileTextIcon, FileUploader, FilterIcon, FilterListIcon, FindInPageIcon, FlagFilledIcon, FlagIcon, FlickrIcon, FloppyDiskIcon, FolderAddIcon, FolderIcon, FolderShieldedIcon, Footer, FooterLeft, FooterList, FooterListGroup, FooterListHeader, FooterLogo, FooterSocialsGroup, FooterSocialsList, FormSummary, FormSummaryEditButton, FormSummaryEmptyValue, FormSummaryError, FormSummaryField, FormSummaryFields, FormSummaryHeader, FormSummaryHeading, FormSummaryLabel, FormSummaryValue, FullscreenExitIcon, FullscreenIcon, GavelIcon, GlobalMessage, Grid, GridChild, GroupIcon, GuardianIcon, HStack, Heading, HelpFilledIcon, HelpIcon, HelpSimpleIcon, HiddenInput, HomeIcon, HourglassEmptyIcon, Icon, ImageIcon, InfoIcon, InlineButton, InlineEditInput, InlineEditSelect, InlineEditTextArea, InputMessage, InstagramIcon, InternalHeader, JordskifterettIcon, JordskiftesakIcon, KeyIcon, L_MESSAGE_PURPOSES, Label, LagmannsrettIcon, LanguageIcon, Legend, LineChartIcon, Link, LinkIcon, LinkOffIcon, LinkedInIcon, List, ListAltIcon, ListIcon, ListItem, LocalMessage, LocationIcon, LocationOffIcon, LockFilledIcon, LockIcon, LockOpenIcon, LoginIcon, LogoutIcon, MailIcon, MailOpenIcon, MapIcon, MenuIcon, MinusCircledIcon, MinusIcon, Modal, ModalActions, ModalBody, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, NativeSelect, NewsPopover, NotarialIcon, NotebookPenIcon, NotificationsIcon, NotificationsOffIcon, OnlineMeetingIcon, OpenExternalIcon, OverflowMenu, OverflowMenuButton, OverflowMenuDivider, OverflowMenuGroup, OverflowMenuLink, OverflowMenuList, OverflowMenuListHeader, OverflowMenuSpan, OverflowMenuToggle, Pagination, PanelLeftIcon, Paper, PaperPlaneIcon, Paragraph, PayoutIcon, PdfIcon, PersonAddIcon, PersonIcon, PersonShieldedIcon, PhoneInput, PinIcon, PlusCircledIcon, PlusIcon, Popover, PopoverGroup, PowerOfAttorneyIcon, PrintIcon, ProgressBar, ProgressTracker, ProgressTrackerItem, PublishIcon, QuestionAnswerIcon, RadioButton, RadioButtonGroup, ReceiptIcon, RedoIcon, RefreshIcon, ReplayIcon, RowsIcon, ScaleIcon, ScreenSize, Search, SearchAutocompleteWrapper, SearchIcon, SearchSuggestions, SectionIcon, Select, SettingsIcon, ShowHide, Skeleton, SkipToContent, SmsIcon, Spinner, SplitButton, StarFilledIcon, StarHalfFilledIcon, StarIcon, StickyNoteIcon, StylelessButton, StylelessList, StylelessOList, SunIcon, SupportIcon, SyncIcon, TG_BODY_LONG_TYPES, TG_BODY_SHORT_TYPES, TG_BODY_TYPES, TG_HEADING_TYPES, TG_LEAD_TYPES, Tab, TabList, TabPanel, TabPanels, Table, Body as TableBody, Cell as TableCell, Foot as TableFoot, Head as TableHead, Row as TableRow, SortCell as TableSortCell, TableWrapper, Tabs, Tag, TextArea, TextInput, TextOverflowEllipsisInner, TextOverflowEllipsisWrapper, ThumbDownFilledIcon, ThumbDownIcon, ThumbUpFilledIcon, ThumbUpIcon, TimeIcon, TimePicker, TingrettIcon, TipIcon, Toggle, ToggleBar, ToggleButton, ToggleButtonGroup, ToggleRadio, Tooltip, TrashIcon, TrendingDownIcon, TrendingUpIcon, Typography, UndoIcon, UnfoldLessIcon, UnfoldMoreIcon, UploadIcon, VStack, VisibilityOffIcon, VisibilityOnIcon, VisuallyHidden, WarningIcon, WebexIcon, XIcon, ZoomInIcon, ZoomOutIcon, calendarDateToNativeDate, cn, createPurposes, createSelectOptions, createSizes, dateValueToNativeDate, focusVisible, focusVisibleInset, focusVisibleTransitionValue, getBaseHTMLProps, getColorCn, getElementType, handleElementWithBackdropMount, handleElementWithBackdropUnmount, hideInput, icons_exports as icons, inheritLinkStyling, inlineElements, isAnchorTypographyProps, isBorderColor, isBorderRadius, isCaption, isElevation, isHeading, isInlineElement, isKeyboardEvent, isLegend, isPaperBackground, nativeDateToCalendarDate, nativeDateToDateValue, nativeDateToTime, normalizeButton, outlineInset, outlineOffset, removeButtonStyling, removeListStyling, renderInputMessage, scrollbarStyling, useAccordion, useAccordionContext, useCallbackRef, useCombinedRef, useControllableGroupState, useControllableState, useFloatPosition, useFocusTrap, useIsMounted, useMountTransition, useOnClickOutside, useOnKeyDown, useReturnFocusOnBlur, useRoveFocus, useScreenSize, useTheme, useWindowResize };
 
 //# sourceMappingURL=index.mjs.map