@dloizides/ui-forms 1.18.0 → 1.18.2

package/dist/index.mjs

@@ -5,6 +5,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '@dloizides/ui-buttons';
 import { createPortal } from 'react-dom';
 import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
+import { Z_INDEX } from '@dloizides/design-tokens';
 
 // src/Field/Field.tsx
 function attachControlId(child, candidateId, describedById) {
@@ -392,7 +393,6 @@ var MENU_OPT_PAD_H = 12;
 var MENU_OPT_PAD_V = 8;
 var MENU_MIN_WIDTH = 160;
 var MENU_MAX_HEIGHT = 260;
-var MENU_Z = 1e3;
 var MENU_ELEVATION = 8;
 var MENU_BOX_SHADOW = "0px 2px 8px rgba(0, 0, 0, 0.15)";
 var OPTION_FONT = 14;
@@ -449,7 +449,7 @@ var controlStyles = StyleSheet.create({
     borderWidth: INPUT_BORDER,
     borderRadius: MENU_RADIUS,
     paddingVertical: MENU_PAD_V,
-    zIndex: MENU_Z,
+    zIndex: Z_INDEX.dropdown,
     boxShadow: MENU_BOX_SHADOW,
     elevation: MENU_ELEVATION,
     overflow: "hidden"
@@ -465,7 +465,7 @@ var controlStyles = StyleSheet.create({
   error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
 });
 var IS_WEB3 = Platform.OS === "web";
-var MENU_PORTAL_Z_INDEX = 1e3;
+var MENU_PORTAL_Z_INDEX = Z_INDEX.popover;
 var MENU_TOP_GAP2 = 4;
 function toDomNode(ref) {
   const node = ref.current;
@@ -1267,6 +1267,12 @@ var styles6 = StyleSheet.create({
     // `hitSlop`, so a pointer target smaller than the floor cannot be widened any other way.
     minHeight: MIN_TOUCH_TARGET_PX
   },
+  switchSlot: {
+    minWidth: MIN_TOUCH_TARGET_PX,
+    minHeight: MIN_TOUCH_TARGET_PX,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   textColumn: {
     flex: 1
   },
@@ -1320,7 +1326,7 @@ var FormSwitch = ({
             /* @__PURE__ */ jsx(Text, { style: [styles6.label, themeStyles.label], children: label }),
             hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles6.description, themeStyles.description], children: description }) : null
           ] }),
-          /* @__PURE__ */ jsx(View, { pointerEvents: "none", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles6.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsx(
             Switch,
             {
               accessibilityHint: accessibilityHint ?? label,