@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.
package/lib/edge/dev.jsx CHANGED
@@ -18,7 +18,7 @@ var isEmptyElement = (tagName) => {
18
18
 
19
19
  // src/components/dynamic-renderer/dynamic-renderer.tsx
20
20
  function DynamicRenderer(props) {
21
- return <Show
21
+ return <><Show
22
22
  fallback={<Dynamic
23
23
  {...props.attributes}
24
24
  {...props.actionAttributes}
@@ -36,7 +36,7 @@ function DynamicRenderer(props) {
36
36
  {...props.attributes}
37
37
  {...props.actionAttributes}
38
38
  component={props.TagName}
39
- >{props.children}</Dynamic></Show></Show>;
39
+ >{props.children}</Dynamic></Show></Show></>;
40
40
  }
41
41
  var Dynamic_renderer_default = DynamicRenderer;
42
42
 
@@ -74,17 +74,16 @@ function Button(props) {
74
74
  }
75
75
  };
76
76
  }
77
- return <Dynamic_renderer_default
77
+ return <><Dynamic_renderer_default
78
78
  attributes={attrs()}
79
79
  TagName={props.link ? props.builderLinkComponent || "a" : "button"}
80
80
  actionAttributes={{}}
81
- >{props.text}</Dynamic_renderer_default>;
81
+ >{props.text}</Dynamic_renderer_default></>;
82
82
  }
83
83
  var button_default = Button;
84
84
 
85
85
  // src/blocks/columns/columns.tsx
86
86
  import { Show as Show6, For as For4, createSignal as createSignal7 } from "solid-js";
87
- import { css as css2 } from "solid-styled-components";
88
87
 
89
88
  // src/components/blocks/blocks.tsx
90
89
  import { useContext, Show as Show5, For as For3 } from "solid-js";
@@ -3995,7 +3994,7 @@ var getSizesForBreakpoints = ({
3995
3994
 
3996
3995
  // src/components/inlined-styles.tsx
3997
3996
  function InlinedStyles(props) {
3998
- return <style innerHTML={props.styles} data-id={props.id} />;
3997
+ return <><style innerHTML={props.styles} data-id={props.id} /></>;
3999
3998
  }
4000
3999
  var Inlined_styles_default = InlinedStyles;
4001
4000
 
@@ -4018,7 +4017,7 @@ function BlockStyles(props) {
4018
4017
  }
4019
4018
  return true;
4020
4019
  });
4021
- const css5 = createMemo(() => {
4020
+ const css = createMemo(() => {
4022
4021
  const processedBlock = getProcessedBlock({
4023
4022
  block: props.block,
4024
4023
  localState: props.context.localState,
@@ -4081,7 +4080,7 @@ function BlockStyles(props) {
4081
4080
  hoverStylesClass
4082
4081
  ].join(" ");
4083
4082
  });
4084
- return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default id="builderio-block" styles={css5()} /></Show2>;
4083
+ return <><Show2 when={TARGET !== "reactNative" && css() && canShowBlock()}><Inlined_styles_default id="builderio-block" styles={css()} /></Show2></>;
4085
4084
  }
4086
4085
  var Block_styles_default = BlockStyles;
4087
4086
 
@@ -4164,7 +4163,7 @@ function getBlockProperties({
4164
4163
 
4165
4164
  // src/components/block/components/block-wrapper.tsx
4166
4165
  function BlockWrapper(props) {
4167
- return <Dynamic_renderer_default
4166
+ return <><Dynamic_renderer_default
4168
4167
  TagName={props.Wrapper}
4169
4168
  attributes={getBlockProperties({
4170
4169
  block: props.block,
@@ -4178,7 +4177,7 @@ function BlockWrapper(props) {
4178
4177
  context: props.context.context,
4179
4178
  stripPrefix: true
4180
4179
  })}
4181
- >{props.children}</Dynamic_renderer_default>;
4180
+ >{props.children}</Dynamic_renderer_default></>;
4182
4181
  }
4183
4182
  var Block_wrapper_default = BlockWrapper;
4184
4183
 
@@ -4205,11 +4204,11 @@ function InteractiveElement(props) {
4205
4204
  })
4206
4205
  } : {};
4207
4206
  });
4208
- return <Dynamic2
4207
+ return <><Dynamic2
4209
4208
  {...props.wrapperProps}
4210
4209
  attributes={attributes()}
4211
4210
  component={props.Wrapper}
4212
- >{props.children}</Dynamic2>;
4211
+ >{props.children}</Dynamic2></>;
4213
4212
  }
4214
4213
  var interactive_element_default = InteractiveElement;
4215
4214
 
@@ -4251,7 +4250,7 @@ function ComponentRef(props) {
4251
4250
  const [Wrapper, setWrapper] = createSignal3(
4252
4251
  props.isInteractive ? interactive_element_default : props.componentRef
4253
4252
  );
4254
- return <Show3 when={props.componentRef}><Dynamic3
4253
+ return <><Show3 when={props.componentRef}><Dynamic3
4255
4254
  {...getWrapperProps({
4256
4255
  componentOptions: props.componentOptions,
4257
4256
  builderBlock: props.builderBlock,
@@ -4272,7 +4271,7 @@ function ComponentRef(props) {
4272
4271
  registeredComponents={props.registeredComponents}
4273
4272
  linkComponent={props.linkComponent}
4274
4273
  />;
4275
- }}</For></Dynamic3></Show3>;
4274
+ }}</For></Dynamic3></Show3></>;
4276
4275
  }
4277
4276
  var Component_ref_default = ComponentRef;
4278
4277
 
@@ -4280,12 +4279,12 @@ var Component_ref_default = ComponentRef;
4280
4279
  import { createSignal as createSignal4 } from "solid-js";
4281
4280
  function RepeatedBlock(props) {
4282
4281
  const [store, setStore] = createSignal4(props.repeatContext);
4283
- return <builder_context_default.Provider value={store()}><Block_default
4282
+ return <><builder_context_default.Provider value={store()}><Block_default
4284
4283
  block={props.block}
4285
4284
  context={store()}
4286
4285
  registeredComponents={props.registeredComponents}
4287
4286
  linkComponent={props.linkComponent}
4288
- /></builder_context_default.Provider>;
4287
+ /></builder_context_default.Provider></>;
4289
4288
  }
4290
4289
  var Repeated_block_default = RepeatedBlock;
4291
4290
 
@@ -4369,7 +4368,7 @@ function Block(props) {
4369
4368
  );
4370
4369
  }
