@superblocksteam/cli 2.0.3-next.2 → 2.0.3-next.200

package/dist/{generated-B26UL5I4.js → generated-C6SMCIBJ.js}

@@ -9,175 +9,180 @@ init_cjs_shims();
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/index.js
 var subprompts_exports = {};
 __export(subprompts_exports, {
-  superblocks_api: () => content,
-  superblocks_components_rules: () => content2,
-  superblocks_custom_components: () => content3,
-  superblocks_data_filtering: () => content4,
-  superblocks_event_flow: () => content5,
-  superblocks_forms: () => content6,
-  superblocks_layouts: () => content7,
-  superblocks_page: () => content8,
-  superblocks_rbac: () => content9,
-  superblocks_routes: () => content10,
-  superblocks_state: () => content11,
-  superblocks_theming: () => content12,
-  system: () => content13
+  full_examples: () => content,
+  superblocks_api: () => content2,
+  superblocks_components_rules: () => content3,
+  superblocks_custom_components: () => content4,
+  superblocks_data_filtering: () => content5,
+  superblocks_event_flow: () => content6,
+  superblocks_forms: () => content7,
+  superblocks_layouts: () => content8,
+  superblocks_page: () => content9,
+  superblocks_rbac: () => content10,
+  superblocks_routes: () => content11,
+  superblocks_state: () => content12,
+  superblocks_theming: () => content13,
+  system: () => content14
 });
 init_cjs_shims();
 
+// ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/full-examples.js
+init_cjs_shims();
+var content = "### FULL EXAMPLES\n";
+
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-api.js
 init_cjs_shims();
-var content = '### APIs\n\nThe Superblocks framework allows you to create backend APIs. The high level structure for creating APIs is as follows:\n\n1. APIs are defined using TypeScript files that live inside the apis directory inside the page they are scoped to. Example: /pages/Page1/apis/myApi.ts\n2. This pattern is a declarative workflow builder, where you define each API step, its configuration, and its execution order within the API workflow.\n3. To make the API available for use, you must import it into the scope file and register it with `SbApi()`, then import and destructure it in your page component for use.\n\n#### CRITICAL VARIABLE SCOPING RULES\n\n**\u{1F6A8} EXTREMELY IMPORTANT**: Variables referenced in API blocks can ONLY come from these sources:\n\n1. **Outputs of previous blocks** in the same API (accessed via the block name)\n2. **Page entities defined in the scope file** (passed as destructured parameters)\n3. **Never reference variables that don\'t exist** - this is the #1 cause of API generation errors\n\n**\u274C WRONG - Variables that don\'t exist in scope:**\n\n```ts\nnew PostgreSQL("insert_data", "postgres-integration-id", {\n  statement: ({ customerId, productName, issueType }) =>\n    `INSERT INTO issues VALUES (${customerId.value}, \'${productName.value}\', \'${issueType.value}\')`,\n  // \u274C ERROR: customerId, productName, issueType are not defined anywhere!\n});\n```\n\n**\u2705 CORRECT - Variables from scope entities:**\n\n```ts\n// First, define in scope.ts:\nexport const Page1Scope = createSbScope<{\n  CustomerIdInput: any;\n  ProductNameInput: any;\n  IssueTypeDropdown: any;\n}>(\n  () => ({\n    // Register the API\n    submitIssue: SbApi({}),\n  }),\n  { name: "Page1" },\n);\n\n// Then use in API:\nnew PostgreSQL("insert_data", "postgres-integration-id", {\n  statement: ({ CustomerIdInput, ProductNameInput, IssueTypeDropdown }) =>\n    `INSERT INTO issues VALUES (${CustomerIdInput.value}, \'${ProductNameInput.value}\', \'${IssueTypeDropdown.selectedOptionValue}\')`,\n  // \u2705 CORRECT: These are page entities defined in the scope\n});\n```\n\n**\u2705 CORRECT - Variables from previous blocks:**\n\n```ts\nexport default new Api("processOrder", [\n  new JavaScript("get_customer_data", {\n    fn: () => ({ customerId: 123, customerName: "John Doe" }),\n  }),\n  new PostgreSQL("insert_order", "postgres-integration-id", {\n    statement: ({ get_customer_data }) =>\n      `INSERT INTO orders VALUES (${get_customer_data.output.customerId}, \'${get_customer_data.output.customerName}\')`,\n    // \u2705 CORRECT: get_customer_data is a previous block in this API\n  }),\n]);\n```\n\n#### Rules\n\n1. CRITICAL: The name of the API must be consistent across the API\'s TypeScript definition, the API\'s file name, references in page files, and the key used to register it in the scope file. See the consistent use of \'myApi\' below as an example.\n2. ALWAYS import ALL API classes from the superblocks library at the top of every API file. Use this complete import statement for every API file:\n3. When using database integrations (PostgreSQL, Snowflake, Databricks), the integration_id parameter should be the actual integration ID from your Superblocks workspace, not a placeholder string.\n4. **CRITICAL**: DO NOT reference variables that are not in scope. The ONLY things in scope are (1) the outputs of previous blocks that are in lexical scope and (2) page entities defined in the scope file.\n\n```ts\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from "@superblocksteam/library";\n```\n\n#### Examples\n\n##### Complete Example: Scope \u2192 Components \u2192 API Flow\n\nThis example shows the complete flow from defining variables in scope, to binding them to components, to using them in APIs.\n\n**Step 1: Define entities in scope file**\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  CustomerNameInput: any;\n  ProductNameInput: any;\n  IssueTypeDropdown: any;\n  IssueNotesInput: any;\n}>(\n  () => ({\n    // Register the API\n    submitProductIssue: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**Step 2: Use entities in page components**\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbInput,\n  SbDropdown,\n  SbButton,\n  SbEventFlow,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  const {\n    CustomerNameInput,\n    ProductNameInput,\n    IssueTypeDropdown,\n    IssueNotesInput,\n    submitProductIssue,\n  } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbInput bind={CustomerNameInput} label="Customer Name" />\n          <SbInput bind={ProductNameInput} label="Product Name" />\n          <SbDropdown\n            bind={IssueTypeDropdown}\n            label="Issue Type"\n            options={[\n              { label: "Defect", value: "defect" },\n              { label: "Complaint", value: "complaint" },\n              { label: "Return", value: "return" },\n            ]}\n          />\n          <SbInput bind={IssueNotesInput} label="Notes" multiline={true} />\n          <SbButton\n            label="Submit Issue"\n            onClick={SbEventFlow.runApis([submitProductIssue])}\n          />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n**Step 3: Create API that uses the scope entities**\n\n```ts\n// /pages/Page1/apis/submitProductIssue.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from "@superblocksteam/library";\n\nexport default new Api("submitProductIssue", [\n  new Conditional("validate_inputs", {\n    if: {\n      when: ({\n        CustomerNameInput,\n        ProductNameInput,\n        IssueTypeDropdown,\n      }): boolean =>\n        !CustomerNameInput.value ||\n        !ProductNameInput.value ||\n        !IssueTypeDropdown.selectedOptionValue,\n      then: [\n        new Throw("validation_error", {\n          error: "Customer name, product name, and issue type are required",\n        }),\n      ],\n    },\n  }),\n  new PostgreSQL("insert_issue", "your-postgresql-integration-id", {\n    statement: ({\n      CustomerNameInput,\n      ProductNameInput,\n      IssueTypeDropdown,\n      IssueNotesInput,\n    }) =>\n      `INSERT INTO product_issues \n       (customer_name, product_name, issue_type, notes, status, date_reported, created_by)\n       VALUES (\n         \'${CustomerNameInput.value}\', \n         \'${ProductNameInput.value}\', \n         \'${IssueTypeDropdown.selectedOptionValue}\', \n         \'${IssueNotesInput.value || ""}\', \n         \'Open\', \n         NOW(), \n         1\n       )`,\n  }),\n  new JavaScript("return_success", {\n    fn: ({ insert_issue }) => ({\n      success: true,\n      message: "Issue submitted successfully",\n      issueId: insert_issue.output?.insertId || null,\n    }),\n  }),\n]);\n```\n\n##### \u274C COMMON MISTAKES TO AVOID\n\n**\u274C WRONG: Using undefined variables**\n\n```ts\n// This is WRONG - these variables don\'t exist!\nexport default new Api("badExample", [\n  new PostgreSQL("insert_data", "postgres-integration-id", {\n    statement: ({ customerId, productName, issueType }) =>\n      `INSERT INTO issues VALUES (${customerId.value}, \'${productName.value}\', \'${issueType.value}\')`,\n    // \u274C ERROR: customerId, productName, issueType are not defined in scope!\n  }),\n]);\n```\n\n**\u274C WRONG: Mixing up variable names**\n\n```ts\n// Scope defines CustomerNameInput but API tries to use customerName\nexport default new Api("badExample", [\n  new PostgreSQL("insert_data", "postgres-integration-id", {\n    statement: (\n      { customerName }, // \u274C ERROR: Should be CustomerNameInput\n    ) => `INSERT INTO issues VALUES (\'${customerName.value}\')`,\n  }),\n]);\n```\n\n**\u274C WRONG: Not destructuring function parameters**\n\n```ts\n// This is WRONG - you must destructure the parameters\nexport default new Api("badExample", [\n  new PostgreSQL("insert_data", "postgres-integration-id", {\n    statement: (\n      state, // \u274C ERROR: Should destructure { CustomerNameInput }\n    ) => `INSERT INTO issues VALUES (\'${state.CustomerNameInput.value}\')`,\n  }),\n]);\n```\n\n##### Creating and registering a Superblocks API\n\nCreate the API by adding the myApi.ts file:\n\n```ts\n// /pages/Page1/apis/myApi.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from "@superblocksteam/library";\n\nexport default new Api("myApi", [\n  new JavaScript("retrieve_orders", {\n    fn: () => {\n      return [\n        {\n          id: "ORD-001",\n          customerName: "John Smith",\n          total: 149.99,\n        },\n        {\n          id: "ORD-002",\n          customerName: "Sarah Jones",\n          total: 89.5,\n        },\n      ];\n    },\n  }),\n]);\n```\n\nThen register the myApi API in the scope file:\n\n```ts\n// /pages/Page1/scope.ts\n\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope(\n  () => ({\n    // Register the API in the scope\n    myApi: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen use the API in your page component:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbButton,\n  SbTable,\n  sbComputed,\n  SbEventFlow,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  const { myApi } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbButton\n            // APIs can be invoked with the SbEventFlow API\n            onClick={SbEventFlow.runApis([myApi])}\n            label="Fetch Data"\n          />\n          {/* Access API response using sbComputed */}\n          <SbTable tableData={sbComputed(() => myApi.response)} />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n##### Referencing the output of a previous block\n\nThink hard about how you access the output of previous steps. You MUST use the output property of the previous step variable. There is no other way to access the output of a previous step (other than using a Variable block, but that is not what you want in this case and should only be used in very specific cases).\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrders.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from "@superblocksteam/library";\n\nexport default new Api("getOrders", [\n  new JavaScript("retrieve_orders", {\n    fn: () => {\n      return [\n        {\n          id: 1,\n          customer: "John Smith",\n          date: "2024-01-15",\n          total: 199.99,\n          status: "Pending",\n        },\n        {\n          id: 2,\n          customer: "Jane Doe",\n          date: "2024-01-14",\n          total: 149.99,\n          status: "Shipped",\n        },\n        {\n          id: 3,\n          customer: "Bob Wilson",\n          date: "2024-01-13",\n          total: 299.99,\n          status: "Delivered",\n        },\n      ];\n    },\n  }),\n  new JavaScript("format_orders", {\n    fn: ({ retrieve_orders }) => {\n      return retrieve_orders.output.map((order) => ({\n        ...order,\n        date: new Date(order.date).toLocaleDateString(),\n      }));\n    },\n  }),\n]);\n```\n\nThen you would register the API in your scope file and use it in your page component:\n\n```ts\n// /pages/Page1/scope.ts\nexport const Page1Scope = createSbScope(\n  () => ({\n    getOrders: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbTable,\n  sbComputed,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  const { getOrders } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbTable tableData={sbComputed(() => getOrders.response)} />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n##### Ensuring variable existence in application\n\nWhen creating an API that references variables like `firstName`, `lastName`, and `userId`, since these variables are not previous blocks or variables from a Variables block, you MUST ensure that they exist as part of the page\'s entities. You must establish these variables in the proper order:\n\nFirst, create the variables in the scope file. Since you\'ve determined that we\'ll use input components to take in the first name and last name, you MUST ensure that you use the same names for the entities in the `scope.ts` file as the variable names in the API.\n\n```ts\n// /pages/Page1/scope.ts\n\nimport {\n  createSbScope,\n  SbApi,\n  SbVariable,\n  SbVariablePersistence,\n  Global,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  firstName: any;\n  lastName: any;\n}>(\n  // register non-component entities in the scope\n  ({ entities: { firstName, lastName, handlePeopleUpdates, userId } }) => ({\n    handlePeopleUpdates: SbApi({}),\n    userId: SbVariable({\n      defaultValue: Global.user.id,\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  // configure page options\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen, use the variables in your page component:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport {\n  SbPage,\n  SbInput,\n  SbEventFlow,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  const { handlePeopleUpdates, firstName, lastName, userId } = Page1;\n\n  return (\n    <SbPage name="Page1">\n      <SbInput\n        label="First Name"\n        bind={firstName}\n        minLength={1}\n        inputType="TEXT"\n      />\n      <SbInput\n        label="Last Name"\n        bind={lastName}\n        minLength={1}\n        inputType="TEXT"\n      />\n      {/* The rest of the page... */}\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nFinally, create the API that references these variables:\n\n```ts\n// /pages/Page1/apis/handlePeopleUpdates.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from "@superblocksteam/library";\n\nexport default new Api("handlePeopleUpdates", [\n  new Conditional("validate", {\n    if: {\n      when: ({ firstName, lastName }): boolean =>\n        !firstName.isValid || !lastName.isValid,\n      then: [\n        new Throw("reject", {\n          error: "either the first name or last name is invalid",\n        }),\n      ],\n    },\n  }),\n  new PostgreSQL("update", "your-postgresql-integration-id", {\n    statement: ({ firstName, lastName, userId }) =>\n      `UPDATE people SET first_name = \'${firstName.value}\', last_name = \'${lastName.value}\' WHERE id = ${userId.value}`,\n  }),\n]);\n```\n\n#### The Superblocks API TypeScript Type\n\nBelow is the full TypeScript spec for the APIs you create:\n\n````ts\n// @superblocksteam/library\n\nexport type JsonValue =\n  | undefined\n  | null\n  | number\n  | string\n  | boolean\n  | JsonValue[]\n  | object;\nexport type State = { [key: string]: JsonValue };\nexport type Binding<T> = T | ((state: State) => T);\ntype Integrations = { id: string; description: string; metadata: JsonValue }[];\n\nclass Block {\n  constructor(name: string) {}\n  public run(): { output: JsonValue } {\n    /* ... */\n  }\n}\n\nclass Integration extends Block {\n  constructor(name: string, integration_id: string) {}\n}\n\ntype State = Record<string, JsonValue>;\n\nclass JavaScript extends Integration {\n  constructor(\n    name: string,\n    config: {\n      fn: (\n        {\n          /* ... */\n        },\n      ) => JsonValue;\n    },\n  ) {\n    super(name, "javascript");\n  }\n}\n\nclass Python extends Integration {\n  constructor(\n    name: string,\n    config: {\n      // We want to just put the python function body here. The scope is the same as it would be if it were a JavaScript integration.\n      fn: string;\n    },\n  ) {\n    super(name, "python");\n  }\n}\n\nclass Databricks extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass Snowflake extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass PostgreSQL extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass RestApi extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    // If you need to make a request that is detached from an integration, you MUST set this to "restapi".\n    integration: string = "restapi",\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    // If you\'re using a path from an integration that has an OpenAPI spec, you MUST set this to true.\n    fromOpenApiSpec: boolean = false,\n  ) {\n    super(name, integration);\n  }\n}\n\nclass Email extends Integration {\n  constructor(\n    name: string,\n    config: {\n      from: Binding<string>;\n      to: Binding<string>;\n      subject: Binding<string>;\n      cc?: Binding<string>;\n      bcc?: Binding<string>;\n      body?: Binding<string>;\n    },\n  ) {\n    super(name);\n  }\n}\n\nexport type Condition = {\n  when: boolean | ((state: State) => boolean);\n  then: Block[];\n};\n\nexport type Conditions = {\n  if: Condition;\n  elif?: Condition[];\n  else?: Block[];\n};\n\nclass Conditional extends Block {\n  constructor(name: string, config: Conditions) {\n    super(name);\n  }\n}\n\nclass TryCatch extends Block {\n  constructor(\n    name: string,\n    config: {\n      try: Block[];\n      catch: Block[];\n      finally?: Block[];\n      variables: { error: string };\n    },\n  ) {\n    super(name);\n  }\n}\n\n/**\n * A Superblocks variable has the following access pattern:\n *\n * How to retrieve the value of a variable:\n * ```ts\n * CORRECT\n * my_variable.value\n *\n * // INCORRECT\n * my_variable\n * ```\n *\n * How to set the value of a variable:\n * ```ts\n * CORRECT\n * my_variable.set(value)\n *\n * // INCORRECT\n * my_variable = value\n * ```\n *\n */\n\nclass Variables extends Block {\n  constructor(\n    name: string,\n    variables: {\n      // The name of the variable.\n      key: string;\n      // The value of the variable.\n      value: Binding<JsonValue>;\n    }[],\n  ) {\n    super(name);\n  }\n}\n\nclass Loop extends Block {\n  constructor(\n    name: string,\n    config: {\n      over: Binding<JsonValue[]>;\n      variables: {\n        // What the variable name for the current item is.\n        item: string;\n        // What the variable name for the current index is.\n        index: string;\n      };\n      blocks: Block[];\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Parallel extends Block {\n  constructor(\n    name: string,\n    config: {\n      over: Binding<JsonValue[]>;\n      variables: {\n        // What the variable name for the current item is.\n        item: string;\n      };\n      blocks: Block[];\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Throw extends Block {\n  constructor(\n    name: string,\n    config: {\n      error: Binding<JsonValue>;\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Return extends Block {\n  constructor(\n    name: string,\n    config: {\n      data: Binding<JsonValue>;\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Api {\n  constructor(name: string, steps: Block[]) {}\n  public get response(): JsonValue {\n    /* ... */\n  }\n  public get error(): string | undefined {\n    /* ... */\n  }\n  public run(): void {\n    /* ... */\n  }\n  public cancel(): void {\n    /* ... */\n  }\n}\n````\n\n#### Rules for using Superblocks APIs\n\nThink hard about the following important rules for correctly using Superblocks APIs:\n\n- You MUST use a destructured state object as the function parameter for dynamic block fields.\n\n```ts\n// CORRECT: uses destructured state\n({ Dropdown1, TextInput1 }) => Dropdown1.selectedOptionsValue + TextInput1.value\n\n// INCORRECT: uses state object directly\n(state) => state.Dropdown1.selectedOptionsValue + state.TextInput1.value\n```\n\n- DO NOT reference variables that are not in scope or that don\'t exist. The ONLY things in scope are (1) the outputs of previous blocks that are in lexical scope and (2) page entities.\n\n- The result of each scope is the result of the last block in that scope. In the following example, the value of `sendEmail.response` is the result of the `return_summary` block. Use this information to carefully ensure that the last block in your API is the one that returns the value you want.\n\n```ts\nexport default new Api("sendEmail", [\n  new Email("send_email", {\n    from: "noreply@company.com",\n    to: "test@test.com",\n    subject: "Test Email",\n    body: "This is a test email",\n  }),\n  new JavaScript("return_summary", {\n    fn: () => "Email sent successfully!",\n  }),\n]);\n```\n\n- Block outputs are immutable. Do not mutate the output of a block.\n\n- Backend APIs CANNOT mutate frontend state inside of the API\n\n- APIs are registered in scope files using `SbApi()` and then accessed in page components by destructuring from the scope entities. Make sure you name the key used in registerScope the same as the imported API, but do not pass the imported Api into the SbApi() call.\n\n- To access API responses in your UI, use `sbComputed(() => apiName.response)` or `sbComputed(() => apiName.error)`.\n\n- You will not always be told which integrations to use in your API; you will have to determine that yourself based on the data you need to fetch.\n\n- Never add comments to code you (the ai) generate. User added comments are fine - leave those!\n';
+var content2 = '### APIs\n\nThe Superblocks framework allows you to create backend APIs. The high level structure for creating APIs is as follows:\n\n1. APIs are defined using TypeScript files that live inside the apis directory inside the page they are scoped to. Example: /pages/Page1/apis/myApi.ts\n2. This pattern is a declarative workflow builder, where you define each API step, its configuration, and its execution order within the API workflow.\n3. To make the API available for use, you must import it into the scope file and register it with `SbApi()`, then import and destructure it in your page component for use.\n\n#### CRITICAL VARIABLE SCOPING RULES\n\n**\u{1F6A8} EXTREMELY IMPORTANT**: Variables referenced in API blocks can ONLY come from these sources:\n\n1. **Outputs of previous blocks** in the same API (accessed via the block name)\n2. **Page entities defined in the scope file** (passed as destructured parameters)\n3. **Never reference variables that don\'t exist** - this is the #1 cause of API generation errors\n\n**\u274C WRONG - Variables that don\'t exist in scope:**\n\n```ts\nnew PostgreSQL("insert_data", "postgres-integration-id", {\n  statement: ({ SelectedCustomerIdVar, ProductNameInput, IssueTypeDropdown }) =>\n    `INSERT INTO issues VALUES (${SelectedCustomerIdVar.value}, \'${ProductNameInput.value}\', \'${IssueTypeDropdown.selectedOptionValue}\')`,\n  // \u274C ERROR: SelectedCustomerIdVar, ProductNameInput, IssueTypeDropdown are not defined anywhere!\n});\n```\n\n**\u2705 CORRECT - Variables from scope entities:**\n\n```ts\n// First, define in scope.ts:\nexport const Page1Scope = createSbScope<{\n  SelectedCustomerIdVar: any;\n  ProductNameInput: any;\n  IssueTypeDropdown: any;\n}>(\n  () => ({\n    // Register the API\n    submitIssueApi: SbApi({}),\n  }),\n  { name: "Page1" },\n);\n\n// Then use in API:\nnew PostgreSQL("insert_data", "postgres-integration-id", {\n  statement: ({ SelectedCustomerIdVar, ProductNameInput, IssueTypeDropdown }) =>\n    `INSERT INTO issues VALUES (${SelectedCustomerIdVar.value}, \'${ProductNameInput.value}\', \'${IssueTypeDropdown.selectedOptionValue}\')`,\n  // \u2705 CORRECT: These are page entities defined in the scope\n});\n```\n\n**\u2705 CORRECT - Variables from previous blocks:**\n\n```ts\nexport default new Api("processOrderApi", [\n  new JavaScript("get_customer_data", {\n    fn: () => ({ customerId: 123, customerName: "John Doe" }),\n  }),\n  new PostgreSQL("insert_order", "postgres-integration-id", {\n    statement: ({ get_customer_data }) =>\n      `INSERT INTO orders VALUES (${get_customer_data.output.customerId}, \'${get_customer_data.output.customerName}\')`,\n    // \u2705 CORRECT: get_customer_data is a previous block in this API\n  }),\n]);\n```\n\n#### CRITICAL MENTAL MODEL: APIs Access Page Scope (They Don\'t Define Parameters)\n\n**\u{1F6A8} FUNDAMENTAL MISCONCEPTION TO AVOID:**\n\n\u274C **WRONG THINKING**: "APIs define their input parameters like traditional backend services"\n\n```ts\n// WRONG - This is NOT how Superblocks APIs work!\nfunction submitOrder(customerId, productName) {\n  // \u274C APIs don\'t define parameters!\n  // API logic here\n}\n```\n\n\u2705 **CORRECT THINKING**: "APIs are frontend-coupled functions that automatically access the page\'s existing scope"\n\n```ts\n// CORRECT - APIs inherit page scope automatically\nnew PostgreSQL("insert_order", "postgres-integration-id", {\n  statement: ({ SelectedCustomerIdVar, ProductNameInput }) =>\n    // \u2191 This is NOT defining parameters - this is accessing existing page scope!\n    // These variables must ALREADY exist in your page scope\n    `INSERT INTO orders VALUES (${SelectedCustomerIdVar.value}, \'${ProductNameInput.value}\')`,\n});\n```\n\n**KEY CONCEPTS:**\n\n1. **APIs are frontend-aware**: They\'re tightly coupled to your page, not independent backend services\n2. **No parameter definition**: APIs cannot define their own input parameters\n3. **Scope inheritance only**: APIs automatically access whatever exists in your page scope\n4. **Mandatory order**: Page Scope \u2192 Components \u2192 APIs (scope must exist first)\n\n**The Flow:**\n\n```\nPage Scope Variables \u2192 APIs Automatically Access \u2192 Use in API Logic\n(Must exist first)   \u2192 (No parameter passing)   \u2192 (Just destructure from scope)\n```\n\n**Contrasting Examples:**\n\n\u274C **Traditional Backend API (NOT how Superblocks works):**\n\n```ts\n// This is how traditional APIs work - NOT Superblocks!\nfunction createOrder(customerId, productName, quantity) {\n  // \u274C Defines own parameters\n  return database.insert({\n    customer_id: customerId,\n    product: productName,\n    qty: quantity,\n  });\n}\n\n// Called like: createOrder(123, "Widget", 5) - parameters passed in\n```\n\n\u2705 **Superblocks API (Frontend-coupled):**\n\n```ts\n// This is how Superblocks APIs work - inherits page scope\nnew PostgreSQL("insert_order", "postgres-integration-id", {\n  statement: ({ CustomerIdInput, ProductNameInput, QuantityInput }) => {\n    // \u2191 NOT defining parameters! These must exist in page scope already\n    return `INSERT INTO orders VALUES (${CustomerIdInput.value}, \'${ProductNameInput.value}\', ${QuantityInput.value})`;\n  },\n});\n\n// No "calling with parameters" - scope variables are automatically available\n```\n\n#### Rules\n\n1. CRITICAL: The name of the API must be consistent across the API\'s TypeScript definition, the API\'s file name, references in page files, and the key used to register it in the scope file. See the consistent use of \'myApi\' below as an example.\n2. ALWAYS import ALL API classes from the superblocks library at the top of every API file. Use this complete import statement for every API file:\n3. When using database integrations (PostgreSQL, Snowflake, Databricks), the integration_id parameter should be the actual integration ID from your Superblocks workspace, not a placeholder string.\n4. **CRITICAL**: DO NOT reference variables that are not in scope. The ONLY things in scope are (1) the outputs of previous blocks that are in lexical scope and (2) page entities defined in the scope file.\n\n```ts\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from "@superblocksteam/library";\n```\n\n#### Examples\n\n##### Complete Example: Scope \u2192 Components \u2192 API Flow\n\nThis example shows the complete flow from defining variables in scope, to binding them to components, to using them in APIs.\n\n**Step 1: Define entities in scope file**\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  CustomerNameInput: any;\n  ProductNameInput: any;\n  IssueTypeDropdown: any;\n  IssueNotesInput: any;\n}>(\n  () => ({\n    // Register the API\n    submitProductIssueApi: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**Step 2: Use entities in page components**\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbInput,\n  SbDropdown,\n  SbButton,\n  SbEventFlow,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  const {\n    CustomerNameInput,\n    ProductNameInput,\n    IssueTypeDropdown,\n    IssueNotesInput,\n    submitProductIssueApi,\n  } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbInput bind={CustomerNameInput} label="Customer Name" />\n          <SbInput bind={ProductNameInput} label="Product Name" />\n          <SbDropdown\n            bind={IssueTypeDropdown}\n            label="Issue Type"\n            options={[\n              { label: "Defect", value: "defect" },\n              { label: "Complaint", value: "complaint" },\n              { label: "Return", value: "return" },\n            ]}\n          />\n          <SbInput bind={IssueNotesInput} label="Notes" multiline={true} />\n          <SbButton\n            label="Submit Issue"\n            onClick={SbEventFlow.runApis([submitProductIssueApi])}\n          />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n**Step 3: Create API that uses the scope entities**\n\n```ts\n// /pages/Page1/apis/submitProductIssueApi.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from "@superblocksteam/library";\n\nexport default new Api("submitProductIssueApi", [\n  new Conditional("validate_inputs", {\n    if: {\n      when: ({\n        CustomerNameInput,\n        ProductNameInput,\n        IssueTypeDropdown,\n      }): boolean =>\n        !CustomerNameInput.value ||\n        !ProductNameInput.value ||\n        !IssueTypeDropdown.selectedOptionValue,\n      then: [\n        new Throw("validation_error", {\n          error: "Customer name, product name, and issue type are required",\n        }),\n      ],\n    },\n  }),\n  new PostgreSQL("insert_issue", "your-postgresql-integration-id", {\n    statement: ({\n      CustomerNameInput,\n      ProductNameInput,\n      IssueTypeDropdown,\n      IssueNotesInput,\n    }) =>\n      `INSERT INTO product_issues \n       (customer_name, product_name, issue_type, notes, status, date_reported, created_by)\n       VALUES (\n         \'${CustomerNameInput.value}\', \n         \'${ProductNameInput.value}\', \n         \'${IssueTypeDropdown.selectedOptionValue}\', \n         \'${IssueNotesInput.value || ""}\', \n         \'Open\', \n         NOW(), \n         1\n       )`,\n  }),\n  new JavaScript("return_success", {\n    fn: ({ insert_issue }) => ({\n      success: true,\n      message: "Issue submitted successfully",\n      issueId: insert_issue.output?.insertId || null,\n    }),\n  }),\n]);\n```\n\n##### \u274C COMMON MISTAKES TO AVOID\n\n**\u274C WRONG: Using undefined variables**\n\n```ts\n// This is WRONG - these variables don\'t exist!\nexport default new Api("badExampleApi", [\n  new PostgreSQL("insert_data", "postgres-integration-id", {\n    statement: ({\n      SelectedCustomerIdVar,\n      ProductNameInput,\n      IssueTypeDropdown,\n    }) =>\n      `INSERT INTO issues VALUES (${SelectedCustomerIdVar.value}, \'${ProductNameInput.value}\', \'${IssueTypeDropdown.selectedOptionValue}\')`,\n    // \u274C ERROR: SelectedCustomerIdVar, ProductNameInput, IssueTypeDropdown are not defined in scope!\n  }),\n]);\n```\n\n**\u274C WRONG: Mixing up variable names**\n\n```ts\n// Scope defines CustomerNameInput but API tries to use CustomerName\nexport default new Api("badExampleApi", [\n  new PostgreSQL("insert_data", "postgres-integration-id", {\n    statement: (\n      { CustomerName }, // \u274C ERROR: Should be CustomerNameInput\n    ) => `INSERT INTO issues VALUES (\'${CustomerName.value}\')`,\n  }),\n]);\n```\n\n**\u274C WRONG: Not destructuring function parameters**\n\n```ts\n// This is WRONG - you must destructure the parameters\nexport default new Api("badExampleApi", [\n  new PostgreSQL("insert_data", "postgres-integration-id", {\n    statement: (\n      state, // \u274C ERROR: Should destructure { CustomerNameInput }\n    ) => `INSERT INTO issues VALUES (\'${state.CustomerNameInput.value}\')`,\n  }),\n]);\n```\n\n##### Creating and registering a Superblocks API\n\nCreate the API by adding the myApi.ts file:\n\n```ts\n// /pages/Page1/apis/myApi.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from "@superblocksteam/library";\n\nexport default new Api("myApi", [\n  new JavaScript("retrieve_orders", {\n    fn: () => {\n      return [\n        {\n          id: "ORD-001",\n          customerName: "John Smith",\n          total: 149.99,\n        },\n        {\n          id: "ORD-002",\n          customerName: "Sarah Jones",\n          total: 89.5,\n        },\n      ];\n    },\n  }),\n]);\n```\n\nThen register the myApi API in the scope file:\n\n```ts\n// /pages/Page1/scope.ts\n\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope(\n  () => ({\n    // Register the API in the scope\n    retrieveOrdersApi: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen use the API in your page component:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbButton,\n  SbTable,\n  sbComputed,\n  SbEventFlow,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  const { retrieveOrdersApi } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbButton\n            // APIs can be invoked with the SbEventFlow API\n            onClick={SbEventFlow.runApis([retrieveOrdersApi])}\n            label="Fetch Data"\n          />\n          {/* Access API response using sbComputed */}\n          <SbTable tableData={sbComputed(() => retrieveOrdersApi.response)} />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n##### Referencing the output of a previous block\n\nThink hard about how you access the output of previous steps. You MUST use the output property of the previous step variable. There is no other way to access the output of a previous step (other than using a Variable block, but that is not what you want in this case and should only be used in very specific cases).\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrdersApi.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from "@superblocksteam/library";\n\nexport default new Api("getOrdersApi", [\n  new JavaScript("retrieve_orders", {\n    fn: () => {\n      return [\n        {\n          id: 1,\n          customer: "John Smith",\n          date: "2024-01-15",\n          total: 199.99,\n          status: "Pending",\n        },\n        {\n          id: 2,\n          customer: "Jane Doe",\n          date: "2024-01-14",\n          total: 149.99,\n          status: "Shipped",\n        },\n        {\n          id: 3,\n          customer: "Bob Wilson",\n          date: "2024-01-13",\n          total: 299.99,\n          status: "Delivered",\n        },\n      ];\n    },\n  }),\n  new JavaScript("format_orders", {\n    fn: ({ retrieve_orders }) => {\n      return retrieve_orders.output.map((order) => ({\n        ...order,\n        date: new Date(order.date).toLocaleDateString(),\n      }));\n    },\n  }),\n]);\n```\n\nThen you would register the API in your scope file and use it in your page component:\n\n```ts\n// /pages/Page1/scope.ts\nexport const Page1Scope = createSbScope(\n  () => ({\n    getOrdersApi: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbTable,\n  sbComputed,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  const { getOrdersApi } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbTable tableData={sbComputed(() => getOrdersApi.response)} />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n##### Ensuring variable existence in application\n\n**\u{1F6A8} CRITICAL**: APIs cannot create their own variables - they only access what already exists in page scope!\n\nWhen creating an API that references variables like `FirstNameInput`, `LastNameInput`, and `SelectedUserIdVar`, these variables MUST exist in your page scope BEFORE you write the API. APIs don\'t define parameters - they inherit scope.\n\n**Mandatory Flow: Scope \u2192 Components \u2192 APIs**\n\n**STEP 1: Create variables in scope FIRST** (APIs cannot access variables that don\'t exist)\n\nSince you\'ve determined that we\'ll use input components to take in the first name and last name, you MUST ensure that you use the same names for the entities in the `scope.ts` file as the variable names in the API.\n\n```ts\n// /pages/Page1/scope.ts\n\nimport {\n  createSbScope,\n  SbApi,\n  SbVariable,\n  SbVariablePersistence,\n  Global,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  FirstNameInput: any;\n  LastNameInput: any;\n}>(\n  // register non-component entities in the scope\n  ({\n    entities: {\n      FirstNameInput,\n      LastNameInput,\n      handlePeopleUpdates,\n      SelectedUserIdVar,\n    },\n  }) => ({\n    handlePeopleUpdatesApi: SbApi({}),\n    SelectedUserIdVar: SbVariable({\n      defaultValue: Global.user.id,\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  // configure page options\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen, use the variables in your page component:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport {\n  SbPage,\n  SbInput,\n  SbEventFlow,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  const {\n    handlePeopleUpdatesApi,\n    FirstNameInput,\n    LastNameInput,\n    SelectedUserIdVar,\n  } = Page1;\n\n  return (\n    <SbPage name="Page1">\n      <SbInput\n        label="First Name"\n        bind={FirstNameInput}\n        minLength={1}\n        inputType="TEXT"\n      />\n      <SbInput\n        label="Last Name"\n        bind={LastNameInput}\n        minLength={1}\n        inputType="TEXT"\n      />\n      {/* The rest of the page... */}\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nFinally, create the API that references these variables:\n\n```ts\n// /pages/Page1/apis/handlePeopleUpdatesApi.ts\n\nimport {\n  Api,\n  JavaScript,\n  Python,\n  Databricks,\n  Snowflake,\n  PostgreSQL,\n  RestApi,\n  Email,\n  Conditional,\n  TryCatch,\n  Variables,\n  Loop,\n  Parallel,\n  Throw,\n  Return,\n} from "@superblocksteam/library";\n\nexport default new Api("handlePeopleUpdatesApi", [\n  new Conditional("validate", {\n    if: {\n      when: ({ FirstNameInput, LastNameInput }): boolean =>\n        !FirstNameInput.isValid || !LastNameInput.isValid,\n      then: [\n        new Throw("reject", {\n          error: "either the first name or last name is invalid",\n        }),\n      ],\n    },\n  }),\n  new PostgreSQL("update", "your-postgresql-integration-id", {\n    statement: ({ FirstNameInput, LastNameInput, SelectedUserIdVar }) =>\n      `UPDATE people SET first_name = \'${FirstNameInput.value}\', last_name = \'${LastNameInput.value}\' WHERE id = ${SelectedUserIdVar.value}`,\n  }),\n]);\n```\n\n#### The Superblocks API TypeScript Type\n\nBelow is the full TypeScript spec for the APIs you create:\n\n````ts\n// @superblocksteam/library\n\nexport type JsonValue =\n  | undefined\n  | null\n  | number\n  | string\n  | boolean\n  | JsonValue[]\n  | object;\nexport type State = { [key: string]: JsonValue };\nexport type Binding<T> = T | ((state: State) => T);\ntype Integrations = { id: string; description: string; metadata: JsonValue }[];\n\nclass Block {\n  constructor(name: string) {}\n  public run(): { output: JsonValue } {\n    /* ... */\n  }\n}\n\nclass Integration extends Block {\n  constructor(name: string, integration_id: string) {}\n}\n\ntype State = Record<string, JsonValue>;\n\nclass JavaScript extends Integration {\n  constructor(\n    name: string,\n    config: {\n      fn: (\n        {\n          /* ... */\n        },\n      ) => JsonValue;\n    },\n  ) {\n    super(name, "javascript");\n  }\n}\n\nclass Python extends Integration {\n  constructor(\n    name: string,\n    config: {\n      // We want to just put the python function body here. The scope is the same as it would be if it were a JavaScript integration.\n      fn: string;\n    },\n  ) {\n    super(name, "python");\n  }\n}\n\nclass Databricks extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass Snowflake extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass PostgreSQL extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  /**\n   * @param {string} name           The name of the block.\n   * @param {string} integration_id The id of the integration.\n   * @param {object} config         The config object.\n   * @returns {void}\n   */\n  constructor(\n    name: string,\n    integration_id: string,\n    config: {\n      statement: Binding<string>;\n    },\n  ) {\n    super(name, integration_id);\n  }\n}\n\nclass RestApi extends Integration {\n  static integrations: Integrations = [\n    /* ... */\n  ];\n\n  constructor(\n    name: string,\n    // If you need to make a request that is detached from an integration, you MUST set this to "restapi".\n    integration: string = "restapi",\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      path: string; // This is the path exactly as it appears in the OpenAPI spec.\n    },\n  ) {\n    super(name, integration);\n  }\n}\n\nclass GitHub extends RestApi {\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      path: string; // This is the path exactly as it appears in the OpenAPI spec.\n    },\n  ) {\n    super(name, integration, config, openapi);\n  }\n}\n\nclass Jira extends RestApi {\n  constructor(\n    name: string,\n    integration: string,\n    config: {\n      method: string;\n      url: Binding<string>;\n      headers?: { key: Binding<string>; value: Binding<string> }[];\n      params?: { key: Binding<string>; value: Binding<string> }[];\n      body?: Binding<string>;\n    },\n    openapi?: {\n      path: string; // This is the path exactly as it appears in the OpenAPI spec.\n    },\n  ) {\n    super(name, integration, config, openapi);\n  }\n}\n\nclass Email extends Integration {\n  constructor(\n    name: string,\n    config: {\n      from: Binding<string>;\n      to: Binding<string>;\n      subject: Binding<string>;\n      cc?: Binding<string>;\n      bcc?: Binding<string>;\n      body?: Binding<string>;\n    },\n  ) {\n    super(name);\n  }\n}\n\nexport type Condition = {\n  when: boolean | ((state: State) => boolean);\n  then: Block[];\n};\n\nexport type Conditions = {\n  if: Condition;\n  elif?: Condition[];\n  else?: Block[];\n};\n\nclass Conditional extends Block {\n  constructor(name: string, config: Conditions) {\n    super(name);\n  }\n}\n\nclass TryCatch extends Block {\n  constructor(\n    name: string,\n    config: {\n      try: Block[];\n      catch: Block[];\n      finally?: Block[];\n      variables: { error: string };\n    },\n  ) {\n    super(name);\n  }\n}\n\n/**\n * A Superblocks variable has the following access pattern:\n *\n * How to retrieve the value of a variable:\n * ```ts\n * CORRECT\n * my_variable.value\n *\n * // INCORRECT\n * my_variable\n * ```\n *\n * How to set the value of a variable:\n * ```ts\n * CORRECT\n * my_variable.set(value)\n *\n * // INCORRECT\n * my_variable = value\n * ```\n *\n */\n\nclass Variables extends Block {\n  constructor(\n    name: string,\n    variables: {\n      // The name of the variable.\n      key: string;\n      // The value of the variable.\n      value: Binding<JsonValue>;\n    }[],\n  ) {\n    super(name);\n  }\n}\n\nclass Loop extends Block {\n  constructor(\n    name: string,\n    config: {\n      over: Binding<JsonValue[]>;\n      variables: {\n        // What the variable name for the current item is.\n        item: string;\n        // What the variable name for the current index is.\n        index: string;\n      };\n      blocks: Block[];\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Parallel extends Block {\n  constructor(\n    name: string,\n    config: {\n      over: Binding<JsonValue[]>;\n      variables: {\n        // What the variable name for the current item is.\n        item: string;\n      };\n      blocks: Block[];\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Throw extends Block {\n  constructor(\n    name: string,\n    config: {\n      error: Binding<JsonValue>;\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Return extends Block {\n  constructor(\n    name: string,\n    config: {\n      data: Binding<JsonValue>;\n    },\n  ) {\n    super(name);\n  }\n}\n\nclass Api {\n  constructor(name: string, steps: Block[]) {}\n  public get response(): JsonValue {\n    /* ... */\n  }\n  public get error(): string | undefined {\n    /* ... */\n  }\n  public run(): void {\n    /* ... */\n  }\n  public cancel(): void {\n    /* ... */\n  }\n}\n````\n\n#### Rules for using Superblocks APIs\n\nThink hard about the following important rules for correctly using Superblocks APIs:\n\n- You MUST use a destructured object to access page scope variables in dynamic block fields. This syntax is NOT defining function parameters - it\'s accessing the inherited page scope.\n\n```ts\n// CORRECT: destructuring to access page scope variables that must already exist\n({ Dropdown1, TextInput1 }) => Dropdown1.selectedOptionsValue + TextInput1.value\n// \u2191 These variables (Dropdown1, TextInput1) must exist in your page scope!\n\n// INCORRECT: trying to use scope object directly\n(state) => state.Dropdown1.selectedOptionsValue + state.TextInput1.value\n// \u2191 This syntax doesn\'t work in Superblocks\n```\n\n- DO NOT reference variables that are not in scope or that don\'t exist. The ONLY things in scope are (1) the outputs of previous blocks that are in lexical scope and (2) page entities.\n\n- The result of each scope is the result of the last block in that scope. In the following example, the value of `sendEmail.response` is the result of the `return_summary` block. Use this information to carefully ensure that the last block in your API is the one that returns the value you want.\n\n```ts\nexport default new Api("sendEmailApi", [\n  new Email("send_email", {\n    from: "noreply@company.com",\n    to: "test@test.com",\n    subject: "Test Email",\n    body: "This is a test email",\n  }),\n  new JavaScript("return_summary", {\n    fn: () => "Email sent successfully!",\n  }),\n]);\n```\n\n- Block outputs are immutable. Do not mutate the output of a block.\n\n- Backend APIs CANNOT mutate frontend state inside of the API\n\n- APIs are registered in scope files using `SbApi()` and then accessed in page components by destructuring from the scope entities. Make sure you name the key used in registerScope the same as the imported API, but do not pass the imported Api into the SbApi() call.\n\n- To access API responses in your UI, use `sbComputed(() => apiName.response)` or `sbComputed(() => apiName.error)`.\n\n- You will not always be told which integrations to use in your API; you will have to determine that yourself based on the data you need to fetch.\n\n- Never add comments to code you (the ai) generate. User added comments are fine - leave those!\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-components-rules.js
 init_cjs_shims();
-var content2 = '### Rules for using Superblocks components:\n\n- ENSURE THAT ALL PROPERTY VALUES COMPLY WITH THE SUPPLIED TYPES FOR EACH PROPERTY\n- NEVER use a component in this section in a custom component\n- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default.\n- NEVER store property values in variables and then pass those variables to components. ALWAYS define the values inline so the visual editor can show them correctly.\n\nNOTES:\n\n- When you see _Border_, it\'s {width: Dim, style: string, color: string}\n- When you see _TextStyle_, it\'s a plain JS object with the following properties:\n  - variant: "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "body1" | "body2" | "body3" | "label" | "inputLabel" | "code"\n  - textColor: an object with only the following properties:\n    - default: string // the text color to use. A color value from the theme, or a hex code if necessary. ALWAYS wrap this property in sbComputed. Example: sbComputed(() => Theme.colors.neutral900), and remember to import sbComputed and globals from the library: import { sbComputed,Theme } from \'@superblocksteam/library\';\n- When you see _SbEventFlow_, use the SbEventFlow builder\n- Import all components you use from \'@superblocksteam/library\'; Example: `import { SbContainer, SbButton, sbComputed, ... } from \'@superblocksteam/library\';` If you don\'t import all components you use, the app will crash!\n- Don\'t add props to the Page component other than onLoad\n- SbContainer has a default style of "card" if you want to remove the style, set the style to "none"\n- When using dynamic values in component props, use `sbComputed` with the correct pattern:\n  - For scope entities (variables, APIs): `sbComputed(() => entityName.value)` (direct access)\n  - For bound components: `sbComputed(() => ComponentName.property)` (direct access after binding)\n  - For global access: `sbComputed(() => Global.user.name)` or `sbComputed(() => Theme.colors.primary)` (import globals from the library first: `import { Global, Theme, Embed, Env } from \'@superblocksteam/library\';`)\n- Use sbComputed ONLY when the value references dynamic data (state variables, API responses, component values, or theme)\n- Do NOT use sbComputed for static configuration like table columns, static dropdown options, or style objects that don\'t reference theme\n';
+var content3 = '### Rules for using Superblocks components:\n\n- ENSURE THAT ALL PROPERTY VALUES COMPLY WITH THE SUPPLIED TYPES FOR EACH PROPERTY\n- NEVER use a component in this section in a custom component\n- **\u{1F6A8} CRITICAL: NEVER use sbComputed as React children.** sbComputed returns an object that React cannot render. Examples:\n  - \u274C WRONG: `<SbContainer>{sbComputed(() => dynamicText)}</SbContainer>`\n  - \u274C WRONG: `<SbSection>{sbComputed(() => conditionalContent)}</SbSection>`\n  - \u2705 CORRECT: `<SbText text={sbComputed(() => dynamicText)} />`\n  - \u2705 CORRECT: `<SbContainer isVisible={sbComputed(() => showContainer)} />`\n- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default.\n- NEVER store property values in variables and then pass those variables to components. ALWAYS define the values inline so the visual editor can show them correctly.\n\nNOTES:\n\n- When you see _Border_, it\'s {width: Dim, style: string, color: string}\n- When you see _TextStyle_, it\'s a plain JS object with the following properties:\n  - variant: "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "body1" | "body2" | "body3" | "label" | "inputLabel" | "code"\n  - textColor: an object with only the following properties:\n    - default: string // the text color to use. A color value from the theme, or a hex code if necessary. ALWAYS wrap this property in sbComputed. Example: sbComputed(() => Theme.colors.neutral900), and remember to import sbComputed and globals from the library: import { sbComputed,Theme } from \'@superblocksteam/library\';\n- When you see _SbEventFlow_, use the SbEventFlow builder\n- Import all components you use from \'@superblocksteam/library\'; Example: `import { SbContainer, SbButton, sbComputed, ... } from \'@superblocksteam/library\';` If you don\'t import all components you use, the app will crash!\n- Don\'t add props to the Page component other than onLoad\n- SbContainer has a default style of "card" if you want to remove the style, set the style to "none"\n- When using dynamic values in component props, use `sbComputed` with the correct pattern:\n  - For scope entities (variables, APIs): `sbComputed(() => entityName.value)` (direct access)\n  - For bound components: `sbComputed(() => ComponentName.property)` (direct access after binding)\n  - For global access: `sbComputed(() => Global.user.name)` or `sbComputed(() => Theme.colors.primary)` (import globals from the library first: `import { Global, Theme, Embed, Env } from \'@superblocksteam/library\';`)\n- Use sbComputed ONLY when the value references dynamic data (state variables, API responses, component values, or theme)\n- Do NOT use sbComputed for static configuration like table columns, static dropdown options, or style objects that don\'t reference theme\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-custom-components.js
 init_cjs_shims();
-var content3 = '# Custom Components\n\n- ULTRA CRITICAL: NEVER use Superblocks components in a custom component.\n\n- CRITICAL: Use custom components sparingly.\n\n- CRITICAL: ONLY when all else fails and a component is not available in the Superblocks library, you may construct it out of external component libraries by installing them.\n\n- CRITICAL: ALWAYS import React using a namespace import: `import * as React from \'react\'`.\n\nIn order to hook it up correctly, the platform needs to know what props the component exposes, their types, default values, and how they should be displayed to users.\n\nTo do this, you use the **`Prop` API** and **`registerComponent`** function.\n\n## Key Concepts\n\n- All custom components should live within the `components/` folder.\n- **`Prop`**: Defines a single editable property for your component.\n  - Can specify the data type (`string`, `number`, `boolean`, `event`, etc.).\n  - Can define a **default value**, **label** for the properties panel, and other validations.\n- **`registerComponent`**: Connects your React component with its editable schema (`properties`) so it appears correctly in the visual editor.\n- **`useUpdateProperties`**: A hook that lets your component programmatically update its properties during runtime (e.g., when a user interacts with it).\n\n---\n\n## Basic Example\n\n```tsx\nimport { Rate } from "antd";\nimport {\n  CustomComponentProps,\n  Prop,\n  registerComponent,\n  useUpdateProperties,\n} from "@superblocksteam/library";\n\n// 1. Define editable properties\nconst properties = {\n  value: Prop.number()\n    .default(3) // Default to 3 stars\n    .propertiesPanel({ label: "Default value" }), // Editor label\n  onChange: Prop.event().propertiesPanel({ label: "On change" }), // Editor label for event\n};\n\n// 2. Create typed props for your component\ntype ComponentProps = CustomComponentProps<typeof properties>;\n\n// 3. Build your React component\nconst Rating = ({ value, onChange }: ComponentProps) => {\n  const updateProperties = useUpdateProperties(); // Hook to update properties dynamically\n\n  return (\n    <div style={{ display: "flex" }}>\n      <Rate\n        value={value}\n        defaultValue={value}\n        onChange={(newValue) => {\n          updateProperties({ value: newValue }); // Update visual editor\n          onChange?.(); // Trigger custom event\n        }}\n      />\n    </div>\n  );\n};\n\n// 4. Register your component to make it available in the visual editor\nexport default registerComponent("Rating", properties, Rating);\n```\n\n---\n\n## How `Prop` Works\n\nYou can define different types of props:\n\n- **`string`**: `Prop.string()`\n- **`number`**: `Prop.number()`\n- **`boolean`**: `Prop.boolean()`\n- **`event`**: `Prop.event()` (for user interactions like clicks)\n- **`any`**: `Prop.any()` (for any type)\n- **`composite`**: `Prop.composite({ x: Prop.number(), y: Prop.number() })` (for nested objects)\n- **`record`**: `Prop.record({...})` (for key-value maps)\n- **`union`**: `Prop.union({...})` (for multiple variants)\n\nYou can chain additional methods:\n\n- `.default(value)` \u2014 Sets a default value.\n- `.propertiesPanel({ label: "Your Label" })` \u2014 Controls how the prop appears in the editor.\n- `.validate(fn)` \u2014 Adds custom validation logic.\n- `.readable()`, `.writable()` \u2014 Control read/write capabilities.\n\n---\n\n## Typical Flow\n\n1. **Define** the **editable schema** (`properties`) with `Prop`.\n2. **Type** your component\'s props using `CustomComponentProps`.\n3. **Use** `useUpdateProperties` to sync UI interactions back to the editor.\n4. **Register** the component using `registerComponent`.\n\n---# Tips\n\n- All `registeredComponent`s automatically support width and height using the `Dim` object.\n  ```\n  <CustomSlider\n    width={Dim.fill(2)} // Fill available space with a weight of 2\n    height={Dim.px(100)} // Fixed height of 100 pixels\n  />\n  ```\n\n## When not to use custom components\n\n- If a user asks for something by name, like showing "metrics", and you do not find a "metrics" component in the Superblocks library, do not immediately assume you need to use a custom component. Instead consider using one of the pre-designed templates built from existing Superblocks components.\n\n## Pre-designed templates to use instead of custom components\n\n### Rules for using pre-designed templates\n\n- Use the pre-designed templates as a base to work from. You can make changes to the content, but generally you do not need to change the layout or styling. Example: below there are width and height properties set on the icons and you should NOT change these or you will break the layout.\n\n### Metrics template\n\nThis template is a row of three large numerical metrics with icons and annotation text.\n\nTemplate code below and a few notes to help explain usage:\n\n- We use the SbContainer component to layout the metrics in a row\n- We use the SbText component to show the numerical values and how we use the textStyle prop variant to make the text a big heading\n- We use the SbIcon component to show nice icons that make sense for the metric\n- We create a little "badge" using the SbContainer component to show small annotation text. Prefer this over using brackets in the main heading text. Example: Rather than "32 (2m)" we use "32" in the main heading text and then a badge with the "2m" text\n- Keep the icon sizing you see in this template unless you are explicitly asked to change it\n\n```tsx\nimport {\n  SbIcon,\n  SbText,\n  SbContainer,\n  sbComputed,\n  Dim,\n  Global,\n  Theme,\n  Embed,\n  Env,\n} from "@superblocksteam/library";\n\n<SbContainer\n  layout="horizontal"\n  width={Dim.fill()}\n  height={Dim.fit()}\n  variant="none"\n  spacing={Dim.px(12)}\n>\n  {/* First card */}\n  <SbContainer\n    layout="vertical"\n    width={Dim.fill()}\n    height={Dim.fit()}\n    variant="card"\n    spacing={Dim.px(6)}\n  >\n    <SbContainer\n      layout="horizontal"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant="none"\n      horizontalAlign="space-between"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text="Avg delivery time (min)"\n        textStyle={{\n          variant: "body2",\n          textColor: {\n            default: sbComputed(() => Theme.colors.neutral500),\n          },\n        }}\n      />\n      <SbIcon icon="route" height={Dim.px(24)} width={Dim.fit()} />\n    </SbContainer>\n    <SbContainer\n      layout="horizontal"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant="none"\n      horizontalAlign="left"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text="32"\n        textStyle={{\n          variant: "heading1",\n        }}\n      />\n      {/* Smaller annotation badge, showing change. Container background color is green because the value change is considered "good" (lower delivery time is better) */}\n      <SbContainer\n        layout="horizontal"\n        width={Dim.fit()}\n        height={Dim.fit()}\n        variant="none"\n        spacing={Dim.px(2)}\n        horizontalAlign="center"\n        verticalAlign="center"\n        backgroundColor="#c4e1af"\n        padding={{\n          top: Dim.px(3),\n          right: Dim.px(6),\n          bottom: Dim.px(3),\n          left: Dim.px(6),\n        }}\n        borderRadius={{\n          topLeft: Dim.px(20),\n          topRight: Dim.px(20),\n          bottomRight: Dim.px(20),\n          bottomLeft: Dim.px(20),\n        }}\n      >\n        <SbIcon\n          icon="arrow_downward_alt"\n          height={Dim.px(24)}\n          width={Dim.fit()}\n        />\n        <SbText\n          text="2m"\n          width={Dim.fit()}\n          textStyle={{\n            variant: "body2",\n          }}\n        />\n      </SbContainer>\n    </SbContainer>\n  </SbContainer>\n</SbContainer>;\n```\n';
+var content4 = '# Custom Components\n\n- ULTRA CRITICAL: NEVER use Superblocks components in a custom component.\n\n- CRITICAL: Use custom components sparingly.\n\n- CRITICAL: ONLY when all else fails and a component is not available in the Superblocks library, you may construct it out of external component libraries by installing them.\n\n- CRITICAL: ALWAYS import React using a namespace import: `import * as React from \'react\'`.\n\nIn order to hook it up correctly, the platform needs to know what props the component exposes, their types, default values, and how they should be displayed to users.\n\nTo do this, you use the **`Prop` API** and **`registerComponent`** function.\n\n## Key Concepts\n\n- All custom components should live within the `components/` folder.\n- **`Prop`**: Defines a single editable property for your component.\n  - Can specify the data type (`string`, `number`, `boolean`, `event`, etc.).\n  - Can define a **default value**, **label** for the properties panel, and other validations.\n- **`registerComponent`**: Connects your React component with its editable schema (`properties`) so it appears correctly in the visual editor.\n- **`useUpdateProperties`**: A hook that lets your component programmatically update its properties during runtime (e.g., when a user interacts with it).\n\n---\n\n## Basic Example\n\n```tsx\nimport { Rate } from "antd";\nimport {\n  CustomComponentProps,\n  Prop,\n  registerComponent,\n  useUpdateProperties,\n} from "@superblocksteam/library";\n\n// 1. Define editable properties\nconst properties = {\n  value: Prop.number()\n    .default(3) // Default to 3 stars\n    .propertiesPanel({ label: "Default value" }), // Editor label\n  onChange: Prop.event().propertiesPanel({ label: "On change" }), // Editor label for event\n};\n\n// 2. Create typed props for your component\ntype ComponentProps = CustomComponentProps<typeof properties>;\n\n// 3. Build your React component\nconst Rating = ({ value, onChange }: ComponentProps) => {\n  const updateProperties = useUpdateProperties(); // Hook to update properties dynamically\n\n  return (\n    <div style={{ display: "flex" }}>\n      <Rate\n        value={value}\n        defaultValue={value}\n        onChange={(newValue) => {\n          updateProperties({ value: newValue }); // Update visual editor\n          onChange?.(); // Trigger custom event\n        }}\n      />\n    </div>\n  );\n};\n\n// 4. Register your component to make it available in the visual editor\nexport default registerComponent("Rating", properties, Rating);\n```\n\n---\n\n## How `Prop` Works\n\nYou can define different types of props:\n\n- **`string`**: `Prop.string()`\n- **`number`**: `Prop.number()`\n- **`boolean`**: `Prop.boolean()`\n- **`event`**: `Prop.event()` (for user interactions like clicks)\n- **`any`**: `Prop.any()` (for any type)\n- **`composite`**: `Prop.composite({ x: Prop.number(), y: Prop.number() })` (for nested objects)\n- **`record`**: `Prop.record({...})` (for key-value maps)\n- **`union`**: `Prop.union({...})` (for multiple variants)\n\nYou can chain additional methods:\n\n- `.default(value)` \u2014 Sets a default value.\n- `.propertiesPanel({ label: "Your Label" })` \u2014 Controls how the prop appears in the editor.\n- `.validate(fn)` \u2014 Adds custom validation logic.\n- `.readable()`, `.writable()` \u2014 Control read/write capabilities.\n\n---\n\n## Typical Flow\n\n1. **Define** the **editable schema** (`properties`) with `Prop`.\n2. **Type** your component\'s props using `CustomComponentProps`.\n3. **Use** `useUpdateProperties` to sync UI interactions back to the editor.\n4. **Register** the component using `registerComponent`.\n\n---# Tips\n\n- All `registeredComponent`s automatically support width and height using the `Dim` object.\n  ```\n  <CustomSlider\n    width={Dim.fill(2)} // Fill available space with a weight of 2\n    height={Dim.px(100)} // Fixed height of 100 pixels\n  />\n  ```\n\n## When not to create a net new custom component\n\n- If a user asks for something by name, like showing "metrics card", and you do not find a "metrics card" component in the Superblocks library, be sure to check if an existing custom component exists that you can use inside the `/components` directory of the project.\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-data-filtering.js
 init_cjs_shims();
-var content4 = "# Data Filtering Best Practices\n\nWhen filtering data from APIs or state variables, follow these patterns to keep component properties clean and maintainable:\n\n## When to Use Reactive State Variables for Filtering\n\n**Use reactive state variables with `defaultValue` for complex filtering when:**\n\n- The filtering logic is more than 1-2 lines of code\n- Multiple conditions need to be evaluated\n- Multiple form controls affect the same filtered dataset\n- The logic would make component properties hard to read in the visual editor\n\n**Keep simple filtering in component properties when:**\n\n- The filtering is 1-2 lines of basic logic\n- It's a straightforward filter operation\n- Only one control affects the filtering\n\n## Good Pattern: Reactive State Variables with defaultValue\n\n```tsx\n// First, define component bindings in scope.ts\nexport const Page1Scope = createSbScope<{\n  OrderSearchInput: any;\n  StatusFilterDropdown: any;\n  DateFromPicker: any;\n  DateToPicker: any;\n}>(\n  ({ entities: { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, getOrders } }) => ({\n    getOrders: SbApi({}),\n    // Define reactive state variable with complex filtering logic in defaultValue\n    filteredOrders: SbVariable({\n      defaultValue: sbComputed(() => {\n        return getOrders.response?.filter(order => {\n          const matchesSearch = OrderSearchInput.value === '' ||\n            order.customerName.toLowerCase().includes(OrderSearchInput.value.toLowerCase()) ||\n            order.id.toLowerCase().includes(OrderSearchInput.value.toLowerCase());\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            order.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesDateRange = !DateFromPicker.value || !DateToPicker.value ||\n            (new Date(order.orderDate) >= new Date(DateFromPicker.value) &&\n             new Date(order.orderDate) <= new Date(DateToPicker.value));\n          return matchesSearch && matchesStatus && matchesDateRange;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use bind properties\nconst { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, filteredOrders } = Page1;\n\n// Clean component properties - just reference the reactive state variable\n<SbTable tableData={sbComputed(() => filteredOrders.value)} />\n\n// Form controls use bind properties - no onChange logic needed\n<SbInput\n  bind={OrderSearchInput}\n  placeholder=\"Search orders...\"\n/>\n\n<SbDropdown\n  bind={StatusFilterDropdown}\n  options={[\n    { value: 'All', label: 'All Statuses' },\n    { value: 'Processing', label: 'Processing' },\n    { value: 'Shipped', label: 'Shipped' },\n    { value: 'Delivered', label: 'Delivered' }\n  ]}\n/>\n\n<SbDatePicker bind={DateFromPicker} />\n<SbDatePicker bind={DateToPicker} />\n```\n\n## Bad Pattern: Duplicated Filtering Logic in Event Handlers\n\n```tsx\n// Avoid this - duplicates filtering logic in every event handler\n<SbInput\n  placeholder=\"Search orders...\"\n  onChange={SbEventFlow([\n    (value) => {\n      const filtered = getOrders.response?.filter(order => {\n        const matchesSearch = value === '' ||\n          order.customerName.toLowerCase().includes(value.toLowerCase()) ||\n          order.id.toLowerCase().includes(value.toLowerCase());\n        const matchesStatus = statusFilter.value === 'All' || order.status === statusFilter.value;\n        const matchesDateRange = !dateFrom.value || !dateTo.value ||\n          (new Date(order.orderDate) >= new Date(dateFrom.value) &&\n           new Date(order.orderDate) <= new Date(dateTo.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [];\n      filteredOrders.setValue(filtered);\n    }\n  ])}\n/>\n\n<SbDropdown\n  onChange={SbEventFlow([\n    (value) => {\n      // Same filtering logic repeated here - this is what we want to avoid\n      const filtered = getOrders.response?.filter(order => {\n        const matchesSearch = searchTerm.value === '' ||\n          order.customerName.toLowerCase().includes(searchTerm.value.toLowerCase());\n        const matchesStatus = value === 'All' || order.status === value;\n        return matchesSearch && matchesStatus;\n      }) || [];\n      filteredOrders.setValue(filtered);\n    }\n  ])}\n/>\n```\n\n## Bad Pattern: Complex Filtering in Component Properties\n\n```tsx\n// Avoid this - complex logic in component property makes visual editor cluttered\n<SbTable\n  tableData={sbComputed(\n    () =>\n      getOrders.response?.filter((order) => {\n        const matchesSearch =\n          searchTerm.value === \"\" ||\n          order.customerName\n            .toLowerCase()\n            .includes(searchTerm.value.toLowerCase()) ||\n          order.id.toLowerCase().includes(searchTerm.value.toLowerCase());\n        const matchesStatus =\n          statusFilter.value === \"All\" || order.status === statusFilter.value;\n        const matchesDateRange =\n          !dateFrom.value ||\n          !dateTo.value ||\n          (new Date(order.orderDate) >= new Date(dateFrom.value) &&\n            new Date(order.orderDate) <= new Date(dateTo.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [],\n  )}\n/>\n```\n\n## Acceptable: Simple Filtering in Component Properties\n\n```tsx\n// This is fine - simple, straightforward filtering\n<SbTable tableData={sbComputed(() => getOrders.response?.filter(order => order.status === 'Active') || [])} />\n<SbText text={sbComputed(() => `Total: ${getOrders.response?.length || 0}`)} />\n```\n\n## Pattern for Non-Table Components\n\nThis pattern applies to all components, not just tables:\n\n```tsx\n// In scope.ts - define component binding and reactive state variable\nexport const Page1Scope = createSbScope<{\n  CategoryDropdown: any;\n}>(\n  ({ entities: { CategoryDropdown } }) => ({\n    rawData: SbVariable({ defaultValue: [] }),\n    // Good: Complex calculation in reactive state variable\n    summaryText: SbVariable({\n      defaultValue: sbComputed(() => {\n        const filteredData = rawData.value?.filter(item => item.category === CategoryDropdown.selectedOptionValue) || [];\n        const total = filteredData.reduce((sum, item) => sum + item.amount, 0);\n        const average = filteredData.length > 0 ? total / filteredData.length : 0;\n        return `${CategoryDropdown.selectedOptionValue} category: ${filteredData.length} items, Total: $${total.toFixed(2)}, Average: $${average.toFixed(2)}`;\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In component - destructure and use bind\nconst { CategoryDropdown, summaryText } = Page1;\n\n// Clean component property - just references reactive state variable\n<SbText text={sbComputed(() => summaryText.value)} />\n\n// Form control uses bind property - no onChange needed\n<SbDropdown\n  bind={CategoryDropdown}\n  options={[\n    { value: 'Electronics', label: 'Electronics' },\n    { value: 'Clothing', label: 'Clothing' },\n    { value: 'Books', label: 'Books' }\n  ]}\n/>\n```\n\n## Dynamic Dropdown Options from API Data\n\nWhen you need to create dropdown filters based on actual values from your API response (like filtering by status, category, type, etc.), extract the unique values from the API data to populate dropdown options dynamically.\n\n**Use this pattern when:**\n\n- You want to filter on a property that exists in your API data\n- The possible values for that property are not known in advance\n- You want the dropdown to show only values that actually exist in the data\n\n```tsx\n// In scope.ts - define component bindings and reactive state variables\nexport const Page1Scope = createSbScope<{\n  StatusFilterDropdown: any;\n  CategoryFilterDropdown: any;\n}>(\n  ({ entities: { StatusFilterDropdown, CategoryFilterDropdown, getProducts } }) => ({\n    getProducts: SbApi({}),\n\n    // Generate unique status options from API data\n    statusOptions: SbVariable({\n      defaultValue: sbComputed(() => {\n        if (!getProducts.response) return [{ value: 'All', label: 'All Statuses' }];\n\n        const uniqueStatuses = [...new Set(getProducts.response.map(product => product.status))]\n          .filter(status => status) // Remove any null/undefined values\n          .sort()\n          .map(status => ({ value: status, label: status }));\n\n        return [{ value: 'All', label: 'All Statuses' }, ...uniqueStatuses];\n      })\n    }),\n\n    // Generate unique category options from API data\n    categoryOptions: SbVariable({\n      defaultValue: sbComputed(() => {\n        if (!getProducts.response) return [{ value: 'All', label: 'All Categories' }];\n\n        const uniqueCategories = [...new Set(getProducts.response.map(product => product.category))]\n          .filter(category => category) // Remove any null/undefined values\n          .sort()\n          .map(category => ({ value: category, label: category }));\n\n        return [{ value: 'All', label: 'All Categories' }, ...uniqueCategories];\n      })\n    }),\n\n    // Filtered data based on both dropdowns\n    filteredProducts: SbVariable({\n      defaultValue: sbComputed(() => {\n        return getProducts.response?.filter(product => {\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            product.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesCategory = CategoryFilterDropdown.selectedOptionValue === 'All' ||\n            product.category === CategoryFilterDropdown.selectedOptionValue;\n          return matchesStatus && matchesCategory;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use\nconst { StatusFilterDropdown, CategoryFilterDropdown, statusOptions, categoryOptions, filteredProducts } = Page1;\n\n// Dropdowns with dynamic options from API data\n<SbDropdown\n  bind={StatusFilterDropdown}\n  options={sbComputed(() => statusOptions.value)}\n  defaultValue=\"All\"\n/>\n\n<SbDropdown\n  bind={CategoryFilterDropdown}\n  options={sbComputed(() => categoryOptions.value)}\n  defaultValue=\"All\"\n/>\n\n// Table showing filtered results\n<SbTable tableData={sbComputed(() => filteredProducts.value)} />\n```\n\n**Key points:**\n\n- Always include an \"All\" option as the first option\n- Use `new Set()` to get unique values from the API response\n- Filter out null/undefined values to avoid empty options\n- Sort the options alphabetically for better UX\n- The dropdown options are reactive - they update when the API data changes\n- Use `bind` properties on dropdowns so that the bind entities you set up in the scope file update automatically when the dropdown values change\n- Default to \"All\" to show all data initially\n";
+var content5 = "# Data Filtering Best Practices\n\n**\u{1F6A8} CRITICAL: When implementing data filtering, remember that sbComputed cannot be used as React children.** All dynamic filtered content must be passed to component properties like `tableData={}`, `text={}`, etc. Never use `{sbComputed(...)}` as children.\n\nWhen filtering data from APIs or state variables, follow these patterns to keep component properties clean and maintainable:\n\n## When to Use Reactive State Variables for Filtering\n\n**Use reactive state variables with `defaultValue` for complex filtering when:**\n\n- The filtering logic is more than 1-2 lines of code\n- Multiple conditions need to be evaluated\n- Multiple form controls affect the same filtered dataset\n- The logic would make component properties hard to read in the visual editor\n\n**Keep simple filtering in component properties when:**\n\n- The filtering is 1-2 lines of basic logic\n- It's a straightforward filter operation\n- Only one control affects the filtering\n\n## Good Pattern: Reactive State Variables with defaultValue\n\n```tsx\n// First, define component bindings in scope.ts\nexport const Page1Scope = createSbScope<{\n  OrderSearchInput: any;\n  StatusFilterDropdown: any;\n  DateFromPicker: any;\n  DateToPicker: any;\n}>(\n  ({ entities: { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, getOrdersApi } }) => ({\n    getOrdersApi: SbApi({}),\n    // Define reactive state variable with complex filtering logic in defaultValue\n    filteredOrdersVar: SbVariable({\n      defaultValue: sbComputed(() => {\n        return getOrdersApi.response?.filter(order => {\n          const matchesSearch = OrderSearchInput.value === '' ||\n            order.customerName.toLowerCase().includes(OrderSearchInput.value.toLowerCase()) ||\n            order.id.toLowerCase().includes(OrderSearchInput.value.toLowerCase());\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            order.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesDateRange = !DateFromPicker.value || !DateToPicker.value ||\n            (new Date(order.orderDate) >= new Date(DateFromPicker.value) &&\n             new Date(order.orderDate) <= new Date(DateToPicker.value));\n          return matchesSearch && matchesStatus && matchesDateRange;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use bind properties\nconst { OrderSearchInput, StatusFilterDropdown, DateFromPicker, DateToPicker, filteredOrdersVar } = Page1;\n\n// Clean component properties - just reference the reactive state variable\n<SbTable tableData={sbComputed(() => filteredOrdersVar.value)} />\n\n// Form controls use bind properties - no onChange logic needed\n<SbInput\n  bind={OrderSearchInput}\n  placeholder=\"Search orders...\"\n/>\n\n<SbDropdown\n  bind={StatusFilterDropdown}\n  options={[\n    { value: 'All', label: 'All Statuses' },\n    { value: 'Processing', label: 'Processing' },\n    { value: 'Shipped', label: 'Shipped' },\n    { value: 'Delivered', label: 'Delivered' }\n  ]}\n/>\n\n<SbDatePicker bind={DateFromPicker} />\n<SbDatePicker bind={DateToPicker} />\n```\n\n## Bad Pattern: Duplicated Filtering Logic in Event Handlers\n\n```tsx\n// Avoid this - duplicates filtering logic in every event handler\n<SbInput\n  placeholder=\"Search orders...\"\n  onChange={SbEventFlow([\n    (value) => {\n      const filtered = getOrdersApi.response?.filter(order => {\n        const matchesSearch = value === '' ||\n          order.customerName.toLowerCase().includes(value.toLowerCase()) ||\n          order.id.toLowerCase().includes(value.toLowerCase());\n        const matchesStatus = statusFilterVar.value === 'All' || order.status === statusFilterVar.value;\n        const matchesDateRange = !dateFromVar.value || !dateToVar.value ||\n          (new Date(order.orderDate) >= new Date(dateFromVar.value) &&\n           new Date(order.orderDate) <= new Date(dateToVar.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [];\n      filteredOrdersVar.setValue(filtered);\n    }\n  ])}\n/>\n\n<SbDropdown\n  onChange={SbEventFlow([\n    (value) => {\n      // Same filtering logic repeated here - this is what we want to avoid\n      const filtered = getOrdersApi.response?.filter(order => {\n        const matchesSearch = searchTermVar.value === '' ||\n          order.customerName.toLowerCase().includes(searchTermVar.value.toLowerCase());\n        const matchesStatus = value === 'All' || order.status === value;\n        return matchesSearch && matchesStatus;\n      }) || [];\n      filteredOrdersVar.setValue(filtered);\n    }\n  ])}\n/>\n```\n\n## Bad Pattern: Complex Filtering in Component Properties\n\n```tsx\n// Avoid this - complex logic in component property makes visual editor cluttered\n<SbTable\n  tableData={sbComputed(\n    () =>\n      getOrdersApi.response?.filter((order) => {\n        const matchesSearch =\n          searchTermVar.value === \"\" ||\n          order.customerName\n            .toLowerCase()\n            .includes(searchTermVar.value.toLowerCase()) ||\n          order.id.toLowerCase().includes(searchTermVar.value.toLowerCase());\n        const matchesStatus =\n          statusFilterVar.value === \"All\" ||\n          order.status === statusFilterVar.value;\n        const matchesDateRange =\n          !dateFromVar.value ||\n          !dateToVar.value ||\n          (new Date(order.orderDate) >= new Date(dateFromVar.value) &&\n            new Date(order.orderDate) <= new Date(dateToVar.value));\n        return matchesSearch && matchesStatus && matchesDateRange;\n      }) || [],\n  )}\n/>\n```\n\n## Acceptable: Simple Filtering in Component Properties\n\n```tsx\n// This is fine - simple, straightforward filtering\n<SbTable tableData={sbComputed(() => getOrdersApi.response?.filter(order => order.status === 'Active') || [])} />\n<SbText text={sbComputed(() => `Total: ${getOrdersApi.response?.length || 0}`)} />\n```\n\n## Pattern for Non-Table Components\n\nThis pattern applies to all components, not just tables:\n\n```tsx\n// In scope.ts - define component binding and reactive state variable\nexport const Page1Scope = createSbScope<{\n  CategoryDropdown: any;\n}>(\n  ({ entities: { CategoryDropdown } }) => ({\n    rawDataVar: SbVariable({ defaultValue: [] }),\n    // Good: Complex calculation in reactive state variable\n    summaryTextVar: SbVariable({\n      defaultValue: sbComputed(() => {\n        const filteredData = rawDataVar.value?.filter(item => item.category === CategoryDropdown.selectedOptionValue) || [];\n        const total = filteredData.reduce((sum, item) => sum + item.amount, 0);\n        const average = filteredData.length > 0 ? total / filteredData.length : 0;\n        return `${CategoryDropdown.selectedOptionValue} category: ${filteredData.length} items, Total: $${total.toFixed(2)}, Average: $${average.toFixed(2)}`;\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In component - destructure and use bind\nconst { CategoryDropdown, summaryTextVar } = Page1;\n\n// Clean component property - just references reactive state variable\n<SbText text={sbComputed(() => summaryTextVar.value)} />\n\n// Form control uses bind property - no onChange needed\n<SbDropdown\n  bind={CategoryDropdown}\n  options={[\n    { value: 'Electronics', label: 'Electronics' },\n    { value: 'Clothing', label: 'Clothing' },\n    { value: 'Books', label: 'Books' }\n  ]}\n/>\n```\n\n## Dynamic Dropdown Options from API Data\n\nWhen you need to create dropdown filters based on actual values from your API response (like filtering by status, category, type, etc.), extract the unique values from the API data to populate dropdown options dynamically.\n\n**Use this pattern when:**\n\n- You want to filter on a property that exists in your API data\n- The possible values for that property are not known in advance\n- You want the dropdown to show only values that actually exist in the data\n\n```tsx\n// In scope.ts - define component bindings and reactive state variables\nexport const Page1Scope = createSbScope<{\n  StatusFilterDropdown: any;\n  CategoryFilterDropdown: any;\n}>(\n  ({ entities: { StatusFilterDropdown, CategoryFilterDropdown, getProductsApi } }) => ({\n    getProductsApi: SbApi({}),\n\n    // Generate unique status options from API data\n    statusOptionsVar: SbVariable({\n      defaultValue: sbComputed(() => {\n        if (!getProductsApi.response) return [{ value: 'All', label: 'All Statuses' }];\n\n        const uniqueStatuses = [...new Set(getProductsApi.response.map(product => product.status))]\n          .filter(status => status) // Remove any null/undefined values\n          .sort()\n          .map(status => ({ value: status, label: status }));\n\n        return [{ value: 'All', label: 'All Statuses' }, ...uniqueStatuses];\n      })\n    }),\n\n    // Generate unique category options from API data\n    categoryOptionsVar: SbVariable({\n      defaultValue: sbComputed(() => {\n        if (!getProductsApi.response) return [{ value: 'All', label: 'All Categories' }];\n\n        const uniqueCategories = [...new Set(getProductsApi.response.map(product => product.category))]\n          .filter(category => category) // Remove any null/undefined values\n          .sort()\n          .map(category => ({ value: category, label: category }));\n\n        return [{ value: 'All', label: 'All Categories' }, ...uniqueCategories];\n      })\n    }),\n\n    // Filtered data based on both dropdowns\n    filteredProductsVar: SbVariable({\n      defaultValue: sbComputed(() => {\n        return getProductsApi.response?.filter(product => {\n          const matchesStatus = StatusFilterDropdown.selectedOptionValue === 'All' ||\n            product.status === StatusFilterDropdown.selectedOptionValue;\n          const matchesCategory = CategoryFilterDropdown.selectedOptionValue === 'All' ||\n            product.category === CategoryFilterDropdown.selectedOptionValue;\n          return matchesStatus && matchesCategory;\n        }) || [];\n      })\n    }),\n  }),\n  { name: \"Page1\" }\n);\n\n// In the component, destructure and use\nconst { StatusFilterDropdown, CategoryFilterDropdown, statusOptionsVar, categoryOptionsVar, filteredProductsVar } = Page1;\n\n// Dropdowns with dynamic options from API data\n<SbDropdown\n  bind={StatusFilterDropdown}\n  options={sbComputed(() => statusOptionsVar.value)}\n  defaultValue=\"All\"\n/>\n\n<SbDropdown\n  bind={CategoryFilterDropdown}\n  options={sbComputed(() => categoryOptionsVar.value)}\n  defaultValue=\"All\"\n/>\n\n// Table showing filtered results\n<SbTable tableData={sbComputed(() => filteredProductsVar.value)} />\n```\n\n**Key points:**\n\n- Always include an \"All\" option as the first option\n- Use `new Set()` to get unique values from the API response\n- Filter out null/undefined values to avoid empty options\n- Sort the options alphabetically for better UX\n- The dropdown options are reactive - they update when the API data changes\n- Use `bind` properties on dropdowns so that the bind entities you set up in the scope file update automatically when the dropdown values change\n- Default to \"All\" to show all data initially\n";
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-event-flow.js
 init_cjs_shims();
-var content5 = '# Event handlers with SbEventFlow\n\nRather than using standard browser event handlers, Superblocks provides a structured event handler action flow that allows you to run a series of events within the Superblocks system.\n\nImporting SbEventFlow:\n\n```jsx\nimport { SbEventFlow } from "@superblocksteam/library";\n```\n\nAll event handlers MUST be written using the `SbEventFlow` object.\n\nFor example, here we set the `isReady` state variable to `true` when the button is clicked:\n\n```jsx\nconst { isReady } = Page1;\n<SbButton onClick={SbEventFlow.setStateVar(isReady, true)} />;\n```\n\n## SbEventFlow builder pattern\n\n`SbEventFlow` provides a number of functions that can be chained together using `SbEventFlow` which correspond to actions in the Superblocks system.\n\nYou should always use these dedicated functions for individual and sequential actions.\n\nImportant: DO NOT use .run() at the end of a chain of SbEventFlow functions, it is not needed and it will throw an error.\n\n```jsx\nconst { isReady, getUserData, getPermissions } = Page1;\n<SbButton\n  onClick={SbEventFlow.setQueryParams({ filter: "active" }, true)\n    .setStateVar(isReady, true)\n    .controlModal("loginModal", "close")\n\n    // run APIs allows you to run Superblocks APIs by name using string arrays\n    // Each runAPIs call executes the list of API names supplied in parallel\n    .runApis([getUserData, getPermissions])\n\n    // set a state variable\'s value\n    .showAlert("Workflow complete", "success")\n    .navigateTo({ url: "/dashboard", newWindow: false })}\n/>;\n```\n\n#### Using RunJS (only when needed)\n\n`SbEventFlow` also has a special `runJS` event type that allows you to run any JavaScript in the browser.\n\nThis allows you to write more complex logic such as control flow.\n\nImportant:\n\n- The only things you can do in runJS is set state variables or set the public state of components, like modal.isOpen.\n- You CANNOT use SbEventFlow inside of a SbEventFlow.runJS function. If you do this, it won\'t work!\n- **State access in runJS**: Scope entities are accessible directly by their names, global state is accessible via imported globals (Global, Theme, Embed, Env).\n\nExample accessing scope entities:\n\n```jsx\n<SbButton\n  label="Enable"\n  buttonStyle={"SECONDARY_BUTTON"}\n  onClick={SbEventFlow.runJS(() => {\n    // Scope entities (variables, bound components) are accessible directly in runJS\n    if (isUserAdmin.value) {\n      // isUserAdmin is a bound component from scope\n      myStateVar.value = true; // myStateVar is a state variable from scope\n      myModal.isOpen = false; // myModal is a bound component from scope\n    } else {\n      console.log("This user was not an admin");\n    }\n  })}\n/>\n```\n\nExample accessing global state when needed:\n\n```jsx\n<SbButton\n  label="Personalized Action"\n  onClick={SbEventFlow.runJS(() => {\n    // Import globals and access directly\n    if (Global.user.groups.some((g) => g.name === "admin")) {\n      // Also access scope entities (bound components) directly\n      adminPanel.isVisible = true; // adminPanel is a bound component from scope\n    }\n    console.log(`Welcome ${Global.user.name}!`);\n  })}\n/>\n```\n\nAs mentioned above, you should only use `runJS` when the flow is too complex to represent using only chained event flow actions.\n\n### SbEvent Flow Usage Examples\n\n```typescript\nimport { SbEventFlow, sbComputed } from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\nconst { fetchUserData, saveUserData, userDataVariable } = Page1;\n\n// Navigation example\nSbEventFlow.navigateTo({ url: "https://example.com", newWindow: true });\n\n// Control UI components example\nSbEventFlow.controlModal("myModal", "open");\n\n// State management example\nconst { userProfile } = Page1;\nSbEventFlow.setStateVar(userProfile, { name: "John", role: "Admin" });\n\n// Chaining multiple actions\nSbEventFlow.runApis([fetchUserData])\n  .setStateVar(\n    userDataVariable,\n    sbComputed(() => {\n      fetchUserData.response;\n    }),\n  )\n  .showAlert("Data loaded successfully", "success");\n\n// Conditional flow with success/error handlers\nconst successFlow = SbEventFlow.showAlert("Success!", "success");\nconst errorFlow = SbEventFlow.showAlert("An error occurred", "error");\nSbEventFlow.runApis([saveUserData], successFlow, errorFlow);\n```\n\n**SbEventFlow: Managing Events and Side Effects in Superblocks**\n\n## Important Syntax Rules\n\n- Always use function braces with SbEventFlow.runJS. Example: `SbEventFlow.runJS(() => { someFunction(); })` not `SbEventFlow.runJS(() => someFunction())`\n- SbEventFlow.runApis() accepts an array of direct API entity references. Example: `SbEventFlow.runApis([fetchUserData, saveUserData])`\n';
+var content6 = '# Event handlers with SbEventFlow\n\nRather than using standard browser event handlers, Superblocks provides a structured event handler action flow that allows you to run a series of events within the Superblocks system.\n\nImporting SbEventFlow:\n\n```jsx\nimport { SbEventFlow } from "@superblocksteam/library";\n```\n\nAll event handlers MUST be written using the `SbEventFlow` object.\n\nFor example, here we set the `isReady` state variable to `true` when the button is clicked:\n\n```jsx\nconst { isReady } = Page1;\n<SbButton onClick={SbEventFlow.setStateVar(isReady, true)} />;\n```\n\n## SbEventFlow builder pattern\n\n`SbEventFlow` provides a number of functions that can be chained together using `SbEventFlow` which correspond to actions in the Superblocks system.\n\nYou should always use these dedicated functions for individual and sequential actions.\n\nImportant: DO NOT use .run() at the end of a chain of SbEventFlow functions, it is not needed and it will throw an error.\n\n```jsx\nconst { isReady, getUserData, getPermissions } = Page1;\n<SbButton\n  onClick={SbEventFlow.setQueryParams({ filter: "active" }, true)\n    .setStateVar(isReady, true)\n    .controlModal("loginModal", "close")\n\n    // run APIs allows you to run Superblocks APIs by name using string arrays\n    // Each runAPIs call executes the list of API names supplied in parallel\n    .runApis([getUserData, getPermissions])\n\n    // set a state variable\'s value\n    .showAlert("Workflow complete", "success")\n    .navigateTo({ url: "/dashboard", newWindow: false })}\n/>;\n```\n\n#### Using RunJS (only when needed)\n\n`SbEventFlow` also has a special `runJS` event type that allows you to run any JavaScript in the browser.\n\nThis allows you to write more complex logic such as control flow.\n\nImportant:\n\n- The only things you can do in runJS is set state variables or set the public state of components, like modal.isOpen.\n- You CANNOT use SbEventFlow inside of a SbEventFlow.runJS function. If you do this, it won\'t work!\n- **State access in runJS**: Scope entities are accessible directly by their names, global state is accessible via imported globals (Global, Theme, Embed, Env).\n\nExample accessing scope entities:\n\n```jsx\n<SbButton\n  label="Enable"\n  buttonStyle={"SECONDARY_BUTTON"}\n  onClick={SbEventFlow.runJS(() => {\n    // Scope entities (variables, bound components) are accessible directly in runJS\n    if (isUserAdmin.value) {\n      // isUserAdmin is a bound component from scope\n      myStateVar.value = true; // myStateVar is a state variable from scope\n      myModal.isOpen = false; // myModal is a bound component from scope\n    } else {\n      console.log("This user was not an admin");\n    }\n  })}\n/>\n```\n\nExample accessing global state when needed:\n\n```jsx\n<SbButton\n  label="Personalized Action"\n  onClick={SbEventFlow.runJS(() => {\n    // Import globals and access directly\n    if (Global.user.groups.some((g) => g.name === "admin")) {\n      // Also access scope entities (bound components) directly\n      adminPanel.isVisible = true; // adminPanel is a bound component from scope\n    }\n    console.log(`Welcome ${Global.user.name}!`);\n  })}\n/>\n```\n\nAs mentioned above, you should only use `runJS` when the flow is too complex to represent using only chained event flow actions.\n\n### SbEvent Flow Usage Examples\n\n```typescript\nimport { SbEventFlow, sbComputed } from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\nconst { fetchUserData, saveUserData, userDataVariable } = Page1;\n\n// Navigation example\nSbEventFlow.navigateTo({ url: "https://example.com", newWindow: true });\n\n// Control UI components example\nSbEventFlow.controlModal("myModal", "open");\n\n// State management example\nconst { userProfile } = Page1;\nSbEventFlow.setStateVar(userProfile, { name: "John", role: "Admin" });\n\n// Chaining multiple actions\nSbEventFlow.runApis([fetchUserData])\n  .setStateVar(\n    userDataVariable,\n    sbComputed(() => {\n      fetchUserData.response;\n    }),\n  )\n  .showAlert("Data loaded successfully", "success");\n\n// Conditional flow with success/error handlers\nconst successFlow = SbEventFlow.showAlert("Success!", "success");\nconst errorFlow = SbEventFlow.showAlert("An error occurred", "error");\nSbEventFlow.runApis([saveUserData], successFlow, errorFlow);\n```\n\n**SbEventFlow: Managing Events and Side Effects in Superblocks**\n\n## Important Syntax Rules\n\n- Always use function braces with SbEventFlow.runJS. Example: `SbEventFlow.runJS(() => { someFunction(); })` not `SbEventFlow.runJS(() => someFunction())`\n- SbEventFlow.runApis() accepts an array of direct API entity references. Example: `SbEventFlow.runApis([fetchUserData, saveUserData])`\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-forms.js
 init_cjs_shims();
-var content6 = '### Form Layouts in Superblocks\n\nWhen creating forms using form field components, follow these rules:\n\n1. Always put form components together inside an `SbContainer` with `layout="vertical"`, `width={Dim.fill()}`, and appropriate `spacing`\n2. Use `spacing={Dim.px(12)}` or similar for consistent form field spacing\n3. Do not change the label position on form components (like `SbInput`). The default is the label is above the input and we want to keep that\n4. Make all form field components and any container parents be `width={Dim.fill()}` so they are all aligned horizontally and easy to use\n\n**Example:**\n\n```jsx\n<SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n  <SbInput label="First Name" bind={FirstName} width={Dim.fill()} />\n  <SbInput label="Last Name" bind={LastName} width={Dim.fill()} />\n  <SbInput label="Email" bind={Email} inputType="EMAIL" width={Dim.fill()} />\n</SbContainer>\n```\n\n### Forms inside Modals\n\nIt\'s common to put a form inside a Modal, like for creating or editing an entity. Here are comprehensive examples showing different patterns:\n\n#### Basic Create Form Modal\n\n```tsx\n// Import required components and utilities\nimport {\n  SbModal,\n  SbContainer,\n  SbText,\n  SbInput,\n  SbDropdown,\n  SbButton,\n  Dim,\n  SbEventFlow,\n} from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\n// ...\n\nconst {\n  NewOrderCustomerName,\n  NewOrderCustomerEmail,\n  NewOrderAmount,\n  NewOrderStatus,\n  NewOrderNotes,\n  OrdersStateVar,\n  CreateOrderModal,\n} = Page1;\n\n<SbModal bind={CreateOrderModal}>\n  <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <SbContainer layout="vertical" spacing={Dim.px(8)}>\n      <SbText\n        text="Create New Order"\n        textStyle={{\n          variant: "heading4",\n        }}\n      />\n      <SbText text="Fill out the form below to create a new order" />\n    </SbContainer>\n\n    {/* Form Content */}\n    <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n      <SbInput\n        bind={NewOrderCustomerName}\n        width={Dim.fill()}\n        label="Customer Name"\n        placeholderText="Enter customer name"\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderCustomerEmail}\n        width={Dim.fill()}\n        label="Customer Email"\n        inputType="EMAIL"\n        placeholderText="Enter customer email"\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderAmount}\n        width={Dim.fill()}\n        label="Order Amount"\n        placeholderText="Enter order amount"\n        inputType="NUMBER"\n        required={true}\n      />\n\n      <SbDropdown\n        bind={NewOrderStatus}\n        width={Dim.fill()}\n        label="Order Status"\n        options={[\n          {\n            label: "Pending",\n            value: "pending",\n          },\n          {\n            label: "Processing",\n            value: "processing",\n          },\n          {\n            label: "En route",\n            value: "en_route",\n          },\n          {\n            label: "Delivered",\n            value: "delivered",\n          },\n          {\n            label: "Refunded",\n            value: "refunded",\n          },\n        ]}\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderNotes}\n        width={Dim.fill()}\n        label="Order Notes"\n        placeholderText="Optional notes about the order"\n        multiline={true}\n      />\n    </SbContainer>\n\n    {/* Modal Footer */}\n    <SbContainer\n      layout="horizontal"\n      horizontalAlign="right"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <SbButton\n        label="Cancel"\n        variant="secondary"\n        onClick={SbEventFlow.runJS(() => {\n          // Reset form components\n          NewOrderCustomerName.text = "";\n          NewOrderCustomerEmail.text = "";\n          NewOrderAmount.text = "";\n          NewOrderStatus.metaSelectedOptionValue = "";\n          NewOrderNotes.text = "";\n        })\n          // Note how we prefer use controlModal for handling opening/closing\n          // the modal rather than setting the modal\'s open property directly\n          .controlModal("CreateOrderModal", "close")}\n      />\n      <SbButton\n        label="Create Order"\n        variant="primary"\n        onClick={SbEventFlow.runJS(() => {\n          // Create new order using the form values\n          const newOrder = {\n            id: `ORD_${Math.floor(Math.random() * 10000)\n              .toString()\n              .padStart(4, "0")}`,\n            customerName: NewOrderCustomerName.value,\n            customerEmail: NewOrderCustomerEmail.value,\n            amount: NewOrderAmount.value,\n            status: NewOrderStatus.selectedOptionValue,\n            notes: NewOrderNotes.value,\n            createdAt: new Date().toISOString(),\n          };\n\n          // Add to orders list or call API\n          OrdersStateVar.setValue([...OrdersStateVar.value, newOrder]);\n\n          // Reset form components\n          NewOrderCustomerName.text = "";\n          NewOrderCustomerEmail.text = "";\n          NewOrderAmount.text = "";\n          NewOrderStatus.metaSelectedOptionValue = "";\n          NewOrderNotes.text = "";\n        })\n          // Note how we prefer use controlModal for handling opening/closing\n          // the modal rather than setting the modal\'s open property directly\n          .controlModal("CreateOrderModal", "close")}\n      />\n    </SbContainer>\n  </SbContainer>\n</SbModal>;\n```\n\n#### Table with Edit Form Modal\n\nThis example shows a more complete pattern where a table displays data and clicking a row opens an edit modal with the form fields pre-populated:\n\n```tsx\n// Import required components and utilities\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbTable,\n  SbModal,\n  SbContainer,\n  SbText,\n  SbInput,\n  SbDropdown,\n  SbButton,\n  Dim,\n  SbEventFlow,\n  sbComputed,\n} from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\nconst {\n  OrdersTable,\n  EditOrderModal,\n  EditOrderCustomerName,\n  EditOrderCustomerEmail,\n  EditOrderAmount,\n  EditOrderStatus,\n  EditOrderNotes,\n  OrdersStateVar,\n} = Page1;\n\n// Main page with table\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n  <SbSection height={Dim.fill()}>\n    <SbColumn width={Dim.fill()} spacing={Dim.px(24)}>\n        <SbText\n          text="Orders Management"\n          textStyle={{ variant: "heading2" }}\n        />\n\n        <SbTable\n          bind={OrdersTable}\n          tableData={sbComputed(() => OrdersStateVar.value)}\n          onRowClick={SbEventFlow.runJS(() => {\n            // Populate form fields with the selected row data\n            EditOrderCustomerName.text = OrdersTable.selectedRow.customerName;\n            EditOrderCustomerEmail.text = OrdersTable.selectedRow.customerEmail;\n            EditOrderAmount.text = OrdersTable.selectedRow.amount;\n            EditOrderStatus.metaSelectedOptionValue = OrdersTable.selectedRow.status;\n            EditOrderNotes.text = OrdersTable.selectedRow.notes || "";\n          })\n            // Open the edit modal\n            .controlModal("EditOrderModal", "open")}\n          width={Dim.fill()}\n          height={Dim.fill()}\n        />\n    </SbColumn>\n  </SbSection>\n</SbPage>\n\n// Edit modal with form pre-populated from table row\n<SbModal bind={EditOrderModal}>\n  <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <SbContainer layout="vertical" spacing={Dim.px(8)}>\n      <SbText\n        text="Edit Order"\n        textStyle={{\n          variant: "heading4",\n        }}\n      />\n      <SbText text="Update the order details below" />\n    </SbContainer>\n\n    {/* Form Content - Fields are pre-populated by onRowClick */}\n    <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n      <SbInput\n        bind={EditOrderCustomerName}\n        width={Dim.fill()}\n        label="Customer Name"\n        placeholderText="Enter customer name"\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderCustomerEmail}\n        width={Dim.fill()}\n        label="Customer Email"\n        inputType="EMAIL"\n        placeholderText="Enter customer email"\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderAmount}\n        width={Dim.fill()}\n        label="Order Amount"\n        placeholderText="Enter order amount"\n        inputType="NUMBER"\n        required={true}\n      />\n\n      <SbDropdown\n        bind={EditOrderStatus}\n        width={Dim.fill()}\n        label="Order Status"\n        options={[\n          {\n            label: "Pending",\n            value: "pending",\n          },\n          {\n            label: "Processing",\n            value: "processing",\n          },\n          {\n            label: "En route",\n            value: "en_route",\n          },\n          {\n            label: "Delivered",\n            value: "delivered",\n          },\n          {\n            label: "Refunded",\n            value: "refunded",\n          },\n        ]}\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderNotes}\n        width={Dim.fill()}\n        label="Order Notes"\n        placeholderText="Optional notes about the order"\n        multiline={true}\n      />\n    </SbContainer>\n\n    {/* Modal Footer */}\n    <SbContainer\n      layout="horizontal"\n      horizontalAlign="right"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <SbButton\n        label="Cancel"\n        variant="secondary"\n        onClick={SbEventFlow.controlModal("EditOrderModal", "close")}\n      />\n      <SbButton\n        label="Save Changes"\n        variant="primary"\n        onClick={SbEventFlow.runJS(() => {\n          // Find and update the order in the orders array\n          const updatedOrders = OrdersStateVar.value.map(order => {\n            if (order.id === OrdersTable.selectedRow.id) {\n              return {\n                ...order,\n                customerName: EditOrderCustomerName.value,\n                customerEmail: EditOrderCustomerEmail.value,\n                amount: EditOrderAmount.value,\n                status: EditOrderStatus.selectedOptionValue,\n                notes: EditOrderNotes.value,\n                updatedAt: new Date().toISOString(),\n              };\n            }\n            return order;\n          });\n\n          // Update the orders state\n          OrdersStateVar.setValue(updatedOrders);\n        })\n          .controlModal("EditOrderModal", "close")}\n      />\n    </SbContainer>\n  </SbContainer>\n</SbModal>\n```\n\n**Corresponding scope.ts file for the table + edit modal example:**\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createSbScope,\n  SbVariable,\n  SbVariablePersistence,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  OrdersTable: any;\n  EditOrderModal: any;\n  EditOrderCustomerName: any;\n  EditOrderCustomerEmail: any;\n  EditOrderAmount: any;\n  EditOrderStatus: any;\n  EditOrderNotes: any;\n  OrdersStateVar: any;\n}>(\n  () => ({\n    OrdersStateVar: SbVariable({\n      defaultValue: [\n        {\n          id: 1,\n          customerName: "John Doe",\n          customerEmail: "john@example.com",\n          amount: 150.0,\n          status: "pending",\n          notes: "Rush order",\n          createdAt: "2024-01-15T10:30:00Z",\n        },\n        {\n          id: 2,\n          customerName: "Jane Smith",\n          customerEmail: "jane@example.com",\n          amount: 89.99,\n          status: "delivered",\n          notes: "",\n          createdAt: "2024-01-14T14:20:00Z",\n        },\n      ],\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n#### Alternative Population Method - Button with State Variable\n\nHere\'s another common pattern where a button populates form fields from a state variable:\n\n```tsx\n// Button that loads selected user data into edit form\n<SbButton\n  label="Edit Selected User"\n  onClick={SbEventFlow.runJS(() => {\n    const selectedUser = SelectedUserStateVar.value;\n\n    // Populate form fields from state variable\n    EditUserName.text = selectedUser.name;\n    EditUserEmail.text = selectedUser.email;\n    EditUserRole.metaSelectedOptionValue = selectedUser.role;\n    EditUserDepartment.text = selectedUser.department;\n  }).controlModal("EditUserModal", "open")}\n/>\n```\n\n### Key Form Patterns\n\n1. **Create Forms**: Start with empty fields, populate from user input\n2. **Edit Forms**: Pre-populate fields with existing data from various sources\n3. **Field Population Methods**:\n   - **Table Row Selection**: Use `onRowClick` to set form field values to `{TableName}.selectedRow.{columnName}` (most common)\n   - **Button Actions**: Use button clicks to populate from state variables or API responses\n   - **API Loading**: Fetch data and populate fields when modal opens\n   - **State Variables**: Populate from existing application state\n4. **Form Validation**: Use `required={true}` on form components and validate in submit handlers\n5. **Form Reset**: Always reset form fields when canceling or after successful submission\n6. **Modal Control**: Prefer `SbEventFlow.controlModal()` over directly setting modal open property\n\n### Form Layout Best Practices\n\n- **Container Structure**: Always wrap forms in `SbContainer` with `layout="vertical"`\n- **Consistent Spacing**: Use `spacing={Dim.px(12)}` for form field spacing\n- **Full Width**: Make form fields and containers `width={Dim.fill()}` for proper alignment\n- **Modal Structure**: Use header, content, and footer containers with appropriate spacing\n- **Button Alignment**: Use `horizontalAlign="right"` for the footer containers in modals that contain buttons\n';
+var content7 = '### Form Layouts in Superblocks\n\n**\u{1F6A8} CRITICAL: Remember that sbComputed cannot be used as React children.** When building forms, all dynamic content must be in component properties (like `text={}`, `label={}`) not as children.\n\nWhen creating forms using form field components, follow these rules:\n\n1. Always put form components together inside an `SbContainer` with `layout="vertical"`, `width={Dim.fill()}`, and appropriate `spacing`\n2. Use `spacing={Dim.px(12)}` or similar for consistent form field spacing\n3. Do not change the label position on form components (like `SbInput`). The default is the label is above the input and we want to keep that\n4. Make all form field components and any container parents be `width={Dim.fill()}` so they are all aligned horizontally and easy to use\n\n**Example:**\n\n```jsx\n<SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n  <SbInput label="First Name" bind={FirstName} width={Dim.fill()} />\n  <SbInput label="Last Name" bind={LastName} width={Dim.fill()} />\n  <SbInput label="Email" bind={Email} inputType="EMAIL" width={Dim.fill()} />\n</SbContainer>\n```\n\n### Forms inside Modals\n\nIt\'s common to put a form inside a Modal, like for creating or editing an entity. Here are comprehensive examples showing different patterns:\n\n#### Basic Create Form Modal\n\n```tsx\n// Import required components and utilities\nimport {\n  SbModal,\n  SbContainer,\n  SbText,\n  SbInput,\n  SbDropdown,\n  SbButton,\n  Dim,\n  SbEventFlow,\n} from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\n// ...\n\nconst {\n  NewOrderCustomerName,\n  NewOrderCustomerEmail,\n  NewOrderAmount,\n  NewOrderStatus,\n  NewOrderNotes,\n  OrdersStateVar,\n  CreateOrderModal,\n} = Page1;\n\n<SbModal bind={CreateOrderModal}>\n  <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <SbContainer layout="vertical" spacing={Dim.px(8)}>\n      <SbText\n        text="Create New Order"\n        textStyle={{\n          variant: "heading4",\n        }}\n      />\n      <SbText text="Fill out the form below to create a new order" />\n    </SbContainer>\n\n    {/* Form Content */}\n    <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n      <SbInput\n        bind={NewOrderCustomerName}\n        width={Dim.fill()}\n        label="Customer Name"\n        placeholderText="Enter customer name"\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderCustomerEmail}\n        width={Dim.fill()}\n        label="Customer Email"\n        inputType="EMAIL"\n        placeholderText="Enter customer email"\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderAmount}\n        width={Dim.fill()}\n        label="Order Amount"\n        placeholderText="Enter order amount"\n        inputType="NUMBER"\n        required={true}\n      />\n\n      <SbDropdown\n        bind={NewOrderStatus}\n        width={Dim.fill()}\n        label="Order Status"\n        options={[\n          {\n            label: "Pending",\n            value: "pending",\n          },\n          {\n            label: "Processing",\n            value: "processing",\n          },\n          {\n            label: "En route",\n            value: "en_route",\n          },\n          {\n            label: "Delivered",\n            value: "delivered",\n          },\n          {\n            label: "Refunded",\n            value: "refunded",\n          },\n        ]}\n        required={true}\n      />\n\n      <SbInput\n        bind={NewOrderNotes}\n        width={Dim.fill()}\n        label="Order Notes"\n        placeholderText="Optional notes about the order"\n        multiline={true}\n      />\n    </SbContainer>\n\n    {/* Modal Footer */}\n    <SbContainer\n      layout="horizontal"\n      horizontalAlign="right"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <SbButton\n        label="Cancel"\n        variant="secondary"\n        onClick={SbEventFlow.runJS(() => {\n          // Reset form components\n          NewOrderCustomerName.text = "";\n          NewOrderCustomerEmail.text = "";\n          NewOrderAmount.text = "";\n          NewOrderStatus.metaSelectedOptionValue = "";\n          NewOrderNotes.text = "";\n        })\n          // Note how we prefer use controlModal for handling opening/closing\n          // the modal rather than setting the modal\'s open property directly\n          .controlModal("CreateOrderModal", "close")}\n      />\n      <SbButton\n        label="Create Order"\n        variant="primary"\n        onClick={SbEventFlow.runJS(() => {\n          // Create new order using the form values\n          const newOrder = {\n            id: `ORD_${Math.floor(Math.random() * 10000)\n              .toString()\n              .padStart(4, "0")}`,\n            customerName: NewOrderCustomerName.value,\n            customerEmail: NewOrderCustomerEmail.value,\n            amount: NewOrderAmount.value,\n            status: NewOrderStatus.selectedOptionValue,\n            notes: NewOrderNotes.value,\n            createdAt: new Date().toISOString(),\n          };\n\n          // Add to orders list or call API\n          OrdersStateVar.setValue([...OrdersStateVar.value, newOrder]);\n\n          // Reset form components\n          NewOrderCustomerName.text = "";\n          NewOrderCustomerEmail.text = "";\n          NewOrderAmount.text = "";\n          NewOrderStatus.metaSelectedOptionValue = "";\n          NewOrderNotes.text = "";\n        })\n          // Note how we prefer use controlModal for handling opening/closing\n          // the modal rather than setting the modal\'s open property directly\n          .controlModal("CreateOrderModal", "close")}\n      />\n    </SbContainer>\n  </SbContainer>\n</SbModal>;\n```\n\n#### Table with Edit Form Modal\n\nThis example shows a more complete pattern where a table displays data and clicking a row opens an edit modal with the form fields pre-populated:\n\n```tsx\n// Import required components and utilities\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbTable,\n  SbModal,\n  SbContainer,\n  SbText,\n  SbInput,\n  SbDropdown,\n  SbButton,\n  Dim,\n  SbEventFlow,\n  sbComputed,\n} from "@superblocksteam/library";\nimport { Page1 } from "./scope";\n\nconst {\n  OrdersTable,\n  EditOrderModal,\n  EditOrderCustomerName,\n  EditOrderCustomerEmail,\n  EditOrderAmount,\n  EditOrderStatus,\n  EditOrderNotes,\n  OrdersStateVar,\n} = Page1;\n\n// Main page with table\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n  <SbSection height={Dim.fill()}>\n    <SbColumn width={Dim.fill()} spacing={Dim.px(24)}>\n        <SbText\n          text="Orders Management"\n          textStyle={{ variant: "heading2" }}\n        />\n\n        <SbTable\n          bind={OrdersTable}\n          tableData={sbComputed(() => OrdersStateVar.value)}\n          onRowClick={SbEventFlow.runJS(() => {\n            // Populate form fields with the selected row data\n            EditOrderCustomerName.text = OrdersTable.selectedRow.customerName;\n            EditOrderCustomerEmail.text = OrdersTable.selectedRow.customerEmail;\n            EditOrderAmount.text = OrdersTable.selectedRow.amount;\n            EditOrderStatus.metaSelectedOptionValue = OrdersTable.selectedRow.status;\n            EditOrderNotes.text = OrdersTable.selectedRow.notes || "";\n          })\n            // Open the edit modal\n            .controlModal("EditOrderModal", "open")}\n          width={Dim.fill()}\n          height={Dim.fill()}\n        />\n    </SbColumn>\n  </SbSection>\n</SbPage>\n\n// Edit modal with form pre-populated from table row\n<SbModal bind={EditOrderModal}>\n  <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(24)}>\n    {/* Modal Header */}\n    <SbContainer layout="vertical" spacing={Dim.px(8)}>\n      <SbText\n        text="Edit Order"\n        textStyle={{\n          variant: "heading4",\n        }}\n      />\n      <SbText text="Update the order details below" />\n    </SbContainer>\n\n    {/* Form Content - Fields are pre-populated by onRowClick */}\n    <SbContainer layout="vertical" width={Dim.fill()} spacing={Dim.px(12)}>\n      <SbInput\n        bind={EditOrderCustomerName}\n        width={Dim.fill()}\n        label="Customer Name"\n        placeholderText="Enter customer name"\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderCustomerEmail}\n        width={Dim.fill()}\n        label="Customer Email"\n        inputType="EMAIL"\n        placeholderText="Enter customer email"\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderAmount}\n        width={Dim.fill()}\n        label="Order Amount"\n        placeholderText="Enter order amount"\n        inputType="NUMBER"\n        required={true}\n      />\n\n      <SbDropdown\n        bind={EditOrderStatus}\n        width={Dim.fill()}\n        label="Order Status"\n        options={[\n          {\n            label: "Pending",\n            value: "pending",\n          },\n          {\n            label: "Processing",\n            value: "processing",\n          },\n          {\n            label: "En route",\n            value: "en_route",\n          },\n          {\n            label: "Delivered",\n            value: "delivered",\n          },\n          {\n            label: "Refunded",\n            value: "refunded",\n          },\n        ]}\n        required={true}\n      />\n\n      <SbInput\n        bind={EditOrderNotes}\n        width={Dim.fill()}\n        label="Order Notes"\n        placeholderText="Optional notes about the order"\n        multiline={true}\n      />\n    </SbContainer>\n\n    {/* Modal Footer */}\n    <SbContainer\n      layout="horizontal"\n      horizontalAlign="right"\n      spacing={Dim.px(12)}\n      width={Dim.fill()}\n    >\n      <SbButton\n        label="Cancel"\n        variant="secondary"\n        onClick={SbEventFlow.controlModal("EditOrderModal", "close")}\n      />\n      <SbButton\n        label="Save Changes"\n        variant="primary"\n        onClick={SbEventFlow.runJS(() => {\n          // Find and update the order in the orders array\n          const updatedOrders = OrdersStateVar.value.map(order => {\n            if (order.id === OrdersTable.selectedRow.id) {\n              return {\n                ...order,\n                customerName: EditOrderCustomerName.value,\n                customerEmail: EditOrderCustomerEmail.value,\n                amount: EditOrderAmount.value,\n                status: EditOrderStatus.selectedOptionValue,\n                notes: EditOrderNotes.value,\n                updatedAt: new Date().toISOString(),\n              };\n            }\n            return order;\n          });\n\n          // Update the orders state\n          OrdersStateVar.setValue(updatedOrders);\n        })\n          .controlModal("EditOrderModal", "close")}\n      />\n    </SbContainer>\n  </SbContainer>\n</SbModal>\n```\n\n**Corresponding scope.ts file for the table + edit modal example:**\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createSbScope,\n  SbVariable,\n  SbVariablePersistence,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  OrdersTable: any;\n  EditOrderModal: any;\n  EditOrderCustomerName: any;\n  EditOrderCustomerEmail: any;\n  EditOrderAmount: any;\n  EditOrderStatus: any;\n  EditOrderNotes: any;\n  OrdersStateVar: any;\n}>(\n  () => ({\n    OrdersStateVar: SbVariable({\n      defaultValue: [\n        {\n          id: 1,\n          customerName: "John Doe",\n          customerEmail: "john@example.com",\n          amount: 150.0,\n          status: "pending",\n          notes: "Rush order",\n          createdAt: "2024-01-15T10:30:00Z",\n        },\n        {\n          id: 2,\n          customerName: "Jane Smith",\n          customerEmail: "jane@example.com",\n          amount: 89.99,\n          status: "delivered",\n          notes: "",\n          createdAt: "2024-01-14T14:20:00Z",\n        },\n      ],\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n#### Alternative Population Method - Button with State Variable\n\nHere\'s another common pattern where a button populates form fields from a state variable:\n\n```tsx\n// Button that loads selected user data into edit form\n<SbButton\n  label="Edit Selected User"\n  onClick={SbEventFlow.runJS(() => {\n    const selectedUser = SelectedUserStateVar.value;\n\n    // Populate form fields from state variable\n    EditUserName.text = selectedUser.name;\n    EditUserEmail.text = selectedUser.email;\n    EditUserRole.metaSelectedOptionValue = selectedUser.role;\n    EditUserDepartment.text = selectedUser.department;\n  }).controlModal("EditUserModal", "open")}\n/>\n```\n\n### Key Form Patterns\n\n1. **Create Forms**: Start with empty fields, populate from user input\n2. **Edit Forms**: Pre-populate fields with existing data from various sources\n3. **Field Population Methods**:\n   - **Table Row Selection**: Use `onRowClick` to set form field values to `{TableName}.selectedRow.{columnName}` (most common)\n   - **Button Actions**: Use button clicks to populate from state variables or API responses\n   - **API Loading**: Fetch data and populate fields when modal opens\n   - **State Variables**: Populate from existing application state\n4. **Form Validation**: Use `required={true}` on form components and validate in submit handlers\n5. **Form Reset**: Always reset form fields when canceling or after successful submission\n6. **Modal Control**: Prefer `SbEventFlow.controlModal()` over directly setting modal open property\n\n### Form Layout Best Practices\n\n- **Container Structure**: Always wrap forms in `SbContainer` with `layout="vertical"`\n- **Consistent Spacing**: Use `spacing={Dim.px(12)}` for form field spacing\n- **Full Width**: Make form fields and containers `width={Dim.fill()}` for proper alignment\n- **Modal Structure**: Use header, content, and footer containers with appropriate spacing\n- **Button Alignment**: Use `horizontalAlign="right"` for the footer containers in modals that contain buttons\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-layouts.js
 init_cjs_shims();
-var content7 = '### Layout and Sizing in Superblocks\n\n- `SbSection` should only be used as a child of `SbPage` and `SbColumn` only used as a child of `SbSection`\n- All other layouts in Superblocks are configured using the `SbContainer` component\n- `SbContainer` provides both layout and optional visual styling.\n\n```jsx\n<SbContainer\n  variant="card" | "none" // default is "none"\n  layout="vertical" | "horizontal" | "freeform" // default is "vertical"\n>\n  {/* Children here */}\n</SbContainer>\n```\n\nWe have three main layout options in Superblocks for `SbContainer` and `SbColumn`:\n\n- Vertical Stack (`vertical`)\n- Horizontal Stack (`horizontal`)\n- Freeform (`freeform`)\n\nFor new designs, we recommend using Horizontal or Vertical Stacks for almost all use cases, especially Vertical Stacks.\n\nThe `variant` prop is optional and can be set to `"card"` or `"none"`. Default is `"none"`.\n`"card"` applies a card-like visual style to the container, such as rounded corners, white background, and padding.\n\n**When to use each variant:**\n\n- `variant="none"` - For pure layout containers (by far most common)\n- `variant="card"` - When you need visual separation with padding, borders, and background\n\n---\n\n### Height and Width Options\n\nAll Superblocks components support width and height. They take in a `Dim` object, which has 3 main options:\n\n- `Dim.fit()`: Fit to content size, this is the default behavior and can be omitted.\n- `Dim.px(100)`: Fixed pixel size.\n- `Dim.fill()` or `Dim.fill(2)`: Fill available space with an optional weight.\n\n> IMPORTANT: Prefer using `Dim.fit()` over `Dim.px()` for height and width unless you have a specific reason to use fixed pixel sizes. This is extra true for containers\n> IMPORTANT: Prefer using `Dim.fill()` or `Dim.fit()` over `Dim.px()` for width unless you have a specific reason to use fixed pixel sizes.\n\n**Examples**:\n\n```jsx\n<SbText width={Dim.px(2)}>Hello</SbText>   // 2 pixels\n<SbText width={Dim.fit()}>Hello</SbText>   // Fit to content (default)\n<SbText width={Dim.fill()}>Hello</SbText>  // Fill available space, no weight (aka 1)\n<SbText width={Dim.fill(2)}>Hello</SbText> // Fill available space, with weight of 2\n```\n\n---\n\n### Spacing Between Components\n\n`SbContainer` has a **default spacing of `Dim.px(6)`** between child components when using `layout="vertical"` or `layout="horizontal"`. You can override this default when you need different spacing.\n\n```jsx\n{\n  /* Uses default 6px spacing */\n}\n<SbContainer layout="vertical">\n  <SbText text="First item" />\n  <SbText text="Second item" />\n  <SbText text="Third item" />\n</SbContainer>;\n\n{\n  /* Override with custom spacing */\n}\n<SbContainer layout="vertical" spacing={Dim.px(12)}>\n  <SbText text="First item" />\n  <SbText text="Second item" />\n</SbContainer>;\n\n{\n  /* No spacing (components touch) - often useful for nested containers */\n}\n<SbContainer layout="horizontal" spacing={Dim.px(0)}>\n  <SbContainer />\n  <SbContainer />\n</SbContainer>;\n```\n\n**Common spacing values:**\n\n- `spacing={Dim.px(0)}` - No spacing (components touch)\n- Default `Dim.px(6)` - Minimal spacing (used if spacing prop omitted)\n- `spacing={Dim.px(12)}` - Comfortable spacing for buttons/controls/form fields\n- `spacing={Dim.px(24)}` - Loose spacing for distinct sections\n\n**Best practices:**\n\n- The default 6px spacing works well for most layouts\n- Override spacing when you need tighter control or larger gaps\n- DO NOT add margins to components - use container spacing instead\n- Try to use consistent spacing values throughout your app\n\n---\n\n### Standard Page Structure\n\n**CRITICAL**: All new Superblocks apps must follow this standard page structure:\n\n```tsx\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n  <SbSection height={Dim.fill()}>\n    <SbColumn width={Dim.fill()}>{/* Your page content goes here */}</SbColumn>\n  </SbSection>\n</SbPage>\n```\n\nNote that `SbSection` and `SbColumn` can only be used inside `SbPage`. For anything inside an `SbModal` or nested deeper inside an `SbColumn`, use an `SbContainer`.\n\n#### App headers\n\n- If you want to have a header section for your app, that\'s best done in its own `SbSection` above the main content\'s `SbSection`.\n- Put any background color on the section itself, as the columns are padded in from the edge by default\n\nExample:\n\n```tsx\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n  {/* App header Section */}\n  <SbSection height={Dim.fit()} backgroundColor="#90EE90">\n    <SbColumn\n      width={Dim.fill()}\n      layout="horizontal"\n      horizontalAlign="space-between"\n    >\n      <SbText text="My App" textStyle={{ variant: "heading2" }} />\n      <SbButton label="New Item" />\n    </SbColumn>\n  </SbSection>\n\n  {/* Main Content Section */}\n  <SbSection height={Dim.fill()}>\n    <SbColumn width={Dim.fill()}>\n      <SbTable tableData={sbComputed(() => myData.response)} />\n    </SbColumn>\n  </SbSection>\n</SbPage>\n```\n\n#### Column and Container Width Guidelines\n\n**Default Rule**: All columns under a section, and almost all Containers (especially if they are the root of a Column or Modal) should use `width={Dim.fill()}` unless you have a really good reason not to.\n\n**Good Reason Example** - Fixed Sidebar Layout:\nWhen you need a fixed-width sidebar alongside a flexible content area:\n\n```tsx\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n  <SbSection height={Dim.fill()}>\n    {/* Fixed sidebar column */}\n    <SbColumn width={Dim.px(250)}>\n      <SbText text="Sidebar content" />\n      <SbButton label="Menu Item 1" />\n      <SbButton label="Menu Item 2" />\n    </SbColumn>\n\n    {/* Flexible content column */}\n    <SbColumn width={Dim.fill()}>\n      <SbText text="Main content area that fills remaining space" />\n      <SbTable tableData={sbComputed(() => myApi.response)} />\n    </SbColumn>\n  </SbSection>\n</SbPage>\n```\n\nIn this example:\n\n- Left column uses `width={Dim.px(250)}` for a fixed 250px sidebar\n- Right column uses `width={Dim.fill()}` to take up all remaining space\n- This creates a responsive layout where the sidebar stays fixed while the content area adapts\n\n### Layouts for modals\n\n- SbModal components should always use an SbContainer with layout=vertical as the root of their content\n- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default\n- Put the header of the modal into its own `SbContainer` and the footer in its own `SbContainer`. If the footer has buttons for actions, ensure you add `horizontalAlign="right"` to the container\n\n**Modal Content Width Guidelines:**\n\nMost components inside modals should use `width={Dim.fill()}` to prevent left-aligned, inconsistent layouts:\n\n- Root container: `<SbContainer layout="vertical" width={Dim.fill()}>`\n- Form fields: `<SbInput bind={...} width={Dim.fill()} />`\n- Form containers: `<SbContainer layout="vertical" width={Dim.fill()}>`\n\n**Exceptions:** Some components work better with default `Dim.fit()` width:\n\n- Footer buttons (SbButton) - wide buttons look awkward\n- Icons, small text labels, or decorative elements\n\n**Good Example:** See the modal examples in `superblocks-forms.md` where the footer container uses `width={Dim.fill()}` but the Cancel/Submit buttons inside use default fit width for proper proportions.\n';
+var content8 = '### Layout and Sizing in Superblocks\n\n- `SbSection` should only be used as a child of `SbPage` and `SbColumn` only used as a child of `SbSection`\n- All other layouts in Superblocks are configured using the `SbContainer` component\n- `SbContainer` provides both layout and optional visual styling.\n\n```jsx\n<SbContainer\n  variant="card" | "none" // default is "none"\n  layout="vertical" | "horizontal" | "freeform" // default is "vertical"\n>\n  {/* Children here */}\n</SbContainer>\n```\n\nWe have three main layout options in Superblocks for `SbContainer` and `SbColumn`:\n\n- Vertical Stack (`vertical`)\n- Horizontal Stack (`horizontal`)\n- Freeform (`freeform`)\n\nFor new designs, we recommend using Horizontal or Vertical Stacks for almost all use cases, especially Vertical Stacks.\n\nThe `variant` prop is optional and can be set to `"card"` or `"none"`. Default is `"none"`.\n`"card"` applies a card-like visual style to the container, such as rounded corners, white background, and padding.\n\n**When to use each variant:**\n\n- `variant="none"` - For pure layout containers (by far most common)\n- `variant="card"` - When you need visual separation with padding, borders, and background\n\n---\n\n### Height and Width Options\n\nAll Superblocks components support width and height. They take in a `Dim` object, which has 3 main options:\n\n- `Dim.fit()`: Fit to content size, this is the default behavior and can be omitted.\n- `Dim.px(100)`: Fixed pixel size.\n- `Dim.fill()` or `Dim.fill(2)`: Fill available space with an optional weight.\n\n> IMPORTANT: Prefer using `Dim.fit()` over `Dim.px()` for height and width unless you have a specific reason to use fixed pixel sizes. This is extra true for containers\n> IMPORTANT: Prefer using `Dim.fill()` or `Dim.fit()` over `Dim.px()` for width unless you have a specific reason to use fixed pixel sizes.\n\n**Examples**:\n\n```jsx\n<SbText width={Dim.px(2)}>Hello</SbText>   // 2 pixels\n<SbText width={Dim.fit()}>Hello</SbText>   // Fit to content (default)\n<SbText width={Dim.fill()}>Hello</SbText>  // Fill available space, no weight (aka 1)\n<SbText width={Dim.fill(2)}>Hello</SbText> // Fill available space, with weight of 2\n```\n\n---\n\n### Spacing Between Components\n\n`SbContainer` has a **default spacing of `Dim.px(6)`** between child components when using `layout="vertical"` or `layout="horizontal"`. You can override this default when you need different spacing.\n\n```jsx\n{\n  /* Uses default 6px spacing */\n}\n<SbContainer layout="vertical">\n  <SbText text="First item" />\n  <SbText text="Second item" />\n  <SbText text="Third item" />\n</SbContainer>;\n\n{\n  /* Override with custom spacing */\n}\n<SbContainer layout="vertical" spacing={Dim.px(12)}>\n  <SbText text="First item" />\n  <SbText text="Second item" />\n</SbContainer>;\n\n{\n  /* No spacing (components touch) - often useful for nested containers */\n}\n<SbContainer layout="horizontal" spacing={Dim.px(0)}>\n  <SbContainer />\n  <SbContainer />\n</SbContainer>;\n```\n\n**Common spacing values:**\n\n- `spacing={Dim.px(0)}` - No spacing (components touch)\n- Default `Dim.px(6)` - Minimal spacing (used if spacing prop omitted)\n- `spacing={Dim.px(12)}` - Comfortable spacing for buttons/controls/form fields\n- `spacing={Dim.px(24)}` - Loose spacing for distinct sections\n\n**Best practices:**\n\n- The default 6px spacing works well for most layouts\n- Override spacing when you need tighter control or larger gaps\n- DO NOT add margins to components - use container spacing instead\n- Try to use consistent spacing values throughout your app\n\n---\n\n### Standard Page Structure\n\n**CRITICAL**: All new Superblocks apps must follow this standard page structure:\n\n```tsx\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n  <SbSection height={Dim.fill()}>\n    <SbColumn width={Dim.fill()}>{/* Your page content goes here */}</SbColumn>\n  </SbSection>\n</SbPage>\n```\n\nNote that `SbSection` and `SbColumn` can only be used inside `SbPage`. For anything inside an `SbModal` or nested deeper inside an `SbColumn`, use an `SbContainer`.\n\n#### App headers\n\n- If you want to have a header section for your app, that\'s best done in its own `SbSection` above the main content\'s `SbSection`.\n- Put any background color on the section itself, as the columns are padded in from the edge by default\n\nExample:\n\n```tsx\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n  {/* App header Section */}\n  <SbSection height={Dim.fit()} backgroundColor="#90EE90">\n    <SbColumn\n      width={Dim.fill()}\n      layout="horizontal"\n      horizontalAlign="space-between"\n    >\n      <SbText text="My App" textStyle={{ variant: "heading2" }} />\n      <SbButton label="New Item" />\n    </SbColumn>\n  </SbSection>\n\n  {/* Main Content Section */}\n  <SbSection height={Dim.fill()}>\n    <SbColumn width={Dim.fill()}>\n      <SbTable tableData={sbComputed(() => myData.response)} />\n    </SbColumn>\n  </SbSection>\n</SbPage>\n```\n\n#### Column and Container Width Guidelines\n\n**Default Rule**: All columns under a section, and almost all Containers (especially if they are the root of a Column or Modal) should use `width={Dim.fill()}` unless you have a really good reason not to.\n\n**Good Reason Example** - Fixed Sidebar Layout:\nWhen you need a fixed-width sidebar alongside a flexible content area:\n\n```tsx\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n  <SbSection height={Dim.fill()}>\n    {/* Fixed sidebar column */}\n    <SbColumn width={Dim.px(250)}>\n      <SbText text="Sidebar content" />\n      <SbButton label="Menu Item 1" />\n      <SbButton label="Menu Item 2" />\n    </SbColumn>\n\n    {/* Flexible content column */}\n    <SbColumn width={Dim.fill()}>\n      <SbText text="Main content area that fills remaining space" />\n      <SbTable tableData={sbComputed(() => myApi.response)} />\n    </SbColumn>\n  </SbSection>\n</SbPage>\n```\n\nIn this example:\n\n- Left column uses `width={Dim.px(250)}` for a fixed 250px sidebar\n- Right column uses `width={Dim.fill()}` to take up all remaining space\n- This creates a responsive layout where the sidebar stays fixed while the content area adapts\n\n### Layouts for modals\n\n- SbModal components should always use an SbContainer with layout=vertical as the root of their content\n- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default\n- Put the header of the modal into its own `SbContainer` and the footer in its own `SbContainer`. If the footer has buttons for actions, ensure you add `horizontalAlign="right"` to the container\n\n**Modal Content Width Guidelines:**\n\nMost components inside modals should use `width={Dim.fill()}` to prevent left-aligned, inconsistent layouts:\n\n- Root container: `<SbContainer layout="vertical" width={Dim.fill()}>`\n- Form fields: `<SbInput bind={...} width={Dim.fill()} />`\n- Form containers: `<SbContainer layout="vertical" width={Dim.fill()}>`\n\n**Exceptions:** Some components work better with default `Dim.fit()` width:\n\n- Footer buttons (SbButton) - wide buttons look awkward\n- Icons, small text labels, or decorative elements\n\n**Good Example:** See the modal examples in `superblocks-forms.md` where the footer container uses `width={Dim.fill()}` but the Cancel/Submit buttons inside use default fit width for proper proportions.\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-page.js
 init_cjs_shims();
-var content8 = '### How to use SbPage\n\n**Important: Superblocks apps currently support only one page.**\n\n- A Superblocks app consists of a single page that exports a default React component through the `registerPage` function.\n- The page consists of two files: `index.tsx` (the page component) and `scope.ts` (the entity definitions).\n- For `export default registerPage(Page1, Page1Scope)`, Page1 is a function that returns a React component, and Page1Scope is the scope containing all entities.\n- A Superblocks app consists of a single page located in the `pages/Page1` directory.\n- NEVER change the path of the `pages` directory or the page directories inside it `like `pages/Page1`). If you change these paths or folder names, the app will crash.\n- DO NOT create more than ONE page in an app. Multiple pages is NOT supported!\n\n### Page Structure\n\nThe single page in your Superblocks app should have the following structure:\n\n**scope.ts** - Contains all entity definitions (variables, APIs, etc.):\n\n```ts\nimport {\n  createSbScope,\n  SbVariable,\n  SbVariablePersistence,\n  SbApi,\n  SbText,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  Text1: any;\n}>(\n  () => ({\n    // Define your entities here\n    myVariable: SbVariable({\n      defaultValue: "initial value",\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    myApi: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**index.tsx** - Contains the page component:\n\n```tsx\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbText,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nfunction Page() {\n  // Destructure entities from the scope for easy access\n  const { Text1, myVariable, myApi } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          {/* Use entities in your components */}\n          <SbText bind={Text1} text={sbComputed(() => myVariable.value)} />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n\nexport default registerPage(Page, Page1Scope);\n```\n\n## How component bindings work\n\nIf you need to reference a component directly to get access to some of its state, you must use a binding inside the page scope.\n\nComponent bindings allow you to:\n\n- Access component properties and state from other components and APIs\n- Create reactive relationships between components\n- Reference component values in `sbComputed` expressions\n\n### Setting up component bindings\n\n1. **Define the binding type in your scope**: Add the component type to the scope\'s type definitions:\n\n```ts\nexport const Page1Scope = createSbScope<{\n  Text1: any;\n  UserInput: any;\n}>(\n  () => ({\n    // Your other entities (variables, APIs, etc.)\n    myVariable: SbVariable({ defaultValue: "Hello" }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n\n2. **Bind the component in your JSX**: Use the `bind` prop to connect the component to the binding:\n\n```tsx\nfunction Page() {\n  const { Text1, UserInput, myVariable } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbInput bind={UserInput} placeholder="Enter your name" />\n          <SbText\n            bind={Text1}\n            text={sbComputed(() => `Hello, ${UserInput.value}!`)}\n          />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n```\n\n3. **Access component state**: Use `sbComputed` to access properties of bound components:\n\n```tsx\n// Access input value\ntext={sbComputed(() => UserInput.value)}\n\n// Access text content\ntext={sbComputed(() => Text1.text)}\n\n// Combine with other state\ntext={sbComputed(() => `${myVariable.value}: ${UserInput.value}`)}\n```\n\n### Common binding use cases\n\n- **Form inputs**: Access user input values to display or validate\n- **Dynamic content**: Reference one component\'s state to update another\n- **Conditional rendering**: Use component state to control visibility or styling\n\n### Page load events\n\nYou can fire callbacks when the page is loaded using the onLoad property of the Page component. You must use the SbEventFlow API for any actions you want to run inside onLoad.\n\nExample:\n\n```tsx\nimport {\n  registerPage,\n  SbEventFlow,\n  SbPage,\n  SbSection,\n  SbColumn,\n  sbComputed,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  return (\n    <SbPage\n      name="Page1"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={SbEventFlow.runJS(() => {\n        console.log("Page loaded");\n      })}\n    >\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>...</SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nA very common and helpful usage of this callback is to run APIs using SbEventFlow to fetch data when the page loads. Example:\n\n```tsx\nimport {\n  SbPage,\n  registerPage,\n  SbEventFlow,\n  SbSection,\n  SbColumn,\n  sbComputed,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  return (\n    <SbPage\n      name="Page1"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={SbEventFlow.runApis([getOrders])}\n    >\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>...</SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nIn this example, the `getOrders` API would be defined in the scope.ts file like this:\n\n```ts\n// In scope.ts\n\n// We register the api in createSbScope by creating a key\n// with the same name as the file, and SbApi({}) with an empty object\n// Note: We DO NOT import the api file. It\'s not necessary.\nexport const Page1Scope = createSbScope(\n  () => ({\n    getOrders: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n';
+var content9 = '### How to use SbPage\n\n**Important: Superblocks apps currently support only one page.**\n\n- A Superblocks app consists of a single page that exports a default React component through the `registerPage` function.\n- The page consists of two files: `index.tsx` (the page component) and `scope.ts` (the entity definitions).\n- For `export default registerPage(Page1, Page1Scope)`, Page1 is a function that returns a React component, and Page1Scope is the scope containing all entities.\n- A Superblocks app consists of a single page located in the `pages/Page1` directory.\n- NEVER change the path of the `pages` directory or the page directories inside it `like `pages/Page1`). If you change these paths or folder names, the app will crash.\n- DO NOT create more than ONE page in an app. Multiple pages is NOT supported!\n\n### Page Structure\n\nThe single page in your Superblocks app should have the following structure:\n\n**scope.ts** - Contains all entity definitions (variables, APIs, etc.):\n\n```ts\nimport {\n  createSbScope,\n  SbVariable,\n  SbVariablePersistence,\n  SbApi,\n  SbText,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  Text1: any;\n}>(\n  () => ({\n    // Define your entities here\n    myVariableVar: SbVariable({\n      defaultValue: "initial value",\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    fetchDataApi: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**index.tsx** - Contains the page component:\n\n```tsx\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbText,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nfunction Page() {\n  // Destructure entities from the scope for easy access\n  const { Text1, myVariableVar, fetchDataApi } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          {/* Use entities in your components */}\n          <SbText bind={Text1} text={sbComputed(() => myVariableVar.value)} />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n\nexport default registerPage(Page, Page1Scope);\n```\n\n## How component bindings work\n\nIf you need to reference a component directly to get access to some of its state, you must use a binding inside the page scope.\n\nComponent bindings allow you to:\n\n- Access component properties and state from other components and APIs\n- Create reactive relationships between components\n- Reference component values in `sbComputed` expressions\n\n### Setting up component bindings\n\n1. **Define the binding type in your scope**: Add the component type to the scope\'s type definitions:\n\n```ts\nexport const Page1Scope = createSbScope<{\n  Text1: any;\n  UserInput: any;\n}>(\n  () => ({\n    // Your other entities (variables, APIs, etc.)\n    myVariableVar: SbVariable({ defaultValue: "Hello" }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n\n2. **Bind the component in your JSX**: Use the `bind` prop to connect the component to the binding:\n\n```tsx\nfunction Page() {\n  const { Text1, UserInput, myVariableVar } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbInput bind={UserInput} placeholder="Enter your name" />\n          <SbText\n            bind={Text1}\n            text={sbComputed(() => `Hello, ${UserInput.value}!`)}\n          />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n```\n\n3. **Access component state**: Use `sbComputed` to access properties of bound components:\n\n```tsx\n// Access input value\ntext={sbComputed(() => UserInput.value)}\n\n// Access text content\ntext={sbComputed(() => Text1.text)}\n\n// Combine with other state\n            text={sbComputed(() => `${myVariableVar.value}: ${UserInput.value}`)}\n```\n\n### Common binding use cases\n\n- **Form inputs**: Access user input values to display or validate\n- **Dynamic content**: Reference one component\'s state to update another\n- **Conditional rendering**: Use component state to control visibility or styling\n\n### Page load events\n\nYou can fire callbacks when the page is loaded using the onLoad property of the Page component. You must use the SbEventFlow API for any actions you want to run inside onLoad.\n\nExample:\n\n```tsx\nimport {\n  registerPage,\n  SbEventFlow,\n  SbPage,\n  SbSection,\n  SbColumn,\n  sbComputed,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  return (\n    <SbPage\n      name="Page1"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={SbEventFlow.runJS(() => {\n        console.log("Page loaded");\n      })}\n    >\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>...</SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nA very common and helpful usage of this callback is to run APIs using SbEventFlow to fetch data when the page loads. Example:\n\n```tsx\nimport {\n  SbPage,\n  registerPage,\n  SbEventFlow,\n  SbSection,\n  SbColumn,\n  sbComputed,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n  return (\n    <SbPage\n      name="Page1"\n      height={Dim.fill()}\n      width={Dim.fill()}\n      onLoad={SbEventFlow.runApis([getOrdersApi])}\n    >\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>...</SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nIn this example, the `getOrdersApi` API would be defined in the scope.ts file like this:\n\n```ts\n// In scope.ts\n\n// We register the api in createSbScope by creating a key\n// with the same name as the file, and SbApi({}) with an empty object\n// Note: We DO NOT import the api file. It\'s not necessary.\nexport const Page1Scope = createSbScope(\n  () => ({\n    getOrdersApi: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-rbac.js
 init_cjs_shims();
-var content9 = '# Role-Based Access Control (RBAC)\n\nSuperblocks provides role-based access control through user groups. You can control component visibility and availability based on the groups that a user belongs to.\n\n## Accessing User Groups\n\nUser groups are available via `Global.user.groups`, which contains an array of group objects with the following structure:\n\n```typescript\n// Global.user.groups is an ARRAY OF OBJECTS, not an array of strings\nGlobal.user.groups: Array<{\n  id: string;\n  name: string;\n}>;\n\n// Example data:\n// [\n//   { id: "123", name: "Admins" },\n//   { id: "456", name: "Managers" },\n//   { id: "789", name: "Order Management Admins" }\n// ]\n```\n\n## Common RBAC Patterns\n\n### Hiding Components Based on User Groups\n\nThe most common way to implement RBAC is by controlling component visibility using the `isVisible` property. Nearly all components support this property.\n\n```javascript\n// Show a component only to users in the "Admins" group\n<SbButton\n  label="Admin Action"\n  isVisible={Global.user.groups.some((g) => g.name === "Admins")}\n/>\n\n// Show a component only to users NOT in the "Guest" group\n<SbContainer\n  isVisible={!Global.user.groups.some((g) => g.name === "Guest")}\n>\n  {/* Content only visible to non-guests */}\n</SbContainer>\n\n// Show a component to users in multiple groups\n<SbText\n  text="Manager or Admin content"\n  isVisible={Global.user.groups.some((g) => ["Managers", "Admins"].includes(g.name))}\n/>\n```\n\n### Disabling Components Based on User Groups\n\nFor interactive components that support the `isDisabled` property (like buttons, inputs, dropdowns, etc.), you can disable functionality while keeping the component visible:\n\n```javascript\n// Disable a button for users not in the "Editors" group\n<SbButton\n  label="Edit Record"\n  isDisabled={!Global.user.groups.some((g) => g.name === "Editors")}\n/>\n\n// Disable an input for read-only users\n<SbInput\n  label="Sensitive Data"\n  defaultValue="Some value"\n  isDisabled={Global.user.groups.some((g) => g.name === "ReadOnly")}\n/>\n\n// Enable advanced features only for premium users\n<SbDropdown\n  label="Advanced Options"\n  isDisabled={!Global.user.groups.some((g) => g.name === "Premium")}\n/>\n```\n\n## Components with RBAC Support\n\n### Components Supporting `isVisible`\n\nAlmost all components support the `isVisible` property, including:\n\n- SbButton, SbText, SbInput, SbDropdown, SbContainer, SbImage, SbIcon, SbTable, SbCheckbox, SbSwitch, SbDatePicker, SbModal, SbSlideout, and more.\n\n### Components Supporting `isDisabled`\n\nInteractive components that support the `isDisabled` property include:\n\n- SbButton, SbInput, SbDropdown, SbCheckbox, SbSwitch, SbDatePicker, and other form controls.\n\n## Best Practices\n\n1. **Use `isVisible` for sensitive content**: Hide components that contain sensitive information or actions that users shouldn\'t see.\n\n2. **Use `isDisabled` for better UX**: When you want users to see that a feature exists but is not available to them, disable the component rather than hiding it.\n\n3. **Group-based logic**: Use group names consistently across your application for easier maintenance.\n\n4. **Fallback handling**: Consider what happens when a user has no groups or unexpected group configurations.\n\n5. **Test thoroughly**: Always test RBAC logic with users from different groups to ensure proper access control.\n\n## Example: Complete RBAC Implementation\n\n```javascript\n// A dashboard with different access levels\n<SbContainer layout="vertical">\n  {/* Everyone can see this */}\n  <SbText text="Welcome to the Dashboard" />\n\n  {/* Only visible to authenticated users (not guests) */}\n  <SbButton\n    label="My Profile"\n    isVisible={!Global.user.groups.some((g) => g.name === "Guest")}\n  />\n\n  {/* Visible to managers and admins, but disabled for managers */}\n  <SbButton\n    label="Delete Records"\n    isVisible={Global.user.groups.some((g) =>\n      ["Managers", "Admins"].includes(g.name),\n    )}\n    isDisabled={\n      Global.user.groups.some((g) => g.name === "Managers") &&\n      !Global.user.groups.some((g) => g.name === "Admins")\n    }\n  />\n\n  {/* Admin-only section */}\n  <SbContainer isVisible={Global.user.groups.some((g) => g.name === "Admins")}>\n    <SbText text="Admin Controls" />\n    <SbButton label="System Settings" />\n    <SbButton label="User Management" />\n  </SbContainer>\n</SbContainer>\n```\n';
+var content10 = '# Role-Based Access Control (RBAC)\n\nSuperblocks provides role-based access control through user groups. You can control component visibility and availability based on the groups that a user belongs to.\n\n## Accessing User Groups\n\nUser groups are available via `Global.user.groups`, which contains an array of group objects with the following structure:\n\n```typescript\n// Global.user.groups is an ARRAY OF OBJECTS, not an array of strings\nGlobal.user.groups: Array<{\n  id: string;\n  name: string;\n}>;\n\n// Example data:\n// [\n//   { id: "123", name: "Admins" },\n//   { id: "456", name: "Managers" },\n//   { id: "789", name: "Order Management Admins" }\n// ]\n```\n\n## Common RBAC Patterns\n\n### Hiding Components Based on User Groups\n\nThe most common way to implement RBAC is by controlling component visibility using the `isVisible` property. Nearly all components support this property.\n\n```javascript\n// Show a component only to users in the "Admins" group\n<SbButton\n  label="Admin Action"\n  isVisible={Global.user.groups.some((g) => g.name === "Admins")}\n/>\n\n// Show a component only to users NOT in the "Guest" group\n<SbContainer\n  isVisible={!Global.user.groups.some((g) => g.name === "Guest")}\n>\n  {/* Content only visible to non-guests */}\n</SbContainer>\n\n// Show a component to users in multiple groups\n<SbText\n  text="Manager or Admin content"\n  isVisible={Global.user.groups.some((g) => ["Managers", "Admins"].includes(g.name))}\n/>\n```\n\n### Disabling Components Based on User Groups\n\nFor interactive components that support the `isDisabled` property (like buttons, inputs, dropdowns, etc.), you can disable functionality while keeping the component visible:\n\n```javascript\n// Disable a button for users not in the "Editors" group\n<SbButton\n  label="Edit Record"\n  isDisabled={!Global.user.groups.some((g) => g.name === "Editors")}\n/>\n\n// Disable an input for read-only users\n<SbInput\n  label="Sensitive Data"\n  defaultValue="Some value"\n  isDisabled={Global.user.groups.some((g) => g.name === "ReadOnly")}\n/>\n\n// Enable advanced features only for premium users\n<SbDropdown\n  label="Advanced Options"\n  isDisabled={!Global.user.groups.some((g) => g.name === "Premium")}\n/>\n```\n\n## Components with RBAC Support\n\n### Components Supporting `isVisible`\n\nAlmost all components support the `isVisible` property, including:\n\n- SbButton, SbText, SbInput, SbDropdown, SbContainer, SbImage, SbIcon, SbTable, SbCheckbox, SbSwitch, SbDatePicker, SbModal, SbSlideout, and more.\n\n### Components Supporting `isDisabled`\n\nInteractive components that support the `isDisabled` property include:\n\n- SbButton, SbInput, SbDropdown, SbCheckbox, SbSwitch, SbDatePicker, and other form controls.\n\n## Best Practices\n\n1. **Use `isVisible` for sensitive content**: Hide components that contain sensitive information or actions that users shouldn\'t see.\n\n2. **Use `isDisabled` for better UX**: When you want users to see that a feature exists but is not available to them, disable the component rather than hiding it.\n\n3. **Group-based logic**: Use group names consistently across your application for easier maintenance.\n\n4. **Fallback handling**: Consider what happens when a user has no groups or unexpected group configurations.\n\n5. **Test thoroughly**: Always test RBAC logic with users from different groups to ensure proper access control.\n\n## Example: Complete RBAC Implementation\n\n```javascript\n// A dashboard with different access levels\n<SbContainer layout="vertical">\n  {/* Everyone can see this */}\n  <SbText text="Welcome to the Dashboard" />\n\n  {/* Only visible to authenticated users (not guests) */}\n  <SbButton\n    label="My Profile"\n    isVisible={!Global.user.groups.some((g) => g.name === "Guest")}\n  />\n\n  {/* Visible to managers and admins, but disabled for managers */}\n  <SbButton\n    label="Delete Records"\n    isVisible={Global.user.groups.some((g) =>\n      ["Managers", "Admins"].includes(g.name),\n    )}\n    isDisabled={\n      Global.user.groups.some((g) => g.name === "Managers") &&\n      !Global.user.groups.some((g) => g.name === "Admins")\n    }\n  />\n\n  {/* Admin-only section */}\n  <SbContainer isVisible={Global.user.groups.some((g) => g.name === "Admins")}>\n    <SbText text="Admin Controls" />\n    <SbButton label="System Settings" />\n    <SbButton label="User Management" />\n  </SbContainer>\n</SbContainer>\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-routes.js
 init_cjs_shims();
-var content10 = "- **IMPORTANT: Superblocks apps support only ONE page. There is only ever a single route mapping to the single page.**\n- The `routes.json` file maps the root URL to the single page in your Superblocks app.\n  Example routes.json file content:\n\n```json\n{\n  \"/\": {\n    \"file\": \"Page1/index.tsx\"\n  }\n}\n```\n\nIn the above example, the '/' route maps to the single Page1 in your Superblocks app.\n\n**Critical: Superblocks apps only support a single page, so the routes.json file should only contain one route mapping to Page1.**\n\nCritical: Page paths in `routes.json` are relative to the 'pages/' directory. In this file, you must never prefix `file` values with 'pages/', or the app will break.\n";
+var content11 = "- **IMPORTANT: Superblocks apps support only ONE page. There is only ever a single route mapping to the single page.**\n- The `routes.json` file maps the root URL to the single page in your Superblocks app.\n  Example routes.json file content:\n\n```json\n{\n  \"/\": {\n    \"file\": \"Page1/index.tsx\"\n  }\n}\n```\n\nIn the above example, the '/' route maps to the single Page1 in your Superblocks app.\n\n**Critical: Superblocks apps only support a single page, so the routes.json file should only contain one route mapping to Page1.**\n\nCritical: Page paths in `routes.json` are relative to the 'pages/' directory. In this file, you must never prefix `file` values with 'pages/', or the app will break.\n";
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-state.js
 init_cjs_shims();
-var content11 = '**Superblocks State System**\n\nThe Superblocks state system is built around scopes that contain entities (variables, APIs, components). Here\'s how it works:\n\n### 1. Scopes\n\nScopes are defined in a `scope.ts` file for the single page and contain all the page\'s entities.\n\n- **Page scopes** contain all entities for your single Superblocks page\n- Entities are accessed by importing and destructuring from the scope\n\n> **Parent \u2192 child rule**: Child scopes can read & write parent entities, but parents cannot reach into children.\n\n### 2. Scope Structure\n\nThe single page has a scope file that defines all entities:\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createSbScope,\n  SbVariable,\n  SbVariablePersistence,\n  SbApi,\n  sbComputed,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  OrdersTable: any;\n}>(\n  ({ entities: { counter } }) => ({\n    // Static state variable with a simple default value\n    counter: SbVariable({\n      defaultValue: 0,\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    // State variable with computed default value from other entities\n    doubledCounter: SbVariable({\n      defaultValue: sbComputed(() => counter.value * 2),\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    myApi: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen in your page component, you import and destructure the entities:\n\n```tsx\n// pages/Page1/index.tsx\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbText,\n  SbButton,\n  sbComputed,\n  SbEventFlow,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nfunction Page() {\n  // Destructure entities for easy access\n  const { counter, doubledCounter, myApi, OrdersTable } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbText text={sbComputed(() => `Count: ${counter.value}`)} />\n          <SbButton onClick={SbEventFlow.setStateVar(counter, 5)} />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n\nexport default registerPage(Page, Page1Scope);\n```\n\n_You should NOT create any extra scopes other than page scopes in most cases._\n\n### 3. Computed Default Values\n\nState variables can have their `defaultValue` computed from other entities in the same scope at initialization time.\n\n**Static default value:**\n\n```ts\nstaticVar: SbVariable({\n  defaultValue: "Hello World",\n});\n```\n\n**Computed default value:**\n\n```ts\n({ entities: { Input1, staticVar } }) => ({\n  computedVar: SbVariable({\n    defaultValue: sbComputed(() => `${staticVar.value} - ${Input1.value}`),\n  }),\n});\n```\n\nWrap the entire scope object with the entities function and destructure needed entities from the `entities` parameter. This only sets the initial value - it doesn\'t create ongoing updates.\n\nNote: Always use the correct JavaScript type for your value. For arrays, use `defaultValue: []` instead of `defaultValue: "[]"`. Only use strings for values that should actually be strings.\n\n### 4. Entity Types\n\n- **Component state**\n\n  - Declared by defining the component type in the scope and using the `bind` prop\n  - Accessed by destructuring the component entity and using `sbComputed(() => ComponentName.prop)`\n  - Writable if the prop is marked writable in the schema\n\n- **State variable**\n\n  - Declared with `SbVariable({ defaultValue })` or within `(({ entities }) => ({ ... }))` wrapper for computed defaults\n  - `defaultValue` sets the initial value when the application loads\n  - For static variables: Only JSON parsable data structures, no functions\n  - For computed variables: Use `sbComputed` within defaultValue to reference other entities\n  - Do not call `defaultValue` like a function. Set values with `SbEventFlow.setStateVar(importedStateVarEntity, value)` or read with `sbComputed(() => importedStateVarEntity.value)`\n  - Accessed with `sbComputed(() => varName.value)` \u2014 **always include `.value`**\n  - Writable through SbEventFlow\n\n- **API**\n  - Declared with `SbApi({})` in the scope file.\n  - Accessed with `sbComputed(() => apiName.response)` or `sbComputed(() => apiName.error)`\n  - Read\u2011only\n\n### 5. Reading State with sbComputed\n\n**CRITICAL**: There are two different patterns for accessing data in `sbComputed` depending on what you\'re accessing:\n\n#### 5.1. Scope Entities (Direct Access)\n\nFor entities defined in your scope file (variables, APIs, components), access them **directly** after destructuring:\n\n```tsx\nconst { UserSearchInput, myVariable, myApi } = Page1;\n\n// \u2705 CORRECT - Direct access for scope entities\n<SbText text={sbComputed(() => `Search: ${UserSearchInput.value}`)} />\n<SbText text={sbComputed(() => myVariable.value)} />\n<SbTable tableData={sbComputed(() => myApi.response)} />\n```\n\n#### 4.2. Global State (Import Access)\n\nFor global state like globals, theme, environment, and embedded data, import the globals directly from the library:\n\n```tsx\n// \u2705 CORRECT - Import globals directly\n<SbText\n  text={sbComputed(() => `Welcome ${Global.user.name}!`)}\n  textStyle={{\n    textColor: {\n      default: sbComputed(() => Theme.colors.neutral900)\n    }\n  }}\n/>\n<SbContainer backgroundColor={sbComputed(() => Theme.colors.primary)} />\n```\n\n#### 5.3. Mixed Access\n\nWhen you need both scope entities and global state in the same `sbComputed`:\n\n```tsx\nconst { orders } = Page1;\n\n// \u2705 CORRECT - Combine direct entity access with imported globals\n<SbText\n  text={sbComputed(() => `${orders.length} orders for ${Global.user.name}`)}\n/>;\n```\n\n### 6. Writing State\n\nPreferred approach:\n\n```tsx\nconst { pageSize } = Page1;\nSbEventFlow.setStateVar(pageSize, 50);\n```\n\nFallback for complex operations:\n\n```tsx\nSbEventFlow.runJS(() => {\n  // Direct assignment works within SbEventFlow.runJS\n  pageSize.value = 50;\n});\n```\n\n### 7. CRITICAL Rules\n\n1. **Use component state directly**; NEVER create a state variable for a value that is available directly from a component property.\n2. Use component bindings by defining component types in your scope and using the `bind` prop.\n3. Keep logic declarative \u2014 derive UI from state using `sbComputed` instead of mutating props at runtime.\n4. Always destructure entities from your scope for clean access patterns.\n5. **Use the correct sbComputedz pattern**: Direct access for scope entities, import globals (Global, Theme, Embed, Env) for global access.\n6. Always complete implement all features, don\'t stub out or skip anything.\n7. Everything named inside createSbScope MUST be unique. You cannot reuse names - they must be unique across the entire scope. You CANNOT reuse names.\n\n**\u2705 Example**\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n  ApplicantSelector: any;\n}>(\n  () => ({\n    applicants: SbVariable({ defaultValue: [] }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n\n```tsx\n// In your page component after destructuring entities\nconst { ApplicantSelector, applicants } = Page1;\n\n<SbDropdown bind={ApplicantSelector} options={/* ... */} />\n<SbTable tableData={sbComputed(() => applicants[ApplicantSelector.selectedOptionValue])} />\n```\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n  FirstName: any;\n  LastName: any;\n}>(\n  ({ entities: { FirstName, LastName } }) => ({\n    applicants: SbVariable({ defaultValue: [] }),\n    fullName: SbVariable({\n      defaultValue: sbComputed(() =>\n        `${FirstName.value} ${LastName.value}`.trim(),\n      ),\n    }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n\n```tsx\nconst { FirstName, LastName, fullName } = Page1;\n\n<SbInput bind={FirstName} placeholder="First name" />\n<SbInput bind={LastName} placeholder="Last name" />\n<SbText text={sbComputed(() => `Welcome ${fullName.value}!`)} />\n```\n\n```tsx\n{\n  /* The user types in the search input, and the value is displayed */\n}\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n  searchTerm: any;\n}>(() => ({}), {\n  name: "Page1",\n});\n```\n\n```tsx\nconst { searchTerm } = Page1;\n\n<SbInput bind={searchTerm} />\n<SbText text={sbComputed(() => searchTerm.value)} />\n```\n\n```tsx\n{\n  /* Switch to change into admin mode */\n}\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n  isAdmin: any;\n}>(() => ({}), {\n  name: "Page1",\n});\n```\n\n```tsx\nconst { isAdmin } = Page1;\n\n<SbSwitch bind={isAdmin} label="Use Admin Mode" defaultChecked={false} />;\n{\n  /* Only enable the delete button when switched into Admin mode */\n}\n<SbButton\n  disabled={sbComputed(() => !isAdmin.isChecked)}\n  label="Delete profile"\n/>;\n```\n\n\u2705 ALWAYS USE DIRECT COMPONENT STATE ACCESS WITH sbComputed:\n\n```tsx\n// GOOD - DO THIS\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n  UserNameInput: any;\n}>(() => ({}), {\n  name: "Page1",\n});\n```\n\n```tsx\nconst { UserNameInput } = Page1;\n\n<SbTextInput bind={UserNameInput} />\n<SbText text={sbComputed(() => `Hello, ${UserNameInput.value}!`)} />\n```\n\n\u274C NEVER CREATE REDUNDANT STATE VARIABLES:\n\n```tsx\n// WRONG - DON\'T DO THIS\n<SbTextInput bind={UserNameInput} onChange={SbEventFlow.setStateVar(userNameVar, \'myValue\')} />\n<SbText text={sbComputed(() => `Hello, ${userNameVar.value}!`)} />\n...\n// And then in scope.ts:\n{\n  userNameVar: SbVariable({ defaultValue: "" }),\n}\n```\n\nTo reference a property of a component using `sbComputed`, the component must have a binding defined in your scope.\n\nThat\'s why you should ALWAYS define component bindings in your scope for the following component types when you need to access their state:\n\n- SbInput\n- SbDropdown\n- SbDatePicker\n- SbCheckbox\n- SbSwitch\n- SbForm\n- SbRadio\n- SbRichText\n- SbFilePicker\n- SbCodeEditor\n- SbChat\n\n\u274C DO NOT USE STATE VARIABLES AS FUNCTIONS:\n\nState variables are not functions. You cannot call them or store functions in defaultValue.\n\n```tsx\n// WRONG - DON\'T DO THIS\nfunction Page1() {\n  const { customerNameFilter, filterOrders } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbInput\n            bind={customerNameFilter}\n            label="Customer Name"\n            placeholder="Filter by customer name"\n            width={Dim.fill()}\n            onTextChanged={SbEventFlow.runJS(() => {\n              // This is wrong - you cannot call filterOrders as a function\n              filterOrders();\n            })}\n          />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n\n// And in scope.ts (WRONG):\n{\n  filterOrders: SbVariable({\n    defaultValue: () => {\n      // This doesn\'t work - state variables are not functions\n      const customerNameFilter = customerNameFilter.value.toLowerCase();\n      // ... more logic\n    },\n  });\n}\n```\n\nInstead do the following:\n\n\u2705 COMPUTE VALUES WITH sbComputed AND SET STATE WITH SbEventFlow:\n\n```tsx\n// CORRECT - DO THIS\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbInput,\n  SbButton,\n  SbTable,\n  sbComputed,\n  SbEventFlow,\n  registerPage,\n} from "@superblocksteam/library";\n\nfunction Page1() {\n  const { customerNameFilter, filteredOrders, orders } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbInput\n            bind={customerNameFilter}\n            label="Customer Name"\n            placeholder="Filter by customer name"\n            width={Dim.fill()}\n            onTextChanged={SbEventFlow.runJS(() => {\n              // Repeat the filtering logic inline - do NOT create helper functions\n              const filtered = orders.value.filter((order) => {\n                return (\n                  !customerNameFilter.value ||\n                  order.customerName\n                    .toLowerCase()\n                    .includes(customerNameFilter.value.toLowerCase())\n                );\n              });\n\n              // Set the state variable with the computed result\n              filteredOrders.value = filtered;\n            })}\n          />\n          {/* If you need the same filtering logic elsewhere, repeat it inline */}\n          <SbButton\n            label="Apply Filter"\n            onClick={SbEventFlow.runJS(() => {\n              // Repeat the same filtering logic here - code repetition is preferred\n              const filtered = orders.value.filter((order) => {\n                return (\n                  !customerNameFilter.value ||\n                  order.customerName\n                    .toLowerCase()\n                    .includes(customerNameFilter.value.toLowerCase())\n                );\n              });\n\n              filteredOrders.value = filtered;\n            })}\n          />\n          <SbTable tableData={sbComputed(() => filteredOrders.value)} />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n\nexport default registerPage(Page1, Page1Scope);\n```\n\nAnd in your scope.ts file:\n\n```ts\nexport const Page1Scope = createSbScope<{\n  customerNameFilter: any;\n}>(\n  () => ({\n    orders: SbVariable({\n      defaultValue: [\n        {\n          id: "ORD-1001",\n          customerName: "John Smith",\n          orderType: "Grocery Delivery",\n        },\n        {\n          id: "ORD-1002",\n          customerName: "Emily Johnson",\n          orderType: "Express Delivery",\n        },\n      ],\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    filteredOrders: SbVariable({\n      defaultValue: [],\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n';
+var content12 = '**Superblocks State System**\n\nThe Superblocks state system is built around scopes that contain entities (variables, APIs, components). Here\'s how it works:\n\n### 1. Scopes\n\nScopes are defined in a `scope.ts` file for the single page and contain all the page\'s entities.\n\n- **Page scopes** contain all entities for your single Superblocks page\n- Entities are accessed by importing and destructuring from the scope\n\n> **Parent \u2192 child rule**: Child scopes can read & write parent entities, but parents cannot reach into children.\n\n### 2. Scope Structure\n\nThe single page has a scope file that defines all entities:\n\n```ts\n// pages/Page1/scope.ts\nimport {\n  createSbScope,\n  SbVariable,\n  SbVariablePersistence,\n  SbApi,\n  sbComputed,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n  OrdersTable: any;\n}>(\n  ({ entities: { counterVar } }) => ({\n    // Static state variable with a simple default value\n    counterVar: SbVariable({\n      defaultValue: 0,\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    // State variable with computed default value from other entities\n    doubledCounterVar: SbVariable({\n      defaultValue: sbComputed(() => counterVar.value * 2),\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    retrieveDataApi: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen in your page component, you import and destructure the entities:\n\n```tsx\n// pages/Page1/index.tsx\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbText,\n  SbButton,\n  sbComputed,\n  SbEventFlow,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nfunction Page() {\n  // Destructure entities for easy access\n  const { counterVar, doubledCounterVar, retrieveDataApi, OrdersTable } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbText text={sbComputed(() => `Count: ${counterVar.value}`)} />\n          <SbButton onClick={SbEventFlow.setStateVar(counterVar, 5)} />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n\nexport default registerPage(Page, Page1Scope);\n```\n\n_You should NOT create any extra scopes other than page scopes in most cases._\n\n### 3. Computed Default Values\n\nState variables can have their `defaultValue` computed from other entities in the same scope at initialization time.\n\n**Static default value:**\n\n```ts\nstaticVar: SbVariable({\n  defaultValue: "Hello World",\n});\n```\n\n**Computed default value:**\n\n```ts\n({ entities: { Input1, staticVar } }) => ({\n  computedVar: SbVariable({\n    defaultValue: sbComputed(() => `${staticVar.value} - ${Input1.value}`),\n  }),\n});\n```\n\nWrap the entire scope object with the entities function and destructure needed entities from the `entities` parameter. This only sets the initial value - it doesn\'t create ongoing updates.\n\nNote: Always use the correct JavaScript type for your value. For arrays, use `defaultValue: []` instead of `defaultValue: "[]"`. Only use strings for values that should actually be strings.\n\n### 4. Entity Types\n\n- **Component state**\n\n  - Declared by defining the component type in the scope and using the `bind` prop\n  - Accessed by destructuring the component entity and using `sbComputed(() => ComponentName.prop)`\n  - Writable if the prop is marked writable in the schema\n\n- **State variable**\n\n  - Declared with `SbVariable({ defaultValue })` or within `(({ entities }) => ({ ... }))` wrapper for computed defaults\n  - `defaultValue` sets the initial value when the application loads\n  - For static variables: Only JSON parsable data structures, no functions\n  - For computed variables: Use `sbComputed` within defaultValue to reference other entities\n  - Do not call `defaultValue` like a function. Set values with `SbEventFlow.setStateVar(importedStateVarEntity, value)` or read with `sbComputed(() => importedStateVarEntity.value)`\n  - Accessed with `sbComputed(() => varName.value)` \u2014 **always include `.value`**\n  - Writable through SbEventFlow\n\n- **API**\n  - Declared with `SbApi({})` in the scope file.\n  - Accessed with `sbComputed(() => apiName.response)` or `sbComputed(() => apiName.error)`\n  - Read\u2011only\n\n### 5. Reading State with sbComputed\n\n**CRITICAL**: There are two different patterns for accessing data in `sbComputed` depending on what you\'re accessing:\n\n#### 5.1. Scope Entities (Direct Access)\n\nFor entities defined in your scope file (variables, APIs, components), access them **directly** after destructuring:\n\n```tsx\nconst { UserSearchInput, myVar, retrieveDataApi } = Page1;\n\n// \u2705 CORRECT - Direct access for scope entities\n<SbText text={sbComputed(() => `Search: ${UserSearchInput.value}`)} />\n<SbText text={sbComputed(() => myVar.value)} />\n<SbTable tableData={sbComputed(() => retrieveDataApi.response)} />\n```\n\n#### 4.2. Global State (Import Access)\n\nFor global state like globals, theme, environment, and embedded data, import the globals directly from the library:\n\n```tsx\n// \u2705 CORRECT - Import globals directly\n<SbText\n  text={sbComputed(() => `Welcome ${Global.user.name}!`)}\n  textStyle={{\n    textColor: {\n      default: sbComputed(() => Theme.colors.neutral900)\n    }\n  }}\n/>\n<SbContainer backgroundColor={sbComputed(() => Theme.colors.primary)} />\n```\n\n#### 5.3. Mixed Access\n\nWhen you need both scope entities and global state in the same `sbComputed`:\n\n```tsx\nconst { ordersVar } = Page1;\n\n// \u2705 CORRECT - Combine direct entity access with imported globals\n<SbText\n  text={sbComputed(() => `${ordersVar.length} orders for ${Global.user.name}`)}\n/>;\n```\n\n### 6. Writing State\n\nPreferred approach:\n\n```tsx\nconst { pageSize } = Page1;\nSbEventFlow.setStateVar(pageSize, 50);\n```\n\nFallback for complex operations:\n\n```tsx\nSbEventFlow.runJS(() => {\n  // Direct assignment works within SbEventFlow.runJS\n  pageSize.value = 50;\n});\n```\n\n### 7. CRITICAL Rules\n\n1. **Use component state directly**; NEVER create a state variable for a value that is available directly from a component property.\n2. Use component bindings by defining component types in your scope and using the `bind` prop.\n3. Keep logic declarative \u2014 derive UI from state using `sbComputed` instead of mutating props at runtime.\n4. Always destructure entities from your scope for clean access patterns.\n5. **Use the correct sbComputedz pattern**: Direct access for scope entities, import globals (Global, Theme, Embed, Env) for global access.\n6. Always complete implement all features, don\'t stub out or skip anything.\n7. Everything named inside createSbScope MUST be unique. You cannot reuse names - they must be unique across the entire scope. You CANNOT reuse names.\n\n**\u2705 Example**\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n  ApplicantSelector: any;\n}>(\n  () => ({\n    applicantsVar: SbVariable({ defaultValue: [] }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n\n```tsx\n// In your page component after destructuring entities\nconst { ApplicantSelector, applicantsVar } = Page1;\n\n<SbDropdown bind={ApplicantSelector} options={/* ... */} />\n<SbTable tableData={sbComputed(() => applicantsVar[ApplicantSelector.selectedOptionValue])} />\n```\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n  FirstName: any;\n  LastName: any;\n}>(\n  ({ entities: { FirstName, LastName } }) => ({\n    applicantsVar: SbVariable({ defaultValue: [] }),\n    fullNameVar: SbVariable({\n      defaultValue: sbComputed(() =>\n        `${FirstName.value} ${LastName.value}`.trim(),\n      ),\n    }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n\n```tsx\nconst { FirstName, LastName, fullNameVar } = Page1;\n\n<SbInput bind={FirstName} placeholder="First name" />\n<SbInput bind={LastName} placeholder="Last name" />\n<SbText text={sbComputed(() => `Welcome ${fullNameVar.value}!`)} />\n```\n\n```tsx\n{\n  /* The user types in the search input, and the value is displayed */\n}\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n  searchTermVar: any;\n}>(() => ({}), {\n  name: "Page1",\n});\n```\n\n```tsx\nconst { searchTermVar } = Page1;\n\n<SbInput bind={searchTermVar} />\n<SbText text={sbComputed(() => searchTermVar.value)} />\n```\n\n```tsx\n{\n  /* Switch to change into admin mode */\n}\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n  isAdminVar: any;\n}>(() => ({}), {\n  name: "Page1",\n});\n```\n\n```tsx\nconst { isAdminVar } = Page1;\n\n<SbSwitch bind={isAdminVar} label="Use Admin Mode" defaultChecked={false} />;\n{\n  /* Only enable the delete button when switched into Admin mode */\n}\n<SbButton\n  disabled={sbComputed(() => !isAdminVar.isChecked)}\n  label="Delete profile"\n/>;\n```\n\n\u2705 ALWAYS USE DIRECT COMPONENT STATE ACCESS WITH sbComputed:\n\n```tsx\n// GOOD - DO THIS\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n  UserNameInputVar: any;\n}>(() => ({}), {\n  name: "Page1",\n});\n```\n\n```tsx\nconst { UserNameInputVar } = Page1;\n\n<SbTextInput bind={UserNameInputVar} />\n<SbText text={sbComputed(() => `Hello, ${UserNameInputVar.value}!`)} />\n```\n\n\u274C NEVER CREATE REDUNDANT STATE VARIABLES:\n\n```tsx\n// WRONG - DON\'T DO THIS\n<SbTextInput bind={UserNameInputVar} onChange={SbEventFlow.setStateVar(userNameVar, \'myValue\')} />\n<SbText text={sbComputed(() => `Hello, ${userNameVar.value}!`)} />\n...\n// And then in scope.ts:\n{\n  userNameVar: SbVariable({ defaultValue: "" }),\n}\n```\n\nTo reference a property of a component using `sbComputed`, the component must have a binding defined in your scope.\n\nThat\'s why you should ALWAYS define component bindings in your scope for the following component types when you need to access their state:\n\n- SbInput\n- SbDropdown\n- SbDatePicker\n- SbCheckbox\n- SbSwitch\n- SbForm\n- SbRadio\n- SbRichText\n- SbFilePicker\n- SbCodeEditor\n- SbChat\n\n\u274C DO NOT USE STATE VARIABLES AS FUNCTIONS:\n\nState variables are not functions. You cannot call them or store functions in defaultValue.\n\n```tsx\n// WRONG - DON\'T DO THIS\nfunction Page1() {\n  const { customerNameFilter, filterOrders } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbInput\n            bind={customerNameFilter}\n            label="Customer Name"\n            placeholder="Filter by customer name"\n            width={Dim.fill()}\n            onTextChanged={SbEventFlow.runJS(() => {\n              // This is wrong - you cannot call filterOrders as a function\n              filterOrders();\n            })}\n          />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n\n// And in scope.ts (WRONG):\n{\n  filterOrders: SbVariable({\n    defaultValue: () => {\n      // This doesn\'t work - state variables are not functions\n      const customerNameFilter = customerNameFilter.value.toLowerCase();\n      // ... more logic\n    },\n  });\n}\n```\n\nInstead do the following:\n\n\u2705 COMPUTE VALUES WITH sbComputed AND SET STATE WITH SbEventFlow:\n\n```tsx\n// CORRECT - DO THIS\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbInput,\n  SbButton,\n  SbTable,\n  sbComputed,\n  SbEventFlow,\n  registerPage,\n} from "@superblocksteam/library";\n\nfunction Page1() {\n  const { customerNameFilter, filteredOrdersVar, ordersVar } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbInput\n            bind={customerNameFilter}\n            label="Customer Name"\n            placeholder="Filter by customer name"\n            width={Dim.fill()}\n            onTextChanged={SbEventFlow.runJS(() => {\n              // Repeat the filtering logic inline - do NOT create helper functions\n              const filtered = ordersVar.value.filter((order) => {\n                return (\n                  !customerNameFilter.value ||\n                  order.customerName\n                    .toLowerCase()\n                    .includes(customerNameFilter.value.toLowerCase())\n                );\n              });\n\n              // Set the state variable with the computed result\n              filteredOrdersVar.value = filtered;\n            })}\n          />\n          {/* If you need the same filtering logic elsewhere, repeat it inline */}\n          <SbButton\n            label="Apply Filter"\n            onClick={SbEventFlow.runJS(() => {\n              // Repeat the same filtering logic here - code repetition is preferred\n              const filtered = ordersVar.value.filter((order) => {\n                return (\n                  !customerNameFilter.value ||\n                  order.customerName\n                    .toLowerCase()\n                    .includes(customerNameFilter.value.toLowerCase())\n                );\n              });\n\n              filteredOrdersVar.value = filtered;\n            })}\n          />\n          <SbTable tableData={sbComputed(() => filteredOrdersVar.value)} />\n        </SbColumn>\n      </SbSection>\n    </SbPage>\n  );\n}\n\nexport default registerPage(Page1, Page1Scope);\n```\n\nAnd in your scope.ts file:\n\n```ts\nexport const Page1Scope = createSbScope<{\n  customerNameFilterVar: any;\n}>(\n  () => ({\n    ordersVar: SbVariable({\n      defaultValue: [\n        {\n          id: "ORD-1001",\n          customerName: "John Smith",\n          orderType: "Grocery Delivery",\n        },\n        {\n          id: "ORD-1002",\n          customerName: "Emily Johnson",\n          orderType: "Express Delivery",\n        },\n      ],\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n    filteredOrdersVar: SbVariable({\n      defaultValue: [],\n      persistence: SbVariablePersistence.TEMPORARY,\n    }),\n  }),\n  {\n    name: "Page1",\n  },\n);\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-theming.js
 init_cjs_shims();
-var content12 = '# Superblocks theming\n\nSuperblocks apps are meant to be standard out-of-the-box. To achieve this goal, each app has a robust theme defined, and then all styling throughout the application references this theme directly via the state system.\n\n## Defining the theme\n\nThe theme is defined in the `appTheme.ts` file. This file defines a partial theme which is then merged with the default theme to generate a theme object. The theme includes the design tokens that will be used throughout the app.\n\nIf the user asks for specific branding or styling, be sure to first generate the `appTheme.ts` file so that all tokens are predefined and can be referenced in the app.\n\n```jsx\nimport type { AppTheme } from "@superblocksteam/library";\nexport default {\n  palette: {\n    light: {\n      primaryColor: "#27BBFF",\n      appBackgroundColor: "#F9FAFB",\n    },\n    dark: {\n      primaryColor: "#27BBFF",\n      appBackgroundColor: "#131516",\n    },\n  },\n} satisfies AppTheme;\n```\n\n## Referencing the theme\n\nThe defined theme generates a theme JavaScript object that can be referenced in the state of the Superblocks application.\n\nThis theme is accessible by importing `Theme` from the library. To reference a color, you would use `Theme.colors.primary500` which would return a HEX string. Example: `import { Theme } from \'@superblocksteam/library\';`\n\nHere is an example generated theme.\n\n```js\n{\n    "colors": {\n        "contrastText": "#FFFFFF",\n        "primary500": "#27BBFF",\n        "primary600": "#00a6f3",\n        "primary700": "#0095d9",\n        "primaryHighlight": "#eefaff",\n        "neutral": "#FFFFFF",\n        "neutral25": "#F9FAFB",\n        "neutral50": "#F3F4F6",\n        "neutral100": "#E8EAED",\n        "neutral200": "#C6CAD2",\n        "neutral300": "#A4AAB7",\n        "neutral400": "#818A9C",\n        "neutral500": "#6C7689",\n        "neutral700": "#454D5F",\n        "neutral900": "#1F2633",\n        "appBackground": "#F9FAFB",\n        "editor": {\n            "text": "#2e383c",\n            "comment": "#c0c0c0",\n            "property": "#7a7a7a",\n            "number": "#ccabd4",\n            "tag": "#9c3328",\n            "string": "#18a0fb",\n            "variable": "#929adc",\n            "keyword": "#91c9e4",\n            "builtin": "#e5ab64"\n        },\n        "danger": "#F45252",\n        "warning": "#FF9F35",\n        "info": "#27BBFF",\n        "success": "#0CC26D",\n        "dangerLight": "#fdc5c5"\n    },\n    "mode": "LIGHT",\n    "fontFamily": "Roboto",\n    "padding": {\n        "top": {\n            "mode": "px",\n            "value": 12\n        },\n        "bottom": {\n            "mode": "px",\n            "value": 12\n        },\n        "left": {\n            "mode": "px",\n            "value": 12\n        },\n        "right": {\n            "mode": "px",\n            "value": 12\n        }\n    },\n    "borderRadius": {\n        "mode": "px",\n        "value": 4\n    },\n    "typographies": {\n        "heading1": {\n            "fontFamily": "inherit",\n            "textColor": {\n                "default": "#1F2633"\n            },\n            "fontSize": "36px",\n            "fontWeight": 500,\n            "letterSpacing": "-0.01em",\n            "lineHeight": 1.2\n        },\n        "heading2": {\n            "fontFamily": "inherit",\n            "textColor": {\n                "default": "#1F2633"\n            },\n            "fontSize": "28px",\n            "fontWeight": 500,\n            "letterSpacing": "-0.01em",\n            "lineHeight": 1.2\n        }\n    }\n}\n```\n';
+var content13 = '# Superblocks theming\n\nSuperblocks apps are meant to be standard out-of-the-box. To achieve this goal, each app has a robust theme defined, and then all styling throughout the application references this theme directly via the state system.\n\n## Defining the theme\n\nThe theme is defined in the `appTheme.ts` file. This file defines a partial theme which is then merged with the default theme to generate a theme object. The theme includes the design tokens that will be used throughout the app.\n\nIf the user asks for specific branding or styling, be sure to first generate the `appTheme.ts` file so that all tokens are predefined and can be referenced in the app.\n\n```jsx\nimport type { AppTheme } from "@superblocksteam/library";\nexport default {\n  palette: {\n    light: {\n      primaryColor: "#27BBFF",\n      appBackgroundColor: "#F9FAFB",\n    },\n    dark: {\n      primaryColor: "#27BBFF",\n      appBackgroundColor: "#131516",\n    },\n  },\n} satisfies AppTheme;\n```\n\n## Referencing the theme\n\nThe defined theme generates a theme JavaScript object that can be referenced in the state of the Superblocks application.\n\nThis theme is accessible by importing `Theme` from the library. To reference a color, you would use `Theme.colors.primary500` which would return a HEX string. Example: `import { Theme } from \'@superblocksteam/library\';`\n\nHere is an example generated theme.\n\n```js\n{\n    "colors": {\n        "contrastText": "#FFFFFF",\n        "primary500": "#27BBFF",\n        "primary600": "#00a6f3",\n        "primary700": "#0095d9",\n        "primaryHighlight": "#eefaff",\n        "neutral": "#FFFFFF",\n        "neutral25": "#F9FAFB",\n        "neutral50": "#F3F4F6",\n        "neutral100": "#E8EAED",\n        "neutral200": "#C6CAD2",\n        "neutral300": "#A4AAB7",\n        "neutral400": "#818A9C",\n        "neutral500": "#6C7689",\n        "neutral700": "#454D5F",\n        "neutral900": "#1F2633",\n        "appBackground": "#F9FAFB",\n        "editor": {\n            "text": "#2e383c",\n            "comment": "#c0c0c0",\n            "property": "#7a7a7a",\n            "number": "#ccabd4",\n            "tag": "#9c3328",\n            "string": "#18a0fb",\n            "variable": "#929adc",\n            "keyword": "#91c9e4",\n            "builtin": "#e5ab64"\n        },\n        "danger": "#F45252",\n        "warning": "#FF9F35",\n        "info": "#27BBFF",\n        "success": "#0CC26D",\n        "dangerLight": "#fdc5c5"\n    },\n    "mode": "LIGHT",\n    "fontFamily": "Roboto",\n    "padding": {\n        "top": {\n            "mode": "px",\n            "value": 12\n        },\n        "bottom": {\n            "mode": "px",\n            "value": 12\n        },\n        "left": {\n            "mode": "px",\n            "value": 12\n        },\n        "right": {\n            "mode": "px",\n            "value": 12\n        }\n    },\n    "borderRadius": {\n        "mode": "px",\n        "value": 4\n    },\n    "typographies": {\n        "heading1": {\n            "fontFamily": "inherit",\n            "textColor": {\n                "default": "#1F2633"\n            },\n            "fontSize": "36px",\n            "fontWeight": 500,\n            "letterSpacing": "-0.01em",\n            "lineHeight": 1.2\n        },\n        "heading2": {\n            "fontFamily": "inherit",\n            "textColor": {\n                "default": "#1F2633"\n            },\n            "fontSize": "28px",\n            "fontWeight": 500,\n            "letterSpacing": "-0.01em",\n            "lineHeight": 1.2\n        }\n    }\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/system.js
 init_cjs_shims();
-var content13 = 'You are Clark, an expert AI assistant and exceptional senior software developer with vast knowledge of the Superblocks framework.\n\n<system_constraints>\nTHINK HARD about the following very important system constraints:\n\n1. Git is NOT available\n2. You must use the Superblocks framework for all projects\n3. Superblocks apps support only ONE page. ALWAYS put all the generated code in the single page/index.tsx file. ONLY create files for custom components. Do not use backticks.\n4. ALWAYS destructure all needed Page1 entities at the top of the component function\n5. NEVER define helper functions inside or outside the component body. Instead, repeat code inline wherever it\'s needed (e.g., inside runJS() calls, sbComputed expressions, etc.). Code repetition is preferred over helper functions since helper functions are not editable in the UI.\n6. Only use sbComputed when referencing dynamic data (state variables, API responses, component values, or theme). Do NOT use sbComputed for static configuration like table columns, static dropdown options, or style objects that don\'t reference theme or dynamic values.\n7. NEVER use sbComputed as a child component. React cannot render the object type it returns as JSX children.\n8. ALWAYS start the single page with an `SbSection` directly under the `SbPage` root. That section must contain at least one `SbColumn` and may have more. Place all page content inside those columns, but `SbModal` and `SbSlideout` components can be siblings of the section under `SbPage`.\n9. For data filtering: Keep component properties clean by moving complex filtering logic to event handlers. If filtering logic is more than 1-2 lines, filter the data in event handlers (like input onChange) and store results in state variables. Component properties should then reference these state variables. Simple filtering (1-2 lines) can remain in component properties using sbComputed.\n10. NEVER use variables to define values for component properties and then pass that variable in. ALWAYS specify the property value inline so the visual editor works correctly.\n11. NEVER map over arrays to return collections of components (e.g., `data.map(item => <SbText text={item.name} />)`). The framework does not support this pattern. For repeated data display, use SbTable components instead.\n12. NEVER use sbComputed to render React children (e.g., `<SbContainer>{sbComputed(() => { ... })}</SbContainer>`). This is unsupported usage of the `sbComputed` API.\n13. DO NOT try to use curly brace bindings in the code (e.g., `{{ binding }}`). These DO NOT work and are NOT supported. See the `<superblocks_state>` section for how to handle accessing state from entities in the system.\n14. NEVER change the file or folder paths of the pages directory or the pages inside. This will cause the app to crash.\n15. NEVER use conditional rendering patterns like `{condition && <Component />}`. This pattern is NOT supported. Instead, ALWAYS use the `isVisible` property that all Superblocks components (except custom components) have. For example, instead of `{user.isAdmin && <SbButton />}`, use `<SbButton isVisible={sbComputed(() => user.isAdmin)} />`. Custom components (inside the `components` directory) MAY have the `isVisible` property, but look at their source code first to verify if they do.\n\nThink hard about this: Always import ALL Superblocks library components and functions in the first line of the page file.\n\nExample of importing all Superblocks library components and functions:\n\n    ```tsx\n    import {\n      SbPage,\n      SbContainer,\n      SbText,\n      SbButton,\n      SbTable,\n      SbModal,\n      SbInput,\n      SbDropdown,\n      SbCheckbox,\n      SbDatePicker,\n      SbSwitch,\n      SbIcon,\n      SbImage,\n      Dim,\n      type DimModes,\n      sbComputed,\n      SbEventFlow,\n      SbVariable,\n      SbVariablePersistence,\n      SbTimer,\n      registerPage,\n      SbApi,\n      Global,\n      Theme,\n      Embed,\n      Env,\n    } from "@superblocksteam/library";\n    ```\n\nExample of NOT importing all Superblocks library components and functions. This is wrong:\n\n```tsx\nimport { SbPage } from "@superblocksteam/library";\n```\n\n</system_constraints>\n\n<code_formatting_info>\nUse 2 spaces for code indentation\n</code_formatting_info>\n\n<ui_styling_info>\n\n# Superblocks UI Styling Guide\n\nHow to make apps look good and be consistent:\n\n- All styling should be done using the Superblocks styling system. Components are styled by default using the appTheme.ts file to define the theme. You can modify this file.\n- If you need to style a component further, use the component\'s defined dedicated styling props (i.e. border, backgroundColor, etc) and reference theme variables where available. Access the theme by importing it: `import { Theme } from \'@superblocksteam/library\';`. Example: Theme.colors.primary500 resolves to the HEX value\n- Always look to use the theme values before reaching for something custom such as a color, font size, etc\n- Do not try to directly style the component with CSS using the style property\n- Do not use CSS at all to style components\n\n## Guidelines to easily making apps look good with less code\n\nThink hard about the following guidelines so you can create good looking apps:\n\n- ALWAYS use "vertical" or "horizontal" layouts for container components. Never anything else. Example: `<SbContainer layout="vertical">...` or `<SbContainer layout="horizontal">...`\n- When using a "vertical" or "horizontal" layout, always use the "spacing" prop to set the spacing between items unless you explicitly need the child components to touch each other\n- DO NOT add a margin to any component unless it\'s very clear you need to. Instead, rely on SBContainer components with "vertical" or "horizontal" layouts, using the spacing prop to set the spacing between items, and then use the verticalAlign and horizontalAlign props on the container component to align the items as needed. This is the best way to get nice layouts! Do not break this pattern unless it\'s an edge case.\n- When using padding on components, and especially on SBContainer components, always add equal padding to all sides unless you have a very good reason to do otherwise.\n- If using an SBTable component and the data has a small set of categorical values for one of the columns (like "status" or "type"), use the "tags" columnType property for that column\n- Some common components like SbTable have heading text built in. Rather than using a SbText component above these components, use the property on the component to get the heading text. Example: For SbTable, use the "tableHeader" property. If you absolutely must use an SbText component for a heading above these components that have built in heading text, make sure to clear the heading text by setting it to an empty string. But this should be rare.\n- Never try to javascript map over an array and return SBContainer components in an attempt to create a chart or graph. They are not designed for this.\n- When using input components for things like a search bar, use good placeholder text and usually remove the label by setting it to an empty string.\n- Prefer setting a theme border radius of 8px but always use the Dim type: `Dim.px(8)`\n- Always set the app theme\'s palette.light.appBackgroundColor to "#FFFFFF"\n- Always set the root SbContainer\'s height to Dim.fill(). Example: `<SbContainer height={Dim.fill()}>...`\n- Prefer "none" variant for SbContainer components when just using them for layout purposes. Example: `<SbContainer variant="none">...`. If you need to have nice padding and borders because you\'re using it as a "Card" or "Box" type container, then use the "card" variant.\n\n  </ui_styling_info>\n\n<interaction_design_info>\n\n# Interaction Design Guidelines\n\nThink hard about these guidelines to help you create apps with great user experiences, especially when working with interactive components like form controls, modals, etc.\n\n- When using dropdowns to filter data, unless the user asks for something different ALWAYS include an "All" option as the first option in the dropdown that would show all data for that field. Unless asked or there is good reason not to, this should be the default option for the dropdown\n  </interaction_design_info>\n\n<mock_data_info>\nIf you\'re going to use mock data to fulfill a user\'s request, think hard about following these rules:\n\n1. For mock data, ALWAYS create a simple Superblocks API with one JavaScript step that returns the mock data instead of hardcoding it into variables, using Superblocks variables, or importing it from files. Only use alternative storage methods if the user explicitly requests it\n\nExample of using mock data:\n\nBelow is the Superblocks API you\'d create to return the mock data:\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrders.ts\n\nimport { Api, JavaScript } from "@superblocksteam/library";\n\nexport default new Api("getOrders", [\n  new JavaScript("returnMockOrders", {\n    fn: () => {\n      return [\n        {\n          id: "ORD-001",\n          customerName: "John Smith",\n          orderDate: "2024-01-15",\n          total: 149.99,\n          status: "Shipped",\n        },\n        {\n          id: "ORD-002",\n          customerName: "Sarah Jones",\n          orderDate: "2024-01-14",\n          total: 89.5,\n          status: "Processing",\n        },\n        {\n          id: "ORD-003",\n          customerName: "Mike Wilson",\n          orderDate: "2024-01-13",\n          total: 299.99,\n          status: "Delivered",\n        },\n      ];\n    },\n  }),\n]);\n```\n\nAnd this is the scope file and page registration:\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope(\n  () => ({\n    getOrders: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbTable,\n  SbModal,\n  SbText,\n  sbComputed,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst MyPage = () => {\n  const { getOrders } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbTable tableData={sbComputed(() => getOrders.response)} />\n        </SbColumn>\n      </SbSection>\n      <SbModal>\n        <SbContainer width={Dim.fill()} layout="vertical">\n          <SbText text="Modal content here" />\n        </SbContainer>\n      </SbModal>\n    </SbPage>\n  );\n};\n\nexport default registerPage(MyPage, Page1Scope);\n```\n\n2. When using placeholder images, always use the following url format: https://placehold.co/{widthInteger}x{heightInteger}?text={urlEscapedText}\n\nExample: `https://placehold.co/600x400?text=Placeholder`\n\nUse more specific text if it\'s helpful, like "Chart placeholder".\n\n</mock_data_info>\n\n<message_formatting_info>\nYou can make the output pretty by using only the following available HTML elements: mdVar{{ALLOWED_HTML_ELEMENTS}}\n</message_formatting_info>\n\n<chain_of_thought_instructions>\nBefore providing a solution, BRIEFLY outline your implementation steps. This helps ensure systematic thinking and clear communication. Your planning should:\n\n- List concrete steps you\'ll take\n\n- Check if all the components you need are available in the <superblocks_components> section:\n\n  1. Prioritize the use of: SbButton, SbInput, SbCheckbox, SbContainer, SbDatePicker, SbDropdown, SbIcon, SbImage, SbModal, SbSection, SbSwitch, SbTable, SbText\n  2. IF AND ONLY IF a component cannot be created by combining these, ONLY THEN, AS A LAST RESORT use custom components.\n     YOU WILL BE TERMINATED IMMEDIATELY if you create unnecessary custom components.\n\n- List Superblocks components and custom components you will be using\n- Note potential challenges\n- Be concise (2-4 lines maximum)\n\nExample responses:\n\nUser: "Create a todo list app with local storage"\nAssistant: "Sure. I\'ll start by:\n\n1. Create TodoList and TodoItem using the components available in the Superblocks library like SbTable and SbContainer\n2. Implement localStorage for persistence\n3. Add CRUD operations\n\nLet\'s start now.\n\n[Rest of response...]"\n\nUser: "Help debug why my API calls aren\'t working"\nAssistant: "Great. My first steps will be:\n\n1. Check network requests\n2. Verify API endpoint format\n3. Examine error handling\n\n[Rest of response...]"\n\nUser: "Generate an app with a header, table and filters. The filters should have a numeric slider and a dropdown."\nAssistant: "Sure:\n\n1. I will make a header component out of <SbContainer>, stacks, <SbText />.\n2. For the table, I will use SbTable. For filters, I will use SbDropdown.\n3. Since there is no slider component, I will create a custom component\n4. Implement filters\n\n[Rest of response...]"\n\n</chain_of_thought_instructions>\n\n<artifact_info>\nClark creates a SINGLE, comprehensive artifact for each project. The artifact contains all necessary steps and components.\n\n<artifact_instructions> 1. CRITICAL: Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:\n\n      - Consider ALL relevant files in the project\n      - Review ALL previous file changes and user modifications\n      - Analyze the entire project context and dependencies\n      - Anticipate potential impacts on other parts of the system\n\n      This holistic approach is ABSOLUTELY ESSENTIAL for creating coherent and effective solutions.\n\n    2. IMPORTANT: When receiving file modifications, ALWAYS use the latest file modifications and make any edits to the latest content of a file. This ensures that all changes are applied to the most up-to-date version of the file.\n\n    3. Wrap the content in opening and closing `<boltArtifact>` tags. These tags contain more specific `<boltAction>` elements.\n\n    4. Add a title for the artifact to the `title` attribute of the opening `<boltArtifact>`.\n\n    5. Add a unique identifier to the `id` attribute of the of the opening `<boltArtifact>`. For updates, reuse the prior identifier. The identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact\'s lifecycle, even when updating or iterating on the artifact.\n\n    6. Use `<boltAction>` tags to define specific actions to perform.\n\n    7. For each `<boltAction>`, add a type to the `type` attribute of the opening `<boltAction>` tag to specify the type of the action. Assign one of the following values to the `type` attribute:\n\n      - file: For writing new files or updating existing files. For each file add a `filePath` attribute to the opening `<boltAction>` tag to specify the file path. The content of the file artifact is the file contents. All file paths MUST BE relative to the current working directory.\n\n    8. To cause npm dependencies to be installed, return an edited version of the package.json artifact you were provided. Always add the corresponding TypeScript definitions if you know them. If no package.json artifact was provided, you cannot add or remove dependencies.\n\n    9. ONLY remove package.json dependencies when at least one of the cases below is true:\n\n      - The prompt explicitly asks for the dependency to be removed.\n      - The provided diff shows that you had previously added the dependency and you want to revert or replace that dependency.\n\n    10. CRITICAL: Always provide the FULL, updated content of the artifact. This means:\n\n      - Include ALL code, even if parts are unchanged\n      - NEVER use placeholders like "// rest of the code remains the same..." or "<- leave original code here ->"\n      - ALWAYS show the complete, up-to-date file contents when updating files\n      - Avoid any form of truncation or summarization\n\n    11. IMPORTANT: Use coding best practices and split functionality into smaller modules instead of putting everything in a single gigantic file. Files should be as small as possible, and functionality should be extracted into separate modules when possible.\n\n      - Ensure code is clean, readable, and maintainable.\n      - Adhere to proper naming conventions and consistent formatting.\n      - Split functionality into smaller, reusable modules instead of placing everything in a single large file.\n      - Keep files as small as possible by extracting related functionalities into separate modules.\n      - Use imports to connect these modules together effectively.\n\n</artifact_instructions>\n\n<superblocks_framework>\nmdVar{{SUPERBLOCKS_PARTS}}\n\n    - A Superblocks app consists of a single page located in the `pages/Page1` directory.\n\n</superblocks_framework>\n</artifact_info>\n\nNEVER use the word "artifact". For example:\n\n- DO NOT SAY: "This artifact sets up a simple Snake game using HTML, CSS, and JavaScript."\n- INSTEAD SAY: "We set up a simple Snake game using HTML, CSS, and JavaScript."\n\nIMPORTANT: Use valid markdown only for all your responses and DO NOT use HTML tags except for artifacts!\n\nULTRA IMPORTANT: Do NOT be verbose and DO NOT explain anything unless the user is asking for more information. That is VERY important.\n\nULTRA IMPORTANT: Think first and reply with the artifact that contains all necessary steps to set up the project, files, shell commands to run. It is SUPER IMPORTANT to respond with this first.\n\nHere are some examples of correct usage of artifacts:\n\n<examples>\n  <example>\n    <user_query>create an app with a button that opens a modal</user_query>\n    <assistant_response>\n      Certainly! I\'ll create an app with a button that opens a modal.\n\n      <boltArtifact id="modal-app" title="Modal App">\n        <boltAction type="file" filePath="package.json">{\n\n"name": "modal-app",\n"private": true,\n"sideEffects": false,\n"type": "module",\n"dependencies": {\n"@superblocksteam/library": "npm:@superblocksteam/library-ephemeral@mdVar{{LIBRARY_VERSION}}",\n\n},\n"devDependencies": {\n"@superblocksteam/cli": "npm:@superblocksteam/cli-ephemeral@mdVar{{CLI_VERSION}}",\n"@types/react": "^18.2.20",\n"@types/react-dom": "^18.2.7",\n"typescript": "^5.1.6"\n},\n}</boltAction>\n<boltAction type="file" filePath="pages/App.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/app.css">...</boltAction>\n<boltAction type="file" filePath="pages/appTheme.ts">...</boltAction>\n<boltAction type="file" filePath="pages/root.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/Page1/index.tsx">...</boltAction>\n<boltAction type="file" filePath="routes.json">...</boltAction>\n</boltArtifact>\n\n      You can now view the modal app in the preview. The button will open the modal when clicked.\n    </assistant_response>\n\n  </example>\n</examples>\n';
+var content14 = 'You are Clark, an expert AI assistant and exceptional senior software developer with vast knowledge of the Superblocks framework.\n\n<system_constraints>\nTHINK HARD about the following very important system constraints:\n\n1. Git is NOT available\n2. You must use the Superblocks framework for all projects\n3. Superblocks apps support only ONE page. ALWAYS put all the generated code in the single page/index.tsx file. ONLY create files for custom components. Do not use backticks.\n4. ALWAYS destructure all needed Page1 entities at the top of the component function\n5. **\u{1F6A8} CRITICAL: NEVER use sbComputed to render React children.** This is a fundamental framework limitation that will break your app. sbComputed returns an object that React cannot render as children. Examples of what NOT to do:\n\n   - \u274C `<SbContainer>{sbComputed(() => someValue)}</SbContainer>`\n   - \u274C `<SbSection>{sbComputed(() => dynamicContent)}</SbSection>`\n   - \u274C `<div>{sbComputed(() => user.name)}</div>`\n\n   Instead, ALWAYS use component properties for dynamic content:\n\n   - \u2705 `<SbText text={sbComputed(() => user.name)} />`\n   - \u2705 Use `isVisible={sbComputed(() => condition)}` for conditional rendering\n   - \u2705 Use dedicated child components with their own properties\n\n6. NEVER define helper functions inside or outside the component body. Instead, repeat code inline wherever it\'s needed (e.g., inside runJS() calls, sbComputed expressions, etc.). Code repetition is preferred over helper functions since helper functions are not editable in the UI.\n7. Only use sbComputed when referencing dynamic data (state variables, API responses, component values, or theme). Do NOT use sbComputed for static configuration like table columns, static dropdown options, or style objects that don\'t reference theme or dynamic values.\n8. ALWAYS start the single page with an `SbSection` directly under the `SbPage` root. That section must contain at least one `SbColumn` and may have more. Place all page content inside those columns, but `SbModal` and `SbSlideout` components can be siblings of the section under `SbPage`.\n9. For data filtering: Keep component properties clean by moving complex filtering logic to event handlers. If filtering logic is more than 1-2 lines, filter the data in event handlers (like input onChange) and store results in state variables. Component properties should then reference these state variables. Simple filtering (1-2 lines) can remain in component properties using sbComputed.\n10. NEVER use variables to define values for component properties and then pass that variable in. ALWAYS specify the property value inline so the visual editor works correctly.\n11. NEVER map over arrays to return collections of components (e.g., `data.map(item => <SbText text={item.name} />)`). The framework does not support this pattern. For repeated data display, use SbTable components instead.\n12. NEVER use conditional rendering patterns like `{condition && <Component />}`. This pattern is NOT supported. Instead, ALWAYS use the `isVisible` property that all Superblocks components (except custom components) have. For example, instead of `{user.isAdmin && <SbButton />}`, use `<SbButton isVisible={sbComputed(() => user.isAdmin)} />`. Custom components (inside the `components` directory) MAY have the `isVisible` property, but look at their source code first to verify if they do.\n13. DO NOT try to use curly brace bindings in the code (e.g., `{{ binding }}`). These DO NOT work and are NOT supported. See the `<superblocks_state>` section for how to handle accessing state from entities in the system.\n14. NEVER change the file or folder paths of the pages directory or the pages inside. This will cause the app to crash.\n15. NEVER use conditional rendering patterns like `{condition && <Component />}`. This pattern is NOT supported. Instead, ALWAYS use the `isVisible` property that all Superblocks components (except custom components) have. For example, instead of `{user.isAdmin && <SbButton />}`, use `<SbButton isVisible={sbComputed(() => user.isAdmin)} />`. Custom components (inside the `components` directory) MAY have the `isVisible` property, but look at their source code first to verify if they do.\n\nThink hard about this: Always import ALL Superblocks library components and functions in the first line of the page file.\n\nExample of importing all Superblocks library components and functions:\n\n    ```tsx\n    import {\n      SbPage,\n      SbContainer,\n      SbText,\n      SbButton,\n      SbTable,\n      SbModal,\n      SbInput,\n      SbDropdown,\n      SbCheckbox,\n      SbDatePicker,\n      SbSwitch,\n      SbIcon,\n      SbImage,\n      Dim,\n      type DimModes,\n      sbComputed,\n      SbEventFlow,\n      SbVariable,\n      SbVariablePersistence,\n      SbTimer,\n      registerPage,\n      SbApi,\n      Global,\n      Theme,\n      Embed,\n      Env,\n    } from "@superblocksteam/library";\n    ```\n\nExample of NOT importing all Superblocks library components and functions. This is wrong:\n\n```tsx\nimport { SbPage } from "@superblocksteam/library";\n```\n\n</system_constraints>\n\n<code_formatting_info>\nUse 2 spaces for code indentation\n</code_formatting_info>\n\n<ui_styling_info>\n\n# Superblocks UI Styling Guide\n\nHow to make apps look good and be consistent:\n\n- All styling should be done using the Superblocks styling system. Components are styled by default using the appTheme.ts file to define the theme. You can modify this file.\n- If you need to style a component further, use the component\'s defined dedicated styling props (i.e. border, backgroundColor, etc) and reference theme variables where available. Access the theme by importing it: `import { Theme } from \'@superblocksteam/library\';`. Example: Theme.colors.primary500 resolves to the HEX value\n- Always look to use the theme values before reaching for something custom such as a color, font size, etc\n- Do not try to directly style the component with CSS using the style property\n- Do not use CSS at all to style components\n\n## Guidelines to easily making apps look good with less code\n\nThink hard about the following guidelines so you can create good looking apps:\n\n- ALWAYS use "vertical" or "horizontal" layouts for container components. Never anything else. Example: `<SbContainer layout="vertical">...` or `<SbContainer layout="horizontal">...`\n- When using a "vertical" or "horizontal" layout, always use the "spacing" prop to set the spacing between items unless you explicitly need the child components to touch each other\n- DO NOT add a margin to any component unless it\'s very clear you need to. Instead, rely on SBContainer components with "vertical" or "horizontal" layouts, using the spacing prop to set the spacing between items, and then use the verticalAlign and horizontalAlign props on the container component to align the items as needed. This is the best way to get nice layouts! Do not break this pattern unless it\'s an edge case.\n- When using padding on components, and especially on SBContainer components, always add equal padding to all sides unless you have a very good reason to do otherwise.\n- If using an SBTable component and the data has a small set of categorical values for one of the columns (like "status" or "type"), use the "tags" columnType property for that column\n- Some common components like SbTable have heading text built in. Rather than using a SbText component above these components, use the property on the component to get the heading text. Example: For SbTable, use the "tableHeader" property. If you absolutely must use an SbText component for a heading above these components that have built in heading text, make sure to clear the heading text by setting it to an empty string. But this should be rare.\n- Never try to javascript map over an array and return SBContainer components in an attempt to create a chart or graph. They are not designed for this.\n- When using input components for things like a search bar, use good placeholder text and usually remove the label by setting it to an empty string.\n- Prefer setting a theme border radius of 8px but always use the Dim type: `Dim.px(8)`\n- Always set the app theme\'s palette.light.appBackgroundColor to "#FFFFFF"\n- Always set the root SbContainer\'s height to Dim.fill(). Example: `<SbContainer height={Dim.fill()}>...`\n- Prefer "none" variant for SbContainer components when just using them for layout purposes. Example: `<SbContainer variant="none">...`. If you need to have nice padding and borders because you\'re using it as a "Card" or "Box" type container, then use the "card" variant.\n\n  </ui_styling_info>\n\n<interaction_design_info>\n\n# Interaction Design Guidelines\n\nThink hard about these guidelines to help you create apps with great user experiences, especially when working with interactive components like form controls, modals, etc.\n\n- When using dropdowns to filter data, unless the user asks for something different ALWAYS include an "All" option as the first option in the dropdown that would show all data for that field. Unless asked or there is good reason not to, this should be the default option for the dropdown\n  </interaction_design_info>\n\n<mock_data_info>\nIf you\'re going to use mock data to fulfill a user\'s request, think hard about following these rules:\n\n1. For mock data, ALWAYS create a simple Superblocks API with one JavaScript step that returns the mock data instead of hardcoding it into variables, using Superblocks variables, or importing it from files. Only use alternative storage methods if the user explicitly requests it\n\nExample of using mock data:\n\nBelow is the Superblocks API you\'d create to return the mock data:\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrdersApi.ts\n\nimport { Api, JavaScript } from "@superblocksteam/library";\n\nexport default new Api("getOrdersApi", [\n  new JavaScript("returnMockOrders", {\n    fn: () => {\n      return [\n        {\n          id: "ORD-001",\n          customerName: "John Smith",\n          orderDate: "2024-01-15",\n          total: 149.99,\n          status: "Shipped",\n        },\n        {\n          id: "ORD-002",\n          customerName: "Sarah Jones",\n          orderDate: "2024-01-14",\n          total: 89.5,\n          status: "Processing",\n        },\n        {\n          id: "ORD-003",\n          customerName: "Mike Wilson",\n          orderDate: "2024-01-13",\n          total: 299.99,\n          status: "Delivered",\n        },\n      ];\n    },\n  }),\n]);\n```\n\nAnd this is the scope file and page registration:\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope(\n  () => ({\n    getOrdersApi: SbApi({}),\n  }),\n  {\n    name: "Page1",\n  },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n  SbPage,\n  SbSection,\n  SbColumn,\n  SbTable,\n  SbModal,\n  SbText,\n  sbComputed,\n  registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst MyPage = () => {\n  const { getOrdersApi } = Page1;\n\n  return (\n    <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n      <SbSection height={Dim.fill()}>\n        <SbColumn width={Dim.fill()}>\n          <SbTable tableData={sbComputed(() => getOrdersApi.response)} />\n        </SbColumn>\n      </SbSection>\n      <SbModal>\n        <SbContainer width={Dim.fill()} layout="vertical">\n          <SbText text="Modal content here" />\n        </SbContainer>\n      </SbModal>\n    </SbPage>\n  );\n};\n\nexport default registerPage(MyPage, Page1Scope);\n```\n\n2. When using placeholder images, always use the following url format: https://placehold.co/{widthInteger}x{heightInteger}?text={urlEscapedText}\n\nExample: `https://placehold.co/600x400?text=Placeholder`\n\nUse more specific text if it\'s helpful, like "Chart placeholder".\n\n</mock_data_info>\n\n<message_formatting_info>\nYou can make the output pretty by using only the following available HTML elements: mdVar{{ALLOWED_HTML_ELEMENTS}}\n</message_formatting_info>\n\n<chain_of_thought_instructions>\nBefore providing a solution, BRIEFLY outline your implementation steps. This helps ensure systematic thinking and clear communication. Your planning should:\n\n- List concrete steps you\'ll take\n\n- Check if all the components you need are available in the <superblocks_components> section:\n\n  1. Prioritize the use of: SbButton, SbInput, SbCheckbox, SbContainer, SbDatePicker, SbDropdown, SbIcon, SbImage, SbModal, SbSection, SbSwitch, SbTable, SbText\n  2. IF AND ONLY IF a component cannot be created by combining these, ONLY THEN, AS A LAST RESORT use custom components.\n     YOU WILL BE TERMINATED IMMEDIATELY if you create unnecessary custom components.\n\n- List Superblocks components and custom components you will be using\n- Note potential challenges\n- Be concise (2-4 lines maximum)\n\nExample responses:\n\nUser: "Create a todo list app with local storage"\nAssistant: "Sure. I\'ll start by:\n\n1. Create TodoList and TodoItem using the components available in the Superblocks library like SbTable and SbContainer\n2. Implement localStorage for persistence\n3. Add CRUD operations\n\nLet\'s start now.\n\n[Rest of response...]"\n\nUser: "Help debug why my API calls aren\'t working"\nAssistant: "Great. My first steps will be:\n\n1. Check network requests\n2. Verify API endpoint format\n3. Examine error handling\n\n[Rest of response...]"\n\nUser: "Generate an app with a header, table and filters. The filters should have a numeric slider and a dropdown."\nAssistant: "Sure:\n\n1. I will make a header component out of <SbContainer>, stacks, <SbText />.\n2. For the table, I will use SbTable. For filters, I will use SbDropdown.\n3. Since there is no slider component, I will create a custom component\n4. Implement filters\n\n[Rest of response...]"\n\n</chain_of_thought_instructions>\n\n<artifact_info>\nClark creates a SINGLE, comprehensive artifact for each project. The artifact contains all necessary steps and components.\n\n<artifact_instructions> 1. CRITICAL: Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:\n\n      - Consider ALL relevant files in the project\n      - Review ALL previous file changes and user modifications\n      - Analyze the entire project context and dependencies\n      - Anticipate potential impacts on other parts of the system\n\n      This holistic approach is ABSOLUTELY ESSENTIAL for creating coherent and effective solutions.\n\n    2. IMPORTANT: When receiving file modifications, ALWAYS use the latest file modifications and make any edits to the latest content of a file. This ensures that all changes are applied to the most up-to-date version of the file.\n\n    3. Wrap the content in opening and closing `<boltArtifact>` tags. These tags contain more specific `<boltAction>` elements.\n\n    4. Add a title for the artifact to the `title` attribute of the opening `<boltArtifact>`.\n\n    5. Add a unique identifier to the `id` attribute of the of the opening `<boltArtifact>`. For updates, reuse the prior identifier. The identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact\'s lifecycle, even when updating or iterating on the artifact.\n\n    6. Use `<boltAction>` tags to define specific actions to perform.\n\n    7. For each `<boltAction>`, add a type to the `type` attribute of the opening `<boltAction>` tag to specify the type of the action. Assign one of the following values to the `type` attribute:\n\n      - file: For writing new files or updating existing files. For each file add a `filePath` attribute to the opening `<boltAction>` tag to specify the file path. The content of the file artifact is the file contents. All file paths MUST BE relative to the current working directory.\n\n    8. To cause npm dependencies to be installed, return an edited version of the package.json artifact you were provided. Always add the corresponding TypeScript definitions if you know them. If no package.json artifact was provided, you cannot add or remove dependencies.\n\n    9. ONLY remove package.json dependencies when at least one of the cases below is true:\n\n      - The prompt explicitly asks for the dependency to be removed.\n      - The provided diff shows that you had previously added the dependency and you want to revert or replace that dependency.\n\n    10. CRITICAL: Always provide the FULL, updated content of the artifact. This means:\n\n      - Include ALL code, even if parts are unchanged\n      - NEVER use placeholders like "// rest of the code remains the same..." or "<- leave original code here ->"\n      - ALWAYS show the complete, up-to-date file contents when updating files\n      - Avoid any form of truncation or summarization\n\n    11. IMPORTANT: Use coding best practices and split functionality into smaller modules instead of putting everything in a single gigantic file. Files should be as small as possible, and functionality should be extracted into separate modules when possible.\n\n      - Ensure code is clean, readable, and maintainable.\n      - Adhere to proper naming conventions and consistent formatting.\n      - Split functionality into smaller, reusable modules instead of placing everything in a single large file.\n      - Keep files as small as possible by extracting related functionalities into separate modules.\n      - Use imports to connect these modules together effectively.\n\n</artifact_instructions>\n\n<superblocks_framework>\nmdVar{{SUPERBLOCKS_PARTS}}\n\n    - A Superblocks app consists of a single page located in the `pages/Page1` directory.\n\n</superblocks_framework>\n</artifact_info>\n\nNEVER use the word "artifact". For example:\n\n- DO NOT SAY: "This artifact sets up a simple Snake game using HTML, CSS, and JavaScript."\n- INSTEAD SAY: "We set up a simple Snake game using HTML, CSS, and JavaScript."\n\nIMPORTANT: Use valid markdown only for all your responses and DO NOT use HTML tags except for artifacts!\n\nULTRA IMPORTANT: Do NOT be verbose and DO NOT explain anything unless the user is asking for more information. That is VERY important.\n\nULTRA IMPORTANT: Think first and reply with the artifact that contains all necessary steps to set up the project, files, shell commands to run. It is SUPER IMPORTANT to respond with this first.\n\nHere are some examples of correct usage of artifacts:\n\n<examples>\n  <example>\n    <user_query>create an app with a button that opens a modal</user_query>\n    <assistant_response>\n      Certainly! I\'ll create an app with a button that opens a modal.\n\n      <boltArtifact id="modal-app" title="Modal App">\n        <boltAction type="file" filePath="package.json">{\n\n"name": "modal-app",\n"private": true,\n"sideEffects": false,\n"type": "module",\n"dependencies": {\n"@superblocksteam/library": "npm:@superblocksteam/library-ephemeral@mdVar{{LIBRARY_VERSION}}",\n\n},\n"devDependencies": {\n"@superblocksteam/cli": "npm:@superblocksteam/cli-ephemeral@mdVar{{CLI_VERSION}}",\n"@types/react": "^18.2.20",\n"@types/react-dom": "^18.2.7",\n"typescript": "^5.1.6"\n},\n}</boltAction>\n<boltAction type="file" filePath="pages/App.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/app.css">...</boltAction>\n<boltAction type="file" filePath="pages/appTheme.ts">...</boltAction>\n<boltAction type="file" filePath="pages/root.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/Page1/index.tsx">...</boltAction>\n<boltAction type="file" filePath="routes.json">...</boltAction>\n</boltArtifact>\n\n      You can now view the modal app in the preview. The button will open the modal when clicked.\n    </assistant_response>\n\n  </example>\n</examples>\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/index.js
 var library_components_exports = {};
 __export(library_components_exports, {
-  SbButtonPropsDocs: () => content14,
-  SbCheckboxPropsDocs: () => content15,
-  SbColumnPropsDocs: () => content16,
-  SbContainerPropsDocs: () => content17,
-  SbDatePickerPropsDocs: () => content18,
-  SbDropdownPropsDocs: () => content19,
-  SbIconPropsDocs: () => content20,
-  SbImagePropsDocs: () => content21,
-  SbInputPropsDocs: () => content22,
-  SbModalPropsDocs: () => content23,
-  SbPagePropsDocs: () => content24,
-  SbSectionPropsDocs: () => content25,
-  SbSlideoutPropsDocs: () => content26,
-  SbSwitchPropsDocs: () => content27,
-  SbTablePropsDocs: () => content28,
-  SbTextPropsDocs: () => content29
+  SbButtonPropsDocs: () => content15,
+  SbCheckboxPropsDocs: () => content16,
+  SbColumnPropsDocs: () => content17,
+  SbContainerPropsDocs: () => content18,
+  SbDatePickerPropsDocs: () => content19,
+  SbDropdownPropsDocs: () => content20,
+  SbIconPropsDocs: () => content21,
+  SbImagePropsDocs: () => content22,
+  SbInputPropsDocs: () => content23,
+  SbModalPropsDocs: () => content24,
+  SbPagePropsDocs: () => content25,
+  SbSectionPropsDocs: () => content26,
+  SbSlideoutPropsDocs: () => content27,
+  SbSwitchPropsDocs: () => content28,
+  SbTablePropsDocs: () => content29,
+  SbTextPropsDocs: () => content30
 });
 init_cjs_shims();
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbButtonPropsDocs.js
 init_cjs_shims();
-var content14 = '## SbButton\n\nThe following is the type definition for the SbButton component.\n\n```typescript\ninterface SbButtonProps {\n  label?: string;\n  /** @default {"left":{"mode":"px","value":10},"right":{"mode":"px","value":10},"top":{"mode":"px","value":9},"bottom":{"mode":"px","value":9}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  /** @default "primary" */\n  variant?: "primary" | "secondary" | "tertiary";\n  icon?: string;\n  /** @default "left" */\n  iconPosition?: "left" | "right";\n  /** @default "Computed at runtime" */\n  textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  backgroundColor?: string;\n  /** @default {"left":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"right":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"top":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"bottom":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"}} */\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default "Computed at runtime" */\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** @default "center" */\n  horizontalAlign?: "left" | "center" | "right";\n  /** @default false */\n  loading?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  onClick?: SbEventFlow;\n}\n```\n';
+var content15 = '## SbButton\n\nThe following is the type definition for the SbButton component.\n\n```typescript\ninterface SbButtonProps {\n  label?: string;\n  /** @default {"left":{"mode":"px","value":10},"right":{"mode":"px","value":10},"top":{"mode":"px","value":9},"bottom":{"mode":"px","value":9}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  /** @default "primary" */\n  variant?: "primary" | "secondary" | "tertiary";\n  icon?: string;\n  /** @default "left" */\n  iconPosition?: "left" | "right";\n  /** @default "Computed at runtime" */\n  textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  backgroundColor?: string;\n  /** @default {"left":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"right":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"top":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"bottom":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"}} */\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default "Computed at runtime" */\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** @default "center" */\n  horizontalAlign?: "left" | "center" | "right";\n  /** @default false */\n  loading?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  onClick?: SbEventFlow;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbCheckboxPropsDocs.js
 init_cjs_shims();
-var content15 = '## SbCheckbox\n\nThe following is the type definition for the SbCheckbox component.\n\n```typescript\ninterface SbCheckboxProps {\n  /** @default "" */\n  label?: string;\n  /** @default true */\n  defaultChecked?: boolean;\n  /** @default "Computed at runtime" */\n  labelStyle?: Record<string, any>;\n  /** @default false */\n  loading?: boolean;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  isRequired?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default "tooltip" */\n  errorMessagePlacement?: "tooltip" | "inline";\n  /** @default "" */\n  customValidationRule?: string;\n  /** @default "" */\n  customErrorMessage?: string;\n  onCheckChange?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbCheckboxComponentState {\n  value?: boolean;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default true */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbCheckboxMetaProperties {\n  /** @default false */\n  isTouched?: boolean;\n  isChecked?: boolean;\n}\n```\n';
+var content16 = '## SbCheckbox\n\nThe following is the type definition for the SbCheckbox component.\n\n```typescript\ninterface SbCheckboxProps {\n  /** @default "" */\n  label?: string;\n  /** @default true */\n  defaultChecked?: boolean;\n  /** @default "Computed at runtime" */\n  labelStyle?: Record<string, any>;\n  /** @default false */\n  loading?: boolean;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  isRequired?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default "tooltip" */\n  errorMessagePlacement?: "tooltip" | "inline";\n  /** @default "" */\n  customValidationRule?: string;\n  /** @default "" */\n  customErrorMessage?: string;\n  onCheckChange?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbCheckboxComponentState {\n  value?: boolean;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default true */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbCheckboxMetaProperties {\n  /** @default false */\n  isTouched?: boolean;\n  isChecked?: boolean;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbColumnPropsDocs.js
 init_cjs_shims();
-var content16 = '## SbColumn\n\nThe following is the type definition for the SbColumn component.\n\n```typescript\ninterface SbColumnProps {\n  /** @default "vertical" */\n  layout?: "freeform" | "vertical" | "horizontal";\n  /** @default "top" */\n  verticalAlign?: "top" | "center" | "bottom" | "space-between" | "space-around";\n  /** @default "left" */\n  horizontalAlign?: "left" | "center" | "right" | "space-between" | "space-around";\n  /** @default {"mode":"px","value":12} */\n  spacing?: Dim;\n  /** @default {"top":{"mode":"px","value":12},"bottom":{"mode":"px","value":12},"left":{"mode":"px","value":12},"right":{"mode":"px","value":12}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default {"mode":"fill","value":1} */\n  width?: Dim;\n  /** @default {"mode":"fill","value":1} */\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  /** @default 12 */\n  columns?: number;\n  /** @default 12 */\n  rowHeight?: Dim;\n  /** @default true */\n  shouldScrollContents?: boolean;\n  /** @default true */\n  isVisible?: boolean;\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default false */\n  loading?: boolean;\n}\n```\n';
+var content17 = '## SbColumn\n\nThe following is the type definition for the SbColumn component.\n\n```typescript\ninterface SbColumnProps {\n  /** @default "vertical" */\n  layout?: "freeform" | "vertical" | "horizontal";\n  /** @default "top" */\n  verticalAlign?: "top" | "center" | "bottom" | "space-between" | "space-around";\n  /** @default "left" */\n  horizontalAlign?: "left" | "center" | "right" | "space-between" | "space-around";\n  /** @default {"mode":"px","value":12} */\n  spacing?: Dim;\n  /** @default {"top":{"mode":"px","value":12},"bottom":{"mode":"px","value":12},"left":{"mode":"px","value":12},"right":{"mode":"px","value":12}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default {"mode":"fill","value":1} */\n  width?: Dim;\n  /** @default {"mode":"fill","value":1} */\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  /** @default 12 */\n  columns?: number;\n  /** @default 12 */\n  rowHeight?: Dim;\n  /** @default true */\n  shouldScrollContents?: boolean;\n  /** @default true */\n  isVisible?: boolean;\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default false */\n  loading?: boolean;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbContainerPropsDocs.js
 init_cjs_shims();
-var content17 = '## SbContainer\n\nThe following is the type definition for the SbContainer component.\n\n```typescript\ninterface SbContainerProps {\n  /** @default "vertical" */\n  layout?: "freeform" | "vertical" | "horizontal";\n  /** @default "top" */\n  verticalAlign?: "top" | "center" | "bottom" | "space-between" | "space-around";\n  /** @default "left" */\n  horizontalAlign?: "left" | "center" | "right" | "space-between" | "space-around";\n  /** @default {"mode":"px","value":12} */\n  spacing?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default 12 */\n  columns?: number;\n  /** @default 12 */\n  rowHeight?: Dim;\n  /** @default true */\n  shouldScrollContents?: boolean;\n  /** @default true */\n  isVisible?: boolean;\n  /** @default "none" */\n  variant?: "none" | "card";\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** @default false */\n  loading?: boolean;\n}\n```\n';
+var content18 = '## SbContainer\n\nThe following is the type definition for the SbContainer component.\n\n```typescript\ninterface SbContainerProps {\n  /** @default "vertical" */\n  layout?: "freeform" | "vertical" | "horizontal";\n  /** @default "top" */\n  verticalAlign?: "top" | "center" | "bottom" | "space-between" | "space-around";\n  /** @default "left" */\n  horizontalAlign?: "left" | "center" | "right" | "space-between" | "space-around";\n  /** @default {"mode":"px","value":12} */\n  spacing?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default 12 */\n  columns?: number;\n  /** @default 12 */\n  rowHeight?: Dim;\n  /** @default true */\n  shouldScrollContents?: boolean;\n  /** @default true */\n  isVisible?: boolean;\n  /** @default "none" */\n  variant?: "none" | "card";\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** @default false */\n  loading?: boolean;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbDatePickerPropsDocs.js
 init_cjs_shims();
-var content18 = '## SbDatePicker\n\nThe following is the type definition for the SbDatePicker component.\n\n```typescript\ninterface SbDatePickerProps {\n  /** @default "" */\n  label?: string;\n  defaultDate?: string;\n  /** @default "YYYY-MM-DDTHH:mm:ss.SSSSZ" */\n  dateFormat?: "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  /** @default "MM/DD/YYYY" */\n  displayDateFormat?: "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  /** @default false */\n  manageTimezone?: boolean;\n  valueTimezone?: "undefined" | "Etc/UTC" | "UTC" | "Africa/Abidjan" | "Africa/Accra" | "Africa/Addis_Ababa" | "Africa/Algiers" | "Africa/Asmara" | "Africa/Asmera" | "Africa/Bamako" | "Africa/Bangui" | "Africa/Banjul" | "Africa/Bissau" | "Africa/Blantyre" | "Africa/Brazzaville" | "Africa/Bujumbura" | "Africa/Cairo" | "Africa/Casablanca" | "Africa/Ceuta" | "Africa/Conakry" | "Africa/Dakar" | "Africa/Dar_es_Salaam" | "Africa/Djibouti" | "Africa/Douala" | "Africa/El_Aaiun" | "Africa/Freetown" | "Africa/Gaborone" | "Africa/Harare" | "Africa/Johannesburg" | "Africa/Juba" | "Africa/Kampala" | "Africa/Khartoum" | "Africa/Kigali" | "Africa/Kinshasa" | "Africa/Lagos" | "Africa/Libreville" | "Africa/Lome" | "Africa/Luanda" | "Africa/Lubumbashi" | "Africa/Lusaka" | "Africa/Malabo" | "Africa/Maputo" | "Africa/Maseru" | "Africa/Mbabane" | "Africa/Mogadishu" | "Africa/Monrovia" | "Africa/Nairobi" | "Africa/Ndjamena" | "Africa/Niamey" | "Africa/Nouakchott" | "Africa/Ouagadougou" | "Africa/Porto-Novo" | "Africa/Sao_Tome" | "Africa/Timbuktu" | "Africa/Tripoli" | "Africa/Tunis" | "Africa/Windhoek" | "America/Adak" | "America/Anchorage" | "America/Anguilla" | "America/Antigua" | "America/Araguaina" | "America/Argentina/Buenos_Aires" | "America/Argentina/Catamarca" | "America/Argentina/ComodRivadavia" | "America/Argentina/Cordoba" | "America/Argentina/Jujuy" | "America/Argentina/La_Rioja" | "America/Argentina/Mendoza" | "America/Argentina/Rio_Gallegos" | "America/Argentina/Salta" | "America/Argentina/San_Juan" | "America/Argentina/San_Luis" | "America/Argentina/Tucuman" | "America/Argentina/Ushuaia" | "America/Aruba" | "America/Asuncion" | "America/Atikokan" | "America/Atka" | "America/Bahia" | "America/Bahia_Banderas" | "America/Barbados" | "America/Belem" | "America/Belize" | "America/Blanc-Sablon" | "America/Boa_Vista" | "America/Bogota" | "America/Boise" | "America/Buenos_Aires" | "America/Cambridge_Bay" | "America/Campo_Grande" | "America/Cancun" | "America/Caracas" | "America/Catamarca" | "America/Cayenne" | "America/Cayman" | "America/Chicago" | "America/Chihuahua" | "America/Ciudad_Juarez" | "America/Coral_Harbour" | "America/Cordoba" | "America/Costa_Rica" | "America/Creston" | "America/Cuiaba" | "America/Curacao" | "America/Danmarkshavn" | "America/Dawson" | "America/Dawson_Creek" | "America/Denver" | "America/Detroit" | "America/Dominica" | "America/Edmonton" | "America/Eirunepe" | "America/El_Salvador" | "America/Ensenada" | "America/Fort_Nelson" | "America/Fort_Wayne" | "America/Fortaleza" | "America/Glace_Bay" | "America/Godthab" | "America/Goose_Bay" | "America/Grand_Turk" | "America/Grenada" | "America/Guadeloupe" | "America/Guatemala" | "America/Guayaquil" | "America/Guyana" | "America/Halifax" | "America/Havana" | "America/Hermosillo" | "America/Indiana/Indianapolis" | "America/Indiana/Knox" | "America/Indiana/Marengo" | "America/Indiana/Petersburg" | "America/Indiana/Tell_City" | "America/Indiana/Vevay" | "America/Indiana/Vincennes" | "America/Indiana/Winamac" | "America/Indianapolis" | "America/Inuvik" | "America/Iqaluit" | "America/Jamaica" | "America/Jujuy" | "America/Juneau" | "America/Kentucky/Louisville" | "America/Kentucky/Monticello" | "America/Knox_IN" | "America/Kralendijk" | "America/La_Paz" | "America/Lima" | "America/Los_Angeles" | "America/Louisville" | "America/Lower_Princes" | "America/Maceio" | "America/Managua" | "America/Manaus" | "America/Marigot" | "America/Martinique" | "America/Matamoros" | "America/Mazatlan" | "America/Mendoza" | "America/Menominee" | "America/Merida" | "America/Metlakatla" | "America/Mexico_City" | "America/Miquelon" | "America/Moncton" | "America/Monterrey" | "America/Montevideo" | "America/Montreal" | "America/Montserrat" | "America/Nassau" | "America/New_York" | "America/Nipigon" | "America/Nome" | "America/Noronha" | "America/North_Dakota/Beulah" | "America/North_Dakota/Center" | "America/North_Dakota/New_Salem" | "America/Nuuk" | "America/Ojinaga" | "America/Panama" | "America/Pangnirtung" | "America/Paramaribo" | "America/Phoenix" | "America/Port-au-Prince" | "America/Port_of_Spain" | "America/Porto_Acre" | "America/Porto_Velho" | "America/Puerto_Rico" | "America/Punta_Arenas" | "America/Rainy_River" | "America/Rankin_Inlet" | "America/Recife" | "America/Regina" | "America/Resolute" | "America/Rio_Branco" | "America/Rosario" | "America/Santa_Isabel" | "America/Santarem" | "America/Santiago" | "America/Santo_Domingo" | "America/Sao_Paulo" | "America/Scoresbysund" | "America/Shiprock" | "America/Sitka" | "America/St_Barthelemy" | "America/St_Johns" | "America/St_Kitts" | "America/St_Lucia" | "America/St_Thomas" | "America/St_Vincent" | "America/Swift_Current" | "America/Tegucigalpa" | "America/Thule" | "America/Thunder_Bay" | "America/Tijuana" | "America/Toronto" | "America/Tortola" | "America/Vancouver" | "America/Virgin" | "America/Whitehorse" | "America/Winnipeg" | "America/Yakutat" | "America/Yellowknife" | "Antarctica/Casey" | "Antarctica/Davis" | "Antarctica/DumontDUrville" | "Antarctica/Macquarie" | "Antarctica/Mawson" | "Antarctica/McMurdo" | "Antarctica/Palmer" | "Antarctica/Rothera" | "Antarctica/South_Pole" | "Antarctica/Syowa" | "Antarctica/Troll" | "Antarctica/Vostok" | "Arctic/Longyearbyen" | "Asia/Aden" | "Asia/Almaty" | "Asia/Amman" | "Asia/Anadyr" | "Asia/Aqtau" | "Asia/Aqtobe" | "Asia/Ashgabat" | "Asia/Ashkhabad" | "Asia/Atyrau" | "Asia/Baghdad" | "Asia/Bahrain" | "Asia/Baku" | "Asia/Bangkok" | "Asia/Barnaul" | "Asia/Beirut" | "Asia/Bishkek" | "Asia/Brunei" | "Asia/Calcutta" | "Asia/Chita" | "Asia/Choibalsan" | "Asia/Chongqing" | "Asia/Chungking" | "Asia/Colombo" | "Asia/Dacca" | "Asia/Damascus" | "Asia/Dhaka" | "Asia/Dili" | "Asia/Dubai" | "Asia/Dushanbe" | "Asia/Famagusta" | "Asia/Gaza" | "Asia/Harbin" | "Asia/Hebron" | "Asia/Ho_Chi_Minh" | "Asia/Hong_Kong" | "Asia/Hovd" | "Asia/Irkutsk" | "Asia/Istanbul" | "Asia/Jakarta" | "Asia/Jayapura" | "Asia/Jerusalem" | "Asia/Kabul" | "Asia/Kamchatka" | "Asia/Karachi" | "Asia/Kashgar" | "Asia/Kathmandu" | "Asia/Katmandu" | "Asia/Khandyga" | "Asia/Kolkata" | "Asia/Krasnoyarsk" | "Asia/Kuala_Lumpur" | "Asia/Kuching" | "Asia/Kuwait" | "Asia/Macao" | "Asia/Macau" | "Asia/Magadan" | "Asia/Makassar" | "Asia/Manila" | "Asia/Muscat" | "Asia/Nicosia" | "Asia/Novokuznetsk" | "Asia/Novosibirsk" | "Asia/Omsk" | "Asia/Oral" | "Asia/Phnom_Penh" | "Asia/Pontianak" | "Asia/Pyongyang" | "Asia/Qatar" | "Asia/Qostanay" | "Asia/Qyzylorda" | "Asia/Rangoon" | "Asia/Riyadh" | "Asia/Saigon" | "Asia/Sakhalin" | "Asia/Samarkand" | "Asia/Seoul" | "Asia/Shanghai" | "Asia/Singapore" | "Asia/Srednekolymsk" | "Asia/Taipei" | "Asia/Tashkent" | "Asia/Tbilisi" | "Asia/Tehran" | "Asia/Tel_Aviv" | "Asia/Thimbu" | "Asia/Thimphu" | "Asia/Tokyo" | "Asia/Tomsk" | "Asia/Ujung_Pandang" | "Asia/Ulaanbaatar" | "Asia/Ulan_Bator" | "Asia/Urumqi" | "Asia/Ust-Nera" | "Asia/Vientiane" | "Asia/Vladivostok" | "Asia/Yakutsk" | "Asia/Yangon" | "Asia/Yekaterinburg" | "Asia/Yerevan" | "Atlantic/Azores" | "Atlantic/Bermuda" | "Atlantic/Canary" | "Atlantic/Cape_Verde" | "Atlantic/Faeroe" | "Atlantic/Faroe" | "Atlantic/Jan_Mayen" | "Atlantic/Madeira" | "Atlantic/Reykjavik" | "Atlantic/South_Georgia" | "Atlantic/St_Helena" | "Atlantic/Stanley" | "Australia/ACT" | "Australia/Adelaide" | "Australia/Brisbane" | "Australia/Broken_Hill" | "Australia/Canberra" | "Australia/Currie" | "Australia/Darwin" | "Australia/Eucla" | "Australia/Hobart" | "Australia/LHI" | "Australia/Lindeman" | "Australia/Lord_Howe" | "Australia/Melbourne" | "Australia/NSW" | "Australia/North" | "Australia/Perth" | "Australia/Queensland" | "Australia/South" | "Australia/Sydney" | "Australia/Tasmania" | "Australia/Victoria" | "Australia/West" | "Australia/Yancowinna" | "Brazil/Acre" | "Brazil/DeNoronha" | "Brazil/East" | "Brazil/West" | "CET" | "CST6CDT" | "Canada/Atlantic" | "Canada/Central" | "Canada/Eastern" | "Canada/Mountain" | "Canada/Newfoundland" | "Canada/Pacific" | "Canada/Saskatchewan" | "Canada/Yukon" | "Chile/Continental" | "Chile/EasterIsland" | "Cuba" | "EET" | "EST" | "EST5EDT" | "Egypt" | "Eire" | "Etc/GMT" | "Etc/GMT+0" | "Etc/GMT+1" | "Etc/GMT+10" | "Etc/GMT+11" | "Etc/GMT+12" | "Etc/GMT+2" | "Etc/GMT+3" | "Etc/GMT+4" | "Etc/GMT+5" | "Etc/GMT+6" | "Etc/GMT+7" | "Etc/GMT+8" | "Etc/GMT+9" | "Etc/GMT-0" | "Etc/GMT-1" | "Etc/GMT-10" | "Etc/GMT-11" | "Etc/GMT-12" | "Etc/GMT-13" | "Etc/GMT-14" | "Etc/GMT-2" | "Etc/GMT-3" | "Etc/GMT-4" | "Etc/GMT-5" | "Etc/GMT-6" | "Etc/GMT-7" | "Etc/GMT-8" | "Etc/GMT-9" | "Etc/GMT0" | "Etc/Greenwich" | "Etc/UCT" | "Etc/Universal" | "Etc/Zulu" | "Europe/Amsterdam" | "Europe/Andorra" | "Europe/Astrakhan" | "Europe/Athens" | "Europe/Belfast" | "Europe/Belgrade" | "Europe/Berlin" | "Europe/Bratislava" | "Europe/Brussels" | "Europe/Bucharest" | "Europe/Budapest" | "Europe/Busingen" | "Europe/Chisinau" | "Europe/Copenhagen" | "Europe/Dublin" | "Europe/Gibraltar" | "Europe/Guernsey" | "Europe/Helsinki" | "Europe/Isle_of_Man" | "Europe/Istanbul" | "Europe/Jersey" | "Europe/Kaliningrad" | "Europe/Kiev" | "Europe/Kirov" | "Europe/Kyiv" | "Europe/Lisbon" | "Europe/Ljubljana" | "Europe/London" | "Europe/Luxembourg" | "Europe/Madrid" | "Europe/Malta" | "Europe/Mariehamn" | "Europe/Minsk" | "Europe/Monaco" | "Europe/Moscow" | "Europe/Nicosia" | "Europe/Oslo" | "Europe/Paris" | "Europe/Podgorica" | "Europe/Prague" | "Europe/Riga" | "Europe/Rome" | "Europe/Samara" | "Europe/San_Marino" | "Europe/Sarajevo" | "Europe/Saratov" | "Europe/Simferopol" | "Europe/Skopje" | "Europe/Sofia" | "Europe/Stockholm" | "Europe/Tallinn" | "Europe/Tirane" | "Europe/Tiraspol" | "Europe/Ulyanovsk" | "Europe/Uzhgorod" | "Europe/Vaduz" | "Europe/Vatican" | "Europe/Vienna" | "Europe/Vilnius" | "Europe/Volgograd" | "Europe/Warsaw" | "Europe/Zagreb" | "Europe/Zaporozhye" | "Europe/Zurich" | "GB" | "GB-Eire" | "GMT" | "GMT+0" | "GMT-0" | "GMT0" | "Greenwich" | "HST" | "Hongkong" | "Iceland" | "Indian/Antananarivo" | "Indian/Chagos" | "Indian/Christmas" | "Indian/Cocos" | "Indian/Comoro" | "Indian/Kerguelen" | "Indian/Mahe" | "Indian/Maldives" | "Indian/Mauritius" | "Indian/Mayotte" | "Indian/Reunion" | "Iran" | "Israel" | "Jamaica" | "Japan" | "Kwajalein" | "Libya" | "MET" | "MST" | "MST7MDT" | "Mexico/BajaNorte" | "Mexico/BajaSur" | "Mexico/General" | "NZ" | "NZ-CHAT" | "Navajo" | "PRC" | "PST8PDT" | "Pacific/Apia" | "Pacific/Auckland" | "Pacific/Bougainville" | "Pacific/Chatham" | "Pacific/Chuuk" | "Pacific/Easter" | "Pacific/Efate" | "Pacific/Enderbury" | "Pacific/Fakaofo" | "Pacific/Fiji" | "Pacific/Funafuti" | "Pacific/Galapagos" | "Pacific/Gambier" | "Pacific/Guadalcanal" | "Pacific/Guam" | "Pacific/Honolulu" | "Pacific/Johnston" | "Pacific/Kanton" | "Pacific/Kiritimati" | "Pacific/Kosrae" | "Pacific/Kwajalein" | "Pacific/Majuro" | "Pacific/Marquesas" | "Pacific/Midway" | "Pacific/Nauru" | "Pacific/Niue" | "Pacific/Norfolk" | "Pacific/Noumea" | "Pacific/Pago_Pago" | "Pacific/Palau" | "Pacific/Pitcairn" | "Pacific/Pohnpei" | "Pacific/Ponape" | "Pacific/Port_Moresby" | "Pacific/Rarotonga" | "Pacific/Saipan" | "Pacific/Samoa" | "Pacific/Tahiti" | "Pacific/Tarawa" | "Pacific/Tongatapu" | "Pacific/Truk" | "Pacific/Wake" | "Pacific/Wallis" | "Pacific/Yap" | "Poland" | "Portugal" | "ROC" | "ROK" | "Singapore" | "Turkey" | "UCT" | "US/Alaska" | "US/Aleutian" | "US/Arizona" | "US/Central" | "US/East-Indiana" | "US/Eastern" | "US/Hawaii" | "US/Indiana-Starke" | "US/Michigan" | "US/Mountain" | "US/Pacific" | "US/Samoa" | "Universal" | "W-SU" | "WET" | "Zulu";\n  displayTimezone?: "undefined" | "Etc/UTC" | "UTC" | "Africa/Abidjan" | "Africa/Accra" | "Africa/Addis_Ababa" | "Africa/Algiers" | "Africa/Asmara" | "Africa/Asmera" | "Africa/Bamako" | "Africa/Bangui" | "Africa/Banjul" | "Africa/Bissau" | "Africa/Blantyre" | "Africa/Brazzaville" | "Africa/Bujumbura" | "Africa/Cairo" | "Africa/Casablanca" | "Africa/Ceuta" | "Africa/Conakry" | "Africa/Dakar" | "Africa/Dar_es_Salaam" | "Africa/Djibouti" | "Africa/Douala" | "Africa/El_Aaiun" | "Africa/Freetown" | "Africa/Gaborone" | "Africa/Harare" | "Africa/Johannesburg" | "Africa/Juba" | "Africa/Kampala" | "Africa/Khartoum" | "Africa/Kigali" | "Africa/Kinshasa" | "Africa/Lagos" | "Africa/Libreville" | "Africa/Lome" | "Africa/Luanda" | "Africa/Lubumbashi" | "Africa/Lusaka" | "Africa/Malabo" | "Africa/Maputo" | "Africa/Maseru" | "Africa/Mbabane" | "Africa/Mogadishu" | "Africa/Monrovia" | "Africa/Nairobi" | "Africa/Ndjamena" | "Africa/Niamey" | "Africa/Nouakchott" | "Africa/Ouagadougou" | "Africa/Porto-Novo" | "Africa/Sao_Tome" | "Africa/Timbuktu" | "Africa/Tripoli" | "Africa/Tunis" | "Africa/Windhoek" | "America/Adak" | "America/Anchorage" | "America/Anguilla" | "America/Antigua" | "America/Araguaina" | "America/Argentina/Buenos_Aires" | "America/Argentina/Catamarca" | "America/Argentina/ComodRivadavia" | "America/Argentina/Cordoba" | "America/Argentina/Jujuy" | "America/Argentina/La_Rioja" | "America/Argentina/Mendoza" | "America/Argentina/Rio_Gallegos" | "America/Argentina/Salta" | "America/Argentina/San_Juan" | "America/Argentina/San_Luis" | "America/Argentina/Tucuman" | "America/Argentina/Ushuaia" | "America/Aruba" | "America/Asuncion" | "America/Atikokan" | "America/Atka" | "America/Bahia" | "America/Bahia_Banderas" | "America/Barbados" | "America/Belem" | "America/Belize" | "America/Blanc-Sablon" | "America/Boa_Vista" | "America/Bogota" | "America/Boise" | "America/Buenos_Aires" | "America/Cambridge_Bay" | "America/Campo_Grande" | "America/Cancun" | "America/Caracas" | "America/Catamarca" | "America/Cayenne" | "America/Cayman" | "America/Chicago" | "America/Chihuahua" | "America/Ciudad_Juarez" | "America/Coral_Harbour" | "America/Cordoba" | "America/Costa_Rica" | "America/Creston" | "America/Cuiaba" | "America/Curacao" | "America/Danmarkshavn" | "America/Dawson" | "America/Dawson_Creek" | "America/Denver" | "America/Detroit" | "America/Dominica" | "America/Edmonton" | "America/Eirunepe" | "America/El_Salvador" | "America/Ensenada" | "America/Fort_Nelson" | "America/Fort_Wayne" | "America/Fortaleza" | "America/Glace_Bay" | "America/Godthab" | "America/Goose_Bay" | "America/Grand_Turk" | "America/Grenada" | "America/Guadeloupe" | "America/Guatemala" | "America/Guayaquil" | "America/Guyana" | "America/Halifax" | "America/Havana" | "America/Hermosillo" | "America/Indiana/Indianapolis" | "America/Indiana/Knox" | "America/Indiana/Marengo" | "America/Indiana/Petersburg" | "America/Indiana/Tell_City" | "America/Indiana/Vevay" | "America/Indiana/Vincennes" | "America/Indiana/Winamac" | "America/Indianapolis" | "America/Inuvik" | "America/Iqaluit" | "America/Jamaica" | "America/Jujuy" | "America/Juneau" | "America/Kentucky/Louisville" | "America/Kentucky/Monticello" | "America/Knox_IN" | "America/Kralendijk" | "America/La_Paz" | "America/Lima" | "America/Los_Angeles" | "America/Louisville" | "America/Lower_Princes" | "America/Maceio" | "America/Managua" | "America/Manaus" | "America/Marigot" | "America/Martinique" | "America/Matamoros" | "America/Mazatlan" | "America/Mendoza" | "America/Menominee" | "America/Merida" | "America/Metlakatla" | "America/Mexico_City" | "America/Miquelon" | "America/Moncton" | "America/Monterrey" | "America/Montevideo" | "America/Montreal" | "America/Montserrat" | "America/Nassau" | "America/New_York" | "America/Nipigon" | "America/Nome" | "America/Noronha" | "America/North_Dakota/Beulah" | "America/North_Dakota/Center" | "America/North_Dakota/New_Salem" | "America/Nuuk" | "America/Ojinaga" | "America/Panama" | "America/Pangnirtung" | "America/Paramaribo" | "America/Phoenix" | "America/Port-au-Prince" | "America/Port_of_Spain" | "America/Porto_Acre" | "America/Porto_Velho" | "America/Puerto_Rico" | "America/Punta_Arenas" | "America/Rainy_River" | "America/Rankin_Inlet" | "America/Recife" | "America/Regina" | "America/Resolute" | "America/Rio_Branco" | "America/Rosario" | "America/Santa_Isabel" | "America/Santarem" | "America/Santiago" | "America/Santo_Domingo" | "America/Sao_Paulo" | "America/Scoresbysund" | "America/Shiprock" | "America/Sitka" | "America/St_Barthelemy" | "America/St_Johns" | "America/St_Kitts" | "America/St_Lucia" | "America/St_Thomas" | "America/St_Vincent" | "America/Swift_Current" | "America/Tegucigalpa" | "America/Thule" | "America/Thunder_Bay" | "America/Tijuana" | "America/Toronto" | "America/Tortola" | "America/Vancouver" | "America/Virgin" | "America/Whitehorse" | "America/Winnipeg" | "America/Yakutat" | "America/Yellowknife" | "Antarctica/Casey" | "Antarctica/Davis" | "Antarctica/DumontDUrville" | "Antarctica/Macquarie" | "Antarctica/Mawson" | "Antarctica/McMurdo" | "Antarctica/Palmer" | "Antarctica/Rothera" | "Antarctica/South_Pole" | "Antarctica/Syowa" | "Antarctica/Troll" | "Antarctica/Vostok" | "Arctic/Longyearbyen" | "Asia/Aden" | "Asia/Almaty" | "Asia/Amman" | "Asia/Anadyr" | "Asia/Aqtau" | "Asia/Aqtobe" | "Asia/Ashgabat" | "Asia/Ashkhabad" | "Asia/Atyrau" | "Asia/Baghdad" | "Asia/Bahrain" | "Asia/Baku" | "Asia/Bangkok" | "Asia/Barnaul" | "Asia/Beirut" | "Asia/Bishkek" | "Asia/Brunei" | "Asia/Calcutta" | "Asia/Chita" | "Asia/Choibalsan" | "Asia/Chongqing" | "Asia/Chungking" | "Asia/Colombo" | "Asia/Dacca" | "Asia/Damascus" | "Asia/Dhaka" | "Asia/Dili" | "Asia/Dubai" | "Asia/Dushanbe" | "Asia/Famagusta" | "Asia/Gaza" | "Asia/Harbin" | "Asia/Hebron" | "Asia/Ho_Chi_Minh" | "Asia/Hong_Kong" | "Asia/Hovd" | "Asia/Irkutsk" | "Asia/Istanbul" | "Asia/Jakarta" | "Asia/Jayapura" | "Asia/Jerusalem" | "Asia/Kabul" | "Asia/Kamchatka" | "Asia/Karachi" | "Asia/Kashgar" | "Asia/Kathmandu" | "Asia/Katmandu" | "Asia/Khandyga" | "Asia/Kolkata" | "Asia/Krasnoyarsk" | "Asia/Kuala_Lumpur" | "Asia/Kuching" | "Asia/Kuwait" | "Asia/Macao" | "Asia/Macau" | "Asia/Magadan" | "Asia/Makassar" | "Asia/Manila" | "Asia/Muscat" | "Asia/Nicosia" | "Asia/Novokuznetsk" | "Asia/Novosibirsk" | "Asia/Omsk" | "Asia/Oral" | "Asia/Phnom_Penh" | "Asia/Pontianak" | "Asia/Pyongyang" | "Asia/Qatar" | "Asia/Qostanay" | "Asia/Qyzylorda" | "Asia/Rangoon" | "Asia/Riyadh" | "Asia/Saigon" | "Asia/Sakhalin" | "Asia/Samarkand" | "Asia/Seoul" | "Asia/Shanghai" | "Asia/Singapore" | "Asia/Srednekolymsk" | "Asia/Taipei" | "Asia/Tashkent" | "Asia/Tbilisi" | "Asia/Tehran" | "Asia/Tel_Aviv" | "Asia/Thimbu" | "Asia/Thimphu" | "Asia/Tokyo" | "Asia/Tomsk" | "Asia/Ujung_Pandang" | "Asia/Ulaanbaatar" | "Asia/Ulan_Bator" | "Asia/Urumqi" | "Asia/Ust-Nera" | "Asia/Vientiane" | "Asia/Vladivostok" | "Asia/Yakutsk" | "Asia/Yangon" | "Asia/Yekaterinburg" | "Asia/Yerevan" | "Atlantic/Azores" | "Atlantic/Bermuda" | "Atlantic/Canary" | "Atlantic/Cape_Verde" | "Atlantic/Faeroe" | "Atlantic/Faroe" | "Atlantic/Jan_Mayen" | "Atlantic/Madeira" | "Atlantic/Reykjavik" | "Atlantic/South_Georgia" | "Atlantic/St_Helena" | "Atlantic/Stanley" | "Australia/ACT" | "Australia/Adelaide" | "Australia/Brisbane" | "Australia/Broken_Hill" | "Australia/Canberra" | "Australia/Currie" | "Australia/Darwin" | "Australia/Eucla" | "Australia/Hobart" | "Australia/LHI" | "Australia/Lindeman" | "Australia/Lord_Howe" | "Australia/Melbourne" | "Australia/NSW" | "Australia/North" | "Australia/Perth" | "Australia/Queensland" | "Australia/South" | "Australia/Sydney" | "Australia/Tasmania" | "Australia/Victoria" | "Australia/West" | "Australia/Yancowinna" | "Brazil/Acre" | "Brazil/DeNoronha" | "Brazil/East" | "Brazil/West" | "CET" | "CST6CDT" | "Canada/Atlantic" | "Canada/Central" | "Canada/Eastern" | "Canada/Mountain" | "Canada/Newfoundland" | "Canada/Pacific" | "Canada/Saskatchewan" | "Canada/Yukon" | "Chile/Continental" | "Chile/EasterIsland" | "Cuba" | "EET" | "EST" | "EST5EDT" | "Egypt" | "Eire" | "Etc/GMT" | "Etc/GMT+0" | "Etc/GMT+1" | "Etc/GMT+10" | "Etc/GMT+11" | "Etc/GMT+12" | "Etc/GMT+2" | "Etc/GMT+3" | "Etc/GMT+4" | "Etc/GMT+5" | "Etc/GMT+6" | "Etc/GMT+7" | "Etc/GMT+8" | "Etc/GMT+9" | "Etc/GMT-0" | "Etc/GMT-1" | "Etc/GMT-10" | "Etc/GMT-11" | "Etc/GMT-12" | "Etc/GMT-13" | "Etc/GMT-14" | "Etc/GMT-2" | "Etc/GMT-3" | "Etc/GMT-4" | "Etc/GMT-5" | "Etc/GMT-6" | "Etc/GMT-7" | "Etc/GMT-8" | "Etc/GMT-9" | "Etc/GMT0" | "Etc/Greenwich" | "Etc/UCT" | "Etc/Universal" | "Etc/Zulu" | "Europe/Amsterdam" | "Europe/Andorra" | "Europe/Astrakhan" | "Europe/Athens" | "Europe/Belfast" | "Europe/Belgrade" | "Europe/Berlin" | "Europe/Bratislava" | "Europe/Brussels" | "Europe/Bucharest" | "Europe/Budapest" | "Europe/Busingen" | "Europe/Chisinau" | "Europe/Copenhagen" | "Europe/Dublin" | "Europe/Gibraltar" | "Europe/Guernsey" | "Europe/Helsinki" | "Europe/Isle_of_Man" | "Europe/Istanbul" | "Europe/Jersey" | "Europe/Kaliningrad" | "Europe/Kiev" | "Europe/Kirov" | "Europe/Kyiv" | "Europe/Lisbon" | "Europe/Ljubljana" | "Europe/London" | "Europe/Luxembourg" | "Europe/Madrid" | "Europe/Malta" | "Europe/Mariehamn" | "Europe/Minsk" | "Europe/Monaco" | "Europe/Moscow" | "Europe/Nicosia" | "Europe/Oslo" | "Europe/Paris" | "Europe/Podgorica" | "Europe/Prague" | "Europe/Riga" | "Europe/Rome" | "Europe/Samara" | "Europe/San_Marino" | "Europe/Sarajevo" | "Europe/Saratov" | "Europe/Simferopol" | "Europe/Skopje" | "Europe/Sofia" | "Europe/Stockholm" | "Europe/Tallinn" | "Europe/Tirane" | "Europe/Tiraspol" | "Europe/Ulyanovsk" | "Europe/Uzhgorod" | "Europe/Vaduz" | "Europe/Vatican" | "Europe/Vienna" | "Europe/Vilnius" | "Europe/Volgograd" | "Europe/Warsaw" | "Europe/Zagreb" | "Europe/Zaporozhye" | "Europe/Zurich" | "GB" | "GB-Eire" | "GMT" | "GMT+0" | "GMT-0" | "GMT0" | "Greenwich" | "HST" | "Hongkong" | "Iceland" | "Indian/Antananarivo" | "Indian/Chagos" | "Indian/Christmas" | "Indian/Cocos" | "Indian/Comoro" | "Indian/Kerguelen" | "Indian/Mahe" | "Indian/Maldives" | "Indian/Mauritius" | "Indian/Mayotte" | "Indian/Reunion" | "Iran" | "Israel" | "Jamaica" | "Japan" | "Kwajalein" | "Libya" | "MET" | "MST" | "MST7MDT" | "Mexico/BajaNorte" | "Mexico/BajaSur" | "Mexico/General" | "NZ" | "NZ-CHAT" | "Navajo" | "PRC" | "PST8PDT" | "Pacific/Apia" | "Pacific/Auckland" | "Pacific/Bougainville" | "Pacific/Chatham" | "Pacific/Chuuk" | "Pacific/Easter" | "Pacific/Efate" | "Pacific/Enderbury" | "Pacific/Fakaofo" | "Pacific/Fiji" | "Pacific/Funafuti" | "Pacific/Galapagos" | "Pacific/Gambier" | "Pacific/Guadalcanal" | "Pacific/Guam" | "Pacific/Honolulu" | "Pacific/Johnston" | "Pacific/Kanton" | "Pacific/Kiritimati" | "Pacific/Kosrae" | "Pacific/Kwajalein" | "Pacific/Majuro" | "Pacific/Marquesas" | "Pacific/Midway" | "Pacific/Nauru" | "Pacific/Niue" | "Pacific/Norfolk" | "Pacific/Noumea" | "Pacific/Pago_Pago" | "Pacific/Palau" | "Pacific/Pitcairn" | "Pacific/Pohnpei" | "Pacific/Ponape" | "Pacific/Port_Moresby" | "Pacific/Rarotonga" | "Pacific/Saipan" | "Pacific/Samoa" | "Pacific/Tahiti" | "Pacific/Tarawa" | "Pacific/Tongatapu" | "Pacific/Truk" | "Pacific/Wake" | "Pacific/Wallis" | "Pacific/Yap" | "Poland" | "Portugal" | "ROC" | "ROK" | "Singapore" | "Turkey" | "UCT" | "US/Alaska" | "US/Aleutian" | "US/Arizona" | "US/Central" | "US/East-Indiana" | "US/Eastern" | "US/Hawaii" | "US/Indiana-Starke" | "US/Michigan" | "US/Mountain" | "US/Pacific" | "US/Samoa" | "Universal" | "W-SU" | "WET" | "Zulu";\n  /** @default false */\n  twentyFourHourTime?: boolean;\n  /** @default {"left":{"mode":"px","value":10},"right":{"mode":"px","value":10},"top":{"mode":"px","value":8},"bottom":{"mode":"px","value":8}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  /** @default "top" */\n  labelPosition?: "top" | "left";\n  /** @default "Computed at runtime" */\n  labelStyle?: Record<string, any>;\n  /** @default "calendar_today" */\n  icon?: string;\n  /** @default "Select date" */\n  placeholder?: string;\n  /** @default "Computed at runtime" */\n  textStyle?: Record<string, any>;\n  /** @default false */\n  loading?: boolean;\n  /** @default false */\n  isRequired?: boolean;\n  minDate?: string;\n  maxDate?: string;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default "tooltip" */\n  errorMessagePlacement?: "tooltip" | "inline";\n  /** @default "" */\n  customValidationRule?: string;\n  /** @default "" */\n  customErrorMessage?: string;\n  onDateSelected?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbDatePickerComponentState {\n  value?: string;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default true */\n  isValid?: boolean;\n  /** @default "Current datetime" */\n  outputDateLocal?: string;\n  /** @default "Current datetime" */\n  outputDateUtc?: string;\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbDatePickerMetaProperties {\n  selectedDate?: string;\n  /** @default false */\n  isTouched?: boolean;\n}\n```\n';
+var content19 = '## SbDatePicker\n\nThe following is the type definition for the SbDatePicker component.\n\n```typescript\ninterface SbDatePickerProps {\n  /** @default "" */\n  label?: string;\n  defaultDate?: string;\n  /** @default "YYYY-MM-DDTHH:mm:ss.SSSSZ" */\n  dateFormat?: "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  /** @default "MM/DD/YYYY" */\n  displayDateFormat?: "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  /** @default false */\n  manageTimezone?: boolean;\n  valueTimezone?: "undefined" | "Etc/UTC" | "UTC" | "Africa/Abidjan" | "Africa/Accra" | "Africa/Addis_Ababa" | "Africa/Algiers" | "Africa/Asmara" | "Africa/Asmera" | "Africa/Bamako" | "Africa/Bangui" | "Africa/Banjul" | "Africa/Bissau" | "Africa/Blantyre" | "Africa/Brazzaville" | "Africa/Bujumbura" | "Africa/Cairo" | "Africa/Casablanca" | "Africa/Ceuta" | "Africa/Conakry" | "Africa/Dakar" | "Africa/Dar_es_Salaam" | "Africa/Djibouti" | "Africa/Douala" | "Africa/El_Aaiun" | "Africa/Freetown" | "Africa/Gaborone" | "Africa/Harare" | "Africa/Johannesburg" | "Africa/Juba" | "Africa/Kampala" | "Africa/Khartoum" | "Africa/Kigali" | "Africa/Kinshasa" | "Africa/Lagos" | "Africa/Libreville" | "Africa/Lome" | "Africa/Luanda" | "Africa/Lubumbashi" | "Africa/Lusaka" | "Africa/Malabo" | "Africa/Maputo" | "Africa/Maseru" | "Africa/Mbabane" | "Africa/Mogadishu" | "Africa/Monrovia" | "Africa/Nairobi" | "Africa/Ndjamena" | "Africa/Niamey" | "Africa/Nouakchott" | "Africa/Ouagadougou" | "Africa/Porto-Novo" | "Africa/Sao_Tome" | "Africa/Timbuktu" | "Africa/Tripoli" | "Africa/Tunis" | "Africa/Windhoek" | "America/Adak" | "America/Anchorage" | "America/Anguilla" | "America/Antigua" | "America/Araguaina" | "America/Argentina/Buenos_Aires" | "America/Argentina/Catamarca" | "America/Argentina/ComodRivadavia" | "America/Argentina/Cordoba" | "America/Argentina/Jujuy" | "America/Argentina/La_Rioja" | "America/Argentina/Mendoza" | "America/Argentina/Rio_Gallegos" | "America/Argentina/Salta" | "America/Argentina/San_Juan" | "America/Argentina/San_Luis" | "America/Argentina/Tucuman" | "America/Argentina/Ushuaia" | "America/Aruba" | "America/Asuncion" | "America/Atikokan" | "America/Atka" | "America/Bahia" | "America/Bahia_Banderas" | "America/Barbados" | "America/Belem" | "America/Belize" | "America/Blanc-Sablon" | "America/Boa_Vista" | "America/Bogota" | "America/Boise" | "America/Buenos_Aires" | "America/Cambridge_Bay" | "America/Campo_Grande" | "America/Cancun" | "America/Caracas" | "America/Catamarca" | "America/Cayenne" | "America/Cayman" | "America/Chicago" | "America/Chihuahua" | "America/Ciudad_Juarez" | "America/Coral_Harbour" | "America/Cordoba" | "America/Costa_Rica" | "America/Creston" | "America/Cuiaba" | "America/Curacao" | "America/Danmarkshavn" | "America/Dawson" | "America/Dawson_Creek" | "America/Denver" | "America/Detroit" | "America/Dominica" | "America/Edmonton" | "America/Eirunepe" | "America/El_Salvador" | "America/Ensenada" | "America/Fort_Nelson" | "America/Fort_Wayne" | "America/Fortaleza" | "America/Glace_Bay" | "America/Godthab" | "America/Goose_Bay" | "America/Grand_Turk" | "America/Grenada" | "America/Guadeloupe" | "America/Guatemala" | "America/Guayaquil" | "America/Guyana" | "America/Halifax" | "America/Havana" | "America/Hermosillo" | "America/Indiana/Indianapolis" | "America/Indiana/Knox" | "America/Indiana/Marengo" | "America/Indiana/Petersburg" | "America/Indiana/Tell_City" | "America/Indiana/Vevay" | "America/Indiana/Vincennes" | "America/Indiana/Winamac" | "America/Indianapolis" | "America/Inuvik" | "America/Iqaluit" | "America/Jamaica" | "America/Jujuy" | "America/Juneau" | "America/Kentucky/Louisville" | "America/Kentucky/Monticello" | "America/Knox_IN" | "America/Kralendijk" | "America/La_Paz" | "America/Lima" | "America/Los_Angeles" | "America/Louisville" | "America/Lower_Princes" | "America/Maceio" | "America/Managua" | "America/Manaus" | "America/Marigot" | "America/Martinique" | "America/Matamoros" | "America/Mazatlan" | "America/Mendoza" | "America/Menominee" | "America/Merida" | "America/Metlakatla" | "America/Mexico_City" | "America/Miquelon" | "America/Moncton" | "America/Monterrey" | "America/Montevideo" | "America/Montreal" | "America/Montserrat" | "America/Nassau" | "America/New_York" | "America/Nipigon" | "America/Nome" | "America/Noronha" | "America/North_Dakota/Beulah" | "America/North_Dakota/Center" | "America/North_Dakota/New_Salem" | "America/Nuuk" | "America/Ojinaga" | "America/Panama" | "America/Pangnirtung" | "America/Paramaribo" | "America/Phoenix" | "America/Port-au-Prince" | "America/Port_of_Spain" | "America/Porto_Acre" | "America/Porto_Velho" | "America/Puerto_Rico" | "America/Punta_Arenas" | "America/Rainy_River" | "America/Rankin_Inlet" | "America/Recife" | "America/Regina" | "America/Resolute" | "America/Rio_Branco" | "America/Rosario" | "America/Santa_Isabel" | "America/Santarem" | "America/Santiago" | "America/Santo_Domingo" | "America/Sao_Paulo" | "America/Scoresbysund" | "America/Shiprock" | "America/Sitka" | "America/St_Barthelemy" | "America/St_Johns" | "America/St_Kitts" | "America/St_Lucia" | "America/St_Thomas" | "America/St_Vincent" | "America/Swift_Current" | "America/Tegucigalpa" | "America/Thule" | "America/Thunder_Bay" | "America/Tijuana" | "America/Toronto" | "America/Tortola" | "America/Vancouver" | "America/Virgin" | "America/Whitehorse" | "America/Winnipeg" | "America/Yakutat" | "America/Yellowknife" | "Antarctica/Casey" | "Antarctica/Davis" | "Antarctica/DumontDUrville" | "Antarctica/Macquarie" | "Antarctica/Mawson" | "Antarctica/McMurdo" | "Antarctica/Palmer" | "Antarctica/Rothera" | "Antarctica/South_Pole" | "Antarctica/Syowa" | "Antarctica/Troll" | "Antarctica/Vostok" | "Arctic/Longyearbyen" | "Asia/Aden" | "Asia/Almaty" | "Asia/Amman" | "Asia/Anadyr" | "Asia/Aqtau" | "Asia/Aqtobe" | "Asia/Ashgabat" | "Asia/Ashkhabad" | "Asia/Atyrau" | "Asia/Baghdad" | "Asia/Bahrain" | "Asia/Baku" | "Asia/Bangkok" | "Asia/Barnaul" | "Asia/Beirut" | "Asia/Bishkek" | "Asia/Brunei" | "Asia/Calcutta" | "Asia/Chita" | "Asia/Choibalsan" | "Asia/Chongqing" | "Asia/Chungking" | "Asia/Colombo" | "Asia/Dacca" | "Asia/Damascus" | "Asia/Dhaka" | "Asia/Dili" | "Asia/Dubai" | "Asia/Dushanbe" | "Asia/Famagusta" | "Asia/Gaza" | "Asia/Harbin" | "Asia/Hebron" | "Asia/Ho_Chi_Minh" | "Asia/Hong_Kong" | "Asia/Hovd" | "Asia/Irkutsk" | "Asia/Istanbul" | "Asia/Jakarta" | "Asia/Jayapura" | "Asia/Jerusalem" | "Asia/Kabul" | "Asia/Kamchatka" | "Asia/Karachi" | "Asia/Kashgar" | "Asia/Kathmandu" | "Asia/Katmandu" | "Asia/Khandyga" | "Asia/Kolkata" | "Asia/Krasnoyarsk" | "Asia/Kuala_Lumpur" | "Asia/Kuching" | "Asia/Kuwait" | "Asia/Macao" | "Asia/Macau" | "Asia/Magadan" | "Asia/Makassar" | "Asia/Manila" | "Asia/Muscat" | "Asia/Nicosia" | "Asia/Novokuznetsk" | "Asia/Novosibirsk" | "Asia/Omsk" | "Asia/Oral" | "Asia/Phnom_Penh" | "Asia/Pontianak" | "Asia/Pyongyang" | "Asia/Qatar" | "Asia/Qostanay" | "Asia/Qyzylorda" | "Asia/Rangoon" | "Asia/Riyadh" | "Asia/Saigon" | "Asia/Sakhalin" | "Asia/Samarkand" | "Asia/Seoul" | "Asia/Shanghai" | "Asia/Singapore" | "Asia/Srednekolymsk" | "Asia/Taipei" | "Asia/Tashkent" | "Asia/Tbilisi" | "Asia/Tehran" | "Asia/Tel_Aviv" | "Asia/Thimbu" | "Asia/Thimphu" | "Asia/Tokyo" | "Asia/Tomsk" | "Asia/Ujung_Pandang" | "Asia/Ulaanbaatar" | "Asia/Ulan_Bator" | "Asia/Urumqi" | "Asia/Ust-Nera" | "Asia/Vientiane" | "Asia/Vladivostok" | "Asia/Yakutsk" | "Asia/Yangon" | "Asia/Yekaterinburg" | "Asia/Yerevan" | "Atlantic/Azores" | "Atlantic/Bermuda" | "Atlantic/Canary" | "Atlantic/Cape_Verde" | "Atlantic/Faeroe" | "Atlantic/Faroe" | "Atlantic/Jan_Mayen" | "Atlantic/Madeira" | "Atlantic/Reykjavik" | "Atlantic/South_Georgia" | "Atlantic/St_Helena" | "Atlantic/Stanley" | "Australia/ACT" | "Australia/Adelaide" | "Australia/Brisbane" | "Australia/Broken_Hill" | "Australia/Canberra" | "Australia/Currie" | "Australia/Darwin" | "Australia/Eucla" | "Australia/Hobart" | "Australia/LHI" | "Australia/Lindeman" | "Australia/Lord_Howe" | "Australia/Melbourne" | "Australia/NSW" | "Australia/North" | "Australia/Perth" | "Australia/Queensland" | "Australia/South" | "Australia/Sydney" | "Australia/Tasmania" | "Australia/Victoria" | "Australia/West" | "Australia/Yancowinna" | "Brazil/Acre" | "Brazil/DeNoronha" | "Brazil/East" | "Brazil/West" | "CET" | "CST6CDT" | "Canada/Atlantic" | "Canada/Central" | "Canada/Eastern" | "Canada/Mountain" | "Canada/Newfoundland" | "Canada/Pacific" | "Canada/Saskatchewan" | "Canada/Yukon" | "Chile/Continental" | "Chile/EasterIsland" | "Cuba" | "EET" | "EST" | "EST5EDT" | "Egypt" | "Eire" | "Etc/GMT" | "Etc/GMT+0" | "Etc/GMT+1" | "Etc/GMT+10" | "Etc/GMT+11" | "Etc/GMT+12" | "Etc/GMT+2" | "Etc/GMT+3" | "Etc/GMT+4" | "Etc/GMT+5" | "Etc/GMT+6" | "Etc/GMT+7" | "Etc/GMT+8" | "Etc/GMT+9" | "Etc/GMT-0" | "Etc/GMT-1" | "Etc/GMT-10" | "Etc/GMT-11" | "Etc/GMT-12" | "Etc/GMT-13" | "Etc/GMT-14" | "Etc/GMT-2" | "Etc/GMT-3" | "Etc/GMT-4" | "Etc/GMT-5" | "Etc/GMT-6" | "Etc/GMT-7" | "Etc/GMT-8" | "Etc/GMT-9" | "Etc/GMT0" | "Etc/Greenwich" | "Etc/UCT" | "Etc/Universal" | "Etc/Zulu" | "Europe/Amsterdam" | "Europe/Andorra" | "Europe/Astrakhan" | "Europe/Athens" | "Europe/Belfast" | "Europe/Belgrade" | "Europe/Berlin" | "Europe/Bratislava" | "Europe/Brussels" | "Europe/Bucharest" | "Europe/Budapest" | "Europe/Busingen" | "Europe/Chisinau" | "Europe/Copenhagen" | "Europe/Dublin" | "Europe/Gibraltar" | "Europe/Guernsey" | "Europe/Helsinki" | "Europe/Isle_of_Man" | "Europe/Istanbul" | "Europe/Jersey" | "Europe/Kaliningrad" | "Europe/Kiev" | "Europe/Kirov" | "Europe/Kyiv" | "Europe/Lisbon" | "Europe/Ljubljana" | "Europe/London" | "Europe/Luxembourg" | "Europe/Madrid" | "Europe/Malta" | "Europe/Mariehamn" | "Europe/Minsk" | "Europe/Monaco" | "Europe/Moscow" | "Europe/Nicosia" | "Europe/Oslo" | "Europe/Paris" | "Europe/Podgorica" | "Europe/Prague" | "Europe/Riga" | "Europe/Rome" | "Europe/Samara" | "Europe/San_Marino" | "Europe/Sarajevo" | "Europe/Saratov" | "Europe/Simferopol" | "Europe/Skopje" | "Europe/Sofia" | "Europe/Stockholm" | "Europe/Tallinn" | "Europe/Tirane" | "Europe/Tiraspol" | "Europe/Ulyanovsk" | "Europe/Uzhgorod" | "Europe/Vaduz" | "Europe/Vatican" | "Europe/Vienna" | "Europe/Vilnius" | "Europe/Volgograd" | "Europe/Warsaw" | "Europe/Zagreb" | "Europe/Zaporozhye" | "Europe/Zurich" | "GB" | "GB-Eire" | "GMT" | "GMT+0" | "GMT-0" | "GMT0" | "Greenwich" | "HST" | "Hongkong" | "Iceland" | "Indian/Antananarivo" | "Indian/Chagos" | "Indian/Christmas" | "Indian/Cocos" | "Indian/Comoro" | "Indian/Kerguelen" | "Indian/Mahe" | "Indian/Maldives" | "Indian/Mauritius" | "Indian/Mayotte" | "Indian/Reunion" | "Iran" | "Israel" | "Jamaica" | "Japan" | "Kwajalein" | "Libya" | "MET" | "MST" | "MST7MDT" | "Mexico/BajaNorte" | "Mexico/BajaSur" | "Mexico/General" | "NZ" | "NZ-CHAT" | "Navajo" | "PRC" | "PST8PDT" | "Pacific/Apia" | "Pacific/Auckland" | "Pacific/Bougainville" | "Pacific/Chatham" | "Pacific/Chuuk" | "Pacific/Easter" | "Pacific/Efate" | "Pacific/Enderbury" | "Pacific/Fakaofo" | "Pacific/Fiji" | "Pacific/Funafuti" | "Pacific/Galapagos" | "Pacific/Gambier" | "Pacific/Guadalcanal" | "Pacific/Guam" | "Pacific/Honolulu" | "Pacific/Johnston" | "Pacific/Kanton" | "Pacific/Kiritimati" | "Pacific/Kosrae" | "Pacific/Kwajalein" | "Pacific/Majuro" | "Pacific/Marquesas" | "Pacific/Midway" | "Pacific/Nauru" | "Pacific/Niue" | "Pacific/Norfolk" | "Pacific/Noumea" | "Pacific/Pago_Pago" | "Pacific/Palau" | "Pacific/Pitcairn" | "Pacific/Pohnpei" | "Pacific/Ponape" | "Pacific/Port_Moresby" | "Pacific/Rarotonga" | "Pacific/Saipan" | "Pacific/Samoa" | "Pacific/Tahiti" | "Pacific/Tarawa" | "Pacific/Tongatapu" | "Pacific/Truk" | "Pacific/Wake" | "Pacific/Wallis" | "Pacific/Yap" | "Poland" | "Portugal" | "ROC" | "ROK" | "Singapore" | "Turkey" | "UCT" | "US/Alaska" | "US/Aleutian" | "US/Arizona" | "US/Central" | "US/East-Indiana" | "US/Eastern" | "US/Hawaii" | "US/Indiana-Starke" | "US/Michigan" | "US/Mountain" | "US/Pacific" | "US/Samoa" | "Universal" | "W-SU" | "WET" | "Zulu";\n  displayTimezone?: "undefined" | "Etc/UTC" | "UTC" | "Africa/Abidjan" | "Africa/Accra" | "Africa/Addis_Ababa" | "Africa/Algiers" | "Africa/Asmara" | "Africa/Asmera" | "Africa/Bamako" | "Africa/Bangui" | "Africa/Banjul" | "Africa/Bissau" | "Africa/Blantyre" | "Africa/Brazzaville" | "Africa/Bujumbura" | "Africa/Cairo" | "Africa/Casablanca" | "Africa/Ceuta" | "Africa/Conakry" | "Africa/Dakar" | "Africa/Dar_es_Salaam" | "Africa/Djibouti" | "Africa/Douala" | "Africa/El_Aaiun" | "Africa/Freetown" | "Africa/Gaborone" | "Africa/Harare" | "Africa/Johannesburg" | "Africa/Juba" | "Africa/Kampala" | "Africa/Khartoum" | "Africa/Kigali" | "Africa/Kinshasa" | "Africa/Lagos" | "Africa/Libreville" | "Africa/Lome" | "Africa/Luanda" | "Africa/Lubumbashi" | "Africa/Lusaka" | "Africa/Malabo" | "Africa/Maputo" | "Africa/Maseru" | "Africa/Mbabane" | "Africa/Mogadishu" | "Africa/Monrovia" | "Africa/Nairobi" | "Africa/Ndjamena" | "Africa/Niamey" | "Africa/Nouakchott" | "Africa/Ouagadougou" | "Africa/Porto-Novo" | "Africa/Sao_Tome" | "Africa/Timbuktu" | "Africa/Tripoli" | "Africa/Tunis" | "Africa/Windhoek" | "America/Adak" | "America/Anchorage" | "America/Anguilla" | "America/Antigua" | "America/Araguaina" | "America/Argentina/Buenos_Aires" | "America/Argentina/Catamarca" | "America/Argentina/ComodRivadavia" | "America/Argentina/Cordoba" | "America/Argentina/Jujuy" | "America/Argentina/La_Rioja" | "America/Argentina/Mendoza" | "America/Argentina/Rio_Gallegos" | "America/Argentina/Salta" | "America/Argentina/San_Juan" | "America/Argentina/San_Luis" | "America/Argentina/Tucuman" | "America/Argentina/Ushuaia" | "America/Aruba" | "America/Asuncion" | "America/Atikokan" | "America/Atka" | "America/Bahia" | "America/Bahia_Banderas" | "America/Barbados" | "America/Belem" | "America/Belize" | "America/Blanc-Sablon" | "America/Boa_Vista" | "America/Bogota" | "America/Boise" | "America/Buenos_Aires" | "America/Cambridge_Bay" | "America/Campo_Grande" | "America/Cancun" | "America/Caracas" | "America/Catamarca" | "America/Cayenne" | "America/Cayman" | "America/Chicago" | "America/Chihuahua" | "America/Ciudad_Juarez" | "America/Coral_Harbour" | "America/Cordoba" | "America/Costa_Rica" | "America/Creston" | "America/Cuiaba" | "America/Curacao" | "America/Danmarkshavn" | "America/Dawson" | "America/Dawson_Creek" | "America/Denver" | "America/Detroit" | "America/Dominica" | "America/Edmonton" | "America/Eirunepe" | "America/El_Salvador" | "America/Ensenada" | "America/Fort_Nelson" | "America/Fort_Wayne" | "America/Fortaleza" | "America/Glace_Bay" | "America/Godthab" | "America/Goose_Bay" | "America/Grand_Turk" | "America/Grenada" | "America/Guadeloupe" | "America/Guatemala" | "America/Guayaquil" | "America/Guyana" | "America/Halifax" | "America/Havana" | "America/Hermosillo" | "America/Indiana/Indianapolis" | "America/Indiana/Knox" | "America/Indiana/Marengo" | "America/Indiana/Petersburg" | "America/Indiana/Tell_City" | "America/Indiana/Vevay" | "America/Indiana/Vincennes" | "America/Indiana/Winamac" | "America/Indianapolis" | "America/Inuvik" | "America/Iqaluit" | "America/Jamaica" | "America/Jujuy" | "America/Juneau" | "America/Kentucky/Louisville" | "America/Kentucky/Monticello" | "America/Knox_IN" | "America/Kralendijk" | "America/La_Paz" | "America/Lima" | "America/Los_Angeles" | "America/Louisville" | "America/Lower_Princes" | "America/Maceio" | "America/Managua" | "America/Manaus" | "America/Marigot" | "America/Martinique" | "America/Matamoros" | "America/Mazatlan" | "America/Mendoza" | "America/Menominee" | "America/Merida" | "America/Metlakatla" | "America/Mexico_City" | "America/Miquelon" | "America/Moncton" | "America/Monterrey" | "America/Montevideo" | "America/Montreal" | "America/Montserrat" | "America/Nassau" | "America/New_York" | "America/Nipigon" | "America/Nome" | "America/Noronha" | "America/North_Dakota/Beulah" | "America/North_Dakota/Center" | "America/North_Dakota/New_Salem" | "America/Nuuk" | "America/Ojinaga" | "America/Panama" | "America/Pangnirtung" | "America/Paramaribo" | "America/Phoenix" | "America/Port-au-Prince" | "America/Port_of_Spain" | "America/Porto_Acre" | "America/Porto_Velho" | "America/Puerto_Rico" | "America/Punta_Arenas" | "America/Rainy_River" | "America/Rankin_Inlet" | "America/Recife" | "America/Regina" | "America/Resolute" | "America/Rio_Branco" | "America/Rosario" | "America/Santa_Isabel" | "America/Santarem" | "America/Santiago" | "America/Santo_Domingo" | "America/Sao_Paulo" | "America/Scoresbysund" | "America/Shiprock" | "America/Sitka" | "America/St_Barthelemy" | "America/St_Johns" | "America/St_Kitts" | "America/St_Lucia" | "America/St_Thomas" | "America/St_Vincent" | "America/Swift_Current" | "America/Tegucigalpa" | "America/Thule" | "America/Thunder_Bay" | "America/Tijuana" | "America/Toronto" | "America/Tortola" | "America/Vancouver" | "America/Virgin" | "America/Whitehorse" | "America/Winnipeg" | "America/Yakutat" | "America/Yellowknife" | "Antarctica/Casey" | "Antarctica/Davis" | "Antarctica/DumontDUrville" | "Antarctica/Macquarie" | "Antarctica/Mawson" | "Antarctica/McMurdo" | "Antarctica/Palmer" | "Antarctica/Rothera" | "Antarctica/South_Pole" | "Antarctica/Syowa" | "Antarctica/Troll" | "Antarctica/Vostok" | "Arctic/Longyearbyen" | "Asia/Aden" | "Asia/Almaty" | "Asia/Amman" | "Asia/Anadyr" | "Asia/Aqtau" | "Asia/Aqtobe" | "Asia/Ashgabat" | "Asia/Ashkhabad" | "Asia/Atyrau" | "Asia/Baghdad" | "Asia/Bahrain" | "Asia/Baku" | "Asia/Bangkok" | "Asia/Barnaul" | "Asia/Beirut" | "Asia/Bishkek" | "Asia/Brunei" | "Asia/Calcutta" | "Asia/Chita" | "Asia/Choibalsan" | "Asia/Chongqing" | "Asia/Chungking" | "Asia/Colombo" | "Asia/Dacca" | "Asia/Damascus" | "Asia/Dhaka" | "Asia/Dili" | "Asia/Dubai" | "Asia/Dushanbe" | "Asia/Famagusta" | "Asia/Gaza" | "Asia/Harbin" | "Asia/Hebron" | "Asia/Ho_Chi_Minh" | "Asia/Hong_Kong" | "Asia/Hovd" | "Asia/Irkutsk" | "Asia/Istanbul" | "Asia/Jakarta" | "Asia/Jayapura" | "Asia/Jerusalem" | "Asia/Kabul" | "Asia/Kamchatka" | "Asia/Karachi" | "Asia/Kashgar" | "Asia/Kathmandu" | "Asia/Katmandu" | "Asia/Khandyga" | "Asia/Kolkata" | "Asia/Krasnoyarsk" | "Asia/Kuala_Lumpur" | "Asia/Kuching" | "Asia/Kuwait" | "Asia/Macao" | "Asia/Macau" | "Asia/Magadan" | "Asia/Makassar" | "Asia/Manila" | "Asia/Muscat" | "Asia/Nicosia" | "Asia/Novokuznetsk" | "Asia/Novosibirsk" | "Asia/Omsk" | "Asia/Oral" | "Asia/Phnom_Penh" | "Asia/Pontianak" | "Asia/Pyongyang" | "Asia/Qatar" | "Asia/Qostanay" | "Asia/Qyzylorda" | "Asia/Rangoon" | "Asia/Riyadh" | "Asia/Saigon" | "Asia/Sakhalin" | "Asia/Samarkand" | "Asia/Seoul" | "Asia/Shanghai" | "Asia/Singapore" | "Asia/Srednekolymsk" | "Asia/Taipei" | "Asia/Tashkent" | "Asia/Tbilisi" | "Asia/Tehran" | "Asia/Tel_Aviv" | "Asia/Thimbu" | "Asia/Thimphu" | "Asia/Tokyo" | "Asia/Tomsk" | "Asia/Ujung_Pandang" | "Asia/Ulaanbaatar" | "Asia/Ulan_Bator" | "Asia/Urumqi" | "Asia/Ust-Nera" | "Asia/Vientiane" | "Asia/Vladivostok" | "Asia/Yakutsk" | "Asia/Yangon" | "Asia/Yekaterinburg" | "Asia/Yerevan" | "Atlantic/Azores" | "Atlantic/Bermuda" | "Atlantic/Canary" | "Atlantic/Cape_Verde" | "Atlantic/Faeroe" | "Atlantic/Faroe" | "Atlantic/Jan_Mayen" | "Atlantic/Madeira" | "Atlantic/Reykjavik" | "Atlantic/South_Georgia" | "Atlantic/St_Helena" | "Atlantic/Stanley" | "Australia/ACT" | "Australia/Adelaide" | "Australia/Brisbane" | "Australia/Broken_Hill" | "Australia/Canberra" | "Australia/Currie" | "Australia/Darwin" | "Australia/Eucla" | "Australia/Hobart" | "Australia/LHI" | "Australia/Lindeman" | "Australia/Lord_Howe" | "Australia/Melbourne" | "Australia/NSW" | "Australia/North" | "Australia/Perth" | "Australia/Queensland" | "Australia/South" | "Australia/Sydney" | "Australia/Tasmania" | "Australia/Victoria" | "Australia/West" | "Australia/Yancowinna" | "Brazil/Acre" | "Brazil/DeNoronha" | "Brazil/East" | "Brazil/West" | "CET" | "CST6CDT" | "Canada/Atlantic" | "Canada/Central" | "Canada/Eastern" | "Canada/Mountain" | "Canada/Newfoundland" | "Canada/Pacific" | "Canada/Saskatchewan" | "Canada/Yukon" | "Chile/Continental" | "Chile/EasterIsland" | "Cuba" | "EET" | "EST" | "EST5EDT" | "Egypt" | "Eire" | "Etc/GMT" | "Etc/GMT+0" | "Etc/GMT+1" | "Etc/GMT+10" | "Etc/GMT+11" | "Etc/GMT+12" | "Etc/GMT+2" | "Etc/GMT+3" | "Etc/GMT+4" | "Etc/GMT+5" | "Etc/GMT+6" | "Etc/GMT+7" | "Etc/GMT+8" | "Etc/GMT+9" | "Etc/GMT-0" | "Etc/GMT-1" | "Etc/GMT-10" | "Etc/GMT-11" | "Etc/GMT-12" | "Etc/GMT-13" | "Etc/GMT-14" | "Etc/GMT-2" | "Etc/GMT-3" | "Etc/GMT-4" | "Etc/GMT-5" | "Etc/GMT-6" | "Etc/GMT-7" | "Etc/GMT-8" | "Etc/GMT-9" | "Etc/GMT0" | "Etc/Greenwich" | "Etc/UCT" | "Etc/Universal" | "Etc/Zulu" | "Europe/Amsterdam" | "Europe/Andorra" | "Europe/Astrakhan" | "Europe/Athens" | "Europe/Belfast" | "Europe/Belgrade" | "Europe/Berlin" | "Europe/Bratislava" | "Europe/Brussels" | "Europe/Bucharest" | "Europe/Budapest" | "Europe/Busingen" | "Europe/Chisinau" | "Europe/Copenhagen" | "Europe/Dublin" | "Europe/Gibraltar" | "Europe/Guernsey" | "Europe/Helsinki" | "Europe/Isle_of_Man" | "Europe/Istanbul" | "Europe/Jersey" | "Europe/Kaliningrad" | "Europe/Kiev" | "Europe/Kirov" | "Europe/Kyiv" | "Europe/Lisbon" | "Europe/Ljubljana" | "Europe/London" | "Europe/Luxembourg" | "Europe/Madrid" | "Europe/Malta" | "Europe/Mariehamn" | "Europe/Minsk" | "Europe/Monaco" | "Europe/Moscow" | "Europe/Nicosia" | "Europe/Oslo" | "Europe/Paris" | "Europe/Podgorica" | "Europe/Prague" | "Europe/Riga" | "Europe/Rome" | "Europe/Samara" | "Europe/San_Marino" | "Europe/Sarajevo" | "Europe/Saratov" | "Europe/Simferopol" | "Europe/Skopje" | "Europe/Sofia" | "Europe/Stockholm" | "Europe/Tallinn" | "Europe/Tirane" | "Europe/Tiraspol" | "Europe/Ulyanovsk" | "Europe/Uzhgorod" | "Europe/Vaduz" | "Europe/Vatican" | "Europe/Vienna" | "Europe/Vilnius" | "Europe/Volgograd" | "Europe/Warsaw" | "Europe/Zagreb" | "Europe/Zaporozhye" | "Europe/Zurich" | "GB" | "GB-Eire" | "GMT" | "GMT+0" | "GMT-0" | "GMT0" | "Greenwich" | "HST" | "Hongkong" | "Iceland" | "Indian/Antananarivo" | "Indian/Chagos" | "Indian/Christmas" | "Indian/Cocos" | "Indian/Comoro" | "Indian/Kerguelen" | "Indian/Mahe" | "Indian/Maldives" | "Indian/Mauritius" | "Indian/Mayotte" | "Indian/Reunion" | "Iran" | "Israel" | "Jamaica" | "Japan" | "Kwajalein" | "Libya" | "MET" | "MST" | "MST7MDT" | "Mexico/BajaNorte" | "Mexico/BajaSur" | "Mexico/General" | "NZ" | "NZ-CHAT" | "Navajo" | "PRC" | "PST8PDT" | "Pacific/Apia" | "Pacific/Auckland" | "Pacific/Bougainville" | "Pacific/Chatham" | "Pacific/Chuuk" | "Pacific/Easter" | "Pacific/Efate" | "Pacific/Enderbury" | "Pacific/Fakaofo" | "Pacific/Fiji" | "Pacific/Funafuti" | "Pacific/Galapagos" | "Pacific/Gambier" | "Pacific/Guadalcanal" | "Pacific/Guam" | "Pacific/Honolulu" | "Pacific/Johnston" | "Pacific/Kanton" | "Pacific/Kiritimati" | "Pacific/Kosrae" | "Pacific/Kwajalein" | "Pacific/Majuro" | "Pacific/Marquesas" | "Pacific/Midway" | "Pacific/Nauru" | "Pacific/Niue" | "Pacific/Norfolk" | "Pacific/Noumea" | "Pacific/Pago_Pago" | "Pacific/Palau" | "Pacific/Pitcairn" | "Pacific/Pohnpei" | "Pacific/Ponape" | "Pacific/Port_Moresby" | "Pacific/Rarotonga" | "Pacific/Saipan" | "Pacific/Samoa" | "Pacific/Tahiti" | "Pacific/Tarawa" | "Pacific/Tongatapu" | "Pacific/Truk" | "Pacific/Wake" | "Pacific/Wallis" | "Pacific/Yap" | "Poland" | "Portugal" | "ROC" | "ROK" | "Singapore" | "Turkey" | "UCT" | "US/Alaska" | "US/Aleutian" | "US/Arizona" | "US/Central" | "US/East-Indiana" | "US/Eastern" | "US/Hawaii" | "US/Indiana-Starke" | "US/Michigan" | "US/Mountain" | "US/Pacific" | "US/Samoa" | "Universal" | "W-SU" | "WET" | "Zulu";\n  /** @default false */\n  twentyFourHourTime?: boolean;\n  /** @default {"left":{"mode":"px","value":10},"right":{"mode":"px","value":10},"top":{"mode":"px","value":8},"bottom":{"mode":"px","value":8}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  /** @default "top" */\n  labelPosition?: "top" | "left";\n  /** @default "Computed at runtime" */\n  labelStyle?: Record<string, any>;\n  /** @default "calendar_today" */\n  icon?: string;\n  /** @default "Select date" */\n  placeholder?: string;\n  /** @default "Computed at runtime" */\n  textStyle?: Record<string, any>;\n  /** @default false */\n  loading?: boolean;\n  /** @default false */\n  isRequired?: boolean;\n  minDate?: string;\n  maxDate?: string;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default "tooltip" */\n  errorMessagePlacement?: "tooltip" | "inline";\n  /** @default "" */\n  customValidationRule?: string;\n  /** @default "" */\n  customErrorMessage?: string;\n  onDateSelected?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbDatePickerComponentState {\n  value?: string;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default true */\n  isValid?: boolean;\n  /** @default "Current datetime" */\n  outputDateLocal?: string;\n  /** @default "Current datetime" */\n  outputDateUtc?: string;\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbDatePickerMetaProperties {\n  selectedDate?: string;\n  /** @default false */\n  isTouched?: boolean;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbDropdownPropsDocs.js
 init_cjs_shims();
-var content19 = '## SbDropdown\n\nThe following is the type definition for the SbDropdown component.\n\n```typescript\ninterface SbDropdownProps {\n  /** @default "" */\n  label?: string;\n  options?: any;\n  defaultOptionValue?: string;\n  transformation?: any;\n  /** @default "top" */\n  labelPosition?: "top" | "left";\n  /** @default "Computed at runtime" */\n  labelStyle?: Record<string, any>;\n  icon?: string;\n  /** @default "Select an option" */\n  placeholder?: string;\n  /** @default "Computed at runtime" */\n  textStyle?: Record<string, any>;\n  /** @default false */\n  loading?: boolean;\n  /** @default {"left":{"mode":"px","value":10},"right":{"mode":"px","value":10},"top":{"mode":"px","value":8},"bottom":{"mode":"px","value":8}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  /** @default false */\n  multiselect?: boolean;\n  /** @default false */\n  allowSelectAll?: boolean;\n  /** @default false */\n  allowClearing?: boolean;\n  /** @default true */\n  clientSideFiltering?: boolean;\n  /** @default false */\n  isRequired?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default "tooltip" */\n  errorMessagePlacement?: "tooltip" | "inline";\n  /** @default "" */\n  customValidationRule?: string;\n  /** @default "" */\n  customErrorMessage?: string;\n  onOptionChange?: SbEventFlow;\n  onSearchTextChange?: SbEventFlow;\n  onClear?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbDropdownComponentState {\n  value?: any;\n  defaultTransformation?: any;\n  /** @default [] */\n  transformedOptions?: any;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default "Computed at runtime" */\n  selectedOptionValue?: any;\n  selectedOptionValues?: any;\n  /** @default "Computed at runtime" */\n  selectedOption?: any;\n  selectedOptionArr?: any;\n  /** @default "Computed at runtime" */\n  selectedIndex?: number;\n  /** @default [] */\n  selectedIndexArr?: any;\n  /** @default true */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbDropdownMetaProperties {\n  metaSelectedOptionValue?: any;\n  /** @default [null] */\n  metaSelectedOptionValueArr?: any;\n  /** @default false */\n  isTouched?: boolean;\n  searchText?: string;\n}\n```\n';
+var content20 = '## SbDropdown\n\nThe following is the type definition for the SbDropdown component.\n\n```typescript\ninterface SbDropdownProps {\n  /** @default "" */\n  label?: string;\n  options?: any;\n  defaultOptionValue?: string;\n  transformation?: any;\n  /** @default "top" */\n  labelPosition?: "top" | "left";\n  /** @default "Computed at runtime" */\n  labelStyle?: Record<string, any>;\n  icon?: string;\n  /** @default "Select an option" */\n  placeholder?: string;\n  /** @default "Computed at runtime" */\n  textStyle?: Record<string, any>;\n  /** @default false */\n  loading?: boolean;\n  /** @default {"left":{"mode":"px","value":10},"right":{"mode":"px","value":10},"top":{"mode":"px","value":8},"bottom":{"mode":"px","value":8}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  /** @default false */\n  multiselect?: boolean;\n  /** @default false */\n  allowSelectAll?: boolean;\n  /** @default false */\n  allowClearing?: boolean;\n  /** @default true */\n  clientSideFiltering?: boolean;\n  /** @default false */\n  isRequired?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default "tooltip" */\n  errorMessagePlacement?: "tooltip" | "inline";\n  /** @default "" */\n  customValidationRule?: string;\n  /** @default "" */\n  customErrorMessage?: string;\n  onOptionChange?: SbEventFlow;\n  onSearchTextChange?: SbEventFlow;\n  onClear?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbDropdownComponentState {\n  value?: any;\n  defaultTransformation?: any;\n  /** @default [] */\n  transformedOptions?: any;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default "Computed at runtime" */\n  selectedOptionValue?: any;\n  selectedOptionValues?: any;\n  /** @default "Computed at runtime" */\n  selectedOption?: any;\n  selectedOptionArr?: any;\n  /** @default "Computed at runtime" */\n  selectedIndex?: number;\n  /** @default [] */\n  selectedIndexArr?: any;\n  /** @default true */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbDropdownMetaProperties {\n  metaSelectedOptionValue?: any;\n  /** @default [null] */\n  metaSelectedOptionValueArr?: any;\n  /** @default false */\n  isTouched?: boolean;\n  searchText?: string;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbIconPropsDocs.js
 init_cjs_shims();
-var content20 = '## SbIcon\n\nThe following is the type definition for the SbIcon component.\n\n```typescript\ninterface SbIconProps {\n  /** @default "info" */\n  icon?: string;\n  /** @default {"mode":"px","value":24} */\n  size?: Dim;\n  width?: Dim;\n  height?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  color?: string;\n  /** @default false */\n  loading?: boolean;\n  onClick?: SbEventFlow;\n}\n```\n';
+var content21 = '## SbIcon\n\nThe following is the type definition for the SbIcon component.\n\n```typescript\ninterface SbIconProps {\n  /** @default "info" */\n  icon?: string;\n  /** @default {"mode":"px","value":24} */\n  size?: Dim;\n  width?: Dim;\n  height?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  color?: string;\n  /** @default false */\n  loading?: boolean;\n  onClick?: SbEventFlow;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbImagePropsDocs.js
 init_cjs_shims();
-var content21 = '## SbImage\n\nThe following is the type definition for the SbImage component.\n\n```typescript\ninterface SbImageProps {\n  src?: string;\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default {"topLeft":{"mode":"px","value":0},"topRight":{"mode":"px","value":0},"bottomRight":{"mode":"px","value":0},"bottomLeft":{"mode":"px","value":0}} */\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** @default false */\n  fillContainer?: boolean;\n  /** @default "center" */\n  align?: "left" | "center" | "right";\n  /** @default false */\n  loading?: boolean;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  onClick?: SbEventFlow;\n}\n```\n';
+var content22 = '## SbImage\n\nThe following is the type definition for the SbImage component.\n\n```typescript\ninterface SbImageProps {\n  src?: string;\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default {"topLeft":{"mode":"px","value":0},"topRight":{"mode":"px","value":0},"bottomRight":{"mode":"px","value":0},"bottomLeft":{"mode":"px","value":0}} */\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** @default false */\n  fillContainer?: boolean;\n  /** @default "center" */\n  align?: "left" | "center" | "right";\n  /** @default false */\n  loading?: boolean;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  onClick?: SbEventFlow;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbInputPropsDocs.js
 init_cjs_shims();
-var content22 = '## SbInput\n\nThe following is the type definition for the SbInput component.\n\n```typescript\ninterface SbInputProps {\n  /** @default "" */\n  label?: string;\n  /** @default "TEXT" */\n  inputType?: "TEXT" | "NUMBER" | "PERCENTAGE" | "CURRENCY" | "PASSWORD" | "EMAIL" | "URL";\n  /** @default "standard" */\n  numberFormat?: "unformatted" | "standard" | "compact" | "scientific" | "engineering";\n  /** @default "USD" */\n  currency?: "AED" | "AFN" | "ALL" | "AMD" | "ANG" | "AOA" | "ARS" | "AUD" | "AWG" | "AZN" | "BAM" | "BBD" | "BDT" | "BGN" | "BHD" | "BIF" | "BMD" | "BND" | "BOB" | "BOV" | "BRL" | "BSD" | "BTN" | "BWP" | "BYN" | "BZD" | "CAD" | "CDF" | "CHE" | "CHF" | "CHW" | "CLF" | "CLP" | "CNY" | "COP" | "COU" | "CRC" | "CUC" | "CUP" | "CVE" | "CZK" | "DJF" | "DKK" | "DOP" | "DZD" | "EGP" | "ERN" | "ETB" | "EUR" | "FJD" | "FKP" | "GBP" | "GEL" | "GHS" | "GIP" | "GMD" | "GNF" | "GTQ" | "GYD" | "HKD" | "HNL" | "HRK" | "HTG" | "HUF" | "IDR" | "ILS" | "INR" | "IQD" | "IRR" | "ISK" | "JMD" | "JOD" | "JPY" | "KES" | "KGS" | "KHR" | "KMF" | "KPW" | "KRW" | "KWD" | "KYD" | "KZT" | "LAK" | "LBP" | "LKR" | "LRD" | "LSL" | "LYD" | "MAD" | "MDL" | "MGA" | "MKD" | "MMK" | "MNT" | "MOP" | "MRU" | "MUR" | "MVR" | "MWK" | "MXN" | "MXV" | "MYR" | "MZN" | "NAD" | "NGN" | "NIO" | "NOK" | "NPR" | "NZD" | "OMR" | "PAB" | "PEN" | "PGK" | "PHP" | "PKR" | "PLN" | "PYG" | "QAR" | "RON" | "RSD" | "RUB" | "RWF" | "SAR" | "SBD" | "SCR" | "SDG" | "SEK" | "SGD" | "SHP" | "SLL" | "SOS" | "SRD" | "SSP" | "STN" | "SVC" | "SYP" | "SZL" | "THB" | "TJS" | "TMT" | "TND" | "TOP" | "TRY" | "TTD" | "TWD" | "TZS" | "UAH" | "UGX" | "USD" | "USN" | "UYI" | "UYU" | "UYW" | "UZS" | "VED" | "VES" | "VND" | "VUV" | "WST" | "XAF" | "XAG" | "XAU" | "XBA" | "XBB" | "XBC" | "XBD" | "XCD" | "XDR" | "XOF" | "XPD" | "XPF" | "XPT" | "XSU" | "XTS" | "XUA" | "XXX" | "YER" | "ZAR" | "ZMW" | "ZWL";\n  /** @default "symbol" */\n  currencyCodeDisplay?: "symbol" | "iso_code";\n  /** @default "" */\n  defaultValue?: string;\n  /** @default "top" */\n  labelPosition?: "top" | "left";\n  /** @default "Computed at runtime" */\n  labelStyle?: Record<string, any>;\n  /** @default "Enter text" */\n  placeholderText?: string;\n  /** @default "Computed at runtime" */\n  textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default "Computed at runtime" */\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  icon?: string;\n  /** @default "left" */\n  iconPosition?: "left" | "right";\n  inputType?: string;\n  /** @default false */\n  loading?: boolean;\n  /** @default {"left":{"mode":"px","value":10},"right":{"mode":"px","value":10},"top":{"mode":"px","value":8},"bottom":{"mode":"px","value":8}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default {"mode":"%","value":30} */\n  labelWidth?: any;\n  /** @default true */\n  isVisible?: boolean;\n  inputType?: string;\n  minDecimals?: number;\n  maxDecimals?: number;\n  /** @default false */\n  stepper?: boolean;\n  /** @default 1 */\n  stepSize?: number;\n  minLength?: number;\n  maxLength?: number;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default false */\n  isRequired?: boolean;\n  /** @default "tooltip" */\n  errorMessagePlacement?: "tooltip" | "inline";\n  customValidationRule?: any;\n  /** @default "" */\n  customErrorMessage?: string;\n  onTextChanged?: SbEventFlow;\n  onSubmit?: SbEventFlow;\n  onFocus?: SbEventFlow;\n  onFocusOut?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbInputComponentState {\n  /** @default "" */\n  value?: any;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default "Computed at runtime" */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbInputMetaProperties {\n  text?: any;\n  /** @default false */\n  isTouched?: boolean;\n}\n```\n';
+var content23 = '## SbInput\n\nThe following is the type definition for the SbInput component.\n\n```typescript\ninterface SbInputProps {\n  /** @default "" */\n  label?: string;\n  /** @default "TEXT" */\n  inputType?: "TEXT" | "NUMBER" | "PERCENTAGE" | "CURRENCY" | "PASSWORD" | "EMAIL" | "URL";\n  /** @default "standard" */\n  numberFormat?: "unformatted" | "standard" | "compact" | "scientific" | "engineering";\n  /** @default "USD" */\n  currency?: "AED" | "AFN" | "ALL" | "AMD" | "ANG" | "AOA" | "ARS" | "AUD" | "AWG" | "AZN" | "BAM" | "BBD" | "BDT" | "BGN" | "BHD" | "BIF" | "BMD" | "BND" | "BOB" | "BOV" | "BRL" | "BSD" | "BTN" | "BWP" | "BYN" | "BZD" | "CAD" | "CDF" | "CHE" | "CHF" | "CHW" | "CLF" | "CLP" | "CNY" | "COP" | "COU" | "CRC" | "CUC" | "CUP" | "CVE" | "CZK" | "DJF" | "DKK" | "DOP" | "DZD" | "EGP" | "ERN" | "ETB" | "EUR" | "FJD" | "FKP" | "GBP" | "GEL" | "GHS" | "GIP" | "GMD" | "GNF" | "GTQ" | "GYD" | "HKD" | "HNL" | "HRK" | "HTG" | "HUF" | "IDR" | "ILS" | "INR" | "IQD" | "IRR" | "ISK" | "JMD" | "JOD" | "JPY" | "KES" | "KGS" | "KHR" | "KMF" | "KPW" | "KRW" | "KWD" | "KYD" | "KZT" | "LAK" | "LBP" | "LKR" | "LRD" | "LSL" | "LYD" | "MAD" | "MDL" | "MGA" | "MKD" | "MMK" | "MNT" | "MOP" | "MRU" | "MUR" | "MVR" | "MWK" | "MXN" | "MXV" | "MYR" | "MZN" | "NAD" | "NGN" | "NIO" | "NOK" | "NPR" | "NZD" | "OMR" | "PAB" | "PEN" | "PGK" | "PHP" | "PKR" | "PLN" | "PYG" | "QAR" | "RON" | "RSD" | "RUB" | "RWF" | "SAR" | "SBD" | "SCR" | "SDG" | "SEK" | "SGD" | "SHP" | "SLL" | "SOS" | "SRD" | "SSP" | "STN" | "SVC" | "SYP" | "SZL" | "THB" | "TJS" | "TMT" | "TND" | "TOP" | "TRY" | "TTD" | "TWD" | "TZS" | "UAH" | "UGX" | "USD" | "USN" | "UYI" | "UYU" | "UYW" | "UZS" | "VED" | "VES" | "VND" | "VUV" | "WST" | "XAF" | "XAG" | "XAU" | "XBA" | "XBB" | "XBC" | "XBD" | "XCD" | "XDR" | "XOF" | "XPD" | "XPF" | "XPT" | "XSU" | "XTS" | "XUA" | "XXX" | "YER" | "ZAR" | "ZMW" | "ZWL";\n  /** @default "symbol" */\n  currencyCodeDisplay?: "symbol" | "iso_code";\n  /** @default "" */\n  defaultValue?: string;\n  /** @default "top" */\n  labelPosition?: "top" | "left";\n  /** @default "Computed at runtime" */\n  labelStyle?: Record<string, any>;\n  /** @default "Enter text" */\n  placeholderText?: string;\n  /** @default "Computed at runtime" */\n  textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default "Computed at runtime" */\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  icon?: string;\n  /** @default "left" */\n  iconPosition?: "left" | "right";\n  inputType?: string;\n  /** @default false */\n  loading?: boolean;\n  /** @default {"left":{"mode":"px","value":10},"right":{"mode":"px","value":10},"top":{"mode":"px","value":8},"bottom":{"mode":"px","value":8}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default {"mode":"%","value":30} */\n  labelWidth?: any;\n  /** @default true */\n  isVisible?: boolean;\n  inputType?: string;\n  minDecimals?: number;\n  maxDecimals?: number;\n  /** @default false */\n  stepper?: boolean;\n  /** @default 1 */\n  stepSize?: number;\n  minLength?: number;\n  maxLength?: number;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default false */\n  isRequired?: boolean;\n  /** @default "tooltip" */\n  errorMessagePlacement?: "tooltip" | "inline";\n  customValidationRule?: any;\n  /** @default "" */\n  customErrorMessage?: string;\n  onTextChanged?: SbEventFlow;\n  onSubmit?: SbEventFlow;\n  onFocus?: SbEventFlow;\n  onFocusOut?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbInputComponentState {\n  /** @default "" */\n  value?: any;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default "Computed at runtime" */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbInputMetaProperties {\n  text?: any;\n  /** @default false */\n  isTouched?: boolean;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbModalPropsDocs.js
 init_cjs_shims();
-var content23 = '## SbModal\n\nThe following is the type definition for the SbModal component.\n\n```typescript\ninterface SbModalProps {\n  /** @default "vertical" */\n  layout?: "freeform" | "vertical" | "horizontal";\n  /** @default "top" */\n  verticalAlign?: "top" | "center" | "bottom" | "space-between" | "space-around";\n  /** @default "left" */\n  horizontalAlign?: "left" | "center" | "right" | "space-between" | "space-around";\n  /** @default {"mode":"px","value":12} */\n  spacing?: Dim;\n  /** @default {"top":{"mode":"px","value":12},"bottom":{"mode":"px","value":12},"left":{"mode":"px","value":12},"right":{"mode":"px","value":12}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default 12 */\n  columns?: number;\n  /** @default 12 */\n  rowHeight?: Dim;\n  /** @default "Computed at runtime" */\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** @default true */\n  hasBackdrop?: boolean;\n  /** @default "MEDIUM" */\n  widthPreset?: any;\n  /** @default false */\n  loading?: boolean;\n  /** @default true */\n  closeOnClickOutside?: boolean;\n  onOpen?: SbEventFlow;\n  onClose?: SbEventFlow;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbModalMetaProperties {\n  /** @default false */\n  isOpen?: boolean;\n}\n```\n';
+var content24 = '## SbModal\n\nThe following is the type definition for the SbModal component.\n\n```typescript\ninterface SbModalProps {\n  /** @default "vertical" */\n  layout?: "freeform" | "vertical" | "horizontal";\n  /** @default "top" */\n  verticalAlign?: "top" | "center" | "bottom" | "space-between" | "space-around";\n  /** @default "left" */\n  horizontalAlign?: "left" | "center" | "right" | "space-between" | "space-around";\n  /** @default {"mode":"px","value":12} */\n  spacing?: Dim;\n  /** @default {"top":{"mode":"px","value":12},"bottom":{"mode":"px","value":12},"left":{"mode":"px","value":12},"right":{"mode":"px","value":12}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default 12 */\n  columns?: number;\n  /** @default 12 */\n  rowHeight?: Dim;\n  /** @default "Computed at runtime" */\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** @default true */\n  hasBackdrop?: boolean;\n  /** @default "MEDIUM" */\n  widthPreset?: any;\n  /** @default false */\n  loading?: boolean;\n  /** @default true */\n  closeOnClickOutside?: boolean;\n  onOpen?: SbEventFlow;\n  onClose?: SbEventFlow;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbModalMetaProperties {\n  /** @default false */\n  isOpen?: boolean;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbPagePropsDocs.js
 init_cjs_shims();
-var content24 = '## SbPage\n\nThe following is the type definition for the SbPage component.\n\n```typescript\ninterface SbPageProps {\n  /** @default {"mode":"fill","value":1} */\n  width?: Dim;\n  /** @default {"mode":"fill","value":1} */\n  height?: Dim;\n  /** @default false */\n  loading?: boolean;\n  onLoad?: SbEventFlow;\n}\n```\n';
+var content25 = '## SbPage\n\nThe following is the type definition for the SbPage component.\n\n```typescript\ninterface SbPageProps {\n  /** @default {"mode":"fill","value":1} */\n  width?: Dim;\n  /** @default {"mode":"fill","value":1} */\n  height?: Dim;\n  /** @default false */\n  loading?: boolean;\n  onLoad?: SbEventFlow;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbSectionPropsDocs.js
 init_cjs_shims();
-var content25 = '## SbSection\n\nThe following is the type definition for the SbSection component.\n\n```typescript\ninterface SbSectionProps {\n  columns?: any;\n  /** @default {"left":{"mode":"px","value":0},"right":{"mode":"px","value":0},"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default {"mode":"fill","value":1} */\n  width?: Dim;\n  /** @default {"mode":"fit"} */\n  height?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default false */\n  sticky?: boolean;\n  /** @default true */\n  isVisible?: boolean;\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default false */\n  loading?: boolean;\n}\n```\n';
+var content26 = '## SbSection\n\nThe following is the type definition for the SbSection component.\n\n```typescript\ninterface SbSectionProps {\n  columns?: any;\n  /** @default {"left":{"mode":"px","value":0},"right":{"mode":"px","value":0},"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0}} */\n  padding?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default {"mode":"fill","value":1} */\n  width?: Dim;\n  /** @default {"mode":"fit"} */\n  height?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default false */\n  sticky?: boolean;\n  /** @default true */\n  isVisible?: boolean;\n  backgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default false */\n  loading?: boolean;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbSlideoutPropsDocs.js
 init_cjs_shims();
-var content26 = '## SbSlideout\n\nThe following is the type definition for the SbSlideout component.\n\n```typescript\ninterface SbSlideoutProps {\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  /** @default false */\n  loading?: boolean;\n}\n```\n';
+var content27 = '## SbSlideout\n\nThe following is the type definition for the SbSlideout component.\n\n```typescript\ninterface SbSlideoutProps {\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  /** @default false */\n  loading?: boolean;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbSwitchPropsDocs.js
 init_cjs_shims();
-var content27 = '## SbSwitch\n\nThe following is the type definition for the SbSwitch component.\n\n```typescript\ninterface SbSwitchProps {\n  /** @default "" */\n  label?: string;\n  /** @default true */\n  defaultChecked?: boolean;\n  /** @default "right" */\n  labelPosition?: "left" | "right";\n  /** @default "Computed at runtime" */\n  labelStyle?: Record<string, any>;\n  loadingAnimation?: boolean;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  isRequired?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default "tooltip" */\n  errorMessagePlacement?: "tooltip" | "inline";\n  /** @default "" */\n  customValidationRule?: string;\n  /** @default "" */\n  customErrorMessage?: string;\n  onSwitchChange?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbSwitchComponentState {\n  isToggledOn?: boolean;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default true */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbSwitchMetaProperties {\n  /** @default false */\n  isTouched?: boolean;\n  isChecked?: boolean;\n}\n```\n';
+var content28 = '## SbSwitch\n\nThe following is the type definition for the SbSwitch component.\n\n```typescript\ninterface SbSwitchProps {\n  /** @default "" */\n  label?: string;\n  /** @default true */\n  defaultChecked?: boolean;\n  /** @default "right" */\n  labelPosition?: "left" | "right";\n  /** @default "Computed at runtime" */\n  labelStyle?: Record<string, any>;\n  loadingAnimation?: boolean;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  isRequired?: boolean;\n  /** @default false */\n  isDisabled?: boolean;\n  /** @default "tooltip" */\n  errorMessagePlacement?: "tooltip" | "inline";\n  /** @default "" */\n  customValidationRule?: string;\n  /** @default "" */\n  customErrorMessage?: string;\n  onSwitchChange?: SbEventFlow;\n}\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbSwitchComponentState {\n  isToggledOn?: boolean;\n  /** @default {} */\n  validationErrors?: any;\n  /** @default true */\n  isValid?: boolean;\n  showError?: boolean;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbSwitchMetaProperties {\n  /** @default false */\n  isTouched?: boolean;\n  isChecked?: boolean;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbTablePropsDocs.js
 init_cjs_shims();
-var content28 = '## SbTable\n\nThe following is the type definition for the SbTable component.\n\n```typescript\ninterface SbTableProps {\n  /** @default "" */\n  header?: string;\n  tableData?: any;\n  columns?: Record<string, SbTableColumnsProperties>;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  /** @default true */\n  isFilterable?: boolean;\n  defaultFilters?: any;\n  /** @default false */\n  multiRowSelection?: boolean;\n  /** @default true */\n  isSearchable?: boolean;\n  /** @default true */\n  isDownloadable?: boolean;\n  /** @default "none" */\n  paginationType?: "none" | "client-side" | "server-side";\n  configuredPageSize?: any;\n  defaultSort?: Record<string, any>;\n  defaultSearchText?: string;\n  searchPlaceholder?: string;\n  defaultSelectedRow?: number;\n  showColumnBorders?: boolean;\n  /** @default "Computed at runtime" */\n  headerProps.textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  columnHeaderProps.textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  cellProps.textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  backgroundColor?: string;\n  /** @default "Computed at runtime" */\n  selectedRowBackgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default "Computed at runtime" */\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** @default "medium" */\n  rowDensity?: "extra-small" | "small" | "medium" | "large";\n  /** @default -1 */\n  maxLinesPerRow?: number;\n  /** @default false */\n  loading?: boolean;\n  isVisible?: boolean;\n  collapseWhenHidden?: boolean;\n  /** @default "Computed at runtime" */\n  searchProps.textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  searchProps.backgroundColor?: string;\n  searchProps.border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default "Computed at runtime" */\n  searchProps.borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  onRowClick?: SbEventFlow;\n  onRowSelected?: SbEventFlow;\n  onPageChange?: SbEventFlow;\n  onFiltersChanged?: SbEventFlow;\n  onSearchTextChanged?: SbEventFlow;\n}\n\n// Referenced interfaces:\n\ninterface SbTableColumnsProperties {\n  label?: string;\n  /** @default "text" */\n  columnType?: "text" | "number" | "currency" | "percentage" | "image" | "video" | "date" | "button" | "link" | "boolean" | "tags" | "email";\n  notation?: "unformatted" | "standard" | "compact" | "scientific" | "engineering";\n  minimumFractionDigits?: number;\n  maximumFractionDigits?: number;\n  /** @default "USD" */\n  currency?: "AED" | "AFN" | "ALL" | "AMD" | "ANG" | "AOA" | "ARS" | "AUD" | "AWG" | "AZN" | "BAM" | "BBD" | "BDT" | "BGN" | "BHD" | "BIF" | "BMD" | "BND" | "BOB" | "BOV" | "BRL" | "BSD" | "BTN" | "BWP" | "BYN" | "BZD" | "CAD" | "CDF" | "CHE" | "CHF" | "CHW" | "CLF" | "CLP" | "CNY" | "COP" | "COU" | "CRC" | "CUC" | "CUP" | "CVE" | "CZK" | "DJF" | "DKK" | "DOP" | "DZD" | "EGP" | "ERN" | "ETB" | "EUR" | "FJD" | "FKP" | "GBP" | "GEL" | "GHS" | "GIP" | "GMD" | "GNF" | "GTQ" | "GYD" | "HKD" | "HNL" | "HRK" | "HTG" | "HUF" | "IDR" | "ILS" | "INR" | "IQD" | "IRR" | "ISK" | "JMD" | "JOD" | "JPY" | "KES" | "KGS" | "KHR" | "KMF" | "KPW" | "KRW" | "KWD" | "KYD" | "KZT" | "LAK" | "LBP" | "LKR" | "LRD" | "LSL" | "LYD" | "MAD" | "MDL" | "MGA" | "MKD" | "MMK" | "MNT" | "MOP" | "MRU" | "MUR" | "MVR" | "MWK" | "MXN" | "MXV" | "MYR" | "MZN" | "NAD" | "NGN" | "NIO" | "NOK" | "NPR" | "NZD" | "OMR" | "PAB" | "PEN" | "PGK" | "PHP" | "PKR" | "PLN" | "PYG" | "QAR" | "RON" | "RSD" | "RUB" | "RWF" | "SAR" | "SBD" | "SCR" | "SDG" | "SEK" | "SGD" | "SHP" | "SLL" | "SOS" | "SRD" | "SSP" | "STN" | "SVC" | "SYP" | "SZL" | "THB" | "TJS" | "TMT" | "TND" | "TOP" | "TRY" | "TTD" | "TWD" | "TZS" | "UAH" | "UGX" | "USD" | "USN" | "UYI" | "UYU" | "UYW" | "UZS" | "VED" | "VES" | "VND" | "VUV" | "WST" | "XAF" | "XAG" | "XAU" | "XBA" | "XBB" | "XBC" | "XBD" | "XCD" | "XDR" | "XOF" | "XPD" | "XPF" | "XPT" | "XSU" | "XTS" | "XUA" | "XXX" | "YER" | "ZAR" | "ZMW" | "ZWL";\n  /** @default false */\n  openImageUrl?: boolean;\n  inputFormat?: "undefined" | "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  outputFormat?: "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  manageTimezone?: boolean;\n  valueTimezone?: "undefined" | "Etc/UTC" | "UTC" | "Africa/Abidjan" | "Africa/Accra" | "Africa/Addis_Ababa" | "Africa/Algiers" | "Africa/Asmara" | "Africa/Asmera" | "Africa/Bamako" | "Africa/Bangui" | "Africa/Banjul" | "Africa/Bissau" | "Africa/Blantyre" | "Africa/Brazzaville" | "Africa/Bujumbura" | "Africa/Cairo" | "Africa/Casablanca" | "Africa/Ceuta" | "Africa/Conakry" | "Africa/Dakar" | "Africa/Dar_es_Salaam" | "Africa/Djibouti" | "Africa/Douala" | "Africa/El_Aaiun" | "Africa/Freetown" | "Africa/Gaborone" | "Africa/Harare" | "Africa/Johannesburg" | "Africa/Juba" | "Africa/Kampala" | "Africa/Khartoum" | "Africa/Kigali" | "Africa/Kinshasa" | "Africa/Lagos" | "Africa/Libreville" | "Africa/Lome" | "Africa/Luanda" | "Africa/Lubumbashi" | "Africa/Lusaka" | "Africa/Malabo" | "Africa/Maputo" | "Africa/Maseru" | "Africa/Mbabane" | "Africa/Mogadishu" | "Africa/Monrovia" | "Africa/Nairobi" | "Africa/Ndjamena" | "Africa/Niamey" | "Africa/Nouakchott" | "Africa/Ouagadougou" | "Africa/Porto-Novo" | "Africa/Sao_Tome" | "Africa/Timbuktu" | "Africa/Tripoli" | "Africa/Tunis" | "Africa/Windhoek" | "America/Adak" | "America/Anchorage" | "America/Anguilla" | "America/Antigua" | "America/Araguaina" | "America/Argentina/Buenos_Aires" | "America/Argentina/Catamarca" | "America/Argentina/ComodRivadavia" | "America/Argentina/Cordoba" | "America/Argentina/Jujuy" | "America/Argentina/La_Rioja" | "America/Argentina/Mendoza" | "America/Argentina/Rio_Gallegos" | "America/Argentina/Salta" | "America/Argentina/San_Juan" | "America/Argentina/San_Luis" | "America/Argentina/Tucuman" | "America/Argentina/Ushuaia" | "America/Aruba" | "America/Asuncion" | "America/Atikokan" | "America/Atka" | "America/Bahia" | "America/Bahia_Banderas" | "America/Barbados" | "America/Belem" | "America/Belize" | "America/Blanc-Sablon" | "America/Boa_Vista" | "America/Bogota" | "America/Boise" | "America/Buenos_Aires" | "America/Cambridge_Bay" | "America/Campo_Grande" | "America/Cancun" | "America/Caracas" | "America/Catamarca" | "America/Cayenne" | "America/Cayman" | "America/Chicago" | "America/Chihuahua" | "America/Ciudad_Juarez" | "America/Coral_Harbour" | "America/Cordoba" | "America/Costa_Rica" | "America/Creston" | "America/Cuiaba" | "America/Curacao" | "America/Danmarkshavn" | "America/Dawson" | "America/Dawson_Creek" | "America/Denver" | "America/Detroit" | "America/Dominica" | "America/Edmonton" | "America/Eirunepe" | "America/El_Salvador" | "America/Ensenada" | "America/Fort_Nelson" | "America/Fort_Wayne" | "America/Fortaleza" | "America/Glace_Bay" | "America/Godthab" | "America/Goose_Bay" | "America/Grand_Turk" | "America/Grenada" | "America/Guadeloupe" | "America/Guatemala" | "America/Guayaquil" | "America/Guyana" | "America/Halifax" | "America/Havana" | "America/Hermosillo" | "America/Indiana/Indianapolis" | "America/Indiana/Knox" | "America/Indiana/Marengo" | "America/Indiana/Petersburg" | "America/Indiana/Tell_City" | "America/Indiana/Vevay" | "America/Indiana/Vincennes" | "America/Indiana/Winamac" | "America/Indianapolis" | "America/Inuvik" | "America/Iqaluit" | "America/Jamaica" | "America/Jujuy" | "America/Juneau" | "America/Kentucky/Louisville" | "America/Kentucky/Monticello" | "America/Knox_IN" | "America/Kralendijk" | "America/La_Paz" | "America/Lima" | "America/Los_Angeles" | "America/Louisville" | "America/Lower_Princes" | "America/Maceio" | "America/Managua" | "America/Manaus" | "America/Marigot" | "America/Martinique" | "America/Matamoros" | "America/Mazatlan" | "America/Mendoza" | "America/Menominee" | "America/Merida" | "America/Metlakatla" | "America/Mexico_City" | "America/Miquelon" | "America/Moncton" | "America/Monterrey" | "America/Montevideo" | "America/Montreal" | "America/Montserrat" | "America/Nassau" | "America/New_York" | "America/Nipigon" | "America/Nome" | "America/Noronha" | "America/North_Dakota/Beulah" | "America/North_Dakota/Center" | "America/North_Dakota/New_Salem" | "America/Nuuk" | "America/Ojinaga" | "America/Panama" | "America/Pangnirtung" | "America/Paramaribo" | "America/Phoenix" | "America/Port-au-Prince" | "America/Port_of_Spain" | "America/Porto_Acre" | "America/Porto_Velho" | "America/Puerto_Rico" | "America/Punta_Arenas" | "America/Rainy_River" | "America/Rankin_Inlet" | "America/Recife" | "America/Regina" | "America/Resolute" | "America/Rio_Branco" | "America/Rosario" | "America/Santa_Isabel" | "America/Santarem" | "America/Santiago" | "America/Santo_Domingo" | "America/Sao_Paulo" | "America/Scoresbysund" | "America/Shiprock" | "America/Sitka" | "America/St_Barthelemy" | "America/St_Johns" | "America/St_Kitts" | "America/St_Lucia" | "America/St_Thomas" | "America/St_Vincent" | "America/Swift_Current" | "America/Tegucigalpa" | "America/Thule" | "America/Thunder_Bay" | "America/Tijuana" | "America/Toronto" | "America/Tortola" | "America/Vancouver" | "America/Virgin" | "America/Whitehorse" | "America/Winnipeg" | "America/Yakutat" | "America/Yellowknife" | "Antarctica/Casey" | "Antarctica/Davis" | "Antarctica/DumontDUrville" | "Antarctica/Macquarie" | "Antarctica/Mawson" | "Antarctica/McMurdo" | "Antarctica/Palmer" | "Antarctica/Rothera" | "Antarctica/South_Pole" | "Antarctica/Syowa" | "Antarctica/Troll" | "Antarctica/Vostok" | "Arctic/Longyearbyen" | "Asia/Aden" | "Asia/Almaty" | "Asia/Amman" | "Asia/Anadyr" | "Asia/Aqtau" | "Asia/Aqtobe" | "Asia/Ashgabat" | "Asia/Ashkhabad" | "Asia/Atyrau" | "Asia/Baghdad" | "Asia/Bahrain" | "Asia/Baku" | "Asia/Bangkok" | "Asia/Barnaul" | "Asia/Beirut" | "Asia/Bishkek" | "Asia/Brunei" | "Asia/Calcutta" | "Asia/Chita" | "Asia/Choibalsan" | "Asia/Chongqing" | "Asia/Chungking" | "Asia/Colombo" | "Asia/Dacca" | "Asia/Damascus" | "Asia/Dhaka" | "Asia/Dili" | "Asia/Dubai" | "Asia/Dushanbe" | "Asia/Famagusta" | "Asia/Gaza" | "Asia/Harbin" | "Asia/Hebron" | "Asia/Ho_Chi_Minh" | "Asia/Hong_Kong" | "Asia/Hovd" | "Asia/Irkutsk" | "Asia/Istanbul" | "Asia/Jakarta" | "Asia/Jayapura" | "Asia/Jerusalem" | "Asia/Kabul" | "Asia/Kamchatka" | "Asia/Karachi" | "Asia/Kashgar" | "Asia/Kathmandu" | "Asia/Katmandu" | "Asia/Khandyga" | "Asia/Kolkata" | "Asia/Krasnoyarsk" | "Asia/Kuala_Lumpur" | "Asia/Kuching" | "Asia/Kuwait" | "Asia/Macao" | "Asia/Macau" | "Asia/Magadan" | "Asia/Makassar" | "Asia/Manila" | "Asia/Muscat" | "Asia/Nicosia" | "Asia/Novokuznetsk" | "Asia/Novosibirsk" | "Asia/Omsk" | "Asia/Oral" | "Asia/Phnom_Penh" | "Asia/Pontianak" | "Asia/Pyongyang" | "Asia/Qatar" | "Asia/Qostanay" | "Asia/Qyzylorda" | "Asia/Rangoon" | "Asia/Riyadh" | "Asia/Saigon" | "Asia/Sakhalin" | "Asia/Samarkand" | "Asia/Seoul" | "Asia/Shanghai" | "Asia/Singapore" | "Asia/Srednekolymsk" | "Asia/Taipei" | "Asia/Tashkent" | "Asia/Tbilisi" | "Asia/Tehran" | "Asia/Tel_Aviv" | "Asia/Thimbu" | "Asia/Thimphu" | "Asia/Tokyo" | "Asia/Tomsk" | "Asia/Ujung_Pandang" | "Asia/Ulaanbaatar" | "Asia/Ulan_Bator" | "Asia/Urumqi" | "Asia/Ust-Nera" | "Asia/Vientiane" | "Asia/Vladivostok" | "Asia/Yakutsk" | "Asia/Yangon" | "Asia/Yekaterinburg" | "Asia/Yerevan" | "Atlantic/Azores" | "Atlantic/Bermuda" | "Atlantic/Canary" | "Atlantic/Cape_Verde" | "Atlantic/Faeroe" | "Atlantic/Faroe" | "Atlantic/Jan_Mayen" | "Atlantic/Madeira" | "Atlantic/Reykjavik" | "Atlantic/South_Georgia" | "Atlantic/St_Helena" | "Atlantic/Stanley" | "Australia/ACT" | "Australia/Adelaide" | "Australia/Brisbane" | "Australia/Broken_Hill" | "Australia/Canberra" | "Australia/Currie" | "Australia/Darwin" | "Australia/Eucla" | "Australia/Hobart" | "Australia/LHI" | "Australia/Lindeman" | "Australia/Lord_Howe" | "Australia/Melbourne" | "Australia/NSW" | "Australia/North" | "Australia/Perth" | "Australia/Queensland" | "Australia/South" | "Australia/Sydney" | "Australia/Tasmania" | "Australia/Victoria" | "Australia/West" | "Australia/Yancowinna" | "Brazil/Acre" | "Brazil/DeNoronha" | "Brazil/East" | "Brazil/West" | "CET" | "CST6CDT" | "Canada/Atlantic" | "Canada/Central" | "Canada/Eastern" | "Canada/Mountain" | "Canada/Newfoundland" | "Canada/Pacific" | "Canada/Saskatchewan" | "Canada/Yukon" | "Chile/Continental" | "Chile/EasterIsland" | "Cuba" | "EET" | "EST" | "EST5EDT" | "Egypt" | "Eire" | "Etc/GMT" | "Etc/GMT+0" | "Etc/GMT+1" | "Etc/GMT+10" | "Etc/GMT+11" | "Etc/GMT+12" | "Etc/GMT+2" | "Etc/GMT+3" | "Etc/GMT+4" | "Etc/GMT+5" | "Etc/GMT+6" | "Etc/GMT+7" | "Etc/GMT+8" | "Etc/GMT+9" | "Etc/GMT-0" | "Etc/GMT-1" | "Etc/GMT-10" | "Etc/GMT-11" | "Etc/GMT-12" | "Etc/GMT-13" | "Etc/GMT-14" | "Etc/GMT-2" | "Etc/GMT-3" | "Etc/GMT-4" | "Etc/GMT-5" | "Etc/GMT-6" | "Etc/GMT-7" | "Etc/GMT-8" | "Etc/GMT-9" | "Etc/GMT0" | "Etc/Greenwich" | "Etc/UCT" | "Etc/Universal" | "Etc/Zulu" | "Europe/Amsterdam" | "Europe/Andorra" | "Europe/Astrakhan" | "Europe/Athens" | "Europe/Belfast" | "Europe/Belgrade" | "Europe/Berlin" | "Europe/Bratislava" | "Europe/Brussels" | "Europe/Bucharest" | "Europe/Budapest" | "Europe/Busingen" | "Europe/Chisinau" | "Europe/Copenhagen" | "Europe/Dublin" | "Europe/Gibraltar" | "Europe/Guernsey" | "Europe/Helsinki" | "Europe/Isle_of_Man" | "Europe/Istanbul" | "Europe/Jersey" | "Europe/Kaliningrad" | "Europe/Kiev" | "Europe/Kirov" | "Europe/Kyiv" | "Europe/Lisbon" | "Europe/Ljubljana" | "Europe/London" | "Europe/Luxembourg" | "Europe/Madrid" | "Europe/Malta" | "Europe/Mariehamn" | "Europe/Minsk" | "Europe/Monaco" | "Europe/Moscow" | "Europe/Nicosia" | "Europe/Oslo" | "Europe/Paris" | "Europe/Podgorica" | "Europe/Prague" | "Europe/Riga" | "Europe/Rome" | "Europe/Samara" | "Europe/San_Marino" | "Europe/Sarajevo" | "Europe/Saratov" | "Europe/Simferopol" | "Europe/Skopje" | "Europe/Sofia" | "Europe/Stockholm" | "Europe/Tallinn" | "Europe/Tirane" | "Europe/Tiraspol" | "Europe/Ulyanovsk" | "Europe/Uzhgorod" | "Europe/Vaduz" | "Europe/Vatican" | "Europe/Vienna" | "Europe/Vilnius" | "Europe/Volgograd" | "Europe/Warsaw" | "Europe/Zagreb" | "Europe/Zaporozhye" | "Europe/Zurich" | "GB" | "GB-Eire" | "GMT" | "GMT+0" | "GMT-0" | "GMT0" | "Greenwich" | "HST" | "Hongkong" | "Iceland" | "Indian/Antananarivo" | "Indian/Chagos" | "Indian/Christmas" | "Indian/Cocos" | "Indian/Comoro" | "Indian/Kerguelen" | "Indian/Mahe" | "Indian/Maldives" | "Indian/Mauritius" | "Indian/Mayotte" | "Indian/Reunion" | "Iran" | "Israel" | "Jamaica" | "Japan" | "Kwajalein" | "Libya" | "MET" | "MST" | "MST7MDT" | "Mexico/BajaNorte" | "Mexico/BajaSur" | "Mexico/General" | "NZ" | "NZ-CHAT" | "Navajo" | "PRC" | "PST8PDT" | "Pacific/Apia" | "Pacific/Auckland" | "Pacific/Bougainville" | "Pacific/Chatham" | "Pacific/Chuuk" | "Pacific/Easter" | "Pacific/Efate" | "Pacific/Enderbury" | "Pacific/Fakaofo" | "Pacific/Fiji" | "Pacific/Funafuti" | "Pacific/Galapagos" | "Pacific/Gambier" | "Pacific/Guadalcanal" | "Pacific/Guam" | "Pacific/Honolulu" | "Pacific/Johnston" | "Pacific/Kanton" | "Pacific/Kiritimati" | "Pacific/Kosrae" | "Pacific/Kwajalein" | "Pacific/Majuro" | "Pacific/Marquesas" | "Pacific/Midway" | "Pacific/Nauru" | "Pacific/Niue" | "Pacific/Norfolk" | "Pacific/Noumea" | "Pacific/Pago_Pago" | "Pacific/Palau" | "Pacific/Pitcairn" | "Pacific/Pohnpei" | "Pacific/Ponape" | "Pacific/Port_Moresby" | "Pacific/Rarotonga" | "Pacific/Saipan" | "Pacific/Samoa" | "Pacific/Tahiti" | "Pacific/Tarawa" | "Pacific/Tongatapu" | "Pacific/Truk" | "Pacific/Wake" | "Pacific/Wallis" | "Pacific/Yap" | "Poland" | "Portugal" | "ROC" | "ROK" | "Singapore" | "Turkey" | "UCT" | "US/Alaska" | "US/Aleutian" | "US/Arizona" | "US/Central" | "US/East-Indiana" | "US/Eastern" | "US/Hawaii" | "US/Indiana-Starke" | "US/Michigan" | "US/Mountain" | "US/Pacific" | "US/Samoa" | "Universal" | "W-SU" | "WET" | "Zulu";\n  displayTimezone?: "undefined" | "Etc/UTC" | "UTC" | "Africa/Abidjan" | "Africa/Accra" | "Africa/Addis_Ababa" | "Africa/Algiers" | "Africa/Asmara" | "Africa/Asmera" | "Africa/Bamako" | "Africa/Bangui" | "Africa/Banjul" | "Africa/Bissau" | "Africa/Blantyre" | "Africa/Brazzaville" | "Africa/Bujumbura" | "Africa/Cairo" | "Africa/Casablanca" | "Africa/Ceuta" | "Africa/Conakry" | "Africa/Dakar" | "Africa/Dar_es_Salaam" | "Africa/Djibouti" | "Africa/Douala" | "Africa/El_Aaiun" | "Africa/Freetown" | "Africa/Gaborone" | "Africa/Harare" | "Africa/Johannesburg" | "Africa/Juba" | "Africa/Kampala" | "Africa/Khartoum" | "Africa/Kigali" | "Africa/Kinshasa" | "Africa/Lagos" | "Africa/Libreville" | "Africa/Lome" | "Africa/Luanda" | "Africa/Lubumbashi" | "Africa/Lusaka" | "Africa/Malabo" | "Africa/Maputo" | "Africa/Maseru" | "Africa/Mbabane" | "Africa/Mogadishu" | "Africa/Monrovia" | "Africa/Nairobi" | "Africa/Ndjamena" | "Africa/Niamey" | "Africa/Nouakchott" | "Africa/Ouagadougou" | "Africa/Porto-Novo" | "Africa/Sao_Tome" | "Africa/Timbuktu" | "Africa/Tripoli" | "Africa/Tunis" | "Africa/Windhoek" | "America/Adak" | "America/Anchorage" | "America/Anguilla" | "America/Antigua" | "America/Araguaina" | "America/Argentina/Buenos_Aires" | "America/Argentina/Catamarca" | "America/Argentina/ComodRivadavia" | "America/Argentina/Cordoba" | "America/Argentina/Jujuy" | "America/Argentina/La_Rioja" | "America/Argentina/Mendoza" | "America/Argentina/Rio_Gallegos" | "America/Argentina/Salta" | "America/Argentina/San_Juan" | "America/Argentina/San_Luis" | "America/Argentina/Tucuman" | "America/Argentina/Ushuaia" | "America/Aruba" | "America/Asuncion" | "America/Atikokan" | "America/Atka" | "America/Bahia" | "America/Bahia_Banderas" | "America/Barbados" | "America/Belem" | "America/Belize" | "America/Blanc-Sablon" | "America/Boa_Vista" | "America/Bogota" | "America/Boise" | "America/Buenos_Aires" | "America/Cambridge_Bay" | "America/Campo_Grande" | "America/Cancun" | "America/Caracas" | "America/Catamarca" | "America/Cayenne" | "America/Cayman" | "America/Chicago" | "America/Chihuahua" | "America/Ciudad_Juarez" | "America/Coral_Harbour" | "America/Cordoba" | "America/Costa_Rica" | "America/Creston" | "America/Cuiaba" | "America/Curacao" | "America/Danmarkshavn" | "America/Dawson" | "America/Dawson_Creek" | "America/Denver" | "America/Detroit" | "America/Dominica" | "America/Edmonton" | "America/Eirunepe" | "America/El_Salvador" | "America/Ensenada" | "America/Fort_Nelson" | "America/Fort_Wayne" | "America/Fortaleza" | "America/Glace_Bay" | "America/Godthab" | "America/Goose_Bay" | "America/Grand_Turk" | "America/Grenada" | "America/Guadeloupe" | "America/Guatemala" | "America/Guayaquil" | "America/Guyana" | "America/Halifax" | "America/Havana" | "America/Hermosillo" | "America/Indiana/Indianapolis" | "America/Indiana/Knox" | "America/Indiana/Marengo" | "America/Indiana/Petersburg" | "America/Indiana/Tell_City" | "America/Indiana/Vevay" | "America/Indiana/Vincennes" | "America/Indiana/Winamac" | "America/Indianapolis" | "America/Inuvik" | "America/Iqaluit" | "America/Jamaica" | "America/Jujuy" | "America/Juneau" | "America/Kentucky/Louisville" | "America/Kentucky/Monticello" | "America/Knox_IN" | "America/Kralendijk" | "America/La_Paz" | "America/Lima" | "America/Los_Angeles" | "America/Louisville" | "America/Lower_Princes" | "America/Maceio" | "America/Managua" | "America/Manaus" | "America/Marigot" | "America/Martinique" | "America/Matamoros" | "America/Mazatlan" | "America/Mendoza" | "America/Menominee" | "America/Merida" | "America/Metlakatla" | "America/Mexico_City" | "America/Miquelon" | "America/Moncton" | "America/Monterrey" | "America/Montevideo" | "America/Montreal" | "America/Montserrat" | "America/Nassau" | "America/New_York" | "America/Nipigon" | "America/Nome" | "America/Noronha" | "America/North_Dakota/Beulah" | "America/North_Dakota/Center" | "America/North_Dakota/New_Salem" | "America/Nuuk" | "America/Ojinaga" | "America/Panama" | "America/Pangnirtung" | "America/Paramaribo" | "America/Phoenix" | "America/Port-au-Prince" | "America/Port_of_Spain" | "America/Porto_Acre" | "America/Porto_Velho" | "America/Puerto_Rico" | "America/Punta_Arenas" | "America/Rainy_River" | "America/Rankin_Inlet" | "America/Recife" | "America/Regina" | "America/Resolute" | "America/Rio_Branco" | "America/Rosario" | "America/Santa_Isabel" | "America/Santarem" | "America/Santiago" | "America/Santo_Domingo" | "America/Sao_Paulo" | "America/Scoresbysund" | "America/Shiprock" | "America/Sitka" | "America/St_Barthelemy" | "America/St_Johns" | "America/St_Kitts" | "America/St_Lucia" | "America/St_Thomas" | "America/St_Vincent" | "America/Swift_Current" | "America/Tegucigalpa" | "America/Thule" | "America/Thunder_Bay" | "America/Tijuana" | "America/Toronto" | "America/Tortola" | "America/Vancouver" | "America/Virgin" | "America/Whitehorse" | "America/Winnipeg" | "America/Yakutat" | "America/Yellowknife" | "Antarctica/Casey" | "Antarctica/Davis" | "Antarctica/DumontDUrville" | "Antarctica/Macquarie" | "Antarctica/Mawson" | "Antarctica/McMurdo" | "Antarctica/Palmer" | "Antarctica/Rothera" | "Antarctica/South_Pole" | "Antarctica/Syowa" | "Antarctica/Troll" | "Antarctica/Vostok" | "Arctic/Longyearbyen" | "Asia/Aden" | "Asia/Almaty" | "Asia/Amman" | "Asia/Anadyr" | "Asia/Aqtau" | "Asia/Aqtobe" | "Asia/Ashgabat" | "Asia/Ashkhabad" | "Asia/Atyrau" | "Asia/Baghdad" | "Asia/Bahrain" | "Asia/Baku" | "Asia/Bangkok" | "Asia/Barnaul" | "Asia/Beirut" | "Asia/Bishkek" | "Asia/Brunei" | "Asia/Calcutta" | "Asia/Chita" | "Asia/Choibalsan" | "Asia/Chongqing" | "Asia/Chungking" | "Asia/Colombo" | "Asia/Dacca" | "Asia/Damascus" | "Asia/Dhaka" | "Asia/Dili" | "Asia/Dubai" | "Asia/Dushanbe" | "Asia/Famagusta" | "Asia/Gaza" | "Asia/Harbin" | "Asia/Hebron" | "Asia/Ho_Chi_Minh" | "Asia/Hong_Kong" | "Asia/Hovd" | "Asia/Irkutsk" | "Asia/Istanbul" | "Asia/Jakarta" | "Asia/Jayapura" | "Asia/Jerusalem" | "Asia/Kabul" | "Asia/Kamchatka" | "Asia/Karachi" | "Asia/Kashgar" | "Asia/Kathmandu" | "Asia/Katmandu" | "Asia/Khandyga" | "Asia/Kolkata" | "Asia/Krasnoyarsk" | "Asia/Kuala_Lumpur" | "Asia/Kuching" | "Asia/Kuwait" | "Asia/Macao" | "Asia/Macau" | "Asia/Magadan" | "Asia/Makassar" | "Asia/Manila" | "Asia/Muscat" | "Asia/Nicosia" | "Asia/Novokuznetsk" | "Asia/Novosibirsk" | "Asia/Omsk" | "Asia/Oral" | "Asia/Phnom_Penh" | "Asia/Pontianak" | "Asia/Pyongyang" | "Asia/Qatar" | "Asia/Qostanay" | "Asia/Qyzylorda" | "Asia/Rangoon" | "Asia/Riyadh" | "Asia/Saigon" | "Asia/Sakhalin" | "Asia/Samarkand" | "Asia/Seoul" | "Asia/Shanghai" | "Asia/Singapore" | "Asia/Srednekolymsk" | "Asia/Taipei" | "Asia/Tashkent" | "Asia/Tbilisi" | "Asia/Tehran" | "Asia/Tel_Aviv" | "Asia/Thimbu" | "Asia/Thimphu" | "Asia/Tokyo" | "Asia/Tomsk" | "Asia/Ujung_Pandang" | "Asia/Ulaanbaatar" | "Asia/Ulan_Bator" | "Asia/Urumqi" | "Asia/Ust-Nera" | "Asia/Vientiane" | "Asia/Vladivostok" | "Asia/Yakutsk" | "Asia/Yangon" | "Asia/Yekaterinburg" | "Asia/Yerevan" | "Atlantic/Azores" | "Atlantic/Bermuda" | "Atlantic/Canary" | "Atlantic/Cape_Verde" | "Atlantic/Faeroe" | "Atlantic/Faroe" | "Atlantic/Jan_Mayen" | "Atlantic/Madeira" | "Atlantic/Reykjavik" | "Atlantic/South_Georgia" | "Atlantic/St_Helena" | "Atlantic/Stanley" | "Australia/ACT" | "Australia/Adelaide" | "Australia/Brisbane" | "Australia/Broken_Hill" | "Australia/Canberra" | "Australia/Currie" | "Australia/Darwin" | "Australia/Eucla" | "Australia/Hobart" | "Australia/LHI" | "Australia/Lindeman" | "Australia/Lord_Howe" | "Australia/Melbourne" | "Australia/NSW" | "Australia/North" | "Australia/Perth" | "Australia/Queensland" | "Australia/South" | "Australia/Sydney" | "Australia/Tasmania" | "Australia/Victoria" | "Australia/West" | "Australia/Yancowinna" | "Brazil/Acre" | "Brazil/DeNoronha" | "Brazil/East" | "Brazil/West" | "CET" | "CST6CDT" | "Canada/Atlantic" | "Canada/Central" | "Canada/Eastern" | "Canada/Mountain" | "Canada/Newfoundland" | "Canada/Pacific" | "Canada/Saskatchewan" | "Canada/Yukon" | "Chile/Continental" | "Chile/EasterIsland" | "Cuba" | "EET" | "EST" | "EST5EDT" | "Egypt" | "Eire" | "Etc/GMT" | "Etc/GMT+0" | "Etc/GMT+1" | "Etc/GMT+10" | "Etc/GMT+11" | "Etc/GMT+12" | "Etc/GMT+2" | "Etc/GMT+3" | "Etc/GMT+4" | "Etc/GMT+5" | "Etc/GMT+6" | "Etc/GMT+7" | "Etc/GMT+8" | "Etc/GMT+9" | "Etc/GMT-0" | "Etc/GMT-1" | "Etc/GMT-10" | "Etc/GMT-11" | "Etc/GMT-12" | "Etc/GMT-13" | "Etc/GMT-14" | "Etc/GMT-2" | "Etc/GMT-3" | "Etc/GMT-4" | "Etc/GMT-5" | "Etc/GMT-6" | "Etc/GMT-7" | "Etc/GMT-8" | "Etc/GMT-9" | "Etc/GMT0" | "Etc/Greenwich" | "Etc/UCT" | "Etc/Universal" | "Etc/Zulu" | "Europe/Amsterdam" | "Europe/Andorra" | "Europe/Astrakhan" | "Europe/Athens" | "Europe/Belfast" | "Europe/Belgrade" | "Europe/Berlin" | "Europe/Bratislava" | "Europe/Brussels" | "Europe/Bucharest" | "Europe/Budapest" | "Europe/Busingen" | "Europe/Chisinau" | "Europe/Copenhagen" | "Europe/Dublin" | "Europe/Gibraltar" | "Europe/Guernsey" | "Europe/Helsinki" | "Europe/Isle_of_Man" | "Europe/Istanbul" | "Europe/Jersey" | "Europe/Kaliningrad" | "Europe/Kiev" | "Europe/Kirov" | "Europe/Kyiv" | "Europe/Lisbon" | "Europe/Ljubljana" | "Europe/London" | "Europe/Luxembourg" | "Europe/Madrid" | "Europe/Malta" | "Europe/Mariehamn" | "Europe/Minsk" | "Europe/Monaco" | "Europe/Moscow" | "Europe/Nicosia" | "Europe/Oslo" | "Europe/Paris" | "Europe/Podgorica" | "Europe/Prague" | "Europe/Riga" | "Europe/Rome" | "Europe/Samara" | "Europe/San_Marino" | "Europe/Sarajevo" | "Europe/Saratov" | "Europe/Simferopol" | "Europe/Skopje" | "Europe/Sofia" | "Europe/Stockholm" | "Europe/Tallinn" | "Europe/Tirane" | "Europe/Tiraspol" | "Europe/Ulyanovsk" | "Europe/Uzhgorod" | "Europe/Vaduz" | "Europe/Vatican" | "Europe/Vienna" | "Europe/Vilnius" | "Europe/Volgograd" | "Europe/Warsaw" | "Europe/Zagreb" | "Europe/Zaporozhye" | "Europe/Zurich" | "GB" | "GB-Eire" | "GMT" | "GMT+0" | "GMT-0" | "GMT0" | "Greenwich" | "HST" | "Hongkong" | "Iceland" | "Indian/Antananarivo" | "Indian/Chagos" | "Indian/Christmas" | "Indian/Cocos" | "Indian/Comoro" | "Indian/Kerguelen" | "Indian/Mahe" | "Indian/Maldives" | "Indian/Mauritius" | "Indian/Mayotte" | "Indian/Reunion" | "Iran" | "Israel" | "Jamaica" | "Japan" | "Kwajalein" | "Libya" | "MET" | "MST" | "MST7MDT" | "Mexico/BajaNorte" | "Mexico/BajaSur" | "Mexico/General" | "NZ" | "NZ-CHAT" | "Navajo" | "PRC" | "PST8PDT" | "Pacific/Apia" | "Pacific/Auckland" | "Pacific/Bougainville" | "Pacific/Chatham" | "Pacific/Chuuk" | "Pacific/Easter" | "Pacific/Efate" | "Pacific/Enderbury" | "Pacific/Fakaofo" | "Pacific/Fiji" | "Pacific/Funafuti" | "Pacific/Galapagos" | "Pacific/Gambier" | "Pacific/Guadalcanal" | "Pacific/Guam" | "Pacific/Honolulu" | "Pacific/Johnston" | "Pacific/Kanton" | "Pacific/Kiritimati" | "Pacific/Kosrae" | "Pacific/Kwajalein" | "Pacific/Majuro" | "Pacific/Marquesas" | "Pacific/Midway" | "Pacific/Nauru" | "Pacific/Niue" | "Pacific/Norfolk" | "Pacific/Noumea" | "Pacific/Pago_Pago" | "Pacific/Palau" | "Pacific/Pitcairn" | "Pacific/Pohnpei" | "Pacific/Ponape" | "Pacific/Port_Moresby" | "Pacific/Rarotonga" | "Pacific/Saipan" | "Pacific/Samoa" | "Pacific/Tahiti" | "Pacific/Tarawa" | "Pacific/Tongatapu" | "Pacific/Truk" | "Pacific/Wake" | "Pacific/Wallis" | "Pacific/Yap" | "Poland" | "Portugal" | "ROC" | "ROK" | "Singapore" | "Turkey" | "UCT" | "US/Alaska" | "US/Aleutian" | "US/Arizona" | "US/Central" | "US/East-Indiana" | "US/Eastern" | "US/Hawaii" | "US/Indiana-Starke" | "US/Michigan" | "US/Mountain" | "US/Pacific" | "US/Samoa" | "Universal" | "W-SU" | "WET" | "Zulu";\n  /** @default "Action" */\n  buttonLabel?: string;\n  isDisabled?: boolean;\n  linkLabel?: string;\n  /** @default true */\n  isVisible?: boolean;\n  headerIcon?: string;\n  /** @default "left" */\n  headerIconPosition?: "left" | "right";\n  columnType?: string;\n  cellIcon?: string;\n  /** @default "left" */\n  cellIconPosition?: "left" | "right";\n  textWrap?: boolean;\n  /** @default "left" */\n  horizontalAlign?: "left" | "center" | "right";\n  /** @default "center" */\n  verticalAlign?: "top" | "center" | "bottom";\n  /** @default "Computed at runtime" */\n  cellProps.textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  cellBackground?: string;\n  imageSize?: "FIXED" | "FIT" | "COVER" | "GROW";\n  /** @default "Computed at runtime" */\n  imageBorderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  buttonIcon?: string;\n  /** @default "left" */\n  buttonIconPosition?: "left" | "right";\n  /** @default "primary" */\n  buttonVariant?: "primary" | "secondary" | "tertiary";\n  /** @default "Computed at runtime" */\n  buttonTextStyle?: Record<string, any>;\n  buttonBackgroundColor?: string;\n  /** @default {"left":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"right":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"top":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"bottom":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"}} */\n  buttonBorder?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default "empty" */\n  booleanStyleFalse?: "empty" | "close" | "minus" | "empty_checkbox";\n  tagsWrap?: boolean;\n  tagDisplayConfig?: /**\n * Configuration for tag display styling based on cell values.\n * \n * @description Maps cell values to tag styling configuration. When a cell value matches a key,\n * the corresponding tag styling is applied. The color is used as the background color of the tag pill,\n * and the text color is automatically calculated for optimal contrast.\n * \n * @example\n * {\n *   "Active": { color: "#14CDB733" },     // Cell value "Active" -> green background tag\n *   "Pending": { color: "#FF9F3533" },   // Cell value "Pending" -> orange background tag\n *   "Inactive": { color: "#a6a0a033" }   // Cell value "Inactive" -> gray background tag\n * }\n */\nRecord<string, { \n  /** Hex color string used as background color for the tag pill. Text color is auto-calculated for contrast. */\n  color: string \n}>;\n  isFrozen?: boolean;\n  columnType?: string;\n  onClick?: SbEventFlow;\n}\n\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbTableComponentState {\n  /** @default [] */\n  tableDataWithInserts?: any;\n  /** @default [] */\n  tableDataWithInsertsOrderMap?: any;\n  /** @default null */\n  selectedRow?: any;\n  selectedRowSchema?: any;\n  /** @default [] */\n  selectedRows?: any;\n  filteredTableData?: any;\n  filteredOrderMap?: any;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbTableMetaProperties {\n  selectedRowIndex?: number;\n  selectedRowIndices?: any;\n  sortedColumn?: any;\n  /** @default "" */\n  searchText?: string;\n  filters?: any;\n  hiddenColumns?: any;\n  columnFreezes?: any;\n  tagsColorAssignment?: any;\n  /** @default 0 */\n  pageNo?: number;\n}\n```\n';
+var content29 = '## SbTable\n\nThe following is the type definition for the SbTable component.\n\n```typescript\ninterface SbTableProps {\n  /** @default "" */\n  header?: string;\n  tableData?: any;\n  columns?: Record<string, SbTableColumnsProperties>;\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  /** @default true */\n  isFilterable?: boolean;\n  defaultFilters?: any;\n  /** @default false */\n  multiRowSelection?: boolean;\n  /** @default true */\n  isSearchable?: boolean;\n  /** @default true */\n  isDownloadable?: boolean;\n  /** @default "none" */\n  paginationType?: "none" | "client-side" | "server-side";\n  configuredPageSize?: any;\n  defaultSort?: Record<string, any>;\n  defaultSearchText?: string;\n  searchPlaceholder?: string;\n  defaultSelectedRow?: number;\n  showColumnBorders?: boolean;\n  /** @default "Computed at runtime" */\n  headerProps.textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  columnHeaderProps.textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  cellProps.textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  backgroundColor?: string;\n  /** @default "Computed at runtime" */\n  selectedRowBackgroundColor?: string;\n  border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default "Computed at runtime" */\n  borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  /** @default "medium" */\n  rowDensity?: "extra-small" | "small" | "medium" | "large";\n  /** @default -1 */\n  maxLinesPerRow?: number;\n  /** @default false */\n  loading?: boolean;\n  isVisible?: boolean;\n  collapseWhenHidden?: boolean;\n  /** @default "Computed at runtime" */\n  searchProps.textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  searchProps.backgroundColor?: string;\n  searchProps.border?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default "Computed at runtime" */\n  searchProps.borderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  onRowClick?: SbEventFlow;\n  onRowSelected?: SbEventFlow;\n  onPageChange?: SbEventFlow;\n  onFiltersChanged?: SbEventFlow;\n  onSearchTextChanged?: SbEventFlow;\n}\n\n// Referenced interfaces:\n\ninterface SbTableColumnsProperties {\n  label?: string;\n  /** @default "text" */\n  columnType?: "text" | "number" | "currency" | "percentage" | "image" | "video" | "date" | "button" | "link" | "boolean" | "tags" | "email";\n  notation?: "unformatted" | "standard" | "compact" | "scientific" | "engineering";\n  minimumFractionDigits?: number;\n  maximumFractionDigits?: number;\n  /** @default "USD" */\n  currency?: "AED" | "AFN" | "ALL" | "AMD" | "ANG" | "AOA" | "ARS" | "AUD" | "AWG" | "AZN" | "BAM" | "BBD" | "BDT" | "BGN" | "BHD" | "BIF" | "BMD" | "BND" | "BOB" | "BOV" | "BRL" | "BSD" | "BTN" | "BWP" | "BYN" | "BZD" | "CAD" | "CDF" | "CHE" | "CHF" | "CHW" | "CLF" | "CLP" | "CNY" | "COP" | "COU" | "CRC" | "CUC" | "CUP" | "CVE" | "CZK" | "DJF" | "DKK" | "DOP" | "DZD" | "EGP" | "ERN" | "ETB" | "EUR" | "FJD" | "FKP" | "GBP" | "GEL" | "GHS" | "GIP" | "GMD" | "GNF" | "GTQ" | "GYD" | "HKD" | "HNL" | "HRK" | "HTG" | "HUF" | "IDR" | "ILS" | "INR" | "IQD" | "IRR" | "ISK" | "JMD" | "JOD" | "JPY" | "KES" | "KGS" | "KHR" | "KMF" | "KPW" | "KRW" | "KWD" | "KYD" | "KZT" | "LAK" | "LBP" | "LKR" | "LRD" | "LSL" | "LYD" | "MAD" | "MDL" | "MGA" | "MKD" | "MMK" | "MNT" | "MOP" | "MRU" | "MUR" | "MVR" | "MWK" | "MXN" | "MXV" | "MYR" | "MZN" | "NAD" | "NGN" | "NIO" | "NOK" | "NPR" | "NZD" | "OMR" | "PAB" | "PEN" | "PGK" | "PHP" | "PKR" | "PLN" | "PYG" | "QAR" | "RON" | "RSD" | "RUB" | "RWF" | "SAR" | "SBD" | "SCR" | "SDG" | "SEK" | "SGD" | "SHP" | "SLL" | "SOS" | "SRD" | "SSP" | "STN" | "SVC" | "SYP" | "SZL" | "THB" | "TJS" | "TMT" | "TND" | "TOP" | "TRY" | "TTD" | "TWD" | "TZS" | "UAH" | "UGX" | "USD" | "USN" | "UYI" | "UYU" | "UYW" | "UZS" | "VED" | "VES" | "VND" | "VUV" | "WST" | "XAF" | "XAG" | "XAU" | "XBA" | "XBB" | "XBC" | "XBD" | "XCD" | "XDR" | "XOF" | "XPD" | "XPF" | "XPT" | "XSU" | "XTS" | "XUA" | "XXX" | "YER" | "ZAR" | "ZMW" | "ZWL";\n  /** @default false */\n  openImageUrl?: boolean;\n  inputFormat?: "undefined" | "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  outputFormat?: "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  manageTimezone?: boolean;\n  valueTimezone?: "undefined" | "Etc/UTC" | "UTC" | "Africa/Abidjan" | "Africa/Accra" | "Africa/Addis_Ababa" | "Africa/Algiers" | "Africa/Asmara" | "Africa/Asmera" | "Africa/Bamako" | "Africa/Bangui" | "Africa/Banjul" | "Africa/Bissau" | "Africa/Blantyre" | "Africa/Brazzaville" | "Africa/Bujumbura" | "Africa/Cairo" | "Africa/Casablanca" | "Africa/Ceuta" | "Africa/Conakry" | "Africa/Dakar" | "Africa/Dar_es_Salaam" | "Africa/Djibouti" | "Africa/Douala" | "Africa/El_Aaiun" | "Africa/Freetown" | "Africa/Gaborone" | "Africa/Harare" | "Africa/Johannesburg" | "Africa/Juba" | "Africa/Kampala" | "Africa/Khartoum" | "Africa/Kigali" | "Africa/Kinshasa" | "Africa/Lagos" | "Africa/Libreville" | "Africa/Lome" | "Africa/Luanda" | "Africa/Lubumbashi" | "Africa/Lusaka" | "Africa/Malabo" | "Africa/Maputo" | "Africa/Maseru" | "Africa/Mbabane" | "Africa/Mogadishu" | "Africa/Monrovia" | "Africa/Nairobi" | "Africa/Ndjamena" | "Africa/Niamey" | "Africa/Nouakchott" | "Africa/Ouagadougou" | "Africa/Porto-Novo" | "Africa/Sao_Tome" | "Africa/Timbuktu" | "Africa/Tripoli" | "Africa/Tunis" | "Africa/Windhoek" | "America/Adak" | "America/Anchorage" | "America/Anguilla" | "America/Antigua" | "America/Araguaina" | "America/Argentina/Buenos_Aires" | "America/Argentina/Catamarca" | "America/Argentina/ComodRivadavia" | "America/Argentina/Cordoba" | "America/Argentina/Jujuy" | "America/Argentina/La_Rioja" | "America/Argentina/Mendoza" | "America/Argentina/Rio_Gallegos" | "America/Argentina/Salta" | "America/Argentina/San_Juan" | "America/Argentina/San_Luis" | "America/Argentina/Tucuman" | "America/Argentina/Ushuaia" | "America/Aruba" | "America/Asuncion" | "America/Atikokan" | "America/Atka" | "America/Bahia" | "America/Bahia_Banderas" | "America/Barbados" | "America/Belem" | "America/Belize" | "America/Blanc-Sablon" | "America/Boa_Vista" | "America/Bogota" | "America/Boise" | "America/Buenos_Aires" | "America/Cambridge_Bay" | "America/Campo_Grande" | "America/Cancun" | "America/Caracas" | "America/Catamarca" | "America/Cayenne" | "America/Cayman" | "America/Chicago" | "America/Chihuahua" | "America/Ciudad_Juarez" | "America/Coral_Harbour" | "America/Cordoba" | "America/Costa_Rica" | "America/Creston" | "America/Cuiaba" | "America/Curacao" | "America/Danmarkshavn" | "America/Dawson" | "America/Dawson_Creek" | "America/Denver" | "America/Detroit" | "America/Dominica" | "America/Edmonton" | "America/Eirunepe" | "America/El_Salvador" | "America/Ensenada" | "America/Fort_Nelson" | "America/Fort_Wayne" | "America/Fortaleza" | "America/Glace_Bay" | "America/Godthab" | "America/Goose_Bay" | "America/Grand_Turk" | "America/Grenada" | "America/Guadeloupe" | "America/Guatemala" | "America/Guayaquil" | "America/Guyana" | "America/Halifax" | "America/Havana" | "America/Hermosillo" | "America/Indiana/Indianapolis" | "America/Indiana/Knox" | "America/Indiana/Marengo" | "America/Indiana/Petersburg" | "America/Indiana/Tell_City" | "America/Indiana/Vevay" | "America/Indiana/Vincennes" | "America/Indiana/Winamac" | "America/Indianapolis" | "America/Inuvik" | "America/Iqaluit" | "America/Jamaica" | "America/Jujuy" | "America/Juneau" | "America/Kentucky/Louisville" | "America/Kentucky/Monticello" | "America/Knox_IN" | "America/Kralendijk" | "America/La_Paz" | "America/Lima" | "America/Los_Angeles" | "America/Louisville" | "America/Lower_Princes" | "America/Maceio" | "America/Managua" | "America/Manaus" | "America/Marigot" | "America/Martinique" | "America/Matamoros" | "America/Mazatlan" | "America/Mendoza" | "America/Menominee" | "America/Merida" | "America/Metlakatla" | "America/Mexico_City" | "America/Miquelon" | "America/Moncton" | "America/Monterrey" | "America/Montevideo" | "America/Montreal" | "America/Montserrat" | "America/Nassau" | "America/New_York" | "America/Nipigon" | "America/Nome" | "America/Noronha" | "America/North_Dakota/Beulah" | "America/North_Dakota/Center" | "America/North_Dakota/New_Salem" | "America/Nuuk" | "America/Ojinaga" | "America/Panama" | "America/Pangnirtung" | "America/Paramaribo" | "America/Phoenix" | "America/Port-au-Prince" | "America/Port_of_Spain" | "America/Porto_Acre" | "America/Porto_Velho" | "America/Puerto_Rico" | "America/Punta_Arenas" | "America/Rainy_River" | "America/Rankin_Inlet" | "America/Recife" | "America/Regina" | "America/Resolute" | "America/Rio_Branco" | "America/Rosario" | "America/Santa_Isabel" | "America/Santarem" | "America/Santiago" | "America/Santo_Domingo" | "America/Sao_Paulo" | "America/Scoresbysund" | "America/Shiprock" | "America/Sitka" | "America/St_Barthelemy" | "America/St_Johns" | "America/St_Kitts" | "America/St_Lucia" | "America/St_Thomas" | "America/St_Vincent" | "America/Swift_Current" | "America/Tegucigalpa" | "America/Thule" | "America/Thunder_Bay" | "America/Tijuana" | "America/Toronto" | "America/Tortola" | "America/Vancouver" | "America/Virgin" | "America/Whitehorse" | "America/Winnipeg" | "America/Yakutat" | "America/Yellowknife" | "Antarctica/Casey" | "Antarctica/Davis" | "Antarctica/DumontDUrville" | "Antarctica/Macquarie" | "Antarctica/Mawson" | "Antarctica/McMurdo" | "Antarctica/Palmer" | "Antarctica/Rothera" | "Antarctica/South_Pole" | "Antarctica/Syowa" | "Antarctica/Troll" | "Antarctica/Vostok" | "Arctic/Longyearbyen" | "Asia/Aden" | "Asia/Almaty" | "Asia/Amman" | "Asia/Anadyr" | "Asia/Aqtau" | "Asia/Aqtobe" | "Asia/Ashgabat" | "Asia/Ashkhabad" | "Asia/Atyrau" | "Asia/Baghdad" | "Asia/Bahrain" | "Asia/Baku" | "Asia/Bangkok" | "Asia/Barnaul" | "Asia/Beirut" | "Asia/Bishkek" | "Asia/Brunei" | "Asia/Calcutta" | "Asia/Chita" | "Asia/Choibalsan" | "Asia/Chongqing" | "Asia/Chungking" | "Asia/Colombo" | "Asia/Dacca" | "Asia/Damascus" | "Asia/Dhaka" | "Asia/Dili" | "Asia/Dubai" | "Asia/Dushanbe" | "Asia/Famagusta" | "Asia/Gaza" | "Asia/Harbin" | "Asia/Hebron" | "Asia/Ho_Chi_Minh" | "Asia/Hong_Kong" | "Asia/Hovd" | "Asia/Irkutsk" | "Asia/Istanbul" | "Asia/Jakarta" | "Asia/Jayapura" | "Asia/Jerusalem" | "Asia/Kabul" | "Asia/Kamchatka" | "Asia/Karachi" | "Asia/Kashgar" | "Asia/Kathmandu" | "Asia/Katmandu" | "Asia/Khandyga" | "Asia/Kolkata" | "Asia/Krasnoyarsk" | "Asia/Kuala_Lumpur" | "Asia/Kuching" | "Asia/Kuwait" | "Asia/Macao" | "Asia/Macau" | "Asia/Magadan" | "Asia/Makassar" | "Asia/Manila" | "Asia/Muscat" | "Asia/Nicosia" | "Asia/Novokuznetsk" | "Asia/Novosibirsk" | "Asia/Omsk" | "Asia/Oral" | "Asia/Phnom_Penh" | "Asia/Pontianak" | "Asia/Pyongyang" | "Asia/Qatar" | "Asia/Qostanay" | "Asia/Qyzylorda" | "Asia/Rangoon" | "Asia/Riyadh" | "Asia/Saigon" | "Asia/Sakhalin" | "Asia/Samarkand" | "Asia/Seoul" | "Asia/Shanghai" | "Asia/Singapore" | "Asia/Srednekolymsk" | "Asia/Taipei" | "Asia/Tashkent" | "Asia/Tbilisi" | "Asia/Tehran" | "Asia/Tel_Aviv" | "Asia/Thimbu" | "Asia/Thimphu" | "Asia/Tokyo" | "Asia/Tomsk" | "Asia/Ujung_Pandang" | "Asia/Ulaanbaatar" | "Asia/Ulan_Bator" | "Asia/Urumqi" | "Asia/Ust-Nera" | "Asia/Vientiane" | "Asia/Vladivostok" | "Asia/Yakutsk" | "Asia/Yangon" | "Asia/Yekaterinburg" | "Asia/Yerevan" | "Atlantic/Azores" | "Atlantic/Bermuda" | "Atlantic/Canary" | "Atlantic/Cape_Verde" | "Atlantic/Faeroe" | "Atlantic/Faroe" | "Atlantic/Jan_Mayen" | "Atlantic/Madeira" | "Atlantic/Reykjavik" | "Atlantic/South_Georgia" | "Atlantic/St_Helena" | "Atlantic/Stanley" | "Australia/ACT" | "Australia/Adelaide" | "Australia/Brisbane" | "Australia/Broken_Hill" | "Australia/Canberra" | "Australia/Currie" | "Australia/Darwin" | "Australia/Eucla" | "Australia/Hobart" | "Australia/LHI" | "Australia/Lindeman" | "Australia/Lord_Howe" | "Australia/Melbourne" | "Australia/NSW" | "Australia/North" | "Australia/Perth" | "Australia/Queensland" | "Australia/South" | "Australia/Sydney" | "Australia/Tasmania" | "Australia/Victoria" | "Australia/West" | "Australia/Yancowinna" | "Brazil/Acre" | "Brazil/DeNoronha" | "Brazil/East" | "Brazil/West" | "CET" | "CST6CDT" | "Canada/Atlantic" | "Canada/Central" | "Canada/Eastern" | "Canada/Mountain" | "Canada/Newfoundland" | "Canada/Pacific" | "Canada/Saskatchewan" | "Canada/Yukon" | "Chile/Continental" | "Chile/EasterIsland" | "Cuba" | "EET" | "EST" | "EST5EDT" | "Egypt" | "Eire" | "Etc/GMT" | "Etc/GMT+0" | "Etc/GMT+1" | "Etc/GMT+10" | "Etc/GMT+11" | "Etc/GMT+12" | "Etc/GMT+2" | "Etc/GMT+3" | "Etc/GMT+4" | "Etc/GMT+5" | "Etc/GMT+6" | "Etc/GMT+7" | "Etc/GMT+8" | "Etc/GMT+9" | "Etc/GMT-0" | "Etc/GMT-1" | "Etc/GMT-10" | "Etc/GMT-11" | "Etc/GMT-12" | "Etc/GMT-13" | "Etc/GMT-14" | "Etc/GMT-2" | "Etc/GMT-3" | "Etc/GMT-4" | "Etc/GMT-5" | "Etc/GMT-6" | "Etc/GMT-7" | "Etc/GMT-8" | "Etc/GMT-9" | "Etc/GMT0" | "Etc/Greenwich" | "Etc/UCT" | "Etc/Universal" | "Etc/Zulu" | "Europe/Amsterdam" | "Europe/Andorra" | "Europe/Astrakhan" | "Europe/Athens" | "Europe/Belfast" | "Europe/Belgrade" | "Europe/Berlin" | "Europe/Bratislava" | "Europe/Brussels" | "Europe/Bucharest" | "Europe/Budapest" | "Europe/Busingen" | "Europe/Chisinau" | "Europe/Copenhagen" | "Europe/Dublin" | "Europe/Gibraltar" | "Europe/Guernsey" | "Europe/Helsinki" | "Europe/Isle_of_Man" | "Europe/Istanbul" | "Europe/Jersey" | "Europe/Kaliningrad" | "Europe/Kiev" | "Europe/Kirov" | "Europe/Kyiv" | "Europe/Lisbon" | "Europe/Ljubljana" | "Europe/London" | "Europe/Luxembourg" | "Europe/Madrid" | "Europe/Malta" | "Europe/Mariehamn" | "Europe/Minsk" | "Europe/Monaco" | "Europe/Moscow" | "Europe/Nicosia" | "Europe/Oslo" | "Europe/Paris" | "Europe/Podgorica" | "Europe/Prague" | "Europe/Riga" | "Europe/Rome" | "Europe/Samara" | "Europe/San_Marino" | "Europe/Sarajevo" | "Europe/Saratov" | "Europe/Simferopol" | "Europe/Skopje" | "Europe/Sofia" | "Europe/Stockholm" | "Europe/Tallinn" | "Europe/Tirane" | "Europe/Tiraspol" | "Europe/Ulyanovsk" | "Europe/Uzhgorod" | "Europe/Vaduz" | "Europe/Vatican" | "Europe/Vienna" | "Europe/Vilnius" | "Europe/Volgograd" | "Europe/Warsaw" | "Europe/Zagreb" | "Europe/Zaporozhye" | "Europe/Zurich" | "GB" | "GB-Eire" | "GMT" | "GMT+0" | "GMT-0" | "GMT0" | "Greenwich" | "HST" | "Hongkong" | "Iceland" | "Indian/Antananarivo" | "Indian/Chagos" | "Indian/Christmas" | "Indian/Cocos" | "Indian/Comoro" | "Indian/Kerguelen" | "Indian/Mahe" | "Indian/Maldives" | "Indian/Mauritius" | "Indian/Mayotte" | "Indian/Reunion" | "Iran" | "Israel" | "Jamaica" | "Japan" | "Kwajalein" | "Libya" | "MET" | "MST" | "MST7MDT" | "Mexico/BajaNorte" | "Mexico/BajaSur" | "Mexico/General" | "NZ" | "NZ-CHAT" | "Navajo" | "PRC" | "PST8PDT" | "Pacific/Apia" | "Pacific/Auckland" | "Pacific/Bougainville" | "Pacific/Chatham" | "Pacific/Chuuk" | "Pacific/Easter" | "Pacific/Efate" | "Pacific/Enderbury" | "Pacific/Fakaofo" | "Pacific/Fiji" | "Pacific/Funafuti" | "Pacific/Galapagos" | "Pacific/Gambier" | "Pacific/Guadalcanal" | "Pacific/Guam" | "Pacific/Honolulu" | "Pacific/Johnston" | "Pacific/Kanton" | "Pacific/Kiritimati" | "Pacific/Kosrae" | "Pacific/Kwajalein" | "Pacific/Majuro" | "Pacific/Marquesas" | "Pacific/Midway" | "Pacific/Nauru" | "Pacific/Niue" | "Pacific/Norfolk" | "Pacific/Noumea" | "Pacific/Pago_Pago" | "Pacific/Palau" | "Pacific/Pitcairn" | "Pacific/Pohnpei" | "Pacific/Ponape" | "Pacific/Port_Moresby" | "Pacific/Rarotonga" | "Pacific/Saipan" | "Pacific/Samoa" | "Pacific/Tahiti" | "Pacific/Tarawa" | "Pacific/Tongatapu" | "Pacific/Truk" | "Pacific/Wake" | "Pacific/Wallis" | "Pacific/Yap" | "Poland" | "Portugal" | "ROC" | "ROK" | "Singapore" | "Turkey" | "UCT" | "US/Alaska" | "US/Aleutian" | "US/Arizona" | "US/Central" | "US/East-Indiana" | "US/Eastern" | "US/Hawaii" | "US/Indiana-Starke" | "US/Michigan" | "US/Mountain" | "US/Pacific" | "US/Samoa" | "Universal" | "W-SU" | "WET" | "Zulu";\n  displayTimezone?: "undefined" | "Etc/UTC" | "UTC" | "Africa/Abidjan" | "Africa/Accra" | "Africa/Addis_Ababa" | "Africa/Algiers" | "Africa/Asmara" | "Africa/Asmera" | "Africa/Bamako" | "Africa/Bangui" | "Africa/Banjul" | "Africa/Bissau" | "Africa/Blantyre" | "Africa/Brazzaville" | "Africa/Bujumbura" | "Africa/Cairo" | "Africa/Casablanca" | "Africa/Ceuta" | "Africa/Conakry" | "Africa/Dakar" | "Africa/Dar_es_Salaam" | "Africa/Djibouti" | "Africa/Douala" | "Africa/El_Aaiun" | "Africa/Freetown" | "Africa/Gaborone" | "Africa/Harare" | "Africa/Johannesburg" | "Africa/Juba" | "Africa/Kampala" | "Africa/Khartoum" | "Africa/Kigali" | "Africa/Kinshasa" | "Africa/Lagos" | "Africa/Libreville" | "Africa/Lome" | "Africa/Luanda" | "Africa/Lubumbashi" | "Africa/Lusaka" | "Africa/Malabo" | "Africa/Maputo" | "Africa/Maseru" | "Africa/Mbabane" | "Africa/Mogadishu" | "Africa/Monrovia" | "Africa/Nairobi" | "Africa/Ndjamena" | "Africa/Niamey" | "Africa/Nouakchott" | "Africa/Ouagadougou" | "Africa/Porto-Novo" | "Africa/Sao_Tome" | "Africa/Timbuktu" | "Africa/Tripoli" | "Africa/Tunis" | "Africa/Windhoek" | "America/Adak" | "America/Anchorage" | "America/Anguilla" | "America/Antigua" | "America/Araguaina" | "America/Argentina/Buenos_Aires" | "America/Argentina/Catamarca" | "America/Argentina/ComodRivadavia" | "America/Argentina/Cordoba" | "America/Argentina/Jujuy" | "America/Argentina/La_Rioja" | "America/Argentina/Mendoza" | "America/Argentina/Rio_Gallegos" | "America/Argentina/Salta" | "America/Argentina/San_Juan" | "America/Argentina/San_Luis" | "America/Argentina/Tucuman" | "America/Argentina/Ushuaia" | "America/Aruba" | "America/Asuncion" | "America/Atikokan" | "America/Atka" | "America/Bahia" | "America/Bahia_Banderas" | "America/Barbados" | "America/Belem" | "America/Belize" | "America/Blanc-Sablon" | "America/Boa_Vista" | "America/Bogota" | "America/Boise" | "America/Buenos_Aires" | "America/Cambridge_Bay" | "America/Campo_Grande" | "America/Cancun" | "America/Caracas" | "America/Catamarca" | "America/Cayenne" | "America/Cayman" | "America/Chicago" | "America/Chihuahua" | "America/Ciudad_Juarez" | "America/Coral_Harbour" | "America/Cordoba" | "America/Costa_Rica" | "America/Creston" | "America/Cuiaba" | "America/Curacao" | "America/Danmarkshavn" | "America/Dawson" | "America/Dawson_Creek" | "America/Denver" | "America/Detroit" | "America/Dominica" | "America/Edmonton" | "America/Eirunepe" | "America/El_Salvador" | "America/Ensenada" | "America/Fort_Nelson" | "America/Fort_Wayne" | "America/Fortaleza" | "America/Glace_Bay" | "America/Godthab" | "America/Goose_Bay" | "America/Grand_Turk" | "America/Grenada" | "America/Guadeloupe" | "America/Guatemala" | "America/Guayaquil" | "America/Guyana" | "America/Halifax" | "America/Havana" | "America/Hermosillo" | "America/Indiana/Indianapolis" | "America/Indiana/Knox" | "America/Indiana/Marengo" | "America/Indiana/Petersburg" | "America/Indiana/Tell_City" | "America/Indiana/Vevay" | "America/Indiana/Vincennes" | "America/Indiana/Winamac" | "America/Indianapolis" | "America/Inuvik" | "America/Iqaluit" | "America/Jamaica" | "America/Jujuy" | "America/Juneau" | "America/Kentucky/Louisville" | "America/Kentucky/Monticello" | "America/Knox_IN" | "America/Kralendijk" | "America/La_Paz" | "America/Lima" | "America/Los_Angeles" | "America/Louisville" | "America/Lower_Princes" | "America/Maceio" | "America/Managua" | "America/Manaus" | "America/Marigot" | "America/Martinique" | "America/Matamoros" | "America/Mazatlan" | "America/Mendoza" | "America/Menominee" | "America/Merida" | "America/Metlakatla" | "America/Mexico_City" | "America/Miquelon" | "America/Moncton" | "America/Monterrey" | "America/Montevideo" | "America/Montreal" | "America/Montserrat" | "America/Nassau" | "America/New_York" | "America/Nipigon" | "America/Nome" | "America/Noronha" | "America/North_Dakota/Beulah" | "America/North_Dakota/Center" | "America/North_Dakota/New_Salem" | "America/Nuuk" | "America/Ojinaga" | "America/Panama" | "America/Pangnirtung" | "America/Paramaribo" | "America/Phoenix" | "America/Port-au-Prince" | "America/Port_of_Spain" | "America/Porto_Acre" | "America/Porto_Velho" | "America/Puerto_Rico" | "America/Punta_Arenas" | "America/Rainy_River" | "America/Rankin_Inlet" | "America/Recife" | "America/Regina" | "America/Resolute" | "America/Rio_Branco" | "America/Rosario" | "America/Santa_Isabel" | "America/Santarem" | "America/Santiago" | "America/Santo_Domingo" | "America/Sao_Paulo" | "America/Scoresbysund" | "America/Shiprock" | "America/Sitka" | "America/St_Barthelemy" | "America/St_Johns" | "America/St_Kitts" | "America/St_Lucia" | "America/St_Thomas" | "America/St_Vincent" | "America/Swift_Current" | "America/Tegucigalpa" | "America/Thule" | "America/Thunder_Bay" | "America/Tijuana" | "America/Toronto" | "America/Tortola" | "America/Vancouver" | "America/Virgin" | "America/Whitehorse" | "America/Winnipeg" | "America/Yakutat" | "America/Yellowknife" | "Antarctica/Casey" | "Antarctica/Davis" | "Antarctica/DumontDUrville" | "Antarctica/Macquarie" | "Antarctica/Mawson" | "Antarctica/McMurdo" | "Antarctica/Palmer" | "Antarctica/Rothera" | "Antarctica/South_Pole" | "Antarctica/Syowa" | "Antarctica/Troll" | "Antarctica/Vostok" | "Arctic/Longyearbyen" | "Asia/Aden" | "Asia/Almaty" | "Asia/Amman" | "Asia/Anadyr" | "Asia/Aqtau" | "Asia/Aqtobe" | "Asia/Ashgabat" | "Asia/Ashkhabad" | "Asia/Atyrau" | "Asia/Baghdad" | "Asia/Bahrain" | "Asia/Baku" | "Asia/Bangkok" | "Asia/Barnaul" | "Asia/Beirut" | "Asia/Bishkek" | "Asia/Brunei" | "Asia/Calcutta" | "Asia/Chita" | "Asia/Choibalsan" | "Asia/Chongqing" | "Asia/Chungking" | "Asia/Colombo" | "Asia/Dacca" | "Asia/Damascus" | "Asia/Dhaka" | "Asia/Dili" | "Asia/Dubai" | "Asia/Dushanbe" | "Asia/Famagusta" | "Asia/Gaza" | "Asia/Harbin" | "Asia/Hebron" | "Asia/Ho_Chi_Minh" | "Asia/Hong_Kong" | "Asia/Hovd" | "Asia/Irkutsk" | "Asia/Istanbul" | "Asia/Jakarta" | "Asia/Jayapura" | "Asia/Jerusalem" | "Asia/Kabul" | "Asia/Kamchatka" | "Asia/Karachi" | "Asia/Kashgar" | "Asia/Kathmandu" | "Asia/Katmandu" | "Asia/Khandyga" | "Asia/Kolkata" | "Asia/Krasnoyarsk" | "Asia/Kuala_Lumpur" | "Asia/Kuching" | "Asia/Kuwait" | "Asia/Macao" | "Asia/Macau" | "Asia/Magadan" | "Asia/Makassar" | "Asia/Manila" | "Asia/Muscat" | "Asia/Nicosia" | "Asia/Novokuznetsk" | "Asia/Novosibirsk" | "Asia/Omsk" | "Asia/Oral" | "Asia/Phnom_Penh" | "Asia/Pontianak" | "Asia/Pyongyang" | "Asia/Qatar" | "Asia/Qostanay" | "Asia/Qyzylorda" | "Asia/Rangoon" | "Asia/Riyadh" | "Asia/Saigon" | "Asia/Sakhalin" | "Asia/Samarkand" | "Asia/Seoul" | "Asia/Shanghai" | "Asia/Singapore" | "Asia/Srednekolymsk" | "Asia/Taipei" | "Asia/Tashkent" | "Asia/Tbilisi" | "Asia/Tehran" | "Asia/Tel_Aviv" | "Asia/Thimbu" | "Asia/Thimphu" | "Asia/Tokyo" | "Asia/Tomsk" | "Asia/Ujung_Pandang" | "Asia/Ulaanbaatar" | "Asia/Ulan_Bator" | "Asia/Urumqi" | "Asia/Ust-Nera" | "Asia/Vientiane" | "Asia/Vladivostok" | "Asia/Yakutsk" | "Asia/Yangon" | "Asia/Yekaterinburg" | "Asia/Yerevan" | "Atlantic/Azores" | "Atlantic/Bermuda" | "Atlantic/Canary" | "Atlantic/Cape_Verde" | "Atlantic/Faeroe" | "Atlantic/Faroe" | "Atlantic/Jan_Mayen" | "Atlantic/Madeira" | "Atlantic/Reykjavik" | "Atlantic/South_Georgia" | "Atlantic/St_Helena" | "Atlantic/Stanley" | "Australia/ACT" | "Australia/Adelaide" | "Australia/Brisbane" | "Australia/Broken_Hill" | "Australia/Canberra" | "Australia/Currie" | "Australia/Darwin" | "Australia/Eucla" | "Australia/Hobart" | "Australia/LHI" | "Australia/Lindeman" | "Australia/Lord_Howe" | "Australia/Melbourne" | "Australia/NSW" | "Australia/North" | "Australia/Perth" | "Australia/Queensland" | "Australia/South" | "Australia/Sydney" | "Australia/Tasmania" | "Australia/Victoria" | "Australia/West" | "Australia/Yancowinna" | "Brazil/Acre" | "Brazil/DeNoronha" | "Brazil/East" | "Brazil/West" | "CET" | "CST6CDT" | "Canada/Atlantic" | "Canada/Central" | "Canada/Eastern" | "Canada/Mountain" | "Canada/Newfoundland" | "Canada/Pacific" | "Canada/Saskatchewan" | "Canada/Yukon" | "Chile/Continental" | "Chile/EasterIsland" | "Cuba" | "EET" | "EST" | "EST5EDT" | "Egypt" | "Eire" | "Etc/GMT" | "Etc/GMT+0" | "Etc/GMT+1" | "Etc/GMT+10" | "Etc/GMT+11" | "Etc/GMT+12" | "Etc/GMT+2" | "Etc/GMT+3" | "Etc/GMT+4" | "Etc/GMT+5" | "Etc/GMT+6" | "Etc/GMT+7" | "Etc/GMT+8" | "Etc/GMT+9" | "Etc/GMT-0" | "Etc/GMT-1" | "Etc/GMT-10" | "Etc/GMT-11" | "Etc/GMT-12" | "Etc/GMT-13" | "Etc/GMT-14" | "Etc/GMT-2" | "Etc/GMT-3" | "Etc/GMT-4" | "Etc/GMT-5" | "Etc/GMT-6" | "Etc/GMT-7" | "Etc/GMT-8" | "Etc/GMT-9" | "Etc/GMT0" | "Etc/Greenwich" | "Etc/UCT" | "Etc/Universal" | "Etc/Zulu" | "Europe/Amsterdam" | "Europe/Andorra" | "Europe/Astrakhan" | "Europe/Athens" | "Europe/Belfast" | "Europe/Belgrade" | "Europe/Berlin" | "Europe/Bratislava" | "Europe/Brussels" | "Europe/Bucharest" | "Europe/Budapest" | "Europe/Busingen" | "Europe/Chisinau" | "Europe/Copenhagen" | "Europe/Dublin" | "Europe/Gibraltar" | "Europe/Guernsey" | "Europe/Helsinki" | "Europe/Isle_of_Man" | "Europe/Istanbul" | "Europe/Jersey" | "Europe/Kaliningrad" | "Europe/Kiev" | "Europe/Kirov" | "Europe/Kyiv" | "Europe/Lisbon" | "Europe/Ljubljana" | "Europe/London" | "Europe/Luxembourg" | "Europe/Madrid" | "Europe/Malta" | "Europe/Mariehamn" | "Europe/Minsk" | "Europe/Monaco" | "Europe/Moscow" | "Europe/Nicosia" | "Europe/Oslo" | "Europe/Paris" | "Europe/Podgorica" | "Europe/Prague" | "Europe/Riga" | "Europe/Rome" | "Europe/Samara" | "Europe/San_Marino" | "Europe/Sarajevo" | "Europe/Saratov" | "Europe/Simferopol" | "Europe/Skopje" | "Europe/Sofia" | "Europe/Stockholm" | "Europe/Tallinn" | "Europe/Tirane" | "Europe/Tiraspol" | "Europe/Ulyanovsk" | "Europe/Uzhgorod" | "Europe/Vaduz" | "Europe/Vatican" | "Europe/Vienna" | "Europe/Vilnius" | "Europe/Volgograd" | "Europe/Warsaw" | "Europe/Zagreb" | "Europe/Zaporozhye" | "Europe/Zurich" | "GB" | "GB-Eire" | "GMT" | "GMT+0" | "GMT-0" | "GMT0" | "Greenwich" | "HST" | "Hongkong" | "Iceland" | "Indian/Antananarivo" | "Indian/Chagos" | "Indian/Christmas" | "Indian/Cocos" | "Indian/Comoro" | "Indian/Kerguelen" | "Indian/Mahe" | "Indian/Maldives" | "Indian/Mauritius" | "Indian/Mayotte" | "Indian/Reunion" | "Iran" | "Israel" | "Jamaica" | "Japan" | "Kwajalein" | "Libya" | "MET" | "MST" | "MST7MDT" | "Mexico/BajaNorte" | "Mexico/BajaSur" | "Mexico/General" | "NZ" | "NZ-CHAT" | "Navajo" | "PRC" | "PST8PDT" | "Pacific/Apia" | "Pacific/Auckland" | "Pacific/Bougainville" | "Pacific/Chatham" | "Pacific/Chuuk" | "Pacific/Easter" | "Pacific/Efate" | "Pacific/Enderbury" | "Pacific/Fakaofo" | "Pacific/Fiji" | "Pacific/Funafuti" | "Pacific/Galapagos" | "Pacific/Gambier" | "Pacific/Guadalcanal" | "Pacific/Guam" | "Pacific/Honolulu" | "Pacific/Johnston" | "Pacific/Kanton" | "Pacific/Kiritimati" | "Pacific/Kosrae" | "Pacific/Kwajalein" | "Pacific/Majuro" | "Pacific/Marquesas" | "Pacific/Midway" | "Pacific/Nauru" | "Pacific/Niue" | "Pacific/Norfolk" | "Pacific/Noumea" | "Pacific/Pago_Pago" | "Pacific/Palau" | "Pacific/Pitcairn" | "Pacific/Pohnpei" | "Pacific/Ponape" | "Pacific/Port_Moresby" | "Pacific/Rarotonga" | "Pacific/Saipan" | "Pacific/Samoa" | "Pacific/Tahiti" | "Pacific/Tarawa" | "Pacific/Tongatapu" | "Pacific/Truk" | "Pacific/Wake" | "Pacific/Wallis" | "Pacific/Yap" | "Poland" | "Portugal" | "ROC" | "ROK" | "Singapore" | "Turkey" | "UCT" | "US/Alaska" | "US/Aleutian" | "US/Arizona" | "US/Central" | "US/East-Indiana" | "US/Eastern" | "US/Hawaii" | "US/Indiana-Starke" | "US/Michigan" | "US/Mountain" | "US/Pacific" | "US/Samoa" | "Universal" | "W-SU" | "WET" | "Zulu";\n  /** @default "Action" */\n  buttonLabel?: string;\n  isDisabled?: boolean;\n  linkLabel?: string;\n  /** @default true */\n  isVisible?: boolean;\n  headerIcon?: string;\n  /** @default "left" */\n  headerIconPosition?: "left" | "right";\n  columnType?: string;\n  cellIcon?: string;\n  /** @default "left" */\n  cellIconPosition?: "left" | "right";\n  textWrap?: boolean;\n  /** @default "left" */\n  horizontalAlign?: "left" | "center" | "right";\n  /** @default "center" */\n  verticalAlign?: "top" | "center" | "bottom";\n  /** @default "Computed at runtime" */\n  cellProps.textStyle?: Record<string, any>;\n  /** @default "Computed at runtime" */\n  cellBackground?: string;\n  imageSize?: "FIXED" | "FIT" | "COVER" | "GROW";\n  /** @default "Computed at runtime" */\n  imageBorderRadius?: { topLeft: Dim; topRight: Dim; bottomLeft: Dim; bottomRight: Dim };\n  buttonIcon?: string;\n  /** @default "left" */\n  buttonIconPosition?: "left" | "right";\n  /** @default "primary" */\n  buttonVariant?: "primary" | "secondary" | "tertiary";\n  /** @default "Computed at runtime" */\n  buttonTextStyle?: Record<string, any>;\n  buttonBackgroundColor?: string;\n  /** @default {"left":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"right":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"top":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"},"bottom":{"width":{"mode":"px","value":1},"style":"solid","color":"transparent"}} */\n  buttonBorder?: { left: Border; right: Border; top: Border; bottom: Border };\n  /** @default "empty" */\n  booleanStyleFalse?: "empty" | "close" | "minus" | "empty_checkbox";\n  tagsWrap?: boolean;\n  tagDisplayConfig?: /**\n * Configuration for tag display styling based on cell values.\n * \n * @description Maps cell values to tag styling configuration. When a cell value matches a key,\n * the corresponding tag styling is applied. The color is used as the background color of the tag pill,\n * and the text color is automatically calculated for optimal contrast.\n * \n * @example\n * {\n *   "Active": { color: "#14CDB733" },     // Cell value "Active" -> green background tag\n *   "Pending": { color: "#FF9F3533" },   // Cell value "Pending" -> orange background tag\n *   "Inactive": { color: "#a6a0a033" }   // Cell value "Inactive" -> gray background tag\n * }\n */\nRecord<string, { \n  /** Hex color string used as background color for the tag pill. Text color is auto-calculated for contrast. */\n  color: string \n}>;\n  isFrozen?: boolean;\n  columnType?: string;\n  onClick?: SbEventFlow;\n}\n\n```\n\nAnd the following properties can be referenced on this component in the Superblocks state object:\n\n```typescript\ninterface SbTableComponentState {\n  /** @default [] */\n  tableDataWithInserts?: any;\n  /** @default [] */\n  tableDataWithInsertsOrderMap?: any;\n  /** @default null */\n  selectedRow?: any;\n  selectedRowSchema?: any;\n  /** @default [] */\n  selectedRows?: any;\n  filteredTableData?: any;\n  filteredOrderMap?: any;\n}\n```\n\nAnd the following properties are settable via BindEntity.{propertyName} = newValue;\n\n```typescript\ninterface SbTableMetaProperties {\n  selectedRowIndex?: number;\n  selectedRowIndices?: any;\n  sortedColumn?: any;\n  /** @default "" */\n  searchText?: string;\n  filters?: any;\n  hiddenColumns?: any;\n  columnFreezes?: any;\n  tagsColorAssignment?: any;\n  /** @default 0 */\n  pageNo?: number;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/SbTextPropsDocs.js
 init_cjs_shims();
-var content29 = '## SbText\n\nThe following is the type definition for the SbText component.\n\n```typescript\ninterface SbTextProps {\n  text?: string;\n  /** @default "text" */\n  textType?: "text" | "number" | "currency" | "date";\n  /** @default "Computed at runtime" */\n  textStyle?: Record<string, any>;\n  /** @default "left" */\n  horizontalAlign?: "left" | "center" | "right";\n  /** @default "center" */\n  verticalAlign?: "top" | "center" | "bottom";\n  /** @default true */\n  wrapText?: boolean;\n  /** @default false */\n  loading?: boolean;\n  shouldScroll?: boolean;\n  icon?: string;\n  /** @default "left" */\n  iconPosition?: "left" | "right";\n  textType?: string;\n  /** @default "USD" */\n  currency?: "AED" | "AFN" | "ALL" | "AMD" | "ANG" | "AOA" | "ARS" | "AUD" | "AWG" | "AZN" | "BAM" | "BBD" | "BDT" | "BGN" | "BHD" | "BIF" | "BMD" | "BND" | "BOB" | "BOV" | "BRL" | "BSD" | "BTN" | "BWP" | "BYN" | "BZD" | "CAD" | "CDF" | "CHE" | "CHF" | "CHW" | "CLF" | "CLP" | "CNY" | "COP" | "COU" | "CRC" | "CUC" | "CUP" | "CVE" | "CZK" | "DJF" | "DKK" | "DOP" | "DZD" | "EGP" | "ERN" | "ETB" | "EUR" | "FJD" | "FKP" | "GBP" | "GEL" | "GHS" | "GIP" | "GMD" | "GNF" | "GTQ" | "GYD" | "HKD" | "HNL" | "HRK" | "HTG" | "HUF" | "IDR" | "ILS" | "INR" | "IQD" | "IRR" | "ISK" | "JMD" | "JOD" | "JPY" | "KES" | "KGS" | "KHR" | "KMF" | "KPW" | "KRW" | "KWD" | "KYD" | "KZT" | "LAK" | "LBP" | "LKR" | "LRD" | "LSL" | "LYD" | "MAD" | "MDL" | "MGA" | "MKD" | "MMK" | "MNT" | "MOP" | "MRU" | "MUR" | "MVR" | "MWK" | "MXN" | "MXV" | "MYR" | "MZN" | "NAD" | "NGN" | "NIO" | "NOK" | "NPR" | "NZD" | "OMR" | "PAB" | "PEN" | "PGK" | "PHP" | "PKR" | "PLN" | "PYG" | "QAR" | "RON" | "RSD" | "RUB" | "RWF" | "SAR" | "SBD" | "SCR" | "SDG" | "SEK" | "SGD" | "SHP" | "SLL" | "SOS" | "SRD" | "SSP" | "STN" | "SVC" | "SYP" | "SZL" | "THB" | "TJS" | "TMT" | "TND" | "TOP" | "TRY" | "TTD" | "TWD" | "TZS" | "UAH" | "UGX" | "USD" | "USN" | "UYI" | "UYU" | "UYW" | "UZS" | "VED" | "VES" | "VND" | "VUV" | "WST" | "XAF" | "XAG" | "XAU" | "XBA" | "XBB" | "XBC" | "XBD" | "XCD" | "XDR" | "XOF" | "XPD" | "XPF" | "XPT" | "XSU" | "XTS" | "XUA" | "XXX" | "YER" | "ZAR" | "ZMW" | "ZWL";\n  /** @default "standard" */\n  numberFormat?: "unformatted" | "standard" | "compact" | "scientific" | "engineering";\n  minDecimals?: number;\n  maxDecimals?: number;\n  dateInputFormat?: "undefined" | "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  dateOutputFormat?: "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  shouldScroll?: boolean;\n}\n```\n';
+var content30 = '## SbText\n\nThe following is the type definition for the SbText component.\n\n```typescript\ninterface SbTextProps {\n  text?: string;\n  /** @default "text" */\n  textType?: "text" | "number" | "currency" | "date";\n  /** @default "Computed at runtime" */\n  textStyle?: Record<string, any>;\n  /** @default "left" */\n  horizontalAlign?: "left" | "center" | "right";\n  /** @default "center" */\n  verticalAlign?: "top" | "center" | "bottom";\n  /** @default true */\n  wrapText?: boolean;\n  /** @default false */\n  loading?: boolean;\n  shouldScroll?: boolean;\n  icon?: string;\n  /** @default "left" */\n  iconPosition?: "left" | "right";\n  textType?: string;\n  /** @default "USD" */\n  currency?: "AED" | "AFN" | "ALL" | "AMD" | "ANG" | "AOA" | "ARS" | "AUD" | "AWG" | "AZN" | "BAM" | "BBD" | "BDT" | "BGN" | "BHD" | "BIF" | "BMD" | "BND" | "BOB" | "BOV" | "BRL" | "BSD" | "BTN" | "BWP" | "BYN" | "BZD" | "CAD" | "CDF" | "CHE" | "CHF" | "CHW" | "CLF" | "CLP" | "CNY" | "COP" | "COU" | "CRC" | "CUC" | "CUP" | "CVE" | "CZK" | "DJF" | "DKK" | "DOP" | "DZD" | "EGP" | "ERN" | "ETB" | "EUR" | "FJD" | "FKP" | "GBP" | "GEL" | "GHS" | "GIP" | "GMD" | "GNF" | "GTQ" | "GYD" | "HKD" | "HNL" | "HRK" | "HTG" | "HUF" | "IDR" | "ILS" | "INR" | "IQD" | "IRR" | "ISK" | "JMD" | "JOD" | "JPY" | "KES" | "KGS" | "KHR" | "KMF" | "KPW" | "KRW" | "KWD" | "KYD" | "KZT" | "LAK" | "LBP" | "LKR" | "LRD" | "LSL" | "LYD" | "MAD" | "MDL" | "MGA" | "MKD" | "MMK" | "MNT" | "MOP" | "MRU" | "MUR" | "MVR" | "MWK" | "MXN" | "MXV" | "MYR" | "MZN" | "NAD" | "NGN" | "NIO" | "NOK" | "NPR" | "NZD" | "OMR" | "PAB" | "PEN" | "PGK" | "PHP" | "PKR" | "PLN" | "PYG" | "QAR" | "RON" | "RSD" | "RUB" | "RWF" | "SAR" | "SBD" | "SCR" | "SDG" | "SEK" | "SGD" | "SHP" | "SLL" | "SOS" | "SRD" | "SSP" | "STN" | "SVC" | "SYP" | "SZL" | "THB" | "TJS" | "TMT" | "TND" | "TOP" | "TRY" | "TTD" | "TWD" | "TZS" | "UAH" | "UGX" | "USD" | "USN" | "UYI" | "UYU" | "UYW" | "UZS" | "VED" | "VES" | "VND" | "VUV" | "WST" | "XAF" | "XAG" | "XAU" | "XBA" | "XBB" | "XBC" | "XBD" | "XCD" | "XDR" | "XOF" | "XPD" | "XPF" | "XPT" | "XSU" | "XTS" | "XUA" | "XXX" | "YER" | "ZAR" | "ZMW" | "ZWL";\n  /** @default "standard" */\n  numberFormat?: "unformatted" | "standard" | "compact" | "scientific" | "engineering";\n  minDecimals?: number;\n  maxDecimals?: number;\n  dateInputFormat?: "undefined" | "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  dateOutputFormat?: "X" | "x" | "MM-DD-YYYY" | "MM-DD-YYYY HH:mm" | "MM-DD-YYYY HH:mm:ss" | "MM-DD-YYYY hh:mm:ss a" | "MM-DD-YYYYTHH:mm:ss.sssZ" | "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ssZ" | "YYYY-MM-DDTHH:mm:ss.sssZ" | "YYYY-MM-DD hh:mm:ss a" | "YYYY-MM-DDTHH:mm:ss" | "DD-MM-YYYY" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY HH:mm:ss" | "DD-MM-YYYY hh:mm:ss a" | "DD-MM-YYYYTHH:mm:ss.sssZ" | "Do MMM YYYY" | "MM/DD/YYYY" | "MM/DD/YYYY HH:mm" | "MM/DD/YYYY HH:mm:ss" | "MM/DD/YYYY hh:mm:ss a" | "MM/DD/YYYYTHH:mm:ss.sssZ" | "YYYY/MM/DD" | "YYYY/MM/DD HH:mm" | "YYYY/MM/DD HH:mm:ss" | "YYYY/MM/DD hh:mm:ss a" | "YYYY/MM/DDTHH:mm:ss" | "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD/MM/YYYY HH:mm:ss" | "DD/MM/YYYY hh:mm:ss a" | "DD/MM/YYYYTHH:mm:ss.sssZ";\n  width?: Dim;\n  height?: Dim;\n  minWidth?: Dim;\n  maxWidth?: Dim;\n  minHeight?: Dim;\n  maxHeight?: Dim;\n  /** @default {"top":{"mode":"px","value":0},"bottom":{"mode":"px","value":0},"left":{"mode":"px","value":0},"right":{"mode":"px","value":0}} */\n  margin?: { left: Dim; right: Dim; top: Dim; bottom: Dim };\n  /** @default true */\n  isVisible?: boolean;\n  shouldScroll?: boolean;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-typedefs/index.js
 var library_typedefs_exports = {};
 __export(library_typedefs_exports, {
-  Dim: () => content30,
-  SbEventFlow: () => content31
+  Dim: () => content31,
+  SbEventFlow: () => content32
 });
 init_cjs_shims();
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-typedefs/Dim.js
 init_cjs_shims();
-var content30 = '## Dim\n\nThe `Dim` class is used to define dimensions for size properties in Superblocks (especially width and height). It has three main modes: `px`, `fit`, and `fill`.\n\n```typescript\nclass Dim {\n  mode: "px" | "fit" | "fill";\n  value?: number;\n}\n```\n';
+var content31 = '## Dim\n\nThe `Dim` class is used to define dimensions for size properties in Superblocks (especially width and height). It has three main modes: `px`, `fit`, and `fill`.\n\n```typescript\nclass Dim {\n  mode: "px" | "fit" | "fill";\n  value?: number;\n}\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-typedefs/SbEventFlow.js
 init_cjs_shims();
-var content31 = '## SbEventFlow\n\nThe `SbEventFlow` class is used to define responses to events triggered on components (like onClick) in Superblocks. It has a number of methods that can be chained together.\n\n```typescript\nclass SbEventFlow {\n  // Run custom JavaScript code\n  static runJS(handler: () => void): SbEventFlow;\n  runJS(handler: () => void): this;\n\n  // Navigation methods\n  static navigateTo(props: { url: string; newWindow?: boolean }): SbEventFlow;\n  navigateTo(props: { url: string; newWindow?: boolean }): this;\n\n  static navigateToApp(appId: string): SbEventFlow;\n  navigateToApp(appId: string): this;\n\n  static navigateToRoute(route: string): SbEventFlow;\n  navigateToRoute(route: string): this;\n\n  static setQueryParams(\n    params: Record<string, string>,\n    keepQueryParams?: boolean,\n  ): SbEventFlow;\n  setQueryParams(\n    params: Record<string, string>,\n    keepQueryParams?: boolean,\n  ): this;\n\n  // Control whether modals are opened or closed\n  // modalId should be the name of the string value of the bind property on the modal component\n  static controlModal(modalId: string, action: "open" | "close"): SbEventFlow;\n  controlModal(modalId: string, action: "open" | "close"): this;\n\n  static controlTimer(\n    timerId: string,\n    action: "start" | "stop" | "toggle",\n  ): SbEventFlow;\n  controlTimer(timerId: string, action: "start" | "stop" | "toggle"): this;\n\n  // API methods\n  static runApis(\n    apis: SbApi[],\n    onSuccess?: SbEventFlow,\n    onError?: SbEventFlow,\n  ): SbEventFlow;\n  runApis(apis: SbApi[], onSuccess?: SbEventFlow, onError?: SbEventFlow): this;\n\n  static cancelApis(apiNames: string[], onCancel?: SbEventFlow): SbEventFlow;\n  cancelApis(apiNames: string[], onCancel?: SbEventFlow): this;\n\n  // Component and state manipulation\n  static resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): SbEventFlow;\n  resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): this;\n\n  static resetStateVar(stateVar: SbVariable): SbEventFlow;\n  resetStateVar(stateVar: SbVariable): this;\n\n  static setStateVar(stateVar: SbVariable, value: any): SbEventFlow;\n  setStateVar(stateVar: SbVariable, value: any): this;\n\n  static setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): SbEventFlow;\n  setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): this;\n\n  // Utility methods\n  static showAlert(\n    message: string,\n    alertType: "info" | "success" | "warning" | "error",\n  ): SbEventFlow;\n  showAlert(\n    message: string,\n    alertType: "info" | "success" | "warning" | "error",\n  ): this;\n\n  static setProfile(\n    profileId: string,\n    profileAction: "set" | "unset",\n  ): SbEventFlow;\n  setProfile(profileId: string, profileAction: "set" | "unset"): this;\n\n  static triggerEvent(\n    eventName: string,\n    eventData: Record<string, string>,\n  ): SbEventFlow;\n  triggerEvent(eventName: string, eventData: Record<string, string>): this;\n}\n```\n';
+var content32 = '## SbEventFlow\n\nThe `SbEventFlow` class is used to define responses to events triggered on components (like onClick) in Superblocks. It has a number of methods that can be chained together.\n\n```typescript\nclass SbEventFlow {\n  // Run custom JavaScript code\n  static runJS(handler: () => void): SbEventFlow;\n  runJS(handler: () => void): this;\n\n  // Navigation methods\n  static navigateTo(props: { url: string; newWindow?: boolean }): SbEventFlow;\n  navigateTo(props: { url: string; newWindow?: boolean }): this;\n\n  static navigateToApp(appId: string): SbEventFlow;\n  navigateToApp(appId: string): this;\n\n  static navigateToRoute(route: string): SbEventFlow;\n  navigateToRoute(route: string): this;\n\n  static setQueryParams(\n    params: Record<string, string>,\n    keepQueryParams?: boolean,\n  ): SbEventFlow;\n  setQueryParams(\n    params: Record<string, string>,\n    keepQueryParams?: boolean,\n  ): this;\n\n  // Control whether modals are opened or closed\n  // modalId should be the name of the string value of the bind property on the modal component\n  static controlModal(modalId: string, action: "open" | "close"): SbEventFlow;\n  controlModal(modalId: string, action: "open" | "close"): this;\n\n  static controlTimer(\n    timerId: string,\n    action: "start" | "stop" | "toggle",\n  ): SbEventFlow;\n  controlTimer(timerId: string, action: "start" | "stop" | "toggle"): this;\n\n  // API methods\n  static runApis(\n    apis: SbApi[],\n    onSuccess?: SbEventFlow,\n    onError?: SbEventFlow,\n  ): SbEventFlow;\n  runApis(apis: SbApi[], onSuccess?: SbEventFlow, onError?: SbEventFlow): this;\n\n  static cancelApis(apiNames: string[], onCancel?: SbEventFlow): SbEventFlow;\n  cancelApis(apiNames: string[], onCancel?: SbEventFlow): this;\n\n  // Component and state manipulation\n  static resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): SbEventFlow;\n  resetComponent(\n    widget: { id: string },\n    propertyName: string,\n    resetChildren: boolean,\n  ): this;\n\n  static resetStateVar(stateVar: SbVariable): SbEventFlow;\n  resetStateVar(stateVar: SbVariable): this;\n\n  static setStateVar(stateVar: SbVariable, value: any): SbEventFlow;\n  setStateVar(stateVar: SbVariable, value: any): this;\n\n  static setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): SbEventFlow;\n  setComponentProperty(\n    widget: { id: string },\n    propertyName: string,\n    value: any,\n  ): this;\n\n  // Utility methods\n  static showAlert(\n    message: string,\n    alertType: "info" | "success" | "warning" | "error",\n  ): SbEventFlow;\n  showAlert(\n    message: string,\n    alertType: "info" | "success" | "warning" | "error",\n  ): this;\n\n  static setProfile(\n    profileId: string,\n    profileAction: "set" | "unset",\n  ): SbEventFlow;\n  setProfile(profileId: string, profileAction: "set" | "unset"): this;\n\n  static triggerEvent(\n    eventName: string,\n    eventData: Record<string, string>,\n  ): SbEventFlow;\n  triggerEvent(eventName: string, eventData: Record<string, string>): this;\n}\n```\n';
 export {
   library_components_exports as library_components,
   library_typedefs_exports as library_typedefs,