@builder.io/sdk-solid 0.0.5 → 0.0.8

package/src/components/{render-block.js → render-block.jsx}

@@ -1,5 +1,3 @@
-import { mergeProps as _$mergeProps } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
@@ -12,7 +10,8 @@ import BuilderContext from "../context/builder.context";
 import { getBlockActions } from "../functions/get-block-actions";
 import { getProcessedBlock } from "../functions/get-processed-block";
 import BlockStyles from "./block-styles";
-export default function RenderBlock(props) {
+
+function RenderBlock(props) {
   const state = createMutable({
     get component() {
       const componentName = state.useBlock.component?.name;
@@ -85,70 +84,31 @@ export default function RenderBlock(props) {
 
   });
   const builderContext = useContext(BuilderContext);
-  return _$createComponent(Show, {
-    get when() {
-      return !state.componentInfo?.noWrap;
-    },
-
-    get children() {
-      return _$createComponent(Dynamic, _$mergeProps(() => state.propertiesAndActions, {
-        get style() {
-          return state.css;
-        },
-
-        get component() {
-          return state.tagName;
-        },
-
-        get children() {
-          return [_$createComponent(BlockStyles, {
-            get block() {
-              return state.useBlock;
-            }
-
-          }), _$createComponent(Show, {
-            get when() {
-              return state.componentRef;
-            },
-
-            get children() {
-              return _$createComponent(Dynamic, _$mergeProps(() => state.componentOptions, {
-                get builderBlock() {
-                  return state.useBlock;
-                },
-
-                get component() {
-                  return state.componentRef;
-                },
-
-                get children() {
-                  return _$createComponent(For, {
-                    get each() {
-                      return state.children;
-                    },
-
-                    children: (child, index) => _$createComponent(RenderBlock, {
-                      block: child
-                    })
-                  });
-                }
-
-              }));
-            }
-
-          }), _$createComponent(For, {
-            get each() {
-              return state.noCompRefChildren;
-            },
-
-            children: (child, index) => _$createComponent(RenderBlock, {
-              block: child
-            })
-          })];
-        }
-
-      }));
-    }
-
-  });
-}
+  return <>
+      <Show when={!state.componentInfo?.noWrap}>
+        <Dynamic {...state.propertiesAndActions} style={state.css} component={state.tagName}>
+          <BlockStyles block={state.useBlock}></BlockStyles>
+          <Show when={state.componentRef}>
+            <Dynamic {...state.componentOptions} builderBlock={state.useBlock} component={state.componentRef}>
+              <For each={state.children}>
+                {(child, _index) => {
+                const index = _index();
+
+                return <RenderBlock block={child}></RenderBlock>;
+              }}
+              </For>
+            </Dynamic>
+          </Show>
+          <For each={state.noCompRefChildren}>
+            {(child, _index) => {
+            const index = _index();
+
+            return <RenderBlock block={child}></RenderBlock>;
+          }}
+          </For>
+        </Dynamic>
+      </Show>
+    </>;
+}
+
+export default RenderBlock;

package/src/components/render-block.lite.tsx

@@ -12,7 +12,7 @@ import { getBlockActions } from "../functions/get-block-actions";
 import { getProcessedBlock } from "../functions/get-processed-block";
 import BlockStyles from "./block-styles.lite";
 
-export default function RenderBlock(props) {
+function RenderBlock(props) {
   const state = createMutable({
     get component() {
       const componentName = state.useBlock.component?.name;
@@ -94,15 +94,23 @@ export default function RenderBlock(props) {
               component={state.componentRef}
             >
               <For each={state.children}>
-                {(child, index) => <RenderBlock block={child}></RenderBlock>}
+                {(child, _index) => {
+                  const index = _index();
+                  return <RenderBlock block={child}></RenderBlock>;
+                }}
               </For>
             </Dynamic>
           </Show>
           <For each={state.noCompRefChildren}>
-            {(child, index) => <RenderBlock block={child}></RenderBlock>}
+            {(child, _index) => {
+              const index = _index();
+              return <RenderBlock block={child}></RenderBlock>;
+            }}
           </For>
         </Dynamic>
       </Show>
     </>
   );
 }
+
+export default RenderBlock;

package/src/components/render-blocks.jsx

@@ -0,0 +1,57 @@
+import { Show, For } from "solid-js";
+import { createMutable } from "solid-js/store";
+import { css } from "solid-styled-components";
+import { isEditing } from "../functions/is-editing";
+import RenderBlock from "./render-block";
+
+function RenderBlocks(props) {
+  const state = createMutable({
+    get className() {
+      return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    },
+
+    onClick() {
+      if (isEditing() && !props.blocks?.length) {
+        window.parent?.postMessage({
+          type: "builder.clickEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path
+          }
+        }, "*");
+      }
+    },
+
+    onMouseEnter() {
+      if (isEditing() && !props.blocks?.length) {
+        window.parent?.postMessage({
+          type: "builder.hoverEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path
+          }
+        }, "*");
+      }
+    }
+
+  });
+  return <div class={state.className + " " + css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch"
+  })} builder-path={props.path} builder-parent-id={props.parent} dataSet={{
+    class: state.className
+  }} onClick={event => state.onClick()} onMouseEnter={event => state.onMouseEnter()}>
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, _index) => {
+          const index = _index();
+
+          return <RenderBlock key={block.id} block={block}></RenderBlock>;
+        }}
+        </For>
+      </Show>
+    </div>;
+}
+
+export default RenderBlocks;

