@norges-domstoler/dds-components 24.1.0 → 24.2.0

package/dist/index.cjs

@@ -1127,51 +1127,10 @@ function handleElementWithBackdropUnmount(container) {
 //#region src/components/helpers/Backdrop/Backdrop.module.css
 var Backdrop_module_default = {
 	"backdrop": "dds-Backdrop-module__backdrop",
-	"drawer": "dds-Backdrop-module__drawer",
-	"modal": "dds-Backdrop-module__modal",
 	"backdrop--visible": "dds-Backdrop-module__backdrop--visible",
 	"backdrop--hidden": "dds-Backdrop-module__backdrop--hidden"
 };
 //#endregion
-//#region src/components/helpers/Backdrop/Backdrop.tsx
-/**
-* Backdrop-komponent, viser et bakgrunnslag for et element som skal låse applikasjonen i bakgrunnen (Modal el.l.).
-*
-* @component
-* @param {Object} props - Props for komponenten.
-* @param {boolean} [props.isMounted] - Angir om backdropen skal være synlig (`true`) eller skjult (`false`). Standard er `false`.
-* @param {'drawer' | 'modal'} props.zIndex - Bestemmer hvilken z-index-klasse som skal brukes, avhengig av konteksten (f.eks. drawer eller modal).
-* @param {React.ReactNode} [props.children] - Eventuelt innhold som skal vises inni backdropen.
-* @param {React.MouseEventHandler<HTMLDivElement>} [props.onClick] - Klikkhåndterer for backdropen, f.eks. for å lukke en modal.
-* @param {React.Ref<HTMLDivElement>} [props.ref] - Referanse til DOM-elementet.
-*
-* @returns {JSX.Element} Et `<div>`-element med riktige klasser basert på synlighet og z-index.
-
-* @example
-* ```tsx
-* <Backdrop isMounted={true} zIndex="modal" onClick={handleClose}>
-*   <ModalContent />
-* </Backdrop>
-* ```
-*/
-const Backdrop = ({ isMounted, zIndex, ...props }) => {
-	const isMountedCn = isMounted ? "visible" : "hidden";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn(Backdrop_module_default.backdrop, Backdrop_module_default[zIndex], Backdrop_module_default[`backdrop--${isMountedCn}`]),
-		...props
-	});
-};
-Backdrop.displayName = "Backdrop";
-//#endregion
-//#region src/components/helpers/Dropdown/DropdownItem.module.css
-var DropdownItem_module_default = {
-	"item": "dds-DropdownItem-module__item",
-	"default": "dds-DropdownItem-module__default",
-	"danger": "dds-DropdownItem-module__danger",
-	"item--interactive": "dds-DropdownItem-module__item--interactive",
-	"item--loading": "dds-DropdownItem-module__item--loading"
-};
-//#endregion
 //#region src/types/BaseComponentProps.ts
 function pruneUndefined(obj) {
 	return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== void 0));
@@ -1294,31 +1253,6 @@ const isElevation = (value) => {
 	return typeof value === "string" && ELEVATIONS.includes(value);
 };
 //#endregion
