@builder.io/sdk-solid 1.0.33 → 1.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,7 +10,7 @@ var isEmptyElement = (tagName) => {
10
10
 
11
11
  // src/components/dynamic-renderer/dynamic-renderer.tsx
12
12
  function DynamicRenderer(props) {
13
- return <Show
13
+ return <><Show
14
14
  fallback={<Dynamic
15
15
  {...props.attributes}
16
16
  {...props.actionAttributes}
@@ -28,7 +28,7 @@ function DynamicRenderer(props) {
28
28
  {...props.attributes}
29
29
  {...props.actionAttributes}
30
30
  component={props.TagName}
31
- >{props.children}</Dynamic></Show></Show>;
31
+ >{props.children}</Dynamic></Show></Show></>;
32
32
  }
33
33
  var Dynamic_renderer_default = DynamicRenderer;
34
34
 
@@ -66,17 +66,16 @@ function Button(props) {
66
66
  }
67
67
  };
68
68
  }
69
- return <Dynamic_renderer_default
69
+ return <><Dynamic_renderer_default
70
70
  attributes={attrs()}
71
71
  TagName={props.link ? props.builderLinkComponent || "a" : "button"}
72
72
  actionAttributes={{}}
73
- >{props.text}</Dynamic_renderer_default>;
73
+ >{props.text}</Dynamic_renderer_default></>;
74
74
  }
75
75
  var button_default = Button;
76
76
 
77
77
  // src/blocks/columns/columns.tsx
78
78
  import { Show as Show6, For as For4, createSignal as createSignal7 } from "solid-js";
79
- import { css as css2 } from "solid-styled-components";
80
79
 
81
80
  // src/components/blocks/blocks.tsx
82
81
  import { useContext, Show as Show5, For as For3 } from "solid-js";
@@ -841,7 +840,7 @@ var getSizesForBreakpoints = ({
841
840
 
842
841
  // src/components/inlined-styles.tsx
843
842
  function InlinedStyles(props) {
844
- return <style innerHTML={props.styles} data-id={props.id} />;
843
+ return <><style innerHTML={props.styles} data-id={props.id} /></>;
845
844
  }
846
845
  var Inlined_styles_default = InlinedStyles;
847
846
 
@@ -864,7 +863,7 @@ function BlockStyles(props) {
864
863
  }
865
864
  return true;
866
865
  });
867
- const css5 = createMemo(() => {
866
+ const css = createMemo(() => {
868
867
  const processedBlock = getProcessedBlock({
869
868
  block: props.block,
870
869
  localState: props.context.localState,
@@ -927,7 +926,7 @@ function BlockStyles(props) {
927
926
  hoverStylesClass
928
927
  ].join(" ");
929
928
  });
930
- return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default id="builderio-block" styles={css5()} /></Show2>;
929
+ return <><Show2 when={TARGET !== "reactNative" && css() && canShowBlock()}><Inlined_styles_default id="builderio-block" styles={css()} /></Show2></>;
931
930
  }
932
931
  var Block_styles_default = BlockStyles;
933
932
 
@@ -1010,7 +1009,7 @@ function getBlockProperties({
1010
1009
 
1011
1010
  // src/components/block/components/block-wrapper.tsx
1012
1011
  function BlockWrapper(props) {
1013
- return <Dynamic_renderer_default
1012
+ return <><Dynamic_renderer_default
1014
1013
  TagName={props.Wrapper}
1015
1014
  attributes={getBlockProperties({
1016
1015
  block: props.block,
@@ -1024,7 +1023,7 @@ function BlockWrapper(props) {
1024
1023
  context: props.context.context,
1025
1024
  stripPrefix: true
1026
1025
  })}
1027
- >{props.children}</Dynamic_renderer_default>;
1026
+ >{props.children}</Dynamic_renderer_default></>;
1028
1027
  }
1029
1028
  var Block_wrapper_default = BlockWrapper;
1030
1029
 
@@ -1051,11 +1050,11 @@ function InteractiveElement(props) {
1051
1050
  })
1052
1051
  } : {};
1053
1052
  });
1054
- return <Dynamic2
1053
+ return <><Dynamic2
1055
1054
  {...props.wrapperProps}
1056
1055
  attributes={attributes()}
1057
1056
  component={props.Wrapper}
1058
- >{props.children}</Dynamic2>;
1057
+ >{props.children}</Dynamic2></>;
1059
1058
  }
1060
1059
  var interactive_element_default = InteractiveElement;
1061
1060
 
@@ -1097,7 +1096,7 @@ function ComponentRef(props) {
1097
1096
  const [Wrapper, setWrapper] = createSignal3(
1098
1097
  props.isInteractive ? interactive_element_default : props.componentRef
1099
1098
  );
1100
- return <Show3 when={props.componentRef}><Dynamic3
1099
+ return <><Show3 when={props.componentRef}><Dynamic3
1101
1100
  {...getWrapperProps({
1102
1101
  componentOptions: props.componentOptions,
1103
1102
  builderBlock: props.builderBlock,
@@ -1118,7 +1117,7 @@ function ComponentRef(props) {
1118
1117
  registeredComponents={props.registeredComponents}
1119
1118
  linkComponent={props.linkComponent}
1120
1119
  />;
1121
- }}</For></Dynamic3></Show3>;
1120
+ }}</For></Dynamic3></Show3></>;
1122
1121
  }
1123
1122
  var Component_ref_default = ComponentRef;
1124
1123
 
@@ -1126,12 +1125,12 @@ var Component_ref_default = ComponentRef;
1126
1125
  import { createSignal as createSignal4 } from "solid-js";
1127
1126
  function RepeatedBlock(props) {
1128
1127
  const [store, setStore] = createSignal4(props.repeatContext);
1129
- return <builder_context_default.Provider value={store()}><Block_default
1128
+ return <><builder_context_default.Provider value={store()}><Block_default
1130
1129
  block={props.block}
1131
1130
  context={store()}
1132
1131
  registeredComponents={props.registeredComponents}
1133
1132
  linkComponent={props.linkComponent}
1134
- /></builder_context_default.Provider>;
1133
+ /></builder_context_default.Provider></>;
1135
1134
  }
1136
1135
  var Repeated_block_default = RepeatedBlock;
1137
1136
 
@@ -1215,7 +1214,7 @@ function Block(props) {
1215
1214
  );
1216
1215
  }