package/src/components/render-blocks.lite.tsx

@@ -6,7 +6,7 @@ import { css } from "solid-styled-components";
 import { isEditing } from "../functions/is-editing";
 import RenderBlock from "./render-block.lite";
 
-export default function RenderBlocks(props) {
+function RenderBlocks(props) {
   const state = createMutable({
     get className() {
       return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -62,11 +62,14 @@ export default function RenderBlocks(props) {
     >
       <Show when={props.blocks}>
         <For each={props.blocks}>
-          {(block, index) => (
-            <RenderBlock key={block.id} block={block}></RenderBlock>
-          )}
+          {(block, _index) => {
+            const index = _index();
+            return <RenderBlock key={block.id} block={block}></RenderBlock>;
+          }}
         </For>
       </Show>
     </div>
   );
 }
+
+export default RenderBlocks;

package/src/components/render-content/components/{render-styles.js → render-styles.jsx}

@@ -1,10 +1,6 @@
-import { template as _$template } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<style></style>`, 2);
-
 import { createMutable } from "solid-js/store";
-export default function RenderStyles(props) {
+
+function RenderStyles(props) {
   const state = createMutable({
     getCssFromFont(font) {
       // TODO: compute what font sizes are used and only load those.......
@@ -71,11 +67,7 @@ ${state.getFontCss({
     }
 
   });
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    _$insert(_el$, () => state.getInjectedStyles());
+  return <style>{state.getInjectedStyles()}</style>;
+}
 
-    return _el$;
-  })();
-}
+export default RenderStyles;

package/src/components/render-content/components/render-styles.lite.tsx

@@ -1,6 +1,6 @@
 import { createMutable } from "solid-js/store";
 
-export default function RenderStyles(props) {
+function RenderStyles(props) {
   const state = createMutable({
     getCssFromFont(font: CustomFont) {
       // TODO: compute what font sizes are used and only load those.......
@@ -68,3 +68,5 @@ ${state.getFontCss({
 
   return <style>{state.getInjectedStyles()}</style>;
 }
+
+export default RenderStyles;

package/src/components/render-content/{render-content.js → render-content.jsx}

@@ -1,13 +1,3 @@
-import { template as _$template } from "solid-js/web";
-import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);
-
 import { Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
@@ -24,7 +14,8 @@ import { evaluate } from "../../functions/evaluate";
 import { getFetch } from "../../functions/get-fetch";
 import { TARGET } from "../../constants/target";
 import RenderStyles from "./components/render-styles";
-export default function RenderContent(props) {
+
+function RenderContent(props) {
   const state = createMutable({
     get useContent() {
       const mergedContent = { ...props.content,
@@ -185,79 +176,35 @@ export default function RenderContent(props) {
       state.emitStateUpdate();
     }
   });
-  return _$createComponent(Dynamic, {
-    value: {
-      get content() {
-        return state.useContent;
-      },
-
-      get state() {
-        return state.state;
-      },
-
-      get context() {
-        return state.context;
-      },
-
-      get apiKey() {
-        return props.apiKey;
-      }
-
+  return <Dynamic value={{
+    get content() {
+      return state.useContent;
     },
 
-    get component() {
-      return BuilderContext.Provider;
+    get state() {
+      return state.state;
     },
 
-    get children() {
-      return _$createComponent(Show, {
-        get when() {
-          return state.useContent;
-        },
-
-        get children() {
-          const _el$ = _tmpl$.cloneNode(true);
-
-          _el$.$$click = event => track("click", {
-            contentId: state.useContent.id
-          });
-
-          _$insert(_el$, _$createComponent(Show, {
-            get when() {
-              return (state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative";
-            },
-
-            get children() {
-              return _$createComponent(RenderStyles, {
-                get cssCode() {
-                  return state.useContent.data.cssCode;
-                },
-
-                get customFonts() {
-                  return state.useContent.data.customFonts;
-                }
-
-              });
-            }
-
-          }), null);
-
-          _$insert(_el$, _$createComponent(RenderBlocks, {
-            get blocks() {
-              return state.useContent?.data?.blocks;
-            }
-
-          }), null);
-
-          _$effect(() => _$setAttribute(_el$, "data-builder-content-id", state.useContent?.id));
-
-          return _el$;
-        }
+    get context() {
+      return state.context;
+    },
 
-      });
+    get apiKey() {
+      return props.apiKey;
     }
 
-  });
+  }} component={BuilderContext.Provider}>
+      <Show when={state.useContent}>
+        <div onClick={event => track("click", {
+        contentId: state.useContent.id
+      })} data-builder-content-id={state.useContent?.id}>
+          <Show when={(state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative"}>
+            <RenderStyles cssCode={state.useContent.data.cssCode} customFonts={state.useContent.data.customFonts}></RenderStyles>
+          </Show>
+          <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
+        </div>
+      </Show>
+    </Dynamic>;
 }
 
-_$delegateEvents(["click"]);
+export default RenderContent;

package/src/components/render-content/render-content.lite.tsx

@@ -19,7 +19,7 @@ import { getFetch } from "../../functions/get-fetch";
 import { TARGET } from "../../constants/target";
 import RenderStyles from "./components/render-styles.lite";
 
-export default function RenderContent(props) {
+function RenderContent(props) {
   const state = createMutable({
     get useContent() {
       const mergedContent: BuilderContent = {
@@ -227,3 +227,5 @@ export default function RenderContent(props) {
     </Dynamic>
   );
 }
+
+export default RenderContent;

package/src/index.js

@@ -1,13 +1,13 @@
-import("./index-helpers/top-of-file");
-import { isEditing } from "./functions/is-editing";
+import("./index-helpers/top-of-file.js");
+import { isEditing } from "./functions/is-editing.js";
 if (isEditing()) {
-  import("./scripts/init-editing");
+  import("./scripts/init-editing.js");
 }
-export * from "./index-helpers/blocks-exports";
-export * from "./functions/is-editing";
-export * from "./functions/is-previewing";
-export * from "./functions/register-component";
-export * from "./functions/register";
-export * from "./functions/set-editor-settings";
-export * from "./functions/get-content";
-export * from "./functions/get-builder-search-params";
+export * from "./index-helpers/blocks-exports.js";
+export * from "./functions/is-editing.js.js";
+export * from "./functions/is-previewing.js";
+export * from "./functions/register-component.js";
+export * from "./functions/register.js";
+export * from "./functions/set-editor-settings.js";
+export * from "./functions/get-content.js";
+export * from "./functions/get-builder-search-params.js";

package/src/blocks/button.js

@@ -1,32 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<a role="button"></a>`, 2);
-
-export default function Button(props) {
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    _$spread(_el$, () => props.attributes, false, true);
-
-    _$insert(_el$, () => props.text);
-
-    _$effect(_p$ => {
-      const _v$ = props.link,
-            _v$2 = props.openLinkInNewTab ? "_blank" : undefined;
-
-      _v$ !== _p$._v$ && _$setAttribute(_el$, "href", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "target", _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
-registerComponent(Button, {name:'Core:Button',builtIn:true,image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',defaultStyles:{appearance:'none',paddingTop:'15px',paddingBottom:'15px',paddingLeft:'25px',paddingRight:'25px',backgroundColor:'#000000',color:'white',borderRadius:'4px',textAlign:'center',cursor:'pointer'},inputs:[{name:'text',type:'text',defaultValue:'Click me!',bubble:true},{name:'link',type:'url',bubble:true},{name:'openLinkInNewTab',type:'boolean',defaultValue:false,friendlyName:'Open link in new tab'}],static:true,noWrap:true});

package/src/blocks/fragment.js

@@ -1,15 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<span></span>`, 2);
-
-export default function FragmentComponent(props) {
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    _$insert(_el$, () => props.children);
-
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
-registerComponent(FragmentComponent, {name:'Fragment',static:true,hidden:true,builtIn:true,canHaveChildren:true,noWrap:true});

package/src/blocks/img.js

@@ -1,39 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<img>`, 1);
-
-import { isEditing } from "../functions/is-editing";
-export default function ImgComponent(props) {
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    _$spread(_el$, () => props.attributes, false, false);
-
-    _$effect(_p$ => {
-      const _v$ = props.backgroundSize || "cover",
-            _v$2 = props.backgroundPosition || "center",
-            _v$3 = isEditing() && props.imgSrc || "default-key",
-            _v$4 = props.altText,
-            _v$5 = props.imgSrc;
-
-      _v$ !== _p$._v$ && _el$.style.setProperty("object-fit", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _el$.style.setProperty("object-position", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && _$setAttribute(_el$, "key", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && _$setAttribute(_el$, "alt", _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && _$setAttribute(_el$, "src", _p$._v$5 = _v$5);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined,
-      _v$4: undefined,
-      _v$5: undefined
-    });
-
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
-registerComponent(ImgComponent, {name:'Raw:Img',hideFromInsertMenu:true,builtIn:true,image:'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',inputs:[{name:'image',bubble:true,type:'file',allowedFileTypes:['jpeg','jpg','png','svg'],required:true}],noWrap:true,static:true});

package/src/blocks/input.js

@@ -1,45 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<input>`, 1);
-
-import { isEditing } from "../functions/is-editing";
-export default function FormInputComponent(props) {
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    _$spread(_el$, () => props.attributes, false, false);
-
-    _$effect(_p$ => {
-      const _v$ = isEditing() && props.defaultValue ? props.defaultValue : "default-key",
-            _v$2 = props.placeholder,
-            _v$3 = props.type,
-            _v$4 = props.name,
-            _v$5 = props.value,
-            _v$6 = props.defaultValue,
-            _v$7 = props.required;
-
-      _v$ !== _p$._v$ && _$setAttribute(_el$, "key", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "placeholder", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && _$setAttribute(_el$, "type", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && _$setAttribute(_el$, "name", _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && (_el$.value = _p$._v$5 = _v$5);
-      _v$6 !== _p$._v$6 && _$setAttribute(_el$, "defaultvalue", _p$._v$6 = _v$6);
-      _v$7 !== _p$._v$7 && (_el$.required = _p$._v$7 = _v$7);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined,
-      _v$4: undefined,
-      _v$5: undefined,
-      _v$6: undefined,
-      _v$7: undefined
-    });
-
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
-registerComponent(FormInputComponent, {name:'Form:Input',builtIn:true,image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',inputs:[{name:'type',type:'text',enum:['text','number','email','url','checkbox','radio','range','date','datetime-local','search','tel','time','file','month','week','password','color','hidden'],defaultValue:'text'},{name:'name',type:'string',required:true,helperText:'Every input in a form needs a unique name describing what it takes, e.g. "email"'},{name:'placeholder',type:'string',defaultValue:'Hello there',helperText:'Text to display when there is no value'},{name:'defaultValue',type:'string'},{name:'value',type:'string',advanced:true},{name:'required',type:'boolean',helperText:'Is this input required to be filled out to submit a form',defaultValue:false}],noWrap:true,static:true,defaultStyles:{paddingTop:'10px',paddingBottom:'10px',paddingLeft:'10px',paddingRight:'10px',borderRadius:'3px',borderWidth:'1px',borderStyle:'solid',borderColor:'#ccc'}});

package/src/blocks/raw-text.js

@@ -1,25 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<span></span>`, 2);
-
-export default function RawText(props) {
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    _$effect(_p$ => {
-      const _v$ = props.attributes?.class || props.attributes?.className,
-            _v$2 = props.text || "";
-
-      _v$ !== _p$._v$ && (_el$.className = _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && (_el$.innerHTML = _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
-registerComponent(RawText, {name:'Builder:RawText',hideFromInsertMenu:true,builtIn:true,inputs:[{name:'text',bubble:true,type:'longText',required:true}]});

package/src/blocks/select.js

@@ -1,57 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<select></select>`, 2),
-      _tmpl$2 = /*#__PURE__*/_$template(`<option></option>`, 2);
-
-import { For } from "solid-js";
-import { isEditing } from "../functions/is-editing";
-export default function SelectComponent(props) {
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    _$spread(_el$, () => props.attributes, false, true);
-
-    _$insert(_el$, _$createComponent(For, {
-      get each() {
-        return props.options;
-      },
-
-      children: (option, index) => (() => {
-        const _el$2 = _tmpl$2.cloneNode(true);
-
-        _$insert(_el$2, () => option.name || option.value);
-
-        _$effect(() => _el$2.value = option.value);
-
-        return _el$2;
-      })()
-    }));
-
-    _$effect(_p$ => {
-      const _v$ = props.value,
-            _v$2 = isEditing() && props.defaultValue ? props.defaultValue : "default-key",
-            _v$3 = props.defaultValue,
-            _v$4 = props.name;
-
-      _v$ !== _p$._v$ && (_el$.value = _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "key", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && _$setAttribute(_el$, "defaultvalue", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && _$setAttribute(_el$, "name", _p$._v$4 = _v$4);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined,
-      _v$4: undefined
-    });
-
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
-registerComponent(SelectComponent, {name:'Form:Select',builtIn:true,image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',defaultStyles:{alignSelf:'flex-start'},inputs:[{name:'options',type:'list',required:true,subFields:[{name:'value',type:'text',required:true},{name:'name',type:'text'}],defaultValue:[{value:'option 1'},{value:'option 2'}]},{name:'name',type:'string',required:true,helperText:'Every select in a form needs a unique name describing what it gets, e.g. "email"'},{name:'defaultValue',type:'string'},{name:'value',type:'string',advanced:true},{name:'required',type:'boolean',defaultValue:false}],static:true,noWrap:true});