@superblocksteam/library 2.0.12-next.9 → 2.0.12

package/dist/{index-CGJkVHjX.js → index-Cqcbj1GQ.js}

@@ -95080,7 +95080,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-DcgLGCxF.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-BUXNw6tW.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -95093,7 +95093,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-DcgLGCxF.js").then((module2) => ({
+  return import("./devtools-consolidated-BUXNw6tW.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -102658,14 +102658,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-Cuc9rPiP.js"
+            "./allPathsLoader-DSciOCN7.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BhAoSPKn.js"
+            "./splitPathsBySizeLoader-CdGEkez6.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -111777,7 +111777,7 @@ function createScope(getInitialEntities, options) {
     scopeId: stableScopeId
   });
   const bindingIds = {};
-  const getBinding = (key2) => {
+  const getBinding2 = (key2) => {
     if (bindingIds[key2]) {
       return bindingIds[key2];
     }
@@ -111805,7 +111805,7 @@ function createScope(getInitialEntities, options) {
               useSuspense: true
             }
           ),
-          getBinding(key2)
+          getBinding2(key2)
         );
       }
     }
@@ -127981,199 +127981,6 @@ const GridDropPreview = observer(() => {
     }
   );
 });
-var KeyValuePropertyType = /* @__PURE__ */ ((KeyValuePropertyType2) => {
-  KeyValuePropertyType2["TEXT"] = "text";
-  KeyValuePropertyType2["NUMBER"] = "number";
-  KeyValuePropertyType2["CURRENCY"] = "currency";
-  KeyValuePropertyType2["PERCENTAGE"] = "percentage";
-  KeyValuePropertyType2["IMAGE"] = "image";
-  KeyValuePropertyType2["VIDEO"] = "video";
-  KeyValuePropertyType2["DATE"] = "date";
-  KeyValuePropertyType2["BUTTON"] = "button";
-  KeyValuePropertyType2["LINK"] = "link";
-  KeyValuePropertyType2["BOOLEAN"] = "boolean";
-  KeyValuePropertyType2["TAGS"] = "tags";
-  KeyValuePropertyType2["EMAIL"] = "email";
-  return KeyValuePropertyType2;
-})(KeyValuePropertyType || {});
-const DEFAULT_TABLE_DATA = [
-  {
-    photo: "https://cdn.superblocks.com/sample-data/rachel_kim.jpg",
-    name: "Rachel Kim",
-    email: "rachel.kim89@gmail.com",
-    role: "Vendor Partner",
-    company: "Urban Threads Co.",
-    status: "Active",
-    date_joined: "2023-04-12",
-    last_activity: "2025-06-07T16:20:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/daniel_vargas.jpg",
-    name: "Daniel Vargas",
-    email: "dvargas1984@yahoo.com",
-    role: "Logistics Contact",
-    company: "Vargas Freight Ltd.",
-    status: "Pending",
-    date_joined: "2024-01-23",
-    last_activity: "2025-05-30T13:45:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/sophie_liu.jpg",
-    name: "Sophie Liu",
-    email: "sophie.liu.personal@gmail.com",
-    role: "Retail Manager",
-    company: "Modern Goods",
-    status: "Active",
-    date_joined: "2022-09-10",
-    last_activity: "2025-06-08T09:03:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/omar_el-sayed.jpg",
-    name: "Omar El-Sayed",
-    email: "omarsayed78@hotmail.com",
-    role: "Accounts Payable",
-    company: "Sayed Textiles",
-    status: "Inactive",
-    date_joined: "2021-06-05",
-    last_activity: "2024-12-18T11:40:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/grace_nguyen.jpg",
-    name: "Grace Nguyen",
-    email: "gracenguyen23@icloud.com",
-    role: "Product Supplier",
-    company: "Green Earth Supplies",
-    status: "Active",
-    date_joined: "2023-11-03",
-    last_activity: "2025-06-08T17:28:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/alex_romero.jpg",
-    name: "Alex Romero",
-    email: "alex.romero@gmail.com",
-    role: "Client Account Owner",
-    company: "Romero & Co.",
-    status: "Suspended",
-    date_joined: "2022-02-28",
-    last_activity: "2025-03-11T08:20:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/lena_schmidt.jpg",
-    name: "Lena Schmidt",
-    email: "lena_schmidt92@gmx.de",
-    role: "Wholesale Contact",
-    company: "Schmidt Imports",
-    status: "Active",
-    date_joined: "2021-12-01",
-    last_activity: "2025-06-06T21:10:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/devon_price.jpg",
-    name: "Devon Price",
-    email: "devon.price22@aol.com",
-    role: "Fulfillment Liaison",
-    company: "DepotLink",
-    status: "Active",
-    date_joined: "2024-05-17",
-    last_activity: "2025-06-08T10:42:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/isabella_rossi.jpg",
-    name: "Isabella Rossi",
-    email: "bella.rossi@gmail.com",
-    role: "Procurement Agent",
-    company: "Rossi Global Sourcing",
-    status: "Pending",
-    date_joined: "2023-07-19",
-    last_activity: "2025-05-29T14:05:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/tariq_khan.jpg",
-    name: "Tariq Khan",
-    email: "tariq.khan92@protonmail.com",
-    role: "International Ops Lead",
-    company: "CrossPort Trade Inc.",
-    status: "Active",
-    date_joined: "2022-11-08",
-    last_activity: "2025-06-08T16:11:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/emily_zhang.jpg",
-    name: "Emily Zhang",
-    email: "emilyzhang.home@gmail.com",
-    role: "Logistics Coordinator",
-    company: "Zhang Export Ltd.",
-    status: "Active",
-    date_joined: "2023-03-12",
-    last_activity: "2025-06-08T19:02:00Z"
-  }
-];
-const DEFAULT_TABLE_COLUMNS = {
-  name: {
-    columnType: "text",
-    label: "Name"
-  },
-  email: {
-    columnType: "email",
-    label: "Email"
-  },
-  role: {
-    columnType: "text",
-    label: "Role"
-  },
-  company: {
-    columnType: "text",
-    label: "Company"
-  },
-  status: {
-    columnType: "tags",
-    tagDisplayConfig: {
-      Active: {
-        color: "#14CDB733"
-      },
-      Pending: {
-        color: "#FF9F3533"
-      },
-      Inactive: {
-        color: "#a6a0a033"
-      },
-      Suspended: {
-        color: "#FF62A433"
-      }
-    },
-    label: "Status"
-  },
-  date_joined: {
-    columnType: "date",
-    inputFormat: "YYYY-MM-DD",
-    outputFormat: "MM-DD-YYYY",
-    label: "Date joined"
-  },
-  last_activity: {
-    columnType: "date",
-    inputFormat: "YYYY-MM-DDTHH:mm:ssZ",
-    outputFormat: "MM-DD-YYYY",
-    label: "Last activity"
-  },
-  photo: {
-    columnType: "image",
-    label: "Photo",
-    imageBorderRadius: {
-      topLeft: Dim.px(16),
-      topRight: Dim.px(16),
-      bottomLeft: Dim.px(16),
-      bottomRight: Dim.px(16)
-    }
-  }
-};
-const DEFAULT_TABLE_KEYS = Object.keys(DEFAULT_TABLE_COLUMNS);
-const CLEARED_TABLE_COLUMNS = DEFAULT_TABLE_KEYS.reduce(
-  (acc, key2) => {
-    acc[key2] = void 0;
-    return acc;
-  },
-  {}
-);
 function getParentInfo(parent) {
   const parentComponentMeta = getEditStore().runtimeEntitiesManager.getAnyEditorWidgetMeta(parent.id);
   const isParentGridLike = isWidgetGrid(parentComponentMeta);
@@ -128182,123 +127989,6 @@ function getParentInfo(parent) {
     type: parentComponentMeta == null ? void 0 : parentComponentMeta.type
   };
 }
