diff --git a/apps/admin-ui/jest.config.mjs b/apps/admin-ui/jest.config.mjs
index 9583252e80..998f76eb10 100644
--- a/apps/admin-ui/jest.config.mjs
+++ b/apps/admin-ui/jest.config.mjs
@@ -11,7 +11,8 @@ const customJestConfig = {
   modulePathIgnorePatterns: ["<rootDir>/.next/"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   moduleDirectories: ["node_modules", "<rootDir>/"],
-  testEnvironment: "jest-environment-jsdom",
+  // jsdom has broken stylesheet parsing
+  testEnvironment: "@happy-dom/jest-environment", // "jest-environment-jsdom",
 };
 
 const jestConfig = async () => {
diff --git a/apps/admin-ui/package.json b/apps/admin-ui/package.json
index ca39afe11f..6c43a51f7b 100644
--- a/apps/admin-ui/package.json
+++ b/apps/admin-ui/package.json
@@ -40,8 +40,8 @@
     "eslint-config-custom": "workspace:*",
     "form-data": "^4.0.0",
     "graphql": "^16.9.0",
-    "hds-core": "^3.11.0",
-    "hds-react": "^3.11.0",
+    "hds-core": "^4.1.0",
+    "hds-react": "^4.1.0",
     "i18next": "^23.15.1",
     "lodash": "^4.17.21",
     "next": "15.0.3",
@@ -64,6 +64,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@happy-dom/jest-environment": "^16.5.3",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
@@ -78,9 +79,9 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.29",
     "@vercel/style-guide": "^6.0.0",
+    "happy-dom": "^16.5.3",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.10",
     "postcss-scss": "^4.0.9",
     "postcss-styled-syntax": "^0.6.4",
diff --git a/apps/admin-ui/src/common/ScrollToTop.tsx b/apps/admin-ui/src/common/ScrollToTop.tsx
index a675ac29c1..2151080663 100644
--- a/apps/admin-ui/src/common/ScrollToTop.tsx
+++ b/apps/admin-ui/src/common/ScrollToTop.tsx
@@ -5,11 +5,8 @@ import { Button, IconAngleUp } from "hds-react";
 import { useDebounce, useWindowSize } from "react-use";
 import { breakpoints } from "common/src/common/style";
 
-const Btn = styled(Button).attrs({
-  style: {
-    "--color-bus": "var(--color-black)",
-  } as React.CSSProperties,
-})`
+// "--color-bus": "var(--color-black)",
+const Btn = styled(Button)`
   width: 40px;
   height: 40px;
   background-color: var(--color-black);
@@ -54,9 +51,13 @@ function ScrollToTop(): JSX.Element | null {
     300
   );
 
+  const handleClick = () => {
+    window.scroll({ top: 0, left: 0, behavior: "smooth" });
+  }
+
   return isEnabled && isVisible ? (
-    <Btn onClick={() => window.scroll({ top: 0, left: 0, behavior: "smooth" })}>
-      <IconAngleUp />
+    <Btn onClick={handleClick} iconStart={<IconAngleUp />}>
+      ""
     </Btn>
   ) : null;
 }
diff --git a/apps/admin-ui/src/component/DenyDialog.tsx b/apps/admin-ui/src/component/DenyDialog.tsx
index 7f2ab2c80b..7bb27dd43b 100644
--- a/apps/admin-ui/src/component/DenyDialog.tsx
+++ b/apps/admin-ui/src/component/DenyDialog.tsx
@@ -3,8 +3,10 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import {
   Button,
+  ButtonVariant,
   Dialog,
   RadioButton,
+  Select,
   SelectionGroup,
   TextArea,
 } from "hds-react";
@@ -19,14 +21,13 @@ import {
   OrderStatus,
 } from "@gql/gql-types";
 import { useModal } from "@/context/ModalContext";
-import { Select } from "@/component/Select";
 import { CenterSpinner, Flex } from "common/styles/util";
 import { CustomDialogHeader } from "@/component/CustomDialogHeader";
 import { useDenyReasonOptions } from "@/hooks";
 import { successToast, errorToast } from "common/src/common/toast";
 import { gql } from "@apollo/client";
 import { getValidationErrors } from "common/src/apolloUtils";
-import { toNumber } from "common/src/helpers";
+import { convertOptionToHDS, toNumber } from "common/src/helpers";
 
 const ActionButtons = styled(Dialog.ActionButtons)`
   justify-content: end;
@@ -180,14 +181,19 @@ function DialogContent({ reservation, onClose, onReject }: Props): JSX.Element {
       <Dialog.Content>
         <Flex>
           <Select
-            required
             id="denyReason"
-            options={options}
-            placeholder={t("common.select")}
-            label={t("RequestedReservation.DenyDialog.denyReason")}
-            onChange={(v) => setDenyReason(Number(v))}
-            value={denyReasonPk}
-            helper={t("RequestedReservation.DenyDialog.denyReasonHelper")}
+            required
+            texts={{
+              placeholder: t("common.select"),
+              label: t("RequestedReservation.DenyDialog.denyReason"),
+              assistive :t("RequestedReservation.DenyDialog.denyReasonHelper"),
+            }}
+            options={options.map(convertOptionToHDS)}
+            value={denyReasonPk ? denyReasonPk.toString() : undefined}
+            onChange={(selected) => {
+              const v = selected.find(() => true)?.value;
+              setDenyReason(toNumber(v))
+            } }
           />
           <TextArea
             value={handlingDetails}
@@ -207,9 +213,8 @@ function DialogContent({ reservation, onClose, onReject }: Props): JSX.Element {
       </Dialog.Content>
       <ActionButtons>
         <Button
-          variant="secondary"
+          variant={ButtonVariant.Secondary}
           onClick={onClose}
-          theme="black"
           data-testid="deny-dialog__cancel-button"
         >
           {t("common.prev")}
diff --git a/apps/admin-ui/src/component/EditTimeModal.tsx b/apps/admin-ui/src/component/EditTimeModal.tsx
index ee3e0db94a..633f4256af 100644
--- a/apps/admin-ui/src/component/EditTimeModal.tsx
+++ b/apps/admin-ui/src/component/EditTimeModal.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { Button, Dialog, Notification } from "hds-react";
+import { Button, ButtonSize, ButtonVariant, Dialog, Notification, NotificationSize } from "hds-react";
 import { z } from "zod";
 import { type TFunction } from "i18next";
 import {
@@ -61,12 +61,6 @@ const StyledDialog = styled(Dialog)`
   max-width: 944px;
 `;
 
-const btnCommon = {
-  theme: "black",
-  size: "small",
-  variant: "secondary",
-  disabled: false,
-} as const;
 
 function recurringReservationInfoText({
   weekdays,
@@ -280,7 +274,7 @@ function DialogContent({
         </TimeInfoBox>
         {hasCollisions && (
           <Notification
-            size="small"
+            size={NotificationSize.Small}
             label={t(`${commonTrKey}.error.reservationCollides`)}
             type="error"
             style={{ marginTop: "var(--spacing-s)", gridColumn: "1 / -1" }}
@@ -289,7 +283,10 @@ function DialogContent({
           </Notification>
         )}
         <ActionButtons>
-          <Button {...btnCommon} onClick={onClose}>
+          <Button
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Secondary}
+            onClick={onClose}>
             {t("common.cancel")}
           </Button>
           <Button disabled={isDisabled} type="submit">
diff --git a/apps/admin-ui/src/component/ExternalLink.tsx b/apps/admin-ui/src/component/ExternalLink.tsx
index c65a72ee11..394020ce54 100644
--- a/apps/admin-ui/src/component/ExternalLink.tsx
+++ b/apps/admin-ui/src/component/ExternalLink.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { IconLinkExternal } from "hds-react";
+import { IconLinkExternal, IconSize } from "hds-react";
 import styled from "styled-components";
 import { fontMedium } from "common/src/common/typography";
 import { Link } from "react-router-dom";
@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
 type Props = {
   to: string;
   children: string;
-  size?: "xs" | "s" | "m" | "l" | "xl";
+  size?: IconSize
   isBold?: boolean;
 };
 
diff --git a/apps/admin-ui/src/component/LinkPrev.tsx b/apps/admin-ui/src/component/LinkPrev.tsx
index 6f26e64546..971399adbf 100644
--- a/apps/admin-ui/src/component/LinkPrev.tsx
+++ b/apps/admin-ui/src/component/LinkPrev.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
-import { IconAngleLeft } from "hds-react";
+import { IconAngleLeft, IconSize } from "hds-react";
 import { Link } from "react-router-dom";
 
 const StyledLink = styled(Link)`
@@ -32,7 +32,7 @@ function LinkPrevInner({ route, style, className }: Props): JSX.Element {
       className={className}
       data-testid="link__previous"
     >
-      <IconAngleLeft size="s" aria-hidden />
+      <IconAngleLeft size={IconSize.Small} aria-hidden="true" />
       {t("common.prev")}
     </StyledLink>
   );
diff --git a/apps/admin-ui/src/component/More.tsx b/apps/admin-ui/src/component/More.tsx
index cedc7b0742..b821d54239 100644
--- a/apps/admin-ui/src/component/More.tsx
+++ b/apps/admin-ui/src/component/More.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { Button } from "hds-react";
+import { Button, ButtonVariant } from "hds-react";
 import { useTranslation } from "react-i18next";
 import type { ApolloQueryResult } from "@apollo/client";
 import type { PageInfo, Query } from "@gql/gql-types";
@@ -45,8 +45,10 @@ export function More({
             })}
           </Counts>
           <Button
-            isLoading={isFetching}
-            variant="secondary"
+            // FIXME
+            // isLoading={isFetching}
+            variant={ButtonVariant.Secondary}
+            disabled={isFetching}
             onClick={handleClick}
           >
             {t("common.showMore")}
diff --git a/apps/admin-ui/src/component/Navigation.tsx b/apps/admin-ui/src/component/Navigation.tsx
index 9ec8201c78..20903cd04f 100644
--- a/apps/admin-ui/src/component/Navigation.tsx
+++ b/apps/admin-ui/src/component/Navigation.tsx
@@ -6,6 +6,7 @@ import {
   IconSignout,
   IconStar,
   IconUser,
+  LogoSize,
   TitleStyleType,
 } from "hds-react";
 import React from "react";
@@ -281,7 +282,7 @@ const Navigation = ({ apiBaseUrl }: Props) => {
         titleStyle={TitleStyleType.Bold}
         titleHref={env.NEXT_PUBLIC_BASE_URL ?? "/"}
         openFrontPageLinksAriaLabel={t("common:applicationName")}
-        logo={<Logo size="large" style={{ filter: "invert(1)" }} />}
+        logo={<Logo size={LogoSize.Large} style={{ filter: "invert(1)" }} />}
         logoAriaLabel={`${t("common:applicationName")} logo`}
         logoHref={env.NEXT_PUBLIC_BASE_URL}
       >
diff --git a/apps/admin-ui/src/component/QueryParamFilters/ComboboxFilter.tsx b/apps/admin-ui/src/component/QueryParamFilters/ComboboxFilter.tsx
deleted file mode 100644
index b570ada649..0000000000
--- a/apps/admin-ui/src/component/QueryParamFilters/ComboboxFilter.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Combobox } from "hds-react";
-import { useTranslation } from "react-i18next";
-import { useSearchParams } from "react-router-dom";
-
-interface OptionValue {
-  toString: () => string;
-}
-
-export function ComboboxFilter<T extends OptionValue>({
-  name,
-  options,
-}: {
-  name: string;
-  options: Array<{ label: string; value: T }>;
-}) {
-  const { t } = useTranslation();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const filter = searchParams.getAll(name);
-  const setMultivalueSearchParam = (param: string, value: string[] | null) => {
-    const vals = new URLSearchParams(searchParams);
-    if (value == null || value.length === 0) {
-      vals.delete(param);
-    } else {
-      vals.set(param, value[0]);
-      value.forEach((v) => {
-        if (!vals.has(param, v)) {
-          vals.append(param, v);
-        }
-      });
-    }
-    setSearchParams(vals, { replace: true });
-  };
-  const onChange = (value: T[] | null) => {
-    const val = value?.map((v) => v.toString()) ?? null;
-    setMultivalueSearchParam(name, val);
-  };
-
-  const value = options.filter(
-    (v) => filter.find((x) => v.value.toString() === x) !== undefined
-  );
-
-  const label = t(`filters.label.${name}`);
-  const placeholder = t(`filters.placeholder.${name}`);
-  return (
-    <Combobox<typeof options>
-      label={label}
-      clearable
-      multiselect
-      /* @ts-expect-error - multiselect issues */
-      options={options}
-      disabled={options.length === 0}
-      value={value}
-      onChange={(val?: typeof options) =>
-        onChange(val?.map((x) => x.value) ?? null)
-      }
-      placeholder={placeholder}
-      clearButtonAriaLabel={t("common.clearAllSelections")}
-      selectedItemRemoveButtonAriaLabel={t("common.removeValue")}
-    />
-  );
-}
diff --git a/apps/admin-ui/src/component/QueryParamFilters/DayNavigation.tsx b/apps/admin-ui/src/component/QueryParamFilters/DayNavigation.tsx
index 73937958ce..3eb3e11e4c 100644
--- a/apps/admin-ui/src/component/QueryParamFilters/DayNavigation.tsx
+++ b/apps/admin-ui/src/component/QueryParamFilters/DayNavigation.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { addDays, subDays } from "date-fns";
 import { useTranslation } from "next-i18next";
-import { Button, IconAngleLeft, IconAngleRight, DateInput } from "hds-react";
+import { Button, IconAngleLeft, IconAngleRight, DateInput, ButtonSize, ButtonVariant } from "hds-react";
 import { fromUIDate, toUIDate } from "common/src/common/util";
 import { breakpoints } from "common";
 import { toMondayFirstUnsafe } from "common/src/helpers";
@@ -80,11 +80,10 @@ export function DayNavigation({ name }: Props): JSX.Element {
     <Wrapper>
       <Button
         aria-label={t("common.prev")}
-        size="small"
-        variant="supplementary"
-        theme="black"
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Supplementary}
         onClick={onPreviousDay}
-        iconLeft={<IconAngleLeft />}
+        iconStart={<IconAngleLeft aria-hidden="true" />}
       >
         {" "}
       </Button>
@@ -100,11 +99,10 @@ export function DayNavigation({ name }: Props): JSX.Element {
       />
       <Button
         aria-label={t("common.next")}
-        size="small"
-        variant="supplementary"
-        theme="black"
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Supplementary}
         onClick={onNextDay}
-        iconLeft={<IconAngleRight />}
+        iconStart={<IconAngleRight aria-hidden="true" />}
       >
         {" "}
       </Button>
diff --git a/apps/admin-ui/src/component/QueryParamFilters/MultiSelectFilter.tsx b/apps/admin-ui/src/component/QueryParamFilters/MultiSelectFilter.tsx
index 9682a8f5ea..7769954c1a 100644
--- a/apps/admin-ui/src/component/QueryParamFilters/MultiSelectFilter.tsx
+++ b/apps/admin-ui/src/component/QueryParamFilters/MultiSelectFilter.tsx
@@ -1,3 +1,4 @@
+import { convertOptionToHDS } from "common/src/helpers";
 import { Select } from "hds-react";
 import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
@@ -7,14 +8,14 @@ import { useSearchParams } from "react-router-dom";
 // Discriminated Union can't be broken, but are unwieldy to use in this case
 // We want any type compatible with string | number be accepted
 // but never accept a combination of any of those types ex. [{label: "foo", value: 1}, {label: "bar", value: "baz"}]
