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

package/dist/index.cjs

@@ -513,9 +513,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`.
@@ -4059,6 +4056,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn(AccordionBase_module_default.header__content, typographyStyles_module_default[typographyType], bold && typographyStyles_module_default.bold),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Box, {
+		height: `${height}px`,
+		...getBaseHTMLProps(id, cn(className, bodyContextCn), style, htmlProps, rest),
+		...restBodyProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("nav", {
+		ref,
+		"aria-label": t(texts$29.goBack),
+		className: typographyStyles_module_default["body-short-medium"],
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+			as,
+			className: cn(typographyStyles_module_default.a, _key1),
+			rel: "noopener noreferer",
+			...rest,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -4083,28 +4152,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";
 	}
 };
@@ -4173,9 +4256,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);
@@ -4185,13 +4265,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__ */ (0, react_jsx_runtime.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),
@@ -4206,7 +4285,7 @@ Typography.displayName = "Typography";
 const Caption = ({ id, className, style, htmlProps, children, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Typography, {
 		...getBaseHTMLProps(id, className, style, htmlProps, rest),
-		typographyType: "headingLarge",
+		typographyType: "heading-large",
 		as: "caption",
 		children
 	});
@@ -4217,13 +4296,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 }) => {
@@ -4258,25 +4337,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__ */ (0, react_jsx_runtime.jsxs)(Typography, {
-		typographyType: "labelMedium",
+		typographyType: "label-medium",
 		as: "div",
 		withMargins: rest.withMargins,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Typography, {
 			...labelProps,
-			typographyType: "labelMedium",
+			typographyType: "label-medium",
 			withMargins: false,
 			children: content
 		}), afterLabelContent]
 	}) : /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Typography, {
 		...getBaseHTMLProps(id, cn(className, withMarginsOverInput && typographyStyles_module_default["legend--margins-over-input"]), style, htmlProps, rest),
 		as: "legend",
@@ -4292,7 +4371,7 @@ const Link = ({ id, className, htmlProps, children, typographyType, withMargins,
 	const aProps = as === "a" || propIsAnchor ? { rel: "noopener noreferrer" } : {};
 	return /* @__PURE__ */ (0, react_jsx_runtime.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),
@@ -4301,9 +4380,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__ */ (0, react_jsx_runtime.jsx)(Typography, {
 		...getBaseHTMLProps(id, className, style, htmlProps, rest),
 		typographyType,
@@ -4312,78 +4390,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: cn(AccordionBase_module_default.header__content, typographyStyles_module_default[getTypographyCn(typographyType)], bold && typographyStyles_module_default.bold),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Box, {
-		height: `${height}px`,
-		...getBaseHTMLProps(id, cn(className, bodyContextCn), style, htmlProps, rest),
-		...restBodyProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("nav", {
-		ref,
-		"aria-label": t(texts$29.goBack),
-		className: typographyStyles_module_default["body-short-medium"],
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
-			as,
-			className: cn(typographyStyles_module_default.a, _key1),
-			rel: "noopener noreferer",
-			...rest,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.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;
@@ -5020,7 +5026,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 ?? {};
@@ -5031,7 +5037,7 @@ const CardExpandableHeader = ({ children, className, style, htmlProps, padding,
 		type: "button",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: (AccordionBase_module_default.header__content, CardExpandable_module_default.header__content),
 				children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
@@ -5102,7 +5108,7 @@ const Label$1 = ({ disabled, hasText, controlType, className, ...rest }) => {
 const renderGroupLabel = ({ id, showRequiredStyling, readOnly, label }) => {
 	if (!!label) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Typography, {
 		as: "span",
-		typographyType: "labelMedium",
+		typographyType: "label-medium",
 		id,
 		className: readOnly ? Label_module_default["read-only"] : void 0,
 		withMargins: true,
@@ -5123,7 +5129,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
@@ -5214,7 +5220,7 @@ const InputMessage = ({ messageType, id, className, style, htmlProps, children,
 		...commonProps,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Typography, {
 			...tgCommonProps,
-			typographyType: "bodyShortXsmall",
+			typographyType: "body-short-xsmall",
 			color: "text-subtle"
 		})
 	});
@@ -5585,11 +5591,11 @@ function CookieBannerCheckbox({ headerText, description, id, className, style, h
 			gap: "x0.5",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Typography, {
 				as: "span",
-				typographyType: "headingSmall",
+				typographyType: "heading-small",
 				children: headerText
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Typography, {
 				as: "span",
-				typographyType: "bodyLongSmall",
+				typographyType: "body-long-small",
 				children: description
 			})]
 		})
@@ -5607,7 +5613,7 @@ function CookieBanner({ headerText, description, buttons, checkboxes, id, classN
 	const headingId = headerText && (id ?? `cookie-banner-${generatedId}-heading`);
 	const heading = headerText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 		level: 2,
-		typographyType: "headingMedium",
+		typographyType: "heading-medium",
 		id: headingId,
 		children: headerText
 	}) : "";
@@ -6105,7 +6111,7 @@ function Calendar(props) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 					level: 2,
-					typographyType: "headingXsmall",
+					typographyType: "heading-xsmall",
 					className: DateInput_module_default.calendar__header__month,
 					children: title
 				}),
@@ -6839,7 +6845,7 @@ const Drawer = ({ children, header, placement = "right", parentElement, size = "
 				id: headerId,
 				children: typeof header === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 					level: 2,
-					typographyType: "headingLarge",
+					typographyType: "heading-large",
 					children: header
 				}) : header
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
@@ -6932,7 +6938,7 @@ function EmptyContent({ headerText, children, headerHeadingLevel = 2, ...rest })
 			className: typographyStyles_module_default["text-color--medium"],
 			children: [headerText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 				level: headerHeadingLevel,
-				typographyType: "headingMedium",
+				typographyType: "heading-medium",
 				children: headerText
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Typography, {
 				as: "div",
@@ -6960,7 +6966,7 @@ var List_module_default = {
 const List = ({ listType = "unordered", typographyType = "inherit", children, id, className, style, htmlProps, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.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
 	});
 };
@@ -6978,11 +6984,11 @@ const ErrorSummary = ({ heading: pHeading, className, style, children, id, htmlP
 	const { t } = useTranslation();
 	const heading = typeof pHeading === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 		level: 2,
-		typographyType: "headingSmall",
+		typographyType: "heading-small",
 		children: pHeading
 	}) : pHeading ? pHeading : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 		level: 2,
-		typographyType: "headingSmall",
+		typographyType: "heading-small",
 		children: t(texts$20.toProceedCorrectErrors)
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Paper, {
@@ -7088,7 +7094,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__ */ (0, react_jsx_runtime.jsxs)("span", {
 			"aria-hidden": true,
@@ -8104,7 +8110,7 @@ const Footer = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime
 //#region src/components/Footer/FooterListHeader.tsx
 const FooterListHeader = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 	level: 2,
-	typographyType: "headingSmall",
+	typographyType: "heading-small",
 	...props
 });
 //#endregion
@@ -8657,7 +8663,7 @@ const InternalHeader = (props) => {
 		...getBaseHTMLProps(id, cn(className, InternalHeader_module_default.bar, !!navigation && InternalHeader_module_default["bar--with-nav"]), style, htmlProps, rest),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Typography, {
-				typographyType: "headingSmall",
+				typographyType: "heading-small",
 				bold: true,
 				as: "span",
 				children: applicationHref ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
@@ -8668,7 +8674,7 @@ const InternalHeader = (props) => {
 				}) : applicationName
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Typography, {
-				typographyType: "bodyShortMedium",
+				typographyType: "body-short-medium",
 				as: "span",
 				children: applicationDesc
 			}),
@@ -8881,7 +8887,7 @@ const Modal = ({ isOpen = false, parentElement, children, header, onClose, id, t
 					id: headerId,
 					children: typeof header === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 						level: 2,
-						typographyType: "headingLarge",
+						typographyType: "heading-large",
 						children: header
 					}) : header
 				}), onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
@@ -9019,7 +9025,7 @@ const NewsPopover = ({ id, className, style, htmlProps, header, news, defaultAct
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 				id: headerId,
 				level: 2,
-				typographyType: "headingSmall",
+				typographyType: "heading-small",
 				children: header
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VStack, {
@@ -9839,7 +9845,7 @@ const Pagination = ({ itemsAmount, defaultItemsPerPage = 10, defaultActivePage =
 				componentSize: "small",
 				"aria-label": t(texts$8.itemsPerPage)
 			}), withCounter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Paragraph, {
-				typographyType: "bodyShortMedium",
+				typographyType: "body-short-medium",
 				children: t(texts$8.showsAmountOfTotalItems(activePageFirstItem, activePageLastItem, itemsAmount))
 			})]
 		}), navigation]
@@ -11409,7 +11415,7 @@ const Popover = ({ id, header, withCloseButton = true, onBlur, children, placeme
 				className: Popover_module_default.header,
 				children: typeof header === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 					level: 2,
-					typographyType: "headingMedium",
+					typographyType: "heading-medium",
 					children: header
 				}) : header
 			}),
@@ -11575,7 +11581,7 @@ const ProgressTrackerItem = (props) => {
 		children: stepNumberContent
 	}), /* @__PURE__ */ (0, react_jsx_runtime.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
@@ -12060,7 +12066,7 @@ const SkipToContent = ({ text = "Til hovedinnhold", top = 0, id, className, html
 			...rest,
 			...htmlProps,
 			id,
-			typographyType: "bodyShortMedium",
+			typographyType: "body-short-medium",
 			children: text
 		})
 	});
@@ -12856,7 +12862,7 @@ const ToggleBar = (props) => {
 			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Typography, {
 				id: labelId,
 				as: "span",
-				typographyType: "labelMedium",
+				typographyType: "label-medium",
 				children: label
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid, {
 				defaultPageLayout: false,
@@ -13273,7 +13279,11 @@ exports.StylelessOList = StylelessOList;
 exports.SunIcon = SunIcon;
 exports.SupportIcon = SupportIcon;
 exports.SyncIcon = SyncIcon;
+exports.TG_BODY_LONG_TYPES = TG_BODY_LONG_TYPES;
+exports.TG_BODY_SHORT_TYPES = TG_BODY_SHORT_TYPES;
+exports.TG_BODY_TYPES = TG_BODY_TYPES;
 exports.TG_HEADING_TYPES = TG_HEADING_TYPES;
+exports.TG_LEAD_TYPES = TG_LEAD_TYPES;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
@@ -13335,7 +13345,6 @@ exports.focusVisibleTransitionValue = focusVisibleTransitionValue;
 exports.getBaseHTMLProps = getBaseHTMLProps;
 exports.getColorCn = getColorCn;
 exports.getElementType = getElementType;
-exports.getTypographyCn = getTypographyCn;
 exports.handleElementWithBackdropMount = handleElementWithBackdropMount;
 exports.handleElementWithBackdropUnmount = handleElementWithBackdropUnmount;
 exports.hideInput = hideInput;