-function getModalChildren(modalName) {
-  return [
-    {
-      tagName: "Container",
-      properties: {
-        variant: Property.Static("none"),
-        width: Property.Dimension(Dim.fill()),
-        layout: Property.Static("horizontal"),
-        horizontalAlign: Property.Static("left")
-      },
-      children: [
-        {
-          tagName: "Text",
-          properties: {
-            text: Property.Static("Modal Title"),
-            textStyle: Property.Static({
-              variant: "heading3"
-            })
-          },
-          children: []
-        }
-      ]
-    },
-    {
-      tagName: "Container",
-      properties: {
-        variant: Property.Static("none"),
-        width: Property.Dimension(Dim.fill()),
-        horizontalAlign: Property.Static("left")
-      },
-      children: []
-    },
-    {
-      tagName: "Container",
-      properties: {
-        spacing: Property.Dimension(Dim.px(8)),
-        width: Property.Dimension(Dim.fill()),
-        variant: Property.Static("none"),
-        layout: Property.Static("horizontal"),
-        horizontalAlign: Property.Static("right")
-      },
-      children: [
-        {
-          tagName: "Button",
-          properties: {
-            label: Property.Static("Cancel"),
-            variant: Property.Static("secondary"),
-            onClick: Property.Event([
-              {
-                id: "closeModal",
-                type: TriggerStepType.CONTROL_MODAL,
-                name: modalName,
-                action: "close"
-              }
-            ])
-          },
-          children: []
-        },
-        {
-          tagName: "Button",
-          properties: {
-            label: Property.Static("Confirm")
-          },
-          children: []
-        }
-      ]
-    }
-  ];
-}
-function getSlideoutChildren() {
-  return [
-    {
-      tagName: "Container",
-      properties: {
-        variant: Property.Static("none"),
-        width: Property.Dimension(Dim.fill()),
-        layout: Property.Static("horizontal"),
-        horizontalAlign: Property.Static("left")
-      },
-      children: [
-        {
-          tagName: "Text",
-          properties: {
-            text: Property.Static("Slideout Title"),
-            textStyle: Property.Static({
-              variant: "heading3"
-            })
-          },
-          children: []
-        }
-      ]
-    },
-    {
-      tagName: "Container",
-      properties: {
-        variant: Property.Static("none"),
-        width: Property.Dimension(Dim.fill()),
-        height: Property.Dimension(Dim.fill()),
-        horizontalAlign: Property.Static("left"),
-        layout: Property.Static("vertical")
-      },
-      children: []
-    }
-  ];
-}
-function getSectionChildren() {
-  return [
-    {
-      tagName: "Column",
-      properties: {
-        width: Property.Dimension(Dim.fill()),
-        height: Property.Dimension(Dim.fill())
-      },
-      children: []
-    }
-  ];
-}
 function getTriggerComponent({
   componentType,
   parentElement,
@@ -128344,11 +128034,41 @@ function getTriggerComponent({
   }
   throw new Error("Unhandled component type: " + componentType);
 }
-function getComponentBaseProperties(componentType, parentInfo) {
-  var _a2, _b2, _c2, _d2;
+const generateUniqueName = (componentType) => {
+  const baseName = componentType;
+  let counter2 = 1;
+  let name = `${baseName}${counter2}`;
+  while (rootStore.nameManager.hasEntityWithName(name)) {
+    counter2++;
+    name = `${baseName}${counter2}`;
+  }
+  return name;
+};
+function getBinding({
+  componentType,
+  editorTemplateCreateRequest,
+  parentInfo
+}) {
   const customComponents = rootStore.componentRegistry.customComponentList;
+  if ((editorTemplateCreateRequest == null ? void 0 : editorTemplateCreateRequest.generateBinding) === true) {
+    return Property.Static(generateUniqueName(componentType));
+  } else if (typeof (editorTemplateCreateRequest == null ? void 0 : editorTemplateCreateRequest.generateBinding) === "string") {
+    return Property.Static(editorTemplateCreateRequest.generateBinding);
+  } else {
+    const shouldProvideAName = (
+      // All components dropped in a grid
+      parentInfo.isGridLike || // All custom components
+      customComponents.includes(componentType)
+    );
+    if (shouldProvideAName) {
+      return Property.Static(generateUniqueName(componentType));
+    }
+    return void 0;
+  }
+}
+function getComponentBaseProperties(componentType, parentInfo) {
+  var _a2, _b2, _c2;
   let properties2 = {};
-  let children = [];
   const editorTemplates = rootStore.componentRegistry.getEditorTemplates(componentType);
   if (editorTemplates && editorTemplates.length > 1) {
     throw new Error(
@@ -128356,142 +128076,29 @@ function getComponentBaseProperties(componentType, parentInfo) {
     );
   }
   const context2 = {
-    generateUniqueName: getUniqueName
+    generateUniqueName,
+    parentInfo
   };
-  const editorTemplateOnCreate = (_b2 = (_a2 = editorTemplates == null ? void 0 : editorTemplates[0]) == null ? void 0 : _a2.create) == null ? void 0 : _b2.call(_a2, context2);
-  if (editorTemplateOnCreate && Array.isArray(editorTemplateOnCreate)) {
+  const editorTemplateCreateRequest = (_b2 = (_a2 = editorTemplates == null ? void 0 : editorTemplates[0]) == null ? void 0 : _a2.create) == null ? void 0 : _b2.call(_a2, context2);
+  if (editorTemplateCreateRequest && Array.isArray(editorTemplateCreateRequest)) {
     throw new Error(
-      `Multiple creates for on editor template are not supported yet. Found ${editorTemplateOnCreate.length} for component type: ${componentType}.`
-    );
-  }
-  if (editorTemplateOnCreate && editorTemplateOnCreate.bind) {
-    properties2.name = Property.Static(editorTemplateOnCreate.bind);
-  } else {
-    const shouldProvideAName = (
-      // TODO: migrate these components
-      componentType === "Dropdown" || componentType === "DatePicker" || componentType === "Checkbox" || componentType === "Switch" || componentType === "Modal" || componentType === "Slideout" || componentType === "Table" || // All components dropped in a grid
-      parentInfo.isGridLike || // All custom components
-      customComponents.includes(componentType)
+      `Multiple creates for editor template are not supported yet. Found ${editorTemplateCreateRequest.length} for component type: ${componentType}.`
     );
-    if (shouldProvideAName) {
-      properties2.name = Property.Static(getUniqueName(componentType));
-    }
-  }
-  const isContainer = componentType === "Section" || componentType === "Column" || componentType === "Container" || componentType === "Modal" || componentType === "Slideout";
-  if (isContainer && componentType !== "Modal" && componentType !== "Slideout") {
-    properties2.width = Property.Dimension(Dim.fill());
   }
-  switch (componentType) {
-    case "Text":
-      properties2.text = Property.Static("Hello, world!");
-      break;
-    case "Button":
-      properties2.label = Property.Static("Submit");
-      properties2.onClick = Property.Event([
-        {
-          type: TriggerStepType.RUN_JS,
-          code: "() => console.log('Button clicked')",
-          id: "buttonClick"
-        }
-      ]);
-      break;
-    case "Image":
-      properties2.src = Property.Static(
-        "https://lowcode.s3.us-west-2.amazonaws.com/eilish-billie.jpeg"
-      );
-      properties2.fillContainer = Property.Static(true);
-      properties2.width = parentInfo.isGridLike ? Property.Dimension(Dim.col(4)) : Property.Dimension(Dim.px(300));
-      properties2.height = Property.Dimension(Dim.fit());
-      break;
-    case "KeyValue":
-      properties2.sourceData = Property.Static({
-        id: 123,
-        name: "John Smith",
-        description: "John has been cardholder for 3 years",
-        createdDate: "10-23-2012"
-      });
-      properties2.propertiesOrder = Property.Static([
-        "id",
-        "name",
-        "description",
-        "createdDate"
-      ]);
-      properties2.properties = Property.Static({
-        id: {
-          id: "id",
-          key: "id",
-          type: KeyValuePropertyType.NUMBER,
-          isVisible: true,
-          isDerived: false
-        },
-        name: {
-          id: "name",
-          key: "name",
-          type: KeyValuePropertyType.TEXT,
-          isVisible: true,
-          isDerived: false
-        },
-        description: {
-          id: "description",
-          key: "description",
-          type: KeyValuePropertyType.TEXT,
-          isVisible: true,
-          isDerived: false
-        },
-        createdDate: {
-          id: "createdDate",
-          key: "createdDate",
-          type: KeyValuePropertyType.DATE,
-          isVisible: true,
-          isDerived: false
-        }
-      });
-      break;
-    case "Dropdown":
-      properties2.label = Property.Static("Label");
-      properties2.options = Property.Computed([
-        { label: "All statuses", value: "all" },
-        { label: "Pending", value: "pending" },
-        { label: "Processing", value: "processing" },
-        { label: "Completed", value: "completed" },
-        { label: "Failed", value: "failed" },
-        { label: "Cancelled", value: "cancelled" },
-        { label: "Rejected", value: "rejected" },
-        { label: "On hold", value: "on_hold" }
-      ]);
-      break;
-    case "Modal":
-      children = getModalChildren((_c2 = properties2.name) == null ? void 0 : _c2.value);
-      break;
-    case "Slideout":
-      children = getSlideoutChildren();
-      break;
-    case "Checkbox":
-      properties2.label = Property.Static("Label");
-      break;
-    case "DatePicker":
-      properties2.label = Property.Static("Label");
-      properties2.defaultDate = Property.Static((/* @__PURE__ */ new Date()).toISOString());
-      break;
-    case "Switch":
-      properties2.label = Property.Static("Label");
-      break;
-    case "Section":
-      children = getSectionChildren();
-      break;
-    case "Table":
-      properties2.tableData = Property.Static(DEFAULT_TABLE_DATA);
-      properties2.columns = Property.Static(DEFAULT_TABLE_COLUMNS);
-      properties2.header = Property.Static("Customers");
-      properties2.searchPlaceholder = Property.Static("Search...");
-      break;
-  }
-  if (editorTemplateOnCreate == null ? void 0 : editorTemplateOnCreate.properties) {
+  if (editorTemplateCreateRequest == null ? void 0 : editorTemplateCreateRequest.properties) {
     properties2 = {
       ...properties2,
-      ...editorTemplateOnCreate.properties
+      ...editorTemplateCreateRequest.properties
     };
   }
+  const binding = getBinding({
+    componentType,
+    editorTemplateCreateRequest,
+    parentInfo
+  });
+  if (binding) {
+    properties2.name = binding;
+  }
   const { width, height, ...restProperties } = properties2;
   const safeDimensions = parentInfo.isGridLike ? filterSafeGridDimensionProperties({
     width: width == null ? void 0 : width.value,
@@ -128505,20 +128112,10 @@ function getComponentBaseProperties(componentType, parentInfo) {
       ...restProperties,
       ...safeDimensions
     },
-    children,
-    name: (_d2 = properties2.name) == null ? void 0 : _d2.value
+    children: (editorTemplateCreateRequest == null ? void 0 : editorTemplateCreateRequest.children) ?? [],
+    name: (_c2 = properties2.name) == null ? void 0 : _c2.value
   };
 }
-const getUniqueName = (componentType) => {
-  const baseName = componentType;
-  let counter2 = 1;
-  let name = `${baseName}${counter2}`;
-  while (rootStore.nameManager.hasEntityWithName(name)) {
-    counter2++;
-    name = `${baseName}${counter2}`;
-  }
-  return name;
-};
 function checkComponentForParentTypeBeforeCreating(componentType, parentType) {
   if (componentType === "Section" && parentType !== "Page") {
     return false;
@@ -130850,6 +130447,21 @@ function useTypographyStyling({
     style: style2
   };
 }
+const editorTemplate$c = {
+  create: () => ({
+    type: "Button",
+    properties: {
+      label: Property.Static("Button"),
+      onClick: Property.Event([
+        {
+          type: TriggerStepType.RUN_JS,
+          code: "() => console.log('Button clicked')",
+          id: "buttonClick"
+        }
+      ])
+    }
+  })
+};
 const DEFAULT_ICON_SPACING = 8;
 const DEFAULT_ICON_SIZE = 16;
 const ICON_POSITION_OPTIONS = [
@@ -131400,7 +131012,7 @@ const Button$3 = registerComponent$1(
       }
     ) });
   }
-);
+).addEditorTemplate(editorTemplate$c);
 const useAlignmentStyles = ({
   layout,
   verticalAlign,
@@ -131802,6 +131414,29 @@ const InternalVStack = (props2) => {
 const InternalHStack = (props2) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InternalStack, { direction: "row", ...props2 });
 };
+function getSectionChildren() {
+  return [
+    {
+      tagName: "Column",
+      properties: {
+        width: Property.Dimension(Dim.fill()),
+        height: Property.Dimension(Dim.fill())
+      },
+      children: []
+    }
+  ];
+}
+const editorTemplate$b = {
+  create: () => {
+    return {
+      type: "Section",
+      children: getSectionChildren(),
+      properties: {
+        width: Property.Dimension(Dim.fill())
+      }
+    };
+  }
+};
 const DEFAULT_SECTION_PADDING = {
   left: Dim.px(0),
   right: Dim.px(0),
@@ -131878,7 +131513,7 @@ const Section2 = registerComponent$1(
       }
     );
   }
-);
+).addEditorTemplate(editorTemplate$b);
 const generateClassName = (seed2) => {
   return `superblocks_widget_${seed2}`;
 };
@@ -132188,6 +131823,14 @@ const StaticComponent = ({
   }, [staticHeight]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...style2, width: "100%", height: "100%" }, children });
 };
