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

package/dist/index.js

@@ -72,10 +72,37 @@ function useReactNavigationTheme(overrides = {}) {
   });
 }
 
-// src/components/ui/Typography/Typography.tsx
-import { StyleSheet, Text } from "react-native";
+// src/native/ScaledText.tsx
+import { forwardRef } from "react";
+import { StyleSheet, Text, TextInput } from "react-native";
+
+// src/native/fontScale.ts
+function maxFontScaleFor(fontSize) {
+  if (fontSize >= 60) return 1;
+  if (fontSize >= 26) return 1.3;
+  if (fontSize >= 20) return 1.5;
+  return 2;
+}
+var DEFAULT_FONT_SIZE = 14;
+
+// src/native/ScaledText.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var styles = StyleSheet.create({
+function maxFontScaleForStyle(style, override) {
+  if (override !== void 0 && override !== null) return override;
+  const fontSize = StyleSheet.flatten(style)?.fontSize;
+  return maxFontScaleFor(typeof fontSize === "number" ? fontSize : DEFAULT_FONT_SIZE);
+}
+var ScaledText = forwardRef(function ScaledText2({ maxFontSizeMultiplier, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(Text, { ref, style, maxFontSizeMultiplier: maxFontScaleForStyle(style, maxFontSizeMultiplier), ...rest });
+});
+var ScaledTextInput = forwardRef(function ScaledTextInput2({ maxFontSizeMultiplier, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(TextInput, { ref, style, maxFontSizeMultiplier: maxFontScaleForStyle(style, maxFontSizeMultiplier), ...rest });
+});
+
+// src/components/ui/Typography/Typography.tsx
+import { StyleSheet as StyleSheet2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var styles = StyleSheet2.create({
   base: {
     fontFamily: font.family.body,
     fontWeight: font.weight.body
@@ -114,22 +141,30 @@ var accessibilityRoles = {
   body: "text",
   body_s: "text"
 };
-function Typography({ variant = "body", children, style }) {
+function Typography({
+  variant = "body",
+  children,
+  style,
+  maxFontSizeMultiplier,
+  numberOfLines
+}) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ jsx2(
-    Text,
+  return /* @__PURE__ */ jsx3(
+    ScaledText,
     {
       accessibilityRole: accessibilityRoles[variant],
       style: [styles.base, styles[variant], { color: colors2.colorOnBg }, style],
+      maxFontSizeMultiplier,
+      numberOfLines,
       children
     }
   );
 }
 
 // src/components/ui/Badge/Badge.tsx
-import { StyleSheet as StyleSheet2, View, Text as Text2 } from "react-native";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var styles2 = StyleSheet2.create({
+import { StyleSheet as StyleSheet3, View } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var styles2 = StyleSheet3.create({
   badge: {
     alignSelf: "flex-start",
     flexDirection: "row",
@@ -146,7 +181,7 @@ var styles2 = StyleSheet2.create({
     lineHeight: font.size.bodyS
   }
 });
-function Badge({ children, variant = "primary", style }) {
+function Badge({ children, variant = "primary", style, maxFontSizeMultiplier }) {
   const { colors: colors2 } = useTheme();
   const variantColors = {
     primary: { bg: colors2.colorInteractive, text: colors2.colorOnInteractive },
@@ -156,12 +191,12 @@ function Badge({ children, variant = "primary", style }) {
     warning: { bg: colors2.colorWarning, text: colors2.colorOnWarning }
   };
   const { bg, text } = variantColors[variant];
-  return /* @__PURE__ */ jsx3(View, { style: [styles2.badge, { backgroundColor: bg }, style], children: /* @__PURE__ */ jsx3(Text2, { style: [styles2.text, { color: text }], children }) });
+  return /* @__PURE__ */ jsx4(View, { style: [styles2.badge, { backgroundColor: bg }, style], children: /* @__PURE__ */ jsx4(ScaledText, { style: [styles2.text, { color: text }], maxFontSizeMultiplier, children }) });
 }
 
 // src/components/ui/Avatar/Avatar.tsx
-import { StyleSheet as StyleSheet3, View as View2, Text as Text3, Image } from "react-native";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet4, View as View2, Image } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var sizeMap = {
   small: { container: 32, fontSize: font.size.bodyS },
   medium: { container: 48, fontSize: font.size.body },
@@ -170,7 +205,7 @@ var sizeMap = {
 function getInitials(name) {
   return name.split(" ").filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase()).join("");
 }
-var styles3 = StyleSheet3.create({
+var styles3 = StyleSheet4.create({
   container: {
     borderRadius: border.radius.full,
     overflow: "hidden",
@@ -191,18 +226,18 @@ function Avatar({ src, alt, name, size = "medium", style }) {
   const { container, fontSize } = sizeMap[size];
   const label = alt ?? name ?? "User avatar";
   if (src) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       View2,
       {
         style: [styles3.container, { width: container, height: container }, style],
         accessibilityLabel: label,
         accessibilityRole: "image",
-        children: /* @__PURE__ */ jsx4(Image, { source: { uri: src }, style: styles3.image })
+        children: /* @__PURE__ */ jsx5(Image, { source: { uri: src }, style: styles3.image })
       }
     );
   }
   const initials = name ? getInitials(name) : "";
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     View2,
     {
       style: [
@@ -212,8 +247,8 @@ function Avatar({ src, alt, name, size = "medium", style }) {
       ],
       accessibilityLabel: label,
       accessibilityRole: "image",
-      children: /* @__PURE__ */ jsx4(
-        Text3,
+      children: /* @__PURE__ */ jsx5(
+        ScaledText,
         {
           style: [styles3.initials, { fontSize, color: colors2.colorOnBlue }],
           importantForAccessibility: "no",
@@ -226,21 +261,21 @@ function Avatar({ src, alt, name, size = "medium", style }) {
 }
 
 // src/components/ui/Separator/Separator.tsx
-import { StyleSheet as StyleSheet4, View as View3 } from "react-native";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var styles4 = StyleSheet4.create({
+import { StyleSheet as StyleSheet5, View as View3 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var styles4 = StyleSheet5.create({
   horizontal: {
-    height: StyleSheet4.hairlineWidth,
+    height: StyleSheet5.hairlineWidth,
     width: "100%"
   },
   vertical: {
-    width: StyleSheet4.hairlineWidth,
+    width: StyleSheet5.hairlineWidth,
     alignSelf: "stretch"
   }
 });
 function Separator({ orientation = "horizontal", style }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     View3,
     {
       accessibilityRole: "none",
@@ -255,7 +290,7 @@ function Separator({ orientation = "horizontal", style }) {
 
 // src/components/ui/Loading/Loading.tsx
 import { ActivityIndicator } from "react-native";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var rnSize = {
   small: "small",
   medium: "large",
@@ -263,7 +298,7 @@ var rnSize = {
 };
 function Loading({ size = "medium", accessibilityLabel = "Loading", style }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     ActivityIndicator,
     {
       size: rnSize[size],
@@ -276,14 +311,14 @@ function Loading({ size = "medium", accessibilityLabel = "Loading", style }) {
 }
 
 // src/components/ui/Progress/Progress.tsx
-import { StyleSheet as StyleSheet5, View as View4, Text as Text4 } from "react-native";
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet6, View as View4 } from "react-native";
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
 var trackHeight = {
   small: 4,
   medium: 8,
   large: 12
 };
-var styles5 = StyleSheet5.create({
+var styles5 = StyleSheet6.create({
   container: {
     width: "100%"
   },
@@ -320,20 +355,20 @@ function Progress({
   const height = trackHeight[size];
   return /* @__PURE__ */ jsxs(View4, { style: [styles5.container, style], children: [
     showLabel && /* @__PURE__ */ jsxs(View4, { style: styles5.labelRow, children: [
-      /* @__PURE__ */ jsx7(Text4, { style: [styles5.labelText, { color: colors2.colorOnBg }], children: label }),
-      /* @__PURE__ */ jsxs(Text4, { style: [styles5.labelText, { color: colors2.colorOnBgSubtle }], children: [
+      /* @__PURE__ */ jsx8(ScaledText, { style: [styles5.labelText, { color: colors2.colorOnBg }], children: label }),
+      /* @__PURE__ */ jsxs(ScaledText, { style: [styles5.labelText, { color: colors2.colorOnBgSubtle }], children: [
         Math.round(percentage),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       View4,
       {
         style: [styles5.track, { height, backgroundColor: colors2.colorBgSubtle }],
         accessibilityRole: "progressbar",
         accessibilityLabel: label,
         accessibilityValue: { min: 0, max, now: value },
-        children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx8(
           View4,
           {
             style: [
@@ -349,9 +384,9 @@ function Progress({
 
 // src/components/ui/Skeleton/Skeleton.tsx
 import { useEffect, useRef } from "react";
-import { Animated, StyleSheet as StyleSheet6 } from "react-native";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var styles6 = StyleSheet6.create({
+import { Animated, StyleSheet as StyleSheet7 } from "react-native";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var styles6 = StyleSheet7.create({
   skeleton: {
     borderRadius: border.radius.xs,
     overflow: "hidden"
@@ -370,7 +405,7 @@ function Skeleton({ style }) {
     anim.start();
     return () => anim.stop();
   }, [opacity]);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     Animated.View,
     {
       importantForAccessibility: "no-hide-descendants",
@@ -384,9 +419,9 @@ function Skeleton({ style }) {
 }
 
 // src/components/ui/Alert/Alert.tsx
-import { StyleSheet as StyleSheet7, View as View5, Text as Text5, Pressable } from "react-native";
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
-var styles7 = StyleSheet7.create({
+import { StyleSheet as StyleSheet8, View as View5, Pressable } from "react-native";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var styles7 = StyleSheet8.create({
   alert: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -443,12 +478,12 @@ function Alert({
       accessibilityLiveRegion: isUrgent ? "assertive" : "polite",
       style: [styles7.alert, { backgroundColor: bg, borderStartWidth: spacing.s, borderStartColor: borderColor }, style],
       children: [
-        icon && /* @__PURE__ */ jsx9(View5, { style: styles7.icon, children: icon }),
+        icon && /* @__PURE__ */ jsx10(View5, { style: styles7.icon, children: icon }),
         /* @__PURE__ */ jsxs2(View5, { style: styles7.content, children: [
-          title && /* @__PURE__ */ jsx9(Text5, { style: [styles7.title, { color: text }], children: title }),
-          typeof resolvedChildren === "string" || typeof resolvedChildren === "number" ? /* @__PURE__ */ jsx9(Text5, { style: [styles7.body, { color: text }], children: resolvedChildren }) : resolvedChildren
+          title && /* @__PURE__ */ jsx10(ScaledText, { style: [styles7.title, { color: text }], children: title }),
+          typeof resolvedChildren === "string" || typeof resolvedChildren === "number" ? /* @__PURE__ */ jsx10(ScaledText, { style: [styles7.body, { color: text }], children: resolvedChildren }) : resolvedChildren
         ] }),
-        onDismiss && /* @__PURE__ */ jsx9(
+        onDismiss && /* @__PURE__ */ jsx10(
           Pressable,
           {
             onPress: onDismiss,
@@ -456,7 +491,7 @@ function Alert({
             accessibilityLabel: "Dismiss alert",
             accessibilityRole: "button",
             hitSlop: 8,
-            children: /* @__PURE__ */ jsx9(Text5, { style: { color: text, fontSize: 16 }, children: "\u2715" })
+            children: /* @__PURE__ */ jsx10(ScaledText, { style: { color: text, fontSize: 16 }, children: "\u2715" })
           }
         )
       ]
@@ -465,9 +500,9 @@ function Alert({
 }
 
 // src/components/ui/NotificationBanner/NotificationBanner.tsx
-import { StyleSheet as StyleSheet8, View as View6, Text as Text6, Pressable as Pressable2 } from "react-native";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
-var styles8 = StyleSheet8.create({
+import { StyleSheet as StyleSheet9, View as View6, Pressable as Pressable2 } from "react-native";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var styles8 = StyleSheet9.create({
   banner: {
     flexDirection: "row",
     alignItems: "center",
@@ -512,9 +547,9 @@ function NotificationBanner({
       accessibilityLiveRegion: isUrgent ? "assertive" : "polite",
       style: [styles8.banner, { backgroundColor: bg, borderBottomWidth: 3, borderBottomColor: borderColor }, style],
       children: [
-        /* @__PURE__ */ jsx10(View6, { style: styles8.body, children: typeof resolvedChildren === "string" || typeof resolvedChildren === "number" ? /* @__PURE__ */ jsx10(Text6, { style: [styles8.content, { color: text }], children: resolvedChildren }) : resolvedChildren }),
+        /* @__PURE__ */ jsx11(View6, { style: styles8.body, children: typeof resolvedChildren === "string" || typeof resolvedChildren === "number" ? /* @__PURE__ */ jsx11(ScaledText, { style: [styles8.content, { color: text }], children: resolvedChildren }) : resolvedChildren }),
         action,
-        onDismiss && /* @__PURE__ */ jsx10(
+        onDismiss && /* @__PURE__ */ jsx11(
           Pressable2,
           {
             onPress: onDismiss,
@@ -522,7 +557,7 @@ function NotificationBanner({
             accessibilityLabel: "Dismiss notification",
             accessibilityRole: "button",
             hitSlop: 8,
-            children: /* @__PURE__ */ jsx10(Text6, { style: { color: text, fontSize: 16 }, children: "\u2715" })
+            children: /* @__PURE__ */ jsx11(ScaledText, { style: { color: text, fontSize: 16 }, children: "\u2715" })
           }
         )
       ]
@@ -531,9 +566,9 @@ function NotificationBanner({
 }
 
 // src/components/ui/Link/Link.tsx
-import { StyleSheet as StyleSheet9, Text as Text7, Pressable as Pressable3, Linking } from "react-native";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var styles9 = StyleSheet9.create({
+import { StyleSheet as StyleSheet10, Pressable as Pressable3, Linking } from "react-native";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var styles9 = StyleSheet10.create({
   text: {
     fontSize: font.size.body,
     fontFamily: font.family.body,
@@ -552,22 +587,22 @@ function Link({ href, children, accessibilityLabel, style, onPress }) {
       Linking.openURL(href);
     }
   };
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Pressable3,
     {
       onPress: handlePress,
       accessibilityRole: "link",
       accessibilityLabel,
       style: ({ pressed }) => pressed && styles9.pressed,
-      children: /* @__PURE__ */ jsx11(Text7, { style: [styles9.text, { color: colors2.colorInteractiveOnBg }, style], children })
+      children: /* @__PURE__ */ jsx12(ScaledText, { style: [styles9.text, { color: colors2.colorInteractiveOnBg }, style], children })
     }
   );
 }
 
 // src/components/ui/DescriptionList/DescriptionList.tsx
-import { StyleSheet as StyleSheet10, View as View7, Text as Text8 } from "react-native";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
-var styles10 = StyleSheet10.create({
+import { StyleSheet as StyleSheet11, View as View7 } from "react-native";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var styles10 = StyleSheet11.create({
   list: {
     gap: spacing.m
   },
@@ -589,16 +624,16 @@ var styles10 = StyleSheet10.create({
 });
 function DescriptionList({ items, style }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ jsx12(View7, { style: [styles10.list, style], accessibilityRole: "list", children: items.map((item, i) => /* @__PURE__ */ jsxs4(View7, { style: styles10.group, accessibilityRole: "listitem", children: [
-    /* @__PURE__ */ jsx12(Text8, { style: [styles10.term, { color: colors2.colorOnBgSubtle }], children: item.term }),
-    typeof item.description === "string" ? /* @__PURE__ */ jsx12(Text8, { style: [styles10.description, { color: colors2.colorOnBg }], children: item.description }) : /* @__PURE__ */ jsx12(View7, { children: item.description })
+  return /* @__PURE__ */ jsx13(View7, { style: [styles10.list, style], accessibilityRole: "list", children: items.map((item, i) => /* @__PURE__ */ jsxs4(View7, { style: styles10.group, accessibilityRole: "listitem", children: [
+    /* @__PURE__ */ jsx13(ScaledText, { style: [styles10.term, { color: colors2.colorOnBgSubtle }], children: item.term }),
+    typeof item.description === "string" ? /* @__PURE__ */ jsx13(ScaledText, { style: [styles10.description, { color: colors2.colorOnBg }], children: item.description }) : /* @__PURE__ */ jsx13(View7, { children: item.description })
   ] }, i)) });
 }
 
 // src/components/ui/Breadcrumb/Breadcrumb.tsx
-import { StyleSheet as StyleSheet11, View as View8, Text as Text9, Pressable as Pressable4 } from "react-native";
-import { Fragment, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
-var styles11 = StyleSheet11.create({
+import { StyleSheet as StyleSheet12, View as View8, Pressable as Pressable4 } from "react-native";
+import { Fragment, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var styles11 = StyleSheet12.create({
   container: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -621,7 +656,7 @@ var styles11 = StyleSheet11.create({
 });
 function Breadcrumb({ items, style }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     View8,
     {
       style: [styles11.container, style],
@@ -629,25 +664,25 @@ function Breadcrumb({ items, style }) {
       accessibilityLabel: "Breadcrumb",
       children: items.map((item, index) => {
         const isLast = index === items.length - 1;
-        return /* @__PURE__ */ jsx13(View8, { style: { flexDirection: "row", alignItems: "center", minHeight: 44 }, children: isLast ? /* @__PURE__ */ jsx13(
-          Text9,
+        return /* @__PURE__ */ jsx14(View8, { style: { flexDirection: "row", alignItems: "center", minHeight: 44 }, children: isLast ? /* @__PURE__ */ jsx14(
+          ScaledText,
           {
             style: [styles11.itemText, { color: colors2.colorOnBg }],
             accessibilityRole: "text",
             children: item.label
           }
         ) : /* @__PURE__ */ jsxs5(Fragment, { children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             Pressable4,
             {
               onPress: item.onPress,
               accessibilityRole: "link",
               style: ({ pressed }) => pressed && styles11.pressed,
-              children: /* @__PURE__ */ jsx13(Text9, { style: [styles11.itemText, { color: colors2.colorInteractiveOnBg }], children: item.label })
+              children: /* @__PURE__ */ jsx14(ScaledText, { style: [styles11.itemText, { color: colors2.colorInteractiveOnBg }], children: item.label })
             }
           ),
-          /* @__PURE__ */ jsx13(
-            Text9,
+          /* @__PURE__ */ jsx14(
+            ScaledText,
             {
               style: [styles11.separator, { color: colors2.colorOnBgSubtle }],
               importantForAccessibility: "no",
@@ -662,8 +697,8 @@ function Breadcrumb({ items, style }) {
 }
 
 // src/components/ui/ProgressCircle/ProgressCircle.tsx
-import { StyleSheet as StyleSheet12, View as View9, Text as Text10 } from "react-native";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet13, View as View9 } from "react-native";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var SIZE_PX = {
   small: 40,
   medium: 64,
@@ -679,7 +714,7 @@ var FONT_SIZE = {
   medium: font.size.bodyS,
   large: font.size.body
 };
-var styles12 = StyleSheet12.create({
+var styles12 = StyleSheet13.create({
   wrapper: {
     alignItems: "center",
     justifyContent: "center"
@@ -696,7 +731,7 @@ function HalfCircle({
   color,
   rotation
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     View9,
     {
       style: {
@@ -704,7 +739,7 @@ function HalfCircle({
         height: size,
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx15(
         View9,
         {
           style: {
@@ -747,7 +782,7 @@ function ProgressCircle({
       accessibilityLabel: label,
       accessibilityValue: { min: 0, max, now: value },
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           View9,
           {
             style: {
@@ -760,7 +795,7 @@ function ProgressCircle({
             }
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           View9,
           {
             style: {
@@ -770,7 +805,7 @@ function ProgressCircle({
               start: px / 2,
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx14(
+            children: /* @__PURE__ */ jsx15(
               HalfCircle,
               {
                 size: px,
@@ -781,7 +816,7 @@ function ProgressCircle({
             )
           }
         ),
-        degrees > 180 && /* @__PURE__ */ jsx14(
+        degrees > 180 && /* @__PURE__ */ jsx15(
           View9,
           {
             style: {
@@ -791,14 +826,14 @@ function ProgressCircle({
               start: 0,
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx14(
+            children: /* @__PURE__ */ jsx15(
               View9,
               {
                 style: {
                   position: "absolute",
                   end: 0
                 },
-                children: /* @__PURE__ */ jsx14(
+                children: /* @__PURE__ */ jsx15(
                   HalfCircle,
                   {
                     size: px,
@@ -812,7 +847,7 @@ function ProgressCircle({
           }
         ),
         showValue && /* @__PURE__ */ jsxs6(
-          Text10,
+          ScaledText,
           {
             style: [styles12.valueText, { fontSize: FONT_SIZE[size], color: colors2.colorOnBg }],
             importantForAccessibility: "no",
@@ -830,9 +865,9 @@ function ProgressCircle({
 
 // src/components/ui/Tooltip/Tooltip.tsx
 import { useState } from "react";
-import { StyleSheet as StyleSheet13, View as View10, Text as Text11, Pressable as Pressable5 } from "react-native";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
-var styles13 = StyleSheet13.create({
+import { StyleSheet as StyleSheet14, View as View10, Pressable as Pressable5 } from "react-native";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var styles13 = StyleSheet14.create({
   wrapper: {
     position: "relative"
   },
@@ -856,7 +891,7 @@ function Tooltip({ content, children, style }) {
   const { colors: colors2 } = useTheme();
   const [visible, setVisible] = useState(false);
   return /* @__PURE__ */ jsxs7(View10, { style: [styles13.wrapper, style], children: [
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       Pressable5,
       {
         onLongPress: () => setVisible(true),
@@ -865,21 +900,21 @@ function Tooltip({ content, children, style }) {
         children
       }
     ),
-    visible && /* @__PURE__ */ jsx15(
+    visible && /* @__PURE__ */ jsx16(
       View10,
       {
         style: [styles13.tooltip, { backgroundColor: colors2.colorOnBg }],
         accessibilityRole: "text",
         accessibilityLabel: content,
-        children: /* @__PURE__ */ jsx15(Text11, { style: [styles13.text, { color: colors2.colorBg }], children: content })
+        children: /* @__PURE__ */ jsx16(ScaledText, { style: [styles13.text, { color: colors2.colorBg }], children: content })
       }
     )
   ] });
 }
 
 // src/components/ui/Pagination/Pagination.tsx
-import { StyleSheet as StyleSheet14, View as View11, Text as Text12, Pressable as Pressable6 } from "react-native";
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet15, View as View11, Pressable as Pressable6 } from "react-native";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function getPageRange(current, total) {
   const delta = 1;
   const range = [];
@@ -892,7 +927,7 @@ function getPageRange(current, total) {
   }
   return range;
 }
-var styles14 = StyleSheet14.create({
+var styles14 = StyleSheet15.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -950,7 +985,7 @@ function Pagination({
       accessibilityRole: "navigation",
       accessibilityLabel: "Pagination",
       children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           Pressable6,
           {
             onPress: () => onPageChange(currentPage - 1),
@@ -963,12 +998,12 @@ function Pagination({
               currentPage <= 1 && styles14.disabled,
               pressed && !currentPage && styles14.pressed
             ],
-            children: /* @__PURE__ */ jsx16(Text12, { style: [styles14.navText, { color: colors2.colorOnBg }], children: "\u2039" })
+            children: /* @__PURE__ */ jsx17(ScaledText, { style: [styles14.navText, { color: colors2.colorOnBg }], children: "\u2039" })
           }
         ),
         pages.map(
-          (page, index) => page === "..." ? /* @__PURE__ */ jsx16(
-            Text12,
+          (page, index) => page === "..." ? /* @__PURE__ */ jsx17(
+            ScaledText,
             {
               style: [styles14.ellipsis, { color: colors2.colorOnBgSubtle }],
               importantForAccessibility: "no",
@@ -976,7 +1011,7 @@ function Pagination({
               children: "..."
             },
             `ellipsis-${index}`
-          ) : /* @__PURE__ */ jsx16(
+          ) : /* @__PURE__ */ jsx17(
             Pressable6,
             {
               onPress: () => onPageChange(page),
@@ -988,8 +1023,8 @@ function Pagination({
                 currentPage === page && { backgroundColor: colors2.colorInteractive },
                 pressed && styles14.pressed
               ],
-              children: /* @__PURE__ */ jsx16(
-                Text12,
+              children: /* @__PURE__ */ jsx17(
+                ScaledText,
                 {
                   style: [
                     styles14.buttonText,
@@ -1005,7 +1040,7 @@ function Pagination({
             page
           )
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           Pressable6,
           {
             onPress: () => onPageChange(currentPage + 1),
@@ -1018,7 +1053,7 @@ function Pagination({
               currentPage >= totalPages && styles14.disabled,
               pressed && styles14.pressed
             ],
-            children: /* @__PURE__ */ jsx16(Text12, { style: [styles14.navText, { color: colors2.colorOnBg }], children: "\u203A" })
+            children: /* @__PURE__ */ jsx17(ScaledText, { style: [styles14.navText, { color: colors2.colorOnBg }], children: "\u203A" })
           }
         )
       ]
@@ -1028,21 +1063,12 @@ function Pagination({
 
 // src/components/ui/Collapsible/Collapsible.tsx
 import { useCallback, useRef as useRef2, useState as useState2 } from "react";
-import {
-  StyleSheet as StyleSheet15,
-  View as View12,
-  Text as Text13,
-  Pressable as Pressable7,
-  Animated as Animated2,
-  LayoutAnimation,
-  Platform,
-  UIManager
-} from "react-native";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet16, View as View12, Pressable as Pressable7, Animated as Animated2, LayoutAnimation, Platform, UIManager } from "react-native";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
-var styles15 = StyleSheet15.create({
+var styles15 = StyleSheet16.create({
   container: {
     borderRadius: border.radius.m,
     overflow: "hidden"
@@ -1126,8 +1152,8 @@ function Collapsible({
             accessibilityState: { expanded: isOpen },
             style: ({ pressed }) => [styles15.header, pressed && styles15.pressed],
             children: [
-              /* @__PURE__ */ jsx17(Text13, { style: [styles15.summaryText, { color: colors2.colorOnBg }], children: summary }),
-              /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx18(ScaledText, { style: [styles15.summaryText, { color: colors2.colorOnBg }], children: summary }),
+              /* @__PURE__ */ jsx18(
                 Animated2.View,
                 {
                   testID: "bds-collapsible-chevron",
@@ -1139,7 +1165,7 @@ function Collapsible({
             ]
           }
         ),
-        isOpen && /* @__PURE__ */ jsx17(View12, { style: styles15.content, children })
+        isOpen && /* @__PURE__ */ jsx18(View12, { style: styles15.content, children })
       ]
     }
   );
@@ -1147,20 +1173,12 @@ function Collapsible({
 
 // src/components/ui/Accordion/Accordion.tsx
 import { useState as useState3 } from "react";
-import {
-  StyleSheet as StyleSheet16,
-  View as View13,
-  Text as Text14,
-  Pressable as Pressable8,
-  LayoutAnimation as LayoutAnimation2,
-  Platform as Platform2,
-  UIManager as UIManager2
-} from "react-native";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet17, View as View13, Pressable as Pressable8, LayoutAnimation as LayoutAnimation2, Platform as Platform2, UIManager as UIManager2 } from "react-native";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 if (Platform2.OS === "android" && UIManager2.setLayoutAnimationEnabledExperimental) {
   UIManager2.setLayoutAnimationEnabledExperimental(true);
 }
-var styles16 = StyleSheet16.create({
+var styles16 = StyleSheet17.create({
   container: {
     overflow: "hidden",
     borderRadius: border.radius.s
@@ -1214,7 +1232,7 @@ function Accordion({
       return allowMultiple ? [...prev, id] : [id];
     });
   };
-  return /* @__PURE__ */ jsx18(View13, { style: [styles16.container, style], children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx19(View13, { style: [styles16.container, style], children: items.map((item, index) => {
     const isOpen = openIds.includes(item.id);
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs10(
@@ -1239,9 +1257,9 @@ function Accordion({
                 pressed && !item.disabled && styles16.pressed
               ],
               children: [
-                /* @__PURE__ */ jsx18(Text14, { style: [styles16.titleText, { color: colors2.colorOnBg }], children: typeof item.title === "string" ? item.title : item.title }),
-                /* @__PURE__ */ jsx18(
-                  Text14,
+                /* @__PURE__ */ jsx19(ScaledText, { style: [styles16.titleText, { color: colors2.colorOnBg }], children: typeof item.title === "string" ? item.title : item.title }),
+                /* @__PURE__ */ jsx19(
+                  ScaledText,
                   {
                     style: [styles16.chevron, { color: colors2.colorOnBgSubtle }],
                     importantForAccessibility: "no",
@@ -1252,7 +1270,7 @@ function Accordion({
               ]
             }
           ),
-          isOpen && /* @__PURE__ */ jsx18(View13, { style: styles16.panel, accessibilityRole: "summary", children: item.content })
+          isOpen && /* @__PURE__ */ jsx19(View13, { style: styles16.panel, accessibilityRole: "summary", children: item.content })
         ]
       },
       item.id
@@ -1262,15 +1280,9 @@ function Accordion({
 
 // src/components/ui/Tabs/Tabs.tsx
 import { useState as useState4 } from "react";
-import {
-  StyleSheet as StyleSheet17,
-  View as View14,
-  Text as Text15,
-  Pressable as Pressable9,
-  ScrollView
-} from "react-native";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
-var styles17 = StyleSheet17.create({
+import { StyleSheet as StyleSheet18, View as View14, Pressable as Pressable9, ScrollView } from "react-native";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+var styles17 = StyleSheet18.create({
   container: {
     overflow: "hidden"
   },
@@ -1310,7 +1322,7 @@ function Tabs({
   const { colors: colors2 } = useTheme();
   const [activeTab, setActiveTab] = useState4(defaultTab ?? tabs[0]?.id);
   return /* @__PURE__ */ jsxs11(View14, { style: [styles17.container, style], children: [
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       ScrollView,
       {
         horizontal: true,
@@ -1319,7 +1331,7 @@ function Tabs({
         accessibilityRole: "tabbar",
         children: tabs.map((tab) => {
           const isActive = activeTab === tab.id;
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx20(
             Pressable9,
             {
               onPress: () => setActiveTab(tab.id),
@@ -1338,8 +1350,8 @@ function Tabs({
                 tab.disabled && styles17.disabled,
                 pressed && !tab.disabled && styles17.pressed
               ],
-              children: /* @__PURE__ */ jsx19(
-                Text15,
+              children: /* @__PURE__ */ jsx20(
+                ScaledText,
                 {
                   style: [
                     styles17.tabLabel,
@@ -1360,21 +1372,15 @@ function Tabs({
     tabs.map((tab) => {
       const isActive = activeTab === tab.id;
       if (!isActive) return null;
-      return /* @__PURE__ */ jsx19(View14, { style: styles17.panel, accessibilityRole: "tabpanel", children: tab.content }, tab.id);
+      return /* @__PURE__ */ jsx20(View14, { style: styles17.panel, accessibilityRole: "tabpanel", children: tab.content }, tab.id);
     })
   ] });
 }
 
 // src/components/ui/Table/Table.tsx
-import {
-  StyleSheet as StyleSheet18,
-  View as View15,
-  Text as Text16,
-  ScrollView as ScrollView2,
-  Pressable as Pressable10
-} from "react-native";
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
-var styles18 = StyleSheet18.create({
+import { StyleSheet as StyleSheet19, View as View15, ScrollView as ScrollView2, Pressable as Pressable10 } from "react-native";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+var styles18 = StyleSheet19.create({
   wrapper: {
     borderRadius: border.radius.s,
     overflow: "hidden"
@@ -1450,15 +1456,15 @@ function Table({
     if (sortKey !== col.key) return base;
     return `${base}, currently ${sortDirection === "asc" ? "ascending" : "descending"}`;
   };
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     ScrollView2,
     {
       horizontal: true,
       showsHorizontalScrollIndicator: true,
       style: [styles18.wrapper, { backgroundColor: colors2.colorBg }, style],
       children: /* @__PURE__ */ jsxs12(View15, { children: [
-        caption && /* @__PURE__ */ jsx20(Text16, { style: [styles18.caption, { color: colors2.colorOnBgSubtle }], children: caption }),
-        /* @__PURE__ */ jsx20(View15, { style: [styles18.headerRow, { backgroundColor: colors2.colorBgSubtle }], children: columns.map(
+        caption && /* @__PURE__ */ jsx21(ScaledText, { style: [styles18.caption, { color: colors2.colorOnBgSubtle }], children: caption }),
+        /* @__PURE__ */ jsx21(View15, { style: [styles18.headerRow, { backgroundColor: colors2.colorBgSubtle }], children: columns.map(
           (col) => col.sortable ? /* @__PURE__ */ jsxs12(
             Pressable10,
             {
@@ -1467,9 +1473,9 @@ function Table({
               accessibilityLabel: getSortLabel(col),
               style: ({ pressed }) => [styles18.headerCell, pressed && styles18.pressed],
               children: [
-                /* @__PURE__ */ jsx20(Text16, { style: [styles18.headerText, { color: colors2.colorOnBg }], children: col.header }),
-                /* @__PURE__ */ jsx20(
-                  Text16,
+                /* @__PURE__ */ jsx21(ScaledText, { style: [styles18.headerText, { color: colors2.colorOnBg }], children: col.header }),
+                /* @__PURE__ */ jsx21(
+                  ScaledText,
                   {
                     style: [
                       styles18.sortIndicator,
@@ -1485,9 +1491,9 @@ function Table({
               ]
             },
             col.key
-          ) : /* @__PURE__ */ jsx20(View15, { style: styles18.headerCell, children: /* @__PURE__ */ jsx20(Text16, { style: [styles18.headerText, { color: colors2.colorOnBg }], children: col.header }) }, col.key)
+          ) : /* @__PURE__ */ jsx21(View15, { style: styles18.headerCell, children: /* @__PURE__ */ jsx21(ScaledText, { style: [styles18.headerText, { color: colors2.colorOnBg }], children: col.header }) }, col.key)
         ) }),
-        rows.map((row, rowIndex) => /* @__PURE__ */ jsx20(
+        rows.map((row, rowIndex) => /* @__PURE__ */ jsx21(
           View15,
           {
             style: [
@@ -1496,7 +1502,7 @@ function Table({
               rowIndex % 2 === 1 && { backgroundColor: colors2.colorBgSubtle }
             ],
             accessibilityRole: "none",
-            children: columns.map((col) => /* @__PURE__ */ jsx20(View15, { style: styles18.cell, children: col.render ? typeof col.render(row) === "string" ? /* @__PURE__ */ jsx20(Text16, { style: [styles18.cellText, { color: colors2.colorOnBg }], children: col.render(row) }) : col.render(row) : /* @__PURE__ */ jsx20(Text16, { style: [styles18.cellText, { color: colors2.colorOnBg }], children: String(row[col.key] ?? "") }) }, col.key))
+            children: columns.map((col) => /* @__PURE__ */ jsx21(View15, { style: styles18.cell, children: col.render ? typeof col.render(row) === "string" ? /* @__PURE__ */ jsx21(ScaledText, { style: [styles18.cellText, { color: colors2.colorOnBg }], children: col.render(row) }) : col.render(row) : /* @__PURE__ */ jsx21(ScaledText, { style: [styles18.cellText, { color: colors2.colorOnBg }], children: String(row[col.key] ?? "") }) }, col.key))
           },
           rowIndex
         ))
@@ -1507,13 +1513,8 @@ function Table({
 
 // src/components/ui/Calendar/Calendar.tsx
 import { useState as useState5 } from "react";
-import {
-  StyleSheet as StyleSheet19,
-  View as View16,
-  Text as Text17,
-  Pressable as Pressable11
-} from "react-native";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet20, View as View16, Pressable as Pressable11 } from "react-native";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 var DAY_LABELS = {
   Su: "Sunday",
@@ -1556,7 +1557,7 @@ function getFirstDayOfMonth(year, month) {
   return new Date(year, month, 1).getDay();
 }
 var DAY_SIZE = 44;
-var styles19 = StyleSheet19.create({
+var styles19 = StyleSheet20.create({
   container: {
     alignSelf: "flex-start"
   },
@@ -1676,18 +1677,18 @@ function Calendar({
       accessibilityLabel: `${MONTHS[viewMonth]} ${viewYear} calendar`,
       children: [
         /* @__PURE__ */ jsxs13(View16, { style: styles19.header, children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             Pressable11,
             {
               onPress: () => navigate(-1),
               accessibilityRole: "button",
               accessibilityLabel: "Previous month",
               style: ({ pressed }) => [styles19.navButton, pressed && styles19.pressed],
-              children: /* @__PURE__ */ jsx21(Text17, { style: [styles19.navText, { color: colors2.colorOnBg }], children: "\u2039" })
+              children: /* @__PURE__ */ jsx22(ScaledText, { style: [styles19.navText, { color: colors2.colorOnBg }], children: "\u2039" })
             }
           ),
           /* @__PURE__ */ jsxs13(
-            Text17,
+            ScaledText,
             {
               style: [styles19.monthYear, { color: colors2.colorOnBg }],
               accessibilityRole: "text",
@@ -1699,34 +1700,34 @@ function Calendar({
               ]
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             Pressable11,
             {
               onPress: () => navigate(1),
               accessibilityRole: "button",
               accessibilityLabel: "Next month",
               style: ({ pressed }) => [styles19.navButton, pressed && styles19.pressed],
-              children: /* @__PURE__ */ jsx21(Text17, { style: [styles19.navText, { color: colors2.colorOnBg }], children: "\u203A" })
+              children: /* @__PURE__ */ jsx22(ScaledText, { style: [styles19.navText, { color: colors2.colorOnBg }], children: "\u203A" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx21(View16, { style: styles19.weekRow, children: DAYS.map((d) => /* @__PURE__ */ jsx21(View16, { style: styles19.weekday, children: /* @__PURE__ */ jsx21(
-          Text17,
+        /* @__PURE__ */ jsx22(View16, { style: styles19.weekRow, children: DAYS.map((d) => /* @__PURE__ */ jsx22(View16, { style: styles19.weekday, children: /* @__PURE__ */ jsx22(
+          ScaledText,
           {
             style: [styles19.weekdayText, { color: colors2.colorOnBgSubtle }],
             accessibilityLabel: DAY_LABELS[d],
             children: d
           }
         ) }, d)) }),
-        /* @__PURE__ */ jsx21(View16, { style: styles19.grid, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx21(View16, { style: styles19.dayRow, children: row.map((cell, colIndex) => {
+        /* @__PURE__ */ jsx22(View16, { style: styles19.grid, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx22(View16, { style: styles19.dayRow, children: row.map((cell, colIndex) => {
           if (!cell) {
-            return /* @__PURE__ */ jsx21(View16, { style: styles19.dayCell }, colIndex);
+            return /* @__PURE__ */ jsx22(View16, { style: styles19.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__ */ jsx21(
+          return /* @__PURE__ */ jsx22(
             Pressable11,
             {
               onPress: () => selectDay(cell.day),
@@ -1753,8 +1754,8 @@ function Calendar({
                 disabled && styles19.disabled,
                 pressed && !disabled && styles19.pressed
               ],
-              children: /* @__PURE__ */ jsx21(
-                Text17,
+              children: /* @__PURE__ */ jsx22(
+                ScaledText,
                 {
                   style: [
                     styles19.dayText,
@@ -1777,18 +1778,11 @@ function Calendar({
 
 // src/components/ui/Carousel/Carousel.tsx
 import { useCallback as useCallback2, useRef as useRef3, useState as useState6 } from "react";
-import {
-  StyleSheet as StyleSheet20,
-  View as View17,
-  Text as Text18,
-  Pressable as Pressable12,
-  ScrollView as ScrollView3,
-  Dimensions
-} from "react-native";
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet21, View as View17, Pressable as Pressable12, ScrollView as ScrollView3, Dimensions } from "react-native";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var DOT_SIZE = 8;
 var DOT_HIT_SIZE = 44;
-var styles20 = StyleSheet20.create({
+var styles20 = StyleSheet21.create({
   container: {
     width: "100%"
   },
@@ -1868,7 +1862,7 @@ function Carousel({
       accessibilityRole: "none",
       accessibilityLabel: label,
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           ScrollView3,
           {
             ref: scrollRef,
@@ -1879,11 +1873,11 @@ function Carousel({
             scrollEventThrottle: 16,
             onLayout: (e) => setSlideWidth(e.nativeEvent.layout.width),
             style: styles20.scrollView,
-            children: items.map((item, index) => /* @__PURE__ */ jsx22(View17, { style: [styles20.slide, { width: slideWidth }], children: item }, index))
+            children: items.map((item, index) => /* @__PURE__ */ jsx23(View17, { style: [styles20.slide, { width: slideWidth }], children: item }, index))
           }
         ),
         /* @__PURE__ */ jsxs14(View17, { style: styles20.nav, children: [
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             Pressable12,
             {
               onPress: () => scrollTo(activeIndex - 1),
@@ -1896,10 +1890,10 @@ function Carousel({
                 activeIndex <= 0 && { opacity: 0.4 },
                 pressed && styles20.pressed
               ],
-              children: /* @__PURE__ */ jsx22(Text18, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u2039" })
+              children: /* @__PURE__ */ jsx23(ScaledText, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u2039" })
             }
           ),
-          /* @__PURE__ */ jsx22(View17, { style: styles20.dots, children: items.map((_, index) => /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(View17, { style: styles20.dots, children: items.map((_, index) => /* @__PURE__ */ jsx23(
             Pressable12,
             {
               onPress: () => scrollTo(index),
@@ -1907,7 +1901,7 @@ function Carousel({
               accessibilityLabel: `Go to slide ${index + 1}`,
               accessibilityState: { selected: activeIndex === index },
               style: styles20.dotWrapper,
-              children: /* @__PURE__ */ jsx22(
+              children: /* @__PURE__ */ jsx23(
                 View17,
                 {
                   style: [
@@ -1921,7 +1915,7 @@ function Carousel({
             },
             index
           )) }),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             Pressable12,
             {
               onPress: () => scrollTo(activeIndex + 1),
@@ -1934,7 +1928,7 @@ function Carousel({
                 activeIndex >= items.length - 1 && { opacity: 0.4 },
                 pressed && styles20.pressed
               ],
-              children: /* @__PURE__ */ jsx22(Text18, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u203A" })
+              children: /* @__PURE__ */ jsx23(ScaledText, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u203A" })
             }
           )
         ] })
@@ -1944,8 +1938,8 @@ function Carousel({
 }
 
 // src/components/layout/Card/Card.tsx
-import { StyleSheet as StyleSheet21, View as View18, Pressable as Pressable13 } from "react-native";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet22, View as View18, Pressable as Pressable13 } from "react-native";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var paddingMap = {
   none: 0,
   small: spacing.s,
@@ -1957,7 +1951,7 @@ var alignMap = {
   center: "center",
   end: "flex-end"
 };
-var styles21 = StyleSheet21.create({
+var styles21 = StyleSheet22.create({
   card: {
     borderRadius: border.radius.m,
     overflow: "hidden"
@@ -1992,7 +1986,7 @@ function Card({
     alignItems: alignMap[textAlign]
   };
   if (onPress) {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       Pressable13,
       {
         onPress,
@@ -2003,18 +1997,18 @@ function Card({
       }
     );
   }
-  return /* @__PURE__ */ jsx23(View18, { style: [styles21.card, variantStyle, inner, style], children });
+  return /* @__PURE__ */ jsx24(View18, { style: [styles21.card, variantStyle, inner, style], children });
 }
 
 // src/components/layout/SectionHeader/SectionHeader.tsx
-import { StyleSheet as StyleSheet22, View as View19, Text as Text19 } from "react-native";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet23, View as View19 } from "react-native";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var alignMap2 = {
   start: "flex-start",
   center: "center",
   end: "flex-end"
 };
-var titleStyles = StyleSheet22.create({
+var titleStyles = StyleSheet23.create({
   small: {
     fontSize: font.size.heading3,
     fontFamily: font.family.heading,
@@ -2034,7 +2028,7 @@ var titleStyles = StyleSheet22.create({
     lineHeight: lineHeight.heading1
   }
 });
-var styles22 = StyleSheet22.create({
+var styles22 = StyleSheet23.create({
   container: {
     gap: spacing.xxs
   },
@@ -2054,23 +2048,23 @@ function SectionHeader({
   const { colors: colors2 } = useTheme();
   const align = alignMap2[alignment];
   return /* @__PURE__ */ jsxs15(View19, { style: [styles22.container, { alignItems: align }, style], children: [
-    /* @__PURE__ */ jsx24(
-      Text19,
+    /* @__PURE__ */ jsx25(
+      ScaledText,
       {
         accessibilityRole: "header",
         style: [titleStyles[size], { color: colors2.colorOnBg }],
         children: title
       }
     ),
-    subtitle && /* @__PURE__ */ jsx24(Text19, { style: [styles22.subtitle, { color: colors2.colorOnBgSubtle }], children: subtitle })
+    subtitle && /* @__PURE__ */ jsx25(ScaledText, { style: [styles22.subtitle, { color: colors2.colorOnBgSubtle }], children: subtitle })
   ] });
 }
 
 // src/components/layout/IconWrapper/IconWrapper.tsx
 import { View as View20 } from "react-native";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function IconWrapper({ children, style, accessibilityElementsHidden }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     View20,
     {
       style: [{ alignItems: "center", justifyContent: "center" }, style],
@@ -2082,9 +2076,9 @@ function IconWrapper({ children, style, accessibilityElementsHidden }) {
 }
 
 // src/components/layout/ButtonGroup/ButtonGroup.tsx
-import { StyleSheet as StyleSheet23, View as View21 } from "react-native";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var styles23 = StyleSheet23.create({
+import { StyleSheet as StyleSheet24, View as View21 } from "react-native";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var styles23 = StyleSheet24.create({
   group: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -2097,7 +2091,7 @@ var styles23 = StyleSheet23.create({
 });
 function ButtonContainer({ children, variant, accessibilityLabel, style }) {
   const isColumn = variant === "card" || variant === "modal";
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     View21,
     {
       accessibilityLabel,
@@ -2109,14 +2103,14 @@ function ButtonContainer({ children, variant, accessibilityLabel, style }) {
 var ButtonGroup = ButtonContainer;
 
 // src/components/interaction/Button/Button.tsx
-import { StyleSheet as StyleSheet24, Pressable as Pressable14, Text as Text20, View as View22 } from "react-native";
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet25, Pressable as Pressable14, View as View22 } from "react-native";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var sizeTokens = {
   small: { height: 36, px: spacing.m, fontSize: font.size.bodyS, radius: border.radius.full },
   medium: { height: 48, px: spacing.m, fontSize: font.size.body, radius: border.radius.full },
   large: { height: 56, px: spacing.xxl, fontSize: font.size.heading3, radius: border.radius.full }
 };
-var styles24 = StyleSheet24.create({
+var styles24 = StyleSheet25.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -2127,7 +2121,9 @@ var styles24 = StyleSheet24.create({
   label: {
     fontFamily: font.family.body,
     fontWeight: font.weight.semibold,
-    includeFontPadding: false
+    includeFontPadding: false,
+    flexShrink: 1,
+    textAlign: "center"
   }
 });
 function Button({
@@ -2149,12 +2145,15 @@ function Button({
   const outlineTextColor = colors2.colorInteractiveOnBg;
   const isOutline = variant === "outline" || variant === "ghost";
   const containerStyle = {
-    height,
+    minHeight: height,
     paddingHorizontal: isIconOnly ? spacing.xs : px,
     borderRadius: radius,
     opacity: disabled ? 0.4 : 1,
     // Icon-only: square with equal xs padding on both axes.
     ...isIconOnly && { aspectRatio: 1, paddingVertical: spacing.xs },
+    // Icon-only keeps a fixed height (stays square); a text button gets vertical padding
+    // instead, so a wrapped label grows the button from minHeight rather than clipping.
+    ...isIconOnly ? { height } : { paddingVertical: spacing.xxs },
     ...variant === "default" && { backgroundColor: primaryColor },
     ...isOutline && {
       backgroundColor: "transparent",
@@ -2173,19 +2172,19 @@ function Button({
       accessibilityState: { disabled },
       style: ({ pressed }) => [styles24.pressable, containerStyle, pressed && { opacity: 0.75 }, style],
       children: [
-        iconStart && /* @__PURE__ */ jsx27(View22, { importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: iconStart }),
-        children && (isIconOnly ? children : /* @__PURE__ */ jsx27(Text20, { style: [styles24.label, { fontSize, color: textColor }], children })),
-        iconEnd && /* @__PURE__ */ jsx27(View22, { importantForAccessibility: "no-hide-descendants", children: iconEnd })
+        iconStart && /* @__PURE__ */ jsx28(View22, { importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: iconStart }),
+        children && (isIconOnly ? children : /* @__PURE__ */ jsx28(ScaledText, { style: [styles24.label, { fontSize, color: textColor }], children })),
+        iconEnd && /* @__PURE__ */ jsx28(View22, { importantForAccessibility: "no-hide-descendants", children: iconEnd })
       ]
     }
   );
 }
 
 // src/components/interaction/Rating/Rating.tsx
-import { StyleSheet as StyleSheet25, View as View23, Text as Text21 } from "react-native";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet26, View as View23 } from "react-native";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var STAR_SIZE = 24;
-var styles25 = StyleSheet25.create({
+var styles25 = StyleSheet26.create({
   container: {
     flexDirection: "row",
     alignItems: "center"
@@ -2198,14 +2197,14 @@ var styles25 = StyleSheet25.create({
 function Rating({ value, max = 5, style, accessibilityLabel }) {
   const { colors: colors2 } = useTheme();
   const label = accessibilityLabel ?? `${value} out of ${max} stars`;
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     View23,
     {
       style: [styles25.container, style],
       accessibilityRole: "image",
       accessibilityLabel: label,
-      children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx28(
-        Text21,
+      children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx29(
+        ScaledText,
         {
           style: [
             styles25.star,
@@ -2222,15 +2221,14 @@ function Rating({ value, max = 5, style, accessibilityLabel }) {
 }
 
 // src/components/interaction/form/Switch/Switch.tsx
-import { Switch as RNSwitch, View as View24, StyleSheet as StyleSheet27 } from "react-native";
+import { Switch as RNSwitch, View as View24, StyleSheet as StyleSheet28 } from "react-native";
 
 // src/components/interaction/form/atoms/Label.tsx
-import { Text as Text22 } from "react-native";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Label({ label, style }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ jsx29(
-    Text22,
+  return /* @__PURE__ */ jsx30(
+    ScaledText,
     {
       style: [
         {
@@ -2248,9 +2246,9 @@ function Label({ label, style }) {
 }
 
 // src/components/interaction/form/atoms/Message.tsx
-import { StyleSheet as StyleSheet26, Text as Text23 } from "react-native";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var styles26 = StyleSheet26.create({
+import { StyleSheet as StyleSheet27 } from "react-native";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var styles26 = StyleSheet27.create({
   base: {
     fontFamily: font.family.body,
     fontSize: font.size.bodyS,
@@ -2261,8 +2259,8 @@ function Message({ message, type, style }) {
   const { colors: colors2 } = useTheme();
   if (!message) return null;
   const color = type === "error" ? colors2.colorError : colors2.colorOnBgSubtle;
-  return /* @__PURE__ */ jsx30(
-    Text23,
+  return /* @__PURE__ */ jsx31(
+    ScaledText,
     {
       accessibilityRole: type === "error" ? "alert" : "none",
       accessibilityLiveRegion: type === "error" ? "assertive" : "polite",
@@ -2273,8 +2271,8 @@ function Message({ message, type, style }) {
 }
 
 // src/components/interaction/form/Switch/Switch.tsx
-import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
-var styles27 = StyleSheet27.create({
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+var styles27 = StyleSheet28.create({
   container: {
     gap: spacing.xxs
   },
@@ -2296,7 +2294,7 @@ function Switch({
   const { colors: colors2 } = useTheme();
   return /* @__PURE__ */ jsxs17(View24, { style: [styles27.container, style], children: [
     /* @__PURE__ */ jsxs17(View24, { style: styles27.row, children: [
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32(
         RNSwitch,
         {
           value,
@@ -2309,18 +2307,18 @@ function Switch({
           trackColor: { false: colors2.colorBgSubtle, true: colors2.colorBlueSubtle }
         }
       ),
-      /* @__PURE__ */ jsx31(Label, { label })
+      /* @__PURE__ */ jsx32(Label, { label })
     ] }),
-    /* @__PURE__ */ jsx31(Message, { type: "error", message: error }),
-    /* @__PURE__ */ jsx31(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ jsx32(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx32(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Checkbox/Checkbox.tsx
-import { StyleSheet as StyleSheet28, View as View25, Pressable as Pressable15 } from "react-native";
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet29, View as View25, Pressable as Pressable15 } from "react-native";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 var BOX = 22;
-var styles28 = StyleSheet28.create({
+var styles28 = StyleSheet29.create({
   container: {
     gap: spacing.xxs
   },
@@ -2368,20 +2366,20 @@ function Checkbox({
         disabled,
         style: ({ pressed }) => [styles28.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
         children: [
-          /* @__PURE__ */ jsx32(View25, { style: [styles28.box, { borderColor, backgroundColor: bgColor }], children: checked && /* @__PURE__ */ jsx32(Label, { label: "\u2713", style: [styles28.checkmark, { color: colors2.colorOnInteractive }] }) }),
-          /* @__PURE__ */ jsx32(Label, { label })
+          /* @__PURE__ */ jsx33(View25, { style: [styles28.box, { borderColor, backgroundColor: bgColor }], children: checked && /* @__PURE__ */ jsx33(Label, { label: "\u2713", style: [styles28.checkmark, { color: colors2.colorOnInteractive }] }) }),
+          /* @__PURE__ */ jsx33(Label, { label })
         ]
       }
     ),
-    /* @__PURE__ */ jsx32(Message, { type: "error", message: error }),
-    /* @__PURE__ */ jsx32(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ jsx33(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx33(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
-import { StyleSheet as StyleSheet29, View as View26, Text as Text24 } from "react-native";
-import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
-var styles29 = StyleSheet29.create({
+import { StyleSheet as StyleSheet30, View as View26 } from "react-native";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+var styles29 = StyleSheet30.create({
   container: {
     gap: spacing.xs
   },
@@ -2415,24 +2413,24 @@ function CheckboxGroup({
       accessibilityRole: "none",
       accessibilityLabel: legend,
       children: [
-        /* @__PURE__ */ jsxs19(Text24, { style: [styles29.legend, { color: colors2.colorOnBg }], children: [
+        /* @__PURE__ */ jsxs19(ScaledText, { style: [styles29.legend, { color: colors2.colorOnBg }], children: [
           legend,
-          required && /* @__PURE__ */ jsx33(Text24, { style: [styles29.required, { color: colors2.colorOnBgSubtle }], children: " *" })
+          required && /* @__PURE__ */ jsx34(ScaledText, { style: [styles29.required, { color: colors2.colorOnBgSubtle }], children: " *" })
         ] }),
-        /* @__PURE__ */ jsx33(View26, { style: styles29.items, children }),
-        /* @__PURE__ */ jsx33(Message, { type: "error", message: error }),
-        /* @__PURE__ */ jsx33(Message, { type: "hint", message: hint })
+        /* @__PURE__ */ jsx34(View26, { style: styles29.items, children }),
+        /* @__PURE__ */ jsx34(Message, { type: "error", message: error }),
+        /* @__PURE__ */ jsx34(Message, { type: "hint", message: hint })
       ]
     }
   );
 }
 
 // src/components/interaction/form/Radio/Radio.tsx
-import { StyleSheet as StyleSheet30, View as View27, Pressable as Pressable16 } from "react-native";
-import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet31, View as View27, Pressable as Pressable16 } from "react-native";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var DOT = 22;
 var INNER = 10;
-var styles30 = StyleSheet30.create({
+var styles30 = StyleSheet31.create({
   container: {
     gap: spacing.xxs
   },
@@ -2479,20 +2477,20 @@ function Radio({
         disabled,
         style: ({ pressed }) => [styles30.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
         children: [
-          /* @__PURE__ */ jsx34(View27, { style: [styles30.outer, { borderColor }], children: checked && /* @__PURE__ */ jsx34(View27, { style: [styles30.inner, { backgroundColor: colors2.colorInteractive }] }) }),
-          /* @__PURE__ */ jsx34(Label, { label })
+          /* @__PURE__ */ jsx35(View27, { style: [styles30.outer, { borderColor }], children: checked && /* @__PURE__ */ jsx35(View27, { style: [styles30.inner, { backgroundColor: colors2.colorInteractive }] }) }),
+          /* @__PURE__ */ jsx35(Label, { label })
         ]
       }
     ),
-    /* @__PURE__ */ jsx34(Message, { type: "error", message: error }),
-    /* @__PURE__ */ jsx34(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ jsx35(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx35(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/RadioGroup/RadioGroup.tsx
-import { StyleSheet as StyleSheet31, View as View28, Text as Text25 } from "react-native";
-import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
-var styles31 = StyleSheet31.create({
+import { StyleSheet as StyleSheet32, View as View28 } from "react-native";
+import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+var styles31 = StyleSheet32.create({
   container: {
     gap: spacing.xs
   },
@@ -2526,22 +2524,22 @@ function RadioGroup({
       accessibilityRole: "radiogroup",
       accessibilityLabel: legend,
       children: [
-        /* @__PURE__ */ jsxs21(Text25, { style: [styles31.legend, { color: colors2.colorOnBg }], children: [
+        /* @__PURE__ */ jsxs21(ScaledText, { style: [styles31.legend, { color: colors2.colorOnBg }], children: [
           legend,
-          required && /* @__PURE__ */ jsx35(Text25, { style: [styles31.required, { color: colors2.colorOnBgSubtle }], children: " *" })
+          required && /* @__PURE__ */ jsx36(ScaledText, { style: [styles31.required, { color: colors2.colorOnBgSubtle }], children: " *" })
         ] }),
-        /* @__PURE__ */ jsx35(View28, { style: styles31.items, children }),
-        /* @__PURE__ */ jsx35(Message, { type: "error", message: error }),
-        /* @__PURE__ */ jsx35(Message, { type: "hint", message: hint })
+        /* @__PURE__ */ jsx36(View28, { style: styles31.items, children }),
+        /* @__PURE__ */ jsx36(Message, { type: "error", message: error }),
+        /* @__PURE__ */ jsx36(Message, { type: "hint", message: hint })
       ]
     }
   );
 }
 
 // src/components/interaction/form/FileInput/FileInput.tsx
-import { StyleSheet as StyleSheet32, View as View29, Pressable as Pressable17, Text as Text26 } from "react-native";
-import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
-var styles32 = StyleSheet32.create({
+import { StyleSheet as StyleSheet33, View as View29, Pressable as Pressable17 } from "react-native";
+import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+var styles32 = StyleSheet33.create({
   container: {
     gap: spacing.xxs
   },
@@ -2597,7 +2595,7 @@ function FileInput({
   const { colors: colors2 } = useTheme();
   const borderColor = error ? colors2.colorError : colors2.colorBgSubtle;
   return /* @__PURE__ */ jsxs22(View29, { style: [styles32.container, style], testID: name, children: [
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       Label,
       {
         label: required ? `${label} *` : label
@@ -2621,37 +2619,30 @@ function FileInput({
           disabled && { opacity: 0.4 }
         ],
         children: [
-          /* @__PURE__ */ jsx36(Text26, { style: [styles32.icon, { color: colors2.colorInteractive }], children: "\u2191" }),
-          /* @__PURE__ */ jsx36(Text26, { style: [styles32.prompt, { color: colors2.colorOnBgSubtle }], children: fileNames.length > 0 ? "Selected files:" : "Tap to select file" }),
-          fileNames.length > 0 && /* @__PURE__ */ jsx36(View29, { style: styles32.fileList, children: fileNames.map((fileName) => /* @__PURE__ */ jsx36(Text26, { style: [styles32.fileName, { color: colors2.colorOnBg }], children: fileName }, fileName)) }),
-          accept && /* @__PURE__ */ jsx36(Text26, { style: [styles32.acceptHint, { color: colors2.colorOnBgSubtle }], children: accept })
+          /* @__PURE__ */ jsx37(ScaledText, { style: [styles32.icon, { color: colors2.colorInteractive }], children: "\u2191" }),
+          /* @__PURE__ */ jsx37(ScaledText, { style: [styles32.prompt, { color: colors2.colorOnBgSubtle }], children: fileNames.length > 0 ? "Selected files:" : "Tap to select file" }),
+          fileNames.length > 0 && /* @__PURE__ */ jsx37(View29, { style: styles32.fileList, children: fileNames.map((fileName) => /* @__PURE__ */ jsx37(ScaledText, { style: [styles32.fileName, { color: colors2.colorOnBg }], children: fileName }, fileName)) }),
+          accept && /* @__PURE__ */ jsx37(ScaledText, { style: [styles32.acceptHint, { color: colors2.colorOnBgSubtle }], children: accept })
         ]
       }
     ),
-    /* @__PURE__ */ jsx36(Message, { type: "error", message: error }),
-    /* @__PURE__ */ jsx36(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ jsx37(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx37(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Combobox/Combobox.tsx
 import { useState as useState7, useMemo as useMemo2 } from "react";
-import {
-  StyleSheet as StyleSheet33,
-  View as View30,
-  TextInput,
-  Pressable as Pressable18,
-  Text as Text27,
-  ScrollView as ScrollView4
-} from "react-native";
+import { StyleSheet as StyleSheet34, View as View30, Pressable as Pressable18, ScrollView as ScrollView4 } from "react-native";
 
 // src/components/interaction/form/atoms/inputHelpers.ts
 var OPTICAL_TEXT_SHIFT = -1.5;
 
 // src/components/interaction/form/Combobox/Combobox.tsx
-import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var INPUT_HEIGHT = 44;
 var MAX_DROPDOWN_HEIGHT = 200;
-var styles33 = StyleSheet33.create({
+var styles33 = StyleSheet34.create({
   container: {
     gap: spacing.xxs
   },
@@ -2748,7 +2739,7 @@ function Combobox({
   };
   const borderColor = error ? colors2.colorError : colors2.colorOnBg;
   return /* @__PURE__ */ jsxs23(View30, { style: [styles33.container, style], children: [
-    /* @__PURE__ */ jsx37(Label, { label }),
+    /* @__PURE__ */ jsx38(Label, { label }),
     /* @__PURE__ */ jsxs23(
       View30,
       {
@@ -2761,8 +2752,8 @@ function Combobox({
           disabled && { opacity: 0.4 }
         ],
         children: [
-          /* @__PURE__ */ jsx37(
-            TextInput,
+          /* @__PURE__ */ jsx38(
+            ScaledTextInput,
             {
               value: inputValue,
               onChangeText: handleChangeText,
@@ -2780,7 +2771,7 @@ function Combobox({
               ]
             }
           ),
-          isOpen && filtered.length > 0 && /* @__PURE__ */ jsx37(
+          isOpen && filtered.length > 0 && /* @__PURE__ */ jsx38(
             ScrollView4,
             {
               style: [
@@ -2795,7 +2786,7 @@ function Combobox({
               children: filtered.map((option) => {
                 const isSelected = option.value === value;
                 const isDisabled = option.disabled;
-                return /* @__PURE__ */ jsx37(
+                return /* @__PURE__ */ jsx38(
                   Pressable18,
                   {
                     onPress: () => !isDisabled && selectOption(option),
@@ -2809,8 +2800,8 @@ function Combobox({
                       pressed && !isDisabled && { backgroundColor: colors2.colorBgSubtle },
                       isDisabled && { opacity: 0.4 }
                     ],
-                    children: /* @__PURE__ */ jsx37(
-                      Text27,
+                    children: /* @__PURE__ */ jsx38(
+                      ScaledText,
                       {
                         style: [
                           styles33.optionText,
@@ -2831,20 +2822,21 @@ function Combobox({
         ]
       }
     ),
-    /* @__PURE__ */ jsx37(Message, { type: "error", message: error }),
-    /* @__PURE__ */ jsx37(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ jsx38(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx38(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
 import { Children } from "react";
-import { StyleSheet as StyleSheet34, View as View31, Pressable as Pressable19, Text as Text28 } from "react-native";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet35, View as View31, Pressable as Pressable19 } from "react-native";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var TRACK_PADDING = spacing.xxxs;
 var sizeTokens2 = {
   small: { minHeight: 32, fontSize: font.size.bodyS, px: spacing.s, py: spacing.xxs },
   medium: { minHeight: 44, fontSize: font.size.body, px: spacing.m, py: spacing.xs },
-  large: { minHeight: 48, fontSize: font.size.body, px: spacing.m, py: spacing.s }
+  large: { minHeight: 48, fontSize: font.size.body, px: spacing.m, py: spacing.s },
+  xlarge: { minHeight: 56, fontSize: font.size.body, px: spacing.m, py: spacing.s }
 };
 var thumbShadow = {
   shadowColor: "#000",
@@ -2853,7 +2845,7 @@ var thumbShadow = {
   shadowRadius: 2,
   elevation: 2
 };
-var styles34 = StyleSheet34.create({
+var styles34 = StyleSheet35.create({
   track: {
     flexDirection: "row",
     borderRadius: border.radius.full,
@@ -2888,7 +2880,7 @@ function SegmentedControl({
   const items = Children.toArray(children);
   const trackBg = colors2.colorBgSubtle;
   const thumbBg = variant === "outline" ? colors2.colorBg : colors2.colorInteractive;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     View31,
     {
       style: [styles34.track, { backgroundColor: trackBg }, style],
@@ -2904,7 +2896,7 @@ function SegmentedControl({
           paddingVertical: py,
           ...isActive ? { backgroundColor: thumbBg, ...thumbShadow } : { backgroundColor: "transparent" }
         };
-        return /* @__PURE__ */ jsx38(
+        return /* @__PURE__ */ jsx39(
           Pressable19,
           {
             onPress: () => !disabled && onValueChange?.(index),
@@ -2918,7 +2910,16 @@ function SegmentedControl({
               pressed && !disabled && { opacity: 0.7 },
               disabled && { opacity: 0.4 }
             ],
-            children: label !== null ? /* @__PURE__ */ jsx38(Text28, { style: [styles34.label, { fontSize, color: labelColor }], children: label }) : child
+            children: label !== null ? /* @__PURE__ */ jsx39(
+              ScaledText,
+              {
+                style: [styles34.label, { fontSize, color: labelColor }],
+                numberOfLines: 1,
+                adjustsFontSizeToFit: true,
+                minimumFontScale: 0.5,
+                children: label
+              }
+            ) : child
           },
           index
         );
@@ -2929,12 +2930,8 @@ function SegmentedControl({
 
 // src/components/interaction/form/FormInput/FormInput.tsx
 import { useState as useState8 } from "react";
-import {
-  StyleSheet as StyleSheet35,
-  View as View32,
-  TextInput as TextInput2
-} from "react-native";
-import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet36, View as View32 } from "react-native";
+import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
 var INPUT_HEIGHT2 = 44;
 var keyboardTypeMap = {
   text: "default",
@@ -2945,16 +2942,16 @@ var keyboardTypeMap = {
   number: "numeric",
   search: "default"
 };
-var styles35 = StyleSheet35.create({
+var styles35 = StyleSheet36.create({
   container: {
     gap: spacing.xxs
   },
   /**
-   * The wrapper draws the pill border and provides the fixed 44pt touch-target height.
+   * The wrapper draws the pill border and provides at least 44pt touch-target height.
    * justifyContent: 'center' vertically centers the inner TextInput on both iOS and Android.
    */
   inputWrapper: {
-    height: INPUT_HEIGHT2,
+    minHeight: INPUT_HEIGHT2,
     justifyContent: "center",
     borderWidth: 1,
     borderRadius: border.radius.full
@@ -2994,8 +2991,8 @@ function FormInput({
   const [focused, setFocused] = useState8(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
   return /* @__PURE__ */ jsxs24(View32, { style: [styles35.container, style], children: [
-    /* @__PURE__ */ jsx39(Label, { label }),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(Label, { label }),
+    /* @__PURE__ */ jsx40(
       View32,
       {
         style: [
@@ -3006,8 +3003,8 @@ function FormInput({
           },
           disabled && { opacity: 0.4 }
         ],
-        children: /* @__PURE__ */ jsx39(
-          TextInput2,
+        children: /* @__PURE__ */ jsx40(
+          ScaledTextInput,
           {
             accessibilityLabel: typeof label === "string" ? label : name,
             accessibilityState: { disabled },
@@ -3038,20 +3035,16 @@ function FormInput({
         )
       }
     ),
-    /* @__PURE__ */ jsx39(Message, { type: "error", message: error }),
-    /* @__PURE__ */ jsx39(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ jsx40(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx40(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Textarea/Textarea.tsx
 import { useState as useState9 } from "react";
-import {
-  StyleSheet as StyleSheet36,
-  View as View33,
-  TextInput as TextInput3
-} from "react-native";
-import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
-var styles36 = StyleSheet36.create({
+import { StyleSheet as StyleSheet37, View as View33 } from "react-native";
+import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+var styles36 = StyleSheet37.create({
   container: {
     gap: spacing.xxs
   },
@@ -3086,9 +3079,9 @@ function Textarea({
   const [focused, setFocused] = useState9(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
   return /* @__PURE__ */ jsxs25(View33, { style: [styles36.container, style], children: [
-    /* @__PURE__ */ jsx40(Label, { label }),
-    /* @__PURE__ */ jsx40(
-      TextInput3,
+    /* @__PURE__ */ jsx41(Label, { label }),
+    /* @__PURE__ */ jsx41(
+      ScaledTextInput,
       {
         accessibilityLabel: typeof label === "string" ? label : name,
         accessibilityState: { disabled },
@@ -3120,24 +3113,16 @@ function Textarea({
         ]
       }
     ),
-    /* @__PURE__ */ jsx40(Message, { type: "error", message: error }),
-    /* @__PURE__ */ jsx40(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ jsx41(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx41(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Select/Select.tsx
 import { useState as useState10 } from "react";
-import {
-  StyleSheet as StyleSheet37,
-  View as View34,
-  Text as Text29,
-  Pressable as Pressable20,
-  Modal,
-  FlatList,
-  SafeAreaView
-} from "react-native";
-import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
-var styles37 = StyleSheet37.create({
+import { StyleSheet as StyleSheet38, View as View34, Pressable as Pressable20, Modal, FlatList, SafeAreaView } from "react-native";
+import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+var styles37 = StyleSheet38.create({
   container: {
     gap: spacing.xxs
   },
@@ -3226,7 +3211,7 @@ function Select({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs26(View34, { style: [styles37.container, style], children: [
-    /* @__PURE__ */ jsx41(Label, { label }),
+    /* @__PURE__ */ jsx42(Label, { label }),
     /* @__PURE__ */ jsxs26(
       Pressable20,
       {
@@ -3245,8 +3230,8 @@ function Select({
           disabled && { opacity: 0.4 }
         ],
         children: [
-          /* @__PURE__ */ jsx41(
-            Text29,
+          /* @__PURE__ */ jsx42(
+            ScaledText,
             {
               style: [
                 styles37.triggerText,
@@ -3257,25 +3242,25 @@ function Select({
               children: displayText
             }
           ),
-          /* @__PURE__ */ jsx41(Text29, { style: [styles37.chevron, { color: colors2.colorOnBgSubtle }], "aria-hidden": true, children: "\u25BE" })
+          /* @__PURE__ */ jsx42(ScaledText, { style: [styles37.chevron, { color: colors2.colorOnBgSubtle }], "aria-hidden": true, children: "\u25BE" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42(
       Modal,
       {
         visible: open,
         transparent: true,
         animationType: "slide",
         onRequestClose: () => setOpen(false),
-        children: /* @__PURE__ */ jsx41(
+        children: /* @__PURE__ */ jsx42(
           Pressable20,
           {
             style: styles37.overlay,
             onPress: () => setOpen(false),
             accessibilityRole: "button",
             accessibilityLabel: "Close options",
-            children: /* @__PURE__ */ jsx41(
+            children: /* @__PURE__ */ jsx42(
               Pressable20,
               {
                 style: [styles37.sheet, { backgroundColor: colors2.colorBg }],
@@ -3283,26 +3268,26 @@ function Select({
                 },
                 children: /* @__PURE__ */ jsxs26(SafeAreaView, { children: [
                   /* @__PURE__ */ jsxs26(View34, { style: styles37.sheetHeader, children: [
-                    /* @__PURE__ */ jsx41(Text29, { style: [styles37.sheetTitle, { color: colors2.colorOnBg }], children: typeof label === "string" ? label : "Select" }),
-                    /* @__PURE__ */ jsx41(
+                    /* @__PURE__ */ jsx42(ScaledText, { style: [styles37.sheetTitle, { color: colors2.colorOnBg }], children: typeof label === "string" ? label : "Select" }),
+                    /* @__PURE__ */ jsx42(
                       Pressable20,
                       {
                         accessibilityRole: "button",
                         accessibilityLabel: "Close",
                         onPress: () => setOpen(false),
                         hitSlop: 8,
-                        children: /* @__PURE__ */ jsx41(Text29, { style: [styles37.closeText, { color: colors2.colorInteractive }], children: "Done" })
+                        children: /* @__PURE__ */ jsx42(ScaledText, { style: [styles37.closeText, { color: colors2.colorInteractive }], children: "Done" })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsx42(
                     FlatList,
                     {
                       data: options,
                       keyExtractor: (item) => item.value,
                       renderItem: ({ item }) => {
                         const isSelected = item.value === value;
-                        return /* @__PURE__ */ jsx41(
+                        return /* @__PURE__ */ jsx42(
                           Pressable20,
                           {
                             accessibilityRole: "button",
@@ -3319,8 +3304,8 @@ function Select({
                               pressed && { opacity: 0.7 },
                               item.disabled && { opacity: 0.4 }
                             ],
-                            children: /* @__PURE__ */ jsx41(
-                              Text29,
+                            children: /* @__PURE__ */ jsx42(
+                              ScaledText,
                               {
                                 style: [
                                   styles37.optionText,
@@ -3344,22 +3329,18 @@ function Select({
         )
       }
     ),
-    /* @__PURE__ */ jsx41(Message, { type: "error", message: error }),
-    /* @__PURE__ */ jsx41(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ jsx42(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx42(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Slider/Slider.tsx
 import { useState as useState11 } from "react";
-import {
-  StyleSheet as StyleSheet38,
-  View as View35,
-  Text as Text30
-} from "react-native";
-import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet39, View as View35 } from "react-native";
+import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 var TRACK_HEIGHT = 6;
 var THUMB_SIZE = 24;
-var styles38 = StyleSheet38.create({
+var styles38 = StyleSheet39.create({
   container: {
     gap: spacing.xxs
   },
@@ -3463,8 +3444,8 @@ function Slider({
       accessibilityState: { disabled },
       children: [
         /* @__PURE__ */ jsxs27(View35, { style: styles38.labelRow, children: [
-          /* @__PURE__ */ jsx42(Label, { label }),
-          showValue && /* @__PURE__ */ jsx42(Text30, { style: [styles38.valueText, { color: colors2.colorOnBg }], children: currentValue })
+          /* @__PURE__ */ jsx43(Label, { label }),
+          showValue && /* @__PURE__ */ jsx43(ScaledText, { style: [styles38.valueText, { color: colors2.colorOnBg }], children: currentValue })
         ] }),
         /* @__PURE__ */ jsxs27(
           View35,
@@ -3476,7 +3457,7 @@ function Slider({
             onResponderGrant: handleResponderGrant,
             onResponderMove: handleResponderMove,
             children: [
-              /* @__PURE__ */ jsx42(View35, { style: [styles38.track, { backgroundColor: colors2.colorBgSubtle }], children: /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43(View35, { style: [styles38.track, { backgroundColor: colors2.colorBgSubtle }], children: /* @__PURE__ */ jsx43(
                 View35,
                 {
                   style: [
@@ -3488,7 +3469,7 @@ function Slider({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43(
                 View35,
                 {
                   style: [
@@ -3505,8 +3486,8 @@ function Slider({
             ]
           }
         ),
-        /* @__PURE__ */ jsx42(Message, { type: "error", message: error }),
-        /* @__PURE__ */ jsx42(Message, { type: "hint", message: hint })
+        /* @__PURE__ */ jsx43(Message, { type: "error", message: error }),
+        /* @__PURE__ */ jsx43(Message, { type: "hint", message: hint })
       ]
     }
   );
@@ -3514,16 +3495,10 @@ function Slider({
 
 // src/components/interaction/form/NumberInput/NumberInput.tsx
 import { useState as useState12 } from "react";
-import {
-  StyleSheet as StyleSheet39,
-  View as View36,
-  TextInput as TextInput4,
-  Text as Text31,
-  Pressable as Pressable21
-} from "react-native";
-import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet40, View as View36, Pressable as Pressable21 } from "react-native";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 var STEPPER_SIZE = 44;
-var styles39 = StyleSheet39.create({
+var styles39 = StyleSheet40.create({
   container: {
     gap: spacing.xxs
   },
@@ -3613,9 +3588,9 @@ function NumberInput({
   const canIncrease = max === void 0 || currentValue < max;
   const borderColor = error ? colors2.colorError : colors2.colorOnBg;
   return /* @__PURE__ */ jsxs28(View36, { style: [styles39.container, style], children: [
-    /* @__PURE__ */ jsx43(Label, { label }),
+    /* @__PURE__ */ jsx44(Label, { label }),
     /* @__PURE__ */ jsxs28(View36, { style: [styles39.inputRow, disabled && { opacity: 0.4 }], children: [
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44(
         Pressable21,
         {
           accessibilityRole: "button",
@@ -3633,8 +3608,8 @@ function NumberInput({
             pressed && { opacity: 0.7 },
             (disabled || !canDecrease) && { opacity: 0.4 }
           ],
-          children: /* @__PURE__ */ jsx43(
-            Text31,
+          children: /* @__PURE__ */ jsx44(
+            ScaledText,
             {
               style: [styles39.stepperText, { color: colors2.colorOnBg }],
               "aria-hidden": true,
@@ -3643,7 +3618,7 @@ function NumberInput({
           )
         }
       ),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44(
         View36,
         {
           style: [
@@ -3653,8 +3628,8 @@ function NumberInput({
               backgroundColor: colors2.colorBg
             }
           ],
-          children: /* @__PURE__ */ jsx43(
-            TextInput4,
+          children: /* @__PURE__ */ jsx44(
+            ScaledTextInput,
             {
               accessibilityLabel: label,
               accessibilityState: { disabled },
@@ -3680,7 +3655,7 @@ function NumberInput({
           )
         }
       ),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44(
         Pressable21,
         {
           accessibilityRole: "button",
@@ -3698,8 +3673,8 @@ function NumberInput({
             pressed && { opacity: 0.7 },
             (disabled || !canIncrease) && { opacity: 0.4 }
           ],
-          children: /* @__PURE__ */ jsx43(
-            Text31,
+          children: /* @__PURE__ */ jsx44(
+            ScaledText,
             {
               style: [styles39.stepperText, { color: colors2.colorOnBg }],
               "aria-hidden": true,
@@ -3709,21 +3684,15 @@ function NumberInput({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx43(Message, { type: "error", message: error }),
-    /* @__PURE__ */ jsx43(Message, { type: "hint", message: hint })
+    /* @__PURE__ */ jsx44(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx44(Message, { type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/Dialog/Dialog.tsx
-import {
-  Modal as Modal2,
-  View as View37,
-  Pressable as Pressable22,
-  Text as Text32,
-  StyleSheet as StyleSheet40
-} from "react-native";
-import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
-var styles40 = StyleSheet40.create({
+import { Modal as Modal2, View as View37, Pressable as Pressable22, StyleSheet as StyleSheet41 } from "react-native";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+var styles40 = StyleSheet41.create({
   overlay: {
     flex: 1,
     justifyContent: "center",
@@ -3779,7 +3748,7 @@ function Dialog({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     Modal2,
     {
       visible: isOpen,
@@ -3787,11 +3756,11 @@ function Dialog({
       animationType: "fade",
       onRequestClose: onClose,
       children: /* @__PURE__ */ jsxs29(View37, { style: styles40.overlay, children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           Pressable22,
           {
             testID: "bds-dialog-backdrop",
-            style: StyleSheet40.absoluteFill,
+            style: StyleSheet41.absoluteFill,
             onPress: onClose,
             accessible: false,
             importantForAccessibility: "no"
@@ -3804,7 +3773,7 @@ function Dialog({
             accessibilityViewIsModal: true,
             onAccessibilityEscape: onClose,
             children: [
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx45(
                 Pressable22,
                 {
                   style: styles40.closeButton,
@@ -3812,8 +3781,8 @@ function Dialog({
                   accessibilityRole: "button",
                   accessibilityLabel: "Close dialog",
                   hitSlop: 8,
-                  children: /* @__PURE__ */ jsx44(
-                    Text32,
+                  children: /* @__PURE__ */ jsx45(
+                    ScaledText,
                     {
                       style: [styles40.closeText, { color: colors2.colorOnBgSubtle }],
                       "aria-hidden": true,
@@ -3822,7 +3791,7 @@ function Dialog({
                   )
                 }
               ),
-              !!title && /* @__PURE__ */ jsx44(View37, { style: styles40.header, children: /* @__PURE__ */ jsx44(Text32, { style: [styles40.title, { color: colors2.colorOnGreySubtle }], children: title }) }),
+              !!title && /* @__PURE__ */ jsx45(View37, { style: styles40.header, children: /* @__PURE__ */ jsx45(ScaledText, { style: [styles40.title, { color: colors2.colorOnGreySubtle }], children: title }) }),
               children
             ]
           }
@@ -3834,17 +3803,9 @@ function Dialog({
 
 // src/components/interaction/SideSheet/SideSheet.tsx
 import { useEffect as useEffect2, useRef as useRef4 } from "react";
-import {
-  Modal as Modal3,
-  View as View38,
-  Pressable as Pressable23,
-  Text as Text33,
-  Animated as Animated3,
-  StyleSheet as StyleSheet41,
-  Dimensions as Dimensions2
-} from "react-native";
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
-var styles41 = StyleSheet41.create({
+import { Modal as Modal3, View as View38, Pressable as Pressable23, Animated as Animated3, StyleSheet as StyleSheet42, Dimensions as Dimensions2 } from "react-native";
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+var styles41 = StyleSheet42.create({
   overlay: {
     flex: 1,
     justifyContent: "flex-end"
@@ -3933,7 +3894,7 @@ function SideSheet({
       ]).start();
     }
   }, [isOpen, slideAnim, backdropAnim, screenHeight]);
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     Modal3,
     {
       visible: isOpen,
@@ -3941,17 +3902,17 @@ function SideSheet({
       animationType: "none",
       onRequestClose: onClose,
       children: /* @__PURE__ */ jsxs30(View38, { style: styles41.overlay, children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           Animated3.View,
           {
             style: [
-              StyleSheet41.absoluteFill,
+              StyleSheet42.absoluteFill,
               { backgroundColor: "rgba(0, 0, 0, 0.5)", opacity: backdropAnim }
             ],
-            children: /* @__PURE__ */ jsx45(
+            children: /* @__PURE__ */ jsx46(
               Pressable23,
               {
-                style: StyleSheet41.absoluteFill,
+                style: StyleSheet42.absoluteFill,
                 onPress: onClose,
                 testID: "bds-sidesheet-backdrop",
                 accessible: false,
@@ -3979,8 +3940,8 @@ function SideSheet({
                 {
                   style: [styles41.header, { borderBottomColor: colors2.colorBgSubtle }],
                   children: [
-                    !!title && /* @__PURE__ */ jsx45(Text33, { style: [styles41.title, { color: colors2.colorOnBg }], children: title }),
-                    /* @__PURE__ */ jsx45(
+                    !!title && /* @__PURE__ */ jsx46(ScaledText, { style: [styles41.title, { color: colors2.colorOnBg }], children: title }),
+                    /* @__PURE__ */ jsx46(
                       Pressable23,
                       {
                         style: styles41.closeButton,
@@ -3988,8 +3949,8 @@ function SideSheet({
                         accessibilityRole: "button",
                         accessibilityLabel: "Close side sheet",
                         hitSlop: 8,
-                        children: /* @__PURE__ */ jsx45(
-                          Text33,
+                        children: /* @__PURE__ */ jsx46(
+                          ScaledText,
                           {
                             style: [styles41.closeText, { color: colors2.colorOnBgSubtle }],
                             "aria-hidden": true,
@@ -4001,7 +3962,7 @@ function SideSheet({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx45(View38, { style: styles41.body, testID: "bds-sidesheet-body", children })
+              /* @__PURE__ */ jsx46(View38, { style: styles41.body, testID: "bds-sidesheet-body", children })
             ]
           }
         )
@@ -4020,16 +3981,10 @@ import {
   createContext as createContext2,
   useContext as useContext2
 } from "react";
-import {
-  View as View39,
-  Text as Text34,
-  Pressable as Pressable24,
-  Animated as Animated4,
-  StyleSheet as StyleSheet42
-} from "react-native";
-import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+import { View as View39, Pressable as Pressable24, Animated as Animated4, StyleSheet as StyleSheet43 } from "react-native";
+import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
 var ToastContext = createContext2(void 0);
-var styles42 = StyleSheet42.create({
+var styles42 = StyleSheet43.create({
   container: {
     position: "absolute",
     top: 0,
@@ -4117,8 +4072,8 @@ function ToastItem({
       accessibilityRole: "alert",
       accessibilityLiveRegion: "polite",
       children: [
-        /* @__PURE__ */ jsx46(Text34, { style: [styles42.message, { color: text }], children: toast.message }),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(ScaledText, { style: [styles42.message, { color: text }], children: toast.message }),
+        /* @__PURE__ */ jsx47(
           Pressable24,
           {
             style: styles42.closeButton,
@@ -4126,7 +4081,7 @@ function ToastItem({
             accessibilityRole: "button",
             accessibilityLabel: "Dismiss",
             hitSlop: 8,
-            children: /* @__PURE__ */ jsx46(Text34, { style: [styles42.closeText, { color: text }], "aria-hidden": true, children: "\u2715" })
+            children: /* @__PURE__ */ jsx47(ScaledText, { style: [styles42.closeText, { color: text }], "aria-hidden": true, children: "\u2715" })
           }
         )
       ]
@@ -4146,15 +4101,15 @@ function ToastProvider({
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   const value = useMemo3(() => ({ showToast }), [showToast]);
-  return /* @__PURE__ */ jsx46(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs31(View39, { style: [{ flex: 1 }, style], children: [
+  return /* @__PURE__ */ jsx47(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs31(View39, { style: [{ flex: 1 }, style], children: [
     children,
-    toasts.length > 0 && /* @__PURE__ */ jsx46(
+    toasts.length > 0 && /* @__PURE__ */ jsx47(
       View39,
       {
         style: styles42.container,
         accessibilityRole: "summary",
         accessibilityLabel: "Notifications",
-        children: toasts.map((toast) => /* @__PURE__ */ jsx46(
+        children: toasts.map((toast) => /* @__PURE__ */ jsx47(
           ToastItem,
           {
             toast,
@@ -4176,19 +4131,9 @@ function useToast() {
 
 // src/components/interaction/DropdownMenu/DropdownMenu.tsx
 import React, { useState as useState14, useEffect as useEffect4, useRef as useRef6 } from "react";
-import {
-  Modal as Modal4,
-  View as View40,
-  Pressable as Pressable25,
-  Text as Text35,
-  FlatList as FlatList2,
-  Animated as Animated5,
-  StyleSheet as StyleSheet43,
-  Dimensions as Dimensions3,
-  SafeAreaView as SafeAreaView2
-} from "react-native";
-import { Fragment as Fragment2, jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
-var styles43 = StyleSheet43.create({
+import { Modal as Modal4, View as View40, Pressable as Pressable25, FlatList as FlatList2, Animated as Animated5, StyleSheet as StyleSheet44, Dimensions as Dimensions3, SafeAreaView as SafeAreaView2 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+var styles43 = StyleSheet44.create({
   overlay: {
     flex: 1,
     justifyContent: "flex-end"
@@ -4288,7 +4233,7 @@ function DropdownMenu({
       accessibilityRole: "button",
       accessibilityLabel: title
     }),
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx48(
       Modal4,
       {
         visible: open,
@@ -4296,17 +4241,17 @@ function DropdownMenu({
         animationType: "none",
         onRequestClose: () => setOpen(false),
         children: /* @__PURE__ */ jsxs32(View40, { style: styles43.overlay, children: [
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx48(
             Animated5.View,
             {
               style: [
-                StyleSheet43.absoluteFill,
+                StyleSheet44.absoluteFill,
                 { backgroundColor: "rgba(0, 0, 0, 0.5)", opacity: backdropAnim }
               ],
-              children: /* @__PURE__ */ jsx47(
+              children: /* @__PURE__ */ jsx48(
                 Pressable25,
                 {
-                  style: StyleSheet43.absoluteFill,
+                  style: StyleSheet44.absoluteFill,
                   onPress: () => setOpen(false),
                   testID: "bds-dropdownmenu-backdrop",
                   accessible: false,
@@ -4315,7 +4260,7 @@ function DropdownMenu({
               )
             }
           ),
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx48(
             Animated5.View,
             {
               style: [
@@ -4336,16 +4281,16 @@ function DropdownMenu({
                       { borderBottomColor: colors2.colorBgSubtle }
                     ],
                     children: [
-                      /* @__PURE__ */ jsx47(Text35, { style: [styles43.sheetTitle, { color: colors2.colorOnBg }], children: title }),
-                      /* @__PURE__ */ jsx47(
+                      /* @__PURE__ */ jsx48(ScaledText, { style: [styles43.sheetTitle, { color: colors2.colorOnBg }], children: title }),
+                      /* @__PURE__ */ jsx48(
                         Pressable25,
                         {
                           accessibilityRole: "button",
                           accessibilityLabel: "Close",
                           onPress: () => setOpen(false),
                           hitSlop: 8,
-                          children: /* @__PURE__ */ jsx47(
-                            Text35,
+                          children: /* @__PURE__ */ jsx48(
+                            ScaledText,
                             {
                               style: [
                                 styles43.closeText,
@@ -4359,13 +4304,13 @@ function DropdownMenu({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx47(
+                /* @__PURE__ */ jsx48(
                   FlatList2,
                   {
                     data: items,
                     keyExtractor: (item) => item.id,
                     renderItem: ({ item }) => /* @__PURE__ */ jsxs32(Fragment2, { children: [
-                      item.separator && /* @__PURE__ */ jsx47(
+                      item.separator && /* @__PURE__ */ jsx48(
                         View40,
                         {
                           style: [
@@ -4389,7 +4334,7 @@ function DropdownMenu({
                             item.disabled && { opacity: 0.4 }
                           ],
                           children: [
-                            !!item.icon && /* @__PURE__ */ jsx47(
+                            !!item.icon && /* @__PURE__ */ jsx48(
                               View40,
                               {
                                 importantForAccessibility: "no-hide-descendants",
@@ -4397,8 +4342,8 @@ function DropdownMenu({
                                 children: item.icon
                               }
                             ),
-                            /* @__PURE__ */ jsx47(
-                              Text35,
+                            /* @__PURE__ */ jsx48(
+                              ScaledText,
                               {
                                 style: [
                                   styles43.itemText,
@@ -4428,10 +4373,10 @@ import {
   Modal as Modal5,
   View as View41,
   Pressable as Pressable26,
-  StyleSheet as StyleSheet44
+  StyleSheet as StyleSheet45
 } from "react-native";
-import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
-var styles44 = StyleSheet44.create({
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+var styles44 = StyleSheet45.create({
   wrapper: {
     alignSelf: "flex-start"
   },
@@ -4469,7 +4414,7 @@ function Popover({
       accessibilityRole: "button",
       accessibilityLabel: accessibilityLabel ?? "Open popover"
     }),
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx49(
       Modal5,
       {
         visible: isOpen,
@@ -4477,18 +4422,18 @@ function Popover({
         animationType: "fade",
         onRequestClose: close,
         children: /* @__PURE__ */ jsxs33(View41, { style: styles44.overlay, onAccessibilityEscape: close, children: [
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx49(
             Pressable26,
             {
               testID: "bds-popover-backdrop",
-              style: StyleSheet44.absoluteFill,
+              style: StyleSheet45.absoluteFill,
               onPress: close,
               onAccessibilityTap: close,
               accessibilityRole: "button",
               accessibilityLabel: "Close popover"
             }
           ),
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx49(
             View41,
             {
               style: [styles44.panel, { backgroundColor: colors2.colorBg }],
@@ -4536,6 +4481,8 @@ export {
   Radio,
   RadioGroup,
   Rating,
+  ScaledText,
+  ScaledTextInput,
   SectionHeader,
   SegmentedControl,
   Select,
@@ -4557,6 +4504,8 @@ export {
   createReactNavigationTheme,
   font,
   lineHeight,
+  maxFontScaleFor,
+  maxFontScaleForStyle,
   spacing,
   useReactNavigationTheme,
   useTheme,