@developer_tribe/react-builder 1.2.22 → 1.2.24

package/src/build-components/patterns.generated.ts

@@ -71,50 +71,72 @@ export const patterns = [
         size: 'number',
         strokeWidth: 'number',
       },
+      defaults: {
+        style: {
+          color: 'THEME_COLORS.TEXT',
+          fontSize: '16@fs',
+          fontWeight: '400',
+        },
+      },
     },
     meta: {
       desiredParent: ['all'],
       label: 'BIcon',
       description: 'Renders an icon from the icon set.',
-      attributes: {
-        styles: {
-          color: {
-            label: 'Color',
-            description: 'Text color.',
-            category: 'style',
-            specialCategory: null,
-            sort: 1,
-          },
-          fontSize: {
-            label: 'Font Size',
-            description: 'Text size.',
-            category: 'style',
-            specialCategory: null,
-            sort: 2,
-            preferredScale: 's',
-          },
-          fontFamily: {
-            label: 'Font Family',
-            description: 'Font family used for the text.',
-            category: 'style',
-            specialCategory: null,
-            sort: 3,
-          },
-          fontWeight: {
-            label: 'Font Weight',
-            description: 'Text weight.',
-            category: 'style',
-            specialCategory: null,
-            sort: 4,
-          },
-          textAlign: {
-            label: 'Text Align',
-            description: 'Text alignment.',
-            category: 'style',
-            specialCategory: null,
-            sort: 5,
-          },
+      styles: {
+        color: {
+          label: 'Color',
+          description: 'Text color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 1,
+        },
+        fontSize: {
+          label: 'Font Size',
+          description: 'Text size.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+          preferredScale: 's',
+        },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        fontWeight: {
+          label: 'Font Weight',
+          description: 'Text weight.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        textAlign: {
+          label: 'Text Align',
+          description: 'Text alignment.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
         },
+        backgroundColor: {
+          label: 'Background Color',
+          description: 'Background fill color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 20,
+        },
+        borderRadius: {
+          label: 'Border Radius',
+          description: 'Corner rounding amount.',
+          category: 'style',
+          specialCategory: null,
+          sort: 21,
+          preferredScale: 's',
+        },
+      },
+      attributes: {
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
           description:
@@ -435,33 +457,18 @@ export const patterns = [
           sort: 4,
         },
       },
-      styles: {
-        backgroundColor: {
-          label: 'Background Color',
-          description: 'Background fill color.',
-          category: 'style',
-          specialCategory: null,
-          sort: 20,
-        },
-        borderRadius: {
-          label: 'Border Radius',
-          description: 'Corner rounding amount.',
-          category: 'style',
-          specialCategory: null,
-          sort: 21,
-          preferredScale: 's',
-        },
-      },
     },
     defaults: {
       style: {
+        color: 'THEME_COLORS.TEXT',
+        fontSize: '16',
+        fontWeight: '400',
         flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        fontSize: '16',
       },
       iconType: 'activity',
       strokeWidth: 1.5,
@@ -853,13 +860,13 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-      },
-      src: {
-        label: 'Src',
-        description: 'Image source URL.',
-        category: 'other',
-        specialCategory: null,
-        sort: 1,
+        src: {
+          label: 'Src',
+          description: 'Image source URL.',
+          category: 'other',
+          specialCategory: null,
+          sort: 1,
+        },
       },
     },
     defaults: {
@@ -3294,6 +3301,13 @@ export const patterns = [
         },
         scrollable: 'boolean',
       },
+      defaults: {
+        style: {
+          color: 'THEME_COLORS.TEXT',
+          fontSize: '16@fs',
+          fontWeight: '400',
+        },
+      },
     },
     meta: {
       desiredParent: ['all'],
@@ -3307,44 +3321,6 @@ export const patterns = [
           specialCategory: null,
           sort: 1,
         },
-        styles: {
-          color: {
-            label: 'Color',
-            description: 'Text color.',
-            category: 'style',
-            specialCategory: null,
-            sort: 1,
-          },
-          fontSize: {
-            label: 'Font Size',
-            description: 'Text size.',
-            category: 'style',
-            specialCategory: null,
-            sort: 2,
-            preferredScale: 's',
-          },
-          fontFamily: {
-            label: 'Font Family',
-            description: 'Font family used for the text.',
-            category: 'style',
-            specialCategory: null,
-            sort: 3,
-          },
-          fontWeight: {
-            label: 'Font Weight',
-            description: 'Text weight.',
-            category: 'style',
-            specialCategory: null,
-            sort: 4,
-          },
-          textAlign: {
-            label: 'Text Align',
-            description: 'Text alignment.',
-            category: 'style',
-            specialCategory: null,
-            sort: 5,
-          },
-        },
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
           description:
@@ -3618,6 +3594,59 @@ export const patterns = [
           sort: 26,
         },
       },