+const editorTemplate$a = {
+  create: () => ({
+    type: "Container",
+    properties: {
+      width: Property.Dimension(Dim.fill())
+    }
+  })
+};
 const propertiesDefinition$g = {
   layout: Section$1.category(PropsPanelCategory.Layout).add(
     containerLayout({
@@ -132350,7 +131993,15 @@ const Container = registerComponent$1(
     propertiesDefinition: propertiesDefinition$g
   },
   InternalContainer
-);
+).addEditorTemplate(editorTemplate$a);
+const editorTemplate$9 = {
+  create: () => ({
+    type: "Container",
+    properties: {
+      width: Property.Dimension(Dim.fill())
+    }
+  })
+};
 const propertiesDefinition$f = {
   layout: Section$1.category(PropsPanelCategory.Layout).add(
     containerLayout({
@@ -132416,11 +132067,11 @@ const Column = registerComponent$1(
       }
     );
   }
-);
-const editorTemplate = {
-  create: (context2) => ({
+).addEditorTemplate(editorTemplate$9);
+const editorTemplate$8 = {
+  create: () => ({
     type: "Input",
-    bind: context2.generateUniqueName("Input"),
+    generateBinding: true,
     properties: {
       label: Property.Static("Label")
     }
@@ -140090,7 +139741,7 @@ const Input2 = registerComponent$1(
       }
     ) });
   }
-).addEditorTemplate(editorTemplate);
+).addEditorTemplate(editorTemplate$8);
 const propertiesDefinition$d = {
   contents: Section$1.category(PropsPanelCategory.Content).children({
     columns: Prop.array().readAndWrite().propertiesPanel({
@@ -141959,6 +141610,14 @@ const AutolinkedText = (props2) => {
     }
   );
 };
+const editorTemplate$7 = {
+  create: () => ({
+    type: "Text",
+    properties: {
+      text: Property.Static("Hello, world!")
+    }
+  })
+};
 var button$1 = {};
 var interopRequireDefault = { exports: {} };
 var hasRequiredInteropRequireDefault;
@@ -147156,7 +146815,7 @@ const Text$1 = registerComponent$1(
       }
     ) });
   }
-);
+).addEditorTemplate(editorTemplate$7);
 function useDialogEditing(props2) {
   const { isOpen, instanceId } = props2;
   const { features, isEditing } = useEditor();
@@ -147220,6 +146879,85 @@ function useDialogEditing(props2) {
     prevIsOpenRef.current = isOpen;
   }, [isOpen]);
 }
