Merge remote-tracking branch 'origin/master' into feature/signature-field-and-component

2024-05-08 09:43:30 +01:00 · 2024-05-08 09:43:30 +01:00 · a29301a2fc
parent f6691fc9ef 1ffe9bda6f
commit a29301a2fc
184 changed files with 4088 additions and 1803 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,4 +1,5 @@
 {
+  "root": true,
  "env": {
    "browser": true,
    "es6": true,
@ -42,6 +43,8 @@
      },
      "rules": {
        "no-unused-vars": "off",
+        "local-rules/no-budibase-imports": "error",
+        "local-rules/no-console-error": "error",
        "@typescript-eslint/no-unused-vars": [
          "error",
          {
--- a/.github/workflows/budibase_ci.yml
+++ b/.github/workflows/budibase_ci.yml
@ -92,8 +92,6 @@ jobs:

  test-libraries:
    runs-on: ubuntu-latest
-    env:
-      REUSE_CONTAINERS: true
    steps:
      - name: Checkout repo
        uses: actions/checkout@v4
@ -150,8 +148,6 @@ jobs:

  test-server:
    runs-on: budi-tubby-tornado-quad-core-150gb
-    env:
-      REUSE_CONTAINERS: true
    steps:
      - name: Checkout repo
        uses: actions/checkout@v4
--- a/.prettierignore
+++ b/.prettierignore
@ -12,4 +12,5 @@ packages/pro/coverage
 packages/account-portal/packages/ui/build
 packages/account-portal/packages/ui/.routify
 packages/account-portal/packages/server/build
+packages/account-portal/packages/server/coverage
 **/*.ivm.bundle.js
--- a/charts/budibase/templates/app-service-deployment.yaml
+++ b/charts/budibase/templates/app-service-deployment.yaml
@ -106,6 +106,8 @@ spec:
          value: {{ .Values.services.objectStore.globalBucketName | quote }}
        - name: BACKUPS_BUCKET_NAME
          value: {{ .Values.services.objectStore.backupsBucketName | quote }}
+        - name: TEMP_BUCKET_NAME
+          value: {{ .Values.globals.tempBucketName | quote }}
        - name: PORT
          value: {{ .Values.services.apps.port | quote }}
        {{ if .Values.services.worker.publicApiRateLimitPerSecond }}
--- a/charts/budibase/templates/automation-worker-service-deployment.yaml
+++ b/charts/budibase/templates/automation-worker-service-deployment.yaml
@ -107,6 +107,8 @@ spec:
          value: {{ .Values.services.objectStore.globalBucketName | quote }}
        - name: BACKUPS_BUCKET_NAME
          value: {{ .Values.services.objectStore.backupsBucketName | quote }}
+        - name: TEMP_BUCKET_NAME
+          value: {{ .Values.globals.tempBucketName | quote }}
        - name: PORT
          value: {{ .Values.services.automationWorkers.port | quote }}
        {{ if .Values.services.worker.publicApiRateLimitPerSecond }}
--- a/charts/budibase/templates/worker-service-deployment.yaml
+++ b/charts/budibase/templates/worker-service-deployment.yaml
@ -106,6 +106,8 @@ spec:
          value: {{ .Values.services.objectStore.globalBucketName | quote }}
        - name: BACKUPS_BUCKET_NAME
          value: {{ .Values.services.objectStore.backupsBucketName | quote }}
+        - name: TEMP_BUCKET_NAME
+          value: {{ .Values.globals.tempBucketName | quote }}
        - name: PORT
          value: {{ .Values.services.worker.port | quote }}
        - name: MULTI_TENANCY
--- a/charts/budibase/values.yaml
+++ b/charts/budibase/values.yaml
@ -121,6 +121,9 @@ globals:
  # to the old value for the duration of the rotation.
  jwtSecretFallback: ""

+  ## -- If using S3 the bucket name to be used for storing temporary files
+  tempBucketName: ""
+
  smtp:
    # -- Whether to enable SMTP or not.
    enabled: false
--- a/eslint-local-rules/index.js
+++ b/eslint-local-rules/index.js
@ -1,4 +1,25 @@
 module.exports = {
+  "no-console-error": {
+    create: function(context) {
+      return {
+        CallExpression(node) {
+          if (
+            node.callee.type === "MemberExpression" &&
+            node.callee.object.name === "console" &&
+            node.callee.property.name === "error" &&
+            node.arguments.length === 1 &&
+            node.arguments[0].name &&
+            node.arguments[0].name.startsWith("err")
+          ) {
+            context.report({
+              node,
+              message: 'Using console.error(err) on its own is not allowed. Either provide context to the error (console.error(msg, err)) or throw it.',
+            })
+          }
+        },
+      };
+    },
+  },
  "no-budibase-imports": {
    create: function (context) {
      return {
--- a/globalSetup.ts
+++ b/globalSetup.ts
@ -1,16 +1,49 @@
-import { GenericContainer, Wait } from "testcontainers"
+import {
+  GenericContainer,
+  Wait,
+  getContainerRuntimeClient,
+} from "testcontainers"
+import { ContainerInfo } from "dockerode"
 import path from "path"
 import lockfile from "proper-lockfile"

+async function getBudibaseContainers() {
+  const client = await getContainerRuntimeClient()
+  const conatiners = await client.container.list()
+  return conatiners.filter(
+    container =>
+      container.Labels["com.budibase"] === "true" &&
+      container.Labels["org.testcontainers"] === "true"
+  )
+}
+
+async function killContainers(containers: ContainerInfo[]) {
+  const client = await getContainerRuntimeClient()
+  for (const container of containers) {
+    const c = client.container.getById(container.Id)
+    await c.kill()
+    await c.remove()
+  }
+}
+
 export default async function setup() {
  const lockPath = path.resolve(__dirname, "globalSetup.ts")
-  if (process.env.REUSE_CONTAINERS) {
-    // If you run multiple tests at the same time, it's possible for the CouchDB
-    // shared container to get started multiple times despite having an
-    // identical reuse hash. To avoid that, we do a filesystem-based lock so
-    // that only one globalSetup.ts is running at a time.
-    lockfile.lockSync(lockPath)
-  }
+  // If you run multiple tests at the same time, it's possible for the CouchDB
+  // shared container to get started multiple times despite having an
+  // identical reuse hash. To avoid that, we do a filesystem-based lock so
+  // that only one globalSetup.ts is running at a time.
+  lockfile.lockSync(lockPath)
+
+  // Remove any containers that are older than 24 hours. This is to prevent
+  // containers getting full volumes or accruing any other problems from being
+  // left up for very long periods of time.
+  const threshold = new Date(Date.now() - 1000 * 60 * 60 * 24)
+  const containers = (await getBudibaseContainers()).filter(container => {
+    const created = new Date(container.Created * 1000)
+    return created < threshold
+  })
+
+  await killContainers(containers)

  try {
    let couchdb = new GenericContainer("budibase/couchdb:v3.2.1-sqs")
@ -28,20 +61,16 @@ export default async function setup() {
          target: "/opt/couchdb/etc/local.d/test-couchdb.ini",
        },
      ])
+      .withLabels({ "com.budibase": "true" })
+      .withReuse()
      .withWaitStrategy(
        Wait.forSuccessfulCommand(
          "curl http://budibase:budibase@localhost:5984/_up"
        ).withStartupTimeout(20000)
      )

-    if (process.env.REUSE_CONTAINERS) {
-      couchdb = couchdb.withReuse()
-    }
-
    await couchdb.start()
  } finally {
-    if (process.env.REUSE_CONTAINERS) {
-      lockfile.unlockSync(lockPath)
-    }
+    lockfile.unlockSync(lockPath)
  }
 }
--- a/hosting/couchdb/runner.v2.sh
+++ b/hosting/couchdb/runner.v2.sh
@ -70,10 +70,10 @@ sed -i "s#COUCHDB_ERLANG_COOKIE#${COUCHDB_ERLANG_COOKIE}#g" /opt/clouseau/clouse
 /opt/clouseau/bin/clouseau > /dev/stdout 2>&1 &

 # Start CouchDB.
-/docker-entrypoint.sh /opt/couchdb/bin/couchdb &
+/docker-entrypoint.sh /opt/couchdb/bin/couchdb > /dev/stdout 2>&1 &

-# Start SQS.
-/opt/sqs/sqs --server "http://localhost:5984" --data-dir ${DATA_DIR}/sqs --bind-address=0.0.0.0 &
+# Start SQS. Use 127.0.0.1 instead of localhost to avoid IPv6 issues.
+/opt/sqs/sqs --server "http://127.0.0.1:5984" --data-dir ${DATA_DIR}/sqs --bind-address=0.0.0.0 > /dev/stdout 2>&1 &

 # Wait for CouchDB to start up.
 while [[ $(curl -s -w "%{http_code}\n" http://localhost:5984/_up -o /dev/null) -ne 200 ]]; do
--- a/hosting/single/Dockerfile
+++ b/hosting/single/Dockerfile
@ -19,9 +19,6 @@ RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
 RUN ./scripts/removeWorkspaceDependencies.sh packages/server/package.json
 RUN ./scripts/removeWorkspaceDependencies.sh packages/worker/package.json

-
-# We will never want to sync pro, but the script is still required
-RUN echo '' > scripts/syncProPackage.js
 RUN jq 'del(.scripts.postinstall)' package.json > temp.json && mv temp.json package.json
 RUN ./scripts/removeWorkspaceDependencies.sh package.json
 RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production --frozen-lockfile
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "2.23.8",
+  "version": "2.24.1",
  "npmClient": "yarn",
  "packages": [
    "packages/*",
--- a/package.json
+++ b/package.json
@ -32,7 +32,6 @@
    "yargs": "^17.7.2"
  },
  "scripts": {
-    "preinstall": "node scripts/syncProPackage.js",
    "get-past-client-version": "node scripts/getPastClientVersion.js",
    "setup": "git config submodule.recurse true && git submodule update && node ./hosting/scripts/setup.js && yarn && yarn build && yarn dev",
    "build": "NODE_OPTIONS=--max-old-space-size=1500 lerna run build --stream",
@ -60,7 +59,8 @@
    "dev:all": "yarn run kill-all && lerna run --stream dev",
    "dev:built": "yarn run kill-all && cd packages/server && yarn dev:stack:up && cd ../../ && lerna run --stream dev:built",
    "dev:docker": "./scripts/devDocker.sh",
-    "test": "REUSE_CONTAINERS=1 lerna run --concurrency 1 --stream test --stream",
+    "test": "lerna run --concurrency 1 --stream test --stream",
+    "test:containers:kill": "./scripts/killTestcontainers.sh",
    "lint:eslint": "eslint packages --max-warnings=0",
    "lint:prettier": "prettier --check \"packages/**/*.{js,ts,svelte}\" && prettier --write \"examples/**/*.{js,ts,svelte}\"",
    "lint": "yarn run lint:eslint && yarn run lint:prettier",
@ -107,6 +107,7 @@
    "@budibase/shared-core": "0.0.0",
    "@budibase/string-templates": "0.0.0",
    "@budibase/types": "0.0.0",
+    "@budibase/pro": "npm:@budibase/pro@latest",
    "tough-cookie": "4.1.3",
    "node-fetch": "2.6.7",
    "semver": "7.5.3",
--- a/packages/account-portal
+++ b/packages/account-portal
@ -1 +1 @@
-Subproject commit eb7d5da233885c5cffd9c255d3e954d0cd39185e
+Subproject commit c167c331ff9b8161fc18e2ecbaaf1ea5815ba964
--- a/packages/backend-core/src/auth/auth.ts
+++ b/packages/backend-core/src/auth/auth.ts
@ -64,7 +64,6 @@ async function refreshOIDCAccessToken(
    }
    strategy = await oidc.strategyFactory(enrichedConfig, ssoSaveUserNoOp)
  } catch (err) {
-    console.error(err)
    throw new Error("Could not refresh OAuth Token")
  }

@ -99,7 +98,6 @@ async function refreshGoogleAccessToken(
      ssoSaveUserNoOp
    )
  } catch (err: any) {
-    console.error(err)
    throw new Error(
      `Error constructing OIDC refresh strategy: message=${err.message}`
    )
--- a/packages/backend-core/src/environment.ts
+++ b/packages/backend-core/src/environment.ts
@ -29,6 +29,7 @@ const DefaultBucketName = {
  TEMPLATES: "templates",
  GLOBAL: "global",
  PLUGINS: "plugins",
+  TEMP: "tmp-file-attachments",
 }

 const selfHosted = !!parseInt(process.env.SELF_HOSTED || "")
@ -146,6 +147,7 @@ const environment = {
    process.env.GLOBAL_BUCKET_NAME || DefaultBucketName.GLOBAL,
  PLUGIN_BUCKET_NAME:
    process.env.PLUGIN_BUCKET_NAME || DefaultBucketName.PLUGINS,
+  TEMP_BUCKET_NAME: process.env.TEMP_BUCKET_NAME || DefaultBucketName.TEMP,
  USE_COUCH: process.env.USE_COUCH || true,
  MOCK_REDIS: process.env.MOCK_REDIS,
  DEFAULT_LICENSE: process.env.DEFAULT_LICENSE,
--- a/packages/backend-core/src/middleware/authenticated.ts
+++ b/packages/backend-core/src/middleware/authenticated.ts
@ -138,7 +138,6 @@ export default function (
        } catch (err: any) {
          authenticated = false
          console.error(`Auth Error: ${err.message}`)
-          console.error(err)
          // remove the cookie as the user does not exist anymore
          clearCookie(ctx, Cookie.Auth)
        }
@ -187,7 +186,6 @@ export default function (
      }
    } catch (err: any) {
      console.error(`Auth Error: ${err.message}`)
-      console.error(err)
      // invalid token, clear the cookie
      if (err?.name === "JsonWebTokenError") {
        clearCookie(ctx, Cookie.Auth)
--- a/packages/backend-core/src/middleware/errorHandling.ts
+++ b/packages/backend-core/src/middleware/errorHandling.ts
@ -12,7 +12,7 @@ export async function errorHandling(ctx: any, next: any) {
    if (status >= 400 && status < 500) {
      console.warn(err)
    } else {
-      console.error(err)
+      console.error("Got 400 response code", err)
    }

    let error: APIError = {
--- a/packages/backend-core/src/middleware/passport/sso/google.ts
+++ b/packages/backend-core/src/middleware/passport/sso/google.ts
@ -68,7 +68,6 @@ export async function strategyFactory(
      verify
    )
  } catch (err: any) {
-    console.error(err)
    throw new Error(`Error constructing google authentication strategy: ${err}`)
  }
 }
--- a/packages/backend-core/src/middleware/passport/sso/oidc.ts
+++ b/packages/backend-core/src/middleware/passport/sso/oidc.ts
@ -103,7 +103,6 @@ export async function strategyFactory(
    strategy.name = "oidc"
    return strategy
  } catch (err: any) {
-    console.error(err)
    throw new Error(`Error constructing OIDC authentication strategy - ${err}`)
  }
 }
@ -142,7 +141,6 @@ export async function fetchStrategyConfig(
      callbackURL: callbackUrl,
    }
  } catch (err) {
-    console.error(err)
    throw new Error(
      `Error constructing OIDC authentication configuration - ${err}`
    )
--- a/packages/backend-core/src/migrations/migrations.ts
+++ b/packages/backend-core/src/migrations/migrations.ts
@ -26,7 +26,6 @@ export const getMigrationsDoc = async (db: any) => {
    if (err.status && err.status === 404) {
      return { _id: DocumentType.MIGRATIONS }
    } else {
-      console.error(err)
      throw err
    }
  }
--- a/packages/backend-core/src/objectStore/objectStore.ts
+++ b/packages/backend-core/src/objectStore/objectStore.ts
@ -7,31 +7,41 @@ import tar from "tar-fs"
 import zlib from "zlib"
 import { promisify } from "util"
 import { join } from "path"
-import fs, { ReadStream } from "fs"
+import fs, { PathLike, ReadStream } from "fs"
 import env from "../environment"
-import { budibaseTempDir } from "./utils"
+import { bucketTTLConfig, budibaseTempDir } from "./utils"
 import { v4 } from "uuid"
 import { APP_PREFIX, APP_DEV_PREFIX } from "../db"
+import fsp from "fs/promises"

 const streamPipeline = promisify(stream.pipeline)
 // use this as a temporary store of buckets that are being created
 const STATE = {
  bucketCreationPromises: {},
 }
+const signedFilePrefix = "/files/signed"

 type ListParams = {
  ContinuationToken?: string
 }

-type UploadParams = {
+type BaseUploadParams = {
  bucket: string
  filename: string
-  path: string
  type?: string | null
-  // can be undefined, we will remove it
-  metadata?: {
-    [key: string]: string | undefined
-  }
+  metadata?: { [key: string]: string | undefined }
+  body?: ReadableStream | Buffer
+  ttl?: number
+  addTTL?: boolean
+  extra?: any
+}
+
+type UploadParams = BaseUploadParams & {
+  path?: string | PathLike
+}
+
+type StreamUploadParams = BaseUploadParams & {
+  stream: ReadStream
 }

 const CONTENT_TYPE_MAP: any = {
@ -41,6 +51,8 @@ const CONTENT_TYPE_MAP: any = {
  js: "application/javascript",
  json: "application/json",
  gz: "application/gzip",
+  svg: "image/svg+xml",
+  form: "multipart/form-data",
 }

 const STRING_CONTENT_TYPES = [
@ -105,7 +117,10 @@ export function ObjectStore(
 * Given an object store and a bucket name this will make sure the bucket exists,
 * if it does not exist then it will create it.
 */
-export async function makeSureBucketExists(client: any, bucketName: string) {
+export async function createBucketIfNotExists(
+  client: any,
+  bucketName: string
+): Promise<{ created: boolean; exists: boolean }> {
  bucketName = sanitizeBucket(bucketName)
  try {
    await client
@ -113,15 +128,16 @@ export async function makeSureBucketExists(client: any, bucketName: string) {
        Bucket: bucketName,
      })
      .promise()
+    return { created: false, exists: true }
  } catch (err: any) {
    const promises: any = STATE.bucketCreationPromises
    const doesntExist = err.statusCode === 404,
      noAccess = err.statusCode === 403
    if (promises[bucketName]) {
      await promises[bucketName]
+      return { created: false, exists: true }
    } else if (doesntExist || noAccess) {
      if (doesntExist) {
-        // bucket doesn't exist create it
        promises[bucketName] = client
          .createBucket({
            Bucket: bucketName,
@ -129,13 +145,15 @@ export async function makeSureBucketExists(client: any, bucketName: string) {
          .promise()
        await promises[bucketName]
        delete promises[bucketName]
+        return { created: true, exists: false }
+      } else {
+        throw new Error("Access denied to object store bucket." + err)
      }
    } else {
      throw new Error("Unable to write to object store bucket.")
    }
  }
 }
-
 /**
 * Uploads the contents of a file given the required parameters, useful when
 * temp files in use (for example file uploaded as an attachment).
@ -146,12 +164,22 @@ export async function upload({
  path,
  type,
  metadata,
+  body,
+  ttl,
 }: UploadParams) {
  const extension = filename.split(".").pop()
-  const fileBytes = fs.readFileSync(path)
+
+  const fileBytes = path ? (await fsp.open(path)).createReadStream() : body

  const objectStore = ObjectStore(bucketName)
-  await makeSureBucketExists(objectStore, bucketName)
+  const bucketCreated = await createBucketIfNotExists(objectStore, bucketName)
+
+  if (ttl && (bucketCreated.created || bucketCreated.exists)) {
+    let ttlConfig = bucketTTLConfig(bucketName, ttl)
+    if (objectStore.putBucketLifecycleConfiguration) {
+      await objectStore.putBucketLifecycleConfiguration(ttlConfig).promise()
+    }
+  }

  let contentType = type
  if (!contentType) {
@ -174,6 +202,7 @@ export async function upload({
    }
    config.Metadata = metadata
  }
+
  return objectStore.upload(config).promise()
 }

@ -181,14 +210,24 @@ export async function upload({
 * Similar to the upload function but can be used to send a file stream
 * through to the object store.
 */
-export async function streamUpload(
-  bucketName: string,
-  filename: string,
-  stream: ReadStream | ReadableStream,
-  extra = {}
-) {
+export async function streamUpload({
+  bucket: bucketName,
+  stream,
+  filename,
+  type,
+  extra,
+  ttl,
+}: StreamUploadParams) {
+  const extension = filename.split(".").pop()
  const objectStore = ObjectStore(bucketName)
-  await makeSureBucketExists(objectStore, bucketName)
+  const bucketCreated = await createBucketIfNotExists(objectStore, bucketName)
+
+  if (ttl && (bucketCreated.created || bucketCreated.exists)) {
+    let ttlConfig = bucketTTLConfig(bucketName, ttl)
+    if (objectStore.putBucketLifecycleConfiguration) {
+      await objectStore.putBucketLifecycleConfiguration(ttlConfig).promise()
+    }
+  }

  // Set content type for certain known extensions
  if (filename?.endsWith(".js")) {
@ -203,10 +242,18 @@ export async function streamUpload(
    }
  }

+  let contentType = type
+  if (!contentType) {
+    contentType = extension
+      ? CONTENT_TYPE_MAP[extension.toLowerCase()]
+      : CONTENT_TYPE_MAP.txt
+  }
+
  const params = {
    Bucket: sanitizeBucket(bucketName),
    Key: sanitizeKey(filename),
    Body: stream,
+    ContentType: contentType,
    ...extra,
  }
  return objectStore.upload(params).promise()
@ -286,7 +333,7 @@ export function getPresignedUrl(
    const signedUrl = new URL(url)
    const path = signedUrl.pathname
    const query = signedUrl.search
-    return `/files/signed${path}${query}`
+    return `${signedFilePrefix}${path}${query}`
  }
 }

@ -341,7 +388,7 @@ export async function retrieveDirectory(bucketName: string, path: string) {
 */
 export async function deleteFile(bucketName: string, filepath: string) {
  const objectStore = ObjectStore(bucketName)
-  await makeSureBucketExists(objectStore, bucketName)
+  await createBucketIfNotExists(objectStore, bucketName)
  const params = {
    Bucket: bucketName,
    Key: sanitizeKey(filepath),
@ -351,7 +398,7 @@ export async function deleteFile(bucketName: string, filepath: string) {

 export async function deleteFiles(bucketName: string, filepaths: string[]) {
  const objectStore = ObjectStore(bucketName)
-  await makeSureBucketExists(objectStore, bucketName)
+  await createBucketIfNotExists(objectStore, bucketName)
  const params = {
    Bucket: bucketName,
    Delete: {
@ -412,7 +459,13 @@ export async function uploadDirectory(
    if (file.isDirectory()) {
      uploads.push(uploadDirectory(bucketName, local, path))
    } else {
-      uploads.push(streamUpload(bucketName, path, fs.createReadStream(local)))
+      uploads.push(
+        streamUpload({
+          bucket: bucketName,
+          filename: path,
+          stream: fs.createReadStream(local),
+        })
+      )
    }
  }
  await Promise.all(uploads)
@ -467,3 +520,23 @@ export async function getReadStream(
  }
  return client.getObject(params).createReadStream()
 }
+
+/*
+Given a signed url like '/files/signed/tmp-files-attachments/app_123456/myfile.txt' extract
+the bucket and the path from it
+*/
+export function extractBucketAndPath(
+  url: string
+): { bucket: string; path: string } | null {
+  const baseUrl = url.split("?")[0]
+
+  const regex = new RegExp(`^${signedFilePrefix}/(?<bucket>[^/]+)/(?<path>.+)$`)
+  const match = baseUrl.match(regex)
+
+  if (match && match.groups) {
+    const { bucket, path } = match.groups
+    return { bucket, path }
+  }
+
+  return null
+}
--- a/packages/backend-core/src/objectStore/utils.ts
+++ b/packages/backend-core/src/objectStore/utils.ts
@ -2,6 +2,7 @@ import { join } from "path"
 import { tmpdir } from "os"
 import fs from "fs"
 import env from "../environment"
+import { PutBucketLifecycleConfigurationRequest } from "aws-sdk/clients/s3"

 /****************************************************
 *      NOTE: When adding a new bucket - name       *
@ -15,6 +16,7 @@ export const ObjectStoreBuckets = {
  TEMPLATES: env.TEMPLATES_BUCKET_NAME,
  GLOBAL: env.GLOBAL_BUCKET_NAME,
  PLUGINS: env.PLUGIN_BUCKET_NAME,
+  TEMP: env.TEMP_BUCKET_NAME,
 }

 const bbTmp = join(tmpdir(), ".budibase")
@ -29,3 +31,27 @@ try {
 export function budibaseTempDir() {
  return bbTmp
 }
+
+export const bucketTTLConfig = (
+  bucketName: string,
+  days: number
+): PutBucketLifecycleConfigurationRequest => {
+  const lifecycleRule = {
+    ID: `${bucketName}-ExpireAfter${days}days`,
+    Prefix: "",
+    Status: "Enabled",
+    Expiration: {
+      Days: days,
+    },
+  }
+  const lifecycleConfiguration = {
+    Rules: [lifecycleRule],
+  }
+
+  const params = {
+    Bucket: bucketName,
+    LifecycleConfiguration: lifecycleConfiguration,
+  }
+
+  return params
+}
--- a/packages/backend-core/tests/core/utilities/index.ts
+++ b/packages/backend-core/tests/core/utilities/index.ts
@ -4,3 +4,6 @@ export { generator } from "./structures"
 export * as testContainerUtils from "./testContainerUtils"
 export * as utils from "./utils"
 export * from "./jestUtils"
+import * as minio from "./minio"
+
+export const objectStoreTestProviders = { minio }
--- a/packages/backend-core/tests/core/utilities/minio.ts
+++ b/packages/backend-core/tests/core/utilities/minio.ts
@ -0,0 +1,34 @@
+import { GenericContainer, Wait, StartedTestContainer } from "testcontainers"
+import { AbstractWaitStrategy } from "testcontainers/build/wait-strategies/wait-strategy"
+import env from "../../../src/environment"
+
+let container: StartedTestContainer | undefined
+
+class ObjectStoreWaitStrategy extends AbstractWaitStrategy {
+  async waitUntilReady(container: any, boundPorts: any, startTime?: Date) {
+    const logs = Wait.forListeningPorts()
+    await logs.waitUntilReady(container, boundPorts, startTime)
+  }
+}
+
+export async function start(): Promise<void> {
+  container = await new GenericContainer("minio/minio")
+    .withExposedPorts(9000)
+    .withCommand(["server", "/data"])
+    .withEnvironment({
+      MINIO_ACCESS_KEY: "budibase",
+      MINIO_SECRET_KEY: "budibase",
+    })
+    .withWaitStrategy(new ObjectStoreWaitStrategy().withStartupTimeout(30000))
+    .start()
+
+  const port = container.getMappedPort(9000)
+  env._set("MINIO_URL", `http://0.0.0.0:${port}`)
+}
+
+export async function stop() {
+  if (container) {
+    await container.stop()
+    container = undefined
+  }
+}
--- a/packages/backend-core/tests/core/utilities/testContainerUtils.ts
+++ b/packages/backend-core/tests/core/utilities/testContainerUtils.ts
@ -28,7 +28,11 @@ function getTestcontainers(): ContainerInfo[] {
    .split("\n")
    .filter(x => x.length > 0)
    .map(x => JSON.parse(x) as ContainerInfo)
-    .filter(x => x.Labels.includes("org.testcontainers=true"))
+    .filter(
+      x =>
+        x.Labels.includes("org.testcontainers=true") &&
+        x.Labels.includes("com.budibase=true")
+    )
 }

 export function getContainerByImage(image: string) {
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@ -43,6 +43,7 @@
    "@spectrum-css/avatar": "3.0.2",
    "@spectrum-css/button": "3.0.1",
    "@spectrum-css/buttongroup": "3.0.2",
+    "@spectrum-css/calendar": "3.2.7",
    "@spectrum-css/checkbox": "3.0.2",
    "@spectrum-css/dialog": "3.0.1",
    "@spectrum-css/divider": "1.0.3",
@ -82,7 +83,6 @@
    "dayjs": "^1.10.8",
    "easymde": "^2.16.1",
    "svelte-dnd-action": "^0.9.8",
-    "svelte-flatpickr": "3.2.3",
    "svelte-portal": "^1.0.0"
  },
  "resolutions": {
--- a/packages/bbui/src/ActionMenu/ActionMenu.svelte
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@ -38,7 +38,15 @@
 <div use:getAnchor on:click={openMenu}>
  <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget} on:open on:close>
+<Popover
+  bind:this={dropdown}
+  {anchor}
+  {align}
+  {portalTarget}
+  resizable={false}
+  on:open
+  on:close
+>
  <Menu>
    <slot />
  </Menu>
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@ -1,13 +1,24 @@
+// These class names will never trigger a callback if clicked, no matter what
 const ignoredClasses = [
-  ".flatpickr-calendar",
-  ".spectrum-Popover",
  ".download-js-link",
+  ".spectrum-Menu",
+  ".date-time-popover",
+]
+
+// These class names will only trigger a callback when clicked if the registered
+// component is not nested inside them. For example, clicking inside a modal
+// will not close the modal, or clicking inside a popover will not close the
+// popover.
+const conditionallyIgnoredClasses = [
+  ".spectrum-Underlay",
+  ".drawer-wrapper",
+  ".spectrum-Popover",
 ]
 let clickHandlers = []
+let candidateTarget

-/**
- * Handle a body click event
- */
+// Processes a "click outside" event and invokes callbacks if our source element
+// is valid
 const handleClick = event => {
  // Ignore click if this is an ignored class
  if (event.target.closest('[data-ignore-click-outside="true"]')) {
@ -21,41 +32,60 @@ const handleClick = event => {

  // Process handlers
  clickHandlers.forEach(handler => {
+    // Check that the click isn't inside the target
    if (handler.element.contains(event.target)) {
      return
    }

-    // Ignore clicks for modals, unless the handler is registered from a modal
-    const sourceInModal = handler.anchor.closest(".spectrum-Underlay") != null
-    const clickInModal = event.target.closest(".spectrum-Underlay") != null
-    if (clickInModal && !sourceInModal) {
-      return
-    }
-
-    // Ignore clicks for drawers, unless the handler is registered from a drawer
-    const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
-    const clickInDrawer = event.target.closest(".drawer-wrapper") != null
-    if (clickInDrawer && !sourceInDrawer) {
-      return
-    }
-
-    if (handler.allowedType && event.type !== handler.allowedType) {
-      return
+    // Ignore clicks for certain classes unless we're nested inside them
+    for (let className of conditionallyIgnoredClasses) {
+      const sourceInside = handler.anchor.closest(className) != null
+      const clickInside = event.target.closest(className) != null
+      if (clickInside && !sourceInside) {
+        return
+      }
    }

    handler.callback?.(event)
  })
 }
-document.documentElement.addEventListener("click", handleClick, true)
-document.documentElement.addEventListener("mousedown", handleClick, true)
+
+// On mouse up we only trigger a "click outside" callback if we targetted the
+// same element that we did on mouse down. This fixes all sorts of issues where
+// we get annoying callbacks firing when we drag to select text.
+const handleMouseUp = e => {
+  if (candidateTarget === e.target) {
+    handleClick(e)
+  }
+  candidateTarget = null
+}
+
+// On mouse down we store which element was targetted for comparison later
+const handleMouseDown = e => {
+  // Only handle the primary mouse button here.
+  // We handle context menu (right click) events in another handler.
+  if (e.button !== 0) {
+    return
+  }
+  candidateTarget = e.target
+
+  // Clear any previous listeners in case of multiple down events, and register
+  // a single mouse up listener
+  document.removeEventListener("mouseup", handleMouseUp)
+  document.addEventListener("mouseup", handleMouseUp, true)
+}
+
+// Global singleton listeners for our events
+document.addEventListener("mousedown", handleMouseDown)
+document.addEventListener("contextmenu", handleClick)

 /**
 * Adds or updates a click handler
 */
-const updateHandler = (id, element, anchor, callback, allowedType) => {
+const updateHandler = (id, element, anchor, callback) => {
  let existingHandler = clickHandlers.find(x => x.id === id)
  if (!existingHandler) {
-    clickHandlers.push({ id, element, anchor, callback, allowedType })
+    clickHandlers.push({ id, element, anchor, callback })
  } else {
    existingHandler.callback = callback
  }
@ -82,8 +112,7 @@ export default (element, opts) => {
    const callback =
      newOpts?.callback || (typeof newOpts === "function" ? newOpts : null)
    const anchor = newOpts?.anchor || element
-    const allowedType = newOpts?.allowedType || "click"
-    updateHandler(id, element, anchor, callback, allowedType)
+    updateHandler(id, element, anchor, callback)
  }
  update(opts)
  return {
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@ -1,3 +1,22 @@
+/**
+ * Valid alignment options are
+ * - left
+ * - right
+ * - left-outside
+ * - right-outside
+ **/
+
+// Strategies are defined as [Popover]To[Anchor].
+// They can apply for both horizontal and vertical alignment.
+const Strategies = {
+  StartToStart: "StartToStart", // e.g. left alignment
+  EndToEnd: "EndToEnd", // e.g. right alignment
+  StartToEnd: "StartToEnd", // e.g. right-outside alignment
+  EndToStart: "EndToStart", // e.g. left-outside alignment
+  MidPoint: "MidPoint", // centers relative to midpoints
+  ScreenEdge: "ScreenEdge", // locks to screen edge
+}
+
 export default function positionDropdown(element, opts) {
  let resizeObserver
  let latestOpts = opts
@ -19,6 +38,8 @@ export default function positionDropdown(element, opts) {
      useAnchorWidth,
      offset = 5,
      customUpdate,
+      resizable,
+      wrap,
    } = opts
    if (!anchor) {
      return
@ -27,56 +48,159 @@ export default function positionDropdown(element, opts) {
    // Compute bounds
    const anchorBounds = anchor.getBoundingClientRect()
    const elementBounds = element.getBoundingClientRect()
+    const winWidth = window.innerWidth
+    const winHeight = window.innerHeight
+    const screenOffset = 8
    let styles = {
-      maxHeight: null,
-      minWidth,
-      maxWidth,
+      maxHeight,
+      minWidth: useAnchorWidth ? anchorBounds.width : minWidth,
+      maxWidth: useAnchorWidth ? anchorBounds.width : maxWidth,
      left: null,
      top: null,
    }

+    // Ignore all our logic for custom logic
    if (typeof customUpdate === "function") {
      styles = customUpdate(anchorBounds, elementBounds, {
        ...styles,
        offset: opts.offset,
      })
-    } else {
-      // Determine vertical styles
-      if (align === "right-outside" || align === "left-outside") {
-        styles.top =
-          anchorBounds.top + anchorBounds.height / 2 - elementBounds.height / 2
-        styles.maxHeight = maxHeight
-        if (styles.top + elementBounds.height > window.innerHeight) {
-          styles.top = window.innerHeight - elementBounds.height
-        }
-      } else if (
-        window.innerHeight - anchorBounds.bottom <
-        (maxHeight || 100)
-      ) {
-        styles.top = anchorBounds.top - elementBounds.height - offset
-        styles.maxHeight = maxHeight || 240
-      } else {
-        styles.top = anchorBounds.bottom + offset
-        styles.maxHeight =
-          maxHeight || window.innerHeight - anchorBounds.bottom - 20
+    }
+
+    // Otherwise position ourselves as normal
+    else {
+      // Checks if we overflow off the screen. We only report that we overflow
+      // when the alternative dimension is larger than the one we are checking.
+      const doesXOverflow = () => {
+        const overflows = styles.left + elementBounds.width > winWidth
+        return overflows && anchorBounds.left > winWidth - anchorBounds.right
+      }
+      const doesYOverflow = () => {
+        const overflows = styles.top + elementBounds.height > winHeight
+        return overflows && anchorBounds.top > winHeight - anchorBounds.bottom
      }

-      // Determine horizontal styles
-      if (!maxWidth && useAnchorWidth) {
-        styles.maxWidth = anchorBounds.width
+      // Applies a dynamic max height constraint if appropriate
+      const applyMaxHeight = height => {
+        if (!styles.maxHeight && resizable) {
+          styles.maxHeight = height
+        }
      }
-      if (useAnchorWidth) {
-        styles.minWidth = anchorBounds.width
+
+      // Applies the X strategy to our styles
+      const applyXStrategy = strategy => {
+        switch (strategy) {
+          case Strategies.StartToStart:
+          default:
+            styles.left = anchorBounds.left
+            break
+          case Strategies.EndToEnd:
+            styles.left = anchorBounds.right - elementBounds.width
+            break
+          case Strategies.StartToEnd:
+            styles.left = anchorBounds.right + offset
+            break
+          case Strategies.EndToStart:
+            styles.left = anchorBounds.left - elementBounds.width - offset
+            break
+          case Strategies.MidPoint:
+            styles.left =
+              anchorBounds.left +
+              anchorBounds.width / 2 -
+              elementBounds.width / 2
+            break
+          case Strategies.ScreenEdge:
+            styles.left = winWidth - elementBounds.width - screenOffset
+            break
+        }
      }
+
+      // Applies the Y strategy to our styles
+      const applyYStrategy = strategy => {
+        switch (strategy) {
+          case Strategies.StartToStart:
+            styles.top = anchorBounds.top
+            applyMaxHeight(winHeight - anchorBounds.top - screenOffset)
+            break
+          case Strategies.EndToEnd:
+            styles.top = anchorBounds.bottom - elementBounds.height
+            applyMaxHeight(anchorBounds.bottom - screenOffset)
+            break
+          case Strategies.StartToEnd:
+          default:
+            styles.top = anchorBounds.bottom + offset
+            applyMaxHeight(winHeight - anchorBounds.bottom - screenOffset)
+            break
+          case Strategies.EndToStart:
+            styles.top = anchorBounds.top - elementBounds.height - offset
+            applyMaxHeight(anchorBounds.top - screenOffset)
+            break
+          case Strategies.MidPoint:
+            styles.top =
+              anchorBounds.top +
+              anchorBounds.height / 2 -
+              elementBounds.height / 2
+            break
+          case Strategies.ScreenEdge:
+            styles.top = winHeight - elementBounds.height - screenOffset
+            applyMaxHeight(winHeight - 2 * screenOffset)
+            break
+        }
+      }
+
+      // Determine X strategy
      if (align === "right") {
-        styles.left =
-          anchorBounds.left + anchorBounds.width - elementBounds.width
+        applyXStrategy(Strategies.EndToEnd)
      } else if (align === "right-outside") {
-        styles.left = anchorBounds.right + offset
+        applyXStrategy(Strategies.StartToEnd)
      } else if (align === "left-outside") {
-        styles.left = anchorBounds.left - elementBounds.width - offset
+        applyXStrategy(Strategies.EndToStart)
      } else {
-        styles.left = anchorBounds.left
+        applyXStrategy(Strategies.StartToStart)
+      }
+
+      // Determine Y strategy
+      if (align === "right-outside" || align === "left-outside") {
+        applyYStrategy(Strategies.MidPoint)
+      } else {
+        applyYStrategy(Strategies.StartToEnd)
+      }
+
+      // Handle screen overflow
+      if (doesXOverflow()) {
+        // Swap left to right
+        if (align === "left") {
+          applyXStrategy(Strategies.EndToEnd)
+        }
+        // Swap right-outside to left-outside
+        else if (align === "right-outside") {
+          applyXStrategy(Strategies.EndToStart)
+        }
+      }
+      if (doesYOverflow()) {
+        // If wrapping, lock to the bottom of the screen and also reposition to
+        // the side to not block the anchor
+        if (wrap) {
+          applyYStrategy(Strategies.MidPoint)
+          if (doesYOverflow()) {
+            applyYStrategy(Strategies.ScreenEdge)
+          }
+          applyXStrategy(Strategies.StartToEnd)
+          if (doesXOverflow()) {
+            applyXStrategy(Strategies.EndToStart)
+          }
+        }
+        // Othewise invert as normal
+        else {
+          // If using an outside strategy then lock to the bottom of the screen
+          if (align === "left-outside" || align === "right-outside") {
+            applyYStrategy(Strategies.ScreenEdge)
+          }
+          // Otherwise flip above
+          else {
+            applyYStrategy(Strategies.EndToStart)
+          }
+        }
      }
    }

--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@ -1,268 +0,0 @@
-<script>
-  import Flatpickr from "svelte-flatpickr"
-  import "flatpickr/dist/flatpickr.css"
-  import "@spectrum-css/inputgroup/dist/index-vars.css"
-  import "@spectrum-css/textfield/dist/index-vars.css"
-  import "@spectrum-css/picker/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
-  import { uuid } from "../../helpers"
-
-  export let id = null
-  export let disabled = false
-  export let readonly = false
-  export let enableTime = true
-  export let value = null
-  export let placeholder = null
-  export let appendTo = undefined
-  export let timeOnly = false
-  export let ignoreTimezones = false
-  export let time24hr = false
-  export let range = false
-  export let flatpickr
-  export let useKeyboardShortcuts = true
-
-  const dispatch = createEventDispatcher()
-  const flatpickrId = `${uuid()}-wrapper`
-
-  let open = false
-  let flatpickrOptions
-
-  // Another classic flatpickr issue. Errors were randomly being thrown due to
-  // flatpickr internal code. Making sure that "destroy" is a valid function
-  // fixes it. The sooner we remove flatpickr the better.
-  $: {
-    if (flatpickr && !flatpickr.destroy) {
-      flatpickr.destroy = () => {}
-    }
-  }
-
-  const resolveTimeStamp = timestamp => {
-    let maskedDate = new Date(`0-${timestamp}`)
-
-    if (maskedDate instanceof Date && !isNaN(maskedDate.getTime())) {
-      return maskedDate
-    } else {
-      return null
-    }
-  }
-
-  $: flatpickrOptions = {
-    element: `#${flatpickrId}`,
-    enableTime: timeOnly || enableTime || false,
-    noCalendar: timeOnly || false,
-    altInput: true,
-    time_24hr: time24hr || false,
-    altFormat: timeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
-    wrap: true,
-    mode: range ? "range" : "single",
-    appendTo,
-    disableMobile: "true",
-    onReady: () => {
-      let timestamp = resolveTimeStamp(value)
-      if (timeOnly && timestamp) {
-        dispatch("change", timestamp.toISOString())
-      }
-    },
-    onOpen: () => dispatch("open"),
-    onClose: () => dispatch("close"),
-  }
-
-  $: redrawOptions = {
-    timeOnly,
-    enableTime,
-    time24hr,
-    disabled,
-  }
-
-  const handleChange = event => {
-    const [dates] = event.detail
-    const noTimezone = enableTime && !timeOnly && ignoreTimezones
-    let newValue = dates[0]
-    if (newValue) {
-      newValue = newValue.toISOString()
-    }
-    // If time only set date component to 2000-01-01
-    if (timeOnly) {
-      newValue = `2000-01-01T${newValue.split("T")[1]}`
-    }
-
-    // For date-only fields, construct a manual timestamp string without a time
-    // or time zone
-    else if (!enableTime) {
-      const year = dates[0].getFullYear()
-      const month = `${dates[0].getMonth() + 1}`.padStart(2, "0")
-      const day = `${dates[0].getDate()}`.padStart(2, "0")
-      newValue = `${year}-${month}-${day}T00:00:00.000`
-    }
-
-    // For non-timezone-aware fields, create an ISO 8601 timestamp of the exact
-    // time picked, without timezone
-    else if (noTimezone) {
-      const offset = dates[0].getTimezoneOffset() * 60000
-      newValue = new Date(dates[0].getTime() - offset)
-        .toISOString()
-        .slice(0, -1)
-    }
-
-    if (range) {
-      dispatch("change", event.detail)
-    } else {
-      dispatch("change", newValue)
-    }
-  }
-
-  const clearDateOnBackspace = event => {
-    if (["Backspace", "Clear", "Delete"].includes(event.key)) {
-      dispatch("change", "")
-      flatpickr.close()
-    }
-  }
-
-  const onOpen = () => {
-    open = true
-    if (useKeyboardShortcuts) {
-      document.addEventListener("keyup", clearDateOnBackspace)
-    }
-  }
-
-  const onClose = () => {
-    open = false
-    if (useKeyboardShortcuts) {
-      document.removeEventListener("keyup", clearDateOnBackspace)
-    }
-
-    // Manually blur all input fields since flatpickr creates a second
-    // duplicate input field.
-    // We need to blur both because the focus styling does not get properly
-    // applied.
-    const els = document.querySelectorAll(`#${flatpickrId} input`)
-    els.forEach(el => el.blur())
-  }
-
-  const parseDate = val => {
-    if (!val) {
-      return null
-    }
-    let date
-    let time
-
-    // it is a string like 00:00:00, just time
-    let ts = resolveTimeStamp(val)
-
-    if (timeOnly && ts) {
-      date = ts
-    } else if (val instanceof Date) {
-      // Use real date obj if already parsed
-      date = val
-    } else if (isNaN(val)) {
-      // Treat as date string of some sort
-      date = new Date(val)
-    } else {
-      // Treat as numerical timestamp
-      date = new Date(parseInt(val))
-    }
-
-    time = date.getTime()
-    if (isNaN(time)) {
-      return null
-    }
-
-    // By rounding to the nearest second we avoid locking up in an endless
-    // loop in the builder, caused by potentially enriching {{ now }} to every
-    // millisecond.
-    return new Date(Math.floor(time / 1000) * 1000)
-  }
-</script>
-
-{#key redrawOptions}
-  <Flatpickr
-    bind:flatpickr
-    value={range ? value : parseDate(value)}
-    on:open={onOpen}
-    on:close={onClose}
-    options={flatpickrOptions}
-    on:change={handleChange}
-    element={`#${flatpickrId}`}
-  >
-    <div
-      id={flatpickrId}
-      class:is-disabled={disabled || readonly}
-      class="flatpickr spectrum-InputGroup spectrum-Datepicker"
-      class:is-focused={open}
-      aria-readonly="false"
-      aria-required="false"
-      aria-haspopup="true"
-    >
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div
-        on:click={flatpickr?.open}
-        class="spectrum-Textfield spectrum-InputGroup-textfield"
-        class:is-disabled={disabled}
-      >
-        <input
-          {disabled}
-          {readonly}
-          data-input
-          type="text"
-          class="spectrum-Textfield-input spectrum-InputGroup-input"
-          class:is-disabled={disabled}
-          {placeholder}
-          {id}
-          {value}
-        />
-      </div>
-      <button
-        type="button"
-        class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
-        tabindex="-1"
-        class:is-disabled={disabled}
-        on:click={flatpickr?.open}
-      >
-        <svg
-          class="spectrum-Icon spectrum-Icon--sizeM"
-          focusable="false"
-          aria-hidden="true"
-          aria-label="Calendar"
-        >
-          <use xlink:href="#spectrum-icon-18-Calendar" />
-        </svg>
-      </button>
-    </div>
-  </Flatpickr>
-{/key}
-{#if open}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="overlay" on:mousedown|self={flatpickr?.close} />
-{/if}
-
-<style>
-  .spectrum-Textfield-input {
-    pointer-events: none;
-  }
-  .spectrum-Textfield:not(.is-disabled):hover {
-    cursor: pointer;
-  }
-  .flatpickr {
-    width: 100%;
-    overflow: hidden;
-  }
-  .flatpickr .spectrum-Textfield {
-    width: 100%;
-  }
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999;
-    max-height: 100%;
-  }
-  :global(.flatpickr-calendar) {
-    font-family: var(--font-sans);
-  }
-  .is-disabled {
-    pointer-events: none !important;
-  }
-</style>
--- a/packages/bbui/src/Form/Core/DatePicker/Calendar.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/Calendar.svelte
@ -0,0 +1,252 @@
+<script>
+  import { cleanInput } from "./utils"
+  import Select from "../../Select.svelte"
+  import dayjs from "dayjs"
+  import NumberInput from "./NumberInput.svelte"
+  import { createEventDispatcher } from "svelte"
+  import isoWeek from "dayjs/plugin/isoWeek"
+
+  dayjs.extend(isoWeek)
+
+  export let value
+
+  const dispatch = createEventDispatcher()
+  const DaysOfWeek = [
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+    "Sunday",
+  ]
+  const MonthsOfYear = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ]
+
+  const now = dayjs()
+  let calendarDate
+
+  $: calendarDate = dayjs(value || dayjs()).startOf("month")
+  $: mondays = getMondays(calendarDate)
+
+  const getMondays = monthStart => {
+    if (!monthStart?.isValid()) {
+      return []
+    }
+    let monthEnd = monthStart.endOf("month")
+    let calendarStart = monthStart.startOf("isoWeek")
+    const numWeeks = Math.ceil((monthEnd.diff(calendarStart, "day") + 1) / 7)
+
+    let mondays = []
+    for (let i = 0; i < numWeeks; i++) {
+      mondays.push(calendarStart.add(i, "weeks"))
+    }
+    return mondays
+  }
+
+  const handleCalendarYearChange = e => {
+    calendarDate = calendarDate.year(parseInt(e.target.value))
+  }
+
+  const handleDateChange = date => {
+    const base = value || now
+    dispatch(
+      "change",
+      base.year(date.year()).month(date.month()).date(date.date())
+    )
+  }
+
+  export const setDate = date => {
+    calendarDate = date
+  }
+
+  const cleanYear = cleanInput({ max: 9999, pad: 0, fallback: now.year() })
+</script>
+
+<div class="spectrum-Calendar">
+  <div class="spectrum-Calendar-header">
+    <div
+      class="spectrum-Calendar-title"
+      aria-live="assertive"
+      aria-atomic="true"
+    >
+      <div class="month-selector">
+        <Select
+          autoWidth
+          placeholder={null}
+          options={MonthsOfYear.map((m, idx) => ({ label: m, value: idx }))}
+          value={calendarDate.month()}
+          on:change={e => (calendarDate = calendarDate.month(e.detail))}
+        />
+      </div>
+      <NumberInput
+        value={calendarDate.year()}
+        min={0}
+        max={9999}
+        width={64}
+        on:change={handleCalendarYearChange}
+        on:input={cleanYear}
+      />
+    </div>
+    <button
+      aria-label="Previous"
+      title="Previous"
+      class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth"
+      on:click={() => (calendarDate = calendarDate.subtract(1, "month"))}
+    >
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronLeft100"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    </button>
+    <button
+      aria-label="Next"
+      title="Next"
+      class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth"
+      on:click={() => (calendarDate = calendarDate.add(1, "month"))}
+    >
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronRight100"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    </button>
+  </div>
+  <div
+    class="spectrum-Calendar-body"
+    aria-readonly="true"
+    aria-disabled="false"
+  >
+    <table role="presentation" class="spectrum-Calendar-table">
+      <thead role="presentation">
+        <tr>
+          {#each DaysOfWeek as day}
+            <th scope="col" class="spectrum-Calendar-tableCell">
+              <abbr class="spectrum-Calendar-dayOfWeek" title={day}>
+                {day[0]}
+              </abbr>
+            </th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody role="presentation">
+        {#each mondays as monday}
+          <tr>
+            {#each [0, 1, 2, 3, 4, 5, 6] as dayOffset}
+              {@const date = monday.add(dayOffset, "days")}
+              {@const outsideMonth = date.month() !== calendarDate.month()}
+              <td
+                class="spectrum-Calendar-tableCell"
+                aria-disabled="true"
+                aria-selected="false"
+                aria-invalid="false"
+                title={date.format("dddd, MMMM D, YYYY")}
+                on:click={() => handleDateChange(date)}
+              >
+                <span
+                  role="presentation"
+                  class="spectrum-Calendar-date"
+                  class:is-outsideMonth={outsideMonth}
+                  class:is-today={!outsideMonth && date.isSame(now, "day")}
+                  class:is-selected={date.isSame(value, "day")}
+                >
+                  {date.date()}
+                </span>
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  /* Calendar overrides */
+  .spectrum-Calendar {
+    width: auto;
+  }
+  .spectrum-Calendar-header {
+    width: auto;
+  }
+  .spectrum-Calendar-title {
+    display: flex;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+  }
+  .spectrum-Calendar-header button {
+    border-radius: 4px;
+  }
+  .spectrum-Calendar-date.is-outsideMonth {
+    visibility: visible;
+    color: var(--spectrum-global-color-gray-400);
+  }
+  .spectrum-Calendar-date.is-today,
+  .spectrum-Calendar-date.is-today::before {
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  .spectrum-Calendar-date.is-today.is-selected,
+  .spectrum-Calendar-date.is-today.is-selected::before {
+    border-color: var(
+      --primaryColorHover,
+      var(--spectrum-global-color-blue-700)
+    );
+  }
+  .spectrum-Calendar-date.is-selected:not(.is-range-selection) {
+    background: var(--primaryColor, var(--spectrum-global-color-blue-400));
+  }
+  .spectrum-Calendar tr {
+    box-sizing: content-box;
+    height: 40px;
+  }
+  .spectrum-Calendar-tableCell {
+    box-sizing: content-box;
+  }
+  .spectrum-Calendar-nextMonth,
+  .spectrum-Calendar-prevMonth {
+    order: 1;
+    padding: 4px;
+  }
+  .spectrum-Calendar-date {
+    color: var(--spectrum-alias-text-color);
+  }
+  .spectrum-Calendar-date.is-selected {
+    color: white;
+  }
+  .spectrum-Calendar-dayOfWeek {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  /* Style select */
+  .month-selector :global(.spectrum-Picker) {
+    background: none;
+    border: none;
+    padding: 4px 6px;
+  }
+  .month-selector :global(.spectrum-Picker:hover),
+  .month-selector :global(.spectrum-Picker.is-open) {
+    background: var(--spectrum-global-color-gray-200);
+  }
+  .month-selector :global(.spectrum-Picker-label) {
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>
--- a/packages/bbui/src/Form/Core/DatePicker/DateInput.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/DateInput.svelte
@ -0,0 +1,94 @@
+<script>
+  import Icon from "../../../Icon/Icon.svelte"
+  import { getDateDisplayValue } from "../../../helpers"
+
+  export let anchor
+  export let disabled
+  export let readonly
+  export let error
+  export let focused
+  export let placeholder
+  export let id
+  export let value
+  export let icon
+  export let enableTime
+  export let timeOnly
+
+  $: displayValue = getDateDisplayValue(value, { enableTime, timeOnly })
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  bind:this={anchor}
+  class:is-disabled={disabled || readonly}
+  class:is-invalid={!!error}
+  class:is-focused={focused}
+  class="spectrum-InputGroup spectrum-Datepicker"
+  aria-readonly={readonly}
+  aria-required="false"
+  aria-haspopup="true"
+  on:click
+>
+  <div
+    class="spectrum-Textfield spectrum-InputGroup-textfield"
+    class:is-disabled={disabled}
+    class:is-invalid={!!error}
+  >
+    {#if !!error}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
+    <input
+      {disabled}
+      {readonly}
+      data-input
+      type="text"
+      class="spectrum-Textfield-input spectrum-InputGroup-input"
+      class:is-disabled={disabled}
+      {placeholder}
+      {id}
+      value={displayValue}
+    />
+  </div>
+  {#if !disabled && !readonly}
+    <button
+      type="button"
+      class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
+      tabindex="-1"
+      class:is-invalid={!!error}
+    >
+      <Icon name={icon} />
+    </button>
+  {/if}
+</div>
+
+<style>
+  /* Date label overrides */
+  .spectrum-Textfield-input {
+    pointer-events: none;
+  }
+  .spectrum-Textfield:not(.is-disabled):hover {
+    cursor: pointer;
+  }
+  .spectrum-Datepicker {
+    width: 100%;
+    overflow: hidden;
+  }
+  .spectrum-Datepicker .spectrum-Textfield {
+    width: 100%;
+  }
+  .is-disabled {
+    pointer-events: none !important;
+  }
+  input:read-only {
+    border-right-width: 1px;
+    border-top-right-radius: var(--spectrum-textfield-border-radius);
+    border-bottom-right-radius: var(--spectrum-textfield-border-radius);
+  }
+</style>
--- a/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte
@ -0,0 +1,83 @@
+<script>
+  import "@spectrum-css/calendar/dist/index-vars.css"
+  import "@spectrum-css/inputgroup/dist/index-vars.css"
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import Popover from "../../../Popover/Popover.svelte"
+  import { onMount } from "svelte"
+  import DateInput from "./DateInput.svelte"
+  import { parseDate } from "../../../helpers"
+  import DatePickerPopoverContents from "./DatePickerPopoverContents.svelte"
+
+  export let id = null
+  export let disabled = false
+  export let readonly = false
+  export let error = null
+  export let enableTime = true
+  export let value = null
+  export let placeholder = null
+  export let timeOnly = false
+  export let ignoreTimezones = false
+  export let useKeyboardShortcuts = true
+  export let appendTo = null
+  export let api = null
+  export let align = "left"
+
+  let isOpen = false
+  let anchor
+  let popover
+
+  $: parsedValue = parseDate(value, { timeOnly, enableTime })
+
+  const onOpen = () => {
+    isOpen = true
+  }
+
+  const onClose = () => {
+    isOpen = false
+  }
+
+  onMount(() => {
+    api = {
+      open: () => popover?.show(),
+      close: () => popover?.hide(),
+    }
+  })
+</script>
+
+<DateInput
+  bind:anchor
+  {disabled}
+  {readonly}
+  {error}
+  {placeholder}
+  {id}
+  {enableTime}
+  {timeOnly}
+  focused={isOpen}
+  value={parsedValue}
+  on:click={popover?.show}
+  icon={timeOnly ? "Clock" : "Calendar"}
+/>
+
+<Popover
+  bind:this={popover}
+  on:open
+  on:close
+  on:open={onOpen}
+  on:close={onClose}
+  portalTarget={appendTo}
+  {anchor}
+  {align}
+  resizable={false}
+>
+  {#if isOpen}
+    <DatePickerPopoverContents
+      {useKeyboardShortcuts}
+      {ignoreTimezones}
+      {enableTime}
+      {timeOnly}
+      value={parsedValue}
+      on:change
+    />
+  {/if}
+</Popover>
--- a/packages/bbui/src/Form/Core/DatePicker/DatePickerPopoverContents.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/DatePickerPopoverContents.svelte
@ -0,0 +1,102 @@
+<script>
+  import dayjs from "dayjs"
+  import TimePicker from "./TimePicker.svelte"
+  import Calendar from "./Calendar.svelte"
+  import ActionButton from "../../../ActionButton/ActionButton.svelte"
+  import { createEventDispatcher, onMount } from "svelte"
+  import { stringifyDate } from "../../../helpers"
+
+  export let useKeyboardShortcuts = true
+  export let ignoreTimezones
+  export let enableTime
+  export let timeOnly
+  export let value
+
+  const dispatch = createEventDispatcher()
+  let calendar
+
+  $: showCalendar = !timeOnly
+  $: showTime = enableTime || timeOnly
+
+  const setToNow = () => {
+    const now = dayjs()
+    calendar?.setDate(now)
+    handleChange(now)
+  }
+
+  const handleChange = date => {
+    dispatch(
+      "change",
+      stringifyDate(date, { enableTime, timeOnly, ignoreTimezones })
+    )
+  }
+
+  const clearDateOnBackspace = event => {
+    // Ignore if we're typing a value
+    if (document.activeElement?.tagName.toLowerCase() === "input") {
+      return
+    }
+    if (["Backspace", "Clear", "Delete"].includes(event.key)) {
+      dispatch("change", null)
+    }
+  }
+
+  onMount(() => {
+    if (useKeyboardShortcuts) {
+      document.addEventListener("keyup", clearDateOnBackspace)
+    }
+    return () => {
+      document.removeEventListener("keyup", clearDateOnBackspace)
+    }
+  })
+</script>
+
+<div class="date-time-popover">
+  {#if showCalendar}
+    <Calendar
+      {value}
+      on:change={e => handleChange(e.detail)}
+      bind:this={calendar}
+    />
+  {/if}
+  <div class="footer" class:spaced={showCalendar}>
+    {#if showTime}
+      <TimePicker {value} on:change={e => handleChange(e.detail)} />
+    {/if}
+    <div class="actions">
+      <ActionButton
+        disabled={!value}
+        size="S"
+        on:click={() => dispatch("change", null)}
+      >
+        Clear
+      </ActionButton>
+      <ActionButton size="S" on:click={setToNow}>
+        {showTime ? "Now" : "Today"}
+      </ActionButton>
+    </div>
+  </div>
+</div>
+
+<style>
+  .date-time-popover {
+    padding: 8px;
+    overflow: hidden;
+  }
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 60px;
+  }
+  .footer.spaced {
+    padding-top: 14px;
+  }
+  .actions {
+    padding: 4px 0;
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+  }
+</style>
--- a/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte
@ -0,0 +1,54 @@
+<script>
+  export let value
+  export let min
+  export let max
+  export let hideArrows = false
+  export let width
+
+  $: style = width ? `width:${width}px;` : ""
+</script>
+
+<input
+  class:hide-arrows={hideArrows}
+  type="number"
+  {style}
+  {value}
+  {min}
+  {max}
+  onclick="this.select()"
+  on:change
+  on:input
+/>
+
+<style>
+  input {
+    background: none;
+    border: none;
+    outline: none;
+    color: var(--spectrum-alias-text-color);
+    padding: 4px 6px 5px 6px;
+    border-radius: 4px;
+    transition: background 130ms ease-out;
+    font-size: 18px;
+    font-weight: bold;
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    box-sizing: content-box !important;
+  }
+  input:focus,
+  input:hover {
+    --space: 30px;
+    background: var(--spectrum-global-color-gray-200);
+    z-index: 1;
+  }
+
+  /* Hide built-in arrows */
+  input.hide-arrows::-webkit-outer-spin-button,
+  input.hide-arrows::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input.hide-arrows {
+    -moz-appearance: textfield;
+  }
+</style>
--- a/packages/bbui/src/Form/Core/DatePicker/TimePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/TimePicker.svelte
@ -0,0 +1,59 @@
+<script>
+  import { cleanInput } from "./utils"
+  import dayjs from "dayjs"
+  import NumberInput from "./NumberInput.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value
+
+  const dispatch = createEventDispatcher()
+
+  $: displayValue = value || dayjs()
+
+  const handleHourChange = e => {
+    dispatch("change", displayValue.hour(parseInt(e.target.value)))
+  }
+
+  const handleMinuteChange = e => {
+    dispatch("change", displayValue.minute(parseInt(e.target.value)))
+  }
+
+  const cleanHour = cleanInput({ max: 23, pad: 2, fallback: "00" })
+  const cleanMinute = cleanInput({ max: 59, pad: 2, fallback: "00" })
+</script>
+
+<div class="time-picker">
+  <NumberInput
+    hideArrows
+    value={displayValue.hour().toString().padStart(2, "0")}
+    min={0}
+    max={23}
+    width={20}
+    on:input={cleanHour}
+    on:change={handleHourChange}
+  />
+  <span>:</span>
+  <NumberInput
+    hideArrows
+    value={displayValue.minute().toString().padStart(2, "0")}
+    min={0}
+    max={59}
+    width={20}
+    on:input={cleanMinute}
+    on:change={handleMinuteChange}
+  />
+</div>
+
+<style>
+  .time-picker {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .time-picker span {
+    font-weight: bold;
+    font-size: 18px;
+    z-index: 0;
+    margin-bottom: 1px;
+  }
+</style>
--- a/packages/bbui/src/Form/Core/DatePicker/utils.js
+++ b/packages/bbui/src/Form/Core/DatePicker/utils.js
@ -0,0 +1,14 @@
+export const cleanInput = ({ max, pad, fallback }) => {
+  return e => {
+    if (e.target.value) {
+      const value = parseInt(e.target.value)
+      if (isNaN(value)) {
+        e.target.value = fallback
+      } else {
+        e.target.value = Math.min(max, value).toString().padStart(pad, "0")
+      }
+    } else {
+      e.target.value = fallback
+    }
+  }
+}
--- a/packages/bbui/src/Form/Core/DateRangePicker.svelte
+++ b/packages/bbui/src/Form/Core/DateRangePicker.svelte
@ -0,0 +1,69 @@
+<script>
+  import CoreDatePicker from "./DatePicker/DatePicker.svelte"
+  import Icon from "../../Icon/Icon.svelte"
+
+  export let value = null
+  export let disabled = false
+  export let readonly = false
+  export let error = null
+  export let appendTo = undefined
+  export let ignoreTimezones = false
+
+  let fromDate
+  let toDate
+</script>
+
+<div class="date-range">
+  <CoreDatePicker
+    value={fromDate}
+    on:change={e => (fromDate = e.detail)}
+    enableTime={false}
+  />
+  <div class="arrow">
+    <Icon name="ChevronRight" />
+  </div>
+  <CoreDatePicker
+    value={toDate}
+    on:change={e => (toDate = e.detail)}
+    enableTime={false}
+  />
+</div>
+
+<style>
+  .date-range {
+    display: flex;
+    flex-direction: row;
+    border: 1px solid var(--spectrum-alias-border-color);
+    border-radius: 4px;
+  }
+  .date-range :global(.spectrum-InputGroup),
+  .date-range :global(.spectrum-Textfield),
+  .date-range :global(input) {
+    min-width: 0 !important;
+    width: 150px !important;
+  }
+  .date-range :global(input) {
+    border: none;
+    text-align: center;
+  }
+  .date-range :global(button) {
+    display: none;
+  }
+  .date-range :global(> :first-child input),
+  .date-range :global(> :first-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .date-range :global(> :last-child input),
+  .date-range :global(> :last-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .arrow {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    z-index: 1;
+  }
+</style>
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@ -155,6 +155,7 @@
  useAnchorWidth={!autoWidth}
  maxWidth={autoWidth ? 400 : null}
  customHeight={customPopoverHeight}
+  maxHeight={240}
 >
  <div
    class="popover-content"
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@ -8,7 +8,9 @@ export { default as CoreTextArea } from "./TextArea.svelte"
 export { default as CoreCombobox } from "./Combobox.svelte"
 export { default as CoreSwitch } from "./Switch.svelte"
 export { default as CoreSearch } from "./Search.svelte"
-export { default as CoreDatePicker } from "./DatePicker.svelte"
+export { default as CoreDatePicker } from "./DatePicker/DatePicker.svelte"
+export { default as CoreDatePickerPopoverContents } from "./DatePicker/DatePickerPopoverContents.svelte"
+export { default as CoreDateRangePicker } from "./DateRangePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
 export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/packages/bbui/src/Form/DatePicker.svelte
@ -1,6 +1,6 @@
 <script>
  import Field from "./Field.svelte"
-  import DatePicker from "./Core/DatePicker.svelte"
+  import DatePicker from "./Core/DatePicker/DatePicker.svelte"
  import { createEventDispatcher } from "svelte"

  export let value = null
@ -11,22 +11,15 @@
  export let error = null
  export let enableTime = true
  export let timeOnly = false
-  export let time24hr = false
  export let placeholder = null
  export let appendTo = undefined
  export let ignoreTimezones = false
-  export let range = false
  export let helpText = null
+
  const dispatch = createEventDispatcher()

  const onChange = e => {
-    if (range) {
-      // Flatpickr cant take two dates and work out what to display, needs to be provided a string.
-      // Like - "Date1 to Date2". Hence passing in that specifically from the array
-      value = e?.detail[1]
-    } else {
-      value = e.detail
-    }
+    value = e.detail
    dispatch("change", e.detail)
  }
 </script>
@ -40,10 +33,8 @@
    {placeholder}
    {enableTime}
    {timeOnly}
-    {time24hr}
    {appendTo}
    {ignoreTimezones}
-    {range}
    on:change={onChange}
  />
 </Field>
--- a/packages/bbui/src/Form/DateRangePicker.svelte
+++ b/packages/bbui/src/Form/DateRangePicker.svelte
@ -0,0 +1,34 @@
+<script>
+  import Field from "./Field.svelte"
+  import DateRangePicker from "./Core/DateRangePicker.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let readonly = false
+  export let error = null
+  export let helpText = null
+  export let appendTo = undefined
+  export let ignoreTimezones = false
+
+  const dispatch = createEventDispatcher()
+
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {helpText} {label} {labelPosition} {error}>
+  <DateRangePicker
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {appendTo}
+    {ignoreTimezones}
+    on:change={onChange}
+  />
+</Field>
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@ -7,11 +7,11 @@
  export let narrower = false
  export let noPadding = false

-  let sidePanelVisble = false
+  let sidePanelVisible = false

  setContext("side-panel", {
-    open: () => (sidePanelVisble = true),
-    close: () => (sidePanelVisble = false),
+    open: () => (sidePanelVisible = true),
+    close: () => (sidePanelVisible = false),
  })
 </script>

@ -24,9 +24,9 @@
  </div>
  <div
    id="side-panel"
-    class:visible={sidePanelVisble}
+    class:visible={sidePanelVisible}
    use:clickOutside={() => {
-      sidePanelVisble = false
+      sidePanelVisible = false
    }}
  >
    <slot name="side-panel" />
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@ -18,13 +18,15 @@
  export let open = false
  export let useAnchorWidth = false
  export let dismissible = true
-  export let offset = 5
+  export let offset = 4
  export let customHeight
  export let animate = true
  export let customZindex
  export let handlePostionUpdate
  export let showPopover = true
  export let clickOutsideOverride = false
+  export let resizable = true
+  export let wrap = false

  $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"

@ -91,6 +93,8 @@
        useAnchorWidth,
        offset,
        customUpdate: handlePostionUpdate,
+        resizable,
+        wrap,
      }}
      use:clickOutside={{
        callback: dismissible ? handleOutsideClick : () => {},
@ -116,12 +120,11 @@
    min-width: var(--spectrum-global-dimension-size-2000);
    border-color: var(--spectrum-global-color-gray-300);
    overflow: auto;
-    transition: opacity 260ms ease-out, transform 260ms ease-out;
+    transition: opacity 260ms ease-out;
  }
  .hidden {
    opacity: 0;
    pointer-events: none;
-    transform: translateY(-20px);
  }
  .customZindex {
    z-index: var(--customZindex) !important;
--- a/packages/bbui/src/helpers.js
+++ b/packages/bbui/src/helpers.js
@ -1,4 +1,5 @@
 import { helpers } from "@budibase/shared-core"
+import dayjs from "dayjs"

 export const deepGet = helpers.deepGet

@ -115,3 +116,110 @@ export const copyToClipboard = value => {
    }
  })
 }
+
+// Parsed a date value. This is usually an ISO string, but can be a
+// bunch of different formats and shapes depending on schema flags.
+export const parseDate = (value, { enableTime = true }) => {
+  // If empty then invalid
+  if (!value) {
+    return null
+  }
+
+  // Certain string values need transformed
+  if (typeof value === "string") {
+    // Check for time only values
+    if (!isNaN(new Date(`0-${value}`))) {
+      value = `0-${value}`
+    }
+
+    // If date only, check for cases where we received a UTC string
+    else if (!enableTime && value.endsWith("Z")) {
+      value = value.split("Z")[0]
+    }
+  }
+
+  // Parse value and check for validity
+  const parsedDate = dayjs(value)
+  if (!parsedDate.isValid()) {
+    return null
+  }
+
+  // By rounding to the nearest second we avoid locking up in an endless
+  // loop in the builder, caused by potentially enriching {{ now }} to every
+  // millisecond.
+  return dayjs(Math.floor(parsedDate.valueOf() / 1000) * 1000)
+}
+
+// Stringifies a dayjs object to create an ISO string that respects the various
+// schema flags
+export const stringifyDate = (
+  value,
+  { enableTime = true, timeOnly = false, ignoreTimezones = false } = {}
+) => {
+  if (!value) {
+    return null
+  }
+
+  // Time only fields always ignore timezones, otherwise they make no sense.
+  // For non-timezone-aware fields, create an ISO 8601 timestamp of the exact
+  // time picked, without timezone
+  const offsetForTimezone = (enableTime && ignoreTimezones) || timeOnly
+  if (offsetForTimezone) {
+    // Ensure we use the correct offset for the date
+    const referenceDate = timeOnly ? new Date() : value.toDate()
+    const offset = referenceDate.getTimezoneOffset() * 60000
+    return new Date(value.valueOf() - offset).toISOString().slice(0, -1)
+  }
+
+  // For date-only fields, construct a manual timestamp string without a time
+  // or time zone
+  else if (!enableTime) {
+    const year = value.year()
+    const month = `${value.month() + 1}`.padStart(2, "0")
+    const day = `${value.date()}`.padStart(2, "0")
+    return `${year}-${month}-${day}T00:00:00.000`
+  }
+
+  // Otherwise use a normal ISO string with time and timezone
+  else {
+    return value.toISOString()
+  }
+}
+
+// Determine the dayjs-compatible format of the browser's default locale
+const getPatternForPart = part => {
+  switch (part.type) {
+    case "day":
+      return "D".repeat(part.value.length)
+    case "month":
+      return "M".repeat(part.value.length)
+    case "year":
+      return "Y".repeat(part.value.length)
+    case "literal":
+      return part.value
+    default:
+      console.log("Unsupported date part", part)
+      return ""
+  }
+}
+const localeDateFormat = new Intl.DateTimeFormat()
+  .formatToParts(new Date("2021-01-01"))
+  .map(getPatternForPart)
+  .join("")
+
+// Formats a dayjs date according to schema flags
+export const getDateDisplayValue = (
+  value,
+  { enableTime = true, timeOnly = false } = {}
+) => {
+  if (!value?.isValid()) {
+    return ""
+  }
+  if (timeOnly) {
+    return value.format("HH:mm")
+  } else if (!enableTime) {
+    return value.format(localeDateFormat)
+  } else {
+    return value.format(`${localeDateFormat} HH:mm`)
+  }
+}
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@ -3,13 +3,34 @@ import "./bbui.css"
 // Spectrum icons
 import "@spectrum-css/icon/dist/index-vars.css"

-// Components
+// Form components
 export { default as Input } from "./Form/Input.svelte"
 export { default as Stepper } from "./Form/Stepper.svelte"
 export { default as TextArea } from "./Form/TextArea.svelte"
 export { default as Select } from "./Form/Select.svelte"
 export { default as Combobox } from "./Form/Combobox.svelte"
 export { default as Dropzone } from "./Form/Dropzone.svelte"
+export { default as DatePicker } from "./Form/DatePicker.svelte"
+export { default as DateRangePicker } from "./Form/DateRangePicker.svelte"
+export { default as Toggle } from "./Form/Toggle.svelte"
+export { default as RadioGroup } from "./Form/RadioGroup.svelte"
+export { default as Checkbox } from "./Form/Checkbox.svelte"
+export { default as InputDropdown } from "./Form/InputDropdown.svelte"
+export { default as PickerDropdown } from "./Form/PickerDropdown.svelte"
+export { default as EnvDropdown } from "./Form/EnvDropdown.svelte"
+export { default as Multiselect } from "./Form/Multiselect.svelte"
+export { default as Search } from "./Form/Search.svelte"
+export { default as RichTextField } from "./Form/RichTextField.svelte"
+export { default as Slider } from "./Form/Slider.svelte"
+export { default as File } from "./Form/File.svelte"
+
+// Core form components to be used elsewhere (standard components)
+export * from "./Form/Core"
+
+// Fancy form components
+export * from "./FancyForm"
+
+// Components
 export { default as Drawer } from "./Drawer/Drawer.svelte"
 export { default as DrawerContent } from "./Drawer/DrawerContent.svelte"
 export { default as Avatar } from "./Avatar/Avatar.svelte"
@ -21,12 +42,6 @@ export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
 export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
 export { default as Icon } from "./Icon/Icon.svelte"
 export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
-export { default as Toggle } from "./Form/Toggle.svelte"
-export { default as RadioGroup } from "./Form/RadioGroup.svelte"
-export { default as Checkbox } from "./Form/Checkbox.svelte"
-export { default as InputDropdown } from "./Form/InputDropdown.svelte"
-export { default as PickerDropdown } from "./Form/PickerDropdown.svelte"
-export { default as EnvDropdown } from "./Form/EnvDropdown.svelte"
 export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
@ -37,11 +52,6 @@ export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
 export { default as TempTooltip } from "./Tooltip/TempTooltip.svelte"
-export {
-  default as AbsTooltip,
-  TooltipPosition,
-  TooltipType,
-} from "./Tooltip/AbsTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
@ -53,8 +63,6 @@ export { default as NotificationDisplay } from "./Notification/NotificationDispl
 export { default as Notification } from "./Notification/Notification.svelte"
 export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
 export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
-export { default as DatePicker } from "./Form/DatePicker.svelte"
-export { default as Multiselect } from "./Form/Multiselect.svelte"
 export { default as Context } from "./context"
 export { default as Table } from "./Table/Table.svelte"
 export { default as Tabs } from "./Tabs/Tabs.svelte"
@ -64,7 +72,6 @@ export { default as Tag } from "./Tags/Tag.svelte"
 export { default as TreeView } from "./TreeView/Tree.svelte"
 export { default as TreeItem } from "./TreeView/Item.svelte"
 export { default as Divider } from "./Divider/Divider.svelte"
-export { default as Search } from "./Form/Search.svelte"
 export { default as Pagination } from "./Pagination/Pagination.svelte"
 export { default as Badge } from "./Badge/Badge.svelte"
 export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
@ -76,15 +83,15 @@ export { default as CopyInput } from "./Input/CopyInput.svelte"
 export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
 export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
 export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
-export { default as RichTextField } from "./Form/RichTextField.svelte"
 export { default as List } from "./List/List.svelte"
 export { default as ListItem } from "./List/ListItem.svelte"
 export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
 export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
-export { default as Slider } from "./Form/Slider.svelte"
 export { default as Accordion } from "./Accordion/Accordion.svelte"
-export { default as File } from "./Form/File.svelte"
 export { default as OptionSelectDnD } from "./OptionSelectDnD/OptionSelectDnD.svelte"
+export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte"
+export { TooltipPosition, TooltipType } from "./Tooltip/AbsTooltip.svelte"
+
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
 export { default as CodeRenderer } from "./Table/CodeRenderer.svelte"
@ -96,9 +103,6 @@ export { default as Heading } from "./Typography/Heading.svelte"
 export { default as Detail } from "./Typography/Detail.svelte"
 export { default as Code } from "./Typography/Code.svelte"

-// Core form components to be used elsewhere (standard components)
-export * from "./Form/Core"
-
 // Actions
 export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
 export { default as positionDropdown } from "./Actions/position_dropdown"
@ -110,6 +114,3 @@ export { banner, BANNER_TYPES } from "./Stores/banner"

 // Helpers
 export * as Helpers from "./helpers"
-
-// Fancy form components
-export * from "./FancyForm"
--- a/packages/builder/assets/FreeTrial.svelte
+++ b/packages/builder/assets/FreeTrial.svelte
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@ -32,6 +32,7 @@
  import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
  import BindingSidePanel from "components/common/bindings/BindingSidePanel.svelte"
+  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
  import { BindingHelpers, BindingType } from "components/common/bindings/utils"
  import {
    bindingsToCompletions,
@ -356,7 +357,8 @@
      value.customType !== "queryParams" &&
      value.customType !== "cron" &&
      value.customType !== "triggerSchema" &&
-      value.customType !== "automationFields"
+      value.customType !== "automationFields" &&
+      value.type !== "attachment"
    )
  }

@ -372,6 +374,15 @@
      console.error(error)
    }
  })
+  const handleAttachmentParams = keyValuObj => {
+    let params = {}
+    if (keyValuObj?.length) {
+      for (let param of keyValuObj) {
+        params[param.url] = param.filename
+      }
+    }
+    return params
+  }
 </script>

 <div class="fields">
@ -437,6 +448,33 @@
              value={inputData[key]}
              options={Object.keys(table?.schema || {})}
            />
+          {:else if value.type === "attachment"}
+            <div class="attachment-field-wrapper">
+              <div class="label-wrapper">
+                <Label>{label}</Label>
+              </div>
+              <div class="attachment-field-width">
+                <KeyValueBuilder
+                  on:change={e =>
+                    onChange(
+                      {
+                        detail: e.detail.map(({ name, value }) => ({
+                          url: name,
+                          filename: value,
+                        })),
+                      },
+                      key
+                    )}
+                  object={handleAttachmentParams(inputData[key])}
+                  allowJS
+                  {bindings}
+                  keyBindings
+                  customButtonText={"Add attachment"}
+                  keyPlaceholder={"URL"}
+                  valuePlaceholder={"Filename"}
+                />
+              </div>
+            </div>
          {:else if value.customType === "filters"}
            <ActionButton on:click={drawer.show}>Define filters</ActionButton>
            <Drawer bind:this={drawer} title="Filtering">
@ -651,14 +689,22 @@
  }

  .block-field {
-    display: flex; /* Use Flexbox */
+    display: flex;
    justify-content: space-between;
-    flex-direction: row; /* Arrange label and field side by side */
-    align-items: center; /* Align vertically in the center */
-    gap: 10px; /* Add some space between label and field */
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
    flex: 1;
  }

+  .attachment-field-width {
+    margin-top: var(--spacing-xs);
+  }
+
+  .label-wrapper {
+    margin-top: var(--spacing-s);
+  }
+
  .test :global(.drawer) {
    width: 10000px !important;
  }
--- a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
@ -111,6 +111,5 @@
    display: flex;
    flex-direction: column;
    background: var(--background);
-    overflow: hidden;
  }
 </style>
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@ -29,7 +29,11 @@
  import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
  import { getBindings } from "components/backend/DataTable/formula"
  import JSONSchemaModal from "./JSONSchemaModal.svelte"
-  import { FieldType, FieldSubtype, SourceName } from "@budibase/types"
+  import {
+    FieldType,
+    BBReferenceFieldSubType,
+    SourceName,
+  } from "@budibase/types"
  import RelationshipSelector from "components/common/RelationshipSelector.svelte"
  import { RowUtils } from "@budibase/frontend-core"
  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
@ -41,8 +45,6 @@
  const NUMBER_TYPE = FieldType.NUMBER
  const JSON_TYPE = FieldType.JSON
  const DATE_TYPE = FieldType.DATETIME
-  const USER_TYPE = FieldSubtype.USER
-  const USERS_TYPE = FieldSubtype.USERS

  const dispatch = createEventDispatcher()
  const PROHIBITED_COLUMN_NAMES = ["type", "_id", "_rev", "tableId"]
@ -263,9 +265,9 @@
      delete saveColumn.fieldName
    }
    if (isUsersColumn(saveColumn)) {
-      if (saveColumn.subtype === USER_TYPE) {
+      if (saveColumn.subtype === BBReferenceFieldSubType.USER) {
        saveColumn.relationshipType = RelationshipType.ONE_TO_MANY
-      } else if (saveColumn.subtype === USERS_TYPE) {
+      } else if (saveColumn.subtype === BBReferenceFieldSubType.USERS) {
        saveColumn.relationshipType = RelationshipType.MANY_TO_MANY
      }
    }
@ -363,19 +365,17 @@

  function getAllowedTypes() {
    if (originalName) {
-      const possibleTypes = (
-        SWITCHABLE_TYPES[field.type] || [editableColumn.type]
-      ).map(t => t.toLowerCase())
+      const possibleTypes = SWITCHABLE_TYPES[field.type] || [
+        editableColumn.type,
+      ]
      return Object.entries(FIELDS)
-        .filter(([fieldType]) =>
-          possibleTypes.includes(fieldType.toLowerCase())
-        )
+        .filter(([_, field]) => possibleTypes.includes(field.type))
        .map(([_, fieldDefinition]) => fieldDefinition)
    }

    const isUsers =
      editableColumn.type === FieldType.BB_REFERENCE &&
-      editableColumn.subtype === FieldSubtype.USERS
+      editableColumn.subtype === BBReferenceFieldSubType.USERS

    if (!externalTable) {
      return [
@ -486,7 +486,9 @@
  function isUsersColumn(column) {
    return (
      column.type === FieldType.BB_REFERENCE &&
-      [FieldSubtype.USER, FieldSubtype.USERS].includes(column.subtype)
+      [BBReferenceFieldSubType.USER, BBReferenceFieldSubType.USERS].includes(
+        column.subtype
+      )
    )
  }

@ -514,6 +516,7 @@
    />
  {/if}
  <Select
+    placeholder={null}
    disabled={!typeEnabled}
    bind:value={editableColumn.fieldId}
    on:change={onHandleTypeChange}
@ -689,12 +692,14 @@
    >
  {:else if isUsersColumn(editableColumn) && datasource?.source !== SourceName.GOOGLE_SHEETS}
    <Toggle
-      value={editableColumn.subtype === FieldSubtype.USERS}
+      value={editableColumn.subtype === BBReferenceFieldSubType.USERS}
      on:change={e =>
        handleTypeChange(
          makeFieldId(
            FieldType.BB_REFERENCE,
-            e.detail ? FieldSubtype.USERS : FieldSubtype.USER
+            e.detail
+              ? BBReferenceFieldSubType.USERS
+              : BBReferenceFieldSubType.USER
          )
        )}
      disabled={!isCreating}
--- a/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
@ -1,5 +1,5 @@
 <script>
-  import { FieldType, FieldSubtype } from "@budibase/types"
+  import { FieldType, BBReferenceFieldSubType } from "@budibase/types"
  import { Select, Toggle, Multiselect } from "@budibase/bbui"
  import { DB_TYPE_INTERNAL } from "constants/backend"
  import { API } from "api"
@ -60,11 +60,11 @@
    },
    {
      label: "User",
-      value: `${FieldType.BB_REFERENCE}${FieldSubtype.USER}`,
+      value: `${FieldType.BB_REFERENCE}${BBReferenceFieldSubType.USER}`,
    },
    {
      label: "Users",
-      value: `${FieldType.BB_REFERENCE}${FieldSubtype.USERS}`,
+      value: `${FieldType.BB_REFERENCE}${BBReferenceFieldSubType.USERS}`,
    },
  ]

--- a/packages/builder/src/components/common/DateRangePicker.svelte
+++ b/packages/builder/src/components/common/DateRangePicker.svelte
@ -0,0 +1,89 @@
+<script>
+  import { DatePicker } from "@budibase/bbui"
+  import dayjs from "dayjs"
+  import { createEventDispatcher } from "svelte"
+  import { memo } from "@budibase/frontend-core"
+
+  export let value
+
+  const dispatch = createEventDispatcher()
+  const valueStore = memo(value)
+
+  let date1
+  let date2
+
+  $: valueStore.set(value)
+  $: parseValue($valueStore)
+
+  const parseValue = value => {
+    if (!Array.isArray(value) || !value[0] || !value[1]) {
+      date1 = null
+      date2 = null
+    } else {
+      date1 = value[0]
+      date2 = value[1]
+    }
+  }
+
+  const onChangeDate1 = e => {
+    date1 = e.detail ? dayjs(e.detail).startOf("day") : null
+    if (date1 && (!date2 || date1.isAfter(date2))) {
+      date2 = date1.endOf("day")
+    } else if (!date1) {
+      date2 = null
+    }
+    broadcastChange()
+  }
+
+  const onChangeDate2 = e => {
+    date2 = e.detail ? dayjs(e.detail).endOf("day") : null
+    if (date2 && (!date1 || date2.isBefore(date1))) {
+      date1 = date2.startOf("day")
+    } else if (!date2) {
+      date1 = null
+    }
+    broadcastChange()
+  }
+
+  const broadcastChange = () => {
+    dispatch("change", [date1, date2])
+  }
+</script>
+
+<div class="date-range-picker">
+  <DatePicker
+    value={date1}
+    label="Date range"
+    enableTime={false}
+    on:change={onChangeDate1}
+  />
+  <DatePicker value={date2} enableTime={false} on:change={onChangeDate2} />
+</div>
+
+<style>
+  .date-range-picker {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+  }
+
+  /* Overlap date pickers to remove double border, but put the focused one on top */
+  .date-range-picker :global(.spectrum-InputGroup.is-focused) {
+    z-index: 1;
+  }
+  .date-range-picker :global(> :last-child) {
+    margin-left: -1px;
+  }
+
+  /* Remove border radius at the join */
+  .date-range-picker :global(> :first-child .spectrum-InputGroup),
+  .date-range-picker :global(> :first-child .spectrum-Picker) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .date-range-picker :global(> :last-child .spectrum-InputGroup),
+  .date-range-picker :global(> :last-child .spectrum-Textfield-input) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+</style>
--- a/packages/builder/src/components/common/RelationshipSelector.svelte
+++ b/packages/builder/src/components/common/RelationshipSelector.svelte
@ -75,14 +75,12 @@
  .relationship-container {
    display: flex;
    align-items: center;
-    gap: 20px;
+    gap: var(--spacing-m);
  }
-
  .relationship-part {
-    flex-basis: 70%;
+    flex: 1 1 auto;
  }
-
  .relationship-type {
-    flex-basis: 30%;
+    flex: 0 0 128px;
  }
 </style>
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/PromptUser.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/PromptUser.svelte
@ -1,8 +1,10 @@
 <script>
-  import { Body, Label, Input } from "@budibase/bbui"
+  import { Body, Label } from "@budibase/bbui"
  import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"

  export let parameters
+  export let bindings

  onMount(() => {
    if (!parameters.confirm) {
@ -15,11 +17,18 @@
  <Body size="S">Enter the message you wish to display to the user.</Body>
  <div class="params">
    <Label small>Title</Label>
-    <Input placeholder="Prompt User" bind:value={parameters.customTitleText} />
+    <DrawerBindableInput
+      placeholder="Title"
+      value={parameters.customTitleText}
+      on:change={e => (parameters.customTitleText = e.detail)}
+      {bindings}
+    />
    <Label small>Message</Label>
-    <Input
+    <DrawerBindableInput
      placeholder="Are you sure you want to continue?"
-      bind:value={parameters.confirmText}
+      value={parameters.confirmText}
+      on:change={e => (parameters.confirmText = e.detail)}
+      {bindings}
    />
  </div>
 </div>
--- a/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
@ -21,26 +21,24 @@
  const currentStep = derived(multiStepStore, state => state.currentStep)
  const componentType = "@budibase/standard-components/multistepformblockstep"

+  setContext("multi-step-form-block", multiStepStore)
+
  let cachedValue
  let cachedInstance = {}

  $: if (!isEqual(cachedValue, value)) {
    cachedValue = value
  }
-
  $: if (!isEqual(componentInstance, cachedInstance)) {
    cachedInstance = componentInstance
  }
-
-  setContext("multi-step-form-block", multiStepStore)
-
  $: stepCount = cachedValue?.length || 0
  $: updateStore(stepCount)
  $: dataSource = getDatasourceForProvider($selectedScreen, cachedInstance)
  $: emitCurrentStep($currentStep)
  $: stepLabel = getStepLabel($multiStepStore)
  $: stepDef = getDefinition(stepLabel)
-  $: stepSettings = cachedValue?.[$currentStep] || {}
+  $: savedInstance = cachedValue?.[$currentStep] || {}
  $: defaults = Utils.buildMultiStepFormBlockDefaultProps({
    _id: cachedInstance._id,
    stepCount: $multiStepStore.stepCount,
@ -48,14 +46,16 @@
    actionType: cachedInstance.actionType,
    dataSource: cachedInstance.dataSource,
  })
+  // For backwards compatibility we need to sometimes manually set base
+  // properties like _id and _component as we didn't used to save these
  $: stepInstance = {
-    _id: Helpers.uuid(),
-    _component: componentType,
+    _id: savedInstance._id || Helpers.uuid(),
+    _component: savedInstance._component || componentType,
    _instanceName: `Step ${currentStep + 1}`,
-    title: stepSettings.title ?? defaults?.title,
-    buttons: stepSettings.buttons || defaults?.buttons,
-    fields: stepSettings.fields,
-    desc: stepSettings.desc,
+    title: savedInstance.title ?? defaults?.title,
+    buttons: savedInstance.buttons || defaults?.buttons,
+    fields: savedInstance.fields,
+    desc: savedInstance.desc,

    // Needed for field configuration
    dataSource,
@ -92,7 +92,8 @@
  }

  const addStep = () => {
-    value = value.toSpliced($currentStep + 1, 0, {})
+    const newInstance = componentStore.createInstance(componentType)
+    value = value.toSpliced($currentStep + 1, 0, newInstance)
    dispatch("change", value)
    multiStepStore.update(state => ({
      ...state,
--- a/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
+++ b/packages/builder/src/components/design/settings/controls/FormStepControls.svelte
@ -1,6 +1,6 @@
 <script>
  import { createEventDispatcher, getContext } from "svelte"
-  import { ActionButton } from "@budibase/bbui"
+  import { ActionButton, AbsTooltip } from "@budibase/bbui"

  const multiStepStore = getContext("multi-step-form-block")
  const dispatch = createEventDispatcher()
@ -28,45 +28,49 @@
  </div>
 {:else}
  <div class="step-actions">
-    <ActionButton
-      size="S"
-      secondary
-      icon="ChevronLeft"
-      disabled={currentStep === 0}
-      on:click={() => {
-        stepAction("previousStep")
-      }}
-      tooltip={"Previous step"}
-    />
-    <ActionButton
-      size="S"
-      secondary
-      disabled={currentStep === stepCount - 1}
-      icon="ChevronRight"
-      on:click={() => {
-        stepAction("nextStep")
-      }}
-      tooltip={"Next step"}
-    />
-    <ActionButton
-      size="S"
-      secondary
-      icon="Close"
-      disabled={stepCount === 1}
-      on:click={() => {
-        stepAction("removeStep")
-      }}
-      tooltip={"Remove step"}
-    />
-    <ActionButton
-      size="S"
-      secondary
-      icon="MultipleAdd"
-      on:click={() => {
-        stepAction("addStep")
-      }}
-      tooltip={"Add step"}
-    />
+    <AbsTooltip text="Previous step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        icon="ChevronLeft"
+        disabled={currentStep === 0}
+        on:click={() => {
+          stepAction("previousStep")
+        }}
+      />
+    </AbsTooltip>
+    <AbsTooltip text="Next step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        disabled={currentStep === stepCount - 1}
+        icon="ChevronRight"
+        on:click={() => {
+          stepAction("nextStep")
+        }}
+      />
+    </AbsTooltip>
+    <AbsTooltip text="Remove step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        icon="Close"
+        disabled={stepCount === 1}
+        on:click={() => {
+          stepAction("removeStep")
+        }}
+      />
+    </AbsTooltip>
+    <AbsTooltip text="Add step" noWrap>
+      <ActionButton
+        size="S"
+        secondary
+        icon="MultipleAdd"
+        on:click={() => {
+          stepAction("addStep")
+        }}
+      />
+    </AbsTooltip>
  </div>
 {/if}

--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
@ -75,6 +75,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
    return createComponent(
      "@budibase/standard-components/labelfield",
      {
+        _id: column.field,
        _instanceName: column.field,
        active: column.active,
        field: column.field,
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js
@ -65,6 +65,7 @@ describe("getColumns", () => {
    it("returns the selected and unselected fields in the modern format, respecting the original order", ctx => {
      expect(ctx.columns.sortable).toEqual([
        {
+          _id: "three",
          _instanceName: "three",
          active: true,
          columnType: "foo",
@ -73,6 +74,7 @@ describe("getColumns", () => {
          label: "three label",
        },
        {
+          _id: "two",
          _instanceName: "two",
          active: true,
          columnType: "foo",
@ -81,6 +83,7 @@ describe("getColumns", () => {
          label: "two label",
        },
        {
+          _id: "one",
          _instanceName: "one",
          active: false,
          columnType: "foo",
@ -91,6 +94,7 @@ describe("getColumns", () => {
      ])

      expect(ctx.columns.primary).toEqual({
+        _id: "four",
        _instanceName: "four",
        active: true,
        columnType: "foo",
@ -115,6 +119,7 @@ describe("getColumns", () => {
    it("returns all columns, with non-hidden columns automatically selected", ctx => {
      expect(ctx.columns.sortable).toEqual([
        {
+          _id: "two",
          _instanceName: "two",
          active: true,
          columnType: "foo",
@ -123,6 +128,7 @@ describe("getColumns", () => {
          label: "two",
        },
        {
+          _id: "three",
          _instanceName: "three",
          active: true,
          columnType: "foo",
@ -131,6 +137,7 @@ describe("getColumns", () => {
          label: "three",
        },
        {
+          _id: "one",
          _instanceName: "one",
          active: false,
          columnType: "foo",
@ -141,6 +148,7 @@ describe("getColumns", () => {
      ])

      expect(ctx.columns.primary).toEqual({
+        _id: "four",
        _instanceName: "four",
        active: true,
        columnType: "foo",
@ -173,6 +181,7 @@ describe("getColumns", () => {
    it("returns all columns, including those missing from the initial data", ctx => {
      expect(ctx.columns.sortable).toEqual([
        {
+          _id: "three",
          _instanceName: "three",
          active: true,
          columnType: "foo",
@ -181,6 +190,7 @@ describe("getColumns", () => {
          label: "three label",
        },
        {
+          _id: "two",
          _instanceName: "two",
          active: false,
          columnType: "foo",
@ -189,6 +199,7 @@ describe("getColumns", () => {
          label: "two",
        },
        {
+          _id: "one",
          _instanceName: "one",
          active: false,
          columnType: "foo",
@ -199,6 +210,7 @@ describe("getColumns", () => {
      ])

      expect(ctx.columns.primary).toEqual({
+        _id: "four",
        _instanceName: "four",
        active: true,
        columnType: "foo",
@ -228,6 +240,7 @@ describe("getColumns", () => {
    it("returns all valid columns, excluding those that aren't valid for the schema", ctx => {
      expect(ctx.columns.sortable).toEqual([
        {
+          _id: "three",
          _instanceName: "three",
          active: true,
          columnType: "foo",
@ -236,6 +249,7 @@ describe("getColumns", () => {
          label: "three label",
        },
        {
+          _id: "two",
          _instanceName: "two",
          active: false,
          columnType: "foo",
@ -244,6 +258,7 @@ describe("getColumns", () => {
          label: "two",
        },
        {
+          _id: "one",
          _instanceName: "one",
          active: false,
          columnType: "foo",
@ -254,6 +269,7 @@ describe("getColumns", () => {
      ])

      expect(ctx.columns.primary).toEqual({
+        _id: "four",
        _instanceName: "four",
        active: true,
        columnType: "foo",
@ -318,6 +334,7 @@ describe("getColumns", () => {
      beforeEach(ctx => {
        ctx.updateSortable([
          {
+            _id: "three",
            _instanceName: "three",
            active: true,
            columnType: "foo",
@ -326,6 +343,7 @@ describe("getColumns", () => {
            label: "three",
          },
          {
+            _id: "one",
            _instanceName: "one",
            active: true,
            columnType: "foo",
@ -334,6 +352,7 @@ describe("getColumns", () => {
            label: "one",
          },
          {
+            _id: "two",
            _instanceName: "two",
            active: false,
            columnType: "foo",
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@ -35,6 +35,8 @@
  export let bindingDrawerLeft
  export let allowHelpers = true
  export let customButtonText = null
+  export let keyBindings = false
+  export let allowJS = false
  export let compare = (option, value) => option === value

  let fields = Object.entries(object || {}).map(([name, value]) => ({
@ -116,12 +118,23 @@
    class:readOnly-menu={readOnly && showMenu}
  >
    {#each fields as field, idx}
-      <Input
-        placeholder={keyPlaceholder}
-        readonly={readOnly}
-        bind:value={field.name}
-        on:blur={changed}
-      />
+      {#if keyBindings}
+        <DrawerBindableInput
+          {bindings}
+          placeholder={keyPlaceholder}
+          on:blur={e => {
+            field.name = e.detail
+            changed()
+          }}
+          disabled={readOnly}
+          value={field.name}
+          {allowJS}
+          {allowHelpers}
+          drawerLeft={bindingDrawerLeft}
+        />
+      {:else}
+        <Input readonly={readOnly} bind:value={field.name} on:blur={changed} />
+      {/if}
      {#if isJsonArray(field.value)}
        <Select readonly={true} value="Array" options={["Array"]} />
      {:else if options}
@ -134,14 +147,14 @@
      {:else if bindings && bindings.length}
        <DrawerBindableInput
          {bindings}
-          placeholder="Value"
+          placeholder={valuePlaceholder}
          on:blur={e => {
            field.value = e.detail
            changed()
          }}
          disabled={readOnly}
          value={field.value}
-          allowJS={false}
+          {allowJS}
          {allowHelpers}
          drawerLeft={bindingDrawerLeft}
        />
--- a/packages/builder/src/components/integration/QueryViewerSidePanel/SchemaPanel.svelte
+++ b/packages/builder/src/components/integration/QueryViewerSidePanel/SchemaPanel.svelte
@ -25,6 +25,6 @@
    name="field"
    headings
    options={SchemaTypeOptionsExpanded}
-    compare={(option, value) => option.type === value.type}
+    compare={(option, value) => option.type === value?.type}
  />
 {/key}
--- a/packages/builder/src/components/integration/RestQueryViewer.svelte
+++ b/packages/builder/src/components/integration/RestQueryViewer.svelte
@ -695,7 +695,7 @@
                  menuItems={schemaMenuItems}
                  showMenu={!schemaReadOnly}
                  readOnly={schemaReadOnly}
-                  compare={(option, value) => option.type === value.type}
+                  compare={(option, value) => option.type === value?.type}
                />
              </Tab>
            {/if}
--- a/packages/builder/src/components/portal/onboarding/EnterpriseBasicTrialModal.svelte
+++ b/packages/builder/src/components/portal/onboarding/EnterpriseBasicTrialModal.svelte
@ -0,0 +1,64 @@
+<script>
+  import { Modal, ModalContent } from "@budibase/bbui"
+  import FreeTrial from "../../../../assets/FreeTrial.svelte"
+  import { get } from "svelte/store"
+  import { auth, licensing } from "stores/portal"
+  import { API } from "api"
+  import { PlanType } from "@budibase/types"
+
+  let freeTrialModal
+
+  $: planType = $licensing?.license?.plan?.type
+  $: showFreeTrialModal(planType, freeTrialModal)
+
+  const showFreeTrialModal = (planType, freeTrialModal) => {
+    if (
+      planType === PlanType.ENTERPRISE_BASIC_TRIAL &&
+      !$auth.user?.freeTrialConfirmedAt
+    ) {
+      freeTrialModal?.show()
+    }
+  }
+</script>
+
+<Modal bind:this={freeTrialModal} disableCancel={true}>
+  <ModalContent
+    confirmText="Get started"
+    size="M"
+    showCancelButton={false}
+    showCloseIcon={false}
+    onConfirm={async () => {
+      if (get(auth).user) {
+        try {
+          await API.updateSelf({
+            freeTrialConfirmedAt: new Date().toISOString(),
+          })
+          // Update the cached user
+          await auth.getSelf()
+        } finally {
+          freeTrialModal.hide()
+        }
+      }
+    }}
+  >
+    <h1>Experience all of Budibase with a free 14-day trial</h1>
+    <div class="free-trial-text">
+      We've upgraded you to a free 14-day trial that allows you to try all our
+      features before deciding which plan is right for you.
+      <p>
+        At the end of your trial, we'll automatically downgrade you to the Free
+        plan unless you choose to upgrade.
+      </p>
+    </div>
+    <FreeTrial />
+  </ModalContent>
+</Modal>
+
+<style>
+  h1 {
+    font-size: 26px;
+  }
+  .free-trial-text {
+    font-size: 16px;
+  }
+</style>
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@ -1,6 +1,6 @@
 import {
  FieldType,
-  FieldSubtype,
+  BBReferenceFieldSubType,
  INTERNAL_TABLE_SOURCE_ID,
  AutoFieldSubType,
  Hosting,
@ -169,13 +169,13 @@ export const FIELDS = {
  USER: {
    name: "User",
    type: FieldType.BB_REFERENCE,
-    subtype: FieldSubtype.USER,
+    subtype: BBReferenceFieldSubType.USER,
    icon: TypeIconMap[FieldType.USER],
  },
  USERS: {
    name: "Users",
    type: FieldType.BB_REFERENCE,
-    subtype: FieldSubtype.USERS,
+    subtype: BBReferenceFieldSubType.USERS,
    icon: TypeIconMap[FieldType.USERS],
    constraints: {
      type: "array",
@ -262,6 +262,7 @@ export const SchemaTypeOptions = [
  { label: "Number", value: FieldType.NUMBER },
  { label: "Boolean", value: FieldType.BOOLEAN },
  { label: "Datetime", value: FieldType.DATETIME },
+  { label: "JSON", value: FieldType.JSON },
 ]

 export const SchemaTypeOptionsExpanded = SchemaTypeOptions.map(el => ({
--- a/packages/builder/src/dataBinding.js
+++ b/packages/builder/src/dataBinding.js
@ -22,6 +22,7 @@ import {
  isJSBinding,
  decodeJSBinding,
  encodeJSBinding,
+  getJsHelperList,
 } from "@budibase/string-templates"
 import { TableNames } from "./constants"
 import { JSONUtils, Constants } from "@budibase/frontend-core"
@ -1105,50 +1106,51 @@ export const getAllStateVariables = () => {
  getAllAssets().forEach(asset => {
    findAllMatchingComponents(asset.props, component => {
      const settings = componentStore.getComponentSettings(component._component)
+      const nestedTypes = [
+        "buttonConfiguration",
+        "fieldConfiguration",
+        "stepConfiguration",
+      ]

+      // Extracts all event settings from a component instance.
+      // Recurses into nested types to find all event-like settings at any
+      // depth.
      const parseEventSettings = (settings, comp) => {
+        if (!settings?.length) {
+          return
+        }
+
+        // Extract top level event settings
        settings
          .filter(setting => setting.type === "event")
          .forEach(setting => {
            eventSettings.push(comp[setting.key])
          })
-      }

-      const parseComponentSettings = (settings, component) => {
-        // Parse the nested button configurations
+        // Recurse into any nested instance types
        settings
-          .filter(setting => setting.type === "buttonConfiguration")
+          .filter(setting => nestedTypes.includes(setting.type))
          .forEach(setting => {
-            const buttonConfig = component[setting.key]
+            const instances = comp[setting.key]
+            if (Array.isArray(instances) && instances.length) {
+              instances.forEach(instance => {
+                let type = instance?._component

-            if (Array.isArray(buttonConfig)) {
-              buttonConfig.forEach(button => {
-                const nestedSettings = componentStore.getComponentSettings(
-                  button._component
-                )
-                parseEventSettings(nestedSettings, button)
+                // Backwards compatibility for multi-step from blocks which
+                // didn't set a proper component type previously.
+                if (setting.type === "stepConfiguration" && !type) {
+                  type = "@budibase/standard-components/multistepformblockstep"
+                }
+
+                // Parsed nested component instances inside this setting
+                const nestedSettings = componentStore.getComponentSettings(type)
+                parseEventSettings(nestedSettings, instance)
              })
            }
          })
-
-        parseEventSettings(settings, component)
      }

-      // Parse the base component settings
-      parseComponentSettings(settings, component)
-
-      // Parse step configuration
-      const stepSetting = settings.find(
-        setting => setting.type === "stepConfiguration"
-      )
-      const steps = stepSetting ? component[stepSetting.key] : []
-      const stepDefinition = componentStore.getComponentSettings(
-        "@budibase/standard-components/multistepformblockstep"
-      )
-
-      steps?.forEach(step => {
-        parseComponentSettings(stepDefinition, step)
-      })
+      parseEventSettings(settings, component)
    })
  })

@ -1210,9 +1212,32 @@ const shouldReplaceBinding = (currentValue, from, convertTo, binding) => {
  if (!currentValue?.includes(from)) {
    return false
  }
-  if (convertTo === "readableBinding") {
-    // Dont replace if the value already matches the readable binding
+  // some cases we have the same binding for readable/runtime, specific logic for this
+  const sameBindings = binding.runtimeBinding.includes(binding.readableBinding)
+  const convertingToReadable = convertTo === "readableBinding"
+  const helperNames = Object.keys(getJsHelperList())
+  const matchedHelperNames = helperNames.filter(
+    name => name.includes(from) && currentValue.includes(name)
+  )
+  // edge case - if the binding is part of a helper it may accidentally replace it
+  if (matchedHelperNames.length > 0) {
+    const indexStart = currentValue.indexOf(from),
+      indexEnd = indexStart + from.length
+    for (let helperName of matchedHelperNames) {
+      const helperIndexStart = currentValue.indexOf(helperName),
+        helperIndexEnd = helperIndexStart + helperName.length
+      if (indexStart >= helperIndexStart && indexEnd <= helperIndexEnd) {
+        return false
+      }
+    }
+  }
+
+  if (convertingToReadable && !sameBindings) {
+    // Don't replace if the value already matches the readable binding
    return currentValue.indexOf(binding.readableBinding) === -1
+  } else if (convertingToReadable) {
+    // if the runtime and readable bindings are very similar we have to assume it should be replaced
+    return true
  }
  // remove all the spaces, if the input is surrounded by spaces e.g. [ Auto ID ] then
  // this makes sure it is detected
--- a/packages/builder/src/helpers/planTitle.js
+++ b/packages/builder/src/helpers/planTitle.js
@ -20,6 +20,9 @@ export function getFormattedPlanName(userPlanType) {
    case PlanType.ENTERPRISE:
      planName = "Enterprise"
      break
+    case PlanType.ENTERPRISE_BASIC_TRIAL:
+      planName = "Trial"
+      break
    default:
      planName = "Free" // Default to "Free" if the type is not explicitly handled
  }
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@ -32,6 +32,7 @@
  import { UserAvatars } from "@budibase/frontend-core"
  import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
  import PreviewOverlay from "./_components/PreviewOverlay.svelte"
+  import EnterpriseBasicTrialModal from "components/portal/onboarding/EnterpriseBasicTrialModal.svelte"

  export let application

@ -192,6 +193,8 @@
  <CommandPalette />
 </Modal>

+<EnterpriseBasicTrialModal />
+
 <style>
  .back-to-apps {
    display: contents;
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
@ -189,6 +189,7 @@
                <Select
                  options={settingOptions}
                  bind:value={condition.setting}
+                  on:change={() => delete condition.settingValue}
                />
                <div>TO</div>
                {#if definition}
--- a/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
@ -1,7 +1,6 @@
 <script>
  import {
    Button,
-    DatePicker,
    Divider,
    Layout,
    notifications,
@ -25,13 +24,13 @@
  import BackupsDefault from "assets/backups-default.png"
  import { BackupTrigger, BackupType } from "constants/backend/backups"
  import { onMount } from "svelte"
+  import DateRangePicker from "components/common/DateRangePicker.svelte"

  let loading = true
  let backupData = null
  let pageInfo = createPaginationStore()
  let filterOpt = null
-  let startDate = null
-  let endDate = null
+  let dateRange = []
  let filters = [
    {
      label: "Manual backup",
@ -52,7 +51,7 @@
  ]

  $: page = $pageInfo.page
-  $: fetchBackups(filterOpt, page, startDate, endDate)
+  $: fetchBackups(filterOpt, page, dateRange)

  let schema = {
    type: {
@ -99,13 +98,13 @@
    })
  }

-  async function fetchBackups(filters, page, startDate, endDate) {
+  async function fetchBackups(filters, page, dateRange) {
    const response = await backups.searchBackups({
      appId: $appStore.appId,
      ...filters,
      page,
-      startDate,
-      endDate,
+      startDate: dateRange[0],
+      endDate: dateRange[1],
    })
    pageInfo.fetched(response.hasNextPage, response.nextPage)

@ -165,7 +164,7 @@
  }

  onMount(async () => {
-    await fetchBackups(filterOpt, page, startDate, endDate)
+    await fetchBackups(filterOpt, page, dateRange)
    loading = false
  })
 </script>
@ -207,7 +206,7 @@
        View plans
      </Button>
    </div>
-  {:else if !backupData?.length && !loading && !filterOpt && !startDate}
+  {:else if !backupData?.length && !loading && !filterOpt && !dateRange?.length}
    <div class="center">
      <Layout noPadding gap="S" justifyItems="center">
        <img height="130px" src={BackupsDefault} alt="BackupsDefault" />
@ -236,21 +235,15 @@
              bind:value={filterOpt}
            />
          </div>
-          <DatePicker
-            range={true}
-            label="Date Range"
-            on:change={e => {
-              if (e.detail[0].length > 1) {
-                startDate = e.detail[0][0].toISOString()
-                endDate = e.detail[0][1].toISOString()
-              }
-            }}
+          <DateRangePicker
+            value={dateRange}
+            on:change={e => (dateRange = e.detail)}
          />
        </div>
        <div>
-          <Button cta disabled={loading} on:click={createManualBackup}
-            >Create new backup</Button
-          >
+          <Button cta disabled={loading} on:click={createManualBackup}>
+            Create new backup
+          </Button>
        </div>
      </div>
      <div class="table">
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
@ -12,7 +12,6 @@
    Icon,
    clickOutside,
    CoreTextArea,
-    DatePicker,
    Pagination,
    Helpers,
    Divider,
@ -27,6 +26,8 @@
  import TimeRenderer from "./_components/TimeRenderer.svelte"
  import AppColumnRenderer from "./_components/AppColumnRenderer.svelte"
  import { cloneDeep } from "lodash"
+  import DateRangePicker from "components/common/DateRangePicker.svelte"
+  import dayjs from "dayjs"

  const schema = {
    date: { width: "0.8fr" },
@ -69,16 +70,13 @@
  let sidePanelVisible = false
  let wideSidePanel = false
  let timer
-  let startDate = new Date()
-  startDate.setDate(startDate.getDate() - 30)
-  let endDate = new Date()
+  let dateRange = [dayjs().subtract(30, "days"), dayjs()]

  $: fetchUsers(userPage, userSearchTerm)
  $: fetchLogs({
    logsPage,
    logSearchTerm,
-    startDate,
-    endDate,
+    dateRange,
    selectedUsers,
    selectedApps,
    selectedEvents,
@ -136,8 +134,7 @@
  const fetchLogs = async ({
    logsPage,
    logSearchTerm,
-    startDate,
-    endDate,
+    dateRange,
    selectedUsers,
    selectedApps,
    selectedEvents,
@ -155,8 +152,8 @@
      logsPageInfo.loading()
      await auditLogs.search({
        bookmark: logsPage,
-        startDate,
-        endDate,
+        startDate: dateRange[0],
+        endDate: dateRange[1],
        fullSearch: logSearchTerm,
        userIds: selectedUsers,
        appIds: selectedApps,
@ -214,8 +211,8 @@
  const downloadLogs = async () => {
    try {
      window.location = auditLogs.getDownloadUrl({
-        startDate,
-        endDate,
+        startDate: dateRange[0],
+        endDate: dateRange[1],
        fullSearch: logSearchTerm,
        userIds: selectedUsers,
        appIds: selectedApps,
@ -302,22 +299,9 @@
    </div>

    <div class="date-picker">
-      <DatePicker
-        value={[startDate, endDate]}
-        placeholder="Choose date range"
-        range={true}
-        on:change={e => {
-          if (e.detail[0]?.length === 1) {
-            startDate = e.detail[0][0].toISOString()
-            endDate = ""
-          } else if (e.detail[0]?.length > 1) {
-            startDate = e.detail[0][0].toISOString()
-            endDate = e.detail[0][1].toISOString()
-          } else {
-            startDate = ""
-            endDate = ""
-          }
-        }}
+      <DateRangePicker
+        value={dateRange}
+        on:change={e => (dateRange = e.detail)}
      />
    </div>
    <div class="freeSearch">
@ -488,7 +472,7 @@
    flex-direction: row;
    gap: var(--spacing-l);
    flex-wrap: wrap;
-    align-items: center;
+    align-items: flex-end;
  }

  .side-panel-icons {
@ -505,6 +489,13 @@
  .date-picker {
    flex-basis: calc(70% - 32px);
    min-width: 100px;
+    display: flex;
+    flex-direction: row;
+  }
+  .date-picker :global(.date-range-picker),
+  .date-picker :global(.spectrum-Form-item) {
+    flex: 1 1 auto;
+    width: 0;
  }

  .freeSearch {
--- a/packages/builder/src/stores/portal/licensing.js
+++ b/packages/builder/src/stores/portal/licensing.js
@ -103,6 +103,8 @@ export const createLicensingStore = () => {
      const isEnterprisePlan = planType === Constants.PlanType.ENTERPRISE
      const isFreePlan = planType === Constants.PlanType.FREE
      const isBusinessPlan = planType === Constants.PlanType.BUSINESS
+      const isEnterpriseTrial =
+        planType === Constants.PlanType.ENTERPRISE_BASIC_TRIAL
      const groupsEnabled = license.features.includes(
        Constants.Features.USER_GROUPS
      )
@ -143,6 +145,7 @@ export const createLicensingStore = () => {
          isEnterprisePlan,
          isFreePlan,
          isBusinessPlan,
+          isEnterpriseTrial,
          groupsEnabled,
          backupsEnabled,
          brandingEnabled,
--- a/packages/cli/src/backups/objectStore.ts
+++ b/packages/cli/src/backups/objectStore.ts
@ -9,7 +9,7 @@ const {
  ObjectStore,
  retrieve,
  uploadDirectory,
-  makeSureBucketExists,
+  createBucketIfNotExists,
 } = objectStore

 const bucketList = Object.values(ObjectStoreBuckets)
@ -61,7 +61,7 @@ export async function importObjects() {
  let count = 0
  for (let bucket of buckets) {
    const client = ObjectStore(bucket)
-    await makeSureBucketExists(client, bucket)
+    await createBucketIfNotExists(client, bucket)
    const files = await uploadDirectory(bucket, join(path, bucket), "/")
    count += files.length
    bar.update(count)
--- a/packages/cli/src/hosting/utils.ts
+++ b/packages/cli/src/hosting/utils.ts
@ -54,11 +54,9 @@ export async function downloadDockerCompose() {

 export async function checkDockerConfigured() {
  const error =
-    "docker/docker-compose has not been installed, please follow instructions at: https://docs.budibase.com/docs/docker-compose"
+    "docker has not been installed, please follow instructions at: https://docs.budibase.com/docs/docker-compose"
  const docker = await lookpath("docker")
-  const compose = await lookpath("docker-compose")
-  const composeV2 = await lookpath("docker compose")
-  if (!docker || (!compose && !composeV2)) {
+  if (!docker) {
    throw error
  }
 }
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -3869,12 +3869,6 @@
        "key": "timeOnly",
        "defaultValue": false
      },
-      {
-        "type": "boolean",
-        "label": "24-hour time",
-        "key": "time24hr",
-        "defaultValue": false
-      },
      {
        "type": "boolean",
        "label": "Ignore time zones",
@ -4275,8 +4269,8 @@
    ]
  },
  "attachmentfield": {
-    "name": "Attachment list",
-    "icon": "Attach",
+    "name": "Attachment List",
+    "icon": "DocumentFragmentGroup",
    "styles": ["size"],
    "requiredAncestors": ["form"],
    "editable": true,
@ -4373,7 +4367,7 @@
  },
  "attachmentsinglefield": {
    "name": "Single Attachment",
-    "icon": "Attach",
+    "icon": "DocumentFragment",
    "styles": ["size"],
    "requiredAncestors": ["form"],
    "editable": true,
@ -6772,7 +6766,20 @@
    "illegalChildren": ["section", "sidepanel"],
    "showEmptyState": false,
    "draggable": false,
-    "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action."
+    "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action.",
+    "settings": [
+      {
+        "type": "boolean",
+        "key": "ignoreClicksOutside",
+        "label": "Ignore clicks outside",
+        "defaultValue": false
+      },
+      {
+        "type": "event",
+        "key": "onClose",
+        "label": "On close"
+      }
+    ]
  },
  "rowexplorer": {
    "block": true,
@ -7022,6 +7029,12 @@
        "key": "stripeRows",
        "defaultValue": false
      },
+      {
+        "type": "boolean",
+        "label": "Quiet",
+        "key": "quiet",
+        "defaultValue": false
+      },
      {
        "section": true,
        "name": "Columns",
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -24,14 +24,7 @@
    "@budibase/shared-core": "0.0.0",
    "@budibase/string-templates": "0.0.0",
    "@budibase/types": "0.0.0",
-    "@spectrum-css/button": "^3.0.3",
-    "@spectrum-css/card": "^3.0.3",
-    "@spectrum-css/divider": "^1.0.3",
-    "@spectrum-css/link": "^3.1.3",
-    "@spectrum-css/page": "^3.0.1",
-    "@spectrum-css/tag": "^3.1.4",
-    "@spectrum-css/typography": "^3.0.2",
-    "@spectrum-css/vars": "^3.0.1",
+    "@spectrum-css/card": "3.0.3",
    "apexcharts": "^3.22.1",
    "dayjs": "^1.10.8",
    "downloadjs": "1.4.7",
@ -42,7 +35,6 @@
    "screenfull": "^6.0.1",
    "shortid": "^2.2.15",
    "svelte-apexcharts": "^1.0.2",
-    "svelte-flatpickr": "^3.3.4",
    "svelte-spa-router": "^4.0.1"
  },
  "devDependencies": {
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@ -119,140 +119,135 @@
  {/if}
 </svelte:head>

-<div
-  id="spectrum-root"
-  lang="en"
-  dir="ltr"
-  class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
-  class:builder={$builderStore.inBuilder}
-  class:show={fontsLoaded && dataLoaded}
->
-  {#if $environmentStore.maintenance.length > 0}
-    <MaintenanceScreen maintenanceList={$environmentStore.maintenance} />
-  {:else}
-    <DeviceBindingsProvider>
-      <UserBindingsProvider>
-        <StateBindingsProvider>
-          <RowSelectionProvider>
-            <QueryParamsProvider>
-              <SnippetsProvider>
-                <!-- Settings bar can be rendered outside of device preview -->
-                <!-- Key block needs to be outside the if statement or it breaks -->
-                {#key $builderStore.selectedComponentId}
-                  {#if $builderStore.inBuilder}
-                    <SettingsBar />
-                  {/if}
-                {/key}
-
-                <!-- Clip boundary for selection indicators -->
-                <div
-                  id="clip-root"
-                  class:preview={$builderStore.inBuilder}
-                  class:tablet-preview={$builderStore.previewDevice ===
-                    "tablet"}
-                  class:mobile-preview={$builderStore.previewDevice ===
-                    "mobile"}
-                >
-                  <!-- Actual app -->
-                  <div id="app-root">
-                    {#if showDevTools}
-                      <DevToolsHeader />
+{#if dataLoaded}
+  <div
+    id="spectrum-root"
+    lang="en"
+    dir="ltr"
+    class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
+    class:builder={$builderStore.inBuilder}
+    class:show={fontsLoaded && dataLoaded}
+  >
+    {#if $environmentStore.maintenance.length > 0}
+      <MaintenanceScreen maintenanceList={$environmentStore.maintenance} />
+    {:else}
+      <DeviceBindingsProvider>
+        <UserBindingsProvider>
+          <StateBindingsProvider>
+            <RowSelectionProvider>
+              <QueryParamsProvider>
+                <SnippetsProvider>
+                  <!-- Settings bar can be rendered outside of device preview -->
+                  <!-- Key block needs to be outside the if statement or it breaks -->
+                  {#key $builderStore.selectedComponentId}
+                    {#if $builderStore.inBuilder}
+                      <SettingsBar />
                    {/if}
+                  {/key}

-                    <div id="app-body">
-                      {#if permissionError}
-                        <div class="error">
-                          <Layout justifyItems="center" gap="S">
-                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                            {@html ErrorSVG}
-                            <Heading size="L">
-                              You don't have permission to use this app
-                            </Heading>
-                            <Body size="S">
-                              Ask your administrator to grant you access
-                            </Body>
-                          </Layout>
-                        </div>
-                      {:else if !$screenStore.activeLayout}
-                        <div class="error">
-                          <Layout justifyItems="center" gap="S">
-                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                            {@html ErrorSVG}
-                            <Heading size="L">
-                              Something went wrong rendering your app
-                            </Heading>
-                            <Body size="S">
-                              Get in touch with support if this issue persists
-                            </Body>
-                          </Layout>
-                        </div>
-                      {:else if embedNoScreens}
-                        <div class="error">
-                          <Layout justifyItems="center" gap="S">
-                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                            {@html ErrorSVG}
-                            <Heading size="L">
-                              This Budibase app is not publicly accessible
-                            </Heading>
-                          </Layout>
-                        </div>
-                      {:else}
-                        <CustomThemeWrapper>
-                          {#key $screenStore.activeLayout._id}
-                            <Component
-                              isLayout
-                              instance={$screenStore.activeLayout.props}
-                            />
-                          {/key}
-
-                          <!--
-                        Flatpickr needs to be inside the theme wrapper.
-                        It also needs its own container because otherwise it hijacks
-                        key events on the whole page. It is painful to work with.
-                      -->
-                          <div id="flatpickr-root" />
-
-                          <!-- Modal container to ensure they sit on top -->
-                          <div class="modal-container" />
-
-                          <!-- Layers on top of app -->
-                          <NotificationDisplay />
-                          <ConfirmationDisplay />
-                          <PeekScreenDisplay />
-                        </CustomThemeWrapper>
+                  <!-- Clip boundary for selection indicators -->
+                  <div
+                    id="clip-root"
+                    class:preview={$builderStore.inBuilder}
+                    class:tablet-preview={$builderStore.previewDevice ===
+                      "tablet"}
+                    class:mobile-preview={$builderStore.previewDevice ===
+                      "mobile"}
+                  >
+                    <!-- Actual app -->
+                    <div id="app-root">
+                      {#if showDevTools}
+                        <DevToolsHeader />
                      {/if}

-                      {#if showDevTools}
-                        <DevTools />
+                      <div id="app-body">
+                        {#if permissionError}
+                          <div class="error">
+                            <Layout justifyItems="center" gap="S">
+                              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                              {@html ErrorSVG}
+                              <Heading size="L">
+                                You don't have permission to use this app
+                              </Heading>
+                              <Body size="S">
+                                Ask your administrator to grant you access
+                              </Body>
+                            </Layout>
+                          </div>
+                        {:else if !$screenStore.activeLayout}
+                          <div class="error">
+                            <Layout justifyItems="center" gap="S">
+                              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                              {@html ErrorSVG}
+                              <Heading size="L">
+                                Something went wrong rendering your app
+                              </Heading>
+                              <Body size="S">
+                                Get in touch with support if this issue persists
+                              </Body>
+                            </Layout>
+                          </div>
+                        {:else if embedNoScreens}
+                          <div class="error">
+                            <Layout justifyItems="center" gap="S">
+                              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                              {@html ErrorSVG}
+                              <Heading size="L">
+                                This Budibase app is not publicly accessible
+                              </Heading>
+                            </Layout>
+                          </div>
+                        {:else}
+                          <CustomThemeWrapper>
+                            {#key $screenStore.activeLayout._id}
+                              <Component
+                                isLayout
+                                instance={$screenStore.activeLayout.props}
+                              />
+                            {/key}
+
+                            <!-- Modal container to ensure they sit on top -->
+                            <div class="modal-container" />
+
+                            <!-- Layers on top of app -->
+                            <NotificationDisplay />
+                            <ConfirmationDisplay />
+                            <PeekScreenDisplay />
+                          </CustomThemeWrapper>
+                        {/if}
+
+                        {#if showDevTools}
+                          <DevTools />
+                        {/if}
+                      </div>
+
+                      {#if !$builderStore.inBuilder && $featuresStore.logoEnabled}
+                        <FreeFooter />
                      {/if}
                    </div>

-                    {#if !$builderStore.inBuilder && $featuresStore.logoEnabled}
-                      <FreeFooter />
+                    <!-- Preview and dev tools utilities  -->
+                    {#if $appStore.isDevApp}
+                      <SelectionIndicator />
+                    {/if}
+                    {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
+                      <HoverIndicator />
+                    {/if}
+                    {#if $builderStore.inBuilder}
+                      <DNDHandler />
+                      <GridDNDHandler />
                    {/if}
                  </div>
-
-                  <!-- Preview and dev tools utilities  -->
-                  {#if $appStore.isDevApp}
-                    <SelectionIndicator />
-                  {/if}
-                  {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
-                    <HoverIndicator />
-                  {/if}
-                  {#if $builderStore.inBuilder}
-                    <DNDHandler />
-                    <GridDNDHandler />
-                  {/if}
-                </div>
-              </SnippetsProvider>
-            </QueryParamsProvider>
-          </RowSelectionProvider>
-        </StateBindingsProvider>
-      </UserBindingsProvider>
-    </DeviceBindingsProvider>
-  {/if}
-</div>
-<KeyboardManager />
+                </SnippetsProvider>
+              </QueryParamsProvider>
+            </RowSelectionProvider>
+          </StateBindingsProvider>
+        </UserBindingsProvider>
+      </DeviceBindingsProvider>
+    {/if}
+  </div>
+  <KeyboardManager />
+{/if}

 <style>
  #spectrum-root {
--- a/packages/client/src/components/CustomThemeWrapper.svelte
+++ b/packages/client/src/components/CustomThemeWrapper.svelte
@ -60,16 +60,6 @@
    --spectrum-link-primary-m-text-color-hover: var(--primaryColorHover);
  }

-  /* Theme flatpickr */
-  :global(.flatpickr-day.selected) {
-    background: var(--primaryColor);
-    border-color: var(--primaryColor);
-  }
-  :global(.flatpickr-day.selected:hover) {
-    background: var(--primaryColorHover);
-    border-color: var(--primaryColorHover);
-  }
-
  /* Custom scrollbars */
  :global(::-webkit-scrollbar) {
    width: 8px;
--- a/packages/client/src/components/app/DateRangePicker.svelte
+++ b/packages/client/src/components/app/DateRangePicker.svelte
@ -38,10 +38,8 @@
    if (!field || !value) {
      return null
    }
-
    let low = dayjs.utc().subtract(1, "year")
    let high = dayjs.utc().add(1, "day")
-
    if (value === "Last 1 day") {
      low = dayjs.utc().subtract(1, "day")
    } else if (value === "Last 7 days") {
@ -53,7 +51,6 @@
    } else if (value === "Last 6 months") {
      low = dayjs.utc().subtract(6, "months")
    }
-
    return {
      range: {
        [field]: {
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@ -11,6 +11,7 @@
  export let allowEditRows = true
  export let allowDeleteRows = true
  export let stripeRows = false
+  export let quiet = false
  export let initialFilter = null
  export let initialSortColumn = null
  export let initialSortOrder = null
@ -51,6 +52,8 @@
      metadata: { dataSource: table },
    },
  ]
+  $: height = $component.styles?.normal?.height || "408px"
+  $: styles = getSanitisedStyles($component.styles)

  // Provide additional data context for live binding eval
  export const getAdditionalDataContext = () => {
@ -107,39 +110,48 @@
      },
    }))
  }
+
+  const getSanitisedStyles = styles => {
+    return {
+      ...styles,
+      normal: {
+        ...styles?.normal,
+        height: undefined,
+      },
+    }
+  }
 </script>

-<div
-  use:styleable={$component.styles}
-  class:in-builder={$builderStore.inBuilder}
->
-  <Provider {actions}>
-    <Grid
-      bind:this={grid}
-      datasource={table}
-      {darkMode}
-      {API}
-      {stripeRows}
-      {initialFilter}
-      {initialSortColumn}
-      {initialSortOrder}
-      {fixedRowHeight}
-      {columnWhitelist}
-      {schemaOverrides}
-      {repeat}
-      canAddRows={allowAddRows}
-      canEditRows={allowEditRows}
-      canDeleteRows={allowDeleteRows}
-      canEditColumns={false}
-      canExpandRows={false}
-      canSaveSchema={false}
-      showControls={false}
-      notifySuccess={notificationStore.actions.success}
-      notifyError={notificationStore.actions.error}
-      buttons={enrichedButtons}
-      on:rowclick={e => onRowClick?.({ row: e.detail })}
-    />
-  </Provider>
+<div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
+  <span style="--height:{height};">
+    <Provider {actions}>
+      <Grid
+        bind:this={grid}
+        datasource={table}
+        {API}
+        {stripeRows}
+        {quiet}
+        {initialFilter}
+        {initialSortColumn}
+        {initialSortOrder}
+        {fixedRowHeight}
+        {columnWhitelist}
+        {schemaOverrides}
+        {repeat}
+        canAddRows={allowAddRows}
+        canEditRows={allowEditRows}
+        canDeleteRows={allowDeleteRows}
+        canEditColumns={false}
+        canExpandRows={false}
+        canSaveSchema={false}
+        showControls={false}
+        notifySuccess={notificationStore.actions.success}
+        notifyError={notificationStore.actions.error}
+        buttons={enrichedButtons}
+        on:rowclick={e => onRowClick?.({ row: e.detail })}
+      />
+    </Provider>
+  </span>
 </div>

 <style>
@ -150,10 +162,14 @@
    border: 1px solid var(--spectrum-global-color-gray-300);
    border-radius: 4px;
    overflow: hidden;
-    min-height: 230px;
-    height: 410px;
  }
  div.in-builder :global(*) {
    pointer-events: none;
  }
+  span {
+    display: contents;
+  }
+  span :global(.grid) {
+    height: var(--height);
+  }
 </style>
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@ -73,7 +73,10 @@
    $context.device.width,
    $context.device.height
  )
-  $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open
+  $: autoCloseSidePanel =
+    !$builderStore.inBuilder &&
+    $sidePanelStore.open &&
+    !$sidePanelStore.ignoreClicksOutside
  $: screenId = $builderStore.inBuilder
    ? `${$builderStore.screen?._id}-screen`
    : "screen"
@ -191,6 +194,11 @@
    }
    return url
  }
+
+  const handleClickLink = () => {
+    mobileOpen = false
+    sidePanelStore.actions.close()
+  }
 </script>

 <!-- svelte-ignore a11y-no-static-element-interactions -->
@ -281,7 +289,7 @@
                    url={navItem.url}
                    subLinks={navItem.subLinks}
                    internalLink={navItem.internalLink}
-                    on:clickLink={() => (mobileOpen = false)}
+                    on:clickLink={handleClickLink}
                    leftNav={navigation === "Left"}
                    {mobile}
                    {navStateStore}
@ -316,10 +324,7 @@
  <div
    id="side-panel-container"
    class:open={$sidePanelStore.open}
-    use:clickOutside={{
-      callback: autoCloseSidePanel ? sidePanelStore.actions.close : null,
-      allowedType: "mousedown",
-    }}
+    use:clickOutside={autoCloseSidePanel ? sidePanelStore.actions.close : null}
    class:builder={$builderStore.inBuilder}
  >
    <div class="side-panel-header">
--- a/packages/client/src/components/app/SidePanel.svelte
+++ b/packages/client/src/components/app/SidePanel.svelte
@ -5,6 +5,9 @@
  const { styleable, sidePanelStore, builderStore, dndIsDragging } =
    getContext("sdk")

+  export let onClose
+  export let ignoreClicksOutside
+
  // Automatically show and hide the side panel when inside the builder.
  // For some unknown reason, svelte reactivity breaks if we reference the
  // reactive variable "open" inside the following expression, or if we define
@ -26,6 +29,10 @@
    }
  }

+  // $: {
+
+  // }
+
  // Derive visibility
  $: open = $sidePanelStore.contentId === $component.id

@ -36,10 +43,17 @@
  let renderKey = null
  $: {
    if (open) {
+      sidePanelStore.actions.setIgnoreClicksOutside(ignoreClicksOutside)
      renderKey = Math.random()
    }
  }

+  const handleSidePanelClose = async () => {
+    if (onClose) {
+      await onClose()
+    }
+  }
+
  const showInSidePanel = (el, visible) => {
    const update = visible => {
      const target = document.getElementById("side-panel-container")
@ -51,6 +65,7 @@
      } else {
        if (target.contains(node)) {
          target.removeChild(node)
+          handleSidePanelClose()
        }
      }
    }
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@ -49,7 +49,6 @@
      readonly={fieldState.readonly}
      error={fieldState.error}
      id={fieldState.fieldId}
-      appendTo={document.getElementById("flatpickr-root")}
      {enableTime}
      {timeOnly}
      {time24hr}
--- a/packages/client/src/components/app/forms/validation.js
+++ b/packages/client/src/components/app/forms/validation.js
@ -1,5 +1,6 @@
-import flatpickr from "flatpickr"
+import dayjs from "dayjs"
 import { FieldTypes } from "../../../constants"
+import { Helpers } from "@budibase/bbui"

 /**
 * Creates a validation function from a combination of schema-level constraints
@ -81,7 +82,7 @@ export const createValidatorFromConstraints = (
    // Date constraint
    if (exists(schemaConstraints.datetime?.earliest)) {
      const limit = schemaConstraints.datetime.earliest
-      const limitString = flatpickr.formatDate(new Date(limit), "F j Y, H:i")
+      const limitString = Helpers.getDateDisplayValue(dayjs(limit))
      rules.push({
        type: "datetime",
        constraint: "minValue",
@ -91,7 +92,7 @@ export const createValidatorFromConstraints = (
    }
    if (exists(schemaConstraints.datetime?.latest)) {
      const limit = schemaConstraints.datetime.latest
-      const limitString = flatpickr.formatDate(new Date(limit), "F j Y, H:i")
+      const limitString = Helpers.getDateDisplayValue(dayjs(limit))
      rules.push({
        type: "datetime",
        constraint: "maxValue",
--- a/packages/client/src/stores/sidePanel.js
+++ b/packages/client/src/stores/sidePanel.js
@ -3,6 +3,7 @@ import { writable, derived } from "svelte/store"
 export const createSidePanelStore = () => {
  const initialState = {
    contentId: null,
+    ignoreClicksOutside: true,
  }
  const store = writable(initialState)
  const derivedStore = derived(store, $store => {
@ -32,11 +33,18 @@ export const createSidePanelStore = () => {
    }, 50)
  }

+  const setIgnoreClicksOutside = bool => {
+    store.update(state => {
+      state.ignoreClicksOutside = bool
+      return state
+    })
+  }
  return {
    subscribe: derivedStore.subscribe,
    actions: {
      open,
      close,
+      setIgnoreClicksOutside,
    },
  }
 }
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@ -240,6 +240,7 @@ const triggerAutomationHandler = async action => {
 const navigationHandler = action => {
  const { url, peek, externalNewTab } = action.parameters
  routeStore.actions.navigate(url, peek, externalNewTab)
+  closeSidePanelHandler()
 }

 const queryExecutionHandler = async action => {
@ -541,16 +542,22 @@ export const enrichButtonActions = (actions, context) => {
                // then execute the rest of the actions in the chain
                const result = await callback()
                if (result !== false) {
-                  // Generate a new total context to pass into the next enrichment
+                  // Generate a new total context for the next enrichment
                  buttonContext.push(result)
                  const newContext = { ...context, actions: buttonContext }

-                  // Enrich and call the next button action if there is more than one action remaining
+                  // Enrich and call the next button action if there is more
+                  // than one action remaining
                  const next = enrichButtonActions(
                    actions.slice(i + 1),
                    newContext
                  )
-                  resolve(typeof next === "function" ? await next() : true)
+                  if (typeof next === "function") {
+                    // Pass the event context back into the new action chain
+                    resolve(await next(eventContext))
+                  } else {
+                    resolve(true)
+                  }
                } else {
                  resolve(false)
                }
--- a/packages/frontend-core/src/api/backups.js
+++ b/packages/frontend-core/src/api/backups.js
@ -1,7 +1,4 @@
 export const buildBackupsEndpoints = API => ({
-  /**
-   * Gets a list of users in the current tenant.
-   */
  searchBackups: async ({ appId, trigger, type, page, startDate, endDate }) => {
    const opts = {}
    if (page) {
--- a/packages/frontend-core/src/components/FilterBuilder.svelte
+++ b/packages/frontend-core/src/components/FilterBuilder.svelte
@ -67,6 +67,11 @@

  const removeFilter = id => {
    filters = filters.filter(field => field.id !== id)
+
+    // Clear all filters when no fields are specified
+    if (filters.length === 1 && filters[0].onEmptyFilter) {
+      filters = []
+    }
  }

  const duplicateFilter = id => {
@ -119,6 +124,7 @@
    const fieldSchema = schemaFields.find(x => x.name === filter.field)
    filter.type = fieldSchema?.type
    filter.subtype = fieldSchema?.subtype
+    filter.formulaType = fieldSchema?.formulaType

    // Update external type based on field
    filter.externalType = getSchema(filter)?.externalType
--- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@ -1,6 +1,7 @@
 <script>
  import { onMount, getContext } from "svelte"
  import { Dropzone } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"

  export let value
  export let focused = false
@ -8,7 +9,6 @@
  export let readonly = false
  export let api
  export let invertX = false
-  export let invertY = false
  export let schema
  export let maximum

@ -16,6 +16,7 @@
  const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]

  let isOpen = false
+  let anchor

  $: editable = focused && !readonly
  $: {
@ -73,7 +74,12 @@

 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="attachment-cell" class:editable on:click={editable ? open : null}>
+<div
+  class="attachment-cell"
+  class:editable
+  on:click={editable ? open : null}
+  bind:this={anchor}
+>
  {#each value || [] as attachment}
    {#if isImage(attachment.extension)}
      <img src={attachment.url} alt={attachment.extension} />
@ -86,16 +92,24 @@
 </div>

 {#if isOpen}
-  <div class="dropzone" class:invertX class:invertY>
-    <Dropzone
-      {value}
-      compact
-      on:change={e => onChange(e.detail)}
-      maximum={maximum || schema.constraints?.length?.maximum}
-      {processFiles}
-      {handleFileTooLarge}
-    />
-  </div>
+  <GridPopover
+    open={isOpen}
+    {anchor}
+    {invertX}
+    maxHeight={null}
+    on:close={close}
+  >
+    <div class="dropzone">
+      <Dropzone
+        {value}
+        compact
+        on:change={e => onChange(e.detail)}
+        maximum={maximum || schema.constraints?.length?.maximum}
+        {processFiles}
+        {handleFileTooLarge}
+      />
+    </div>
+  </GridPopover>
 {/if}

 <style>
@ -129,23 +143,8 @@
    user-select: none;
  }
  .dropzone {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 320px;
    background: var(--grid-background-alt);
-    border: var(--cell-border);
+    width: 320px;
    padding: var(--cell-padding);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-  }
-  .dropzone.invertX {
-    left: auto;
-    right: 0;
-  }
-  .dropzone.invertY {
-    transform: translateY(-100%);
-    top: 0;
  }
 </style>
--- a/packages/frontend-core/src/components/grid/cells/BBReferenceCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/BBReferenceCell.svelte
@ -1,7 +1,7 @@
 <script>
  import { getContext } from "svelte"
  import RelationshipCell from "./RelationshipCell.svelte"
-  import { FieldSubtype, RelationshipType } from "@budibase/types"
+  import { BBReferenceFieldSubType, RelationshipType } from "@budibase/types"

  export let api

@ -13,13 +13,16 @@
    // This is not really used, just adding some content to be able to render the relationship cell
    tableId: "external",
    relationshipType:
-      subtype === FieldSubtype.USER
+      subtype === BBReferenceFieldSubType.USER
        ? RelationshipType.ONE_TO_MANY
        : RelationshipType.MANY_TO_MANY,
  }

  async function searchFunction(searchParams) {
-    if (subtype !== FieldSubtype.USER && subtype !== FieldSubtype.USERS) {
+    if (
+      subtype !== BBReferenceFieldSubType.USER &&
+      subtype !== BBReferenceFieldSubType.USERS
+    ) {
      throw `Search for '${subtype}' not implemented`
    }

--- a/packages/frontend-core/src/components/grid/cells/DateCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DateCell.svelte
@ -1,7 +1,8 @@
 <script>
-  import dayjs from "dayjs"
-  import { CoreDatePicker, Icon } from "@budibase/bbui"
+  import { CoreDatePickerPopoverContents, Icon, Helpers } from "@budibase/bbui"
  import { onMount } from "svelte"
+  import dayjs from "dayjs"
+  import GridPopover from "../overlays/GridPopover.svelte"

  export let value
  export let schema
@ -9,83 +10,117 @@
  export let focused = false
  export let readonly = false
  export let api
+  export let invertX = false

-  let flatpickr
  let isOpen
+  let anchor

-  // Adding the 0- will turn a string like 00:00:00 into a valid ISO
-  // date, but will make actual ISO dates invalid
-  $: isTimeValue = !isNaN(new Date(`0-${value}`))
-  $: timeOnly = isTimeValue || schema?.timeOnly
-  $: dateOnly = schema?.dateOnly
-  $: format = timeOnly
-    ? "HH:mm:ss"
-    : dateOnly
-    ? "MMM D YYYY"
-    : "MMM D YYYY, HH:mm"
+  $: timeOnly = schema?.timeOnly
+  $: enableTime = !schema?.dateOnly
+  $: ignoreTimezones = schema?.ignoreTimezones
  $: editable = focused && !readonly
-  $: displayValue = getDisplayValue(value, format, timeOnly, isTimeValue)
-
-  const getDisplayValue = (value, format, timeOnly, isTimeValue) => {
-    if (!value) {
-      return ""
-    }
-    // Parse full date strings
-    if (!timeOnly || !isTimeValue) {
-      return dayjs(value).format(format)
-    }
-    // Otherwise must be a time string
-    return dayjs(`0-${value}`).format(format)
-  }
-
-  // Ensure we close flatpickr when unselected
+  $: parsedValue = Helpers.parseDate(value, {
+    timeOnly,
+    enableTime,
+    ignoreTimezones,
+  })
+  $: displayValue = getDisplayValue(parsedValue, timeOnly, enableTime)
+  // Ensure open state matches desired state
  $: {
-    if (!focused) {
-      flatpickr?.close()
+    if (!focused && isOpen) {
+      close()
    }
  }

-  const onKeyDown = () => {
-    return isOpen
+  const getDisplayValue = (value, timeOnly, enableTime) => {
+    return Helpers.getDateDisplayValue(value, {
+      enableTime,
+      timeOnly,
+    })
+  }
+
+  const open = () => {
+    isOpen = true
+  }
+
+  const close = () => {
+    isOpen = false
+
+    // Only save the changed value when closing. If the value is unchanged then
+    // this is handled upstream and no action is taken.
+    onChange(value)
+  }
+
+  const onKeyDown = e => {
+    if (!isOpen) {
+      return false
+    }
+    e.preventDefault()
+    if (e.key === "ArrowUp") {
+      changeDate(-1, "week")
+    } else if (e.key === "ArrowDown") {
+      changeDate(1, "week")
+    } else if (e.key === "ArrowLeft") {
+      changeDate(-1, "day")
+    } else if (e.key === "ArrowRight") {
+      changeDate(1, "day")
+    } else if (e.key === "Enter") {
+      close()
+    }
+    return true
+  }
+
+  const changeDate = (quantity, unit) => {
+    let newValue
+    if (!value) {
+      newValue = dayjs()
+    } else {
+      newValue = dayjs(value).add(quantity, unit)
+    }
+    value = Helpers.stringifyDate(newValue, {
+      enableTime,
+      timeOnly,
+      ignoreTimezones,
+    })
  }

  onMount(() => {
    api = {
      onKeyDown,
-      focus: () => flatpickr?.open(),
-      blur: () => flatpickr?.close(),
+      focus: open,
+      blur: close,
      isActive: () => isOpen,
    }
  })
 </script>

-<div class="container">
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="container"
+  class:editable
+  on:click={editable ? open : null}
+  bind:this={anchor}
+>
  <div class="value">
-    {#if value}
-      {displayValue}
-    {/if}
+    {displayValue}
  </div>
  {#if editable}
    <Icon name="Calendar" />
  {/if}
 </div>

-{#if editable}
-  <div class="picker">
-    <CoreDatePicker
-      {value}
-      on:change={e => onChange(e.detail)}
-      appendTo={document.documentElement}
-      enableTime={!dateOnly}
-      {timeOnly}
-      time24hr
-      ignoreTimezones={schema.ignoreTimezones}
-      bind:flatpickr
-      on:open={() => (isOpen = true)}
-      on:close={() => (isOpen = false)}
+{#if isOpen}
+  <GridPopover {anchor} {invertX} maxHeight={null} on:close={close}>
+    <CoreDatePickerPopoverContents
+      value={parsedValue}
      useKeyboardShortcuts={false}
+      on:change={e => (value = e.detail)}
+      {enableTime}
+      {timeOnly}
+      {ignoreTimezones}
    />
-  </div>
+  </GridPopover>
 {/if}

 <style>
@ -97,6 +132,10 @@
    align-items: center;
    flex: 1 1 auto;
    gap: var(--cell-spacing);
+    user-select: none;
+  }
+  .container.editable:hover {
+    cursor: pointer;
  }
  .value {
    flex: 1 1 auto;
@ -105,15 +144,6 @@
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 20px;
-  }
-  .picker {
-    position: absolute;
-    opacity: 0;
-  }
-  .picker :global(.flatpickr) {
-    min-width: 0;
-  }
-  .picker :global(.spectrum-Textfield-input) {
-    width: 100%;
+    height: 20px;
  }
 </style>
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@ -43,6 +43,9 @@
  on:mouseup
  on:click
  on:contextmenu
+  on:touchstart
+  on:touchend
+  on:touchcancel
  {style}
 >
  {#if error}
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@ -1,30 +1,22 @@
 <script>
  import { getContext, onMount, tick } from "svelte"
  import { canBeDisplayColumn, canBeSortColumn } from "@budibase/shared-core"
-  import {
-    Icon,
-    Popover,
-    Menu,
-    MenuItem,
-    clickOutside,
-    Modal,
-  } from "@budibase/bbui"
+  import { Icon, Menu, MenuItem, Modal } from "@budibase/bbui"
  import GridCell from "./GridCell.svelte"
  import { getColumnIcon } from "../lib/utils"
  import MigrationModal from "../controls/MigrationModal.svelte"
  import { debounce } from "../../../utils/utils"
  import { FieldType, FormulaType } from "@budibase/types"
  import { TableNames } from "../../../constants"
+  import GridPopover from "../overlays/GridPopover.svelte"

  export let column
  export let idx
-  export let orderable = true

  const {
    reorder,
    isReordering,
    isResizing,
-    rand,
    sort,
    visibleColumns,
    dispatch,
@ -53,7 +45,6 @@
  let open = false
  let editIsOpen = false
  let timeout
-  let popover
  let migrationModal
  let searchValue
  let input
@ -66,6 +57,12 @@
  $: resetSearchValue(column.name)
  $: searching = searchValue != null
  $: debouncedUpdateFilter(searchValue)
+  $: orderable = !column.primaryDisplay
+
+  const close = () => {
+    open = false
+    editIsOpen = false
+  }

  const getSortingLabels = type => {
    switch (type) {
@ -106,29 +103,32 @@
    dispatch("edit-column", column.schema)
  }

-  const cancelEdit = () => {
-    popover.hide()
-    editIsOpen = false
-  }
-
  const onMouseDown = e => {
-    if (e.button === 0 && orderable) {
+    ui.actions.blur()
+    if ((e.touches?.length || e.button === 0) && orderable) {
      timeout = setTimeout(() => {
        reorder.actions.startReordering(column.name, e)
      }, 200)
    }
  }

-  const onMouseUp = e => {
-    if (e.button === 0 && orderable) {
+  const onMouseUp = () => {
+    if (timeout) {
      clearTimeout(timeout)
+      timeout = null
    }
  }

  const onContextMenu = e => {
    e.preventDefault()
-    ui.actions.blur()
-    open = !open
+
+    // The timeout allows time for clickoutside to close other open popvers
+    // before we show this one. Without the timeout, this popover closes again
+    // before it's even visible as clickoutside closes it.
+    setTimeout(() => {
+      ui.actions.blur()
+      open = !open
+    }, 10)
  }

  const sortAscending = () => {
@ -236,7 +236,7 @@
  }
  const debouncedUpdateFilter = debounce(updateFilter, 250)

-  onMount(() => subscribe("close-edit-column", cancelEdit))
+  onMount(() => subscribe("close-edit-column", close))
 </script>

 <Modal bind:this={migrationModal}>
@ -258,6 +258,9 @@
  <GridCell
    on:mousedown={onMouseDown}
    on:mouseup={onMouseUp}
+    on:touchstart={onMouseDown}
+    on:touchend={onMouseUp}
+    on:touchcancel={onMouseUp}
    on:contextmenu={onContextMenu}
    width={column.width}
    left={column.left}
@ -310,88 +313,88 @@
  </GridCell>
 </div>

-<Popover
-  bind:open
-  bind:this={popover}
-  {anchor}
-  align="right"
-  offset={0}
-  popoverTarget={document.getElementById(`grid-${rand}`)}
-  customZindex={50}
->
-  {#if editIsOpen}
-    <div
-      use:clickOutside={() => {
-        editIsOpen = false
-      }}
-      class="content"
-    >
-      <slot />
-    </div>
-  {:else}
-    <Menu>
-      <MenuItem
-        icon="Edit"
-        on:click={editColumn}
-        disabled={!$config.canEditColumns || column.schema.disabled}
-      >
-        Edit column
-      </MenuItem>
-      <MenuItem
-        icon="Duplicate"
-        on:click={duplicateColumn}
-        disabled={!$config.canEditColumns}
-      >
-        Duplicate column
-      </MenuItem>
-      <MenuItem
-        icon="Label"
-        on:click={makeDisplayColumn}
-        disabled={idx === "sticky" || !canBeDisplayColumn(column.schema.type)}
-      >
-        Use as display column
-      </MenuItem>
-      <MenuItem
-        icon="SortOrderUp"
-        on:click={sortAscending}
-        disabled={!canBeSortColumn(column.schema.type) ||
-          (column.name === $sort.column && $sort.order === "ascending")}
-      >
-        Sort {sortingLabels.ascending}
-      </MenuItem>
-      <MenuItem
-        icon="SortOrderDown"
-        on:click={sortDescending}
-        disabled={!canBeSortColumn(column.schema.type) ||
-          (column.name === $sort.column && $sort.order === "descending")}
-      >
-        Sort {sortingLabels.descending}
-      </MenuItem>
-      <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
-        Move left
-      </MenuItem>
-      <MenuItem
-        disabled={!canMoveRight}
-        icon="ChevronRight"
-        on:click={moveRight}
-      >
-        Move right
-      </MenuItem>
-      <MenuItem
-        disabled={idx === "sticky" || !$config.showControls}
-        icon="VisibilityOff"
-        on:click={hideColumn}
-      >
-        Hide column
-      </MenuItem>
-      {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS}
-        <MenuItem icon="User" on:click={openMigrationModal}>
-          Migrate to user column
+{#if open}
+  <GridPopover
+    {anchor}
+    align="right"
+    on:close={close}
+    maxHeight={null}
+    resizable
+  >
+    {#if editIsOpen}
+      <div class="content">
+        <slot />
+      </div>
+    {:else}
+      <Menu>
+        <MenuItem
+          icon="Edit"
+          on:click={editColumn}
+          disabled={!$config.canEditColumns || column.schema.disabled}
+        >
+          Edit column
        </MenuItem>
-      {/if}
-    </Menu>
-  {/if}
-</Popover>
+        <MenuItem
+          icon="Duplicate"
+          on:click={duplicateColumn}
+          disabled={!$config.canEditColumns}
+        >
+          Duplicate column
+        </MenuItem>
+        <MenuItem
+          icon="Label"
+          on:click={makeDisplayColumn}
+          disabled={column.primaryDisplay ||
+            !canBeDisplayColumn(column.schema.type)}
+        >
+          Use as display column
+        </MenuItem>
+        <MenuItem
+          icon="SortOrderUp"
+          on:click={sortAscending}
+          disabled={!canBeSortColumn(column.schema.type) ||
+            (column.name === $sort.column && $sort.order === "ascending")}
+        >
+          Sort {sortingLabels.ascending}
+        </MenuItem>
+        <MenuItem
+          icon="SortOrderDown"
+          on:click={sortDescending}
+          disabled={!canBeSortColumn(column.schema.type) ||
+            (column.name === $sort.column && $sort.order === "descending")}
+        >
+          Sort {sortingLabels.descending}
+        </MenuItem>
+        <MenuItem
+          disabled={!canMoveLeft}
+          icon="ChevronLeft"
+          on:click={moveLeft}
+        >
+          Move left
+        </MenuItem>
+        <MenuItem
+          disabled={!canMoveRight}
+          icon="ChevronRight"
+          on:click={moveRight}
+        >
+          Move right
+        </MenuItem>
+        <MenuItem
+          disabled={column.primaryDisplay || !$config.showControls}
+          icon="VisibilityOff"
+          on:click={hideColumn}
+        >
+          Hide column
+        </MenuItem>
+        {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS}
+          <MenuItem icon="User" on:click={openMigrationModal}>
+            Migrate to user column
+          </MenuItem>
+        {/if}
+      </Menu>
+    {/if}
+  </GridPopover>
+{/if}

 <style>
  .header-cell {
@ -485,7 +488,7 @@
  }

  .content {
-    width: 300px;
+    width: 360px;
    padding: 20px;
    display: flex;
    flex-direction: column;
--- a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
@ -1,6 +1,7 @@
 <script>
  import { onMount, tick } from "svelte"
  import { clickOutside } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"

  export let value
  export let focused = false
@ -8,10 +9,10 @@
  export let readonly = false
  export let api
  export let invertX = false
-  export let invertY = false

  let textarea
  let isOpen = false
+  let anchor

  $: editable = focused && !readonly
  $: {
@ -52,25 +53,30 @@
  })
 </script>

-{#if isOpen}
-  <textarea
-    class:invertX
-    class:invertY
-    bind:this={textarea}
-    value={value || ""}
-    on:change={handleChange}
-    on:wheel|stopPropagation
-    spellcheck="false"
-    use:clickOutside={close}
-  />
-{:else}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="long-form-cell" on:click={editable ? open : null} class:editable>
-    <div class="value">
-      {value || ""}
-    </div>
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="long-form-cell"
+  on:click={editable ? open : null}
+  class:editable
+  bind:this={anchor}
+>
+  <div class="value">
+    {value || ""}
  </div>
+</div>
+
+{#if isOpen}
+  <GridPopover {anchor} {invertX} on:close={close}>
+    <textarea
+      bind:this={textarea}
+      value={value || ""}
+      on:change={handleChange}
+      on:wheel|stopPropagation
+      spellcheck="false"
+      use:clickOutside={close}
+    />
+  </GridPopover>
 {/if}

 <style>
@ -93,30 +99,20 @@
    line-height: 20px;
  }
  textarea {
+    border: none;
+    width: 320px;
+    flex: 1 1 auto;
+    height: var(--max-cell-render-overflow);
    padding: var(--cell-padding);
    margin: 0;
-    border: 2px solid var(--cell-color);
    background: var(--cell-background);
    font-size: var(--cell-font-size);
    font-family: var(--font-sans);
    color: inherit;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100% + var(--max-cell-render-width-overflow));
-    height: calc(var(--row-height) + var(--max-cell-render-height));
    z-index: 1;
-    border-radius: 2px;
    resize: none;
    line-height: 20px;
-  }
-  textarea.invertX {
-    left: auto;
-    right: 0;
-  }
-  textarea.invertY {
-    transform: translateY(-100%);
-    top: calc(100% + 1px);
+    overflow: auto;
  }
  textarea:focus {
    outline: none;
--- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
@ -1,7 +1,8 @@
 <script>
-  import { Icon, clickOutside } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
  import { getColor } from "../lib/utils"
  import { onMount } from "svelte"
+  import GridPopover from "../overlays/GridPopover.svelte"

  export let value
  export let schema
@ -10,12 +11,12 @@
  export let multi = false
  export let readonly = false
  export let api
-  export let invertX = false
-  export let invertY = false
+  export let invertX
  export let contentLines = 1

  let isOpen = false
  let focusedOptionIdx = null
+  let anchor

  $: options = schema?.constraints?.inclusion || []
  $: optionColors = schema?.optionColors || {}
@ -23,7 +24,7 @@
  $: values = Array.isArray(value) ? value : [value].filter(x => x != null)
  $: {
    // Close when deselected
-    if (!focused) {
+    if (!focused && isOpen) {
      close()
    }
  }
@ -89,6 +90,7 @@
  class:editable
  class:open
  on:click|self={editable ? open : null}
+  bind:this={anchor}
 >
  <div
    class="values"
@ -115,16 +117,15 @@
      <Icon name="ChevronDown" />
    </div>
  {/if}
-  {#if isOpen}
-    <div
-      class="options"
-      class:invertX
-      class:invertY
-      on:wheel={e => e.stopPropagation()}
-      use:clickOutside={close}
-    >
+</div>
+
+{#if isOpen}
+  <GridPopover {anchor} {invertX} on:close={close}>
+    <div class="options">
      {#each options as option, idx}
        {@const color = optionColors[option] || getOptionColor(option)}
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
        <div
          class="option"
          on:click={() => toggleOption(option)}
@ -132,7 +133,9 @@
          on:mouseenter={() => (focusedOptionIdx = idx)}
        >
          <div class="badge text" style="--color: {color}">
-            {option}
+            <span>
+              {option}
+            </span>
          </div>
          {#if values.includes(option)}
            <Icon name="Checkmark" color="var(--accent-color)" />
@ -140,8 +143,8 @@
        </div>
      {/each}
    </div>
-  {/if}
-</div>
+  </GridPopover>
+{/if}

 <style>
  .container {
@ -211,28 +214,10 @@
    );
  }
  .options {
-    min-width: calc(100% + 2px);
-    position: absolute;
-    top: 100%;
-    left: -1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
-    max-height: var(--max-cell-render-height);
-    overflow-y: auto;
-    border: var(--cell-border);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-  }
-  .options.invertX {
-    left: auto;
-    right: 0;
-  }
-  .options.invertY {
-    transform: translateY(-100%);
-    top: 0;
  }
  .option {
    flex: 0 0 var(--default-row-height);
@ -242,10 +227,10 @@
    justify-content: space-between;
    align-items: center;
    gap: var(--cell-spacing);
-    background-color: var(--grid-background-alt);
  }
  .option:hover,
  .option.focused {
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: var(--grid-background-alt);
+    cursor: pointer;
  }
 </style>
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@ -1,10 +1,11 @@
 <script>
  import { getColor } from "../lib/utils"
  import { onMount, getContext } from "svelte"
-  import { Icon, Input, ProgressCircle, clickOutside } from "@budibase/bbui"
+  import { Icon, Input, ProgressCircle } from "@budibase/bbui"
  import { debounce } from "../../../utils/utils"
+  import GridPopover from "../overlays/GridPopover.svelte"

-  const { API, dispatch, cache } = getContext("grid")
+  const { API, cache } = getContext("grid")

  export let value
  export let api
@ -13,7 +14,6 @@
  export let schema
  export let onChange
  export let invertX = false
-  export let invertY = false
  export let contentLines = 1
  export let searchFunction = API.searchTable
  export let primaryDisplay
@ -27,15 +27,15 @@
  let candidateIndex
  let lastSearchId
  let searching = false
-  let valuesHeight = 0
  let container
+  let anchor

  $: oneRowOnly = schema?.relationshipType === "one-to-many"
  $: editable = focused && !readonly
  $: lookupMap = buildLookupMap(value, isOpen)
  $: debouncedSearch(searchString)
  $: {
-    if (!focused) {
+    if (!focused && isOpen) {
      close()
    }
  }
@ -125,7 +125,6 @@

  const open = async () => {
    isOpen = true
-    valuesHeight = container.getBoundingClientRect().height

    // Find the primary display for the related table
    if (!primaryDisplay) {
@ -204,14 +203,6 @@
    close()
  }

-  const showRelationship = async id => {
-    const relatedRow = await API.fetchRow({
-      tableId: schema.tableId,
-      rowId: id,
-    })
-    dispatch("edit-row", relatedRow)
-  }
-
  const readable = value => {
    if (value == null) {
      return ""
@ -238,8 +229,8 @@
  class="wrapper"
  class:editable
  class:focused
-  class:invertY
  style="--color:{color};"
+  bind:this={anchor}
 >
  <div class="container" bind:this={container}>
    <div
@ -250,11 +241,7 @@
      {#each value || [] as relationship}
        {#if relationship[primaryDisplay] || relationship.primaryDisplay}
          <div class="badge">
-            <span
-              on:click={editable
-                ? () => showRelationship(relationship._id)
-                : null}
-            >
+            <span>
              {readable(
                relationship[primaryDisplay] || relationship.primaryDisplay
              )}
@ -282,16 +269,13 @@
      </div>
    {/if}
  </div>
+</div>

-  {#if isOpen}
-    <div
-      class="dropdown"
-      class:invertX
-      class:invertY
-      on:wheel|stopPropagation
-      use:clickOutside={close}
-      style="--values-height:{valuesHeight}px;"
-    >
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if isOpen}
+  <GridPopover open={isOpen} {anchor} {invertX} on:close={close}>
+    <div class="dropdown" on:wheel|stopPropagation>
      <div class="search">
        <Input
          autofocus
@ -327,8 +311,8 @@
        </div>
      {/if}
    </div>
-  {/if}
-</div>
+  </GridPopover>
+{/if}

 <style>
  .wrapper {
@ -337,7 +321,6 @@
    min-height: var(--row-height);
    max-height: var(--row-height);
    overflow: hidden;
-    --max-relationship-height: 96px;
  }
  .wrapper.focused {
    position: absolute;
@ -349,10 +332,6 @@
    max-height: none;
    overflow: visible;
  }
-  .wrapper.invertY {
-    top: auto;
-    bottom: 0;
-  }

  .container {
    min-height: var(--row-height);
@ -363,7 +342,6 @@
  .focused .container {
    overflow-y: auto;
    border-radius: 2px;
-    max-height: var(--max-relationship-height);
  }
  .focused .container:after {
    content: " ";
@ -426,10 +404,6 @@
    white-space: nowrap;
    text-overflow: ellipsis;
  }
-  .editable .values .badge span:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }

  .add {
    background: var(--spectrum-global-color-gray-200);
@ -446,30 +420,9 @@
  }

  .dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    max-height: calc(
-      var(--max-cell-render-height) + var(--row-height) - var(--values-height)
-    );
-    background: var(--grid-background-alt);
-    border: var(--cell-border);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: stretch;
-    padding: 0 0 8px 0;
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-  }
-  .dropdown.invertY {
-    transform: translateY(-100%);
-    top: -1px;
-  }
-  .dropdown.invertX {
-    left: auto;
-    right: 0;
  }

  .searching {
@ -497,7 +450,8 @@
    cursor: pointer;
  }
  .result .badge {
-    max-width: calc(100% - 30px);
+    flex: 1 1 auto;
+    overflow: hidden;
  }

  .search {
@ -505,7 +459,6 @@
    display: flex;
    align-items: center;
    margin: 4px var(--cell-padding);
-    width: calc(100% - 2 * var(--cell-padding));
  }
  .search :global(.spectrum-Textfield) {
    min-width: 0;
--- a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
@ -81,6 +81,7 @@
          size="S"
          value={column.visible}
          on:change={e => toggleVisibility(column, e.detail)}
+          disabled={column.primaryDisplay}
        />
      {/each}
    </div>
--- a/packages/frontend-core/src/components/grid/controls/MigrationModal.svelte
+++ b/packages/frontend-core/src/components/grid/controls/MigrationModal.svelte
@ -7,7 +7,11 @@
  } from "@budibase/bbui"
  import { getContext } from "svelte"
  import { ValidColumnNameRegex } from "@budibase/shared-core"
-  import { FieldSubtype, FieldType, RelationshipType } from "@budibase/types"
+  import {
+    BBReferenceFieldSubType,
+    FieldType,
+    RelationshipType,
+  } from "@budibase/types"

  const { API, definition, rows } = getContext("grid")

@ -29,9 +33,9 @@
  }

  const migrateUserColumn = async () => {
-    let subtype = FieldSubtype.USERS
+    let subtype = BBReferenceFieldSubType.USERS
    if (column.schema.relationshipType === RelationshipType.ONE_TO_MANY) {
-      subtype = FieldSubtype.USER
+      subtype = BBReferenceFieldSubType.USER
    }

    try {
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@ -10,6 +10,7 @@
  import GridBody from "./GridBody.svelte"
  import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
  import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
+  import PopoverOverlay from "../overlays/PopoverOverlay.svelte"
  import HeaderRow from "./HeaderRow.svelte"
  import ScrollOverlay from "../overlays/ScrollOverlay.svelte"
  import MenuOverlay from "../overlays/MenuOverlay.svelte"
@ -22,10 +23,12 @@
  import NewRow from "./NewRow.svelte"
  import { createGridWebsocket } from "../lib/websocket"
  import {
-    MaxCellRenderHeight,
-    MaxCellRenderWidthOverflow,
+    MaxCellRenderOverflow,
    GutterWidth,
    DefaultRowHeight,
+    Padding,
+    SmallRowHeight,
+    ControlsHeight,
  } from "../lib/constants"

  export let API = null
@ -39,6 +42,7 @@
  export let canEditColumns = true
  export let canSaveSchema = true
  export let stripeRows = false
+  export let quiet = false
  export let collaboration = true
  export let showAvatars = true
  export let showControls = true
@ -52,7 +56,7 @@
  export let darkMode

  // Unique identifier for DOM nodes inside this instance
-  const rand = Math.random()
+  const gridID = `grid-${Math.random().toString().slice(2)}`

  // Store props in a store for reference in other stores
  const props = writable($$props)
@ -60,7 +64,7 @@
  // Build up context
  let context = {
    API: API || createAPIClient(),
-    rand,
+    gridID,
    props,
  }
  context = { ...context, ...createEventManagers() }
@ -92,6 +96,7 @@
    canEditColumns,
    canSaveSchema,
    stripeRows,
+    quiet,
    collaboration,
    showAvatars,
    showControls,
@ -104,6 +109,8 @@
    buttons,
    darkMode,
  })
+  $: minHeight =
+    Padding + SmallRowHeight + $rowHeight + (showControls ? ControlsHeight : 0)

  // Set context for children to consume
  setContext("grid", context)
@ -122,13 +129,14 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
  class="grid"
-  id="grid-{rand}"
+  id={gridID}
  class:is-resizing={$isResizing}
  class:is-reordering={$isReordering}
  class:stripe={stripeRows}
+  class:quiet
  on:mouseenter={() => gridFocused.set(true)}
  on:mouseleave={() => gridFocused.set(false)}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{minHeight}px; --controls-height:{ControlsHeight}px;"
 >
  {#if showControls}
    <div class="controls">
@ -180,6 +188,7 @@
          <ReorderOverlay />
          <ScrollOverlay />
          <MenuOverlay />
+          <PopoverOverlay />
        </div>
      </div>
    </div>
@ -209,7 +218,6 @@
    --cell-spacing: 4px;
    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
    --cell-font-size: 14px;
-    --controls-height: 50px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
@ -218,6 +226,7 @@
    position: relative;
    overflow: hidden;
    background: var(--grid-background);
+    min-height: var(--min-height);
  }
  .grid,
  .grid :global(*) {
@ -333,4 +342,9 @@
  .grid-data-outer :global(.spectrum-Checkbox-partialCheckmark) {
    transition: none;
  }
+
+  /* Overrides */
+  .grid.quiet :global(.grid-data-content .row > .cell:not(:last-child)) {
+    border-right: none;
+  }
 </style>
--- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
@ -12,6 +12,7 @@
    bounds,
    hoveredRowId,
    menu,
+    focusedCellAPI,
  } = getContext("grid")

  export let scrollVertically = false
@ -35,6 +36,9 @@
    e.preventDefault()
    updateScroll(e.deltaX, e.deltaY, e.clientY)

+    // Close any open popovers when scrolling
+    $focusedCellAPI?.blur()
+
    // If a context menu was visible, hide it
    if ($menu.visible) {
      menu.actions.close()
--- a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
@ -1,11 +1,12 @@
 <script>
  import { getContext, onMount } from "svelte"
-  import { Icon, Popover, clickOutside } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"

-  const { visibleColumns, scroll, width, subscribe } = getContext("grid")
+  const { visibleColumns, scroll, width, subscribe, ui } = getContext("grid")

  let anchor
-  let open = false
+  let isOpen = false

  $: columnsWidth = $visibleColumns.reduce(
    (total, col) => (total += col.width),
@ -14,8 +15,13 @@
  $: end = columnsWidth - 1 - $scroll.left
  $: left = Math.min($width - 40, end)

+  const open = () => {
+    ui.actions.blur()
+    isOpen = true
+  }
+
  const close = () => {
-    open = false
+    isOpen = false
  }

  onMount(() => subscribe("close-edit-column", close))
@ -28,27 +34,23 @@
  bind:this={anchor}
  class="add"
  style="left:{left}px"
-  on:click={() => (open = true)}
+  on:click={open}
 >
  <Icon name="Add" />
 </div>
-<Popover
-  bind:open
-  {anchor}
-  align={$visibleColumns.length ? "right" : "left"}
-  offset={0}
-  popoverTarget={document.getElementById(`add-column-button`)}
-  customZindex={50}
->
-  <div
-    use:clickOutside={() => {
-      open = false
-    }}
-    class="content"
+{#if isOpen}
+  <GridPopover
+    {anchor}
+    align={$visibleColumns.length ? "right" : "left"}
+    on:close={close}
+    maxHeight={null}
+    resizable
  >
-    <slot />
-  </div>
-</Popover>
+    <div class="content">
+      <slot />
+    </div>
+  </GridPopover>
+{/if}

 <style>
  .add {
--- a/Show More
+++ b/Show More