+      styles: {
+        color: {
+          label: 'Color',
+          description: 'Text color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 1,
+        },
+        fontSize: {
+          label: 'Font Size',
+          description: 'Text size.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+          preferredScale: 's',
+        },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        fontWeight: {
+          label: 'Font Weight',
+          description: 'Text weight.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        textAlign: {
+          label: 'Text Align',
+          description: 'Text alignment.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
+        },
+        backgroundColor: {
+          label: 'Background Color',
+          description: 'Background fill color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 20,
+        },
+        borderRadius: {
+          label: 'Border Radius',
+          description: 'Corner rounding amount.',
+          category: 'style',
+          specialCategory: null,
+          sort: 21,
+          preferredScale: 's',
+        },
+      },
       specialCategories: {
         padding: {
           label: 'Padding',
@@ -3644,26 +3673,12 @@ export const patterns = [
           sort: 4,
         },
       },
-      styles: {
-        backgroundColor: {
-          label: 'Background Color',
-          description: 'Background fill color.',
-          category: 'style',
-          specialCategory: null,
-          sort: 20,
-        },
-        borderRadius: {
-          label: 'Border Radius',
-          description: 'Corner rounding amount.',
-          category: 'style',
-          specialCategory: null,
-          sort: 21,
-          preferredScale: 's',
-        },
-      },
     },
     defaults: {
       style: {
+        color: 'THEME_COLORS.TEXT',
+        fontSize: '16@fs',
+        fontWeight: '400',
         flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
@@ -3741,50 +3756,72 @@ export const patterns = [
         scrollable: 'boolean',
         count: 'number',
       },
+      defaults: {
+        style: {
+          color: 'THEME_COLORS.TEXT',
+          fontSize: '16@fs',
+          fontWeight: '400',
+        },
+      },
     },
     meta: {
       desiredParent: ['all'],
       label: 'Counter',
       description: 'Displays a numeric counter.',
-      attributes: {
-        styles: {
-          color: {
-            label: 'Color',
-            description: 'Text color.',
-            category: 'style',
-            specialCategory: null,
-            sort: 1,
-          },
-          fontSize: {
-            label: 'Font Size',
-            description: 'Text size.',
-            category: 'style',
-            specialCategory: null,
-            sort: 2,
-            preferredScale: 's',
-          },
-          fontFamily: {
-            label: 'Font Family',
-            description: 'Font family used for the text.',
-            category: 'style',
-            specialCategory: null,
-            sort: 3,
-          },
-          fontWeight: {
-            label: 'Font Weight',
-            description: 'Text weight.',
-            category: 'style',
-            specialCategory: null,
-            sort: 4,
-          },
-          textAlign: {
-            label: 'Text Align',
-            description: 'Text alignment.',
-            category: 'style',
-            specialCategory: null,
-            sort: 5,
-          },
+      styles: {
+        color: {
+          label: 'Color',
+          description: 'Text color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 1,
+        },
+        fontSize: {
+          label: 'Font Size',
+          description: 'Text size.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+          preferredScale: 's',
+        },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        fontWeight: {
+          label: 'Font Weight',
+          description: 'Text weight.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        textAlign: {
+          label: 'Text Align',
+          description: 'Text alignment.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
+        },
+        backgroundColor: {
+          label: 'Background Color',
+          description: 'Background fill color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 20,
+        },
+        borderRadius: {
+          label: 'Border Radius',
+          description: 'Corner rounding amount.',
+          category: 'style',
+          specialCategory: null,
+          sort: 21,
+          preferredScale: 's',
         },
+      },
+      attributes: {
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
           description:
@@ -4091,26 +4128,12 @@ export const patterns = [
           sort: 4,
         },
       },
-      styles: {
-        backgroundColor: {
-          label: 'Background Color',
-          description: 'Background fill color.',
-          category: 'style',
-          specialCategory: null,
-          sort: 20,
-        },
-        borderRadius: {
-          label: 'Border Radius',
-          description: 'Corner rounding amount.',
-          category: 'style',
-          specialCategory: null,
-          sort: 21,
-          preferredScale: 's',
-        },
-      },
     },
     defaults: {
       style: {
+        color: 'THEME_COLORS.TEXT',
+        fontSize: '16@fs',
+        fontWeight: '400',
         flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
@@ -4176,14 +4199,13 @@ export const patterns = [
           left: 'size',
           right: 'size',
           zIndex: 'number',
+          resizeMode: ['cover', 'contain', 'stretch', 'center'],
         },
         title: 'title',
         description: 'description',
         src: 'string',
-        width: 'size',
-        height: 'size',
-        resizeMode: ['cover', 'contain', 'stretch', 'center'],
       },
+      defaults: { resizeMode: 'contain' },
     },
     meta: {
       desiredParent: ['all'],
@@ -4231,6 +4253,13 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
+        resizeMode: {
+          label: 'Resize Mode',
+          description: 'How the image fits the frame.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
       },
       attributes: {
         scrollable: {
@@ -4390,10 +4419,11 @@ export const patterns = [
         },
         width: {
           label: 'Width',
-          description: 'Image width.',
+          description: 'Fixed width value.',
           category: 'container',
-          specialCategory: null,
-          sort: 2,
+          specialCategory: 'size',
+          sort: 0,
+          preferredScale: 's',
         },
         minWidth: {
           label: 'Min Width',
@@ -4413,10 +4443,11 @@ export const patterns = [
         },
         height: {
           label: 'Height',
-          description: 'Image height.',
+          description: 'Fixed height value.',
           category: 'container',
-          specialCategory: null,
+          specialCategory: 'size',
           sort: 3,
+          preferredScale: 'vs',
         },
         minHeight: {
           label: 'Min Height',
@@ -4494,16 +4525,10 @@ export const patterns = [
           specialCategory: null,
           sort: 1,
         },
-        resizeMode: {
-          label: 'Resize Mode',
-          description: 'How the image fits the frame.',
-          category: 'other',
-          specialCategory: null,
-          sort: 4,
-        },
       },
     },
     defaults: {
+      resizeMode: 'contain',
       style: {
         flexDirection: 'column',
         position: 'relative',
@@ -4911,8 +4936,8 @@ export const patterns = [
   {
     schemaVersion: 2,
     pattern: {
-      type: 'Onboard',
-      children: 'node',
+      type: 'NavigationBarColor',
+      children: 'never',
       attributes: {
         scrollable: 'boolean',
         style: {
@@ -4969,9 +4994,9 @@ export const patterns = [
       },
     },
     meta: {
-      desiredParent: ['=OnboardProvider'],
-      label: 'Onboard',
-      description: 'Wraps the onboarding flow.',
+      desiredParent: ['all'],
+      label: 'Navigation Bar Color',
+      description: 'Sets the OS navigation bar background color.',
       specialCategories: {
         padding: {
           label: 'Padding',
@@ -5001,10 +5026,10 @@ export const patterns = [
       styles: {
         backgroundColor: {
           label: 'Background Color',
-          description: 'Background fill color.',
+          description: 'Navigation bar background color.',
           category: 'style',
           specialCategory: null,
-          sort: 20,
+          sort: 1,
         },
         borderRadius: {
           label: 'Border Radius',
@@ -5273,16 +5298,16 @@ export const patterns = [
           sort: 26,
         },
       },
-      desiredChildren: ['=OnboardItem'],
     },
     defaults: {
       style: {
-        flexDirection: 'row',
+        flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        backgroundColor: 'THEME_COLORS.BACKGROUND',
       },
     },
     types: {},
@@ -5290,8 +5315,8 @@ export const patterns = [
   {
     schemaVersion: 2,
     pattern: {
-      type: 'OnboardButton',
-      children: 'never',
+      type: 'Onboard',
+      children: 'node',
       attributes: {
         scrollable: 'boolean',
         style: {
@@ -5345,26 +5370,12 @@ export const patterns = [
         },
         title: 'title',
         description: 'description',
-        labelKey: 'string',
-        button_text_color: 'color',
-        animation: [
-          'simple-animation',
-          'line-animation',
-          'blur',
-          'blur-animation',
-          'blur-line-animation',
-        ],
-        animation_color: 'color',
-        button_background_color: 'color',
-        flex: 'number',
-        events: 'EventObject[]',
       },
-      defaults: { style: { height: '40@vs', borderRadius: '12@s' } },
     },
     meta: {
-      desiredParent: ['=OnboardButtons'],
-      label: 'Onboard Button',
-      description: 'Single action button for onboarding.',
+      desiredParent: ['=OnboardProvider'],
+      label: 'Onboard',
+      description: 'Wraps the onboarding flow.',
       specialCategories: {
         padding: {
           label: 'Padding',
@@ -5407,34 +5418,6 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
-        button_text_color: {
-          label: 'Button Text Color',
-          description: 'Text color of the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 2,
-        },
-        animation: {
-          label: 'Animation',
-          description: 'Animation style for the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 3,
-        },
-        animation_color: {
-          label: 'Animation Color',
-          description: 'Color used by the animation.',
-          category: 'style',
-          specialCategory: null,
-          sort: 4,
-        },
-        button_background_color: {
-          label: 'Button Background Color',
-          description: 'Background color of the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 5,
-        },
       },
       attributes: {
         scrollable: {
@@ -5642,9 +5625,9 @@ export const patterns = [
         },
         flex: {
           label: 'Flex',
-          description: 'Flex grow value in layout.',
+          description: 'Flex grow factor (e.g. 1 fills available space).',
           category: 'container',
-          specialCategory: null,
+          specialCategory: 'size',
           sort: 6,
         },
         position: {
@@ -5693,48 +5676,26 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        labelKey: {
-          label: 'Label Key',
-          description: 'Localization key for the button text.',
-          category: 'other',
-          specialCategory: null,
-          sort: 1,
-        },
-        events: {
-          label: 'Events',
-          description: 'List of events fired by the button.',
-          category: 'other',
-          specialCategory: null,
-          sort: 7,
-        },
       },
+      desiredChildren: ['=OnboardItem'],
     },
     defaults: {
       style: {
-        flexDirection: 'column',
+        flexDirection: 'row',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        height: '40@vs',
-        borderRadius: '12@s',
-      },
-    },
-    types: {
-      EventObject: {
-        type: ['Permission', 'Navigate'],
-        permission: ['att', 'notification', 'rating', 'GDPR', 'null'],
-        navigate_to: 'string',
-        targetIndex: 'number',
       },
     },
+    types: {},
   },
   {
     schemaVersion: 2,
     pattern: {
-      type: 'OnboardButtons',
-      children: 'node',
+      type: 'OnboardButton',
+      children: 'never',
       attributes: {
         scrollable: 'boolean',
         style: {
@@ -5788,30 +5749,26 @@ export const patterns = [
         },
         title: 'title',
         description: 'description',
-        buttonType: ['previous_button', 'next_button', 'skip_button'],
-        skipNumber: 'number',
-        buttons_direction: ['row', 'column'],
-        forIndex: 'number',
-        seperatorColor: 'color',
-        condition: ['carousel-index'],
-        conditionVariable: 'number',
-      },
-      defaults: {
-        style: {
-          display: 'flex',
-          flexDirection: 'row',
-          gap: 12,
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginVertical: '12@vs',
-          marginHorizontal: '24@s',
-        },
+        labelKey: 'string',
+        button_text_color: 'color',
+        animation: [
+          'simple-animation',
+          'line-animation',
+          'blur',
+          'blur-animation',
+          'blur-line-animation',
+        ],
+        animation_color: 'color',
+        button_background_color: 'color',
+        flex: 'number',
+        events: 'EventObject[]',
       },
+      defaults: { style: { height: '40@vs', borderRadius: '12@s' } },
     },
     meta: {
-      desiredParent: ['=OnboardItem'],
-      label: 'Onboard Buttons',
-      description: 'Wrapper for onboarding button set.',
+      desiredParent: ['=OnboardButtons'],
+      label: 'Onboard Button',
+      description: 'Single action button for onboarding.',
       specialCategories: {
         padding: {
           label: 'Padding',
@@ -5854,9 +5811,30 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
-        seperatorColor: {
-          label: 'Seperator Color',
-          description: 'Color of the divider line.',
+        button_text_color: {
+          label: 'Button Text Color',
+          description: 'Text color of the button.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+        },
+        animation: {
+          label: 'Animation',
+          description: 'Animation style for the button.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        animation_color: {
+          label: 'Animation Color',
+          description: 'Color used by the animation.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        button_background_color: {
+          label: 'Button Background Color',
+          description: 'Background color of the button.',
           category: 'style',
           specialCategory: null,
           sort: 5,
@@ -6068,9 +6046,9 @@ export const patterns = [
         },
         flex: {
           label: 'Flex',
-          description: 'Flex grow factor (e.g. 1 fills available space).',
+          description: 'Flex grow value in layout.',
           category: 'container',
-          specialCategory: 'size',
+          specialCategory: null,
           sort: 6,
         },
         position: {
@@ -6119,44 +6097,16 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        buttonType: {
-          label: 'Button Type',
-          description: 'Which onboard button to show.',
+        labelKey: {
+          label: 'Label Key',
+          description: 'Localization key for the button text.',
           category: 'other',
           specialCategory: null,
           sort: 1,
         },
-        skipNumber: {
-          label: 'Skip Number',
-          description: 'Slide index to skip to.',
-          category: 'other',
-          specialCategory: null,
-          sort: 2,
-        },
-        buttons_direction: {
-          label: 'Buttons Direction',
-          description: 'Direction to lay out buttons.',
-          category: 'container',
-          specialCategory: null,
-          sort: 3,
-        },
-        forIndex: {
-          label: 'For Index',
-          description: 'Show only for this slide index.',
-          category: 'other',
-          specialCategory: null,
-          sort: 4,
-        },
-        condition: {
-          label: 'Condition',
-          description: 'Built-in condition to check.',
-          category: 'other',
-          specialCategory: null,
-          sort: 6,
-        },
-        conditionVariable: {
-          label: 'Condition Variable',
-          description: 'Value used when checking the condition.',
+        events: {
+          label: 'Events',
+          description: 'List of events fired by the button.',
           category: 'other',
           specialCategory: null,
           sort: 7,
@@ -6165,27 +6115,30 @@ export const patterns = [
     },
     defaults: {
       style: {
-        flexDirection: 'row',
+        flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        display: 'flex',
-        gap: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginVertical: '12@vs',
-        marginHorizontal: '24@s',
+        height: '40@vs',
+        borderRadius: '12@s',
+      },
+    },
+    types: {
+      EventObject: {
+        type: ['Permission', 'Navigate'],
+        permission: ['att', 'notification', 'rating', 'GDPR', 'null'],
+        navigate_to: 'string',
+        targetIndex: 'number',
       },
     },
-    types: {},
   },
   {
     schemaVersion: 2,
     pattern: {
-      type: 'OnboardDot',
-      children: 'never',
+      type: 'OnboardButtons',
+      children: 'node',
       attributes: {
         scrollable: 'boolean',
         style: {
@@ -6239,27 +6192,30 @@ export const patterns = [
         },
         title: 'title',
         description: 'description',
-        dotType: [
-          'expanding_dot',
-          'normal_dot',
-          'scaling_dot',
-          'sliding_border',
-          'sliding_dot',
-          'liquid_like',
-        ],
-        dot_thickness: 'size',
-        inactive_dot_opacity: 'number',
-        inactive_dot_color: 'color',
-        active_dot_color: 'color',
-        flexDirection: 'never',
-        alignItems: 'never',
-        justifyContent: 'never',
+        buttonType: ['previous_button', 'next_button', 'skip_button'],
+        skipNumber: 'number',
+        buttons_direction: ['row', 'column'],
+        forIndex: 'number',
+        seperatorColor: 'color',
+        condition: ['carousel-index'],
+        conditionVariable: 'number',
+      },
+      defaults: {
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          gap: 12,
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginVertical: '12@vs',
+          marginHorizontal: '24@s',
+        },
       },
     },
     meta: {
-      desiredParent: ['>OnboardProvider'],
-      label: 'Onboard Dot',
-      description: 'Renders onboarding progress dots.',
+      desiredParent: ['=OnboardItem'],
+      label: 'Onboard Buttons',
+      description: 'Wrapper for onboarding button set.',
       specialCategories: {
         padding: {
           label: 'Padding',
@@ -6302,43 +6258,937 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
-        dotType: {
-          label: 'Dot Type',
-          description: 'Dot animation style.',
-          category: 'style',
-          specialCategory: null,
+        seperatorColor: {
+          label: 'Seperator Color',
+          description: 'Color of the divider line.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
+        },
+      },
+      attributes: {
+        scrollable: {
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
+          category: 'container',
+          specialCategory: null,
+          sort: -1,
+        },
+        flexDirection: {
+          label: 'Flex Direction',
+          description: 'Sets row or column layout.',
+          category: 'container',
+          specialCategory: null,
+          sort: 4,
+        },
+        flexWrap: {
+          label: 'Flex Wrap',
+          description: 'Controls whether flex items wrap to multiple lines.',
+          category: 'container',
+          specialCategory: null,
+          sort: 4.5,
+        },
+        alignItems: {
+          label: 'Align Items',
+          description: 'Controls cross-axis alignment.',
+          category: 'container',
+          specialCategory: null,
+          sort: 3,
+        },
+        justifyContent: {
+          label: 'Justify Content',
+          description: 'Controls main-axis alignment.',
+          category: 'container',
+          specialCategory: null,
+          sort: 5,
+        },
+        gap: {
+          label: 'Gap',
+          description: 'Space between children.',
+          category: 'container',
+          specialCategory: null,
+          sort: 10,
+          preferredScale: 's',
+        },
+        padding: {
+          label: 'Padding',
+          description: 'Uniform padding on all sides.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 6,
+          preferredScale: 's',
+        },
+        paddingHorizontal: {
+          label: 'Padding Horizontal',
+          description: 'Left and right padding.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 7,
+          preferredScale: 's',
+        },
+        paddingVertical: {
+          label: 'Padding Vertical',
+          description: 'Top and bottom padding.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 8,
+          preferredScale: 'vs',
+        },
+        paddingTop: {
+          label: 'Padding Top',
+          description: 'Top padding only.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 9,
+          preferredScale: 'vs',
+        },
+        paddingBottom: {
+          label: 'Padding Bottom',
+          description: 'Bottom padding only.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 10,
+          preferredScale: 'vs',
+        },
+        paddingLeft: {
+          label: 'Padding Left',
+          description: 'Left padding only.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 11,
+          preferredScale: 's',
+        },
+        paddingRight: {
+          label: 'Padding Right',
+          description: 'Right padding only.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 12,
+          preferredScale: 's',
+        },
+        margin: {
+          label: 'Margin',
+          description: 'Uniform margin on all sides.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 13,
+          preferredScale: 's',
+        },
+        marginHorizontal: {
+          label: 'Margin Horizontal',
+          description: 'Left and right margin.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 14,
+          preferredScale: 's',
+        },
+        marginVertical: {
+          label: 'Margin Vertical',
+          description: 'Top and bottom margin.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 15,
+          preferredScale: 'vs',
+        },
+        marginTop: {
+          label: 'Margin Top',
+          description: 'Top margin only.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 16,
+          preferredScale: 'vs',
+        },
+        marginBottom: {
+          label: 'Margin Bottom',
+          description: 'Bottom margin only.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 17,
+          preferredScale: 'vs',
+        },
+        marginLeft: {
+          label: 'Margin Left',
+          description: 'Left margin only.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 18,
+          preferredScale: 's',
+        },
+        marginRight: {
+          label: 'Margin Right',
+          description: 'Right margin only.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 19,
+          preferredScale: 's',
+        },
+        width: {
+          label: 'Width',
+          description: 'Fixed width value.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 0,
+          preferredScale: 's',
+        },
+        minWidth: {
+          label: 'Min Width',
+          description: 'Minimum width constraint.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 1,
+          preferredScale: 's',
+        },
+        maxWidth: {
+          label: 'Max Width',
+          description: 'Maximum width constraint.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 2,
+          preferredScale: 's',
+        },
+        height: {
+          label: 'Height',
+          description: 'Fixed height value.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 3,
+          preferredScale: 'vs',
+        },
+        minHeight: {
+          label: 'Min Height',
+          description: 'Minimum height constraint.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 4,
+          preferredScale: 'vs',
+        },
+        maxHeight: {
+          label: 'Max Height',
+          description: 'Maximum height constraint.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 5,
+          preferredScale: 'vs',
+        },
+        flex: {
+          label: 'Flex',
+          description: 'Flex grow factor (e.g. 1 fills available space).',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 6,
+        },
+        position: {
+          label: 'Position',
+          description: 'Sets layout positioning mode.',
+          category: 'container',
+          specialCategory: null,
+          sort: 3,
+        },
+        top: {
+          label: 'Top',
+          description: 'Offset from the top edge.',
+          category: 'container',
+          specialCategory: 'offset',
+          sort: 22,
+          preferredScale: 'vs',
+        },
+        bottom: {
+          label: 'Bottom',
+          description: 'Offset from the bottom edge.',
+          category: 'container',
+          specialCategory: 'offset',
+          sort: 23,
+          preferredScale: 'vs',
+        },
+        left: {
+          label: 'Left',
+          description: 'Offset from the left edge.',
+          category: 'container',
+          specialCategory: 'offset',
+          sort: 24,
+          preferredScale: 's',
+        },
+        right: {
+          label: 'Right',
+          description: 'Offset from the right edge.',
+          category: 'container',
+          specialCategory: 'offset',
+          sort: 25,
+          preferredScale: 's',
+        },
+        zIndex: {
+          label: 'Z-Index',
+          description: 'Controls stacking order.',
+          category: 'container',
+          specialCategory: null,
+          sort: 26,
+        },
+        buttonType: {
+          label: 'Button Type',
+          description: 'Which onboard button to show.',
+          category: 'other',
+          specialCategory: null,
+          sort: 1,
+        },
+        skipNumber: {
+          label: 'Skip Number',
+          description: 'Slide index to skip to.',
+          category: 'other',
+          specialCategory: null,
+          sort: 2,
+        },
+        buttons_direction: {
+          label: 'Buttons Direction',
+          description: 'Direction to lay out buttons.',
+          category: 'container',
+          specialCategory: null,
+          sort: 3,
+        },
+        forIndex: {
+          label: 'For Index',
+          description: 'Show only for this slide index.',
+          category: 'other',
+          specialCategory: null,
+          sort: 4,
+        },
+        condition: {
+          label: 'Condition',
+          description: 'Built-in condition to check.',
+          category: 'other',
+          specialCategory: null,
+          sort: 6,
+        },
+        conditionVariable: {
+          label: 'Condition Variable',
+          description: 'Value used when checking the condition.',
+          category: 'other',
+          specialCategory: null,
+          sort: 7,
+        },
+      },
+    },
+    defaults: {
+      style: {
+        flexDirection: 'row',
+        position: 'relative',
+        zIndex: 1,
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        display: 'flex',
+        gap: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginVertical: '12@vs',
+        marginHorizontal: '24@s',
+      },
+    },
+    types: {},
+  },
+  {
+    schemaVersion: 2,
+    pattern: {
+      type: 'OnboardDot',
+      children: 'never',
+      attributes: {
+        scrollable: 'boolean',
+        style: {
+          flexDirection: ['row', 'column'],
+          flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
+          alignItems: [
+            'flex-start',
+            'center',
+            'flex-end',
+            'stretch',
+            'baseline',
+          ],
+          justifyContent: [
+            'flex-start',
+            'center',
+            'flex-end',
+            'space-between',
+            'space-around',
+            'space-evenly',
+          ],
+          gap: 'size',
+          padding: 'size',
+          paddingHorizontal: 'size',
+          paddingVertical: 'size',
+          paddingTop: 'size',
+          paddingBottom: 'size',
+          paddingLeft: 'size',
+          paddingRight: 'size',
+          margin: 'size',
+          marginHorizontal: 'size',
+          marginVertical: 'size',
+          marginTop: 'size',
+          marginBottom: 'size',
+          marginLeft: 'size',
+          marginRight: 'size',
+          backgroundColor: 'color',
+          borderRadius: 'size',
+          width: 'size',
+          minWidth: 'size',
+          maxWidth: 'size',
+          height: 'size',
+          minHeight: 'size',
+          maxHeight: 'size',
+          flex: 'number',
+          position: ['relative', 'absolute'],
+          top: 'size',
+          bottom: 'size',
+          left: 'size',
+          right: 'size',
+          zIndex: 'number',
+        },
+        title: 'title',
+        description: 'description',
+        dotType: [
+          'expanding_dot',
+          'normal_dot',
+          'scaling_dot',
+          'sliding_border',
+          'sliding_dot',
+          'liquid_like',
+        ],
+        dot_thickness: 'size',
+        inactive_dot_opacity: 'number',
+        inactive_dot_color: 'color',
+        active_dot_color: 'color',
+        flexDirection: 'never',
+        alignItems: 'never',
+        justifyContent: 'never',
+      },
+    },
+    meta: {
+      desiredParent: ['>OnboardProvider'],
+      label: 'Onboard Dot',
+      description: 'Renders onboarding progress dots.',
+      specialCategories: {
+        padding: {
+          label: 'Padding',
+          description: 'Uniform padding on all sides.',
+          category: 'container',
+          sort: 1,
+        },
+        margin: {
+          label: 'Margin',
+          description: 'Uniform margin on all sides.',
+          category: 'container',
+          sort: 2,
+        },
+        size: {
+          label: 'Size',
+          description: 'Fixed dimensions.',
+          category: 'container',
+          sort: 3,
+        },
+        offset: {
+          label: 'Offset',
+          description: 'Absolute positioning offsets.',
+          category: 'container',
+          sort: 4,
+        },
+      },
+      styles: {
+        backgroundColor: {
+          label: 'Background Color',
+          description: 'Background fill color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 20,
+        },
+        borderRadius: {
+          label: 'Border Radius',
+          description: 'Corner rounding amount.',
+          category: 'style',
+          specialCategory: null,
+          sort: 21,
+          preferredScale: 's',
+        },
+        dotType: {
+          label: 'Dot Type',
+          description: 'Dot animation style.',
+          category: 'style',
+          specialCategory: null,
+          sort: 1,
+        },
+        inactive_dot_opacity: {
+          label: 'Inactive Dot Opacity',
+          description: 'Opacity for inactive dots.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        inactive_dot_color: {
+          label: 'Inactive Dot Color',
+          description: 'Color of inactive dots.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        dot_thickness: {
+          label: 'Dot Thickness',
+          description: 'Dot size/diameter.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+        },
+        active_dot_color: {
+          label: 'Active Dot Color',
+          description: 'Color of the active dot.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
+        },
+      },
+      attributes: {
+        scrollable: {
+          label: 'Scrollable',
+          description: 'Turns scroll interaction on.',
+          category: 'container',
+          specialCategory: null,
+          sort: -1,
+        },
+        flexDirection: {
+          label: 'Flex Direction',
+          description: 'Sets row or column layout.',
+          category: 'container',
+          specialCategory: null,
+          sort: 4,
+        },
+        flexWrap: {
+          label: 'Flex Wrap',
+          description: 'Controls whether flex items wrap to multiple lines.',
+          category: 'container',
+          specialCategory: null,
+          sort: 4.5,
+        },
+        alignItems: {
+          label: 'Align Items',
+          description: 'Controls cross-axis alignment.',
+          category: 'container',
+          specialCategory: null,
+          sort: 3,
+        },
+        justifyContent: {
+          label: 'Justify Content',
+          description: 'Controls main-axis alignment.',
+          category: 'container',
+          specialCategory: null,
+          sort: 5,
+        },
+        gap: {
+          label: 'Gap',
+          description: 'Space between children.',
+          category: 'container',
+          specialCategory: null,
+          sort: 10,
+          preferredScale: 's',
+        },
+        padding: {
+          label: 'Padding',
+          description: 'Uniform padding on all sides.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 6,
+          preferredScale: 's',
+        },
+        paddingHorizontal: {
+          label: 'Padding Horizontal',
+          description: 'Left and right padding.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 7,
+          preferredScale: 's',
+        },
+        paddingVertical: {
+          label: 'Padding Vertical',
+          description: 'Top and bottom padding.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 8,
+          preferredScale: 'vs',
+        },
+        paddingTop: {
+          label: 'Padding Top',
+          description: 'Top padding only.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 9,
+          preferredScale: 'vs',
+        },
+        paddingBottom: {
+          label: 'Padding Bottom',
+          description: 'Bottom padding only.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 10,
+          preferredScale: 'vs',
+        },
+        paddingLeft: {
+          label: 'Padding Left',
+          description: 'Left padding only.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 11,
+          preferredScale: 's',
+        },
+        paddingRight: {
+          label: 'Padding Right',
+          description: 'Right padding only.',
+          category: 'container',
+          specialCategory: 'padding',
+          sort: 12,
+          preferredScale: 's',
+        },
+        margin: {
+          label: 'Margin',
+          description: 'Uniform margin on all sides.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 13,
+          preferredScale: 's',
+        },
+        marginHorizontal: {
+          label: 'Margin Horizontal',
+          description: 'Left and right margin.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 14,
+          preferredScale: 's',
+        },
+        marginVertical: {
+          label: 'Margin Vertical',
+          description: 'Top and bottom margin.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 15,
+          preferredScale: 'vs',
+        },
+        marginTop: {
+          label: 'Margin Top',
+          description: 'Top margin only.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 16,
+          preferredScale: 'vs',
+        },
+        marginBottom: {
+          label: 'Margin Bottom',
+          description: 'Bottom margin only.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 17,
+          preferredScale: 'vs',
+        },
+        marginLeft: {
+          label: 'Margin Left',
+          description: 'Left margin only.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 18,
+          preferredScale: 's',
+        },
+        marginRight: {
+          label: 'Margin Right',
+          description: 'Right margin only.',
+          category: 'container',
+          specialCategory: 'margin',
+          sort: 19,
+          preferredScale: 's',
+        },
+        width: {
+          label: 'Width',
+          description: 'Fixed width value.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 0,
+          preferredScale: 's',
+        },
+        minWidth: {
+          label: 'Min Width',
+          description: 'Minimum width constraint.',
+          category: 'container',
+          specialCategory: 'size',
           sort: 1,
+          preferredScale: 's',
         },
-        inactive_dot_opacity: {
-          label: 'Inactive Dot Opacity',
-          description: 'Opacity for inactive dots.',
+        maxWidth: {
+          label: 'Max Width',
+          description: 'Maximum width constraint.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 2,
+          preferredScale: 's',
+        },
+        height: {
+          label: 'Height',
+          description: 'Fixed height value.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 3,
+          preferredScale: 'vs',
+        },
+        minHeight: {
+          label: 'Min Height',
+          description: 'Minimum height constraint.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 4,
+          preferredScale: 'vs',
+        },
+        maxHeight: {
+          label: 'Max Height',
+          description: 'Maximum height constraint.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 5,
+          preferredScale: 'vs',
+        },
+        flex: {
+          label: 'Flex',
+          description: 'Flex grow factor (e.g. 1 fills available space).',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 6,
+        },
+        position: {
+          label: 'Position',
+          description: 'Sets layout positioning mode.',
+          category: 'container',
+          specialCategory: null,
+          sort: 3,
+        },
+        top: {
+          label: 'Top',
+          description: 'Offset from the top edge.',
+          category: 'container',
+          specialCategory: 'offset',
+          sort: 22,
+          preferredScale: 'vs',
+        },
+        bottom: {
+          label: 'Bottom',
+          description: 'Offset from the bottom edge.',
+          category: 'container',
+          specialCategory: 'offset',
+          sort: 23,
+          preferredScale: 'vs',
+        },
+        left: {
+          label: 'Left',
+          description: 'Offset from the left edge.',
+          category: 'container',
+          specialCategory: 'offset',
+          sort: 24,
+          preferredScale: 's',
+        },
+        right: {
+          label: 'Right',
+          description: 'Offset from the right edge.',
+          category: 'container',
+          specialCategory: 'offset',
+          sort: 25,
+          preferredScale: 's',
+        },
+        zIndex: {
+          label: 'Z-Index',
+          description: 'Controls stacking order.',
+          category: 'container',
+          specialCategory: null,
+          sort: 26,
+        },
+      },
+    },
+    defaults: {
+      style: {
+        flexDirection: 'row',
+        position: 'relative',
+        zIndex: 1,
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '12@s',
+      },
+      dotType: 'expanding_dot',
+      dot_thickness: 10,
+      inactive_dot_opacity: 0.3,
+      active_dot_color: '#007AFF',
+    },
+    types: {},
+  },
+  {
+    schemaVersion: 2,
+    pattern: {
+      type: 'OnboardFooter',
+      children: 'node',
+      attributes: {
+        title: 'title',
+        description: 'description',
+        adjustsFontSizeToFit: 'boolean',
+        showEllipsis: 'boolean',
+        style: {
+          color: 'color',
+          fontSize: 'size',
+          fontFamily: 'fontFamily',
+          fontWeight: 'fontWeight',
+          textAlign: ['left', 'center', 'right', 'justify'],
+          flexDirection: ['row', 'column'],
+          flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
+          alignItems: [
+            'flex-start',
+            'center',
+            'flex-end',
+            'stretch',
+            'baseline',
+          ],
+          justifyContent: [
+            'flex-start',
+            'center',
+            'flex-end',
+            'space-between',
+            'space-around',
+            'space-evenly',
+          ],
+          gap: 'size',
+          padding: 'size',
+          paddingHorizontal: 'size',
+          paddingVertical: 'size',
+          paddingTop: 'size',
+          paddingBottom: 'size',
+          paddingLeft: 'size',
+          paddingRight: 'size',
+          margin: 'size',
+          marginHorizontal: 'size',
+          marginVertical: 'size',
+          marginTop: 'size',
+          marginBottom: 'size',
+          marginLeft: 'size',
+          marginRight: 'size',
+          backgroundColor: 'color',
+          borderRadius: 'size',
+          width: 'size',
+          minWidth: 'size',
+          maxWidth: 'size',
+          height: 'size',
+          minHeight: 'size',
+          maxHeight: 'size',
+          flex: 'number',
+          position: ['relative', 'absolute'],
+          top: 'size',
+          bottom: 'size',
+          left: 'size',
+          right: 'size',
+          zIndex: 'number',
+        },
+        scrollable: 'boolean',
+        textLocalizationKey: 'string',
+        linkedWordFirstLocalizationKey: 'string',
+        linkedWordFirstColor: 'color',
+        linkedWordFirstPage: 'string',
+        linkedWordSecondLocalizationKey: 'string',
+        linkedWordSecondColor: 'color',
+        linkedWordSecondPage: 'string',
+      },
+      defaults: {
+        style: {
+          color: 'THEME_COLORS.TEXT',
+          fontSize: '16@fs',
+          fontWeight: '400',
+        },
+      },
+    },
+    meta: {
+      desiredParent: ['>OnboardItem'],
+      label: 'Onboard Footer',
+      description: 'Footer text with optional links.',
+      styles: {
+        color: {
+          label: 'Color',
+          description: 'Text color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 1,
+        },
+        fontSize: {
+          label: 'Font Size',
+          description: 'Text size.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+          preferredScale: 's',
+        },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
           category: 'style',
           specialCategory: null,
           sort: 3,
         },
-        inactive_dot_color: {
-          label: 'Inactive Dot Color',
-          description: 'Color of inactive dots.',
+        fontWeight: {
+          label: 'Font Weight',
+          description: 'Text weight.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        textAlign: {
+          label: 'Text Align',
+          description: 'Text alignment.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
+        },
+        backgroundColor: {
+          label: 'Background Color',
+          description: 'Background fill color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 20,
+        },
+        borderRadius: {
+          label: 'Border Radius',
+          description: 'Corner rounding amount.',
           category: 'style',
           specialCategory: null,
-          sort: 4,
+          sort: 21,
+          preferredScale: 's',
         },
-        dot_thickness: {
-          label: 'Dot Thickness',
-          description: 'Dot size/diameter.',
+        linkedWordFirstColor: {
+          label: 'Linked Word First Color',
+          description: 'Color of the first linked word.',
           category: 'style',
           specialCategory: null,
-          sort: 2,
+          sort: 3,
         },
-        active_dot_color: {
-          label: 'Active Dot Color',
-          description: 'Color of the active dot.',
+        linkedWordSecondColor: {
+          label: 'Linked Word Second Color',
+          description: 'Color of the second linked word.',
           category: 'style',
           specialCategory: null,
-          sort: 5,
+          sort: 6,
         },
       },
       attributes: {
+        adjustsFontSizeToFit: {
+          label: 'Adjust Font Size To Fit',
+          description:
+            'Automatically reduces font size to fit the available space.',
+          category: 'other',
+          specialCategory: null,
+          sort: 1,
+        },
+        showEllipsis: {
+          label: 'Show Ellipsis',
+          description:
+            'If text overflows, show ellipsis (…); applied as single-line truncation.',
+          category: 'other',
+          specialCategory: null,
+          sort: 2,
+        },
         scrollable: {
           label: 'Scrollable',
           description: 'Turns scroll interaction on.',
@@ -6595,43 +7445,100 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
+        textLocalizationKey: {
+          label: 'Text Localization Key',
+          description: 'Localization key for the footer text.',
+          category: 'other',
+          specialCategory: null,
+          sort: 1,
+        },
+        linkedWordFirstLocalizationKey: {
+          label: 'Linked Word First Localization Key',
+          description: 'Key for the first linked word.',
+          category: 'other',
+          specialCategory: null,
+          sort: 2,
+        },
+        linkedWordFirstPage: {
+          label: 'Linked Word First Page',
+          description: 'Page opened by the first link.',
+          category: 'other',
+          specialCategory: null,
+          sort: 4,
+        },
+        linkedWordSecondLocalizationKey: {
+          label: 'Linked Word Second Localization Key',
+          description: 'Key for the second linked word.',
+          category: 'other',
+          specialCategory: null,
+          sort: 5,
+        },
+        linkedWordSecondPage: {
+          label: 'Linked Word Second Page',
+          description: 'Page opened by the second link.',
+          category: 'other',
+          specialCategory: null,
+          sort: 7,
+        },
+      },
+      specialCategories: {
+        padding: {
+          label: 'Padding',
+          description: 'Uniform padding on all sides.',
+          category: 'container',
+          sort: 1,
+        },
+        margin: {
+          label: 'Margin',
+          description: 'Uniform margin on all sides.',
+          category: 'container',
+          sort: 2,
+        },
+        size: {
+          label: 'Size',
+          description: 'Fixed dimensions.',
+          category: 'container',
+          sort: 3,
+        },
+        offset: {
+          label: 'Offset',
+          description: 'Absolute positioning offsets.',
+          category: 'container',
+          sort: 4,
+        },
       },
     },
     defaults: {
       style: {
+        color: 'THEME_COLORS.TEXT',
+        fontSize: '16@fs',
+        fontWeight: '400',
         flexDirection: 'row',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        flexWrap: 'wrap',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: '12@s',
+        textAlign: 'center',
+        paddingHorizontal: '24@s',
       },
-      dotType: 'expanding_dot',
-      dot_thickness: 10,
-      inactive_dot_opacity: 0.3,
-      active_dot_color: '#007AFF',
     },
     types: {},
   },
   {
     schemaVersion: 2,
     pattern: {
-      type: 'OnboardFooter',
+      type: 'OnboardImage',
       children: 'node',
       attributes: {
         title: 'title',
         description: 'description',
-        adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        src: 'string',
         style: {
-          color: 'color',
-          fontSize: 'size',
-          fontFamily: 'fontFamily',
-          fontWeight: 'fontWeight',
-          textAlign: ['left', 'center', 'right', 'justify'],
+          resizeMode: ['cover', 'contain', 'stretch', 'center'],
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -6681,73 +7588,46 @@ export const patterns = [
           zIndex: 'number',
         },
         scrollable: 'boolean',
-        textLocalizationKey: 'string',
-        linkedWordFirstLocalizationKey: 'string',
-        linkedWordFirstColor: 'color',
-        linkedWordFirstPage: 'string',
-        linkedWordSecondLocalizationKey: 'string',
-        linkedWordSecondColor: 'color',
-        linkedWordSecondPage: 'string',
+        video_url: 'string',
+        lottie: 'string',
       },
+      defaults: { resizeMode: 'contain' },
     },
     meta: {
-      desiredParent: ['>OnboardItem'],
-      label: 'Onboard Footer',
-      description: 'Footer text with optional links.',
-      attributes: {
-        styles: {
-          color: {
-            label: 'Color',
-            description: 'Text color.',
-            category: 'style',
-            specialCategory: null,
-            sort: 1,
-          },
-          fontSize: {
-            label: 'Font Size',
-            description: 'Text size.',
-            category: 'style',
-            specialCategory: null,
-            sort: 2,
-            preferredScale: 's',
-          },
-          fontFamily: {
-            label: 'Font Family',
-            description: 'Font family used for the text.',
-            category: 'style',
-            specialCategory: null,
-            sort: 3,
-          },
-          fontWeight: {
-            label: 'Font Weight',
-            description: 'Text weight.',
-            category: 'style',
-            specialCategory: null,
-            sort: 4,
-          },
-          textAlign: {
-            label: 'Text Align',
-            description: 'Text alignment.',
-            category: 'style',
-            specialCategory: null,
-            sort: 5,
-          },
+      desiredParent: ['>OnboardProvider', '>OnboardItem', '!=Onboard'],
+      label: 'Onboard Image',
+      description: 'Onboarding hero image with media.',
+      styles: {
+        resizeMode: {
+          label: 'Resize Mode',
+          description: 'How the image fits the frame.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
         },
-        adjustsFontSizeToFit: {
-          label: 'Adjust Font Size To Fit',
-          description:
-            'Automatically reduces font size to fit the available space.',
-          category: 'other',
+        backgroundColor: {
+          label: 'Background Color',
+          description: 'Background fill color.',
+          category: 'style',
           specialCategory: null,
-          sort: 1,
+          sort: 20,
         },
-        showEllipsis: {
-          label: 'Show Ellipsis',
-          description:
-            'If text overflows, show ellipsis (…); applied as single-line truncation.',
+        borderRadius: {
+          label: 'Border Radius',
+          description: 'Corner rounding amount.',
+          category: 'style',
+          specialCategory: null,
+          sort: 21,
+          preferredScale: 's',
+        },
+      },
+      attributes: {
+        src: {
+          label: 'Src',
+          description: 'Image source URL.',
           category: 'other',
           specialCategory: null,
-          sort: 2,
+          sort: 1,
         },
         scrollable: {
           label: 'Scrollable',
@@ -7005,41 +7885,20 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        textLocalizationKey: {
-          label: 'Text Localization Key',
-          description: 'Localization key for the footer text.',
+        video_url: {
+          label: 'Video Url',
+          description: 'URL for the onboarding video.',
           category: 'other',
           specialCategory: null,
           sort: 1,
         },
-        linkedWordFirstLocalizationKey: {
-          label: 'Linked Word First Localization Key',
-          description: 'Key for the first linked word.',
+        lottie: {
+          label: 'Lottie',
+          description: 'Path to the lottie animation.',
           category: 'other',
           specialCategory: null,
           sort: 2,
         },
-        linkedWordFirstPage: {
-          label: 'Linked Word First Page',
-          description: 'Page opened by the first link.',
-          category: 'other',
-          specialCategory: null,
-          sort: 4,
-        },
-        linkedWordSecondLocalizationKey: {
-          label: 'Linked Word Second Localization Key',
-          description: 'Key for the second linked word.',
-          category: 'other',
-          specialCategory: null,
-          sort: 5,
-        },
-        linkedWordSecondPage: {
-          label: 'Linked Word Second Page',
-          description: 'Page opened by the second link.',
-          category: 'other',
-          specialCategory: null,
-          sort: 7,
-        },
       },
       specialCategories: {
         padding: {
@@ -7067,51 +7926,16 @@ export const patterns = [
           sort: 4,
         },
       },
-      styles: {
-        backgroundColor: {
-          label: 'Background Color',
-          description: 'Background fill color.',
-          category: 'style',
-          specialCategory: null,
-          sort: 20,
-        },
-        borderRadius: {
-          label: 'Border Radius',
-          description: 'Corner rounding amount.',
-          category: 'style',
-          specialCategory: null,
-          sort: 21,
-          preferredScale: 's',
-        },
-        linkedWordFirstColor: {
-          label: 'Linked Word First Color',
-          description: 'Color of the first linked word.',
-          category: 'style',
-          specialCategory: null,
-          sort: 3,
-        },
-        linkedWordSecondColor: {
-          label: 'Linked Word Second Color',
-          description: 'Color of the second linked word.',
-          category: 'style',
-          specialCategory: null,
-          sort: 6,
-        },
-      },
     },
     defaults: {
+      resizeMode: 'contain',
       style: {
-        flexDirection: 'row',
+        flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        justifyContent: 'center',
-        textAlign: 'center',
-        paddingHorizontal: '24@s',
       },
     },
     types: {},
@@ -7119,15 +7943,9 @@ export const patterns = [
   {
     schemaVersion: 2,
     pattern: {
-      type: 'OnboardImage',
+      type: 'OnboardItem',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
-        src: 'string',
-        width: 'size',
-        height: 'size',
-        resizeMode: ['cover', 'contain', 'stretch', 'center'],
         scrollable: 'boolean',
         style: {
           flexDirection: ['row', 'column'],
@@ -7178,14 +7996,44 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        video_url: 'string',
-        lottie: 'string',
+        title: 'title',
+        description: 'description',
+        display: ['flex', 'block'],
+        gap: 'size',
+        flexDirection: ['row', 'column'],
+        paddingHorizontal: 'size',
       },
     },
     meta: {
-      desiredParent: ['>OnboardProvider', '>OnboardItem', '!=Onboard'],
-      label: 'Onboard Image',
-      description: 'Onboarding hero image with media.',
+      desiredParent: ['=Onboard'],
+      label: 'Onboard Item',
+      description: 'Single onboarding screen section.',
+      specialCategories: {
+        padding: {
+          label: 'Padding',
+          description: 'Uniform padding on all sides.',
+          category: 'container',
+          sort: 1,
+        },
+        margin: {
+          label: 'Margin',
+          description: 'Uniform margin on all sides.',
+          category: 'container',
+          sort: 2,
+        },
+        size: {
+          label: 'Size',
+          description: 'Fixed dimensions.',
+          category: 'container',
+          sort: 3,
+        },
+        offset: {
+          label: 'Offset',
+          description: 'Absolute positioning offsets.',
+          category: 'container',
+          sort: 4,
+        },
+      },
       styles: {
         backgroundColor: {
           label: 'Background Color',
@@ -7204,36 +8052,6 @@ export const patterns = [
         },
       },
       attributes: {
-        src: {
-          label: 'Src',
-          description: 'Image source URL.',
-          category: 'other',
-          specialCategory: null,
-          sort: 1,
-        },
-        width: {
-          label: 'Width',
-          description: 'Fixed width value.',
-          category: 'container',
-          specialCategory: 'size',
-          sort: 0,
-          preferredScale: 's',
-        },
-        height: {
-          label: 'Height',
-          description: 'Fixed height value.',
-          category: 'container',
-          specialCategory: 'size',
-          sort: 3,
-          preferredScale: 'vs',
-        },
-        resizeMode: {
-          label: 'Resize Mode',
-          description: 'How the image fits the frame.',
-          category: 'other',
-          specialCategory: null,
-          sort: 4,
-        },
         scrollable: {
           label: 'Scrollable',
           description: 'Turns scroll interaction on.',
@@ -7243,10 +8061,10 @@ export const patterns = [
         },
         flexDirection: {
           label: 'Flex Direction',
-          description: 'Sets row or column layout.',
+          description: 'Order of child stacking.',
           category: 'container',
           specialCategory: null,
-          sort: 4,
+          sort: 3,
         },
         flexWrap: {
           label: 'Flex Wrap',
@@ -7271,11 +8089,10 @@ export const patterns = [
         },
         gap: {
           label: 'Gap',
-          description: 'Space between children.',
+          description: 'Space between child blocks.',
           category: 'container',
           specialCategory: null,
-          sort: 10,
-          preferredScale: 's',
+          sort: 2,
         },
         padding: {
           label: 'Padding',
@@ -7290,8 +8107,7 @@ export const patterns = [
           description: 'Left and right padding.',
           category: 'container',
           specialCategory: 'padding',
-          sort: 7,
-          preferredScale: 's',
+          sort: 4,
         },
         paddingVertical: {
           label: 'Padding Vertical',
@@ -7389,6 +8205,14 @@ export const patterns = [
           sort: 19,
           preferredScale: 's',
         },
+        width: {
+          label: 'Width',
+          description: 'Fixed width value.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 0,
+          preferredScale: 's',
+        },
         minWidth: {
           label: 'Min Width',
           description: 'Minimum width constraint.',
@@ -7405,6 +8229,14 @@ export const patterns = [
           sort: 2,
           preferredScale: 's',
         },
+        height: {
+          label: 'Height',
+          description: 'Fixed height value.',
+          category: 'container',
+          specialCategory: 'size',
+          sort: 3,
+          preferredScale: 'vs',
+        },
         minHeight: {
           label: 'Min Height',
           description: 'Minimum height constraint.',
@@ -7474,46 +8306,13 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        video_url: {
-          label: 'Video Url',
-          description: 'URL for the onboarding video.',
-          category: 'other',
-          specialCategory: null,
-          sort: 1,
-        },
-        lottie: {
-          label: 'Lottie',
-          description: 'Path to the lottie animation.',
-          category: 'other',
-          specialCategory: null,
-          sort: 2,
-        },
-      },
-      specialCategories: {
-        padding: {
-          label: 'Padding',
-          description: 'Uniform padding on all sides.',
+        display: {
+          label: 'Display',
+          description: 'Controls layout display mode.',
           category: 'container',
+          specialCategory: null,
           sort: 1,
         },
-        margin: {
-          label: 'Margin',
-          description: 'Uniform margin on all sides.',
-          category: 'container',
-          sort: 2,
-        },
-        size: {
-          label: 'Size',
-          description: 'Fixed dimensions.',
-          category: 'container',
-          sort: 3,
-        },
-        offset: {
-          label: 'Offset',
-          description: 'Absolute positioning offsets.',
-          category: 'container',
-          sort: 4,
-        },
       },
     },
     defaults: {
@@ -7524,14 +8323,17 @@ export const patterns = [
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        gap: '16@vs',
+        paddingHorizontal: '24@s',
       },
+      display: 'flex',
     },
     types: {},
   },
   {
     schemaVersion: 2,
     pattern: {
-      type: 'OnboardItem',
+      type: 'OnboardProvider',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -7586,16 +8388,14 @@ export const patterns = [
         },
         title: 'title',
         description: 'description',
-        display: ['flex', 'block'],
-        gap: 'size',
-        flexDirection: ['row', 'column'],
-        paddingHorizontal: 'size',
+        theme: ['light', 'dark', 'all'],
+        borderRadius: 'never',
       },
     },
     meta: {
-      desiredParent: ['=Onboard'],
-      label: 'Onboard Item',
-      description: 'Single onboarding screen section.',
+      desiredParent: ['root'],
+      label: 'Onboard Provider',
+      description: 'Provides shared settings for onboarding.',
       specialCategories: {
         padding: {
           label: 'Padding',
@@ -7649,10 +8449,10 @@ export const patterns = [
         },
         flexDirection: {
           label: 'Flex Direction',
-          description: 'Order of child stacking.',
+          description: 'Sets row or column layout.',
           category: 'container',
           specialCategory: null,
-          sort: 3,
+          sort: 4,
         },
         flexWrap: {
           label: 'Flex Wrap',
@@ -7677,10 +8477,11 @@ export const patterns = [
         },
         gap: {
           label: 'Gap',
-          description: 'Space between child blocks.',
+          description: 'Space between children.',
           category: 'container',
           specialCategory: null,
-          sort: 2,
+          sort: 10,
+          preferredScale: 's',
         },
         padding: {
           label: 'Padding',
@@ -7695,7 +8496,8 @@ export const patterns = [
           description: 'Left and right padding.',
           category: 'container',
           specialCategory: 'padding',
-          sort: 4,
+          sort: 7,
+          preferredScale: 's',
         },
         paddingVertical: {
           label: 'Padding Vertical',
@@ -7707,35 +8509,31 @@ export const patterns = [
         },
         paddingTop: {
           label: 'Padding Top',
-          description: 'Top padding only.',
+          description: 'Top padding for the provider.',
           category: 'container',
           specialCategory: 'padding',
-          sort: 9,
-          preferredScale: 'vs',
+          sort: 1,
         },
         paddingBottom: {
           label: 'Padding Bottom',
-          description: 'Bottom padding only.',
+          description: 'Bottom padding for the provider.',
           category: 'container',
           specialCategory: 'padding',
-          sort: 10,
-          preferredScale: 'vs',
+          sort: 3,
         },
         paddingLeft: {
           label: 'Padding Left',
-          description: 'Left padding only.',
+          description: 'Left padding for the provider.',
           category: 'container',
           specialCategory: 'padding',
-          sort: 11,
-          preferredScale: 's',
+          sort: 4,
         },
         paddingRight: {
           label: 'Padding Right',
-          description: 'Right padding only.',
+          description: 'Right padding for the provider.',
           category: 'container',
           specialCategory: 'padding',
-          sort: 12,
-          preferredScale: 's',
+          sort: 2,
         },
         margin: {
           label: 'Margin',
@@ -7894,12 +8692,13 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        display: {
-          label: 'Display',
-          description: 'Controls layout display mode.',
-          category: 'container',
+        theme: {
+          label: 'Theme',
+          description:
+            'Controls which app theme(s) this onboarding is intended for.',
+          category: 'other',
           specialCategory: null,
-          sort: 1,
+          sort: -10,
         },
       },
     },
@@ -7911,21 +8710,28 @@ export const patterns = [
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        gap: '16@vs',
-        paddingHorizontal: '24@s',
+        width: '100%',
+        height: '100%',
       },
-      display: 'flex',
     },
     types: {},
   },
   {
     schemaVersion: 2,
     pattern: {
-      type: 'OnboardProvider',
-      children: 'node',
+      type: 'OnboardSubtitle',
+      children: 'string',
       attributes: {
-        scrollable: 'boolean',
+        title: 'title',
+        description: 'description',
+        adjustsFontSizeToFit: 'boolean',
+        showEllipsis: 'boolean',
         style: {
+          color: 'color',
+          fontSize: 'size',
+          fontFamily: 'fontFamily',
+          fontWeight: 'fontWeight',
+          textAlign: ['left', 'center', 'right', 'justify'],
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -7974,43 +8780,57 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
-        theme: ['light', 'dark', 'all'],
-        borderRadius: 'never',
+        scrollable: 'boolean',
+      },
+      defaults: {
+        style: {
+          color: 'THEME_COLORS.TEXT',
+          fontSize: '16@fs',
+          fontWeight: '400',
+        },
       },
     },
     meta: {
-      desiredParent: ['root'],
-      label: 'Onboard Provider',
-      description: 'Provides shared settings for onboarding.',
-      specialCategories: {
-        padding: {
-          label: 'Padding',
-          description: 'Uniform padding on all sides.',
-          category: 'container',
+      desiredParent: ['>OnboardProvider', '>OnboardItem'],
+      label: 'Onboard Subtitle',
+      description: 'Subtitle text for an onboarding step.',
+      styles: {
+        color: {
+          label: 'Color',
+          description: 'Text color.',
+          category: 'style',
+          specialCategory: null,
           sort: 1,
         },
-        margin: {
-          label: 'Margin',
-          description: 'Uniform margin on all sides.',
-          category: 'container',
+        fontSize: {
+          label: 'Font Size',
+          description: 'Text size.',
+          category: 'style',
+          specialCategory: null,
           sort: 2,
+          preferredScale: 's',
         },
-        size: {
-          label: 'Size',
-          description: 'Fixed dimensions.',
-          category: 'container',
-          sort: 3,
-        },
-        offset: {
-          label: 'Offset',
-          description: 'Absolute positioning offsets.',
-          category: 'container',
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        fontWeight: {
+          label: 'Font Weight',
+          description: 'Text weight.',
+          category: 'style',
+          specialCategory: null,
           sort: 4,
         },
-      },
-      styles: {
+        textAlign: {
+          label: 'Text Align',
+          description: 'Text alignment.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
+        },
         backgroundColor: {
           label: 'Background Color',
           description: 'Background fill color.',
@@ -8028,6 +8848,22 @@ export const patterns = [
         },
       },
       attributes: {
+        adjustsFontSizeToFit: {
+          label: 'Adjust Font Size To Fit',
+          description:
+            'Automatically reduces font size to fit the available space.',
+          category: 'other',
+          specialCategory: null,
+          sort: 1,
+        },
+        showEllipsis: {
+          label: 'Show Ellipsis',
+          description:
+            'If text overflows, show ellipsis (…); applied as single-line truncation.',
+          category: 'other',
+          specialCategory: null,
+          sort: 2,
+        },
         scrollable: {
           label: 'Scrollable',
           description: 'Turns scroll interaction on.',
@@ -8097,31 +8933,35 @@ export const patterns = [
         },
         paddingTop: {
           label: 'Padding Top',
-          description: 'Top padding for the provider.',
+          description: 'Top padding only.',
           category: 'container',
           specialCategory: 'padding',
-          sort: 1,
+          sort: 9,
+          preferredScale: 'vs',
         },
         paddingBottom: {
           label: 'Padding Bottom',
-          description: 'Bottom padding for the provider.',
+          description: 'Bottom padding only.',
           category: 'container',
           specialCategory: 'padding',
-          sort: 3,
+          sort: 10,
+          preferredScale: 'vs',
         },
         paddingLeft: {
           label: 'Padding Left',
-          description: 'Left padding for the provider.',
+          description: 'Left padding only.',
           category: 'container',
           specialCategory: 'padding',
-          sort: 4,
+          sort: 11,
+          preferredScale: 's',
         },
         paddingRight: {
           label: 'Padding Right',
-          description: 'Right padding for the provider.',
+          description: 'Right padding only.',
           category: 'container',
           specialCategory: 'padding',
-          sort: 2,
+          sort: 12,
+          preferredScale: 's',
         },
         margin: {
           label: 'Margin',
@@ -8280,26 +9120,45 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        theme: {
-          label: 'Theme',
-          description:
-            'Controls which app theme(s) this onboarding is intended for.',
-          category: 'other',
-          specialCategory: null,
-          sort: -10,
+      },
+      specialCategories: {
+        padding: {
+          label: 'Padding',
+          description: 'Uniform padding on all sides.',
+          category: 'container',
+          sort: 1,
+        },
+        margin: {
+          label: 'Margin',
+          description: 'Uniform margin on all sides.',
+          category: 'container',
+          sort: 2,
+        },
+        size: {
+          label: 'Size',
+          description: 'Fixed dimensions.',
+          category: 'container',
+          sort: 3,
+        },
+        offset: {
+          label: 'Offset',
+          description: 'Absolute positioning offsets.',
+          category: 'container',
+          sort: 4,
         },
       },
     },
     defaults: {
       style: {
+        color: 'THEME_COLORS.TEXT',
+        fontSize: '14@fs',
+        fontWeight: '600',
         flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        width: '100%',
-        height: '100%',
       },
     },
     types: {},
@@ -8307,7 +9166,7 @@ export const patterns = [
   {
     schemaVersion: 2,
     pattern: {
-      type: 'OnboardSubtitle',
+      type: 'OnboardTitle',
       children: 'string',
       attributes: {
         title: 'title',
@@ -8370,50 +9229,72 @@ export const patterns = [
         },
         scrollable: 'boolean',
       },
+      defaults: {
+        style: {
+          color: 'THEME_COLORS.TEXT',
+          fontSize: '16@fs',
+          fontWeight: '400',
+        },
+      },
     },
     meta: {
-      desiredParent: ['>OnboardProvider', '>OnboardItem'],
-      label: 'Onboard Subtitle',
-      description: 'Subtitle text for an onboarding step.',
-      attributes: {
-        styles: {
-          color: {
-            label: 'Color',
-            description: 'Text color.',
-            category: 'style',
-            specialCategory: null,
-            sort: 1,
-          },
-          fontSize: {
-            label: 'Font Size',
-            description: 'Text size.',
-            category: 'style',
-            specialCategory: null,
-            sort: 2,
-            preferredScale: 's',
-          },
-          fontFamily: {
-            label: 'Font Family',
-            description: 'Font family used for the text.',
-            category: 'style',
-            specialCategory: null,
-            sort: 3,
-          },
-          fontWeight: {
-            label: 'Font Weight',
-            description: 'Text weight.',
-            category: 'style',
-            specialCategory: null,
-            sort: 4,
-          },
-          textAlign: {
-            label: 'Text Align',
-            description: 'Text alignment.',
-            category: 'style',
-            specialCategory: null,
-            sort: 5,
-          },
+      desiredParent: ['>OnboardItem', '>OnboardProvider'],
+      label: 'Onboard Title',
+      description: 'Title text for an onboarding step.',
+      styles: {
+        color: {
+          label: 'Color',
+          description: 'Text color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 1,
+        },
+        fontSize: {
+          label: 'Font Size',
+          description: 'Text size.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+          preferredScale: 's',
+        },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        fontWeight: {
+          label: 'Font Weight',
+          description: 'Text weight.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        textAlign: {
+          label: 'Text Align',
+          description: 'Text alignment.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
+        },
+        backgroundColor: {
+          label: 'Background Color',
+          description: 'Background fill color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 20,
+        },
+        borderRadius: {
+          label: 'Border Radius',
+          description: 'Corner rounding amount.',
+          category: 'style',
+          specialCategory: null,
+          sort: 21,
+          preferredScale: 's',
         },
+      },
+      attributes: {
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
           description:
@@ -8713,34 +9594,19 @@ export const patterns = [
           sort: 4,
         },
       },
-      styles: {
-        backgroundColor: {
-          label: 'Background Color',
-          description: 'Background fill color.',
-          category: 'style',
-          specialCategory: null,
-          sort: 20,
-        },
-        borderRadius: {
-          label: 'Border Radius',
-          description: 'Corner rounding amount.',
-          category: 'style',
-          specialCategory: null,
-          sort: 21,
-          preferredScale: 's',
-        },
-      },
     },
     defaults: {
       style: {
+        color: 'THEME_COLORS.TEXT',
+        fontSize: '24@fs',
+        fontWeight: '700',
         flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        fontSize: '14@fs',
-        fontWeight: '600',
+        textAlign: 'center',
       },
     },
     types: {},
@@ -8748,19 +9614,15 @@ export const patterns = [
   {
     schemaVersion: 2,
     pattern: {
-      type: 'OnboardTitle',
-      children: 'string',
+      type: 'PaywallBackground',
+      children: 'never',
       attributes: {
         title: 'title',
         description: 'description',
-        adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        src: 'string',
+        resizeMode: ['cover', 'contain', 'stretch', 'center'],
+        scrollable: 'boolean',
         style: {
-          color: 'color',
-          fontSize: 'size',
-          fontFamily: 'fontFamily',
-          fontWeight: 'fontWeight',
-          textAlign: ['left', 'center', 'right', 'justify'],
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -8809,67 +9671,55 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        scrollable: 'boolean',
+      },
+      defaults: {
+        resizeMode: 'cover',
+        style: {
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        },
       },
     },
     meta: {
-      desiredParent: ['>OnboardItem', '>OnboardProvider'],
-      label: 'Onboard Title',
-      description: 'Title text for an onboarding step.',
-      attributes: {
-        styles: {
-          color: {
-            label: 'Color',
-            description: 'Text color.',
-            category: 'style',
-            specialCategory: null,
-            sort: 1,
-          },
-          fontSize: {
-            label: 'Font Size',
-            description: 'Text size.',
-            category: 'style',
-            specialCategory: null,
-            sort: 2,
-            preferredScale: 's',
-          },
-          fontFamily: {
-            label: 'Font Family',
-            description: 'Font family used for the text.',
-            category: 'style',
-            specialCategory: null,
-            sort: 3,
-          },
-          fontWeight: {
-            label: 'Font Weight',
-            description: 'Text weight.',
-            category: 'style',
-            specialCategory: null,
-            sort: 4,
-          },
-          textAlign: {
-            label: 'Text Align',
-            description: 'Text alignment.',
-            category: 'style',
-            specialCategory: null,
-            sort: 5,
-          },
+      desiredParent: ['>PaywallProvider'],
+      label: 'Paywall Background',
+      description: 'Paywall Background component.',
+      styles: {
+        resizeMode: {
+          label: 'Resize Mode',
+          description: 'How the image fits its container.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
         },
-        adjustsFontSizeToFit: {
-          label: 'Adjust Font Size To Fit',
-          description:
-            'Automatically reduces font size to fit the available space.',
-          category: 'other',
+        backgroundColor: {
+          label: 'Background Color',
+          description: 'Background fill color.',
+          category: 'style',
           specialCategory: null,
-          sort: 1,
+          sort: 20,
         },
-        showEllipsis: {
-          label: 'Show Ellipsis',
-          description:
-            'If text overflows, show ellipsis (…); applied as single-line truncation.',
+        borderRadius: {
+          label: 'Border Radius',
+          description: 'Corner rounding amount.',
+          category: 'style',
+          specialCategory: null,
+          sort: 21,
+          preferredScale: 's',
+        },
+      },
+      attributes: {
+        src: {
+          label: 'Src',
+          description: 'Image source URL.',
           category: 'other',
           specialCategory: null,
-          sort: 2,
+          sort: 1,
         },
         scrollable: {
           label: 'Scrollable',
@@ -9154,35 +10004,22 @@ export const patterns = [
           sort: 4,
         },
       },
-      styles: {
-        backgroundColor: {
-          label: 'Background Color',
-          description: 'Background fill color.',
-          category: 'style',
-          specialCategory: null,
-          sort: 20,
-        },
-        borderRadius: {
-          label: 'Border Radius',
-          description: 'Corner rounding amount.',
-          category: 'style',
-          specialCategory: null,
-          sort: 21,
-          preferredScale: 's',
-        },
-      },
     },
     defaults: {
+      resizeMode: 'cover',
       style: {
-        flexDirection: 'column',
-        position: 'relative',
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
         zIndex: 1,
+        flexDirection: 'column',
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        fontSize: '24@fs',
-        fontWeight: '700',
-        textAlign: 'center',
       },
     },
     types: {},
@@ -9190,15 +10027,22 @@ export const patterns = [
   {
     schemaVersion: 2,
     pattern: {
-      type: 'PaywallBackground',
+      type: 'PaywallCloseButton',
       children: 'never',
       attributes: {
         title: 'title',
         description: 'description',
-        src: 'string',
-        resizeMode: ['cover', 'contain', 'stretch', 'center'],
-        scrollable: 'boolean',
+        iconType: 'iconType',
+        size: 'number',
+        strokeWidth: 'number',
+        adjustsFontSizeToFit: 'boolean',
+        showEllipsis: 'boolean',
         style: {
+          color: 'color',
+          fontSize: 'size',
+          fontFamily: 'fontFamily',
+          fontWeight: 'fontWeight',
+          textAlign: ['left', 'center', 'right', 'justify'],
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -9247,39 +10091,57 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
+        scrollable: 'boolean',
       },
       defaults: {
-        resizeMode: 'cover',
         style: {
-          width: '100%',
-          height: '100%',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
+          color: 'THEME_COLORS.TEXT',
+          fontSize: '16@fs',
+          fontWeight: '400',
         },
       },
     },
     meta: {
       desiredParent: ['>PaywallProvider'],
-      label: 'Paywall Background',
-      description: 'Paywall Background component.',
-      src: {
-        label: 'Src',
-        description: 'Image source URL.',
-        category: 'other',
-        specialCategory: null,
-        sort: 1,
-      },
+      label: 'Paywall Close Button',
+      description: 'Paywall Close Button component.',
       styles: {
-        resizeMode: {
-          label: 'Resize Mode',
-          description: 'How the image fits its container.',
+        color: {
+          label: 'Color',
+          description: 'Text color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 1,
+        },
+        fontSize: {
+          label: 'Font Size',
+          description: 'Text size.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+          preferredScale: 's',
+        },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        fontWeight: {
+          label: 'Font Weight',
+          description: 'Text weight.',
           category: 'style',
           specialCategory: null,
           sort: 4,
         },
+        textAlign: {
+          label: 'Text Align',
+          description: 'Text alignment.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
+        },
         backgroundColor: {
           label: 'Background Color',
           description: 'Background fill color.',
@@ -9296,33 +10158,44 @@ export const patterns = [
           preferredScale: 's',
         },
       },
-      specialCategories: {
-        padding: {
-          label: 'Padding',
-          description: 'Uniform padding on all sides.',
-          category: 'container',
+      attributes: {
+        iconType: {
+          label: 'Icon',
+          description: 'Which icon to render.',
+          category: 'other',
+          specialCategory: null,
           sort: 1,
         },
-        margin: {
-          label: 'Margin',
-          description: 'Uniform margin on all sides.',
-          category: 'container',
-          sort: 2,
-        },
         size: {
           label: 'Size',
-          description: 'Fixed dimensions.',
-          category: 'container',
+          description: 'Icon size (px).',
+          category: 'other',
+          specialCategory: null,
+          sort: 2,
+        },
+        strokeWidth: {
+          label: 'Stroke Width',
+          description: 'SVG stroke width override (applied to the icon paths).',
+          category: 'other',
+          specialCategory: null,
           sort: 3,
         },
-        offset: {
-          label: 'Offset',
-          description: 'Absolute positioning offsets.',
-          category: 'container',
-          sort: 4,
+        adjustsFontSizeToFit: {
+          label: 'Adjust Font Size To Fit',
+          description:
+            'Automatically reduces font size to fit the available space.',
+          category: 'other',
+          specialCategory: null,
+          sort: 1,
+        },
+        showEllipsis: {
+          label: 'Show Ellipsis',
+          description:
+            'If text overflows, show ellipsis (…); applied as single-line truncation.',
+          category: 'other',
+          specialCategory: null,
+          sort: 2,
         },
-      },
-      attributes: {
         scrollable: {
           label: 'Scrollable',
           description: 'Turns scroll interaction on.',
@@ -9580,37 +10453,64 @@ export const patterns = [
           sort: 26,
         },
       },
+      specialCategories: {
+        padding: {
+          label: 'Padding',
+          description: 'Uniform padding on all sides.',
+          category: 'container',
+          sort: 1,
+        },
+        margin: {
+          label: 'Margin',
+          description: 'Uniform margin on all sides.',
+          category: 'container',
+          sort: 2,
+        },
+        size: {
+          label: 'Size',
+          description: 'Fixed dimensions.',
+          category: 'container',
+          sort: 3,
+        },
+        offset: {
+          label: 'Offset',
+          description: 'Absolute positioning offsets.',
+          category: 'container',
+          sort: 4,
+        },
+      },
     },
     defaults: {
-      resizeMode: 'cover',
       style: {
-        width: '100%',
-        height: '100%',
+        fontSize: '16@fs',
+        color: 'THEME_COLORS.TEXT',
+        fontWeight: '400',
+        flexDirection: 'row',
         position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
         zIndex: 1,
-        flexDirection: 'column',
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        top: '35@vs',
+        left: '24@s',
+        justifyContent: 'center',
+        alignItems: 'center',
       },
+      iconType: 'close',
+      strokeWidth: 1.5,
+      size: 24,
     },
     types: {},
   },
   {
     schemaVersion: 2,
     pattern: {
-      type: 'PaywallCloseButton',
+      type: 'PaywallCounter',
       children: 'never',
       attributes: {
+        count: 'number',
         title: 'title',
         description: 'description',
-        iconType: 'iconType',
-        size: 'number',
-        strokeWidth: 'number',
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         style: {
@@ -9669,88 +10569,27 @@ export const patterns = [
         },
         scrollable: 'boolean',
       },
-    },
-    meta: {
-      desiredParent: ['>PaywallProvider'],
-      label: 'Paywall Close Button',
-      description: 'Paywall Close Button component.',
-      styles: {
-        backgroundColor: {
-          label: 'Background Color',
-          description: 'Background fill color.',
-          category: 'style',
-          specialCategory: null,
-          sort: 20,
-        },
-        borderRadius: {
-          label: 'Border Radius',
-          description: 'Corner rounding amount.',
-          category: 'style',
-          specialCategory: null,
-          sort: 21,
-          preferredScale: 's',
+      defaults: {
+        style: {
+          color: 'THEME_COLORS.TEXT',
+          fontSize: '16@fs',
+          fontWeight: '400',
         },
       },
+    },
+    meta: {
+      desiredParent: ['all'],
+      label: 'Paywall Counter',
+      description: 'Displays the paywall counter value.',
       attributes: {
-        iconType: {
-          label: 'Icon',
-          description: 'Which icon to render.',
+        count: {
+          label: 'Fallback Count',
+          description:
+            'Used only when the paywall counter hook returns no value.',
           category: 'other',
           specialCategory: null,
           sort: 1,
         },
-        size: {
-          label: 'Size',
-          description: 'Icon size (px).',
-          category: 'other',
-          specialCategory: null,
-          sort: 2,
-        },
-        strokeWidth: {
-          label: 'Stroke Width',
-          description: 'SVG stroke width override (applied to the icon paths).',
-          category: 'other',
-          specialCategory: null,
-          sort: 3,
-        },
-        styles: {
-          color: {
-            label: 'Color',
-            description: 'Text color.',
-            category: 'style',
-            specialCategory: null,
-            sort: 1,
-          },
-          fontSize: {
-            label: 'Font Size',
-            description: 'Text size.',
-            category: 'style',
-            specialCategory: null,
-            sort: 2,
-            preferredScale: 's',
-          },
-          fontFamily: {
-            label: 'Font Family',
-            description: 'Font family used for the text.',
-            category: 'style',
-            specialCategory: null,
-            sort: 3,
-          },
-          fontWeight: {
-            label: 'Font Weight',
-            description: 'Text weight.',
-            category: 'style',
-            specialCategory: null,
-            sort: 4,
-          },
-          textAlign: {
-            label: 'Text Align',
-            description: 'Text alignment.',
-            category: 'style',
-            specialCategory: null,
-            sort: 5,
-          },
-        },
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
           description:
@@ -10024,6 +10863,59 @@ export const patterns = [
           sort: 26,
         },
       },
+      styles: {
+        color: {
+          label: 'Color',
+          description: 'Text color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 1,
+        },
+        fontSize: {
+          label: 'Font Size',
+          description: 'Text size.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+          preferredScale: 's',
+        },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        fontWeight: {
+          label: 'Font Weight',
+          description: 'Text weight.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        textAlign: {
+          label: 'Text Align',
+          description: 'Text alignment.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
+        },
+        backgroundColor: {
+          label: 'Background Color',
+          description: 'Background fill color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 20,
+        },
+        borderRadius: {
+          label: 'Border Radius',
+          description: 'Corner rounding amount.',
+          category: 'style',
+          specialCategory: null,
+          sort: 21,
+          preferredScale: 's',
+        },
+      },
       specialCategories: {
         padding: {
           label: 'Padding',
@@ -10052,42 +10944,28 @@ export const patterns = [
       },
     },
     defaults: {
-      iconType: 'close',
-      strokeWidth: 1.5,
       style: {
-        fontSize: '16',
-        flexDirection: 'row',
-        position: 'absolute',
+        color: 'THEME_COLORS.TEXT',
+        fontSize: '16@fs',
+        fontWeight: '400',
+        flexDirection: 'column',
+        position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        top: '35@vs',
-        left: '24@s',
-        justifyContent: 'center',
-        alignItems: 'center',
       },
-      size: 24,
     },
     types: {},
   },
   {
     schemaVersion: 2,
     pattern: {
-      type: 'PaywallCounter',
-      children: 'never',
+      type: 'PaywallOptions',
+      children: 'node',
       attributes: {
-        count: 'number',
-        title: 'title',
-        description: 'description',
-        adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        scrollable: 'boolean',
         style: {
-          color: 'color',
-          fontSize: 'size',
-          fontFamily: 'fontFamily',
-          fontWeight: 'fontWeight',
-          textAlign: ['left', 'center', 'right', 'justify'],
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -10136,76 +11014,58 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        scrollable: 'boolean',
+        title: 'title',
+        description: 'description',
       },
     },
     meta: {
-      desiredParent: ['all'],
-      label: 'Paywall Counter',
-      description: 'Displays the paywall counter value.',
-      attributes: {
-        count: {
-          label: 'Fallback Count',
-          description:
-            'Used only when the paywall counter hook returns no value.',
-          category: 'other',
-          specialCategory: null,
+      desiredParent: ['>PaywallProvider'],
+      label: 'Paywall Options',
+      description: 'Paywall options selector component.',
+      specialCategories: {
+        padding: {
+          label: 'Padding',
+          description: 'Uniform padding on all sides.',
+          category: 'container',
           sort: 1,
         },
-        styles: {
-          color: {
-            label: 'Color',
-            description: 'Text color.',
-            category: 'style',
-            specialCategory: null,
-            sort: 1,
-          },
-          fontSize: {
-            label: 'Font Size',
-            description: 'Text size.',
-            category: 'style',
-            specialCategory: null,
-            sort: 2,
-            preferredScale: 's',
-          },
-          fontFamily: {
-            label: 'Font Family',
-            description: 'Font family used for the text.',
-            category: 'style',
-            specialCategory: null,
-            sort: 3,
-          },
-          fontWeight: {
-            label: 'Font Weight',
-            description: 'Text weight.',
-            category: 'style',
-            specialCategory: null,
-            sort: 4,
-          },
-          textAlign: {
-            label: 'Text Align',
-            description: 'Text alignment.',
-            category: 'style',
-            specialCategory: null,
-            sort: 5,
-          },
+        margin: {
+          label: 'Margin',
+          description: 'Uniform margin on all sides.',
+          category: 'container',
+          sort: 2,
         },
-        adjustsFontSizeToFit: {
-          label: 'Adjust Font Size To Fit',
-          description:
-            'Automatically reduces font size to fit the available space.',
-          category: 'other',
+        size: {
+          label: 'Size',
+          description: 'Fixed dimensions.',
+          category: 'container',
+          sort: 3,
+        },
+        offset: {
+          label: 'Offset',
+          description: 'Absolute positioning offsets.',
+          category: 'container',
+          sort: 4,
+        },
+      },
+      styles: {
+        backgroundColor: {
+          label: 'Background Color',
+          description: 'Background fill color.',
+          category: 'style',
           specialCategory: null,
-          sort: 1,
+          sort: 20,
         },
-        showEllipsis: {
-          label: 'Show Ellipsis',
-          description:
-            'If text overflows, show ellipsis (…); applied as single-line truncation.',
-          category: 'other',
+        borderRadius: {
+          label: 'Border Radius',
+          description: 'Corner rounding amount.',
+          category: 'style',
           specialCategory: null,
-          sort: 2,
+          sort: 21,
+          preferredScale: 's',
         },
+      },
+      attributes: {
         scrollable: {
           label: 'Scrollable',
           description: 'Turns scroll interaction on.',
@@ -10463,58 +11323,18 @@ export const patterns = [
           sort: 26,
         },
       },
-      specialCategories: {
-        padding: {
-          label: 'Padding',
-          description: 'Uniform padding on all sides.',
-          category: 'container',
-          sort: 1,
-        },
-        margin: {
-          label: 'Margin',
-          description: 'Uniform margin on all sides.',
-          category: 'container',
-          sort: 2,
-        },
-        size: {
-          label: 'Size',
-          description: 'Fixed dimensions.',
-          category: 'container',
-          sort: 3,
-        },
-        offset: {
-          label: 'Offset',
-          description: 'Absolute positioning offsets.',
-          category: 'container',
-          sort: 4,
-        },
-      },
-      styles: {
-        backgroundColor: {
-          label: 'Background Color',
-          description: 'Background fill color.',
-          category: 'style',
-          specialCategory: null,
-          sort: 20,
-        },
-        borderRadius: {
-          label: 'Border Radius',
-          description: 'Corner rounding amount.',
-          category: 'style',
-          specialCategory: null,
-          sort: 21,
-          preferredScale: 's',
-        },
-      },
     },
     defaults: {
       style: {
-        flexDirection: 'column',
+        flexDirection: 'row',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        minHeight: '60px',
       },
     },
     types: {},
@@ -10522,7 +11342,7 @@ export const patterns = [
   {
     schemaVersion: 2,
     pattern: {
-      type: 'PaywallOptions',
+      type: 'PaywallProvider',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -10577,12 +11397,13 @@ export const patterns = [
         },
         title: 'title',
         description: 'description',
+        delay: 'number',
       },
     },
     meta: {
-      desiredParent: ['>PaywallProvider'],
-      label: 'Paywall Options',
-      description: 'Paywall options selector component.',
+      desiredParent: ['all'],
+      label: 'Paywall Provider',
+      description: 'Provider/wrapper for paywall screen components.',
       specialCategories: {
         padding: {
           label: 'Padding',
@@ -10883,19 +11704,27 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
+        delay: {
+          label: 'Back Delay (ms)',
+          description:
+            'Milliseconds before the paywall can be dismissed via back/close.',
+          category: 'other',
+          specialCategory: null,
+          sort: 1,
+        },
       },
+      mockableFeatures: { products: true, benefits: true },
     },
     defaults: {
       style: {
-        flexDirection: 'row',
+        flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        minHeight: '60px',
+        width: '100%',
+        height: '100%',
       },
     },
     types: {},
@@ -10903,11 +11732,27 @@ export const patterns = [
   {
     schemaVersion: 2,
     pattern: {
-      type: 'PaywallProvider',
-      children: 'node',
+      type: 'PaywallSubscribeButton',
+      children: 'string',
       attributes: {
-        scrollable: 'boolean',
+        title: 'title',
+        description: 'description',
         style: {
+          color: 'color',
+          fontSize: 'size',
+          fontWeight: [
+            'normal',
+            'bold',
+            '100',
+            '200',
+            '300',
+            '400',
+            '500',
+            '600',
+            '700',
+            '800',
+            '900',
+          ],
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -10956,42 +11801,35 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
-        delay: 'number',
+        scrollable: 'boolean',
       },
     },
     meta: {
-      desiredParent: ['all'],
-      label: 'Paywall Provider',
-      description: 'Provider/wrapper for paywall screen components.',
-      specialCategories: {
-        padding: {
-          label: 'Padding',
-          description: 'Uniform padding on all sides.',
-          category: 'container',
+      desiredParent: ['>PaywallProvider'],
+      label: 'Paywall Subscribe Button',
+      description: 'Paywall subscribe call-to-action button. Extends Button.',
+      styles: {
+        color: {
+          label: 'Color',
+          description: 'Text color of the button.',
+          category: 'style',
+          specialCategory: null,
           sort: 1,
         },
-        margin: {
-          label: 'Margin',
-          description: 'Uniform margin on all sides.',
-          category: 'container',
+        fontSize: {
+          label: 'Font Size',
+          description: 'Text size of the button.',
+          category: 'style',
+          specialCategory: null,
           sort: 2,
         },
-        size: {
-          label: 'Size',
-          description: 'Fixed dimensions.',
-          category: 'container',
+        fontWeight: {
+          label: 'Font Weight',
+          description: 'Text weight of the button.',
+          category: 'style',
+          specialCategory: null,
           sort: 3,
         },
-        offset: {
-          label: 'Offset',
-          description: 'Absolute positioning offsets.',
-          category: 'container',
-          sort: 4,
-        },
-      },
-      styles: {
         backgroundColor: {
           label: 'Background Color',
           description: 'Background fill color.',
@@ -11008,6 +11846,32 @@ export const patterns = [
           preferredScale: 's',
         },
       },
+      specialCategories: {
+        padding: {
+          label: 'Padding',
+          description: 'Uniform padding on all sides.',
+          category: 'container',
+          sort: 1,
+        },
+        margin: {
+          label: 'Margin',
+          description: 'Uniform margin on all sides.',
+          category: 'container',
+          sort: 2,
+        },
+        size: {
+          label: 'Size',
+          description: 'Fixed dimensions.',
+          category: 'container',
+          sort: 3,
+        },
+        offset: {
+          label: 'Offset',
+          description: 'Absolute positioning offsets.',
+          category: 'container',
+          sort: 4,
+        },
+      },
       attributes: {
         scrollable: {
           label: 'Scrollable',
@@ -11265,27 +12129,26 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        delay: {
-          label: 'Back Delay (ms)',
-          description:
-            'Milliseconds before the paywall can be dismissed via back/close.',
-          category: 'other',
-          specialCategory: null,
-          sort: 1,
-        },
       },
-      mockableFeatures: { products: true, benefits: true },
     },
     defaults: {
       style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#6495ED',
         flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        width: '100%',
-        height: '100%',
+        paddingHorizontal: '20@s',
+        paddingVertical: '12@vs',
+        borderRadius: '12@s',
+        color: '#FFFFFF',
+        fontSize: '16@fs',
+        fontWeight: '700',
       },
     },
     types: {},
@@ -11293,27 +12156,11 @@ export const patterns = [
   {
     schemaVersion: 2,
     pattern: {
-      type: 'PaywallSubscribeButton',
-      children: 'string',
+      type: 'RadioButton',
+      children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
+        scrollable: 'boolean',
         style: {
-          color: 'color',
-          fontSize: 'size',
-          fontWeight: [
-            'normal',
-            'bold',
-            '100',
-            '200',
-            '300',
-            '400',
-            '500',
-            '600',
-            '700',
-            '800',
-            '900',
-          ],
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -11362,35 +12209,44 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        scrollable: 'boolean',
+        title: 'title',
+        description: 'description',
+        selected: 'boolean',
+        color: 'color',
+        size: 'number',
       },
     },
     meta: {
-      desiredParent: ['>PaywallProvider'],
-      label: 'Paywall Subscribe Button',
-      description: 'Paywall subscribe call-to-action button. Extends Button.',
-      styles: {
-        color: {
-          label: 'Color',
-          description: 'Text color of the button.',
-          category: 'style',
-          specialCategory: null,
+      desiredParent: ['all'],
+      label: 'Radio Button',
+      description: 'Generic radio button icon.',
+      specialCategories: {
+        padding: {
+          label: 'Padding',
+          description: 'Uniform padding on all sides.',
+          category: 'container',
           sort: 1,
         },
-        fontSize: {
-          label: 'Font Size',
-          description: 'Text size of the button.',
-          category: 'style',
-          specialCategory: null,
+        margin: {
+          label: 'Margin',
+          description: 'Uniform margin on all sides.',
+          category: 'container',
           sort: 2,
         },
-        fontWeight: {
-          label: 'Font Weight',
-          description: 'Text weight of the button.',
-          category: 'style',
-          specialCategory: null,
+        size: {
+          label: 'Size',
+          description: 'Fixed dimensions.',
+          category: 'container',
           sort: 3,
         },
+        offset: {
+          label: 'Offset',
+          description: 'Absolute positioning offsets.',
+          category: 'container',
+          sort: 4,
+        },
+      },
+      styles: {
         backgroundColor: {
           label: 'Background Color',
           description: 'Background fill color.',
@@ -11406,31 +12262,19 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
-      },
-      specialCategories: {
-        padding: {
-          label: 'Padding',
-          description: 'Uniform padding on all sides.',
-          category: 'container',
+        color: {
+          label: 'Color',
+          description: 'Radio color.',
+          category: 'style',
+          specialCategory: null,
           sort: 1,
         },
-        margin: {
-          label: 'Margin',
-          description: 'Uniform margin on all sides.',
-          category: 'container',
-          sort: 2,
-        },
         size: {
           label: 'Size',
-          description: 'Fixed dimensions.',
-          category: 'container',
-          sort: 3,
-        },
-        offset: {
-          label: 'Offset',
-          description: 'Absolute positioning offsets.',
-          category: 'container',
-          sort: 4,
+          description: 'Radio size in px.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
         },
       },
       attributes: {
@@ -11690,26 +12534,23 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
+        selected: {
+          label: 'Selected',
+          description: 'Whether the radio is selected.',
+          category: 'other',
+          specialCategory: null,
+          sort: 0,
+        },
       },
     },
     defaults: {
       style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#6495ED',
         flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
-        paddingHorizontal: '20@s',
-        paddingVertical: '12@vs',
-        borderRadius: '12@s',
-        color: '#FFFFFF',
-        fontSize: '16@fs',
-        fontWeight: '700',
       },
     },
     types: {},
@@ -11717,7 +12558,62 @@ export const patterns = [
   {
     schemaVersion: 2,
     pattern: {
-      type: 'RadioButton',
+      type: 'Separator',
+      children: 'never',
+      attributes: {
+        title: 'title',
+        description: 'description',
+        style: {
+          backgroundColor: 'color',
+          width: 'size',
+          height: 'size',
+          marginHorizontal: 'size',
+          marginVertical: 'size',
+          marginTop: 'size',
+          marginBottom: 'size',
+        },
+      },
+    },
+    meta: {
+      desiredParent: ['all'],
+      label: 'Separator',
+      description: 'Horizontal line separator.',
+      styles: {
+        backgroundColor: {
+          label: 'Color',
+          description: 'Separator line color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 1,
+        },
+      },
+      attributes: {
+        width: {
+          label: 'Width',
+          description: 'Separator width.',
+          category: 'container',
+          specialCategory: null,
+          sort: 1,
+          preferredScale: 's',
+        },
+        height: {
+          label: 'Height',
+          description: 'Separator thickness.',
+          category: 'container',
+          specialCategory: null,
+          sort: 2,
+          preferredScale: 'vs',
+        },
+      },
+    },
+    defaults: {
+      style: { width: '100%', height: 2, backgroundColor: '#000000' },
+    },
+  },
+  {
+    schemaVersion: 2,
+    pattern: {
+      type: 'StatusBarColor',
       children: 'never',
       attributes: {
         scrollable: 'boolean',
@@ -11772,15 +12668,12 @@ export const patterns = [
         },
         title: 'title',
         description: 'description',
-        selected: 'boolean',
-        color: 'color',
-        size: 'number',
       },
     },
     meta: {
       desiredParent: ['all'],
-      label: 'Radio Button',
-      description: 'Generic radio button icon.',
+      label: 'Status Bar Color',
+      description: 'Sets the OS status bar background color.',
       specialCategories: {
         padding: {
           label: 'Padding',
@@ -11810,10 +12703,10 @@ export const patterns = [
       styles: {
         backgroundColor: {
           label: 'Background Color',
-          description: 'Background fill color.',
+          description: 'Status bar background color.',
           category: 'style',
           specialCategory: null,
-          sort: 20,
+          sort: 1,
         },
         borderRadius: {
           label: 'Border Radius',
@@ -11823,20 +12716,6 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
-        color: {
-          label: 'Color',
-          description: 'Radio color.',
-          category: 'style',
-          specialCategory: null,
-          sort: 1,
-        },
-        size: {
-          label: 'Size',
-          description: 'Radio size in px.',
-          category: 'style',
-          specialCategory: null,
-          sort: 2,
-        },
       },
       attributes: {
         scrollable: {
@@ -12095,13 +12974,6 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        selected: {
-          label: 'Selected',
-          description: 'Whether the radio is selected.',
-          category: 'other',
-          specialCategory: null,
-          sort: 0,
-        },
       },
     },
     defaults: {
@@ -12112,6 +12984,7 @@ export const patterns = [
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        backgroundColor: 'THEME_COLORS.BACKGROUND',
       },
     },
     types: {},
@@ -12182,6 +13055,13 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
       },
+      defaults: {
+        style: {
+          color: 'THEME_COLORS.TEXT',
+          fontSize: '16@fs',
+          fontWeight: '400',
+        },
+      },
     },
     meta: {
       desiredParent: ['all'],
@@ -12229,6 +13109,42 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
+        color: {
+          label: 'Color',
+          description: 'Text color.',
+          category: 'style',
+          specialCategory: null,
+          sort: 1,
+        },
+        fontSize: {
+          label: 'Font Size',
+          description: 'Text size.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+          preferredScale: 's',
+        },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        fontWeight: {
+          label: 'Font Weight',
+          description: 'Text weight.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        textAlign: {
+          label: 'Text Align',
+          description: 'Text alignment.',
+          category: 'style',
+          specialCategory: null,
+          sort: 5,
+        },
       },
       attributes: {
         scrollable: {
@@ -12487,44 +13403,6 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        styles: {
-          color: {
-            label: 'Color',
-            description: 'Text color.',
-            category: 'style',
-            specialCategory: null,
-            sort: 1,
-          },
-          fontSize: {
-            label: 'Font Size',
-            description: 'Text size.',
-            category: 'style',
-            specialCategory: null,
-            sort: 2,
-            preferredScale: 's',
-          },
-          fontFamily: {
-            label: 'Font Family',
-            description: 'Font family used for the text.',
-            category: 'style',
-            specialCategory: null,
-            sort: 3,
-          },
-          fontWeight: {
-            label: 'Font Weight',
-            description: 'Text weight.',
-            category: 'style',
-            specialCategory: null,
-            sort: 4,
-          },
-          textAlign: {
-            label: 'Text Align',
-            description: 'Text alignment.',
-            category: 'style',
-            specialCategory: null,
-            sort: 5,
-          },
-        },
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
           description:
@@ -12551,6 +13429,9 @@ export const patterns = [
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        color: 'THEME_COLORS.TEXT',
+        fontSize: '16@fs',
+        fontWeight: '400',
       },
     },
     types: {},