+function getModalChildren(modalName) {
+  return [
+    {
+      tagName: "Container",
+      properties: {
+        variant: Property.Static("none"),
+        width: Property.Dimension(Dim.fill()),
+        layout: Property.Static("horizontal"),
+        horizontalAlign: Property.Static("left")
+      },
+      children: [
+        {
+          tagName: "Text",
+          properties: {
+            text: Property.Static("Modal Title"),
+            textStyle: Property.Static({
+              variant: "heading3"
+            })
+          },
+          children: []
+        }
+      ]
+    },
+    {
+      tagName: "Container",
+      properties: {
+        variant: Property.Static("none"),
+        width: Property.Dimension(Dim.fill()),
+        horizontalAlign: Property.Static("left")
+      },
+      children: []
+    },
+    {
+      tagName: "Container",
+      properties: {
+        spacing: Property.Dimension(Dim.px(8)),
+        width: Property.Dimension(Dim.fill()),
+        variant: Property.Static("none"),
+        layout: Property.Static("horizontal"),
+        horizontalAlign: Property.Static("right")
+      },
+      children: [
+        {
+          tagName: "Button",
+          properties: {
+            label: Property.Static("Cancel"),
+            variant: Property.Static("secondary"),
+            onClick: Property.Event([
+              {
+                id: "closeModal",
+                type: TriggerStepType.CONTROL_MODAL,
+                name: modalName,
+                action: "close"
+              }
+            ])
+          },
+          children: []
+        },
+        {
+          tagName: "Button",
+          properties: {
+            label: Property.Static("Confirm")
+          },
+          children: []
+        }
+      ]
+    }
+  ];
+}
+const editorTemplate$6 = {
+  create: (context2) => {
+    const modalName = context2.generateUniqueName("Modal");
+    return {
+      type: "Modal",
+      generateBinding: modalName,
+      children: getModalChildren(modalName)
+    };
+  }
+};
 const MODAL_BORDER_RADIUS = 4;
 const MODAL_WIDTH_PRESETS = {
   // in percentages
@@ -147565,7 +147303,52 @@ const Modal = registerComponent$1(
       }
     );
   }
