@norges-domstoler/dds-components 24.1.0 → 24.1.1

package/dist/index.d.mts

@@ -202,6 +202,7 @@ type CommonComponentProps<THTMLProps extends object, TRef extends Ref<unknown>>
   /**Ref til komponenten. */
   ref?: TRef;
 };
+type HTMLAttributesFor<T extends Element> = T extends HTMLButtonElement ? React.ButtonHTMLAttributes<T> : T extends HTMLAnchorElement ? React.AnchorHTMLAttributes<T> : React.HTMLAttributes<T>;
 /**
  * Basetype for props som eksponeres til konsumenter av designsystemet.
  * - Rot: `id`, `className`, `style`, `TOtherProps`
@@ -211,9 +212,11 @@ type CommonComponentProps<THTMLProps extends object, TRef extends Ref<unknown>>
  *
  * @template TElement Element-type som genereres av komponenten.
  * @template TOtherProps Andre props komponenten skal eksponere til konsumenter.
- * @template THTMLAttributesProps Standard `HTMLAttributes<T>` men kan overstyres for f.eks knapper hvis man trenger en annen basetype for `htmlProps`.
+ * @template THTMLAttributesProps Standard `HTMLAttributes<T>`;
+ * settes til `ButtonHTMLAttributes<T>` hvis TElement er `HTMLButtonElement` og til `AnchorHTMLAttributes<T>` hvis TElement er `HTMLAnchorElement`.
+ * Kan overstyres hvis man trenger en annen basetype for `htmlProps`.
  */
-type BaseComponentProps<TElement extends Element, TOtherProps extends object = object, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = TOtherProps & CommonComponentProps<Omit<THTMLAttributesProps, keyof HTMLRootProps | keyof TOtherProps>, Ref<TElement>>;
+type BaseComponentProps<TElement extends Element, TOtherProps extends object = object, THTMLAttributesProps extends HTMLAttributesFor<TElement> = HTMLAttributesFor<TElement>> = TOtherProps & CommonComponentProps<Omit<THTMLAttributesProps, keyof HTMLRootProps | keyof TOtherProps>, Ref<TElement>>;
 /**
  * Basetype for polymorfe props som eksponeres til konsumenter av designsystemet.
  * - Rot: `id`, `className`, `style`, `TOtherProps`
@@ -232,7 +235,7 @@ type PolymorphicBaseComponentProps<E extends ElementType, TOtherProps extends ob
 /**
  * Utvidelse av {@link BaseComponentProps} med prop for `children`.
  */
-type BaseComponentPropsWithChildren<T extends Element, TProps extends object = object, THTMLProps extends HTMLAttributes<T> = HTMLAttributes<T>> = BaseComponentProps<T, TProps & {
+type BaseComponentPropsWithChildren<T extends Element, TProps extends object = object, THTMLProps extends HTMLAttributesFor<T> = HTMLAttributesFor<T>> = BaseComponentProps<T, TProps & {
   /**Barn. */
   children?: ReactNode;
 }, THTMLProps>;
@@ -331,7 +334,7 @@ declare const BUTTON_PURPOSES: ["primary", "secondary", "tertiary", "danger"];
 type ButtonSize = (typeof BUTTON_SIZES)[number];
 type ButtonPurpose = (typeof BUTTON_PURPOSES)[number];
 type IconPosition = 'left' | 'right';
-type PickedHTMLAttributes$4 = Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur' | 'type' | 'aria-label'>;
+type PickedHTMLAttributes$3 = Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur' | 'type' | 'aria-label'>;
 type ButtonProps<I extends SvgIcon = SvgIcon, T extends ElementType = 'button'> = PolymorphicBaseComponentProps<T, {
   /** Størrelsen på knappen.
    *  @default "medium"
@@ -361,7 +364,7 @@ type ButtonProps<I extends SvgIcon = SvgIcon, T extends ElementType = 'button'>
   iconState?: IconStatesOf<I>;
   /**Knapp med full bredde. */
   fullWidth?: boolean;
-} & PickedHTMLAttributes$4>;
+} & PickedHTMLAttributes$3>;
 //#endregion
 //#region ../../node_modules/.pnpm/csstype@3.2.3/node_modules/csstype/index.d.ts
 interface StandardLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
