From 7ffab29a2f801193e1821d5ba0be293f2e358afb Mon Sep 17 00:00:00 2001
From: Bruno Henriques <bruno.henriques@hitachivantara.com>
Date: Fri, 16 Jun 2023 15:45:24 +0100
Subject: [PATCH] fix(BaseDropdown): border styles & dedupe (#3404)

* refactor(BaseDropdown): improve & dedupe styles in components using it
* chore: remove unused theme keys
* chore: pr review
---
 .../BaseDropdown/BaseDropdown.styles.tsx      |  32 +--
 .../components/BaseDropdown/BaseDropdown.tsx  |  31 +-
 .../__snapshots__/BaseDropdown.test.tsx.snap  |  42 +--
 .../__snapshots__/BulkActions.test.tsx.snap   |   4 +-
 .../ColorPicker/ColorPicker.styles.tsx        |  19 +-
 .../components/ColorPicker/ColorPicker.tsx    |  16 +-
 .../__snapshots__/ColorPicker.test.tsx.snap   | 269 ++++++++++--------
 .../__snapshots__/Controls.test.tsx.snap      |  80 +++---
 .../DatePicker/DatePicker.styles.tsx          |  18 +-
 .../__snapshots__/DatePicker.test.tsx.snap    | 200 +++++++------
 .../DropDownMenu/DropDownMenu.styles.tsx      |   5 +-
 .../__snapshots__/DropDownMenu.test.tsx.snap  |   4 +-
 .../components/Dropdown/Dropdown.styles.tsx   |  13 +-
 .../components/Dropdown/List/List.styles.tsx  |   7 +-
 .../__snapshots__/Dropdown.test.tsx.snap      |  40 +--
 .../FilterGroup/Counter/Counter.styles.tsx    |   6 +-
 .../FilterContent/FilterContent.styles.tsx    |  10 +-
 .../__snapshots__/FilterGroup.test.tsx.snap   |  24 +-
 .../src/components/Pagination/Pagination.tsx  |   1 -
 .../components/Pagination/Select.styles.tsx   |  33 +--
 .../core/src/components/Pagination/Select.tsx |  59 ++--
 .../__snapshots__/Pagination.test.tsx.snap    |  36 ++-
 packages/styles/src/theme.ts                  |  18 +-
 packages/styles/src/themes/ds3.ts             |  20 +-
 packages/styles/src/themes/ds5.ts             |  20 +-
 packages/styles/src/types.ts                  |  18 +-
 26 files changed, 463 insertions(+), 562 deletions(-)

diff --git a/packages/core/src/components/BaseDropdown/BaseDropdown.styles.tsx b/packages/core/src/components/BaseDropdown/BaseDropdown.styles.tsx
index 7737b3503d..993200a2d9 100644
--- a/packages/core/src/components/BaseDropdown/BaseDropdown.styles.tsx
+++ b/packages/core/src/components/BaseDropdown/BaseDropdown.styles.tsx
@@ -1,6 +1,5 @@
 import { CSSProperties } from "@emotion/serialize";
 import styled from "@emotion/styled";
-import { DropDownXS, DropUpXS } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 import { HvTypography } from "@core/components";
 import { outlineStyles } from "@core/utils";
@@ -107,7 +106,7 @@ export const StyledSelection = styled("div")({
   alignItems: "center",
   height: "30px",
   boxSizing: "border-box",
-  padding: `0px ${theme.space.md} 0px ${theme.space.xs}`,
+  paddingLeft: theme.space.xs,
 });
 
 export const StyledPlaceholder = styled(
@@ -126,32 +125,13 @@ export const StyledPlaceholder = styled(
   }),
 }));
 