4371
4370
  });
4372
- return <Show4 when={canShowBlock()}>
4371
+ return <><Show4 when={canShowBlock()}>
4373
4372
  <Block_styles_default block={props.block} context={props.context} />
4374
4373
  <Show4
4375
4374
  fallback={<Component_ref_default
@@ -4423,14 +4422,13 @@ function Block(props) {
4423
4422
  />;
4424
4423
  }}</For2>
4425
4424
  </Block_wrapper_default></Show4></Show4>
4426
- </Show4>;
4425
+ </Show4></>;
4427
4426
  }
4428
4427
  var Block_default = Block;
4429
4428
 
4430
4429
  // src/components/blocks/blocks-wrapper.tsx
4431
4430
  import { createMemo as createMemo6 } from "solid-js";
4432
4431
  import { Dynamic as Dynamic4 } from "solid-js/web";
4433
- import { css } from "solid-styled-components";
4434
4432
  function BlocksWrapper(props) {
4435
4433
  const className = createMemo6(() => {
4436
4434
  return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -4463,22 +4461,25 @@ function BlocksWrapper(props) {
4463
4461
  );
4464
4462
  }
4465
4463
  }
4466
- return <Dynamic4
4467
- class={className() + " " + css({
4468
- display: "flex",
4469
- flexDirection: "column",
4470
- alignItems: "stretch"
4471
- })}
4472
- builder-path={props.path}
4473
- builder-parent-id={props.parent}
4474
- {...{}}
4475
- style={props.styleProp}
4476
- onClick={(event) => onClick()}
4477
- onMouseEnter={(event) => onMouseEnter()}
4478
- onKeyPress={(event) => onClick()}
4479
- {...props.BlocksWrapperProps}
4480
- component={props.BlocksWrapper}
4481
- >{props.children}</Dynamic4>;
4464
+ return <>
4465
+ <Dynamic4
4466
+ class={className() + " dynamic-1bb6a3a2"}
4467
+ builder-path={props.path}
4468
+ builder-parent-id={props.parent}
4469
+ {...{}}
4470
+ style={props.styleProp}
4471
+ onClick={(event) => onClick()}
4472
+ onMouseEnter={(event) => onMouseEnter()}
4473
+ onKeyPress={(event) => onClick()}
4474
+ {...props.BlocksWrapperProps}
4475
+ component={props.BlocksWrapper}
4476
+ >{props.children}</Dynamic4>
4477
+ <style>{`.dynamic-1bb6a3a2 {
4478
+ display: flex;
4479
+ flex-direction: column;
4480
+ align-items: stretch;
4481
+ }`}</style>
4482
+ </>;
4482
4483
  }
4483
4484
  var Blocks_wrapper_default = BlocksWrapper;
4484
4485
 
