@developer_tribe/react-builder 1.2.19 → 1.2.21

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

@@ -1,10 +1,15 @@
-import React, { useContext, useEffect, useId, useState } from 'react';
+import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
 import type { CarouselDotsComponentProps } from './CarouselDotsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { parseColor } from '../../utils/parseColor';
+import { parseSize } from '../../size-matters';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { defaultAppConfig } from '../../types/PreviewConfig';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
   useLogRender('CarouselDots');
@@ -15,7 +20,13 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const attributeName = node.sourceType ?? node.type ?? 'carouselDots';
   const attributeKey = node.key ?? generatedId;
 
-  const dotType = node.attributes?.dotType ?? 'normal_dot';
+  const attrsAny = node.attributes as any;
+  const stylesBag =
+    (attrsAny?.styles as Record<string, unknown> | undefined) ??
+    (attrsAny?.style as Record<string, unknown> | undefined) ??
+    undefined;
+  const dotType =
+    (stylesBag?.dotType as any) ?? (attrsAny?.dotType as any) ?? 'normal_dot';
   const style = useExtractViewStyle(node);
 
   // Use the appropriate context based on sourceType
@@ -24,6 +35,71 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const onboardApi = useContext(onboardContext);
   const emblaApi = isOnboard ? onboardApi?.emblaApi : carouselApi;
 
+  // When used as OnboardDot (sourceType), support OnboardDot-specific attributes too.
+  const GHOST_DOT_DARK_COLOR = '#E4E5E7';
+  const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
+  const inactiveDotOpacity =
+    (stylesBag?.inactive_dot_opacity as number | undefined) ??
+    attrsAny?.inactive_dot_opacity ??
+    0.3;
+  const inactiveDotColorOverride =
+    (stylesBag?.inactive_dot_color as string | undefined) ??
+    attrsAny?.inactive_dot_color;
+  const activeDotColor =
+    (stylesBag?.active_dot_color as string | undefined) ??
+    attrsAny?.active_dot_color;
+  const dotThicknessRaw =
+    (stylesBag?.dot_thickness as any) ?? attrsAny?.dot_thickness;
+
+  const { appConfig: builderAppConfig, projectColors } = useBuilderParams();
+  const appConfig = builderAppConfig ?? defaultAppConfig;
+  const isDark = appConfig.theme === 'dark';
+  const inactiveDotColorBase = isDark
+    ? GHOST_DOT_DARK_COLOR
+    : GHOST_DOT_LIGHT_COLOR;
+
+  const resolvedActiveDotColor = useMemo(
+    () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
+    [activeDotColor, appConfig.theme, projectColors],
+  );
+  const resolvedInactiveDotColor = useMemo(() => {
+    const parsed = parseColor(inactiveDotColorOverride, {
+      theme: appConfig.theme,
+      projectColors,
+    });
+    return parsed ?? inactiveDotColorBase;
+  }, [
+    inactiveDotColorBase,
+    inactiveDotColorOverride,
+    appConfig.theme,
+    projectColors,
+  ]);
+
+  const dotSizeCss = useMemo(() => {
+    const parsed = parseSize(dotThicknessRaw);
+    if (parsed === undefined) return '10px';
+    if (typeof parsed === 'number') return `${parsed}px`;
+    if (typeof parsed === 'string' && parsed.trim()) return parsed;
+    return '10px';
+  }, [dotThicknessRaw]);
+
+  const dotGapCss = useMemo((): string => {
+    const px =
+      typeof dotSizeCss === 'string' && dotSizeCss.trim().endsWith('px')
+        ? Number.parseFloat(dotSizeCss)
+        : Number.NaN;
+    const n = Number.isFinite(px) ? px : 10;
+    return `${Math.max(0, n / 3)}px`;
+  }, [dotSizeCss]);
+
+  const gapValue = (style as any)?.gap ?? dotGapCss;
+  const containerStyle = useMergedStyle(style, {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: gapValue,
+    alignItems: 'center',
+  });
+
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
 
@@ -53,17 +129,41 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
       attribute-name={attributeName}
       attribute-key={attributeKey}
       className={`embla__dots embla__dots--${dotType}`}
-      style={style}
+      style={containerStyle}
     >
