feat(LOY-169): use new filter select for country select

standardised colors on error messages

fixed error validation on date field

removed duplicates in country list

apps/scandic-web/components/TempDesignSystem/Form/Country/country.module.css

@@ -1,80 +0,0 @@
-.container {
-  position: relative;
-}
-
-.comboBoxContainer {
-  position: relative;
-  height: 60px;
-}
-
-.label {
-  position: absolute;
-  left: var(--Spacing-x2);
-  top: var(--Spacing-x-one-and-half);
-  pointer-events: none;
-}
-
-.input {
-  background-color: var(--Main-Grey-White);
-  border-color: var(--Scandic-Beige-40);
-  border-radius: var(--Corner-radius-Medium);
-  border-style: solid;
-  border-width: 1px;
-  padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x1);
-  width: 100%;
-  height: 100%;
-
-  &[aria-invalid="true"],
-  &[data-invalid="true"] {
-    border-color: var(--Scandic-Red-60);
-  }
-}
-
-.input,
-.listBoxItem {
-  color: var(--Main-Grey-100);
-}
-
-.button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  grid-area: chevron;
-  height: 100%;
-  justify-self: flex-end;
-  padding-left: var(--Spacing-x2);
-  padding-right: var(--Spacing-x2);
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  outline: none;
-}
-
-.popover {
-  background-color: var(--Main-Grey-White);
-  border-color: var(--Scandic-Beige-40);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--Corner-radius-Medium);
-  left: 0px;
-  max-height: 400px;
-  overflow: auto;
-  padding: var(--Spacing-x2);
-  top: calc(60px + var(--Spacing-x1));
-  width: 100%;
-}
-
-.listBoxItem {
-  padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
-    var(--Spacing-x2);
-}
-
-.listBoxItem[data-focused="true"],
-.listBoxItem[data-focus-visible="true"],
-.listBoxItem[data-selected="true"],
-.listBoxItem:hover {
-  background-color: var(--Scandic-Blue-00);
-  border-radius: var(--Corner-radius-Medium);
-  cursor: pointer;
-  outline: none;
-}