@developer_tribe/react-builder 1.0.2 → 1.0.3

package/src/build-components/Onboard/OnboardProps.generated.ts

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardPropsGenerated {
   child: string;
@@ -42,6 +43,12 @@ export interface OnboardPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
   };
 }
 

package/src/build-components/OnboardButton/OnboardButton.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useRef } from 'react';
+import React, { useContext, useId, useMemo, useRef } from 'react';
 import type {
   EventObjectGenerated,
   OnboardButtonComponentProps,
@@ -13,16 +13,19 @@ import { useMockOSContext, useMockPermission } from '../../mockOS';
 function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
   node = useNode(node);
-  const attributeKey =
+  const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'OnboardButton';
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { appConfig } = useRenderStore((s) => ({
+  const { appConfig, projectColors } = useRenderStore((s) => ({
     appConfig: s.appConfig,
+    projectColors: s.projectColors,
   }));
 
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
   const handledEventsRef = useRef<EventObjectGenerated[]>([]);
+  const generatedId = useId();
+  const attributeKey = node.key ?? generatedId;
 
   const labelRaw = node.attributes?.labelKey ?? '';
   const label =
@@ -33,7 +36,10 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const flex = node.attributes?.flex ?? 1;
   const textColor = node.attributes?.button_text_color ?? '#FFFFFF';
   const backgroundColor = node.attributes?.button_background_color ?? '#0066FF';
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
 
   const handleClick = () => {
     //TODO: any ??
@@ -81,6 +87,7 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
 
   return (
     <button
+      attribute-name={attributeName}
       attribute-key={attributeKey}
       className="onboard__button"
       onClick={handleClick}

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -18,6 +18,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type AnimationOptionType =
   | 'simple-animation'
   | 'line-animation'
@@ -57,6 +58,12 @@ export interface OnboardButtonPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     labelKey?: string;
     button_text_color?: string;
     animation?: AnimationOptionType;

package/src/build-components/OnboardButtons/OnboardButtons.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
 import type { Node } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
@@ -11,10 +11,11 @@ import { extractViewStyle } from '../../utils/extractViewStyle';
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
   node = useNode(node);
-  const attributeKey =
+  const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'OnboardButtons';
-  const { appConfig } = useRenderStore((s) => ({
+  const { appConfig, projectColors } = useRenderStore((s) => ({
     appConfig: s.appConfig,
+    projectColors: s.projectColors,
   }));
   const seperatorColorDefault =
     appConfig.theme === 'light'
@@ -43,7 +44,14 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     return <RenderNode node={node.children as Node} />;
   };
 
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+
+  // NOTE: Hooks must not be called conditionally.
+  // Generate the id before any early returns so the hook order stays stable.
+  const generatedId = useId();
 
   // New condition logic: hide when condition is carousel-index and does not match
   const condition = (node.attributes as any)?.condition;
@@ -58,7 +66,11 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   }
 
   return (
-    <div attribute-key={attributeKey} style={viewStyle}>
+    <div
+      attribute-name={attributeName}
+      attribute-key={node.key ?? generatedId}
+      style={viewStyle}
+    >
       <div
         className="onboard__separator"
         style={{

package/src/build-components/OnboardButtons/OnboardButtonsProps.generated.ts

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type ButtonTypeOptionType =
   | 'previous_button'
   | 'next_button'
@@ -48,6 +49,12 @@ export interface OnboardButtonsPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
     buttons_direction?: ButtonsDirectionOptionType;

package/src/build-components/OnboardDot/OnboardDot.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
 import type { OnboardDotComponentProps } from './OnboardDotProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
@@ -11,11 +11,17 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
 
   node = useNode(node);
 
-  const attributeKey = node.type ?? 'OnboardDot';
+  const generatedId = useId();
+  const attributeName = node.type ?? 'OnboardDot';
+  const attributeKey = node.key ?? generatedId;
   const dotType = node.attributes?.dotType || 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
-  const isDark = useRenderStore((s) => s.appConfig.theme === 'dark');
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const isDark = appConfig.theme === 'dark';
 
   // OnboardDot specific attributes
   const inactiveDotColor = isDark
@@ -27,7 +33,7 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const activeDotColor = node.attributes?.active_dot_color;
 
   const style = useMemo(() => {
-    const baseStyle = extractViewStyle(node);
+    const baseStyle = extractViewStyle(node, { appConfig, projectColors });
     // Merge container_style if provided
     if (containerStyle) {
       try {
@@ -38,7 +44,7 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
       }
     }
     return baseStyle;
-  }, [node, containerStyle]);
+  }, [node, containerStyle, appConfig, projectColors]);
 
   const onboardApi = useContext(onboardContext);
   const emblaApi = onboardApi?.emblaApi;
@@ -78,6 +84,7 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
 
   return (
     <div
+      attribute-name={attributeName}
       attribute-key={attributeKey}
       className={`embla__dots embla__dots--${dotType}`}
       style={style}
@@ -98,7 +105,9 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
         return (
           <button
             key={index}
-            onClick={() => emblaApi?.scrollTo(snap)}
+            onClick={() => {
+              emblaApi?.scrollTo(snap);
+            }}
             className={`embla__dot ${isSelected ? 'embla__dot--selected' : ''}`}
             style={dotStyles}
           >

package/src/build-components/OnboardDot/OnboardDotProps.generated.ts

@@ -2,6 +2,7 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type PositionOptionType = 'relative' | 'absolute';
 export type DotTypeOptionType =
   | 'expanding_dot'
   | 'normal_dot'
@@ -35,6 +36,12 @@ export interface OnboardDotPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     dotType?: DotTypeOptionType;
     inactive_dot_opacity?: number;
     expanding_dot_width?: number;

package/src/build-components/OnboardDot/pattern.json

@@ -3,7 +3,7 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "type": "OnboardDot",
-    "children": "node",
+    "children": "never",
     "extends": "View",
     "attributes": {
       "dotType": [

package/src/build-components/OnboardFooter/OnboardFooter.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
@@ -90,18 +90,25 @@ function buildSegments(
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
   useLogRender('OnboardFooter');
   node = useNode(node);
-  const attributeKey =
+  const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'OnboardFooter';
-  const { appConfig } = useRenderStore((s) => ({
+  const { appConfig, projectColors } = useRenderStore((s) => ({
     appConfig: s.appConfig,
+    projectColors: s.projectColors,
   }));
   const { localication, defaultLanguage } = appConfig;
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const text = t(node?.attributes?.textLocalizationKey);
-  const textStyle: React.CSSProperties = extractTextStyle(node);
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const textStyle: React.CSSProperties = extractTextStyle(node, {
+    appConfig,
+    projectColors,
+  });
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
 
   const linkStyle = (color?: string): React.CSSProperties => ({
     color,
@@ -109,8 +116,11 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   });
 
   const paddingHorizontal = parseSize(node?.attributes?.paddingHorizontal);
+  const generatedId = useId();
+  const attributeKey = node.key ?? generatedId;
   return (
     <div
+      attribute-name={attributeName}
       attribute-key={attributeKey}
       style={{
         ...viewStyle,

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -29,6 +29,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardFooterPropsGenerated {
   child: string;
@@ -59,6 +60,12 @@ export interface OnboardFooterPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     textLocalizationKey?: string;
     linkedWordFirstLocalizationKey?: string;
     linkedWordFirstColor?: string;

package/src/build-components/OnboardImage/OnboardImage.tsx

@@ -1,17 +1,28 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import type { OnboardImageComponentProps } from './OnboardImageProps.generated';
 import Image from '../Image/Image';
 import useNode from '../useNode';
 import Lottie from 'lottie-react';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useRenderStore } from '../../store';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
   useLogRender('OnboardImage');
   node = useNode(node);
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'OnboardImage';
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardImage';
+  const attributeKey = node.key ?? generatedId;
   const [lottie, setLottie] = useState<string | null>(null);
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
 
   useEffect(() => {
     if (node.attributes?.lottie) {
@@ -24,6 +35,7 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
   if (node.attributes?.video_url) {
     return (
       <video
+        attribute-name={attributeName}
         attribute-key={attributeKey}
         autoPlay
         muted
@@ -37,13 +49,21 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
   if (node.attributes?.lottie) {
     if (lottie) {
       return (
-        <div attribute-key={attributeKey} style={viewStyle}>
+        <div
+          attribute-name={attributeName}
+          attribute-key={attributeKey}
+          style={viewStyle}
+        >
           <Lottie animationData={lottie} />
         </div>
       );
     } else {
       return (
-        <div attribute-key={attributeKey} style={viewStyle}>
+        <div
+          attribute-name={attributeName}
+          attribute-key={attributeKey}
+          style={viewStyle}
+        >
           Loading...
         </div>
       );
@@ -51,7 +71,9 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
   }
 
   return (
-    <Image node={{ ...node, type: 'image', sourceType: attributeKey } as any} />
+    <Image
+      node={{ ...node, type: 'image', sourceType: attributeName } as any}
+    />
   );
 }
 

package/src/build-components/OnboardImage/OnboardImageProps.generated.ts

@@ -17,6 +17,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardImagePropsGenerated {
   child: string;
@@ -45,6 +46,12 @@ export interface OnboardImagePropsGenerated {
     marginLeft?: string;
     marginRight?: string;
     backgroundColor?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     video_url?: string;
     lottie?: string;
   };

package/src/build-components/OnboardItem/OnboardItem.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import React, { useId, useMemo } from 'react';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import { RenderNode } from '../..';
+import { useRenderStore } from '../../store';
 import { parseSize } from '../../size-matters';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
@@ -9,13 +10,23 @@ import { extractViewStyle } from '../../utils/extractViewStyle';
 function OnboardItem({ node }: OnboardItemComponentProps) {
   useLogRender('OnboardItem');
   node = useNode(node);
-  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'OnboardItem';
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'OnboardItem';
+  const attributeKey = node.key ?? generatedId;
   const flexDirection = node.attributes?.flexDirection;
   const display = node.attributes?.display;
   const paddingHorizontal = parseSize(node.attributes?.paddingHorizontal);
-  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
   return (
     <div
+      attribute-name={attributeName}
       attribute-key={attributeKey}
       className="embla__slide"
       style={{

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 export type DisplayOptionType = 'flex' | 'block';
 
 export interface OnboardItemPropsGenerated {
@@ -43,6 +44,12 @@ export interface OnboardItemPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     display?: DisplayOptionType;
   };
 }

package/src/build-components/OnboardProvider/OnboardProvider.tsx

@@ -2,6 +2,7 @@ import React, {
   createContext,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useState,
 } from 'react';
@@ -19,26 +20,45 @@ export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
   useLogRender('OnboardProvider');
   node = useNode(node);
-  const attributeKey =
+  const generatedId = useId();
+  const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'OnboardProvider';
   const device = useRenderStore((s) => s.device);
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const attributeKey = node.key ?? generatedId;
 
   const children = useMemo(() => {
-    const onboardChild: NodeData = (node.children as NodeData[]).filter(
-      (c) => c.type === 'Onboard',
-    )[0];
-    if (onboardChild?.type !== 'Onboard') {
-      throw new Error('OnboardProvider at least has an Onboard child');
+    const allChildren = (node.children as NodeData[]) ?? [];
+
+    // Find the main Onboard child, if any
+    const onboardChild = allChildren.find((c) => c.type === 'Onboard');
+    if (!onboardChild || onboardChild.type !== 'Onboard') {
+      // Fallback: no onboard structure, just render original children
+      return allChildren;
+    }
+
+    const onboardItems = (onboardChild.children as NodeData[]) ?? [];
+    if (!onboardItems.length) {
+      return allChildren;
     }
-    const onboardItems = onboardChild.children as NodeData[];
 
+    // Clamp selected index to available items
+    const clampedIndex = Math.min(
+      Math.max(selectedIndex, 0),
+      onboardItems.length - 1,
+    );
+
+    const selectedItem = onboardItems[clampedIndex];
     const onboardButtons = (
-      onboardItems[selectedIndex].children as NodeData[]
-    ).filter((s) => (s as NodeData)?.type == 'OnboardButtons');
-    const children: NodeData[] = node.children as NodeData[];
-    return [...children, ...onboardButtons];
+      (selectedItem?.children as NodeData[]) ?? []
+    ).filter((s) => (s as NodeData)?.type === 'OnboardButtons');
+
+    return [...allChildren, ...onboardButtons];
   }, [selectedIndex, node.children]);
 
   useEffect(() => {
@@ -59,15 +79,17 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   const viewStyle = useMemo(() => {
     const style = extractViewStyle(
       node as NodeData<ViewPropsGenerated['attributes']>,
+      { appConfig, projectColors },
     );
     //NOTE: Embla için istisna
     style.display = 'block';
     return style;
-  }, [node]);
+  }, [node, appConfig, projectColors]);
 
   return (
     <onboardContext.Provider value={{ emblaApi, selectedIndex }}>
       <div
+        attribute-name={attributeName}
         attribute-key={attributeKey}
         className="carousel-provider"
         style={{

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -16,6 +16,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardProviderPropsGenerated {
   child: string;
@@ -42,7 +43,12 @@ export interface OnboardProviderPropsGenerated {
     borderRadius?: never;
     width?: string;
     height?: string;
-    theme?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     use_safe_area_inset?: boolean;
   };
 }

package/src/build-components/OnboardProvider/pattern.json

@@ -6,7 +6,6 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "theme": "string",
       "use_safe_area_inset": "boolean",
       "borderRadius": "never"
     }
@@ -22,13 +21,6 @@
     "label": "Onboard Provider",
     "description": "Provides shared settings for onboarding.",
     "attributes": {
-      "theme": {
-        "label": "Theme",
-        "description": "Theme key for onboarding screens.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 1
-      },
       "use_safe_area_inset": {
         "label": "Use Safe Area Inset",
         "description": "Adds safe area padding.",

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -29,6 +29,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardSubtitlePropsGenerated {
   child: string;
@@ -59,6 +60,12 @@ export interface OnboardSubtitlePropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
   };
 }
 

package/src/build-components/OnboardSubtitle/pattern.json

@@ -3,7 +3,7 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "type": "OnboardSubtitle",
-    "children": "node",
+    "children": "string",
     "extends": "Text",
     "attributes": {}
   },

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -29,6 +29,7 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardTitlePropsGenerated {
   child: string;
@@ -59,6 +60,12 @@ export interface OnboardTitlePropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
   };
 }
 

package/src/build-components/OnboardTitle/pattern.json

@@ -3,7 +3,7 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "type": "OnboardTitle",
-    "children": "node",
+    "children": "string",
     "extends": "Text",
     "attributes": {}
   },