-      {scrollSnaps.map((snap, index) => (
-        <button
-          key={index}
-          onClick={() => emblaApi?.scrollTo(snap)}
-          className={`embla__dot ${selectedIndex === index ? 'embla__dot--selected' : ''}`}
-        >
-          {index === selectedIndex ? '●' : '○'}
-        </button>
-      ))}
+      {scrollSnaps.map((snap, index) => {
+        const isDotSelected = selectedIndex === index;
+        const dotSize = dotSizeCss;
+        const resolvedColor =
+          isDotSelected && resolvedActiveDotColor
+            ? resolvedActiveDotColor
+            : resolvedInactiveDotColor;
+        const activeFallback = '#007AFF';
+        const dotColor = resolvedColor ?? activeFallback;
+
+        return (
+          <button
+            key={index}
+            onClick={() => emblaApi?.scrollTo(snap)}
+            className="embla__dot"
+            style={{
+              width: dotSize,
+              height: dotSize,
+              backgroundColor: dotColor,
+              opacity: isDotSelected ? 1 : inactiveDotOpacity,
+              borderRadius: '9999px',
+              border: 0,
+              padding: 0,
+              margin: 0,
+              display: 'inline-block',
+              cursor: 'pointer',
+              boxSizing: 'border-box',
+            }}
+            aria-label={`Go to slide ${index + 1}`}
+            aria-current={isDotSelected ? 'true' : undefined}
+          />
+        );
+      })}
     </div>
   );
 }

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -10,6 +10,7 @@ export type DotTypeOptionType =
   | 'sliding_dot'
   | 'liquid_like';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -27,6 +28,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface CarouselDotsStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -18,9 +18,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">CarouselProvider"
-    ],
+    "desiredParent": [">CarouselProvider"],
     "label": "Carousel Dots",
     "description": "Renders page indicator dots.",
     "styles": {

package/src/build-components/CarouselItem/CarouselItemProps.generated.ts

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface CarouselItemStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -10,9 +10,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "=Carousel"
-    ],
+    "desiredParent": ["=Carousel"],
     "label": "Carousel Item",
     "description": "Single slide inside a carousel.",
     "styles": {}

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

@@ -4,9 +4,8 @@ import RenderNode from '../RenderNode.generated';
 import useEmblaCarousel from 'embla-carousel-react';
 import useNode from '../useNode';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
-import { isCarousel } from '../../utils/isCarousel';
-import type { Node, NodeData } from '../../types/Node';
 
+//TODO: hızlıca carousel paywall ekelyebiliriz.
 export const carouselContext = createContext<any>(undefined);
 function CarouselProvider({ node }: CarouselProviderComponentProps) {
   node = useNode(node);
@@ -16,58 +15,20 @@ function CarouselProvider({ node }: CarouselProviderComponentProps) {
   const attributeKey = node.key ?? generatedId;
   const viewStyle = useExtractViewStyle(node);
 
-  const { carouselChild, otherChildren } = useMemo(() => {
-    const children = node.children as Node;
-
-    if (!children) {
-      return {
-        carouselChild: null as NodeData | null,
-        otherChildren: [] as Node[],
-      };
-    }
-
-    if (Array.isArray(children)) {
-      const idx = children.findIndex((c) => isCarousel(c));
-      const carousel = idx >= 0 ? (children[idx] as NodeData) : null;
-      const rest = idx >= 0 ? children.filter((_, i) => i !== idx) : children;
-      return { carouselChild: carousel, otherChildren: rest };
-    }
-
-    if (isCarousel(children)) {
-      return {
-        carouselChild: children as NodeData,
-        otherChildren: [] as Node[],
-      };
-    }
-
-    // Non-carousel single child (e.g. dots/buttons): treat as "other" so we don't mount embla with an invalid DOM.
-    return {
-      carouselChild: null as NodeData | null,
-      otherChildren: [children],
-    };
-  }, [node.children]);
-
   return (
     <carouselContext.Provider value={emblaApi}>
       <div
         attribute-name={attributeName}
         attribute-key={attributeKey}
         className="carousel-provider"
-        style={viewStyle}
+        //NOTE: this feature is only for embla hack. On RN we use flatlist
+        style={{ ...viewStyle, display: 'block' }}
       >
         <div className="embla">
-          <div
-            className="embla__viewport"
-            ref={carouselChild ? emblaRef : undefined}
-          >
-            {carouselChild ? <RenderNode node={carouselChild} /> : null}
+          <div className="embla__viewport" ref={emblaRef}>
+            {node.children && <RenderNode node={node.children} />}
           </div>
         </div>
-        {otherChildren.length > 0
-          ? otherChildren.map((child, index) => (
-              <RenderNode key={index} node={child} />
-            ))
-          : null}
       </div>
     </carouselContext.Provider>
   );

package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface CarouselProviderStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -8,6 +8,12 @@
     "attributes": {
       "title": "title",
       "description": "description"
+    },
+    "defaults": {
+      "style": {
+        "width": "100%",
+        "height": "100%"
+      }
     }
   },
   "meta": {

package/src/build-components/CountDown/CountDownProps.generated.ts

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export interface CountDownStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -21,4 +21,3 @@
     }
   }
 }
-

package/src/build-components/Counter/CounterProps.generated.ts

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export interface CounterStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -23,4 +23,3 @@
     }
   }
 }
-

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

@@ -33,7 +33,7 @@ function Image({ node }: ImageComponentProps) {
       attribute-name={attributeName}
       attribute-key={attributeKey}
       src={resolveImageSrc(src)}
-      style={style}
+      style={{ ...style, width: 'auto', maxWidth: '100%' }}
       alt=""
     />
   );

package/src/build-components/Image/ImageProps.generated.ts

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -21,6 +22,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface ImageStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