@@ -4486,7 +4487,7 @@ var Blocks_wrapper_default = BlocksWrapper;
4486
4487
  function Blocks(props) {
4487
4488
  const builderContext = useContext(builder_context_default);
4488
4489
  const componentsContext = useContext(components_context_default);
4489
- return <Blocks_wrapper_default
4490
+ return <><Blocks_wrapper_default
4490
4491
  blocks={props.blocks}
4491
4492
  parent={props.parent}
4492
4493
  path={props.path}
@@ -4502,7 +4503,7 @@ function Blocks(props) {
4502
4503
  context={props.context || builderContext}
4503
4504
  registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
4504
4505
  />;
4505
- }}</For3></Show5></Blocks_wrapper_default>;
4506
+ }}</For3></Show5></Blocks_wrapper_default></>;
4506
4507
  }
4507
4508
  var Blocks_default = Blocks;
4508
4509
 
@@ -4629,50 +4630,52 @@ function Columns(props) {
4629
4630
  style: mapStyleObjToStrIfNeeded(columnCssVars(index))
4630
4631
  };
4631
4632
  }
4632
- return <div
4633
- class={getColumnsClass(props.builderBlock?.id) + " " + css2({
4634
- display: "flex",
4635
- lineHeight: "normal"
4636
- })}
4637
- style={columnsCssVars()}
4638
- {...{}}
4639
- >
4640
- <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default
4641
- id="builderio-columns"
4642
- styles={columnsStyles()}
4643
- /></Show6>
4644
- <For4 each={props.columns}>{(column, _index) => {
4645
- const index = _index();
4646
- return <Dynamic_renderer_default
4647
- key={index}
4648
- TagName={getTagName(column)}
4649
- actionAttributes={{}}
4650
- attributes={getAttributes(column, index)}
4651
- ><Blocks_default
4652
- path={`component.options.columns.${index}.blocks`}
4653
- parent={props.builderBlock.id}
4654
- styleProp={{
4655
- flexGrow: "1"
4656
- }}
4657
- context={props.builderContext}
4658
- registeredComponents={props.builderComponents}
4659
- linkComponent={props.builderLinkComponent}
4660
- blocks={column.blocks}
4661
- /></Dynamic_renderer_default>;
4662
- }}</For4>
4663
- </div>;
4633
+ return <>
4634
+ <div
4635
+ class={getColumnsClass(props.builderBlock?.id) + " div-f2f53158"}
4636
+ style={columnsCssVars()}
4637
+ {...{}}
4638
+ >
4639
+ <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default
4640
+ id="builderio-columns"
4641
+ styles={columnsStyles()}
4642
+ /></Show6>
4643
+ <For4 each={props.columns}>{(column, _index) => {
4644
+ const index = _index();
4645
+ return <Dynamic_renderer_default
4646
+ key={index}
4647
+ TagName={getTagName(column)}
4648
+ actionAttributes={{}}
4649
+ attributes={getAttributes(column, index)}
4650
+ ><Blocks_default
4651
+ path={`component.options.columns.${index}.blocks`}
4652
+ parent={props.builderBlock.id}
4653
+ styleProp={{
4654
+ flexGrow: "1"
4655
+ }}
4656
+ context={props.builderContext}
4657
+ registeredComponents={props.builderComponents}
4658
+ linkComponent={props.builderLinkComponent}
4659
+ blocks={column.blocks}
4660
+ /></Dynamic_renderer_default>;
4661
+ }}</For4>
4662
+ </div>
4663
+ <style>{`.div-f2f53158 {
4664
+ display: flex;
4665
+ line-height: normal;
4666
+ }`}</style>
4667
+ </>;
4664
4668
  }
4665
4669
  var columns_default = Columns;
4666
4670
 
4667
4671
  // src/blocks/fragment/fragment.tsx
4668
4672
  function FragmentComponent(props) {
4669
- return <span>{props.children}</span>;
4673
+ return <><span>{props.children}</span></>;
4670
4674
  }
4671
4675
  var fragment_default = FragmentComponent;
4672
4676
 
4673
4677
  // src/blocks/image/image.tsx
4674
4678
  import { Show as Show7, createMemo as createMemo8 } from "solid-js";
4675
- import { css as css3 } from "solid-styled-components";
4676
4679
 
4677
4680
  // src/blocks/image/image.helpers.ts
4678
4681
  function removeProtocol(path) {
@@ -4760,59 +4763,60 @@ function Image(props) {
4760
4763
  return out;
4761
4764
  });
4762
4765
  return <>