1217
1216
  });
1218
- return <Show4 when={canShowBlock()}>
1217
+ return <><Show4 when={canShowBlock()}>
1219
1218
  <Block_styles_default block={props.block} context={props.context} />
1220
1219
  <Show4
1221
1220
  fallback={<Component_ref_default
@@ -1269,14 +1268,13 @@ function Block(props) {
1269
1268
  />;
1270
1269
  }}</For2>
1271
1270
  </Block_wrapper_default></Show4></Show4>
1272
- </Show4>;
1271
+ </Show4></>;
1273
1272
  }
1274
1273
  var Block_default = Block;
1275
1274
 
1276
1275
  // src/components/blocks/blocks-wrapper.tsx
1277
1276
  import { createMemo as createMemo6 } from "solid-js";
1278
1277
  import { Dynamic as Dynamic4 } from "solid-js/web";
1279
- import { css } from "solid-styled-components";
1280
1278
  function BlocksWrapper(props) {
1281
1279
  const className = createMemo6(() => {
1282
1280
  return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -1309,22 +1307,25 @@ function BlocksWrapper(props) {
1309
1307
  );
1310
1308
  }
1311
1309
  }
1312
- return <Dynamic4
1313
- class={className() + " " + css({
1314
- display: "flex",
1315
- flexDirection: "column",
1316
- alignItems: "stretch"
1317
- })}
1318
- builder-path={props.path}
1319
- builder-parent-id={props.parent}
1320
- {...{}}
1321
- style={props.styleProp}
1322
- onClick={(event) => onClick()}
1323
- onMouseEnter={(event) => onMouseEnter()}
1324
- onKeyPress={(event) => onClick()}
1325
- {...props.BlocksWrapperProps}
1326
- component={props.BlocksWrapper}
1327
- >{props.children}</Dynamic4>;
1310
+ return <>
1311
+ <Dynamic4
1312
+ class={className() + " dynamic-1bb6a3a2"}
1313
+ builder-path={props.path}
1314
+ builder-parent-id={props.parent}
1315
+ {...{}}
1316
+ style={props.styleProp}
1317
+ onClick={(event) => onClick()}
1318
+ onMouseEnter={(event) => onMouseEnter()}
1319
+ onKeyPress={(event) => onClick()}
1320
+ {...props.BlocksWrapperProps}
1321
+ component={props.BlocksWrapper}
1322
+ >{props.children}</Dynamic4>
1323
+ <style>{`.dynamic-1bb6a3a2 {
1324
+ display: flex;
1325
+ flex-direction: column;
1326
+ align-items: stretch;
1327
+ }`}</style>
1328
+ </>;
1328
1329
  }
1329
1330
  var Blocks_wrapper_default = BlocksWrapper;
1330
1331
 
