@builder.io/sdk-vue 0.11.1 → 0.11.3

package/README.md

@@ -1,8 +1,6 @@
-# Builder.io Vue 2.0 SDK (BETA)
+# Builder.io Vue SDK
 
-This is the 2.0 Vue SDK. It is currently in beta.
-
-NOTE: If you are looking for the stable 1.0 Vue SDK, you can find it [here](/packages/vue)
+This is the Builder Vue SDK. It is currently in beta.
 
 ## Getting Started
 
@@ -10,20 +8,25 @@ NOTE: If you are looking for the stable 1.0 Vue SDK, you can find it [here](/pac
 npm install @builder.io/sdk-vue
 ```
 
-NOTE: if you are using Nuxt, you will need to transpile the SDK:
+NOTE: if you are using Nuxt, you will need to add the SDK's Nuxt module in `nuxt.config.js`:
 
 ```js
-// nuxt.config.js
+// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  build: {
-    /**
-     * You need to transpile the Builder.io Vue SDK for it to work correctly.
-     */
-    transpile: ['@builder.io/sdk-vue'],
-  },
+  module: ['@builder.io/sdk-vue/nuxt'],
 });
 ```
 
+## CSS
+
+If you are using a SSR framework _other_ than Nuxt, you will need to manually import the CSS by adding the following to your entrypoint, before rendering Builder Content:
+
+```html
+<script>
+  import '@builder.io/sdk-vue/css';
+</script>
+```
+
 ## Mitosis
 
 This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).

package/lib/browser/block-styles.4dd5487a.js

@@ -0,0 +1,70 @@
+import "./style.css";
+import { defineComponent as k, resolveComponent as y, openBlock as f, createBlock as x, createCommentVNode as b } from "vue";
+import { I as B, T as g, g as m, c as d, a as _, b as u, _ as v } from "./index.cf8f3cf0.js";
+import { c as r } from "./css.bee71b93.js";
+const C = k({
+  name: "block-styles",
+  components: { InlinedStyles: B },
+  props: ["block", "context"],
+  data() {
+    return { TARGET: g };
+  },
+  computed: {
+    canShowBlock() {
+      const t = m({
+        block: this.block,
+        localState: this.context.localState,
+        rootState: this.context.rootState,
+        rootSetState: this.context.rootSetState,
+        context: this.context.context,
+        shouldEvaluateBindings: !0
+      });
+      return d(t.hide) ? !t.hide : d(t.show) ? t.show : !0;
+    },
+    css() {
+      var i;
+      const t = m({
+        block: this.block,
+        localState: this.context.localState,
+        rootState: this.context.rootState,
+        rootSetState: this.context.rootSetState,
+        context: this.context.context,
+        shouldEvaluateBindings: !0
+      }), e = t.responsiveStyles, o = this.context.content, c = _(
+        ((i = o == null ? void 0 : o.meta) == null ? void 0 : i.breakpoints) || {}
+      ), a = e == null ? void 0 : e.large, l = e == null ? void 0 : e.medium, s = e == null ? void 0 : e.small, n = t.id;
+      if (!n)
+        return "";
+      const p = a ? r({
+        className: n,
+        styles: a
+      }) : "", S = l ? r({
+        className: n,
+        styles: l,
+        mediaQuery: u(
+          "medium",
+          c
+        )
+      }) : "", h = s ? r({
+        className: n,
+        styles: s,
+        mediaQuery: u(
+          "small",
+          c
+        )
+      }) : "";
+      return [p, S, h].join(" ");
+    }
+  }
+});
+function w(t, e, o, c, a, l) {
+  const s = y("inlined-styles");
+  return t.TARGET !== "reactNative" && t.css && t.canShowBlock ? (f(), x(s, {
+    key: 0,
+    styles: t.css
+  }, null, 8, ["styles"])) : b("v-if", !0);
+}
+const I = /* @__PURE__ */ v(C, [["render", w], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/block/components/block-styles.vue"]]);
+export {
+  I as default
+};

package/lib/browser/block-styles.6d4042d1.cjs

@@ -0,0 +1 @@
+var x=require("./style.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),s=require("./index.e420a426.cjs"),u=require("./css.c905e549.cjs"),k=o.defineComponent({name:"block-styles",components:{InlinedStyles:s.InlinedStyles},props:["block","context"],data(){return{TARGET:s.TARGET}},computed:{canShowBlock(){const e=s.getProcessedBlock({block:this.block,localState:this.context.localState,rootState:this.context.rootState,rootSetState:this.context.rootSetState,context:this.context.context,shouldEvaluateBindings:!0});return s.checkIsDefined(e.hide)?!e.hide:s.checkIsDefined(e.show)?e.show:!0},css(){var d;const e=s.getProcessedBlock({block:this.block,localState:this.context.localState,rootState:this.context.rootState,rootSetState:this.context.rootSetState,context:this.context.context,shouldEvaluateBindings:!0}),t=e.responsiveStyles,c=this.context.content,r=s.getSizesForBreakpoints(((d=c==null?void 0:c.meta)==null?void 0:d.breakpoints)||{}),a=t==null?void 0:t.large,i=t==null?void 0:t.medium,n=t==null?void 0:t.small,l=e.id;if(!l)return"";const S=a?u.createCssClass({className:l,styles:a}):"",m=i?u.createCssClass({className:l,styles:i,mediaQuery:s.getMaxWidthQueryForSize("medium",r)}):"",h=n?u.createCssClass({className:l,styles:n,mediaQuery:s.getMaxWidthQueryForSize("small",r)}):"";return[S,m,h].join(" ")}}});function p(e,t,c,r,a,i){const n=o.resolveComponent("inlined-styles");return e.TARGET!=="reactNative"&&e.css&&e.canShowBlock?(o.openBlock(),o.createBlock(n,{key:0,styles:e.css},null,8,["styles"])):o.createCommentVNode("v-if",!0)}const y=s._export_sfc(k,[["render",p],["__file","/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/block/components/block-styles.vue"]]);exports.default=y;

package/lib/{node/block-wrapper.f2c88f1b.js → browser/block-wrapper.56a0b862.js}

@@ -1,8 +1,8 @@
 import "./style.css";
 import { defineComponent as l, openBlock as e, createBlock as t, resolveDynamicComponent as r, mergeProps as n, toHandlers as a, withCtx as c, renderSlot as p } from "vue";
-import { g as s, a as i } from "./get-block-actions.3fb3fc2a.js";
-import { _ as k } from "./index.cc3260e1.js";
-import "node:module";
+import { g as s, a as i } from "./get-block-actions.ea82379d.js";
+import { _ as k } from "./index.cf8f3cf0.js";
+import "./css.bee71b93.js";
 const m = l({
   name: "block-wrapper",
   props: ["Wrapper", "block", "context", "hasChildren"],

package/lib/browser/block-wrapper.d76c58a5.cjs

@@ -0,0 +1 @@
+var u=require("./style.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),t=require("./get-block-actions.6c569f39.cjs"),r=require("./index.e420a426.cjs");require("./css.c905e549.cjs");const n=o.defineComponent({name:"block-wrapper",props:["Wrapper","block","context","hasChildren"],data(){return{getBlockActions:t.getBlockActions,getBlockProperties:t.getBlockProperties}}});function c(e,s,a,p,i,k){return e.hasChildren?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.Wrapper),o.mergeProps({key:0},e.getBlockProperties({block:e.block,context:e.context}),o.toHandlers(e.getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context,stripPrefix:!0}))),{default:o.withCtx(()=>[o.renderSlot(e.$slots,"default")]),_:3},16)):(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.Wrapper),o.mergeProps({key:1},e.getBlockProperties({block:e.block,context:e.context}),o.toHandlers(e.getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context,stripPrefix:!0}))),null,16))}const l=r._export_sfc(n,[["render",c],["__file","/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/block/components/block-wrapper.vue"]]);exports.default=l;

package/lib/browser/blocks/button/button.types.d.ts

@@ -0,0 +1,6 @@
+export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+    link?: string;
+    openLinkInNewTab?: boolean;
+}

package/lib/browser/blocks/button/button.vue.d.ts

@@ -1,13 +1,4 @@
 import { filterAttrs } from "../helpers.js";
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-export interface ButtonProps {
-    attributes?: any;
-    text?: string;
-    link?: string;
-    openLinkInNewTab?: boolean;
-}
 declare const _default: import("vue").DefineComponent<Readonly<{
     text?: any;
     link?: any;

package/lib/browser/blocks/columns/columns.types.d.ts

@@ -0,0 +1,15 @@
+import type { BuilderBlock } from '../../types/builder-block.js';
+import type { BuilderComponentsProp } from '../../types/builder-props.js';
+type Column = {
+    blocks: BuilderBlock[];
+    width?: number;
+};
+type StackColumnsAt = 'tablet' | 'mobile' | 'never';
+export interface ColumnProps extends BuilderComponentsProp {
+    columns?: Column[];
+    builderBlock: BuilderBlock;
+    space?: number;
+    stackColumnsAt?: StackColumnsAt;
+    reverseColumnsWhenStacked?: boolean;
+}
+export {};

package/lib/browser/blocks/columns/columns.vue.d.ts

@@ -1,20 +1,6 @@
 import type { SizeName } from "../../constants/device-sizes.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
-import type { BuilderComponentsProp } from "../../types/builder-props.js";
 import type { Dictionary } from "../../types/typescript.js";
-type Column = {
-    blocks: BuilderBlock[];
-    width?: number;
-};
 type CSSVal = string | number;
-type StackColumnsAt = "tablet" | "mobile" | "never";
-export interface ColumnProps extends BuilderComponentsProp {
-    columns?: Column[];
-    builderBlock: BuilderBlock;
-    space?: number;
-    stackColumnsAt?: StackColumnsAt;
-    reverseColumnsWhenStacked?: boolean;
-}
 declare const _default: import("vue").DefineComponent<Readonly<{
     builderContext?: any;
     columns?: any;

package/lib/browser/blocks/fragment/fragment.types.d.ts

@@ -0,0 +1,5 @@
+export interface FragmentProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+}

package/lib/browser/blocks/fragment/fragment.vue.d.ts

@@ -1,7 +1,2 @@
-export interface FragmentProps {
-    maxWidth?: number;
-    attributes?: any;
-    children?: any;
-}
 declare const _default: import("vue").DefineComponent<Readonly<{}>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Readonly<{}>>>, {}, {}>;
 export default _default;

package/lib/browser/blocks/image/image.types.d.ts

@@ -0,0 +1,19 @@
+import type { BuilderBlock } from '../../types/builder-block.js';
+export interface ImageProps {
+    className?: string;
+    image: string;
+    sizes?: string;
+    lazy?: boolean;
+    height?: number;
+    width?: number;
+    altText?: string;
+    backgroundSize?: 'cover' | 'contain';
+    backgroundPosition?: string;
+    srcset?: string;
+    aspectRatio?: number;
+    children?: any;
+    fitContent?: boolean;
+    builderBlock?: BuilderBlock;
+    noWebp?: boolean;
+    src?: string;
+}

package/lib/browser/blocks/image/image.vue.d.ts

@@ -1,22 +1,3 @@
-import type { BuilderBlock } from "../../types/builder-block.js";
-export interface ImageProps {
-    className?: string;
-    image: string;
-    sizes?: string;
-    lazy?: boolean;
-    height?: number;
-    width?: number;
-    altText?: string;
-    backgroundSize?: "cover" | "contain";
-    backgroundPosition?: string;
-    srcset?: string;
-    aspectRatio?: number;
-    children?: any;
-    fitContent?: boolean;
-    builderBlock?: BuilderBlock;
-    noWebp?: boolean;
-    src?: string;
-}
 declare const _default: import("vue").DefineComponent<Readonly<{
     image?: any;
     className?: any;

package/lib/browser/blocks/section/section.types.d.ts

@@ -0,0 +1,6 @@
+export interface SectionProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+    builderBlock?: any;
+}

package/lib/browser/blocks/section/section.vue.d.ts

@@ -1,13 +1,4 @@
 import { filterAttrs } from "../helpers.js";
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-export interface SectionProps {
-    maxWidth?: number;
-    attributes?: any;
-    children?: any;
-    builderBlock?: any;
-}
 declare const _default: import("vue").DefineComponent<Readonly<{
     attributes?: any;
     maxWidth?: any;

package/lib/browser/blocks/symbol/symbol.types.d.ts

@@ -0,0 +1,18 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { BuilderComponentsProp } from '../../types/builder-props.js';
+interface SymbolInfo {
+    model?: string;
+    entry?: string;
+    data?: any;
+    content?: BuilderContent;
+    inline?: boolean;
+    dynamic?: boolean;
+}
+export interface SymbolProps extends BuilderComponentsProp {
+    symbol?: SymbolInfo;
+    dataOnly?: boolean;
+    dynamic?: boolean;
+    attributes?: any;
+    inheritState?: boolean;
+}
+export {};

package/lib/browser/blocks/symbol/symbol.vue.d.ts

@@ -1,27 +1,4 @@
-import type { BuilderContent } from "../../types/builder-content.js";
-import type { BuilderComponentsProp } from "../../types/builder-props.js";
 import { filterAttrs } from "../helpers.js";
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-export interface SymbolInfo {
-    model?: string;
-    entry?: string;
-    data?: any;
-    content?: BuilderContent;
-    inline?: boolean;
-    dynamic?: boolean;
-}
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-export interface SymbolProps extends BuilderComponentsProp {
-    symbol?: SymbolInfo;
-    dataOnly?: boolean;
-    dynamic?: boolean;
-    attributes?: any;
-    inheritState?: boolean;
-}
 declare const _default: import("vue").DefineComponent<Readonly<{
     symbol?: any;
     builderContext?: any;

package/lib/browser/blocks/text/text.types.d.ts

@@ -0,0 +1,3 @@
+export type TextProps = {
+    text?: string;
+};

package/lib/browser/blocks/text/text.vue.d.ts

@@ -1,6 +1,3 @@
-export interface TextProps {
-    text?: string;
-}
 declare const _default: import("vue").DefineComponent<Readonly<{
     text?: any;
 }>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Readonly<{

package/lib/browser/blocks/video/video.types.d.ts

@@ -0,0 +1,21 @@
+import type { BuilderBlock } from '../../types/builder-block.js';
+export interface VideoProps {
+    attributes?: any;
+    video?: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    aspectRatio?: number;
+    width?: number;
+    height?: number;
+    fit?: 'contain' | 'cover' | 'fill';
+    preload?: 'auto' | 'metadata' | 'none';
+    position?: 'center' | 'top' | 'left' | 'right' | 'bottom' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+    posterImage?: string;
+    lazyLoad?: boolean;
+    children?: any;
+    fitContent?: boolean;
+    builderBlock?: BuilderBlock;
+}

package/lib/browser/blocks/video/video.vue.d.ts

@@ -1,24 +1,3 @@
-import type { BuilderBlock } from "../../types/builder-block.js";
-export interface VideoProps {
-    attributes?: any;
-    video?: string;
-    autoPlay?: boolean;
-    controls?: boolean;
-    muted?: boolean;
-    loop?: boolean;
-    playsInline?: boolean;
-    aspectRatio?: number;
-    width?: number;
-    height?: number;
-    fit?: "contain" | "cover" | "fill";
-    preload?: "auto" | "metadata" | "none";
-    position?: "center" | "top" | "left" | "right" | "bottom" | "top left" | "top right" | "bottom left" | "bottom right";
-    posterImage?: string;
-    lazyLoad?: boolean;
-    children?: any;
-    fitContent?: boolean;
-    builderBlock?: BuilderBlock;
-}
 declare const _default: import("vue").DefineComponent<Readonly<{
     video?: any;
     attributes?: any;

package/lib/{node/component-ref.130474d3.js → browser/component-ref.6b764356.js}

@@ -1,17 +1,17 @@
 import "./style.css";
-import { defineComponent as f, openBlock as t, createBlock as c, resolveDynamicComponent as v, mergeProps as B, withCtx as P, renderSlot as S, resolveComponent as m, normalizeProps as h, createElementBlock as u, Fragment as k, renderList as d, createCommentVNode as w } from "vue";
-import { _ as g, B as y, a as W, w as R } from "./index.cc3260e1.js";
-import { g as I, a as C } from "./get-block-actions.3fb3fc2a.js";
-import "node:module";
-const E = f({
+import { defineComponent as m, openBlock as r, createBlock as i, resolveDynamicComponent as u, mergeProps as k, withCtx as d, renderSlot as P, resolveComponent as g, normalizeProps as B, createElementBlock as C, Fragment as $, renderList as h, createCommentVNode as w } from "vue";
+import { _ as f, B as S, w as W } from "./index.cf8f3cf0.js";
+import { g as R, a as b } from "./get-block-actions.ea82379d.js";
+import "./css.bee71b93.js";
+const I = m({
   name: "interactive-element",
   props: ["wrapperProps", "includeBlockProps", "block", "context", "Wrapper"],
   data() {
-    return { getBlockActions: I, getBlockProperties: C };
+    return { getBlockActions: R, getBlockProperties: b };
   }
 });
-function A(e, n, p, s, r, l) {
-  return t(), c(v(e.Wrapper), B({
+function E(e, o, p, c, t, s) {
+  return r(), i(u(e.Wrapper), k({
     attributes: e.includeBlockProps ? {
       ...e.getBlockProperties({
         block: e.block,
@@ -26,44 +26,40 @@ function A(e, n, p, s, r, l) {
       })
     } : {}
   }, e.wrapperProps), {
-    default: P(() => [
-      S(e.$slots, "default")
+    default: d(() => [
+      P(e.$slots, "default")
     ]),
     _: 3
   }, 16, ["attributes"]);
 }
-const b = /* @__PURE__ */ g(E, [["render", A], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/block/components/interactive-element.vue"]]), O = ({
+const l = /* @__PURE__ */ f(I, [["render", E], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/block/components/interactive-element.vue"]]), y = ({
   componentOptions: e,
-  builderBlock: n,
+  builderBlock: o,
   context: p,
-  componentRef: s,
-  includeBlockProps: r,
-  isInteractive: l,
+  componentRef: c,
+  includeBlockProps: t,
+  isInteractive: s,
   contextValue: a
 }) => {
-  const i = {
+  const n = {
     ...e,
-    ...r ? {
-      attributes: C({
-        block: n,
+    ...t ? {
+      attributes: b({
+        block: o,
         context: a
       })
     } : {}
   };
-  return l ? {
-    Wrapper: s,
-    block: n,
+  return s ? {
+    Wrapper: c,
+    block: o,
     context: p,
     wrapperProps: e,
-    includeBlockProps: r
-  } : i;
-}, V = f({
+    includeBlockProps: t
+  } : n;
+}, A = m({
   name: "component-ref",
-  components: {
-    Block: y,
-    BlockStyles: W,
-    InteractiveElement: b
-  },
+  components: { Block: S, InteractiveElement: l },
   props: [
     "isInteractive",
     "componentRef",
@@ -76,14 +72,14 @@ const b = /* @__PURE__ */ g(E, [["render", A], ["__file", "/home/runner/work/bui
   ],
   data() {
     return {
-      Wrapper: this.isInteractive ? R(b) : this.componentRef,
-      getWrapperProps: O
+      Wrapper: this.isInteractive ? W(l) : this.componentRef,
+      getWrapperProps: y
     };
   }
 });
-function z(e, n, p, s, r, l) {
-  const a = m("block"), i = m("block-styles");
-  return e.componentRef ? (t(), c(v(e.Wrapper), h(B(
+function O(e, o, p, c, t, s) {
+  const a = g("block");
+  return e.componentRef ? (r(), i(u(e.Wrapper), B(k(
     { key: 0 },
     e.getWrapperProps({
       componentOptions: e.componentOptions,
@@ -95,23 +91,18 @@ function z(e, n, p, s, r, l) {
       contextValue: e.context
     })
   )), {
-    default: P(() => [
-      (t(!0), u(k, null, d(e.blockChildren, (o, $) => (t(), c(a, {
-        key: "block-" + o.id,
-        block: o,
+    default: d(() => [
+      (r(!0), C($, null, h(e.blockChildren, (n, v) => (r(), i(a, {
+        key: n.id,
+        block: n,
         context: e.context,
         registeredComponents: e.registeredComponents
-      }, null, 8, ["block", "context", "registeredComponents"]))), 128)),
-      (t(!0), u(k, null, d(e.blockChildren, (o, $) => (t(), c(i, {
-        key: "block-style-" + o.id,
-        block: o,
-        context: e.context
-      }, null, 8, ["block", "context"]))), 128))
+      }, null, 8, ["block", "context", "registeredComponents"]))), 128))
     ]),
     _: 1
   }, 16)) : w("v-if", !0);
 }
-const q = /* @__PURE__ */ g(V, [["render", z], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/block/components/component-ref/component-ref.vue"]]);
+const N = /* @__PURE__ */ f(A, [["render", O], ["__file", "/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/block/components/component-ref/component-ref.vue"]]);
 export {
-  q as default
+  N as default
 };

package/lib/browser/component-ref.c01f28a8.cjs

@@ -0,0 +1 @@
+var v=require("./style.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),c=require("./index.e420a426.cjs"),a=require("./get-block-actions.6c569f39.cjs");require("./css.c905e549.cjs");const k=o.defineComponent({name:"interactive-element",props:["wrapperProps","includeBlockProps","block","context","Wrapper"],data(){return{getBlockActions:a.getBlockActions,getBlockProperties:a.getBlockProperties}}});function d(e,t,p,s,n,l){return o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.Wrapper),o.mergeProps({attributes:e.includeBlockProps?{...e.getBlockProperties({block:e.block,context:e.context}),...e.getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context})}:{}},e.wrapperProps),{default:o.withCtx(()=>[o.renderSlot(e.$slots,"default")]),_:3},16,["attributes"])}const u=c._export_sfc(k,[["render",d],["__file","/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/block/components/interactive-element.vue"]]),f=({componentOptions:e,builderBlock:t,context:p,componentRef:s,includeBlockProps:n,isInteractive:l,contextValue:i})=>{const r={...e,...n?{attributes:a.getBlockProperties({block:t,context:i})}:{}};return l?{Wrapper:s,block:t,context:p,wrapperProps:e,includeBlockProps:n}:r},b=o.defineComponent({name:"component-ref",components:{Block:c.Block,InteractiveElement:u},props:["isInteractive","componentRef","componentOptions","builderBlock","context","includeBlockProps","blockChildren","registeredComponents"],data(){return{Wrapper:this.isInteractive?c.wrapComponentRef(u):this.componentRef,getWrapperProps:f}}});function B(e,t,p,s,n,l){const i=o.resolveComponent("block");return e.componentRef?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.Wrapper),o.normalizeProps(o.mergeProps({key:0},e.getWrapperProps({componentOptions:e.componentOptions,builderBlock:e.builderBlock,context:e.context,componentRef:e.componentRef,includeBlockProps:e.includeBlockProps,isInteractive:e.isInteractive,contextValue:e.context}))),{default:o.withCtx(()=>[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.blockChildren,(r,m)=>(o.openBlock(),o.createBlock(i,{key:r.id,block:r,context:e.context,registeredComponents:e.registeredComponents},null,8,["block","context","registeredComponents"]))),128))]),_:1},16)):o.createCommentVNode("v-if",!0)}const g=c._export_sfc(b,[["render",B],["__file","/home/runner/work/builder/builder/packages/sdks/output/vue/src/components/block/components/component-ref/component-ref.vue"]]);exports.default=g;

package/lib/browser/components/blocks/blocks.types.d.ts

@@ -0,0 +1,6 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../../context/types.js';
+import type { BlocksWrapperProps } from './blocks-wrapper.vue';
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
+    context?: BuilderContextInterface;
+    registeredComponents?: RegisteredComponents;
+};

package/lib/browser/components/blocks/blocks.vue.d.ts

@@ -1,9 +1,3 @@
-import type { BuilderContextInterface, RegisteredComponents } from "../../context/types.js";
-import type { BlocksWrapperProps } from "./blocks-wrapper.vue";
-export type BlocksProps = Partial<Omit<BlocksWrapperProps, "BlocksWrapper" | "BlocksWrapperProps">> & {
-    context?: BuilderContextInterface;
-    registeredComponents?: RegisteredComponents;
-};
 declare const _default: import("vue").DefineComponent<Readonly<{
     path?: any;
     blocks?: any;

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

@@ -3,19 +3,48 @@ import type { ApiVersion } from '../../types/api-version.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 import type { Nullable } from '../../types/typescript.js';
 export interface ContentVariantsPrps {
+    /**
+     * The Builder content JSON to render (required).
+     */
     content?: Nullable<BuilderContent>;
+    /**
+     * The Builder content `model` to render (required).
+     */
     model?: string;
+    /**
+     * Additional data to inject into your Builder content (optional).
+     */
     data?: {
         [key: string]: any;
     };
+    /**
+     *
+     */
     context?: BuilderRenderContext;
+    /**
+     * Your API Key: needed to dynamically fetch symbols (required).
+     */
     apiKey: string;
     apiVersion?: ApiVersion;
+    /**
+     * An array of custom components to register (optional).
+     */
     customComponents?: RegisteredComponent[];
+    /**
+     * A boolean to enable or disable tracking (optional). Defaults to `true`.
+     */
     canTrack?: boolean;
+    /**
+     * If provided, the API will auto-resolve localized objects to the value of this `locale` key (optional).
+     */
     locale?: string;
-    /** @deprecated use `enrich` instead **/
+    /** @deprecated use `enrich` instead */
     includeRefs?: boolean;
+    /**
+     * A boolean to enable or disable enriching API content (optional).
+     *
+     * Enriching will Include multilevel references in the response. Defaults to `false`.
+     */
     enrich?: boolean;
     /**
      * The element that wraps your content. Defaults to `div` ('ScrollView' in React Native).

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.11.1";
+export declare const SDK_VERSION = "0.11.3";

package/lib/browser/css.bee71b93.js

@@ -0,0 +1,22 @@
+import "./style.css";
+import { c as o } from "./index.cf8f3cf0.js";
+const c = (s) => s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), n = (s) => Object.entries(s).map(([r, e]) => {
+  if (typeof e == "string")
+    return `${c(r)}: ${e};`;
+}).filter(o), a = (s) => n(s).join(`
+`), l = ({
+  mediaQuery: s,
+  className: t,
+  styles: r
+}) => {
+  const e = `.${t} {
+    ${a(r)}
+  }`;
+  return s ? `${s} {
+      ${e}
+    }` : e;
+};
+export {
+  n as a,
+  l as c
+};

package/lib/browser/css.c905e549.cjs

@@ -0,0 +1,6 @@
+var l=require("./style.css");const n=require("./index.e420a426.cjs"),o=e=>e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),c=e=>Object.entries(e).map(([r,s])=>{if(typeof s=="string")return`${o(r)}: ${s};`}).filter(n.checkIsDefined),a=e=>c(e).join(`
+`),i=({mediaQuery:e,className:t,styles:r})=>{const s=`.${t} {
+    ${a(r)}
+  }`;return e?`${e} {
+      ${s}
+    }`:s};exports.convertStyleMapToCSSArray=c;exports.createCssClass=i;