4763
- <picture>
4764
- <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
4765
- <img
4766
- class={"builder-image" + (props.className ? " " + props.className : "") + " " + css3({
4767
- opacity: "1",
4768
- transition: "opacity 0.2s ease-in-out"
4769
- })}
4770
- loading={props.highPriority ? "eager" : "lazy"}
4771
- fetchpriority={props.highPriority ? "high" : "auto"}
4772
- alt={props.altText}
4773
- role={props.altText ? void 0 : "presentation"}
4766
+ <>
4767
+ <picture>
4768
+ <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
4769
+ <img
4770
+ class={"builder-image" + (props.className ? " " + props.className : "") + " img-54b38751"}
4771
+ loading={props.highPriority ? "eager" : "lazy"}
4772
+ fetchpriority={props.highPriority ? "high" : "auto"}
4773
+ alt={props.altText}
4774
+ role={props.altText ? void 0 : "presentation"}
4775
+ style={{
4776
+ "object-position": props.backgroundPosition || "center",
4777
+ "object-fit": props.backgroundSize || "cover",
4778
+ ...aspectRatioCss()
4779
+ }}
4780
+ src={props.image}
4781
+ srcset={srcSetToUse()}
4782
+ sizes={props.sizes}
4783
+ />
4784
+ </picture>
4785
+ <Show7
4786
+ when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
4787
+ ><div
4788
+ class="builder-image-sizer div-54b38751"
4774
4789
  style={{
4775
- "object-position": props.backgroundPosition || "center",
4776
- "object-fit": props.backgroundSize || "cover",
4777
- ...aspectRatioCss()
4790
+ "padding-top": props.aspectRatio * 100 + "%"
4778
4791
  }}
4779
- src={props.image}
4780
- srcset={srcSetToUse()}
4781
- sizes={props.sizes}
4782
- />
4783
- </picture>
4784
- <Show7
4785
- when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
4786
- ><div
4787
- class={"builder-image-sizer " + css3({
4788
- width: "100%",
4789
- pointerEvents: "none",
4790
- fontSize: "0"
4791
- })}
4792
- style={{
4793
- "padding-top": props.aspectRatio * 100 + "%"
4794
- }}
4795
- /></Show7>
4796
- <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
4797
- <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div
4798
- class={css3({
4799
- display: "flex",
4800
- flexDirection: "column",
4801
- alignItems: "stretch",
4802
- position: "absolute",
4803
- top: "0",
4804
- left: "0",
4805
- width: "100%",
4806
- height: "100%"
4807
- })}
4808
- >{props.children}</div></Show7>
4792
+ /></Show7>
4793
+ <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
4794
+ <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-54b38751-2">{props.children}</div></Show7>
4795
+ </>
4796
+ <style>{`.img-54b38751 {
4797
+ opacity: 1;
4798
+ transition: opacity 0.2s ease-in-out;
4799
+ }.div-54b38751 {
4800
+ width: 100%;
4801
+ pointer-events: none;
4802
+ font-size: 0;
4803
+ }.div-54b38751-2 {
4804
+ display: flex;
4805
+ flex-direction: column;
4806
+ align-items: stretch;
4807
+ position: absolute;
4808
+ top: 0;
4809
+ left: 0;
4810
+ width: 100%;
4811
+ height: 100%;
4812
+ }`}</style>
4809
4813
  </>;
4810
4814
  }
4811
4815
  var image_default = Image;
4812
4816
 
4813
4817
  // src/blocks/section/section.tsx
4814
4818
  function SectionComponent(props) {
4815
- return <section
4819
+ return <><section
4816
4820
  {...{}}
4817
4821
  {...props.attributes}
4818
4822
  style={{
@@ -4827,7 +4831,7 @@ function SectionComponent(props) {
4827
4831
  "margin-left": "auto",
4828
4832
  "margin-right": "auto"
4829
4833
  }}
4830
- >{props.children}</section>;
4834
+ >{props.children}</section></>;
4831
4835
  }
4832
4836
  var section_default = SectionComponent;
4833
4837
 
@@ -5269,7 +5273,7 @@ function Accordion(props) {
5269
5273
  setOpen(onlyOneAtATime() ? [index] : open().concat(index));
5270
5274
  }
5271
5275
  }
5272
- return <div class="builder-accordion" style={accordionStyles()}><For5 each={props.items}>{(item, _index) => {
5276
+ return <><div class="builder-accordion" style={accordionStyles()}><For5 each={props.items}>{(item, _index) => {
5273
5277
  const index = _index();
5274
5278
  return <>
5275
5279
  <div
@@ -5303,7 +5307,7 @@ function Accordion(props) {
5303
5307
  linkComponent={props.builderLinkComponent}
5304
5308
  /></div></Show8>
5305
5309
  </>;
5306
- }}</For5></div>;
5310
+ }}</For5></div></>;
5307
5311
  }
5308
5312
  var accordion_default = Accordion;
5309
5313
 