@@ -14962,7 +14965,7 @@ type AnchorTypographyProps = BaseComponentPropsWithChildren<HTMLAnchorElement, {
   href?: string | undefined;
   /**nativ `target`-prop ved `typographyType='a'`.  */
   target?: string;
-}, AnchorHTMLAttributes<HTMLAnchorElement>>;
+}>;
 type LabelTypographyProps = BaseComponentPropsWithChildren<HTMLLabelElement, HTMLAttributes<HTMLLabelElement>>;
 type OtherTypographyProps = BaseComponentPropsWithChildren<HTMLElement, HTMLAttributes<HTMLElement>>;
 type TypographyProps = ({
@@ -15017,7 +15020,7 @@ declare const Heading: {
 };
 //#endregion
 //#region src/components/Typography/Label/Label.d.ts
-type PickedHTMLAttributes$3 = Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
+type PickedHTMLAttributes$2 = Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
 interface BaseLabelProps {
   /** Om input knyttet til ledeteksten er påkrevd; påvirker styling. */
   showRequiredStyling?: boolean;
@@ -15026,7 +15029,7 @@ interface BaseLabelProps {
   /**Innhold som står etter ledeteksten (knapp med ekstra info e.l.). */
   afterLabelContent?: ReactNode;
 }
-type LabelProps = BaseComponentPropsWithChildren<HTMLLabelElement, BaseLabelProps & CommonInlineTypographyProps & PickedHTMLAttributes$3>;
+type LabelProps = BaseComponentPropsWithChildren<HTMLLabelElement, BaseLabelProps & CommonInlineTypographyProps & PickedHTMLAttributes$2>;
 declare const Label: {
   ({ showRequiredStyling, readOnly, id, className, style, htmlProps, children, afterLabelContent, ...rest }: LabelProps): import("react").JSX.Element;
   displayName: string;
@@ -15045,7 +15048,7 @@ declare const Legend: {
 };
 //#endregion
 //#region src/components/Typography/Link/Link.d.ts
-type PickedHTMLAttributes$2 = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href' | 'target'>;
+type PickedHTMLAttributes$1 = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href' | 'target'>;
 type LinkProps<T extends ElementType = 'a'> = PolymorphicBaseComponentProps<T, {
   /**Om lenken kan få `:visited`-styling. */
   withVisited?: boolean;
@@ -15060,7 +15063,7 @@ type LinkProps<T extends ElementType = 'a'> = PolymorphicBaseComponentProps<T, {
    * Ikon kan legges inn som barn ved siden av teksten med `<Icon>`-komponent.
    * */
   withIconStyling?: boolean;
-} & CommonInlineTypographyProps & PickedHTMLAttributes$2>;
+} & CommonInlineTypographyProps & PickedHTMLAttributes$1>;
 declare const Link: {
   <T extends ElementType = "a">({ id, className, htmlProps, children, typographyType, withMargins, withVisited, style, color, as: propAs, isAnchor: propIsAnchor, withIconStyling, ...rest }: LinkProps<T>): import("react").JSX.Element;
   displayName: string;
@@ -15088,7 +15091,7 @@ type AccordionHeaderProps = Omit<BaseComponentPropsWithChildren<HTMLButtonElemen
   typographyType?: StaticTypographyType;
   /**Angir om teksten skal være i "bold"-format. */
   bold?: boolean;
-}, ButtonHTMLAttributes<HTMLButtonElement>>, 'id'>;
+}>, 'id'>;
 declare const AccordionHeader: {
   ({ children, className, style, htmlProps, typographyType, bold, ...rest }: AccordionHeaderProps): import("react").JSX.Element;
   displayName: string;
@@ -15141,7 +15144,7 @@ declare const Breadcrumbs: {
 };
 //#endregion
 //#region src/components/ButtonGroup/ButtonGroup.d.ts
-type PickedHTMLAttributes$1 = Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label' | 'aria-labelledby'>;
+type PickedHTMLAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label' | 'aria-labelledby'>;
 type ButtonGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {
   /**Retning for gruppen.
    * @default "row"
@@ -15159,7 +15162,7 @@ type ButtonGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {
    * @default "group"
    */
   role?: AriaRole;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof PickedHTMLAttributes$1>>;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof PickedHTMLAttributes>>;
 declare const ButtonGroup: {
   ({ children, id, className, style, htmlProps, direction, buttonSize, role, ...rest }: ButtonGroupProps): import("react").JSX.Element;
   displayName: string;
@@ -15281,7 +15284,7 @@ type CardExpandableHeaderProps = Omit<BaseComponentPropsWithChildren<HTMLButtonE
   typographyType?: StaticTypographyType;
   /**Angir om teksten skal være i "bold"-format. */
   bold?: boolean;
-}, ButtonHTMLAttributes<HTMLButtonElement>>, 'id'>;
+}>, 'id'>;
 declare const CardExpandableHeader: {
   ({ children, className, style, htmlProps, padding, typographyType, bold, ...rest }: CardExpandableHeaderProps): import("react").JSX.Element;
   displayName: string;
@@ -15319,7 +15322,7 @@ type CardSelectableGroupProps<T extends string | number> = BaseComponentPropsWit
   value?: T | undefined;
   /**Default verdi - en `<CardSelectable>` med denne verdien blir forhåndsvalgt med uncontrolled state. */
   defaultValue?: T | undefined;
-}, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>>;
+}>;
 declare const CardSelectableGroup: {
   <T extends string | number = string>({ name, cardType, errorMessage, disabled, readOnly, value, defaultValue, children, required, onChange, id, tipId, className, style, htmlProps, ...rest }: CardSelectableGroupProps<T>): import("react").JSX.Element;
   displayName: string;
@@ -15565,7 +15568,7 @@ type DividerProps = BaseComponentProps<HTMLHRElement, {
    * @default "default"
    */
   color?: DividerColor;
-}, Omit<HTMLAttributes<HTMLHRElement>, 'color'>>;
+}>;
 declare const Divider: ({ color, id, className, style, htmlProps, ...rest }: DividerProps) => import("react").JSX.Element;
 //#endregion
 //#region src/components/Drawer/Drawer.d.ts
@@ -15681,7 +15684,7 @@ type FavStarProps = BaseComponentPropsWithChildren<HTMLElement, {
    * @default "medium"
    */
   size?: ComponentSize;
-}, Omit<HTMLAttributes<HTMLElement>, 'onChange'>>;
+}>;
 declare const FavStar: {
   ({ id, className, style, onChange, checked: checkedProp, defaultChecked, size, htmlProps, ...rest }: FavStarProps): import("react").JSX.Element;
   displayName: string;
@@ -15845,7 +15848,7 @@ declare const FileUploader: {
 //#endregion
 //#region src/components/Footer/Footer.d.ts
 type FooterProps = ComponentPropsWithRef<'footer'>;
-declare const Footer: ({ className, ...rest }: FooterProps) => import("react").JSX.Element;
+declare const Footer: (props: FooterProps) => import("react").JSX.Element;
 //#endregion
 //#region src/components/Footer/FooterListHeader.d.ts
 type FooterListHeaderProps = Omit<HeadingProps, 'level' | 'withMargins'>;
@@ -15868,23 +15871,23 @@ declare const FooterLogo: ({ children, hideBreakpoint, ...rest }: FooterLogoProp
 //#endregion
 //#region src/components/Footer/FooterList.d.ts
 type FooterListProps = ComponentPropsWithRef<'ul'>;
-declare const FooterList: ({ className, ...rest }: FooterListProps) => import("react").JSX.Element;
+declare const FooterList: (props: FooterListProps) => import("react").JSX.Element;
 //#endregion
 //#region src/components/Footer/FooterSocialsList.d.ts
 type FooterSocialsListProps = ComponentPropsWithRef<'ul'>;
-declare const FooterSocialsList: ({ className, ...rest }: FooterSocialsListProps) => import("react").JSX.Element;
+declare const FooterSocialsList: (props: FooterSocialsListProps) => import("react").JSX.Element;
 //#endregion
 //#region src/components/Footer/FooterSocialsGroup.d.ts
 type FooterSocialsGroupProps = ComponentPropsWithRef<'div'>;
-declare const FooterSocialsGroup: ({ className, ...rest }: FooterSocialsGroupProps) => import("react").JSX.Element;
+declare const FooterSocialsGroup: (props: FooterSocialsGroupProps) => import("react").JSX.Element;
 //#endregion
 //#region src/components/Footer/FooterListGroup.d.ts
 type FooterListGroupProps = ComponentPropsWithRef<'div'>;
-declare const FooterListGroup: ({ className, ...rest }: FooterListGroupProps) => import("react").JSX.Element;
+declare const FooterListGroup: (props: FooterListGroupProps) => import("react").JSX.Element;
 //#endregion
 //#region src/components/Footer/FooterLeft.d.ts
 type FooterLeftProps = ComponentPropsWithRef<'div'>;
-declare const FooterLeft: ({ className, ...rest }: FooterLeftProps) => import("react").JSX.Element;
+declare const FooterLeft: (props: FooterLeftProps) => import("react").JSX.Element;
 //#endregion
 //#region src/components/FormSummary/FormSummary.d.ts
 type FormSummaryProps = Pick<PaperProps, 'children' | 'htmlProps' | 'ref' | 'id' | 'style' | 'className' | 'padding' | 'paddingBlock' | 'paddingInline' | 'margin' | 'marginBlock' | 'marginInline' | 'width' | 'minWidth' | 'maxWidth'>;
@@ -16349,7 +16352,7 @@ type PaginationProps = BaseComponentProps<HTMLElement, {
   onSelectOptionChange?: (option: PaginationOption | null) => void;
   /**Brekkpunkt for små skjermer; den viser færre sideknapper og stacker delkomponentene. */
   smallScreenBreakpoint?: Breakpoint;
-}, Omit<HTMLAttributes<HTMLElement>, 'onChange'>>;
+}>;
 declare const Pagination: {
   ({ itemsAmount, defaultItemsPerPage, defaultActivePage, activePage: activePageProp, withPagination, withCounter, withSelect, selectOptions, smallScreenBreakpoint, onChange, onSelectOptionChange, id, className, style, htmlProps, ref, ...rest }: PaginationProps): import("react").JSX.Element | null;
   displayName: string;
@@ -16552,14 +16555,14 @@ type SearchButtonProps = {
 } & Pick<ButtonProps, 'loading' | 'loadingTooltip'> & ComponentPropsWithRef<'button'>;
 //#endregion
 //#region src/components/Search/Search.d.ts
-type SearchProps = Pick<InputProps, 'tip' | 'label'> & {
+type SearchProps = Pick<InputProps, 'tip' | 'label' | 'width'> & {
   /**Størrelsen på komponenten. */
   componentSize?: SearchSize;
   /**Props for søkeknappen. */
   buttonProps?: SearchButtonProps;
   /**Om søkeikonet skal vises. */
   showIcon?: boolean;
-} & Pick<InputProps, 'width'> & Omit<ComponentPropsWithRef<'input'>, 'width' | 'height'>;
+} & Omit<ComponentPropsWithRef<'input'>, 'width' | 'height'>;
 declare const Search$1: {
   ({ componentSize, buttonProps, showIcon, name, label, tip, id, value, width, onChange, className, style, "aria-describedby": ariaDescribedby, ref, ...rest }: SearchProps): import("react").JSX.Element;
   displayName: string;
@@ -16688,7 +16691,7 @@ type RadioButtonGroupProps<T extends string | number> = BaseComponentPropsWithCh
   value?: T | undefined;
   /**Default verdi - en `<RadioButton>` med denne verdien blir forhåndsvalgt med uncontrolled state. */
   defaultValue?: T | undefined;
-}, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>>;
+}>;
 declare const RadioButtonGroup: {
   <T extends string | number = string>({ name, label, groupId, errorMessage, tip, disabled, readOnly, direction, value, defaultValue, children, required, onChange, id, className, style, htmlProps, ...rest }: RadioButtonGroupProps<T>): import("react").JSX.Element;
   displayName: string;
@@ -16738,7 +16741,7 @@ type SpinnerProps = BaseComponentProps<SVGElement, {
    * @default "Innlasting pågår"
    */
   tooltip?: string;
-}, Omit<HTMLAttributes<SVGSVGElement>, 'color'>>;
+}>;
 declare function Spinner(props: SpinnerProps): import("react").JSX.Element;
 declare namespace Spinner {
   var displayName: string;
@@ -16917,7 +16920,7 @@ type TabsProps = BaseComponentPropsWithChildren<HTMLDivElement, {
   tabContentDirection?: Direction;
   /** Props for "Legg til fane"-knapp. Støtter native HTML attributter og `width`. */
   addTabButtonProps?: Omit<AddTabButtonProps, 'index'>;
-} & Pick<ResponsiveProps, 'width'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>>;
+} & Pick<ResponsiveProps, 'width'>>;
 declare const Tabs: {
   ({ id, activeTab, onChange, tabContentDirection, size, addTabButtonProps, width, children, className, style, htmlProps, ...rest }: TabsProps): import("react").JSX.Element;
   displayName: string;
@@ -16942,7 +16945,7 @@ type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
    * @default "1fr"
    */
   width?: Properties['width'];
-} & PickedAttributes, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof PickedAttributes>>;
+} & PickedAttributes>;
 declare const Tab: {
   ({ active, icon, children, focus, setFocus, index, onClick, onKeyDown, id, className, htmlProps, style, width, ref, ...rest }: TabProps): import("react").JSX.Element;
   displayName: string;
@@ -17127,7 +17130,6 @@ declare const ToggleButtonGroup: {
 type AnchorElement = ReactElement<HTMLAttributes<HTMLElement> & {
   ref: Ref<HTMLElement>;
 }>;
-type PickedHTMLAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'style' | 'onMouseLeave' | 'onMouseOver'>;
 type TooltipProps = BaseComponentProps<HTMLDivElement, {
   /**Innhold i tooltip. */
   text: string;
@@ -17145,7 +17147,7 @@ type TooltipProps = BaseComponentProps<HTMLDivElement, {
   tooltipId?: string;
   /**Om tooltip skal alltid være i DOM, eller bli rendret først når den skal vises. */
   keepMounted?: boolean;
-} & PickedHTMLAttributes, Omit<HTMLAttributes<HTMLDivElement>, 'children' | keyof PickedHTMLAttributes>>;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'onMouseLeave' | 'onMouseOver'>>;
 declare const Tooltip: {
   ({ text, placement, children, tooltipId, delay, style, onMouseLeave, onMouseOver, keepMounted, id, ref, className, htmlProps, ...rest }: TooltipProps): import("react").JSX.Element;
   displayName: string;

package/dist/index.mjs

@@ -4521,10 +4521,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 }) => {
@@ -5686,13 +5683,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",
@@ -5701,6 +5694,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__ */ 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",
@@ -5710,8 +5713,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 = useRef(null);
 	const { buttonProps, cellProps, isOutsideVisibleRange, formattedDate, isSelected, isDisabled, isUnavailable } = useCalendarCell({ date }, state, ref);
 	if (isOutsideVisibleRange) return /* @__PURE__ */ jsx("td", { ...cellProps });
@@ -5722,17 +5725,23 @@ function CalendarCell({ date, state, onClose }) {
 	const isUnavailableToday = isEffectivelyUnavailable && isToday(date, "Europe/Oslo");
 	return /* @__PURE__ */ jsx("td", {
 		...cellProps,
-		children: /* @__PURE__ */ jsx("button", {
+		children: /* @__PURE__ */ jsx(Box, {
 			...buttonProps,
+			as: "button",
 			type: "button",
 			ref,
 			onKeyDown: closeOnKeyboardBlurForward,
-			className: cn(DateInput_module_default["calendar__grid-element"], DateInput_module_default["calendar__cell-button"], 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"], 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
 /**
@@ -5852,8 +5861,9 @@ const CalendarPopoverContent = ({ children, className, smallScreenBreakpoint })
 				ref: modalRef,
 				className: cn(DateInput_module_default.popover, className),
 				...paperStyleProps,
-				children: [/* @__PURE__ */ jsx("div", {
-					className: DateInput_module_default["modal-close-button-wrapper"],
+				children: [/* @__PURE__ */ jsx(Box, {
+					display: "flex",
+					justifyContent: "flex-end",
 					children: /* @__PURE__ */ jsx(Button, {
 						ref: closeButtonRef,
 						icon: CloseIcon,
@@ -5913,7 +5923,6 @@ function CalendarGrid({ state, ...props }) {
 		}
 	];
 	const { showWeekNumbers, onClose } = useContext(CalendarPopoverContext);
-	const thCn = cn(DateInput_module_default["calendar__grid-element"], typographyStyles_module_default["text-color--subtle"], DateInput_module_default.calendar__th);
 	return /* @__PURE__ */ jsxs("table", {
 		...gridProps,
 		onKeyDown: (e) => {
@@ -5924,14 +5933,14 @@ function CalendarGrid({ state, ...props }) {
 		className: typographyStyles_module_default["body-short-xsmall"],
 		children: [/* @__PURE__ */ jsx("thead", {
 			...headerProps,
-			children: /* @__PURE__ */ jsxs("tr", { children: [showWeekNumbers && /* @__PURE__ */ jsxs("th", {
-				className: cn(thCn),
+			children: /* @__PURE__ */ jsxs("tr", { children: [showWeekNumbers && /* @__PURE__ */ jsxs(CalendarCell, {
+				as: "th",
 				children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
 					children: "#"
 				}), /* @__PURE__ */ jsx(VisuallyHidden, { children: t(texts$24.weekNumber) })]
-			}), weekDays.map((day, index) => /* @__PURE__ */ jsxs("th", {
-				className: thCn,
+			}), weekDays.map((day, index) => /* @__PURE__ */ jsxs(CalendarCell, {
+				as: "th",
 				children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
 					children: day.short
@@ -5941,10 +5950,10 @@ function CalendarGrid({ state, ...props }) {
 			const datesInWeek = state.getDatesInWeek(weekIndex);
 			const firstExistingDay = datesInWeek.find(Boolean);
 			const weekNumber = firstExistingDay ? getWeekNumber(firstExistingDay) : "";
-			return /* @__PURE__ */ jsxs("tr", { children: [showWeekNumbers && /* @__PURE__ */ jsx("td", {
-				className: cn(thCn, DateInput_module_default["calendar__week-number"]),
+			return /* @__PURE__ */ jsxs("tr", { children: [showWeekNumbers && /* @__PURE__ */ jsx(CalendarCell, {
+				as: "td",
 				children: weekNumber
-			}), datesInWeek.map((date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, {
+			}), datesInWeek.map((date, i) => date ? /* @__PURE__ */ jsx(CalendarDate$1, {
 				state,
 				date,
 				onClose
@@ -6376,7 +6385,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__ */ jsx("div", {
+					/* @__PURE__ */ 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"]),
@@ -6674,8 +6683,13 @@ const DescriptionListTerm = (props) => {
 DescriptionListTerm.displayName = "DescriptionListTerm";
 //#endregion
 //#region src/components/DescriptionList/DescriptionListDesc.tsx
-const DescriptionListDesc = ({ children, icon, id, className, style, htmlProps, ...rest }) => /* @__PURE__ */ jsxs("dd", {
+const DescriptionListDesc = ({ children, icon, id, className, style, htmlProps, ...rest }) => /* @__PURE__ */ 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__ */ jsx(Icon, { icon }),
 		" ",
@@ -8110,21 +8124,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__ */ jsx(Contrast, {
+const Footer = (props) => /* @__PURE__ */ 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
@@ -8153,33 +8163,35 @@ const FooterLogo = ({ children, hideBreakpoint, ...rest }) => {
 };
 //#endregion
 //#region src/components/Footer/FooterList.tsx
-const FooterList = ({ className, ...rest }) => /* @__PURE__ */ jsx(StylelessList, {
-	className: cn(className, Footer_module_default.list),
-	...rest
+const FooterList = (props) => /* @__PURE__ */ jsx(VStack, {
+	as: StylelessList,
+	gap: "x1.5",
+	...props
 });
 //#endregion
 //#region src/components/Footer/FooterSocialsList.tsx
-const FooterSocialsList = ({ className, ...rest }) => /* @__PURE__ */ jsx(StylelessList, {
-	className: cn(className, Footer_module_default["socials-list"]),
-	...rest
+const FooterSocialsList = (props) => /* @__PURE__ */ jsx(HStack, {
+	as: StylelessList,
+	gap: "x1.5",
+	...props
 });
 //#endregion
 //#region src/components/Footer/FooterSocialsGroup.tsx
-const FooterSocialsGroup = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
-	className: cn(className, Footer_module_default["socials-group"]),
-	...rest
+const FooterSocialsGroup = (props) => /* @__PURE__ */ jsx(VStack, {
+	gap: "x1",
+	...props
 });
 //#endregion
 //#region src/components/Footer/FooterListGroup.tsx
-const FooterListGroup = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
-	className: cn(className, Footer_module_default["list-group"]),
-	...rest
+const FooterListGroup = (props) => /* @__PURE__ */ jsx(VStack, {
+	gap: "x1.5",
+	...props
 });
 //#endregion
 //#region src/components/Footer/FooterLeft.tsx
-const FooterLeft = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
-	className: cn(className, Footer_module_default["left"]),
-	...rest
+const FooterLeft = (props) => /* @__PURE__ */ jsx(VStack, {
+	gap: "x4",
+	...props
 });
 //#endregion
 //#region src/components/FormSummary/FormSummary.tsx
@@ -8282,9 +8294,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,
@@ -8294,10 +8304,16 @@ const icons$2 = {
 const GlobalMessage = ({ purpose = "info", closable, onClose, children, id, className, style, htmlProps, ...rest }) => {
 	const { t } = useTranslation();
 	const [isClosed, setClosed] = useState(false);
-	return !isClosed ? /* @__PURE__ */ jsxs("div", {
+	return !isClosed ? /* @__PURE__ */ 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__ */ 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__ */ jsxs(HStack, {
+			alignItems: "center",
+			paddingBlock: "x0.75",
+			paddingInline: closable ? "x0 x0.75" : " x0 x1.5",
 			children: [/* @__PURE__ */ jsx(Icon, {
 				icon: icons$2[purpose],
 				iconSize: "component",
@@ -9301,7 +9317,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)"
 	}),
@@ -9331,11 +9347,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)"
@@ -11350,25 +11370,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 = createContext({});
 const usePopoverContext = () => 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 = useContext(ThemeContext);
 	const portalTarget = parentElement ?? themeContext?.el;
@@ -11428,29 +11443,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__ */ jsx("div", {
-				className: Popover_module_default.header,
+			header && /* @__PURE__ */ jsx(Box, {
+				marginInline: "0 x2",
 				children: typeof header === "string" ? /* @__PURE__ */ jsx(Heading, {
 					level: 2,
 					typographyType: "heading-medium",
 					children: header
 				}) : header
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: !hasTitle && withCloseButton ? Popover_module_default["content--closable--no-header"] : "",
+			/* @__PURE__ */ jsx(Box, {
+				marginBlock: !hasTitle && withCloseButton ? "x2 0" : "0",
 				children
 			}),
-			withCloseButton && /* @__PURE__ */ jsx(Button, {
+			withCloseButton && /* @__PURE__ */ 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"
 			})
 		]
 	});