-//#region src/components/Icon/Icon.tsx
-const getSize = (iconSize) => {
-	switch (iconSize) {
-		case "small": return "var(--dds-size-icon-small)";
-		case "medium": return "var(--dds-size-icon-medium)";
-		case "large": return "var(--dds-size-icon-large)";
-		case "component": return "var(--dds-size-icon-component)";
-		case "inherit": return "1em";
-		default: return "var(--dds-size-icon-medium)";
-	}
-};
-function Icon(props) {
-	const { id, iconSize = "medium", color = "currentcolor", icon, className, style, htmlProps, iconState, ...rest } = props;
-	const size = getSize(iconSize);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icon, {
-		...getBaseHTMLProps(id, className, style, htmlProps, rest),
-		height: size,
-		width: size,
-		fill: color,
-		"aria-hidden": htmlProps?.["aria-hidden"] ?? true,
-		...iconState ? { iconState } : {}
-	});
-}
-Icon.displayName = "Icon";
-//#endregion
 //#region src/components/layout/common/layout.module.css
 var layout_module_default = {
 	"dds-p": "dds-layout-module__dds-p",
@@ -1346,6 +1280,8 @@ var layout_module_default = {
 	"dds-display": "dds-layout-module__dds-display",
 	"dds-text-align": "dds-layout-module__dds-text-align",
 	"dds-word-break": "dds-layout-module__dds-word-break",
+	"dds-z-index": "dds-layout-module__dds-z-index",
+	"dds-flex": "dds-layout-module__dds-flex",
 	"dds-flex-dir": "dds-layout-module__dds-flex-dir",
 	"dds-gap": "dds-layout-module__dds-gap",
 	"dds-c-gap": "dds-layout-module__dds-c-gap",
@@ -1383,15 +1319,33 @@ const SPACING_SCALES = [
 	"x6",
 	"x10"
 ];
+const Z_INDEXES = [
+	"skiptocontent",
+	"modal-backdrop",
+	"drawer",
+	"drawer-backdrop",
+	"overflowmenu",
+	"popover",
+	"tooltip",
+	"dropdown",
+	"sticky",
+	"absolute-element"
+];
 //#endregion
 //#region src/components/layout/common/utils.tsx
 const TOKEN_PREFIX = "dds";
+const hasValue = (value) => {
+	return value !== void 0 && value !== null;
+};
 function isBreakpointObject(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 const isSpacingScale = (value) => {
 	return typeof value === "string" && SPACING_SCALES.includes(value);
 };
+const isZIndex = (value) => {
+	return typeof value === "string" && Z_INDEXES.includes(value);
+};
 const isRelativeGridColumn = (type) => {
 	return type === "all" || type === "firstHalf" || type === "secondHalf";
 };
@@ -1403,6 +1357,7 @@ function spacingPropToToken(value) {
 }
 const getSpacingToken = (v) => `var(--${TOKEN_PREFIX}-spacing-${spacingPropToToken(v)})`;
 const getColorToken = (v) => `var(--${TOKEN_PREFIX}-color-${v})`;
+const getZIndexToken = (v) => `var(--${TOKEN_PREFIX}-zindex-${v})`;
 const relativeGridColumnToken = (v, bp) => {
 	if (v === "all") return "1 / -1";
 	if (!bp) return "";
@@ -1412,6 +1367,7 @@ const getValue = (v, bp, invert) => {
 	let output;
 	if (isColor(v)) output = getColorToken(v);
 	else if (isSpacingScale(v)) output = getSpacingToken(v);
+	else if (isZIndex(v)) output = getZIndexToken(v);
 	else if (isRelativeGridColumn(v)) output = relativeGridColumnToken(v, bp);
 	else output = v;
 	return invert ? invertValue(output) : output;
@@ -1432,10 +1388,10 @@ function getCSSProperties(property, prefix, suffix, invert) {
 	return properties;
 }
 function getResponsiveCSSProperties(property, prefix, suffix, invert) {
-	if (!property) return;
+	if (property === void 0 || property === null) return;
 	const properties = {};
 	if (isBreakpointObject(property)) BREAKPOINTS.forEach((bp) => {
-		if (property[bp]) properties[buildCSSKey(prefix, suffix, bp)] = convertMultiValue(property[bp].toString(), bp, invert);
+		if (property[bp] !== void 0 && property[bp] !== null) properties[buildCSSKey(prefix, suffix, bp)] = convertMultiValue(property[bp].toString(), bp, invert);
 	});
 	else properties[buildCSSKey(prefix, suffix)] = convertMultiValue(property.toString(), void 0, invert);
 	return properties;
@@ -1490,7 +1446,7 @@ const ShowHide = ({ hideBelow, showBelow, className, style, htmlProps, id, as: C
 ShowHide.displayName = "ShowHide";
 //#endregion
 //#region src/components/layout/Box/Box.tsx
-const Box = ({ id, className, style, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, height, maxHeight, minHeight, width, maxWidth, minWidth, position, left, right, bottom, top, overflow, overflowX, overflowY, display, textAlign, flexDirection, gap, columnGap, rowGap, alignItems, alignContent, justifyItems, placeItems, justifyContent, flexWrap, flexBasis, flexFlow, wordBreak, htmlProps, ...rest }) => {
+const Box = ({ id, className, style, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, height, maxHeight, minHeight, width, maxWidth, minWidth, position, left, right, bottom, top, overflow, overflowX, overflowY, display, textAlign, flex, flexDirection, gap, columnGap, rowGap, alignItems, alignContent, justifyItems, placeItems, justifyContent, flexWrap, flexBasis, flexFlow, wordBreak, zIndex, htmlProps, ...rest }) => {
 	const responsiveStyles = {
 		...getResponsiveCSSProperties(padding, "r", "p"),
 		...getResponsiveCSSProperties(paddingInline, "r", "p-i"),
@@ -1514,6 +1470,7 @@ const Box = ({ id, className, style, padding, paddingInline, paddingBlock, margi
 		...getResponsiveCSSProperties(overflowY, "r", "o-y"),
 		...getResponsiveCSSProperties(display, "r", "display"),
 		...getResponsiveCSSProperties(textAlign, "r", "text-align"),
+		...getResponsiveCSSProperties(flex, "r", "flex"),
 		...getResponsiveCSSProperties(flexDirection, "r", "flex-dir"),
 		...getResponsiveCSSProperties(gap, "r", "gap"),
 		...getResponsiveCSSProperties(columnGap, "r", "c-gap"),
@@ -1526,9 +1483,10 @@ const Box = ({ id, className, style, padding, paddingInline, paddingBlock, margi
 		...getResponsiveCSSProperties(flexWrap, "r", "wrap"),
 		...getResponsiveCSSProperties(flexBasis, "r", "basis"),
 		...getResponsiveCSSProperties(flexFlow, "r", "flow"),
-		...getResponsiveCSSProperties(wordBreak, "r", "word-break")
+		...getResponsiveCSSProperties(wordBreak, "r", "word-break"),
+		...getResponsiveCSSProperties(zIndex, "r", "z-index")
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShowHide, { ...getBaseHTMLProps(id, cn(className, padding && layout_module_default["dds-p"], paddingInline && layout_module_default["dds-p-i"], paddingBlock && layout_module_default["dds-p-b"], margin && layout_module_default["dds-m"], marginInline && layout_module_default["dds-m-i"], marginBlock && layout_module_default["dds-m-b"], height && layout_module_default["dds-h"], maxHeight && layout_module_default["dds-max-h"], minHeight && layout_module_default["dds-min-h"], width && layout_module_default["dds-w"], maxWidth && layout_module_default["dds-max-w"], minWidth && layout_module_default["dds-min-w"], position && layout_module_default["dds-pos"], left && layout_module_default["dds-l"], right && layout_module_default["dds-r"], top && layout_module_default["dds-t"], bottom && layout_module_default["dds-b"], overflow && layout_module_default["dds-o"], overflowX && layout_module_default["dds-o-x"], overflowY && layout_module_default["dds-o-y"], display && layout_module_default["dds-display"], textAlign && layout_module_default["dds-text-align"], flexDirection && layout_module_default["dds-flex-dir"], gap && layout_module_default["dds-gap"], columnGap && layout_module_default["dds-c-gap"], rowGap && layout_module_default["dds-r-gap"], alignContent && layout_module_default["dds-a-c"], alignItems && layout_module_default["dds-a-i"], justifyContent && layout_module_default["dds-j-c"], justifyItems && layout_module_default["dds-j-i"], placeItems && layout_module_default["dds-pl-i"], flexWrap && layout_module_default["dds-wrap"], flexBasis && layout_module_default["dds-basis"], flexFlow && layout_module_default["dds-flow"], wordBreak && layout_module_default["dds-word-break"]), {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShowHide, { ...getBaseHTMLProps(id, cn(className, hasValue(padding) && layout_module_default["dds-p"], hasValue(paddingInline) && layout_module_default["dds-p-i"], hasValue(paddingBlock) && layout_module_default["dds-p-b"], hasValue(margin) && layout_module_default["dds-m"], hasValue(marginInline) && layout_module_default["dds-m-i"], hasValue(marginBlock) && layout_module_default["dds-m-b"], hasValue(height) && layout_module_default["dds-h"], hasValue(maxHeight) && layout_module_default["dds-max-h"], hasValue(minHeight) && layout_module_default["dds-min-h"], hasValue(width) && layout_module_default["dds-w"], hasValue(maxWidth) && layout_module_default["dds-max-w"], hasValue(minWidth) && layout_module_default["dds-min-w"], hasValue(position) && layout_module_default["dds-pos"], hasValue(left) && layout_module_default["dds-l"], hasValue(right) && layout_module_default["dds-r"], hasValue(top) && layout_module_default["dds-t"], hasValue(bottom) && layout_module_default["dds-b"], hasValue(overflow) && layout_module_default["dds-o"], hasValue(overflowX) && layout_module_default["dds-o-x"], hasValue(overflowY) && layout_module_default["dds-o-y"], hasValue(display) && layout_module_default["dds-display"], hasValue(textAlign) && layout_module_default["dds-text-align"], hasValue(flex) && layout_module_default["dds-flex"], hasValue(flexDirection) && layout_module_default["dds-flex-dir"], hasValue(gap) && layout_module_default["dds-gap"], hasValue(columnGap) && layout_module_default["dds-c-gap"], hasValue(rowGap) && layout_module_default["dds-r-gap"], hasValue(alignContent) && layout_module_default["dds-a-c"], hasValue(alignItems) && layout_module_default["dds-a-i"], hasValue(justifyContent) && layout_module_default["dds-j-c"], hasValue(justifyItems) && layout_module_default["dds-j-i"], hasValue(placeItems) && layout_module_default["dds-pl-i"], hasValue(flexWrap) && layout_module_default["dds-wrap"], hasValue(flexBasis) && layout_module_default["dds-basis"], hasValue(flexFlow) && layout_module_default["dds-flow"], hasValue(wordBreak) && layout_module_default["dds-word-break"], hasValue(zIndex) && layout_module_default["dds-z-index"]), {
 		...style,
 		...responsiveStyles
 	}, htmlProps, rest) });
@@ -1546,7 +1504,7 @@ const Bleed = ({ id, className, style, htmlProps, bleedMarginBlock, bleedMarginI
 		...getResponsiveCSSProperties(bleedMarginBlock, "r", "bleed-m-b", true),
 		...reflStyles
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, { ...getBaseHTMLProps(id, cn(className, bleedMarginInline && layout_module_default["dds-bleed-m-i"], bleedMarginBlock && layout_module_default["dds-bleed-m-b"], bleedMarginInline && reflectivePadding && layout_module_default["dds-p-i"], bleedMarginBlock && reflectivePadding && layout_module_default["dds-p-b"]), {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, { ...getBaseHTMLProps(id, cn(className, hasValue(bleedMarginInline) && layout_module_default["dds-bleed-m-i"], hasValue(bleedMarginBlock) && layout_module_default["dds-bleed-m-b"], hasValue(bleedMarginInline) && reflectivePadding && layout_module_default["dds-p-i"], hasValue(bleedMarginBlock) && reflectivePadding && layout_module_default["dds-p-b"]), {
 		...style,
 		...responsiveStyles
 	}, htmlProps, rest) });
@@ -1622,7 +1580,7 @@ const Grid = ({ id, className, htmlProps, defaultPageLayout = true, display = "g
 		...getResponsiveCSSProperties(gridTemplateAreas, "r", "grid-template-areas")
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
-		...getBaseHTMLProps(id, cn(className, resolvedGridTemplateColumns && Grid_module_default["dds-grid-template-columns"], grid && Grid_module_default["dds-grid"], gridAutoColumns && Grid_module_default["dds-grid-auto-columns"], gridAutoFlow && Grid_module_default["dds-grid-auto-flow"], gridAutoRows && Grid_module_default["dds-grid-auto-rows"], gridTemplate && Grid_module_default["dds-grid-template"], gridTemplateRows && Grid_module_default["dds-grid-template-rows"], gridTemplateAreas && Grid_module_default["dds-grid-template-areas"]), {
+		...getBaseHTMLProps(id, cn(className, hasValue(resolvedGridTemplateColumns) && Grid_module_default["dds-grid-template-columns"], hasValue(grid) && Grid_module_default["dds-grid"], hasValue(gridAutoColumns) && Grid_module_default["dds-grid-auto-columns"], hasValue(gridAutoFlow) && Grid_module_default["dds-grid-auto-flow"], hasValue(gridAutoRows) && Grid_module_default["dds-grid-auto-rows"], hasValue(gridTemplate) && Grid_module_default["dds-grid-template"], hasValue(gridTemplateRows) && Grid_module_default["dds-grid-template-rows"], hasValue(gridTemplateAreas) && Grid_module_default["dds-grid-template-areas"]), {
 			...style,
 			...styleVariables
 		}, htmlProps, rest),
@@ -1642,7 +1600,7 @@ const GridChild = ({ id, className, htmlProps, style, gridRow, gridArea, justify
 		...getResponsiveCSSProperties(justifySelf, "r", "j-self"),
 		...getResponsiveCSSProperties(columnsOccupied, "r", "grid-column")
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, { ...getBaseHTMLProps(id, cn(className, Grid_module_default["child-col-count"], gridRow && Grid_module_default["dds-grid-row"], gridArea && Grid_module_default["dds-grid-area"], justifySelf && Grid_module_default["dds-j-self"], columnsOccupied && Grid_module_default["dds-grid-column"], columnsOccupied === "firstHalf" && Grid_module_default["child--first-half"], columnsOccupied === "secondHalf" && Grid_module_default["child--second-half"]), {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, { ...getBaseHTMLProps(id, cn(className, Grid_module_default["child-col-count"], hasValue(gridRow) && Grid_module_default["dds-grid-row"], hasValue(gridArea) && Grid_module_default["dds-grid-area"], hasValue(justifySelf) && Grid_module_default["dds-j-self"], hasValue(columnsOccupied) && Grid_module_default["dds-grid-column"], columnsOccupied === "firstHalf" && Grid_module_default["child--first-half"], columnsOccupied === "secondHalf" && Grid_module_default["child--second-half"]), {
 		...style,
 		...styleVariables
 	}, htmlProps, rest) });
@@ -1701,6 +1659,80 @@ const HStack = ({ id, className, style, htmlProps, ...rest }) => {
 };
 HStack.displayName = "HStack";
 //#endregion
+//#region src/components/helpers/Backdrop/Backdrop.tsx
+/**
+* Backdrop-komponent, viser et bakgrunnslag for et element som skal låse applikasjonen i bakgrunnen (Modal el.l.).
+*
+* @component
+* @param {Object} props - Props for komponenten.
+* @param {boolean} [props.isMounted] - Angir om backdropen skal være synlig (`true`) eller skjult (`false`). Standard er `false`.
+* @param {'drawer' | 'modal'} props.zIndex - Bestemmer hvilken z-index-klasse som skal brukes, avhengig av konteksten (f.eks. drawer eller modal).
+* @param {React.ReactNode} [props.children] - Eventuelt innhold som skal vises inni backdropen.
+* @param {React.MouseEventHandler<HTMLDivElement>} [props.onClick] - Klikkhåndterer for backdropen, f.eks. for å lukke en modal.
+* @param {React.Ref<HTMLDivElement>} [props.ref] - Referanse til DOM-elementet.
+*
+* @returns {JSX.Element} Et `<div>`-element med riktige klasser basert på synlighet og z-index.
+
+* @example
+* ```tsx
+* <Backdrop isMounted={true} zIndex="modal" onClick={handleClose}>
+*   <ModalContent />
+* </Backdrop>
+* ```
+*/
+const Backdrop = ({ isMounted, zIndex, ...props }) => {
+	const isMountedCn = isMounted ? "visible" : "hidden";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+		className: cn(Backdrop_module_default.backdrop, Backdrop_module_default[`backdrop--${isMountedCn}`]),
+		position: "fixed",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		overflowY: "auto",
+		zIndex: `${zIndex}-backdrop`,
+		...props
+	});
+};
+Backdrop.displayName = "Backdrop";
+//#endregion
+//#region src/components/helpers/Dropdown/DropdownItem.module.css
+var DropdownItem_module_default = {
+	"item": "dds-DropdownItem-module__item",
+	"default": "dds-DropdownItem-module__default",
+	"danger": "dds-DropdownItem-module__danger",
+	"item--interactive": "dds-DropdownItem-module__item--interactive",
+	"item--loading": "dds-DropdownItem-module__item--loading"
+};
+//#endregion
+//#region src/components/Icon/Icon.tsx
+const getSize = (iconSize) => {
+	switch (iconSize) {
+		case "small": return "var(--dds-size-icon-small)";
+		case "medium": return "var(--dds-size-icon-medium)";
+		case "large": return "var(--dds-size-icon-large)";
+		case "component": return "var(--dds-size-icon-component)";
+		case "inherit": return "1em";
+		default: return "var(--dds-size-icon-medium)";
+	}
+};
+function Icon(props) {
+	const { id, iconSize = "medium", color = "currentcolor", icon, className, style, htmlProps, iconState, ...rest } = props;
+	const size = getSize(iconSize);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icon, {
+		...getBaseHTMLProps(id, className, style, htmlProps, rest),
+		height: size,
+		width: size,
+		fill: color,
+		"aria-hidden": htmlProps?.["aria-hidden"] ?? true,
+		...iconState ? { iconState } : {}
+	});
+}
+Icon.displayName = "Icon";
+//#endregion
 //#region src/components/Spinner/Spinner.module.css
 var Spinner_module_default = {
 	"svg": "dds-Spinner-module__svg",
@@ -2159,6 +2191,14 @@ function ArrowUpIcon(props) {
 	});
 }
 //#endregion
+//#region src/components/Icon/icons/arrowUpRight.tsx
+function ArrowUpRightIcon(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SvgWrapper, {
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M16.25 17V7.75H7C6.58579 7.75 6.25 7.41421 6.25 7C6.25 6.58579 6.58579 6.25 7 6.25H17C17.4142 6.25 17.75 6.58579 17.75 7V17C17.75 17.4142 17.4142 17.75 17 17.75C16.5858 17.75 16.25 17.4142 16.25 17Z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M16.4697 6.46973C16.7626 6.17683 17.2374 6.17683 17.5303 6.46973C17.8232 6.76262 17.8232 7.23738 17.5303 7.53027L7.53027 17.5303C7.23738 17.8232 6.76262 17.8232 6.46973 17.5303C6.17683 17.2374 6.17683 16.7626 6.46973 16.4697L16.4697 6.46973Z" })]
+	});
+}
+//#endregion
 //#region src/components/Icon/icons/attachment.tsx
 function AttachmentIcon(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgWrapper, {
@@ -2494,6 +2534,31 @@ function DeathsIcon(props) {
 	});
 }
 //#endregion
+//#region src/components/Icon/icons/desktop.tsx
+function DesktopIcon(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SvgWrapper, {
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11.25 21V17C11.25 16.5858 11.5858 16.25 12 16.25C12.4142 16.25 12.75 16.5858 12.75 17V21C12.75 21.4142 12.4142 21.75 12 21.75C11.5858 21.75 11.25 21.4142 11.25 21Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 20.25C18.4142 20.25 18.75 20.5858 18.75 21C18.75 21.4142 18.4142 21.75 18 21.75L6 21.75C5.58579 21.75 5.25 21.4142 5.25 21C5.25 20.5858 5.58579 20.25 6 20.25L18 20.25Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M21.25 6C21.25 5.30964 20.6904 4.75 20 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V15C2.75 15.6904 3.30964 16.25 4 16.25H20C20.6904 16.25 21.25 15.6904 21.25 15V6ZM22.75 15C22.75 16.5188 21.5188 17.75 20 17.75H4C2.48122 17.75 1.25 16.5188 1.25 15V6C1.25 4.48122 2.48122 3.25 4 3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V15Z" })
+		]
+	});
+}
+//#endregion
+//#region src/components/Icon/icons/desktopMobile.tsx
+function DesktopMobileIcon(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SvgWrapper, {
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M19.25 8.5V6C19.25 5.66848 19.1182 5.35063 18.8838 5.11621C18.6494 4.88179 18.3315 4.75 18 4.75H4C3.66848 4.75 3.35063 4.88179 3.11621 5.11621C2.88179 5.35063 2.75 5.66848 2.75 6V15C2.75 15.3315 2.88179 15.6494 3.11621 15.8838C3.35063 16.1182 3.66848 16.25 4 16.25H12.5C12.9142 16.25 13.25 16.5858 13.25 17C13.25 17.4142 12.9142 17.75 12.5 17.75H4C3.27065 17.75 2.57139 17.4601 2.05566 16.9443C1.53994 16.4286 1.25 15.7293 1.25 15V6C1.25 5.27065 1.53994 4.57139 2.05566 4.05566C2.57139 3.53994 3.27065 3.25 4 3.25H18C18.7293 3.25 19.4286 3.53994 19.9443 4.05566C20.4601 4.57139 20.75 5.27065 20.75 6V8.5C20.75 8.91421 20.4142 9.25 20 9.25C19.5858 9.25 19.25 8.91421 19.25 8.5Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10.25 21V17C10.25 16.5858 10.5858 16.25 11 16.25C11.4142 16.25 11.75 16.5858 11.75 17V21C11.75 21.4142 11.4142 21.75 11 21.75C10.5858 21.75 10.25 21.4142 10.25 21Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M13 20.25C13.4142 20.25 13.75 20.5858 13.75 21C13.75 21.4142 13.4142 21.75 13 21.75H6C5.58579 21.75 5.25 21.4142 5.25 21C5.25 20.5858 5.58579 20.25 6 20.25H13Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M21.25 14C21.25 13.3096 20.6904 12.75 20 12.75H18C17.3096 12.75 16.75 13.3096 16.75 14V20C16.75 20.6904 17.3096 21.25 18 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V14ZM22.75 20C22.75 21.5188 21.5188 22.75 20 22.75H18C16.4812 22.75 15.25 21.5188 15.25 20V14C15.25 12.4812 16.4812 11.25 18 11.25H20C21.5188 11.25 22.75 12.4812 22.75 14V20Z" })
+		]
+	});
+}
+//#endregion
 //#region src/components/Icon/icons/doubleChevronLeft.tsx
 function DoubleChevronLeftIcon(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SvgWrapper, {
@@ -3437,6 +3502,59 @@ function StarHalfFilledIcon(props) {
 	});
 }
 //#endregion
+//#region src/components/Icon/icons/stickyNote.tsx
+function StickyNoteIcon(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgWrapper, {
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.25 19V5C2.25 4.27066 2.53994 3.57139 3.05566 3.05566C3.57139 2.53994 4.27066 2.25 5 2.25H15V2.25098C15.4151 2.2502 15.8263 2.33056 16.21 2.48926C16.5939 2.64814 16.9429 2.88158 17.2363 3.17578L20.8232 6.7627C21.1179 7.05626 21.3517 7.40573 21.5107 7.79004C21.6694 8.17367 21.7508 8.58486 21.75 9V19C21.75 19.7293 21.4601 20.4286 20.9443 20.9443C20.4286 21.4601 19.7293 21.75 19 21.75H5C4.27065 21.75 3.57139 21.4601 3.05566 20.9443C2.53994 20.4286 2.25 19.7293 2.25 19ZM15.75 8C15.75 8.0663 15.7764 8.12987 15.8232 8.17676C15.8701 8.22364 15.9337 8.25 16 8.25H20.0713C19.9921 8.09336 19.8894 7.94947 19.7646 7.8252L16.1748 4.23535C16.0505 4.11063 15.9066 4.00793 15.75 3.92871V8ZM3.75 19C3.75 19.3315 3.88179 19.6494 4.11621 19.8838C4.35063 20.1182 4.66848 20.25 5 20.25H19C19.3315 20.25 19.6494 20.1182 19.8838 19.8838C20.1182 19.6494 20.25 19.3315 20.25 19V9.75H16C15.5359 9.75 15.0909 9.56549 14.7627 9.2373C14.4345 8.90912 14.25 8.46413 14.25 8V3.75H5C4.66848 3.75 4.35063 3.88179 4.11621 4.11621C3.88179 4.35063 3.75 4.66848 3.75 5V19Z" })
+	});
+}
+//#endregion
+//#region src/components/Icon/icons/support.tsx
+function SupportIcon(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SvgWrapper, {
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7.25 13C7.25 12.6685 7.11821 12.3506 6.88379 12.1162C6.64937 11.8818 6.33152 11.75 6 11.75H3.75V16C3.75 16.3315 3.88179 16.6494 4.11621 16.8838C4.35063 17.1182 4.66848 17.25 5 17.25H6C6.33152 17.25 6.64937 17.1182 6.88379 16.8838C7.0888 16.6788 7.21564 16.41 7.24414 16.124L7.25 16V13ZM8.75 16C8.75 16.7293 8.46006 17.4286 7.94434 17.9443C7.42861 18.4601 6.72935 18.75 6 18.75H5C4.27065 18.75 3.57139 18.4601 3.05566 17.9443C2.53994 17.4286 2.25 16.7293 2.25 16V11C2.25 9.71961 2.5022 8.45148 2.99219 7.26855C3.48217 6.08573 4.20016 5.01078 5.10547 4.10547C6.01078 3.20016 7.08573 2.48217 8.26855 1.99219C9.45148 1.5022 10.7196 1.25 12 1.25C13.2804 1.25 14.5485 1.5022 15.7314 1.99219C16.9143 2.48217 17.9892 3.20016 18.8945 4.10547C19.7998 5.01078 20.5178 6.08573 21.0078 7.26855C21.4978 8.45148 21.75 9.71961 21.75 11V16C21.75 16.7293 21.4601 17.4286 20.9443 17.9443C20.4286 18.4601 19.7293 18.75 19 18.75H18C17.2707 18.75 16.5714 18.4601 16.0557 17.9443C15.6043 17.493 15.3261 16.9011 15.2637 16.2715L15.25 16V13C15.25 12.2707 15.5399 11.5714 16.0557 11.0557C16.5714 10.5399 17.2707 10.25 18 10.25H20.2148C20.1394 9.42375 19.9407 8.61195 19.6221 7.84277C19.2075 6.84186 18.6001 5.93209 17.834 5.16602C17.0679 4.39995 16.1581 3.79253 15.1572 3.37793C14.1563 2.96333 13.0834 2.75 12 2.75C10.9166 2.75 9.84371 2.96333 8.84277 3.37793C7.84186 3.79253 6.93209 4.39995 6.16602 5.16602C5.39995 5.93209 4.79253 6.84186 4.37793 7.84277C4.05933 8.61195 3.86059 9.42375 3.78516 10.25H6C6.72935 10.25 7.42861 10.5399 7.94434 11.0557C8.46006 11.5714 8.75 12.2707 8.75 13V16ZM16.75 16C16.75 16.3315 16.8818 16.6494 17.1162 16.8838C17.3506 17.1182 17.6685 17.25 18 17.25H19C19.3315 17.25 19.6494 17.1182 19.8838 16.8838C20.1182 16.6494 20.25 16.3315 20.25 16V11.75H18C17.6685 11.75 17.3506 11.8818 17.1162 12.1162C16.8818 12.3506 16.75 12.6685 16.75 13V16Z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20.25 18V16C20.25 15.5858 20.5858 15.25 21 15.25C21.4142 15.25 21.75 15.5858 21.75 16V18C21.75 19.2598 21.2492 20.4676 20.3584 21.3584C19.4676 22.2492 18.2598 22.75 17 22.75H12C11.5858 22.75 11.25 22.4142 11.25 22C11.25 21.5858 11.5858 21.25 12 21.25H17C17.862 21.25 18.6884 20.9073 19.2979 20.2979C19.9073 19.6884 20.25 18.862 20.25 18Z" })]
+	});
+}
+//#endregion
+//#region src/components/Icon/icons/sun.tsx
+function SunIcon(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SvgWrapper, {
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M16.25 12C16.25 9.65279 14.3472 7.75 12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 14.3472 9.65279 16.25 12 16.25C14.3472 16.25 16.25 14.3472 16.25 12ZM17.75 12C17.75 15.1756 15.1756 17.75 12 17.75C8.82436 17.75 6.25 15.1756 6.25 12C6.25 8.82436 8.82436 6.25 12 6.25C15.1756 6.25 17.75 8.82436 17.75 12Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11.25 22V20C11.25 19.5858 11.5858 19.25 12 19.25C12.4142 19.25 12.75 19.5858 12.75 20V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4.39972 4.39966C4.69261 4.10677 5.16737 4.10677 5.46027 4.39966L6.87042 5.80981C7.16316 6.10272 7.16326 6.57752 6.87042 6.87036C6.57758 7.1632 6.10278 7.1631 5.80988 6.87036L4.39972 5.46021C4.10683 5.16731 4.10683 4.69255 4.39972 4.39966Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M17.1297 17.1296C17.4226 16.8367 17.8974 16.8367 18.1902 17.1296L19.6004 18.5398C19.8931 18.8327 19.8932 19.3075 19.6004 19.6003C19.3076 19.8932 18.8328 19.8931 18.5399 19.6003L17.1297 18.1902C16.8368 17.8973 16.8368 17.4225 17.1297 17.1296Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 11.25C4.41421 11.25 4.75 11.5858 4.75 12C4.75 12.4142 4.41421 12.75 4 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H4Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M22 11.25C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H20C19.5858 12.75 19.25 12.4142 19.25 12C19.25 11.5858 19.5858 11.25 20 11.25H22Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.80988 17.1296C6.10278 16.8368 6.57756 16.8368 6.87042 17.1296C7.16321 17.4225 7.16321 17.8973 6.87042 18.1902L5.46027 19.6003C5.16739 19.8931 4.69259 19.8931 4.39972 19.6003C4.10685 19.3075 4.1069 18.8327 4.39972 18.5398L5.80988 17.1296Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18.5399 4.39966C18.8328 4.10684 19.3075 4.10679 19.6004 4.39966C19.8932 4.69253 19.8932 5.16733 19.6004 5.46021L18.1902 6.87036C17.8974 7.16315 17.4226 7.16315 17.1297 6.87036C16.8368 6.57749 16.8369 6.10271 17.1297 5.80981L18.5399 4.39966Z" })
+		]
+	});
+}
+//#endregion
+//#region src/components/Icon/icons/sunHalfFilled.tsx
+function SunHalfFilledIcon(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SvgWrapper, {
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M16.25 12C16.25 9.65279 14.3472 7.75 12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 14.3472 9.65279 16.25 12 16.25C14.3472 16.25 16.25 14.3472 16.25 12ZM17.75 12C17.75 15.1756 15.1756 17.75 12 17.75C8.82436 17.75 6.25 15.1756 6.25 12C6.25 8.82436 8.82436 6.25 12 6.25C15.1756 6.25 17.75 8.82436 17.75 12Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7 12C7 14.7614 9.23858 17 12 17V7C9.23858 7 7 9.23858 7 12Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11.25 22V20C11.25 19.5858 11.5858 19.25 12 19.25C12.4142 19.25 12.75 19.5858 12.75 20V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4.39972 4.39966C4.69261 4.10677 5.16737 4.10677 5.46027 4.39966L6.87042 5.80981C7.16316 6.10272 7.16326 6.57752 6.87042 6.87036C6.57758 7.1632 6.10278 7.1631 5.80988 6.87036L4.39972 5.46021C4.10683 5.16731 4.10683 4.69255 4.39972 4.39966Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M17.1297 17.1296C17.4226 16.8367 17.8974 16.8367 18.1902 17.1296L19.6004 18.5398C19.8931 18.8327 19.8932 19.3075 19.6004 19.6003C19.3076 19.8932 18.8328 19.8931 18.5399 19.6003L17.1297 18.1902C16.8368 17.8973 16.8368 17.4225 17.1297 17.1296Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 11.25C4.41421 11.25 4.75 11.5858 4.75 12C4.75 12.4142 4.41421 12.75 4 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H4Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M22 11.25C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H20C19.5858 12.75 19.25 12.4142 19.25 12C19.25 11.5858 19.5858 11.25 20 11.25H22Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.80988 17.1296C6.10278 16.8368 6.57756 16.8368 6.87042 17.1296C7.16321 17.4225 7.16321 17.8973 6.87042 18.1902L5.46027 19.6003C5.16739 19.8931 4.69259 19.8931 4.39972 19.6003C4.10685 19.3075 4.1069 18.8327 4.39972 18.5398L5.80988 17.1296Z" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18.5399 4.39966C18.8328 4.10684 19.3075 4.10679 19.6004 4.39966C19.8932 4.69253 19.8932 5.16733 19.6004 5.46021L18.1902 6.87036C17.8974 7.16315 17.4226 7.16315 17.1297 6.87036C16.8368 6.57749 16.8369 6.10271 17.1297 5.80981L18.5399 4.39966Z" })
+		]
+	});
+}
+//#endregion
 //#region src/components/Icon/icons/sync.tsx
 function SyncIcon(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgWrapper, {
@@ -3783,40 +3901,6 @@ function NotebookPenIcon(props) {
 	});
 }
 //#endregion
-//#region src/components/Icon/icons/stickyNote.tsx
-function StickyNoteIcon(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgWrapper, {
-		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.25 19V5C2.25 4.27066 2.53994 3.57139 3.05566 3.05566C3.57139 2.53994 4.27066 2.25 5 2.25H15V2.25098C15.4151 2.2502 15.8263 2.33056 16.21 2.48926C16.5939 2.64814 16.9429 2.88158 17.2363 3.17578L20.8232 6.7627C21.1179 7.05626 21.3517 7.40573 21.5107 7.79004C21.6694 8.17367 21.7508 8.58486 21.75 9V19C21.75 19.7293 21.4601 20.4286 20.9443 20.9443C20.4286 21.4601 19.7293 21.75 19 21.75H5C4.27065 21.75 3.57139 21.4601 3.05566 20.9443C2.53994 20.4286 2.25 19.7293 2.25 19ZM15.75 8C15.75 8.0663 15.7764 8.12987 15.8232 8.17676C15.8701 8.22364 15.9337 8.25 16 8.25H20.0713C19.9921 8.09336 19.8894 7.94947 19.7646 7.8252L16.1748 4.23535C16.0505 4.11063 15.9066 4.00793 15.75 3.92871V8ZM3.75 19C3.75 19.3315 3.88179 19.6494 4.11621 19.8838C4.35063 20.1182 4.66848 20.25 5 20.25H19C19.3315 20.25 19.6494 20.1182 19.8838 19.8838C20.1182 19.6494 20.25 19.3315 20.25 19V9.75H16C15.5359 9.75 15.0909 9.56549 14.7627 9.2373C14.4345 8.90912 14.25 8.46413 14.25 8V3.75H5C4.66848 3.75 4.35063 3.88179 4.11621 4.11621C3.88179 4.35063 3.75 4.66848 3.75 5V19Z" })
-	});
-}
-//#endregion
-//#region src/components/Icon/icons/sun.tsx
-function SunIcon(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SvgWrapper, {
-		...props,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M16.25 12C16.25 9.65279 14.3472 7.75 12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 14.3472 9.65279 16.25 12 16.25C14.3472 16.25 16.25 14.3472 16.25 12ZM17.75 12C17.75 15.1756 15.1756 17.75 12 17.75C8.82436 17.75 6.25 15.1756 6.25 12C6.25 8.82436 8.82436 6.25 12 6.25C15.1756 6.25 17.75 8.82436 17.75 12Z" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4Z" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11.25 22V20C11.25 19.5858 11.5858 19.25 12 19.25C12.4142 19.25 12.75 19.5858 12.75 20V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22Z" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4.39972 4.39966C4.69261 4.10677 5.16737 4.10677 5.46027 4.39966L6.87042 5.80981C7.16316 6.10272 7.16326 6.57752 6.87042 6.87036C6.57758 7.1632 6.10278 7.1631 5.80988 6.87036L4.39972 5.46021C4.10683 5.16731 4.10683 4.69255 4.39972 4.39966Z" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M17.1297 17.1296C17.4226 16.8367 17.8974 16.8367 18.1902 17.1296L19.6004 18.5398C19.8931 18.8327 19.8932 19.3075 19.6004 19.6003C19.3076 19.8932 18.8328 19.8931 18.5399 19.6003L17.1297 18.1902C16.8368 17.8973 16.8368 17.4225 17.1297 17.1296Z" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 11.25C4.41421 11.25 4.75 11.5858 4.75 12C4.75 12.4142 4.41421 12.75 4 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H4Z" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M22 11.25C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H20C19.5858 12.75 19.25 12.4142 19.25 12C19.25 11.5858 19.5858 11.25 20 11.25H22Z" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.80988 17.1296C6.10278 16.8368 6.57756 16.8368 6.87042 17.1296C7.16321 17.4225 7.16321 17.8973 6.87042 18.1902L5.46027 19.6003C5.16739 19.8931 4.69259 19.8931 4.39972 19.6003C4.10685 19.3075 4.1069 18.8327 4.39972 18.5398L5.80988 17.1296Z" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18.5399 4.39966C18.8328 4.10684 19.3075 4.10679 19.6004 4.39966C19.8932 4.69253 19.8932 5.16733 19.6004 5.46021L18.1902 6.87036C17.8974 7.16315 17.4226 7.16315 17.1297 6.87036C16.8368 6.57749 16.8369 6.10271 17.1297 5.80981L18.5399 4.39966Z" })
-		]
-	});
-}
-//#endregion
-//#region src/components/Icon/icons/support.tsx
-function SupportIcon(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SvgWrapper, {
-		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7.25 13C7.25 12.6685 7.11821 12.3506 6.88379 12.1162C6.64937 11.8818 6.33152 11.75 6 11.75H3.75V16C3.75 16.3315 3.88179 16.6494 4.11621 16.8838C4.35063 17.1182 4.66848 17.25 5 17.25H6C6.33152 17.25 6.64937 17.1182 6.88379 16.8838C7.0888 16.6788 7.21564 16.41 7.24414 16.124L7.25 16V13ZM8.75 16C8.75 16.7293 8.46006 17.4286 7.94434 17.9443C7.42861 18.4601 6.72935 18.75 6 18.75H5C4.27065 18.75 3.57139 18.4601 3.05566 17.9443C2.53994 17.4286 2.25 16.7293 2.25 16V11C2.25 9.71961 2.5022 8.45148 2.99219 7.26855C3.48217 6.08573 4.20016 5.01078 5.10547 4.10547C6.01078 3.20016 7.08573 2.48217 8.26855 1.99219C9.45148 1.5022 10.7196 1.25 12 1.25C13.2804 1.25 14.5485 1.5022 15.7314 1.99219C16.9143 2.48217 17.9892 3.20016 18.8945 4.10547C19.7998 5.01078 20.5178 6.08573 21.0078 7.26855C21.4978 8.45148 21.75 9.71961 21.75 11V16C21.75 16.7293 21.4601 17.4286 20.9443 17.9443C20.4286 18.4601 19.7293 18.75 19 18.75H18C17.2707 18.75 16.5714 18.4601 16.0557 17.9443C15.6043 17.493 15.3261 16.9011 15.2637 16.2715L15.25 16V13C15.25 12.2707 15.5399 11.5714 16.0557 11.0557C16.5714 10.5399 17.2707 10.25 18 10.25H20.2148C20.1394 9.42375 19.9407 8.61195 19.6221 7.84277C19.2075 6.84186 18.6001 5.93209 17.834 5.16602C17.0679 4.39995 16.1581 3.79253 15.1572 3.37793C14.1563 2.96333 13.0834 2.75 12 2.75C10.9166 2.75 9.84371 2.96333 8.84277 3.37793C7.84186 3.79253 6.93209 4.39995 6.16602 5.16602C5.39995 5.93209 4.79253 6.84186 4.37793 7.84277C4.05933 8.61195 3.86059 9.42375 3.78516 10.25H6C6.72935 10.25 7.42861 10.5399 7.94434 11.0557C8.46006 11.5714 8.75 12.2707 8.75 13V16ZM16.75 16C16.75 16.3315 16.8818 16.6494 17.1162 16.8838C17.3506 17.1182 17.6685 17.25 18 17.25H19C19.3315 17.25 19.6494 17.1182 19.8838 16.8838C20.1182 16.6494 20.25 16.3315 20.25 16V11.75H18C17.6685 11.75 17.3506 11.8818 17.1162 12.1162C16.8818 12.3506 16.75 12.6685 16.75 13V16Z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20.25 18V16C20.25 15.5858 20.5858 15.25 21 15.25C21.4142 15.25 21.75 15.5858 21.75 16V18C21.75 19.2598 21.2492 20.4676 20.3584 21.3584C19.4676 22.2492 18.2598 22.75 17 22.75H12C11.5858 22.75 11.25 22.4142 11.25 22C11.25 21.5858 11.5858 21.25 12 21.25H17C17.862 21.25 18.6884 20.9073 19.2979 20.2979C19.9073 19.6884 20.25 18.862 20.25 18Z" })]
-	});
-}
-//#endregion
 //#region src/components/Icon/icons/index.ts
 var icons_exports = /* @__PURE__ */ __exportAll({
 	AddressShieldedIcon: () => AddressShieldedIcon,
@@ -3828,6 +3912,7 @@ var icons_exports = /* @__PURE__ */ __exportAll({
 	ArrowLeftIcon: () => ArrowLeftIcon,
 	ArrowRightIcon: () => ArrowRightIcon,
 	ArrowUpIcon: () => ArrowUpIcon,
+	ArrowUpRightIcon: () => ArrowUpRightIcon,
 	AttachmentIcon: () => AttachmentIcon,
 	BarChartBoxedIcon: () => BarChartBoxedIcon,
 	BarChartIcon: () => BarChartIcon,
@@ -3865,6 +3950,8 @@ var icons_exports = /* @__PURE__ */ __exportAll({
 	CourtIcon: () => CourtIcon,
 	DateRangeIcon: () => DateRangeIcon,
 	DeathsIcon: () => DeathsIcon,
+	DesktopIcon: () => DesktopIcon,
+	DesktopMobileIcon: () => DesktopMobileIcon,
 	DoubleChevronLeftIcon: () => DoubleChevronLeftIcon,
 	DoubleChevronRightIcon: () => DoubleChevronRightIcon,
 	DownloadDoneIcon: () => DownloadDoneIcon,
@@ -3968,6 +4055,7 @@ var icons_exports = /* @__PURE__ */ __exportAll({
 	StarHalfFilledIcon: () => StarHalfFilledIcon,
 	StarIcon: () => StarIcon,
 	StickyNoteIcon: () => StickyNoteIcon,
+	SunHalfFilledIcon: () => SunHalfFilledIcon,
 	SunIcon: () => SunIcon,
 	SupportIcon: () => SupportIcon,
 	SyncIcon: () => SyncIcon,
@@ -4554,10 +4642,7 @@ const useOverflowMenuContext = () => {
 };
 //#endregion
 //#region src/components/OverflowMenu/OverflowMenu.module.css
-var OverflowMenu_module_default = {
-	"container": "dds-OverflowMenu-module__container",
-	"list": "dds-OverflowMenu-module__list"
-};
+var OverflowMenu_module_default = { "container": "dds-OverflowMenu-module__container" };
 //#endregion
 //#region src/components/OverflowMenu/OverflowMenu.tsx
 const OverflowMenu = ({ placement = "bottom-end", offset = 2, parentElement, portal = true, className, htmlProps = {}, ref, style, ...rest }) => {
@@ -4584,7 +4669,8 @@ const OverflowMenu = ({ placement = "bottom-end", offset = 2, parentElement, por
 		role: "menu",
 		"aria-hidden": !isOpen,
 		elevation: "medium",
-		border: "border-default"
+		border: "border-default",
+		zIndex: "overflowmenu"
 	});
 	return portal && portalTarget ? (0, react_dom.createPortal)(menu, portalTarget) : menu;
 };
@@ -5719,13 +5805,9 @@ var DateInput_module_default = {
 	"icon-wrapper--readonly": "dds-DateInput-module__icon-wrapper--readonly",
 	"popover-button--readonly": "dds-DateInput-module__popover-button--readonly",
 	"popover": "dds-DateInput-module__popover",
-	"modal-close-button-wrapper": "dds-DateInput-module__modal-close-button-wrapper",
-	"calendar": "dds-DateInput-module__calendar",
 	"calendar__header__month": "dds-DateInput-module__calendar__header__month",
 	"calendar__month-button": "dds-DateInput-module__calendar__month-button",
-	"calendar__grid-element": "dds-DateInput-module__calendar__grid-element",
 	"calendar__th": "dds-DateInput-module__calendar__th",
-	"calendar__week-number": "dds-DateInput-module__calendar__week-number",
 	"calendar__cell-button": "dds-DateInput-module__calendar__cell-button",
 	"calendar__cell-button--today": "dds-DateInput-module__calendar__cell-button--today",
 	"calendar__cell-button--default": "dds-DateInput-module__calendar__cell-button--default",
@@ -5734,6 +5816,16 @@ var DateInput_module_default = {
 	"calendar__cell-button--unavailable--today": "dds-DateInput-module__calendar__cell-button--unavailable--today"
 };
 //#endregion
+//#region src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
+function CalendarCell({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+		textAlign: "center",
+		className: cn(typographyStyles_module_default["text-color--subtle"], DateInput_module_default.calendar__th),
+		...props
+	});
+}
+CalendarCell.displayName = "CalendarCell";
+//#endregion
 //#region src/components/date-inputs/DatePicker/constants.ts
 const LOCALE = {
 	nb: "nb-NO",
@@ -5743,8 +5835,8 @@ const LOCALE = {
 	se: "se-NO"
 };
 //#endregion
-//#region src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
-function CalendarCell({ date, state, onClose }) {
+//#region src/components/date-inputs/DatePicker/Calendar/CalendarDate.tsx
+function CalendarDate$1({ date, state, onClose }) {
 	const ref = (0, react.useRef)(null);
 	const { buttonProps, cellProps, isOutsideVisibleRange, formattedDate, isSelected, isDisabled, isUnavailable } = (0, _react_aria_calendar.useCalendarCell)({ date }, state, ref);
 	if (isOutsideVisibleRange) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { ...cellProps });
@@ -5755,17 +5847,23 @@ function CalendarCell({ date, state, onClose }) {
 	const isUnavailableToday = isEffectivelyUnavailable && (0, _internationalized_date.isToday)(date, "Europe/Oslo");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 		...cellProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
 			...buttonProps,
+			as: "button",
 			type: "button",
 			ref,
 			onKeyDown: closeOnKeyboardBlurForward,
-			className: cn(DateInput_module_default["calendar__grid-element"], DateInput_module_default["calendar__cell-button"], (0, _internationalized_date.isToday)(date, "Europe/Oslo") && DateInput_module_default["calendar__cell-button--today"], DateInput_module_default[`calendar__cell-button--default`], isSelected && DateInput_module_default[`calendar__cell-button--selected`], isEffectivelyUnavailable && DateInput_module_default[`calendar__cell-button--unavailable`], isUnavailableToday && DateInput_module_default["calendar__cell-button--unavailable--today"], typographyStyles_module_default["body-short-small"], _key1),
+			height: "100%",
+			width: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			className: cn(DateInput_module_default["calendar__cell-button"], (0, _internationalized_date.isToday)(date, "Europe/Oslo") && DateInput_module_default["calendar__cell-button--today"], DateInput_module_default[`calendar__cell-button--default`], isSelected && DateInput_module_default[`calendar__cell-button--selected`], isEffectivelyUnavailable && DateInput_module_default[`calendar__cell-button--unavailable`], isUnavailableToday && DateInput_module_default["calendar__cell-button--unavailable--today"], typographyStyles_module_default["body-short-small"], _key1),
 			children: formattedDate
 		})
 	});
 }
-CalendarCell.displayName = "CalendarCell";
+CalendarDate$1.displayName = "CalendarDate";
 //#endregion
 //#region src/components/date-inputs/utils/getWeekNumber.ts
 /**
@@ -5885,8 +5983,9 @@ const CalendarPopoverContent = ({ children, className, smallScreenBreakpoint })
 				ref: modalRef,
 				className: cn(DateInput_module_default.popover, className),
 				...paperStyleProps,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: DateInput_module_default["modal-close-button-wrapper"],
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+					display: "flex",
+					justifyContent: "flex-end",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						ref: closeButtonRef,
 						icon: CloseIcon,
@@ -5905,6 +6004,7 @@ const CalendarPopoverContent = ({ children, className, smallScreenBreakpoint })
 		className: cn(DateInput_module_default.popover, className),
 		style: floatingStyles.floating,
 		...paperStyleProps,
+		zIndex: "popover",
 		children
 	})] });
 };
@@ -5946,7 +6046,6 @@ function CalendarGrid({ state, ...props }) {
 		}
 	];
 	const { showWeekNumbers, onClose } = (0, react.useContext)(CalendarPopoverContext);
-	const thCn = cn(DateInput_module_default["calendar__grid-element"], typographyStyles_module_default["text-color--subtle"], DateInput_module_default.calendar__th);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
 		...gridProps,
 		onKeyDown: (e) => {
@@ -5957,14 +6056,14 @@ function CalendarGrid({ state, ...props }) {
 		className: typographyStyles_module_default["body-short-xsmall"],
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
 			...headerProps,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [showWeekNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("th", {
-				className: cn(thCn),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [showWeekNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CalendarCell, {
+				as: "th",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"aria-hidden": true,
 					children: "#"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisuallyHidden, { children: t(texts$24.weekNumber) })]
-			}), weekDays.map((day, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("th", {
-				className: thCn,
+			}), weekDays.map((day, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CalendarCell, {
+				as: "th",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"aria-hidden": true,
 					children: day.short
@@ -5974,10 +6073,10 @@ function CalendarGrid({ state, ...props }) {
 			const datesInWeek = state.getDatesInWeek(weekIndex);
 			const firstExistingDay = datesInWeek.find(Boolean);
 			const weekNumber = firstExistingDay ? getWeekNumber(firstExistingDay) : "";
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [showWeekNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-				className: cn(thCn, DateInput_module_default["calendar__week-number"]),
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [showWeekNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarCell, {
+				as: "td",
 				children: weekNumber
-			}), datesInWeek.map((date, i) => date ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarCell, {
+			}), datesInWeek.map((date, i) => date ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarDate$1, {
 				state,
 				date,
 				onClose
@@ -6409,7 +6508,7 @@ function DateInput({ errorMessage, tip, componentSize = "medium", style, classNa
 				className: cn(Input_module_default["input-group"], typographyStyles_module_default[`body-short-${componentSize}`], DateInput_module_default["input-group"]),
 				children: [
 					button,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HStack, {
 						...fieldProps,
 						ref: internalRef,
 						className: cn(Input_module_default.input, Input_module_default[`input--${componentSize}`], Input_module_default["input--stateful"], Input_module_default["input--hover"], hasErrorMessage && Input_module_default["input--stateful-danger"], clearable && Input_module_default[`input-with-btn-right--${componentSize}`], DateInput_module_default["date-segment-container"], Input_module_default[`input-with-icon--${componentSize}`], isOpen && focus_module_default.focused, disabled && "disabled", disabled && Input_module_default.disabled, active && "active", readOnly && "read-only", readOnly && Input_module_default["read-only"], focus_module_default["focusable-within"]),
@@ -6707,8 +6806,13 @@ const DescriptionListTerm = (props) => {
 DescriptionListTerm.displayName = "DescriptionListTerm";
 //#endregion
 //#region src/components/DescriptionList/DescriptionListDesc.tsx
-const DescriptionListDesc = ({ children, icon, id, className, style, htmlProps, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", {
+const DescriptionListDesc = ({ children, icon, id, className, style, htmlProps, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box, {
 	...getBaseHTMLProps(id, cn(className, DescriptionList_module_default.desc), style, htmlProps, rest),
+	as: "dd",
+	display: "flex",
+	alignItems: "center",
+	gap: "x0.25",
+	marginInline: "x0",
 	children: [
 		icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { icon }),
 		" ",
@@ -6880,6 +6984,7 @@ const Drawer = ({ children, header, placement = "right", parentElement, size = "
 		justifyContent: "flex-start",
 		padding: "var(--dds-drawer-container-padding)",
 		borderRadius: "0",
+		zIndex: "drawer",
 		...getBaseHTMLProps(drawerId, cn(className, Drawer_module_default.container, Drawer_module_default[`container--${placement}`], Drawer_module_default[`container--${placement}-${isOpenCn}`], focus_module_default["focusable--inset"]), style, htmlProps, rest),
 		elevation: "large",
 		"aria-labelledby": headerId,
@@ -7285,9 +7390,6 @@ const texts$17 = createTexts({ send: {
 	se: "Sádde"
 } });
 //#endregion
-//#region src/components/Tooltip/Tooltip.module.css
-var Tooltip_module_default = { "paper": "dds-Tooltip-module__paper" };
-//#endregion
 //#region src/components/Tooltip/Tooltip.tsx
 const Tooltip = ({ text, placement = "bottom", children, tooltipId, delay = 100, style, onMouseLeave, onMouseOver, keepMounted = true, id, ref, className, htmlProps, ...rest }) => {
 	const generatedId = (0, react.useId)();
@@ -7372,7 +7474,8 @@ const Tooltip = ({ text, placement = "bottom", children, tooltipId, delay = 100,
 			style: { ...positionStyles.floating },
 			elevation: "small",
 			border: "border-subtle",
-			className: cn(Tooltip_module_default.paper, typographyStyles_module_default["body-short-medium"], utilStyles_module_default["visibility-transition"], utilStyles_module_default[`visibility-transition--${openCn}`]),
+			zIndex: "tooltip",
+			className: cn(typographyStyles_module_default["body-short-medium"], utilStyles_module_default["visibility-transition"], utilStyles_module_default[`visibility-transition--${openCn}`]),
 			children: text
 		}) : null]
 	});
@@ -8143,21 +8246,17 @@ const texts$12 = createTexts({
 	}
 });
 //#endregion
-//#region src/components/Footer/Footer.module.css
-var Footer_module_default = {
-	"container": "dds-Footer-module__container",
-	"left": "dds-Footer-module__left",
-	"list": "dds-Footer-module__list",
-	"list-group": "dds-Footer-module__list-group",
-	"socials-group": "dds-Footer-module__socials-group",
-	"socials-list": "dds-Footer-module__socials-list"
-};
-//#endregion
 //#region src/components/Footer/Footer.tsx
-const Footer = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Contrast, {
+const Footer = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Contrast, {
 	as: "footer",
-	className: cn(className, Footer_module_default.container),
-	...rest
+	paddingBlock: {
+		xs: "x3 x6",
+		sm: "x3 x6",
+		md: "x4",
+		lg: "x4",
+		xl: "x4"
+	},
+	...props
 });
 //#endregion
 //#region src/components/Footer/FooterListHeader.tsx
@@ -8186,33 +8285,35 @@ const FooterLogo = ({ children, hideBreakpoint, ...rest }) => {
 };
 //#endregion
 //#region src/components/Footer/FooterList.tsx
-const FooterList = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StylelessList, {
-	className: cn(className, Footer_module_default.list),
-	...rest
+const FooterList = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VStack, {
+	as: StylelessList,
+	gap: "x1.5",
+	...props
 });
 //#endregion
 //#region src/components/Footer/FooterSocialsList.tsx
-const FooterSocialsList = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StylelessList, {
-	className: cn(className, Footer_module_default["socials-list"]),
-	...rest
+const FooterSocialsList = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HStack, {
+	as: StylelessList,
+	gap: "x1.5",
+	...props
 });
 //#endregion
 //#region src/components/Footer/FooterSocialsGroup.tsx
-const FooterSocialsGroup = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: cn(className, Footer_module_default["socials-group"]),
-	...rest
+const FooterSocialsGroup = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VStack, {
+	gap: "x1",
+	...props
 });
 //#endregion
 //#region src/components/Footer/FooterListGroup.tsx
-const FooterListGroup = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: cn(className, Footer_module_default["list-group"]),
-	...rest
+const FooterListGroup = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VStack, {
+	gap: "x1.5",
+	...props
 });
 //#endregion
 //#region src/components/Footer/FooterLeft.tsx
-const FooterLeft = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: cn(className, Footer_module_default["left"]),
-	...rest
+const FooterLeft = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VStack, {
+	gap: "x4",
+	...props
 });
 //#endregion
 //#region src/components/FormSummary/FormSummary.tsx
@@ -8315,9 +8416,7 @@ var GlobalMessage_module_default = {
 	"container--info": "dds-GlobalMessage-module__container--info",
 	"icon": "dds-GlobalMessage-module__icon",
 	"container--danger": "dds-GlobalMessage-module__container--danger",
-	"container--warning": "dds-GlobalMessage-module__container--warning",
-	"content": "dds-GlobalMessage-module__content",
-	"content--closable": "dds-GlobalMessage-module__content--closable"
+	"container--warning": "dds-GlobalMessage-module__container--warning"
 };
 const icons$2 = {
 	info: InfoIcon,
@@ -8327,10 +8426,16 @@ const icons$2 = {
 const GlobalMessage = ({ purpose = "info", closable, onClose, children, id, className, style, htmlProps, ...rest }) => {
 	const { t } = useTranslation();
 	const [isClosed, setClosed] = (0, react.useState)(false);
-	return !isClosed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return !isClosed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
 		...getBaseHTMLProps(id, cn(className, GlobalMessage_module_default.container, GlobalMessage_module_default[`container--${purpose}`], typographyStyles_module_default["body-short-medium"]), style, htmlProps, rest),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: cn(GlobalMessage_module_default.content, closable && GlobalMessage_module_default["content--closable"]),
+		alignItems: "center",
+		justifyContent: "space-between",
+		width: "100%",
+		padding: "0 x1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+			alignItems: "center",
+			paddingBlock: "x0.75",
+			paddingInline: closable ? "x0 x0.75" : " x0 x1.5",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 				icon: icons$2[purpose],
 				iconSize: "component",
@@ -8989,10 +9094,12 @@ var NewsPopover_module_default = {
 //#region src/components/NewsPopover/NewsPopover.tsx
 const NewsPopover = ({ id, className, style, htmlProps, header, news, defaultActiveSlide = 0, activeSlide: activeSlideProp, setActiveSlide: setActiveSlideProp, isOpen: isOpenProp, isInitiallyOpen = true, setIsOpen: setIsOpenProp, smallScreenBreakpoint = "xs", closeOnClickOutside = true, ref, ...rest }) => {
 	if (news.length === 0) throw new Error("NewsPopover must have at least one item in \"news\" prop");
-	if (header.length > 35) console.warn("[NewsPopover] header exceeds recommended length (about 35 characters). This may cause wrapping or layout issues depending on theme.");
+	const maxHeaderLength = 45;
+	const maxTextLength = 150;
+	if (header.length > maxHeaderLength) console.warn(`[NewsPopover] header exceeds recommended length (about ${maxHeaderLength} characters). This may cause wrapping or layout issues depending on theme.`);
 	news.forEach((n, i) => {
-		if (n.heading.length > 35) console.warn(`[NewsPopover] news[${i}].heading exceeds recommended length (about 35 characters). This may cause wrapping or layout issues depending on theme.`);
-		if (n.text.length > 135) console.warn(`[NewsPopover] news[${i}].text exceeds recommended length (about 135 characters). This may cause wrapping or layout issues depending on theme.`);
+		if (n.heading.length > maxHeaderLength) console.warn(`[NewsPopover] news[${i}].heading exceeds recommended length (about ${maxHeaderLength} characters). This may cause wrapping or layout issues depending on theme.`);
+		if (n.text.length > maxTextLength) console.warn(`[NewsPopover] news[${i}].text exceeds recommended length (about ${maxTextLength} characters). This may cause wrapping or layout issues depending on theme.`);
 	});
 	const { t } = useTranslation();
 	const [activeSlide, setActiveSlide] = useControllableState({
@@ -9072,7 +9179,7 @@ const NewsPopover = ({ id, className, style, htmlProps, header, news, defaultAct
 		role: "dialog",
 		"aria-labelledby": headerId,
 		height: isList ? "368px" : "327px",
-		width: styleUpToBreakpoint("100%", smallScreenBreakpoint, "405px"),
+		width: styleUpToBreakpoint("100%", smallScreenBreakpoint, "500px"),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HStack, {
 			margin: "x0.75 x3 x0.75 x0.75",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
@@ -9334,7 +9441,7 @@ const getCustomStyles = (size, hasError, isReadOnly) => ({
 		zIndex: 100,
 		transition: "var(--dds-motion-surface)",
 		border: "1px solid var(--dds-color-border-default)",
-		backgroundColor: "var(--dds-color-surface-default)",
+		backgroundColor: "var(--dds-color-surface-paper-default)",
 		borderRadius: "var(--dds-border-radius-surface)",
 		marginBlock: "var(--dds-spacing-x0-25)"
 	}),
@@ -9364,11 +9471,15 @@ const getCustomStyles = (size, hasError, isReadOnly) => ({
 		gap: "var(--dds-spacing-x0-25)",
 		padding: "var(--dds-spacing-x0-75)",
 		borderRadius: "var(--dds-border-radius-surface)",
-		backgroundColor: "var(--dds-color-surface-default)",
+		backgroundColor: "inherit",
 		...typography.option[size],
 		color: "var(--dds-color-text-default)",
 		"@media (prefers-reduced-motion: no-preference)": { transition: "color var(--dds-motion-micro-state), background-color var(--dds-motion-micro-state)" },
-		...state.isSelected && { backgroundColor: "var(--dds-color-surface-selected-default)" },
+		"&:active": { backgroundColor: "inherit" },
+		...state.isSelected && {
+			backgroundColor: "var(--dds-color-surface-selected-default)",
+			"&:active": { backgroundColor: "var(--dds-color-surface-selected-default)" }
+		},
 		...state.isFocused && {
 			outline: "var(--dds-color-border-action-hover) 2px solid",
 			outlineOffset: "calc(var(--dds-spacing-x0-125) * -1)"
@@ -11383,14 +11494,6 @@ const texts$7 = createTexts({
 	}
 });
 //#endregion
-//#region src/components/Popover/Popover.module.css
-var Popover_module_default = {
-	"container": "dds-Popover-module__container",
-	"content--closable--no-header": "dds-Popover-module__content--closable--no-header",
-	"header": "dds-Popover-module__header",
-	"close-button": "dds-Popover-module__close-button"
-};
-//#endregion
 //#region src/components/Popover/Popover.context.tsx
 const PopoverContext = (0, react.createContext)({});
 const usePopoverContext = () => (0, react.useContext)(PopoverContext);
@@ -11401,7 +11504,7 @@ const Popover = ({ id, header, withCloseButton = true, onBlur, children, placeme
 		offset,
 		placement
 	});
-	const { maxHeight, maxWidth, minHeight, minWidth, height, width } = sizeProps;
+	const { maxHeight, maxWidth, minHeight, minWidth, height, width = "fit-content" } = sizeProps;
 	const context = usePopoverContext();
 	const themeContext = (0, react.useContext)(ThemeContext);
 	const portalTarget = parentElement ?? themeContext?.el;
@@ -11449,7 +11552,7 @@ const Popover = ({ id, header, withCloseButton = true, onBlur, children, placeme
 	const hasTitle = !!header;
 	const openCn = hasTransitionedIn && isOpen ? "open" : "closed";
 	const popover = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Paper, {
-		...getBaseHTMLProps(popoverId, cn(className, Popover_module_default.container, utilStyles_module_default["visibility-transition"], utilStyles_module_default[`visibility-transition--${openCn}`], focus_module_default.focusable), {
+		...getBaseHTMLProps(popoverId, cn(className, utilStyles_module_default["visibility-transition"], utilStyles_module_default[`visibility-transition--${openCn}`], focus_module_default.focusable), {
 			...style,
 			...floatStyling
 		}, htmlProps, rest),
@@ -11461,29 +11564,35 @@ const Popover = ({ id, header, withCloseButton = true, onBlur, children, placeme
 		width,
 		maxWidth,
 		minWidth,
+		position: "absolute",
+		padding: "x0.75 x1 x1.5 x1",
 		role: "dialog",
 		elevation: "large",
 		border: "border-subtle",
+		zIndex: "popover",
 		children: [
-			header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: Popover_module_default.header,
+			header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+				marginInline: "0 x2",
 				children: typeof header === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 					level: 2,
 					typographyType: "heading-medium",
 					children: header
 				}) : header
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: !hasTitle && withCloseButton ? Popover_module_default["content--closable--no-header"] : "",
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+				marginBlock: !hasTitle && withCloseButton ? "x2 0" : "0",
 				children
 			}),
-			withCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			withCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+				as: Button,
 				icon: CloseIcon,
 				purpose: "tertiary",
 				size: "small",
 				onClick: onClose,
 				"aria-label": t(commonTexts.close),
-				className: Popover_module_default["close-button"]
+				position: "absolute",
+				top: "x0.25",
+				right: "x0.25"
 			})
 		]
 	});
@@ -11763,7 +11872,7 @@ const ProgressBar = ({ label, tip, errorMessage, size = "medium", "aria-describe
 	* Verdi skal være mindre eller lik max når max finnes; og mindre eller lik 1 hvis ikke.
 	* Komponenten er "indeterminate" hvis value ikke er gyldig.
 	*/
-	const hasValidValue = !!value && value > 0 && (max !== void 0 && value <= max || max === void 0 && value <= 1);
+	const hasValidValue = value !== null && value !== void 0 && value >= 0 && (max !== void 0 && value <= max || max === void 0 && value <= 1);
 	const tipId = derivativeIdGenerator(uniqueId, "tip");
 	const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
 	const fillPrecentage = hasValidValue && value / (max ?? 1) * 100 + "%";
@@ -11796,8 +11905,8 @@ const ProgressBar = ({ label, tip, errorMessage, size = "medium", "aria-describe
 				className: cn(ProgressBar_module_default.progress),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
 					height: "100%",
-					width: isIndeterminate ? "25%" : fillPrecentage ? fillPrecentage : 0,
-					className: cn(ProgressBar_module_default.fill, isIndeterminate && ProgressBar_module_default["fill--indeterminate"], fillPrecentage === "100%" && ProgressBar_module_default["fill--done"], errorMessage && ProgressBar_module_default["fill--error"])
+					width: hasErrorMessage ? "100%" : isIndeterminate ? "25%" : fillPrecentage ? fillPrecentage : 0,
+					className: cn(ProgressBar_module_default.fill, isIndeterminate && ProgressBar_module_default["fill--indeterminate"], fillPrecentage === "100%" && ProgressBar_module_default["fill--done"], hasErrorMessage && ProgressBar_module_default["fill--error"])
 				})
 			}),
 			renderInputMessage({
@@ -13050,6 +13159,7 @@ exports.ArrowDownIcon = ArrowDownIcon;
 exports.ArrowLeftIcon = ArrowLeftIcon;
 exports.ArrowRightIcon = ArrowRightIcon;
 exports.ArrowUpIcon = ArrowUpIcon;
+exports.ArrowUpRightIcon = ArrowUpRightIcon;
 exports.AttachmentIcon = AttachmentIcon;
 exports.BORDER_COLORS = BORDER_COLORS;
 exports.BORDER_RADII = BORDER_RADII;
@@ -13119,6 +13229,8 @@ exports.DescriptionList = DescriptionList;
 exports.DescriptionListDesc = DescriptionListDesc;
 exports.DescriptionListGroup = DescriptionListGroup;
 exports.DescriptionListTerm = DescriptionListTerm;
+exports.DesktopIcon = DesktopIcon;
+exports.DesktopMobileIcon = DesktopMobileIcon;
 exports.DetailList = DetailList;
 exports.DetailListDesc = DetailListDesc;
 exports.DetailListRow = DetailListRow;
@@ -13317,6 +13429,7 @@ exports.StickyNoteIcon = StickyNoteIcon;
 exports.StylelessButton = StylelessButton;
 exports.StylelessList = StylelessList;
 exports.StylelessOList = StylelessOList;
+exports.SunHalfFilledIcon = SunHalfFilledIcon;
 exports.SunIcon = SunIcon;
 exports.SupportIcon = SupportIcon;
 exports.SyncIcon = SyncIcon;