@@ -5588,7 +5592,7 @@ var componentInfo5 = {
5588
5592
  name: "image",
5589
5593
  type: "file",
5590
5594
  bubble: true,
5591
- allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
5595
+ allowedFileTypes: ["jpeg", "jpg", "png", "svg", "webp"],
5592
5596
  required: true,
5593
5597
  defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
5594
5598
  onChange: (options) => {
@@ -5760,7 +5764,7 @@ var componentInfo7 = {
5760
5764
 
5761
5765
  // src/blocks/slot/slot.tsx
5762
5766
  function Slot(props) {
5763
- return <div
5767
+ return <><div
5764
5768
  style={{
5765
5769
  "pointer-events": "auto"
5766
5770
  }}
@@ -5772,7 +5776,7 @@ function Slot(props) {
5772
5776
  path={`symbol.data.${props.name}`}
5773
5777
  context={props.builderContext}
5774
5778
  blocks={props.builderContext.rootState?.[props.name]}
5775
- /></div>;
5779
+ /></div></>;
5776
5780
  }
5777
5781
  var slot_default = Slot;
5778
5782
 
@@ -5968,7 +5972,7 @@ function Tabs(props) {
5968
5972
  setActiveTab(index);
5969
5973
  }
5970
5974
  }
5971
- return <div>
5975
+ return <><div>
5972
5976
  <div
5973
5977
  class="builder-tabs-wrap"
5974
5978
  style={{
@@ -6003,7 +6007,7 @@ function Tabs(props) {
6003
6007
  registeredComponents={props.builderComponents}
6004
6008
  linkComponent={props.builderLinkComponent}
6005
6009
  /></div></Show9>
6006
- </div>;
6010
+ </div></>;
6007
6011
  }
6008
6012
  var tabs_default = Tabs;
6009
6013
 
@@ -6030,13 +6034,13 @@ var componentInfo10 = {
6030
6034
 
6031
6035
  // src/blocks/text/text.tsx
6032
6036
  function Text(props) {
6033
- return <div
6037
+ return <><div
6034
6038
  class="builder-text"
6035
6039
  innerHTML={props.text?.toString() || ""}
6036
6040
  style={{
6037
6041
  outline: "none"
6038
6042
  }}
6039
- />;
6043
+ /></>;
6040
6044
  }
6041
6045
  var text_default = Text;
6042
6046
 
@@ -6104,11 +6108,11 @@ function CustomCode(props) {
6104
6108
  }
6105
6109
  }
6106
6110
  });
6107
- return <div
6111
+ return <><div
6108
6112
  class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
6109
6113
  ref={elementRef}
6110
6114
  innerHTML={props.code}
6111
- />;
6115
+ /></>;
6112
6116
  }
6113
6117
  var custom_code_default = CustomCode;
6114
6118
 
@@ -6126,7 +6130,7 @@ var componentInfo12 = {
6126
6130
  const url = options.get("url");
6127
6131
  if (url) {
6128
6132
  options.set("content", "Loading...");
6129
- const apiKey = "ae0e60e78201a3f2b0de4b";
6133
+ const apiKey = _iframelyApiKey;
6130
6134
  return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
6131
6135
  if (options.get("url") === url) {
6132
6136
  if (data.html) {
@@ -6196,7 +6200,7 @@ function Embed(props) {
6196
6200
  createEffect(
6197
6201
  on(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
6198
6202
  );
6199
- return <div class="builder-embed" ref={elem} innerHTML={props.content} />;
6203
+ return <><div class="builder-embed" ref={elem} innerHTML={props.content} /></>;
6200
6204
  }
6201
6205
  var embed_default = Embed;
6202
6206
 
@@ -6436,7 +6440,6 @@ var componentInfo13 = {
6436
6440
 
6437
6441
  // src/blocks/form/form/form.tsx
6438
6442
  import { Show as Show10, For as For7, createSignal as createSignal13 } from "solid-js";
6439
- import { css as css4 } from "solid-styled-components";
6440
6443
 
6441
6444
  // src/functions/get-env.ts
6442
6445
  var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
@@ -6639,50 +6642,51 @@ function FormComponent(props) {
6639
6642
  }
6640
6643
  }
6641
6644
  let formRef;
6642
- return <form
6643
- validate={props.validate}
6644
- ref={formRef}
6645
- action={!props.sendWithJs && props.action}
6646
- method={props.method}
6647
- name={props.name}
6648
- onSubmit={(event) => onSubmit(event)}
6649
- {...{}}
6650
- {...{}}
6651
- {...props.attributes}
6652
- >
6653
- <Show10 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
6654
- const idx = _index();
6655
- return <Block_default
6656
- key={`form-block-${idx}`}
6657
- block={block}
6645
+ return <>
6646
+ <form
6647
+ validate={props.validate}
6648
+ ref={formRef}
6649
+ action={!props.sendWithJs && props.action}
6650
+ method={props.method}
6651
+ name={props.name}
6652
+ onSubmit={(event) => onSubmit(event)}
6653
+ {...{}}
6654
+ {...{}}
6655
+ {...props.attributes}
6656
+ >
6657
+ <Show10 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
6658
+ const idx = _index();
6659
+ return <Block_default
6660
+ key={`form-block-${idx}`}
6661
+ block={block}
6662
+ context={props.builderContext}
6663
+ registeredComponents={props.builderComponents}
6664
+ linkComponent={props.builderLinkComponent}
6665
+ />;
6666
+ }}</For7></Show10>
6667
+ <Show10 when={submissionState() === "error"}><Blocks_default
6668
+ path="errorMessage"
6669
+ blocks={props.errorMessage}
6658
6670
  context={props.builderContext}
6659
- registeredComponents={props.builderComponents}
6660
- linkComponent={props.builderLinkComponent}
6661
- />;
6662
- }}</For7></Show10>
6663
- <Show10 when={submissionState() === "error"}><Blocks_default
6664
- path="errorMessage"
6665
- blocks={props.errorMessage}
6666
- context={props.builderContext}
6667
- /></Show10>
6668
- <Show10 when={submissionState() === "sending"}><Blocks_default
6669
- path="sendingMessage"
6670
- blocks={props.sendingMessage}
6671
- context={props.builderContext}
6672
- /></Show10>
6673
- <Show10 when={submissionState() === "error" && responseData()}><pre
6674
- class={"builder-form-error-text " + css4({
6675
- padding: "10px",
6676
- color: "red",
6677
- textAlign: "center"
6678
- })}
6679
- >{JSON.stringify(responseData(), null, 2)}</pre></Show10>
6680
- <Show10 when={submissionState() === "success"}><Blocks_default
6681
- path="successMessage"
6682
- blocks={props.successMessage}
6683
- context={props.builderContext}
6684
- /></Show10>
6685
- </form>;
6671
+ /></Show10>
6672
+ <Show10 when={submissionState() === "sending"}><Blocks_default
6673
+ path="sendingMessage"
6674
+ blocks={props.sendingMessage}
6675
+ context={props.builderContext}
6676
+ /></Show10>
6677
+ <Show10 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-2e825338">{JSON.stringify(responseData(), null, 2)}</pre></Show10>
6678
+ <Show10 when={submissionState() === "success"}><Blocks_default
6679
+ path="successMessage"
6680
+ blocks={props.successMessage}
6681
+ context={props.builderContext}
6682
+ /></Show10>
6683
+ </form>
6684
+ <style>{`.pre-2e825338 {
6685
+ padding: 10px;
6686
+ color: red;
6687
+ text-align: center;
6688
+ }`}</style>
6689
+ </>;
6686
6690
  }
6687
6691
  var form_default = FormComponent;
6688
6692
 
@@ -6742,7 +6746,7 @@ var componentInfo14 = {
6742
6746
 
6743
6747
  // src/blocks/form/input/input.tsx
6744
6748
  function FormInputComponent(props) {
6745
- return <input
6749
+ return <><input
6746
6750
  {...{}}
6747
6751
  {...props.attributes}
6748
6752
  key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
@@ -6752,7 +6756,7 @@ function FormInputComponent(props) {
6752
6756
  value={props.value}
6753
6757
  defaultValue={props.defaultValue}
6754
6758
  required={props.required}
6755
- />;
6759
+ /></>;
6756
6760
  }
6757
6761
  var input_default = FormInputComponent;
6758
6762
 
@@ -6804,17 +6808,18 @@ var componentInfo15 = {
6804
6808
  // src/blocks/form/select/select.tsx
6805
6809
  import { For as For8 } from "solid-js";
6806
6810
  function SelectComponent(props) {
6807
- return <select
6811
+ return <><select
6808
6812
  {...{}}
6809
6813
  {...props.attributes}
6810
6814
  value={props.value}
6811
6815
  key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
6812
6816
  defaultValue={props.defaultValue}
6813
6817
  name={props.name}
6818
+ required={props.required}
6814
6819
  ><For8 each={props.options}>{(option, _index) => {
6815
6820
  const index = _index();
6816
6821
  return <option key={`${option.name}-${index}`} value={option.value}>{option.name || option.value}</option>;
6817
- }}</For8></select>;
6822
+ }}</For8></select></>;
6818
6823
  }
6819
6824
  var select_default = SelectComponent;
6820
6825
 
@@ -6848,12 +6853,65 @@ var componentInfo16 = {
6848
6853
 
6849
6854
  // src/blocks/form/submit-button/submit-button.tsx
6850
6855
  function SubmitButton(props) {
6851
- return <button type="submit" {...{}} {...props.attributes}>{props.text}</button>;
6856
+ return <><button type="submit" {...{}} {...props.attributes}>{props.text}</button></>;
6852
6857
  }
6853
6858
  var submit_button_default = SubmitButton;
6854
6859
 
6855
- // src/blocks/img/component-info.ts
6860
+ // src/blocks/form/textarea/component-info.ts
6856
6861
  var componentInfo17 = {
6862
+ name: "Form:TextArea",
6863
+ image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
6864
+ inputs: [{
6865
+ advanced: true,
6866
+ name: "value",
6867
+ type: "string"
6868
+ }, {
6869
+ name: "name",
6870
+ type: "string",
6871
+ required: true,
6872
+ helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
6873
+ }, {
6874
+ name: "defaultValue",
6875
+ type: "string"
6876
+ }, {
6877
+ name: "placeholder",
6878
+ type: "string",
6879
+ defaultValue: "Hello there"
6880
+ }, {
6881
+ name: "required",
6882
+ type: "boolean",
6883
+ defaultValue: false
6884
+ }],
6885
+ defaultStyles: {
6886
+ paddingTop: "10px",
6887
+ paddingBottom: "10px",
6888
+ paddingLeft: "10px",
6889
+ paddingRight: "10px",
6890
+ borderRadius: "3px",
6891
+ borderWidth: "1px",
6892
+ borderStyle: "solid",
6893
+ borderColor: "#ccc"
6894
+ },
6895
+ static: true,
6896
+ noWrap: true
6897
+ };
6898
+
6899
+ // src/blocks/form/textarea/textarea.tsx
6900
+ function Textarea(props) {
6901
+ return <><textarea
6902
+ {...{}}
6903
+ {...props.attributes}
6904
+ placeholder={props.placeholder}
6905
+ name={props.name}
6906
+ value={props.value}
6907
+ defaultValue={props.defaultValue}
6908
+ required={props.required}
6909
+ /></>;
6910
+ }
6911
+ var textarea_default = Textarea;
6912
+
6913
+ // src/blocks/img/component-info.ts
6914
+ var componentInfo18 = {
6857
6915
  // friendlyName?
6858
6916
  name: "Raw:Img",
6859
6917
  hideFromInsertMenu: true,
@@ -6871,7 +6929,7 @@ var componentInfo17 = {
6871
6929
 
6872
6930
  // src/blocks/img/img.tsx
6873
6931
  function ImgComponent(props) {
6874
- return <img
6932
+ return <><img
6875
6933
  style={{
6876
6934
  "object-fit": props.backgroundSize || "cover",
6877
6935
  "object-position": props.backgroundPosition || "center"
@@ -6881,12 +6939,12 @@ function ImgComponent(props) {
6881
6939
  src={props.imgSrc || props.image}
6882
6940
  {...{}}
6883
6941
  {...props.attributes}
6884
- />;
6942
+ /></>;
6885
6943
  }
6886
6944
  var img_default = ImgComponent;
6887
6945
 
6888
6946
  // src/blocks/video/component-info.ts
6889
- var componentInfo18 = {
6947
+ var componentInfo19 = {
6890
6948
  name: "Video",
6891
6949
  canHaveChildren: true,
6892
6950
  defaultStyles: {
@@ -6996,7 +7054,7 @@ function Video(props) {
6996
7054
  ...videoProps()
6997
7055
  };
6998
7056
  });
6999
- return <div
7057
+ return <><div
7000
7058
  style={{
7001
7059
  position: "relative"
7002
7060
  }}
@@ -7052,7 +7110,7 @@ function Video(props) {
7052
7110
  height: "100%"
7053
7111
  }}
7054
7112
  >{props.children}</div></Show11>
7055
- </div>;
7113
+ </div></>;
7056
7114
  }
7057
7115
  var video_default = Video;
7058
7116
 
@@ -7075,12 +7133,15 @@ var getExtraComponents = () => [{
7075
7133
  }, {
7076
7134
  component: select_default,
7077
7135
  ...componentInfo15
7136
+ }, {
7137
+ component: textarea_default,
7138
+ ...componentInfo17
7078
7139
  }], {
7079
7140
  component: img_default,
7080
- ...componentInfo17
7141
+ ...componentInfo18
7081
7142
  }, {
7082
7143
  component: video_default,
7083
- ...componentInfo18
7144
+ ...componentInfo19
7084
7145
  }];
7085
7146
 
7086
7147
  // src/constants/builder-registered-components.ts
@@ -7186,7 +7247,7 @@ var getUpdateVariantVisibilityScript = ({
7186
7247
 
7187
7248
  // src/components/inlined-script.tsx
7188
7249
  function InlinedScript(props) {
7189
- return <script innerHTML={props.scriptStr} data-id={props.id} />;
7250
+ return <><script innerHTML={props.scriptStr} data-id={props.id} /></>;
7190
7251
  }
7191
7252
  var Inlined_script_default = InlinedScript;
7192
7253
 
@@ -7700,7 +7761,7 @@ function isFromTrustedHost(trustedHosts, e) {
7700
7761
  }
7701
7762
 
7702
7763
  // src/constants/sdk-version.ts
7703
- var SDK_VERSION = "1.0.33";
7764
+ var SDK_VERSION = "1.0.36";
7704
7765
 
7705
7766
  // src/functions/register.ts
7706
7767
  var registry = {};
@@ -8265,7 +8326,7 @@ function EnableEditor(props) {
8265
8326
  }
8266
8327
  }
8267
8328
  createEffect2(on2(() => [onUpdateFn_5_props_locale()], onUpdateFn_5));
8268
- return <builder_context_default.Provider value={props.builderContextSignal}><Show12 when={props.builderContextSignal.content}><Dynamic5
8329
+ return <><builder_context_default.Provider value={props.builderContextSignal}><Show12 when={props.builderContextSignal.content}><Dynamic5
8269
8330
  class={getWrapperClassName(
8270
8331
  props.content?.testVariationId || props.content?.id
8271
8332
  )}
@@ -8278,7 +8339,7 @@ function EnableEditor(props) {
8278
8339
  {...showContentProps()}
8279
8340
  {...props.contentWrapperProps}
8280
8341
  component={ContentWrapper()}
8281
- >{props.children}</Dynamic5></Show12></builder_context_default.Provider>;
8342
+ >{props.children}</Dynamic5></Show12></builder_context_default.Provider></>;
8282
8343
  }
8283
8344
  var Enable_editor_default = EnableEditor;
8284
8345
 
@@ -8297,10 +8358,10 @@ ${getFontCss({
8297
8358
  ${getDefaultStyles(props.isNestedRender)}
8298
8359
  `.trim()
8299
8360
  );
8300
- return <Inlined_styles_default
8361
+ return <><Inlined_styles_default
8301
8362
  id="builderio-content"
8302
8363
  styles={injectedStyles()}
8303
- />;
8364
+ /></>;
8304
8365
  }
8305
8366
  var Styles_default = ContentStyles;
8306
8367
 
@@ -8401,7 +8462,7 @@ function ContentComponent(props) {
8401
8462
  rootState: newRootState
8402
8463
  }));
8403
8464
  }
8404
- return <components_context_default.Provider
8465
+ return <><components_context_default.Provider
8405
8466
  value={{
8406
8467
  registeredComponents: registeredComponents()
8407
8468
  }}
@@ -8439,7 +8500,7 @@ function ContentComponent(props) {
8439
8500
  registeredComponents={registeredComponents()}
8440
8501
  linkComponent={props.linkComponent}
8441
8502
  />
8442
- </Enable_editor_default></components_context_default.Provider>;
8503
+ </Enable_editor_default></components_context_default.Provider></>;
8443
8504
  }
8444
8505
  var Content_default = ContentComponent;
8445
8506
 
@@ -8475,7 +8536,7 @@ function ContentVariants(props) {
8475
8536
  onMount4(() => {
8476
8537
  setShouldRenderVariants(false);
8477
8538
  });
8478
- return <>
8539
+ return <><>
8479
8540
  <Show14 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
8480
8541
  id="builderio-init-variants-fns"
8481
8542
  scriptStr={getInitVariantsFnsScriptString()}
@@ -8537,7 +8598,7 @@ function ContentVariants(props) {
8537
8598
  contentWrapperProps={props.contentWrapperProps}
8538
8599
  trustedHosts={props.trustedHosts}
8539
8600
  />
8540
- </>;
8601
+ </></>;
8541
8602
  }
8542
8603
  var Content_variants_default = ContentVariants;
8543
8604
 
@@ -8601,7 +8662,7 @@ function Symbol2(props) {
8601
8662
  setContent();
8602
8663
  }
8603
8664
  createEffect3(on3(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
8604
- return <div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
8665
+ return <><div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
8605
8666
  isNestedRender={true}
8606
8667
  apiVersion={props.builderContext.apiVersion}
8607
8668
  apiKey={props.builderContext.apiKey}
@@ -8621,7 +8682,7 @@ function Symbol2(props) {
8621
8682
  linkComponent={props.builderLinkComponent}
8622
8683
  blocksWrapper={blocksWrapper()}
8623
8684
  contentWrapper={contentWrapper()}
8624
- /></div>;
8685
+ /></div></>;
8625
8686
  }
8626
8687
  var symbol_default = Symbol2;
8627
8688