@@ -1332,7 +1333,7 @@ var Blocks_wrapper_default = BlocksWrapper;
1332
1333
  function Blocks(props) {
1333
1334
  const builderContext = useContext(builder_context_default);
1334
1335
  const componentsContext = useContext(components_context_default);
1335
- return <Blocks_wrapper_default
1336
+ return <><Blocks_wrapper_default
1336
1337
  blocks={props.blocks}
1337
1338
  parent={props.parent}
1338
1339
  path={props.path}
@@ -1348,7 +1349,7 @@ function Blocks(props) {
1348
1349
  context={props.context || builderContext}
1349
1350
  registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
1350
1351
  />;
1351
- }}</For3></Show5></Blocks_wrapper_default>;
1352
+ }}</For3></Show5></Blocks_wrapper_default></>;
1352
1353
  }
1353
1354
  var Blocks_default = Blocks;
1354
1355
 
@@ -1475,50 +1476,52 @@ function Columns(props) {
1475
1476
  style: mapStyleObjToStrIfNeeded(columnCssVars(index))
1476
1477
  };
1477
1478
  }
1478
- return <div
1479
- class={getColumnsClass(props.builderBlock?.id) + " " + css2({
1480
- display: "flex",
1481
- lineHeight: "normal"
1482
- })}
1483
- style={columnsCssVars()}
1484
- {...{}}
1485
- >
1486
- <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default
1487
- id="builderio-columns"
1488
- styles={columnsStyles()}
1489
- /></Show6>
1490
- <For4 each={props.columns}>{(column, _index) => {
1491
- const index = _index();
1492
- return <Dynamic_renderer_default
1493
- key={index}
1494
- TagName={getTagName(column)}
1495
- actionAttributes={{}}
1496
- attributes={getAttributes(column, index)}
1497
- ><Blocks_default
1498
- path={`component.options.columns.${index}.blocks`}
1499
- parent={props.builderBlock.id}
1500
- styleProp={{
1501
- flexGrow: "1"
1502
- }}
1503
- context={props.builderContext}
1504
- registeredComponents={props.builderComponents}
1505
- linkComponent={props.builderLinkComponent}
1506
- blocks={column.blocks}
1507
- /></Dynamic_renderer_default>;
1508
- }}</For4>
1509
- </div>;
1479
+ return <>
1480
+ <div
1481
+ class={getColumnsClass(props.builderBlock?.id) + " div-f2f53158"}
1482
+ style={columnsCssVars()}
1483
+ {...{}}
1484
+ >
1485
+ <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default
1486
+ id="builderio-columns"
1487
+ styles={columnsStyles()}
1488
+ /></Show6>
1489
+ <For4 each={props.columns}>{(column, _index) => {
1490
+ const index = _index();
1491
+ return <Dynamic_renderer_default
1492
+ key={index}
1493
+ TagName={getTagName(column)}
1494
+ actionAttributes={{}}
1495
+ attributes={getAttributes(column, index)}
1496
+ ><Blocks_default
1497
+ path={`component.options.columns.${index}.blocks`}
1498
+ parent={props.builderBlock.id}
1499
+ styleProp={{
1500
+ flexGrow: "1"
1501
+ }}
1502
+ context={props.builderContext}
1503
+ registeredComponents={props.builderComponents}
1504
+ linkComponent={props.builderLinkComponent}
1505
+ blocks={column.blocks}
1506
+ /></Dynamic_renderer_default>;
1507
+ }}</For4>
1508
+ </div>
1509
+ <style>{`.div-f2f53158 {
1510
+ display: flex;
1511
+ line-height: normal;
1512
+ }`}</style>
1513
+ </>;
1510
1514
  }
1511
1515
  var columns_default = Columns;
1512
1516
 
1513
1517
  // src/blocks/fragment/fragment.tsx
1514
1518
  function FragmentComponent(props) {
1515
- return <span>{props.children}</span>;
1519
+ return <><span>{props.children}</span></>;
1516
1520
  }
1517
1521
  var fragment_default = FragmentComponent;
1518
1522
 
1519
1523
  // src/blocks/image/image.tsx
1520
1524
  import { Show as Show7, createMemo as createMemo8 } from "solid-js";
1521
- import { css as css3 } from "solid-styled-components";
1522
1525
 
1523
1526
  // src/blocks/image/image.helpers.ts
1524
1527
  function removeProtocol(path) {
@@ -1605,59 +1608,60 @@ function Image(props) {
1605
1608
  return out;
1606
1609
  });
1607
1610
  return <>