package/src/build-components/Main/MainProps.generated.ts

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface MainStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -20,9 +20,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "root"
-    ],
+    "desiredParent": ["root"],
     "label": "Main",
     "description": "Top-level screen wrapper (safe area, base layout).",
     "hideAllAttributes": true,

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

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -10,12 +10,8 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "=OnboardProvider"
-    ],
-    "desiredChildren": [
-      "=OnboardItem"
-    ],
+    "desiredParent": ["=OnboardProvider"],
+    "desiredChildren": ["=OnboardItem"],
     "label": "Onboard",
     "description": "Wraps the onboarding flow.",
     "styles": {}

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

@@ -80,7 +80,6 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
     <button
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      className="onboard__button"
       onClick={handleClick}
       style={{
         ...viewStyle,
@@ -88,10 +87,7 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
         color: textColor,
         backgroundColor,
         border: 'none',
-        borderRadius: 20,
-        height: '100%',
         display: 'flex',
-        alignItems: 'center',
         justifyContent: 'center',
         cursor: 'pointer',
       }}

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

@@ -11,6 +11,7 @@ export type AnimationOptionType =
   | 'blur-animation'
   | 'blur-line-animation';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -35,6 +36,7 @@ export interface EventObjectGenerated {
 
 export interface OnboardButtonStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -20,29 +20,24 @@
       "button_background_color": "color",
       "flex": "number",
       "events": "EventObject[]"
+    },
+    "defaults": {
+      "style": {
+        "height": "40@vs",
+        "borderRadius": "12@s"
+      }
     }
   },
   "types": {
     "EventObject": {
-      "type": [
-        "Permission",
-        "Navigate"
-      ],
-      "permission": [
-        "att",
-        "notification",
-        "rating",
-        "GDPR",
-        "null"
-      ],
+      "type": ["Permission", "Navigate"],
+      "permission": ["att", "notification", "rating", "GDPR", "null"],
       "navigate_to": "string",
       "targetIndex": "number"
     }
   },
   "meta": {
-    "desiredParent": [
-      "=OnboardButtons"
-    ],
+    "desiredParent": ["=OnboardButtons"],
     "label": "Onboard Button",
     "description": "Single action button for onboarding.",
     "styles": {

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

@@ -7,12 +7,14 @@ import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardButtons';
-  const { appConfig } = useBuilderParams();
+  const { appConfig, previewMode, selectedKey } = useBuilderParams();
   const seperatorColorDefault =
     appConfig?.theme === 'light'
       ? appConfig?.screenStyle?.light?.seperatorColor
@@ -35,14 +37,6 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     'column'
       ? 'column'
       : 'row';
-  const seperatorColor =
-    attributes?.seperatorColor ??
-    (styleBag as any)?.seperatorColor ??
-    seperatorColorDefault;
-  const buttonsClassName =
-    direction === 'column'
-      ? 'onboard__buttons onboard__buttons--column'
-      : 'onboard__buttons onboard__buttons--row';
 
   const children = useMemo(() => {
     const raw = node.children as unknown;
@@ -52,7 +46,16 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     return [raw as Node];
   }, [node.children]);
 
-  const viewStyle = useExtractViewStyle(node);
+  const baseStyle = useExtractViewStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const viewStyle = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
 
   // NOTE: Hooks must not be called conditionally.
   // Generate the id before any early returns so the hook order stays stable.
@@ -75,17 +78,11 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     <div
       attribute-name={attributeName}
       attribute-key={node.key ?? generatedId}
-      style={viewStyle}
+      style={{ ...viewStyle, boxSizing: 'border-box' }}
     >
-      <div
-        className="onboard__separator"
-        style={seperatorColor ? { backgroundColor: seperatorColor } : undefined}
-      />
-      <div className={buttonsClassName}>
-        {children.map((child, idx) => (
-          <RenderNode key={(child as any)?.key ?? idx} node={child} />
-        ))}
-      </div>
+      {children.map((child, idx) => (
+        <RenderNode key={(child as any)?.key ?? idx} node={child} />
+      ))}
     </div>
   );
 }

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

@@ -9,6 +9,7 @@ export type ButtonTypeOptionType =
 export type ButtonsDirectionOptionType = 'row' | 'column';
 export type ConditionOptionType = 'carousel-index';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardButtonsStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -7,28 +7,28 @@
     "attributes": {
       "title": "title",
       "description": "description",
-      "buttonType": [
-        "previous_button",
-        "next_button",
-        "skip_button"
-      ],
+      "buttonType": ["previous_button", "next_button", "skip_button"],
       "skipNumber": "number",
-      "buttons_direction": [
-        "row",
-        "column"
-      ],
+      "buttons_direction": ["row", "column"],
       "forIndex": "number",
       "seperatorColor": "color",
-      "condition": [
-        "carousel-index"
-      ],
+      "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": [
-      "=OnboardItem"
-    ],
+    "desiredParent": ["=OnboardItem"],
     "label": "Onboard Buttons",
     "description": "Wrapper for onboarding button set.",
     "styles": {