@idealyst/components 1.0.83 → 1.0.84

package/src/examples/SVGImageExamples.tsx

@@ -1,18 +1,20 @@
 import { Screen, View, SVGImage, Text } from '../index';
+
+/** @ts-ignore this is a real file */
 import testLogo from './test-logo.svg';
 
 export const SVGImageExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-        <Text size="large" weight="bold" align="center">
+        <Text size="lg" weight="bold" align="center">
           SVG Image Examples
         </Text>
         
         {/* Local SVG File Example */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Loading Local SVG File</Text>
-          <Text size="small">
+          <Text size="md" weight="semibold">Loading Local SVG File</Text>
+          <Text size="sm">
             Using the test-logo.svg file - works on web, limited support on React Native
           </Text>
           <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -40,8 +42,8 @@ export const SVGImageExamples = () => {
 
         {/* Intent Colors */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Intent Colors</Text>
-          <Text size="small">
+          <Text size="md" weight="semibold">Intent Colors</Text>
+          <Text size="sm">
             SVG images with theme-based coloring
           </Text>
           <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -74,8 +76,8 @@ export const SVGImageExamples = () => {
 
         {/* Custom Colors */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Custom Colors</Text>
-          <Text size="small">
+          <Text size="md" weight="semibold">Custom Colors</Text>
+          <Text size="sm">
             Direct color specification
           </Text>
           <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -102,8 +104,8 @@ export const SVGImageExamples = () => {
 
         {/* Remote URL Example */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Loading from URL</Text>
-          <Text size="small">
+          <Text size="md" weight="semibold">Loading from URL</Text>
+          <Text size="sm">
             SVG images loaded from remote URLs (web only for security)
           </Text>
           <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -129,8 +131,8 @@ export const SVGImageExamples = () => {
 
         {/* Resize Modes */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Resize Modes</Text>
-          <Text size="small">
+          <Text size="md" weight="semibold">Resize Modes</Text>
+          <Text size="sm">
             Different ways to fit SVG images in containers
           </Text>
           <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -163,21 +165,21 @@ export const SVGImageExamples = () => {
 
         {/* Usage Tips */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Usage Tips</Text>
+          <Text size="md" weight="semibold">Usage Tips</Text>
           <View spacing="sm">
-            <Text size="small">
+            <Text size="sm">
               • <Text weight="semibold">Local files:</Text> Use relative paths for bundled SVG files
             </Text>
-            <Text size="small">
+            <Text size="sm">
               • <Text weight="semibold">Remote URLs:</Text> Use {`{ uri: "https://..." }`} format
             </Text>
-            <Text size="small">
+            <Text size="sm">
               • <Text weight="semibold">React Native:</Text> Local SVGs have limited support - use remote URLs or convert to PNG
             </Text>
-            <Text size="small">
+            <Text size="sm">
               • <Text weight="semibold">Coloring:</Text> Works best with single-color SVG icons
             </Text>
-            <Text size="small">
+            <Text size="sm">
               • <Text weight="semibold">Performance:</Text> Cache remote SVGs for better performance
             </Text>
           </View>

package/src/examples/ScreenExamples.tsx

@@ -5,14 +5,14 @@ export const ScreenExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="lg">
-        <Text size="large" weight="bold" align="center">
+        <Text size="lg" weight="bold" align="center">
           Screen Examples
         </Text>
         
         {/* Background Examples */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Background Variants</Text>
-          <Text size="small" color="secondary">
+          <Text size="md" weight="semibold">Background Variants</Text>
+          <Text size="sm" color="secondary">
             Each Screen should have a different background color
           </Text>
           
@@ -20,8 +20,8 @@ export const ScreenExamples = () => {
             <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
               <Screen background="primary" padding="sm">
                 <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-                  <Text size="small" weight="bold">Primary</Text>
-                  <Text size="small" color="secondary">Surface</Text>
+                  <Text size="sm" weight="bold">Primary</Text>
+                  <Text size="sm" color="secondary">Surface</Text>
                 </View>
               </Screen>
             </View>
@@ -29,8 +29,8 @@ export const ScreenExamples = () => {
             <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
               <Screen background="secondary" padding="sm">
                 <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-                  <Text size="small" weight="bold">Secondary</Text>
-                  <Text size="small" color="secondary">Surface</Text>
+                  <Text size="sm" weight="bold">Secondary</Text>
+                  <Text size="sm" color="secondary">Surface</Text>
                 </View>
               </Screen>
             </View>
@@ -38,8 +38,8 @@ export const ScreenExamples = () => {
             <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
               <Screen background="tertiary" padding="sm">
                 <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-                  <Text size="small" weight="bold">Tertiary</Text>
-                  <Text size="small" color="secondary">Surface</Text>
+                  <Text size="sm" weight="bold">Tertiary</Text>
+                  <Text size="sm" color="secondary">Surface</Text>
                 </View>
               </Screen>
             </View>
@@ -47,8 +47,8 @@ export const ScreenExamples = () => {
             <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
               <Screen background="inverse" padding="sm">
                 <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-                  <Text size="small" weight="bold" color="primary">Inverse</Text>
-                  <Text size="small" color="secondary">Surface</Text>
+                  <Text size="sm" weight="bold" color="primary">Inverse</Text>
+                  <Text size="sm" color="secondary">Surface</Text>
                 </View>
               </Screen>
             </View>
@@ -57,8 +57,8 @@ export const ScreenExamples = () => {
 
         {/* Padding Examples */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Padding Variants</Text>
-          <Text size="small" color="secondary">
+          <Text size="md" weight="semibold">Padding Variants</Text>
+          <Text size="sm" color="secondary">
             Different padding options for Screen content
           </Text>
           
@@ -66,8 +66,8 @@ export const ScreenExamples = () => {
             <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
               <Screen background="secondary" padding="none">
                 <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
-                  <Text size="small" weight="bold">None</Text>
-                  <Text size="small" color="secondary">No padding</Text>
+                  <Text size="sm" weight="bold">None</Text>
+                  <Text size="sm" color="secondary">No padding</Text>
                 </View>
               </Screen>
             </View>
@@ -75,8 +75,8 @@ export const ScreenExamples = () => {
             <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
               <Screen background="secondary" padding="sm">
                 <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
-                  <Text size="small" weight="bold">Small</Text>
-                  <Text size="small" color="secondary">8px</Text>
+                  <Text size="sm" weight="bold">Small</Text>
+                  <Text size="sm" color="secondary">8px</Text>
                 </View>
               </Screen>
             </View>
@@ -84,8 +84,8 @@ export const ScreenExamples = () => {
             <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
               <Screen background="secondary" padding="md">
                 <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
-                  <Text size="small" weight="bold">Medium</Text>
-                  <Text size="small" color="secondary">16px</Text>
+                  <Text size="sm" weight="bold">Medium</Text>
+                  <Text size="sm" color="secondary">16px</Text>
                 </View>
               </Screen>
             </View>
@@ -93,8 +93,8 @@ export const ScreenExamples = () => {
             <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
               <Screen background="secondary" padding="lg">
                 <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
-                  <Text size="small" weight="bold">Large</Text>
-                  <Text size="small" color="secondary">24px</Text>
+                  <Text size="sm" weight="bold">Large</Text>
+                  <Text size="sm" color="secondary">24px</Text>
                 </View>
               </Screen>
             </View>
@@ -103,8 +103,8 @@ export const ScreenExamples = () => {
 
         {/* Safe Area Examples */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Safe Area</Text>
-          <Text size="small" color="secondary">
+          <Text size="md" weight="semibold">Safe Area</Text>
+          <Text size="sm" color="secondary">
             Safe area padding for mobile devices
           </Text>
           
@@ -112,8 +112,8 @@ export const ScreenExamples = () => {
             <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
               <Screen background="tertiary" padding="sm" safeArea={false}>
                 <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
-                  <Text size="small" weight="bold">No Safe Area</Text>
-                  <Text size="small" color="secondary">Standard</Text>
+                  <Text size="sm" weight="bold">No Safe Area</Text>
+                  <Text size="sm" color="secondary">Standard</Text>
                 </View>
               </Screen>
             </View>
@@ -121,8 +121,8 @@ export const ScreenExamples = () => {
             <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
               <Screen background="tertiary" padding="sm" safeArea={true}>
                 <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
-                  <Text size="small" weight="bold">Safe Area</Text>
-                  <Text size="small" color="secondary">Mobile</Text>
+                  <Text size="sm" weight="bold">Safe Area</Text>
+                  <Text size="sm" color="secondary">Mobile</Text>
                 </View>
               </Screen>
             </View>
@@ -131,17 +131,17 @@ export const ScreenExamples = () => {
 
         {/* Usage Examples */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Common Usage</Text>
+          <Text size="md" weight="semibold">Common Usage</Text>
           <View style={{ height: 120, borderWidth: 1, borderColor: '#ccc' }}>
             <Screen background="primary" padding="lg">
               <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-                <Text size="large" weight="bold" align="center">
+                <Text size="lg" weight="bold" align="center">
                   App Screen Layout
                 </Text>
-                <Text size="medium" color="secondary" align="center">
+                <Text size="md" color="secondary" align="center">
                   Primary background with large padding
                 </Text>
-                <Text size="small" color="secondary" align="center">
+                <Text size="sm" color="secondary" align="center">
                   Perfect for main app screens
                 </Text>
               </View>

package/src/examples/SelectExamples.tsx

@@ -14,14 +14,14 @@ const fruitOptions = [
 ];
 
 const countryOptions = [
-  { value: 'us', label: 'United States', icon: '🇺🇸' },
-  { value: 'ca', label: 'Canada', icon: '🇨🇦' },
-  { value: 'uk', label: 'United Kingdom', icon: '🇬🇧' },
-  { value: 'de', label: 'Germany', icon: '🇩🇪' },
-  { value: 'fr', label: 'France', icon: '🇫🇷' },
-  { value: 'jp', label: 'Japan', icon: '🇯🇵' },
-  { value: 'au', label: 'Australia', icon: '🇦🇺' },
-  { value: 'in', label: 'India', icon: '🇮🇳' },
+  { value: 'us', label: 'United States', icon: <Text>🇺🇸</Text> },
+  { value: 'ca', label: 'Canada', icon: <Text>🇨🇦</Text> },
+  { value: 'uk', label: 'United Kingdom', icon: <Text>🇬🇧</Text> },
+  { value: 'de', label: 'Germany', icon: <Text>🇩🇪</Text> },
+  { value: 'fr', label: 'France', icon: <Text>🇫🇷</Text> },
+  { value: 'jp', label: 'Japan', icon: <Text>🇯🇵</Text> },
+  { value: 'au', label: 'Australia', icon: <Text>🇦🇺</Text> },
+  { value: 'in', label: 'India', icon: <Text>🇮🇳</Text> },
 ];
 
 const priorityOptions = [
@@ -117,13 +117,13 @@ export const SelectExamples = () => {
     <Screen background="primary" padding="lg">
       <View spacing="lg">
         <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-          <Text size="large" weight="bold">
+          <Text size="lg" weight="bold">
             Select Component Examples
           </Text>
           <Button
-            variant="outlined"
+            type="outlined"
             intent="neutral"
-            size="small"
+            size="sm"
             onPress={resetAllSelections}
           >
             Reset All
@@ -131,25 +131,25 @@ export const SelectExamples = () => {
         </View>
 
         {/* Basic Usage */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">Basic Usage</Text>
+            <Text size="md" weight="semibold">Basic Usage</Text>
             <Select
               options={fruitOptions}
               value={basicSelect}
               onValueChange={setBasicSelect}
               placeholder="Choose a fruit"
             />
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               Selected: {basicSelect || 'None'}
             </Text>
           </View>
         </Card>
 
         {/* With Icons */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">With Icons</Text>
+            <Text size="md" weight="semibold">With Icons</Text>
             <Select
               options={countryOptions}
               value={countrySelect}
@@ -157,16 +157,16 @@ export const SelectExamples = () => {
               placeholder="Select a country"
               label="Country"
             />
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               Selected: {countrySelect || 'None'}
             </Text>
           </View>
         </Card>
 
         {/* Custom Icons */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">Custom Icon Components</Text>
+            <Text size="md" weight="semibold">Custom Icon Components</Text>
             <Select
               options={priorityOptions}
               value={prioritySelect}
@@ -174,16 +174,16 @@ export const SelectExamples = () => {
               placeholder="Select priority"
               label="Task Priority"
             />
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               Selected: {prioritySelect || 'None'}
             </Text>
           </View>
         </Card>
 
         {/* Disabled Options */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">Disabled Options</Text>
+            <Text size="md" weight="semibold">Disabled Options</Text>
             <Select
               options={statusOptions}
               value={statusSelect}
@@ -192,16 +192,16 @@ export const SelectExamples = () => {
               label="Document Status"
               helperText="Some options are disabled"
             />
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               Selected: {statusSelect || 'None'}
             </Text>
           </View>
         </Card>
 
         {/* Searchable */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">Searchable Select</Text>
+            <Text size="md" weight="semibold">Searchable Select</Text>
             <Select
               options={fruitOptions}
               value={searchableSelect}
@@ -211,45 +211,45 @@ export const SelectExamples = () => {
               searchable
               helperText="Type to filter options"
             />
-            <Text size="small" color="secondary">
+            <Text size="sm" color="secondary">
               Selected: {searchableSelect || 'None'}
             </Text>
           </View>
         </Card>
 
         {/* Sizes */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">Sizes</Text>
+            <Text size="md" weight="semibold">Sizes</Text>
             <View spacing="sm">
               <View>
-                <Text size="small" weight="medium">Small</Text>
+                <Text size="sm" weight="medium">Small</Text>
                 <Select
                   options={fruitOptions.slice(0, 3)}
                   value={sizeSmall}
                   onValueChange={setSizeSmall}
                   placeholder="Small select"
-                  size="small"
+                  size="sm"
                 />
               </View>
               <View>
-                <Text size="small" weight="medium">Medium (Default)</Text>
+                <Text size="sm" weight="medium">Medium (Default)</Text>
                 <Select
                   options={fruitOptions.slice(0, 3)}
                   value={sizeMedium}
                   onValueChange={setSizeMedium}
                   placeholder="Medium select"
-                  size="medium"
+                  size="md"
                 />
               </View>
               <View>
-                <Text size="small" weight="medium">Large</Text>
+                <Text size="sm" weight="medium">Large</Text>
                 <Select
                   options={fruitOptions.slice(0, 3)}
                   value={sizeLarge}
                   onValueChange={setSizeLarge}
                   placeholder="Large select"
-                  size="large"
+                  size="lg"
                 />
               </View>
             </View>
@@ -257,28 +257,28 @@ export const SelectExamples = () => {
         </Card>
 
         {/* Variants */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">Variants</Text>
+            <Text size="md" weight="semibold">Variants</Text>
             <View spacing="sm">
               <View>
-                <Text size="small" weight="medium">Outlined (Default)</Text>
+                <Text size="sm" weight="medium">Outlined (Default)</Text>
                 <Select
                   options={fruitOptions.slice(0, 4)}
                   value={outlinedSelect}
                   onValueChange={setOutlinedSelect}
                   placeholder="Outlined variant"
-                  variant="outlined"
+                  type="outlined"
                 />
               </View>
               <View>
-                <Text size="small" weight="medium">Filled</Text>
+                <Text size="sm" weight="medium">Filled</Text>
                 <Select
                   options={fruitOptions.slice(0, 4)}
                   value={filledSelect}
                   onValueChange={setFilledSelect}
                   placeholder="Filled variant"
-                  variant="filled"
+                  type="filled"
                 />
               </View>
             </View>
@@ -286,52 +286,52 @@ export const SelectExamples = () => {
         </Card>
 
         {/* Intents */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">Intent Colors</Text>
+            <Text size="md" weight="semibold">Intent Colors</Text>
             <View spacing="sm">
               <View>
-                <Text size="small" weight="medium">Primary</Text>
+                <Text size="sm" weight="medium">Primary</Text>
                 <Select
                   options={fruitOptions.slice(0, 3)}
                   value={primarySelect}
                   onValueChange={setPrimarySelect}
                   placeholder="Primary intent"
                   intent="primary"
-                  variant="outlined"
+                  type="outlined"
                 />
               </View>
               <View>
-                <Text size="small" weight="medium">Success</Text>
+                <Text size="sm" weight="medium">Success</Text>
                 <Select
                   options={fruitOptions.slice(0, 3)}
                   value={successSelect}
                   onValueChange={setSuccessSelect}
                   placeholder="Success intent"
                   intent="success"
-                  variant="outlined"
+                  type="outlined"
                 />
               </View>
               <View>
-                <Text size="small" weight="medium">Warning</Text>
+                <Text size="sm" weight="medium">Warning</Text>
                 <Select
                   options={fruitOptions.slice(0, 3)}
                   value={warningSelect}
                   onValueChange={setWarningSelect}
                   placeholder="Warning intent"
                   intent="warning"
-                  variant="outlined"
+                  type="outlined"
                 />
               </View>
               <View>
-                <Text size="small" weight="medium">Error</Text>
+                <Text size="sm" weight="medium">Error</Text>
                 <Select
                   options={fruitOptions.slice(0, 3)}
                   value={errorSelect}
                   onValueChange={setErrorSelect}
                   placeholder="Error intent"
                   intent="error"
-                  variant="outlined"
+                  type="outlined"
                 />
               </View>
             </View>
@@ -339,9 +339,9 @@ export const SelectExamples = () => {
         </Card>
 
         {/* Form Example */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">Form Integration</Text>
+            <Text size="md" weight="semibold">Form Integration</Text>
             <Select
               options={countryOptions}
               value={formSelect}
@@ -355,11 +355,11 @@ export const SelectExamples = () => {
               label="Country *"
               error={!!formErrors.formSelect}
               helperText={formErrors.formSelect || "Required field"}
-              variant="outlined"
+              type="outlined"
               intent="primary"
             />
             <Button
-              variant="contained"
+              type="contained"
               intent="primary"
               onPress={handleFormSubmit}
             >
@@ -369,9 +369,9 @@ export const SelectExamples = () => {
         </Card>
 
         {/* Disabled State */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">Disabled State</Text>
+            <Text size="md" weight="semibold">Disabled State</Text>
             <Select
               options={fruitOptions}
               value="apple"
@@ -385,10 +385,10 @@ export const SelectExamples = () => {
         </Card>
 
         {/* Platform-specific Features */}
-        <Card variant="outlined" padding="medium">
+        <Card type="outlined" padding="md">
           <View spacing="md">
-            <Text size="medium" weight="semibold">Platform Features</Text>
-            <Text size="small" color="secondary">
+            <Text size="md" weight="semibold">Platform Features</Text>
+            <Text size="sm" color="secondary">
               On iOS: Try the ActionSheet presentation mode for native feel
             </Text>
             <Select
@@ -406,15 +406,15 @@ export const SelectExamples = () => {
         <Divider spacing="lg" />
 
         {/* Summary */}
-        <Card variant="filled" padding="medium">
+        <Card type="filled" padding="md">
           <View spacing="sm">
-            <Text size="medium" weight="semibold">Current Selections Summary</Text>
-            <Text size="small">Basic: {basicSelect || 'None'}</Text>
-            <Text size="small">Country: {countrySelect || 'None'}</Text>
-            <Text size="small">Priority: {prioritySelect || 'None'}</Text>
-            <Text size="small">Status: {statusSelect || 'None'}</Text>
-            <Text size="small">Searchable: {searchableSelect || 'None'}</Text>
-            <Text size="small">Form: {formSelect || 'None'}</Text>
+            <Text size="md" weight="semibold">Current Selections Summary</Text>
+            <Text size="sm">Basic: {basicSelect || 'None'}</Text>
+            <Text size="sm">Country: {countrySelect || 'None'}</Text>
+            <Text size="sm">Priority: {prioritySelect || 'None'}</Text>
+            <Text size="sm">Status: {statusSelect || 'None'}</Text>
+            <Text size="sm">Searchable: {searchableSelect || 'None'}</Text>
+            <Text size="sm">Form: {formSelect || 'None'}</Text>
           </View>
         </Card>
       </View>