@boostdev/design-system-react-native 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -114,15 +114,25 @@ var lineHeight = {
 
 // src/native/ThemeContext.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var defaultRadius = {
+  button: import_native.border.radius.m,
+  iconButton: import_native.border.radius.full,
+  field: import_native.border.radius.m
+};
 var ThemeContext = (0, import_react.createContext)(null);
 function ThemeProvider({ children, colorScheme, tokens }) {
   const systemScheme = (0, import_react_native.useColorScheme)();
   const isDark = (colorScheme ?? systemScheme) === "dark";
+  const parentRadius = (0, import_react.useContext)(ThemeContext)?.radius ?? defaultRadius;
   const value = (0, import_react.useMemo)(() => {
     const base = isDark ? import_native.colors.dark : import_native.colors.light;
     const overrides = isDark ? tokens?.dark : tokens?.light;
-    return { colors: { ...base, ...overrides }, isDark };
-  }, [isDark, tokens]);
+    return {
+      colors: { ...base, ...overrides },
+      isDark,
+      radius: { ...parentRadius, ...tokens?.radius }
+    };
+  }, [isDark, tokens, parentRadius]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
@@ -1162,12 +1172,50 @@ function Pagination({
 
 // src/components/ui/Collapsible/Collapsible.tsx
 var import_react5 = require("react");
+var import_react_native19 = require("react-native");
+
+// src/native/Chevron.tsx
 var import_react_native18 = require("react-native");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-if (import_react_native18.Platform.OS === "android" && import_react_native18.UIManager.setLayoutAnimationEnabledExperimental) {
-  import_react_native18.UIManager.setLayoutAnimationEnabledExperimental(true);
-}
+var SIZE = 8;
+var STROKE = 1.5;
+var CENTRE_SHIFT = -(SIZE - STROKE) / 4;
 var styles15 = import_react_native18.StyleSheet.create({
+  chevron: {
+    // Border-box chevron (no glyph font dependency): a small square with two
+    // adjacent borders, rotated to form a crisp "›" / "⌄" indicator.
+    width: SIZE,
+    height: SIZE,
+    borderRightWidth: STROKE,
+    borderBottomWidth: STROKE
+  }
+});
+function Chevron({ color, rotate = "45deg", testID, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_native18.Animated.View,
+    {
+      testID,
+      style: [
+        styles15.chevron,
+        {
+          borderColor: color,
+          transform: [{ rotate }, { translateX: CENTRE_SHIFT }, { translateY: CENTRE_SHIFT }]
+        },
+        style
+      ],
+      "aria-hidden": true,
+      importantForAccessibility: "no-hide-descendants",
+      accessibilityElementsHidden: true
+    }
+  );
+}
+
+// src/components/ui/Collapsible/Collapsible.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+if (import_react_native19.Platform.OS === "android" && import_react_native19.UIManager.setLayoutAnimationEnabledExperimental) {
+  import_react_native19.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+var styles16 = import_react_native19.StyleSheet.create({
   container: {
     borderRadius: import_native.border.radius.m,
     overflow: "hidden"
@@ -1188,12 +1236,6 @@ var styles15 = import_react_native18.StyleSheet.create({
     lineHeight: lineHeight.body
   },
   chevron: {
-    // Border-box chevron (no glyph font dependency): a small square with two
-    // adjacent borders, rotated to form a crisp "›" / "⌄" disclosure indicator.
-    width: 8,
-    height: 8,
-    borderRightWidth: 2,
-    borderBottomWidth: 2,
     marginStart: import_native.spacing.xs
   },
   content: {
@@ -1218,11 +1260,11 @@ function Collapsible({
   const [internalOpen, setInternalOpen] = (0, import_react5.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
-  const rotation = (0, import_react5.useRef)(new import_react_native18.Animated.Value(isOpen ? 1 : 0)).current;
+  const rotation = (0, import_react5.useRef)(new import_react_native19.Animated.Value(isOpen ? 1 : 0)).current;
   const toggle = (0, import_react5.useCallback)(() => {
     const next = !isOpen;
-    import_react_native18.LayoutAnimation.configureNext(import_react_native18.LayoutAnimation.Presets.easeInEaseOut);
-    import_react_native18.Animated.timing(rotation, {
+    import_react_native19.LayoutAnimation.configureNext(import_react_native19.LayoutAnimation.Presets.easeInEaseOut);
+    import_react_native19.Animated.timing(rotation, {
       toValue: next ? 1 : 0,
       duration: 200,
       useNativeDriver: true
@@ -1236,35 +1278,35 @@ function Collapsible({
     inputRange: [0, 1],
     outputRange: ["-45deg", "45deg"]
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    import_react_native18.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_react_native19.View,
     {
-      style: [styles15.container, { borderBottomWidth: 1, borderBottomColor: colors2.colorBgSubtle }, style],
+      style: [styles16.container, { borderBottomWidth: 1, borderBottomColor: colors2.colorBgSubtle }, style],
       accessibilityRole: "summary",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-          import_react_native18.Pressable,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          import_react_native19.Pressable,
           {
             onPress: toggle,
             accessibilityRole: "button",
             accessibilityLabel: summary,
             accessibilityState: { expanded: isOpen },
-            style: ({ pressed }) => [styles15.header, pressed && styles15.pressed],
+            style: ({ pressed }) => [styles16.header, pressed && styles16.pressed],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ScaledText, { style: [styles15.summaryText, { color: colors2.colorOnBg }], children: summary }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                import_react_native18.Animated.View,
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ScaledText, { style: [styles16.summaryText, { color: colors2.colorOnBg }], children: summary }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                Chevron,
                 {
                   testID: "bds-collapsible-chevron",
-                  style: [styles15.chevron, { borderColor: colors2.colorOnBgSubtle, transform: [{ rotate }] }],
-                  importantForAccessibility: "no",
-                  accessibilityElementsHidden: true
+                  color: colors2.colorOnBgSubtle,
+                  rotate,
+                  style: styles16.chevron
                 }
               )
             ]
           }
         ),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native18.View, { style: styles15.content, children })
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native19.View, { style: styles16.content, children })
       ]
     }
   );
@@ -1272,12 +1314,12 @@ function Collapsible({
 
 // src/components/ui/Accordion/Accordion.tsx
 var import_react6 = require("react");
-var import_react_native19 = require("react-native");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-if (import_react_native19.Platform.OS === "android" && import_react_native19.UIManager.setLayoutAnimationEnabledExperimental) {
-  import_react_native19.UIManager.setLayoutAnimationEnabledExperimental(true);
+var import_react_native20 = require("react-native");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+if (import_react_native20.Platform.OS === "android" && import_react_native20.UIManager.setLayoutAnimationEnabledExperimental) {
+  import_react_native20.UIManager.setLayoutAnimationEnabledExperimental(true);
 }
-var styles16 = import_react_native19.StyleSheet.create({
+var styles17 = import_react_native20.StyleSheet.create({
   container: {
     overflow: "hidden",
     borderRadius: import_native.border.radius.s
@@ -1324,43 +1366,43 @@ function Accordion({
   const { colors: colors2 } = useTheme();
   const [openIds, setOpenIds] = (0, import_react6.useState)(defaultOpen);
   const toggle = (id) => {
-    import_react_native19.LayoutAnimation.configureNext(import_react_native19.LayoutAnimation.Presets.easeInEaseOut);
+    import_react_native20.LayoutAnimation.configureNext(import_react_native20.LayoutAnimation.Presets.easeInEaseOut);
     setOpenIds((prev) => {
       const isOpen = prev.includes(id);
       if (isOpen) return prev.filter((i) => i !== id);
       return allowMultiple ? [...prev, id] : [id];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native19.View, { style: [styles16.container, style], children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: [styles17.container, style], children: items.map((item, index) => {
     const isOpen = openIds.includes(item.id);
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-      import_react_native19.View,
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      import_react_native20.View,
       {
         style: [
-          styles16.item,
+          styles17.item,
           { borderBottomColor: colors2.colorBgSubtle },
           isLast && { borderBottomWidth: 0 }
         ],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-            import_react_native19.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            import_react_native20.Pressable,
             {
               onPress: () => toggle(item.id),
               disabled: item.disabled,
               accessibilityRole: "button",
               accessibilityState: { expanded: isOpen, disabled: item.disabled },
               style: ({ pressed }) => [
-                styles16.header,
-                item.disabled && styles16.disabled,
-                pressed && !item.disabled && styles16.pressed
+                styles17.header,
+                item.disabled && styles17.disabled,
+                pressed && !item.disabled && styles17.pressed
               ],
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ScaledText, { style: [styles16.titleText, { color: colors2.colorOnBg }], children: typeof item.title === "string" ? item.title : item.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ScaledText, { style: [styles17.titleText, { color: colors2.colorOnBg }], children: typeof item.title === "string" ? item.title : item.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   ScaledText,
                   {
-                    style: [styles16.chevron, { color: colors2.colorOnBgSubtle }],
+                    style: [styles17.chevron, { color: colors2.colorOnBgSubtle }],
                     importantForAccessibility: "no",
                     accessibilityElementsHidden: true,
                     children: isOpen ? "\u25BE" : "\u25B8"
@@ -1369,7 +1411,7 @@ function Accordion({
               ]
             }
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native19.View, { style: styles16.panel, accessibilityRole: "summary", children: item.content })
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: styles17.panel, accessibilityRole: "summary", children: item.content })
         ]
       },
       item.id
@@ -1379,9 +1421,9 @@ function Accordion({
 
 // src/components/ui/Tabs/Tabs.tsx
 var import_react7 = require("react");
-var import_react_native20 = require("react-native");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var styles17 = import_react_native20.StyleSheet.create({
+var import_react_native21 = require("react-native");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var styles18 = import_react_native21.StyleSheet.create({
   container: {
     overflow: "hidden"
   },
@@ -1420,18 +1462,18 @@ function Tabs({
 }) {
   const { colors: colors2 } = useTheme();
   const [activeTab, setActiveTab] = (0, import_react7.useState)(defaultTab ?? tabs[0]?.id);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native20.View, { style: [styles17.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react_native20.ScrollView,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native21.View, { style: [styles18.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_react_native21.ScrollView,
       {
         horizontal: true,
         showsHorizontalScrollIndicator: false,
-        contentContainerStyle: [styles17.tabList, { borderBottomColor: colors2.colorBgSubtle }],
+        contentContainerStyle: [styles18.tabList, { borderBottomColor: colors2.colorBgSubtle }],
         accessibilityRole: "tabbar",
         children: tabs.map((tab) => {
           const isActive = activeTab === tab.id;
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react_native20.Pressable,
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_react_native21.Pressable,
             {
               onPress: () => setActiveTab(tab.id),
               disabled: tab.disabled,
@@ -1442,18 +1484,18 @@ function Tabs({
               },
               accessibilityLabel: typeof tab.label === "string" ? tab.label : void 0,
               style: ({ pressed }) => [
-                styles17.tabButton,
+                styles18.tabButton,
                 {
                   borderBottomColor: isActive ? colors2.colorInteractive : "transparent"
                 },
-                tab.disabled && styles17.disabled,
-                pressed && !tab.disabled && styles17.pressed
+                tab.disabled && styles18.disabled,
+                pressed && !tab.disabled && styles18.pressed
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 ScaledText,
                 {
                   style: [
-                    styles17.tabLabel,
+                    styles18.tabLabel,
                     {
                       color: isActive ? colors2.colorInteractive : colors2.colorOnBgSubtle,
                       fontWeight: isActive ? import_native.font.weight.semibold : import_native.font.weight.body
@@ -1471,15 +1513,15 @@ function Tabs({
     tabs.map((tab) => {
       const isActive = activeTab === tab.id;
       if (!isActive) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: styles17.panel, accessibilityRole: "tabpanel", children: tab.content }, tab.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native21.View, { style: styles18.panel, accessibilityRole: "tabpanel", children: tab.content }, tab.id);
     })
   ] });
 }
 
 // src/components/ui/Table/Table.tsx
-var import_react_native21 = require("react-native");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var styles18 = import_react_native21.StyleSheet.create({
+var import_react_native22 = require("react-native");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var styles19 = import_react_native22.StyleSheet.create({
   wrapper: {
     borderRadius: import_native.border.radius.s,
     overflow: "hidden"
@@ -1555,29 +1597,29 @@ function Table({
     if (sortKey !== col.key) return base;
     return `${base}, currently ${sortDirection === "asc" ? "ascending" : "descending"}`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_react_native21.ScrollView,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react_native22.ScrollView,
     {
       horizontal: true,
       showsHorizontalScrollIndicator: true,
-      style: [styles18.wrapper, { backgroundColor: colors2.colorBg }, style],
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native21.View, { children: [
-        caption && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ScaledText, { style: [styles18.caption, { color: colors2.colorOnBgSubtle }], children: caption }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native21.View, { style: [styles18.headerRow, { backgroundColor: colors2.colorBgSubtle }], children: columns.map(
-          (col) => col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-            import_react_native21.Pressable,
+      style: [styles19.wrapper, { backgroundColor: colors2.colorBg }, style],
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native22.View, { children: [
+        caption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.caption, { color: colors2.colorOnBgSubtle }], children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: [styles19.headerRow, { backgroundColor: colors2.colorBgSubtle }], children: columns.map(
+          (col) => col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            import_react_native22.Pressable,
             {
               onPress: () => handleSort(col.key),
               accessibilityRole: "button",
               accessibilityLabel: getSortLabel(col),
-              style: ({ pressed }) => [styles18.headerCell, pressed && styles18.pressed],
+              style: ({ pressed }) => [styles19.headerCell, pressed && styles19.pressed],
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ScaledText, { style: [styles18.headerText, { color: colors2.colorOnBg }], children: col.header }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.headerText, { color: colors2.colorOnBg }], children: col.header }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   ScaledText,
                   {
                     style: [
-                      styles18.sortIndicator,
+                      styles19.sortIndicator,
                       {
                         color: sortKey === col.key ? colors2.colorInteractive : colors2.colorOnBgSubtle
                       }
@@ -1590,18 +1632,18 @@ function Table({
               ]
             },
             col.key
-          ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native21.View, { style: styles18.headerCell, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ScaledText, { style: [styles18.headerText, { color: colors2.colorOnBg }], children: col.header }) }, col.key)
+          ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: styles19.headerCell, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.headerText, { color: colors2.colorOnBg }], children: col.header }) }, col.key)
         ) }),
-        rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_react_native21.View,
+        rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_react_native22.View,
           {
             style: [
-              styles18.row,
+              styles19.row,
               { borderTopColor: colors2.colorBgSubtle },
               rowIndex % 2 === 1 && { backgroundColor: colors2.colorBgSubtle }
             ],
             accessibilityRole: "none",
-            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native21.View, { style: styles18.cell, children: col.render ? typeof col.render(row) === "string" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ScaledText, { style: [styles18.cellText, { color: colors2.colorOnBg }], children: col.render(row) }) : col.render(row) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ScaledText, { style: [styles18.cellText, { color: colors2.colorOnBg }], children: String(row[col.key] ?? "") }) }, col.key))
+            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: styles19.cell, children: col.render ? typeof col.render(row) === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.cellText, { color: colors2.colorOnBg }], children: col.render(row) }) : col.render(row) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.cellText, { color: colors2.colorOnBg }], children: String(row[col.key] ?? "") }) }, col.key))
           },
           rowIndex
         ))
@@ -1612,8 +1654,8 @@ function Table({
 
 // src/components/ui/Calendar/Calendar.tsx
 var import_react8 = require("react");
-var import_react_native22 = require("react-native");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react_native23 = require("react-native");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 var DAY_LABELS = {
   Su: "Sunday",
@@ -1656,7 +1698,7 @@ function getFirstDayOfMonth(year, month) {
   return new Date(year, month, 1).getDay();
 }
 var DAY_SIZE = 44;
-var styles19 = import_react_native22.StyleSheet.create({
+var styles20 = import_react_native23.StyleSheet.create({
   container: {
     alignSelf: "flex-start"
   },
@@ -1768,28 +1810,28 @@ function Calendar({
     { length: cells.length / 7 },
     (_, i) => cells.slice(i * 7, i * 7 + 7)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-    import_react_native22.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    import_react_native23.View,
     {
-      style: [styles19.container, style],
+      style: [styles20.container, style],
       accessibilityRole: "none",
       accessibilityLabel: `${MONTHS[viewMonth]} ${viewYear} calendar`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native22.View, { style: styles19.header, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            import_react_native22.Pressable,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native23.View, { style: styles20.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react_native23.Pressable,
             {
               onPress: () => navigate(-1),
               accessibilityRole: "button",
               accessibilityLabel: "Previous month",
-              style: ({ pressed }) => [styles19.navButton, pressed && styles19.pressed],
-              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.navText, { color: colors2.colorOnBg }], children: "\u2039" })
+              style: ({ pressed }) => [styles20.navButton, pressed && styles20.pressed],
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScaledText, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u2039" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             ScaledText,
             {
-              style: [styles19.monthYear, { color: colors2.colorOnBg }],
+              style: [styles20.monthYear, { color: colors2.colorOnBg }],
               accessibilityRole: "text",
               accessibilityLiveRegion: "polite",
               children: [
@@ -1799,35 +1841,35 @@ function Calendar({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            import_react_native22.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react_native23.Pressable,
             {
               onPress: () => navigate(1),
               accessibilityRole: "button",
               accessibilityLabel: "Next month",
-              style: ({ pressed }) => [styles19.navButton, pressed && styles19.pressed],
-              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.navText, { color: colors2.colorOnBg }], children: "\u203A" })
+              style: ({ pressed }) => [styles20.navButton, pressed && styles20.pressed],
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScaledText, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u203A" })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: styles19.weekRow, children: DAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: styles19.weekday, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.weekRow, children: DAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.weekday, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           ScaledText,
           {
-            style: [styles19.weekdayText, { color: colors2.colorOnBgSubtle }],
+            style: [styles20.weekdayText, { color: colors2.colorOnBgSubtle }],
             accessibilityLabel: DAY_LABELS[d],
             children: d
           }
         ) }, d)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: styles19.grid, children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: styles19.dayRow, children: row.map((cell, colIndex) => {
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.grid, children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.dayRow, children: row.map((cell, colIndex) => {
           if (!cell) {
-            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: styles19.dayCell }, colIndex);
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.dayCell }, colIndex);
           }
           const date = new Date(viewYear, viewMonth, cell.day);
           const isSelected = selected ? isSameDay(date, selected) : false;
           const isToday = isSameDay(date, today);
           const disabled = isOutOfRange(date, min, max);
-          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            import_react_native22.Pressable,
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react_native23.Pressable,
             {
               onPress: () => selectDay(cell.day),
               disabled,
@@ -1842,22 +1884,22 @@ function Calendar({
                 disabled
               },
               style: ({ pressed }) => [
-                styles19.dayCell,
+                styles20.dayCell,
                 isSelected && {
                   backgroundColor: colors2.colorInteractive
                 },
                 isToday && !isSelected && [
-                  styles19.today,
+                  styles20.today,
                   { borderColor: colors2.colorInteractive }
                 ],
-                disabled && styles19.disabled,
-                pressed && !disabled && styles19.pressed
+                disabled && styles20.disabled,
+                pressed && !disabled && styles20.pressed
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 ScaledText,
                 {
                   style: [
-                    styles19.dayText,
+                    styles20.dayText,
                     {
                       color: isSelected ? colors2.colorOnInteractive : colors2.colorOnBg,
                       fontWeight: isToday ? import_native.font.weight.semibold : import_native.font.weight.body
@@ -1877,11 +1919,11 @@ function Calendar({
 
 // src/components/ui/Carousel/Carousel.tsx
 var import_react9 = require("react");
-var import_react_native23 = require("react-native");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react_native24 = require("react-native");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var DOT_SIZE = 8;
 var DOT_HIT_SIZE = 44;
-var styles20 = import_react_native23.StyleSheet.create({
+var styles21 = import_react_native24.StyleSheet.create({
   container: {
     width: "100%"
   },
@@ -1938,7 +1980,7 @@ function Carousel({
   const { colors: colors2 } = useTheme();
   const scrollRef = (0, import_react9.useRef)(null);
   const [activeIndex, setActiveIndex] = (0, import_react9.useState)(0);
-  const [slideWidth, setSlideWidth] = (0, import_react9.useState)(import_react_native23.Dimensions.get("window").width);
+  const [slideWidth, setSlideWidth] = (0, import_react9.useState)(import_react_native24.Dimensions.get("window").width);
   const handleScroll = (0, import_react9.useCallback)(
     (e) => {
       const offset = e.nativeEvent.contentOffset.x;
@@ -1954,15 +1996,15 @@ function Carousel({
     const clamped = Math.max(0, Math.min(index, items.length - 1));
     scrollRef.current?.scrollTo({ x: clamped * slideWidth, animated: true });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    import_react_native23.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    import_react_native24.View,
     {
-      style: [styles20.container, style],
+      style: [styles21.container, style],
       accessibilityRole: "none",
       accessibilityLabel: label,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react_native23.ScrollView,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_react_native24.ScrollView,
           {
             ref: scrollRef,
             horizontal: true,
@@ -1971,13 +2013,13 @@ function Carousel({
             onScroll: handleScroll,
             scrollEventThrottle: 16,
             onLayout: (e) => setSlideWidth(e.nativeEvent.layout.width),
-            style: styles20.scrollView,
-            children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: [styles20.slide, { width: slideWidth }], children: item }, index))
+            style: styles21.scrollView,
+            children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.View, { style: [styles21.slide, { width: slideWidth }], children: item }, index))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native23.View, { style: styles20.nav, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react_native23.Pressable,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { style: styles21.nav, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react_native24.Pressable,
             {
               onPress: () => scrollTo(activeIndex - 1),
               disabled: activeIndex <= 0,
@@ -1985,26 +2027,26 @@ function Carousel({
               accessibilityLabel: "Previous",
               accessibilityState: { disabled: activeIndex <= 0 },
               style: ({ pressed }) => [
-                styles20.navButton,
+                styles21.navButton,
                 activeIndex <= 0 && { opacity: 0.4 },
-                pressed && styles20.pressed
+                pressed && styles21.pressed
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScaledText, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u2039" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ScaledText, { style: [styles21.navText, { color: colors2.colorOnBg }], children: "\u2039" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.dots, children: items.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react_native23.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.View, { style: styles21.dots, children: items.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react_native24.Pressable,
             {
               onPress: () => scrollTo(index),
               accessibilityRole: "button",
               accessibilityLabel: `Go to slide ${index + 1}`,
               accessibilityState: { selected: activeIndex === index },
-              style: styles20.dotWrapper,
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                import_react_native23.View,
+              style: styles21.dotWrapper,
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_react_native24.View,
                 {
                   style: [
-                    styles20.dot,
+                    styles21.dot,
                     {
                       backgroundColor: activeIndex === index ? colors2.colorInteractive : colors2.colorBgSubtle
                     }
@@ -2014,8 +2056,8 @@ function Carousel({
             },
             index
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react_native23.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react_native24.Pressable,
             {
               onPress: () => scrollTo(activeIndex + 1),
               disabled: activeIndex >= items.length - 1,
@@ -2023,11 +2065,11 @@ function Carousel({
               accessibilityLabel: "Next",
               accessibilityState: { disabled: activeIndex >= items.length - 1 },
               style: ({ pressed }) => [
-                styles20.navButton,
+                styles21.navButton,
                 activeIndex >= items.length - 1 && { opacity: 0.4 },
-                pressed && styles20.pressed
+                pressed && styles21.pressed
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScaledText, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u203A" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ScaledText, { style: [styles21.navText, { color: colors2.colorOnBg }], children: "\u203A" })
             }
           )
         ] })
@@ -2037,8 +2079,8 @@ function Carousel({
 }
 
 // src/components/layout/Card/Card.tsx
-var import_react_native24 = require("react-native");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react_native25 = require("react-native");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var paddingMap = {
   none: 0,
   small: import_native.spacing.s,
@@ -2050,7 +2092,7 @@ var alignMap = {
   center: "center",
   end: "flex-end"
 };
-var styles21 = import_react_native24.StyleSheet.create({
+var styles22 = import_react_native25.StyleSheet.create({
   card: {
     borderRadius: import_native.border.radius.m,
     overflow: "hidden"
@@ -2085,29 +2127,29 @@ function Card({
     alignItems: alignMap[textAlign]
   };
   if (onPress) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_react_native24.Pressable,
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_react_native25.Pressable,
       {
         onPress,
         accessibilityRole: "button",
         accessibilityLabel,
-        style: ({ pressed }) => [styles21.card, variantStyle, inner, pressed && { opacity: 0.8 }, style],
+        style: ({ pressed }) => [styles22.card, variantStyle, inner, pressed && { opacity: 0.8 }, style],
         children
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.View, { style: [styles21.card, variantStyle, inner, style], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { style: [styles22.card, variantStyle, inner, style], children });
 }
 
 // src/components/layout/SectionHeader/SectionHeader.tsx
-var import_react_native25 = require("react-native");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react_native26 = require("react-native");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var alignMap2 = {
   start: "flex-start",
   center: "center",
   end: "flex-end"
 };
-var titleStyles = import_react_native25.StyleSheet.create({
+var titleStyles = import_react_native26.StyleSheet.create({
   small: {
     fontSize: import_native.font.size.heading3,
     fontFamily: import_native.font.family.heading,
@@ -2127,7 +2169,7 @@ var titleStyles = import_react_native25.StyleSheet.create({
     lineHeight: lineHeight.heading1
   }
 });
-var styles22 = import_react_native25.StyleSheet.create({
+var styles23 = import_react_native26.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
@@ -2146,8 +2188,8 @@ function SectionHeader({
 }) {
   const { colors: colors2 } = useTheme();
   const align = alignMap2[alignment];
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native25.View, { style: [styles22.container, { alignItems: align }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native26.View, { style: [styles23.container, { alignItems: align }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       ScaledText,
       {
         accessibilityRole: "header",
@@ -2155,16 +2197,16 @@ function SectionHeader({
         children: title
       }
     ),
-    subtitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ScaledText, { style: [styles22.subtitle, { color: colors2.colorOnBgSubtle }], children: subtitle })
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ScaledText, { style: [styles23.subtitle, { color: colors2.colorOnBgSubtle }], children: subtitle })
   ] });
 }
 
 // src/components/layout/IconWrapper/IconWrapper.tsx
-var import_react_native26 = require("react-native");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react_native27 = require("react-native");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function IconWrapper({ children, style, accessibilityElementsHidden }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react_native26.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_react_native27.View,
     {
       style: [{ alignItems: "center", justifyContent: "center" }, style],
       importantForAccessibility: accessibilityElementsHidden ? "no-hide-descendants" : "auto",
@@ -2175,9 +2217,9 @@ function IconWrapper({ children, style, accessibilityElementsHidden }) {
 }
 
 // src/components/layout/ButtonGroup/ButtonGroup.tsx
-var import_react_native27 = require("react-native");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var styles23 = import_react_native27.StyleSheet.create({
+var import_react_native28 = require("react-native");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var styles24 = import_react_native28.StyleSheet.create({
   group: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -2190,11 +2232,11 @@ var styles23 = import_react_native27.StyleSheet.create({
 });
 function ButtonContainer({ children, variant, accessibilityLabel, style }) {
   const isColumn = variant === "card" || variant === "modal";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_react_native27.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_react_native28.View,
     {
       accessibilityLabel,
-      style: [isColumn ? styles23.column : styles23.group, style],
+      style: [isColumn ? styles24.column : styles24.group, style],
       children
     }
   );
@@ -2202,14 +2244,14 @@ function ButtonContainer({ children, variant, accessibilityLabel, style }) {
 var ButtonGroup = ButtonContainer;
 
 // src/components/interaction/Button/Button.tsx
-var import_react_native28 = require("react-native");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react_native29 = require("react-native");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var sizeTokens = {
-  small: { height: 36, px: import_native.spacing.m, fontSize: import_native.font.size.bodyS, radius: import_native.border.radius.full },
-  medium: { height: 48, px: import_native.spacing.m, fontSize: import_native.font.size.body, radius: import_native.border.radius.full },
-  large: { height: 56, px: import_native.spacing.xxl, fontSize: import_native.font.size.heading3, radius: import_native.border.radius.full }
+  small: { height: 36, px: import_native.spacing.m, fontSize: import_native.font.size.bodyS },
+  medium: { height: 48, px: import_native.spacing.m, fontSize: import_native.font.size.body },
+  large: { height: 56, px: import_native.spacing.xxl, fontSize: import_native.font.size.heading3 }
 };
-var styles24 = import_react_native28.StyleSheet.create({
+var styles25 = import_react_native29.StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -2237,8 +2279,8 @@ function Button({
   accessibilityLabel,
   style
 }) {
-  const { colors: colors2 } = useTheme();
-  const { height, px, fontSize, radius } = sizeTokens[size];
+  const { colors: colors2, radius } = useTheme();
+  const { height, px, fontSize } = sizeTokens[size];
   const primaryColor = colors2.colorInteractive;
   const onPrimaryColor = colors2.colorOnInteractive;
   const outlineTextColor = colors2.colorInteractiveOnBg;
@@ -2246,7 +2288,8 @@ function Button({
   const containerStyle = {
     minHeight: height,
     paddingHorizontal: isIconOnly ? import_native.spacing.xs : px,
-    borderRadius: radius,
+    // Corners come from the theme (`tokens.radius`); a borderRadius in `style` still wins.
+    borderRadius: isIconOnly ? radius.iconButton : radius.button,
     opacity: disabled ? 0.4 : 1,
     // Icon-only: square with equal xs padding on both axes.
     ...isIconOnly && { aspectRatio: 1, paddingVertical: import_native.spacing.xs },
@@ -2261,29 +2304,29 @@ function Button({
     }
   };
   const textColor = variant === "default" ? onPrimaryColor : outlineTextColor;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    import_react_native28.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_react_native29.Pressable,
     {
       onPress,
       disabled,
       accessibilityRole: "button",
       accessibilityLabel,
       accessibilityState: { disabled },
-      style: ({ pressed }) => [styles24.pressable, containerStyle, pressed && { opacity: 0.75 }, style],
+      style: ({ pressed }) => [styles25.pressable, containerStyle, pressed && { opacity: 0.75 }, style],
       children: [
-        iconStart && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.View, { importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: iconStart }),
-        children && (isIconOnly ? children : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ScaledText, { style: [styles24.label, { fontSize, color: textColor }], children })),
-        iconEnd && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native28.View, { importantForAccessibility: "no-hide-descendants", children: iconEnd })
+        iconStart && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: iconStart }),
+        children && (isIconOnly ? children : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ScaledText, { style: [styles25.label, { fontSize, color: textColor }], children })),
+        iconEnd && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { importantForAccessibility: "no-hide-descendants", children: iconEnd })
       ]
     }
   );
 }
 
 // src/components/interaction/Rating/Rating.tsx
-var import_react_native29 = require("react-native");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react_native30 = require("react-native");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var STAR_SIZE = 24;
-var styles25 = import_react_native29.StyleSheet.create({
+var styles26 = import_react_native30.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center"
@@ -2296,17 +2339,17 @@ var styles25 = import_react_native29.StyleSheet.create({
 function Rating({ value, max = 5, style, accessibilityLabel }) {
   const { colors: colors2 } = useTheme();
   const label = accessibilityLabel ?? `${value} out of ${max} stars`;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_react_native29.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_react_native30.View,
     {
-      style: [styles25.container, style],
+      style: [styles26.container, style],
       accessibilityRole: "image",
       accessibilityLabel: label,
-      children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         ScaledText,
         {
           style: [
-            styles25.star,
+            styles26.star,
             { color: i < value ? colors2.colorWarning : colors2.colorBgSubtle }
           ],
           importantForAccessibility: "no",
@@ -2320,13 +2363,13 @@ function Rating({ value, max = 5, style, accessibilityLabel }) {
 }
 
 // src/components/interaction/form/Switch/Switch.tsx
-var import_react_native31 = require("react-native");
+var import_react_native32 = require("react-native");
 
 // src/components/interaction/form/atoms/Label.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Label({ label, style }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     ScaledText,
     {
       style: [
@@ -2345,9 +2388,9 @@ function Label({ label, style }) {
 }
 
 // src/components/interaction/form/atoms/Message.tsx
-var import_react_native30 = require("react-native");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var styles26 = import_react_native30.StyleSheet.create({
+var import_react_native31 = require("react-native");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var styles27 = import_react_native31.StyleSheet.create({
   base: {
     fontFamily: import_native.font.family.body,
     fontSize: import_native.font.size.bodyS,
@@ -2358,20 +2401,20 @@ function Message({ message, type, style }) {
   const { colors: colors2 } = useTheme();
   if (!message) return null;
   const color = type === "error" ? colors2.colorError : colors2.colorOnBgSubtle;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ScaledText,
     {
       accessibilityRole: type === "error" ? "alert" : "none",
       accessibilityLiveRegion: type === "error" ? "assertive" : "polite",
-      style: [styles26.base, { color }, style],
+      style: [styles27.base, { color }, style],
       children: message
     }
   );
 }
 
 // src/components/interaction/form/Switch/Switch.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var styles27 = import_react_native31.StyleSheet.create({
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var styles28 = import_react_native32.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
@@ -2391,10 +2434,10 @@ function Switch({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native31.View, { style: [styles27.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native31.View, { style: styles27.row, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        import_react_native31.Switch,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native32.View, { style: [styles28.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native32.View, { style: styles28.row, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        import_react_native32.Switch,
         {
           value,
           onValueChange: onChange,
@@ -2406,18 +2449,18 @@ function Switch({
           trackColor: { false: colors2.colorBgSubtle, true: colors2.colorBlueSubtle }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Label, { label })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label, { label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Message, { type: "error", message: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Checkbox/Checkbox.tsx
-var import_react_native32 = require("react-native");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react_native33 = require("react-native");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var BOX = 22;
-var styles28 = import_react_native32.StyleSheet.create({
+var styles29 = import_react_native33.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
@@ -2454,31 +2497,31 @@ function Checkbox({
   const { colors: colors2 } = useTheme();
   const borderColor = error ? colors2.colorError : checked ? colors2.colorInteractive : colors2.colorOnBg;
   const bgColor = checked ? colors2.colorInteractive : "transparent";
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native32.View, { style: [styles28.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-      import_react_native32.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: [styles29.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      import_react_native33.Pressable,
       {
         onPress: () => !disabled && onChange?.(!checked),
         accessibilityRole: "checkbox",
         accessibilityLabel: typeof label === "string" ? label : name,
         accessibilityState: { checked, disabled },
         disabled,
-        style: ({ pressed }) => [styles28.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
+        style: ({ pressed }) => [styles29.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native32.View, { style: [styles28.box, { borderColor, backgroundColor: bgColor }], children: checked && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label, { label: "\u2713", style: [styles28.checkmark, { color: colors2.colorOnInteractive }] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label, { label })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native33.View, { style: [styles29.box, { borderColor, backgroundColor: bgColor }], children: checked && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Label, { label: "\u2713", style: [styles29.checkmark, { color: colors2.colorOnInteractive }] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Label, { label })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Message, { type: "error", message: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
-var import_react_native33 = require("react-native");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var styles29 = import_react_native33.StyleSheet.create({
+var import_react_native34 = require("react-native");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var styles30 = import_react_native34.StyleSheet.create({
   container: {
     gap: import_native.spacing.xs
   },
@@ -2505,31 +2548,31 @@ function CheckboxGroup({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-    import_react_native33.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    import_react_native34.View,
     {
-      style: [styles29.container, disabled && { opacity: 0.4 }, style],
+      style: [styles30.container, disabled && { opacity: 0.4 }, style],
       accessibilityRole: "none",
       accessibilityLabel: legend,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(ScaledText, { style: [styles29.legend, { color: colors2.colorOnBg }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(ScaledText, { style: [styles30.legend, { color: colors2.colorOnBg }], children: [
           legend,
-          required && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ScaledText, { style: [styles29.required, { color: colors2.colorOnBgSubtle }], children: " *" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ScaledText, { style: [styles30.required, { color: colors2.colorOnBgSubtle }], children: " *" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native33.View, { style: styles29.items, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, { type: "error", message: error }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, { type: "hint", message: hint })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native34.View, { style: styles30.items, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { type: "error", message: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { type: "hint", message: hint })
       ]
     }
   );
 }
 
 // src/components/interaction/form/Radio/Radio.tsx
-var import_react_native34 = require("react-native");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react_native35 = require("react-native");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var DOT = 22;
 var INNER = 10;
-var styles30 = import_react_native34.StyleSheet.create({
+var styles31 = import_react_native35.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
@@ -2565,31 +2608,31 @@ function Radio({
 }) {
   const { colors: colors2 } = useTheme();
   const borderColor = error ? colors2.colorError : checked ? colors2.colorInteractive : colors2.colorOnBg;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react_native34.View, { style: [styles30.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-      import_react_native34.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: [styles31.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      import_react_native35.Pressable,
       {
         onPress: () => !disabled && onChange?.(),
         accessibilityRole: "radio",
         accessibilityLabel: typeof label === "string" ? label : name,
         accessibilityState: { checked, disabled },
         disabled,
-        style: ({ pressed }) => [styles30.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
+        style: ({ pressed }) => [styles31.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native34.View, { style: [styles30.outer, { borderColor }], children: checked && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native34.View, { style: [styles30.inner, { backgroundColor: colors2.colorInteractive }] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Label, { label })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: [styles31.outer, { borderColor }], children: checked && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: [styles31.inner, { backgroundColor: colors2.colorInteractive }] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label, { label })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { type: "error", message: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/RadioGroup/RadioGroup.tsx
-var import_react_native35 = require("react-native");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var styles31 = import_react_native35.StyleSheet.create({
+var import_react_native36 = require("react-native");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var styles32 = import_react_native36.StyleSheet.create({
   container: {
     gap: import_native.spacing.xs
   },
@@ -2616,29 +2659,29 @@ function RadioGroup({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-    import_react_native35.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    import_react_native36.View,
     {
-      style: [styles31.container, disabled && { opacity: 0.4 }, style],
+      style: [styles32.container, disabled && { opacity: 0.4 }, style],
       accessibilityRole: "radiogroup",
       accessibilityLabel: legend,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ScaledText, { style: [styles31.legend, { color: colors2.colorOnBg }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(ScaledText, { style: [styles32.legend, { color: colors2.colorOnBg }], children: [
           legend,
-          required && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScaledText, { style: [styles31.required, { color: colors2.colorOnBgSubtle }], children: " *" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ScaledText, { style: [styles32.required, { color: colors2.colorOnBgSubtle }], children: " *" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: styles31.items, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { type: "error", message: error }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { type: "hint", message: hint })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native36.View, { style: styles32.items, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { type: "error", message: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { type: "hint", message: hint })
       ]
     }
   );
 }
 
 // src/components/interaction/form/FileInput/FileInput.tsx
-var import_react_native36 = require("react-native");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var styles32 = import_react_native36.StyleSheet.create({
+var import_react_native37 = require("react-native");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var styles33 = import_react_native37.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
@@ -2650,7 +2693,6 @@ var styles32 = import_react_native36.StyleSheet.create({
     paddingHorizontal: import_native.spacing.m,
     borderWidth: 2,
     borderStyle: "dashed",
-    borderRadius: import_native.border.radius.s,
     minHeight: 120
   },
   icon: {
@@ -2691,17 +2733,17 @@ function FileInput({
   fileNames = [],
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const borderColor = error ? colors2.colorError : colors2.colorBgSubtle;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native36.View, { style: [styles32.container, style], testID: name, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native37.View, { style: [styles33.container, style], testID: name, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Label,
       {
         label: required ? `${label} *` : label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-      import_react_native36.Pressable,
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      import_react_native37.Pressable,
       {
         onPress: () => !disabled && onSelect?.(),
         disabled,
@@ -2709,44 +2751,46 @@ function FileInput({
         accessibilityLabel: `${label}, tap to select file`,
         accessibilityState: { disabled },
         style: ({ pressed }) => [
-          styles32.dropZone,
+          styles33.dropZone,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: "transparent"
           },
           pressed && { opacity: 0.7 },
           disabled && { opacity: 0.4 }
         ],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ScaledText, { style: [styles32.icon, { color: colors2.colorInteractive }], children: "\u2191" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ScaledText, { style: [styles32.prompt, { color: colors2.colorOnBgSubtle }], children: fileNames.length > 0 ? "Selected files:" : "Tap to select file" }),
-          fileNames.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native36.View, { style: styles32.fileList, children: fileNames.map((fileName) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ScaledText, { style: [styles32.fileName, { color: colors2.colorOnBg }], children: fileName }, fileName)) }),
-          accept && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ScaledText, { style: [styles32.acceptHint, { color: colors2.colorOnBgSubtle }], children: accept })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScaledText, { style: [styles33.icon, { color: colors2.colorInteractive }], children: "\u2191" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScaledText, { style: [styles33.prompt, { color: colors2.colorOnBgSubtle }], children: fileNames.length > 0 ? "Selected files:" : "Tap to select file" }),
+          fileNames.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native37.View, { style: styles33.fileList, children: fileNames.map((fileName) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScaledText, { style: [styles33.fileName, { color: colors2.colorOnBg }], children: fileName }, fileName)) }),
+          accept && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScaledText, { style: [styles33.acceptHint, { color: colors2.colorOnBgSubtle }], children: accept })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { type: "error", message: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Combobox/Combobox.tsx
 var import_react10 = require("react");
-var import_react_native37 = require("react-native");
+var import_react_native38 = require("react-native");
 
 // src/components/interaction/form/atoms/inputHelpers.ts
 var OPTICAL_TEXT_SHIFT = -1.5;
 
 // src/components/interaction/form/Combobox/Combobox.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var INPUT_HEIGHT = 44;
 var MAX_DROPDOWN_HEIGHT = 200;
-var styles33 = import_react_native37.StyleSheet.create({
+var styles34 = import_react_native38.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
   /**
-   * Draws the pill border and provides the fixed 44pt touch-target height.
+   * Draws the rounded border (`radius.field` from the theme) and provides the fixed
+   * 44pt touch-target height.
    * justifyContent: 'center' vertically centers the inner TextInput.
    * position: 'relative' is required for the dropdown's absolute positioning.
    */
@@ -2754,8 +2798,7 @@ var styles33 = import_react_native37.StyleSheet.create({
     position: "relative",
     height: INPUT_HEIGHT,
     justifyContent: "center",
-    borderWidth: 1,
-    borderRadius: import_native.border.radius.full
+    borderWidth: 1
   },
   /**
    * No vertical padding: iOS centers text automatically inside the wrapper height.
@@ -2808,7 +2851,7 @@ function Combobox({
   hint,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const selectedOption = (0, import_react10.useMemo)(
     () => options.find((o) => o.value === value),
     [options, value]
@@ -2837,21 +2880,22 @@ function Combobox({
     setTimeout(() => setIsOpen(false), 150);
   };
   const borderColor = error ? colors2.colorError : colors2.colorOnBg;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native37.View, { style: [styles33.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label, { label }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-      import_react_native37.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native38.View, { style: [styles34.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { label }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      import_react_native38.View,
       {
         style: [
-          styles33.inputWrapper,
+          styles34.inputWrapper,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
         ],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             ScaledTextInput,
             {
               value: inputValue,
@@ -2865,16 +2909,16 @@ function Combobox({
               accessibilityLabel: typeof label === "string" ? label : name,
               accessibilityState: { disabled, expanded: isOpen },
               style: [
-                styles33.input,
+                styles34.input,
                 { color: colors2.colorOnBg }
               ]
             }
           ),
-          isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            import_react_native37.ScrollView,
+          isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            import_react_native38.ScrollView,
             {
               style: [
-                styles33.dropdown,
+                styles34.dropdown,
                 {
                   borderColor: colors2.colorBgSubtle,
                   backgroundColor: colors2.colorBg
@@ -2885,8 +2929,8 @@ function Combobox({
               children: filtered.map((option) => {
                 const isSelected = option.value === value;
                 const isDisabled = option.disabled;
-                return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                  import_react_native37.Pressable,
+                return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  import_react_native38.Pressable,
                   {
                     onPress: () => !isDisabled && selectOption(option),
                     disabled: isDisabled,
@@ -2894,16 +2938,16 @@ function Combobox({
                     accessibilityLabel: option.label,
                     accessibilityState: { selected: isSelected, disabled: isDisabled },
                     style: ({ pressed }) => [
-                      styles33.option,
+                      styles34.option,
                       isSelected && { backgroundColor: colors2.colorBlueSubtle },
                       pressed && !isDisabled && { backgroundColor: colors2.colorBgSubtle },
                       isDisabled && { opacity: 0.4 }
                     ],
-                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                       ScaledText,
                       {
                         style: [
-                          styles33.optionText,
+                          styles34.optionText,
                           {
                             color: isSelected ? colors2.colorInteractive : colors2.colorOnBg
                           },
@@ -2921,15 +2965,15 @@ function Combobox({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { type: "error", message: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
 var import_react11 = require("react");
-var import_react_native38 = require("react-native");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react_native39 = require("react-native");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var TRACK_PADDING = import_native.spacing.xxxs;
 var sizeTokens2 = {
   small: { minHeight: 32, fontSize: import_native.font.size.bodyS, px: import_native.spacing.s, py: import_native.spacing.xxs },
@@ -2944,7 +2988,7 @@ var thumbShadow = {
   shadowRadius: 2,
   elevation: 2
 };
-var styles34 = import_react_native38.StyleSheet.create({
+var styles35 = import_react_native39.StyleSheet.create({
   track: {
     flexDirection: "row",
     borderRadius: import_native.border.radius.full,
@@ -2979,10 +3023,10 @@ function SegmentedControl({
   const items = import_react11.Children.toArray(children);
   const trackBg = colors2.colorBgSubtle;
   const thumbBg = variant === "outline" ? colors2.colorBg : colors2.colorInteractive;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    import_react_native38.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    import_react_native39.View,
     {
-      style: [styles34.track, { backgroundColor: trackBg }, style],
+      style: [styles35.track, { backgroundColor: trackBg }, style],
       accessibilityRole: "tablist",
       accessibilityLabel,
       children: items.map((child, index) => {
@@ -2995,8 +3039,8 @@ function SegmentedControl({
           paddingVertical: py,
           ...isActive ? { backgroundColor: thumbBg, ...thumbShadow } : { backgroundColor: "transparent" }
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          import_react_native38.Pressable,
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          import_react_native39.Pressable,
           {
             onPress: () => !disabled && onValueChange?.(index),
             disabled,
@@ -3004,15 +3048,15 @@ function SegmentedControl({
             accessibilityLabel: label ?? void 0,
             accessibilityState: { selected: isActive, disabled },
             style: ({ pressed }) => [
-              styles34.segment,
+              styles35.segment,
               segmentStyle,
               pressed && !disabled && { opacity: 0.7 },
               disabled && { opacity: 0.4 }
             ],
-            children: label !== null ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            children: label !== null ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               ScaledText,
               {
-                style: [styles34.label, { fontSize, color: labelColor }],
+                style: [styles35.label, { fontSize, color: labelColor }],
                 numberOfLines: 1,
                 adjustsFontSizeToFit: true,
                 minimumFontScale: 0.5,
@@ -3029,8 +3073,8 @@ function SegmentedControl({
 
 // src/components/interaction/form/FormInput/FormInput.tsx
 var import_react12 = require("react");
-var import_react_native39 = require("react-native");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react_native40 = require("react-native");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var INPUT_HEIGHT2 = 44;
 var keyboardTypeMap = {
   text: "default",
@@ -3041,19 +3085,19 @@ var keyboardTypeMap = {
   number: "numeric",
   search: "default"
 };
-var styles35 = import_react_native39.StyleSheet.create({
+var styles36 = import_react_native40.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
   /**
-   * The wrapper draws the pill border and provides at least 44pt touch-target height.
+   * The wrapper draws the rounded border (`radius.field` from the theme) and provides
+   * at least 44pt touch-target height.
    * justifyContent: 'center' vertically centers the inner TextInput on both iOS and Android.
    */
   inputWrapper: {
     minHeight: INPUT_HEIGHT2,
     justifyContent: "center",
-    borderWidth: 1,
-    borderRadius: import_native.border.radius.full
+    borderWidth: 1
   },
   /**
    * No vertical padding: iOS centers text automatically inside the wrapper height.
@@ -3086,23 +3130,24 @@ function FormInput({
   onFocus,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const [focused, setFocused] = (0, import_react12.useState)(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: [styles35.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Label, { label }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_react_native39.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native40.View, { style: [styles36.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Label, { label }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      import_react_native40.View,
       {
         style: [
-          styles35.inputWrapper,
+          styles36.inputWrapper,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
         ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           ScaledTextInput,
           {
             accessibilityLabel: typeof label === "string" ? label : name,
@@ -3127,23 +3172,23 @@ function FormInput({
               onBlur?.();
             },
             style: [
-              styles35.input,
+              styles36.input,
               { color: colors2.colorOnBg }
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Message, { type: "error", message: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Textarea/Textarea.tsx
 var import_react13 = require("react");
-var import_react_native40 = require("react-native");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var styles36 = import_react_native40.StyleSheet.create({
+var import_react_native41 = require("react-native");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var styles37 = import_react_native41.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
@@ -3154,7 +3199,6 @@ var styles36 = import_react_native40.StyleSheet.create({
     paddingHorizontal: import_native.spacing.s,
     paddingVertical: import_native.spacing.xs,
     borderWidth: 1,
-    borderRadius: import_native.border.radius.xs,
     minHeight: 100,
     textAlignVertical: "top"
   }
@@ -3174,12 +3218,12 @@ function Textarea({
   onFocus,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const [focused, setFocused] = (0, import_react13.useState)(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native40.View, { style: [styles36.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Label, { label }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: [styles37.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { label }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       ScaledTextInput,
       {
         accessibilityLabel: typeof label === "string" ? label : name,
@@ -3202,9 +3246,10 @@ function Textarea({
           onBlur?.();
         },
         style: [
-          styles36.textarea,
+          styles37.textarea,
           {
             borderColor,
+            borderRadius: radius.field,
             color: colors2.colorOnBg,
             backgroundColor: colors2.colorBg
           },
@@ -3212,16 +3257,16 @@ function Textarea({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { type: "error", message: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Select/Select.tsx
 var import_react14 = require("react");
-var import_react_native41 = require("react-native");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var styles37 = import_react_native41.StyleSheet.create({
+var import_react_native42 = require("react-native");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var styles38 = import_react_native42.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
@@ -3232,7 +3277,6 @@ var styles37 = import_react_native41.StyleSheet.create({
     paddingHorizontal: import_native.spacing.s,
     paddingVertical: import_native.spacing.xs,
     borderWidth: 1,
-    borderRadius: import_native.border.radius.full,
     minHeight: 44
   },
   triggerText: {
@@ -3242,8 +3286,6 @@ var styles37 = import_react_native41.StyleSheet.create({
     flex: 1
   },
   chevron: {
-    fontFamily: import_native.font.family.body,
-    fontSize: import_native.font.size.body,
     marginStart: import_native.spacing.xs
   },
   overlay: {
@@ -3299,7 +3341,7 @@ function Select({
   onChange,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const [open, setOpen] = (0, import_react14.useState)(false);
   const selectedOption = options.find((o) => o.value === value);
   const displayText = selectedOption?.label ?? placeholder;
@@ -3309,10 +3351,10 @@ function Select({
     onChange?.(optionValue);
     setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: [styles37.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { label }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-      import_react_native41.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: [styles38.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Label, { label }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      import_react_native42.Pressable,
       {
         accessibilityRole: "button",
         accessibilityLabel: typeof label === "string" ? `${label}, ${displayText}` : name,
@@ -3321,19 +3363,20 @@ function Select({
         disabled,
         onPress: () => setOpen(true),
         style: [
-          styles37.trigger,
+          styles38.trigger,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
         ],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             ScaledText,
             {
               style: [
-                styles37.triggerText,
+                styles38.triggerText,
                 {
                   color: isPlaceholder ? colors2.colorOnBgSubtle : colors2.colorOnBg
                 }
@@ -3341,53 +3384,60 @@ function Select({
               children: displayText
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ScaledText, { style: [styles37.chevron, { color: colors2.colorOnBgSubtle }], "aria-hidden": true, children: "\u25BE" })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            Chevron,
+            {
+              testID: "bds-select-chevron",
+              color: colors2.colorOnBgSubtle,
+              style: styles38.chevron
+            }
+          )
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      import_react_native41.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_react_native42.Modal,
       {
         visible: open,
         transparent: true,
         animationType: "slide",
         onRequestClose: () => setOpen(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_react_native41.Pressable,
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_react_native42.Pressable,
           {
-            style: styles37.overlay,
+            style: styles38.overlay,
             onPress: () => setOpen(false),
             accessibilityRole: "button",
             accessibilityLabel: "Close options",
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-              import_react_native41.Pressable,
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              import_react_native42.Pressable,
               {
-                style: [styles37.sheet, { backgroundColor: colors2.colorBg }],
+                style: [styles38.sheet, { backgroundColor: colors2.colorBg }],
                 onPress: () => {
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.SafeAreaView, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: styles37.sheetHeader, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ScaledText, { style: [styles37.sheetTitle, { color: colors2.colorOnBg }], children: typeof label === "string" ? label : "Select" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                      import_react_native41.Pressable,
+                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.SafeAreaView, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: styles38.sheetHeader, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ScaledText, { style: [styles38.sheetTitle, { color: colors2.colorOnBg }], children: typeof label === "string" ? label : "Select" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                      import_react_native42.Pressable,
                       {
                         accessibilityRole: "button",
                         accessibilityLabel: "Close",
                         onPress: () => setOpen(false),
                         hitSlop: 8,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ScaledText, { style: [styles37.closeText, { color: colors2.colorInteractive }], children: "Done" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ScaledText, { style: [styles38.closeText, { color: colors2.colorInteractive }], children: "Done" })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                    import_react_native41.FlatList,
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    import_react_native42.FlatList,
                     {
                       data: options,
                       keyExtractor: (item) => item.value,
                       renderItem: ({ item }) => {
                         const isSelected = item.value === value;
-                        return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                          import_react_native41.Pressable,
+                        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                          import_react_native42.Pressable,
                           {
                             accessibilityRole: "button",
                             accessibilityLabel: item.label,
@@ -3398,16 +3448,16 @@ function Select({
                             disabled: item.disabled,
                             onPress: () => handleSelect(item.value),
                             style: ({ pressed }) => [
-                              styles37.optionItem,
+                              styles38.optionItem,
                               isSelected && { backgroundColor: colors2.colorBgSubtle },
                               pressed && { opacity: 0.7 },
                               item.disabled && { opacity: 0.4 }
                             ],
-                            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                               ScaledText,
                               {
                                 style: [
-                                  styles37.optionText,
+                                  styles38.optionText,
                                   {
                                     color: isSelected ? colors2.colorInteractive : colors2.colorOnBg,
                                     fontWeight: isSelected ? import_native.font.weight.semibold : import_native.font.weight.body
@@ -3428,18 +3478,18 @@ function Select({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { type: "error", message: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Slider/Slider.tsx
 var import_react15 = require("react");
-var import_react_native42 = require("react-native");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react_native43 = require("react-native");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TRACK_HEIGHT = 6;
 var THUMB_SIZE = 24;
-var styles38 = import_react_native42.StyleSheet.create({
+var styles39 = import_react_native43.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
@@ -3533,34 +3583,34 @@ function Slider({
       updateValue(valueFromTouch(e.nativeEvent.pageX, pageX));
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-    import_react_native42.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    import_react_native43.View,
     {
-      style: [styles38.container, style],
+      style: [styles39.container, style],
       accessibilityRole: "adjustable",
       accessibilityLabel: label,
       accessibilityValue: { min, max, now: currentValue, text: String(currentValue) },
       accessibilityState: { disabled },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: styles38.labelRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Label, { label }),
-          showValue && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ScaledText, { style: [styles38.valueText, { color: colors2.colorOnBg }], children: currentValue })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: styles39.labelRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Label, { label }),
+          showValue && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ScaledText, { style: [styles39.valueText, { color: colors2.colorOnBg }], children: currentValue })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-          import_react_native42.View,
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          import_react_native43.View,
           {
-            style: [styles38.trackContainer, disabled && { opacity: 0.4 }],
+            style: [styles39.trackContainer, disabled && { opacity: 0.4 }],
             onLayout: handleTrackLayout,
             onStartShouldSetResponder: handleStartShouldSetResponder,
             onMoveShouldSetResponder: handleStartShouldSetResponder,
             onResponderGrant: handleResponderGrant,
             onResponderMove: handleResponderMove,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.View, { style: [styles38.track, { backgroundColor: colors2.colorBgSubtle }], children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                import_react_native42.View,
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.View, { style: [styles39.track, { backgroundColor: colors2.colorBgSubtle }], children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_react_native43.View,
                 {
                   style: [
-                    styles38.fill,
+                    styles39.fill,
                     {
                       width: `${fillPct}%`,
                       backgroundColor: error ? colors2.colorError : colors2.colorInteractive
@@ -3568,11 +3618,11 @@ function Slider({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                import_react_native42.View,
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_react_native43.View,
                 {
                   style: [
-                    styles38.thumb,
+                    styles39.thumb,
                     {
                       start: `${fillPct}%`,
                       marginStart: -(THUMB_SIZE / 2),
@@ -3585,8 +3635,8 @@ function Slider({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { type: "error", message: error }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { type: "hint", message: hint })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Message, { type: "error", message: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Message, { type: "hint", message: hint })
       ]
     }
   );
@@ -3594,10 +3644,10 @@ function Slider({
 
 // src/components/interaction/form/NumberInput/NumberInput.tsx
 var import_react16 = require("react");
-var import_react_native43 = require("react-native");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react_native44 = require("react-native");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var STEPPER_SIZE = 44;
-var styles39 = import_react_native43.StyleSheet.create({
+var styles40 = import_react_native44.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
@@ -3612,14 +3662,11 @@ var styles39 = import_react_native43.StyleSheet.create({
     justifyContent: "center",
     borderWidth: 1
   },
+  // The steppers round only the field's outer corners, with `radius.field` from the theme.
   stepperStart: {
-    borderTopStartRadius: import_native.border.radius.full,
-    borderBottomStartRadius: import_native.border.radius.full,
     borderEndWidth: 0
   },
   stepperEnd: {
-    borderTopEndRadius: import_native.border.radius.full,
-    borderBottomEndRadius: import_native.border.radius.full,
     borderStartWidth: 0
   },
   stepperText: {
@@ -3670,7 +3717,7 @@ function NumberInput({
   onChange,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const isControlled = value !== void 0;
   const [internalValue, setInternalValue] = (0, import_react16.useState)(defaultValue ?? 0);
   const currentValue = isControlled ? value : internalValue;
@@ -3686,11 +3733,11 @@ function NumberInput({
   const canDecrease = min === void 0 || currentValue > min;
   const canIncrease = max === void 0 || currentValue < max;
   const borderColor = error ? colors2.colorError : colors2.colorOnBg;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: [styles39.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Label, { label }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: [styles39.inputRow, disabled && { opacity: 0.4 }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        import_react_native43.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native44.View, { style: [styles40.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Label, { label }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native44.View, { style: [styles40.inputRow, disabled && { opacity: 0.4 }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        import_react_native44.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel: "Decrease",
@@ -3698,36 +3745,38 @@ function NumberInput({
           disabled: disabled || !canDecrease,
           onPress: () => update(currentValue - step),
           style: ({ pressed }) => [
-            styles39.stepper,
-            styles39.stepperStart,
+            styles40.stepper,
+            styles40.stepperStart,
             {
               borderColor,
+              borderTopStartRadius: radius.field,
+              borderBottomStartRadius: radius.field,
               backgroundColor: colors2.colorBgSubtle
             },
             pressed && { opacity: 0.7 },
             (disabled || !canDecrease) && { opacity: 0.4 }
           ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             ScaledText,
             {
-              style: [styles39.stepperText, { color: colors2.colorOnBg }],
+              style: [styles40.stepperText, { color: colors2.colorOnBg }],
               "aria-hidden": true,
               children: "\u2212"
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        import_react_native43.View,
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        import_react_native44.View,
         {
           style: [
-            styles39.inputWrapper,
+            styles40.inputWrapper,
             {
               borderColor,
               backgroundColor: colors2.colorBg
             }
           ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             ScaledTextInput,
             {
               accessibilityLabel: label,
@@ -3747,15 +3796,15 @@ function NumberInput({
                 update(safe);
               },
               style: [
-                styles39.input,
+                styles40.input,
                 { color: colors2.colorOnBg }
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        import_react_native43.Pressable,
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        import_react_native44.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel: "Increase",
@@ -3763,19 +3812,21 @@ function NumberInput({
           disabled: disabled || !canIncrease,
           onPress: () => update(currentValue + step),
           style: ({ pressed }) => [
-            styles39.stepper,
-            styles39.stepperEnd,
+            styles40.stepper,
+            styles40.stepperEnd,
             {
               borderColor,
+              borderTopEndRadius: radius.field,
+              borderBottomEndRadius: radius.field,
               backgroundColor: colors2.colorBgSubtle
             },
             pressed && { opacity: 0.7 },
             (disabled || !canIncrease) && { opacity: 0.4 }
           ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             ScaledText,
             {
-              style: [styles39.stepperText, { color: colors2.colorOnBg }],
+              style: [styles40.stepperText, { color: colors2.colorOnBg }],
               "aria-hidden": true,
               children: "+"
             }
@@ -3783,15 +3834,15 @@ function NumberInput({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Message, { type: "error", message: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/Dialog/Dialog.tsx
-var import_react_native44 = require("react-native");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var styles40 = import_react_native44.StyleSheet.create({
+var import_react_native45 = require("react-native");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var styles41 = import_react_native45.StyleSheet.create({
   overlay: {
     flex: 1,
     justifyContent: "center",
@@ -3847,50 +3898,50 @@ function Dialog({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_react_native44.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    import_react_native45.Modal,
     {
       visible: isOpen,
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native44.View, { style: styles40.overlay, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          import_react_native44.Pressable,
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react_native45.View, { style: styles41.overlay, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_react_native45.Pressable,
           {
             testID: "bds-dialog-backdrop",
-            style: import_react_native44.StyleSheet.absoluteFill,
+            style: import_react_native45.StyleSheet.absoluteFill,
             onPress: onClose,
             accessible: false,
             importantForAccessibility: "no"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-          import_react_native44.View,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          import_react_native45.View,
           {
-            style: [styles40.panel, { backgroundColor: colors2.colorGreySubtle }, style],
+            style: [styles41.panel, { backgroundColor: colors2.colorGreySubtle }, style],
             accessibilityViewIsModal: true,
             onAccessibilityEscape: onClose,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_react_native44.Pressable,
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                import_react_native45.Pressable,
                 {
-                  style: styles40.closeButton,
+                  style: styles41.closeButton,
                   onPress: onClose,
                   accessibilityRole: "button",
                   accessibilityLabel: "Close dialog",
                   hitSlop: 8,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     ScaledText,
                     {
-                      style: [styles40.closeText, { color: colors2.colorOnBgSubtle }],
+                      style: [styles41.closeText, { color: colors2.colorOnBgSubtle }],
                       "aria-hidden": true,
                       children: "\u2715"
                     }
                   )
                 }
               ),
-              !!title && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.View, { style: styles40.header, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ScaledText, { style: [styles40.title, { color: colors2.colorOnGreySubtle }], children: title }) }),
+              !!title && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.View, { style: styles41.header, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ScaledText, { style: [styles41.title, { color: colors2.colorOnGreySubtle }], children: title }) }),
               children
             ]
           }
@@ -3902,9 +3953,9 @@ function Dialog({
 
 // src/components/interaction/SideSheet/SideSheet.tsx
 var import_react17 = require("react");
-var import_react_native45 = require("react-native");
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var styles41 = import_react_native45.StyleSheet.create({
+var import_react_native46 = require("react-native");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var styles42 = import_react_native46.StyleSheet.create({
   overlay: {
     flex: 1,
     justifyContent: "flex-end"
@@ -3961,31 +4012,31 @@ function SideSheet({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  const screenHeight = import_react_native45.Dimensions.get("window").height;
-  const slideAnim = (0, import_react17.useRef)(new import_react_native45.Animated.Value(screenHeight)).current;
-  const backdropAnim = (0, import_react17.useRef)(new import_react_native45.Animated.Value(0)).current;
+  const screenHeight = import_react_native46.Dimensions.get("window").height;
+  const slideAnim = (0, import_react17.useRef)(new import_react_native46.Animated.Value(screenHeight)).current;
+  const backdropAnim = (0, import_react17.useRef)(new import_react_native46.Animated.Value(0)).current;
   (0, import_react17.useEffect)(() => {
     if (isOpen) {
-      import_react_native45.Animated.parallel([
-        import_react_native45.Animated.timing(slideAnim, {
+      import_react_native46.Animated.parallel([
+        import_react_native46.Animated.timing(slideAnim, {
           toValue: 0,
           duration: 250,
           useNativeDriver: true
         }),
-        import_react_native45.Animated.timing(backdropAnim, {
+        import_react_native46.Animated.timing(backdropAnim, {
           toValue: 1,
           duration: 250,
           useNativeDriver: true
         })
       ]).start();
     } else {
-      import_react_native45.Animated.parallel([
-        import_react_native45.Animated.timing(slideAnim, {
+      import_react_native46.Animated.parallel([
+        import_react_native46.Animated.timing(slideAnim, {
           toValue: screenHeight,
           duration: 200,
           useNativeDriver: true
         }),
-        import_react_native45.Animated.timing(backdropAnim, {
+        import_react_native46.Animated.timing(backdropAnim, {
           toValue: 0,
           duration: 200,
           useNativeDriver: true
@@ -3993,25 +4044,25 @@ function SideSheet({
       ]).start();
     }
   }, [isOpen, slideAnim, backdropAnim, screenHeight]);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-    import_react_native45.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_react_native46.Modal,
     {
       visible: isOpen,
       transparent: true,
       animationType: "none",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react_native45.View, { style: styles41.overlay, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          import_react_native45.Animated.View,
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native46.View, { style: styles42.overlay, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_react_native46.Animated.View,
           {
             style: [
-              import_react_native45.StyleSheet.absoluteFill,
+              import_react_native46.StyleSheet.absoluteFill,
               { backgroundColor: "rgba(0, 0, 0, 0.5)", opacity: backdropAnim }
             ],
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-              import_react_native45.Pressable,
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              import_react_native46.Pressable,
               {
-                style: import_react_native45.StyleSheet.absoluteFill,
+                style: import_react_native46.StyleSheet.absoluteFill,
                 onPress: onClose,
                 testID: "bds-sidesheet-backdrop",
                 accessible: false,
@@ -4020,11 +4071,11 @@ function SideSheet({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-          import_react_native45.Animated.View,
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+          import_react_native46.Animated.View,
           {
             style: [
-              styles41.panel,
+              styles42.panel,
               {
                 backgroundColor: colors2.colorBg,
                 transform: [{ translateY: slideAnim }]
@@ -4034,24 +4085,24 @@ function SideSheet({
             accessibilityViewIsModal: true,
             onAccessibilityEscape: onClose,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-                import_react_native45.View,
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+                import_react_native46.View,
                 {
-                  style: [styles41.header, { borderBottomColor: colors2.colorBgSubtle }],
+                  style: [styles42.header, { borderBottomColor: colors2.colorBgSubtle }],
                   children: [
-                    !!title && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ScaledText, { style: [styles41.title, { color: colors2.colorOnBg }], children: title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                      import_react_native45.Pressable,
+                    !!title && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ScaledText, { style: [styles42.title, { color: colors2.colorOnBg }], children: title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      import_react_native46.Pressable,
                       {
-                        style: styles41.closeButton,
+                        style: styles42.closeButton,
                         onPress: onClose,
                         accessibilityRole: "button",
                         accessibilityLabel: "Close side sheet",
                         hitSlop: 8,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                           ScaledText,
                           {
-                            style: [styles41.closeText, { color: colors2.colorOnBgSubtle }],
+                            style: [styles42.closeText, { color: colors2.colorOnBgSubtle }],
                             "aria-hidden": true,
                             children: "\u2715"
                           }
@@ -4061,7 +4112,7 @@ function SideSheet({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.View, { style: styles41.body, testID: "bds-sidesheet-body", children })
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native46.View, { style: styles42.body, testID: "bds-sidesheet-body", children })
             ]
           }
         )
@@ -4072,10 +4123,10 @@ function SideSheet({
 
 // src/components/interaction/Toast/Toast.tsx
 var import_react18 = require("react");
-var import_react_native46 = require("react-native");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react_native47 = require("react-native");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var ToastContext = (0, import_react18.createContext)(void 0);
-var styles42 = import_react_native46.StyleSheet.create({
+var styles43 = import_react_native47.StyleSheet.create({
   container: {
     position: "absolute",
     top: 0,
@@ -4120,8 +4171,8 @@ function ToastItem({
   onRemove
 }) {
   const { colors: colors2 } = useTheme();
-  const slideAnim = (0, import_react18.useRef)(new import_react_native46.Animated.Value(-100)).current;
-  const opacityAnim = (0, import_react18.useRef)(new import_react_native46.Animated.Value(0)).current;
+  const slideAnim = (0, import_react18.useRef)(new import_react_native47.Animated.Value(-100)).current;
+  const opacityAnim = (0, import_react18.useRef)(new import_react_native47.Animated.Value(0)).current;
   const variantColors = (0, import_react18.useMemo)(
     () => ({
       success: { bg: colors2.colorSuccess, text: colors2.colorOnSuccess },
@@ -4131,13 +4182,13 @@ function ToastItem({
     [colors2]
   );
   (0, import_react18.useEffect)(() => {
-    import_react_native46.Animated.parallel([
-      import_react_native46.Animated.timing(slideAnim, {
+    import_react_native47.Animated.parallel([
+      import_react_native47.Animated.timing(slideAnim, {
         toValue: 0,
         duration: 200,
         useNativeDriver: true
       }),
-      import_react_native46.Animated.timing(opacityAnim, {
+      import_react_native47.Animated.timing(opacityAnim, {
         toValue: 1,
         duration: 200,
         useNativeDriver: true
@@ -4149,11 +4200,11 @@ function ToastItem({
     return () => clearTimeout(timer);
   }, [onRemove]);
   const { bg, text } = variantColors[toast.variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-    import_react_native46.Animated.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    import_react_native47.Animated.View,
     {
       style: [
-        styles42.toast,
+        styles43.toast,
         {
           backgroundColor: bg,
           transform: [{ translateY: slideAnim }],
@@ -4163,16 +4214,16 @@ function ToastItem({
       accessibilityRole: "alert",
       accessibilityLiveRegion: "polite",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ScaledText, { style: [styles42.message, { color: text }], children: toast.message }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-          import_react_native46.Pressable,
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScaledText, { style: [styles43.message, { color: text }], children: toast.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          import_react_native47.Pressable,
           {
-            style: styles42.closeButton,
+            style: styles43.closeButton,
             onPress: onRemove,
             accessibilityRole: "button",
             accessibilityLabel: "Dismiss",
             hitSlop: 8,
-            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ScaledText, { style: [styles42.closeText, { color: text }], "aria-hidden": true, children: "\u2715" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScaledText, { style: [styles43.closeText, { color: text }], "aria-hidden": true, children: "\u2715" })
           }
         )
       ]
@@ -4192,15 +4243,15 @@ function ToastProvider({
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   const value = (0, import_react18.useMemo)(() => ({ showToast }), [showToast]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ToastContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native46.View, { style: [{ flex: 1 }, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ToastContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native47.View, { style: [{ flex: 1 }, style], children: [
     children,
-    toasts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      import_react_native46.View,
+    toasts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      import_react_native47.View,
       {
-        style: styles42.container,
+        style: styles43.container,
         accessibilityRole: "summary",
         accessibilityLabel: "Notifications",
-        children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           ToastItem,
           {
             toast,
@@ -4222,9 +4273,9 @@ function useToast() {
 
 // src/components/interaction/DropdownMenu/DropdownMenu.tsx
 var import_react19 = __toESM(require("react"), 1);
-var import_react_native47 = require("react-native");
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var styles43 = import_react_native47.StyleSheet.create({
+var import_react_native48 = require("react-native");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var styles44 = import_react_native48.StyleSheet.create({
   overlay: {
     flex: 1,
     justifyContent: "flex-end"
@@ -4282,31 +4333,31 @@ function DropdownMenu({
 }) {
   const { colors: colors2 } = useTheme();
   const [open, setOpen] = (0, import_react19.useState)(false);
-  const screenHeight = import_react_native47.Dimensions.get("window").height;
-  const slideAnim = (0, import_react19.useRef)(new import_react_native47.Animated.Value(screenHeight)).current;
-  const backdropAnim = (0, import_react19.useRef)(new import_react_native47.Animated.Value(0)).current;
+  const screenHeight = import_react_native48.Dimensions.get("window").height;
+  const slideAnim = (0, import_react19.useRef)(new import_react_native48.Animated.Value(screenHeight)).current;
+  const backdropAnim = (0, import_react19.useRef)(new import_react_native48.Animated.Value(0)).current;
   (0, import_react19.useEffect)(() => {
     if (open) {
-      import_react_native47.Animated.parallel([
-        import_react_native47.Animated.timing(slideAnim, {
+      import_react_native48.Animated.parallel([
+        import_react_native48.Animated.timing(slideAnim, {
           toValue: 0,
           duration: 250,
           useNativeDriver: true
         }),
-        import_react_native47.Animated.timing(backdropAnim, {
+        import_react_native48.Animated.timing(backdropAnim, {
           toValue: 1,
           duration: 250,
           useNativeDriver: true
         })
       ]).start();
     } else {
-      import_react_native47.Animated.parallel([
-        import_react_native47.Animated.timing(slideAnim, {
+      import_react_native48.Animated.parallel([
+        import_react_native48.Animated.timing(slideAnim, {
           toValue: screenHeight,
           duration: 200,
           useNativeDriver: true
         }),
-        import_react_native47.Animated.timing(backdropAnim, {
+        import_react_native48.Animated.timing(backdropAnim, {
           toValue: 0,
           duration: 200,
           useNativeDriver: true
@@ -4318,31 +4369,31 @@ function DropdownMenu({
     item.onPress?.();
     setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native47.View, { style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style, children: [
     import_react19.default.cloneElement(trigger, {
       onPress: () => setOpen(true),
       accessibilityRole: "button",
       accessibilityLabel: title
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      import_react_native47.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_react_native48.Modal,
       {
         visible: open,
         transparent: true,
         animationType: "none",
         onRequestClose: () => setOpen(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native47.View, { style: styles43.overlay, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_react_native47.Animated.View,
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: styles44.overlay, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_react_native48.Animated.View,
             {
               style: [
-                import_react_native47.StyleSheet.absoluteFill,
+                import_react_native48.StyleSheet.absoluteFill,
                 { backgroundColor: "rgba(0, 0, 0, 0.5)", opacity: backdropAnim }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                import_react_native47.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                import_react_native48.Pressable,
                 {
-                  style: import_react_native47.StyleSheet.absoluteFill,
+                  style: import_react_native48.StyleSheet.absoluteFill,
                   onPress: () => setOpen(false),
                   testID: "bds-dropdownmenu-backdrop",
                   accessible: false,
@@ -4351,11 +4402,11 @@ function DropdownMenu({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_react_native47.Animated.View,
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_react_native48.Animated.View,
             {
               style: [
-                styles43.sheet,
+                styles44.sheet,
                 {
                   backgroundColor: colors2.colorBg,
                   transform: [{ translateY: slideAnim }]
@@ -4363,28 +4414,28 @@ function DropdownMenu({
               ],
               accessibilityViewIsModal: true,
               onAccessibilityEscape: () => setOpen(false),
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native47.SafeAreaView, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-                  import_react_native47.View,
+              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.SafeAreaView, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                  import_react_native48.View,
                   {
                     style: [
-                      styles43.sheetHeader,
+                      styles44.sheetHeader,
                       { borderBottomColor: colors2.colorBgSubtle }
                     ],
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScaledText, { style: [styles43.sheetTitle, { color: colors2.colorOnBg }], children: title }),
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                        import_react_native47.Pressable,
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ScaledText, { style: [styles44.sheetTitle, { color: colors2.colorOnBg }], children: title }),
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                        import_react_native48.Pressable,
                         {
                           accessibilityRole: "button",
                           accessibilityLabel: "Close",
                           onPress: () => setOpen(false),
                           hitSlop: 8,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             ScaledText,
                             {
                               style: [
-                                styles43.closeText,
+                                styles44.closeText,
                                 { color: colors2.colorInteractive }
                               ],
                               children: "Done"
@@ -4395,24 +4446,24 @@ function DropdownMenu({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  import_react_native47.FlatList,
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  import_react_native48.FlatList,
                   {
                     data: items,
                     keyExtractor: (item) => item.id,
-                    renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-                      item.separator && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                        import_react_native47.View,
+                    renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+                      item.separator && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                        import_react_native48.View,
                         {
                           style: [
-                            styles43.separator,
+                            styles44.separator,
                             { backgroundColor: colors2.colorBgSubtle }
                           ],
                           accessibilityRole: "none"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-                        import_react_native47.Pressable,
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                        import_react_native48.Pressable,
                         {
                           accessibilityRole: "menuitem",
                           accessibilityLabel: item.label,
@@ -4420,24 +4471,24 @@ function DropdownMenu({
                           disabled: item.disabled,
                           onPress: () => handleItemPress(item),
                           style: ({ pressed }) => [
-                            styles43.item,
+                            styles44.item,
                             pressed && { backgroundColor: colors2.colorBgSubtle },
                             item.disabled && { opacity: 0.4 }
                           ],
                           children: [
-                            !!item.icon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                              import_react_native47.View,
+                            !!item.icon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                              import_react_native48.View,
                               {
                                 importantForAccessibility: "no-hide-descendants",
                                 accessibilityElementsHidden: true,
                                 children: item.icon
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                               ScaledText,
                               {
                                 style: [
-                                  styles43.itemText,
+                                  styles44.itemText,
                                   { color: colors2.colorOnBg }
                                 ],
                                 children: item.label
@@ -4460,9 +4511,9 @@ function DropdownMenu({
 
 // src/components/interaction/Popover/Popover.tsx
 var import_react20 = __toESM(require("react"), 1);
-var import_react_native48 = require("react-native");
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var styles44 = import_react_native48.StyleSheet.create({
+var import_react_native49 = require("react-native");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var styles45 = import_react_native49.StyleSheet.create({
   wrapper: {
     alignSelf: "flex-start"
   },
@@ -4494,35 +4545,35 @@ function Popover({
   const { colors: colors2 } = useTheme();
   const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
   const close = () => setIsOpen(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: [styles44.wrapper, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { style: [styles45.wrapper, style], children: [
     import_react20.default.cloneElement(children, {
       onPress: () => setIsOpen(true),
       accessibilityRole: "button",
       accessibilityLabel: accessibilityLabel ?? "Open popover"
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      import_react_native48.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_react_native49.Modal,
       {
         visible: isOpen,
         transparent: true,
         animationType: "fade",
         onRequestClose: close,
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: styles44.overlay, onAccessibilityEscape: close, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_react_native48.Pressable,
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { style: styles45.overlay, onAccessibilityEscape: close, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            import_react_native49.Pressable,
             {
               testID: "bds-popover-backdrop",
-              style: import_react_native48.StyleSheet.absoluteFill,
+              style: import_react_native49.StyleSheet.absoluteFill,
               onPress: close,
               onAccessibilityTap: close,
               accessibilityRole: "button",
               accessibilityLabel: "Close popover"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_react_native48.View,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            import_react_native49.View,
             {
-              style: [styles44.panel, { backgroundColor: colors2.colorBg }],
+              style: [styles45.panel, { backgroundColor: colors2.colorBg }],
               accessibilityLabel,
               children: content
             }