-export function MultiSelectFilter<T extends string | number>({
+export function MultiSelectFilter({
   name,
   options,
   style,
   className,
 }: {
   name: string;
-  options: { label: string; value: T }[];
+  options: { label: string; value: string | number }[];
   style?: React.CSSProperties;
   className?: string;
 }): JSX.Element {
@@ -24,7 +25,7 @@ export function MultiSelectFilter<T extends string | number>({
   const filter = params.getAll(name);
 
   // TODO copy paste from allocation/index.tsx
-  const setFilter = (value: string[] | null) => {
+  const setFilter = (value: string[]) => {
     const vals = new URLSearchParams(params);
     if (value == null || value.length === 0) {
       vals.delete(name);
@@ -45,16 +46,20 @@ export function MultiSelectFilter<T extends string | number>({
     <Select
       style={style}
       className={className}
-      label={label}
-      multiselect
-      placeholder={placeholder}
-      // @ts-expect-error -- multiselect problems
-      options={options}
+      clearable={true}
+      multiSelect
+      texts={{
+        label,
+        placeholder,
+      }}
+      noTags={true}
+      options={options.map(convertOptionToHDS)}
       disabled={options.length === 0}
-      value={options.filter((v) => filter.includes(v.value.toString())) ?? null}
-      onChange={(val?: typeof options) =>
-        setFilter(val?.map((x) => x.value.toString()) ?? null)
-      }
+      value={options.filter((v) => filter.includes(v.value.toString())).map(convertOptionToHDS)}
+      onChange={(selected) => {
+        const vals = selected.map((x) => x.value);
+        setFilter(vals);
+      }}
     />
   );
 }
diff --git a/apps/admin-ui/src/component/QueryParamFilters/SelectFilter.tsx b/apps/admin-ui/src/component/QueryParamFilters/SelectFilter.tsx
index df87ea3bb2..a290d86629 100644
--- a/apps/admin-ui/src/component/QueryParamFilters/SelectFilter.tsx
+++ b/apps/admin-ui/src/component/QueryParamFilters/SelectFilter.tsx
@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Select } from "hds-react";
 import { useTranslation } from "next-i18next";
+import { convertOptionToHDS } from "common/src/helpers";
 
 type SelectFilterProps = {
   name: string;
@@ -30,10 +31,10 @@ export function SelectFilter({
     return opts;
   }, [options, sort]);
 
-  const onChange = (value: (typeof options)[0]) => {
+  const onChange = (value: string | undefined) => {
     const params = new URLSearchParams(searchParams);
     if (value != null) {
-      params.set(name, value.value.toString());
+      params.set(name, value);
     } else {
       params.delete(name);
     }
@@ -48,13 +49,17 @@ export function SelectFilter({
   const placeholder = t("common.select");
   return (
     <Select
-      label={label}
-      id="isRecurring"
-      options={sortedOptions}
-      onChange={onChange}
-      value={options.find((x) => x.value === convertedValue) ?? null}
-      clearable={clearable}
-      placeholder={placeholder}
+      texts={{
+        label,
+        placeholder,
+      }}
+      options={sortedOptions.map(convertOptionToHDS)}
+      onChange={(selected) => {
+        const val = selected.find(() => true);
+        onChange(val?.value);
+      }}
+      value={options.find((x) => x.value === convertedValue)?.value?.toString()}
+      clearable={clearable ?? false}
     />
   );
 }
diff --git a/apps/admin-ui/src/component/QueryParamFilters/index.tsx b/apps/admin-ui/src/component/QueryParamFilters/index.tsx
index 088b764dff..f12f94be28 100644
--- a/apps/admin-ui/src/component/QueryParamFilters/index.tsx
+++ b/apps/admin-ui/src/component/QueryParamFilters/index.tsx
@@ -1,5 +1,4 @@
 export { CheckboxFilter } from "./CheckboxFilter";
-export { ComboboxFilter } from "./ComboboxFilter";
 export { DateRangeFilter } from "./DateRangeFilter";
 export { MultiSelectFilter } from "./MultiSelectFilter";
 export { NumberFilter } from "./NumberFilter";
diff --git a/apps/admin-ui/src/component/ReservationListButton.tsx b/apps/admin-ui/src/component/ReservationListButton.tsx
index 3354b856e5..35c99bc613 100644
--- a/apps/admin-ui/src/component/ReservationListButton.tsx
+++ b/apps/admin-ui/src/component/ReservationListButton.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import {
   Button,
+  ButtonSize,
+  ButtonVariant,
   IconArrowUndo,
   IconClock,
   IconCross,
@@ -22,10 +24,9 @@ export function ReservationListButton({
   t: TFunction;
 }) {
   const btnCommon = {
-    variant: "supplementary",
+    variant: ButtonVariant.Supplementary,
     onClick: callback,
-    size: "small",
-    theme: "black",
+    size: ButtonSize.Small,
     key: type,
   } as const;
 
@@ -33,7 +34,7 @@ export function ReservationListButton({
     case "show":
       return (
         <a href="#reservation-calendar" style={{ textDecoration: "none" }}>
-          <Button {...btnCommon} iconLeft={<IconClock />}>
+          <Button {...btnCommon} iconStart={<IconClock />}>
             {t("ReservationsListButton.showInCalendar")}
           </Button>
         </a>
@@ -41,19 +42,19 @@ export function ReservationListButton({
     case "deny":
     case "remove":
       return (
-        <Button {...btnCommon} iconLeft={<IconCross />}>
+        <Button {...btnCommon} iconStart={<IconCross />}>
           {type === "deny" ? t("common.deny") : t("common.remove")}
         </Button>
       );
     case "restore":
       return (
-        <Button {...btnCommon} iconLeft={<IconArrowUndo />}>
+        <Button {...btnCommon} iconStart={<IconArrowUndo />}>
           {t("common.restore")}
         </Button>
       );
     case "change":
       return (
-        <Button {...btnCommon} iconLeft={<IconPen />}>
+        <Button {...btnCommon} iconStart={<IconPen />}>
           {t("ReservationsListButton.changeTime")}
         </Button>
       );
diff --git a/apps/admin-ui/src/component/ReservationsList.tsx b/apps/admin-ui/src/component/ReservationsList.tsx
index a985be99de..8327087b31 100644
--- a/apps/admin-ui/src/component/ReservationsList.tsx
+++ b/apps/admin-ui/src/component/ReservationsList.tsx
@@ -7,7 +7,7 @@ import {
   ReservationQuery,
   UserPermissionChoice,
 } from "@gql/gql-types";
-import { Button } from "hds-react";
+import { Button, ButtonSize, ButtonVariant } from "hds-react";
 import { useCheckPermission } from "@/hooks";
 import { NewReservationModal } from "@/component/EditTimeModal";
 import { useModal } from "@/context/ModalContext";
@@ -184,9 +184,8 @@ function AddNewReservationButton({
 
   return (
     <Button
-      theme="black"
-      variant="secondary"
-      size="small"
+      size={ButtonSize.Small}
+      variant={ButtonVariant.Secondary}
       disabled={!hasPermission}
       onClick={handleClick}
     >
diff --git a/apps/admin-ui/src/component/Select.tsx b/apps/admin-ui/src/component/Select.tsx
deleted file mode 100644
index 897ae7486b..0000000000
--- a/apps/admin-ui/src/component/Select.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from "react";
-import { memoize } from "lodash";
-import { Select as HDSSelect } from "hds-react";
-import { OptionType } from "@/common/types";
-
-type NullableStringOrNumber = string | number | null;
-
-const getSelectedOption = (
-  options: OptionType[],
-  value: NullableStringOrNumber
-): OptionType => {
-  return options.find((o) => o.value === value) || ({} as OptionType);
-};
-
-/// @derprecated Use HDS select directly
-const Select = ({
-  id,
-  label,
-  onChange,
-  required = false,
-  value,
-  options,
-  placeholder,
-  helper,
-  errorText,
-  sort = false,
-  tooltipText,
-  clearable = false,
-}: {
-  id: string;
-  label: string;
-  required?: boolean;
-  value: NullableStringOrNumber;
-  onChange: (value: NullableStringOrNumber) => void;
-  options: OptionType[];
-  placeholder?: string;
-  helper?: string;
-  errorText?: string;
-  sort?: boolean;
-  tooltipText?: string;
-  clearable?: boolean;
-}): JSX.Element => {
-  const sortedOpts = memoize((originalOptions) => {
-    const opts = [...originalOptions];
-    if (sort) {
-      opts.sort((a, b) =>
-        a.label.toLowerCase().localeCompare(b.label.toLowerCase())
-      );
-    }
-    return opts;
-  })(options);
-
-  return (
-    <>
-      <div id={id} style={{ display: "none" }} />
-      <HDSSelect
-        id={id}
-        clearable={clearable}
-        label={label}
-        placeholder={placeholder}
-        options={sortedOpts}
-        required={required}
-        onChange={(e: OptionType) => {
-          if (e == null) {
-            onChange(null);
-            return;
-          }
-          onChange(e.value);
-        }}
-        disabled={options.length === 0}
-        helper={helper}
-        value={getSelectedOption(options, value)}
-        error={errorText}
-        invalid={!!errorText}
-        tooltipText={tooltipText}
-      />
-    </>
-  );
-};
-
-export { Select };
diff --git a/apps/admin-ui/src/component/WorkingMemo.tsx b/apps/admin-ui/src/component/WorkingMemo.tsx
index 0d56ec27d4..51b0f19393 100644
--- a/apps/admin-ui/src/component/WorkingMemo.tsx
+++ b/apps/admin-ui/src/component/WorkingMemo.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, TextArea } from "hds-react";
+import { Button, ButtonSize, ButtonVariant, TextArea } from "hds-react";
 import { type FetchResult } from "@apollo/client";
 import {
   useUpdateApplicationWorkingMemoMutation,
@@ -88,14 +88,13 @@ function WorkingMemo({
       />
       <ButtonContainer>
         <Button
-          size="small"
-          variant="secondary"
-          theme="black"
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Secondary}
           onClick={() => setWorkingMemo(initialValue || "")}
         >
           {t("common.cancel")}
         </Button>
-        <Button size="small" onClick={handleSave}>
+        <Button size={ButtonSize.Small} onClick={handleSave}>
           {t("RequestedReservation.save")}
         </Button>
       </ButtonContainer>
diff --git a/apps/admin-ui/src/spa/ReservationUnit/edit/GenericDialog.tsx b/apps/admin-ui/src/spa/ReservationUnit/edit/GenericDialog.tsx
index 894987618b..0ec10482ef 100644
--- a/apps/admin-ui/src/spa/ReservationUnit/edit/GenericDialog.tsx
+++ b/apps/admin-ui/src/spa/ReservationUnit/edit/GenericDialog.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
-import { Button, Dialog } from "hds-react";
+import { Button, ButtonVariant, Dialog } from "hds-react";
 import { useModal } from "@/context/ModalContext";
 
 const ActionButtons = styled(Dialog.ActionButtons)`
@@ -29,14 +29,10 @@ function DialogContent({
         </p>
       </Dialog.Content>
       <ActionButtons>
-        <Button variant="secondary" onClick={onClose}>
+        <Button variant={ButtonVariant.Secondary} onClick={onClose}>
           {t("common.cancel")}
         </Button>
-        <Button
-          onClick={() => {
-            onAccept();
-          }}
-        >
+        <Button onClick={onAccept}>
           {acceptLabel}
         </Button>
       </ActionButtons>
diff --git a/apps/admin-ui/src/spa/ReservationUnit/edit/ImageEditor.tsx b/apps/admin-ui/src/spa/ReservationUnit/edit/ImageEditor.tsx
index 96a0eb6412..7b83e43b21 100644
--- a/apps/admin-ui/src/spa/ReservationUnit/edit/ImageEditor.tsx
+++ b/apps/admin-ui/src/spa/ReservationUnit/edit/ImageEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
-import { Button, FileInput } from "hds-react";
+import { Button, ButtonSize, ButtonVariant, FileInput } from "hds-react";
 import { ImageType } from "@gql/gql-types";
 import { AutoGrid, Flex } from "common/styles/util";
 import { type ImageFormType } from "./form";
@@ -62,9 +62,8 @@ const FileInputContainer = styled.div`
 `;
 
 const SmallButton = styled(Button).attrs({
-  variant: "secondary",
-  theme: "black",
-  size: "small",
+  variant: ButtonVariant.Secondary,
+  size: ButtonSize.Small,
 })`
   ${fontRegular}
   border: 0;
diff --git a/apps/admin-ui/src/spa/ReservationUnit/edit/SeasonalSection.tsx b/apps/admin-ui/src/spa/ReservationUnit/edit/SeasonalSection.tsx
index 8489e788d7..46f6f1d754 100644
--- a/apps/admin-ui/src/spa/ReservationUnit/edit/SeasonalSection.tsx
+++ b/apps/admin-ui/src/spa/ReservationUnit/edit/SeasonalSection.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Checkbox, IconMinus, IconPlus } from "hds-react";
+import { Button, ButtonVariant, Checkbox, IconMinus, IconPlus } from "hds-react";
 import styled, { css } from "styled-components";
 import { Controller, UseFormReturn } from "react-hook-form";
 import { TimeInput } from "common/src/components/form/TimeInput";
@@ -329,7 +329,7 @@ export function SeasonalSection({
           <SeasonRow key={day.weekday} form={form} index={index} />
         ))}
         <div>
-          <Button variant="secondary" theme="black" onClick={handleClear}>
+          <Button variant={ButtonVariant.Secondary} onClick={handleClear}>
             {t("ReservationUnitEditor.clearSeasonalTimes")}
           </Button>
         </div>
diff --git a/apps/admin-ui/src/spa/ReservationUnit/edit/index.tsx b/apps/admin-ui/src/spa/ReservationUnit/edit/index.tsx
index e9a248a24b..8843b0cc16 100644
--- a/apps/admin-ui/src/spa/ReservationUnit/edit/index.tsx
+++ b/apps/admin-ui/src/spa/ReservationUnit/edit/index.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect } from "react";
 import {
   Button,
+  ButtonSize,
+  ButtonVariant,
   Checkbox,
   IconAlertCircleFill,
   IconArrowLeft,
@@ -195,7 +197,7 @@ const ButtonsStripe = styled.div`
 // Point of this is to have lighter colour buttons on dark background (inverted colours)
 const WhiteButton = styled(Button)<{
   disabled?: boolean;
-  variant: "secondary" | "primary" | "supplementary";
+  variant: ButtonVariant;
 }>`
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --bg: var(--color-white);
@@ -1883,9 +1885,8 @@ function ReservationUnitEditor({
         <div>
           <Button
             onClick={handleArchiveButtonClick}
-            variant="secondary"
+            variant={ButtonVariant.Secondary}
             disabled={isSaving || !archiveEnabled}
-            theme="black"
           >
             {t("ReservationUnitEditor.archive")}
           </Button>
@@ -1893,10 +1894,10 @@ function ReservationUnitEditor({
       </StyledContainerMedium>
       <ButtonsStripe>
         <WhiteButton
-          size="small"
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Supplementary}
+          iconStart={<IconArrowLeft aria-hidden="true" />}
           disabled={isSaving}
-          variant="supplementary"
-          iconLeft={<IconArrowLeft />}
           onClick={handleBack}
         >
           {t("common.prev")}
@@ -1916,21 +1917,23 @@ function ReservationUnitEditor({
           <span>{t("ReservationUnitEditor.preview")}</span>
         </Preview>
         <WhiteButton
-          size="small"
-          variant="secondary"
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Secondary}
           disabled={isSaving || !draftEnabled}
-          isLoading={isSaving && watch("isDraft")}
           type="button"
-          loadingText={t("ReservationUnitEditor.saving")}
+          // FIXME
+          // isLoading={isSaving && watch("isDraft")}
+          // loadingText={t("ReservationUnitEditor.saving")}
           onClick={handleSaveAsDraft}
         >
           {t("ReservationUnitEditor.saveAsDraft")}
         </WhiteButton>
         <WhiteButton
-          variant="primary"
+          variant={ButtonVariant.Primary}
           disabled={isSaving || !publishEnabled}
-          isLoading={isSaving && !watch("isDraft")}
-          loadingText={t("ReservationUnitEditor.saving")}
+          // FIXME
+          // isLoading={isSaving && !watch("isDraft")}
+          // loadingText={t("ReservationUnitEditor.saving")}
           type="button"
           onClick={handlePublish}
         >
diff --git a/apps/admin-ui/src/spa/ReservationUnit/edit/tags.tsx b/apps/admin-ui/src/spa/ReservationUnit/edit/tags.tsx
index d3aeadea01..8ec179ec12 100644
--- a/apps/admin-ui/src/spa/ReservationUnit/edit/tags.tsx
+++ b/apps/admin-ui/src/spa/ReservationUnit/edit/tags.tsx
@@ -35,22 +35,22 @@ export function ReservationStateTag({
       case ReservationUnitReservationState.ScheduledClosing:
         return {
           type: "info",
-          icon: <IconClock ariaHidden />,
+          icon: <IconClock aria-hidden="true" />,
         };
       case ReservationUnitReservationState.ReservationClosed:
         return {
           type: "neutral",
-          icon: <IconLock ariaHidden />,
+          icon: <IconLock aria-hidden="true" />,
         };
       case ReservationUnitReservationState.Reservable:
         return {
           type: "success",
-          icon: <IconEye ariaHidden />,
+          icon: <IconEye aria-hidden="true" />,
         };
       default:
         return {
           type: "neutral",
-          icon: <IconQuestionCircle ariaHidden />,
+          icon: <IconQuestionCircle aria-hidden="true" />,
         };
     }
   })(state);
diff --git a/apps/admin-ui/src/spa/application-rounds/ApplicationRoundCard.tsx b/apps/admin-ui/src/spa/application-rounds/ApplicationRoundCard.tsx
index f4f6941d7a..7f2a7cbc21 100644
--- a/apps/admin-ui/src/spa/application-rounds/ApplicationRoundCard.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/ApplicationRoundCard.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { IconArrowRight, IconCalendar } from "hds-react";
+import { IconArrowRight, IconCalendar, IconSize } from "hds-react";
 import { type ApplicationRoundsQuery } from "@gql/gql-types";
 import { formatDate } from "@/common/util";
 import { ApplicationRoundStatusLabel } from "./ApplicationRoundStatusLabel";
@@ -50,7 +50,7 @@ function ReservationPeriod({
 }): JSX.Element {
   return (
     <Flex $gap="xs" $direction="row" $alignItems="center">
-      <IconCalendar size="xs" />
+      <IconCalendar size={IconSize.ExtraSmall} />
       {formatDate(reservationPeriodBegin)}-{formatDate(reservationPeriodEnd)}
     </Flex>
   );
@@ -79,7 +79,7 @@ export function ApplicationRoundCard({
       key="view"
     >
       <span>{t("common.view")}</span>
-      <IconArrowRight size="m" />
+      <IconArrowRight size={IconSize.Medium} />
     </ButtonLikeLink>,
   ];
 
diff --git a/apps/admin-ui/src/spa/application-rounds/TimeframeStatus.tsx b/apps/admin-ui/src/spa/application-rounds/TimeframeStatus.tsx
index 183ed62677..591e8988dc 100644
--- a/apps/admin-ui/src/spa/application-rounds/TimeframeStatus.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/TimeframeStatus.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { IconClock } from "hds-react";
+import { IconClock, IconSize } from "hds-react";
 import { isPast, isFuture, isToday } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { formatDate } from "@/common/util";
@@ -54,7 +54,8 @@ function TimeframeStatus({
 
   return (
     <Wrapper data-testid="timeframe-status--wrapper">
-      <IconClock aria-hidden size="xs" /> {message}
+      <IconClock size={IconSize.ExtraSmall} aria-hidden="true" />
+      {message}
     </Wrapper>
   );
 }
diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/allocation/AllocationCard.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/allocation/AllocationCard.tsx
index c71d6e010b..45787f9f8c 100644
--- a/apps/admin-ui/src/spa/application-rounds/[id]/allocation/AllocationCard.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/[id]/allocation/AllocationCard.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "hds-react";
+import { Button, ButtonSize, ButtonVariant } from "hds-react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { H5, Strong, fontMedium } from "common/src/common/typography";
@@ -188,16 +188,16 @@ export function AllocatedCard({
       ) : null}
       <Flex $gap="s" $justifyContent="space-between">
         <Button
-          size="small"
-          variant="secondary"
-          theme="black"
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Secondary}
           onClick={handleRemoveAllocation}
-          isLoading={isLoading}
+          // FIXME
+          // isLoading={isLoading}
           disabled={isLoading}
         >
           {t("Allocation.removeAllocation")}
         </Button>
-        <Button size="small" disabled onClick={handleChangeSlot}>
+        <Button size={ButtonSize.Small} disabled onClick={handleChangeSlot}>
           {t("Allocation.changeSlot")}
         </Button>
       </Flex>
@@ -314,10 +314,11 @@ export function SuitableTimeCard({
       ) : null}
       <Flex $gap="s" $justifyContent="space-between">
         <Button
-          variant="primary"
-          size="small"
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Secondary}
           disabled={isDisabled || isLoading}
-          isLoading={isLoading}
+          // FIXME
+          // isLoading={isLoading}
           onClick={handleAcceptSlot}
         >
           {t("Allocation.acceptSlot", { duration: selectionDurationString })}
diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/allocation/AllocationColumn.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/allocation/AllocationColumn.tsx
index 53e7f74b67..a486291bfe 100644
--- a/apps/admin-ui/src/spa/application-rounds/[id]/allocation/AllocationColumn.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/[id]/allocation/AllocationColumn.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { IconCross, Select } from "hds-react";
+import { IconCross, Option, Select } from "hds-react";
 import { useTranslation } from "react-i18next";
 import { type TFunction } from "i18next";
 import { fontMedium } from "common/src/common/typography";
@@ -26,6 +26,7 @@ import {
 } from "./modules/applicationRoundAllocation";
 import { AllocatedCard, SuitableTimeCard } from "./AllocationCard";
 import { useSlotSelection } from "./hooks";
+import { convertOptionToHDS } from "common/src/helpers";
 
 type Props = {
   applicationSections: SectionNodeT[] | null;
@@ -146,66 +147,88 @@ function TimeSelection(): JSX.Element {
     setSelection(timeSlots);
   };
 
+  const onStartTimeChange = (sel: Option[]): void => {
+    const val = sel.find(() => true);
+    if (!val) {
+      return;
+    }
+    const [startHours, startMinutes] = val.label.split(":").map(Number);
+    const startTime = new Date().setHours(startHours, startMinutes);
+    const endOption = timeSlotEndOptions.find(
+      (n) => n.value === selection?.[selection.length - 1]
+    );
+    if (!endOption) {
+      return;
+    }
+    // TODO this is unsafe
+    const [endHours, endMinutes] = endOption.label.split(":").map(Number);
+    const endTime = new Date().setHours(endHours, endMinutes);
+
+    const startIndex = timeSlotStartOptions.indexOf(val);
+    const endValue =
+      startTime >= endTime
+        ? timeSlotEndOptions[startIndex + 1].value
+        : timeSlotEndOptions.find(
+            (n) => n.value === selection?.[selection.length - 1]
+          )?.value;
+    if (endValue != null && val.value != null) {
+      setSelectedTime(val.value, endValue);
+    }
+  }
+
+  const onEndTimeChange = (sel: Option[]): void => {
+    const val = sel.find(() => true);
+    if (!val) {
+      return;
+    }
+    setSelectedTime(undefined, val.value)
+  }
+
+  const isOptionDisabled = (option: Partial<Option>) => {
+    const firstOption = timeSlotStartOptions.find(
+      (n) => n.value === selection?.[0]
+    );
+    if (!firstOption) {
+      return false;
+    }
+    if (!option.label) {
+      return false;
+    }
+    const [startHours, startMinutes] = firstOption.label
+      .split(":")
+      .map(Number);
+    const startTime = new Date().setHours(startHours, startMinutes);
+    const [endHours, endMinutes] = option.label.split(":").map(Number);
+    const endTime = new Date().setHours(endHours, endMinutes);
+
+    return endTime <= startTime && endHours !== 0;
+  }
+
+  const startTimeOptions = timeSlotStartOptions.map(convertOptionToHDS);
+  const endTimeOptions = timeSlotEndOptions.map(convertOptionToHDS).map((n) => ({
+    ...n,
+    disabled: isOptionDisabled(n),
+  }));
+
   return (
     <TimeSelectWrapper>
       <Select
-        label={t("Allocation.startingTime")}
-        options={timeSlotStartOptions}
-        value={
-          timeSlotStartOptions.find((n) => n.value === selection?.[0]) ?? null
-        }
-        onChange={(val: (typeof timeSlotStartOptions)[0]) => {
-          const [startHours, startMinutes] = val.label.split(":").map(Number);
-          const startTime = new Date().setHours(startHours, startMinutes);
-          const endOption = timeSlotEndOptions.find(
-            (n) => n.value === selection?.[selection.length - 1]
-          );
-          if (!endOption) {
-            return;
-          }
-          // TODO this is unsafe
-          const [endHours, endMinutes] = endOption.label.split(":").map(Number);
-          const endTime = new Date().setHours(endHours, endMinutes);
-
-          const startIndex = timeSlotStartOptions.indexOf(val);
-          const endValue =
-            startTime >= endTime
-              ? timeSlotEndOptions[startIndex + 1].value
-              : timeSlotEndOptions.find(
-                  (n) => n.value === selection?.[selection.length - 1]
-                )?.value;
-          if (endValue != null && val.value != null) {
-            setSelectedTime(val.value, endValue);
-          }
+        texts={{
+          label: t("Allocation.startingTime"),
         }}
+        clearable={false}
+        options={startTimeOptions}
+        value={timeSlotStartOptions.find((n) => n.value === selection?.[0])?.value }
+        onChange={onStartTimeChange}
       />
       <Select
-        label={t("Allocation.endingTime")}
-        options={timeSlotEndOptions}
-        value={
-          timeSlotEndOptions.find(
-            (n) => n.value === selection?.[selection.length - 1]
-          ) ?? null
-        }
-        onChange={(val: (typeof timeSlotEndOptions)[0]) =>
-          setSelectedTime(undefined, val.value)
-        }
-        isOptionDisabled={(option) => {
-          const firstOption = timeSlotStartOptions.find(
-            (n) => n.value === selection?.[0]
-          );
-          if (!firstOption) {
-            return false;
-          }
-          const [startHours, startMinutes] = firstOption.label
-            .split(":")
-            .map(Number);
-          const startTime = new Date().setHours(startHours, startMinutes);
-          const [endHours, endMinutes] = option.label.split(":").map(Number);
-          const endTime = new Date().setHours(endHours, endMinutes);
-
-          return endTime <= startTime && endHours !== 0;
+        texts={{
+          label: t("Allocation.endingTime"),
         }}
+        clearable={false}
+        options={endTimeOptions}
+        value={timeSlotEndOptions.find((n) => n.value === selection?.[selection.length - 1])?.value }
+        onChange={onEndTimeChange}
       />
     </TimeSelectWrapper>
   );
diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/allocation/ApplicationEventCard.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/allocation/ApplicationEventCard.tsx
index 042a4de874..fe7d258001 100644
--- a/apps/admin-ui/src/spa/application-rounds/[id]/allocation/ApplicationEventCard.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/[id]/allocation/ApplicationEventCard.tsx
@@ -2,6 +2,7 @@ import {
   IconAngleDown,
   IconAngleUp,
   IconLinkExternal,
+  IconSize,
   RadioButton,
 } from "hds-react";
 import React, { useState } from "react";
@@ -221,7 +222,7 @@ export function ApplicationSectionCard({
           <b>
             {applicationSection.application.pk}-{applicationSection.pk}
           </b>
-          <IconLinkExternal size="xs" aria-hidden />
+          <IconLinkExternal size={IconSize.ExtraSmall} aria-hidden="true" />
         </StyledLink>
         <div>
           {t("Allocation.ageGroup")}:{" "}
diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/allocation/NotificationInline.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/allocation/NotificationInline.tsx
index bd80730f82..1db0802f71 100644
--- a/apps/admin-ui/src/spa/application-rounds/[id]/allocation/NotificationInline.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/[id]/allocation/NotificationInline.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import {
   IconAlertCircleFill,
   IconErrorFill,
+  IconSize,
   Notification,
   NotificationProps,
 } from "hds-react";
@@ -27,11 +28,11 @@ const StyledNotification = styled(Notification)`
 `;
 
 /// TODO see if we can use vars for the colours (they are svg fill colours so css vars might not work)
-const WarningIcon = <IconAlertCircleFill size="s" color="#D18200" />;
-const ErrorIcon = <IconErrorFill size="s" color="#B01038" />;
+const WarningIcon = <IconAlertCircleFill size={IconSize.Small} color="#D18200" />;
+const ErrorIcon = <IconErrorFill size={IconSize.Small} color="#B01038" />;
 // TODO check the colours and icons for success and info
-const SuccessIcon = <IconAlertCircleFill size="s" color="#006442" />;
-const InfoIcon = <IconAlertCircleFill size="s" color="#006442" />;
+const SuccessIcon = <IconAlertCircleFill size={IconSize.Small} color="#006442" />;
+const InfoIcon = <IconAlertCircleFill size={IconSize.Small} color="#006442" />;
 
 function getIcon(type: NotificationProps["type"]): React.ReactNode {
   switch (type) {
diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/allocation/index.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/allocation/index.tsx
index 4be41bc806..a641d4ab7c 100644
--- a/apps/admin-ui/src/spa/application-rounds/[id]/allocation/index.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/[id]/allocation/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { Select, Tabs } from "hds-react";
 import { useTranslation } from "react-i18next";
-import { uniqBy } from "lodash";
+import { toNumber, uniqBy } from "lodash";
 import { useParams, useSearchParams } from "react-router-dom";
 import styled from "styled-components";
 import { H1, fontBold, fontMedium } from "common/src/common/typography";
@@ -16,7 +16,7 @@ import {
   useAllApplicationEventsQuery,
   UserPermissionChoice,
 } from "@gql/gql-types";
-import { base64encode, filterNonNullable } from "common/src/helpers";
+import { base64encode, convertOptionToHDS, filterNonNullable } from "common/src/helpers";
 import { SearchTags } from "@/component/SearchTags";
 import { useOptions } from "@/hooks";
 import { autoGridCss, CenterSpinner, TabWrapper } from "common/styles/util";
@@ -27,7 +27,7 @@ import {
 } from "@/common/const";
 import { truncate } from "@/helpers";
 import { AllocationPageContent } from "./ApplicationEvents";
-import { ComboboxFilter, SearchFilter } from "@/component/QueryParamFilters";
+import { MultiSelectFilter, SearchFilter } from "@/component/QueryParamFilters";
 import { convertPriorityFilter } from "./modules/applicationRoundAllocation";
 import { LinkPrev } from "@/component/LinkPrev";
 import { useSession } from "@/hooks/auth";
@@ -153,24 +153,30 @@ function Filters({
     <>
       {/* NOTE can't easily be refactored into reusable component because it has a side effect onChange */}
       <Select
-        label={t("filters.label.unit")}
-        options={unitOptions}
+        texts={{
+          label: t("filters.label.unit"),
+          placeholder: t("common.selectPlaceholder"),
+          // FIXME
+          // clearButtonAriaLabel: t("common.clearAllSelections"),
+          // selectedItemRemoveButtonAriaLabel: t("common.removeValue"),
+        }}
+        clearable={false}
+        options={unitOptions.map(convertOptionToHDS)}
         disabled={unitOptions.length === 0}
-        value={unitOptions.find((v) => v.value === Number(unitFilter)) ?? null}
-        onChange={(val: { label: string; value: number }) =>
-          setUnitFilter(val.value ?? null)
-        }
-        placeholder={t("common.selectPlaceholder")}
-        clearButtonAriaLabel={t("common.clearAllSelections")}
-        selectedItemRemoveButtonAriaLabel={t("common.removeValue")}
+        value={unitOptions.find((v) => v.value === toNumber(unitFilter))?.value?.toString()}
+        onChange={(selection) => {
+          const val = selection.find(() => true)?.value;
+          const v = toNumber(val);
+          setUnitFilter(v);
+        }}
       />
-      <ComboboxFilter name="priority" options={priorityOptions} />
-      <ComboboxFilter name="order" options={orderOptions} />
+      <MultiSelectFilter name="priority" options={priorityOptions} />
+      <MultiSelectFilter name="order" options={orderOptions} />
       <SearchFilter name="search" />
-      <ComboboxFilter name="homeCity" options={cityOptions} />
-      <ComboboxFilter name="applicantType" options={customerFilterOptions} />
-      <ComboboxFilter name="ageGroup" options={ageGroupOptions} />
-      <ComboboxFilter name="purpose" options={purposeOptions} />
+      <MultiSelectFilter name="homeCity" options={cityOptions} />
+      <MultiSelectFilter name="applicantType" options={customerFilterOptions} />
+      <MultiSelectFilter name="ageGroup" options={ageGroupOptions} />
+      <MultiSelectFilter name="purpose" options={purposeOptions} />
     </>
   );
 }
diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/review/AllocatedEventsTable.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/review/AllocatedEventsTable.tsx
index 84d3caa579..95c441c6d7 100644
--- a/apps/admin-ui/src/spa/application-rounds/[id]/review/AllocatedEventsTable.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/[id]/review/AllocatedEventsTable.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
 import { memoize } from "lodash";
-import { IconLinkExternal } from "hds-react";
+import { IconLinkExternal, IconSize } from "hds-react";
 import type { AllocatedTimeSlotsQuery } from "@gql/gql-types";
 import { convertWeekday } from "common/src/conversion";
 import { getApplicantName, truncate } from "@/helpers";
@@ -90,7 +90,7 @@ const COLS = [
     }: ApplicationScheduleView) => (
       <ExternalTableLink to={getApplicationUrl(applicationPk, pk)}>
         {truncate(applicantName ?? "-", applicantTruncateLen)}
-        <IconLinkExternal size="xs" aria-hidden />
+        <IconLinkExternal size={IconSize.ExtraSmall} aria-hidden="true" />
       </ExternalTableLink>
     ),
   },
diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/review/ApplicationEventsTable.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/review/ApplicationEventsTable.tsx
index 65c9077320..1ef0dd0f5d 100644
--- a/apps/admin-ui/src/spa/application-rounds/[id]/review/ApplicationEventsTable.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/[id]/review/ApplicationEventsTable.tsx
@@ -9,6 +9,7 @@ import {
   IconCross,
   IconLinkExternal,
   IconQuestionCircle,
+  IconSize,
 } from "hds-react";
 import {
   ApplicationSectionsQuery,
@@ -132,7 +133,7 @@ const getColConfig = (t: TFunction) =>
       }: ApplicationEventView) => (
         <ExternalTableLink to={getApplicationUrl(applicationPk, pk)}>
           {truncate(applicantName ?? "-", applicantTruncateLen)}
-          <IconLinkExternal size="xs" aria-hidden />
+          <IconLinkExternal size={IconSize.ExtraSmall} aria-hidden="true" />
         </ExternalTableLink>
       ),
     },
diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/review/ApplicationsTable.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/review/ApplicationsTable.tsx
index 1418914c12..7f49e6ee6a 100644
--- a/apps/admin-ui/src/spa/application-rounds/[id]/review/ApplicationsTable.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/[id]/review/ApplicationsTable.tsx
@@ -10,6 +10,7 @@ import {
   IconEnvelope,
   IconLinkExternal,
   IconQuestionCircle,
+  IconSize,
 } from "hds-react";
 import { ApplicationsQuery, ApplicationStatusChoice } from "@gql/gql-types";
 import { filterNonNullable } from "common/src/helpers";
@@ -89,7 +90,7 @@ const getColConfig = (t: TFunction) =>
       transform: ({ applicantName, pk }: ApplicationView) => (
         <ExternalTableLink to={getApplicationUrl(pk)}>
           {truncate(applicantName ?? "-", applicantTruncateLen)}
-          <IconLinkExternal size="xs" aria-hidden />
+          <IconLinkExternal size={IconSize.ExtraSmall} aria-hidden="true" />
         </ExternalTableLink>
       ),
     },
diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/review/RejectedOccurrencesTable.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/review/RejectedOccurrencesTable.tsx
index a0a22ca8f7..533fd02951 100644
--- a/apps/admin-ui/src/spa/application-rounds/[id]/review/RejectedOccurrencesTable.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/[id]/review/RejectedOccurrencesTable.tsx
@@ -3,7 +3,7 @@ import { CustomTable } from "@/component/Table";
 import { getApplicationUrl, getReservationUrl } from "@/common/urls";
 import type { RejectedOccurrencesQuery } from "@gql/gql-types";
 import { truncate } from "common/src/helpers";
-import { IconLinkExternal } from "hds-react";
+import { IconLinkExternal, IconSize } from "hds-react";
 import { memoize } from "lodash";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
@@ -97,7 +97,7 @@ const COLS = [
     }: RejectedOccurrencesView) => (
       <ExternalTableLink to={getApplicationUrl(applicationPk, pk)}>
         {truncate(applicantName ?? "-", applicantTruncateLen)}
-        <IconLinkExternal size="xs" aria-hidden />
+        <IconLinkExternal size={IconSize.ExtraSmall} aria-hidden="true" />
       </ExternalTableLink>
     ),
   },
diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/review/index.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/review/index.tsx
index 1a13bef574..6a2164cd91 100644
--- a/apps/admin-ui/src/spa/application-rounds/[id]/review/index.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/[id]/review/index.tsx
@@ -193,10 +193,11 @@ function EndAllocation({
   return (
     <StyledNotification type={hasFailed ? "error" : "info"} label={infoBody}>
       <Button
-        isLoading={isInProgress}
-        loadingText={t("ApplicationRound.info.loadingText")}
+        // FIXME
+        // isLoading={isInProgress}
+        // loadingText={t("ApplicationRound.info.loadingText")}
         onClick={() => setWaitingForHandle(true)}
-        disabled={hasFailed || isResultsSent || !canEndAllocation}
+        disabled={hasFailed || isResultsSent || !canEndAllocation || isInProgress}
       >
         {infoButton}
       </Button>
@@ -321,7 +322,7 @@ export function Review({
                 {t("ApplicationRound.allocate")}
               </ButtonLikeLink>
             ) : (
-              <Button variant="primary" disabled>
+              <Button disabled>
                 {t("ApplicationRound.allocate")}
               </Button>
             )}
diff --git a/apps/admin-ui/src/spa/application-rounds/index.tsx b/apps/admin-ui/src/spa/application-rounds/index.tsx
index 25031eaf31..47b47a04e4 100644
--- a/apps/admin-ui/src/spa/application-rounds/index.tsx
+++ b/apps/admin-ui/src/spa/application-rounds/index.tsx
@@ -25,6 +25,9 @@ import { CenterSpinner, Flex } from "common/styles/util";
 const AccordionWithoutTopPadding = styled(Accordion).attrs({
   closeButton: false,
 })`
+  & > div > div {
+    width: 100%;
+  }
   & [class*="Accordion-module_accordionHeader__"] {
     padding-top: 0;
     margin-top: 0;
@@ -37,6 +40,7 @@ const StyledAccordion = styled(AccordionWithoutTopPadding).attrs({
 })`
   & > div > div {
     display: grid;
+    width: 100%;
   }
   {/* This is to give more space to the name-column in the previous rounds table */}
   &.previous-rounds td:first-child {
diff --git a/apps/admin-ui/src/spa/applications/[id]/index.tsx b/apps/admin-ui/src/spa/applications/[id]/index.tsx
index 49b724671c..bc4a65f3da 100644
--- a/apps/admin-ui/src/spa/applications/[id]/index.tsx
+++ b/apps/admin-ui/src/spa/applications/[id]/index.tsx
@@ -10,6 +10,8 @@ import {
   IconArrowRedo,
   Tag,
   IconCogwheel,
+  ButtonSize,
+  ButtonVariant,
 } from "hds-react";
 import { isEqual, trim } from "lodash";
 import { type ApolloQueryResult } from "@apollo/client";
@@ -375,13 +377,13 @@ function RejectOptionButton({
   }
   return (
     <Button
-      variant="supplementary"
-      iconLeft={isRejected ? <IconArrowRedo /> : <IconCross />}
-      theme="black"
-      size="small"
+      variant={ButtonVariant.Supplementary}
+      size={ButtonSize.Small}
+      iconStart={isRejected ? <IconArrowRedo /> : <IconCross />}
       onClick={isRejected ? handleRevert : handleReject}
-      isLoading={loading}
-      disabled={isDisabled}
+      // FIXME
+      // isLoading={loading}
+      disabled={isDisabled || loading}
       data-testid={`reject-btn-${option.pk}`}
     >
       {isRejected
@@ -487,11 +489,12 @@ function RejectAllOptionsButton({
   }
   return (
     <Button
-      disabled={isDisabled}
-      size="small"
-      variant="secondary"
+      disabled={isDisabled || isLoading}
+      variant={ButtonVariant.Secondary}
+      size={ButtonSize.Small}
       onClick={() => (isRejected ? handleRestoreAll() : handleRejectAll())}
-      isLoading={isLoading}
+      // FIXME
+      // isLoading={isLoading}
     >
       {isRejected
         ? t("Application.section.btnRestoreAll")
@@ -571,8 +574,7 @@ function ApplicationSectionDetails({
       transform: (reservationUnitOption: ReservationUnitOptionType) => {
         if (reservationUnitOption.rejected) {
           return (
-            <DeclinedTag>
-              <IconCross />
+            <DeclinedTag iconStart={<IconCross aria-hidden="true" />}>
               {t("Application.rejected")}
             </DeclinedTag>
           );
@@ -794,9 +796,8 @@ function RejectApplicationButton({
 
   return (
     <Button
-      size="small"
-      variant="secondary"
-      theme="black"
+      variant={ButtonVariant.Secondary}
+      size={ButtonSize.Small}
       onClick={() => (isRejected ? handleRestoreAll() : handleRejectAll())}
       disabled={isDisabled}
     >
diff --git a/apps/admin-ui/src/spa/my-units/[id]/CreateReservationModal.tsx b/apps/admin-ui/src/spa/my-units/[id]/CreateReservationModal.tsx
index fba11d45ef..7f5f488483 100644
--- a/apps/admin-ui/src/spa/my-units/[id]/CreateReservationModal.tsx
+++ b/apps/admin-ui/src/spa/my-units/[id]/CreateReservationModal.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { gql } from "@apollo/client";
 import { useForm, FormProvider, UseFormReturn } from "react-hook-form";
-import { Button, Dialog, Notification } from "hds-react";
+import { Button, ButtonSize, ButtonVariant, Dialog, Notification, NotificationSize } from "hds-react";
 import { useTranslation } from "react-i18next";
 import {
   type ReservationStaffCreateMutationInput,
@@ -147,10 +147,10 @@ function CollisionWarning({
   }
   return (
     <StyledNotification
-      size="small"
+      size={NotificationSize.Small}
       label={t("errors.descriptive.collision")}
       type="error"
-      dataTestId="CreateReservationModal__collision-warning"
+      data-testid="CreateReservationModal__collision-warning"
     >
       {t("errors.descriptive.collision")}
     </StyledNotification>
@@ -182,17 +182,16 @@ function ActionContainer({
     <ActionButtons>
       <CollisionWarning form={form} reservationUnit={reservationUnit} />
       <Button
-        size="small"
-        variant="secondary"
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Secondary}
         onClick={onCancel}
-        theme="black"
         data-testid="CreateReservationModal__cancel-reservation"
       >
         {t("common.cancel")}
       </Button>
       <Button
         type="button"
-        size="small"
+        size={ButtonSize.Small}
         disabled={isDisabled}
         onClick={() => {
           handleSubmit(onSubmit)();
diff --git a/apps/admin-ui/src/spa/my-units/[id]/ReservationUnitCalendarView.tsx b/apps/admin-ui/src/spa/my-units/[id]/ReservationUnitCalendarView.tsx
index ba13542a0a..2cf4b84b79 100644
--- a/apps/admin-ui/src/spa/my-units/[id]/ReservationUnitCalendarView.tsx
+++ b/apps/admin-ui/src/spa/my-units/[id]/ReservationUnitCalendarView.tsx
@@ -4,7 +4,8 @@ import { AutoGrid, Flex } from "common/styles/util";
 import { ReservationUnitCalendar } from "./ReservationUnitCalendar";
 import WeekNavigation from "./WeekNavigation";
 import { useTranslation } from "next-i18next";
-import { Select } from "hds-react";
+import { Option, Select } from "hds-react";
+import { convertOptionToHDS, toNumber } from "common/src/helpers";
 
 export function ReservationUnitCalendarView({
   reservationUnitOptions,
@@ -30,24 +31,32 @@ export function ReservationUnitCalendarView({
     }
   }, [reservationUnitOptions]);
 
-  const onChange = (reservationUnits: { label: string; value: number }) => {
-    setReservationUnitPk(reservationUnits.value);
+  const onChange = (selecte: Option[]) => {
+    // reservationUnits: { label: string; value: number }) => {
+    const value = selecte.find(() => true)?.value;
+    const v = toNumber(value);
+    if (v != null) {
+      setReservationUnitPk(v);
+    }
   };
 
   return (
     <>
       <AutoGrid>
         <Select
+          id="reservation-unit"
+          disabled={reservationUnitOptions.length === 0}
           style={{
             zIndex: "var(--tilavaraus-admin-stack-select-over-calendar)",
           }}
-          disabled={reservationUnitOptions.length === 0}
-          label={t("ReservationUnitsFilter.label")}
-          placeholder={t("common.select")}
-          options={reservationUnitOptions}
-          value={valueOption}
+          texts={{
+            label: t("ReservationUnitsFilter.label"),
+            placeholder: t("common.select"),
+          }}
+          clearable={false}
+          options={reservationUnitOptions.map(convertOptionToHDS)}
+          value={valueOption?.value.toString()}
           onChange={onChange}
-          id="reservation-unit"
         />
       </AutoGrid>
       <Flex $justifyContent="center" $direction="row">
diff --git a/apps/admin-ui/src/spa/my-units/[id]/UnitReservations.tsx b/apps/admin-ui/src/spa/my-units/[id]/UnitReservations.tsx
index 33af9c1f0f..e97addca30 100644
--- a/apps/admin-ui/src/spa/my-units/[id]/UnitReservations.tsx
+++ b/apps/admin-ui/src/spa/my-units/[id]/UnitReservations.tsx
@@ -8,7 +8,7 @@ import { UnitCalendar } from "./UnitCalendar";
 import { useUnitResources } from "./hooks";
 import { fromUIDate, isValidDate, toUIDate } from "common/src/common/util";
 import { startOfDay } from "date-fns";
-import { Button } from "hds-react";
+import { Button, ButtonSize, ButtonVariant } from "hds-react";
 import { useParams, useSearchParams } from "react-router-dom";
 import { AutoGrid, Flex } from "common/styles/util";
 import { useReservationUnitTypes } from "@/hooks";
@@ -130,9 +130,8 @@ export function UnitReservations(): JSX.Element {
         $alignItems="center"
       >
         <Button
-          variant="secondary"
-          theme="black"
-          size="small"
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Secondary}
           onClick={() => {
             const p = new URLSearchParams(searchParams);
             p.set("date", toUIDate(new Date()));
diff --git a/apps/admin-ui/src/spa/my-units/[id]/WeekNavigation.tsx b/apps/admin-ui/src/spa/my-units/[id]/WeekNavigation.tsx
index fb54860ef8..931200b328 100644
--- a/apps/admin-ui/src/spa/my-units/[id]/WeekNavigation.tsx
+++ b/apps/admin-ui/src/spa/my-units/[id]/WeekNavigation.tsx
@@ -1,5 +1,5 @@
 import { endOfISOWeek, format, getISOWeek, startOfISOWeek } from "date-fns";
-import { Button, IconAngleLeft, IconAngleRight } from "hds-react";
+import { Button, ButtonSize, ButtonVariant, IconAngleLeft, IconAngleRight } from "hds-react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { DATE_FORMAT, DATE_FORMAT_SHORT } from "@/common/util";
@@ -21,11 +21,10 @@ function WeekNavigation({ date, onNext, onPrev }: Props): JSX.Element {
     <Flex $alignItems="center" $direction="row">
       <Button
         aria-label={t("common.prev")}
-        size="small"
-        variant="supplementary"
-        theme="black"
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Secondary}
         onClick={onPrev}
-        iconLeft={<IconAngleLeft />}
+        iconStart={<IconAngleLeft aria-hidden="true" />}
       >
         {" "}
       </Button>
@@ -36,11 +35,10 @@ function WeekNavigation({ date, onNext, onPrev }: Props): JSX.Element {
       </div>
       <Button
         aria-label={t("common.next")}
-        size="small"
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Supplementary}
         onClick={onNext}
-        variant="supplementary"
-        theme="black"
-        iconLeft={<IconAngleRight />}
+        iconStart={<IconAngleRight aria-hidden="true" />}
       >
         {" "}
       </Button>
diff --git a/apps/admin-ui/src/spa/my-units/recurring/RecurringReservationForm.tsx b/apps/admin-ui/src/spa/my-units/recurring/RecurringReservationForm.tsx
index c5dcba5846..51c5c03bf4 100644
--- a/apps/admin-ui/src/spa/my-units/recurring/RecurringReservationForm.tsx
+++ b/apps/admin-ui/src/spa/my-units/recurring/RecurringReservationForm.tsx
@@ -8,7 +8,7 @@ import {
 } from "@gql/gql-types";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "next-i18next";
-import { Button, TextInput, Notification } from "hds-react";
+import { Button, TextInput, Notification, ButtonVariant } from "hds-react";
 import styled from "styled-components";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { fromUIDate } from "common/src/common/util";
@@ -400,11 +400,12 @@ function RecurringReservationForm({
               {t("common.cancel")}
             </ButtonLikeLink>
             <Button
-              variant="primary"
+              variant={ButtonVariant.Secondary}
               type="submit"
               data-testid="recurring-reservation-form__submit-button"
-              isLoading={isSubmitting}
-              disabled={!isDirty}
+              disabled={!isDirty || isSubmitting}
+              // FIXME
+              // isLoading={isSubmitting}
             >
               {t("common.reserve")}
             </Button>
diff --git a/apps/admin-ui/src/spa/notifications/index.tsx b/apps/admin-ui/src/spa/notifications/index.tsx
index 3c9abaa288..7a4335db27 100644
--- a/apps/admin-ui/src/spa/notifications/index.tsx
+++ b/apps/admin-ui/src/spa/notifications/index.tsx
@@ -32,13 +32,13 @@ const getStatusLabelProps = (
 ): { type: StatusLabelType; icon: JSX.Element } => {
   switch (state) {
     case BannerNotificationState.Draft:
-      return { type: "draft", icon: <IconPen ariaHidden /> };
+      return { type: "draft", icon: <IconPen aria-hidden="true" /> };
     case BannerNotificationState.Scheduled:
-      return { type: "info", icon: <IconClock ariaHidden /> };
+      return { type: "info", icon: <IconClock aria-hidden="true" /> };
     case BannerNotificationState.Active:
-      return { type: "success", icon: <IconCheck ariaHidden /> };
+      return { type: "success", icon: <IconCheck aria-hidden="true" /> };
     default:
-      return { type: "info", icon: <IconQuestionCircleFill ariaHidden /> };
+      return { type: "info", icon: <IconQuestionCircleFill aria-hidden="true" /> };
   }
 };
 
diff --git a/apps/admin-ui/src/spa/notifications/page.tsx b/apps/admin-ui/src/spa/notifications/page.tsx
index 582e539a2a..0d434e1921 100644
--- a/apps/admin-ui/src/spa/notifications/page.tsx
+++ b/apps/admin-ui/src/spa/notifications/page.tsx
@@ -9,6 +9,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Controller, useForm } from "react-hook-form";
 import {
   Button,
+  ButtonVariant,
   IconCheck,
   IconClock,
   IconPen,
@@ -134,17 +135,17 @@ function BannerNotificationStatusLabel({
       case BannerNotificationState.Draft:
         return {
           type: "draft",
-          icon: <IconPen ariaHidden />,
+          icon: <IconPen aria-hidden="true" />,
         };
       case BannerNotificationState.Active:
         return {
           type: "success",
-          icon: <IconCheck ariaHidden />,
+          icon: <IconCheck aria-hidden="true" />,
         };
       case BannerNotificationState.Scheduled:
         return {
           type: "info",
-          icon: <IconClock ariaHidden />,
+          icon: <IconClock aria-hidden="true" />,
         };
     }
   })(state);
@@ -566,7 +567,7 @@ const NotificationForm = ({
       <ButtonContainer>
         <InnerButtons>
           <ButtonLikeLink
-            variant="secondary"
+            variant={ButtonVariant.Secondary}
             size="large"
             to=".."
             data-testid="Notification__Page--cancel-button"
@@ -574,8 +575,7 @@ const NotificationForm = ({
             {t("form.cancel")}
           </ButtonLikeLink>
           <Button
-            variant="secondary"
-            theme="black"
+            variant={ButtonVariant.Secondary}
             type="button"
             onClick={() => {
               setValue("isDraft", true);
@@ -692,8 +692,7 @@ function LoadedContent({
         >
           <Button
             onClick={removeNotification}
-            variant="secondary"
-            theme="black"
+            variant={ButtonVariant.Secondary}
           >
             {t("Notifications.deleteButton")}
           </Button>
diff --git a/apps/admin-ui/src/spa/reservations/[id]/ApprovalButtons.tsx b/apps/admin-ui/src/spa/reservations/[id]/ApprovalButtons.tsx
index 4483ab8290..98db8a6eb7 100644
--- a/apps/admin-ui/src/spa/reservations/[id]/ApprovalButtons.tsx
+++ b/apps/admin-ui/src/spa/reservations/[id]/ApprovalButtons.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ReservationStateChoice, type ReservationQuery } from "@gql/gql-types";
 import { useTranslation } from "react-i18next";
-import { Button } from "hds-react";
+import { Button, ButtonSize, ButtonVariant } from "hds-react";
 import { ButtonLikeLink } from "@/component/ButtonLikeLink";
 import { DenyDialog } from "@/component/DenyDialog";
 import ApproveDialog from "./ApproveDialog";
@@ -69,9 +69,8 @@ const ApprovalButtons = ({
   const endTime = new Date(reservation.end);
 
   const btnCommon = {
-    theme: "black",
-    size: "small",
-    variant: "secondary",
+    size: ButtonSize.Small,
+    variant: ButtonVariant.Secondary,
     disabled: false,
   } as const;
 
diff --git a/apps/admin-ui/src/spa/reservations/[id]/ApprovalButtonsRecurring.tsx b/apps/admin-ui/src/spa/reservations/[id]/ApprovalButtonsRecurring.tsx
index 84e4d51573..bdf929d6ff 100644
--- a/apps/admin-ui/src/spa/reservations/[id]/ApprovalButtonsRecurring.tsx
+++ b/apps/admin-ui/src/spa/reservations/[id]/ApprovalButtonsRecurring.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { type ReservationQuery } from "@gql/gql-types";
 import { useTranslation } from "next-i18next";
-import { Button } from "hds-react";
+import { Button, ButtonSize, ButtonVariant } from "hds-react";
 import { ButtonLikeLink } from "@/component/ButtonLikeLink";
 import { DenyDialogSeries } from "@/component/DenyDialog";
 import { useModal } from "@/context/ModalContext";
@@ -63,25 +63,15 @@ export function ApprovalButtonsRecurring({
     );
   };
 
-  if (loading) {
-    return null;
-  }
-
-  const btnCommon = {
-    theme: "black",
-    size: "small",
-    variant: "secondary",
-    disabled: false,
-  } as const;
-
-  if (reservationsPossibleToDeny.length === 0) {
+  if (loading || reservationsPossibleToDeny.length === 0) {
     return null;
   }
 
   return (
     <>
       <Button
-        {...btnCommon}
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Secondary}
         onClick={handleDenyClick}
         data-testid="approval-buttons-recurring__reject-button"
       >
diff --git a/apps/admin-ui/src/spa/reservations/[id]/ApproveDialog.tsx b/apps/admin-ui/src/spa/reservations/[id]/ApproveDialog.tsx
index 50c6d98f73..36dbd3dc3d 100644
--- a/apps/admin-ui/src/spa/reservations/[id]/ApproveDialog.tsx
+++ b/apps/admin-ui/src/spa/reservations/[id]/ApproveDialog.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import {
   Button,
+  ButtonVariant,
   Checkbox,
   Dialog,
   Notification,
@@ -170,7 +171,7 @@ const DialogContent = ({
       </Dialog.Content>
       <ActionButtons>
         <Button
-          variant="secondary"
+          variant={ButtonVariant.Secondary}
           onClick={onClose}
           data-testid="approval-dialog__cancel-button"
         >
diff --git a/apps/admin-ui/src/spa/reservations/[id]/ReservationTitleSection.tsx b/apps/admin-ui/src/spa/reservations/[id]/ReservationTitleSection.tsx
index 27118f7fa4..51fafb2c2b 100644
--- a/apps/admin-ui/src/spa/reservations/[id]/ReservationTitleSection.tsx
+++ b/apps/admin-ui/src/spa/reservations/[id]/ReservationTitleSection.tsx
@@ -6,6 +6,7 @@ import {
   IconEuroSign,
   IconPen,
   IconQuestionCircle,
+  IconSize,
 } from "hds-react";
 import { useTranslation } from "react-i18next";
 import { H1 } from "common/src/common/typography";
@@ -150,7 +151,7 @@ const ReservationTitleSection = forwardRef<HTMLDivElement, Props>(
           {t("RequestedReservation.createdAt")}{" "}
           {formatDateTime(reservation.createdAt ?? "")}
           {applicationLink !== "" && (
-            <ExternalLink to={applicationLink} size="s" isBold>
+            <ExternalLink to={applicationLink} size={IconSize.Small} isBold>
               {`${t("RequestedReservation.applicationLink")}: ${applicationPk}-${sectionPk}`}
             </ExternalLink>
           )}
diff --git a/apps/admin-ui/src/spa/reservations/[id]/ReturnToRequiresHandlingDialog.tsx b/apps/admin-ui/src/spa/reservations/[id]/ReturnToRequiresHandlingDialog.tsx
index 6bfb955429..8cb2c6d7d6 100644
--- a/apps/admin-ui/src/spa/reservations/[id]/ReturnToRequiresHandlingDialog.tsx
+++ b/apps/admin-ui/src/spa/reservations/[id]/ReturnToRequiresHandlingDialog.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Dialog, IconInfoCircle } from "hds-react";
+import { Button, ButtonVariant, Dialog, IconInfoCircle } from "hds-react";
 import {
   type ReservationQuery,
   useRequireHandlingMutation,
@@ -60,7 +60,7 @@ const DialogContent = ({ reservation, onClose, onAccept }: Props) => {
         <p id="modal-description" className="text-body" />
       </Dialog.Content>
       <Dialog.ActionButtons>
-        <Button variant="secondary" onClick={onClose} theme="black">
+        <Button variant={ButtonVariant.Secondary} onClick={onClose}>
           {t("common.prev")}
         </Button>
         <Button onClick={handleClick}>
@@ -91,7 +91,7 @@ const ReturnToRequiredHandlingDialog = ({
       <Dialog.Header
         id="modal-header"
         title={t("RequestedReservation.ReturnToRequiresHandlingDialog.title")}
-        iconLeft={<IconInfoCircle aria-hidden="true" />}
+        iconStart={<IconInfoCircle aria-hidden="true" />}
       />
       <DialogContent
         reservation={reservation}
diff --git a/apps/admin-ui/src/spa/reservations/[id]/edit.tsx b/apps/admin-ui/src/spa/reservations/[id]/edit.tsx
index 15fcf5318b..41d24e910c 100644
--- a/apps/admin-ui/src/spa/reservations/[id]/edit.tsx
+++ b/apps/admin-ui/src/spa/reservations/[id]/edit.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { ReservationQuery } from "@gql/gql-types";
-import { Button, TextInput } from "hds-react";
+import { Button, ButtonVariant, TextInput } from "hds-react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useNavigate, useParams } from "react-router-dom";
 import { ErrorBoundary } from "react-error-boundary";
@@ -192,14 +192,18 @@ function EditReservation({
         <HR />
         <ButtonContainer>
           <Button
-            variant="secondary"
+            variant={ButtonVariant.Secondary}
             onClick={onCancel}
-            theme="black"
             disabled={isSubmitting}
           >
             {t("common.cancel")}
           </Button>
-          <Button type="submit" disabled={!isDirty} isLoading={isSubmitting}>
+          <Button
+            type="submit"
+            disabled={!isDirty || isSubmitting}
+            // FIXME
+            // isLoading={isSubmitting}
+          >
             {t("Reservation.EditPage.save")}
           </Button>
         </ButtonContainer>
diff --git a/apps/admin-ui/src/spa/reservations/[id]/index.tsx b/apps/admin-ui/src/spa/reservations/[id]/index.tsx
index 76680482a9..06fc5a4ca7 100644
--- a/apps/admin-ui/src/spa/reservations/[id]/index.tsx
+++ b/apps/admin-ui/src/spa/reservations/[id]/index.tsx
@@ -50,7 +50,11 @@ type ReservationType = NonNullable<ReservationQuery["reservation"]>;
 
 const Accordion = styled(AccordionBase).attrs({
   closeButton: false,
-})``;
+})`
+  > div > div {
+    width: 100%;
+  }
+`;
 
 function DataWrapper({
   label,
diff --git a/apps/admin-ui/src/spa/reservations/[id]/series/index.tsx b/apps/admin-ui/src/spa/reservations/[id]/series/index.tsx
index f89894afa7..784f6d9a8a 100644
--- a/apps/admin-ui/src/spa/reservations/[id]/series/index.tsx
+++ b/apps/admin-ui/src/spa/reservations/[id]/series/index.tsx
@@ -25,7 +25,7 @@ import { H1 } from "common";
 import { LinkPrev } from "@/component/LinkPrev";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Notification } from "hds-react";
+import { Button, ButtonSize, Notification } from "hds-react";
 import { useEffect, useState } from "react";
 import {
   fromApiDate,
@@ -402,7 +402,7 @@ function SeriesPageInner({ pk }: { pk: number }) {
               }}
             >
               <ButtonLikeLink to="..">{t("common:cancel")}</ButtonLikeLink>
-              <Button size="small" type="submit">
+              <Button size={ButtonSize.Small} type="submit">
                 {t("ReservationEditSeries.submit")}
               </Button>
             </ButtonContainer>
diff --git a/apps/admin-ui/src/spa/unit/SpacesResources.tsx b/apps/admin-ui/src/spa/unit/SpacesResources.tsx
index dc071b73f3..372fb50693 100644
--- a/apps/admin-ui/src/spa/unit/SpacesResources.tsx
+++ b/apps/admin-ui/src/spa/unit/SpacesResources.tsx
@@ -1,4 +1,4 @@
-import { Button, IconPlusCircleFill } from "hds-react";
+import { Button, ButtonVariant, IconPlusCircleFill } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import { useParams } from "react-router-dom";
@@ -96,8 +96,8 @@ function SpacesResources(): JSX.Element {
         <H2 $noMargin>{t("Unit.spaces")}</H2>
         <ActionButton
           ref={newSpacesButtonRef}
-          iconLeft={<IconPlusCircleFill />}
-          variant="supplementary"
+          iconStart={<IconPlusCircleFill aria-hidden="true" />}
+          variant={ButtonVariant.Supplementary}
           onClick={() => openNewSpaceModal()}
         >
           {t("Unit.addSpace")}
@@ -112,8 +112,8 @@ function SpacesResources(): JSX.Element {
         <H2 $noMargin>{t("Unit.resources")}</H2>
         <ActionButton
           disabled={unit.spaces.length === 0}
-          iconLeft={<IconPlusCircleFill />}
-          variant="supplementary"
+          iconStart={<IconPlusCircleFill aria-hidden="true" />}
+          variant={ButtonVariant.Supplementary}
           onClick={() => {
             openWithContent(
               <NewResourceModal
diff --git a/apps/admin-ui/src/spa/unit/[id]/ReservationUnitCard.tsx b/apps/admin-ui/src/spa/unit/[id]/ReservationUnitCard.tsx
index 9021723907..7e67e847cc 100644
--- a/apps/admin-ui/src/spa/unit/[id]/ReservationUnitCard.tsx
+++ b/apps/admin-ui/src/spa/unit/[id]/ReservationUnitCard.tsx
@@ -63,13 +63,13 @@ export function ReservationUnitCard({
   const tags = [];
   if (reservationUnit.isDraft) {
     tags.push(
-      <StatusLabel type="draft" icon={<IconPen ariaHidden />} key="draft">
+      <StatusLabel type="draft" icon={<IconPen aria-hidden="true" />} key="draft">
         {t("ReservationUnitCard.stateDraft")}
       </StatusLabel>
     );
   } else {
     tags.push(
-      <StatusLabel type="success" icon={<IconCheck ariaHidden />} key="success">
+      <StatusLabel type="success" icon={<IconCheck aria-hidden="true" />} key="success">
         {t("ReservationUnitCard.statePublished")}
       </StatusLabel>
     );
@@ -78,7 +78,7 @@ export function ReservationUnitCard({
   const buttons = [
     <ButtonLikeLink to={link} key="seeMore">
       {t("common.view")}
-      <IconArrowRight ariaHidden />
+      <IconArrowRight aria-hidden="true" />
     </ButtonLikeLink>,
   ];
 
diff --git a/apps/admin-ui/src/spa/unit/[id]/index.tsx b/apps/admin-ui/src/spa/unit/[id]/index.tsx
index 0c05a2e47a..bdd4da62ef 100644
--- a/apps/admin-ui/src/spa/unit/[id]/index.tsx
+++ b/apps/admin-ui/src/spa/unit/[id]/index.tsx
@@ -1,4 +1,4 @@
-import { Button, IconPlusCircleFill, Notification } from "hds-react";
+import { Button, ButtonVariant, IconPlusCircleFill, Notification, NotificationSize } from "hds-react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useParams, useNavigate, Link } from "react-router-dom";
@@ -107,7 +107,7 @@ function Unit(): JSX.Element {
         <Notification
           type="alert"
           label={t("Unit.noSpacesResourcesTitle")}
-          size="large"
+          size={NotificationSize.Large}
         >
           {t("Unit.noSpacesResources")}{" "}
           <Link to={getSpacesResourcesUrl(unitPk)}>
@@ -131,8 +131,8 @@ function Unit(): JSX.Element {
         )}
         <StyledBoldButton
           disabled={!hasSpacesResources}
-          variant="supplementary"
-          iconLeft={<IconPlusCircleFill />}
+          variant={ButtonVariant.Supplementary}
+          iconStart={<IconPlusCircleFill aria-hidden="true" />}
           onClick={() => {
             history(getReservationUnitUrl(undefined, unitPk));
           }}
diff --git a/apps/admin-ui/src/spa/unit/index.tsx b/apps/admin-ui/src/spa/unit/index.tsx
index 70e31299e2..d15e7f9d59 100644
--- a/apps/admin-ui/src/spa/unit/index.tsx
+++ b/apps/admin-ui/src/spa/unit/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "hds-react";
+import { Link, LinkSize } from "hds-react";
 import { H1 } from "common/src/common/typography";
 import { useTranslation } from "next-i18next";
 import { Filters } from "./Filters";
@@ -16,7 +16,7 @@ function Units(): JSX.Element {
         <p>
           {t("Units.description")}
           <Link
-            size="M"
+            size={LinkSize.Medium}
             href={t("Units.descriptionLinkHref")}
             openInNewTab
             external
diff --git a/apps/admin-ui/src/spa/unit/resource/NewResourceModal.tsx b/apps/admin-ui/src/spa/unit/resource/NewResourceModal.tsx
index 26c1c722d8..97ba995cf4 100644
--- a/apps/admin-ui/src/spa/unit/resource/NewResourceModal.tsx
+++ b/apps/admin-ui/src/spa/unit/resource/NewResourceModal.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Dialog, IconCheck } from "hds-react";
+import { Button, ButtonVariant, Dialog, IconCheck } from "hds-react";
 import styled from "styled-components";
 import { type ApolloQueryResult } from "@apollo/client";
 import { useTranslation } from "react-i18next";
@@ -111,8 +111,7 @@ export function NewResourceModal({
       <DialogActionsButtons>
         <Button
           onClick={closeModal}
-          variant="secondary"
-          theme="black"
+          variant={ButtonVariant.Secondary}
           disabled={isMutationLoading}
         >
           {t("ResourceModal.cancel")}
diff --git a/apps/admin-ui/src/spa/unit/resource/ResourceEditor.tsx b/apps/admin-ui/src/spa/unit/resource/ResourceEditor.tsx
index 60ad93ad1c..0419668a90 100644
--- a/apps/admin-ui/src/spa/unit/resource/ResourceEditor.tsx
+++ b/apps/admin-ui/src/spa/unit/resource/ResourceEditor.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Button } from "hds-react";
+import { Button, ButtonVariant } from "hds-react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useForm } from "react-hook-form";
@@ -131,8 +131,7 @@ export function ResourceEditor({ resourcePk, unitPk }: Props) {
           <ButtonContainer>
             <Button
               onClick={() => history(-1)}
-              variant="secondary"
-              theme="black"
+              variant={ButtonVariant.Secondary}
             >
               {t("ResourceModal.cancel")}
             </Button>
diff --git a/apps/admin-ui/src/spa/unit/space/ParentSelector.tsx b/apps/admin-ui/src/spa/unit/space/ParentSelector.tsx
index 618ebacb1e..661925ada1 100644
--- a/apps/admin-ui/src/spa/unit/space/ParentSelector.tsx
+++ b/apps/admin-ui/src/spa/unit/space/ParentSelector.tsx
@@ -3,7 +3,7 @@ import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import { Select } from "hds-react";
 import { UnitSpacesQuery, useUnitSpacesQuery } from "@gql/gql-types";
-import { base64encode, filterNonNullable } from "common/src/helpers";
+import { base64encode, convertOptionToHDS, filterNonNullable, toNumber } from "common/src/helpers";
 
 function spacesAsHierarchy(unit: UnitSpacesQuery["unit"], paddingChar: string) {
   const allSpaces = filterNonNullable(unit?.spaces);
@@ -53,7 +53,7 @@ type Props = {
 function parentLessOption(t: TFunction) {
   return {
     label: t("SpaceEditor.noParent"),
-    value: null,
+    value: 0,
   };
 }
 
@@ -88,25 +88,31 @@ export function ParentSelector({
     .map((space) => ({
       label:
         space.nameFi != null && space.nameFi.length > 0 ? space.nameFi : "-",
-      value: space.pk ?? null,
+      value: space.pk ?? 0,
     }));
 
   const options = noParentless ? opts : [...opts, parentLessOption(t)];
 
+  const hdsOptions = options.map(convertOptionToHDS);
   return (
     <Select
       id="parentSelector"
-      label={label}
-      placeholder={placeholder}
+      texts={{
+        label,
+        placeholder,
+        error: errorText,
+        assistive: helperText,
+      }}
       required
-      helper={helperText}
-      options={options}
       disabled={options.length === 0}
-      value={options.find((po) => po.value === value) ?? null}
-      onChange={(selected: (typeof opts)[0]) =>
-        onChange(selected.value, selected.label)
-      }
-      error={errorText}
+      options={hdsOptions}
+      value={hdsOptions.find((po) => toNumber(po.value) === value)?.value}
+      onChange={(selection) => {
+        const selected = selection.find(() => true);
+        if (selected) {
+          onChange(toNumber(selected.value), selected.label)
+        }
+      }}
       invalid={!!errorText}
     />
   );
diff --git a/apps/admin-ui/src/spa/unit/space/SpaceEditor.tsx b/apps/admin-ui/src/spa/unit/space/SpaceEditor.tsx
index 6a4ff181d3..ea5fd74962 100644
--- a/apps/admin-ui/src/spa/unit/space/SpaceEditor.tsx
+++ b/apps/admin-ui/src/spa/unit/space/SpaceEditor.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Button, Notification } from "hds-react";
+import { Button, ButtonVariant, Notification } from "hds-react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
@@ -167,8 +167,7 @@ function SpaceEditor({ space, unit }: Props): JSX.Element {
         </section>
         <ButtonContainer>
           <Button
-            variant="secondary"
-            theme="black"
+            variant={ButtonVariant.Secondary}
             type="button"
             onClick={() => history(-1)}
             disabled={isMutationLoading}
@@ -176,10 +175,11 @@ function SpaceEditor({ space, unit }: Props): JSX.Element {
             {t("SpaceEditor.cancel")}
           </Button>
           <Button
-            disabled={!isDirty}
-            variant="primary"
+            disabled={!isDirty || isMutationLoading}
+            variant={ButtonVariant.Primary}
             type="submit"
-            isLoading={isMutationLoading}
+            // FIXME
+            // isLoading={isMutationLoading}
           >
             {t("SpaceEditor.save")}
           </Button>
diff --git a/apps/admin-ui/src/spa/unit/space/new-space-modal/Page1.tsx b/apps/admin-ui/src/spa/unit/space/new-space-modal/Page1.tsx
index b545c42aed..3d2afb7ee8 100644
--- a/apps/admin-ui/src/spa/unit/space/new-space-modal/Page1.tsx
+++ b/apps/admin-ui/src/spa/unit/space/new-space-modal/Page1.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Dialog, IconArrowRight, IconCheck } from "hds-react";
+import { Button, ButtonVariant, Dialog, IconArrowRight, IconCheck } from "hds-react";
 import { useTranslation } from "react-i18next";
 import { type UnitQuery } from "@gql/gql-types";
 import { parseAddress } from "@/common/util";
@@ -37,10 +37,12 @@ export function Page1({
   const parentName = unit?.spaces.find(
     (space) => space.pk === parentPk
   )?.nameFi;
+
+  const tagString: string  = `${t("SpaceModal.phase")} 1/2`;
   return (
     <>
       <CustomDialogHeader
-        extras={<StyledTag>{t("SpaceModal.phase")} 1/2</StyledTag>}
+        extras={<StyledTag>{tagString}</StyledTag>}
         title={t(
           hasFixedParent
             ? "SpaceModal.page1.subSpaceModalTitle"
@@ -79,12 +81,12 @@ export function Page1({
         ) : null}
       </Dialog.Content>
       <DialogActionsButtons>
-        <Button onClick={closeModal} variant="secondary" theme="black">
+        <Button onClick={closeModal} variant={ButtonVariant.Secondary}>
           {t("SpaceModal.page1.buttonCancel")}
         </Button>
         <Button
-          iconRight={<IconArrowRight />}
-          variant="supplementary"
+          iconEnd={<IconArrowRight />}
+          variant={ButtonVariant.Supplementary}
           onClick={onNextPage}
         >
           {t("SpaceModal.page1.buttonNext")}
diff --git a/apps/admin-ui/src/spa/unit/space/new-space-modal/Page2.tsx b/apps/admin-ui/src/spa/unit/space/new-space-modal/Page2.tsx
index f7966ff263..90d8998a74 100644
--- a/apps/admin-ui/src/spa/unit/space/new-space-modal/Page2.tsx
+++ b/apps/admin-ui/src/spa/unit/space/new-space-modal/Page2.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Dialog, IconArrowLeft, IconCheck } from "hds-react";
+import { Button, ButtonVariant, Dialog, IconArrowLeft, IconCheck } from "hds-react";
 import type { UnitQuery } from "@gql/gql-types";
 import { CustomDialogHeader } from "@/component/CustomDialogHeader";
 import {
@@ -48,7 +48,7 @@ export function Page2({
             ? "SpaceModal.page2.subSpaceModalTitle"
             : "SpaceModal.page2.modalTitle"
         )}
-        extras={<StyledTag>{t("SpaceModal.phase")} 2/2</StyledTag>}
+        extras={<StyledTag>{`${t("SpaceModal.phase")} 2/2`}</StyledTag>}
         close={closeModal}
       />
       <Dialog.Content>
@@ -77,15 +77,16 @@ export function Page2({
       <DialogActionsButtons>
         <Button
           onClick={onPrevPage}
-          variant="supplementary"
-          iconLeft={<IconArrowLeft />}
+          variant={ButtonVariant.Supplementary}
+          iconStart={<IconArrowLeft aria-hidden="true" />}
         >
           {t("SpaceModal.page2.prevButton")}
         </Button>
         <Button
           disabled={!isDirty}
           type="submit"
-          loadingText={t("SpaceModal.page2.saving")}
+          // FIXME
+          // loadingText={t("SpaceModal.page2.saving")}
         >
           {t("SpaceModal.page2.createButton")}
         </Button>
diff --git a/apps/admin-ui/src/styles/buttons.tsx b/apps/admin-ui/src/styles/buttons.tsx
deleted file mode 100644
index 7d78f909e1..0000000000
--- a/apps/admin-ui/src/styles/buttons.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Button } from "hds-react";
-import styled, { css } from "styled-components";
-import { fontMedium } from "common/src/common/typography";
-
-const btnStyles = css<{ variant?: "secondary" | "primary" }>`
-  ${({ variant }) =>
-    variant !== "primary" && "--border-color: var(--color-black);"}
-  ${({ variant }) => variant !== "primary" && "--color: var(--color-black);"}
-  --min-size: var(--spacing-m);
-
-  > span {
-    margin: 0 var(--spacing-3-xs) !important;
-  }
-`;
-
-/// @deprecated UI layouts don't use the rounded variant anymore
-export const SmallRoundButton = styled(Button).attrs({
-  size: "small",
-})<{ variant?: "secondary" | "primary" }>`
-  ${btnStyles}
-  ${fontMedium};
-  border-radius: 4px;
-`;
-
-export const SmallButton = styled(Button).attrs({
-  size: "small",
-})<{ variant?: "secondary" | "primary" }>`
-  ${btnStyles}
-  ${fontMedium};
-`;
diff --git a/apps/ui/components/Accordion.tsx b/apps/ui/components/Accordion.tsx
index cab1a55366..938dd7322e 100644
--- a/apps/ui/components/Accordion.tsx
+++ b/apps/ui/components/Accordion.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, IconAngleDown, IconAngleUp, useAccordion } from "hds-react";
+import { IconAngleDown, IconAngleUp, useAccordion } from "hds-react";
 import styled from "styled-components";
 import { H4 } from "common/src/common/typography";
 
@@ -26,18 +26,16 @@ const AccordionElement = styled.div<{ $noBottomMargin?: boolean }>`
   --accordion-border-color: var(--color-black-50);
 `;
 
-const HeadingButton = styled(Button).attrs({
-  style: {
-    "--color": "var(--color-black-90)",
-    "--background-color-hover": "transparent",
-    "--background-color-hover-focus": "transparent",
-  } as React.CSSProperties,
-})<{ theme: Theme }>`
-  &&& {
+const HeadingButton = styled.button<{ theme: Theme }>`
+  --color: var(--color-black-90);
+  & {
     width: 100%;
-    padding-left: 0;
-    border-left: 0;
-    border-bottom: 1px solid var(--accordion-border-color) !important;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid var(--accordion-border-color);
+    display: flex;
+    gap: var(--spacing-s);
+    align-items: center;
 
     span {
       ${({ theme }) => {
@@ -58,7 +56,7 @@ const HeadingButton = styled(Button).attrs({
         }
       }};
 
-      color: var(--color-black-90);
+      color: var(--color);
       padding: 0;
       margin: 0;
       margin-right: auto;
@@ -73,7 +71,7 @@ const HeadingButton = styled(Button).attrs({
     }
 
     :not(:disabled):hover {
-      border-bottom-color: var(--color-coat-of-arms) !important;
+      border-bottom-color: var(--color-coat-of-arms);
     }
   }
 `;
@@ -108,19 +106,18 @@ export function Accordion({
   }, [closeAccordion, isOpen, open, openAccordion]);
 
   const icon = isOpen ? (
-    <IconAngleUp aria-hidden />
+    <IconAngleUp aria-hidden="true" />
   ) : (
-    <IconAngleDown aria-hidden />
+    <IconAngleDown aria-hidden="true" />
   );
 
   return (
     <AccordionElement id={id} {...rest} $noBottomMargin={disableBottomMargin}>
       <HeadingButton
-        variant="supplementary"
-        iconRight={icon}
         onClick={onToggle}
         theme={theme}
       >
+        {icon}
         <H4 as={`h${headingLevel}`}>{heading}</H4>
       </HeadingButton>
       <Content $open={isOpen}>{children}</Content>
diff --git a/apps/ui/components/CancellationForm.tsx b/apps/ui/components/CancellationForm.tsx
index 780ef707d3..25b24b6be8 100644
--- a/apps/ui/components/CancellationForm.tsx
+++ b/apps/ui/components/CancellationForm.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import styled from "styled-components";
 import { useForm } from "react-hook-form";
-import { Button, IconCross } from "hds-react";
+import { Button, ButtonVariant, IconCross } from "hds-react";
 import { useTranslation } from "next-i18next";
 import { fontMedium } from "common/src/common/typography";
 import { type CancelReasonFieldsFragment } from "@gql/gql-types";
@@ -103,11 +103,12 @@ export function CancellationForm(props: {
               {t("reservations:cancelButton")}
             </ButtonLikeLink>
             <Button
-              variant="primary"
+              variant={ButtonVariant.Primary}
               type="submit"
-              disabled={isDisabled || !watch("reason")}
+              disabled={isDisabled || isLoading || !watch("reason")}
               data-testid="reservation-cancel__button--cancel"
-              isLoading={isLoading}
+              // FIXME
+              // isLoading={isLoading}
             >
               {t("reservations:cancel.reservation")}
             </Button>
diff --git a/apps/ui/components/Carousel.tsx b/apps/ui/components/Carousel.tsx
index cbe014103e..40ca847b9a 100644
--- a/apps/ui/components/Carousel.tsx
+++ b/apps/ui/components/Carousel.tsx
@@ -124,31 +124,31 @@ function Carousel({
 }: Props): JSX.Element {
   const { t } = useTranslation();
 
-  const ButtonComponent = SmallArrowButton;
-
   return (
     <StyledCarousel
       renderCenterLeftControls={({ previousSlide, previousDisabled }) => (
-        <ButtonComponent
+        <SmallArrowButton
           disabled={previousDisabled}
           type="button"
           onClick={previousSlide}
           aria-label={t("common:prev")}
           data-testid="slot-carousel-button"
+          iconStart={<IconAngleLeft />}
         >
-          <IconAngleLeft />
-        </ButtonComponent>
+          ""
+        </SmallArrowButton>
       )}
       renderCenterRightControls={({ nextSlide, nextDisabled }) => (
-        <ButtonComponent
+        <SmallArrowButton
           disabled={nextDisabled}
           type="button"
           onClick={nextSlide}
           aria-label={t("common:next")}
           data-testid="slot-carousel-button"
+          iconStart={<IconAngleRight />}
         >
-          <IconAngleRight />
-        </ButtonComponent>
+          ""
+        </SmallArrowButton>
       )}
       renderBottomCenterControls={({ slideCount, currentSlide, goToSlide }) => (
         <CustomBottomControls>
diff --git a/apps/ui/components/SortingComponent.tsx b/apps/ui/components/SortingComponent.tsx
index 04aaa6235e..d4b6ddba6c 100644
--- a/apps/ui/components/SortingComponent.tsx
+++ b/apps/ui/components/SortingComponent.tsx
@@ -1,8 +1,13 @@
 import React from "react";
-import { Sorting } from "@/components/form";
 import { useTranslation } from "next-i18next";
 import { useSearchParams } from "next/navigation";
 import { useSearchModify } from "@/hooks/useSearchValues";
+import styled from "styled-components";
+import { IconSize, IconSortAscending, IconSortDescending, Option, Select } from "hds-react";
+import { fontMedium } from "common/src/common/typography";
+import { breakpoints } from "common";
+import { Flex } from "common/styles/util";
+import { convertOptionToHDS } from "common/src/helpers";
 
 const SORTING_OPTIONS = [
   {
@@ -28,6 +33,45 @@ function validateSorting(
   return "name";
 }
 
+const Wrapper = styled(Flex).attrs({
+  $alignItems: "center",
+  $direction: "row",
+  $gap: "xs",
+  $justifyContent: "flex-end",
+  $wrap: "wrap",
+})`
+  flex-grow: 1;
+
+  padding: var(--spacing-xs);
+  background-color: var(--color-black-5);
+
+  label {
+    ${fontMedium};
+  }
+`;
+
+const OrderBtn = styled.button`
+  border: 0;
+  background: transparent;
+  position: relative;
+  top: 2px;
+  cursor: pointer;
+
+  svg {
+    color: var(--color-bus);
+  }
+`;
+
+// without min-width the select size changes depending on the content
+// correct way would be calculate the width based on the content
+const StyledSelect = styled(Select)`
+  min-width: 230px;
+  flex-grow: 1;
+  @media (min-width: ${breakpoints.s}) {
+    flex-grow: 0;
+  }
+`;
+
 export function SortingComponent() {
   const searchValues = useSearchParams();
   const { handleRouteChange } = useSearchModify();
@@ -36,7 +80,7 @@ export function SortingComponent() {
   const sortingOptions = SORTING_OPTIONS.map((option) => ({
     label: t(option.label),
     value: option.value,
-  }));
+  })).map(convertOptionToHDS);
 
   const isOrderingAsc = searchValues.get("order") !== "desc";
   const value = validateSorting(searchValues.get("sort"));
@@ -46,21 +90,62 @@ export function SortingComponent() {
     params.set("sort", sort);
     handleRouteChange(params);
   };
+
   const handleOrderChange = (order: "asc" | "desc") => {
     const params = new URLSearchParams(searchValues);
     params.set("order", order);
     handleRouteChange(params);
   };
 
+  const handleSelect = (options: Option[]) => {
+    const val = options.find((option) => option.selected)?.value;
+    if (val != null) {
+      handleSort(val);
+    }
+  }
+
+  const toggleOrder = () => {
+    if (isOrderingAsc) {
+      handleOrderChange("desc");
+    } else {
+      handleOrderChange("asc");
+    }
+  }
+
   return (
-    <Sorting
-      value={value}
-      sortingOptions={sortingOptions}
-      setSorting={(val) => handleSort(val.value)}
-      isOrderingAsc={isOrderingAsc}
-      setIsOrderingAsc={(isAsc: boolean) =>
-        handleOrderChange(isAsc ? "asc" : "desc")
-      }
-    />
+    <Wrapper>
+      <OrderBtn
+        type="button"
+        onClick={toggleOrder}
+        aria-label={t(
+          `search:sorting.action.${isOrderingAsc ? "descending" : "ascending"}`
+        )}
+        data-testid="sorting-button"
+      >
+        {isOrderingAsc ? (
+          <IconSortAscending
+            size={IconSize.Medium}
+            aria-label={t("search:sorting.ascendingLabel")}
+          />
+        ) : (
+          <IconSortDescending
+            size={IconSize.Medium}
+            aria-label={t("search:sorting.descendingLabel")}
+          />
+        )}
+      </OrderBtn>
+      <label htmlFor="search-form__button--sorting-toggle-button">
+        {t("searchResultList:sortButtonLabel")}:
+      </label>
+      <StyledSelect
+        texts={{
+          label: ""
+        }}
+        id="search-form__button--sorting"
+        options={sortingOptions}
+        onChange={handleSelect}
+        value={sortingOptions.find((option) => option.value === value)?.value}
+      />
+    </Wrapper>
   );
 }
diff --git a/apps/ui/components/application/ApplicationEvent.tsx b/apps/ui/components/application/ApplicationEvent.tsx
index 245c2218d3..5854e2c46c 100644
--- a/apps/ui/components/application/ApplicationEvent.tsx
+++ b/apps/ui/components/application/ApplicationEvent.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
-import { Button, Checkbox, DateInput, NumberInput, TextInput } from "hds-react";
+import { Button, ButtonSize, ButtonVariant, Checkbox, DateInput, NumberInput, TextInput } from "hds-react";
 import { useTranslation } from "next-i18next";
 import { useFormContext } from "react-hook-form";
 import type { ApplicationQuery } from "@gql/gql-types";
 import { H5 } from "common/src/common/typography";
 import { CheckboxWrapper } from "common/src/reservation-form/components";
 import { getLocalizationLang } from "common/src/helpers";
-import { ReservationUnitList } from "./ReservationUnitList";
+import { OptionTypes, ReservationUnitList } from "./ReservationUnitList";
 import {
   apiDateToUIDate,
   formatApiDate,
@@ -27,17 +27,6 @@ import {
 type Node = NonNullable<ApplicationQuery["application"]>;
 type AppRoundNode = NonNullable<Node["applicationRound"]>;
 
-type OptionType =
-  | { label: string; value: string }
-  | { label: string; value: number };
-type OptionTypes = {
-  ageGroupOptions: OptionType[];
-  purposeOptions: OptionType[];
-  reservationUnitTypeOptions: OptionType[];
-  participantCountOptions: OptionType[];
-  unitOptions: OptionType[];
-};
-
 type Props = {
   index: number;
   applicationRound: AppRoundNode;
@@ -151,7 +140,7 @@ function ApplicationEventInner({
           required
           name={`applicationSections.${index}.ageGroup`}
           label={t("application:Page1.ageGroup")}
-          options={ageGroupOptions}
+          options={ageGroupOptions ?? []}
           error={getTranslatedError("ageGroup")}
         />
         <ControlledSelect
@@ -286,8 +275,8 @@ function ApplicationEventInner({
         name={watch(`applicationSections.${index}.name`) ?? ""}
       />
       <Button
-        variant="secondary"
-        size="small"
+        variant={ButtonVariant.Secondary}
+        size={ButtonSize.Small}
         id={`applicationSections[${index}].delete`}
         onClick={() => setIsWaitingForDelete(true)}
       >
diff --git a/apps/ui/components/application/ApprovedReservations.tsx b/apps/ui/components/application/ApprovedReservations.tsx
index 4f1739636b..2171b9a98e 100644
--- a/apps/ui/components/application/ApprovedReservations.tsx
+++ b/apps/ui/components/application/ApprovedReservations.tsx
@@ -27,6 +27,8 @@ import {
 } from "common/src/helpers";
 import {
   Button,
+  ButtonSize,
+  ButtonVariant,
   Dialog,
   IconCalendarRecurring,
   IconClock,
@@ -445,7 +447,7 @@ function ReservationUnitTable({
         <Dialog.Header
           id="reservation-unit-modal-help-header"
           title={getTranslation(modal, "name")}
-          iconLeft={<IconInfoCircle aria-hidden="true" />}
+          iconStart={<IconInfoCircle aria-hidden="true" />}
         />
         <Dialog.Content id="dialog-content">
           <Sanitize
@@ -514,12 +516,7 @@ function createReservationUnitLink({
   );
 }
 
-const CancelButton = styled(Button).attrs({
-  theme: "black",
-  variant: "supplementary",
-  size: "small",
-  iconLeft: <IconCross aria-hidden="true" />,
-})`
+const CancelButton = styled(Button)`
   white-space: nowrap;
 `;
 
@@ -655,6 +652,9 @@ function ReservationsTable({
       isSortable: false,
       transform: ({ pk, isCancellableReason }: ReservationsTableElem) => (
         <CancelButton
+          variant={ButtonVariant.Supplementary}
+          size={ButtonSize.Small}
+          iconStart={<IconCross aria-hidden="true" />}
           onClick={() => handleCancel(pk)}
           disabled={isCancellableReason !== ""}
           title={
diff --git a/apps/ui/components/application/EmailInput.tsx b/apps/ui/components/application/EmailInput.tsx
index 7756b9365b..3c59090281 100644
--- a/apps/ui/components/application/EmailInput.tsx
+++ b/apps/ui/components/application/EmailInput.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
 import { useFormContext } from "react-hook-form";
-import { Notification, TextInput } from "hds-react";
+import { Notification, NotificationSize, TextInput } from "hds-react";
 import { applicationErrorText } from "@/modules/util";
 import type { ApplicationFormPage3Values } from "./Form";
 import { SpanTwoColumns } from "./styled";
@@ -18,7 +18,7 @@ const EmailInput = () => {
     <>
       <SpanTwoColumns>
         <Notification
-          size="small"
+          size={NotificationSize.Small}
           label={t("application:Page3.emailNotification")}
         >
           {t("application:Page3.emailNotification")}
diff --git a/apps/ui/components/application/OrganisationForm.tsx b/apps/ui/components/application/OrganisationForm.tsx
index ebae43650d..ae952eaf70 100644
--- a/apps/ui/components/application/OrganisationForm.tsx
+++ b/apps/ui/components/application/OrganisationForm.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect } from "react";
-import { TextInput, Checkbox, Select } from "hds-react";
+import { TextInput, Checkbox } from "hds-react";
 import { useTranslation } from "next-i18next";
-import { Controller, useFormContext } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import styled from "styled-components";
-import type { OptionType } from "common/types/common";
 import { breakpoints } from "common/src/common/style";
 import { CheckboxWrapper } from "common/src/reservation-form/components";
 import { ApplicantTypeChoice } from "@gql/gql-types";
@@ -13,6 +12,7 @@ import { BillingAddress } from "./BillingAddress";
 import type { ApplicationFormPage3Values } from "./Form";
 import { AutoGrid } from "common/styles/util";
 import { FormSubHeading } from "./styled";
+import { ControlledSelect } from "common/src/components/form";
 
 const Placeholder = styled.span`
   @media (max-width: ${breakpoints.m}) {
@@ -20,6 +20,10 @@ const Placeholder = styled.span`
   }
 `;
 
+type OptionType = {
+  label: string;
+  value: number;
+};
 type Props = {
   homeCityOptions: OptionType[];
 };
@@ -82,21 +86,13 @@ export const OrganisationForm = ({
           }
         )}
       />
-      <Controller
+      <ControlledSelect
         control={control}
-        rules={{ required: true }}
+        required
         name="homeCity"
-        render={({ field }) => (
-          <Select<OptionType>
-            label={t("application:Page3.homeCity")}
-            value={homeCityOptions.find((v) => v.value === field.value) ?? null}
-            onChange={(v: OptionType) => field.onChange(v.value)}
-            required
-            options={homeCityOptions}
-            error={applicationErrorText(t, errors.homeCity?.type)}
-            invalid={!!errors.homeCity?.type}
-          />
-        )}
+        label={t("application:Page3.homeCity")}
+        options={homeCityOptions}
+        error={applicationErrorText(t, errors.homeCity?.type)}
       />
       <Placeholder />
       <CheckboxWrapper style={{ margin: "var(--spacing-xs) 0" }}>
diff --git a/apps/ui/components/application/Page1.tsx b/apps/ui/components/application/Page1.tsx
index 8a47b26440..cd7a0ce8f8 100644
--- a/apps/ui/components/application/Page1.tsx
+++ b/apps/ui/components/application/Page1.tsx
@@ -1,4 +1,4 @@
-import { Button, IconArrowRight, IconPlusCircle } from "hds-react";
+import { Button, ButtonSize, ButtonVariant, IconArrowRight, IconPlusCircle } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import { uniq } from "lodash";
@@ -139,10 +139,10 @@ export function Page1({ applicationRound, onNext }: Props): JSX.Element | null {
       )}
       <Button
         id="addApplicationEvent"
-        variant="supplementary"
-        iconLeft={<IconPlusCircle />}
+        variant={ButtonVariant.Supplementary}
+        iconStart={<IconPlusCircle />}
         onClick={handleAddNewApplicationEvent}
-        size="small"
+        size={ButtonSize.Small}
       >
         {t("application:Page1.createNew")}
       </Button>
@@ -150,7 +150,7 @@ export function Page1({ applicationRound, onNext }: Props): JSX.Element | null {
         <div />
         <Button
           id="button__application--next"
-          iconRight={<IconArrowRight />}
+          iconEnd={<IconArrowRight />}
           disabled={submitDisabled}
           type="submit"
         >
diff --git a/apps/ui/components/application/Page2.tsx b/apps/ui/components/application/Page2.tsx
index 079b908c53..094062d5c3 100644
--- a/apps/ui/components/application/Page2.tsx
+++ b/apps/ui/components/application/Page2.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, IconArrowRight, Notification } from "hds-react";
+import { Button, ButtonVariant, IconArrowRight, Notification, NotificationSize } from "hds-react";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
 import styled from "styled-components";
@@ -437,7 +437,7 @@ function Page2({ application, onNext }: Props): JSX.Element {
           >
             <StyledNotification
               label={t("application:Page2.info")}
-              size="small"
+              size={NotificationSize.Small}
               type="info"
             >
               {t("application:Page2.info")}
@@ -463,7 +463,7 @@ function Page2({ application, onNext }: Props): JSX.Element {
           dismissible
           onClose={() => setMinDurationMsg(false)}
           closeButtonLabelText={t("common:close")}
-          dataTestId="application__page2--notification-min-duration"
+          data-testid="application__page2--notification-min-duration"
         >
           {applicationSections?.length === 1
             ? t("application:Page2.notification.minDuration.bodySingle")
@@ -479,14 +479,14 @@ function Page2({ application, onNext }: Props): JSX.Element {
       )}
       <ButtonContainer>
         <Button
-          variant="secondary"
+          variant={ButtonVariant.Secondary}
           onClick={() => router.push(`${application.pk}/page1`)}
         >
           {t("common:prev")}
         </Button>
         <Button
           id="button__application--next"
-          iconRight={<IconArrowRight />}
+          iconEnd={<IconArrowRight aria-hidden="true" />}
           type="submit"
         >
           {t("common:next")}
diff --git a/apps/ui/components/application/ReservationUnitList.tsx b/apps/ui/components/application/ReservationUnitList.tsx
index 40163eb222..0aed4d4a02 100644
--- a/apps/ui/components/application/ReservationUnitList.tsx
+++ b/apps/ui/components/application/ReservationUnitList.tsx
@@ -1,4 +1,4 @@
-import { Button, IconPlusCircle, Notification } from "hds-react";
+import { Button, IconPlusCircle, Notification, NotificationSize } from "hds-react";
 import React, { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "next-i18next";
@@ -19,10 +19,9 @@ type Node = NonNullable<ApplicationQuery["application"]>;
 type AppRoundNode = NonNullable<Node["applicationRound"]>;
 type ReservationUnitType = ReservationUnitCardFieldsFragment;
 
-type OptionType =
-  | { value: string; label: string }
-  | { value: number; label: string };
-type OptionTypes = {
+export type OptionType = { value: number; label: string };
+export type OptionTypes = {
+  ageGroupOptions?: OptionType[];
   purposeOptions: OptionType[];
   reservationUnitTypeOptions: OptionType[];
   participantCountOptions: OptionType[];
@@ -136,13 +135,13 @@ export function ReservationUnitList({
         <Notification
           type="error"
           label={t("application:error.noReservationUnits")}
-          size="small"
+          size={NotificationSize.Small}
         >
           {t("application:error.noReservationUnits")}
         </Notification>
       )}
       <Notification
-        size="small"
+        size={NotificationSize.Small}
         label={t("reservationUnitList:infoReservationUnits")}
       >
         {t("reservationUnitList:infoReservationUnits")}
diff --git a/apps/ui/components/application/TimeSelector.tsx b/apps/ui/components/application/TimeSelector.tsx
index f9e7372f8d..160daa3517 100644
--- a/apps/ui/components/application/TimeSelector.tsx
+++ b/apps/ui/components/application/TimeSelector.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { useTranslation } from "next-i18next";
-import { Button, IconCross, Select } from "hds-react";
+import { Button, ButtonVariant, IconCross, OptionInProps, Select } from "hds-react";
 import type { ApplicationEventSchedulePriority } from "common/types/common";
 import { fontBold, fontRegular } from "common/src/common/typography";
 import { breakpoints } from "common/src/common/style";
-import { fromMondayFirstUnsafe } from "common/src/helpers";
+import { convertOptionToHDS, fromMondayFirstUnsafe, toNumber } from "common/src/helpers";
 import { WEEKDAYS } from "common/src/const";
 import { arrowDown, arrowUp, MediumButton } from "@/styles/util";
 import { TimePreview } from "./TimePreview";
@@ -199,7 +199,7 @@ const OptionWrapper = styled.div`
   }
 `;
 
-const StyledSelect = styled(Select<{ label: string; value: number }>)`
+const StyledSelect = styled(Select)`
   label {
     ${fontBold};
   }
@@ -386,10 +386,10 @@ export function TimeSelector({
       label: t("application:Page2.legend.selected-2"),
     },
   ];
-  const priorityOptions = [300, 200].map((n) => ({
+  const priorityOptions: OptionInProps[] = [300, 200].map((n) => ({
     label: t(`application:Page2.priorityLabels.${n}`),
     value: n,
-  }));
+  })).map(convertOptionToHDS);
 
   if (!cells) {
     return null;
@@ -411,31 +411,47 @@ export function TimeSelector({
     );
   };
 
+  const resUOpts = reservationUnitOptions.map(convertOptionToHDS);
   return (
     <>
       <OptionWrapper>
         <StyledSelect
           id={`time-selector__select--priority-${index}`}
-          label={t("application:Page2.prioritySelectLabel")}
+          texts={{
+            label: t("application:Page2.prioritySelectLabel"),
+          }}
           options={priorityOptions}
-          value={priorityOptions.find((n) => n.value === priority) ?? null}
-          defaultValue={priorityOptions[0]}
-          onChange={(val: (typeof priorityOptions)[0]) =>
-            setPriority(val.value)
-          }
+          value={priorityOptions.find((n) => toNumber(n.value) === priority)?.value}
+          defaultValue={priorityOptions[0].value}
+          onChange={(val) => {
+            const e = val.find(() => true);
+            const value = toNumber(e?.value)
+            if (value  != null) {
+              setPriority(value);
+            }
+            return {
+              invalid: false,
+            };
+          }}
         />
         <StyledSelect
           id={`time-selector__select--reservation-unit-${index}`}
-          label={t("application:Page2.reservationUnitSelectLabel")}
-          options={reservationUnitOptions}
-          value={
-            reservationUnitOptions.find((n) => n.value === reservationUnitPk) ??
-            null
-          }
-          defaultValue={reservationUnitOptions[0]}
-          onChange={(val: (typeof reservationUnitOptions)[0]) =>
-            setReservationUnitPk(val.value)
-          }
+          texts={{
+            label: t("application:Page2.reservationUnitSelectLabel"),
+          }}
+          options={resUOpts}
+          value={resUOpts.find((n) => toNumber(n.value) === reservationUnitPk)?.value}
+          defaultValue={reservationUnitOptions[0].value}
+          onChange={(selection) => {
+            const val = selection.find(() => true);
+            const pk = toNumber(val?.value);
+            if (pk != null) {
+              setReservationUnitPk(pk);
+            }
+            return {
+              invalid: false,
+            };
+          }}
         />
       </OptionWrapper>
       <CalendarContainer
@@ -470,9 +486,9 @@ export function TimeSelector({
         ))}
         <ResetButton
           id={`time-selector__button--reset-${index}`}
-          variant="supplementary"
+          variant={ButtonVariant.Supplementary}
           onClick={() => resetCells()}
-          iconLeft={<IconCross />}
+          iconStart={<IconCross />}
           disabled={!cells.some((day) => day.some((cell) => cell.state > 100))}
         >
           {t("application:Page2.resetTimes")}
@@ -485,7 +501,7 @@ export function TimeSelector({
         <ButtonContainer>
           <MediumButton
             id={`time-selector__button--copy-cells-${index}`}
-            variant="secondary"
+            variant={ButtonVariant.Secondary}
             onClick={() => copyCells(index)}
           >
             {t("application:Page2.copyTimes")}
diff --git a/apps/ui/components/application/reservation-unit-card.tsx b/apps/ui/components/application/reservation-unit-card.tsx
index f10f40d00e..ce58a2b3e8 100644
--- a/apps/ui/components/application/reservation-unit-card.tsx
+++ b/apps/ui/components/application/reservation-unit-card.tsx
@@ -4,6 +4,10 @@ import {
   IconGroup,
   IconCross,
   Notification,
+  IconSize,
+  ButtonSize,
+  ButtonVariant,
+  Button,
 } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
@@ -12,7 +16,6 @@ import { fontBold, H6 } from "common/src/common/typography";
 import { breakpoints } from "common/src/common/style";
 import type { ReservationUnitCardFieldsFragment } from "@gql/gql-types";
 import { getMainImage, getTranslation } from "@/modules/util";
-import { MediumButton } from "@/styles/util";
 import { getReservationUnitName } from "@/modules/reservationUnit";
 import { getImageSource } from "common/src/helpers";
 
@@ -95,8 +98,6 @@ const Name = styled.div`
   margin-bottom: var(--spacing-3-xs);
 `;
 
-const UnitName = styled.div``;
-
 const MaxPersonsContainer = styled.div`
   display: flex;
   align-items: center;
@@ -106,7 +107,7 @@ const MaxPersonsContainer = styled.div`
   padding-bottom: var(--spacing-2-xs);
 `;
 
-const DeleteButton = styled(MediumButton)`
+const DeleteButton = styled(Button)`
   white-space: nowrap;
   margin: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
   place-self: flex-start;
@@ -201,11 +202,11 @@ export function ReservationUnitCard({
           <ImageCell $src={imgSrc} />
           <ExtraPaddedCell>
             <Name>{getReservationUnitName(reservationUnit)}</Name>
-            <UnitName>{unitName}</UnitName>
+            <div>{unitName}</div>
             <MaxPersonsContainer>
               {reservationUnit.maxPersons && (
                 <>
-                  <IconGroup aria-hidden size="s" />
+                  <IconGroup aria-hidden="true" size={IconSize.Small} />
                   {t("reservationUnitCard:maxPersons", {
                     count: reservationUnit.maxPersons,
                   })}
@@ -214,9 +215,9 @@ export function ReservationUnitCard({
             </MaxPersonsContainer>
           </ExtraPaddedCell>
           <DeleteButton
-            variant="supplementary"
-            iconLeft={<IconCross aria-hidden />}
-            size="small"
+            variant={ButtonVariant.Supplementary}
+            iconStart={<IconCross aria-hidden="true" />}
+            size={ButtonSize.Small}
             onClick={() => {
               onDelete(reservationUnit);
             }}
@@ -233,7 +234,7 @@ export function ReservationUnitCard({
               aria-label={t("reservationUnitList:buttonUp")}
               onClick={() => onMoveUp(reservationUnit)}
             >
-              <IconArrowUp aria-hidden size="m" />
+              <IconArrowUp aria-hidden="true" size={IconSize.Small} />
             </button>
           </Circle>
           <Circle passive={last}>
@@ -244,7 +245,7 @@ export function ReservationUnitCard({
               disabled={last}
               onClick={() => onMoveDown(reservationUnit)}
             >
-              <IconArrowDown aria-hidden size="m" />
+              <IconArrowDown aria-hidden="true" size={IconSize.Small} />
             </button>
           </Circle>
         </ArrowContainer>
diff --git a/apps/ui/components/application/reservation-unit-modal-content.tsx b/apps/ui/components/application/reservation-unit-modal-content.tsx
index 30adead8ea..b82c34d851 100644
--- a/apps/ui/components/application/reservation-unit-modal-content.tsx
+++ b/apps/ui/components/application/reservation-unit-modal-content.tsx
@@ -7,12 +7,13 @@ import {
   Select,
   IconLinkExternal,
   Button,
+  ButtonVariant,
+  ButtonSize,
 } from "hds-react";
 import React, { ChangeEvent, useState } from "react";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
-import type { OptionType } from "common/types/common";
 import { fontBold, H2, H3 } from "common/src/common/typography";
 import { breakpoints } from "common/src/common/style";
 import {
@@ -28,6 +29,7 @@ import { getApplicationRoundName } from "@/modules/applicationRound";
 import { getReservationUnitName, getUnitName } from "@/modules/reservationUnit";
 import { IconWithText } from "../common/IconWithText";
 import { getReservationUnitPath } from "@/modules/urls";
+import { toNumber } from "lodash";
 
 const Container = styled.div`
   width: 100%;
@@ -150,10 +152,10 @@ function ReservationUnitCard({
         )}
       </IconContainer>
       <Button
-        iconRight={<IconArrowRight />}
+        iconEnd={<IconArrowRight aria-hidden="true" />}
         onClick={handle}
-        size="small"
-        variant={isSelected ? "danger" : "secondary"}
+        size={ButtonSize.Small}
+        variant={isSelected ? ButtonVariant.Danger : ButtonVariant.Secondary}
       >
         {buttonText}
       </Button>
@@ -164,6 +166,10 @@ function ReservationUnitCard({
 type Node = NonNullable<ApplicationQuery["application"]>;
 type AppRoundNode = NonNullable<Node["applicationRound"]>;
 type ReservationUnitType = ReservationUnitCardFieldsFragment;
+type OptionType = {
+  label: string;
+  value: number;
+};
 type OptionsType = {
   purposeOptions: OptionType[];
   reservationUnitTypeOptions: OptionType[];
@@ -190,10 +196,10 @@ export function ReservationUnitModalContent({
 }): JSX.Element {
   const [searchTerm, setSearchTerm] = useState<string | undefined>(undefined);
   const [reservationUnitType, setReservationUnitType] = useState<
-    OptionType | undefined
+    number | undefined
   >(undefined);
-  const [unit, setUnit] = useState<OptionType | undefined>(undefined);
-  const [maxPersons, setMaxPersons] = useState<OptionType | undefined>(
+  const [unit, setUnit] = useState<number | undefined>(undefined);
+  const [maxPersons, setMaxPersons] = useState<number | undefined>(
     undefined
   );
 
@@ -214,12 +220,12 @@ export function ReservationUnitModalContent({
     variables: {
       applicationRound: [applicationRound.pk ?? 0],
       textSearch: searchTerm,
-      maxPersons: maxPersons?.value?.toString(),
+      maxPersons: maxPersons?.toString(),
       reservationUnitType:
-        reservationUnitType?.value != null
-          ? [Number(reservationUnitType?.value)]
+        reservationUnitType != null
+          ? [reservationUnitType]
           : [],
-      unit: unit?.value != null ? [Number(unit?.value)] : [],
+      unit: unit != null ? [unit] : [],
       orderBy: [ReservationUnitOrderingChoices.NameFiAsc],
       isDraft: false,
       isVisible: true,
@@ -248,35 +254,51 @@ export function ReservationUnitModalContent({
           id="reservationUnitSearch.reservationUnitType"
           placeholder={t("common:select")}
           options={reservationUnitTypeOptions}
-          label={t("reservationUnitModal:searchReservationUnitTypeLabel")}
-          onChange={(selection: OptionType): void => {
-            setReservationUnitType(selection);
+          texts={{
+            label: t("reservationUnitModal:searchReservationUnitTypeLabel"),
+          }}
+          clearable
+          onChange={(selection): void => {
+            const val = selection.find((x) => x.selected)?.value;
+            const t = toNumber(val);
+            setReservationUnitType(t);
           }}
-          defaultValue={emptyOption}
         />
         <Select
           id="participantCountFilter"
-          placeholder={t("common:select")}
+          clearable
+          texts={{
+            label: t("searchForm:participantCountLabel"),
+            placeholder: t("common:select"),
+          }}
           options={participantCountOptions}
-          label={t("searchForm:participantCountLabel")}
-          onChange={(selection: OptionType): void => {
-            setMaxPersons(selection);
+          onChange={(selection): void => {
+            const val = selection.find((x) => x.selected)?.value;
+            const t = toNumber(val);
+            setMaxPersons(t);
           }}
-          defaultValue={emptyOption}
         />
         <Select
           id="reservationUnitSearch.unit"
-          placeholder={t("common:select")}
+          clearable
+          texts={{
+            placeholder: t("common:select"),
+            label: t("reservationUnitModal:searchUnitLabel"),
+          }}
           options={unitOptions}
-          label={t("reservationUnitModal:searchUnitLabel")}
-          onChange={(selection: OptionType): void => {
-            setUnit(selection);
+          onChange={(selection): void => {
+            const val = selection.find((x) => x.selected)?.value;
+            const t = toNumber(val);
+            setUnit(t);
           }}
-          defaultValue={emptyOption}
         />
       </AutoGrid>
       <Flex $alignItems="flex-end">
-        <Button isLoading={loading} onClick={(_) => refetch()}>
+        <Button
+          // FIXME
+          // isLoading={loading}
+          disabled={loading}
+          onClick={(_) => refetch()}>
           {t("common:search")}
         </Button>
       </Flex>
diff --git a/apps/ui/components/applications/ApplicationCard.tsx b/apps/ui/components/applications/ApplicationCard.tsx
index bed89ce977..84be69eba1 100644
--- a/apps/ui/components/applications/ApplicationCard.tsx
+++ b/apps/ui/components/applications/ApplicationCard.tsx
@@ -3,6 +3,8 @@ import { useTranslation, type TFunction } from "next-i18next";
 import styled from "styled-components";
 import {
   Button,
+  ButtonSize,
+  ButtonVariant,
   IconArrowRight,
   IconCheck,
   IconCogwheel,
@@ -28,8 +30,8 @@ import { type StatusLabelType } from "common/src/tags";
 import { getApplicationPath } from "@/modules/urls";
 
 const StyledButton = styled(Button).attrs({
-  variant: "secondary",
-  size: "small",
+  variant: ButtonVariant.Secondary,
+  size: ButtonSize.Small,
 })`
   white-space: nowrap;
 
@@ -157,11 +159,11 @@ export function ApplicationCard({
 
   const buttons = [
     <StyledButton
-      aria-label={t("applicationCard:cancel")}
       onClick={() => setIsWaitingForDelete(true)}
-      isLoading={isLoading}
-      disabled={!editable}
-      iconRight={<IconCross aria-hidden="true" />}
+      // FIXME
+      // isLoading={isLoading}
+      disabled={!editable || isLoading}
+      iconEnd={<IconCross aria-hidden="true" />}
       key="cancel"
     >
       {t("applicationCard:cancel")}
diff --git a/apps/ui/components/calendar/ReservationCalendarControls.tsx b/apps/ui/components/calendar/ReservationCalendarControls.tsx
index 46edcaf607..e881c577f1 100644
--- a/apps/ui/components/calendar/ReservationCalendarControls.tsx
+++ b/apps/ui/components/calendar/ReservationCalendarControls.tsx
@@ -1,7 +1,14 @@
 import React, { useMemo } from "react";
 import { useTranslation, type TFunction } from "next-i18next";
 import styled from "styled-components";
-import { Button, IconAngleDown, IconAngleUp, IconCross } from "hds-react";
+import {
+  Button,
+  ButtonVariant,
+  IconAngleDown,
+  IconAngleUp,
+  IconCross,
+  IconSize
+} from "hds-react";
 import { maxBy } from "lodash";
 import { fromUIDate } from "common/src/common/util";
 import { Transition } from "react-transition-group";
@@ -107,16 +114,6 @@ const Price = styled.div`
   line-height: var(--lineheight-l);
 `;
 
-const ResetButton = styled(Button).attrs({
-  variant: "secondary",
-  iconLeft: <IconCross aria-hidden />,
-})<{ $isLast?: boolean }>`
-  && {
-    --border-color: var(--color-black-50);
-    --font-family: var(--font-regular);
-  }
-`;
-
 function TogglerLabelContent({
   areControlsVisible,
   togglerLabel,
@@ -247,12 +244,14 @@ export function ReservationCalendarControls({
                 </>
               )}
             </PriceWrapper>
-            <ResetButton
+            <Button
               onClick={() => reservationForm.reset()}
               disabled={!focusSlot}
+              variant={ButtonVariant.Secondary}
+              iconStart={<IconCross aria-hidden="true" />}
             >
               {t("searchForm:resetForm")}
-            </ResetButton>
+            </Button>
             {mode === "create" && submitButton ? (
               <Flex
                 style={{
@@ -329,9 +328,9 @@ function ControlledToggler({
         type="button"
       >
         {value ? (
-          <IconAngleDown aria-label={t("common:showLess")} size="m" />
+          <IconAngleDown aria-label={t("common:showLess")} size={IconSize.Medium} />
         ) : (
-          <IconAngleUp aria-label={t("common:showMore")} size="m" />
+          <IconAngleUp aria-label={t("common:showMore")} size={IconSize.Medium} />
         )}
       </ToggleButton>
     </Flex>
diff --git a/apps/ui/components/common/Breadcrumb.tsx b/apps/ui/components/common/Breadcrumb.tsx
index 2357fdb0a2..b1c8d66df7 100644
--- a/apps/ui/components/common/Breadcrumb.tsx
+++ b/apps/ui/components/common/Breadcrumb.tsx
@@ -1,6 +1,6 @@
 import React, { ElementType, Fragment } from "react";
 import styled, { css } from "styled-components";
-import { IconAngleLeft, IconAngleRight } from "hds-react";
+import { IconAngleLeft, IconAngleRight, IconSize } from "hds-react";
 import { fontMedium } from "common";
 
 export type RouteItem = {
@@ -109,7 +109,7 @@ export function Breadcrumb({
         routes?.map((item, index) => (
           <Item key={`${item.title}${item.slug}`}>
             {index > 0 && (
-              <IconAngleRight size="s" aria-hidden className="angleRight" />
+              <IconAngleRight size={IconSize.Small} aria-hidden="true" className="angleRight" />
             )}
             {item.slug ? (
               <Link {...(linkComponent && { href: item.slug, passHref: true })}>
@@ -141,7 +141,7 @@ export function Breadcrumb({
         ))
       ) : isMobileEnabled ? (
         <Item>
-          <IconAngleLeft size="s" aria-hidden className="angleLeft" />
+          <IconAngleLeft size={IconSize.Small} aria-hidden="true" className="angleLeft" />
           <Link
             {...(linkComponent && {
               href: lastRouteWithSlug?.slug,
diff --git a/apps/ui/components/common/Footer.tsx b/apps/ui/components/common/Footer.tsx
index 34fcf4c995..84e5732191 100644
--- a/apps/ui/components/common/Footer.tsx
+++ b/apps/ui/components/common/Footer.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
-import { Footer as HDSFooter, IconLinkExternal } from "hds-react";
+import { Footer as HDSFooter, IconLinkExternal, IconSize } from "hds-react";
 import Logo from "common/src/components/Logo";
 import styled from "styled-components";
 
@@ -18,10 +18,10 @@ const Wrapper = styled(HDSFooter)`
   }
 `;
 
-const constructFeedbackUrl = (
+function constructFeedbackUrl(
   feedbackUrl: string,
   i18n: { language: string }
-) => {
+) {
   try {
     const url = new URL(feedbackUrl);
     url.searchParams.set("lang", i18n.language);
@@ -29,9 +29,9 @@ const constructFeedbackUrl = (
   } catch (e) {
     return null;
   }
-};
+}
 
-const Footer = ({ feedbackUrl }: { feedbackUrl: string }) => {
+function Footer({ feedbackUrl }: { feedbackUrl: string }) {
   const { t, i18n } = useTranslation();
   const locale = i18n.language === "fi" ? "" : `/${i18n.language}`;
   const languageUrl = constructFeedbackUrl(feedbackUrl, i18n);
@@ -42,14 +42,14 @@ const Footer = ({ feedbackUrl }: { feedbackUrl: string }) => {
           href={`${locale}/terms/service`}
           label={t(`footer:Navigation.serviceTermsLabel`)}
           target="_blank"
-          icon={<IconLinkExternal size="s" aria-hidden />}
+          icon={<ExternalLinkIcon />}
           rel="noopener noreferrer"
         />
         <HDSFooter.Link
           href={languageUrl ?? ""}
           label={t(`footer:Navigation.feedbackLabel`)}
           target="_blank"
-          icon={<IconLinkExternal size="s" aria-hidden />}
+          icon={<ExternalLinkIcon />}
           rel="noopener noreferrer"
         />
       </HDSFooter.Navigation>
@@ -64,19 +64,24 @@ const Footer = ({ feedbackUrl }: { feedbackUrl: string }) => {
           href={`${locale}/terms/privacy`}
           label={t(`footer:Base.Item.privacyStatement`)}
           target="_blank"
-          icon={<IconLinkExternal size="xs" aria-hidden />}
+          icon={<ExternalLinkIcon size="xs" />}
           rel="noopener noreferrer"
         />
         <HDSFooter.Link
           href={`${locale}/terms/accessibility`}
           label={t(`footer:Base.Item.accessibilityStatement`)}
           target="_blank"
-          icon={<IconLinkExternal size="xs" aria-hidden />}
+          icon={<ExternalLinkIcon size="xs" />}
           rel="noopener noreferrer"
         />
       </HDSFooter.Base>
     </Wrapper>
   );
-};
+}
+
+function ExternalLinkIcon({ size = "s" } : { size?: "s" | "xs" }): JSX.Element {
+  const s = size === "xs" ? IconSize.ExtraSmall : IconSize.Small;
+  return <IconLinkExternal size={s} aria-hidden="true" />;
+}
 
 export default Footer;
diff --git a/apps/ui/components/common/InfoDialog.tsx b/apps/ui/components/common/InfoDialog.tsx
index 4857420e27..9796a79115 100644
--- a/apps/ui/components/common/InfoDialog.tsx
+++ b/apps/ui/components/common/InfoDialog.tsx
@@ -1,7 +1,6 @@
-import { Dialog, IconInfoCircleFill } from "hds-react";
+import { Button, ButtonVariant, Dialog, IconInfoCircleFill } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
-import { BlackButton } from "../../styles/util";
 import Sanitize from "./Sanitize";
 
 type Props = {
@@ -12,13 +11,13 @@ type Props = {
   onClose: () => void;
 };
 
-const InfoDialog = ({
+function InfoDialog({
   id,
   heading,
   text,
   isOpen,
   onClose,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -32,9 +31,9 @@ const InfoDialog = ({
       <Dialog.Header
         id={`dialog__${id}--header`}
         title={heading}
-        iconLeft={
+        iconStart={
           <IconInfoCircleFill
-            aria-hidden
+            aria-hidden="true"
             style={{ color: "var(--color-bus)" }}
           />
         }
@@ -43,12 +42,15 @@ const InfoDialog = ({
         <Sanitize html={text} />
       </Dialog.Content>
       <Dialog.ActionButtons>
-        <BlackButton variant="secondary" onClick={() => onClose()}>
+        <Button
+          variant={ButtonVariant.Secondary}
+          onClick={() => onClose()}
+        >
           {t("common:close")}
-        </BlackButton>
+        </Button>
       </Dialog.ActionButtons>
     </Dialog>
   );
-};
+}
 
 export default InfoDialog;
diff --git a/apps/ui/components/common/ListWithPagination.tsx b/apps/ui/components/common/ListWithPagination.tsx
index b21a157f6d..6b2bbea194 100644
--- a/apps/ui/components/common/ListWithPagination.tsx
+++ b/apps/ui/components/common/ListWithPagination.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
-import { Button } from "hds-react";
+import { Button, ButtonVariant } from "hds-react";
 import type { PageInfo, SearchReservationUnitsQuery } from "@gql/gql-types";
 import type { ApolloQueryResult } from "@apollo/client";
 import ClientOnly from "common/src/ClientOnly";
@@ -52,7 +52,7 @@ function Content({
             {showMore && (
               <Button
                 onClick={fetchMore}
-                variant="secondary"
+                variant={ButtonVariant.Secondary}
                 data-testid="list-with-pagination__button--paginate"
               >
                 {t("common:showMore")}
diff --git a/apps/ui/components/common/Modal.tsx b/apps/ui/components/common/Modal.tsx
index eb50db0537..be9c16c6ba 100644
--- a/apps/ui/components/common/Modal.tsx
+++ b/apps/ui/components/common/Modal.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
 import { isBrowser } from "common/src/helpers";
-import { Button, IconCross } from "hds-react";
+import { Button, ButtonSize, ButtonVariant, IconCross } from "hds-react";
 import { Flex } from "common/styles/util";
 import { breakpoints } from "common";
 
@@ -39,11 +39,6 @@ const ModalElement = styled(Flex)<{ $maxWidth?: string; $height?: string }>`
   padding: var(--modal-padding);
 `;
 
-const CloseButton = styled(Button).attrs({
-  size: "small",
-  variant: "secondary",
-})``;
-
 const CloseButtonWrapper = styled.div`
   position: absolute;
   top: var(--spacing-layout-xs);
@@ -91,12 +86,15 @@ function Modal({
         >
           {!hideCloseButton && (
             <CloseButtonWrapper>
-              <CloseButton
+              <Button
+                size={ButtonSize.Small}
+                variant={ButtonVariant.Secondary}
                 onClick={handleClose}
                 aria-label={t(closeButtonKey) ?? t("common:close")}
+                iconStart={<IconCross />}
               >
-                <IconCross />
-              </CloseButton>
+                ""
+              </Button>
             </CloseButtonWrapper>
           )}
           <section>{children}</section>
diff --git a/apps/ui/components/common/Navigation.tsx b/apps/ui/components/common/Navigation.tsx
index 18213e0a0d..1f78c9c845 100644
--- a/apps/ui/components/common/Navigation.tsx
+++ b/apps/ui/components/common/Navigation.tsx
@@ -6,6 +6,7 @@ import {
   IconSignout,
   IconUser,
   type LanguageOption,
+  LogoSize,
   TitleStyleType,
 } from "hds-react";
 import { useTranslation } from "next-i18next";
@@ -194,7 +195,7 @@ function ActionBar({ apiBaseUrl, profileLink, languageOptions }: HeaderProps) {
       titleStyle={TitleStyleType.Bold}
       titleHref={env.NEXT_PUBLIC_BASE_URL ?? "/"}
       openFrontPageLinksAriaLabel={t("common:applicationName")}
-      logo={<Logo size="large" />}
+      logo={<Logo size={LogoSize.Large} />}
       logoAriaLabel={`${t("common:applicationName")} logo`}
       logoHref={env.NEXT_PUBLIC_BASE_URL}
       menuButtonLabel="Menu"
diff --git a/apps/ui/components/common/StartApplicationBar.tsx b/apps/ui/components/common/StartApplicationBar.tsx
index 6e743f8437..f9657f3e7f 100644
--- a/apps/ui/components/common/StartApplicationBar.tsx
+++ b/apps/ui/components/common/StartApplicationBar.tsx
@@ -1,10 +1,9 @@
-import { Button, IconArrowRight, IconCross } from "hds-react";
+import { Button, ButtonSize, ButtonVariant, IconArrowRight, IconCross } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
 import { breakpoints } from "common/src/common/style";
 import ClientOnly from "common/src/ClientOnly";
-import { JustForDesktop, JustForMobile } from "@/modules/style/layout";
 import { useRouter } from "next/router";
 import {
   ApplicationCreateMutationInput,
@@ -14,6 +13,7 @@ import { errorToast } from "common/src/common/toast";
 import { getApplicationPath } from "@/modules/urls";
 import { Flex, NoWrap } from "common/styles/util";
 import { truncatedText } from "common/styles/cssFragments";
+import { useMedia } from "react-use";
 
 type Props = {
   count: number;
@@ -55,8 +55,8 @@ const InnerContainer = styled(Flex).attrs({
 `;
 
 const DeleteButton = styled(Button).attrs({
-  variant: "primary",
-  iconLeft: <IconCross />,
+  variant: ButtonVariant.Primary,
+  iconStart: <IconCross aria-hidden="true" />,
 })`
   ${truncatedText}
 `;
@@ -67,6 +67,7 @@ function StartApplicationBar({
 }: Props): JSX.Element | null {
   const { t } = useTranslation();
   const router = useRouter();
+  const isMobile = useMedia(`(max-width: ${breakpoints.m})`, false);
 
   const [create, { loading: isSaving }] = useCreateApplicationMutation();
 
@@ -105,38 +106,28 @@ function StartApplicationBar({
     return null;
   }
 
-  // TODO remove use of JustForDesktop and JustForMobile
   return (
     <BackgroundContainer>
       <InnerContainer>
         <div>
           <NoWrap id="reservationUnitCount">
-            <JustForDesktop>
-              {t("shoppingCart:count", { count })}
-            </JustForDesktop>
-            <JustForMobile>
-              {t("shoppingCart:countShort", { count })}
-            </JustForMobile>
+            {isMobile ? t("shoppingCart:countShort", { count }) : t("shoppingCart:count", { count })}
           </NoWrap>
         </div>
         <DeleteButton
           onClick={clearSelections}
-          size="small"
+          size={ButtonSize.Small}
           data-testid="start-application-bar__button--clear-selections"
         >
-          <JustForDesktop>{t("shoppingCart:deleteSelections")}</JustForDesktop>
-          <JustForMobile>
-            {t("shoppingCart:deleteSelectionsShort")}
-          </JustForMobile>
+          {isMobile ? t("shoppingCart:deleteSelectionsShort") : t("shoppingCart:deleteSelections")}
         </DeleteButton>
         <Button
           id="startApplicationButton"
           onClick={onNext}
           disabled={isSaving}
-          iconRight={<IconArrowRight />}
+          iconEnd={<IconArrowRight aria-hidden="true" />}
         >
-          <JustForDesktop>{t("shoppingCart:next")}</JustForDesktop>
-          <JustForMobile>{t("shoppingCart:nextShort")}</JustForMobile>
+          {isMobile ? t("shoppingCart:nextShort") : t("shoppingCart:next")}
         </Button>
       </InnerContainer>
     </BackgroundContainer>
diff --git a/apps/ui/components/form/Sorting.tsx b/apps/ui/components/form/Sorting.tsx
deleted file mode 100644
index faeb96fd68..0000000000
--- a/apps/ui/components/form/Sorting.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { IconSortAscending, IconSortDescending, Select } from "hds-react";
-import { useTranslation } from "next-i18next";
-import { fontMedium } from "common/src/common/typography";
-import { breakpoints } from "common";
-import { Flex } from "common/styles/util";
-
-type OptionType = {
-  label: string;
-  value: string;
-};
-type Props = {
-  value: string;
-  sortingOptions: OptionType[];
-  setSorting: (option: OptionType) => void;
-  isOrderingAsc: boolean;
-  setIsOrderingAsc: (val: boolean) => void;
-  className?: string;
-};
-
-const Wrapper = styled(Flex).attrs({
-  $alignItems: "center",
-  $direction: "row",
-  $gap: "xs",
-  $justifyContent: "flex-end",
-  $wrap: "wrap",
-})`
-  flex-grow: 1;
-
-  padding: var(--spacing-xs);
-  background-color: var(--color-black-5);
-
-  label {
-    ${fontMedium};
-  }
-`;
-
-const OrderBtn = styled.button`
-  border: 0;
-  background: transparent;
-  position: relative;
-  top: 2px;
-  cursor: pointer;
-
-  svg {
-    color: var(--color-bus);
-  }
-`;
-
-// without min-width the select size changes depending on the content
-// correct way would be calculate the width based on the content
-const StyledSelect = styled(Select<OptionType>)`
-  min-width: 230px;
-  flex-grow: 1;
-  @media (min-width: ${breakpoints.s}) {
-    flex-grow: 0;
-  }
-`;
-
-// NOTE this is not used anywhere except SortingComponent.tsx
-export function Sorting({
-  value,
-  sortingOptions,
-  setSorting,
-  isOrderingAsc,
-  setIsOrderingAsc,
-}: Props): JSX.Element {
-  const { t } = useTranslation();
-
-  return (
-    <Wrapper>
-      <OrderBtn
-        type="button"
-        onClick={() => setIsOrderingAsc(!isOrderingAsc)}
-        aria-label={t(
-          `search:sorting.action.${isOrderingAsc ? "descending" : "ascending"}`
-        )}
-        data-testid="sorting-button"
-      >
-        {isOrderingAsc ? (
-          <IconSortAscending
-            size="m"
-            aria-label={t("search:sorting.ascendingLabel")}
-          />
-        ) : (
-          <IconSortDescending
-            size="m"
-            aria-label={t("search:sorting.descendingLabel")}
-          />
-        )}
-      </OrderBtn>
-      <label htmlFor="search-form__button--sorting-toggle-button">
-        {t("searchResultList:sortButtonLabel")}:
-      </label>
-      <StyledSelect
-        label=""
-        id="search-form__button--sorting"
-        options={sortingOptions}
-        onChange={setSorting}
-        value={sortingOptions.find((option) => option.value === value)}
-      />
-    </Wrapper>
-  );
-}
diff --git a/apps/ui/components/form/index.ts b/apps/ui/components/form/index.ts
index 621055b7a5..55e0229677 100644
--- a/apps/ui/components/form/index.ts
+++ b/apps/ui/components/form/index.ts
@@ -1,2 +1 @@
 export { default as DateRangePicker } from "./DateRangePicker";
-export { Sorting } from "./Sorting";
diff --git a/apps/ui/components/index/Purposes.tsx b/apps/ui/components/index/Purposes.tsx
index b5a33fcaa7..ff5d0718ae 100644
--- a/apps/ui/components/index/Purposes.tsx
+++ b/apps/ui/components/index/Purposes.tsx
@@ -1,4 +1,4 @@
-import { IconArrowRight } from "hds-react";
+import { IconArrowRight, IconSize } from "hds-react";
 import Link from "next/link";
 import React, { useMemo } from "react";
 import { useTranslation } from "next-i18next";
@@ -111,7 +111,7 @@ export function Purposes({ purposes }: Props): JSX.Element {
               <Image src={getImg(item)} alt="" aria-hidden="true" />
               <Flex $direction="row" $gap="xs" $alignItems="center">
                 <span>{getName(item)} </span>
-                <IconArrowRight size="s" aria-hidden="true" />
+                <IconArrowRight size={IconSize.Small} aria-hidden="true" />
               </Flex>
             </PurposeItem>
           </PurposeLink>
diff --git a/apps/ui/components/index/SearchGuides.tsx b/apps/ui/components/index/SearchGuides.tsx
index 928040c105..513bc345c7 100644
--- a/apps/ui/components/index/SearchGuides.tsx
+++ b/apps/ui/components/index/SearchGuides.tsx
@@ -96,7 +96,7 @@ export function SearchGuides(): JSX.Element {
           <Button
             id="browseRecurringReservationUnits"
             onClick={() => router.push("/recurring")}
-            iconRight={<IconArrowRight />}
+            iconEnd={<IconArrowRight />}
           >
             {t("browseRecurringReservationsButton")}
           </Button>
diff --git a/apps/ui/components/index/Units.tsx b/apps/ui/components/index/Units.tsx
index 7812558ee2..0fbc307c5d 100644
--- a/apps/ui/components/index/Units.tsx
+++ b/apps/ui/components/index/Units.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { useTranslation } from "next-i18next";
-import { IconArrowRight } from "hds-react";
+import { IconArrowRight, IconSize } from "hds-react";
 import { breakpoints } from "common/src/common/style";
 import Link from "next/link";
 import { H3 } from "common/src/common/typography";
@@ -73,7 +73,7 @@ export function Units({ units }: Props): JSX.Element | null {
               data-testid="front-page__units--unit"
             >
               {getTranslation(unit, "name") || unit.nameFi}
-              <IconArrowRight size="l" aria-hidden />
+              <IconArrowRight size={IconSize.Large} aria-hidden="true" />
             </UnitItemLink>
           ))}
         </UnitContainer>
@@ -83,7 +83,7 @@ export function Units({ units }: Props): JSX.Element | null {
           <IconButton
             href={singleSearchPrefix}
             label={t("common:showAll")}
-            icon={<IconArrowRight aria-hidden />}
+            icon={<IconArrowRight aria-hidden="true" />}
             data-testid="front-page__units--more-link"
           />
         </Flex>
diff --git a/apps/ui/components/reservation/CancelledLinkSet.tsx b/apps/ui/components/reservation/CancelledLinkSet.tsx
index 5445b4ed14..7686df92e4 100644
--- a/apps/ui/components/reservation/CancelledLinkSet.tsx
+++ b/apps/ui/components/reservation/CancelledLinkSet.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
-import { IconArrowRight, IconSignout } from "hds-react";
+import { IconArrowRight, IconSignout, IconSize } from "hds-react";
 import { signOut } from "common/src/browserHelpers";
 import { getSingleSearchPath } from "@/modules/urls";
 import { IconButton } from "common/src/components";
@@ -32,19 +32,19 @@ function BaseLinkSet(props: Props): JSX.Element {
       ) : (
         <IconButton
           href={getSingleSearchPath()}
-          icon={<IconArrowRight size="m" aria-hidden="true" />}
+          icon={<IconArrowRight size={IconSize.Medium} aria-hidden="true" />}
           label={t("reservations:backToSearch")}
         />
       )}
       <IconButton
         href="/"
         label={t("common:gotoFrontpage")}
-        icon={<IconArrowRight size="m" aria-hidden="true" />}
+        icon={<IconArrowRight size={IconSize.Medium} aria-hidden="true" />}
       />
       <IconButton
         onClick={() => signOut(apiBaseUrl)}
         label={t("common:logout")}
-        icon={<IconSignout size="m" aria-hidden="true" />}
+        icon={<IconSignout size={IconSize.Medium} aria-hidden="true" />}
       />
     </Flex>
   );
diff --git a/apps/ui/components/reservation/EditStep0.tsx b/apps/ui/components/reservation/EditStep0.tsx
index a248793d0a..0bf3d8d094 100644
--- a/apps/ui/components/reservation/EditStep0.tsx
+++ b/apps/ui/components/reservation/EditStep0.tsx
@@ -6,7 +6,7 @@ import type {
   ReservationUnitPageQuery,
 } from "@gql/gql-types";
 import { differenceInMinutes } from "date-fns";
-import { Button, IconArrowRight, IconCross } from "hds-react";
+import { Button, ButtonVariant, IconArrowRight, IconCross } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
@@ -259,17 +259,18 @@ export function EditStep0({
             href={`/reservations/${reservation.pk}`}
             data-testid="reservation-edit__button--cancel"
           >
-            <IconCross aria-hidden />
+            <IconCross aria-hidden="true" />
             {t("reservations:cancelButton")}
           </ButtonLikeLink>
           <Button
-            variant="primary"
-            iconRight={<IconArrowRight aria-hidden />}
-            disabled={!focusSlot.isReservable || !isDirty}
+            variant={ButtonVariant.Primary}
+            iconEnd={<IconArrowRight aria-hidden="true" />}
+            disabled={!focusSlot.isReservable || !isDirty || isLoading}
             type="submit"
             data-testid="reservation__button--continue"
-            isLoading={isLoading}
-            loadingText={t("reservationCalendar:nextStepLoading")}
+            // FIXME
+            // isLoading={isLoading}
+            // loadingText={t("reservationCalendar:nextStepLoading")}
           >
             {t("reservationCalendar:nextStep")}
           </Button>
diff --git a/apps/ui/components/reservation/EditStep1.tsx b/apps/ui/components/reservation/EditStep1.tsx
index 77596df1eb..0764f7a8d6 100644
--- a/apps/ui/components/reservation/EditStep1.tsx
+++ b/apps/ui/components/reservation/EditStep1.tsx
@@ -2,7 +2,7 @@ import {
   type ReservationQuery,
   type ReservationUnitPageQuery,
 } from "@gql/gql-types";
-import { Button, IconArrowLeft, IconCross } from "hds-react";
+import { Button, ButtonVariant, IconArrowLeft, IconCross } from "hds-react";
 import { breakpoints } from "common/src/common/style";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "next-i18next";
@@ -166,8 +166,8 @@ export function EditStep1({
         />
         <Actions>
           <Button
-            variant="secondary"
-            iconLeft={<IconArrowLeft aria-hidden />}
+            variant={ButtonVariant.Secondary}
+            iconStart={<IconArrowLeft aria-hidden="true" />}
             onClick={onBack}
             data-testid="reservation-edit__button--back"
           >
@@ -178,16 +178,17 @@ export function EditStep1({
             size="large"
             data-testid="reservation-edit__button--cancel"
           >
-            <IconCross aria-hidden />
+            <IconCross aria-hidden="true" />
             {t("reservations:cancelButton")}
           </ButtonLikeLink>
           <Button
-            variant="primary"
+            variant={ButtonVariant.Primary}
             type="submit"
             disabled={isSubmitting || !termsAccepted}
             data-testid="reservation__button--continue"
-            isLoading={isSubmitting}
-            loadingText={t("reservations:saveNewTimeLoading")}
+            // FIXME
+            // isLoading={isSubmitting}
+            // loadingText={t("reservations:saveNewTimeLoading")}
           >
             {t("reservations:saveNewTime")}
           </Button>
diff --git a/apps/ui/components/reservation/Step0.tsx b/apps/ui/components/reservation/Step0.tsx
index bc8984e536..bc2eb8cc55 100644
--- a/apps/ui/components/reservation/Step0.tsx
+++ b/apps/ui/components/reservation/Step0.tsx
@@ -3,7 +3,7 @@
  *  This component needs to be wrapped inside a Form context
  */
 import type { OptionType } from "common/types/common";
-import { Notification, IconArrowLeft, IconArrowRight, Button } from "hds-react";
+import { Notification, IconArrowLeft, IconArrowRight, Button, ButtonVariant } from "hds-react";
 import { useFormContext, UseFormReturn } from "react-hook-form";
 import React, { useState } from "react";
 import { Trans, useTranslation } from "next-i18next";
@@ -112,20 +112,21 @@ export function Step0({
       />
       <ActionContainer>
         <Button
-          variant="primary"
+          variant={ButtonVariant.Primary}
           type="submit"
           disabled={submitDisabled}
-          iconRight={<IconArrowRight aria-hidden />}
+          iconEnd={<IconArrowRight aria-hidden="true" />}
           data-testid="reservation__button--continue"
-          isLoading={isSubmitting}
-          loadingText={t("reservationCalendar:nextStepLoading")}
+          // FIXME
+          // isLoading={isSubmitting}
+          // loadingText={t("reservationCalendar:nextStepLoading")}
         >
           {t("reservationCalendar:nextStep")}
         </Button>
         <Button
-          variant="secondary"
+          variant={ButtonVariant.Secondary}
           type="button"
-          iconLeft={<IconArrowLeft aria-hidden />}
+          iconStart={<IconArrowLeft aria-hidden="true" />}
           onClick={cancelReservation}
           data-testid="reservation__button--cancel"
         >
diff --git a/apps/ui/components/reservation/Step1.tsx b/apps/ui/components/reservation/Step1.tsx
index 9146b081ba..70f534519b 100644
--- a/apps/ui/components/reservation/Step1.tsx
+++ b/apps/ui/components/reservation/Step1.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "next-i18next";
-import { Button, IconArrowLeft, IconArrowRight } from "hds-react";
+import { Button, ButtonVariant, IconArrowLeft, IconArrowRight } from "hds-react";
 import {
   type ReservationQuery,
   type ReservationUnitPageFieldsFragment,
@@ -77,21 +77,22 @@ export function Step1({
       />
       <ActionContainer>
         <Button
-          variant="primary"
+          variant={ButtonVariant.Primary}
           type="submit"
-          iconRight={
-            requiresHandling ? <IconArrowRight aria-hidden /> : undefined
+          iconEnd={
+            requiresHandling ? <IconArrowRight aria-hidden="true" /> : undefined
           }
           data-testid="reservation__button--continue"
-          isLoading={isSubmitting}
-          loadingText={loadingText}
-          disabled={!areTermsAccepted}
+          // FIXME
+          // isLoading={isSubmitting}
+          // loadingText={loadingText}
+          disabled={!areTermsAccepted || isSubmitting}
         >
           {submitText}
         </Button>
         <Button
-          variant="secondary"
-          iconLeft={<IconArrowLeft aria-hidden />}
+          variant={ButtonVariant.Secondary}
+          iconStart={<IconArrowLeft aria-hidden="true" />}
           onClick={() => setStep(0)}
           data-testid="reservation__button--cancel"
         >
diff --git a/apps/ui/components/reservations/UnpaidReservationNotification.tsx b/apps/ui/components/reservations/UnpaidReservationNotification.tsx
index fecb56e07e..3d84fda168 100644
--- a/apps/ui/components/reservations/UnpaidReservationNotification.tsx
+++ b/apps/ui/components/reservations/UnpaidReservationNotification.tsx
@@ -19,7 +19,7 @@ import { ApolloError } from "@apollo/client";
 import { toApiDate } from "common/src/common/util";
 import { errorToast, successToast } from "common/src/common/toast";
 import { getReservationInProgressPath } from "@/modules/urls";
-import { Button } from "hds-react";
+import { Button, ButtonSize, ButtonVariant } from "hds-react";
 
 type QueryT = NonNullable<ListReservationsQuery["reservations"]>;
 type EdgeT = NonNullable<QueryT["edges"][number]>;
@@ -133,21 +133,20 @@ function ReservationNotification({
         <BodyText>{text}</BodyText>
         <NotificationButtons>
           <Button
-            variant="secondary"
-            size="small"
+            variant={ButtonVariant.Secondary}
+            size={ButtonSize.Small}
             onClick={onDelete}
             disabled={disabled}
-            isLoading={isLoading}
-            loadingText={t(
-              "notification:waitingForPayment.cancelingReservation"
-            )}
+            // FIXME
+            // isLoading={isLoading}
+            // loadingText={t( "notification:waitingForPayment.cancelingReservation")}
             data-testid="reservation-notification__button--delete"
           >
             {t("notification:waitingForPayment.cancelReservation")}
           </Button>
           <Button
-            variant="secondary"
-            size="small"
+            variant={ButtonVariant.Secondary}
+            size={ButtonSize.Small}
             disabled={disabled}
             onClick={onNext}
             data-testid="reservation-notification__button--checkout"
diff --git a/apps/ui/components/search/ControlledMultiSelect.tsx b/apps/ui/components/search/ControlledMultiSelect.tsx
deleted file mode 100644
index 1284b16072..0000000000
--- a/apps/ui/components/search/ControlledMultiSelect.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  type Control,
-  type FieldValues,
-  type Path,
-  useController,
-} from "react-hook-form";
-import { Combobox } from "hds-react";
-import { useTranslation } from "next-i18next";
-
-export function ControlledMultiSelect<T extends FieldValues>({
-  name,
-  control,
-  options,
-  label,
-}: {
-  name: Path<T>;
-  control: Control<T>;
-  options:
-    | Array<{ value: string; label: string }>
-    | Array<{ value: number; label: string }>;
-  label: string;
-}): JSX.Element {
-  const {
-    field: { value, onChange },
-  } = useController({ control, name });
-  const { t } = useTranslation();
-
-  const placeholder = t("common:select");
-
-  const values =
-    options.filter((v) => {
-      return value?.find((x: string | number) => x === v.value) != null;
-    }) ?? [];
-
-  type U = (typeof options)[0];
-  return (
-    <Combobox<U>
-      label={label}
-      multiselect
-      clearButtonAriaLabel={t("common:clear")}
-      toggleButtonAriaLabel={t("common:toggle")}
-      selectedItemRemoveButtonAriaLabel={t("common:remove")}
-      placeholder={placeholder}
-      clearable
-      options={options}
-      disabled={options.length === 0}
-      value={values}
-      onChange={(val: U[]) => onChange(val.map((x) => x.value))}
-    />
-  );
-}
diff --git a/apps/ui/components/search/FilterTagList.tsx b/apps/ui/components/search/FilterTagList.tsx
index 5fd6939f4b..09f5369b85 100644
--- a/apps/ui/components/search/FilterTagList.tsx
+++ b/apps/ui/components/search/FilterTagList.tsx
@@ -104,7 +104,8 @@ export function FilterTagList({
                 value: translateTag(key, val),
               })}
             >
-              {translateTag(key, val)}
+              {/* TODO when can this return undefined? should we filter or remove the possibility? */}
+              {translateTag(key, val) ?? ""}
             </StyledTag>
           ));
         }
diff --git a/apps/ui/components/search/ReservationUnitCard.tsx b/apps/ui/components/search/ReservationUnitCard.tsx
index 7a580455b6..a0549e82ab 100644
--- a/apps/ui/components/search/ReservationUnitCard.tsx
+++ b/apps/ui/components/search/ReservationUnitCard.tsx
@@ -4,6 +4,9 @@ import {
   IconPlus,
   IconLinkExternal,
   Button,
+  IconSize,
+  ButtonSize,
+  ButtonVariant,
 } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
@@ -68,7 +71,7 @@ export function ReservationUnitCard({
           aria-label={t("reservationUnitCard:maxPersons", {
             maxPersons: reservationUnit.maxPersons,
           })}
-          size="s"
+          size={IconSize.Small}
         />
       ),
       value: t("reservationUnitCard:maxPersons", {
@@ -81,9 +84,9 @@ export function ReservationUnitCard({
   if (containsReservationUnit(reservationUnit)) {
     buttons.push(
       <Button
-        size="small"
-        variant="primary"
-        iconRight={<IconCheck aria-hidden />}
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Primary}
+        iconEnd={<IconCheck aria-hidden="true" />}
         onClick={() => removeReservationUnit(reservationUnit)}
         data-testid="reservation-unit-card__button--select"
         key={t("common:removeReservationUnit")}
@@ -94,9 +97,9 @@ export function ReservationUnitCard({
   } else {
     buttons.push(
       <Button
-        size="small"
-        variant="secondary"
-        iconRight={<IconPlus aria-hidden />}
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Secondary}
+        iconEnd={<IconPlus aria-hidden="true" />}
         onClick={() => selectReservationUnit(reservationUnit)}
         data-testid="reservation-unit-card__button--select"
         key={t("common:selectReservationUnit")}
@@ -113,7 +116,7 @@ export function ReservationUnitCard({
       data-testid="reservation-unit-card__button--link"
       key="show"
     >
-      <IconLinkExternal aria-hidden />
+      <IconLinkExternal aria-hidden="true" />
       {t("common:show")}
     </ButtonLikeLink>
   );
diff --git a/apps/ui/components/search/SeasonalSearchForm.tsx b/apps/ui/components/search/SeasonalSearchForm.tsx
index 7cb78da43d..cdaeb30f5b 100644
--- a/apps/ui/components/search/SeasonalSearchForm.tsx
+++ b/apps/ui/components/search/SeasonalSearchForm.tsx
@@ -6,7 +6,6 @@ import { participantCountOptions } from "@/modules/const";
 import { useSearchModify } from "@/hooks/useSearchValues";
 import { FilterTagList } from "./FilterTagList";
 import { ControlledSelect } from "common/src/components/form/ControlledSelect";
-import { ControlledMultiSelect } from "./ControlledMultiSelect";
 import { BottomContainer, Filters, StyledSubmitButton } from "./styled";
 import {
   mapQueryParamToNumber,
@@ -131,19 +130,22 @@ export function SeasonalSearchForm({
             className="inputSm inputGroupEnd"
           />
         </SingleLabelInputGroup>
-        <ControlledMultiSelect
+        <ControlledSelect
+          multiselect
           name="reservationUnitTypes"
           control={control}
           options={reservationUnitTypeOptions}
           label={t("searchForm:typeLabel")}
         />
-        <ControlledMultiSelect
+        <ControlledSelect
+          multiselect
           name="unit"
           control={control}
           options={unitOptions}
           label={t("searchForm:unitFilter")}
         />
-        <ControlledMultiSelect
+        <ControlledSelect
+          multiselect
           name="purposes"
           control={control}
           options={purposeOptions}
@@ -159,8 +161,10 @@ export function SeasonalSearchForm({
         />
         <StyledSubmitButton
           type="submit"
-          isLoading={isLoading}
-          iconLeft={<IconSearch />}
+          // FIXME new complex system for loading states in buttons
+          // isLoading={isLoading}
+          disabled={isLoading}
+          iconStart={<IconSearch />}
         >
           {t("searchForm:searchButton")}
         </StyledSubmitButton>
diff --git a/apps/ui/components/search/SingleSearchForm.tsx b/apps/ui/components/search/SingleSearchForm.tsx
index 3a7e29c702..b58766599e 100644
--- a/apps/ui/components/search/SingleSearchForm.tsx
+++ b/apps/ui/components/search/SingleSearchForm.tsx
@@ -12,7 +12,6 @@ import { DateRangePicker } from "@/components/form";
 import { FilterTagList } from "./FilterTagList";
 import SingleLabelInputGroup from "@/components/common/SingleLabelInputGroup";
 import { useSearchModify } from "@/hooks/useSearchValues";
-import { ControlledMultiSelect } from "./ControlledMultiSelect";
 import { ControlledSelect } from "common/src/components/form/ControlledSelect";
 import {
   mapQueryParamToNumber,
@@ -166,19 +165,22 @@ export function SingleSearchForm({
   return (
     <form noValidate onSubmit={handleSubmit(onSearch)}>
       <Filters>
-        <ControlledMultiSelect
+        <ControlledSelect
+          multiselect
           name="purposes"
           control={control}
           options={purposeOptions}
           label={t("searchForm:purposesFilter")}
         />
-        <ControlledMultiSelect
+        <ControlledSelect
+          multiselect
           name="unit"
           control={control}
           options={unitOptions}
           label={t("searchForm:unitFilter")}
         />
-        <ControlledMultiSelect
+        <ControlledSelect
+          multiselect
           name="equipments"
           control={control}
           options={equipmentsOptions}
@@ -261,8 +263,9 @@ export function SingleSearchForm({
               className="inputSm inputGroupEnd"
             />
           </SingleLabelInputGroup>
-          <ControlledMultiSelect
+          <ControlledSelect
             name="reservationUnitTypes"
+            multiselect
             control={control}
             options={unitTypeOptions}
             label={t("searchForm:typeLabel")}
@@ -303,8 +306,10 @@ export function SingleSearchForm({
         <StyledSubmitButton
           id="searchButton"
           type="submit"
-          iconLeft={<IconSearch />}
-          isLoading={isLoading}
+          iconStart={<IconSearch aria-hidden="true" />}
+          disabled={isLoading}
+          // FIXME
+          // isLoading={isLoading}
         >
           {t("searchForm:searchButton")}
         </StyledSubmitButton>
diff --git a/apps/ui/components/search/SingleSearchReservationUnitCard.tsx b/apps/ui/components/search/SingleSearchReservationUnitCard.tsx
index c8b7dd4750..b4c3004a12 100644
--- a/apps/ui/components/search/SingleSearchReservationUnitCard.tsx
+++ b/apps/ui/components/search/SingleSearchReservationUnitCard.tsx
@@ -1,4 +1,4 @@
-import { IconArrowRight, IconEuroSign, IconGroup } from "hds-react";
+import { IconArrowRight, IconEuroSign, IconGroup, IconSize } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import NextImage from "next/image";
@@ -156,7 +156,7 @@ function ReservationUnitCard({ reservationUnit }: PropsT): JSX.Element {
           aria-label={t("reservationUnitCard:maxPersons", {
             maxPersons: reservationUnit.maxPersons,
           })}
-          size="s"
+          size={IconSize.Small}
         />
       ),
       value: t("reservationUnitCard:maxPersons", {
diff --git a/apps/ui/jest.config.mjs b/apps/ui/jest.config.mjs
index faed5efa9f..a5cf812176 100644
--- a/apps/ui/jest.config.mjs
+++ b/apps/ui/jest.config.mjs
@@ -11,7 +11,8 @@ const customJestConfig = {
   modulePathIgnorePatterns: ["<rootDir>/.next/"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.mjs"],
   moduleDirectories: ["node_modules", "<rootDir>/"],
-  testEnvironment: "jest-environment-jsdom",
+  // jsdom has broken stylesheet parsing
+  testEnvironment: "@happy-dom/jest-environment", // "jest-environment-jsdom",
 };
 
 /** @type {import('jest').Config} */
diff --git a/apps/ui/package.json b/apps/ui/package.json
index 9a3e85e46e..909862949f 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -26,9 +26,9 @@
     "eslint-config-custom": "workspace:*",
     "focus-trap-react": "^10.2.3",
     "graphql": "^16.9.0",
-    "hds-core": "^3.11.0",
-    "hds-design-tokens": "^3.11.0",
-    "hds-react": "^3.11.0",
+    "hds-core": "^4.1.0",
+    "hds-design-tokens": "^4.1.0",
+    "hds-react": "^4.1.0",
     "i18next": "^23.15.1",
     "lodash": "^4.17.21",
     "next": "15.0.3",
@@ -50,6 +50,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@happy-dom/jest-environment": "^16.5.3",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -64,9 +65,9 @@
     "@types/styled-components": "^5.1.29",
     "@vercel/style-guide": "^6.0.0",
     "axe-core": "^4.10.0",
+    "happy-dom": "^16.5.3",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.7.0",
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "^3.4.1",
     "stylelint": "^16.2.1",
diff --git a/apps/ui/pages/applications/[id]/page3.tsx b/apps/ui/pages/applications/[id]/page3.tsx
index 4271924be5..032b68442a 100644
--- a/apps/ui/pages/applications/[id]/page3.tsx
+++ b/apps/ui/pages/applications/[id]/page3.tsx
@@ -33,7 +33,7 @@ import { getCommonServerSideProps } from "@/modules/serverUtils";
 import { base64encode, toNumber } from "common/src/helpers";
 import { errorToast } from "common/src/common/toast";
 import { getApplicationPath } from "@/modules/urls";
-import { Button, IconArrowRight } from "hds-react";
+import { Button, ButtonVariant, IconArrowRight } from "hds-react";
 import { ButtonContainer } from "common/styles/util";
 import styled from "styled-components";
 
@@ -51,12 +51,12 @@ function Buttons({
 
   return (
     <ButtonContainer>
-      <Button variant="secondary" onClick={onPrev}>
+      <Button variant={ButtonVariant.Secondary} onClick={onPrev}>
         {t("common:prev")}
       </Button>
       <Button
         id="button__application--next"
-        iconRight={<IconArrowRight />}
+        iconEnd={<IconArrowRight aria-hidden="true" />}
         type="submit"
         disabled={submitDisabled}
       >
diff --git a/apps/ui/pages/applications/[id]/preview.tsx b/apps/ui/pages/applications/[id]/preview.tsx
index 1f48c188e2..c5efa2548d 100644
--- a/apps/ui/pages/applications/[id]/preview.tsx
+++ b/apps/ui/pages/applications/[id]/preview.tsx
@@ -108,7 +108,8 @@ function Preview(props: PropsNarrowed): JSX.Element {
             id="submit"
             type="submit"
             disabled={!acceptTermsOfUse}
-            isLoading={isMutationLoading}
+            // FIXME
+            // isLoading={isMutationLoading}
           >
             {t("common:submit")}
           </Button>
diff --git a/apps/ui/pages/recurring/[id]/index.tsx b/apps/ui/pages/recurring/[id]/index.tsx
index 4828b9b2ac..acef412c11 100644
--- a/apps/ui/pages/recurring/[id]/index.tsx
+++ b/apps/ui/pages/recurring/[id]/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
 import type { GetServerSidePropsContext } from "next";
-import { Notification } from "hds-react";
+import { Notification, NotificationSize } from "hds-react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { H1 } from "common/src/common/typography";
 import {
@@ -104,7 +104,7 @@ function SeasonalSearch({
   return (
     <>
       {error ? (
-        <Notification size="small" type="alert">
+        <Notification size={NotificationSize.Small} type="alert">
           {t("searchResultList:error")}
         </Notification>
       ) : null}
diff --git a/apps/ui/pages/reservation-unit/[id].tsx b/apps/ui/pages/reservation-unit/[id].tsx
index cfb9431fe4..c97a1dbaa6 100644
--- a/apps/ui/pages/reservation-unit/[id].tsx
+++ b/apps/ui/pages/reservation-unit/[id].tsx
@@ -291,6 +291,7 @@ function SubmitFragment(
     buttonText: string;
   }>
 ) {
+  const { isSubmitting } = props.reservationForm.formState;
   return (
     <LoginFragment
       isActionDisabled={!props.focusSlot?.isReservable}
@@ -298,10 +299,11 @@ function SubmitFragment(
       actionCallback={props.actionCallback}
       componentIfAuthenticated={
         <SubmitButton
-          disabled={!props.focusSlot?.isReservable}
+          disabled={!props.focusSlot?.isReservable || isSubmitting}
           type="submit"
-          isLoading={props.reservationForm.formState.isSubmitting}
-          loadingText={props.loadingText}
+          // FIXME
+          // isLoading={props.reservationForm.formState.isSubmitting}
+          // loadingText={props.loadingText}
           data-testid="quick-reservation__button--submit"
         >
           {props.buttonText}
diff --git a/apps/ui/pages/reservations/[id]/confirmation.tsx b/apps/ui/pages/reservations/[id]/confirmation.tsx
index 7c88730c9a..d2ff07be37 100644
--- a/apps/ui/pages/reservations/[id]/confirmation.tsx
+++ b/apps/ui/pages/reservations/[id]/confirmation.tsx
@@ -19,7 +19,7 @@ import {
   getReservationUnitPath,
   reservationsPath,
 } from "@/modules/urls";
-import { Button, IconCalendar, IconLinkExternal } from "hds-react";
+import { Button, ButtonVariant, IconCalendar, IconLinkExternal } from "hds-react";
 import styled from "styled-components";
 import { H1 } from "common/src/common/typography";
 import { ButtonLikeExternalLink } from "@/components/common/ButtonLikeLink";
@@ -144,8 +144,8 @@ function Actions({
           onClick={() =>
             window.open(`${order.receiptUrl}&lang=${i18n.language}`, "_blank")
           }
-          variant="secondary"
-          iconRight={<IconLinkExternal aria-hidden />}
+          variant={ButtonVariant.Secondary}
+          iconEnd={<IconLinkExternal aria-hidden="true" />}
         >
           {t("reservations:downloadReceipt")}
         </Button>
diff --git a/apps/ui/pages/search/index.tsx b/apps/ui/pages/search/index.tsx
index 2225101881..9bef174dff 100644
--- a/apps/ui/pages/search/index.tsx
+++ b/apps/ui/pages/search/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { useTranslation } from "next-i18next";
 import type { GetServerSidePropsContext } from "next";
-import { Notification } from "hds-react";
+import { Notification, NotificationSize } from "hds-react";
 import { useMedia } from "react-use";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { breakpoints } from "common/src/common/style";
@@ -83,7 +83,7 @@ function SearchSingle({
   return (
     <>
       {error ? (
-        <Notification size="small" type="alert">
+        <Notification size={NotificationSize.Small} type="alert">
           {t("searchResultList:error")}
         </Notification>
       ) : null}
diff --git a/packages/common/jest.config.cjs b/packages/common/jest.config.cjs
index ec20d7a706..7f4271ffc6 100644
--- a/packages/common/jest.config.cjs
+++ b/packages/common/jest.config.cjs
@@ -3,5 +3,6 @@
 module.exports = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
-  testEnvironment: "jest-environment-jsdom",
+  // jsdom has broken stylesheet parsing
+  testEnvironment: "@happy-dom/jest-environment", // "jest-environment-jsdom",
 }
diff --git a/packages/common/package.json b/packages/common/package.json
index ca752c1fe3..4a1277f64f 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -22,7 +22,7 @@
     "date-fns": "^4.1.0",
     "eslint-config-custom": "workspace:*",
     "focus-trap-react": "^10.2.3",
-    "hds-react": "^3.11.0",
+    "hds-react": "^4.1.0",
     "i18next": "^23.15.1",
     "lodash": "^4.17.21",
     "next": "15.0.3",
@@ -45,6 +45,7 @@
   },
   "devDependencies": {
     "@apollo/client": "^3.9.7",
+    "@happy-dom/jest-environment": "^16.5.3",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -56,8 +57,8 @@
     "@types/styled-components": "^5.1.29",
     "@vercel/style-guide": "^6.0.0",
     "chalk": "^5.3.0",
+    "happy-dom": "^16.5.3",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "mkdirp": "^3.0.1",
     "prettier": "^3.4.1",
     "stylelint": "^16.2.1",
diff --git a/packages/common/src/common/toast.tsx b/packages/common/src/common/toast.tsx
index 605f64e5ed..25a0b8813a 100644
--- a/packages/common/src/common/toast.tsx
+++ b/packages/common/src/common/toast.tsx
@@ -173,7 +173,7 @@ function ToastNotification({
       type={type}
       label={label}
       notificationAriaLabel={ariaLabel ?? label ?? text}
-      dataTestId={dataTestId}
+      data-testid={dataTestId}
     >
       {
         // toastify doesn't show the progress-bar if the toast doesn't have an autoClose duration defined
diff --git a/packages/common/src/components/ConfirmationDialog.tsx b/packages/common/src/components/ConfirmationDialog.tsx
index e50d2483a4..8ed538df98 100644
--- a/packages/common/src/components/ConfirmationDialog.tsx
+++ b/packages/common/src/components/ConfirmationDialog.tsx
@@ -1,5 +1,11 @@
 import React from "react";
-import { Button, Dialog, IconAlertCircleFill, IconInfoCircle } from "hds-react";
+import {
+  Button,
+  ButtonVariant,
+  Dialog,
+  IconAlertCircleFill,
+  IconInfoCircle,
+} from "hds-react";
 import { useTranslation } from "next-i18next";
 
 type Props = {
@@ -23,6 +29,9 @@ export function ConfirmationDialog(props: Props): JSX.Element | null {
 
   const id = props.id ?? "confirmation-modal";
 
+  const btnVariant =
+    variant === "danger" ? ButtonVariant.Danger : ButtonVariant.Primary;
+
   return (
     <Dialog
       variant={variant}
@@ -35,7 +44,7 @@ export function ConfirmationDialog(props: Props): JSX.Element | null {
       <Dialog.Header
         id={`${id}-header`}
         title={heading || t("confirm.heading")}
-        iconLeft={
+        iconStart={
           variant === "danger" ? (
             <IconAlertCircleFill color="#b01038" />
           ) : (
@@ -47,13 +56,13 @@ export function ConfirmationDialog(props: Props): JSX.Element | null {
         {content || t("confirm.text")}
       </Dialog.Content>
       <Dialog.ActionButtons>
-        <Button variant="secondary" theme="black" onClick={() => onCancel?.()}>
+        <Button variant={ButtonVariant.Secondary} onClick={() => onCancel?.()}>
           {cancelLabel || t("common.cancel")}
         </Button>
         <Button
-          variant={variant}
+          variant={btnVariant}
           onClick={() => onAccept?.()}
-          iconLeft={acceptIcon}
+          iconStart={acceptIcon}
         >
           {acceptLabel || t("common.approve")}
         </Button>
diff --git a/packages/common/src/components/Logo.tsx b/packages/common/src/components/Logo.tsx
index acd2a5ea4b..862ec0dcae 100644
--- a/packages/common/src/components/Logo.tsx
+++ b/packages/common/src/components/Logo.tsx
@@ -1,6 +1,12 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
-import { Logo as HDSLogo, logoFi, LogoProps, logoSv } from "hds-react";
+import {
+  Logo as HDSLogo,
+  logoFi,
+  LogoProps,
+  LogoSize,
+  logoSv,
+} from "hds-react";
 
 function logoSrcFromLanguage(language: string) {
   if (language === "sv") {
@@ -10,7 +16,7 @@ function logoSrcFromLanguage(language: string) {
 }
 
 export default function Logo({
-  size = "medium",
+  size = LogoSize.Medium,
   style,
 }: Pick<LogoProps, "size"> & { style?: React.CSSProperties }): JSX.Element {
   const { t, i18n } = useTranslation();
diff --git a/packages/common/src/components/StatusLabel.tsx b/packages/common/src/components/StatusLabel.tsx
index 0924cd27ba..344cf9ae36 100644
--- a/packages/common/src/components/StatusLabel.tsx
+++ b/packages/common/src/components/StatusLabel.tsx
@@ -57,7 +57,7 @@ function StatusLabel({
     <ColoredLabel
       {...rest}
       type={type === "draft" ? "neutral" : type} // HDS StatusLabel does not support "draft" type - so convert it to "neutral"
-      iconLeft={icon}
+      iconStart={icon}
       data-testid={testId}
       $type={type}
       $slim={slim}
diff --git a/packages/common/src/components/Tag.tsx b/packages/common/src/components/Tag.tsx
index cb04fdab4e..e74a665aa5 100644
--- a/packages/common/src/components/Tag.tsx
+++ b/packages/common/src/components/Tag.tsx
@@ -12,13 +12,12 @@ type TagPropsType = {
   type?: StatusLabelType;
   onClick?: () => void;
   id?: string;
-  children: React.ReactNode;
+  children: string;
 };
 
 const ColoredTag = styled(StyledTag)<{ $type: StatusLabelType }>`
-  && {
-    --tag-background: ${(props) =>
-      getStatusBackgroundColor(props.$type)} !important;
+  & {
+    --background-color: ${(props) => getStatusBackgroundColor(props.$type)};
     --tag-color: var(--color-black);
     border-width: 1px;
     border-style: solid;
diff --git a/packages/common/src/components/form/ControlledSelect.tsx b/packages/common/src/components/form/ControlledSelect.tsx
index 907e24f99d..10719da0e0 100644
--- a/packages/common/src/components/form/ControlledSelect.tsx
+++ b/packages/common/src/components/form/ControlledSelect.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Select } from "hds-react";
+import { Option, Select } from "hds-react";
 import { useTranslation } from "next-i18next";
 import {
   type Control,
@@ -8,6 +8,7 @@ import {
   useController,
   type UseControllerProps,
 } from "react-hook-form";
+import { convertOptionToHDS, filterNonNullable, toNumber } from "../../helpers";
 
 interface SelectProps<T extends FieldValues> extends UseControllerProps<T> {
   name: Path<T>;
@@ -42,7 +43,8 @@ export function ControlledSelect<T extends FieldValues>({
   style,
   className,
   clearable,
-  tooltip,
+  // ignore till HDS provides an upstream fix
+  tooltip: _,
   helper,
   multiselect,
   disabled,
@@ -53,80 +55,75 @@ export function ControlledSelect<T extends FieldValues>({
     field: { value, onChange },
   } = useController({ name, control, rules: { required, validate } });
 
-  const currentValue = multiselect
-    ? options.filter((x) => value.includes(x.value))
-    : (options.find((x) => x.value === value) ?? null);
-
-  type OptionT = (typeof options)[0];
-  const handleChange = (selection?: OptionT | OptionT[]) => {
+  const handleChange = (selection: Option[]) => {
     if (!clearable && selection == null) {
       return;
     }
     if (multiselect && Array.isArray(selection)) {
-      const v = selection.map((x) => x.value);
+      const v = filterNonNullable(
+        selection
+          .map((x) => x.value)
+          .map((x) => {
+            if (typeof options[0].value === "number") {
+              return toNumber(x);
+            }
+            return x;
+          })
+      );
       onChange(v);
       afterChange?.(v);
     } else if (Array.isArray(selection)) {
-      onChange(selection[0]?.value);
-      afterChange?.(selection[0]?.value);
+      const v =
+        typeof options[0].value === "number"
+          ? toNumber(selection[0]?.value)
+          : selection[0]?.value;
+      if (v != null) {
+        onChange(v);
+        afterChange?.(v);
+      }
     } else {
-      onChange(selection?.value);
-      afterChange?.(selection?.value);
+      throw new Error("Invalid selection");
     }
   };
 
-  // Type check mess because we can switch between multislect and single select
-  // might be better to split them into separate components
-  if (multiselect) {
-    if (!Array.isArray(currentValue)) {
-      throw new Error("Multiselect requires an array value");
+  function toHDSValue(
+    opts: Array<{ label: string; value: string | number }>,
+    val: string | number | Array<string | number> | undefined
+  ): Partial<Option>[] {
+    if (val == null) {
+      return [];
     }
-    return (
-      <Select<OptionT>
-        id={name}
-        style={style}
-        className={className}
-        clearable={clearable}
-        value={currentValue ?? []}
-        options={options}
-        label={label}
-        required={required}
-        onChange={handleChange}
-        clearButtonAriaLabel={t("common:clear")}
-        selectedItemRemoveButtonAriaLabel={t("common:remove")}
-        placeholder={placeholder ?? t("common:select")}
-        invalid={Boolean(error)}
-        error={error}
-        tooltipText={tooltip}
-        helper={helper}
-        multiselect
-        disabled={disabled ?? options.length === 0}
-      />
-    );
-  }
-
-  if (Array.isArray(currentValue)) {
-    throw new Error("Single select requires a single value");
+    if (Array.isArray(val)) {
+      const keyVals = filterNonNullable(
+        val.map((v) => opts.find((o) => o.value === v))
+      );
+      return keyVals.map(convertOptionToHDS);
+    }
+    return opts.filter((o) => o.value === val).map(convertOptionToHDS);
   }
 
   return (
-    <Select<OptionT>
-      id={name}
+    <Select
       style={style}
       className={className}
-      clearable={clearable}
-      value={currentValue}
-      options={options}
-      label={label}
+      clearable={clearable ?? false}
       required={required}
+      multiSelect={multiselect}
+      noTags
+      texts={{
+        label,
+        placeholder: placeholder ?? t("common:select"),
+        error,
+        assistive: helper,
+        // TODO needs a custom implementation for tooltip
+        // tooltipText: tooltip,
+        // clearButtonAriaLabel={t("common:clear")}
+        // selectedItemRemoveButtonAriaLabel={t("common:remove")}
+      }}
+      value={toHDSValue(options, value)}
+      options={options.map(convertOptionToHDS)}
       onChange={handleChange}
-      clearButtonAriaLabel={t("common:clear")}
-      selectedItemRemoveButtonAriaLabel={t("common:remove")}
-      placeholder={placeholder ?? t("common:select")}
       invalid={Boolean(error)}
-      error={error}
-      tooltipText={tooltip}
-      helper={helper}
       disabled={disabled ?? options.length === 0}
     />
   );
diff --git a/packages/common/src/components/form/TimeRangePicker.tsx b/packages/common/src/components/form/TimeRangePicker.tsx
index f821f83e39..cc8d37efab 100644
--- a/packages/common/src/components/form/TimeRangePicker.tsx
+++ b/packages/common/src/components/form/TimeRangePicker.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
-import { IconAlertCircleFill, Select } from "hds-react";
+import { IconAlertCircleFill, OptionInProps, Select } from "hds-react";
 import {
   type FieldValues,
   Path,
@@ -29,11 +29,7 @@ interface PopulateTimesProps {
   intervalMinutes?: number;
 }
 
-type OptionType = {
-  label: string;
-  value: number;
-};
-const StyledSelect = styled(Select<OptionType>)`
+const StyledSelect = styled(Select)`
   button {
     display: grid;
     text-align: left;
@@ -51,6 +47,34 @@ const StartBeforeEndError = styled.div`
   display: flex;
 `;
 
+function populateTimes(
+  populateTimesProps?: PopulateTimesProps
+): OptionInProps[] {
+  const beginHour = populateTimesProps?.beginHour ?? 0;
+  const endHour = populateTimesProps?.endHour ?? 23.98;
+  const interval = populateTimesProps?.intervalMinutes ?? 30;
+  const times: OptionInProps[] = [];
+  let hour = beginHour ?? 0;
+  let minute = beginHour % 1 ? (beginHour % 1) * 60 : 0;
+
+  while (hour < endHour) {
+    times.push({
+      label: `${hour.toString().padStart(2, "0")}:${minute
+        .toString()
+        .padStart(2, "0")}`,
+      value: (hour + minute / 60).toString(),
+    });
+    minute += interval;
+    // Reset the minute counter, and increment the hour counter if necessary
+    if (minute >= 60) {
+      minute = 0;
+      hour += 1;
+    }
+  }
+  // we need to add the minute times to the beginning of the duration options
+  return times;
+}
+
 /*
  *  @brief A component for selecting a time range, checks for whether the end time is before the begin time
  *  @param {Control} control - the parent form's `control` object (required)
@@ -87,37 +111,10 @@ export function TimeRangePicker<T extends FieldValues>({
   // Return the option with the given value as label
   const getSelectedOption = (
     optionValue: string | null,
-    optionList: OptionType[]
-  ): OptionType | null => {
+    optionList: OptionInProps[]
+  ): OptionInProps | null => {
     return optionList.find((o) => o.label === optionValue) ?? null;
   };
-  const populateTimes = (
-    populateTimesProps?: PopulateTimesProps
-  ): OptionType[] => {
-    const beginHour = populateTimesProps?.beginHour ?? 0;
-    const endHour = populateTimesProps?.endHour ?? 23.98;
-    const interval = populateTimesProps?.intervalMinutes ?? 30;
-    const times: OptionType[] = [];
-    let hour = beginHour ?? 0;
-    let minute = beginHour % 1 ? (beginHour % 1) * 60 : 0;
-
-    while (hour < endHour) {
-      times.push({
-        label: `${hour.toString().padStart(2, "0")}:${minute
-          .toString()
-          .padStart(2, "0")}`,
-        value: hour + minute / 60,
-      });
-      minute += interval;
-      // Reset the minute counter, and increment the hour counter if necessary
-      if (minute >= 60) {
-        minute = 0;
-        hour += 1;
-      }
-    }
-    // we need to add the minute times to the beginning of the duration options
-    return times;
-  };
 
   const populatedTimeOptions = populateTimes();
   const beginValue = getSelectedOption(
@@ -137,30 +134,46 @@ export function TimeRangePicker<T extends FieldValues>({
     <>
       <StyledSelect
         {...removeRefParam(beginField)}
-        label={labels?.begin ?? t("common:beginLabel")}
+        texts={{
+          label: labels?.begin ?? t("common:beginLabel"),
+          placeholder: placeholders?.begin,
+          error: beginFieldState.error
+            ? beginFieldState.error.message
+            : undefined,
+        }}
         options={populatedTimeOptions}
-        placeholder={placeholders?.begin}
         required={required?.begin}
-        error={beginFieldState.error && beginFieldState.error.message}
         clearable={clearable?.begin}
         invalid={endTimeIsBeforeStartTime || beginFieldState.invalid}
-        value={getSelectedOption(beginField.value, populatedTimeOptions)}
-        onChange={(e: OptionType) => {
+        value={getSelectedOption(beginField.value, populatedTimeOptions)?.value}
+        onChange={(opts) => {
+          const e = opts.find((o) => o.selected);
           beginField.onChange(e != null ? e.label : null);
+          return {
+            invalid: false,
+          };
         }}
       />
       <StyledSelect
         {...removeRefParam(endField)}
-        label={labels?.end ?? t("common:endLabel")}
         options={populatedTimeOptions}
-        placeholder={placeholders?.end}
+        texts={{
+          label: labels?.end ?? t("common:endLabel"),
+          placeholder: placeholders?.end,
+          error: endFieldState.error ? endFieldState.error.message : undefined,
+          // TODO should pass the current language key
+          // language: 'en',
+        }}
         required={required?.end}
-        error={endFieldState.error && endFieldState.error.message}
         clearable={clearable?.end}
         invalid={endTimeIsBeforeStartTime || endFieldState.invalid}
-        value={getSelectedOption(endField.value, populatedTimeOptions)}
-        onChange={(e: OptionType) => {
+        value={getSelectedOption(endField.value, populatedTimeOptions)?.value}
+        onChange={(opts) => {
+          const e = opts.find((o) => o.selected);
           endField.onChange(e != null ? e.label : null);
+          return {
+            invalid: false,
+          };
         }}
       />
       {!!endTimeIsBeforeStartTime && (
diff --git a/packages/common/src/helpers.ts b/packages/common/src/helpers.ts
index 9489f011bc..0eeed55828 100644
--- a/packages/common/src/helpers.ts
+++ b/packages/common/src/helpers.ts
@@ -5,6 +5,7 @@ import {
   type Maybe,
 } from "../gql/gql-types";
 import { pixel } from "./common/style";
+import { OptionInProps } from "hds-react";
 
 export function filterNonNullable<T>(
   arr: Maybe<Maybe<T>[]> | undefined
@@ -257,3 +258,13 @@ export function constructUrl(basePath: string, page: string): string {
 export function ignoreMaybeArray<T>(value: T | T[]): T {
   return Array.isArray(value) ? value[0] : value;
 }
+
+export function convertOptionToHDS(option: {
+  label: string;
+  value: string | number;
+}): OptionInProps {
+  return {
+    label: option.label,
+    value: option.value.toString(),
+  };
+}
diff --git a/packages/common/src/reservation-form/ReservationFormField.tsx b/packages/common/src/reservation-form/ReservationFormField.tsx
index 42f9ed7f96..94cc26a147 100644
--- a/packages/common/src/reservation-form/ReservationFormField.tsx
+++ b/packages/common/src/reservation-form/ReservationFormField.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, NumberInput, Select, TextArea, TextInput } from "hds-react";
+import { Checkbox, NumberInput, TextArea, TextInput } from "hds-react";
 import get from "lodash/get";
 import React, { useMemo } from "react";
 import {
@@ -14,7 +14,7 @@ import { CustomerTypeChoice } from "../../gql/gql-types";
 import { Inputs, Reservation } from "./types";
 import { CheckboxWrapper } from "./components";
 import { OptionType } from "../../types/common";
-import { removeRefParam } from "./util";
+import { ControlledSelect } from "../components/form";
 
 type Props = {
   field: keyof Inputs;
@@ -48,7 +48,7 @@ const Subheading = styled(Strongish)`
   margin-bottom: var(--spacing-s);
 `;
 
-const StyledSelect = styled(Select)<{ $isWide?: boolean }>`
+const StyledControlledSelect = styled(ControlledSelect)<{ $isWide?: boolean }>`
   ${({ $isWide }) => $isWide && "grid-column: 1 / -1"};
 `;
 
@@ -276,33 +276,22 @@ const ReservationFormField = ({
     message: "email",
   };
 
-  if (isSelectField)
+  if (isSelectField) {
     return (
-      <Controller
+      <StyledControlledSelect
         name={field}
+        label={label}
         control={control}
-        key={field}
-        rules={{ required }}
-        render={({ field: formField }) => (
-          <StyledSelect
-            label={label}
-            id={field}
-            options={options[field]}
-            {...removeRefParam(formField)}
-            value={
-              typeof formField.value === "object"
-                ? formField.value
-                : options[field].find((n) => n.value === defaultValue) || null
-            }
-            error={errorText}
-            required={required}
-            invalid={!!error}
-            $isWide={isWideRow}
-          />
-        )}
+        required={required}
+        options={options[field]}
+        error={errorText}
+        placeholder={t("common:select")}
+        afterChange={() => trigger(field)}
+        $isWide={isWideRow}
       />
     );
-  if (isNumField)
+  }
+  if (isNumField) {
     return (
       <NumberInput
         label={label}
@@ -328,7 +317,8 @@ const ReservationFormField = ({
         }}
       />
     );
-  if (isTextArea)
+  }
+  if (isTextArea) {
     return (
       <StyledTextArea
         label={label}
@@ -353,6 +343,7 @@ const ReservationFormField = ({
         $height="119px"
       />
     );
+  }
 
   switch (field) {
     case "applyingForFreeOfCharge":
diff --git a/packages/common/src/tags.tsx b/packages/common/src/tags.tsx
index 134647e5d6..1c1afd766c 100644
--- a/packages/common/src/tags.tsx
+++ b/packages/common/src/tags.tsx
@@ -35,11 +35,8 @@ export const StyledTag = styled(Tag)`
   }
 `;
 
-export const ResetButton = styled(StyledTag).attrs({
-  theme: {
-    "--tag-background": "transparent",
-  },
-})`
+export const ResetButton = styled(StyledTag)`
+  --tag-background: transparent;
   border: 1px var(--color-black-80) solid;
   &:hover {
     background: var(--color-black-10);
diff --git a/packages/common/styles/global.scss b/packages/common/styles/global.scss
index 69e73e47f7..c27648aa66 100644
--- a/packages/common/styles/global.scss
+++ b/packages/common/styles/global.scss
@@ -32,7 +32,7 @@ strong {
  ****************************************************/
 
 /* HDS secndary button to use black theming */
-[class*="button_hds-button--secondary"]:not(:disabled) {
+[class*="Button-module_secondary"]:not(:disabled) {
   --font-family: var(--font-medium);
   --color: var(--color-black);
   --color-hover: var(--color-black);
@@ -46,10 +46,11 @@ strong {
   --border-color-hover: var(--border-color);
   --border-color-focus: var(--border-color);
   --border-color-hover-focus: var(--border-color);
+}
 
-  font-family: var(--font-family);
-  color: var(--color);
-  border-color: var(--color-black);
+/* Calendar buttons to use black theming */
+[class*="DatePicker-module_hds-datepicker__"] [class*="Button-module_supplementary__"] {
+  --color: var(--color-black);
 }
 
 /****************************************************
diff --git a/packages/common/types/common.ts b/packages/common/types/common.ts
index 8f04ad58e5..9d70999c42 100644
--- a/packages/common/types/common.ts
+++ b/packages/common/types/common.ts
@@ -15,5 +15,5 @@ export type ApplicationEventSchedulePriority = number;
 // @deprecated used by MetaFields
 export type OptionType = {
   label: string;
-  value?: number | string;
+  value: number | string;
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 64eba8b3c4..d9caf86fca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     devDependencies:
       '@graphql-codegen/cli':
         specifier: ^5.0.2
-        version: 5.0.2(@parcel/watcher@2.5.0)(@types/node@22.10.1)(graphql@16.9.0)(typescript@5.6.3)
+        version: 5.0.2(@parcel/watcher@2.5.0)(@types/node@22.10.5)(graphql@16.9.0)(typescript@5.6.3)
       '@graphql-codegen/schema-ast':
         specifier: ^4.1.0
         version: 4.1.0(graphql@16.9.0)
@@ -28,7 +28,7 @@ importers:
         version: 2.5.0
       graphql-config:
         specifier: ^5.1.0
-        version: 5.1.2(@types/node@22.10.1)(graphql@16.9.0)(typescript@5.6.3)
+        version: 5.1.2(@types/node@22.10.5)(graphql@16.9.0)(typescript@5.6.3)
       npkill:
         specifier: ^0.12.2
         version: 0.12.2
@@ -78,11 +78,11 @@ importers:
         specifier: ^16.9.0
         version: 16.9.0
       hds-core:
-        specifier: ^3.11.0
-        version: 3.11.0
+        specifier: ^4.1.0
+        version: 4.1.0
       hds-react:
-        specifier: ^3.11.0
-        version: 3.11.0(@types/react@18.2.7)(eslint@8.57.1)(graphql-ws@5.16.0(graphql@16.9.0))(postcss@8.4.45)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
+        specifier: ^4.1.0
+        version: 4.1.0(@types/react@18.2.7)(eslint@8.57.1)(graphql-ws@5.16.0(graphql@16.9.0))(postcss@8.4.45)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
       i18next:
         specifier: ^23.15.1
         version: 23.15.1
@@ -144,6 +144,9 @@ importers:
         specifier: ^3.23.8
         version: 3.23.8
     devDependencies:
+      '@happy-dom/jest-environment':
+        specifier: ^16.5.3
+        version: 16.5.3
       '@svgr/webpack':
         specifier: ^8.1.0
         version: 8.1.0(typescript@5.6.3)
@@ -186,15 +189,15 @@ importers:
       '@vercel/style-guide':
         specifier: ^6.0.0
         version: 6.0.0(@next/eslint-plugin-next@15.0.3)(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.1))(prettier@3.4.1)(typescript@5.6.3)
+      happy-dom:
+        specifier: ^16.5.3
+        version: 16.5.3
       jest:
         specifier: ^29.7.0
         version: 29.7.0(@types/node@22.10.1)
       jest-axe:
         specifier: ^8.0.0
         version: 8.0.0
-      jest-environment-jsdom:
-        specifier: ^29.7.0
-        version: 29.7.0
       lint-staged:
         specifier: ^15.2.10
         version: 15.2.10
@@ -253,14 +256,14 @@ importers:
         specifier: ^16.9.0
         version: 16.9.0
       hds-core:
-        specifier: ^3.11.0
-        version: 3.11.0
+        specifier: ^4.1.0
+        version: 4.1.0
       hds-design-tokens:
-        specifier: ^3.11.0
-        version: 3.11.0
+        specifier: ^4.1.0
+        version: 4.1.0
       hds-react:
-        specifier: ^3.11.0
-        version: 3.11.0(@types/react@18.2.7)(eslint@8.57.1)(graphql-ws@5.16.0(graphql@16.9.0))(postcss@8.4.45)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
+        specifier: ^4.1.0
+        version: 4.1.0(@types/react@18.2.7)(eslint@8.57.1)(graphql-ws@5.16.0(graphql@16.9.0))(postcss@8.4.45)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
       i18next:
         specifier: ^23.15.1
         version: 23.15.1
@@ -319,6 +322,9 @@ importers:
         specifier: ^3.23.8
         version: 3.23.8
     devDependencies:
+      '@happy-dom/jest-environment':
+        specifier: ^16.5.3
+        version: 16.5.3
       '@testing-library/jest-dom':
         specifier: ^6.5.0
         version: 6.5.0
@@ -361,15 +367,15 @@ importers:
       axe-core:
         specifier: ^4.10.0
         version: 4.10.0
+      happy-dom:
+        specifier: ^16.5.3
+        version: 16.5.3
       jest:
         specifier: ^29.7.0
         version: 29.7.0(@types/node@22.10.1)
       jest-axe:
         specifier: ^8.0.0
         version: 8.0.0
-      jest-environment-jsdom:
-        specifier: ^29.7.0
-        version: 29.7.0
       postcss-styled-syntax:
         specifier: ^0.6.4
         version: 0.6.4(postcss@8.4.45)
@@ -410,8 +416,8 @@ importers:
         specifier: ^10.2.3
         version: 10.2.3(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       hds-react:
-        specifier: ^3.11.0
-        version: 3.11.0(@types/react@18.2.7)(eslint@8.57.1)(graphql-ws@5.16.0(graphql@16.9.0))(postcss@8.4.45)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
+        specifier: ^4.1.0
+        version: 4.1.0(@types/react@18.2.7)(eslint@8.57.1)(graphql-ws@5.16.0(graphql@16.9.0))(postcss@8.4.45)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
       i18next:
         specifier: ^23.15.1
         version: 23.15.1
@@ -455,6 +461,9 @@ importers:
       '@apollo/client':
         specifier: ^3.9.7
         version: 3.9.7(@types/react@18.2.7)(graphql-ws@5.16.0(graphql@16.9.0))(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@happy-dom/jest-environment':
+        specifier: ^16.5.3
+        version: 16.5.3
       '@testing-library/jest-dom':
         specifier: ^6.5.0
         version: 6.5.0
@@ -488,12 +497,12 @@ importers:
       chalk:
         specifier: ^5.3.0
         version: 5.3.0
+      happy-dom:
+        specifier: ^16.5.3
+        version: 16.5.3
       jest:
         specifier: ^29.7.0
         version: 29.7.0(@types/node@22.10.1)
-      jest-environment-jsdom:
-        specifier: ^29.7.0
-        version: 29.7.0
       mkdirp:
         specifier: ^3.0.1
         version: 3.0.1
@@ -523,10 +532,10 @@ importers:
     devDependencies:
       '@graphql-eslint/eslint-plugin':
         specifier: ^3.20.1
-        version: 3.20.1(@babel/core@7.25.2)(@types/node@22.10.1)(graphql@16.9.0)
+        version: 3.20.1(@babel/core@7.25.2)(@types/node@22.10.5)(graphql@16.9.0)
       '@vercel/style-guide':
         specifier: ^6.0.0
-        version: 6.0.0(@next/eslint-plugin-next@14.2.15)(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.1))(prettier@3.4.1)(typescript@5.6.3)
+        version: 6.0.0(@next/eslint-plugin-next@14.2.15)(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.5))(prettier@3.4.1)(typescript@5.6.3)
       eslint:
         specifier: ^8.57.1
         version: 8.57.1
@@ -557,13 +566,13 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@apollo/client@3.11.8':
-    resolution: {integrity: sha512-CgG1wbtMjsV2pRGe/eYITmV5B8lXUCYljB2gB/6jWTFQcrvirUVvKg7qtFdjYkQSFbIffU1IDyxgeaN81eTjbA==}
+  '@apollo/client@3.12.5':
+    resolution: {integrity: sha512-lOE2TlHx1el4rHs8vaTE4IroyIO9/PD2w598YYiDahF0XSMDdsXMrTpOVh+FuQ6tZ+DXT+hsaMlilZqcFRgu+A==}
     peerDependencies:
       graphql: ^15.0.0 || ^16.0.0
       graphql-ws: ^5.5.5
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc
       subscriptions-transport-ws: ^0.9.0 || ^0.11.0
     peerDependenciesMeta:
       graphql-ws:
@@ -1706,6 +1715,10 @@ packages:
     peerDependencies:
       graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
 
+  '@happy-dom/jest-environment@16.5.3':
+    resolution: {integrity: sha512-64c2zF87K3w7TYTqOncOANZoR3fpnCY6fQ/zTkILzFS2OoPScvOiX93CP+N47IxH7GZ1Qc9iNAiiS8xDf55rMQ==}
+    engines: {node: '>=18.0.0'}
+
   '@hookform/resolvers@2.9.11':
     resolution: {integrity: sha512-bA3aZ79UgcHj7tFV7RlgThzwSSHZgvfbt2wprldRkYBcMopdMvHyO17Wwp/twcJasNFischFfS7oz8Katz8DdQ==}
     peerDependencies:
@@ -1916,6 +1929,10 @@ packages:
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    engines: {node: '>=6.0.0'}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -2322,21 +2339,21 @@ packages:
   '@reach/observe-rect@1.2.0':
     resolution: {integrity: sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==}
 
-  '@react-aria/interactions@3.22.4':
-    resolution: {integrity: sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==}
+  '@react-aria/interactions@3.22.5':
+    resolution: {integrity: sha512-kMwiAD9E0TQp+XNnOs13yVJghiy8ET8L0cbkeuTgNI96sOAp/63EJ1FSrDf17iD8sdjt41LafwX/dKXW9nCcLQ==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-aria/ssr@3.9.6':
-    resolution: {integrity: sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==}
+  '@react-aria/ssr@3.9.7':
+    resolution: {integrity: sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==}
     engines: {node: '>= 12'}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-aria/utils@3.25.3':
-    resolution: {integrity: sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==}
+  '@react-aria/utils@3.26.0':
+    resolution: {integrity: sha512-LkZouGSjjQ0rEqo4XJosS4L3YC/zzQkfRM3KoqK6fUOmUJ9t0jQ09WjiF+uOoG9u+p30AVg3TrZRUWmoTS+koQ==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
   '@react-aria/visually-hidden@3.8.16':
     resolution: {integrity: sha512-3zThVIzEprez4A/GajOut6/JQ4WCu2ROHGZ1xH1+2GFjBJQaTfPBIjg6UIwaT7sgHRQIik8QidogLqXHbp81yA==}
@@ -2370,15 +2387,15 @@ packages:
       react: ^16.8.0  || ^17.0.0
       react-dom: ^16.8.0  || ^17.0.0
 
-  '@react-stately/utils@3.10.4':
-    resolution: {integrity: sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==}
+  '@react-stately/utils@3.10.5':
+    resolution: {integrity: sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  '@react-types/shared@3.25.0':
-    resolution: {integrity: sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==}
+  '@react-types/shared@3.26.0':
+    resolution: {integrity: sha512-6FuPqvhmjjlpEDLTiYx29IJCbCNWPlsyO+ZUmCUXzhUv2ttShOXfw8CmeHWHftT/b2KweAWuzqSlfeXPR76jpw==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
   '@remix-run/router@1.19.2':
     resolution: {integrity: sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==}
@@ -2642,6 +2659,9 @@ packages:
   '@swc/helpers@0.5.13':
     resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
 
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -2671,10 +2691,6 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
-  '@tootallnate/once@2.0.0':
-    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
-    engines: {node: '>= 10'}
-
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -2745,9 +2761,6 @@ packages:
   '@types/js-yaml@4.0.9':
     resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
 
-  '@types/jsdom@20.0.1':
-    resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
-
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -2763,6 +2776,9 @@ packages:
   '@types/node@22.10.1':
     resolution: {integrity: sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==}
 
+  '@types/node@22.10.5':
+    resolution: {integrity: sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==}
+
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
@@ -2814,9 +2830,6 @@ packages:
   '@types/styled-components@5.1.34':
     resolution: {integrity: sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==}
 
-  '@types/tough-cookie@4.0.5':
-    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
-
   '@types/warning@3.0.3':
     resolution: {integrity: sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==}
 
@@ -3057,13 +3070,6 @@ packages:
   '@xtuc/long@4.2.2':
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
 
-  abab@2.0.6:
-    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
-    deprecated: Use your platform's native atob() and btoa() methods instead
-
-  acorn-globals@7.0.1:
-    resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
-
   acorn-import-assertions@1.9.0:
     resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
     deprecated: package has been renamed to acorn-import-attributes
@@ -3111,11 +3117,24 @@ packages:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
     engines: {node: '>=8'}
 
+  ajv-formats@2.1.1:
+    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
   ajv-keywords@3.5.2:
     resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
     peerDependencies:
       ajv: ^6.9.1
 
+  ajv-keywords@5.1.0:
+    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
+    peerDependencies:
+      ajv: ^8.8.2
+
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
@@ -3708,26 +3727,12 @@ packages:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
 
-  cssom@0.3.8:
-    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
-
-  cssom@0.5.0:
-    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
-
-  cssstyle@2.3.0:
-    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
-    engines: {node: '>=8'}
-
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
   damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
-  data-urls@3.0.2:
-    resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
-    engines: {node: '>=12'}
-
   data-view-buffer@1.0.1:
     resolution: {integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==}
     engines: {node: '>= 0.4'}
@@ -3780,9 +3785,6 @@ packages:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
     engines: {node: '>=0.10.0'}
 
-  decimal.js@10.4.3:
-    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
-
   decode-uri-component@0.4.1:
     resolution: {integrity: sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==}
     engines: {node: '>=14.16'}
@@ -3892,11 +3894,6 @@ packages:
   domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
-  domexception@4.0.0:
-    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
-    engines: {node: '>=12'}
-    deprecated: Use your platform's native DOMException instead
-
   domhandler@5.0.3:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
@@ -3958,6 +3955,10 @@ packages:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
 
+  enhanced-resolve@5.18.0:
+    resolution: {integrity: sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==}
+    engines: {node: '>=10.13.0'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -3995,8 +3996,8 @@ packages:
     resolution: {integrity: sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==}
     engines: {node: '>= 0.4'}
 
-  es-module-lexer@1.5.4:
-    resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
+  es-module-lexer@1.6.0:
+    resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==}
 
   es-object-atoms@1.0.0:
     resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
@@ -4029,11 +4030,6 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  escodegen@2.1.0:
-    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
-    engines: {node: '>=6.0'}
-    hasBin: true
-
   eslint-config-prettier@9.1.0:
     resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==}
     hasBin: true
@@ -4611,6 +4607,10 @@ packages:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
 
+  happy-dom@16.5.3:
+    resolution: {integrity: sha512-7zGnyROZuntn+5X84MQ535qiQ3ccm45uHl+Q7EFAcPP0NhkbrfPitqprz0GgszX91/QqsZKQ7nTYkyObCTDUjg==}
+    engines: {node: '>=18.0.0'}
+
   has-ansi@2.0.0:
     resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
     engines: {node: '>=0.10.0'}
@@ -4645,14 +4645,14 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  hds-core@3.11.0:
-    resolution: {integrity: sha512-405+8VHW4N3/y5ESWGOv6vUIbgp/DCYjQVpdVLsWg6RowrUwNk9VvU6N2ZpEP8HM3ujJYu/bcIQ6zzwvAOFMCA==}
+  hds-core@4.1.0:
+    resolution: {integrity: sha512-GZ8NnzxrZ7pB75G0hnsc/IjIDLnxpp2oKJTjZ+hFJsesWytDTVG0l+hYnQeg3wWSFALHDq5kA0unitWVAzFOEQ==}
 
-  hds-design-tokens@3.11.0:
-    resolution: {integrity: sha512-A44gjN+TDpQQnCnw/AflCHIrqBZP8FYUW+HlPPUx4SCe4ISnEWVvxrEFWvzfOXSmO+9MDSXdNKS4ItEwluJUMQ==}
+  hds-design-tokens@4.1.0:
+    resolution: {integrity: sha512-+KlNPW/Bf1tmdkDqIW4DgOQsWDvtodQC/hDsyjAP7NOnS12fV4o8K+Sr5wrJbIBjMWxsha2xc5ipvGe30tRcEg==}
 
-  hds-react@3.11.0:
-    resolution: {integrity: sha512-n3JiEX1K9xWqwEi7VvZvDj4+wnpMNCZX9mmOdsK8h9ZYGHS49vPnvYLXs3hlX/Ljw1XGsgX3vtQlOO69C1iu2g==}
+  hds-react@4.1.0:
+    resolution: {integrity: sha512-U1bliIqY3FajDt/PBOvdvceBu61KbxcT00yvny5d28840/xKJrduwG/IVSipq6QZau+d3bKD9vtb4/bLcWV3sQ==}
     peerDependencies:
       postcss: ^8.4.21
       react: ^16.8.0 || ^17
@@ -4667,10 +4667,6 @@ packages:
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
-  html-encoding-sniffer@3.0.0:
-    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
-    engines: {node: '>=12'}
-
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
@@ -4684,10 +4680,6 @@ packages:
   htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
 
-  http-proxy-agent@5.0.0:
-    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
-    engines: {node: '>= 6'}
-
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -4721,10 +4713,6 @@ packages:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
 
-  iconv-lite@0.6.3:
-    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
-    engines: {node: '>=0.10.0'}
-
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -4912,9 +4900,6 @@ packages:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
 
-  is-potential-custom-element-name@1.0.1:
-    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
-
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
@@ -5076,15 +5061,6 @@ packages:
     resolution: {integrity: sha512-gns+Er14+ZrEoC5fhOfYCY1LOHHr0TI+rQUHZS8Ttw2l7gl+80eHc/gFf2Ktkw0+SIACDTeWvpFcv3B04VembQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-environment-jsdom@29.7.0:
-    resolution: {integrity: sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      canvas: ^2.5.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-
   jest-environment-node@29.7.0:
     resolution: {integrity: sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -5208,15 +5184,6 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsdom@20.0.3:
-    resolution: {integrity: sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      canvas: ^2.5.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-
   jsesc@0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
     hasBin: true
@@ -5663,9 +5630,6 @@ packages:
   nullthrows@1.1.1:
     resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
 
-  nwsapi@2.2.12:
-    resolution: {integrity: sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==}
-
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -5737,6 +5701,9 @@ packages:
   optimism@0.18.0:
     resolution: {integrity: sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==}
 
+  optimism@0.18.1:
+    resolution: {integrity: sha512-mLXNwWPa9dgFyDqkNi54sjDyNJ9/fTI6WGBLgnXku1vdKY/jovHfZT5r+aiVeFFLOz+foPNOm5YJ4mqgld2GBQ==}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -5797,9 +5764,6 @@ packages:
   parse-srcset@1.0.2:
     resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
 
-  parse5@7.1.2:
-    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
-
   pascal-case@3.1.2:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
 
@@ -6001,9 +5965,6 @@ packages:
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
-  psl@1.9.0:
-    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
-
   punycode@1.4.1:
     resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
 
@@ -6025,9 +5986,6 @@ packages:
     resolution: {integrity: sha512-t6dqMECpCkqfyv2FfwVS1xcB6lgXW/0XZSaKdsCNGYkqMO76AFiJEg4vINzoDKcZa6MS7JX+OHIjwh06K5vczw==}
     engines: {node: '>=18'}
 
-  querystringify@2.2.0:
-    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
-
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -6287,9 +6245,6 @@ packages:
   require-relative@0.8.7:
     resolution: {integrity: sha512-AKGr4qvHiryxRb19m3PsLRGuKVAbJLUD7E6eOaHkfKhwc+vSgVOCY5xNvm9EkolBKTOf0GrQAZKLimOCz81Khg==}
 
-  requires-port@1.0.0:
-    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
-
   reselect@4.1.8:
     resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==}
 
@@ -6326,6 +6281,10 @@ packages:
     resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
     hasBin: true
 
+  response-iterator@0.2.11:
+    resolution: {integrity: sha512-5tdhcAeGMSyM0/FoxAYjoOxQZ2tRR2H/S/t6kGRXu6iiWcGY5UnZgkVANbTwBVUSGqWu0ADctmoi6lOCIF8uKQ==}
+    engines: {node: '>=0.8'}
+
   response-iterator@0.2.6:
     resolution: {integrity: sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==}
     engines: {node: '>=0.8'}
@@ -6390,10 +6349,6 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  saxes@6.0.0:
-    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
-    engines: {node: '>=v12.22.7'}
-
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -6401,6 +6356,10 @@ packages:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
 
+  schema-utils@4.3.0:
+    resolution: {integrity: sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==}
+    engines: {node: '>= 10.13.0'}
+
   screenfull@5.2.0:
     resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
     engines: {node: '>=0.10.0'}
@@ -6765,9 +6724,6 @@ packages:
     resolution: {integrity: sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==}
     engines: {node: '>=0.10'}
 
-  symbol-tree@3.2.4:
-    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
-
   synckit@0.9.1:
     resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -6783,8 +6739,8 @@ packages:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
 
-  terser-webpack-plugin@5.3.10:
-    resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==}
+  terser-webpack-plugin@5.3.11:
+    resolution: {integrity: sha512-RVCsMfuD0+cTt3EwX8hSl2Ks56EbFHWmhluwcqoPKtBnfjiT6olaq7PRIRfhyU8nnC2MrnDrBLfrD/RGE+cVXQ==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
       '@swc/core': '*'
@@ -6799,8 +6755,8 @@ packages:
       uglify-js:
         optional: true
 
-  terser@5.36.0:
-    resolution: {integrity: sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==}
+  terser@5.37.0:
+    resolution: {integrity: sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -6849,17 +6805,9 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
-  tough-cookie@4.1.4:
-    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
-    engines: {node: '>=6'}
-
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
-  tr46@3.0.0:
-    resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
-    engines: {node: '>=12'}
-
   ts-api-utils@1.3.0:
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
     engines: {node: '>=16'}
@@ -6915,6 +6863,9 @@ packages:
   tslib@2.7.0:
     resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   tsutils@3.21.0:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -7050,10 +7001,6 @@ packages:
     resolution: {integrity: sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==}
     engines: {node: '>=4'}
 
-  universalify@0.2.0:
-    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
-    engines: {node: '>= 4.0.0'}
-
   unixify@1.0.0:
     resolution: {integrity: sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg==}
     engines: {node: '>=0.10.0'}
@@ -7076,9 +7023,6 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  url-parse@1.5.10:
-    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
-
   urlpattern-polyfill@10.0.0:
     resolution: {integrity: sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==}
 
@@ -7116,10 +7060,6 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  w3c-xmlserializer@4.0.0:
-    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
-    engines: {node: '>=14'}
-
   waait@1.0.5:
     resolution: {integrity: sha512-wp+unA4CpqxvBUKHHv8D86fK4jWByHAWyhEXXVHfVUZfK+16ylpj7hjQ58Z8j9ntu8XNukRQT8Fi5qbyJ8rkyw==}
 
@@ -7172,18 +7112,10 @@ packages:
       webpack-cli:
         optional: true
 
-  whatwg-encoding@2.0.0:
-    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
-    engines: {node: '>=12'}
-
   whatwg-mimetype@3.0.0:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
 
-  whatwg-url@11.0.0:
-    resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==}
-    engines: {node: '>=12'}
-
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -7281,13 +7213,6 @@ packages:
       utf-8-validate:
         optional: true
 
-  xml-name-validator@4.0.0:
-    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
-    engines: {node: '>=12'}
-
-  xmlchars@2.2.0:
-    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
-
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
@@ -7330,8 +7255,8 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  yup@1.4.0:
-    resolution: {integrity: sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==}
+  yup@1.6.1:
+    resolution: {integrity: sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==}
 
   zen-observable-ts@1.2.5:
     resolution: {integrity: sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==}
@@ -7351,7 +7276,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@apollo/client@3.11.8(@types/react@18.2.7)(graphql-ws@5.16.0(graphql@16.9.0))(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@apollo/client@3.12.5(@types/react@18.2.7)(graphql-ws@5.16.0(graphql@16.9.0))(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@graphql-typed-document-node/core': 3.2.0(graphql@16.9.0)
       '@wry/caches': 1.0.1
@@ -7360,13 +7285,13 @@ snapshots:
       graphql: 16.9.0
       graphql-tag: 2.12.6(graphql@16.9.0)
       hoist-non-react-statics: 3.3.2
-      optimism: 0.18.0
+      optimism: 0.18.1
       prop-types: 15.8.1
       rehackt: 0.1.0(@types/react@18.2.7)(react@18.3.1)
-      response-iterator: 0.2.6
+      response-iterator: 0.2.11
       symbol-observable: 4.0.0
       ts-invariant: 0.10.3
-      tslib: 2.7.0
+      tslib: 2.8.1
       zen-observable-ts: 1.2.5
     optionalDependencies:
       graphql-ws: 5.16.0(graphql@16.9.0)
@@ -8406,7 +8331,7 @@ snapshots:
       graphql: 16.9.0
       tslib: 2.6.3
 
-  '@graphql-codegen/cli@5.0.2(@parcel/watcher@2.5.0)(@types/node@22.10.1)(graphql@16.9.0)(typescript@5.6.3)':
+  '@graphql-codegen/cli@5.0.2(@parcel/watcher@2.5.0)(@types/node@22.10.5)(graphql@16.9.0)(typescript@5.6.3)':
     dependencies:
       '@babel/generator': 7.25.6
       '@babel/template': 7.25.0
@@ -8417,12 +8342,12 @@ snapshots:
       '@graphql-tools/apollo-engine-loader': 8.0.1(graphql@16.9.0)
       '@graphql-tools/code-file-loader': 8.1.3(graphql@16.9.0)
       '@graphql-tools/git-loader': 8.0.7(graphql@16.9.0)
-      '@graphql-tools/github-loader': 8.0.1(@types/node@22.10.1)(graphql@16.9.0)
+      '@graphql-tools/github-loader': 8.0.1(@types/node@22.10.5)(graphql@16.9.0)
       '@graphql-tools/graphql-file-loader': 8.0.1(graphql@16.9.0)
       '@graphql-tools/json-file-loader': 8.0.1(graphql@16.9.0)
       '@graphql-tools/load': 8.0.2(graphql@16.9.0)
-      '@graphql-tools/prisma-loader': 8.0.4(@types/node@22.10.1)(graphql@16.9.0)
-      '@graphql-tools/url-loader': 8.0.2(@types/node@22.10.1)(graphql@16.9.0)
+      '@graphql-tools/prisma-loader': 8.0.4(@types/node@22.10.5)(graphql@16.9.0)
+      '@graphql-tools/url-loader': 8.0.2(@types/node@22.10.5)(graphql@16.9.0)
       '@graphql-tools/utils': 10.5.4(graphql@16.9.0)
       '@whatwg-node/fetch': 0.8.8
       chalk: 4.1.2
@@ -8430,7 +8355,7 @@ snapshots:
       debounce: 1.2.1
       detect-indent: 6.1.0
       graphql: 16.9.0
-      graphql-config: 5.1.2(@types/node@22.10.1)(graphql@16.9.0)(typescript@5.6.3)
+      graphql-config: 5.1.2(@types/node@22.10.5)(graphql@16.9.0)(typescript@5.6.3)
       inquirer: 8.2.6
       is-glob: 4.0.3
       jiti: 1.21.6
@@ -8615,7 +8540,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@graphql-eslint/eslint-plugin@3.20.1(@babel/core@7.25.2)(@types/node@22.10.1)(graphql@16.9.0)':
+  '@graphql-eslint/eslint-plugin@3.20.1(@babel/core@7.25.2)(@types/node@22.10.5)(graphql@16.9.0)':
     dependencies:
       '@babel/code-frame': 7.24.7
       '@graphql-tools/code-file-loader': 7.3.23(@babel/core@7.25.2)(graphql@16.9.0)
@@ -8625,7 +8550,7 @@ snapshots:
       debug: 4.3.7(supports-color@5.5.0)
       fast-glob: 3.3.2
       graphql: 16.9.0
-      graphql-config: 4.5.0(@types/node@22.10.1)(graphql@16.9.0)
+      graphql-config: 4.5.0(@types/node@22.10.5)(graphql@16.9.0)
       graphql-depth-limit: 1.1.0(graphql@16.9.0)
       lodash.lowercase: 4.3.0
       tslib: 2.7.0
@@ -8742,7 +8667,7 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@graphql-tools/executor-http@0.1.10(@types/node@22.10.1)(graphql@16.9.0)':
+  '@graphql-tools/executor-http@0.1.10(@types/node@22.10.5)(graphql@16.9.0)':
     dependencies:
       '@graphql-tools/utils': 9.2.1(graphql@16.9.0)
       '@repeaterjs/repeater': 3.0.6
@@ -8750,20 +8675,20 @@ snapshots:
       dset: 3.1.4
       extract-files: 11.0.0
       graphql: 16.9.0
-      meros: 1.3.0(@types/node@22.10.1)
+      meros: 1.3.0(@types/node@22.10.5)
       tslib: 2.7.0
       value-or-promise: 1.0.12
     transitivePeerDependencies:
       - '@types/node'
 
-  '@graphql-tools/executor-http@1.1.6(@types/node@22.10.1)(graphql@16.9.0)':
+  '@graphql-tools/executor-http@1.1.6(@types/node@22.10.5)(graphql@16.9.0)':
     dependencies:
       '@graphql-tools/utils': 10.5.4(graphql@16.9.0)
       '@repeaterjs/repeater': 3.0.6
       '@whatwg-node/fetch': 0.9.21
       extract-files: 11.0.0
       graphql: 16.9.0
-      meros: 1.3.0(@types/node@22.10.1)
+      meros: 1.3.0(@types/node@22.10.5)
       tslib: 2.7.0
       value-or-promise: 1.0.12
     transitivePeerDependencies:
@@ -8823,10 +8748,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@graphql-tools/github-loader@8.0.1(@types/node@22.10.1)(graphql@16.9.0)':
+  '@graphql-tools/github-loader@8.0.1(@types/node@22.10.5)(graphql@16.9.0)':
     dependencies:
       '@ardatan/sync-fetch': 0.0.1
-      '@graphql-tools/executor-http': 1.1.6(@types/node@22.10.1)(graphql@16.9.0)
+      '@graphql-tools/executor-http': 1.1.6(@types/node@22.10.5)(graphql@16.9.0)
       '@graphql-tools/graphql-tag-pluck': 8.3.2(graphql@16.9.0)
       '@graphql-tools/utils': 10.5.4(graphql@16.9.0)
       '@whatwg-node/fetch': 0.9.21
@@ -8950,9 +8875,9 @@ snapshots:
       graphql: 16.9.0
       tslib: 2.7.0
 
-  '@graphql-tools/prisma-loader@8.0.4(@types/node@22.10.1)(graphql@16.9.0)':
+  '@graphql-tools/prisma-loader@8.0.4(@types/node@22.10.5)(graphql@16.9.0)':
     dependencies:
-      '@graphql-tools/url-loader': 8.0.2(@types/node@22.10.1)(graphql@16.9.0)
+      '@graphql-tools/url-loader': 8.0.2(@types/node@22.10.5)(graphql@16.9.0)
       '@graphql-tools/utils': 10.5.4(graphql@16.9.0)
       '@types/js-yaml': 4.0.9
       '@whatwg-node/fetch': 0.9.21
@@ -9012,12 +8937,12 @@ snapshots:
       tslib: 2.7.0
       value-or-promise: 1.0.12
 
-  '@graphql-tools/url-loader@7.17.18(@types/node@22.10.1)(graphql@16.9.0)':
+  '@graphql-tools/url-loader@7.17.18(@types/node@22.10.5)(graphql@16.9.0)':
     dependencies:
       '@ardatan/sync-fetch': 0.0.1
       '@graphql-tools/delegate': 9.0.35(graphql@16.9.0)
       '@graphql-tools/executor-graphql-ws': 0.0.14(graphql@16.9.0)
-      '@graphql-tools/executor-http': 0.1.10(@types/node@22.10.1)(graphql@16.9.0)
+      '@graphql-tools/executor-http': 0.1.10(@types/node@22.10.5)(graphql@16.9.0)
       '@graphql-tools/executor-legacy-ws': 0.0.11(graphql@16.9.0)
       '@graphql-tools/utils': 9.2.1(graphql@16.9.0)
       '@graphql-tools/wrap': 9.4.2(graphql@16.9.0)
@@ -9034,12 +8959,12 @@ snapshots:
       - encoding
       - utf-8-validate
 
-  '@graphql-tools/url-loader@8.0.2(@types/node@22.10.1)(graphql@16.9.0)':
+  '@graphql-tools/url-loader@8.0.2(@types/node@22.10.5)(graphql@16.9.0)':
     dependencies:
       '@ardatan/sync-fetch': 0.0.1
       '@graphql-tools/delegate': 10.0.21(graphql@16.9.0)
       '@graphql-tools/executor-graphql-ws': 1.2.0(graphql@16.9.0)
-      '@graphql-tools/executor-http': 1.1.6(@types/node@22.10.1)(graphql@16.9.0)
+      '@graphql-tools/executor-http': 1.1.6(@types/node@22.10.5)(graphql@16.9.0)
       '@graphql-tools/executor-legacy-ws': 1.1.0(graphql@16.9.0)
       '@graphql-tools/utils': 10.5.4(graphql@16.9.0)
       '@graphql-tools/wrap': 10.0.5(graphql@16.9.0)
@@ -9097,6 +9022,15 @@ snapshots:
     dependencies:
       graphql: 16.9.0
 
+  '@happy-dom/jest-environment@16.5.3':
+    dependencies:
+      '@jest/environment': 29.7.0
+      '@jest/fake-timers': 29.7.0
+      '@jest/types': 29.6.3
+      happy-dom: 16.5.3
+      jest-mock: 29.7.0
+      jest-util: 29.7.0
+
   '@hookform/resolvers@2.9.11(react-hook-form@7.53.0(react@18.3.1))':
     dependencies:
       react-hook-form: 7.53.0(react@18.3.1)
@@ -9379,13 +9313,19 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/set-array@1.2.1': {}
 
   '@jridgewell/source-map@0.3.6':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
@@ -9806,34 +9746,34 @@ snapshots:
 
   '@reach/observe-rect@1.2.0': {}
 
-  '@react-aria/interactions@3.22.4(react@18.3.1)':
+  '@react-aria/interactions@3.22.5(react@18.3.1)':
     dependencies:
-      '@react-aria/ssr': 3.9.6(react@18.3.1)
-      '@react-aria/utils': 3.25.3(react@18.3.1)
-      '@react-types/shared': 3.25.0(react@18.3.1)
-      '@swc/helpers': 0.5.13
+      '@react-aria/ssr': 3.9.7(react@18.3.1)
+      '@react-aria/utils': 3.26.0(react@18.3.1)
+      '@react-types/shared': 3.26.0(react@18.3.1)
+      '@swc/helpers': 0.5.15
       react: 18.3.1
 
-  '@react-aria/ssr@3.9.6(react@18.3.1)':
+  '@react-aria/ssr@3.9.7(react@18.3.1)':
     dependencies:
-      '@swc/helpers': 0.5.13
+      '@swc/helpers': 0.5.15
       react: 18.3.1
 
-  '@react-aria/utils@3.25.3(react@18.3.1)':
+  '@react-aria/utils@3.26.0(react@18.3.1)':
     dependencies:
-      '@react-aria/ssr': 3.9.6(react@18.3.1)
-      '@react-stately/utils': 3.10.4(react@18.3.1)
-      '@react-types/shared': 3.25.0(react@18.3.1)
-      '@swc/helpers': 0.5.13
+      '@react-aria/ssr': 3.9.7(react@18.3.1)
+      '@react-stately/utils': 3.10.5(react@18.3.1)
+      '@react-types/shared': 3.26.0(react@18.3.1)
+      '@swc/helpers': 0.5.15
       clsx: 2.1.1
       react: 18.3.1
 
   '@react-aria/visually-hidden@3.8.16(react@18.3.1)':
     dependencies:
-      '@react-aria/interactions': 3.22.4(react@18.3.1)
-      '@react-aria/utils': 3.25.3(react@18.3.1)
-      '@react-types/shared': 3.25.0(react@18.3.1)
-      '@swc/helpers': 0.5.13
+      '@react-aria/interactions': 3.22.5(react@18.3.1)
+      '@react-aria/utils': 3.26.0(react@18.3.1)
+      '@react-types/shared': 3.26.0(react@18.3.1)
+      '@swc/helpers': 0.5.15
       react: 18.3.1
 
   '@react-spring/animated@9.3.2(react@18.3.1)':
@@ -9868,12 +9808,12 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@react-stately/utils@3.10.4(react@18.3.1)':
+  '@react-stately/utils@3.10.5(react@18.3.1)':
     dependencies:
-      '@swc/helpers': 0.5.13
+      '@swc/helpers': 0.5.15
       react: 18.3.1
 
-  '@react-types/shared@3.25.0(react@18.3.1)':
+  '@react-types/shared@3.26.0(react@18.3.1)':
     dependencies:
       react: 18.3.1
 
@@ -10227,6 +10167,10 @@ snapshots:
     dependencies:
       tslib: 2.7.0
 
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -10262,8 +10206,6 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.0
 
-  '@tootallnate/once@2.0.0': {}
-
   '@trysound/sax@0.2.0': {}
 
   '@types/apollo-upload-client@17.0.2(@types/react@18.2.7)(graphql-ws@5.16.0(graphql@16.9.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
@@ -10350,12 +10292,6 @@ snapshots:
 
   '@types/js-yaml@4.0.9': {}
 
-  '@types/jsdom@20.0.1':
-    dependencies:
-      '@types/node': 22.10.1
-      '@types/tough-cookie': 4.0.5
-      parse5: 7.1.2
-
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
@@ -10370,6 +10306,10 @@ snapshots:
     dependencies:
       undici-types: 6.20.0
 
+  '@types/node@22.10.5':
+    dependencies:
+      undici-types: 6.20.0
+
   '@types/normalize-package-data@2.4.4': {}
 
   '@types/pg-pool@2.0.6':
@@ -10437,8 +10377,6 @@ snapshots:
       '@types/react': 18.2.7
       csstype: 3.1.3
 
-  '@types/tough-cookie@4.0.5': {}
-
   '@types/warning@3.0.3': {}
 
   '@types/ws@8.5.12':
@@ -10650,6 +10588,41 @@ snapshots:
       - supports-color
       - vitest
 
+  '@vercel/style-guide@6.0.0(@next/eslint-plugin-next@14.2.15)(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.5))(prettier@3.4.1)(typescript@5.6.3)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/eslint-parser': 7.25.1(@babel/core@7.25.2)(eslint@8.57.1)
+      '@rushstack/eslint-patch': 1.10.4
+      '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
+      eslint-config-prettier: 9.1.0(eslint@8.57.1)
+      eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.30.0)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint@8.57.1)
+      eslint-plugin-eslint-comments: 3.2.0(eslint@8.57.1)
+      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.5))(typescript@5.6.3)
+      eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1)
+      eslint-plugin-playwright: 1.6.2(eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.5))(typescript@5.6.3))(eslint@8.57.1)
+      eslint-plugin-react: 7.35.2(eslint@8.57.1)
+      eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1)
+      eslint-plugin-testing-library: 6.3.0(eslint@8.57.1)(typescript@5.6.3)
+      eslint-plugin-tsdoc: 0.2.17
+      eslint-plugin-unicorn: 51.0.1(eslint@8.57.1)
+      eslint-plugin-vitest: 0.3.26(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)
+      prettier-plugin-packagejson: 2.5.2(prettier@3.4.1)
+    optionalDependencies:
+      '@next/eslint-plugin-next': 14.2.15
+      eslint: 8.57.1
+      prettier: 3.4.1
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - eslint-import-resolver-node
+      - eslint-import-resolver-webpack
+      - eslint-plugin-import-x
+      - jest
+      - supports-color
+      - vitest
+
   '@vercel/style-guide@6.0.0(@next/eslint-plugin-next@15.0.3)(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.1))(prettier@3.4.1)(typescript@5.6.3)':
     dependencies:
       '@babel/core': 7.25.2
@@ -10817,13 +10790,6 @@ snapshots:
 
   '@xtuc/long@4.2.2': {}
 
-  abab@2.0.6: {}
-
-  acorn-globals@7.0.1:
-    dependencies:
-      acorn: 8.13.0
-      acorn-walk: 8.3.4
-
   acorn-import-assertions@1.9.0(acorn@8.14.0):
     dependencies:
       acorn: 8.14.0
@@ -10868,10 +10834,19 @@ snapshots:
       clean-stack: 2.2.0
       indent-string: 4.0.0
 
+  ajv-formats@2.1.1(ajv@8.17.1):
+    optionalDependencies:
+      ajv: 8.17.1
+
   ajv-keywords@3.5.2(ajv@6.12.6):
     dependencies:
       ajv: 6.12.6
 
+  ajv-keywords@5.1.0(ajv@8.17.1):
+    dependencies:
+      ajv: 8.17.1
+      fast-deep-equal: 3.1.3
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -11516,6 +11491,22 @@ snapshots:
       - supports-color
       - ts-node
 
+  create-jest@29.7.0(@types/node@22.10.5):
+    dependencies:
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-config: 29.7.0(@types/node@22.10.5)
+      jest-util: 29.7.0
+      prompts: 2.4.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+    optional: true
+
   cross-fetch@3.1.8:
     dependencies:
       node-fetch: 2.7.0
@@ -11581,24 +11572,10 @@ snapshots:
     dependencies:
       css-tree: 2.2.1
 
-  cssom@0.3.8: {}
-
-  cssom@0.5.0: {}
-
-  cssstyle@2.3.0:
-    dependencies:
-      cssom: 0.3.8
-
   csstype@3.1.3: {}
 
   damerau-levenshtein@1.0.8: {}
 
-  data-urls@3.0.2:
-    dependencies:
-      abab: 2.0.6
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 11.0.0
-
   data-view-buffer@1.0.1:
     dependencies:
       call-bind: 1.0.7
@@ -11641,8 +11618,6 @@ snapshots:
 
   decamelize@1.2.0: {}
 
-  decimal.js@10.4.3: {}
-
   decode-uri-component@0.4.1: {}
 
   dedent@1.5.3: {}
@@ -11748,10 +11723,6 @@ snapshots:
 
   domelementtype@2.3.0: {}
 
-  domexception@4.0.0:
-    dependencies:
-      webidl-conversions: 7.0.0
-
   domhandler@5.0.3:
     dependencies:
       domelementtype: 2.3.0
@@ -11773,7 +11744,7 @@ snapshots:
 
   downshift@6.0.6(react@18.3.1):
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.17.9
       compute-scroll-into-view: 1.0.20
       prop-types: 15.8.1
       react: 18.3.1
@@ -11806,6 +11777,11 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.2.1
 
+  enhanced-resolve@5.18.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+
   entities@4.5.0: {}
 
   env-paths@2.2.1: {}
@@ -11904,7 +11880,7 @@ snapshots:
       iterator.prototype: 1.1.2
       safe-array-concat: 1.1.2
 
-  es-module-lexer@1.5.4: {}
+  es-module-lexer@1.6.0: {}
 
   es-object-atoms@1.0.0:
     dependencies:
@@ -11934,14 +11910,6 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  escodegen@2.1.0:
-    dependencies:
-      esprima: 4.0.1
-      estraverse: 5.3.0
-      esutils: 2.0.3
-    optionalDependencies:
-      source-map: 0.6.1
-
   eslint-config-prettier@9.1.0(eslint@8.57.1):
     dependencies:
       eslint: 8.57.1
@@ -12040,6 +12008,17 @@ snapshots:
       - supports-color
       - typescript
 
+  eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.5))(typescript@5.6.3):
+    dependencies:
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.6.3)
+      eslint: 8.57.1
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)
+      jest: 29.7.0(@types/node@22.10.5)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   eslint-plugin-jsx-a11y@6.10.0(eslint@8.57.1):
     dependencies:
       aria-query: 5.1.3
@@ -12067,6 +12046,13 @@ snapshots:
     optionalDependencies:
       eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.1))(typescript@5.6.3)
 
+  eslint-plugin-playwright@1.6.2(eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.5))(typescript@5.6.3))(eslint@8.57.1):
+    dependencies:
+      eslint: 8.57.1
+      globals: 13.24.0
+    optionalDependencies:
+      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(jest@29.7.0(@types/node@22.10.5))(typescript@5.6.3)
+
   eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.4.1):
     dependencies:
       eslint: 8.57.1
@@ -12577,13 +12563,13 @@ snapshots:
 
   graphemer@1.4.0: {}
 
-  graphql-config@4.5.0(@types/node@22.10.1)(graphql@16.9.0):
+  graphql-config@4.5.0(@types/node@22.10.5)(graphql@16.9.0):
     dependencies:
       '@graphql-tools/graphql-file-loader': 7.5.17(graphql@16.9.0)
       '@graphql-tools/json-file-loader': 7.4.18(graphql@16.9.0)
       '@graphql-tools/load': 7.8.14(graphql@16.9.0)
       '@graphql-tools/merge': 8.4.2(graphql@16.9.0)
-      '@graphql-tools/url-loader': 7.17.18(@types/node@22.10.1)(graphql@16.9.0)
+      '@graphql-tools/url-loader': 7.17.18(@types/node@22.10.5)(graphql@16.9.0)
       '@graphql-tools/utils': 9.2.1(graphql@16.9.0)
       cosmiconfig: 8.0.0
       graphql: 16.9.0
@@ -12597,13 +12583,13 @@ snapshots:
       - encoding
       - utf-8-validate
 
-  graphql-config@5.1.2(@types/node@22.10.1)(graphql@16.9.0)(typescript@5.6.3):
+  graphql-config@5.1.2(@types/node@22.10.5)(graphql@16.9.0)(typescript@5.6.3):
     dependencies:
       '@graphql-tools/graphql-file-loader': 8.0.1(graphql@16.9.0)
       '@graphql-tools/json-file-loader': 8.0.1(graphql@16.9.0)
       '@graphql-tools/load': 8.0.2(graphql@16.9.0)
       '@graphql-tools/merge': 9.0.7(graphql@16.9.0)
-      '@graphql-tools/url-loader': 8.0.2(@types/node@22.10.1)(graphql@16.9.0)
+      '@graphql-tools/url-loader': 8.0.2(@types/node@22.10.5)(graphql@16.9.0)
       '@graphql-tools/utils': 10.5.4(graphql@16.9.0)
       cosmiconfig: 9.0.0(typescript@5.6.3)
       graphql: 16.9.0
@@ -12650,6 +12636,11 @@ snapshots:
     dependencies:
       duplexer: 0.1.2
 
+  happy-dom@16.5.3:
+    dependencies:
+      webidl-conversions: 7.0.0
+      whatwg-mimetype: 3.0.0
+
   has-ansi@2.0.0:
     dependencies:
       ansi-regex: 2.1.1
@@ -12676,13 +12667,13 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  hds-core@3.11.0: {}
+  hds-core@4.1.0: {}
 
-  hds-design-tokens@3.11.0: {}
+  hds-design-tokens@4.1.0: {}
 
-  hds-react@3.11.0(@types/react@18.2.7)(eslint@8.57.1)(graphql-ws@5.16.0(graphql@16.9.0))(postcss@8.4.45)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3):
+  hds-react@4.1.0(@types/react@18.2.7)(eslint@8.57.1)(graphql-ws@5.16.0(graphql@16.9.0))(postcss@8.4.45)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3):
     dependencies:
-      '@apollo/client': 3.11.8(@types/react@18.2.7)(graphql-ws@5.16.0(graphql@16.9.0))(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@apollo/client': 3.12.5(@types/react@18.2.7)(graphql-ws@5.16.0(graphql@16.9.0))(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@babel/runtime': 7.17.9
       '@emotion/styled-base': 11.0.0
       '@hookform/resolvers': 2.9.11(react-hook-form@7.53.0(react@18.3.1))
@@ -12698,7 +12689,7 @@ snapshots:
       date-fns: 2.16.1
       downshift: 6.0.6(react@18.3.1)
       graphql: 16.9.0
-      hds-core: 3.11.0
+      hds-core: 4.1.0
       jwt-decode: 3.1.2
       kashe: 1.0.4
       lodash: 4.17.21
@@ -12713,7 +12704,7 @@ snapshots:
       react-use-measure: 2.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-virtual: 2.10.4(react@18.3.1)
       uuid: 9.0.1
-      yup: 1.4.0
+      yup: 1.6.1
     transitivePeerDependencies:
       - '@types/react'
       - eslint
@@ -12733,10 +12724,6 @@ snapshots:
 
   hosted-git-info@2.8.9: {}
 
-  html-encoding-sniffer@3.0.0:
-    dependencies:
-      whatwg-encoding: 2.0.0
-
   html-escaper@2.0.2: {}
 
   html-parse-stringify@3.0.1:
@@ -12752,14 +12739,6 @@ snapshots:
       domutils: 3.1.0
       entities: 4.5.0
 
-  http-proxy-agent@5.0.0:
-    dependencies:
-      '@tootallnate/once': 2.0.0
-      agent-base: 6.0.2
-      debug: 4.3.7(supports-color@5.5.0)
-    transitivePeerDependencies:
-      - supports-color
-
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
@@ -12797,10 +12776,6 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  iconv-lite@0.6.3:
-    dependencies:
-      safer-buffer: 2.1.2
-
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}
@@ -12985,8 +12960,6 @@ snapshots:
 
   is-plain-object@5.0.0: {}
 
-  is-potential-custom-element-name@1.0.1: {}
-
   is-reference@1.2.1:
     dependencies:
       '@types/estree': 1.0.5
@@ -13184,6 +13157,26 @@ snapshots:
       - supports-color
       - ts-node
 
+  jest-cli@29.7.0(@types/node@22.10.5):
+    dependencies:
+      '@jest/core': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      create-jest: 29.7.0(@types/node@22.10.5)
+      exit: 0.1.2
+      import-local: 3.2.0
+      jest-config: 29.7.0(@types/node@22.10.5)
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+    optional: true
+
   jest-config@29.7.0(@types/node@22.10.1):
     dependencies:
       '@babel/core': 7.25.2
@@ -13214,6 +13207,37 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
+  jest-config@29.7.0(@types/node@22.10.5):
+    dependencies:
+      '@babel/core': 7.25.2
+      '@jest/test-sequencer': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.25.2)
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 29.7.0
+      jest-environment-node: 29.7.0
+      jest-get-type: 29.6.3
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-runner: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      micromatch: 4.0.8
+      parse-json: 5.2.0
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    optionalDependencies:
+      '@types/node': 22.10.5
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+    optional: true
+
   jest-diff@29.7.0:
     dependencies:
       chalk: 4.1.2
@@ -13233,21 +13257,6 @@ snapshots:
       jest-util: 29.7.0
       pretty-format: 29.7.0
 
-  jest-environment-jsdom@29.7.0:
-    dependencies:
-      '@jest/environment': 29.7.0
-      '@jest/fake-timers': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/jsdom': 20.0.1
-      '@types/node': 22.10.1
-      jest-mock: 29.7.0
-      jest-util: 29.7.0
-      jsdom: 20.0.3
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-
   jest-environment-node@29.7.0:
     dependencies:
       '@jest/environment': 29.7.0
@@ -13446,7 +13455,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 22.10.1
+      '@types/node': 22.10.5
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -13469,6 +13478,19 @@ snapshots:
       - supports-color
       - ts-node
 
+  jest@29.7.0(@types/node@22.10.5):
+    dependencies:
+      '@jest/core': 29.7.0
+      '@jest/types': 29.6.3
+      import-local: 3.2.0
+      jest-cli: 29.7.0(@types/node@22.10.5)
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+    optional: true
+
   jiti@1.17.1: {}
 
   jiti@1.21.6: {}
@@ -13490,39 +13512,6 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@20.0.3:
-    dependencies:
-      abab: 2.0.6
-      acorn: 8.12.1
-      acorn-globals: 7.0.1
-      cssom: 0.5.0
-      cssstyle: 2.3.0
-      data-urls: 3.0.2
-      decimal.js: 10.4.3
-      domexception: 4.0.0
-      escodegen: 2.1.0
-      form-data: 4.0.0
-      html-encoding-sniffer: 3.0.0
-      http-proxy-agent: 5.0.0
-      https-proxy-agent: 5.0.1
-      is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.12
-      parse5: 7.1.2
-      saxes: 6.0.0
-      symbol-tree: 3.2.4
-      tough-cookie: 4.1.4
-      w3c-xmlserializer: 4.0.0
-      webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 11.0.0
-      ws: 8.18.0
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-
   jsesc@0.5.0: {}
 
   jsesc@2.5.2: {}
@@ -13739,9 +13728,9 @@ snapshots:
 
   merge2@1.4.1: {}
 
-  meros@1.3.0(@types/node@22.10.1):
+  meros@1.3.0(@types/node@22.10.5):
     optionalDependencies:
-      '@types/node': 22.10.1
+      '@types/node': 22.10.5
 
   micromatch@4.0.8:
     dependencies:
@@ -13935,8 +13924,6 @@ snapshots:
 
   nullthrows@1.1.1: {}
 
-  nwsapi@2.2.12: {}
-
   object-assign@4.1.1: {}
 
   object-inspect@1.13.2: {}
@@ -14021,6 +14008,13 @@ snapshots:
       '@wry/trie': 0.4.3
       tslib: 2.7.0
 
+  optimism@0.18.1:
+    dependencies:
+      '@wry/caches': 1.0.1
+      '@wry/context': 0.7.4
+      '@wry/trie': 0.5.0
+      tslib: 2.8.1
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -14094,10 +14088,6 @@ snapshots:
 
   parse-srcset@1.0.2: {}
 
-  parse5@7.1.2:
-    dependencies:
-      entities: 4.5.0
-
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
@@ -14272,8 +14262,6 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
-  psl@1.9.0: {}
-
   punycode@1.4.1: {}
 
   punycode@2.3.1: {}
@@ -14292,8 +14280,6 @@ snapshots:
       filter-obj: 5.1.0
       split-on-first: 3.0.0
 
-  querystringify@2.2.0: {}
-
   queue-microtask@1.2.3: {}
 
   quill-delta@3.6.3:
@@ -14591,8 +14577,6 @@ snapshots:
 
   require-relative@0.8.7: {}
 
-  requires-port@1.0.0: {}
-
   reselect@4.1.8: {}
 
   resize-observer-polyfill@1.5.1: {}
@@ -14626,6 +14610,8 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  response-iterator@0.2.11: {}
+
   response-iterator@0.2.6: {}
 
   restore-cursor@3.1.0:
@@ -14698,10 +14684,6 @@ snapshots:
     optionalDependencies:
       '@parcel/watcher': 2.5.0
 
-  saxes@6.0.0:
-    dependencies:
-      xmlchars: 2.2.0
-
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
@@ -14712,6 +14694,13 @@ snapshots:
       ajv: 6.12.6
       ajv-keywords: 3.5.2(ajv@6.12.6)
 
+  schema-utils@4.3.0:
+    dependencies:
+      '@types/json-schema': 7.0.15
+      ajv: 8.17.1
+      ajv-formats: 2.1.1(ajv@8.17.1)
+      ajv-keywords: 5.1.0(ajv@8.17.1)
+
   screenfull@5.2.0: {}
 
   scuid@1.1.0: {}
@@ -15159,8 +15148,6 @@ snapshots:
 
   symbol-observable@4.0.0: {}
 
-  symbol-tree@3.2.4: {}
-
   synckit@0.9.1:
     dependencies:
       '@pkgr/core': 0.1.1
@@ -15178,16 +15165,16 @@ snapshots:
 
   tapable@2.2.1: {}
 
-  terser-webpack-plugin@5.3.10(webpack@5.94.0):
+  terser-webpack-plugin@5.3.11(webpack@5.94.0):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
-      schema-utils: 3.3.0
+      schema-utils: 4.3.0
       serialize-javascript: 6.0.2
-      terser: 5.36.0
+      terser: 5.37.0
       webpack: 5.94.0
 
-  terser@5.36.0:
+  terser@5.37.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
       acorn: 8.14.0
@@ -15230,19 +15217,8 @@ snapshots:
 
   totalist@3.0.1: {}
 
-  tough-cookie@4.1.4:
-    dependencies:
-      psl: 1.9.0
-      punycode: 2.3.1
-      universalify: 0.2.0
-      url-parse: 1.5.10
-
   tr46@0.0.3: {}
 
-  tr46@3.0.0:
-    dependencies:
-      punycode: 2.3.1
-
   ts-api-utils@1.3.0(typescript@5.6.3):
     dependencies:
       typescript: 5.6.3
@@ -15289,6 +15265,8 @@ snapshots:
 
   tslib@2.7.0: {}
 
+  tslib@2.8.1: {}
+
   tsutils@3.21.0(typescript@5.6.3):
     dependencies:
       tslib: 1.14.1
@@ -15409,8 +15387,6 @@ snapshots:
 
   unicode-property-aliases-ecmascript@2.1.0: {}
 
-  universalify@0.2.0: {}
-
   unixify@1.0.0:
     dependencies:
       normalize-path: 2.1.1
@@ -15440,11 +15416,6 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  url-parse@1.5.10:
-    dependencies:
-      querystringify: 2.2.0
-      requires-port: 1.0.0
-
   urlpattern-polyfill@10.0.0: {}
 
   urlpattern-polyfill@8.0.2: {}
@@ -15483,10 +15454,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  w3c-xmlserializer@4.0.0:
-    dependencies:
-      xml-name-validator: 4.0.0
-
   waait@1.0.5: {}
 
   walker@1.0.8:
@@ -15553,8 +15520,8 @@ snapshots:
       acorn-import-attributes: 1.9.5(acorn@8.14.0)
       browserslist: 4.23.3
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.17.1
-      es-module-lexer: 1.5.4
+      enhanced-resolve: 5.18.0
+      es-module-lexer: 1.6.0
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
@@ -15565,7 +15532,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(webpack@5.94.0)
+      terser-webpack-plugin: 5.3.11(webpack@5.94.0)
       watchpack: 2.4.2
       webpack-sources: 3.2.3
     transitivePeerDependencies:
@@ -15573,17 +15540,8 @@ snapshots:
       - esbuild
       - uglify-js
 
-  whatwg-encoding@2.0.0:
-    dependencies:
-      iconv-lite: 0.6.3
-
   whatwg-mimetype@3.0.0: {}
 
-  whatwg-url@11.0.0:
-    dependencies:
-      tr46: 3.0.0
-      webidl-conversions: 7.0.0
-
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3
@@ -15681,10 +15639,6 @@ snapshots:
 
   ws@8.18.0: {}
 
-  xml-name-validator@4.0.0: {}
-
-  xmlchars@2.2.0: {}
-
   xtend@4.0.2: {}
 
   y18n@4.0.3: {}
@@ -15730,7 +15684,7 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
-  yup@1.4.0:
+  yup@1.6.1:
     dependencies:
       property-expr: 2.0.6
       tiny-case: 1.0.3