-const iconsStyles: CSSProperties = {
+export const StyledAdornment = styled("div")({
   position: "absolute",
   pointerEvents: "none",
   top: -1,
   right: -1,
-};
-
-export const StyledDropUpXS = styled(DropUpXS)({
-  ...iconsStyles,
 });
 
-export const StyledDropDownXS = styled(
-  DropDownXS,
-  transientOptions
-)(({ $disabled }: { $disabled: boolean }) => ({
-  ...iconsStyles,
-
-  ...($disabled && {
-    "& svg": {
-      "& path": {
-        fill: theme.colors.secondary_60,
-      },
-    },
-  }),
-}));
-
 export const StyledContainer = styled("div")({
   zIndex: theme.zIndices.popover,
   width: "auto",
@@ -203,10 +183,14 @@ export const StyledPanel = styled(
 )(({ $popperPlacement }: { $popperPlacement: string }) => ({
   position: "relative",
   boxShadow: theme.baseDropdown.shadow,
+  backgroundColor: theme.colors.atmo1,
+  border: `1px solid ${theme.baseDropdown.openBorderColor}`,
   ...($popperPlacement === "top" && {
-    top: "1px",
+    top: 1,
+    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,
   }),
   ...($popperPlacement === "bottom" && {
-    top: "-1px",
+    top: -1,
+    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,
   }),
 }));
diff --git a/packages/core/src/components/BaseDropdown/BaseDropdown.tsx b/packages/core/src/components/BaseDropdown/BaseDropdown.tsx
index d881e62b44..4ce0460516 100644
--- a/packages/core/src/components/BaseDropdown/BaseDropdown.tsx
+++ b/packages/core/src/components/BaseDropdown/BaseDropdown.tsx
@@ -6,6 +6,8 @@ import {
   PopperPlacementType,
   PopperProps,
 } from "@mui/material";
+import { theme } from "@hitachivantara/uikit-styles";
+import { DropDownXS, DropUpXS } from "@hitachivantara/uikit-react-icons";
 import { useControlled, useForkRef, useTheme, useUniqueId } from "@core/hooks";
 import { isKeypress, keyboardCodes, setId } from "@core/utils";
 import { getFirstAndLastFocus } from "@core/utils/focusableElementFinder";
@@ -13,10 +15,9 @@ import { HvBaseProps } from "@core/types";
 import { usePopper } from "react-popper";
 import { detectOverflow, ModifierArguments, Options } from "@popperjs/core";
 import {
+  StyledAdornment,
   StyledAnchor,
   StyledContainer,
-  StyledDropDownXS,
-  StyledDropUpXS,
   StyledExtension,
   StyledHeaderRoot,
   StyledPanel,
@@ -236,7 +237,7 @@ export const HvBaseDropdown = ({
     []
   );
 
-  const modifiers: any = useMemo(
+  const modifiers: PopperProps["modifiers"] = useMemo(
     () => [
       {
         name: "variableWidth",
@@ -283,10 +284,8 @@ export const HvBaseDropdown = ({
     }
   );
 
-  let popperPlacement = "bottom";
-  if (attributes.popper) {
-    popperPlacement = attributes.popper["data-popper-placement"];
-  }
+  const popperPlacement =
+    attributes.popper?.["data-popper-placement"] ?? "bottom";
 
   const handleToggle = useCallback(
     (event) => {
@@ -332,6 +331,8 @@ export const HvBaseDropdown = ({
       });
     }
 
+    const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
+
     return (
       <StyledHeaderRoot
         id={setId(id, "header")}
@@ -390,19 +391,15 @@ export const HvBaseDropdown = ({
             placeholder
           )}
         </StyledSelection>
-        {adornment ||
-          (isOpen ? (
-            <StyledDropUpXS
+        <StyledAdornment>
+          {adornment || (
+            <ExpanderComponent
               iconSize="XS"
+              color={disabled ? theme.colors.secondary_60 : undefined}
               className={clsx(baseDropdownClasses.arrow, classes?.arrow)}
             />
-          ) : (
-            <StyledDropDownXS
-              iconSize="XS"
-              className={clsx(baseDropdownClasses.arrow, classes?.arrow)}
-              $disabled={disabled}
-            />
-          ))}
+          )}
+        </StyledAdornment>
       </StyledHeaderRoot>
     );
   })();
diff --git a/packages/core/src/components/BaseDropdown/__snapshots__/BaseDropdown.test.tsx.snap b/packages/core/src/components/BaseDropdown/__snapshots__/BaseDropdown.test.tsx.snap
index 20b5139950..4f460e120d 100644
--- a/packages/core/src/components/BaseDropdown/__snapshots__/BaseDropdown.test.tsx.snap
+++ b/packages/core/src/components/BaseDropdown/__snapshots__/BaseDropdown.test.tsx.snap
@@ -6,47 +6,51 @@ exports[`BaseDropDown > should render correctly 1`] = `
     style="width: 121px;"
   >
     <div
-      class="HvBaseDropdown-root hv-1nukton-StyledRoot eapzthe9"
+      class="HvBaseDropdown-root hv-1nukton-StyledRoot eapzthe8"
     >
       <div
         aria-expanded="false"
         aria-label="Main sample"
-        class="HvBaseDropdown-anchor hv-c41kvr-StyledAnchor eapzthe8"
+        class="HvBaseDropdown-anchor hv-c41kvr-StyledAnchor eapzthe7"
         role="combobox"
         tabindex="-1"
       >
         <div
           aria-label="Main sample"
-          class="HvBaseDropdown-header hv-4bvoko-StyledHeaderRoot eapzthe7"
+          class="HvBaseDropdown-header hv-4bvoko-StyledHeaderRoot eapzthe6"
           role="textbox"
           tabindex="0"
         >
           <div
-            class="HvBaseDropdown-selection hv-b6yxdh-StyledSelection eapzthe6"
+            class="HvBaseDropdown-selection hv-14ov9q3-StyledSelection eapzthe5"
           >
             <p
-              class="HvBaseDropdown-placeholder eapzthe5 HvTypography-root HvTypography-body hv-1cbtqw8-getStyledComponent-StyledPlaceholder e1tnpalo0"
+              class="HvBaseDropdown-placeholder eapzthe4 HvTypography-root HvTypography-body hv-1cbtqw8-getStyledComponent-StyledPlaceholder e1tnpalo0"
             >
               Placeholder...
             </p>
           </div>
           <div
-            class="HvBaseDropdown-arrow eapzthe3 hv-1ij2a3c-StyledDropDownXS"
-            name="DropDownXS"
+            class="hv-zsju0o-StyledAdornment eapzthe3"
           >
-            <svg
-              focusable="false"
-              height="12"
-              viewBox="0 0 12 12"
-              width="12"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="HvBaseDropdown-arrow hv-f95wjz"
+              name="DropDownXS"
             >
-              <path
-                class="color0"
-                d="M5.99994 8.65 1.4 4.05l.7-.7L6 7.25l3.9-3.9.7.7z"
-                fill="var(--uikit-colors-secondary)"
-              />
-            </svg>
+              <svg
+                focusable="false"
+                height="12"
+                viewBox="0 0 12 12"
+                width="12"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  class="color0"
+                  d="M5.99994 8.65 1.4 4.05l.7-.7L6 7.25l3.9-3.9.7.7z"
+                  fill="var(--uikit-colors-secondary)"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/core/src/components/BulkActions/__snapshots__/BulkActions.test.tsx.snap b/packages/core/src/components/BulkActions/__snapshots__/BulkActions.test.tsx.snap
index 5b1e130fed..7424180083 100644
--- a/packages/core/src/components/BulkActions/__snapshots__/BulkActions.test.tsx.snap
+++ b/packages/core/src/components/BulkActions/__snapshots__/BulkActions.test.tsx.snap
@@ -150,12 +150,12 @@ exports[`BulkActions > With actions > should render correctly 1`] = `
         </div>
       </button>
       <div
-        class="HvBaseDropdown-root HvDropDownMenu-root HvActionsGeneric-dropDownMenu css-1u1foky-StyledRoot eapzthe9"
+        class="HvBaseDropdown-root HvDropDownMenu-root HvActionsGeneric-dropDownMenu css-1u1foky-StyledRoot eapzthe8"
       >
         <div
           aria-expanded="false"
           aria-haspopup="menu"
-          class="HvDropDownMenu-container HvBaseDropdown-anchor HvBaseDropdown-rootDisabled css-mq7o8m-StyledAnchor eapzthe8"
+          class="HvDropDownMenu-container HvBaseDropdown-anchor HvBaseDropdown-rootDisabled css-mq7o8m-StyledAnchor eapzthe7"
           id="dropdown-menu16"
           tabindex="-1"
         >
diff --git a/packages/core/src/components/ColorPicker/ColorPicker.styles.tsx b/packages/core/src/components/ColorPicker/ColorPicker.styles.tsx
index 956c934b6a..c4cdaff9ac 100644
--- a/packages/core/src/components/ColorPicker/ColorPicker.styles.tsx
+++ b/packages/core/src/components/ColorPicker/ColorPicker.styles.tsx
@@ -12,6 +12,7 @@ export const styles: Partial<
   label: {
     paddingBottom: "6px",
     display: "block",
+    cursor: "pointer",
   },
   headerColorValue: {
     textTransform: "uppercase",
@@ -28,29 +29,15 @@ export const styles: Partial<
     display: "flex",
     justifyContent: "center",
     padding: theme.colorPicker.panelPadding,
-    border: theme.colorPicker.panelBorder,
-    borderRadius: theme.colorPicker.panelBorderRadius,
   },
   colorPicker: {
     width: theme.colorPicker.colorPickerWidth,
   },
-  colorPickerIcon: {
-    position: "absolute",
-    pointerEvents: "none",
-    top: -1,
-    right: -1,
-  },
+  colorPickerIcon: {},
   dropdownRootIconOnly: {
     width: 32,
     height: 32,
   },
-  headerColorIconOnly: {
-    position: "absolute",
-    pointerEvents: "none",
-    top: -1,
-    right: -1,
-    width: 32,
-    height: 32,
-  },
+  headerColorIconOnly: {},
   pickerFields: { paddingBottom: 20 },
 };
diff --git a/packages/core/src/components/ColorPicker/ColorPicker.tsx b/packages/core/src/components/ColorPicker/ColorPicker.tsx
index e6e20f705c..465fb38520 100644
--- a/packages/core/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/core/src/components/ColorPicker/ColorPicker.tsx
@@ -231,6 +231,7 @@ export const HvColorPicker = ({
             </div>
           )}
           <HvBaseDropdown
+            variableWidth
             className={className}
             expanded={isOpen}
             onToggle={handleToggle}
@@ -243,6 +244,7 @@ export const HvColorPicker = ({
                     classes?.dropdownRootIconOnly
                   )
                 : undefined,
+              selection: cx(iconOnly && css({ padding: 0 })),
             }}
             adornment={
               iconOnly && color ? (
@@ -250,14 +252,9 @@ export const HvColorPicker = ({
                   className={cx(
                     colorPickerClasses.headerColorIconOnly,
                     css(styles.headerColorIconOnly),
-                    css({
-                      "& svg:last-child": {
-                        fill: color,
-                      },
-                    }),
                     classes?.headerColorIconOnly
                   )}
-                  color={[color]}
+                  color={[color, "transparent"]}
                 />
               ) : dropdownIcon === "colorPicker" ? (
                 <ColorPicker
@@ -276,14 +273,9 @@ export const HvColorPicker = ({
                     className={cx(
                       colorPickerClasses.headerColorIcon,
                       css(styles.headerColorIcon),
-                      css({
-                        "& svg:last-child": {
-                          fill: color,
-                        },
-                      }),
                       classes?.headerColorIcon
                     )}
-                    color={[color]}
+                    color={[color, "transparent"]}
                   />
                   <HvTypography
                     className={cx(
diff --git a/packages/core/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap b/packages/core/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
index a038557c0d..dc058ddb9f 100644
--- a/packages/core/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
+++ b/packages/core/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
@@ -12,48 +12,52 @@ exports[`ColorPicker > should render correctly full color icon picker 1`] = `
         class="HvColorPicker-labelContainer css-1yp4ln"
       >
         <label
-          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-q9br3g-getStyledComponent-StyledTypography e1tnpalo0"
+          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-abwxqd-getStyledComponent-StyledTypography e1tnpalo0"
           id="hvdropdown26-label"
         >
           Color
         </label>
       </div>
       <div
-        class="HvBaseDropdown-root HvColorPicker-dropdownRootIconOnly css-4fbzw2-StyledRoot eapzthe9"
+        class="HvBaseDropdown-root HvColorPicker-dropdownRootIconOnly css-4fbzw2-StyledRoot eapzthe8"
       >
         <div
           aria-expanded="false"
           aria-labelledby="hvdropdown26-label"
-          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
           role="combobox"
           tabindex="-1"
         >
           <div
             aria-labelledby="hvdropdown26-label"
-            class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe7"
+            class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe6"
             role="textbox"
             tabindex="0"
           >
             <div
-              class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+              class="HvBaseDropdown-selection css-yu3ol7-StyledSelection eapzthe5"
             />
             <div
-              class="HvColorPicker-colorPickerIcon css-1rtiqvt"
-              name="ColorPicker"
+              class="css-zsju0o-StyledAdornment eapzthe3"
             >
-              <svg
-                focusable="false"
-                height="16"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="HvColorPicker-colorPickerIcon css-1ocd5l7"
+                name="ColorPicker"
               >
-                <path
-                  class="color0"
-                  d="M15.415.567a2.047 2.047 0 0 0-2.828 0l-2.121 2.121L9.05 1.274l-.707.707L14 7.638l.707-.707-1.414-1.415 2.121-2.121a2 2 0 0 0 .001-2.828zM12.587 4.81zm2.121-2.122-2.121 2.121-1.414-1.414 2.121-2.121a1 1 0 0 1 1.414 1.414zM0 13v3h3l9-9-3-3zm2.586 2H1v-1.585l8-8L10.586 7z"
-                  fill="var(--uikit-colors-secondary)"
-                />
-              </svg>
+                <svg
+                  focusable="false"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="color0"
+                    d="M15.415.567a2.047 2.047 0 0 0-2.828 0l-2.121 2.121L9.05 1.274l-.707.707L14 7.638l.707-.707-1.414-1.415 2.121-2.121a2 2 0 0 0 .001-2.828zM12.587 4.81zm2.121-2.122-2.121 2.121-1.414-1.414 2.121-2.121a1 1 0 0 1 1.414 1.414zM0 13v3h3l9-9-3-3zm2.586 2H1v-1.585l8-8L10.586 7z"
+                    fill="var(--uikit-colors-secondary)"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -75,56 +79,60 @@ exports[`ColorPicker > should render correctly full color picker 1`] = `
         class="HvColorPicker-labelContainer css-1yp4ln"
       >
         <label
-          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-q9br3g-getStyledComponent-StyledTypography e1tnpalo0"
+          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-abwxqd-getStyledComponent-StyledTypography e1tnpalo0"
           id="hvdropdown1-label"
         >
           Color
         </label>
       </div>
       <div
-        class="HvBaseDropdown-root css-1nukton-StyledRoot eapzthe9"
+        class="HvBaseDropdown-root css-1nukton-StyledRoot eapzthe8"
       >
         <div
           aria-expanded="true"
           aria-labelledby="hvdropdown1-label"
           aria-owns="hvbasedropdown3-children-container"
-          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
           role="combobox"
           tabindex="-1"
         >
           <div
             aria-controls="hvbasedropdown3-children-container"
             aria-labelledby="hvdropdown1-label"
-            class="HvBaseDropdown-header HvBaseDropdown-headerOpen HvBaseDropdown-headerOpenDown css-ntsilr-StyledHeaderRoot eapzthe7"
+            class="HvBaseDropdown-header HvBaseDropdown-headerOpen HvBaseDropdown-headerOpenDown css-ntsilr-StyledHeaderRoot eapzthe6"
             role="textbox"
             tabindex="0"
           >
             <div
-              class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+              class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
             >
               <p
-                class="HvBaseDropdown-placeholder eapzthe5 HvTypography-root HvTypography-body css-1cbtqw8-getStyledComponent-StyledPlaceholder e1tnpalo0"
+                class="HvBaseDropdown-placeholder eapzthe4 HvTypography-root HvTypography-body css-1cbtqw8-getStyledComponent-StyledPlaceholder e1tnpalo0"
               >
                 Select color...
               </p>
             </div>
             <div
-              class="HvColorPicker-colorPickerIcon css-1rtiqvt"
-              name="ColorPicker"
+              class="css-zsju0o-StyledAdornment eapzthe3"
             >
-              <svg
-                focusable="false"
-                height="16"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="HvColorPicker-colorPickerIcon css-1ocd5l7"
+                name="ColorPicker"
               >
-                <path
-                  class="color0"
-                  d="M15.415.567a2.047 2.047 0 0 0-2.828 0l-2.121 2.121L9.05 1.274l-.707.707L14 7.638l.707-.707-1.414-1.415 2.121-2.121a2 2 0 0 0 .001-2.828zM12.587 4.81zm2.121-2.122-2.121 2.121-1.414-1.414 2.121-2.121a1 1 0 0 1 1.414 1.414zM0 13v3h3l9-9-3-3zm2.586 2H1v-1.585l8-8L10.586 7z"
-                  fill="var(--uikit-colors-secondary)"
-                />
-              </svg>
+                <svg
+                  focusable="false"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="color0"
+                    d="M15.415.567a2.047 2.047 0 0 0-2.828 0l-2.121 2.121L9.05 1.274l-.707.707L14 7.638l.707-.707-1.414-1.415 2.121-2.121a2 2 0 0 0 .001-2.828zM12.587 4.81zm2.121-2.122-2.121 2.121-1.414-1.414 2.121-2.121a1 1 0 0 1 1.414 1.414zM0 13v3h3l9-9-3-3zm2.586 2H1v-1.585l8-8L10.586 7z"
+                    fill="var(--uikit-colors-secondary)"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -146,35 +154,35 @@ exports[`ColorPicker > should render correctly recommended colors only color pic
         class="HvColorPicker-labelContainer css-1yp4ln"
       >
         <label
-          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-q9br3g-getStyledComponent-StyledTypography e1tnpalo0"
+          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-abwxqd-getStyledComponent-StyledTypography e1tnpalo0"
           id="hvdropdown23-label"
         >
           Color
         </label>
       </div>
       <div
-        class="HvBaseDropdown-root css-1nukton-StyledRoot eapzthe9"
+        class="HvBaseDropdown-root css-1nukton-StyledRoot eapzthe8"
       >
         <div
           aria-expanded="true"
           aria-labelledby="hvdropdown23-label"
           aria-owns="hvbasedropdown25-children-container"
-          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
           role="combobox"
           tabindex="-1"
         >
           <div
             aria-controls="hvbasedropdown25-children-container"
             aria-labelledby="hvdropdown23-label"
-            class="HvBaseDropdown-header HvBaseDropdown-headerOpen HvBaseDropdown-headerOpenDown css-ntsilr-StyledHeaderRoot eapzthe7"
+            class="HvBaseDropdown-header HvBaseDropdown-headerOpen HvBaseDropdown-headerOpenDown css-ntsilr-StyledHeaderRoot eapzthe6"
             role="textbox"
             tabindex="0"
           >
             <div
-              class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+              class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
             >
               <div
-                class="HvColorPicker-headerColorIcon css-11agson"
+                class="HvColorPicker-headerColorIcon css-l2cp81"
                 name="Checkbox"
               >
                 <svg
@@ -192,6 +200,7 @@ exports[`ColorPicker > should render correctly recommended colors only color pic
                   <path
                     class="color1"
                     d="M16 16H0V0h16zM1 15h14V1H1z"
+                    fill="transparent"
                   />
                 </svg>
               </div>
@@ -202,22 +211,26 @@ exports[`ColorPicker > should render correctly recommended colors only color pic
               </p>
             </div>
             <div
-              class="HvColorPicker-colorPickerIcon css-1rtiqvt"
-              name="ColorPicker"
+              class="css-zsju0o-StyledAdornment eapzthe3"
             >
-              <svg
-                focusable="false"
-                height="16"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="HvColorPicker-colorPickerIcon css-1ocd5l7"
+                name="ColorPicker"
               >
-                <path
-                  class="color0"
-                  d="M15.415.567a2.047 2.047 0 0 0-2.828 0l-2.121 2.121L9.05 1.274l-.707.707L14 7.638l.707-.707-1.414-1.415 2.121-2.121a2 2 0 0 0 .001-2.828zM12.587 4.81zm2.121-2.122-2.121 2.121-1.414-1.414 2.121-2.121a1 1 0 0 1 1.414 1.414zM0 13v3h3l9-9-3-3zm2.586 2H1v-1.585l8-8L10.586 7z"
-                  fill="var(--uikit-colors-secondary)"
-                />
-              </svg>
+                <svg
+                  focusable="false"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="color0"
+                    d="M15.415.567a2.047 2.047 0 0 0-2.828 0l-2.121 2.121L9.05 1.274l-.707.707L14 7.638l.707-.707-1.414-1.415 2.121-2.121a2 2 0 0 0 .001-2.828zM12.587 4.81zm2.121-2.122-2.121 2.121-1.414-1.414 2.121-2.121a1 1 0 0 1 1.414 1.414zM0 13v3h3l9-9-3-3zm2.586 2H1v-1.585l8-8L10.586 7z"
+                    fill="var(--uikit-colors-secondary)"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -239,52 +252,57 @@ exports[`ColorPicker > should render correctly recommended colors only icon colo
         class="HvColorPicker-labelContainer css-1yp4ln"
       >
         <label
-          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-q9br3g-getStyledComponent-StyledTypography e1tnpalo0"
+          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-abwxqd-getStyledComponent-StyledTypography e1tnpalo0"
           id="hvdropdown32-label"
         >
           Color
         </label>
       </div>
       <div
-        class="HvBaseDropdown-root HvColorPicker-dropdownRootIconOnly css-4fbzw2-StyledRoot eapzthe9"
+        class="HvBaseDropdown-root HvColorPicker-dropdownRootIconOnly css-4fbzw2-StyledRoot eapzthe8"
       >
         <div
           aria-expanded="false"
           aria-labelledby="hvdropdown32-label"
-          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
           role="combobox"
           tabindex="-1"
         >
           <div
             aria-labelledby="hvdropdown32-label"
-            class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe7"
+            class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe6"
             role="textbox"
             tabindex="0"
           >
             <div
-              class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+              class="HvBaseDropdown-selection css-yu3ol7-StyledSelection eapzthe5"
             />
             <div
-              class="HvColorPicker-headerColorIconOnly css-zlcxrp"
-              name="Checkbox"
+              class="css-zsju0o-StyledAdornment eapzthe3"
             >
-              <svg
-                focusable="false"
-                height="16"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="HvColorPicker-headerColorIconOnly css-1ocd5l7"
+                name="Checkbox"
               >
-                <path
-                  class="color0"
-                  d="M0 0h16v16H0z"
-                  fill="#de2beb"
-                />
-                <path
-                  class="color1"
-                  d="M16 16H0V0h16zM1 15h14V1H1z"
-                />
-              </svg>
+                <svg
+                  focusable="false"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="color0"
+                    d="M0 0h16v16H0z"
+                    fill="#de2beb"
+                  />
+                  <path
+                    class="color1"
+                    d="M16 16H0V0h16zM1 15h14V1H1z"
+                    fill="transparent"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -306,35 +324,35 @@ exports[`ColorPicker > should render correctly without saved colors color picker
         class="HvColorPicker-labelContainer css-1yp4ln"
       >
         <label
-          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-q9br3g-getStyledComponent-StyledTypography e1tnpalo0"
+          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-abwxqd-getStyledComponent-StyledTypography e1tnpalo0"
           id="hvdropdown12-label"
         >
           Color
         </label>
       </div>
       <div
-        class="HvBaseDropdown-root css-1nukton-StyledRoot eapzthe9"
+        class="HvBaseDropdown-root css-1nukton-StyledRoot eapzthe8"
       >
         <div
           aria-expanded="true"
           aria-labelledby="hvdropdown12-label"
           aria-owns="hvbasedropdown14-children-container"
-          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
           role="combobox"
           tabindex="-1"
         >
           <div
             aria-controls="hvbasedropdown14-children-container"
             aria-labelledby="hvdropdown12-label"
-            class="HvBaseDropdown-header HvBaseDropdown-headerOpen HvBaseDropdown-headerOpenDown css-ntsilr-StyledHeaderRoot eapzthe7"
+            class="HvBaseDropdown-header HvBaseDropdown-headerOpen HvBaseDropdown-headerOpenDown css-ntsilr-StyledHeaderRoot eapzthe6"
             role="textbox"
             tabindex="0"
           >
             <div
-              class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+              class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
             >
               <div
-                class="HvColorPicker-headerColorIcon css-11agson"
+                class="HvColorPicker-headerColorIcon css-l2cp81"
                 name="Checkbox"
               >
                 <svg
@@ -352,6 +370,7 @@ exports[`ColorPicker > should render correctly without saved colors color picker
                   <path
                     class="color1"
                     d="M16 16H0V0h16zM1 15h14V1H1z"
+                    fill="transparent"
                   />
                 </svg>
               </div>
@@ -362,22 +381,26 @@ exports[`ColorPicker > should render correctly without saved colors color picker
               </p>
             </div>
             <div
-              class="HvColorPicker-colorPickerIcon css-1rtiqvt"
-              name="ColorPicker"
+              class="css-zsju0o-StyledAdornment eapzthe3"
             >
-              <svg
-                focusable="false"
-                height="16"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="HvColorPicker-colorPickerIcon css-1ocd5l7"
+                name="ColorPicker"
               >
-                <path
-                  class="color0"
-                  d="M15.415.567a2.047 2.047 0 0 0-2.828 0l-2.121 2.121L9.05 1.274l-.707.707L14 7.638l.707-.707-1.414-1.415 2.121-2.121a2 2 0 0 0 .001-2.828zM12.587 4.81zm2.121-2.122-2.121 2.121-1.414-1.414 2.121-2.121a1 1 0 0 1 1.414 1.414zM0 13v3h3l9-9-3-3zm2.586 2H1v-1.585l8-8L10.586 7z"
-                  fill="var(--uikit-colors-secondary)"
-                />
-              </svg>
+                <svg
+                  focusable="false"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="color0"
+                    d="M15.415.567a2.047 2.047 0 0 0-2.828 0l-2.121 2.121L9.05 1.274l-.707.707L14 7.638l.707-.707-1.414-1.415 2.121-2.121a2 2 0 0 0 .001-2.828zM12.587 4.81zm2.121-2.122-2.121 2.121-1.414-1.414 2.121-2.121a1 1 0 0 1 1.414 1.414zM0 13v3h3l9-9-3-3zm2.586 2H1v-1.585l8-8L10.586 7z"
+                    fill="var(--uikit-colors-secondary)"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -399,48 +422,52 @@ exports[`ColorPicker > should render correctly without saved colors icon color p
         class="HvColorPicker-labelContainer css-1yp4ln"
       >
         <label
-          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-q9br3g-getStyledComponent-StyledTypography e1tnpalo0"
+          class="HvColorPicker-label HvLabel-root e17iqvr40 HvTypography-root HvTypography-label css-abwxqd-getStyledComponent-StyledTypography e1tnpalo0"
           id="hvdropdown29-label"
         >
           Color
         </label>
       </div>
       <div
-        class="HvBaseDropdown-root HvColorPicker-dropdownRootIconOnly css-4fbzw2-StyledRoot eapzthe9"
+        class="HvBaseDropdown-root HvColorPicker-dropdownRootIconOnly css-4fbzw2-StyledRoot eapzthe8"
       >
         <div
           aria-expanded="false"
           aria-labelledby="hvdropdown29-label"
-          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
           role="combobox"
           tabindex="-1"
         >
           <div
             aria-labelledby="hvdropdown29-label"
-            class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe7"
+            class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe6"
             role="textbox"
             tabindex="0"
           >
             <div
-              class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+              class="HvBaseDropdown-selection css-yu3ol7-StyledSelection eapzthe5"
             />
             <div
-              class="HvColorPicker-colorPickerIcon css-1rtiqvt"
-              name="ColorPicker"
+              class="css-zsju0o-StyledAdornment eapzthe3"
             >
-              <svg
-                focusable="false"
-                height="16"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="HvColorPicker-colorPickerIcon css-1ocd5l7"
+                name="ColorPicker"
               >
-                <path
-                  class="color0"
-                  d="M15.415.567a2.047 2.047 0 0 0-2.828 0l-2.121 2.121L9.05 1.274l-.707.707L14 7.638l.707-.707-1.414-1.415 2.121-2.121a2 2 0 0 0 .001-2.828zM12.587 4.81zm2.121-2.122-2.121 2.121-1.414-1.414 2.121-2.121a1 1 0 0 1 1.414 1.414zM0 13v3h3l9-9-3-3zm2.586 2H1v-1.585l8-8L10.586 7z"
-                  fill="var(--uikit-colors-secondary)"
-                />
-              </svg>
+                <svg
+                  focusable="false"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="color0"
+                    d="M15.415.567a2.047 2.047 0 0 0-2.828 0l-2.121 2.121L9.05 1.274l-.707.707L14 7.638l.707-.707-1.414-1.415 2.121-2.121a2 2 0 0 0 .001-2.828zM12.587 4.81zm2.121-2.122-2.121 2.121-1.414-1.414 2.121-2.121a1 1 0 0 1 1.414 1.414zM0 13v3h3l9-9-3-3zm2.586 2H1v-1.585l8-8L10.586 7z"
+                    fill="var(--uikit-colors-secondary)"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/core/src/components/Controls/__snapshots__/Controls.test.tsx.snap b/packages/core/src/components/Controls/__snapshots__/Controls.test.tsx.snap
index ecc2733577..6b272f2cc6 100644
--- a/packages/core/src/components/Controls/__snapshots__/Controls.test.tsx.snap
+++ b/packages/core/src/components/Controls/__snapshots__/Controls.test.tsx.snap
@@ -84,21 +84,21 @@ exports[`<HvControls> > sample snapshot testing > Controls 1`] = `
             class=" e16dy5r70 HvDropdown-root css-u5677i-StyledHvFormElement-StyledDropdown etta2py4 HvFormElement-root"
           >
             <div
-              class="HvBaseDropdown-root HvDropdown-dropdown css-1nukton-StyledRoot eapzthe9"
+              class="HvBaseDropdown-root HvDropdown-dropdown css-1nukton-StyledRoot eapzthe8"
             >
               <div
                 aria-expanded="false"
-                class="etta2py3 HvBaseDropdown-anchor css-hfl5st-StyledAnchor-StyledDropdown eapzthe8"
+                class="etta2py3 HvBaseDropdown-anchor css-1b71fhc-StyledAnchor-StyledDropdown eapzthe7"
                 role="combobox"
                 tabindex="-1"
               >
                 <div
-                  class="HvBaseDropdown-header HvDropdown-dropdownHeader css-4bvoko-StyledHeaderRoot eapzthe7"
+                  class="HvBaseDropdown-header HvDropdown-dropdownHeader css-4bvoko-StyledHeaderRoot eapzthe6"
                   role="textbox"
                   tabindex="0"
                 >
                   <div
-                    class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+                    class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
                   >
                     <div
                       class="HvDropdown-placeholder etta2py0 HvTypography-root HvTypography-body css-1mbgbjx-getStyledComponent-StyledTypography e1tnpalo0"
@@ -107,22 +107,26 @@ exports[`<HvControls> > sample snapshot testing > Controls 1`] = `
                     </div>
                   </div>
                   <div
-                    class="HvBaseDropdown-arrow HvDropdown-arrow eapzthe3 css-1ij2a3c-StyledDropDownXS"
-                    name="DropDownXS"
+                    class="css-zsju0o-StyledAdornment eapzthe3"
                   >
-                    <svg
-                      focusable="false"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      class="HvBaseDropdown-arrow HvDropdown-arrow css-f95wjz"
+                      name="DropDownXS"
                     >
-                      <path
-                        class="color0"
-                        d="M5.99994 8.65 1.4 4.05l.7-.7L6 7.25l3.9-3.9.7.7z"
-                        fill="var(--uikit-colors-secondary)"
-                      />
-                    </svg>
+                      <svg
+                        focusable="false"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        width="12"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          class="color0"
+                          d="M5.99994 8.65 1.4 4.05l.7-.7L6 7.25l3.9-3.9.7.7z"
+                          fill="var(--uikit-colors-secondary)"
+                        />
+                      </svg>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -700,21 +704,21 @@ exports[`<HvControls> > sample snapshot testing > Controls Controlled 1`] = `
             class=" e16dy5r70 HvDropdown-root css-u5677i-StyledHvFormElement-StyledDropdown etta2py4 HvFormElement-root"
           >
             <div
-              class="HvBaseDropdown-root HvDropdown-dropdown css-1nukton-StyledRoot eapzthe9"
+              class="HvBaseDropdown-root HvDropdown-dropdown css-1nukton-StyledRoot eapzthe8"
             >
               <div
                 aria-expanded="false"
-                class="etta2py3 HvBaseDropdown-anchor css-hfl5st-StyledAnchor-StyledDropdown eapzthe8"
+                class="etta2py3 HvBaseDropdown-anchor css-1b71fhc-StyledAnchor-StyledDropdown eapzthe7"
                 role="combobox"
                 tabindex="-1"
               >
                 <div
-                  class="HvBaseDropdown-header HvDropdown-dropdownHeader css-4bvoko-StyledHeaderRoot eapzthe7"
+                  class="HvBaseDropdown-header HvDropdown-dropdownHeader css-4bvoko-StyledHeaderRoot eapzthe6"
                   role="textbox"
                   tabindex="0"
                 >
                   <div
-                    class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+                    class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
                   >
                     <div
                       class="HvDropdown-placeholder etta2py0 HvTypography-root HvTypography-body css-uq00g8-getStyledComponent-StyledTypography e1tnpalo0"
@@ -723,22 +727,26 @@ exports[`<HvControls> > sample snapshot testing > Controls Controlled 1`] = `
                     </div>
                   </div>
                   <div
-                    class="HvBaseDropdown-arrow HvDropdown-arrow eapzthe3 css-1ij2a3c-StyledDropDownXS"
-                    name="DropDownXS"
+                    class="css-zsju0o-StyledAdornment eapzthe3"
                   >
-                    <svg
-                      focusable="false"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      class="HvBaseDropdown-arrow HvDropdown-arrow css-f95wjz"
+                      name="DropDownXS"
                     >
-                      <path
-                        class="color0"
-                        d="M5.99994 8.65 1.4 4.05l.7-.7L6 7.25l3.9-3.9.7.7z"
-                        fill="var(--uikit-colors-secondary)"
-                      />
-                    </svg>
+                      <svg
+                        focusable="false"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        width="12"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          class="color0"
+                          d="M5.99994 8.65 1.4 4.05l.7-.7L6 7.25l3.9-3.9.7.7z"
+                          fill="var(--uikit-colors-secondary)"
+                        />
+                      </svg>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/src/components/DatePicker/DatePicker.styles.tsx b/packages/core/src/components/DatePicker/DatePicker.styles.tsx
index e60d1849ba..b57a72b2fe 100644
--- a/packages/core/src/components/DatePicker/DatePicker.styles.tsx
+++ b/packages/core/src/components/DatePicker/DatePicker.styles.tsx
@@ -28,10 +28,7 @@ export const styles: Partial<
   dropdown: {
     display: "block",
   },
-  panel: {
-    border: theme.datePicker.panelBorder,
-    backgroundColor: theme.datePicker.panelBackgroundColor,
-  },
+  panel: {},
 
   dropdownHeaderInvalid: {
     border: `1px solid ${theme.colors.negative}`,
@@ -39,17 +36,8 @@ export const styles: Partial<
       border: `1px solid ${theme.colors.negative}`,
     },
   },
-  dropdownHeaderOpen: {
-    border: theme.datePicker.dropdownHeaderOpenBorder,
-    "&:hover": {
-      border: theme.datePicker.dropdownHeaderOpenBorder,
-    },
-  },
-  icon: {
-    position: "absolute",
-    right: -1,
-    bottom: -1,
-  },
+  dropdownHeaderOpen: {},
+  icon: {},
   action: {
     "&:first-of-type": {
       marginRight: theme.space.xs,
diff --git a/packages/core/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/core/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
index a6d537c9bf..fc05281aa9 100644
--- a/packages/core/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/core/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -7,22 +7,22 @@ exports[`HvDatepicker > calendar custom properties > should render correctly 1`]
     id="testingDatePicker"
   >
     <div
-      class="HvBaseDropdown-root HvDatePicker-dropdown css-z8zbcm-StyledRoot eapzthe9"
+      class="HvBaseDropdown-root HvDatePicker-dropdown css-z8zbcm-StyledRoot eapzthe8"
     >
       <div
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+        class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
         role="combobox"
         tabindex="-1"
       >
         <div
-          class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe7"
+          class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe6"
           role="textbox"
           tabindex="0"
         >
           <div
-            class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+            class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
           >
             <p
               class="e2irjnc0 HvTypography-root HvTypography-body css-okb0r0-getStyledComponent-StyledTypography e1tnpalo0"
@@ -31,22 +31,26 @@ exports[`HvDatepicker > calendar custom properties > should render correctly 1`]
             </p>
           </div>
           <div
-            class="HvDatePicker-icon css-u6h4jc"
-            name="Calendar"
+            class="css-zsju0o-StyledAdornment eapzthe3"
           >
-            <svg
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="HvDatePicker-icon css-1ocd5l7"
+              name="Calendar"
             >
-              <path
-                class="color0"
-                d="M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z"
-                fill="var(--uikit-colors-secondary)"
-              />
-            </svg>
+              <svg
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  class="color0"
+                  d="M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z"
+                  fill="var(--uikit-colors-secondary)"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>
@@ -61,22 +65,22 @@ exports[`HvDatepicker > ranged calendar > should render correctly 1`] = `
     class="HvDatePicker-root css-79elbk HvFormElement-root"
   >
     <div
-      class="HvBaseDropdown-root HvDatePicker-dropdown css-z8zbcm-StyledRoot eapzthe9"
+      class="HvBaseDropdown-root HvDatePicker-dropdown css-z8zbcm-StyledRoot eapzthe8"
     >
       <div
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+        class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
         role="combobox"
         tabindex="-1"
       >
         <div
-          class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe7"
+          class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe6"
           role="textbox"
           tabindex="0"
         >
           <div
-            class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+            class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
           >
             <p
               class="e2irjnc0 HvTypography-root HvTypography-body css-1uypsb3-getStyledComponent-StyledTypography e1tnpalo0"
@@ -85,22 +89,26 @@ exports[`HvDatepicker > ranged calendar > should render correctly 1`] = `
             </p>
           </div>
           <div
-            class="HvDatePicker-icon css-u6h4jc"
-            name="Calendar"
+            class="css-zsju0o-StyledAdornment eapzthe3"
           >
-            <svg
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="HvDatePicker-icon css-1ocd5l7"
+              name="Calendar"
             >
-              <path
-                class="color0"
-                d="M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z"
-                fill="var(--uikit-colors-secondary)"
-              />
-            </svg>
+              <svg
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  class="color0"
+                  d="M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z"
+                  fill="var(--uikit-colors-secondary)"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>
@@ -116,24 +124,24 @@ exports[`HvDatepicker > sample snapshot testing > Main 1`] = `
     id="DatePicker"
   >
     <div
-      class="HvBaseDropdown-root HvDatePicker-dropdown css-z8zbcm-StyledRoot eapzthe9"
+      class="HvBaseDropdown-root HvDatePicker-dropdown css-z8zbcm-StyledRoot eapzthe8"
     >
       <div
         aria-expanded="false"
         aria-haspopup="dialog"
         aria-label="Date"
-        class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+        class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
         role="combobox"
         tabindex="-1"
       >
         <div
           aria-label="Date"
-          class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe7"
+          class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe6"
           role="textbox"
           tabindex="0"
         >
           <div
-            class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+            class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
           >
             <p
               class="e2irjnc0 HvTypography-root HvTypography-body css-okb0r0-getStyledComponent-StyledTypography e1tnpalo0"
@@ -142,22 +150,26 @@ exports[`HvDatepicker > sample snapshot testing > Main 1`] = `
             </p>
           </div>
           <div
-            class="HvDatePicker-icon css-u6h4jc"
-            name="Calendar"
+            class="css-zsju0o-StyledAdornment eapzthe3"
           >
-            <svg
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="HvDatePicker-icon css-1ocd5l7"
+              name="Calendar"
             >
-              <path
-                class="color0"
-                d="M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z"
-                fill="var(--uikit-colors-secondary)"
-              />
-            </svg>
+              <svg
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  class="color0"
+                  d="M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z"
+                  fill="var(--uikit-colors-secondary)"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>
@@ -172,22 +184,22 @@ exports[`HvDatepicker > single calendar > should render correctly 1`] = `
     class="HvDatePicker-root css-79elbk HvFormElement-root"
   >
     <div
-      class="HvBaseDropdown-root HvDatePicker-dropdown css-z8zbcm-StyledRoot eapzthe9"
+      class="HvBaseDropdown-root HvDatePicker-dropdown css-z8zbcm-StyledRoot eapzthe8"
     >
       <div
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+        class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
         role="combobox"
         tabindex="-1"
       >
         <div
-          class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe7"
+          class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe6"
           role="textbox"
           tabindex="0"
         >
           <div
-            class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+            class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
           >
             <p
               class="e2irjnc0 HvTypography-root HvTypography-body css-1uypsb3-getStyledComponent-StyledTypography e1tnpalo0"
@@ -196,22 +208,26 @@ exports[`HvDatepicker > single calendar > should render correctly 1`] = `
             </p>
           </div>
           <div
-            class="HvDatePicker-icon css-u6h4jc"
-            name="Calendar"
+            class="css-zsju0o-StyledAdornment eapzthe3"
           >
-            <svg
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="HvDatePicker-icon css-1ocd5l7"
+              name="Calendar"
             >
-              <path
-                class="color0"
-                d="M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z"
-                fill="var(--uikit-colors-secondary)"
-              />
-            </svg>
+              <svg
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  class="color0"
+                  d="M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z"
+                  fill="var(--uikit-colors-secondary)"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>
@@ -226,44 +242,48 @@ exports[`HvDatepicker > with minimum configuration > should render correctly 1`]
     class="HvDatePicker-root css-79elbk HvFormElement-root"
   >
     <div
-      class="HvBaseDropdown-root HvDatePicker-dropdown css-z8zbcm-StyledRoot eapzthe9"
+      class="HvBaseDropdown-root HvDatePicker-dropdown css-z8zbcm-StyledRoot eapzthe8"
     >
       <div
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+        class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
         role="combobox"
         tabindex="-1"
       >
         <div
-          class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe7"
+          class="HvBaseDropdown-header css-4bvoko-StyledHeaderRoot eapzthe6"
           role="textbox"
           tabindex="0"
         >
           <div
-            class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+            class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
           >
             <p
               class="e2irjnc0 HvTypography-root HvTypography-body css-okb0r0-getStyledComponent-StyledTypography e1tnpalo0"
             />
           </div>
           <div
-            class="HvDatePicker-icon css-u6h4jc"
-            name="Calendar"
+            class="css-zsju0o-StyledAdornment eapzthe3"
           >
-            <svg
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="HvDatePicker-icon css-1ocd5l7"
+              name="Calendar"
             >
-              <path
-                class="color0"
-                d="M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z"
-                fill="var(--uikit-colors-secondary)"
-              />
-            </svg>
+              <svg
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  class="color0"
+                  d="M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z"
+                  fill="var(--uikit-colors-secondary)"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/core/src/components/DropDownMenu/DropDownMenu.styles.tsx b/packages/core/src/components/DropDownMenu/DropDownMenu.styles.tsx
index 88ce5219a2..18cb1a91d3 100644
--- a/packages/core/src/components/DropDownMenu/DropDownMenu.styles.tsx
+++ b/packages/core/src/components/DropDownMenu/DropDownMenu.styles.tsx
@@ -41,8 +41,5 @@ export const styles: Partial<
     borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,
     border: theme.dropDownMenu.borderOpened,
   },
-  menuListRoot: {
-    border: theme.dropDownMenu.borderOpened,
-    borderRadius: theme.dropDownMenu.borderRadius,
-  },
+  menuListRoot: {},
 };
diff --git a/packages/core/src/components/DropDownMenu/__snapshots__/DropDownMenu.test.tsx.snap b/packages/core/src/components/DropDownMenu/__snapshots__/DropDownMenu.test.tsx.snap
index 2813cbffa6..9a8e9f06c0 100644
--- a/packages/core/src/components/DropDownMenu/__snapshots__/DropDownMenu.test.tsx.snap
+++ b/packages/core/src/components/DropDownMenu/__snapshots__/DropDownMenu.test.tsx.snap
@@ -3,12 +3,12 @@
 exports[`DropDownMenu > should render correctly 1`] = `
 <div>
   <div
-    class="HvBaseDropdown-root HvDropDownMenu-root hv-1u1foky-StyledRoot eapzthe9"
+    class="HvBaseDropdown-root HvDropDownMenu-root hv-1u1foky-StyledRoot eapzthe8"
   >
     <div
       aria-expanded="false"
       aria-haspopup="menu"
-      class="HvDropDownMenu-container HvBaseDropdown-anchor hv-10kxauw-StyledAnchor eapzthe8"
+      class="HvDropDownMenu-container HvBaseDropdown-anchor hv-10kxauw-StyledAnchor eapzthe7"
       id="dropdown-menu4"
       tabindex="-1"
     >
diff --git a/packages/core/src/components/Dropdown/Dropdown.styles.tsx b/packages/core/src/components/Dropdown/Dropdown.styles.tsx
index 4f4cf6668e..f1b5ccec2d 100644
--- a/packages/core/src/components/Dropdown/Dropdown.styles.tsx
+++ b/packages/core/src/components/Dropdown/Dropdown.styles.tsx
@@ -37,13 +37,9 @@ export const StyledDropdown = styled(
     $readOnly?: boolean;
   }) => ({
     width: "100%",
-    borderRadius: 2,
+    borderRadius: theme.radii.base,
 
     [`& .${dropdownClasses.dropdownHeader}`]: {
-      border: theme.dropdown.headerBorder,
-      "&:hover": {
-        border: `1px solid ${theme.colors.secondary_80}`,
-      },
       ...($dropdownHeaderInvalid && {
         border: "none",
         "&:hover": {
@@ -62,13 +58,6 @@ export const StyledDropdown = styled(
         border: theme.dropdown.dropdownHeaderInvalidBorder,
       },
     },
-
-    [`& .${dropdownClasses.dropdownHeaderOpen}`]: {
-      border: theme.dropdown.dropdownHeaderOpenBorder,
-      "&:hover": {
-        border: theme.dropdown.dropdownHeaderOpenBorder,
-      },
-    },
   })
 );
 
diff --git a/packages/core/src/components/Dropdown/List/List.styles.tsx b/packages/core/src/components/Dropdown/List/List.styles.tsx
index 09b5ce82bd..8e3d365da4 100644
--- a/packages/core/src/components/Dropdown/List/List.styles.tsx
+++ b/packages/core/src/components/Dropdown/List/List.styles.tsx
@@ -3,12 +3,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 import { HvList, HvListProps } from "@core/components";
 import { transientOptions } from "@core/utils/transientOptions";
 
-export const StyledRootList = styled("div")({
-  width: "100%",
-  backgroundColor: theme.dropdown.listBackgroundColor,
-  border: theme.dropdown.listBorder,
-  borderRadius: theme.dropdown.listBorderRadius,
-});
+export const StyledRootList = styled("div")({});
 
 export const StyledListContainer = styled("div")({
   padding: theme.dropdown.listContainerPadding,
diff --git a/packages/core/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/core/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index f567ba732c..f862a477c2 100644
--- a/packages/core/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/core/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -9,23 +9,23 @@ exports[`Dropdown > should render correctly 1`] = `
       class="HvDropdown-root css-13v24hy-StyledHvFormElement etta2py4 HvFormElement-root"
     >
       <div
-        class="HvBaseDropdown-root HvDropdown-dropdown css-1nukton-StyledRoot eapzthe9"
+        class="HvBaseDropdown-root HvDropdown-dropdown css-1nukton-StyledRoot eapzthe8"
       >
         <div
           aria-expanded="false"
           aria-label="Main sample"
-          class="etta2py3 HvBaseDropdown-anchor css-hfl5st-StyledAnchor-StyledDropdown eapzthe8"
+          class="etta2py3 HvBaseDropdown-anchor css-1b71fhc-StyledAnchor-StyledDropdown eapzthe7"
           role="combobox"
           tabindex="-1"
         >
           <div
             aria-label="Main sample"
-            class="HvBaseDropdown-header HvDropdown-dropdownHeader css-4bvoko-StyledHeaderRoot eapzthe7"
+            class="HvBaseDropdown-header HvDropdown-dropdownHeader css-4bvoko-StyledHeaderRoot eapzthe6"
             role="textbox"
             tabindex="0"
           >
             <div
-              class="HvBaseDropdown-selection css-b6yxdh-StyledSelection eapzthe6"
+              class="HvBaseDropdown-selection css-14ov9q3-StyledSelection eapzthe5"
             >
               <div
                 class="HvDropdown-placeholder etta2py0 HvTypography-root HvTypography-body css-1mbgbjx-getStyledComponent-StyledTypography e1tnpalo0"
@@ -37,22 +37,26 @@ exports[`Dropdown > should render correctly 1`] = `
               </div>
             </div>
             <div
-              class="HvBaseDropdown-arrow HvDropdown-arrow eapzthe3 css-1ij2a3c-StyledDropDownXS"
-              name="DropDownXS"
+              class="css-zsju0o-StyledAdornment eapzthe3"
             >
-              <svg
-                focusable="false"
-                height="12"
-                viewBox="0 0 12 12"
-                width="12"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="HvBaseDropdown-arrow HvDropdown-arrow css-f95wjz"
+                name="DropDownXS"
               >
-                <path
-                  class="color0"
-                  d="M5.99994 8.65 1.4 4.05l.7-.7L6 7.25l3.9-3.9.7.7z"
-                  fill="var(--uikit-colors-secondary)"
-                />
-              </svg>
+                <svg
+                  focusable="false"
+                  height="12"
+                  viewBox="0 0 12 12"
+                  width="12"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="color0"
+                    d="M5.99994 8.65 1.4 4.05l.7-.7L6 7.25l3.9-3.9.7.7z"
+                    fill="var(--uikit-colors-secondary)"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/core/src/components/FilterGroup/Counter/Counter.styles.tsx b/packages/core/src/components/FilterGroup/Counter/Counter.styles.tsx
index a75dd21a5b..8bcea6c20c 100644
--- a/packages/core/src/components/FilterGroup/Counter/Counter.styles.tsx
+++ b/packages/core/src/components/FilterGroup/Counter/Counter.styles.tsx
@@ -6,10 +6,8 @@ export const styles: Partial<
   Record<keyof HvFilterGroupCounterClasses, CSSInterpolation>
 > = {
   root: {
-    height: "100%",
-    lineHeight: "32px",
-    margin: "0 10px",
-    pointerEvents: "none",
+    lineHeight: "34px",
+    marginRight: 10,
   },
   partialCounter: {
     display: "inline-block",
diff --git a/packages/core/src/components/FilterGroup/FilterContent/FilterContent.styles.tsx b/packages/core/src/components/FilterGroup/FilterContent/FilterContent.styles.tsx
index bb4ffc6f39..e7917be53b 100644
--- a/packages/core/src/components/FilterGroup/FilterContent/FilterContent.styles.tsx
+++ b/packages/core/src/components/FilterGroup/FilterContent/FilterContent.styles.tsx
@@ -19,11 +19,8 @@ export const styles: Partial<
   },
   root: {
     width: 640,
-    backgroundColor: theme.colors.atmo1,
     maxHeight: "calc(500px - 75px)",
     minHeight: "calc(370px - 75px)",
-    border: theme.filterGroup.panelsBorder,
-    borderBottom: theme.filterGroup.panelsBorderBottom,
   },
   rightSidePanel: {
     display: "inline-block",
@@ -48,12 +45,7 @@ export const styles: Partial<
     padding: 4,
     margin: `calc(${theme.spacing("sm")} - 4px)`,
   },
-  actionBar: {
-    backgroundColor: theme.colors.atmo1,
-    border: theme.filterGroup.actionBarBorder,
-    borderTop: theme.filterGroup.actionBarBorderTop,
-    alignItems: "center",
-  },
+  actionBar: {},
   space: {
     flex: 1,
   },
diff --git a/packages/core/src/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap b/packages/core/src/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap
index 08170b6383..860636d4af 100644
--- a/packages/core/src/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap
+++ b/packages/core/src/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap
@@ -10,24 +10,24 @@ exports[`FilterGroup > should render correctly 1`] = `
       id="filter-group-main"
     >
       <div
-        class="HvBaseDropdown-root HvFilterGroupContent-dropdown css-1nukton-StyledRoot eapzthe9"
+        class="HvBaseDropdown-root HvFilterGroupContent-dropdown css-1nukton-StyledRoot eapzthe8"
       >
         <div
           aria-expanded="false"
           aria-haspopup="dialog"
-          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe8"
+          class="HvBaseDropdown-anchor css-c41kvr-StyledAnchor eapzthe7"
           id="filter-group-main-dropdown"
           role="combobox"
           tabindex="-1"
         >
           <div
-            class="HvBaseDropdown-header HvFilterGroupContent-header css-1vsvx69-StyledHeaderRoot eapzthe7"
+            class="HvBaseDropdown-header HvFilterGroupContent-header css-1vsvx69-StyledHeaderRoot eapzthe6"
             id="filter-group-main-dropdown-header"
             role="textbox"
             tabindex="0"
           >
             <div
-              class="HvBaseDropdown-selection HvFilterGroupContent-baseDropdownSelection css-dcsvb4-StyledSelection eapzthe6"
+              class="HvBaseDropdown-selection HvFilterGroupContent-baseDropdownSelection css-1n8at67-StyledSelection eapzthe5"
             >
               <div
                 class="css-f95wjz"
@@ -54,14 +54,18 @@ exports[`FilterGroup > should render correctly 1`] = `
               </label>
             </div>
             <div
-              class="HvFilterGroupCounter-root css-10czyyf"
+              class="css-zsju0o-StyledAdornment eapzthe3"
             >
-              <p
-                class="HvFilterGroupCounter-partialCounter css-atimhy"
+              <div
+                class="HvFilterGroupCounter-root css-xrd8ac"
               >
-                4
-              </p>
-               / 20
+                <p
+                  class="HvFilterGroupCounter-partialCounter css-atimhy"
+                >
+                  4
+                </p>
+                 / 20
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/core/src/components/Pagination/Pagination.tsx b/packages/core/src/components/Pagination/Pagination.tsx
index de2796c2d7..aeac27734f 100644
--- a/packages/core/src/components/Pagination/Pagination.tsx
+++ b/packages/core/src/components/Pagination/Pagination.tsx
@@ -232,7 +232,6 @@ export const HvPagination = ({
                 paginationClasses.pageSizeOptionsSelect,
                 classes?.pageSizeOptionsSelect
               )}
-              classes={{}}
               aria-label={labels?.pageSizeSelectorDescription}
               onChange={(_, val: number) => onPageSizeChange?.(val)}
               value={pageSize}
diff --git a/packages/core/src/components/Pagination/Select.styles.tsx b/packages/core/src/components/Pagination/Select.styles.tsx
index d47125f7ea..f150fae56c 100644
--- a/packages/core/src/components/Pagination/Select.styles.tsx
+++ b/packages/core/src/components/Pagination/Select.styles.tsx
@@ -1,25 +1,18 @@
-import styled from "@emotion/styled";
+import { createClasses } from "@core/utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { baseDropdownClasses } from "@core/components";
 
-export const StyledRoot = styled("div")({
-  [`& .${baseDropdownClasses.root}`]: {
-    width: "auto",
-
-    [`& > div.${baseDropdownClasses.anchor}`]: {
-      width: "auto",
-    },
-    [`& .${baseDropdownClasses.header}`]: {
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-    },
-    [`& .${baseDropdownClasses.headerOpen}`]: {
-      backgroundColor: theme.colors.atmo1,
-      borderColor: theme.colors.atmo1,
-    },
-    [`& .${baseDropdownClasses.selection}`]: {
-      borderRadius: theme.pagination.pageSizeBorderRadius,
-      border: `1px solid ${theme.pagination.pageSizeBorderColor}`,
+export const { useClasses } = createClasses("HvPaginationSelect", {
+  header: {
+    backgroundColor: "transparent",
+    borderColor: theme.pagination.pageSizeBorderColor,
+    "&:hover": {
+      borderColor: theme.pagination.pageSizeHoverBorderColor,
     },
   },
+  selection: {
+    padding: theme.spacing([0, "md", 0, "xs"]),
+  },
+  headerOpen: {
+    backgroundColor: theme.colors.atmo1,
+  },
 });
diff --git a/packages/core/src/components/Pagination/Select.tsx b/packages/core/src/components/Pagination/Select.tsx
index 70438818c4..75419a6e3d 100644
--- a/packages/core/src/components/Pagination/Select.tsx
+++ b/packages/core/src/components/Pagination/Select.tsx
@@ -1,13 +1,6 @@
 import { useState } from "react";
-import { clsx } from "clsx";
-import {
-  HvBaseDropdown,
-  HvSelectionList,
-  HvListItem,
-  HvPanel,
-  HvTypography,
-} from "../index";
-import { StyledRoot } from "./Select.styles";
+import { HvBaseDropdown, HvSelectionList, HvListItem, HvPanel } from "..";
+import { useClasses } from "./Select.styles";
 
 export const Option = ({ children, ...others }) => (
   <HvListItem {...others}>{children}</HvListItem>
@@ -15,13 +8,14 @@ export const Option = ({ children, ...others }) => (
 
 const HvSelect = ({
   className,
-  classes,
+  classes: classesProp = {},
   onChange,
   disabled,
   value,
   children,
   ...others
 }) => {
+  const { classes } = useClasses(classesProp);
   const [open, setOpen] = useState(false);
 
   const handleSelect = (evt, val) => {
@@ -46,30 +40,27 @@ const HvSelect = ({
   };
 
   return (
-    <StyledRoot>
-      <HvBaseDropdown
-        className={className}
-        classes={{
-          root: clsx(classes.base, classes.root),
-          anchor: classes.anchor,
-          header: classes.header,
-          headerOpen: classes.headerOpen,
-        }}
-        expanded={open}
-        onToggle={handleToggle}
-        onContainerCreation={setFocusToContent}
-        placeholder={<HvTypography>{value}</HvTypography>}
-        disabled={disabled}
-        variableWidth
-        {...others}
-      >
-        <HvPanel>
-          <HvSelectionList value={value} onChange={handleSelect}>
-            {children}
-          </HvSelectionList>
-        </HvPanel>
-      </HvBaseDropdown>
-    </StyledRoot>
+    <HvBaseDropdown
+      className={className}
+      classes={{
+        selection: classes.selection,
+        header: classes.header,
+        headerOpen: classes.headerOpen,
+      }}
+      expanded={open}
+      onToggle={handleToggle}
+      onContainerCreation={setFocusToContent}
+      placeholder={value}
+      disabled={disabled}
+      variableWidth
+      {...others}
+    >
+      <HvPanel>
+        <HvSelectionList value={value} onChange={handleSelect}>
+          {children}
+        </HvSelectionList>
+      </HvPanel>
+    </HvBaseDropdown>
   );
 };
 
diff --git a/packages/core/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/core/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
index fa7c291eee..97ac68df6d 100644
--- a/packages/core/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/core/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -9,35 +9,31 @@ exports[`Pagination > should render correctly 1`] = `
       class="HvPagination-pageSizeOptions hv-191htxu-StyledPageSizeOptions e1tn2n0k7"
     >
       <div
-        class="hv-7ddhyu-StyledRoot eakxe9u0"
+        class="HvBaseDropdown-root hv-1nukton-StyledRoot eapzthe8"
       >
         <div
-          class="HvBaseDropdown-root hv-1nukton-StyledRoot eapzthe9"
+          aria-expanded="false"
+          aria-label="Select how many to display"
+          class="HvPagination-pageSizeOptionsSelect e1tn2n0k5 HvBaseDropdown-anchor hv-7v8964-StyledAnchor-StyledSelect eapzthe7"
+          role="combobox"
+          tabindex="-1"
         >
           <div
-            aria-expanded="false"
             aria-label="Select how many to display"
-            class="HvPagination-pageSizeOptionsSelect e1tn2n0k5 HvBaseDropdown-anchor hv-7v8964-StyledAnchor-StyledSelect eapzthe8"
-            role="combobox"
-            tabindex="-1"
+            class="HvBaseDropdown-header HvPaginationSelect-header hv-8g6cid-StyledHeaderRoot eapzthe6"
+            role="textbox"
+            tabindex="0"
           >
             <div
-              aria-label="Select how many to display"
-              class="HvBaseDropdown-header hv-4bvoko-StyledHeaderRoot eapzthe7"
-              role="textbox"
-              tabindex="0"
+              class="HvBaseDropdown-selection HvPaginationSelect-selection hv-6beslu-StyledSelection eapzthe5"
+            >
+              1
+            </div>
+            <div
+              class="hv-zsju0o-StyledAdornment eapzthe3"
             >
               <div
-                class="HvBaseDropdown-selection hv-b6yxdh-StyledSelection eapzthe6"
-              >
-                <p
-                  class="HvTypography-root HvTypography-body hv-1fbl1cl-getStyledComponent e1tnpalo0"
-                >
-                  1
-                </p>
-              </div>
-              <div
-                class="HvBaseDropdown-arrow eapzthe3 hv-1ij2a3c-StyledDropDownXS"
+                class="HvBaseDropdown-arrow hv-f95wjz"
                 name="DropDownXS"
               >
                 <svg
diff --git a/packages/styles/src/theme.ts b/packages/styles/src/theme.ts
index 5cf2b40bb3..47e1c4f29d 100644
--- a/packages/styles/src/theme.ts
+++ b/packages/styles/src/theme.ts
@@ -13,17 +13,11 @@ import { mapCSSVars } from "./utils";
 const componentsSpec: DeepString<HvThemeComponents> = {
   dropdown: {
     borderRadius: "string",
-    headerBorder: "string",
-    headerBorderHover: "string",
     disabledColor: "string",
     readOnlyBorder: "string",
     readOnlyBackgroundColor: "string",
     placeholderColor: "string",
     dropdownHeaderInvalidBorder: "string",
-    dropdownHeaderOpenBorder: "string",
-    listBackgroundColor: "string",
-    listBorder: "string",
-    listBorderRadius: "string",
     listContainerPadding: "string",
     searchContainerMargin: "string",
   },
@@ -212,8 +206,7 @@ const componentsSpec: DeepString<HvThemeComponents> = {
   },
   pagination: {
     pageSizeBorderColor: "string",
-    pageSizeBorderRadius: "string",
-    pageJumpTextAlign: "string",
+    pageSizeHoverBorderColor: "string",
   },
   actionsGeneric: { buttonSize: "string" },
   bulkActions: {
@@ -291,10 +284,6 @@ const componentsSpec: DeepString<HvThemeComponents> = {
     applyButtonVariant: "string",
     cancelButtonVariant: "string",
     applyButtonMarginRight: "string",
-    panelsBorder: "string",
-    panelsBorderBottom: "string",
-    actionBarBorder: "string",
-    actionBarBorderTop: "string",
     rightPanelBorderLeft: "string",
     rightPanelShadow: "string",
     partialCounterFontWeight: "string",
@@ -303,9 +292,6 @@ const componentsSpec: DeepString<HvThemeComponents> = {
     disabledBackgroundColor: "string",
   },
   datePicker: {
-    panelBorder: "string",
-    panelBackgroundColor: "string",
-    dropdownHeaderOpenBorder: "string",
     dropdownPlaceholderColor: "string",
     placeholderVariant: "string",
   },
@@ -349,8 +335,6 @@ const componentsSpec: DeepString<HvThemeComponents> = {
   },
   colorPicker: {
     inputValueVariant: "string",
-    panelBorder: "string",
-    panelBorderRadius: "string",
     panelMinWidth: "string",
     panelPadding: "string",
     pickersFlexDirection: "string",
diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
index 59b2957220..942b691ca1 100644
--- a/packages/styles/src/themes/ds3.ts
+++ b/packages/styles/src/themes/ds3.ts
@@ -229,17 +229,11 @@ const ds3 = makeTheme((theme: HvTheme) => ({
   },
   dropdown: {
     borderRadius: "2px",
-    headerBorder: `1px solid ${theme.colors.atmo4}`,
-    headerBorderHover: `1px solid ${theme.colors.secondary_80}`,
     disabledColor: theme.colors.secondary_60,
     readOnlyBorder: "none",
     readOnlyBackgroundColor: theme.colors.atmo1,
     placeholderColor: theme.colors.secondary_60,
     dropdownHeaderInvalidBorder: `1px solid ${theme.colors.negative}`,
-    dropdownHeaderOpenBorder: `1px solid ${theme.colors.atmo1}`,
-    listBackgroundColor: theme.colors.atmo1,
-    listBorder: "none",
-    listBorderRadius: `none`,
     listContainerPadding: theme.space.sm,
     searchContainerMargin: theme.space.xs,
   },
@@ -321,7 +315,7 @@ const ds3 = makeTheme((theme: HvTheme) => ({
     disabledBackgroundColor: theme.colors.atmo3,
     readOnlyBorder: "none",
     readOnlyBackgroundColor: theme.colors.atmo1,
-    openBorderColor: theme.colors.atmo1,
+    openBorderColor: "transparent",
   },
   baseRadio: {
     hoverColor: theme.colors.atmo3,
@@ -428,8 +422,7 @@ const ds3 = makeTheme((theme: HvTheme) => ({
   },
   pagination: {
     pageSizeBorderColor: "transparent",
-    pageSizeBorderRadius: "0px",
-    pageJumpTextAlign: "right",
+    pageSizeHoverBorderColor: "transparent",
   },
   actionsGeneric: { buttonSize: "sm" },
   bulkActions: {
@@ -507,10 +500,6 @@ const ds3 = makeTheme((theme: HvTheme) => ({
     applyButtonVariant: "secondaryGhost",
     cancelButtonVariant: "secondaryGhost",
     applyButtonMarginRight: "0px",
-    panelsBorder: "none",
-    panelsBorderBottom: "none",
-    actionBarBorder: "none",
-    actionBarBorderTop: `3px solid ${theme.colors.atmo2}`,
     rightPanelBorderLeft: "none",
     rightPanelShadow: `inset 8px 0 8px -6px ${theme.colors.shad1}`,
     partialCounterFontWeight: theme.fontWeights.bold,
@@ -519,9 +508,6 @@ const ds3 = makeTheme((theme: HvTheme) => ({
     disabledBackgroundColor: theme.colors.atmo2,
   },
   datePicker: {
-    panelBorder: `1px solid ${theme.colors.atmo1}`,
-    panelBackgroundColor: theme.colors.atmo1,
-    dropdownHeaderOpenBorder: `1px solid ${theme.colors.atmo1}`,
     dropdownPlaceholderColor: theme.colors.secondary_60,
     placeholderVariant: "body",
   },
@@ -565,8 +551,6 @@ const ds3 = makeTheme((theme: HvTheme) => ({
   },
   colorPicker: {
     inputValueVariant: "body",
-    panelBorder: "none",
-    panelBorderRadius: theme.radii.none,
     panelMinWidth: "240px",
     panelPadding: "20px 15px 20px 20px",
     pickersFlexDirection: "row",
diff --git a/packages/styles/src/themes/ds5.ts b/packages/styles/src/themes/ds5.ts
index 65419a2fc0..ff69a68bf8 100644
--- a/packages/styles/src/themes/ds5.ts
+++ b/packages/styles/src/themes/ds5.ts
@@ -172,17 +172,11 @@ const ds5 = makeTheme((theme: HvTheme) => ({
   },
   dropdown: {
     borderRadius: theme.radii.base,
-    headerBorder: `1px solid ${theme.colors.secondary_80}`,
-    headerBorderHover: `1px solid ${theme.colors.secondary_80}`,
     disabledColor: theme.colors.secondary_60,
     readOnlyBorder: `1px solid ${theme.colors.secondary_80}`,
     readOnlyBackgroundColor: theme.colors.atmo1,
     placeholderColor: theme.colors.secondary_80,
     dropdownHeaderInvalidBorder: `1px solid ${theme.colors.negative}`,
-    dropdownHeaderOpenBorder: `1px solid ${theme.colors.secondary}`,
-    listBackgroundColor: theme.colors.atmo1,
-    listBorder: `1px solid ${theme.colors.secondary}`,
-    listBorderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,
     listContainerPadding: theme.space.sm,
     searchContainerMargin: theme.space.xs,
   },
@@ -370,9 +364,8 @@ const ds5 = makeTheme((theme: HvTheme) => ({
     extensionBorderColor: theme.colors.secondary_80,
   },
   pagination: {
-    pageSizeBorderColor: theme.colors.secondary,
-    pageSizeBorderRadius: theme.radii.base,
-    pageJumpTextAlign: "center",
+    pageSizeBorderColor: theme.colors.secondary_80,
+    pageSizeHoverBorderColor: theme.colors.secondary_80,
   },
   actionsGeneric: { buttonSize: "md" },
   bulkActions: {
@@ -450,10 +443,6 @@ const ds5 = makeTheme((theme: HvTheme) => ({
     applyButtonVariant: "primary",
     cancelButtonVariant: "secondarySubtle",
     applyButtonMarginRight: "8px",
-    panelsBorder: `1px solid ${theme.colors.secondary_80}`,
-    panelsBorderBottom: "none",
-    actionBarBorder: `1px solid ${theme.colors.secondary_80}`,
-    actionBarBorderTop: `1px solid ${theme.colors.atmo3}`,
     rightPanelBorderLeft: `1px solid ${theme.colors.atmo3}`,
     rightPanelShadow: "none",
     partialCounterFontWeight: theme.fontWeights.normal,
@@ -462,9 +451,6 @@ const ds5 = makeTheme((theme: HvTheme) => ({
     disabledBackgroundColor: theme.colors.atmo3,
   },
   datePicker: {
-    panelBorder: `1px solid ${theme.colors.secondary}`,
-    panelBackgroundColor: theme.colors.atmo1,
-    dropdownHeaderOpenBorder: `1px solid ${theme.colors.secondary}`,
     dropdownPlaceholderColor: theme.colors.secondary_80,
     placeholderVariant: "label",
   },
@@ -508,8 +494,6 @@ const ds5 = makeTheme((theme: HvTheme) => ({
   },
   colorPicker: {
     inputValueVariant: "label",
-    panelBorder: `1px solid ${theme.colors.secondary_80}`,
-    panelBorderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,
     panelMinWidth: "266px",
     panelPadding: "16px",
     pickersFlexDirection: "column",
diff --git a/packages/styles/src/types.ts b/packages/styles/src/types.ts
index 1528876160..250e23f93a 100644
--- a/packages/styles/src/types.ts
+++ b/packages/styles/src/types.ts
@@ -20,17 +20,11 @@ export type HvThemeTokens = typeof flattenTokens;
 export type HvThemeComponents = {
   dropdown: {
     borderRadius: string;
-    headerBorder: string;
-    headerBorderHover: string;
     disabledColor: string;
     readOnlyBorder: string;
     readOnlyBackgroundColor: string;
     placeholderColor: string;
     dropdownHeaderInvalidBorder: string;
-    dropdownHeaderOpenBorder: string;
-    listBackgroundColor: string;
-    listBorder: string;
-    listBorderRadius: string;
     listContainerPadding: string;
     searchContainerMargin: string;
   };
@@ -219,8 +213,7 @@ export type HvThemeComponents = {
   };
   pagination: {
     pageSizeBorderColor: string;
-    pageSizeBorderRadius: string;
-    pageJumpTextAlign: string;
+    pageSizeHoverBorderColor: string;
   };
   actionsGeneric: { buttonSize: string };
   bulkActions: {
@@ -298,10 +291,6 @@ export type HvThemeComponents = {
     applyButtonVariant: string;
     cancelButtonVariant: string;
     applyButtonMarginRight: string;
-    panelsBorder: string;
-    panelsBorderBottom: string;
-    actionBarBorder: string;
-    actionBarBorderTop: string;
     rightPanelBorderLeft: string;
     rightPanelShadow: string;
     partialCounterFontWeight: string;
@@ -310,9 +299,6 @@ export type HvThemeComponents = {
     disabledBackgroundColor: string;
   };
   datePicker: {
-    panelBorder: string;
-    panelBackgroundColor: string;
-    dropdownHeaderOpenBorder: string;
     dropdownPlaceholderColor: string;
     placeholderVariant: keyof HvThemeTypography["typography"];
   };
@@ -356,8 +342,6 @@ export type HvThemeComponents = {
   };
   colorPicker: {
     inputValueVariant: keyof HvThemeTypography["typography"];
-    panelBorder: string;
-    panelBorderRadius: string;
     panelMinWidth: string;
     panelPadding: string;
     pickersFlexDirection: CSSProperties["flexDirection"];