-);
+).addEditorTemplate(editorTemplate$6);
+function getSlideoutChildren() {
+  return [
+    {
+      tagName: "Container",
+      properties: {
+        variant: Property.Static("none"),
+        width: Property.Dimension(Dim.fill()),
+        layout: Property.Static("horizontal"),
+        horizontalAlign: Property.Static("left")
+      },
+      children: [
+        {
+          tagName: "Text",
+          properties: {
+            text: Property.Static("Slideout Title"),
+            textStyle: Property.Static({
+              variant: "heading3"
+            })
+          },
+          children: []
+        }
+      ]
+    },
+    {
+      tagName: "Container",
+      properties: {
+        variant: Property.Static("none"),
+        width: Property.Dimension(Dim.fill()),
+        height: Property.Dimension(Dim.fill()),
+        horizontalAlign: Property.Static("left"),
+        layout: Property.Static("vertical")
+      },
+      children: []
+    }
+  ];
+}
+const editorTemplate$5 = {
+  create: () => {
+    return {
+      type: "Slideout",
+      generateBinding: true,
+      children: getSlideoutChildren()
+    };
+  }
+};
 const SlideoutSize = {
   xsmall: "xsmall",
   small: "small",
@@ -149919,7 +149702,7 @@ const Slideout = registerComponent$1(
       }
     );
   }
