dhre-ui-kit 3.2.0 → 3.3.0

package/lib/index.mjs

@@ -189,6 +189,7 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["STROKE_ACTIVE"] = "STROKE_ACTIVE";
   Theme2["STROKE_DISABLED_SELECTED"] = "STROKE_DISABLED_SELECTED";
   Theme2["SHADOW_10"] = "SHADOW_10";
+  Theme2["SHADOW_SOFT_LIGHTEST"] = "SHADOW_SOFT_LIGHTEST";
   return Theme2;
 })(Theme || {});
 
@@ -876,6 +877,12 @@ const theme = {
   [Theme.SHADOW_10]: {
     dark: "rgba(255, 255, 255, 0.20)",
     light: "rgba(0, 0, 0, 0.10)"
+  },
+  // Figma: effects/dh-shadow/5, "Shadow/Soft/Lightest" (dropdown/menu surfaces).
+  [Theme.SHADOW_SOFT_LIGHTEST]: {
+    dark: "rgba(255, 255, 255, 0.05)",
+    light: "rgba(0, 10, 40, 0.05)"
+    // light-theme value pending DHDS Figma spec
   }
 };
 
@@ -11877,19 +11884,32 @@ const CustomDropdown = (props) => {
   };
   const renderItem = (item) => {
     const isSelected = item[valueField] === value;
-    return /* @__PURE__ */ React.createElement(View, { style: [styles$6.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React.createElement(
-      Text,
+    return /* @__PURE__ */ React.createElement(
+      View,
       {
         style: [
-          styles$6.itemText,
-          FONT_STYLES[FontStyle.BODY2_LIGHT],
-          { color: theme.CONTENT_PRIMARY },
-          itemTextStyle,
-          isSelected && selectedItemTextStyle
+          styles$6.itemContainer,
+          isSelected && {
+            backgroundColor: theme.SURFACE_INVERTED,
+            borderRadius: DHRE_RADIUS_BASE.RADIUS_8
+          },
+          itemContainerStyle
         ]
       },
-      item[labelField]
-    ));
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [
+            styles$6.itemText,
+            FONT_STYLES[FontStyle.BODY1_MEDIUM],
+            { color: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_PRIMARY },
+            itemTextStyle,
+            isSelected && selectedItemTextStyle
+          ]
+        },
+        item[labelField]
+      )
+    );
   };
   return /* @__PURE__ */ React.createElement(View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
     Dropdown,
@@ -11942,7 +11962,13 @@ const CustomDropdown = (props) => {
           backgroundColor: theme.SURFACE_SECONDARY,
           borderColor: theme.STROKE_TERTIARY,
           borderWidth: 1,
-          borderRadius: DHRE_RADIUS_BASE.RADIUS_8
+          borderRadius: DHRE_RADIUS_BASE.RADIUS_8,
+          padding: DHRE_PADDING_BASE.PADDING_16,
+          shadowColor: theme.SHADOW_SOFT_LIGHTEST,
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 1,
+          shadowRadius: 10,
+          elevation: 4
         },
         menuContainerStyle
       ],
@@ -12003,8 +12029,10 @@ const styles$6 = StyleSheet.create({
     maxHeight: verticalScale(150)
   },
   itemContainer: {
+    minHeight: verticalScale(48),
     paddingVertical: verticalScale(8),
-    paddingHorizontal: horizontalScale(12)
+    paddingHorizontal: horizontalScale(16),
+    justifyContent: "center"
   },
   itemText: {},
   helperText: {