@norges-domstoler/dds-components 24.1.0 → 24.1.1

package/dist/index.cjs

@@ -4554,10 +4554,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 }) => {
@@ -5719,13 +5716,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 +5727,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 +5746,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 +5758,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 +5894,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,
@@ -5946,7 +5956,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 +5966,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 +5983,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 +6418,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 +6716,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 }),
 		" ",
@@ -8143,21 +8157,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 +8196,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 +8327,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 +8337,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",
@@ -9334,7 +9350,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 +9380,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,25 +11403,20 @@ 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);
 //#endregion
+//#region src/components/Popover/Popover.module.css
+var Popover_module_default = { "container": "dds-Popover-module__container" };
+//#endregion
 //#region src/components/Popover/Popover.tsx
 const Popover = ({ id, header, withCloseButton = true, onBlur, children, placement = "bottom", parentElement, portal = false, offset = 8, sizeProps = {}, returnFocusOnBlur = true, className, htmlProps = {}, anchorRef, isOpen: propIsOpen, onClose: propOnClose, style, ref, ...rest }) => {
 	const { refs, styles: positionStyles, isPositioned: localIsPositioned } = useFloatPosition(null, {
 		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;
@@ -11461,29 +11476,34 @@ 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",
 		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"
 			})
 		]
 	});