@builder.io/sdk-svelte 0.8.1 → 0.9.0

package/lib/edge/functions/get-block-properties.js

@@ -1,6 +1,5 @@
 import { TARGET } from '../constants/target.js';
 import { convertStyleMapToCSSArray } from '../helpers/css.js';
-import { getReactNativeBlockStyles } from './get-react-native-block-styles.js';
 import { transformBlockProperties } from './transform-block-properties.js';
 const extractRelevantRootBlockProperties = (block) => {
     // currently we are only spreading the `href` property
@@ -42,14 +41,11 @@ export function getBlockProperties({ block, context }) {
         style: block.style ? getStyleAttribute(block.style) : undefined,
         class: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
     };
-    if (TARGET === 'reactNative') {
-        properties.style = getReactNativeBlockStyles({
-            block,
-            context,
-            blockStyles: properties.style
-        });
-    }
-    return transformBlockProperties(properties);
+    return transformBlockProperties({
+        properties,
+        context,
+        block
+    });
 }
 /**
  * Svelte does not support style attribute as an object so we need to flatten it.

package/lib/edge/functions/transform-block-properties.d.ts

@@ -1 +1,7 @@
-export declare function transformBlockProperties<T>(properties: T): T;
+import type { BuilderContextInterface } from '../context/types';
+import type { BuilderBlock } from '../types/builder-block';
+export declare function transformBlockProperties<T>({ properties }: {
+    properties: T;
+    context: BuilderContextInterface;
+    block: BuilderBlock;
+}): T;

package/lib/edge/functions/transform-block-properties.js

@@ -1,3 +1,3 @@
-export function transformBlockProperties(properties) {
+export function transformBlockProperties({ properties }) {
     return properties;
 }

package/lib/edge/types/enforced-partials.d.ts

@@ -1,9 +1,14 @@
 import type { Prettify } from './typescript.js';
+/**
+ * Lol Typescript
+ * https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360
+ */
+type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 type OptionalFieldsOnly<T> = {
-    [K in keyof T as T[K] extends Required<T>[K] ? never : K]: T[K];
+    [K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], K, never> : K]: T[K];
 };
 type RequiredFieldsOnly<T> = {
-    [K in keyof T as T[K] extends Required<T>[K] ? K : never]: T[K];
+    [K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], never, K> : never]: T[K];
 };
 type Enforced<T> = {
     [K in keyof T]-?: T[K];

package/lib/node/components/blocks/blocks-wrapper.svelte

@@ -1,10 +1,12 @@
 <script context="module"></script>
 
 <script>import { isEditing } from "../../functions/is-editing.js";
+export let BlocksWrapper;
 export let blocks;
 export let parent;
 export let path;
 export let styleProp;
+export let BlocksWrapperProps;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
         if (p.startsWith("--")) {
@@ -42,9 +44,10 @@ $: className = () => {
 };
 </script>
 
-<div
+<svelte:element
+  this={BlocksWrapper}
   use:mitosis_styling={styleProp}
-  class={className() + " div"}
+  class={className() + " svelte-element"}
   builder-path={path}
   builder-parent-id={parent}
   {...{}}
@@ -57,12 +60,13 @@ $: className = () => {
   on:keypress={(event) => {
     onClick();
   }}
+  {...BlocksWrapperProps}
 >
   <slot />
-</div>
+</svelte:element>
 
 <style>
-  .div {
+  .svelte-element {
     display: flex;
     flex-direction: column;
     align-items: stretch;

package/lib/node/components/blocks/blocks.svelte

@@ -16,7 +16,14 @@ let builderContext = getContext(BuilderContext.key);
 let componentsContext = getContext(ComponentsContext.key);
 </script>
 
-<BlocksWrapper {blocks} {parent} {path} {styleProp}>
+<BlocksWrapper
+  {blocks}
+  {parent}
+  {path}
+  {styleProp}
+  BlocksWrapper={$context?.BlocksWrapper}
+  BlocksWrapperProps={$context?.BlocksWrapperProps}
+>
   {#if blocks}
     {#each blocks as block ("render-block-" + block.id)}
       <Block

package/lib/node/components/content/components/enable-editor.svelte

@@ -17,6 +17,7 @@ import { logger } from "../../../helpers/logger.js";
 import "../../../helpers/preview-lru-cache/set.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
 export let builderContextSignal;
+export let contentWrapper = undefined;
 export let model = undefined;
 export let context = undefined;
 export let canTrack = undefined;
@@ -26,6 +27,7 @@ export let includeRefs = undefined;
 export let enrich = undefined;
 export let content = undefined;
 export let showContent;
+export let contentWrapperProps = undefined;
 function mergeNewContent(newContent) {
     const newContentValue = {
         ...$builderContextSignal.content,
@@ -217,6 +219,7 @@ let elementRef;
 let forceReRenderCount = 0;
 let lastUpdated = 0;
 let shouldSendResetCookie = false;
+let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
 let clicked = false;
 onMount(() => {
@@ -284,7 +287,8 @@ onDestroy(() => {
 </script>
 
 {#if $builderContextSignal.content}
-  <div
+  <svelte:element
+    this={ContentWrapper}
     {...{}}
     key={forceReRenderCount}
     bind:this={elementRef}
@@ -300,6 +304,7 @@ onDestroy(() => {
           hidden: true,
           "aria-hidden": true,
         }}
+    {...contentWrapperProps}
     class={`variant-${content?.testVariationId || content?.id}`}
     on:initeditingbldr={(event) => {
       elementRef_onIniteditingbldr(event);
@@ -309,5 +314,5 @@ onDestroy(() => {
     }}
   >
     <slot />
-  </div>
+  </svelte:element>
 {/if}

package/lib/node/components/content/components/enable-editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest"> & {
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps"> & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;
@@ -10,6 +10,7 @@ import type { Writable } from "svelte/store";
 declare const __propDef: {
     props: {
         builderContextSignal: BuilderEditorProps["builderContextSignal"];
+        contentWrapper?: BuilderEditorProps["contentWrapper"];
         model?: BuilderEditorProps["model"];
         context?: BuilderEditorProps["context"];
         canTrack?: BuilderEditorProps["canTrack"];
@@ -19,6 +20,7 @@ declare const __propDef: {
         enrich?: BuilderEditorProps["enrich"];
         content?: BuilderEditorProps["content"];
         showContent: BuilderEditorProps["showContent"];
+        contentWrapperProps?: BuilderEditorProps["contentWrapperProps"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/components/content/content.svelte

@@ -18,11 +18,15 @@ export let locale = undefined;
 export let context = undefined;
 export let apiKey;
 export let apiVersion = undefined;
+export let blocksWrapper = undefined;
+export let blocksWrapperProps = undefined;
 export let model = undefined;
 export let canTrack = undefined;
 export let includeRefs = undefined;
 export let enrich = undefined;
 export let showContent;
+export let contentWrapper = undefined;
+export let contentWrapperProps = undefined;
 export let isSsrAbTest;
 function contentSetState(newRootState) {
     $builderContextSignal.rootState = newRootState;
@@ -78,6 +82,8 @@ let builderContextSignal = writable({
         [info.name]: serializeComponentInfo(info),
     }), {}),
     inheritedStyles: {},
+    BlocksWrapper: blocksWrapper || "div",
+    BlocksWrapperProps: blocksWrapperProps || {},
 });
 setContext(ComponentsContext.key, {
     registeredComponents: registeredComponents,
@@ -95,6 +101,8 @@ setContext(ComponentsContext.key, {
   {enrich}
   {showContent}
   {builderContextSignal}
+  {contentWrapper}
+  {contentWrapperProps}
   {...{}}
 >
   {#if isSsrAbTest}

package/lib/node/components/content/content.svelte.d.ts

@@ -9,11 +9,15 @@ declare const __propDef: {
         context?: ContentProps["context"];
         apiKey: ContentProps["apiKey"];
         apiVersion?: ContentProps["apiVersion"];
+        blocksWrapper?: ContentProps["blocksWrapper"];
+        blocksWrapperProps?: ContentProps["blocksWrapperProps"];
         model?: ContentProps["model"];
         canTrack?: ContentProps["canTrack"];
         includeRefs?: ContentProps["includeRefs"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];
+        contentWrapper?: ContentProps["contentWrapper"];
+        contentWrapperProps?: ContentProps["contentWrapperProps"];
         isSsrAbTest: ContentProps["isSsrAbTest"];
     };
     events: {

package/lib/node/components/content-variants/content-variants.svelte

@@ -20,6 +20,10 @@ export let customComponents = undefined;
 export let locale = undefined;
 export let includeRefs = undefined;
 export let enrich = undefined;
+export let blocksWrapper = undefined;
+export let blocksWrapperProps = undefined;
+export let contentWrapper = undefined;
+export let contentWrapperProps = undefined;
 $: updateCookieAndStylesScriptStr = () => {
     return getUpdateCookieAndStylesScript(getVariants(content).map((value) => ({
         id: value.testVariationId,
@@ -81,6 +85,10 @@ onMount(() => {
       {includeRefs}
       {enrich}
       isSsrAbTest={shouldRenderVariants}
+      {blocksWrapper}
+      {blocksWrapperProps}
+      {contentWrapper}
+      {contentWrapperProps}
     />
   {/each}
 {/if}
@@ -100,4 +108,8 @@ onMount(() => {
   {includeRefs}
   {enrich}
   isSsrAbTest={shouldRenderVariants}
+  {blocksWrapper}
+  {blocksWrapperProps}
+  {contentWrapper}
+  {contentWrapperProps}
 />

package/lib/node/components/content-variants/content-variants.svelte.d.ts

@@ -20,6 +20,10 @@ declare const __propDef: {
         locale?: VariantsProviderProps["locale"];
         includeRefs?: VariantsProviderProps["includeRefs"];
         enrich?: VariantsProviderProps["enrich"];
+        blocksWrapper?: VariantsProviderProps["blocksWrapper"];
+        blocksWrapperProps?: VariantsProviderProps["blocksWrapperProps"];
+        contentWrapper?: VariantsProviderProps["contentWrapper"];
+        contentWrapperProps?: VariantsProviderProps["contentWrapperProps"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/components/content-variants/content-variants.types.d.ts

@@ -17,4 +17,20 @@ export interface ContentVariantsPrps {
     /** @deprecated use `enrich` instead **/
     includeRefs?: boolean;
     enrich?: boolean;
+    /**
+     * The element that wraps your content. Defaults to `div` ('ScrollView' in React Native).
+     */
+    contentWrapper?: any;
+    /**
+     * Additonal props to pass to `contentWrapper`. Defaults to `{}`.
+     */
+    contentWrapperProps?: any;
+    /**
+     * The element that wraps your blocks. Defaults to `div` ('ScrollView' in React Native).
+     */
+    blocksWrapper?: any;
+    /**
+     * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+     */
+    blocksWrapperProps?: any;
 }

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.8.1";
+export declare const SDK_VERSION = "0.9.0";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.8.1";
+export const SDK_VERSION = "0.9.0";

package/lib/node/context/builder.context.d.ts

@@ -10,6 +10,8 @@ declare const _default: {
         apiVersion: undefined;
         componentInfos: {};
         inheritedStyles: {};
+        BlocksWrapper: string;
+        BlocksWrapperProps: {};
     }>;
     key: symbol;
 };

package/lib/node/context/builder.context.js

@@ -11,6 +11,8 @@ export default {
         apiVersion: undefined,
         componentInfos: {},
         inheritedStyles: {},
+        BlocksWrapper: "div",
+        BlocksWrapperProps: {},
     }),
     key,
 };

package/lib/node/context/types.d.ts

@@ -1,3 +1,4 @@
+import type { BlocksWrapperProps } from '../components/blocks/blocks-wrapper.svelte';
 import type { ApiVersion } from '../types/api-version.js';
 import type { BuilderContent } from '../types/builder-content.js';
 import type { ComponentInfo } from '../types/components.js';
@@ -8,7 +9,7 @@ export type RegisteredComponent = ComponentInfo & {
 export type RegisteredComponents = Dictionary<RegisteredComponent>;
 export type BuilderRenderState = Record<string, unknown>;
 export type BuilderRenderContext = Record<string, unknown>;
-export interface BuilderContextInterface {
+export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'> {
     content: Nullable<BuilderContent>;
     context: BuilderRenderContext;
     /**

package/lib/node/functions/get-block-properties.js

@@ -1,6 +1,5 @@
 import { TARGET } from '../constants/target.js';
 import { convertStyleMapToCSSArray } from '../helpers/css.js';
-import { getReactNativeBlockStyles } from './get-react-native-block-styles.js';
 import { transformBlockProperties } from './transform-block-properties.js';
 const extractRelevantRootBlockProperties = (block) => {
     // currently we are only spreading the `href` property
@@ -42,14 +41,11 @@ export function getBlockProperties({ block, context }) {
         style: block.style ? getStyleAttribute(block.style) : undefined,
         class: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
     };
-    if (TARGET === 'reactNative') {
-        properties.style = getReactNativeBlockStyles({
-            block,
-            context,
-            blockStyles: properties.style
-        });
-    }
-    return transformBlockProperties(properties);
+    return transformBlockProperties({
+        properties,
+        context,
+        block
+    });
 }
 /**
  * Svelte does not support style attribute as an object so we need to flatten it.

package/lib/node/functions/transform-block-properties.d.ts

@@ -1 +1,7 @@
-export declare function transformBlockProperties<T>(properties: T): T;
+import type { BuilderContextInterface } from '../context/types';
+import type { BuilderBlock } from '../types/builder-block';
+export declare function transformBlockProperties<T>({ properties }: {
+    properties: T;
+    context: BuilderContextInterface;
+    block: BuilderBlock;
+}): T;

package/lib/node/functions/transform-block-properties.js

@@ -1,3 +1,3 @@
-export function transformBlockProperties(properties) {
+export function transformBlockProperties({ properties }) {
     return properties;
 }

package/lib/node/types/enforced-partials.d.ts

@@ -1,9 +1,14 @@
 import type { Prettify } from './typescript.js';
+/**
+ * Lol Typescript
+ * https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360
+ */
+type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 type OptionalFieldsOnly<T> = {
-    [K in keyof T as T[K] extends Required<T>[K] ? never : K]: T[K];
+    [K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], K, never> : K]: T[K];
 };
 type RequiredFieldsOnly<T> = {
-    [K in keyof T as T[K] extends Required<T>[K] ? K : never]: T[K];
+    [K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], never, K> : never]: T[K];
 };
 type Enforced<T> = {
     [K in keyof T]-?: T[K];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "type": "module",
   "files": [
     "lib",

package/src/components/blocks/blocks-wrapper.svelte

@@ -4,6 +4,14 @@
     parent: string | undefined;
     path: string | undefined;
     styleProp: Record<string, any> | undefined;
+    /**
+     * The element that wraps each list of blocks. Defaults to a `div` element ('ScrollView' in React Native).
+     */
+    BlocksWrapper: any;
+    /**
+     * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+     */
+    BlocksWrapperProps: any;
   };
 </script>
 
@@ -12,10 +20,12 @@
   import type { BuilderBlock } from "../../types/builder-block.js";
   import type { PropsWithChildren } from "../../types/typescript.js";
 
+  export let BlocksWrapper: PropsWithChildren<BlocksWrapperProps>["BlocksWrapper"];
   export let blocks: PropsWithChildren<BlocksWrapperProps>["blocks"];
   export let parent: PropsWithChildren<BlocksWrapperProps>["parent"];
   export let path: PropsWithChildren<BlocksWrapperProps>["path"];
   export let styleProp: PropsWithChildren<BlocksWrapperProps>["styleProp"];
+  export let BlocksWrapperProps: PropsWithChildren<BlocksWrapperProps>["BlocksWrapperProps"];
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
@@ -60,9 +70,10 @@
   };
 </script>
 
-<div
+<svelte:element
+  this={BlocksWrapper}
   use:mitosis_styling={styleProp}
-  class={className() + " div"}
+  class={className() + " svelte-element"}
   builder-path={path}
   builder-parent-id={parent}
   {...{}}
@@ -75,12 +86,13 @@
   on:keypress={(event) => {
     onClick();
   }}
+  {...BlocksWrapperProps}
 >
   <slot />
-</div>
+</svelte:element>
 
 <style>
-  .div {
+  .svelte-element {
     display: flex;
     flex-direction: column;
     align-items: stretch;

package/src/components/blocks/blocks.svelte

@@ -1,5 +1,7 @@
 <script context="module" lang="ts">
-  export type BlocksProps = Partial<BlocksWrapperProps> & {
+  export type BlocksProps = Partial<
+    Omit<BlocksWrapperProps, "BlocksWrapper" | "BlocksWrapperProps">
+  > & {
     context?: Writable<BuilderContextInterface>;
     registeredComponents?: RegisteredComponents;
   };
@@ -32,7 +34,14 @@
   let componentsContext = getContext(ComponentsContext.key);
 </script>
 
-<BlocksWrapper {blocks} {parent} {path} {styleProp}>
+<BlocksWrapper
+  {blocks}
+  {parent}
+  {path}
+  {styleProp}
+  BlocksWrapper={$context?.BlocksWrapper}
+  BlocksWrapperProps={$context?.BlocksWrapperProps}
+>
   {#if blocks}
     {#each blocks as block ("render-block-" + block.id)}
       <Block

package/src/components/content/components/enable-editor.svelte

@@ -1,7 +1,12 @@
 <script context="module" lang="ts">
   type BuilderEditorProps = Omit<
     ContentProps,
-    "customComponents" | "data" | "apiVersion" | "isSsrAbTest"
+    | "customComponents"
+    | "data"
+    | "apiVersion"
+    | "isSsrAbTest"
+    | "blocksWrapper"
+    | "blocksWrapperProps"
   > & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
@@ -40,6 +45,7 @@
   import type { Writable } from "svelte/store";
 
   export let builderContextSignal: BuilderEditorProps["builderContextSignal"];
+  export let contentWrapper: BuilderEditorProps["contentWrapper"] = undefined;
   export let model: BuilderEditorProps["model"] = undefined;
   export let context: BuilderEditorProps["context"] = undefined;
   export let canTrack: BuilderEditorProps["canTrack"] = undefined;
@@ -49,6 +55,8 @@
   export let enrich: BuilderEditorProps["enrich"] = undefined;
   export let content: BuilderEditorProps["content"] = undefined;
   export let showContent: BuilderEditorProps["showContent"];
+  export let contentWrapperProps: BuilderEditorProps["contentWrapperProps"] =
+    undefined;
 
   function mergeNewContent(newContent: BuilderContent) {
     const newContentValue = {
@@ -265,6 +273,7 @@
   let forceReRenderCount = 0;
   let lastUpdated = 0;
   let shouldSendResetCookie = false;
+  let ContentWrapper = contentWrapper || "div";
   let httpReqsData = {};
   let clicked = false;
 
@@ -345,7 +354,8 @@
 </script>
 
 {#if $builderContextSignal.content}
-  <div
+  <svelte:element
+    this={ContentWrapper}
     {...{}}
     key={forceReRenderCount}
     bind:this={elementRef}
@@ -361,6 +371,7 @@
           hidden: true,
           "aria-hidden": true,
         }}
+    {...contentWrapperProps}
     class={`variant-${content?.testVariationId || content?.id}`}
     on:initeditingbldr={(event) => {
       elementRef_onIniteditingbldr(event);
@@ -370,5 +381,5 @@
     }}
   >
     <slot />
-  </div>
+  </svelte:element>
 {/if}

package/src/components/content/content.svelte

@@ -35,11 +35,16 @@
   export let context: ContentProps["context"] = undefined;
   export let apiKey: ContentProps["apiKey"];
   export let apiVersion: ContentProps["apiVersion"] = undefined;
+  export let blocksWrapper: ContentProps["blocksWrapper"] = undefined;
+  export let blocksWrapperProps: ContentProps["blocksWrapperProps"] = undefined;
   export let model: ContentProps["model"] = undefined;
   export let canTrack: ContentProps["canTrack"] = undefined;
   export let includeRefs: ContentProps["includeRefs"] = undefined;
   export let enrich: ContentProps["enrich"] = undefined;
   export let showContent: ContentProps["showContent"];
+  export let contentWrapper: ContentProps["contentWrapper"] = undefined;
+  export let contentWrapperProps: ContentProps["contentWrapperProps"] =
+    undefined;
   export let isSsrAbTest: ContentProps["isSsrAbTest"];
 
   function contentSetState(newRootState: BuilderRenderState) {
@@ -103,6 +108,8 @@
       {}
     ),
     inheritedStyles: {},
+    BlocksWrapper: blocksWrapper || "div",
+    BlocksWrapperProps: blocksWrapperProps || {},
   });
 
   setContext(ComponentsContext.key, {
@@ -121,6 +128,8 @@
   {enrich}
   {showContent}
   {builderContextSignal}
+  {contentWrapper}
+  {contentWrapperProps}
   {...{}}
 >
   {#if isSsrAbTest}

package/src/components/content-variants/content-variants.svelte

@@ -38,6 +38,13 @@
   export let locale: VariantsProviderProps["locale"] = undefined;
   export let includeRefs: VariantsProviderProps["includeRefs"] = undefined;
   export let enrich: VariantsProviderProps["enrich"] = undefined;
+  export let blocksWrapper: VariantsProviderProps["blocksWrapper"] = undefined;
+  export let blocksWrapperProps: VariantsProviderProps["blocksWrapperProps"] =
+    undefined;
+  export let contentWrapper: VariantsProviderProps["contentWrapper"] =
+    undefined;
+  export let contentWrapperProps: VariantsProviderProps["contentWrapperProps"] =
+    undefined;
 
   $: updateCookieAndStylesScriptStr = () => {
     return getUpdateCookieAndStylesScript(
@@ -105,6 +112,10 @@
       {includeRefs}
       {enrich}
       isSsrAbTest={shouldRenderVariants}
+      {blocksWrapper}
+      {blocksWrapperProps}
+      {contentWrapper}
+      {contentWrapperProps}
     />
   {/each}
 {/if}
@@ -124,4 +135,8 @@
   {includeRefs}
   {enrich}
   isSsrAbTest={shouldRenderVariants}
+  {blocksWrapper}
+  {blocksWrapperProps}
+  {contentWrapper}
+  {contentWrapperProps}
 />

package/src/components/content-variants/content-variants.types.ts

@@ -17,4 +17,20 @@ export interface ContentVariantsPrps {
   /** @deprecated use `enrich` instead **/
   includeRefs?: boolean;
   enrich?: boolean;
+  /**
+   * The element that wraps your content. Defaults to `div` ('ScrollView' in React Native).
+   */
+  contentWrapper?: any;
+  /**
+   * Additonal props to pass to `contentWrapper`. Defaults to `{}`.
+   */
+  contentWrapperProps?: any;
+  /**
+   * The element that wraps your blocks. Defaults to `div` ('ScrollView' in React Native).
+   */
+  blocksWrapper?: any;
+  /**
+   * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+   */
+  blocksWrapperProps?: any;
 }

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.8.1"
+export const SDK_VERSION = "0.9.0"