1608
- <picture>
1609
- <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
1610
- <img
1611
- class={"builder-image" + (props.className ? " " + props.className : "") + " " + css3({
1612
- opacity: "1",
1613
- transition: "opacity 0.2s ease-in-out"
1614
- })}
1615
- loading={props.highPriority ? "eager" : "lazy"}
1616
- fetchpriority={props.highPriority ? "high" : "auto"}
1617
- alt={props.altText}
1618
- role={props.altText ? void 0 : "presentation"}
1611
+ <>
1612
+ <picture>
1613
+ <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
1614
+ <img
1615
+ class={"builder-image" + (props.className ? " " + props.className : "") + " img-54b38751"}
1616
+ loading={props.highPriority ? "eager" : "lazy"}
1617
+ fetchpriority={props.highPriority ? "high" : "auto"}
1618
+ alt={props.altText}
1619
+ role={props.altText ? void 0 : "presentation"}
1620
+ style={{
1621
+ "object-position": props.backgroundPosition || "center",
1622
+ "object-fit": props.backgroundSize || "cover",
1623
+ ...aspectRatioCss()
1624
+ }}
1625
+ src={props.image}
1626
+ srcset={srcSetToUse()}
1627
+ sizes={props.sizes}
1628
+ />
1629
+ </picture>
1630
+ <Show7
1631
+ when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
1632
+ ><div
1633
+ class="builder-image-sizer div-54b38751"
1619
1634
  style={{
1620
- "object-position": props.backgroundPosition || "center",
1621
- "object-fit": props.backgroundSize || "cover",
1622
- ...aspectRatioCss()
1635
+ "padding-top": props.aspectRatio * 100 + "%"
1623
1636
  }}
1624
- src={props.image}
1625
- srcset={srcSetToUse()}
1626
- sizes={props.sizes}
1627
- />
1628
- </picture>
1629
- <Show7
1630
- when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
1631
- ><div
1632
- class={"builder-image-sizer " + css3({
1633
- width: "100%",
1634
- pointerEvents: "none",
1635
- fontSize: "0"
1636
- })}
1637
- style={{
1638
- "padding-top": props.aspectRatio * 100 + "%"
1639
- }}
1640
- /></Show7>
1641
- <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
1642
- <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div
1643
- class={css3({
1644
- display: "flex",
1645
- flexDirection: "column",
1646
- alignItems: "stretch",
1647
- position: "absolute",
1648
- top: "0",
1649
- left: "0",
1650
- width: "100%",
1651
- height: "100%"
1652
- })}
1653
- >{props.children}</div></Show7>
1637
+ /></Show7>
1638
+ <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
1639
+ <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-54b38751-2">{props.children}</div></Show7>
1640
+ </>
1641
+ <style>{`.img-54b38751 {
1642
+ opacity: 1;
1643
+ transition: opacity 0.2s ease-in-out;
1644
+ }.div-54b38751 {
1645
+ width: 100%;
1646
+ pointer-events: none;
1647
+ font-size: 0;
1648
+ }.div-54b38751-2 {
1649
+ display: flex;
1650
+ flex-direction: column;
1651
+ align-items: stretch;
1652
+ position: absolute;
1653
+ top: 0;
1654
+ left: 0;
1655
+ width: 100%;
1656
+ height: 100%;
1657
+ }`}</style>
1654
1658
  </>;
1655
1659
  }
1656
1660
  var image_default = Image;
1657
1661
 
1658
1662
  // src/blocks/section/section.tsx
1659
1663
  function SectionComponent(props) {
1660
- return <section
1664
+ return <><section
1661
1665
  {...{}}
1662
1666
  {...props.attributes}
1663
1667
  style={{
@@ -1672,7 +1676,7 @@ function SectionComponent(props) {
1672
1676
  "margin-left": "auto",
1673
1677
  "margin-right": "auto"
1674
1678
  }}
1675
- >{props.children}</section>;
1679
+ >{props.children}</section></>;
1676
1680
  }
1677
1681
  var section_default = SectionComponent;
1678
1682
 
@@ -2114,7 +2118,7 @@ function Accordion(props) {
2114
2118
  setOpen(onlyOneAtATime() ? [index] : open().concat(index));
2115
2119
  }
2116
2120
  }
2117
- return <div class="builder-accordion" style={accordionStyles()}><For5 each={props.items}>{(item, _index) => {
2121
+ return <><div class="builder-accordion" style={accordionStyles()}><For5 each={props.items}>{(item, _index) => {
2118
2122
  const index = _index();
2119
2123
  return <>
2120
2124
  <div
@@ -2148,7 +2152,7 @@ function Accordion(props) {
2148
2152
  linkComponent={props.builderLinkComponent}
2149
2153
  /></div></Show8>
2150
2154
  </>;
2151
- }}</For5></div>;
2155
+ }}</For5></div></>;
2152
2156
  }
2153
2157
  var accordion_default = Accordion;
2154
2158
 