-);
+).addEditorTemplate(editorTemplate$5);
 const RowDensity = {
   "extra-small": "extra-small",
   small: "small",
@@ -150096,6 +149879,196 @@ const tagColorPalette = [
   "#9D585833",
   "#FF484833"
 ];
+const DEFAULT_TABLE_DATA = [
+  {
+    photo: "https://cdn.superblocks.com/sample-data/rachel_kim.jpg",
+    name: "Rachel Kim",
+    email: "rachel.kim89@gmail.com",
+    role: "Vendor Partner",
+    company: "Urban Threads Co.",
+    status: "Active",
+    date_joined: "2023-04-12",
+    last_activity: "2025-06-07T16:20:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/daniel_vargas.jpg",
+    name: "Daniel Vargas",
+    email: "dvargas1984@yahoo.com",
+    role: "Logistics Contact",
+    company: "Vargas Freight Ltd.",
+    status: "Pending",
+    date_joined: "2024-01-23",
+    last_activity: "2025-05-30T13:45:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/sophie_liu.jpg",
+    name: "Sophie Liu",
+    email: "sophie.liu.personal@gmail.com",
+    role: "Retail Manager",
+    company: "Modern Goods",
+    status: "Active",
+    date_joined: "2022-09-10",
+    last_activity: "2025-06-08T09:03:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/omar_el-sayed.jpg",
+    name: "Omar El-Sayed",
+    email: "omarsayed78@hotmail.com",
+    role: "Accounts Payable",
+    company: "Sayed Textiles",
+    status: "Inactive",
+    date_joined: "2021-06-05",
+    last_activity: "2024-12-18T11:40:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/grace_nguyen.jpg",
+    name: "Grace Nguyen",
+    email: "gracenguyen23@icloud.com",
+    role: "Product Supplier",
+    company: "Green Earth Supplies",
+    status: "Active",
+    date_joined: "2023-11-03",
+    last_activity: "2025-06-08T17:28:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/alex_romero.jpg",
+    name: "Alex Romero",
+    email: "alex.romero@gmail.com",
+    role: "Client Account Owner",
+    company: "Romero & Co.",
+    status: "Suspended",
+    date_joined: "2022-02-28",
+    last_activity: "2025-03-11T08:20:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/lena_schmidt.jpg",
+    name: "Lena Schmidt",
+    email: "lena_schmidt92@gmx.de",
+    role: "Wholesale Contact",
+    company: "Schmidt Imports",
+    status: "Active",
+    date_joined: "2021-12-01",
+    last_activity: "2025-06-06T21:10:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/devon_price.jpg",
+    name: "Devon Price",
+    email: "devon.price22@aol.com",
+    role: "Fulfillment Liaison",
+    company: "DepotLink",
+    status: "Active",
+    date_joined: "2024-05-17",
+    last_activity: "2025-06-08T10:42:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/isabella_rossi.jpg",
+    name: "Isabella Rossi",
+    email: "bella.rossi@gmail.com",
+    role: "Procurement Agent",
+    company: "Rossi Global Sourcing",
+    status: "Pending",
+    date_joined: "2023-07-19",
+    last_activity: "2025-05-29T14:05:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/tariq_khan.jpg",
+    name: "Tariq Khan",
+    email: "tariq.khan92@protonmail.com",
+    role: "International Ops Lead",
+    company: "CrossPort Trade Inc.",
+    status: "Active",
+    date_joined: "2022-11-08",
+    last_activity: "2025-06-08T16:11:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/emily_zhang.jpg",
+    name: "Emily Zhang",
+    email: "emilyzhang.home@gmail.com",
+    role: "Logistics Coordinator",
+    company: "Zhang Export Ltd.",
+    status: "Active",
+    date_joined: "2023-03-12",
+    last_activity: "2025-06-08T19:02:00Z"
+  }
+];
+const DEFAULT_TABLE_COLUMNS = {
+  name: {
+    columnType: "text",
+    label: "Name"
+  },
+  email: {
+    columnType: "email",
+    label: "Email"
+  },
+  role: {
+    columnType: "text",
+    label: "Role"
+  },
+  company: {
+    columnType: "text",
+    label: "Company"
+  },
+  status: {
+    columnType: "tags",
+    tagDisplayConfig: {
+      Active: {
+        color: "#14CDB733"
+      },
+      Pending: {
+        color: "#FF9F3533"
+      },
+      Inactive: {
+        color: "#a6a0a033"
+      },
+      Suspended: {
+        color: "#FF62A433"
+      }
+    },
+    label: "Status"
+  },
+  date_joined: {
+    columnType: "date",
+    inputFormat: "YYYY-MM-DD",
+    outputFormat: "MM-DD-YYYY",
+    label: "Date joined"
+  },
+  last_activity: {
+    columnType: "date",
+    inputFormat: "YYYY-MM-DDTHH:mm:ssZ",
+    outputFormat: "MM-DD-YYYY",
+    label: "Last activity"
+  },
+  photo: {
+    columnType: "image",
+    label: "Photo",
+    imageBorderRadius: {
+      topLeft: Dim.px(16),
+      topRight: Dim.px(16),
+      bottomLeft: Dim.px(16),
+      bottomRight: Dim.px(16)
+    }
+  }
+};
+const DEFAULT_TABLE_KEYS = Object.keys(DEFAULT_TABLE_COLUMNS);
+const CLEARED_TABLE_COLUMNS = DEFAULT_TABLE_KEYS.reduce(
+  (acc, key2) => {
+    acc[key2] = void 0;
+    return acc;
+  },
+  {}
+);
+const editorTemplate$4 = {
+  create: () => ({
+    type: "Table",
+    generateBinding: true,
+    properties: {
+      tableData: Property.Static(DEFAULT_TABLE_DATA),
+      columns: Property.Static(DEFAULT_TABLE_COLUMNS),
+      header: Property.Static("Customers"),
+      searchPlaceholder: Property.Static("Search...")
+    }
+  })
+};
 const CurrencyList = CC.getCodes();
 const tableColumnTypes = [
   {
@@ -159787,14 +159760,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-C0am3WW9.js"
+            "./allPathsLoader-BGvU53aT.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-Co86rhhm.js"
+            "./splitPathsBySizeLoader-B1MrW6Zz.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -191486,7 +191459,7 @@ const Table = registerComponent$1(
       }
     ) });
   }
-);
+).addEditorTemplate(editorTemplate$4);
 var NS = getClassNamespace$1();
 var MULTISELECT = "".concat(NS, "-multi-select");
 var MULTISELECT_POPOVER = "".concat(MULTISELECT, "-popover");
@@ -195108,6 +195081,25 @@ const ListItemRenderer = (itemProps) => {
   ) }, itemProps.index);
 };
 ListItemRenderer.displayName = "SelectListItemRenderer";
+const editorTemplate$3 = {
+  create: () => ({
+    type: "Dropdown",
+    generateBinding: true,
+    properties: {
+      label: Property.Static("Label"),
+      options: Property.Computed([
+        { label: "All statuses", value: "all" },
+        { label: "Pending", value: "pending" },
+        { label: "Processing", value: "processing" },
+        { label: "Completed", value: "completed" },
+        { label: "Failed", value: "failed" },
+        { label: "Cancelled", value: "cancelled" },
+        { label: "Rejected", value: "rejected" },
+        { label: "On hold", value: "on_hold" }
+      ])
+    }
+  })
+};
 const DropdownEntireObjectOption = "$$ENTIRE_OBJECT";
 const normalizeFunction$1 = (val, transformationValue) => {
   if (transformationValue === DropdownEntireObjectOption) {
@@ -195669,7 +195661,7 @@ const Dropdown = registerComponent$1(
       }
     ) }) });
   }