@@ -2433,7 +2437,7 @@ var componentInfo5 = {
2433
2437
  name: "image",
2434
2438
  type: "file",
2435
2439
  bubble: true,
2436
- allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
2440
+ allowedFileTypes: ["jpeg", "jpg", "png", "svg", "webp"],
2437
2441
  required: true,
2438
2442
  defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
2439
2443
  onChange: (options) => {
@@ -2604,7 +2608,7 @@ var componentInfo7 = {
2604
2608
 
2605
2609
  // src/blocks/slot/slot.tsx
2606
2610
  function Slot(props) {
2607
- return <div
2611
+ return <><div
2608
2612
  style={{
2609
2613
  "pointer-events": "auto"
2610
2614
  }}
@@ -2616,7 +2620,7 @@ function Slot(props) {
2616
2620
  path={`symbol.data.${props.name}`}
2617
2621
  context={props.builderContext}
2618
2622
  blocks={props.builderContext.rootState?.[props.name]}
2619
- /></div>;
2623
+ /></div></>;
2620
2624
  }
2621
2625
  var slot_default = Slot;
2622
2626
 
@@ -2812,7 +2816,7 @@ function Tabs(props) {
2812
2816
  setActiveTab(index);
2813
2817
  }
2814
2818
  }
2815
- return <div>
2819
+ return <><div>
2816
2820
  <div
2817
2821
  class="builder-tabs-wrap"
2818
2822
  style={{
@@ -2847,7 +2851,7 @@ function Tabs(props) {
2847
2851
  registeredComponents={props.builderComponents}
2848
2852
  linkComponent={props.builderLinkComponent}
2849
2853
  /></div></Show9>
2850
- </div>;
2854
+ </div></>;
2851
2855
  }
2852
2856
  var tabs_default = Tabs;
2853
2857
 
@@ -2874,13 +2878,13 @@ var componentInfo10 = {
2874
2878
 
2875
2879
  // src/blocks/text/text.tsx
2876
2880
  function Text(props) {
2877
- return <div
2881
+ return <><div
2878
2882
  class="builder-text"
2879
2883
  innerHTML={props.text?.toString() || ""}
2880
2884
  style={{
2881
2885
  outline: "none"
2882
2886
  }}
2883
- />;
2887
+ /></>;
2884
2888
  }
2885
2889
  var text_default = Text;
2886
2890
 
@@ -2947,11 +2951,11 @@ function CustomCode(props) {
2947
2951
  }
2948
2952
  }
2949
2953
  });
2950
- return <div
2954
+ return <><div
2951
2955
  class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
2952
2956
  ref={elementRef}
2953
2957
  innerHTML={props.code}
2954
- />;
2958
+ /></>;
2955
2959
  }
2956
2960
  var custom_code_default = CustomCode;
2957
2961
 
@@ -2969,7 +2973,7 @@ var componentInfo12 = {
2969
2973
  const url = options.get("url");
2970
2974
  if (url) {
2971
2975
  options.set("content", "Loading...");
2972
- const apiKey = "ae0e60e78201a3f2b0de4b";
2976
+ const apiKey = _iframelyApiKey;
2973
2977
  return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
2974
2978
  if (options.get("url") === url) {
2975
2979
  if (data.html) {
@@ -3038,7 +3042,7 @@ function Embed(props) {
3038
3042
  createEffect(
3039
3043
  on(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
3040
3044
  );
3041
- return <div class="builder-embed" ref={elem} innerHTML={props.content} />;
3045
+ return <><div class="builder-embed" ref={elem} innerHTML={props.content} /></>;
3042
3046
  }
3043
3047
  var embed_default = Embed;
3044
3048
 
@@ -3278,7 +3282,6 @@ var componentInfo13 = {
3278
3282
 
3279
3283
  // src/blocks/form/form/form.tsx
3280
3284
  import { Show as Show10, For as For7, createSignal as createSignal13 } from "solid-js";
3281
- import { css as css4 } from "solid-styled-components";
3282
3285
 
3283
3286
  // src/functions/get-env.ts
3284
3287
  var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
@@ -3481,50 +3484,51 @@ function FormComponent(props) {
3481
3484
  }
3482
3485
  }
3483
3486
  let formRef;
3484
- return <form
3485
- validate={props.validate}
3486
- ref={formRef}
3487
- action={!props.sendWithJs && props.action}
3488
- method={props.method}
3489
- name={props.name}
3490
- onSubmit={(event) => onSubmit(event)}
3491
- {...{}}
3492
- {...{}}
3493
- {...props.attributes}
3494
- >
3495
- <Show10 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
3496
- const idx = _index();
3497
- return <Block_default
3498
- key={`form-block-${idx}`}
3499
- block={block}
3487
+ return <>
3488
+ <form
3489
+ validate={props.validate}
3490
+ ref={formRef}
3491
+ action={!props.sendWithJs && props.action}
3492
+ method={props.method}
3493
+ name={props.name}
3494
+ onSubmit={(event) => onSubmit(event)}
3495
+ {...{}}
3496
+ {...{}}
3497
+ {...props.attributes}
3498
+ >
3499
+ <Show10 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
3500
+ const idx = _index();
3501
+ return <Block_default
3502
+ key={`form-block-${idx}`}
3503
+ block={block}
3504
+ context={props.builderContext}
3505
+ registeredComponents={props.builderComponents}
3506
+ linkComponent={props.builderLinkComponent}
3507
+ />;
3508
+ }}</For7></Show10>
3509
+ <Show10 when={submissionState() === "error"}><Blocks_default
3510
+ path="errorMessage"
3511
+ blocks={props.errorMessage}
3500
3512
  context={props.builderContext}
3501
- registeredComponents={props.builderComponents}
3502
- linkComponent={props.builderLinkComponent}
3503
- />;
3504
- }}</For7></Show10>
3505
- <Show10 when={submissionState() === "error"}><Blocks_default
3506
- path="errorMessage"
3507
- blocks={props.errorMessage}
3508
- context={props.builderContext}
3509
- /></Show10>
3510
- <Show10 when={submissionState() === "sending"}><Blocks_default
3511
- path="sendingMessage"
3512
- blocks={props.sendingMessage}
3513
- context={props.builderContext}
3514
- /></Show10>
3515
- <Show10 when={submissionState() === "error" && responseData()}><pre
3516
- class={"builder-form-error-text " + css4({
3517
- padding: "10px",
3518
- color: "red",
3519
- textAlign: "center"
3520
- })}
3521
- >{JSON.stringify(responseData(), null, 2)}</pre></Show10>
3522
- <Show10 when={submissionState() === "success"}><Blocks_default
3523
- path="successMessage"
3524
- blocks={props.successMessage}
3525
- context={props.builderContext}
3526
- /></Show10>
3527
- </form>;
3513
+ /></Show10>
3514
+ <Show10 when={submissionState() === "sending"}><Blocks_default
3515
+ path="sendingMessage"
3516
+ blocks={props.sendingMessage}
3517
+ context={props.builderContext}
3518
+ /></Show10>
3519
+ <Show10 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-2e825338">{JSON.stringify(responseData(), null, 2)}</pre></Show10>
3520
+ <Show10 when={submissionState() === "success"}><Blocks_default
3521
+ path="successMessage"
3522
+ blocks={props.successMessage}
3523
+ context={props.builderContext}
3524
+ /></Show10>
3525
+ </form>
3526
+ <style>{`.pre-2e825338 {
3527
+ padding: 10px;
3528
+ color: red;
3529
+ text-align: center;
3530
+ }`}</style>
3531
+ </>;
3528
3532
  }
3529
3533
  var form_default = FormComponent;
3530
3534
 
@@ -3584,7 +3588,7 @@ var componentInfo14 = {
3584
3588
 
3585
3589
  // src/blocks/form/input/input.tsx
3586
3590
  function FormInputComponent(props) {
3587
- return <input
3591
+ return <><input
3588
3592
  {...{}}
3589
3593
  {...props.attributes}
3590
3594
  key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
@@ -3594,7 +3598,7 @@ function FormInputComponent(props) {
3594
3598
  value={props.value}
3595
3599
  defaultValue={props.defaultValue}
3596
3600
  required={props.required}
3597
- />;
3601
+ /></>;
3598
3602
  }
3599
3603
  var input_default = FormInputComponent;
3600
3604
 
@@ -3646,17 +3650,18 @@ var componentInfo15 = {
3646
3650
  // src/blocks/form/select/select.tsx
3647
3651
  import { For as For8 } from "solid-js";
3648
3652
  function SelectComponent(props) {
3649
- return <select
3653
+ return <><select
3650
3654
  {...{}}
3651
3655
  {...props.attributes}
3652
3656
  value={props.value}
3653
3657
  key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
3654
3658
  defaultValue={props.defaultValue}
3655
3659
  name={props.name}
3660
+ required={props.required}
3656
3661
  ><For8 each={props.options}>{(option, _index) => {
3657
3662
  const index = _index();
3658
3663
  return <option key={`${option.name}-${index}`} value={option.value}>{option.name || option.value}</option>;
3659
- }}</For8></select>;
3664
+ }}</For8></select></>;
3660
3665
  }
3661
3666
  var select_default = SelectComponent;
3662
3667
 
@@ -3690,12 +3695,65 @@ var componentInfo16 = {
3690
3695
 
3691
3696
  // src/blocks/form/submit-button/submit-button.tsx
3692
3697
  function SubmitButton(props) {
3693
- return <button type="submit" {...{}} {...props.attributes}>{props.text}</button>;
3698
+ return <><button type="submit" {...{}} {...props.attributes}>{props.text}</button></>;
3694
3699
  }
3695
3700
  var submit_button_default = SubmitButton;
3696
3701
 
3697
- // src/blocks/img/component-info.ts
3702
+ // src/blocks/form/textarea/component-info.ts
3698
3703
  var componentInfo17 = {
3704
+ name: "Form:TextArea",
3705
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
3706
+ inputs: [{
3707
+ advanced: true,
3708
+ name: "value",
3709
+ type: "string"
3710
+ }, {
3711
+ name: "name",
3712
+ type: "string",
3713
+ required: true,
3714
+ helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
3715
+ }, {
3716
+ name: "defaultValue",
3717
+ type: "string"
3718
+ }, {
3719
+ name: "placeholder",
3720
+ type: "string",
3721
+ defaultValue: "Hello there"
3722
+ }, {
3723
+ name: "required",
3724
+ type: "boolean",
3725
+ defaultValue: false
3726
+ }],
3727
+ defaultStyles: {
3728
+ paddingTop: "10px",
3729
+ paddingBottom: "10px",
3730
+ paddingLeft: "10px",
3731
+ paddingRight: "10px",
3732
+ borderRadius: "3px",
3733
+ borderWidth: "1px",
3734
+ borderStyle: "solid",
3735
+ borderColor: "#ccc"
3736
+ },
3737
+ static: true,
3738
+ noWrap: true
3739
+ };
3740
+
3741
+ // src/blocks/form/textarea/textarea.tsx
3742
+ function Textarea(props) {
3743
+ return <><textarea
3744
+ {...{}}
3745
+ {...props.attributes}
3746
+ placeholder={props.placeholder}
3747
+ name={props.name}
3748
+ value={props.value}
3749
+ defaultValue={props.defaultValue}
3750
+ required={props.required}
3751
+ /></>;
3752
+ }
3753
+ var textarea_default = Textarea;
3754
+
3755
+ // src/blocks/img/component-info.ts
3756
+ var componentInfo18 = {
3699
3757
  // friendlyName?
3700
3758
  name: "Raw:Img",
3701
3759
  hideFromInsertMenu: true,
@@ -3713,7 +3771,7 @@ var componentInfo17 = {
3713
3771
 
3714
3772
  // src/blocks/img/img.tsx
3715
3773
  function ImgComponent(props) {
3716
- return <img
3774
+ return <><img
3717
3775
  style={{
3718
3776
  "object-fit": props.backgroundSize || "cover",
3719
3777
  "object-position": props.backgroundPosition || "center"
@@ -3723,12 +3781,12 @@ function ImgComponent(props) {
3723
3781
  src={props.imgSrc || props.image}
3724
3782
  {...{}}
3725
3783
  {...props.attributes}
3726
- />;
3784
+ /></>;
3727
3785
  }
3728
3786
  var img_default = ImgComponent;
3729
3787
 
3730
3788
  // src/blocks/video/component-info.ts
3731
- var componentInfo18 = {
3789
+ var componentInfo19 = {
3732
3790
  name: "Video",
3733
3791
  canHaveChildren: true,
3734
3792
  defaultStyles: {
@@ -3838,7 +3896,7 @@ function Video(props) {
3838
3896
  ...videoProps()
3839
3897
  };
3840
3898
  });
3841
- return <div
3899
+ return <><div
3842
3900
  style={{
3843
3901
  position: "relative"
3844
3902
  }}
@@ -3894,7 +3952,7 @@ function Video(props) {
3894
3952
  height: "100%"
3895
3953
  }}
3896
3954
  >{props.children}</div></Show11>
3897
- </div>;
3955
+ </div></>;
3898
3956
  }
3899
3957
  var video_default = Video;
3900
3958
 
@@ -3917,12 +3975,15 @@ var getExtraComponents = () => [{
3917
3975
  }, {
3918
3976
  component: select_default,
3919
3977
  ...componentInfo15
3978
+ }, {
3979
+ component: textarea_default,
3980
+ ...componentInfo17
3920
3981
  }], {
3921
3982
  component: img_default,
3922
- ...componentInfo17
3983
+ ...componentInfo18
3923
3984
  }, {
3924
3985
  component: video_default,
3925
- ...componentInfo18
3986
+ ...componentInfo19
3926
3987
  }];
3927
3988
 
3928
3989
  // src/constants/builder-registered-components.ts
@@ -4028,7 +4089,7 @@ var getUpdateVariantVisibilityScript = ({
4028
4089
 
4029
4090
  // src/components/inlined-script.tsx
4030
4091
  function InlinedScript(props) {
4031
- return <script innerHTML={props.scriptStr} data-id={props.id} />;
4092
+ return <><script innerHTML={props.scriptStr} data-id={props.id} /></>;
4032
4093
  }
4033
4094
  var Inlined_script_default = InlinedScript;
4034
4095
 
@@ -4537,7 +4598,7 @@ function isFromTrustedHost(trustedHosts, e) {
4537
4598
  }
4538
4599
 
4539
4600
  // src/constants/sdk-version.ts
4540
- var SDK_VERSION = "1.0.33";
4601
+ var SDK_VERSION = "1.0.36";
4541
4602
 
4542
4603
  // src/functions/register.ts
4543
4604
  var registry = {};
@@ -5100,7 +5161,7 @@ function EnableEditor(props) {
5100
5161
  }
5101
5162
  }
5102
5163
  createEffect2(on2(() => [onUpdateFn_5_props_locale()], onUpdateFn_5));
5103
- return <builder_context_default.Provider value={props.builderContextSignal}><Show12 when={props.builderContextSignal.content}><Dynamic5
5164
+ return <><builder_context_default.Provider value={props.builderContextSignal}><Show12 when={props.builderContextSignal.content}><Dynamic5
5104
5165
  class={getWrapperClassName(
5105
5166
  props.content?.testVariationId || props.content?.id
5106
5167
  )}
@@ -5113,7 +5174,7 @@ function EnableEditor(props) {
5113
5174
  {...showContentProps()}
5114
5175
  {...props.contentWrapperProps}
5115
5176
  component={ContentWrapper()}
5116
- >{props.children}</Dynamic5></Show12></builder_context_default.Provider>;
5177
+ >{props.children}</Dynamic5></Show12></builder_context_default.Provider></>;
5117
5178
  }
5118
5179
  var Enable_editor_default = EnableEditor;
5119
5180
 
@@ -5132,10 +5193,10 @@ ${getFontCss({
5132
5193
  ${getDefaultStyles(props.isNestedRender)}
5133
5194
  `.trim()
5134
5195
  );
5135
- return <Inlined_styles_default
5196
+ return <><Inlined_styles_default
5136
5197
  id="builderio-content"
5137
5198
  styles={injectedStyles()}
5138
- />;
5199
+ /></>;
5139
5200
  }
5140
5201
  var Styles_default = ContentStyles;
5141
5202
 
@@ -5236,7 +5297,7 @@ function ContentComponent(props) {
5236
5297
  rootState: newRootState
5237
5298
  }));
5238
5299
  }
5239
- return <components_context_default.Provider
5300
+ return <><components_context_default.Provider
5240
5301
  value={{
5241
5302
  registeredComponents: registeredComponents()
5242
5303
  }}
@@ -5274,7 +5335,7 @@ function ContentComponent(props) {
5274
5335
  registeredComponents={registeredComponents()}
5275
5336
  linkComponent={props.linkComponent}
5276
5337
  />
5277
- </Enable_editor_default></components_context_default.Provider>;
5338
+ </Enable_editor_default></components_context_default.Provider></>;
5278
5339
  }
5279
5340
  var Content_default = ContentComponent;
5280
5341
 
@@ -5310,7 +5371,7 @@ function ContentVariants(props) {
5310
5371
  onMount4(() => {
5311
5372
  setShouldRenderVariants(false);
5312
5373
  });
5313
- return <>
5374
+ return <><>
5314
5375
  <Show14 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
5315
5376
  id="builderio-init-variants-fns"
5316
5377
  scriptStr={getInitVariantsFnsScriptString()}
@@ -5372,7 +5433,7 @@ function ContentVariants(props) {
5372
5433
  contentWrapperProps={props.contentWrapperProps}
5373
5434
  trustedHosts={props.trustedHosts}
5374
5435
  />
5375
- </>;
5436
+ </></>;
5376
5437
  }
5377
5438
  var Content_variants_default = ContentVariants;
5378
5439
 
@@ -5436,7 +5497,7 @@ function Symbol(props) {
5436
5497
  setContent();
5437
5498
  }
5438
5499
  createEffect3(on3(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
5439
- return <div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
5500
+ return <><div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
5440
5501
  isNestedRender={true}
5441
5502
  apiVersion={props.builderContext.apiVersion}
5442
5503
  apiKey={props.builderContext.apiKey}
@@ -5456,7 +5517,7 @@ function Symbol(props) {
5456
5517
  linkComponent={props.builderLinkComponent}
5457
5518
  blocksWrapper={blocksWrapper()}
5458
5519
  contentWrapper={contentWrapper()}
5459
- /></div>;
5520
+ /></div></>;
5460
5521
  }
5461
5522
  var symbol_default = Symbol;
5462
5523