-);
+).addEditorTemplate(editorTemplate$3);
 const CustomComponent = registerComponent$1(
   "CustomComponent",
   {
@@ -195843,6 +195835,15 @@ class CheckboxComponent extends React__default.PureComponent {
     );
   }
 }
+const editorTemplate$2 = {
+  create: () => ({
+    type: "Checkbox",
+    generateBinding: true,
+    properties: {
+      label: Property.Static("Label")
+    }
+  })
+};
 const propertiesDefinition$7 = {
   general: Section$1.category(PropsPanelCategory.Content).children({
     label: Prop.string().readAndWrite().default("").propertiesPanel({
@@ -195970,7 +195971,7 @@ const Checkbox = registerComponent$1(
       }
     ) });
   }
-);
+).addEditorTemplate(editorTemplate$2);
 const adjustDateFormatSideEffect = (params) => {
   const widgetMeta = params.widgetMeta;
   const widgetState = params.widgetState;
@@ -196344,6 +196345,15 @@ const DatePicker = registerComponent$1(
     ) });
   }
 );
+const editorTemplate$1 = {
+  create: () => ({
+    type: "Switch",
+    generateBinding: true,
+    properties: {
+      label: Property.Static("Label")
+    }
+  })
+};
 const propertiesDefinition$5 = {
   general: Section$1.category(PropsPanelCategory.Content).children({
     label: Prop.string().readAndWrite().default("").propertiesPanel({
@@ -196629,10 +196639,10 @@ const Switch = registerComponent$1(
       props2.sourceId
     ) });
   }
-);
+).addEditorTemplate(editorTemplate$1);
 const propertiesDefinition$4 = {
   general: Section$1.category(PropsPanelCategory.Content).children({
-    icon: Prop.string().readAndWrite().default("info").propertiesPanel({
+    icon: Prop.string().readAndWrite().propertiesPanel({
       label: "Icon",
       helpText: "Select an icon",
       controlType: "ICON_SELECTOR"
@@ -196720,6 +196730,19 @@ const Icon = registerComponent$1(
     );
   }
 );
+const editorTemplate = {
+  create: (context2) => ({
+    type: "Image",
+    properties: {
+      src: Property.Static(
+        "https://lowcode.s3.us-west-2.amazonaws.com/eilish-billie.jpeg"
+      ),
+      fillContainer: Property.Static(true),
+      width: context2.parentInfo.isGridLike ? Property.Dimension(Dim.col(4)) : Property.Dimension(Dim.px(300)),
+      height: Property.Dimension(Dim.fit())
+    }
+  })
+};
 const StyledImage = qe$1.img`
   opacity: 0;
   pointer-events: none;
@@ -196951,7 +196974,7 @@ const Image = registerComponent$1(
       }
     ) });
   }
-);
+).addEditorTemplate(editorTemplate);
 const propertiesDefinition$2 = {
   general: Section$1.category(PropsPanelCategory.Uncategorized).propertiesPanel({ showHeader: false }).children({
     defaultValue: Prop.any().readAndWrite().propertiesPanel({
@@ -200707,4 +200730,4 @@ export {
   setQueryParams as y,
   download as z
 };
-//# sourceMappingURL=index-CGJkVHjX.js.map
+//# sourceMappingURL=index-Cqcbj1GQ.js.map