Merge from docusealco/wip

fix highlight
cloudflare r2 fix
2026-08-07 07:14:43 +00:00 · 2026-02-23 13:56:04 +02:00 · 2026-02-23 08:31:38 +02:00 · 2026-02-22 20:13:19 +02:00 · 2026-02-22 19:54:06 +02:00 · 2026-02-22 12:15:44 +02:00
381 changed files with 41506 additions and 30183 deletions
@@ -12,7 +12,7 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 3.4.2
+          ruby-version: 4.0.1
      - name: Cache gems
        uses: actions/cache@v4
        with:
@@ -37,7 +37,7 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 3.4.2
+          ruby-version: 4.0.1
      - name: Cache gems
        uses: actions/cache@v4
        with:
@@ -62,7 +62,7 @@ jobs:
      - name: Install Node.js
        uses: actions/setup-node@v1
        with:
-          node-version: 20.9.0
+          node-version: 20.19.0
      - name: Cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -89,7 +89,7 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 3.4.2
+          ruby-version: 4.0.1
      - name: Cache gems
        uses: actions/cache@v4
        with:
@@ -132,11 +132,11 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 3.4.2
+          ruby-version: 4.0.1
      - name: Set up Node
        uses: actions/setup-node@v1
        with:
-          node-version: 20.9.0
+          node-version: 20.19.0
      - name: Install Chrome
        uses: browser-actions/setup-chrome@latest
        with:
@@ -1,27 +1,14 @@
 name: Build Docker Images

 on:
-  workflow_dispatch:
-    inputs:
-      version:
-        description: Version
-        type: string
-        required: true
-      image:
-        description: QEMU image
-        type: string
-        required: false
-        default: tonistiigi/binfmt:latest
-      os:
-        description: OS
-        type: string
-        required: false
-        default: ubuntu-24.04-arm
+  push:
+    tags:
+      - "*.*.*"

 jobs:
  build:
-    runs-on: ${{ inputs.os }}
-    timeout-minutes: 20
+    runs-on: ubuntu-24.04-arm
+    timeout-minutes: 30

    steps:
    - name: Checkout code
@@ -34,18 +21,16 @@ jobs:
      uses: docker/metadata-action@v4
      with:
        images: docuseal/docuseal
-        tags: latest,${{ inputs.version }}
+        tags: type=semver,pattern={{version}}

    - name: Set up QEMU
      uses: docker/setup-qemu-action@v3
-      with:
-        image: ${{ inputs.image }}

    - name: Set up Docker Buildx
      uses: docker/setup-buildx-action@v3

    - name: Create .version file
-      run: echo ${{ inputs.version }} > .version
+      run: echo ${{ github.ref_name }} > .version

    - name: Login to Docker Hub
      uses: docker/login-action@v3
@@ -37,3 +37,4 @@ yarn-debug.log*
 /docuseal
 /ee
 dump.rdb
+*.onnx
@@ -1,4 +1,4 @@
-require:
+plugins:
  - rubocop-performance
  - rubocop-rails
  - rubocop-rspec
@@ -10,7 +10,7 @@ AllCops:
    - node_modules/**/*
    - bin/*
    - vendor/**/*
-  TargetRubyVersion: '3.3'
+  TargetRubyVersion: '4.0'
  SuggestExtensions: false

 Metrics/BlockLength:
@@ -42,6 +42,18 @@ Metrics/CyclomaticComplexity:
 Metrics/PerceivedComplexity:
  Max: 15

+Style/MultipleComparison:
+  Enabled: false
+
+Style/NumericPredicate:
+  Enabled: false
+
+Style/MinMaxComparison:
+  Enabled: false
+
+Naming/PredicateMethod:
+  Enabled: false
+
 Layout/LineLength:
  AllowedPatterns: ['\A\s*#']

@@ -68,8 +80,11 @@ RSpec/ExampleLength:
 RSpec/MultipleMemoizedHelpers:
  Max: 15

+RSpec/AnyInstance:
+  Enabled: false
+
 Metrics/BlockNesting:
-  Max: 5
+  Max: 6

 Rails/I18nLocaleTexts:
  Enabled: false
@@ -85,3 +100,16 @@ Rails/ApplicationController:

 Rails/Output:
  Enabled: false
+
+Rails/StrongParametersExpect:
+  Enabled: false
+
+Rails/RedirectBackOrTo:
+  Enabled: false
+
+Rails/UnknownEnv:
+  Environments:
+    - development
+    - test
+    - production
+    - local
@@ -1,4 +1,4 @@
-FROM ruby:3.4.2-alpine AS download
+FROM ruby:4.0.1-alpine AS download

 WORKDIR /fonts

@@ -9,13 +9,14 @@ RUN apk --no-cache add fontforge wget && \
    wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansSymbols2/hinted/ttf/NotoSansSymbols2-Regular.ttf && \
    wget https://github.com/Maxattax97/gnu-freefont/raw/master/ttf/FreeSans.ttf && \
    wget https://github.com/impallari/DancingScript/raw/master/OFL.txt && \
+    wget -O /model.onnx "https://github.com/docusealco/fields-detection/releases/download/2.0.0/model_704_int8.onnx" && \
    wget -O pdfium-linux.tgz "https://github.com/docusealco/pdfium-binaries/releases/latest/download/pdfium-linux-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz" && \
    mkdir -p /pdfium-linux && \
    tar -xzf pdfium-linux.tgz -C /pdfium-linux

 RUN fontforge -lang=py -c 'font1 = fontforge.open("FreeSans.ttf"); font2 = fontforge.open("NotoSansSymbols2-Regular.ttf"); font1.mergeFonts(font2); font1.generate("FreeSans.ttf")'

-FROM ruby:3.4.2-alpine AS webpack
+FROM ruby:4.0.1-alpine AS webpack

 ENV RAILS_ENV=production
 ENV NODE_ENV=production
@@ -41,16 +42,19 @@ COPY ./app/views ./app/views

 RUN echo "gem 'shakapacker'" > Gemfile && ./bin/shakapacker

-FROM ruby:3.4.2-alpine AS app
+FROM ruby:4.0.1-alpine AS app

 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
 ENV LD_PRELOAD=/lib/libgcompat.so.0
-ENV OPENSSL_CONF=/app/openssl_legacy.cnf
+ENV OPENSSL_CONF=/etc/openssl_legacy.cnf
+ENV VIPS_MAX_COORD=10000

 WORKDIR /app

-RUN echo '@edge https://dl-cdn.alpinelinux.org/alpine/edge/community' >> /etc/apk/repositories && apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev@edge yaml-dev redis libheif@edge vips-heif@edge gcompat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
+RUN apk add --no-cache sqlite-dev libpq-dev vips-dev yaml-dev redis libheif vips-heif gcompat ttf-freefont onnxruntime && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
+
+RUN addgroup -g 2000 docuseal && adduser -u 2000 -G docuseal -s /bin/sh -D -h /home/docuseal docuseal

 RUN echo $'.include = /etc/ssl/openssl.cnf\n\
 \n\
@@ -62,33 +66,36 @@ legacy = legacy_sect\n\
 activate = 1\n\
 \n\
 [legacy_sect]\n\
-activate = 1' >> /app/openssl_legacy.cnf
+activate = 1' >> /etc/openssl_legacy.cnf

-COPY ./Gemfile ./Gemfile.lock ./
+COPY --chown=docuseal:docuseal ./Gemfile ./Gemfile.lock ./

-RUN apk add --no-cache build-base && bundle install && apk del --no-cache build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf
+RUN apk add --no-cache build-base git && bundle install && apk del --no-cache build-base git && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf && ln -sf /usr/lib/libonnxruntime.so.1 $(ruby -e "print Dir[Gem::Specification.find_by_name('onnxruntime').gem_dir + '/vendor/*.so'].first")

-COPY ./bin ./bin
-COPY ./app ./app
-COPY ./config ./config
-COPY ./db/migrate ./db/migrate
-COPY ./log ./log
-COPY ./lib ./lib
-COPY ./public ./public
-COPY ./tmp ./tmp
-COPY LICENSE README.md Rakefile config.ru .version ./
-COPY .version ./public/version
+COPY --chown=docuseal:docuseal ./bin ./bin
+COPY --chown=docuseal:docuseal ./app ./app
+COPY --chown=docuseal:docuseal ./config ./config
+COPY --chown=docuseal:docuseal ./db/migrate ./db/migrate
+COPY --chown=docuseal:docuseal ./log ./log
+COPY --chown=docuseal:docuseal ./lib ./lib
+COPY --chown=docuseal:docuseal ./public ./public
+COPY --chown=docuseal:docuseal ./tmp ./tmp
+COPY --chown=docuseal:docuseal LICENSE README.md Rakefile config.ru .version ./
+COPY --chown=docuseal:docuseal .version ./public/version

-COPY --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts
+COPY --chown=docuseal:docuseal --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts
 COPY --from=download /fonts/FreeSans.ttf /usr/share/fonts/freefont
 COPY --from=download /pdfium-linux/lib/libpdfium.so /usr/lib/libpdfium.so
 COPY --from=download /pdfium-linux/licenses/pdfium.txt /usr/lib/libpdfium-LICENSE.txt
-COPY --from=webpack /app/public/packs ./public/packs
+COPY --chown=docuseal:docuseal --from=download /model.onnx /app/tmp/model.onnx
+COPY --chown=docuseal:docuseal --from=webpack /app/public/packs ./public/packs

-RUN ln -s /fonts /app/public/fonts
-RUN bundle exec bootsnap precompile --gemfile app/ lib/
+RUN ln -s /fonts /app/public/fonts && \
+    bundle exec bootsnap precompile -j 1 --gemfile app/ lib/ && \
+    chown -R docuseal:docuseal /app/tmp/cache

 WORKDIR /data/docuseal
+ENV HOME=/home/docuseal
 ENV WORKDIR=/data/docuseal

 EXPOSE 3000
@@ -2,16 +2,16 @@

 source 'https://rubygems.org'

-ruby '3.4.2'
+ruby '4.0.1'

-gem 'arabic-letter-connector', require: 'arabic-letter-connector/logic'
+gem 'arabic-letter-connector', require: false
 gem 'aws-sdk-s3', require: false
 gem 'aws-sdk-secretsmanager', require: false
-gem 'azure-storage-blob', require: false
+gem 'azure-blob', require: false
 gem 'bootsnap', require: false
 gem 'cancancan'
-gem 'csv'
-gem 'csv-safe'
+gem 'csv', require: false
+gem 'csv-safe', require: false
 gem 'devise'
 gem 'devise-two-factor'
 gem 'dotenv', require: false
@@ -21,10 +21,11 @@ gem 'faraday-follow_redirects'
 gem 'google-cloud-storage', require: false
 gem 'hexapdf'
 gem 'image_processing'
-gem 'jwt'
+gem 'jwt', require: false
 gem 'lograge'
-gem 'mysql2', require: false
+gem 'numo-narray-alt', require: false
 gem 'oj'
+gem 'onnxruntime', require: false
 gem 'pagy'
 gem 'pg', require: false
 gem 'premailer-rails'
@@ -32,17 +33,17 @@ gem 'pretender'
 gem 'puma', require: false
 gem 'rack'
 gem 'rails'
-gem 'rails_autolink'
 gem 'rails-i18n'
 gem 'rotp'
 gem 'rouge', require: false
-gem 'rqrcode'
+gem 'rqrcode', require: false
 gem 'ruby-vips'
-gem 'rubyXL'
+gem 'rubyXL', require: false
 gem 'shakapacker'
 gem 'sidekiq'
 gem 'sqlite3', require: false
 gem 'strip_attributes'
+gem 'trilogy', github: 'trilogy-libraries/trilogy', glob: 'contrib/ruby/*.gemspec', require: false
 gem 'turbo-rails'
 gem 'twitter_cldr', require: false
 gem 'tzinfo-data'
@@ -1,29 +1,39 @@
+GIT
+  remote: https://github.com/trilogy-libraries/trilogy.git
+  revision: 3963d490459df7a2b5bedb42424c3285f25eab22
+  glob: contrib/ruby/*.gemspec
+  specs:
+    trilogy (2.10.0)
+      bigdecimal
+
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (8.0.2.1)
-      actionpack (= 8.0.2.1)
-      activesupport (= 8.0.2.1)
+    action_text-trix (2.1.16)
+      railties
+    actioncable (8.1.2)
+      actionpack (= 8.1.2)
+      activesupport (= 8.1.2)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
      zeitwerk (~> 2.6)
-    actionmailbox (8.0.2.1)
-      actionpack (= 8.0.2.1)
-      activejob (= 8.0.2.1)
-      activerecord (= 8.0.2.1)
-      activestorage (= 8.0.2.1)
-      activesupport (= 8.0.2.1)
+    actionmailbox (8.1.2)
+      actionpack (= 8.1.2)
+      activejob (= 8.1.2)
+      activerecord (= 8.1.2)
+      activestorage (= 8.1.2)
+      activesupport (= 8.1.2)
      mail (>= 2.8.0)
-    actionmailer (8.0.2.1)
-      actionpack (= 8.0.2.1)
-      actionview (= 8.0.2.1)
-      activejob (= 8.0.2.1)
-      activesupport (= 8.0.2.1)
+    actionmailer (8.1.2)
+      actionpack (= 8.1.2)
+      actionview (= 8.1.2)
+      activejob (= 8.1.2)
+      activesupport (= 8.1.2)
      mail (>= 2.8.0)
      rails-dom-testing (~> 2.2)
-    actionpack (8.0.2.1)
-      actionview (= 8.0.2.1)
-      activesupport (= 8.0.2.1)
+    actionpack (8.1.2)
+      actionview (= 8.1.2)
+      activesupport (= 8.1.2)
      nokogiri (>= 1.8.5)
      rack (>= 2.2.4)
      rack-session (>= 1.0.1)
@@ -31,97 +41,97 @@ GEM
      rails-dom-testing (~> 2.2)
      rails-html-sanitizer (~> 1.6)
      useragent (~> 0.16)
-    actiontext (8.0.2.1)
-      actionpack (= 8.0.2.1)
-      activerecord (= 8.0.2.1)
-      activestorage (= 8.0.2.1)
-      activesupport (= 8.0.2.1)
+    actiontext (8.1.2)
+      action_text-trix (~> 2.1.15)
+      actionpack (= 8.1.2)
+      activerecord (= 8.1.2)
+      activestorage (= 8.1.2)
+      activesupport (= 8.1.2)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (8.0.2.1)
-      activesupport (= 8.0.2.1)
+    actionview (8.1.2)
+      activesupport (= 8.1.2)
      builder (~> 3.1)
      erubi (~> 1.11)
      rails-dom-testing (~> 2.2)
      rails-html-sanitizer (~> 1.6)
-    activejob (8.0.2.1)
-      activesupport (= 8.0.2.1)
+    activejob (8.1.2)
+      activesupport (= 8.1.2)
      globalid (>= 0.3.6)
-    activemodel (8.0.2.1)
-      activesupport (= 8.0.2.1)
-    activerecord (8.0.2.1)
-      activemodel (= 8.0.2.1)
-      activesupport (= 8.0.2.1)
+    activemodel (8.1.2)
+      activesupport (= 8.1.2)
+    activerecord (8.1.2)
+      activemodel (= 8.1.2)
+      activesupport (= 8.1.2)
      timeout (>= 0.4.0)
-    activestorage (8.0.2.1)
-      actionpack (= 8.0.2.1)
-      activejob (= 8.0.2.1)
-      activerecord (= 8.0.2.1)
-      activesupport (= 8.0.2.1)
+    activestorage (8.1.2)
+      actionpack (= 8.1.2)
+      activejob (= 8.1.2)
+      activerecord (= 8.1.2)
+      activesupport (= 8.1.2)
      marcel (~> 1.0)
-    activesupport (8.0.2.1)
+    activesupport (8.1.2)
      base64
-      benchmark (>= 0.3)
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.3.1)
      connection_pool (>= 2.2.5)
      drb
      i18n (>= 1.6, < 2)
+      json
      logger (>= 1.4.2)
      minitest (>= 5.1)
      securerandom (>= 0.3)
      tzinfo (~> 2.0, >= 2.0.5)
      uri (>= 0.13.1)
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
-    annotaterb (4.14.0)
+    addressable (2.8.8)
+      public_suffix (>= 2.0.2, < 8.0)
+    annotaterb (4.20.0)
+      activerecord (>= 6.0.0)
+      activesupport (>= 6.0.0)
    arabic-letter-connector (0.1.1)
-    ast (2.4.2)
-    aws-eventstream (1.3.0)
-    aws-partitions (1.1027.0)
-    aws-sdk-core (3.214.0)
+    ast (2.4.3)
+    aws-eventstream (1.4.0)
+    aws-partitions (1.1209.0)
+    aws-sdk-core (3.241.4)
      aws-eventstream (~> 1, >= 1.3.0)
      aws-partitions (~> 1, >= 1.992.0)
      aws-sigv4 (~> 1.9)
+      base64
+      bigdecimal
      jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.96.0)
-      aws-sdk-core (~> 3, >= 3.210.0)
+      logger
+    aws-sdk-kms (1.121.0)
+      aws-sdk-core (~> 3, >= 3.241.4)
      aws-sigv4 (~> 1.5)
-    aws-sdk-s3 (1.176.1)
-      aws-sdk-core (~> 3, >= 3.210.0)
+    aws-sdk-s3 (1.212.0)
+      aws-sdk-core (~> 3, >= 3.241.4)
      aws-sdk-kms (~> 1)
      aws-sigv4 (~> 1.5)
-    aws-sdk-secretsmanager (1.110.0)
-      aws-sdk-core (~> 3, >= 3.210.0)
+    aws-sdk-secretsmanager (1.128.0)
+      aws-sdk-core (~> 3, >= 3.241.4)
      aws-sigv4 (~> 1.5)
-    aws-sigv4 (1.10.1)
+    aws-sigv4 (1.12.1)
      aws-eventstream (~> 1, >= 1.0.2)
-    azure-storage-blob (2.0.3)
-      azure-storage-common (~> 2.0)
-      nokogiri (~> 1, >= 1.10.8)
-    azure-storage-common (2.0.4)
-      faraday (~> 1.0)
-      faraday_middleware (~> 1.0, >= 1.0.0.rc1)
-      net-http-persistent (~> 4.0)
-      nokogiri (~> 1, >= 1.10.8)
+    azure-blob (0.8.0)
+      cgi
+      rexml
    base64 (0.3.0)
-    bcrypt (3.1.20)
-    benchmark (0.4.1)
-    better_html (2.1.1)
-      actionview (>= 6.0)
-      activesupport (>= 6.0)
+    bcrypt (3.1.21)
+    better_html (2.2.0)
+      actionview (>= 7.0)
+      activesupport (>= 7.0)
      ast (~> 2.0)
      erubi (~> 1.4)
      parser (>= 2.4)
      smart_properties
-    bigdecimal (3.2.2)
+    bigdecimal (4.0.1)
    bindex (0.8.1)
-    bootsnap (1.18.4)
+    bootsnap (1.21.1)
      msgpack (~> 1.2)
-    brakeman (7.0.0)
+    brakeman (7.1.2)
      racc
    builder (3.3.0)
-    bullet (8.0.0)
+    bullet (8.1.0)
      activesupport (>= 3.0.0)
      uniform_notifier (~> 1.11)
    camertron-eprun (1.1.1)
@@ -135,28 +145,29 @@ GEM
      rack-test (>= 0.6.3)
      regexp_parser (>= 1.5, < 3.0)
      xpath (~> 3.2)
+    cgi (0.5.1)
    childprocess (5.1.0)
      logger (~> 1.5)
    chunky_png (1.4.0)
    cldr-plurals-runtime-rb (1.1.0)
    cmdparse (3.0.7)
    coderay (1.1.3)
-    concurrent-ruby (1.3.5)
-    connection_pool (2.5.3)
-    crack (1.0.0)
+    concurrent-ruby (1.3.6)
+    connection_pool (3.0.2)
+    crack (1.0.1)
      bigdecimal
      rexml
    crass (1.0.6)
-    css_parser (1.21.0)
+    css_parser (1.21.1)
      addressable
-    csv (3.3.2)
+    csv (3.3.5)
    csv-safe (3.3.1)
      csv (~> 3.0)
-    cuprite (0.15.1)
+    cuprite (0.17)
      capybara (~> 3.0)
-      ferrum (~> 0.15.0)
-    date (3.4.1)
-    debug (1.10.0)
+      ferrum (~> 0.17.0)
+    date (3.5.1)
+    debug (1.11.1)
      irb (~> 1.10)
      reline (>= 0.3.8)
    declarative (0.0.20)
@@ -166,20 +177,20 @@ GEM
      railties (>= 4.1.0)
      responders
      warden (~> 1.2.3)
-    devise-two-factor (6.1.0)
-      activesupport (>= 7.0, < 8.1)
-      devise (~> 4.0)
-      railties (>= 7.0, < 8.1)
+    devise-two-factor (6.3.1)
+      activesupport (>= 7.0, < 8.2)
+      devise (>= 4.0, < 5.0)
+      railties (>= 7.0, < 8.2)
      rotp (~> 6.0)
-    diff-lcs (1.5.1)
-    digest-crc (0.6.5)
+    diff-lcs (1.6.2)
+    digest-crc (0.7.0)
      rake (>= 12.0.0, < 14.0.0)
    docile (1.4.1)
-    dotenv (3.1.7)
+    dotenv (3.2.0)
    drb (2.2.3)
    email_typo (0.2.3)
-    erb (5.0.2)
-    erb_lint (0.7.0)
+    erb (6.0.1)
+    erb_lint (0.9.0)
      activesupport
      better_html (>= 2.0.1)
      parser (>= 2.7.1.4)
@@ -187,117 +198,100 @@ GEM
      rubocop (>= 1)
      smart_properties
    erubi (1.13.1)
-    factory_bot (6.5.0)
-      activesupport (>= 5.0.0)
-    factory_bot_rails (6.4.4)
+    factory_bot (6.5.6)
+      activesupport (>= 6.1.0)
+    factory_bot_rails (6.5.1)
      factory_bot (~> 6.5)
-      railties (>= 5.0.0)
-    faker (3.5.1)
+      railties (>= 6.1.0)
+    faker (3.6.0)
      i18n (>= 1.8.11, < 2)
-    faraday (1.10.4)
-      faraday-em_http (~> 1.0)
-      faraday-em_synchrony (~> 1.0)
-      faraday-excon (~> 1.1)
-      faraday-httpclient (~> 1.0)
-      faraday-multipart (~> 1.0)
-      faraday-net_http (~> 1.0)
-      faraday-net_http_persistent (~> 1.0)
-      faraday-patron (~> 1.0)
-      faraday-rack (~> 1.0)
-      faraday-retry (~> 1.0)
-      ruby2_keywords (>= 0.0.4)
-    faraday-em_http (1.0.0)
-    faraday-em_synchrony (1.0.0)
-    faraday-excon (1.1.0)
-    faraday-follow_redirects (0.3.0)
+    faraday (2.14.1)
+      faraday-net_http (>= 2.0, < 3.5)
+      json
+      logger
+    faraday-follow_redirects (0.5.0)
      faraday (>= 1, < 3)
-    faraday-httpclient (1.0.1)
-    faraday-multipart (1.1.0)
-      multipart-post (~> 2.0)
-    faraday-net_http (1.0.2)
-    faraday-net_http_persistent (1.2.0)
-    faraday-patron (1.0.0)
-    faraday-rack (1.0.0)
-    faraday-retry (1.0.3)
-    faraday_middleware (1.2.1)
-      faraday (~> 1.0)
-    ferrum (0.15)
+    faraday-net_http (3.4.2)
+      net-http (~> 0.5)
+    ferrum (0.17.1)
      addressable (~> 2.5)
+      base64 (~> 0.2)
      concurrent-ruby (~> 1.1)
      webrick (~> 1.7)
      websocket-driver (~> 0.7)
-    ffi (1.17.1)
-    ffi (1.17.1-aarch64-linux-gnu)
-    ffi (1.17.1-aarch64-linux-musl)
-    ffi (1.17.1-arm64-darwin)
-    ffi (1.17.1-x86_64-linux-gnu)
-    ffi (1.17.1-x86_64-linux-musl)
-    foreman (0.88.1)
+    ffi (1.17.3-aarch64-linux-gnu)
+    ffi (1.17.3-aarch64-linux-musl)
+    ffi (1.17.3-arm64-darwin)
+    ffi (1.17.3-x86_64-linux-gnu)
+    ffi (1.17.3-x86_64-linux-musl)
+    foreman (0.90.0)
+      thor (~> 1.4)
    geom2d (0.4.1)
-    globalid (1.2.1)
+    globalid (1.3.0)
      activesupport (>= 6.1)
-    google-apis-core (0.15.1)
-      addressable (~> 2.5, >= 2.5.1)
-      googleauth (~> 1.9)
-      httpclient (>= 2.8.3, < 3.a)
-      mini_mime (~> 1.0)
-      mutex_m
+    google-apis-core (1.0.2)
+      addressable (~> 2.8, >= 2.8.7)
+      faraday (~> 2.13)
+      faraday-follow_redirects (~> 0.3)
+      googleauth (~> 1.14)
+      mini_mime (~> 1.1)
      representable (~> 3.0)
-      retriable (>= 2.0, < 4.a)
-    google-apis-iamcredentials_v1 (0.22.0)
+      retriable (~> 3.1)
+    google-apis-iamcredentials_v1 (0.26.0)
      google-apis-core (>= 0.15.0, < 2.a)
-    google-apis-storage_v1 (0.49.0)
+    google-apis-storage_v1 (0.59.0)
      google-apis-core (>= 0.15.0, < 2.a)
-    google-cloud-core (1.7.1)
+    google-cloud-core (1.8.0)
      google-cloud-env (>= 1.0, < 3.a)
      google-cloud-errors (~> 1.0)
-    google-cloud-env (2.2.1)
+    google-cloud-env (2.3.1)
+      base64 (~> 0.2)
      faraday (>= 1.0, < 3.a)
-    google-cloud-errors (1.4.0)
-    google-cloud-storage (1.54.0)
+    google-cloud-errors (1.5.0)
+    google-cloud-storage (1.58.0)
      addressable (~> 2.8)
      digest-crc (~> 0.4)
-      google-apis-core (~> 0.13)
+      google-apis-core (>= 0.18, < 2)
      google-apis-iamcredentials_v1 (~> 0.18)
-      google-apis-storage_v1 (~> 0.38)
+      google-apis-storage_v1 (>= 0.42)
      google-cloud-core (~> 1.6)
      googleauth (~> 1.9)
      mini_mime (~> 1.0)
-    google-logging-utils (0.1.0)
-    googleauth (1.12.2)
+    google-logging-utils (0.2.0)
+    googleauth (1.16.1)
      faraday (>= 1.0, < 3.a)
      google-cloud-env (~> 2.2)
      google-logging-utils (~> 0.1)
-      jwt (>= 1.4, < 3.0)
+      jwt (>= 1.4, < 4.0)
      multi_json (~> 1.11)
      os (>= 0.9, < 2.0)
      signet (>= 0.16, < 2.a)
-    hashdiff (1.1.2)
-    hexapdf (1.4.0)
+    hashdiff (1.2.1)
+    hexapdf (1.5.0)
      cmdparse (~> 3.0, >= 3.0.3)
      geom2d (~> 0.4, >= 0.4.1)
      openssl (>= 2.2.1)
      strscan (>= 3.1.2)
-    htmlentities (4.3.4)
-    httpclient (2.8.3)
-    i18n (1.14.7)
+    htmlentities (4.4.2)
+    i18n (1.14.8)
      concurrent-ruby (~> 1.0)
-    image_processing (1.13.0)
-      mini_magick (>= 4.9.5, < 5)
+    image_processing (1.14.0)
+      mini_magick (>= 4.9.5, < 6)
      ruby-vips (>= 2.0.17, < 3)
-    io-console (0.8.1)
-    irb (1.15.2)
+    io-console (0.8.2)
+    irb (1.16.0)
      pp (>= 0.6.0)
      rdoc (>= 4.0.0)
      reline (>= 0.4.2)
    jmespath (1.6.2)
-    json (2.13.2)
-    jwt (2.9.3)
+    json (2.18.1)
+    jwt (3.1.2)
      base64
-    language_server-protocol (3.17.0.3)
-    launchy (3.0.1)
+    language_server-protocol (3.17.0.5)
+    launchy (3.1.1)
      addressable (~> 2.8)
      childprocess (~> 5.0)
+      logger (~> 1.6)
    letter_opener (1.10.0)
      launchy (>= 2.2, < 4)
    letter_opener_web (3.0.0)
@@ -305,35 +299,35 @@ GEM
      letter_opener (~> 1.9)
      railties (>= 6.1)
      rexml
+    lint_roller (1.1.0)
    logger (1.7.0)
    lograge (0.14.0)
      actionpack (>= 4)
      activesupport (>= 4)
      railties (>= 4)
      request_store (~> 1.0)
-    loofah (2.24.1)
+    loofah (2.25.0)
      crass (~> 1.0.2)
      nokogiri (>= 1.12.0)
-    mail (2.8.1)
+    mail (2.9.0)
+      logger
      mini_mime (>= 0.1.1)
      net-imap
      net-pop
      net-smtp
-    marcel (1.0.4)
-    matrix (0.4.2)
+    marcel (1.1.0)
+    matrix (0.4.3)
    method_source (1.1.0)
-    mini_magick (4.13.2)
+    mini_magick (5.3.1)
+      logger
    mini_mime (1.1.5)
-    mini_portile2 (2.8.9)
-    minitest (5.25.5)
-    msgpack (1.7.5)
-    multi_json (1.15.0)
-    multipart-post (2.4.1)
-    mutex_m (0.3.0)
-    mysql2 (0.5.6)
-    net-http-persistent (4.0.5)
-      connection_pool (~> 2.2)
-    net-imap (0.5.9)
+    minitest (6.0.1)
+      prism (~> 1.5)
+    msgpack (1.8.0)
+    multi_json (1.19.1)
+    net-http (0.9.1)
+      uri (>= 0.11.1)
+    net-imap (0.6.2)
      date
      net-protocol
    net-pop (0.1.2)
@@ -342,35 +336,45 @@ GEM
      timeout
    net-smtp (0.5.1)
      net-protocol
-    nio4r (2.7.4)
-    nokogiri (1.18.9)
-      mini_portile2 (~> 2.8.2)
+    nio4r (2.7.5)
+    nokogiri (1.19.1-aarch64-linux-gnu)
      racc (~> 1.4)
-    nokogiri (1.18.9-aarch64-linux-gnu)
+    nokogiri (1.19.1-aarch64-linux-musl)
      racc (~> 1.4)
-    nokogiri (1.18.9-aarch64-linux-musl)
+    nokogiri (1.19.1-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.18.9-arm64-darwin)
+    nokogiri (1.19.1-x86_64-linux-gnu)
      racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-linux-gnu)
+    nokogiri (1.19.1-x86_64-linux-musl)
      racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-linux-musl)
-      racc (~> 1.4)
-    oj (3.16.11)
+    numo-narray-alt (0.9.13)
+    oj (3.16.13)
      bigdecimal (>= 3.0)
      ostruct (>= 0.2)
-    openssl (3.3.0)
+    onnxruntime (0.10.1-aarch64-linux)
+      ffi
+    onnxruntime (0.10.1-arm64-darwin)
+      ffi
+    onnxruntime (0.10.1-x86_64-linux)
+      ffi
+    openssl (4.0.0)
    orm_adapter (0.5.0)
    os (1.1.4)
    ostruct (0.6.3)
-    package_json (0.1.0)
-    pagy (9.3.3)
-    parallel (1.26.3)
-    parser (3.3.6.0)
+    package_json (0.2.0)
+    pagy (43.2.8)
+      json
+      yaml
+    parallel (1.27.0)
+    parser (3.3.10.1)
      ast (~> 2.4.1)
      racc
-    pg (1.5.9)
-    pp (0.6.2)
+    pg (1.6.3-aarch64-linux)
+    pg (1.6.3-aarch64-linux-musl)
+    pg (1.6.3-arm64-darwin)
+    pg (1.6.3-x86_64-linux)
+    pg (1.6.3-x86_64-linux-musl)
+    pp (0.6.3)
      prettyprint
    premailer (1.27.0)
      addressable
@@ -380,22 +384,24 @@ GEM
      actionmailer (>= 3)
      net-smtp
      premailer (~> 1.7, >= 1.7.9)
-    pretender (0.5.0)
-      actionpack (>= 6.1)
+    pretender (0.6.0)
+      actionpack (>= 7.1)
    prettyprint (0.2.0)
-    pry (0.15.0)
+    prism (1.8.0)
+    pry (0.16.0)
      coderay (~> 1.1)
      method_source (~> 1.0)
+      reline (>= 0.6.0)
    pry-rails (0.3.11)
      pry (>= 0.13.0)
-    psych (5.2.6)
+    psych (5.3.1)
      date
      stringio
-    public_suffix (6.0.1)
-    puma (6.5.0)
+    public_suffix (7.0.2)
+    puma (7.2.0)
      nio4r (~> 2.0)
    racc (1.8.1)
-    rack (3.2.0)
+    rack (3.2.5)
    rack-proxy (0.7.7)
      rack
    rack-session (2.1.1)
@@ -403,22 +409,22 @@ GEM
      rack (>= 3.0.0)
    rack-test (2.2.0)
      rack (>= 1.3)
-    rackup (2.2.1)
+    rackup (2.3.1)
      rack (>= 3)
-    rails (8.0.2.1)
-      actioncable (= 8.0.2.1)
-      actionmailbox (= 8.0.2.1)
-      actionmailer (= 8.0.2.1)
-      actionpack (= 8.0.2.1)
-      actiontext (= 8.0.2.1)
-      actionview (= 8.0.2.1)
-      activejob (= 8.0.2.1)
-      activemodel (= 8.0.2.1)
-      activerecord (= 8.0.2.1)
-      activestorage (= 8.0.2.1)
-      activesupport (= 8.0.2.1)
+    rails (8.1.2)
+      actioncable (= 8.1.2)
+      actionmailbox (= 8.1.2)
+      actionmailer (= 8.1.2)
+      actionpack (= 8.1.2)
+      actiontext (= 8.1.2)
+      actionview (= 8.1.2)
+      activejob (= 8.1.2)
+      activemodel (= 8.1.2)
+      activerecord (= 8.1.2)
+      activestorage (= 8.1.2)
+      activesupport (= 8.1.2)
      bundler (>= 1.15.0)
-      railties (= 8.0.2.1)
+      railties (= 8.1.2)
    rails-dom-testing (2.3.0)
      activesupport (>= 5.0.0)
      minitest
@@ -426,30 +432,28 @@ GEM
    rails-html-sanitizer (1.6.2)
      loofah (~> 2.21)
      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    rails-i18n (8.0.1)
+    rails-i18n (8.1.0)
      i18n (>= 0.7, < 2)
      railties (>= 8.0.0, < 9)
-    rails_autolink (1.1.8)
-      actionview (> 3.1)
-      activesupport (> 3.1)
-      railties (> 3.1)
-    railties (8.0.2.1)
-      actionpack (= 8.0.2.1)
-      activesupport (= 8.0.2.1)
+    railties (8.1.2)
+      actionpack (= 8.1.2)
+      activesupport (= 8.1.2)
      irb (~> 1.13)
      rackup (>= 1.0.0)
      rake (>= 12.2)
      thor (~> 1.0, >= 1.2.2)
+      tsort (>= 0.2)
      zeitwerk (~> 2.6)
    rainbow (3.1.1)
-    rake (13.3.0)
-    rdoc (6.14.2)
+    rake (13.3.1)
+    rdoc (7.1.0)
      erb
      psych (>= 4.0.0)
-    redis-client (0.23.0)
+      tsort
+    redis-client (0.26.4)
      connection_pool
-    regexp_parser (2.9.3)
-    reline (0.6.2)
+    regexp_parser (2.11.3)
+    reline (0.6.3)
      io-console (~> 0.5)
    representable (3.2.0)
      declarative (< 0.1.0)
@@ -457,121 +461,126 @@ GEM
      uber (< 0.2.0)
    request_store (1.7.0)
      rack (>= 1.4)
-    responders (3.1.1)
-      actionpack (>= 5.2)
-      railties (>= 5.2)
-    retriable (3.1.2)
-    rexml (3.4.0)
-    rotp (6.3.0)
-    rouge (4.5.2)
-    rqrcode (2.2.0)
-      chunky_png (~> 1.0)
-      rqrcode_core (~> 1.0)
-    rqrcode_core (1.2.0)
-    rspec-core (3.13.2)
-      rspec-support (~> 3.13.0)
-    rspec-expectations (3.13.3)
-      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.13.0)
-    rspec-mocks (3.13.2)
-      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.13.0)
-    rspec-rails (7.1.0)
+    responders (3.2.0)
      actionpack (>= 7.0)
-      activesupport (>= 7.0)
      railties (>= 7.0)
+    retriable (3.1.2)
+    rexml (3.4.4)
+    rotp (6.3.0)
+    rouge (4.7.0)
+    rqrcode (3.2.0)
+      chunky_png (~> 1.0)
+      rqrcode_core (~> 2.0)
+    rqrcode_core (2.1.0)
+    rspec-core (3.13.6)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.5)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.7)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.13.0)
+    rspec-rails (8.0.2)
+      actionpack (>= 7.2)
+      activesupport (>= 7.2)
+      railties (>= 7.2)
      rspec-core (~> 3.13)
      rspec-expectations (~> 3.13)
      rspec-mocks (~> 3.13)
      rspec-support (~> 3.13)
-    rspec-support (3.13.2)
-    rubocop (1.69.2)
+    rspec-support (3.13.6)
+    rubocop (1.82.1)
      json (~> 2.3)
-      language_server-protocol (>= 3.17.0)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
      parallel (~> 1.10)
      parser (>= 3.3.0.2)
      rainbow (>= 2.2.2, < 4.0)
      regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.36.2, < 2.0)
+      rubocop-ast (>= 1.48.0, < 2.0)
      ruby-progressbar (~> 1.7)
      unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.37.0)
-      parser (>= 3.3.1.0)
-    rubocop-performance (1.23.0)
-      rubocop (>= 1.48.1, < 2.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rails (2.27.0)
+    rubocop-ast (1.49.0)
+      parser (>= 3.3.7.2)
+      prism (~> 1.7)
+    rubocop-performance (1.26.1)
+      lint_roller (~> 1.1)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.47.1, < 2.0)
+    rubocop-rails (2.34.3)
      activesupport (>= 4.2.0)
+      lint_roller (~> 1.1)
      rack (>= 1.1)
-      rubocop (>= 1.52.0, < 2.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (3.3.0)
-      rubocop (~> 1.61)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
+    rubocop-rspec (3.9.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.81)
    ruby-progressbar (1.13.0)
-    ruby-vips (2.2.2)
+    ruby-vips (2.3.0)
      ffi (~> 1.12)
      logger
-    ruby2_keywords (0.0.5)
-    rubyXL (3.4.33)
+    rubyXL (3.4.35)
      nokogiri (>= 1.10.8)
-      rubyzip (>= 1.3.0)
-    rubyzip (2.3.2)
+      rubyzip (>= 3.2.2)
+    rubyzip (3.2.2)
    securerandom (0.4.1)
    semantic_range (3.1.0)
-    shakapacker (8.0.2)
+    shakapacker (9.5.0)
      activesupport (>= 5.2)
      package_json
      rack-proxy (>= 0.6.1)
      railties (>= 5.2)
      semantic_range (>= 2.3.0)
-    sidekiq (7.3.7)
-      connection_pool (>= 2.3.0)
-      logger
-      rack (>= 2.2.4)
-      redis-client (>= 0.22.2)
-    signet (0.19.0)
+    sidekiq (8.1.0)
+      connection_pool (>= 3.0.0)
+      json (>= 2.16.0)
+      logger (>= 1.7.0)
+      rack (>= 3.2.0)
+      redis-client (>= 0.26.0)
+    signet (0.21.0)
      addressable (~> 2.8)
      faraday (>= 0.17.5, < 3.a)
-      jwt (>= 1.5, < 3.0)
+      jwt (>= 1.5, < 4.0)
      multi_json (~> 1.10)
    simplecov (0.22.0)
      docile (~> 1.1)
      simplecov-html (~> 0.11)
      simplecov_json_formatter (~> 0.1)
-    simplecov-html (0.13.1)
+    simplecov-html (0.13.2)
    simplecov_json_formatter (0.1.4)
    smart_properties (1.17.0)
-    sqlite3 (2.5.0)
-      mini_portile2 (~> 2.8.0)
-    sqlite3 (2.5.0-aarch64-linux-gnu)
-    sqlite3 (2.5.0-aarch64-linux-musl)
-    sqlite3 (2.5.0-arm64-darwin)
-    sqlite3 (2.5.0-x86_64-linux-gnu)
-    sqlite3 (2.5.0-x86_64-linux-musl)
-    stringio (3.1.7)
-    strip_attributes (1.14.1)
+    sqlite3 (2.9.0-aarch64-linux-gnu)
+    sqlite3 (2.9.0-aarch64-linux-musl)
+    sqlite3 (2.9.0-arm64-darwin)
+    sqlite3 (2.9.0-x86_64-linux-gnu)
+    sqlite3 (2.9.0-x86_64-linux-musl)
+    stringio (3.2.0)
+    strip_attributes (2.0.1)
      activemodel (>= 3.0, < 9.0)
-    strscan (3.1.5)
-    thor (1.4.0)
-    timeout (0.4.3)
+    strscan (3.1.7)
+    thor (1.5.0)
+    timeout (0.6.0)
    trailblazer-option (0.1.2)
-    turbo-rails (2.0.11)
-      actionpack (>= 6.0.0)
-      railties (>= 6.0.0)
-    twitter_cldr (6.12.1)
+    tsort (0.2.0)
+    turbo-rails (2.0.21)
+      actionpack (>= 7.1.0)
+      railties (>= 7.1.0)
+    twitter_cldr (6.14.0)
+      base64
      camertron-eprun
      cldr-plurals-runtime-rb (~> 1.1)
      tzinfo
    tzinfo (2.0.6)
      concurrent-ruby (~> 1.0)
-    tzinfo-data (1.2024.2)
+    tzinfo-data (1.2025.3)
      tzinfo (>= 1.0.0)
    uber (0.1.0)
-    unicode-display_width (3.1.2)
-      unicode-emoji (~> 4.0, >= 4.0.4)
-    unicode-emoji (4.0.4)
-    uniform_notifier (1.16.0)
-    uri (1.0.3)
+    unicode-display_width (3.2.0)
+      unicode-emoji (~> 4.1)
+    unicode-emoji (4.2.0)
+    uniform_notifier (1.18.0)
+    uri (1.1.1)
    useragent (0.16.11)
    warden (1.2.9)
      rack (>= 2.0.9)
@@ -580,24 +589,24 @@ GEM
      activemodel (>= 6.0.0)
      bindex (>= 0.4.0)
      railties (>= 6.0.0)
-    webmock (3.24.0)
+    webmock (3.26.1)
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.9.1)
+    webrick (1.9.2)
    websocket-driver (0.8.0)
      base64
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
    xpath (3.2.0)
      nokogiri (~> 1.8)
-    zeitwerk (2.7.3)
+    yaml (0.4.0)
+    zeitwerk (2.7.4)

 PLATFORMS
  aarch64-linux
  aarch64-linux-musl
  arm64-darwin
-  ruby
  x86_64-linux
  x86_64-linux-musl

@@ -606,7 +615,7 @@ DEPENDENCIES
  arabic-letter-connector
  aws-sdk-s3
  aws-sdk-secretsmanager
-  azure-storage-blob
+  azure-blob
  better_html
  bootsnap
  brakeman
@@ -633,8 +642,9 @@ DEPENDENCIES
  jwt
  letter_opener_web
  lograge
-  mysql2
+  numo-narray-alt
  oj
+  onnxruntime
  pagy
  pg
  premailer-rails
@@ -644,7 +654,6 @@ DEPENDENCIES
  rack
  rails
  rails-i18n
-  rails_autolink
  rotp
  rouge
  rqrcode
@@ -660,6 +669,7 @@ DEPENDENCIES
  simplecov
  sqlite3
  strip_attributes
+  trilogy!
  turbo-rails
  twitter_cldr
  tzinfo-data
@@ -667,7 +677,7 @@ DEPENDENCIES
  webmock

 RUBY VERSION
-   ruby 3.4.2p28
+  ruby 4.0.1

 BUNDLED WITH
-   2.5.3
+  4.0.3
@@ -1,7 +1,7 @@
 <h1 align="center" style="border-bottom: none">
  <div>
    <a href="https://www.docuseal.com">
-      <img  alt="DocuSeal" src="https://github.com/docusealco/docuseal/assets/5418788/c12cd051-81cd-4402-bc3a-92f2cfdc1b06" width="80" />
+      <img  alt="DocuSeal" src="https://github.com/user-attachments/assets/38b45682-ffa4-4919-abde-d2d422325c44" width="80" />
      <br>
    </a>
    DocuSeal
@@ -42,7 +42,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 - PDF signature verification
 - Users management
 - Mobile-optimized
- 6 UI languages with signing available in 14 languages
+- 7 UI languages with signing available in 14 languages
 - API and Webhooks for integrations
 - Easy to deploy in minutes

@@ -19,6 +19,7 @@ class AccountConfigsController < ApplicationController
    AccountConfig::FORCE_SSO_AUTH_KEY,
    AccountConfig::FLATTEN_RESULT_PDF_KEY,
    AccountConfig::ENFORCE_SIGNING_ORDER_KEY,
+    AccountConfig::WITH_FILE_LINKS_KEY,
    AccountConfig::WITH_SIGNATURE_ID,
    AccountConfig::COMBINE_PDF_RESULT_KEY,
    AccountConfig::REQUIRE_SIGNING_REASON_KEY,
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class AccountCustomFieldsController < ApplicationController
+  before_action :load_account_config, only: :create
+
+  def create
+    authorize!(:create, Template)
+
+    @account_config.update!(account_config_params)
+
+    render json: @account_config.value
+  end
+
+  private
+
+  def load_account_config
+    @account_config =
+      AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::TEMPLATE_CUSTOM_FIELDS_KEY)
+  end
+
+  def account_config_params
+    params.permit(
+      value: [[:uuid, :name, :type,
+               :required, :readonly, :default_value,
+               :title, :description,
+               { preferences: {},
+                 default_value: [],
+                 options: [%i[value uuid]],
+                 validation: %i[message pattern min max step],
+                 areas: [%i[x y w h cell_w option_uuid]] }]]
+    )
+  end
+end
@@ -8,7 +8,8 @@ class AccountsController < ApplicationController
    'es-ES' => 'Español',
    'pt-PT' => 'Português',
    'de-DE' => 'Deutsch',
-    'it-IT' => 'Italiano'
+    'it-IT' => 'Italiano',
+    'nl-NL' => 'Nederlands'
  }.freeze

  before_action :load_account
@@ -45,7 +46,9 @@ class AccountsController < ApplicationController
  def destroy
    authorize!(:manage, current_account)

+    true_user.skip_reconfirmation!
    true_user.update!(locked_at: Time.current, email: true_user.email.sub('@', '+removed@'))
+    true_user.account.update!(archived_at: Time.current)

    # rubocop:disable Layout/LineLength
    render turbo_stream: turbo_stream.replace(
@@ -3,7 +3,7 @@
 module Api
  class ApiBaseController < ActionController::API
    include ActiveStorage::SetCurrent
-    include Pagy::Backend
+    include Pagy::Method

    DEFAULT_LIMIT = 10
    MAX_LIMIT = 100
@@ -34,6 +34,10 @@ module Api
      end

      render json: attachment.as_json(only: %i[uuid created_at], methods: %i[url filename content_type])
+    rescue Submitters::MaliciousFileExtension => e
+      Rollbar.error(e) if defined?(Rollbar)
+
+      render json: { error: e.message }, status: :unprocessable_content
    end

    def build_new_cookie_signatures_json(submitter, attachment)
@@ -5,34 +5,17 @@ module Api
    load_and_authorize_resource :submission

    def index
+      is_merge = params[:merge] == 'true' &&
+                 (@submission.schema_documents || @submission.template.schema_documents).size > 1
+
      documents =
        if @submission.submitters.all?(&:completed_at?)
-          last_submitter = @submission.submitters.max_by(&:completed_at)
-
-          if last_submitter.documents_attachments.blank?
-            last_submitter.documents_attachments = Submissions::EnsureResultGenerated.call(last_submitter)
-          end
-
-          last_submitter.documents_attachments
+          build_completed_documents(@submission, merge: is_merge)
        else
-          values_hash = Submissions::GeneratePreviewAttachments.build_values_hash(@submission)
-
-          if @submission.preview_documents.present? &&
-             @submission.preview_documents.all? { |s| s.metadata['values_hash'] == values_hash }
-            @submission.preview_documents
-          else
-            ApplicationRecord.no_touching do
-              @submission.preview_documents.each(&:destroy)
-            end
-
-            Submissions::GeneratePreviewAttachments.call(@submission, values_hash:)
-          end
+          build_preview_documents(@submission, merge: is_merge)
        end

-      ActiveRecord::Associations::Preloader.new(
-        records: documents,
-        associations: [:blob]
-      ).call
+      ActiveRecord::Associations::Preloader.new(records: documents, associations: [:blob]).call

      expires_at = Accounts.link_expires_at(current_account)

@@ -43,5 +26,50 @@ module Api
        end
      }
    end
+
+    private
+
+    def build_completed_documents(submission, merge: false)
+      last_submitter = submission.submitters.max_by(&:completed_at)
+
+      if merge
+        if submission.merged_document_attachment.blank?
+          submission.merged_document_attachment =
+            Submissions::GenerateCombinedAttachment.call(last_submitter, with_audit: false)
+        end
+
+        [submission.merged_document_attachment]
+      else
+        if last_submitter.documents_attachments.blank?
+          last_submitter.documents_attachments = Submissions::EnsureResultGenerated.call(last_submitter)
+        end
+
+        last_submitter.documents_attachments
+      end
+    end
+
+    def build_preview_documents(submission, merge: false)
+      values_hash = Submissions::GeneratePreviewAttachments.build_values_hash(submission)
+
+      if merge
+        if submission.preview_merged_document_attachment.present? &&
+           submission.preview_merged_document_attachment.metadata['values_hash'] == values_hash
+          [submission.preview_merged_document_attachment]
+        else
+          ApplicationRecord.no_touching { submission.preview_merged_document_attachment&.destroy }
+
+          Submissions::GeneratePreviewAttachments.call(submission, values_hash:, merge: true)
+        end
+      elsif submission.preview_documents.present? &&
+            submission.preview_documents.all? { |s| s.metadata['values_hash'] == values_hash }
+        submission.preview_documents
+      else
+        ApplicationRecord.no_touching do
+          submission.preview_documents.each(&:destroy)
+        end
+
+        Submissions::GeneratePreviewAttachments.call(submission, values_hash:)
+      end
+    end
  end
 end
@@ -147,7 +147,7 @@ module Api
      is_send_email = !params[:send_email].in?(['false', false])

      if (emails = (params[:emails] || params[:email]).presence) &&
-         (params[:submission].blank? && params[:submitters].blank?)
+         params[:submission].blank? && params[:submitters].blank?
        Submissions.create_from_emails(template:,
                                       user: current_user,
                                       source: :api,
@@ -172,7 +172,10 @@ module Api
        Submissions::NormalizeParamUtils.save_default_value_attachments!(attachments, submitters)

        submitters.each do |submitter|
-          SubmissionEvents.create_with_tracking_data(submitter, 'api_complete_form', request) if submitter.completed_at?
+          if submitter.completed_at?
+            Submitters::SubmitValues.maybe_invite_via_field(submitter, request)
+            SubmissionEvents.create_with_tracking_data(submitter, 'api_complete_form', request)
+          end
        end

        submissions
@@ -182,13 +185,13 @@ module Api
    def submissions_params
      permitted_attrs = [
        :send_email, :send_sms, :bcc_completed, :completed_redirect_url, :reply_to, :go_to_last,
-        :require_phone_2fa, :expire_at, :name,
+        :require_phone_2fa, :require_email_2fa, :expire_at, :name,
        {
          variables: {},
          message: %i[subject body],
          submitters: [[:send_email, :send_sms, :completed_redirect_url, :uuid, :name, :email, :role,
                        :completed, :phone, :application_key, :external_id, :reply_to, :go_to_last,
-                        :require_phone_2fa, :order,
+                        :require_phone_2fa, :require_email_2fa, :order, :index, :invite_by,
                        { metadata: {}, values: {}, roles: [], readonly_fields: [], message: %i[subject body],
                          fields: [:name, :uuid, :default_value, :value, :title, :description,
                                   :readonly, :required, :validation_pattern, :invalid_message,
@@ -34,6 +34,7 @@ module Api
      render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true, params:)
    end

+    # rubocop:disable Metrics/MethodLength
    def update
      if @submitter.completed_at?
        return render json: { error: 'Submitter has already completed the submission.' }, status: :unprocessable_content
@@ -60,7 +61,10 @@ module Api

        @submitter.submission.save!

-        SubmissionEvents.create_with_tracking_data(@submitter, 'api_complete_form', request) if @submitter.completed_at?
+        if @submitter.completed_at?
+          Submitters::SubmitValues.maybe_invite_via_field(@submitter, request)
+          SubmissionEvents.create_with_tracking_data(@submitter, 'api_complete_form', request)
+        end
      end

      if @submitter.completed_at?
@@ -78,13 +82,14 @@ module Api

      render json: { error: e.message }, status: :unprocessable_content
    end
+    # rubocop:enable Metrics/MethodLength

    def submitter_params
      submitter_params = params.key?(:submitter) ? params.require(:submitter) : params

      submitter_params.permit(
        :send_email, :send_sms, :reply_to, :completed_redirect_url, :uuid, :name, :email, :role,
-        :completed, :phone, :application_key, :external_id, :go_to_last, :require_phone_2fa,
+        :completed, :phone, :application_key, :external_id, :go_to_last, :require_phone_2fa, :require_email_2fa,
        { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
          fields: [[:name, :uuid, :default_value, :value, :required,
                    :readonly, :validation_pattern, :invalid_message,
@@ -107,7 +107,8 @@ module Api
        :external_id,
        :shared_link,
        {
-          submitters: [%i[name uuid is_requester invite_by_uuid optional_invite_by_uuid linked_to_uuid email order]],
+          submitters: [%i[name uuid is_requester invite_by_uuid invite_via_field_uuid
+                          optional_invite_by_uuid linked_to_uuid email order]],
          fields: [[:uuid, :submitter_uuid, :name, :type,
                    :required, :readonly, :default_value,
                    :title, :description, :prefillable,
@@ -4,7 +4,7 @@ class ApplicationController < ActionController::Base
  BROWSER_LOCALE_REGEXP = /\A\w{2}(?:-\w{2})?/

  include ActiveStorage::SetCurrent
-  include Pagy::Backend
+  include Pagy::Method

  check_authorization unless: :devise_controller?

@@ -13,14 +13,17 @@ class ApplicationController < ActionController::Base
  before_action :maybe_redirect_to_setup, unless: :signed_in?
  before_action :authenticate_user!, unless: :devise_controller?

+  before_action :set_csp, if: -> { request.get? && !request.headers['HTTP_X_TURBO'] }
+
  helper_method :button_title,
                :current_account,
+                :true_ability,
                :form_link_host,
                :svg_icon

  impersonates :user, with: ->(uuid) { User.find_by(uuid:) }

-  rescue_from Pagy::OverflowError do
+  rescue_from Pagy::RangeError do
    redirect_to request.path
  end

@@ -39,10 +42,6 @@ class ApplicationController < ActionController::Base
  end

  def default_url_options
-    if request.domain == 'docuseal.com'
-      return { host: 'docuseal.com', protocol: ENV['FORCE_SSL'].present? ? 'https' : 'http' }
-    end
-
    Docuseal.default_url_options
  end

@@ -57,7 +56,7 @@ class ApplicationController < ActionController::Base

  def pagy_auto(collection, **keyword_args)
    if current_ability.can?(:manage, :countless)
-      pagy_countless(collection, **keyword_args)
+      pagy(:countless, collection, **keyword_args)
    else
      pagy(collection, **keyword_args)
    end
@@ -100,6 +99,10 @@ class ApplicationController < ActionController::Base
    current_user&.account
  end

+  def true_ability
+    @true_ability ||= Ability.new(true_user)
+  end
+
  def maybe_redirect_to_setup
    redirect_to setup_index_path unless User.exists?
  end
@@ -123,4 +126,21 @@ class ApplicationController < ActionController::Base

    redirect_to request.url.gsub('.co/', '.com/'), allow_other_host: true, status: :moved_permanently
  end
+
+  def set_csp
+    request.content_security_policy = current_content_security_policy.tap do |policy|
+      policy.default_src :self
+      policy.script_src :self
+      policy.style_src :self, :unsafe_inline
+      policy.img_src :self, :https, :http, :blob, :data
+      policy.font_src :self, :https, :http, :blob, :data
+      policy.manifest_src :self
+      policy.media_src :self
+      policy.frame_src :self
+      policy.worker_src :self, :blob
+      policy.connect_src :self
+
+      policy.directives['connect-src'] << 'ws:' if Rails.env.development?
+    end
+  end
 end
@@ -17,8 +17,10 @@ class ConsoleRedirectController < ApplicationController
                               scope: :console,
                               exp: 1.minute.from_now.to_i)

-    path = Addressable::URI.parse(params[:redir]).path if params[:redir].to_s.starts_with?(Docuseal::CONSOLE_URL)
+    redir_uri = Addressable::URI.parse(params[:redir])
+    path = redir_uri.path if params[:redir].to_s.starts_with?(Docuseal::CONSOLE_URL)

-    redirect_to("#{Docuseal::CONSOLE_URL}#{path}?#{{ auth: }.to_query}", allow_other_host: true)
+    redirect_to "#{Docuseal::CONSOLE_URL}#{path}?#{{ **redir_uri&.query_values, 'auth' => auth }.to_query}",
+                allow_other_host: true
  end
 end
@@ -1,4 +1,11 @@
 # frozen_string_literal: true

 class InvitationsController < Devise::PasswordsController
+  def update
+    super do |resource|
+      resource.confirmed_at ||= Time.current if resource.errors.empty?
+
+      PasswordsController::Current.user = resource
+    end
+  end
 end
@@ -5,6 +5,8 @@ class PasswordsController < Devise::PasswordsController
  skip_before_action :require_no_authentication, only: %i[edit update]
  # rubocop:enable Rails/LexicallyScopedActionFilter

+  around_action :with_browser_locale
+
  class Current < ActiveSupport::CurrentAttributes
    attribute :user
  end
@@ -4,6 +4,7 @@ class PersonalizationSettingsController < ApplicationController
  ALLOWED_KEYS = [
    AccountConfig::FORM_COMPLETED_BUTTON_KEY,
    AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY,
+    AccountConfig::SUBMITTER_INVITATION_REMINDER_EMAIL_KEY,
    AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY,
    AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY,
    AccountConfig::FORM_COMPLETED_MESSAGE_KEY,
@@ -9,7 +9,14 @@ class ProfileController < ApplicationController

  def update_contact
    if current_user.update(contact_params)
-      redirect_to settings_profile_index_path, notice: I18n.t('contact_information_has_been_update')
+      if current_user.try(:pending_reconfirmation?) && current_user.previous_changes.key?(:unconfirmed_email)
+        SendConfirmationInstructionsJob.perform_async('user_id' => current_user.id)
+
+        redirect_to settings_profile_index_path,
+                    notice: I18n.t('a_confirmation_email_has_been_sent_to_the_new_email_address')
+      else
+        redirect_to settings_profile_index_path, notice: I18n.t('contact_information_has_been_update')
+      end
    else
      render :index, status: :unprocessable_content
    end
@@ -29,7 +29,7 @@ class SendSubmissionEmailController < ApplicationController

    RateLimit.call("send-email-#{@submitter.id}", limit: 2, ttl: 5.minutes)

-    SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later! unless already_sent?(@submitter)
+    SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later! if can_send?(@submitter)

    respond_to do |f|
      f.html { render :success }
@@ -39,8 +39,11 @@ class SendSubmissionEmailController < ApplicationController

  private

-  def already_sent?(submitter)
-    EmailEvent.exists?(tag: :submitter_documents_copy, email: submitter.email, emailable: submitter,
-                       event_type: :send, created_at: SEND_DURATION.ago..Time.current)
+  def can_send?(submitter)
+    return false if submitter.account.archived_at?
+    return false if EmailEvent.exists?(tag: :submitter_documents_copy, email: submitter.email, emailable: submitter,
+                                       event_type: :send, created_at: SEND_DURATION.ago..Time.current)
+
+    true
  end
 end
@@ -16,7 +16,9 @@ class StartFormController < ApplicationController
  COOKIES_DEFAULTS = { httponly: true, secure: Rails.env.production? }.freeze

  def show
-    raise ActionController::RoutingError, I18n.t('not_found') if @template.preferences['require_phone_2fa']
+    if @template.preferences['require_phone_2fa'] || @template.preferences['require_email_2fa']
+      raise ActionController::RoutingError, I18n.t('not_found')
+    end

    if @template.shared_link?
      @submitter = @template.submissions.new(account_id: @template.account_id)
@@ -81,7 +83,7 @@ class StartFormController < ApplicationController

    @submitter = Submitter.where(submission: @template.submissions)
                          .where.not(completed_at: nil)
-                          .find_by!(required_params)
+                          .find_by!(required_params.except('name'))
  end

  private
@@ -10,6 +10,7 @@ class SubmissionEventsController < ApplicationController
    'api_complete_form' => 'check',
    'send_reminder_email' => 'mail_forward',
    'send_2fa_sms' => '2fa',
+    'send_2fa_email' => '2fa',
    'send_sms' => 'send',
    'phone_verified' => 'phone_check',
    'email_verified' => 'email_check',
@@ -12,6 +12,14 @@ class SubmissionsController < ApplicationController
    authorize!(:create, Submission)
  end

+  FIELD_ICONS = {
+    'text' => 'text_size', 'signature' => 'writing_sign', 'date' => 'calendar_event',
+    'number' => 'square_number_1', 'image' => 'photo', 'initials' => 'letter_case_upper',
+    'file' => 'paperclip', 'select' => 'select', 'checkbox' => 'checkbox', 'radio' => 'circle_dot',
+    'stamp' => 'rubber_stamp', 'cells' => 'columns_3', 'multiple' => 'checks', 'phone' => 'phone_check',
+    'payment' => 'credit_card', 'verification' => 'id', 'kba' => 'user_scan'
+  }.freeze
+
  def show
    @submission = Submissions.preload_with_pages(@submission)

@@ -45,14 +53,15 @@ class SubmissionsController < ApplicationController
      else
        submissions_attrs = submissions_params[:submission].to_h.values

-        submissions_attrs, =
-          Submissions::NormalizeParamUtils.normalize_submissions_params!(submissions_attrs, @template)
+        submissions_attrs, _, new_fields =
+          Submissions::NormalizeParamUtils.normalize_submissions_params!(submissions_attrs, @template, add_fields: true)

        Submissions.create_from_submitters(template: @template,
                                           user: current_user,
                                           source: :invite,
                                           submitters_order: params[:preserve_order] == '1' ? 'preserved' : 'random',
                                           submissions_attrs:,
+                                           new_fields:,
                                           params: params.merge('send_completed_email' => true))
      end

@@ -27,20 +27,18 @@ class SubmissionsDownloadController < ApplicationController

    Submissions::EnsureResultGenerated.call(last_submitter)

-    if last_submitter.completed_at < TTL.ago && !signature_valid && !current_user_submitter?(last_submitter)
-      Rollbar.info("TTL: #{last_submitter.id}") if defined?(Rollbar)
+    if !signature_valid && !current_user_submitter?(last_submitter)
+      return head :not_found unless Submitters::AuthorizedForForm.call(@submitter, current_user, request)

-      return head :not_found
+      if last_submitter.completed_at < TTL.ago
+        Rollbar.info("TTL: #{last_submitter.id}") if defined?(Rollbar)
+
+        return head :not_found
+      end
    end

    if params[:combined] == 'true'
-      url = build_combined_url(@submitter)
-
-      if url
-        render json: [url]
-      else
-        head :not_found
-      end
+      respond_with_combined(last_submitter)
    else
      render json: build_urls(last_submitter)
    end
@@ -48,8 +46,18 @@ class SubmissionsDownloadController < ApplicationController

  private

+  def respond_with_combined(submitter)
+    url = build_combined_url(submitter)
+
+    if url
+      render json: [url]
+    else
+      head :not_found
+    end
+  end
+
  def current_user_submitter?(submitter)
-    current_user && current_user.account.submitters.exists?(id: submitter.id)
+    current_user && current_ability.can?(:read, submitter)
  end

  def build_urls(submitter)
@@ -57,7 +65,7 @@ class SubmissionsDownloadController < ApplicationController
                                                          key: AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY)&.value

    Submitters.select_attachments_for_download(submitter).map do |attachment|
-      ActiveStorage::Blob.proxy_url(
+      ActiveStorage::Blob.proxy_path(
        attachment.blob,
        expires_at: FILES_TTL.from_now.to_i,
        filename: Submitters.build_document_filename(submitter, attachment.blob, filename_format)
@@ -75,7 +83,7 @@ class SubmissionsDownloadController < ApplicationController
    filename_format = AccountConfig.find_or_initialize_by(account_id: submitter.account_id,
                                                          key: AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY)&.value

-    ActiveStorage::Blob.proxy_url(
+    ActiveStorage::Blob.proxy_path(
      attachment.blob,
      expires_at: FILES_TTL.from_now.to_i,
      filename: Submitters.build_document_filename(submitter, attachment.blob, filename_format)
@@ -3,6 +3,7 @@
 class SubmissionsFiltersController < ApplicationController
  ALLOWED_NAMES = %w[
    author
+    folder
    completed_at
    status
    created_at
@@ -41,6 +41,9 @@ class SubmissionsPreviewController < ApplicationController

  def completed
    @submission = Submission.find_by!(slug: params[:submissions_preview_slug])
+
+    raise ActionController::RoutingError, I18n.t('not_found') if @submission.account.archived_at?
+
    @template = @submission.template

    render :completed, layout: 'form'
@@ -50,8 +53,11 @@ class SubmissionsPreviewController < ApplicationController

  def use_signature?(submission)
    return false if current_user && can?(:read, submission)
-    return true if submission.submitters.any? { |e| e.preferences['require_phone_2fa'] }
+    return true if submission.submitters.any? do |e|
+      e.preferences['require_phone_2fa'] || e.preferences['require_email_2fa']
+    end
    return true if submission.template&.preferences&.dig('require_phone_2fa')
+    return true if submission.template&.preferences&.dig('require_email_2fa')

    !submission_valid_ttl?(submission)
  end
@@ -9,13 +9,14 @@ class SubmitFormController < ApplicationController

  before_action :load_submitter, only: %i[show update completed]
  before_action :maybe_render_locked_page, only: :show
-  before_action :maybe_require_link_2fa, only: %i[show update]
+  before_action :maybe_require_link_2fa, only: %i[show]

  CONFIG_KEYS = [].freeze

  def show
    submission = @submitter.submission

+    return render :email_2fa unless Submitters::AuthorizedForForm.pass_email_2fa?(@submitter, request)
    return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?

    @form_configs = Submitters::FormConfigs.call(@submitter, CONFIG_KEYS)
@@ -47,6 +48,11 @@ class SubmitFormController < ApplicationController
  end

  def update
+    unless Submitters::AuthorizedForForm.call(@submitter, current_user, request)
+      return render json: { error: I18n.t('verification_required_refresh_the_page_and_pass_2fa') },
+                    status: :unprocessable_content
+    end
+
    if @submitter.completed_at?
      return render json: { error: I18n.t('form_has_been_completed_already') }, status: :unprocessable_content
    end
@@ -75,17 +81,20 @@ class SubmitFormController < ApplicationController
    render json: { error: e.message }, status: :unprocessable_content
  end

-  def completed; end
+  def completed
+    raise ActionController::RoutingError, I18n.t('not_found') if @submitter.account.archived_at?
+
+    return if Submitters::AuthorizedForForm.call(@submitter, current_user, request)
+
+    redirect_to submit_form_path(params[:submit_form_slug])
+  end

  def success; end

  private

  def maybe_require_link_2fa
-    return if @submitter.submission.source != 'link'
-    return unless @submitter.submission.template&.preferences&.dig('shared_link_2fa') == true
-    return if cookies.encrypted[:email_2fa_slug] == @submitter.slug
-    return if @submitter.email == current_user&.email && current_user&.account_id == @submitter.account_id
+    return if Submitters::AuthorizedForForm.pass_link_2fa?(@submitter, current_user, request)

    redirect_to start_form_path(@submitter.submission.template.slug)
  end
@@ -11,7 +11,9 @@ class SubmitFormDeclineController < ApplicationController
                                                           submitter.completed_at? ||
                                                           submitter.submission.archived_at? ||
                                                           submitter.submission.expired? ||
-                                                           submitter.submission.template&.archived_at?
+                                                           submitter.submission.template&.archived_at? ||
+                                                           !Submitters::AuthorizedForForm.call(submitter, current_user,
+                                                                                               request)

    ApplicationRecord.transaction do
      submitter.update!(declined_at: Time.current)
@@ -17,7 +17,8 @@ class SubmitFormDownloadController < ApplicationController
                                          @submitter.submission.template&.archived_at? ||
                                          AccountConfig.exists?(account_id: @submitter.account_id,
                                                                key: AccountConfig::ALLOW_TO_PARTIAL_DOWNLOAD_KEY,
-                                                                value: false)
+                                                                value: false) ||
+                                          !Submitters::AuthorizedForForm.call(@submitter, current_user, request)

    last_completed_submitter = @submitter.submission.submitters
                                         .where.not(id: @submitter.id)
@@ -32,7 +33,7 @@ class SubmitFormDownloadController < ApplicationController
      end

    urls = attachments.map do |attachment|
-      ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
+      ActiveStorage::Blob.proxy_path(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
    end

    render json: urls
@@ -12,7 +12,8 @@ class SubmitFormDrawSignatureController < ApplicationController

    return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?

-    if @submitter.submission.template&.archived_at? || @submitter.submission.archived_at?
+    if @submitter.submission.template&.archived_at? || @submitter.submission.archived_at? ||
+       !Submitters::AuthorizedForForm.call(@submitter, current_user, request)
      return redirect_to submit_form_path(@submitter.slug)
    end

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+class SubmitFormEmail2fasController < ApplicationController
+  around_action :with_browser_locale
+
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  before_action :load_submitter
+
+  COOKIES_TTL = 12.hours
+  COOKIES_DEFAULTS = { httponly: true, secure: Rails.env.production? }.freeze
+
+  def create
+    RateLimit.call("verify-2fa-code-#{@submitter.id}", limit: 2, ttl: 45.seconds, enabled: true)
+
+    value = [@submitter.email.downcase.strip, @submitter.slug].join(':')
+
+    if EmailVerificationCodes.verify(params[:one_time_code].to_s.gsub(/\D/, ''), value)
+      SubmissionEvents.create_with_tracking_data(@submitter, 'email_verified', request, { email: @submitter.email })
+
+      cookies.encrypted[:email_2fa_slug] =
+        { value: @submitter.slug, expires: COOKIES_TTL.from_now, **COOKIES_DEFAULTS }
+
+      redirect_to submit_form_path(@submitter.slug)
+    else
+      redirect_to submit_form_path(@submitter.slug, status: :error), alert: I18n.t(:invalid_code)
+    end
+  rescue RateLimit::LimitApproached
+    redirect_to submit_form_path(@submitter.slug, status: :error), alert: I18n.t(:too_many_attempts)
+  end
+
+  def update
+    if @submitter.submission_events.where(event_type: 'send_2fa_email').exists?(created_at: 15.seconds.ago..)
+      return redirect_to submit_form_path(@submitter.slug, status: :error), alert: I18n.t(:rate_limit_exceeded)
+    end
+
+    RateLimit.call("send-email-code-#{@submitter.id}", limit: 2, ttl: 45.seconds, enabled: true)
+
+    SendSubmitterVerificationEmailJob.perform_async('submitter_id' => @submitter.id, 'locale' => I18n.locale.to_s)
+
+    redir_params = params[:resend] ? { alert: I18n.t(:code_has_been_resent) } : {}
+
+    redirect_to submit_form_path(@submitter.slug, status: :sent), **redir_params
+  rescue RateLimit::LimitApproached
+    redirect_to submit_form_path(@submitter.slug, status: :error), alert: I18n.t(:too_many_attempts)
+  end
+
+  def load_submitter
+    @submitter = Submitter.find_by!(slug: params[:submitter_slug])
+  end
+end
@@ -19,7 +19,9 @@ class SubmitFormInviteController < ApplicationController
        next unless attrs
        next if attrs[:email].blank?

-        submitter.submission.submitters.create!(**attrs, account_id: submitter.account_id)
+        email = Submissions.normalize_email(attrs[:email])
+
+        submitter.submission.submitters.create!(uuid: attrs[:uuid], email:, account_id: submitter.account_id)

        SubmissionEvents.create_with_tracking_data(submitter, 'invite_party', request, { uuid: submitter.uuid })
      end
@@ -45,7 +47,8 @@ class SubmitFormInviteController < ApplicationController
      !submitter.completed_at? &&
      !submitter.submission.archived_at? &&
      !submitter.submission.expired? &&
-      !submitter.submission.template&.archived_at?
+      !submitter.submission.template&.archived_at? &&
+      Submitters::AuthorizedForForm.call(submitter, current_user, request)
  end

  def filter_invite_submitters(submitter, key = 'invite_by_uuid')
@@ -7,10 +7,12 @@ class SubmitFormValuesController < ApplicationController
  def index
    submitter = Submitter.find_by!(slug: params[:submit_form_slug])

-    return render json: {} if submitter.completed_at? || submitter.declined_at?
-    return render json: {} if submitter.submission.template&.archived_at? ||
+    return render json: {} if submitter.completed_at? ||
+                              submitter.declined_at? ||
+                              submitter.submission.template&.archived_at? ||
                              submitter.submission.archived_at? ||
-                              submitter.submission.expired?
+                              submitter.submission.expired? ||
+                              !Submitters::AuthorizedForForm.call(submitter, current_user, request)

    value = submitter.values[params['field_uuid']]
    attachment = submitter.attachments.where(created_at: params[:after]..).find_by(uuid: value) if value.present?
@@ -3,6 +3,12 @@
 class TemplateDocumentsController < ApplicationController
  load_and_authorize_resource :template

+  FILES_TTL = 5.minutes
+
+  def index
+    render json: @template.schema_documents.map { |d| ActiveStorage::Blob.proxy_path(d.blob, expires_at: FILES_TTL.from_now.to_i) }
+  end
+
  def create
    if params[:blobs].blank? && params[:files].blank?
      return render json: { error: I18n.t('file_is_missing') }, status: :unprocessable_content
@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+class TemplatesCloneController < ApplicationController
+  load_and_authorize_resource :template, instance_name: :base_template
+
+  def new
+    authorize!(:create, Template)
+
+    @template = Template.new(name: "#{@base_template.name} (#{I18n.t('clone')})")
+  end
+
+  def create
+    ActiveRecord::Associations::Preloader.new(
+      records: [@base_template],
+      associations: [schema_documents: :preview_images_attachments]
+    ).call
+
+    @template = Templates::Clone.call(@base_template, author: current_user,
+                                                      name: params.dig(:template, :name),
+                                                      folder_name: params[:folder_name])
+
+    authorize!(:create, @template)
+
+    if params[:account_id].present? && true_ability.authorize!(:manage, Account.find(params[:account_id]))
+      @template.account_id = params[:account_id]
+      @template.author = true_user if true_user.account_id == @template.account_id
+      @template.folder = @template.account.default_template_folder if @template.account_id != current_account.id
+    else
+      @template.account = current_account
+    end
+
+    Templates.maybe_assign_access(@template)
+
+    if @template.save
+      Templates::CloneAttachments.call(template: @template, original_template: @base_template)
+
+      SearchEntries.enqueue_reindex(@template)
+
+      WebhookUrls.enqueue_events(@template, 'template.created')
+
+      maybe_redirect_to_template(@template)
+    else
+      render turbo_stream: turbo_stream.replace(:modal, partial: 'templates_clone/form'), status: :unprocessable_content
+    end
+  end
+
+  private
+
+  def maybe_redirect_to_template(template)
+    if template.account == current_account
+      redirect_to(edit_template_path(template))
+    else
+      redirect_back(fallback_location: root_path, notice: I18n.t('template_has_been_cloned'))
+    end
+  end
+end
@@ -3,8 +3,6 @@
 class TemplatesController < ApplicationController
  load_and_authorize_resource :template

-  before_action :load_base_template, only: %i[new create]
-
  def show
    submissions = @template.submissions.accessible_by(current_ability)
    submissions = submissions.active if @template.archived_at.blank?
@@ -26,9 +24,7 @@ class TemplatesController < ApplicationController
    redirect_to root_path
  end

-  def new
-    @template.name = "#{@base_template.name} (#{I18n.t('clone')})" if @base_template
-  end
+  def new; end

  def edit
    ActiveRecord::Associations::Preloader.new(
@@ -48,37 +44,18 @@ class TemplatesController < ApplicationController
  end

  def create
-    if @base_template
-      ActiveRecord::Associations::Preloader.new(
-        records: [@base_template],
-        associations: [schema_documents: :preview_images_attachments]
-      ).call
-
-      @template = Templates::Clone.call(@base_template, author: current_user,
-                                                        name: params.dig(:template, :name),
-                                                        folder_name: params[:folder_name])
-    else
-      @template.author = current_user
-      @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
-    end
-
-    if params[:account_id].present? && authorized_clone_account_id?(params[:account_id])
-      @template.account_id = params[:account_id]
-      @template.folder = @template.account.default_template_folder if @template.account_id != current_account.id
-    else
-      @template.account = current_account
-    end
+    @template.author = current_user
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
+    @template.account = current_account

    Templates.maybe_assign_access(@template)

    if @template.save
-      Templates::CloneAttachments.call(template: @template, original_template: @base_template) if @base_template
-
      SearchEntries.enqueue_reindex(@template)

      WebhookUrls.enqueue_events(@template, 'template.created')

-      maybe_redirect_to_template(@template)
+      redirect_to(edit_template_path(@template))
    else
      render turbo_stream: turbo_stream.replace(:modal, template: 'templates/new'), status: :unprocessable_content
    end
@@ -118,8 +95,10 @@ class TemplatesController < ApplicationController
  def template_params
    params.require(:template).permit(
      :name,
-      { schema: [[:attachment_uuid, :name, { conditions: [%i[field_uuid value action operation]] }]],
-        submitters: [%i[name uuid is_requester linked_to_uuid invite_by_uuid optional_invite_by_uuid email order]],
+      { schema: [[:attachment_uuid, :google_drive_file_id, :name,
+                  { conditions: [%i[field_uuid value action operation]] }]],
+        submitters: [%i[name uuid is_requester linked_to_uuid invite_via_field_uuid
+                        invite_by_uuid optional_invite_by_uuid email order]],
        fields: [[:uuid, :submitter_uuid, :name, :type,
                  :required, :readonly, :default_value,
                  :title, :description, :prefillable,
@@ -131,23 +110,4 @@ class TemplatesController < ApplicationController
                    areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]] }
    )
  end
-
-  def authorized_clone_account_id?(account_id)
-    true_user.account_id.to_s == account_id.to_s ||
-      true_user.account.linked_accounts.accessible_by(current_ability).exists?(id: account_id)
-  end
-
-  def maybe_redirect_to_template(template)
-    if template.account == current_account
-      redirect_to(edit_template_path(@template))
-    else
-      redirect_back(fallback_location: root_path, notice: I18n.t('template_has_been_cloned'))
-    end
-  end
-
-  def load_base_template
-    return if params[:base_template_id].blank?
-
-    @base_template = Template.accessible_by(current_ability).find_by(id: params[:base_template_id])
-  end
 end
@@ -6,12 +6,18 @@ class TemplatesDebugController < ApplicationController
  DEBUG_FILE = ''

  def show
-    attachment = @template.documents.first
+    schema_uuids = @template.schema.index_by { |e| e['attachment_uuid'] }
+    attachment = @template.documents.find { |a| schema_uuids[a.uuid] }

    data = attachment.download
-    pdf = HexaPDF::Document.new(io: StringIO.new(data))

-    fields = Templates::FindAcroFields.call(pdf, attachment, data)
+    unless attachment.image?
+      pdf = HexaPDF::Document.new(io: StringIO.new(data))
+
+      fields = Templates::FindAcroFields.call(pdf, attachment, data)
+    end
+
+    fields, = Templates::DetectFields.call(StringIO.new(data), attachment:) if fields.blank?

    attachment.metadata['pdf'] ||= {}
    attachment.metadata['pdf']['fields'] = fields
@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class TemplatesDetectFieldsController < ApplicationController
+  include ActionController::Live
+
+  load_and_authorize_resource :template
+
+  def create
+    response.headers['Content-Type'] = 'text/event-stream'
+
+    sse = SSE.new(response.stream)
+
+    documents = @template.schema_documents.preload(:blob)
+    documents = documents.where(uuid: params[:attachment_uuid]) if params[:attachment_uuid].present?
+
+    page_number = params[:page].presence&.to_i
+
+    documents.each do |document|
+      io = StringIO.new(document.download)
+
+      Templates::DetectFields.call(io, attachment: document, page_number:) do |(attachment_uuid, page, fields)|
+        sse.write({ attachment_uuid:, page:, fields: })
+      end
+    end
+
+    sse.write({ completed: true })
+  ensure
+    response.stream.close
+  end
+end
@@ -3,6 +3,15 @@
 class TemplatesPreferencesController < ApplicationController
  load_and_authorize_resource :template

+  RESETTABLE_PREFERENCE_KEYS = {
+    AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY => %w[request_email_subject request_email_body submitters],
+    AccountConfig::SUBMITTER_INVITATION_REMINDER_EMAIL_KEY => %w[invitation_reminder_email_subject
+                                                                 invitation_reminder_email_body],
+    AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY => %w[documents_copy_email_subject documents_copy_email_body],
+    AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY => %w[completed_notification_email_subject
+                                                       completed_notification_email_body]
+  }.freeze
+
  def show; end

  def create
@@ -15,19 +24,38 @@ class TemplatesPreferencesController < ApplicationController
    head :ok
  end

+  def destroy
+    authorize!(:update, @template)
+
+    config_key = params[:config_key]
+    preferences_to_delete = RESETTABLE_PREFERENCE_KEYS[config_key]
+
+    return head :ok if preferences_to_delete.blank?
+
+    preferences_to_delete.each do |key|
+      @template.preferences.delete(key)
+    end
+
+    @template.save!
+
+    render turbo_stream: turbo_stream.replace("#{config_key}_form",
+                                              partial: "templates_preferences/#{config_key}_form"),
+           status: :ok
+  end
+
  private

  def template_params
    params.require(:template).permit(
      preferences: %i[bcc_completed request_email_subject request_email_body
+                      invitation_reminder_email_subject invitation_reminder_email_body
                      documents_copy_email_subject documents_copy_email_body
                      documents_copy_email_enabled documents_copy_email_attach_audit
                      documents_copy_email_attach_documents documents_copy_email_reply_to
                      completed_notification_email_attach_documents
                      completed_redirect_url validate_unique_submitters
-                      require_all_submitters submitters_order require_phone_2fa
-                      default_expire_at_duration shared_link_2fa
-                      default_expire_at request_email_enabled
+                      require_all_submitters submitters_order require_phone_2fa require_email_2fa
+                      default_expire_at_duration shared_link_2fa default_expire_at request_email_enabled
                      completed_notification_email_subject completed_notification_email_body
                      completed_notification_email_enabled completed_notification_email_attach_audit] +
                      [completed_message: %i[title body],
@@ -22,7 +22,7 @@ class TemplatesRecipientsController < ApplicationController

  def submitters_params
    permit_params = { submitters: [%i[name uuid is_requester optional_invite_by_uuid
-                                      invite_by_uuid linked_to_uuid email option order]] }
+                                      invite_by_uuid invite_via_field_uuid linked_to_uuid email option order]] }

    params.require(:template).permit(permit_params).fetch(:submitters, {}).values.filter_map do |s|
      next if s[:uuid].blank?
@@ -36,6 +36,7 @@ class TemplatesRecipientsController < ApplicationController
      s[:order] = s[:order].to_i if s[:order].present?
      s.delete(:invite_by_uuid) if s[:invite_by_uuid].blank?
      s.delete(:optional_invite_by_uuid) if s[:optional_invite_by_uuid].blank?
+      s.delete(:invite_via_field_uuid) if s[:invite_via_field_uuid].blank?

      normalize_option_value(s)
    end
@@ -53,6 +54,7 @@ class TemplatesRecipientsController < ApplicationController
        attrs.delete(:email)
        attrs.delete(:linked_to_uuid)
        attrs.delete(:invite_by_uuid)
+        attrs.delete(:invite_via_field_uuid)
        attrs.delete(:optional_invite_by_uuid)
      when /\Alinked_to_(.*)\z/
        attrs[:linked_to_uuid] = ::Regexp.last_match(-1)
@@ -56,7 +56,7 @@ class TemplatesUploadsController < ApplicationController
  def create_file_params_from_url
    tempfile = Tempfile.new
    tempfile.binmode
-    tempfile.write(DownloadUtils.call(params[:url]).body)
+    tempfile.write(DownloadUtils.call(params[:url], validate: true).body)
    tempfile.rewind

    filename = URI.decode_www_form_component(params[:filename]) if params[:filename].present?
@@ -32,7 +32,7 @@ class TimestampServerController < ApplicationController
    uri = Addressable::URI.parse(url)

    conn = Faraday.new(uri.origin) do |c|
-      c.basic_auth(uri.user, uri.password) if uri.password.present?
+      c.request :authorization, :basic, uri.user, uri.password if uri.password.present?
    end

    response = conn.post(uri.path, req.to_der,
@@ -24,10 +24,19 @@ class UsersController < ApplicationController
  def edit; end

  def create
-    if User.accessible_by(current_ability).exists?(email: @user.email)
-      @user.errors.add(:email, I18n.t('already_exists'))
+    existing_user = User.accessible_by(current_ability).find_by(email: @user.email)

-      return render turbo_stream: turbo_stream.replace(:modal, template: 'users/new'), status: :unprocessable_content
+    if existing_user
+      if existing_user.archived_at? &&
+         current_ability.can?(:manage, existing_user) && current_ability.can?(:manage, @user.account)
+        existing_user.assign_attributes(@user.slice(:first_name, :last_name, :role, :account_id))
+        existing_user.archived_at = nil
+        @user = existing_user
+      else
+        @user.errors.add(:email, I18n.t('already_exists'))
+
+        return render turbo_stream: turbo_stream.replace(:modal, template: 'users/new'), status: :unprocessable_content
+      end
    end

    @user.password = SecureRandom.hex if @user.password.blank?
@@ -45,7 +54,8 @@ class UsersController < ApplicationController
  def update
    return redirect_to settings_users_path, notice: I18n.t('unable_to_update_user') if Docuseal.demo?

-    attrs = user_params.compact_blank.merge(user_params.slice(:archived_at))
+    attrs = user_params.compact_blank
+    attrs = attrs.merge(user_params.slice(:archived_at)) if current_ability.can?(:create, @user)

    if params.dig(:user, :account_id).present?
      account = Account.accessible_by(current_ability).find(params.dig(:user, :account_id))
@@ -56,7 +66,14 @@ class UsersController < ApplicationController
    end

    if @user.update(attrs.except(*(current_user == @user ? %i[password otp_required_for_login role] : %i[password])))
-      redirect_back fallback_location: settings_users_path, notice: I18n.t('user_has_been_updated')
+      if @user.try(:pending_reconfirmation?) && @user.previous_changes.key?(:unconfirmed_email)
+        SendConfirmationInstructionsJob.perform_async('user_id' => @user.id)
+
+        redirect_back fallback_location: settings_users_path,
+                      notice: I18n.t('a_confirmation_email_has_been_sent_to_the_new_email_address')
+      else
+        redirect_back fallback_location: settings_users_path, notice: I18n.t('user_has_been_updated')
+      end
    else
      render turbo_stream: turbo_stream.replace(:modal, template: 'users/edit'), status: :unprocessable_content
    end
@@ -15,7 +15,7 @@ class WebhookSettingsController < ApplicationController

      @webhook_events = @webhook_events.where(status: params[:status]) if %w[success error].include?(params[:status])

-      @pagy, @webhook_events = pagy_countless(@webhook_events.order(id: :desc))
+      @pagy, @webhook_events = pagy(:countless, @webhook_events.order(id: :desc))

      render :show
    end
@@ -26,7 +26,7 @@ class WebhookSettingsController < ApplicationController

    @webhook_events = @webhook_events.where(status: params[:status]) if %w[success error].include?(params[:status])

-    @pagy, @webhook_events = pagy_countless(@webhook_events.order(id: :desc))
+    @pagy, @webhook_events = pagy(:countless, @webhook_events.order(id: :desc))
  end

  def new; end
@@ -23,6 +23,7 @@ import SignatureForm from './elements/signature_form'
 import SubmitForm from './elements/submit_form'
 import PromptPassword from './elements/prompt_password'
 import EmailsTextarea from './elements/emails_textarea'
+import ToggleSubmit from './elements/toggle_submit'
 import ToggleOnSubmit from './elements/toggle_on_submit'
 import CheckOnClick from './elements/check_on_click'
 import PasswordInput from './elements/password_input'
@@ -34,11 +35,25 @@ import MaskedInput from './elements/masked_input'
 import SetDateButton from './elements/set_date_button'
 import IndeterminateCheckbox from './elements/indeterminate_checkbox'
 import AppTour from './elements/app_tour'
+import AppTourStart from './elements/app_tour_start'
 import DashboardDropzone from './elements/dashboard_dropzone'
 import RequiredCheckboxGroup from './elements/required_checkbox_group'
 import PageContainer from './elements/page_container'
 import EmailEditor from './elements/email_editor'
+import MarkdownEditor from './elements/markdown_editor'
 import MountOnClick from './elements/mount_on_click'
+import RemoveOnEvent from './elements/remove_on_event'
+import ScrollTo from './elements/scroll_to'
+import SetValue from './elements/set_value'
+import ReviewForm from './elements/review_form'
+import ShowOnValue from './elements/show_on_value'
+import CustomValidation from './elements/custom_validation'
+import ToggleClasses from './elements/toggle_classes'
+import AutosizeField from './elements/autosize_field'
+import GoogleDriveFilePicker from './elements/google_drive_file_picker'
+import OpenModal from './elements/open_modal'
+import BarChart from './elements/bar_chart'
+import FieldCondition from './elements/field_condition'

 import * as TurboInstantClick from './lib/turbo_instant_click'

@@ -55,6 +70,9 @@ document.addEventListener('keyup', (e) => {
 })

 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
+document.addEventListener('turbo:before-fetch-request', (event) => {
+  event.detail.fetchOptions.headers['X-Turbo'] = 'true'
+})
 document.addEventListener('turbo:submit-end', async (event) => {
  const resp = event.detail?.formSubmission?.result?.fetchResponse?.response

@@ -97,6 +115,7 @@ safeRegisterElement('submit-form', SubmitForm)
 safeRegisterElement('prompt-password', PromptPassword)
 safeRegisterElement('emails-textarea', EmailsTextarea)
 safeRegisterElement('toggle-cookies', ToggleCookies)
+safeRegisterElement('toggle-submit', ToggleSubmit)
 safeRegisterElement('toggle-on-submit', ToggleOnSubmit)
 safeRegisterElement('password-input', PasswordInput)
 safeRegisterElement('search-input', SearchInput)
@@ -107,12 +126,26 @@ safeRegisterElement('masked-input', MaskedInput)
 safeRegisterElement('set-date-button', SetDateButton)
 safeRegisterElement('indeterminate-checkbox', IndeterminateCheckbox)
 safeRegisterElement('app-tour', AppTour)
+safeRegisterElement('app-tour-start', AppTourStart)
 safeRegisterElement('dashboard-dropzone', DashboardDropzone)
 safeRegisterElement('check-on-click', CheckOnClick)
 safeRegisterElement('required-checkbox-group', RequiredCheckboxGroup)
 safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('email-editor', EmailEditor)
+safeRegisterElement('markdown-editor', MarkdownEditor)
 safeRegisterElement('mount-on-click', MountOnClick)
+safeRegisterElement('remove-on-event', RemoveOnEvent)
+safeRegisterElement('scroll-to', ScrollTo)
+safeRegisterElement('set-value', SetValue)
+safeRegisterElement('review-form', ReviewForm)
+safeRegisterElement('show-on-value', ShowOnValue)
+safeRegisterElement('custom-validation', CustomValidation)
+safeRegisterElement('toggle-classes', ToggleClasses)
+safeRegisterElement('autosize-field', AutosizeField)
+safeRegisterElement('google-drive-file-picker', GoogleDriveFilePicker)
+safeRegisterElement('open-modal', OpenModal)
+safeRegisterElement('bar-chart', BarChart)
+safeRegisterElement('field-condition', FieldCondition)

 safeRegisterElement('template-builder', class extends HTMLElement {
  connectedCallback () {
@@ -124,20 +157,26 @@ safeRegisterElement('template-builder', class extends HTMLElement {

    this.app = createApp(TemplateBuilder, {
      template: reactive(JSON.parse(this.dataset.template)),
+      customFields: reactive(JSON.parse(this.dataset.customFields || '[]')),
      backgroundColor: '#faf7f5',
      locale: this.dataset.locale,
      withPhone: this.dataset.withPhone === 'true',
      withVerification: ['true', 'false'].includes(this.dataset.withVerification) ? this.dataset.withVerification === 'true' : null,
+      withKba: ['true', 'false'].includes(this.dataset.withKba) ? this.dataset.withKba === 'true' : null,
      withLogo: this.dataset.withLogo !== 'false',
+      withFieldsDetection: this.dataset.withFieldsDetection === 'true',
      editable: this.dataset.editable !== 'false',
      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
+      withCustomFields: true,
      withPayment: this.dataset.withPayment === 'true',
      isPaymentConnected: this.dataset.isPaymentConnected === 'true',
      withFormula: this.dataset.withFormula === 'true',
      withSendButton: this.dataset.withSendButton !== 'false',
      withSignYourselfButton: this.dataset.withSignYourselfButton !== 'false',
      withConditions: this.dataset.withConditions === 'true',
+      withGoogleDrive: this.dataset.withGoogleDrive === 'true',
      withReplaceAndCloneUpload: true,
+      withDownload: true,
      currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
      acceptFileTypes: this.dataset.acceptFileTypes,
      showTourStartForm: this.dataset.showTourStartForm === 'true'
@@ -19,7 +19,7 @@ button .disabled {
  display: none;
 }

-button[disabled] .disabled {
+button[disabled] .disabled, button.btn-disabled .disabled {
  display: initial;
 }

@@ -27,7 +27,7 @@ button .enabled {
  display: initial;
 }

-button[disabled] .enabled {
+button[disabled] .enabled, button.btn-disabled .enabled {
  display: none;
 }

@@ -155,3 +155,7 @@ button[disabled] .enabled {
 .font-courier {
  font-family: "Courier New", Consolas, "Liberation Mono", monospace, ui-monospace, SFMono-Regular, Menlo, Monaco;
 }
+
+markdown-editor [contenteditable] p {
+  margin-bottom: 18px;
+}
@@ -4,15 +4,26 @@ import { isValidSignatureCanvas } from './submission_form/validate_signature'

 window.customElements.define('draw-signature', class extends HTMLElement {
  connectedCallback () {
-    const scale = 3
-
-    this.canvas.width = this.canvas.parentNode.clientWidth * scale
-    this.canvas.height = this.canvas.parentNode.clientHeight * scale
-
-    this.canvas.getContext('2d').scale(scale, scale)
+    this.setCanvasSize()

    this.pad = new SignaturePad(this.canvas)

+    this.resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        if (!this.canvas) return
+
+        const { width, height } = this.canvas
+
+        this.setCanvasSize()
+
+        if (this.canvas.width !== width || this.canvas.height !== height) {
+          this.redrawCanvas(width, height)
+        }
+      })
+    })
+
+    this.resizeObserver.observe(this.canvas.parentNode)
+
    if (this.dataset.color) {
      this.pad.penColor = this.dataset.color
    }
@@ -57,6 +68,40 @@ window.customElements.define('draw-signature', class extends HTMLElement {
    this.updateSubmitButtonVisibility()
  }

+  disconnectedCallback () {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+  }
+
+  setCanvasSize () {
+    const scale = 3
+
+    const width = this.canvas.parentNode.clientWidth
+    const height = this.canvas.parentNode.clientHeight
+
+    if (this.canvas.width !== width * scale || this.canvas.height !== height * scale) {
+      this.canvas.width = width * scale
+      this.canvas.height = height * scale
+
+      this.canvas.getContext('2d').scale(scale, scale)
+    }
+  }
+
+  redrawCanvas (oldWidth, oldHeight) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+      const sx = this.canvas.width / oldWidth
+      const sy = this.canvas.height / oldHeight
+
+      const scaledData = this.pad.toData().map((stroke) => ({
+        ...stroke,
+        points: stroke.points.map((p) => ({ ...p, x: p.x * sx, y: p.y * sy }))
+      }))
+
+      this.pad.fromData(scaledData)
+    }
+  }
+
  updateSubmitButtonVisibility () {
    if (this.pad.isEmpty()) {
      this.submitButton.style.display = 'none'
@@ -0,0 +1,7 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.querySelector('form').addEventListener('submit', () => {
+      window.app_tour.start()
+    })
+  }
+}
@@ -0,0 +1,21 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const originalFontValue = this.field.style.fontSize
+
+    if (this.field.scrollHeight > this.field.clientHeight) {
+      this.field.style.fontSize = `calc(${originalFontValue} / 1.5)`
+      this.field.style.lineHeight = `calc(${this.field.style.fontSize} * 1.3)`
+
+      if (this.field.scrollHeight > this.field.clientHeight) {
+        this.field.style.fontSize = `calc(${originalFontValue} / 2.0)`
+        this.field.style.lineHeight = `calc(${this.field.style.fontSize} * 1.3)`
+      }
+    }
+
+    this.field.classList.remove('hidden')
+  }
+
+  get field () {
+    return this.closest('field-value')
+  }
+}
@@ -0,0 +1,50 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.chartLabels = JSON.parse(this.dataset.labels || '[]')
+    this.chartDatasets = JSON.parse(this.dataset.datasets || '[]')
+
+    this.initChart()
+  }
+
+  disconnectedCallback () {
+    if (this.chartInstance) {
+      this.chartInstance.destroy()
+      this.chartInstance = null
+    }
+  }
+
+  async initChart () {
+    const { default: Chart } = await import(/* webpackChunkName: "chartjs" */ 'chart.js/auto')
+
+    const canvas = this.querySelector('canvas')
+
+    const ctx = canvas.getContext('2d')
+
+    this.chartInstance = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: this.chartLabels,
+        datasets: this.chartDatasets
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: true,
+        animation: false,
+        scales: {
+          y: {
+            beginAtZero: true,
+            grace: '20%',
+            ticks: {
+              precision: 0
+            }
+          }
+        },
+        plugins: {
+          legend: {
+            display: false
+          }
+        }
+      }
+    })
+  }
+}
@@ -0,0 +1,14 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const input = this.querySelector('input')
+    const invalidMessage = this.dataset.invalidMessage || ''
+
+    input.addEventListener('invalid', () => {
+      input.setCustomValidity(input.value ? invalidMessage : '')
+    })
+
+    input.addEventListener('input', () => {
+      input.setCustomValidity('')
+    })
+  }
+}
@@ -0,0 +1,167 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.targetId = this.dataset.targetId
+    this.fieldId = this.dataset.fieldId
+    this.action = (this.dataset.action || '').trim()
+    this.expectedValue = this.dataset.value
+
+    this.targetEl = document.getElementById(this.targetId)
+    this.sourceEl = document.getElementById(this.fieldId)
+
+    this.bindListeners()
+
+    this.evaluateAndApply()
+  }
+
+  disconnectedCallback () {
+    this.unbindListeners()
+  }
+
+  bindListeners () {
+    this.eventsFor(this.sourceEl).forEach((ev) => {
+      this.sourceEl.addEventListener(ev, this.evaluateAndApply)
+    })
+  }
+
+  unbindListeners () {
+    this.eventsFor(this.sourceEl).forEach((ev) => {
+      this.sourceEl.removeEventListener(ev, this.evaluateAndApply)
+    })
+  }
+
+  eventsFor (el) {
+    if (!el) return []
+
+    const tag = el.tagName.toLowerCase()
+
+    if (tag === 'textarea') return ['input']
+    if (tag === 'input') return ['input', 'change']
+
+    return ['change']
+  }
+
+  evaluateAndApply = () => {
+    const fieldConditions = document.querySelectorAll(`field-condition[data-target-id="${this.targetId}"]`)
+
+    const result = [...fieldConditions].reduce((acc, cond) => {
+      if (cond.dataset.operation === 'or') {
+        acc.push(acc.pop() || cond.checkCondition())
+      } else {
+        acc.push(cond.checkCondition())
+      }
+
+      return acc
+    }, [])
+
+    this.apply(!result.includes(false))
+  }
+
+  checkCondition () {
+    const action = this.action
+    const actual = this.getSourceValue()
+    const expected = this.expectedValue
+
+    if (action === 'empty' || action === 'unchecked') return this.isEmpty(actual)
+    if (action === 'not_empty' || action === 'checked') return !this.isEmpty(actual)
+
+    if (['equal', 'not_equal', 'greater_than', 'less_than'].includes(action) && this.sourceEl?.getAttribute('type') === 'number') {
+      if (this.isEmpty(actual) || this.isEmpty(expected)) return false
+
+      const actualNumber = parseFloat(actual)
+      const expectedNumber = parseFloat(expected)
+
+      if (Number.isNaN(actualNumber) || Number.isNaN(expectedNumber)) return false
+
+      if (action === 'equal') return Math.abs(actualNumber - expectedNumber) < Number.EPSILON
+      if (action === 'not_equal') return Math.abs(actualNumber - expectedNumber) > Number.EPSILON
+      if (action === 'greater_than') return actualNumber > expectedNumber
+      if (action === 'less_than') return actualNumber < expectedNumber
+
+      return false
+    }
+
+    if (action === 'equal') {
+      const list = Array.isArray(actual) ? actual : [actual]
+      return list.filter((v) => v !== null && v !== undefined).map(String).includes(String(expected))
+    }
+
+    if (action === 'contains') return this.contains(actual, expected)
+
+    if (action === 'not_equal') {
+      const list = Array.isArray(actual) ? actual : [actual]
+      return !list.filter((v) => v !== null && v !== undefined).map(String).includes(String(expected))
+    }
+
+    if (action === 'does_not_contain') return !this.contains(actual, expected)
+
+    return true
+  }
+
+  getSourceValue () {
+    const el = this.sourceEl
+
+    if (!el) return
+
+    const tag = el.tagName.toLowerCase()
+    const type = (el.getAttribute('type') || '').toLowerCase()
+
+    if (tag === 'select') return el.value
+    if (tag === 'textarea') return el.value
+    if (tag === 'input' && type === 'checkbox') return el.checked ? (el.value || '1') : null
+    if (tag === 'input') return el.value
+
+    return el.value ?? null
+  }
+
+  isEmpty (obj) {
+    if (obj == null) return true
+
+    if (Array.isArray(obj)) {
+      return obj.length === 0
+    }
+
+    if (typeof obj === 'string') {
+      return obj.trim().length === 0
+    }
+
+    if (typeof obj === 'object') {
+      return Object.keys(obj).length === 0
+    }
+
+    if (obj === false) {
+      return true
+    }
+
+    return false
+  }
+
+  contains (actual, expected) {
+    if (expected === null || expected === undefined) return false
+
+    const exp = String(expected)
+
+    if (Array.isArray(actual)) return actual.filter((v) => v !== null && v !== undefined).map(String).includes(exp)
+
+    if (typeof actual === 'string') return actual.includes(exp)
+
+    return actual !== null && actual !== undefined && String(actual) === exp
+  }
+
+  apply (passed) {
+    const controls = this.targetEl.matches('input, select, textarea, button')
+      ? [this.targetEl]
+      : Array.from(this.targetEl.querySelectorAll('input, select, textarea, button'))
+
+    if (passed) {
+      this.targetEl.style.display = ''
+      this.targetEl.labels.forEach((label) => { label.style.display = '' })
+
+      controls.forEach((c) => (c.disabled = false))
+    } else {
+      this.targetEl.style.display = 'none'
+      this.targetEl.labels.forEach((label) => { label.style.display = 'none' })
+
+      controls.forEach((c) => (c.disabled = true))
+    }
+  }
+}
@@ -0,0 +1,55 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const iframeTemplate = this.querySelector('template')
+
+    this.observer = new IntersectionObserver((entries) => {
+      if (entries.some(e => e.isIntersecting)) {
+        iframeTemplate.parentElement.prepend(iframeTemplate.content)
+
+        this.observer.disconnect()
+      }
+    })
+
+    this.observer.observe(this)
+
+    window.addEventListener('message', this.messageHandler)
+  }
+
+  messageHandler = (event) => {
+    if (event.data.type === 'google-drive-files-picked') {
+      this.form.querySelectorAll('input[name="google_drive_file_ids[]"]').forEach(el => el.remove())
+
+      const files = event.data.files || []
+
+      files.forEach((file) => {
+        const input = document.createElement('input')
+        input.type = 'hidden'
+        input.name = 'google_drive_file_ids[]'
+        input.value = file.id
+        this.form.appendChild(input)
+      })
+
+      this.form.querySelector('button[type="submit"]').click()
+      this.loader.classList.remove('hidden')
+    } else if (event.data.type === 'google-drive-picker-loaded') {
+      this.loader.classList.add('hidden')
+      this.form.classList.remove('hidden')
+    } else if (event.data.type === 'google-drive-picker-request-oauth') {
+      document.getElementById(this.dataset.oauthButtonId).classList.remove('hidden')
+      this.classList.add('hidden')
+    }
+  }
+
+  disconnectedCallback () {
+    this.observer?.unobserve(this)
+    window.removeEventListener('message', this.messageHandler)
+  }
+
+  get form () {
+    return this.querySelector('form')
+  }
+
+  get loader () {
+    return document.getElementById('google_drive_loader')
+  }
+}
@@ -0,0 +1,385 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+import { actionable } from '@github/catalyst/lib/actionable'
+
+function loadTiptap () {
+  return Promise.all([
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/core'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-bold'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-italic'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-paragraph'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-text'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-hard-break'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-document'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-link'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-underline'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extensions'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/markdown'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/pm/state'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/pm/view')
+  ]).then(([core, bold, italic, paragraph, text, hardBreak, document, link, underline, extensions, markdown, pmState, pmView]) => ({
+    Editor: core.Editor,
+    Extension: core.Extension,
+    Bold: bold.default || bold,
+    Italic: italic.default || italic,
+    Paragraph: paragraph.default || paragraph,
+    Text: text.default || text,
+    HardBreak: hardBreak.default || hardBreak,
+    Document: document.default || document,
+    Link: link.default || link,
+    Underline: underline.default || underline,
+    UndoRedo: extensions.UndoRedo,
+    Markdown: markdown.Markdown,
+    Plugin: pmState.Plugin,
+    Decoration: pmView.Decoration,
+    DecorationSet: pmView.DecorationSet
+  }))
+}
+
+class LinkTooltip {
+  constructor (container, editor) {
+    this.container = container
+    this.editor = editor
+
+    const template = document.createElement('template')
+
+    template.innerHTML = container.dataset.linkTooltipHtml
+
+    this.tooltip = template.content.firstElementChild
+
+    this.input = this.tooltip.querySelector('input')
+    this.saveButton = this.tooltip.querySelector('[data-role="link-save"]')
+    this.removeButton = this.tooltip.querySelector('[data-role="link-remove"]')
+
+    container.style.position = 'relative'
+    container.appendChild(this.tooltip)
+  }
+
+  isVisible () {
+    return !this.tooltip.classList.contains('hidden')
+  }
+
+  normalizeUrl (url) {
+    if (!url) return url
+    if (/^{/i.test(url)) return url
+    if (/^https?:\/\//i.test(url)) return url
+    if (/^mailto:/i.test(url)) return url
+
+    return `https://${url}`
+  }
+
+  show (url, pos, { focus = false } = {}) {
+    this.input.value = url || ''
+    this.removeButton.classList.toggle('hidden', !url)
+
+    this.tooltip.classList.remove('hidden')
+
+    const coords = this.editor.view.coordsAtPos(pos)
+    const containerRect = this.container.getBoundingClientRect()
+
+    this.tooltip.style.left = `${coords.left - containerRect.left}px`
+    this.tooltip.style.top = `${coords.bottom - containerRect.top + 4}px`
+
+    if (focus) this.input.focus()
+
+    this.saveHandler = () => {
+      const inputUrl = this.input.value.trim()
+
+      if (inputUrl) {
+        this.editor.chain().focus().extendMarkRange('link').setLink({ href: this.normalizeUrl(inputUrl) }).run()
+      }
+
+      this.hide()
+    }
+
+    this.removeHandler = () => {
+      this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+
+      this.hide()
+    }
+
+    this.keyHandler = (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        this.saveHandler()
+      } else if (e.key === 'Escape') {
+        e.preventDefault()
+        this.hide()
+      }
+    }
+
+    this.saveButton.addEventListener('click', this.saveHandler, { once: true })
+    this.removeButton.addEventListener('click', this.removeHandler, { once: true })
+    this.input.addEventListener('keydown', this.keyHandler)
+  }
+
+  hide () {
+    if (this.saveHandler) {
+      this.saveButton.removeEventListener('click', this.saveHandler)
+      this.saveHandler = null
+    }
+
+    if (this.removeHandler) {
+      this.removeButton.removeEventListener('click', this.removeHandler)
+      this.removeHandler = null
+    }
+
+    if (this.keyHandler) {
+      this.input.removeEventListener('keydown', this.keyHandler)
+      this.keyHandler = null
+    }
+
+    this.tooltip.classList.add('hidden')
+    this.currentMark = null
+  }
+}
+
+export default actionable(targetable(class extends HTMLElement {
+  static [target.static] = [
+    'textarea',
+    'editorElement',
+    'boldButton',
+    'italicButton',
+    'underlineButton',
+    'linkButton'
+  ]
+
+  async connectedCallback () {
+    if (!this.textarea || !this.editorElement) return
+
+    this.textarea.style.display = 'none'
+    this.adjustShortcutsForPlatform()
+
+    const { Editor, Extension, Bold, Italic, Paragraph, Text, HardBreak, UndoRedo, Document, Link, Underline, Markdown, Plugin, Decoration, DecorationSet } = await loadTiptap()
+
+    const buildDecorations = (doc) => {
+      const decorations = []
+      const regex = /\{\{?[a-zA-Z0-9_.-]+\}\}?/g
+
+      doc.descendants((node, pos) => {
+        if (!node.isText) return
+
+        let match
+
+        while ((match = regex.exec(node.text)) !== null) {
+          decorations.push(
+            Decoration.inline(pos + match.index, pos + match.index + match[0].length, {
+              class: 'bg-amber-100 py-0.5 px-1 rounded'
+            })
+          )
+        }
+      })
+
+      return DecorationSet.create(doc, decorations)
+    }
+
+    const VariableHighlight = Extension.create({
+      name: 'variableHighlight',
+      addProseMirrorPlugins () {
+        return [new Plugin({
+          state: {
+            init (_, { doc }) {
+              return buildDecorations(doc)
+            },
+            apply (tr, oldSet) {
+              return tr.docChanged ? buildDecorations(tr.doc) : oldSet
+            }
+          },
+          props: {
+            decorations (state) {
+              return this.getState(state)
+            }
+          }
+        })]
+      }
+    })
+
+    this.editor = new Editor({
+      element: this.editorElement,
+      extensions: [
+        Markdown,
+        Document,
+        Paragraph,
+        Text,
+        Bold,
+        Italic,
+        HardBreak.extend({
+          addKeyboardShortcuts () {
+            return {
+              Enter: () => this.editor.commands.setHardBreak()
+            }
+          }
+        }),
+        UndoRedo,
+        Link.extend({
+          inclusive: true,
+          addKeyboardShortcuts: () => ({
+            'Mod-k': () => {
+              this.toggleLink()
+
+              return true
+            }
+          })
+        }).configure({
+          openOnClick: false,
+          HTMLAttributes: {
+            class: 'link',
+            'data-turbo': 'false',
+            style: 'color: #2563eb; text-decoration: underline; cursor: text;'
+          }
+        }),
+        Underline,
+        VariableHighlight
+      ],
+      content: (this.textarea.value || '').trim().replace(/ *\n/g, '<br>'),
+      contentType: 'markdown',
+      editorProps: {
+        attributes: {
+          style: 'min-height: 220px',
+          dir: 'auto',
+          class: 'p-3 outline-none focus:outline-none'
+        }
+      },
+      onUpdate: ({ editor }) => {
+        this.textarea.value = editor.getMarkdown()
+        this.textarea.dispatchEvent(new Event('input', { bubbles: true }))
+      },
+      onSelectionUpdate: ({ editor }) => {
+        this.updateToolbarState()
+        this.handleLinkTooltip(editor)
+      },
+      onBlur: () => {
+        setTimeout(() => {
+          if (!this.linkTooltip.tooltip.contains(document.activeElement)) {
+            this.linkTooltip.hide()
+          }
+        }, 0)
+      }
+    })
+
+    this.linkTooltip = new LinkTooltip(this, this.editor)
+  }
+
+  adjustShortcutsForPlatform () {
+    if ((navigator.userAgentData?.platform || navigator.platform)?.toLowerCase()?.includes('mac')) {
+      this.querySelectorAll('.tooltip[data-tip]').forEach(tooltip => {
+        const tip = tooltip.getAttribute('data-tip')
+
+        if (tip && tip.includes('Ctrl')) {
+          tooltip.setAttribute('data-tip', tip.replace(/Ctrl/g, '⌘'))
+        }
+      })
+    }
+  }
+
+  bold (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleBold().run()
+    this.updateToolbarState()
+  }
+
+  italic (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleItalic().run()
+    this.updateToolbarState()
+  }
+
+  underline (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleUnderline().run()
+    this.updateToolbarState()
+  }
+
+  linkSelection (e) {
+    e.preventDefault()
+
+    this.toggleLink()
+    this.updateToolbarState()
+  }
+
+  undo (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().undo().run()
+    this.updateToolbarState()
+  }
+
+  redo (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().redo().run()
+    this.updateToolbarState()
+  }
+
+  updateToolbarState () {
+    this.boldButton.classList.toggle('bg-base-200', this.editor.isActive('bold'))
+    this.italicButton.classList.toggle('bg-base-200', this.editor.isActive('italic'))
+    this.underlineButton.classList.toggle('bg-base-200', this.editor.isActive('underline'))
+    this.linkButton.classList.toggle('bg-base-200', this.editor.isActive('link'))
+  }
+
+  handleLinkTooltip (editor) {
+    const { from } = editor.state.selection
+    const mark = editor.state.doc.resolve(from).marks().find(m => m.type.name === 'link')
+
+    if (!mark) {
+      if (this.linkTooltip.isVisible()) this.linkTooltip.hide()
+
+      return
+    }
+
+    if (this.linkTooltip.isVisible() && this.linkTooltip.currentMark === mark) return
+
+    let linkStart = from
+    const start = editor.state.doc.resolve(from).start()
+
+    for (let i = from - 1; i >= start; i--) {
+      if (editor.state.doc.resolve(i).marks().some(m => m.eq(mark))) {
+        linkStart = i
+      } else {
+        break
+      }
+    }
+
+    this.linkTooltip.hide()
+    this.linkTooltip.show(mark.attrs.href, linkStart > start ? linkStart - 1 : linkStart)
+    this.linkTooltip.currentMark = mark
+  }
+
+  toggleLink () {
+    if (this.editor.isActive('link')) {
+      this.linkTooltip.hide()
+      this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      this.updateToolbarState()
+    } else {
+      const { from } = this.editor.state.selection
+
+      this.linkTooltip.hide()
+      this.linkTooltip.show(this.editor.getAttributes('link').href, from, { focus: true })
+    }
+  }
+
+  insertVariable (e) {
+    const variable = e.target.closest('[data-variable]')?.dataset.variable
+
+    if (variable) {
+      const { from, to } = this.editor.state.selection
+
+      if (variable.includes('link') && from !== to) {
+        this.editor.chain().focus().setLink({ href: `{${variable}}` }).run()
+      } else {
+        this.editor.chain().focus().insertContent(`{${variable}}`).run()
+      }
+    }
+  }
+
+  disconnectedCallback () {
+    this.linkTooltip.hide()
+
+    if (this.editor) {
+      this.editor.destroy()
+    }
+  }
+}))
@@ -0,0 +1,16 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const src = this.getAttribute('src')
+    const link = document.createElement('a')
+
+    link.href = src
+    link.setAttribute('data-turbo-frame', 'modal')
+    link.style.display = 'none'
+
+    this.appendChild(link)
+
+    link.click()
+
+    window.history.replaceState({}, document.title, window.location.pathname)
+  }
+}
@@ -0,0 +1,15 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const eventType = this.dataset.on || 'click'
+    const selector = document.getElementById(this.dataset.selectorId) || this
+    const eventElement = eventType === 'submit' ? this.querySelector('form') : this
+
+    eventElement.addEventListener(eventType, (event) => {
+      if (eventType === 'click') {
+        event.preventDefault()
+      }
+
+      selector.remove()
+    })
+  }
+}
@@ -0,0 +1,19 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.querySelectorAll('input[type="radio"]').forEach(radio => {
+      radio.addEventListener('change', (event) => {
+        const rating = parseInt(event.target.value)
+
+        if (rating === 10) {
+          window.review_comment.value = ''
+          window.review_comment.classList.add('hidden')
+          window.review_submit.classList.add('hidden')
+          event.target.form.submit()
+        } else {
+          window.review_comment.classList.remove('hidden')
+          window.review_submit.classList.remove('hidden')
+        }
+      })
+    })
+  }
+}
@@ -0,0 +1,10 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.selector = document.getElementById(this.dataset.selectorId)
+
+    this.addEventListener('click', () => {
+      this.selector.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      history.replaceState(null, null, `#${this.dataset.selectorId}`)
+    })
+  }
+}
@@ -13,6 +13,14 @@ export default class extends HTMLElement {
        this.input.classList.remove('w-60')
      }
    })
+
+    this.button.addEventListener('click', (event) => {
+      if (!this.input.value && document.activeElement !== this.input) {
+        event.preventDefault()
+
+        this.input.focus()
+      }
+    })
  }

  get input () {
@@ -22,4 +30,8 @@ export default class extends HTMLElement {
  get title () {
    return document.querySelector(this.dataset.title)
  }
+
+  get button () {
+    return this.querySelector('button')
+  }
 }
@@ -0,0 +1,11 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const input = this.dataset.inputId ? document.getElementById(this.dataset.inputId) : this.querySelector('input')
+
+    this.firstElementChild.addEventListener(this.dataset.on || 'click', () => {
+      if (this.dataset.emptyOnly !== 'true' || !input.value) {
+        input.value = this.dataset.value
+      }
+    })
+  }
+}
@@ -0,0 +1,17 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('change', (event) => {
+      const targetValue = this.dataset.value
+      const selectorId = this.dataset.selectorId
+      const targetElement = document.getElementById(selectorId)
+
+      if (event.target.value === targetValue) {
+        targetElement.classList.remove('hidden')
+      } else {
+        targetElement.classList.add('hidden')
+        targetElement.value = ''
+        event.target.form.requestSubmit()
+      }
+    })
+  }
+}
@@ -5,17 +5,28 @@ export default targetable(class extends HTMLElement {
  static [target.static] = ['canvas', 'input', 'clear', 'button']

  async connectedCallback () {
-    const scale = 3
-
-    this.canvas.width = this.canvas.parentNode.clientWidth * scale
-    this.canvas.height = this.canvas.parentNode.clientHeight * scale
-
-    this.canvas.getContext('2d').scale(scale, scale)
-
    const { default: SignaturePad } = await import('signature_pad')

+    this.setCanvasSize()
+
    this.pad = new SignaturePad(this.canvas)

+    this.resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        if (!this.canvas) return
+
+        const { width, height } = this.canvas
+
+        this.setCanvasSize()
+
+        if (this.canvas.width !== width || this.canvas.height !== height) {
+          this.redrawCanvas(width, height)
+        }
+      })
+    })
+
+    this.resizeObserver.observe(this.canvas.parentNode)
+
    this.clear.addEventListener('click', (e) => {
      e.preventDefault()

@@ -47,4 +58,38 @@ export default targetable(class extends HTMLElement {

    this.closest('form').requestSubmit()
  }
+
+  disconnectedCallback () {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+  }
+
+  setCanvasSize () {
+    const scale = 3
+
+    const width = this.canvas.parentNode.clientWidth
+    const height = this.canvas.parentNode.clientWidth / 2.5
+
+    if (this.canvas.width !== width * scale || this.canvas.height !== height * scale) {
+      this.canvas.width = width * scale
+      this.canvas.height = height * scale
+
+      this.canvas.getContext('2d').scale(scale, scale)
+    }
+  }
+
+  redrawCanvas (oldWidth, oldHeight) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+      const sx = this.canvas.width / oldWidth
+      const sy = this.canvas.height / oldHeight
+
+      const scaledData = this.pad.toData().map((stroke) => ({
+        ...stroke,
+        points: stroke.points.map((p) => ({ ...p, x: p.x * sx, y: p.y * sy }))
+      }))
+
+      this.pad.fromData(scaledData)
+    }
+  }
 })
@@ -1,11 +1,27 @@
 export default class extends HTMLElement {
  connectedCallback () {
+    const form = this.querySelector('form') || (this.querySelector('input, button, select') || this.lastElementChild).form
+
    if (this.dataset.interval) {
      this.interval = setInterval(() => {
-        this.querySelector('form').requestSubmit()
+        form.requestSubmit()
      }, parseInt(this.dataset.interval))
+    } else if (this.dataset.on) {
+      this.lastElementChild.addEventListener(this.dataset.on, (event) => {
+        if (this.dataset.disable === 'true') {
+          form.querySelector('[type="submit"]')?.setAttribute('disabled', true)
+        }
+
+        if (this.dataset.submitIfValue === 'true') {
+          if (event.target.value) {
+            form.requestSubmit()
+          }
+        } else {
+          form.requestSubmit()
+        }
+      })
    } else {
-      this.querySelector('form').requestSubmit()
+      form.requestSubmit()
    }
  }

@@ -1,12 +1,18 @@
 export default class extends HTMLElement {
  connectedCallback () {
    this.input.addEventListener('change', (event) => {
+      if (!this.target) return
+
+      const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value
+      const dataValue = this.dataset.value === 'false' ? false : this.dataset.value || true
+
      if (this.dataset.attribute) {
-        this.target[this.dataset.attribute] = event.target.checked
+        this.target[this.dataset.attribute] = value === dataValue
      }

      if (this.dataset.className) {
-        this.target.classList.toggle(this.dataset.className, event.target.value !== this.dataset.value)
+        this.target.classList.toggle(this.dataset.className, value !== dataValue)
+
        if (this.dataset.className === 'hidden' && this.target.tagName === 'INPUT') {
          this.target.disabled = event.target.value !== this.dataset.value
        }
@@ -0,0 +1,19 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const button = this.querySelector('a, button, label')
+
+    const target = this.dataset.targetId ? document.getElementById(this.dataset.targetId) : button
+
+    button.addEventListener('click', () => {
+      this.dataset.classes.split(' ').forEach((cls) => {
+        if (this.dataset.action === 'remove') {
+          target.classList.remove(cls)
+        } else if (this.dataset.action === 'add') {
+          target.classList.add(cls)
+        } else {
+          target.classList.toggle(cls)
+        }
+      })
+    })
+  }
+}
@@ -12,6 +12,6 @@ export default class extends HTMLElement {
  }

  get button () {
-    return this.querySelector('button')
+    return this.querySelector('button, label')
  }
 }
@@ -4,9 +4,15 @@ export default actionable(class extends HTMLElement {
  trigger (event) {
    const elementIds = JSON.parse(this.dataset.elementIds)

-    elementIds.forEach((elementId) => {
-      document.getElementById(elementId).classList.toggle('hidden', (event.target.dataset.toggleId || event.target.value) !== elementId)
-    })
+    if (event.target.type === 'checkbox') {
+      elementIds.forEach((elementId) => {
+        document.getElementById(elementId)?.classList.toggle('hidden')
+      })
+    } else {
+      elementIds.forEach((elementId) => {
+        document.getElementById(elementId).classList.toggle('hidden', (event.target.dataset.toggleId || event.target.value) !== elementId)
+      })
+    }

    if (this.dataset.focusId) {
      document.getElementById(this.dataset.focusId)?.focus()
@@ -6,6 +6,7 @@ import ToggleSubmit from './elements/toggle_submit'
 import FetchForm from './elements/fetch_form'
 import ScrollButtons from './elements/scroll_buttons'
 import PageContainer from './elements/page_container'
+import SubmitForm from './elements/submit_form'

 const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)

@@ -14,6 +15,7 @@ safeRegisterElement('toggle-submit', ToggleSubmit)
 safeRegisterElement('fetch-form', FetchForm)
 safeRegisterElement('scroll-buttons', ScrollButtons)
 safeRegisterElement('page-container', PageContainer)
+safeRegisterElement('submit-form', SubmitForm)
 safeRegisterElement('submission-form', class extends HTMLElement {
  connectedCallback () {
    this.appElem = document.createElement('div')
@@ -35,6 +37,7 @@ safeRegisterElement('submission-form', class extends HTMLElement {
      withSignatureId: this.dataset.withSignatureId === 'true',
      requireSigningReason: this.dataset.requireSigningReason === 'true',
      withConfetti: this.dataset.withConfetti !== 'false',
+      withFieldLabels: this.dataset.withFieldLabels !== 'false',
      withDisclosure: this.dataset.withDisclosure === 'true',
      reuseSignature: this.dataset.reuseSignature !== 'false',
      withTypedSignature: this.dataset.withTypedSignature !== 'false',
@@ -19,7 +19,7 @@ button .disabled {
  display: none;
 }

-button[disabled] .disabled {
+button[disabled] .disabled, button.btn-disabled .disabled {
  display: initial;
 }

@@ -27,7 +27,7 @@ button .enabled {
  display: initial;
 }

-button[disabled] .enabled {
+button[disabled] .enabled, button.btn-disabled .enabled {
  display: none;
 }

@@ -56,7 +56,7 @@ function mouseoverListener (event) {

  const requestOptions = {
    credentials: 'same-origin',
-    headers: { Accept: 'text/html, application/xhtml+xml', 'VND.PREFETCH': 'true' },
+    headers: { Accept: 'text/html, application/xhtml+xml', 'VND.PREFETCH': 'true', 'X-Turbo': 'true' },
    method: 'GET',
    redirect: 'follow'
  }
@@ -60,6 +60,11 @@
      class="object-contain mx-auto"
      :src="stamp.url"
    >
+    <img
+      v-else-if="field.type === 'kba' && kba"
+      class="object-contain mx-auto"
+      :src="kba.url"
+    >
    <div
      v-else-if="field.type === 'signature' && signature"
      class="flex justify-between h-full gap-1 overflow-hidden w-full"
@@ -177,8 +182,8 @@
    </div>
    <div
      v-else-if="field.type === 'cells'"
-      class="w-full flex items-center"
-      :class="{ 'justify-end': field.preferences?.align === 'right', ...fontClasses }"
+      class="w-full flex"
+      :class="{ 'justify-end': field.preferences?.align === 'right', ...alignClasses, ...fontClasses }"
    >
      <div
        v-for="(char, index) in modelValue"
@@ -219,6 +224,48 @@
      >
        {{ formatNumber(modelValue, field.preferences?.format) }}
      </span>
+      <span
+        v-else-if="field.type === 'strikethrough'"
+        class="w-full h-full flex items-center justify-center"
+      >
+        <svg
+          v-if="(((1000.0 / pageWidth) * pageHeight) * area.h) < 40.0"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+        >
+          <line
+            x1="0"
+            y1="50%"
+            x2="100%"
+            y2="50%"
+            :stroke="field.preferences?.color || 'red'"
+            :stroke-width="strikethroughWidth"
+          />
+        </svg>
+        <svg
+          v-else
+          xmlns="http://www.w3.org/2000/svg"
+          :style="{ overflow: 'visible', width: `calc(100% - ${strikethroughWidth})`, height: `calc(100% - ${strikethroughWidth})` }"
+        >
+          <line
+            x1="0"
+            y1="0"
+            x2="100%"
+            y2="100%"
+            :stroke="field.preferences?.color || 'red'"
+            :stroke-width="strikethroughWidth"
+          />
+          <line
+            x1="100%"
+            y1="0"
+            x2="0"
+            y2="100%"
+            :stroke="field.preferences?.color || 'red'"
+            :stroke-width="strikethroughWidth"
+          />
+        </svg>
+      </span>
      <span
        v-else
        class="whitespace-pre-wrap"
@@ -230,7 +277,7 @@

 <script>
 import MarkdownContent from './markdown_content'
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconId } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconId, IconUserScan } from '@tabler/icons-vue'

 export default {
  name: 'FieldArea',
@@ -260,6 +307,16 @@ export default {
      required: false,
      default: false
    },
+    pageWidth: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    pageHeight: {
+      type: Number,
+      required: false,
+      default: 0
+    },
    isValueSet: {
      type: Boolean,
      required: false,
@@ -339,7 +396,15 @@ export default {
        stamp: this.t('stamp'),
        payment: this.t('payment'),
        phone: this.t('phone'),
-        verification: this.t('verify_id')
+        verification: this.t('verify_id'),
+        kba: this.t('kba')
+      }
+    },
+    strikethroughWidth () {
+      if (this.isInlineSize) {
+        return '0.6cqmin'
+      } else {
+        return 'clamp(0px, 0.5vw, 6px)'
      }
    },
    isShowSignatureId () {
@@ -395,7 +460,8 @@ export default {
        multiple: IconChecks,
        phone: IconPhoneCheck,
        payment: IconCreditCard,
-        verification: IconId
+        verification: IconId,
+        kba: IconUserScan
      }
    },
    image () {
@@ -412,6 +478,13 @@ export default {
        return null
      }
    },
+    kba () {
+      if (this.field.type === 'kba') {
+        return this.attachmentsIndex[this.modelValue]
+      } else {
+        return null
+      }
+    },
    signature () {
      if (this.field.type === 'signature') {
        return this.attachmentsIndex[this.modelValue]
@@ -494,10 +567,14 @@ export default {
        style.color = this.field.preferences.color
      }

+      if (this.field.preferences?.background) {
+        style.background = this.field.preferences.background
+      }
+
      return style
    },
    isNarrow () {
-      return this.area.h > 0 && (this.area.w / this.area.h) > 6
+      return this.area.h > 0 && ((this.area.w * this.pageWidth) / (this.area.h * this.pageHeight)) > 4.5
    }
  },
  watch: {
@@ -11,30 +11,37 @@
        v-for="(area, areaIndex) in field.areas"
        :key="areaIndex"
      >
-        <Teleport
-          v-if="findPageElementForArea(area)"
-          :to="findPageElementForArea(area)"
+        <template
+          v-for="(pageElem, index) in [findPageElementForArea(area)]"
+          :key="index"
        >
-          <FieldArea
-            :ref="setAreaRef"
-            v-model="values[field.uuid]"
-            :values="values"
-            :field="field"
-            :area="area"
-            :submittable="submittable"
-            :field-index="fieldIndex"
-            :is-inline-size="isInlineSize"
-            :scroll-padding="scrollPadding"
-            :submitter="submitter"
-            :with-field-placeholder="withFieldPlaceholder"
-            :with-signature-id="withSignatureId"
-            :is-active="currentStep === step"
-            :with-label="withLabel && !withFieldPlaceholder && step.length < 2"
-            :is-value-set="step.some((f) => f.uuid in values)"
-            :attachments-index="attachmentsIndex"
-            @click="[$emit('focus-step', stepIndex), maybeScrollOnClick(field, area)]"
-          />
-        </Teleport>
+          <Teleport
+            v-if="pageElem"
+            :to="pageElem"
+          >
+            <FieldArea
+              :ref="setAreaRef"
+              v-model="values[field.uuid]"
+              :values="values"
+              :field="field"
+              :area="area"
+              :submittable="submittable"
+              :page-width="1400"
+              :page-height="(1400.0 / pageElem.offsetWidth) * pageElem.offsetHeight"
+              :field-index="fieldIndex"
+              :is-inline-size="isInlineSize"
+              :scroll-padding="scrollPadding"
+              :submitter="submitter"
+              :with-field-placeholder="withFieldPlaceholder"
+              :with-signature-id="withSignatureId"
+              :is-active="currentStep === step"
+              :with-label="withLabel && !withFieldPlaceholder && step.length < 2"
+              :is-value-set="step.some((f) => f.uuid in values)"
+              :attachments-index="attachmentsIndex"
+              @click="[$emit('focus-step', stepIndex), maybeScrollOnClick(field, area)]"
+            />
+          </Teleport>
+        </template>
      </template>
    </template>
  </template>
@@ -161,6 +161,11 @@ export default {
      required: false,
      default: false
    },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    completedButton: {
      type: Object,
      required: false,
@@ -214,7 +219,10 @@ export default {
    download () {
      this.isDownloading = true

-      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then(async (response) => {
+      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`, {
+        method: 'GET',
+        ...this.fetchOptions
+      }).then(async (response) => {
        if (response.ok) {
          const urls = await response.json()
          const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
@@ -42,7 +42,7 @@
      <MarkdownContent :string="field.description" />
    </div>
    <AppearsOn :field="field" />
-    <div class="text-center">
+    <div class="text-center flex">
      <input
        :id="field.uuid"
        ref="input"
@@ -163,12 +163,20 @@ export default {
            return fetch(this.baseUrl + '/api/attachments', {
              method: 'POST',
              body: formData
-            }).then(resp => resp.json()).then((data) => {
-              return data
+            }).then(async (resp) => {
+              const data = await resp.json()
+
+              if (resp.status === 422) {
+                alert(data.error)
+              } else {
+                return data
+              }
            })
          }
        })).then((result) => {
-        this.$emit('upload', result)
+        if (result && result[0]) {
+          this.$emit('upload', result)
+        }
      }).finally(() => {
        this.isLoading = false
      })
@@ -8,7 +8,7 @@
    :scroll-el="scrollEl"
    :with-signature-id="withSignatureId"
    :attachments-index="attachmentsIndex"
-    :with-label="!isAnonymousChecboxes && showFieldNames"
+    :with-label="withFieldLabels && !isAnonymousChecboxes && showFieldNames"
    :current-step="currentStepFields"
    :scroll-padding="scrollPadding"
    @focus-step="[saveStep(), currentField.type !== 'checkbox' ? isFormVisible = true : '', goToStep($event, false, true)]"
@@ -23,7 +23,7 @@
  <FormulaFieldAreas
    v-if="formulaFields.length"
    :fields="formulaFields"
-    :readonly-values="readonlyConditionalFieldValues"
+    :readonly-values="readonlyFieldValues"
    :values="values"
  />
  <Teleport
@@ -69,7 +69,7 @@
    id="expand_form_button"
    class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3 expand-form-button text-base"
    style="width: 96%; margin-left: 2%"
-    @click.prevent="[isFormVisible = true, scrollIntoField(currentField)]"
+    @click.prevent="[isFormVisible = true, $nextTick(() => scrollIntoField(currentField))]"
  >
    <template v-if="['initials', 'signature'].includes(currentField.type)">
      <IconWritingSign stroke-width="1.5" />
@@ -133,6 +133,12 @@
          name="_method"
          type="hidden"
        >
+        <input
+          v-if="validate === false"
+          value="false"
+          name="validate"
+          type="hidden"
+        >
        <div class="md:mt-4">
          <div v-if="['cells', 'text'].includes(currentField.type)">
            <TextStep
@@ -349,8 +355,6 @@
                        :id="field.uuid"
                        type="checkbox"
                        class="base-checkbox !h-7 !w-7"
-                        :oninvalid="`this.setCustomValidity('${t('please_check_the_box_to_continue')}')`"
-                        :onchange="`this.setCustomValidity(validity.valueMissing ? '${t('please_check_the_box_to_continue')}' : '');`"
                        :required="field.required"
                        :checked="!!values[field.uuid]"
                        @click="[scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
@@ -391,7 +395,9 @@
            v-model="values[currentField.uuid]"
            :reason="values[currentField.preferences?.reason_field_uuid]"
            :field="currentField"
+            :values="values"
            :previous-value="previousSignatureValueFor(currentField) || previousSignatureValue"
+            :touch-attachment-uuid="previousSignatureValue"
            :with-typed-signature="withTypedSignature"
            :remember-signature="rememberSignature"
            :attachments-index="attachmentsIndex"
@@ -403,6 +409,7 @@
            :submitter="submitter"
            :show-field-names="showFieldNames"
            @update:reason="values[currentField.preferences?.reason_field_uuid] = $event"
+            @touch-attachment="attachmentsIndex[previousSignatureValue] ? attachmentsIndex[previousSignatureValue].created_at = new Date() : null"
            @attached="attachments.push($event)"
            @start="scrollIntoField(currentField)"
            @minimize="minimizeForm"
@@ -414,6 +421,7 @@
            v-model="values[currentField.uuid]"
            :field="currentField"
            :dry-run="dryRun"
+            :submitter="submitter"
            :previous-value="previousInitialsValue"
            :attachments-index="attachmentsIndex"
            :show-field-names="showFieldNames"
@@ -454,11 +462,24 @@
            v-model="values[currentField.uuid]"
            :field="currentField"
            :submitter-slug="submitterSlug"
+            :fields="formulaFields"
            :values="values"
+            :readonly-values="readonlyFieldValues"
            @attached="attachments.push($event)"
            @focus="scrollIntoField(currentField)"
            @submit="!isSubmitting && submitStep()"
          />
+          <KbaStep
+            v-else-if="currentField.type === 'kba'"
+            ref="currentStep"
+            :key="currentField.uuid"
+            :submitter="submitter"
+            :empty-value-required-step="emptyValueRequiredStep"
+            :field="currentField"
+            :submitter-slug="submitterSlug"
+            :values="values"
+            @submit="!isSubmitting && submitStep()"
+          />
          <VerificationStep
            v-else-if="currentField.type === 'verification'"
            ref="currentStep"
@@ -474,7 +495,7 @@
          />
        </div>
        <div
-          v-if="(currentField.type !== 'payment' && currentField.type !== 'verification') || submittedValues[currentField.uuid]"
+          v-if="(currentField.type !== 'payment' && currentField.type !== 'verification' && currentField.type !== 'kba') || submittedValues[currentField.uuid]"
          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-4 md:mt-6'"
        >
          <button
@@ -509,6 +530,7 @@
        v-else-if="isInvite"
        :submitters="inviteSubmitters"
        :optional-submitters="optionalInviteSubmitters"
+        :fetch-options="fetchOptions"
        :submitter-slug="submitterSlug"
        :authenticity-token="authenticityToken"
        :url="baseUrl + submitPath + '/invite'"
@@ -522,6 +544,7 @@
        :has-signature-fields="stepFields.some((fields) => fields.some((f) => ['signature', 'initials'].includes(f.type)))"
        :has-multiple-documents="hasMultipleDocuments"
        :completed-button="completedRedirectUrl ? {} : completedButton"
+        :fetch-options="fetchOptions"
        :completed-message="completedRedirectUrl ? {} : completedMessage"
        :with-send-copy-button="withSendCopyButton && !completedRedirectUrl"
        :with-download-button="withDownloadButton && !completedRedirectUrl && !dryRun"
@@ -531,17 +554,21 @@
      />
      <div
        v-if="stepFields.length < 80"
-        class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1"
+        class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1 select-none"
      >
        <div class="flex items-center flex-wrap steps-progress">
-          <a
+          <template
            v-for="(step, index) in stepFields"
            :key="step[0].uuid"
-            href="#"
-            class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
-            :class="{ 'bg-base-300 steps-progress-current': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
-            @click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
-          />
+          >
+            <a
+              v-if="!onlyRequiredFields || step.some((f) => f.required)"
+              href="#"
+              class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
+              :class="{ 'bg-base-300 steps-progress-current': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
+              @click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
+            />
+          </template>
        </div>
      </div>
      <div
@@ -563,6 +590,7 @@ import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
 import PaymentStep from './payment_step'
 import VerificationStep from './verification_step'
+import KbaStep from './kba_step'
 import TextStep from './text_step'
 import NumberStep from './number_step'
 import DateStep from './date_step'
@@ -574,6 +602,18 @@ import AppearsOn from './appears_on'
 import i18n from './i18n'
 import { sanitizeUrl } from '@braintree/sanitize-url'

+if (typeof URL.canParse !== 'function') {
+  URL.canParse = function (url, base) {
+    try {
+      const parsed = new URL(url, base)
+
+      return !!parsed
+    } catch {
+      return false
+    }
+  }
+}
+
 const isEmpty = (obj) => {
  if (obj == null) return true

@@ -607,6 +647,7 @@ export default {
    AttachmentStep,
    InitialsStep,
    VerificationStep,
+    KbaStep,
    InviteForm,
    MultiSelectStep,
    IconInnerShadowTop,
@@ -639,6 +680,11 @@ export default {
      required: false,
      default: () => []
    },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    optionalInviteSubmitters: {
      type: Array,
      required: false,
@@ -659,6 +705,11 @@ export default {
      required: false,
      default: false
    },
+    onlyRequiredFields: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    requireSigningReason: {
      type: Boolean,
      required: false,
@@ -716,6 +767,11 @@ export default {
      required: false,
      default: false
    },
+    validate: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
    withDisclosure: {
      type: Boolean,
      required: false,
@@ -726,6 +782,11 @@ export default {
      required: false,
      default: true
    },
+    withFieldLabels: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
    withConfetti: {
      type: Boolean,
      required: false,
@@ -872,16 +933,25 @@ export default {
    },
    readonlyConditionalFieldValues () {
      return this.readonlyConditionalFields.reduce((acc, f) => {
-        acc[f.uuid] = (this.values[f.uuid] || f.default_value)
+        acc[f.uuid] = isEmpty(this.values[f.uuid]) ? f.default_value : this.values[f.uuid]
+
+        return acc
+      }, {})
+    },
+    readonlyFieldValues () {
+      return this.readonlyFields.reduce((acc, f) => {
+        acc[f.uuid] = isEmpty(this.values[f.uuid]) ? f.default_value : this.values[f.uuid]

        return acc
      }, {})
    },
    attachmentConditionsIndex () {
+      const cache = {}
+
      return this.schema.reduce((acc, item) => {
        if (item.conditions?.length) {
          if (item.conditions.every((c) => this.fieldsUuidIndex[c.field_uuid])) {
-            acc[item.attachment_uuid] = this.checkFieldConditions(item)
+            acc[item.attachment_uuid] = this.checkFieldConditions(item, cache)
          } else {
            acc[item.attachment_uuid] = true
          }
@@ -902,7 +972,13 @@ export default {
    submitButtonText () {
      if (this.alwaysMinimize) {
        return this.t('submit')
-      } else if (this.stepFields.length === this.currentStep + 1) {
+      } else if (!this.onlyRequiredFields && this.stepFields.length === this.currentStep + 1) {
+        if (this.currentField.type === 'signature') {
+          return this.t('sign_and_complete')
+        } else {
+          return this.t('complete')
+        }
+      } else if (this.onlyRequiredFields && !this.findNextStep(this.currentStep)) {
        if (this.currentField.type === 'signature') {
          return this.t('sign_and_complete')
        } else {
@@ -948,7 +1024,9 @@ export default {
    },
    previousInitialsValue () {
      if (this.reuseSignature !== false) {
-        const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
+        const initialsField = this.fields.findLast
+          ? this.fields.findLast((field) => field.type === 'initials' && !!this.values[field.uuid])
+          : [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])

        return this.values[initialsField?.uuid]
      } else {
@@ -972,13 +1050,18 @@ export default {
      return this.currentStepFields[0]
    },
    readonlyConditionalFields () {
-      return this.fields.filter((f) => f.readonly && f.conditions?.length && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
+      return this.readonlyFields.filter((f) => f.conditions?.length)
+    },
+    readonlyFields () {
+      const cache = {}
+
+      return this.fields.filter((f) => f.readonly && this.checkFieldConditions(f, cache) && this.checkFieldDocumentsConditions(f))
    },
    stepFields () {
      const verificationFields = []

      const sortedFields = this.fields.reduce((acc, f) => {
-        if (f.type === 'verification') {
+        if (f.type === 'verification' || f.type === 'kba') {
          verificationFields.push(f)
        } else if (!f.readonly) {
          acc.push(f)
@@ -1027,10 +1110,12 @@ export default {
        sortedFields.push(verificationFields.pop())
      }

+      const cache = {}
+
      return sortedFields.reduce((acc, f) => {
        const prevStep = acc[acc.length - 1]

-        if (this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f)) {
+        if (this.checkFieldConditions(f, cache) && this.checkFieldDocumentsConditions(f)) {
          if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox' && !f.description) {
            prevStep.push(f)
          } else {
@@ -1042,7 +1127,9 @@ export default {
      }, [])
    },
    formulaFields () {
-      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment' && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
+      const cache = {}
+
+      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment' && this.checkFieldConditions(f, cache) && this.checkFieldDocumentsConditions(f))
    },
    attachmentsIndex () {
      return this.attachments.reduce((acc, a) => {
@@ -1104,15 +1191,17 @@ export default {
      this.currentStep = Math.max(stepIndex, 0)
    } else if (this.goToLast) {
      const requiredEmptyStepIndex = this.stepFields.indexOf(this.stepFields.find((fields) => fields.some((f) => f.required && !this.submittedValues[f.uuid])))
-      const lastFilledStepIndex = this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))) + 1
+      const lastFilledStepIndex = this.stepFields.indexOf(this.stepFields.findLast
+        ? this.stepFields.findLast((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))
+        : [...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))) + 1

      const indexesList = [this.stepFields.length - 1]

-      if (requiredEmptyStepIndex !== -1) {
+      if (requiredEmptyStepIndex !== -1 && (!this.onlyRequiredFields || this.stepFields[requiredEmptyStepIndex].some((f) => f.required))) {
        indexesList.push(requiredEmptyStepIndex)
      }

-      if (lastFilledStepIndex !== -1) {
+      if (lastFilledStepIndex !== -1 && (!this.onlyRequiredFields || this.stepFields[lastFilledStepIndex].some((f) => f.required))) {
        indexesList.push(lastFilledStepIndex)
      }

@@ -1172,27 +1261,35 @@ export default {
        return true
      }
    },
-    checkFieldConditions (field) {
+    checkFieldConditions (field, cache = {}) {
+      const cacheKey = field.uuid || field.attachment_uuid
+
+      if (cache[cacheKey] !== undefined) {
+        return cache[cacheKey]
+      }
+
      if (field.conditions?.length) {
        const result = field.conditions.reduce((acc, cond) => {
          if (cond.operation === 'or') {
-            acc.push(acc.pop() || this.checkFieldCondition(cond))
+            acc.push(acc.pop() || this.checkFieldCondition(cond, cache))
          } else {
-            acc.push(this.checkFieldCondition(cond))
+            acc.push(this.checkFieldCondition(cond, cache))
          }

          return acc
        }, [])

-        return !result.includes(false)
+        cache[cacheKey] = !result.includes(false)
      } else {
-        return true
+        cache[cacheKey] = true
      }
+
+      return cache[cacheKey]
    },
-    checkFieldCondition (condition) {
+    checkFieldCondition (condition, cache = {}) {
      const field = this.fieldsUuidIndex[condition.field_uuid]

-      if (['not_empty', 'checked', 'equal', 'contains'].includes(condition.action) && field && !this.checkFieldConditions(field)) {
+      if (['not_empty', 'checked', 'equal', 'contains', 'greater_than', 'less_than'].includes(condition.action) && field && !this.checkFieldConditions(field, cache)) {
        return false
      }

@@ -1202,20 +1299,50 @@ export default {
        return isEmpty(this.values[condition.field_uuid] ?? defaultValue)
      } else if (['not_empty', 'checked'].includes(condition.action)) {
        return !isEmpty(this.values[condition.field_uuid] ?? defaultValue)
+      } else if (field?.type === 'number' && ['equal', 'not_equal', 'greater_than', 'less_than'].includes(condition.action)) {
+        const value = this.values[condition.field_uuid] ?? defaultValue
+
+        if (isEmpty(value) || isEmpty(condition.value)) return false
+
+        const actual = parseFloat(value)
+        const expected = parseFloat(condition.value)
+
+        if (Number.isNaN(actual) || Number.isNaN(expected)) return false
+
+        if (condition.action === 'equal') return Math.abs(actual - expected) < Number.EPSILON
+        if (condition.action === 'not_equal') return Math.abs(actual - expected) > Number.EPSILON
+        if (condition.action === 'greater_than') return actual > expected
+        if (condition.action === 'less_than') return actual < expected
+
+        return false
      } else if (['equal', 'contains'].includes(condition.action) && field) {
        if (field.options) {
          const option = field.options.find((o) => o.uuid === condition.value)
-          const values = [this.values[condition.field_uuid] ?? defaultValue].flat()

-          return values.includes(this.optionValue(option, field.options.indexOf(option)))
+          if (option) {
+            const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+
+            return values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return false
+          }
        } else {
          return [this.values[condition.field_uuid] ?? defaultValue].flat().includes(condition.value)
        }
      } else if (['not_equal', 'does_not_contain'].includes(condition.action) && field) {
-        const option = field.options.find((o) => o.uuid === condition.value)
-        const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+        if (field.options) {
+          const option = field.options.find((o) => o.uuid === condition.value)

-        return !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          if (option) {
+            const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+
+            return !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return false
+          }
+        } else {
+          return false
+        }
      } else {
        return true
      }
@@ -1227,6 +1354,13 @@ export default {
        return `${this.t('option')} ${index + 1}`
      }
    },
+    findNextStep (currentStepIndex) {
+      if (this.onlyRequiredFields) {
+        return this.stepFields.find((step, index) => index > currentStepIndex && step.some((f) => f.required))
+      } else {
+        return this.stepFields[currentStepIndex + 1]
+      }
+    },
    maybeTrackEmailClick () {
      const { queryParams } = this

@@ -1288,9 +1422,9 @@ export default {
    },
    previousSignatureValueFor (field) {
      if (this.reuseSignature !== false) {
-        const signatureField = [...this.fields].reverse().find((f) =>
-          f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid]
-        )
+        const signatureField = this.fields.findLast
+          ? this.fields.findLast((f) => f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid])
+          : [...this.fields].reverse().find((f) => f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid])

        return this.values[signatureField?.uuid]
      } else {
@@ -1340,7 +1474,8 @@ export default {
      } else {
        return fetch(this.baseUrl + this.submitPath, {
          method: 'POST',
-          body: formData || new FormData(this.$refs.form)
+          body: formData || new FormData(this.$refs.form),
+          ...this.fetchOptions
        }).then((response) => {
          if (response.status === 200) {
            currentFieldUuids.forEach((fieldUuid) => {
@@ -1373,15 +1508,15 @@ export default {
        this.isSubmittingComplete = true
      }

-      const submitStep = this.currentStep
+      const submitStepIndex = this.currentStep

-      const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification'].includes(this.currentField.type)
+      const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification', 'kba'].includes(this.currentField.type)
        ? this.$refs.currentStep.submit
        : () => Promise.resolve({})

      stepPromise().then(async () => {
        const emptyRequiredField = this.stepFields.find((fields, index) => {
-          if (forceComplete ? index === submitStep : index >= submitStep) {
+          if (forceComplete ? index === submitStepIndex : index >= submitStepIndex) {
            return false
          }

@@ -1391,7 +1526,7 @@ export default {
        })

        const formData = new FormData(this.$refs.form)
-        const isLastStep = (submitStep === this.stepFields.length - 1) || forceComplete
+        const isLastStep = (this.onlyRequiredFields ? !this.findNextStep(submitStepIndex) : (submitStepIndex === this.stepFields.length - 1)) || forceComplete

        if (isLastStep && !emptyRequiredField && !this.inviteSubmitters.length && !this.optionalInviteSubmitters.length) {
          formData.append('completed', 'true')
@@ -1435,7 +1570,7 @@ export default {
            return Promise.reject(new Error(data.error))
          }

-          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.stepFields[submitStep + 1])
+          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.findNextStep(submitStepIndex))

          if (nextStep) {
            if (this.alwaysMinimize) {
@@ -1,6 +1,7 @@
 const en = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Please upload an image file',
-  must_be_characters_length: 'Must be {number} characters length',
+  must_be_characters_length: 'Must be {number} characters long',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
  verify_id: 'Verify ID',
  identity_verification: 'Identity verification',
@@ -13,7 +14,7 @@ const en = {
  esignature_disclosure: 'eSignature Disclosure',
  signature: 'Signature',
  initials: 'Initials',
-  drawn_signature_on_a_touchscreen_device: 'Drawn signature on a touchscreen device',
+  sign_on_the_touchscreen: 'Sign on the touchscreen',
  approved: 'Approved',
  reviewed: 'Reviewed',
  other: 'Other',
@@ -91,15 +92,17 @@ const en = {
  type_text: 'Type text',
  email_has_been_sent: 'Email has been sent',
  processing: 'Processing',
-  pay_with_strip: 'Pay with Stripe',
+  pay_with_stripe: 'Pay with Stripe',
  reupload: 'Reupload',
  upload: 'Upload',
  files: 'Files',
  signature_is_too_small_or_simple_please_redraw: 'Signature is too small or simple. Please redraw.',
+  browser_privacy_settings_block_canvas: 'Your browser privacy settings restrict use of the drawing canvas. Please use a different browser or device, or disable privacy settings that block canvas in order to sign.',
  wait_countdown_seconds: 'Wait {countdown} seconds'
 }

 const es = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Por favor, sube un archivo de imagen',
  must_be_characters_length: 'Debe tener {number} caracteres de longitud',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete todos los campos requeridos para continuar con la verificación de identidad.',
@@ -120,7 +123,7 @@ const es = {
  select_a_reason: 'Selecciona una razón',
  value_is_invalid: 'El valor no es válido',
  verification_code_is_invalid: 'El código de verificación no es válido',
-  drawn_signature_on_a_touchscreen_device: 'Firma dibujada en un dispositivo con pantalla táctil',
+  sign_on_the_touchscreen: 'Firmar en pantalla táctil',
  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escanea el código QR con la aplicación de la cámara para abrir el formulario en el móvil y dibujar tu firma',
  by_clicking_you_agree_to_the: 'Al hacer clic en "{button}", usted acepta el',
  electronic_signature_disclosure: 'Divulgación de Firma Electrónica',
@@ -192,15 +195,17 @@ const es = {
  type_text: 'Escribir texto',
  email_has_been_sent: 'El correo electrónico ha sido enviado',
  processing: 'Procesando',
-  pay_with_strip: 'Pagar con Stripe',
+  pay_with_stripe: 'Pagar con Stripe',
  reupload: 'Volver a subir',
  upload: 'Subir',
  files: 'Archivos',
  signature_is_too_small_or_simple_please_redraw: 'La firma es demasiado pequeña o simple. Por favor, vuelve a dibujarla.',
+  browser_privacy_settings_block_canvas: 'La configuración de privacidad de su navegador restringe el uso del lienzo de dibujo. Utilice un navegador o dispositivo diferente, o desactive la configuración de privacidad que bloquea el lienzo para firmar.',
  wait_countdown_seconds: 'Espera {countdown} segundos'
 }

 const it = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Per favore carica un file immagine',
  must_be_characters_length: 'Deve essere lungo {number} caratteri',
  complete_all_required_fields_to_proceed_with_identity_verification: "Compila tutti i campi obbligatori per procedere con la verifica dell'identità.",
@@ -221,8 +226,8 @@ const it = {
  select_a_reason: 'Seleziona una ragione',
  value_is_invalid: 'Il valore non è valido',
  verification_code_is_invalid: 'Il codice di verifica non è valido',
-  drawn_signature_on_a_touchscreen_device: 'Firma disegnata su un dispositivo con schermo tattile',
-  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scansiona il codice QR con l\'app della fotocamera per aprire il modulo sul cellulare e disegnare la tua firma',
+  sign_on_the_touchscreen: 'Firma su schermo tattile',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: "Scansiona il codice QR con l'app della fotocamera per aprire il modulo sul cellulare e disegnare la tua firma",
  by_clicking_you_agree_to_the: 'Cliccando su "{button}", accetti il',
  electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
  esignature_disclosure: 'Divulgazione della eFirma',
@@ -293,75 +298,77 @@ const it = {
  toggle_multiline_text: 'Attiva Testo Multilinea',
  email_has_been_sent: "L'email è stata inviata",
  processing: 'Elaborazione',
-  pay_with_strip: 'Paga con Stripe',
+  pay_with_stripe: 'Paga con Stripe',
  reupload: 'Ricarica',
  upload: 'Carica',
  files: 'File',
  signature_is_too_small_or_simple_please_redraw: 'La firma è troppo piccola o semplice. Ridisegnala, per favore.',
+  browser_privacy_settings_block_canvas: 'Le impostazioni sulla privacy del browser limitano l\'uso dell\'area di disegno. Utilizza un browser o dispositivo diverso oppure disattiva le impostazioni sulla privacy che bloccano il canvas per firmare.',
  wait_countdown_seconds: 'Attendi {countdown} secondi'
 }

 const de = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Bitte laden Sie eine Bilddatei hoch',
  must_be_characters_length: 'Muss {number} Zeichen lang sein',
-  complete_all_required_fields_to_proceed_with_identity_verification: 'Vervollständigen Sie alle erforderlichen Felder, um mit der Identitätsverifizierung fortzufahren.',
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Füllen Sie alle Pflichtfelder aus, um mit der Identitätsprüfung fortzufahren.',
  verify_id: 'ID überprüfen',
-  identity_verification: 'Identitätsüberprüfung',
+  identity_verification: 'Identitätsprüfung',
  complete: 'Abschließen',
-  fill_all_required_fields_to_complete: 'Alle erforderlichen Felder ausfüllen, um abzuschließen',
-  sign_and_complete: 'Signieren und Abschließen',
+  fill_all_required_fields_to_complete: 'Füllen Sie alle Pflichtfelder aus, um abzuschließen',
+  sign_and_complete: 'Unterzeichnen und abschließen',
+  text: 'Text',
+  by_clicking_you_agree_to_the: 'Durch Klicken auf "{button}" stimmen Sie dem',
+  electronic_signature_disclosure: 'Hinweis zur E-Signatur',
+  esignature_disclosure: 'Hinweis zur eSignatur',
+  signature: 'Unterschrift',
+  initials: 'Initialen',
+  sign_on_the_touchscreen: 'Auf Touchscreen signieren',
+  approved: 'Genehmigt',
+  reviewed: 'Geprüft',
+  other: 'Sonstiges',
+  authored_by_me: 'Von mir erstellt',
  invite: 'Einladen',
  email: 'E-Mail',
-  approved: 'Genehmigt',
-  reviewed: 'Überprüft',
-  other: 'Andere',
-  authored_by_me: 'Von mir verfasst',
  approved_by: 'Genehmigt von',
-  reviewed_by: 'Überprüft von',
-  authored_by: 'Verfasst von',
+  reviewed_by: 'Geprüft von',
+  authored_by: 'Erstellt von',
  select_a_reason: 'Grund auswählen',
-  value_is_invalid: 'Wert ist ungültig',
-  verification_code_is_invalid: 'Bestätigungscode ist ungültig',
-  drawn_signature_on_a_touchscreen_device: 'Gezeichnete Unterschrift auf einem Touchscreen-Gerät',
-  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannen Sie den QR-Code mit der Kamera-App, um das Formular auf dem Handy zu öffnen und Ihre Unterschrift zu zeichnen',
-  by_clicking_you_agree_to_the: 'Durch Klicken auf "{button}" stimmen Sie zu, dass Sie die',
-  electronic_signature_disclosure: 'Elektronische Unterschriftenoffenlegung',
-  esignature_disclosure: 'eSignatur Offenlegung',
-  already_paid: 'Bereits bezahlt',
-  minimize: 'Minimieren',
-  text: 'Text',
-  signature: 'Unterschrift',
-  digitally_signed_by: 'Digital unterschrieben von',
-  reason: 'Grund',
-  initials: 'Initialen',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannen Sie den QR-Code mit der Kamera-App, um das Formular auf dem Mobilgerät zu öffnen und Ihre Unterschrift zu zeichnen',
  date: 'Datum',
-  number: 'Nummer',
+  number: 'Zahl',
+  value_is_invalid: 'Wert ist ungültig',
+  verification_code_is_invalid: 'Verifizierungscode ist ungültig',
+  already_paid: 'Bereits bezahlt',
  image: 'Bild',
  pay: 'Bezahlen',
+  take_photo: 'Foto aufnehmen',
+  number_phone_is_invalid: 'Telefonnummer ({number}) ist ungültig',
  file: 'Datei',
-  select: 'Auswählen',
+  digitally_signed_by: 'Elektronisch signiert von',
+  reason: 'Grund',
+  select: 'Auswahl',
  checkbox: 'Checkbox',
-  multiple: 'Mehrere',
+  multiple: 'Mehrfach',
  radio: 'Radio',
  cells: 'Zellen',
  stamp: 'Stempel',
+  minimize: 'Minimieren',
  payment: 'Zahlung',
-  number_phone_is_invalid: '{number} Telefonnummer ist ungültig',
  phone: 'Telefon',
  start_now: 'Jetzt starten',
-  continue: 'Fortsetzen',
-  sign_now: 'Jetzt unterschreiben',
+  continue: 'Weiter',
+  sign_now: 'Jetzt unterzeichnen',
  type_here_: 'Hier eingeben...',
  optional: 'optional',
  option: 'Option',
  appears_on: 'Erscheint auf',
  page: 'Seite',
-  take_photo: 'Foto aufnehmen',
-  select_your_option: 'Wähle deine Option',
-  complete_hightlighted_checkboxes_and_click: 'Markierte Kontrollkästchen ausfüllen und klicken',
-  submit: 'absenden',
-  next: 'weiter',
-  click_to_upload: 'Klicken zum Hochladen',
+  select_your_option: 'Option auswählen',
+  complete_hightlighted_checkboxes_and_click: 'Füllen Sie die markierten Kontrollkästchen aus und klicken Sie auf',
+  submit: 'Einreichen',
+  next: 'Weiter',
+  click_to_upload: 'Zum Hochladen klicken',
  or_drag_and_drop_files: 'oder Dateien hierher ziehen und ablegen',
  send_copy_via_email: 'Kopie per E-Mail senden',
  download: 'Herunterladen',
@@ -370,140 +377,144 @@ const de = {
  draw_initials: 'Initialen zeichnen',
  type_signature_here: 'Unterschrift hier eingeben',
  type_initial_here: 'Initialen hier eingeben',
-  form_has_been_completed: 'Formular wurde ausgefüllt!',
-  document_has_been_signed: 'Dokument wurde unterschrieben!',
-  documents_have_been_signed: 'Dokumente wurden unterschrieben!',
+  form_has_been_completed: 'Formular wurde abgeschlossen!',
+  document_has_been_signed: 'Dokument wurde unterzeichnet!',
+  documents_have_been_signed: 'Dokumente wurden unterzeichnet!',
  create_a_free_account: 'Kostenloses Konto erstellen',
  powered_by: 'Bereitgestellt von',
-  please_check_the_box_to_continue: 'Bitte setzen Sie das Häkchen, um fortzufahren.',
+  please_check_the_box_to_continue: 'Bitte aktivieren Sie das Kontrollkästchen, um fortzufahren.',
  open_source_documents_software: 'Open-Source-Dokumentensoftware',
-  verified_phone_number: 'Telefonnummer überprüfen',
+  verified_phone_number: 'Telefonnummer verifizieren',
  use_international_format: 'Internationales Format verwenden: +1xxx',
  six_digits_code: '6-stelliger Code',
  change_phone_number: 'Telefonnummer ändern',
  sending: 'Senden...',
  resend_code: 'Code erneut senden',
-  verification_code_has_been_resent: 'Die Verifizierungscode wurde erneut per SMS gesendet',
-  please_fill_all_required_fields: 'Bitte füllen Sie alle erforderlichen Felder aus',
-  set_today: 'Heute einstellen',
+  verification_code_has_been_resent: 'Der Verifizierungscode wurde per SMS erneut gesendet',
+  please_fill_all_required_fields: 'Bitte füllen Sie alle Pflichtfelder aus',
+  set_today: 'Heute',
+  toggle_multiline_text: 'Mehrzeiligen Text umschalten',
  draw_signature: 'Unterschrift zeichnen',
  type_initial: 'Initialen eingeben',
  draw: 'Zeichnen',
  type: 'Eingeben',
  type_text: 'Text eingeben',
-  toggle_multiline_text: 'Mehrzeiligen Text umschalten',
-  email_has_been_sent: 'Die E-Mail wurde gesendet',
+  email_has_been_sent: 'E-Mail wurde gesendet',
  processing: 'Verarbeitung',
-  pay_with_strip: 'Mit Stripe bezahlen',
+  pay_with_stripe: 'Mit Stripe bezahlen',
  reupload: 'Erneut hochladen',
  upload: 'Hochladen',
  files: 'Dateien',
-  signature_is_too_small_or_simple_please_redraw: 'Die Unterschrift ist zu klein oder zu einfach. Bitte erneut zeichnen.',
-  wait_countdown_seconds: 'Warte {countdown} Sekunden'
+  signature_is_too_small_or_simple_please_redraw: 'Die Unterschrift ist zu klein oder zu einfach. Bitte neu zeichnen.',
+  browser_privacy_settings_block_canvas: 'Die Datenschutzeinstellungen Ihres Browsers schränken die Nutzung der Zeichenfläche ein. Bitte verwenden Sie einen anderen Browser oder ein anderes Gerät oder deaktivieren Sie die Datenschutzeinstellungen, die Canvas blockieren, um zu unterschreiben.',
+  wait_countdown_seconds: 'Bitte {countdown} Sekunden warten'
 }

 const fr = {
-  please_upload_an_image_file: 'Veuillez télécharger un fichier image',
-  must_be_characters_length: 'Doit contenir {number} caractères',
-  complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour continuer la vérification de l'identité.",
-  verify_id: "Vérification de l'ID",
-  identity_verification: "Vérification de l'identité",
+  kba: 'KBA',
+  please_upload_an_image_file: 'Veuillez téléverser un fichier image',
+  must_be_characters_length: 'Doit comporter {number} caractères',
+  complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour poursuivre la vérification d'identité.",
+  verify_id: "Vérifier l'ID",
+  identity_verification: "Vérification d'identité",
  complete: 'Terminer',
-  fill_all_required_fields_to_complete: 'Veuillez remplir tous les champs obligatoires pour compléter',
-  sign_and_complete: 'Signer et Terminer',
-  invite: 'Inviter',
-  email: 'Courriel',
+  fill_all_required_fields_to_complete: 'Remplissez tous les champs obligatoires pour terminer',
+  sign_and_complete: 'Signer et terminer',
+  text: 'Texte',
+  by_clicking_you_agree_to_the: 'En cliquant sur "{button}", vous acceptez la',
+  electronic_signature_disclosure: 'Déclaration relative à la signature électronique',
+  esignature_disclosure: 'Déclaration eSignature',
+  signature: 'Signature',
+  initials: 'Initiales',
+  sign_on_the_touchscreen: 'Signer sur écran tactile',
  approved: 'Approuvé',
  reviewed: 'Révisé',
  other: 'Autre',
  authored_by_me: 'Rédigé par moi',
+  invite: 'Inviter',
+  email: 'E-mail',
  approved_by: 'Approuvé par',
  reviewed_by: 'Révisé par',
  authored_by: 'Rédigé par',
  select_a_reason: 'Sélectionnez une raison',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannez le QR avec l’appareil photo pour ouvrir le formulaire et signer sur mobile',
+  date: 'Date',
+  number: 'Nombre',
  value_is_invalid: 'La valeur est invalide',
  verification_code_is_invalid: 'Le code de vérification est invalide',
-  drawn_signature_on_a_touchscreen_device: 'Signature dessinée sur un appareil à écran tactile',
-  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannez le code QR avec l\'application de l\'appareil photo pour ouvrir le formulaire sur mobile et dessiner votre signature',
-  by_clicking_you_agree_to_the: 'En cliquant sur "{button}", vous acceptez la',
-  electronic_signature_disclosure: 'Divulgation de Signature Électronique',
-  esignature_disclosure: 'Divulgation de la eSignature',
-  minimize: 'Réduire',
-  text: 'Texte',
  already_paid: 'Déjà payé',
-  signature: 'Signature',
-  initials: 'Initiales',
-  digitally_signed_by: 'Signé numériquement par',
-  reason: 'Raison',
-  pay: 'Payer',
-  date: 'Date',
-  number: 'Numéro',
  image: 'Image',
+  pay: 'Payer',
+  take_photo: 'Prendre une photo',
+  number_phone_is_invalid: "Le numéro de téléphone {number} n'est pas valide",
  file: 'Fichier',
-  select: 'Choisir',
+  digitally_signed_by: 'Signé électroniquement par',
+  reason: 'Motif',
+  select: 'Sélectionner',
  checkbox: 'Coche',
  multiple: 'Multiple',
  radio: 'Radio',
  cells: 'Cellules',
  stamp: 'Tampon',
+  minimize: 'Réduire',
  payment: 'Paiement',
-  number_phone_is_invalid: '{number} téléphone est invalide',
  phone: 'Téléphone',
  start_now: 'Commencer maintenant',
  continue: 'Continuer',
  sign_now: 'Signer maintenant',
-  type_here_: 'Tapez ici...',
+  type_here_: 'Saisissez ici...',
  optional: 'facultatif',
  option: 'Option',
  appears_on: 'Apparaît sur',
  page: 'Page',
-  take_photo: 'Prendre une photo',
  select_your_option: 'Sélectionnez votre option',
-  complete_hightlighted_checkboxes_and_click: 'Complétez les cases à cocher en surbrillance et cliquez',
-  submit: 'envoyer',
+  complete_hightlighted_checkboxes_and_click: 'Cochez les cases mises en évidence puis cliquez',
+  submit: 'soumettre',
  next: 'suivant',
-  click_to_upload: 'Cliquez pour télécharger',
-  or_drag_and_drop_files: 'ou faites glisser-déposer les fichiers',
+  click_to_upload: 'Cliquez pour téléverser',
+  or_drag_and_drop_files: 'ou faites glisser et déposez des fichiers',
  send_copy_via_email: 'Envoyer une copie par e-mail',
  download: 'Télécharger',
  clear: 'Effacer',
  redraw: 'Redessiner',
  draw_initials: 'Dessiner les initiales',
-  type_signature_here: 'Tapez la signature ici',
-  type_initial_here: 'Tapez les initiales ici',
-  form_has_been_completed: 'Le formulaire a été complété !',
-  document_has_been_signed: 'Le document a été signé!',
-  documents_have_been_signed: 'Les documents ont été signés!',
-  create_a_free_account: 'Créer un Compte Gratuit',
+  type_signature_here: 'Saisissez la signature ici',
+  type_initial_here: 'Saisissez les initiales ici',
+  form_has_been_completed: 'Le formulaire a été rempli !',
+  document_has_been_signed: 'Le document a été signé !',
+  documents_have_been_signed: 'Les documents ont été signés !',
+  create_a_free_account: 'Créer un compte gratuit',
  powered_by: 'Propulsé par',
  please_check_the_box_to_continue: 'Veuillez cocher la case pour continuer.',
  open_source_documents_software: 'logiciel de documents open source',
  verified_phone_number: 'Vérifier le numéro de téléphone',
-  use_international_format: 'Utiliser le format international : +1xxx',
+  use_international_format: 'Utilisez le format international : +1xxx',
  six_digits_code: 'Code à 6 chiffres',
-  change_phone_number: 'Changer le numéro de téléphone',
-  sending: 'Envoi en cours...',
+  change_phone_number: 'Changer de numéro de téléphone',
+  sending: 'Envoi...',
  resend_code: 'Renvoyer le code',
  verification_code_has_been_resent: 'Le code de vérification a été renvoyé par SMS',
  please_fill_all_required_fields: 'Veuillez remplir tous les champs obligatoires',
-  set_today: "Définir Aujourd'hui",
-  draw_signature: 'Dessiner une signature',
+  set_today: "Définir à aujourd'hui",
+  toggle_multiline_text: 'Basculer le texte multiligne',
+  draw_signature: 'Dessiner la signature',
  type_initial: 'Saisir les initiales',
  draw: 'Dessiner',
  type: 'Saisir',
  type_text: 'Saisir du texte',
-  toggle_multiline_text: 'Basculer le Texte Multiligne',
-  email_has_been_sent: "L'email a été envoyé",
-  processing: 'Traitement',
-  pay_with_strip: 'Paiement avec Stripe',
-  reupload: 'Recharger',
-  upload: 'Télécharger',
+  email_has_been_sent: "L'e-mail a été envoyé",
+  processing: 'Traitement en cours',
+  pay_with_stripe: 'Payer avec Stripe',
+  reupload: 'Retéléverser',
+  upload: 'Téléverser',
  files: 'Fichiers',
  signature_is_too_small_or_simple_please_redraw: 'La signature est trop petite ou trop simple. Veuillez la redessiner.',
-  wait_countdown_seconds: 'Attendez {countdown} secondes'
+  browser_privacy_settings_block_canvas: 'Les paramètres de confidentialité de votre navigateur empêchent l\'utilisation du canevas de dessin. Veuillez utiliser un autre navigateur ou appareil, ou désactiver les paramètres de confidentialité qui bloquent le canevas pour signer.',
+  wait_countdown_seconds: 'Veuillez patienter {countdown} secondes'
 }

 const pl = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Proszę przesłać plik obrazu',
  must_be_characters_length: 'Musi mieć długość {number} znaków',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Uzupełnij wszystkie wymagane pola, aby kontynuować weryfikację tożsamości.',
@@ -524,7 +535,7 @@ const pl = {
  select_a_reason: 'Wybierz powód',
  value_is_invalid: 'Wartość jest nieprawidłowa',
  verification_code_is_invalid: 'Kod weryfikacyjny jest nieprawidłowy',
-  drawn_signature_on_a_touchscreen_device: 'Podpis odręczny na urządzeniu z ekranem dotykowym',
+  sign_on_the_touchscreen: 'Podpisz na ekranie dotykowym',
  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Zeskanuj kod QR za pomocą aplikacji aparatu, aby otworzyć formularz na telefonie i narysować swój podpis',
  by_clicking_you_agree_to_the: 'Klikając na "{button}", zgadzasz się na',
  electronic_signature_disclosure: 'Ujawnienie Elektronicznej Sygnatury',
@@ -596,15 +607,17 @@ const pl = {
  toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
  email_has_been_sent: 'E-mail został wysłany',
  processing: 'Przetwarzanie',
-  pay_with_strip: 'Płatność za pomocą Stripe',
+  pay_with_stripe: 'Płatność za pomocą Stripe',
  reupload: 'Ponowne przesłanie',
  upload: 'Przesyłanie',
  files: 'Pliki',
  signature_is_too_small_or_simple_please_redraw: 'Podpis jest zbyt mały lub zbyt prosty. Proszę narysować go ponownie.',
+  browser_privacy_settings_block_canvas: 'Ustawienia prywatności przeglądarki blokują użycie obszaru rysowania. Użyj innej przeglądarki lub urządzenia albo wyłącz ustawienia prywatności blokujące canvas, aby podpisać.',
  wait_countdown_seconds: 'Poczekaj {countdown} sekund'
 }

 const uk = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Будь ласка, завантажте файл зображення',
  must_be_characters_length: 'Має містити {number} символів',
  complete_all_required_fields_to_proceed_with_identity_verification: "Заповніть всі обов'язкові поля, щоб продовжити перевірку особи.",
@@ -625,7 +638,7 @@ const uk = {
  select_a_reason: 'Виберіть причину',
  value_is_invalid: 'Значення є неправильним',
  verification_code_is_invalid: 'Код підтвердження є неправильним',
-  drawn_signature_on_a_touchscreen_device: 'Підпис на сенсорному пристрої',
+  sign_on_the_touchscreen: 'Підписати на сенсорному екрані',
  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Скануйте QR-код за допомогою програми камери, щоб відкрити форму на мобільному пристрої та намалювати свій підпис',
  by_clicking_you_agree_to_the: 'Натиснувши на "{button}", ви погоджуєтеся з',
  electronic_signature_disclosure: 'Розголошення Електронного Підпису',
@@ -702,10 +715,12 @@ const uk = {
  upload: 'Завантажити',
  files: 'Файли',
  signature_is_too_small_or_simple_please_redraw: 'Підпис занадто маленький або надто простий. Будь ласка, перемалюйте.',
+  browser_privacy_settings_block_canvas: 'Налаштування конфіденційності вашого браузера блокують використання полотна для малювання. Будь ласка, скористайтеся іншим браузером або пристроєм, або вимкніть налаштування конфіденційності, що блокують canvas, щоб підписати.',
  wait_countdown_seconds: 'Зачекайте {countdown} секунд'
 }

 const cs = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Nahrajte prosím obrázkový soubor',
  must_be_characters_length: 'Musí mít délku {number} znaků',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Vyplňte všechna povinná pole, abyste mohli pokračovat v ověření identity.',
@@ -726,7 +741,7 @@ const cs = {
  select_a_reason: 'Vyberte důvod',
  value_is_invalid: 'Hodnota je neplatná',
  verification_code_is_invalid: 'Ověřovací kód je neplatný',
-  drawn_signature_on_a_touchscreen_device: 'Namalovaný podpis na dotykovém zařízení',
+  sign_on_the_touchscreen: 'Podepsat na dotykové obrazovce',
  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Naskenujte QR kód pomocí aplikace fotoaparátu, abyste otevřeli formulář na mobilním zařízení a nakreslili svůj podpis',
  by_clicking_you_agree_to_the: 'Kliknutím na "{button}" souhlasíte s',
  electronic_signature_disclosure: 'Zveřejněním Elektronického Podpisu',
@@ -798,15 +813,17 @@ const cs = {
  toggle_multiline_text: 'Přepnout Víceřádkový Text',
  email_has_been_sent: 'E-mail byl odeslán',
  processing: 'Zpracování',
-  pay_with_strip: 'Zaplacení přes Stripe',
+  pay_with_stripe: 'Zaplacení přes Stripe',
  reupload: 'Znovu nahrát',
  upload: 'Nahrát',
  files: 'Soubory',
  signature_is_too_small_or_simple_please_redraw: 'Podpis je příliš malý nebo jednoduchý. Nakreslete jej prosím znovu.',
+  browser_privacy_settings_block_canvas: 'Nastavení soukromí vašeho prohlížeče omezuje použití kreslicího plátna. Použijte prosím jiný prohlížeč nebo zařízení, nebo vypněte nastavení soukromí blokující canvas pro podepsání.',
  wait_countdown_seconds: 'Počkejte {countdown} sekund'
 }

 const pt = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Por favor, envie um arquivo de imagem',
  must_be_characters_length: 'Deve ter {number} caracteres',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Preencha todos os campos obrigatórios para prosseguir com a verificação de identidade.',
@@ -827,7 +844,7 @@ const pt = {
  select_a_reason: 'Selecione um motivo',
  value_is_invalid: 'Valor é inválido',
  verification_code_is_invalid: 'Código de verificação é inválido',
-  drawn_signature_on_a_touchscreen_device: 'Assinatura desenhada em um dispositivo com tela sensível ao toque',
+  sign_on_the_touchscreen: 'Assinar na tela sensível',
  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escaneie o código QR com o aplicativo da câmera para abrir o formulário no celular e desenhar sua assinatura',
  by_clicking_you_agree_to_the: 'Ao clicar em "{button}", você concorda com o',
  electronic_signature_disclosure: 'Divulgação de Assinatura Eletrônica',
@@ -899,15 +916,17 @@ const pt = {
  toggle_multiline_text: 'Alternar Texto Multilinha',
  email_has_been_sent: 'Email enviado',
  processing: 'Processamento',
-  pay_with_strip: 'Pagar com Stripe',
+  pay_with_stripe: 'Pagar com Stripe',
  reupload: 'Reenviar',
  upload: 'Carregar',
  files: 'Arquivos',
  signature_is_too_small_or_simple_please_redraw: 'A assinatura é muito pequena ou simples. Por favor, redesenhe.',
+  browser_privacy_settings_block_canvas: 'As configurações de privacidade do seu navegador restringem o uso da área de desenho. Use um navegador ou dispositivo diferente, ou desative as configurações de privacidade que bloqueiam o canvas para assinar.',
  wait_countdown_seconds: 'Aguarde {countdown} segundos'
 }

 const he = {
+  kba: 'KBA',
  please_upload_an_image_file: 'אנא העלה קובץ תמונה',
  must_be_characters_length: 'חייב להיות באורך של {number} תווים',
  complete_all_required_fields_to_proceed_with_identity_verification: 'מלא את כל השדות הנדרשים כדי להמשיך עם אימות זהות.',
@@ -928,7 +947,7 @@ const he = {
  select_a_reason: 'בחר סיבה',
  value_is_invalid: 'ערך לא תקין',
  verification_code_is_invalid: 'קוד האימות אינו תקין',
-  drawn_signature_on_a_touchscreen_device: 'חתימה שנוצרה במכשיר עם מסך מגע',
+  sign_on_the_touchscreen: 'חתום על מסך המגע',
  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'סרוק את קוד ה-QR באמצעות אפליקציית המצלמה כדי לפתוח את הטופס במובייל ולצייר את החתימה שלך',
  by_clicking_you_agree_to_the: 'על ידי לחיצה על "{button}", אתה מסכים ל',
  electronic_signature_disclosure: 'חשיפת חתימה אלקטרונית',
@@ -1000,15 +1019,17 @@ const he = {
  type_text: 'הקלד טקסט',
  email_has_been_sent: 'האימייל נשלח',
  processing: 'מעבד',
-  pay_with_strip: 'שלם עם סטרייפ',
+  pay_with_stripe: 'שלם עם סטרייפ',
  reupload: 'העלה שוב',
  upload: 'העלאה',
  files: 'קבצים',
  signature_is_too_small_or_simple_please_redraw: 'החתימה קטנה או פשוטה מדי. אנא חתום מחדש.',
+  browser_privacy_settings_block_canvas: 'הגדרות הפרטיות של הדפדפן שלך מגבילות את השימוש באזור הציור. אנא השתמש בדפדפן או מכשיר אחר, או בטל את הגדרות הפרטיות החוסמות canvas כדי לחתום.',
  wait_countdown_seconds: 'המתן {countdown} שניות'
 }

 const nl = {
+  kba: 'KBA',
  please_upload_an_image_file: 'Upload alstublieft een afbeeldingsbestand',
  must_be_characters_length: 'Moet {number} tekens lang zijn',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Vul alle verplichte velden in om door te gaan met de identiteitsverificatie.',
@@ -1029,7 +1050,7 @@ const nl = {
  select_a_reason: 'Selecteer een reden',
  value_is_invalid: 'Waarde is ongeldig',
  verification_code_is_invalid: 'Verificatiecode is ongeldig',
-  drawn_signature_on_a_touchscreen_device: 'Getekende handtekening op een apparaat met een touchscreen',
+  sign_on_the_touchscreen: 'Onderteken op touchscreen',
  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan de QR-code met de camera-app om het formulier op mobiel te openen en uw handtekening te tekenen',
  by_clicking_you_agree_to_the: 'Door op "{button}" te klikken, gaat u akkoord met de',
  electronic_signature_disclosure: 'Openbaarmaking van Elektronische Handtekening',
@@ -1101,15 +1122,17 @@ const nl = {
  type_text: 'Typ tekst',
  email_has_been_sent: 'E-mail is verzonden',
  processing: 'Verwerken',
-  pay_with_strip: 'Betalen met Stripe',
+  pay_with_stripe: 'Betalen met Stripe',
  reupload: 'Opnieuw uploaden',
  upload: 'Uploaden',
  files: 'Bestanden',
  signature_is_too_small_or_simple_please_redraw: 'De handtekening is te klein of te eenvoudig. Teken opnieuw.',
+  browser_privacy_settings_block_canvas: 'De privacyinstellingen van uw browser beperken het gebruik van het tekenveld. Gebruik een andere browser of ander apparaat, of schakel de privacyinstellingen uit die canvas blokkeren om te ondertekenen.',
  wait_countdown_seconds: 'Wacht {countdown} seconden'
 }

 const ar = {
+  kba: 'KBA',
  please_upload_an_image_file: 'يرجى تحميل ملف صورة',
  must_be_characters_length: 'يجب أن يكون الطول {number} حرفًا',
  complete_all_required_fields_to_proceed_with_identity_verification: 'أكمل جميع الحقول المطلوبة للمتابعة في التحقق من الهوية.',
@@ -1131,7 +1154,7 @@ const ar = {
  value_is_invalid: 'القيمة غير صالحة',
  verification_code_is_invalid: 'رمز التحقق غير صالح',
  already_paid: 'تم الدفع بالفعل',
-  drawn_signature_on_a_touchscreen_device: 'توقيع مرسوم على جهاز بشاشة تعمل باللمس',
+  sign_on_the_touchscreen: 'وقع على شاشة اللمس',
  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'امسح رمز الاستجابة السريعة باستخدام تطبيق الكاميرا لفتح النموذج على الهاتف المحمول ورسم توقيعك',
  by_clicking_you_agree_to_the: 'بالنقر فوق "{button}"، أنت توافق على',
  electronic_signature_disclosure: 'كشف التوقيع الإلكتروني',
@@ -1207,10 +1230,12 @@ const ar = {
  upload: 'تحميل',
  files: 'الملفات',
  signature_is_too_small_or_simple_please_redraw: 'التوقيع صغير جدًا أو بسيط جدًا. يرجى إعادة رسمه.',
+  browser_privacy_settings_block_canvas: 'إعدادات الخصوصية في متصفحك تمنع استخدام لوحة الرسم. يرجى استخدام متصفح أو جهاز مختلف، أو تعطيل إعدادات الخصوصية التي تحظر canvas للتوقيع.',
  wait_countdown_seconds: 'انتظر {countdown} ثانية'
 }

 const ko = {
+  kba: 'KBA',
  please_upload_an_image_file: '이미지 파일을 업로드해 주세요',
  must_be_characters_length: '{number}자여야 합니다',
  complete_all_required_fields_to_proceed_with_identity_verification: '신원 확인을 진행하려면 모든 필수 필드를 작성하십시오.',
@@ -1229,7 +1254,7 @@ const ko = {
  reviewed_by: '검토자',
  authored_by: '작성자',
  select_a_reason: '이유 선택',
-  drawn_signature_on_a_touchscreen_device: '터치스크린 장치에서 그린 서명',
+  sign_on_the_touchscreen: '터치스크린에서 서명',
  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: '카메라 앱으로 QR 코드를 스캔하여 모바일에서 양식을 열고 서명을 그리세요',
  by_clicking_you_agree_to_the: '"{button}"를 클릭함으로써, 다음에 동의하게 됩니다',
  electronic_signature_disclosure: '전자 서명 공개',
@@ -1303,15 +1328,17 @@ const ko = {
  type_text: '텍스트 입력',
  email_has_been_sent: '이메일이 전송되었습니다',
  processing: '처리 중',
-  pay_with_strip: '스트라이프로 결제',
+  pay_with_stripe: '스트라이프로 결제',
  reupload: '다시 업로드',
  upload: '업로드',
  files: '파일',
  signature_is_too_small_or_simple_please_redraw: '서명이 너무 작거나 단순합니다. 다시 그려주세요.',
+  browser_privacy_settings_block_canvas: '브라우저 개인정보 보호 설정으로 인해 그리기 캔버스를 사용할 수 없습니다. 다른 브라우저나 기기를 사용하거나, 서명을 위해 캔버스를 차단하는 개인정보 보호 설정을 비활성화해 주세요.',
  wait_countdown_seconds: '{countdown}초 기다리세요'
 }

 const ja = {
+  kba: 'KBA',
  please_upload_an_image_file: '画像ファイルをアップロードしてください',
  must_be_characters_length: '{number}文字でなければなりません',
  complete_all_required_fields_to_proceed_with_identity_verification: '本人確認を進めるには、すべての必須項目を入力してください。',
@@ -1326,7 +1353,7 @@ const ja = {
  esignature_disclosure: '電子署名開示',
  signature: '署名',
  initials: 'イニシャル',
-  drawn_signature_on_a_touchscreen_device: 'タッチスクリーンデバイスで描かれた署名',
+  sign_on_the_touchscreen: 'タッチスクリーンで署名',
  approved: '承認済み',
  reviewed: '確認済み',
  other: 'その他',
@@ -1404,11 +1431,12 @@ const ja = {
  type_text: 'テキストを入力',
  email_has_been_sent: 'メールが送信されました',
  processing: '処理中',
-  pay_with_strip: 'Stripeで支払う',
+  pay_with_stripe: 'Stripeで支払う',
  reupload: '再アップロード',
  upload: 'アップロード',
  files: 'ファイル',
  signature_is_too_small_or_simple_please_redraw: '署名が小さすぎるか単純すぎます。もう一度描いてください。',
+  browser_privacy_settings_block_canvas: 'ブラウザのプライバシー設定により、描画キャンバスの使用が制限されています。別のブラウザまたはデバイスを使用するか、署名するためにキャンバスをブロックするプライバシー設定を無効にしてください。',
  wait_countdown_seconds: '{countdown} 秒お待ちください'
 }

@@ -19,7 +19,7 @@
      <div class="space-x-2 flex flex-none">
        <span
          v-if="isDrawInitials"
-          class="tooltip"
+          class="md:tooltip"
          :data-tip="t('type_initial')"
        >
          <a
@@ -36,7 +36,7 @@
        </span>
        <span
          v-else
-          class="tooltip ml-2"
+          class="md:tooltip ml-2"
          :data-tip="t('draw_initials')"
        >
          <a
@@ -52,7 +52,7 @@
          </a>
        </span>
        <span
-          class="tooltip"
+          class="md:tooltip"
          :data-tip="t('click_to_upload')"
        >
          <label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
@@ -123,6 +123,11 @@
        v-if="!isDrawInitials"
        class="absolute top-0 right-0 left-0 bottom-0"
      />
+      <label
+        v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
+        for="initials_text_input"
+        class="absolute top-0 right-0 left-0 bottom-0"
+      />
      <canvas
        v-show="!modelValue && !computedPreviousValue"
        ref="canvas"
@@ -145,6 +150,7 @@

 <script>
 import { cropCanvasAndExportToPNG } from './crop_canvas'
+import { isCanvasBlocked } from './validate_signature'
 import { IconReload, IconTextSize, IconUpload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
@@ -170,6 +176,10 @@ export default {
      type: Object,
      required: true
    },
+    submitter: {
+      type: Object,
+      required: true
+    },
    dryRun: {
      type: Boolean,
      required: false,
@@ -252,6 +262,14 @@ export default {

            this.$refs.canvas.getContext('2d').scale(scale, scale)

+            if (!this.isDrawInitials) {
+              this.$nextTick(() => {
+                if (this.$refs.textInput) {
+                  this.initTextInitial()
+                }
+              })
+            }
+
            this.intersectionObserver?.disconnect()
          }
        })
@@ -327,12 +345,27 @@ export default {

      if (!this.isDrawInitials) {
        this.$nextTick(() => {
-          this.$refs.textInput.focus()
+          if (this.$refs.textInput) {
+            if (!this.submitter.name) {
+              this.$refs.textInput.focus()
+            }

-          this.$emit('start')
+            this.initTextInitial()
+
+            this.$emit('start')
+          }
        })
      }
    },
+    initTextInitial () {
+      if (this.submitter.name) {
+        this.$refs.textInput.value = this.submitter.name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() || '').join('')
+      }
+
+      if (this.$refs.textInput.value) {
+        this.updateWrittenInitials({ target: this.$refs.textInput })
+      }
+    },
    async submit () {
      if (this.modelValue || this.computedPreviousValue) {
        if (this.computedPreviousValue) {
@@ -387,7 +420,15 @@ export default {
          }
        }).catch((error) => {
          if (this.field.required === true) {
-            alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+            if (isCanvasBlocked()) {
+              alert(this.t('browser_privacy_settings_block_canvas'))
+
+              if (window.Rollbar) {
+                window.Rollbar.info('Canvas blocked')
+              }
+            } else {
+              alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+            }

            return reject(error)
          } else {
@@ -78,6 +78,11 @@ export default {
      type: Array,
      required: true
    },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    optionalSubmitters: {
      type: Array,
      required: false,
@@ -108,7 +113,8 @@ export default {

      return fetch(this.url, {
        method: 'POST',
-        body: new FormData(this.$refs.form)
+        body: new FormData(this.$refs.form),
+        ...this.fetchOptions
      }).then((response) => {
        if (response.status === 200) {
          this.$emit('success')
@@ -0,0 +1,580 @@
+<template>
+  <label
+    v-if="!error"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
+    <template v-else>{{ field.name || 'Knowledge Based Authentication' }}</template>
+    <span
+      v-if="questions"
+      class="float-right font-normal text-neutral-500 mt-1 whitespace-nowrap text-right text-sm"
+    >
+      <span>Question {{ currentQuestionIndex + 1 }} / {{ questions.length }}</span>
+      <span
+        v-if="timeLeftSeconds !== null"
+        class="block"
+      >
+        Time left: {{ formattedTimeLeft }}
+      </span>
+    </span>
+  </label>
+  <div
+    v-if="field.description"
+    dir="auto"
+    class="mb-4 px-1 field-description-text"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
+  <div
+    v-if="isRequiredFieldEmpty"
+    class="px-1 field-description-text"
+  >
+    {{ t('complete_all_required_fields_to_proceed_with_identity_verification') }}
+  </div>
+  <div
+    v-if="error"
+    class="mb-4 text-center"
+  >
+    <div class="text-xl mb-4">
+      {{ error }}
+    </div>
+    <button
+      class="base-button w-full flex justify-center submit-form-button"
+      @click="restartKba"
+    >
+      {{ questions ? 'Restart KBA' : 'Retry' }}
+    </button>
+  </div>
+  <div
+    v-if="isLoading"
+    class="w-full flex space-x-2 justify-center mb-2"
+  >
+    <IconInnerShadowTop
+      width="40"
+      class="animate-spin h-10"
+    />
+  </div>
+  <div v-else-if="questions && !error">
+    <form @submit.prevent="nextQuestion">
+      <div class="mb-6 px-1">
+        <p class="font-semibold mb-4 text-lg">
+          {{ currentQuestion.prompt }}
+        </p>
+        <div class="space-y-3.5 mx-auto">
+          <div
+            v-for="(answer, index) in currentQuestion.answers"
+            :key="`${currentQuestion.id}_${index}`"
+          >
+            <label
+              :for="`${currentQuestion.id}_${index}`"
+              class="flex items-center space-x-3 radio-label"
+            >
+              <input
+                :id="`${currentQuestion.id}_${index}`"
+                v-model="answers[currentQuestion.id]"
+                type="radio"
+                :name="currentQuestion.id"
+                :value="answer.text"
+                class="base-radio !h-7 !w-7"
+                required
+              >
+              <span class="text-xl">{{ answer.text }}</span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6">
+        <button
+          type="submit"
+          class="base-button w-full flex justify-center submit-form-button"
+          :disabled="isSubmitting || !answers[currentQuestion.id]"
+        >
+          <span class="flex">
+            <IconInnerShadowTop
+              v-if="isSubmitting"
+              class="mr-1 animate-spin"
+            />
+            <span>
+              {{ isLastQuestion ? (isSubmitting ? t('submitting_') : t('complete')) : t('next') }}
+            </span><span
+              v-if="isSubmitting"
+              class="w-6 flex justify-start mr-1"
+            ><span>...</span></span>
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+  <div v-else-if="!error && !isRequiredFieldEmpty">
+    <form @submit.prevent="startKba">
+      <div class="grid grid-cols-6 gap-x-2 md:gap-x-4 md:gap-y-2 mb-4">
+        <div class="col-span-3">
+          <label
+            for="kba_fn"
+            class="label text-sm md:text-base"
+          >First Name</label>
+          <input
+            id="kba_fn"
+            v-model="form.fn"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-3">
+          <label
+            for="kba_ln"
+            class="label text-sm md:text-base"
+          >Last Name</label>
+          <input
+            id="kba_ln"
+            v-model="form.ln"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-6">
+          <label
+            for="kba_addr"
+            class="label text-sm md:text-base"
+          >Address</label>
+          <input
+            id="kba_addr"
+            v-model="form.addr"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-2">
+          <label
+            for="kba_city"
+            class="label text-sm md:text-base"
+          >City</label>
+          <input
+            id="kba_city"
+            v-model="form.city"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-2">
+          <label
+            for="kba_state"
+            class="label text-sm md:text-base"
+          >State</label>
+          <select
+            id="kba_state"
+            v-model="form.state"
+            class="select select-bordered !h-10 min-h-[2.5rem] w-full bg-white font-normal !text-base"
+            required
+          >
+            <option
+              value=""
+              disabled
+            >
+              Select State
+            </option>
+            <option
+              v-for="state in states"
+              :key="state.code"
+              :value="state.code"
+            >
+              {{ state.name }}
+            </option>
+          </select>
+        </div>
+        <div class="col-span-2">
+          <label
+            for="kba_zip"
+            class="label text-sm md:text-base"
+          >Zip</label>
+          <input
+            id="kba_zip"
+            v-model="form.zip"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-3">
+          <label
+            for="kba_phone"
+            class="label text-sm md:text-base"
+          >Phone</label>
+          <input
+            id="kba_phone"
+            v-model="form.phone"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-3">
+          <label
+            for="kba_email"
+            class="label text-sm md:text-base"
+          >Email</label>
+          <input
+            id="kba_email"
+            v-model="form.email"
+            type="email"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-3">
+          <label
+            for="kba_dob"
+            class="label text-sm md:text-base"
+          >DOB</label>
+          <input
+            id="kba_dob"
+            v-model="form.dob"
+            type="date"
+            class="input input-bordered !h-10 md:w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-3">
+          <label
+            for="kba_ssn"
+            class="label text-sm md:text-base"
+          >SSN</label>
+          <input
+            id="kba_ssn"
+            v-model="form.ssn"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+      </div>
+      <div class="mt-6">
+        <button
+          type="submit"
+          class="base-button w-full flex justify-center submit-form-button"
+          :disabled="isLoading"
+        >
+          <span class="flex">
+            <IconInnerShadowTop
+              v-if="isLoading"
+              class="mr-1 animate-spin"
+            />
+            <span>
+              {{ isLoading ? 'Loading...' : 'Start Verification' }}
+            </span><span
+              v-if="isLoading"
+              class="w-6 flex justify-start mr-1"
+            ><span>...</span></span>
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import MarkdownContent from './markdown_content'
+import { IconInnerShadowTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'KbaStep',
+  components: {
+    MarkdownContent,
+    IconInnerShadowTop
+  },
+  inject: ['baseUrl', 't'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    submitter: {
+      type: Object,
+      required: true
+    },
+    submitterSlug: {
+      type: String,
+      required: true
+    },
+    emptyValueRequiredStep: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    values: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['submit'],
+  data () {
+    return {
+      isLoading: false,
+      isSubmitting: false,
+      questions: null,
+      currentQuestionIndex: 0,
+      token: null,
+      reference: null,
+      answers: {},
+      error: null,
+      timeLeftSeconds: null,
+      countdownIntervalId: null,
+      form: {
+        fn: '',
+        ln: '',
+        addr: '',
+        city: '',
+        state: '',
+        zip: '',
+        dob: '',
+        ssn: '',
+        phone: '',
+        email: ''
+      }
+    }
+  },
+  computed: {
+    currentQuestion () {
+      return this.questions ? this.questions[this.currentQuestionIndex] : null
+    },
+    isRequiredFieldEmpty () {
+      return this.emptyValueRequiredStep && this.emptyValueRequiredStep[0] !== this.field
+    },
+    kbaTimeLimitSeconds () {
+      return 90
+    },
+    states () {
+      return [
+        { code: 'AL', name: 'Alabama' },
+        { code: 'AK', name: 'Alaska' },
+        { code: 'AZ', name: 'Arizona' },
+        { code: 'AR', name: 'Arkansas' },
+        { code: 'CA', name: 'California' },
+        { code: 'CO', name: 'Colorado' },
+        { code: 'CT', name: 'Connecticut' },
+        { code: 'DE', name: 'Delaware' },
+        { code: 'DC', name: 'District of Columbia' },
+        { code: 'FL', name: 'Florida' },
+        { code: 'GA', name: 'Georgia' },
+        { code: 'HI', name: 'Hawaii' },
+        { code: 'ID', name: 'Idaho' },
+        { code: 'IL', name: 'Illinois' },
+        { code: 'IN', name: 'Indiana' },
+        { code: 'IA', name: 'Iowa' },
+        { code: 'KS', name: 'Kansas' },
+        { code: 'KY', name: 'Kentucky' },
+        { code: 'LA', name: 'Louisiana' },
+        { code: 'ME', name: 'Maine' },
+        { code: 'MD', name: 'Maryland' },
+        { code: 'MA', name: 'Massachusetts' },
+        { code: 'MI', name: 'Michigan' },
+        { code: 'MN', name: 'Minnesota' },
+        { code: 'MS', name: 'Mississippi' },
+        { code: 'MO', name: 'Missouri' },
+        { code: 'MT', name: 'Montana' },
+        { code: 'NE', name: 'Nebraska' },
+        { code: 'NV', name: 'Nevada' },
+        { code: 'NH', name: 'New Hampshire' },
+        { code: 'NJ', name: 'New Jersey' },
+        { code: 'NM', name: 'New Mexico' },
+        { code: 'NY', name: 'New York' },
+        { code: 'NC', name: 'North Carolina' },
+        { code: 'ND', name: 'North Dakota' },
+        { code: 'OH', name: 'Ohio' },
+        { code: 'OK', name: 'Oklahoma' },
+        { code: 'OR', name: 'Oregon' },
+        { code: 'PA', name: 'Pennsylvania' },
+        { code: 'RI', name: 'Rhode Island' },
+        { code: 'SC', name: 'South Carolina' },
+        { code: 'SD', name: 'South Dakota' },
+        { code: 'TN', name: 'Tennessee' },
+        { code: 'TX', name: 'Texas' },
+        { code: 'UT', name: 'Utah' },
+        { code: 'VT', name: 'Vermont' },
+        { code: 'VA', name: 'Virginia' },
+        { code: 'WA', name: 'Washington' },
+        { code: 'WV', name: 'West Virginia' },
+        { code: 'WI', name: 'Wisconsin' },
+        { code: 'WY', name: 'Wyoming' }
+      ]
+    },
+    isLastQuestion () {
+      return this.questions && this.currentQuestionIndex === this.questions.length - 1
+    },
+    formattedTimeLeft () {
+      if (this.timeLeftSeconds === null) return ''
+
+      const minutes = Math.floor(this.timeLeftSeconds / 60)
+      const seconds = this.timeLeftSeconds % 60
+
+      return `${minutes}:${String(seconds).padStart(2, '0')}`
+    }
+  },
+  beforeUnmount () {
+    this.clearCountdown()
+  },
+  methods: {
+    clearCountdown () {
+      if (this.countdownIntervalId) {
+        clearInterval(this.countdownIntervalId)
+        this.countdownIntervalId = null
+      }
+
+      this.timeLeftSeconds = null
+    },
+    startCountdown () {
+      this.clearCountdown()
+
+      this.timeLeftSeconds = this.kbaTimeLimitSeconds
+
+      this.countdownIntervalId = setInterval(() => {
+        if (this.timeLeftSeconds === null) return
+
+        this.timeLeftSeconds -= 1
+
+        if (this.timeLeftSeconds <= 0) {
+          this.handleTimeout()
+        }
+      }, 1000)
+    },
+    handleTimeout () {
+      this.clearCountdown()
+
+      this.questions = null
+      this.token = null
+      this.reference = null
+      this.answers = {}
+      this.currentQuestionIndex = 0
+      this.error = `Knowledge Based Authentication timed out. You only have ${this.kbaTimeLimitSeconds} seconds to complete the verification. Please retry.`
+    },
+    nextQuestion () {
+      if (this.isLastQuestion) {
+        this.$emit('submit')
+      } else {
+        this.currentQuestionIndex++
+      }
+    },
+    restartKba () {
+      this.clearCountdown()
+
+      this.questions = null
+      this.token = null
+      this.reference = null
+      this.answers = {}
+      this.currentQuestionIndex = 0
+      this.error = null
+    },
+    async startKba () {
+      this.isLoading = true
+      this.error = null
+      this.clearCountdown()
+
+      try {
+        const payload = { ...this.form, submitter_slug: this.submitterSlug }
+
+        if (payload.dob) {
+          payload.dob = payload.dob.replace(/-/g, '')
+        }
+
+        if (payload.ssn) {
+          payload.ssn = payload.ssn.replace(/\D/g, '')
+        }
+
+        if (payload.phone) {
+          payload.phone = payload.phone.replace(/^\+1/, '')
+        }
+
+        const resp = await fetch(this.baseUrl + '/api/kba', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        })
+
+        const data = await resp.json()
+
+        if (!resp.ok) throw new Error(data.error || 'Failed to start KBA')
+
+        if (data.result && data.result.action === 'FAIL') {
+          if (data.result.detail === 'NO MATCH') {
+            throw new Error('Unfortunately, we were unable to start Knowledge Based Authentication with the details provided. Please review and confirm that all your personal details are correct.')
+          }
+
+          throw new Error(data.result.detail || 'KBA Start Failed')
+        }
+
+        if (data.output && data.output.questions && data.output.questions.questions) {
+          this.questions = data.output.questions.questions
+          this.token = data.continuations.questions.template.token
+          this.reference = data.meta.reference
+
+          this.questions.forEach(q => {
+            this.answers[q.id] = null
+          })
+
+          this.startCountdown()
+        } else {
+          throw new Error('Invalid KBA response')
+        }
+      } catch (e) {
+        this.error = e.message
+      } finally {
+        this.isLoading = false
+      }
+    },
+    async submit () {
+      this.clearCountdown()
+
+      this.isSubmitting = true
+      this.error = null
+
+      const formattedAnswers = Object.keys(this.answers).reduce((acc, key) => {
+        acc[key] = [this.answers[key]]
+
+        return acc
+      }, {})
+
+      try {
+        const resp = await fetch(this.baseUrl + `/api/kba/${this.field.uuid}`, {
+          method: 'PUT',
+          body: JSON.stringify({
+            token: this.token,
+            answers: formattedAnswers,
+            reference: this.reference,
+            submitter_slug: this.submitterSlug
+          }),
+          headers: { 'Content-Type': 'application/json' }
+        })
+
+        const data = await resp.json()
+
+        if (data.result?.action !== 'PASS') {
+          if (data.result?.issues?.length) {
+            this.error = `Knowledge Based Authentication Failed - make sure you provide correct details for the Knowledge Based authentication: ${data.result.issues.join(', ')}`
+          } else {
+            this.error = 'Knowledge Based Authentication Failed - make sure you provide correct answers for the Knowledge Based authentication.'
+          }
+
+          throw new Error('Knowledge Based Authentication Failed')
+        }
+
+        if (!resp.ok) {
+          this.error = 'Failed to submit answers'
+
+          throw new Error('Failed to submit answers')
+        }
+
+        return resp
+      } finally {
+        this.isSubmitting = false
+      }
+    }
+  }
+}
+</script>
@@ -62,7 +62,7 @@
          width="22"
        />
        <span>
-          {{ t('pay_with_strip') }}
+          {{ t('pay_with_stripe') }}
        </span>
      </button>
    </div>
@@ -92,10 +92,20 @@ export default {
      type: Object,
      required: true
    },
+    readonlyValues: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    values: {
      type: Object,
      required: true
    },
+    fields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
    submitterSlug: {
      type: String,
      required: true
@@ -109,6 +119,13 @@ export default {
    }
  },
  computed: {
+    fieldsUuidIndex () {
+      return this.fields.reduce((acc, field) => {
+        acc[field.uuid] = field
+
+        return acc
+      }, {})
+    },
    queryParams () {
      return new URLSearchParams(window.location.search)
    },
@@ -116,6 +133,10 @@ export default {
      return this.queryParams.get('stripe_session_id')
    },
    defaultName () {
+      if (this.field.preferences?.price_id || this.field.preferences?.payment_link_id) {
+        return ''
+      }
+
      const { price, currency } = this.field.preferences || {}

      const formatter = new Intl.NumberFormat([], {
@@ -178,12 +199,23 @@ export default {
  },
  methods: {
    calculateFormula () {
-      const transformedFormula = this.field.preferences.formula.replace(/{{(.*?)}}/g, (match, uuid) => {
-        return this.values[uuid] || 0.0
+      const transformedFormula = this.normalizeFormula(this.field.preferences.formula).replace(/{{(.*?)}}/g, (match, uuid) => {
+        return this.readonlyValues[uuid] || this.values[uuid] || 0.0
      })

      return this.math.evaluate(transformedFormula.toLowerCase())
    },
+    normalizeFormula (formula, depth = 0) {
+      if (depth > 10) return formula
+
+      return formula.replace(/{{(.*?)}}/g, (match, uuid) => {
+        if (this.fieldsUuidIndex[uuid]) {
+          return `(${this.normalizeFormula(this.fieldsUuidIndex[uuid].preferences.formula, depth + 1)})`
+        } else {
+          return match
+        }
+      })
+    },
    async submit () {
      if (this.sessionId) {
        return fetch(this.baseUrl + '/api/stripe_payments/' + this.sessionId, {
@@ -100,7 +100,7 @@
        <input
          :id="field.uuid"
          ref="phone"
-          :value="phoneValue"
+          :value="defaultValue && detectedPhoneValueDialCode ? phoneValue.split('+' + detectedPhoneValueDialCode).slice(-1).join('') : phoneValue"
          :readonly="!!defaultValue"
          class="base-input !text-2xl !rounded-l-none !border-l-0 !outline-none w-full"
          autocomplete="tel"
@@ -22,7 +22,7 @@
      <div class="space-x-2 flex flex-none">
        <span
          v-if="isTextSignature && format !== 'typed_or_upload' && format !== 'typed' && format !== 'upload'"
-          class="tooltip"
+          class="md:tooltip"
          :data-tip="t('draw_signature')"
        >
          <a
@@ -39,7 +39,7 @@
        </span>
        <span
          v-else-if="withTypedSignature && format !== 'drawn_or_upload' && format !== 'typed_or_upload' && format !== 'typed' && format !== 'drawn' && format !== 'upload'"
-          class="tooltip ml-2"
+          class="md:tooltip ml-2"
          :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
          :data-tip="t('type_text')"
        >
@@ -57,7 +57,7 @@
        </span>
        <span
          v-if="format !== 'typed' && format !== 'drawn' && format !== 'upload' && format !== 'drawn_or_typed'"
-          class="tooltip"
+          class="md:tooltip"
          :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
          :data-tip="t('take_photo')"
        >
@@ -86,8 +86,8 @@
        </a>
        <span
          v-if="withQrButton && !modelValue && !computedPreviousValue && format !== 'typed_or_upload' && format !== 'typed' && format !== 'upload'"
-          class="tooltip before:translate-x-[-90%]"
-          :data-tip="t('drawn_signature_on_a_touchscreen_device')"
+          class="md:tooltip before:translate-x-[-90%]"
+          :data-tip="t('sign_on_the_touchscreen')"
        >
          <a
            href="#"
@@ -127,6 +127,12 @@
      type="hidden"
      :name="`values[${field.uuid}]`"
    >
+    <input
+      v-if="isTouchAttachment"
+      :value="touchAttachmentUuid"
+      type="hidden"
+      name="touch_attachment_uuid"
+    >
    <img
      v-if="modelValue || computedPreviousValue"
      :src="attachmentsIndex[modelValue || computedPreviousValue].url"
@@ -142,7 +148,7 @@
    />
    <div
      v-else
-      class="relative"
+      class="relative select-none"
    >
      <div
        v-if="!modelValue && !computedPreviousValue && !isShowQr && !isTextSignature && isSignatureStarted"
@@ -175,9 +181,7 @@
        v-if="isShowQr"
        class="top-0 bottom-0 right-0 left-0 absolute bg-base-content/10 rounded-2xl"
      >
-        <div
-          class="absolute top-1.5 right-1.5 tooltip"
-        >
+        <div class="absolute top-1.5 right-1.5">
          <a
            href="#"
            class="btn btn-sm btn-circle btn-normal btn-outline"
@@ -211,7 +215,7 @@
      @input="updateWrittenSignature"
    >
    <select
-      v-if="requireSigningReason && !isOtherReason"
+      v-if="withSigningReason && !isOtherReason"
      class="select base-input !text-2xl w-full mt-6 text-center"
      :class="{ 'text-gray-300': !reason }"
      required
@@ -226,24 +230,37 @@
      >
        {{ t('select_a_reason') }}
      </option>
-      <option
-        v-for="(label, option) in defaultReasons"
-        :key="option"
-        :value="option"
-        :selected="reason === option"
-        class="text-base-content"
-      >
-        {{ label }}
-      </option>
-      <option
-        value="other"
-        class="text-base-content"
-      >
-        {{ t('other') }}
-      </option>
+      <template v-if="field.preferences?.reasons">
+        <option
+          v-for="option in field.preferences.reasons"
+          :key="option"
+          :value="option"
+          :selected="reason === option"
+          class="text-base-content"
+        >
+          {{ option }}
+        </option>
+      </template>
+      <template v-else>
+        <option
+          v-for="(label, option) in defaultReasons"
+          :key="option"
+          :value="option"
+          :selected="reason === option"
+          class="text-base-content"
+        >
+          {{ label }}
+        </option>
+        <option
+          value="other"
+          class="text-base-content"
+        >
+          {{ t('other') }}
+        </option>
+      </template>
    </select>
    <input
-      v-if="requireSigningReason && isOtherReason"
+      v-if="withSigningReason && isOtherReason"
      class="base-input !text-2xl w-full mt-6"
      required
      :name="`values[${field.preferences.reason_field_uuid}]`"
@@ -253,7 +270,7 @@
      @input="$emit('update:reason', $event.target.value)"
    >
    <input
-      v-if="requireSigningReason"
+      v-if="withSigningReason"
      hidden
      name="with_reason"
      :value="field.preferences.reason_field_uuid"
@@ -268,7 +285,7 @@
    <div
      v-else-if="withDisclosure"
      dir="auto"
-      class="text-base-content/60 text-xs text-center w-full mt-1"
+      class="text-base-content/60 text-xs text-center w-full mt-1 select-none"
    >
      {{ t('by_clicking_you_agree_to_the').replace('{button}', buttonText.charAt(0).toUpperCase() + buttonText.slice(1)) }} <a
        href="https://www.docuseal.com/esign-disclosure"
@@ -292,14 +309,14 @@
 <script>
 import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2, IconQrcode, IconX } from '@tabler/icons-vue'
 import { cropCanvasAndExportToPNG } from './crop_canvas'
-import { isValidSignatureCanvas } from './validate_signature'
+import { isValidSignatureCanvas, isCanvasBlocked } from './validate_signature'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
 import FileDropzone from './dropzone'
 import MarkdownContent from './markdown_content'
 import { v4 } from 'uuid'

-let isFontLoaded = false
+let fontLoadPromise = null

 const scale = 3

@@ -323,6 +340,10 @@ export default {
      type: Object,
      required: true
    },
+    values: {
+      type: Object,
+      required: true
+    },
    requireSigningReason: {
      type: Boolean,
      required: false,
@@ -377,6 +398,11 @@ export default {
      required: false,
      default: ''
    },
+    touchAttachmentUuid: {
+      type: String,
+      required: false,
+      default: ''
+    },
    reason: {
      type: String,
      required: false,
@@ -388,13 +414,14 @@ export default {
      default: ''
    }
  },
-  emits: ['attached', 'update:model-value', 'start', 'minimize', 'update:reason'],
+  emits: ['attached', 'update:model-value', 'start', 'minimize', 'update:reason', 'touch-attachment'],
  data () {
    return {
      isSignatureStarted: false,
      isShowQr: false,
      isOtherReason: false,
      isUsePreviousValue: true,
+      isTouchAttachment: false,
      isTextSignature: this.field.preferences?.format === 'typed' || this.field.preferences?.format === 'typed_or_upload',
      uploadImageInputKey: Math.random().toString()
    }
@@ -406,6 +433,9 @@ export default {
    format () {
      return this.field.preferences?.format
    },
+    withSigningReason () {
+      return this.requireSigningReason || this.field.preferences?.reasons?.length
+    },
    defaultReasons () {
      return {
        [this.t('approved_by')]: this.t('approved'),
@@ -424,21 +454,15 @@ export default {
  created () {
    this.isSignatureStarted = !!this.computedPreviousValue

-    if (this.requireSigningReason) {
+    if (this.withSigningReason) {
      this.field.preferences ||= {}
      this.field.preferences.reason_field_uuid ||= v4()
-      this.isOtherReason = this.reason && !this.defaultReasons[this.reason]
+      this.isOtherReason = this.reason && !this.defaultReasons[this.reason] &&
+        (!this.field.preferences?.reasons?.length || !this.field.preferences.reasons.includes(this.reason))
    }
  },
  async mounted () {
-    this.$nextTick(() => {
-      if (this.$refs.canvas) {
-        this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
-        this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth * scale / 3
-
-        this.$refs.canvas.getContext('2d').scale(scale, scale)
-      }
-    })
+    this.$nextTick(() => this.setCanvasSize())

    if (this.$refs.canvas) {
      this.pad = new SignaturePad(this.$refs.canvas)
@@ -453,13 +477,18 @@ export default {
        this.$emit('start')
      })

-      this.intersectionObserver = new IntersectionObserver((entries, observer) => {
+      this.intersectionObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
-            this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
-            this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth * scale / 3
+            this.setCanvasSize()

-            this.$refs.canvas.getContext('2d').scale(scale, scale)
+            if (this.isTextSignature) {
+              this.$nextTick(() => {
+                if (this.$refs.textInput) {
+                  this.initTypedSignature()
+                }
+              })
+            }

            this.intersectionObserver?.disconnect()
          }
@@ -467,13 +496,66 @@ export default {
      })

      this.intersectionObserver.observe(this.$refs.canvas)
+
+      this.resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(() => {
+          if (!this.$refs.canvas) return
+
+          const { width, height } = this.$refs.canvas
+
+          this.setCanvasSize()
+
+          if (this.$refs.canvas.width !== width || this.$refs.canvas.height !== height) {
+            this.redrawCanvas(width, height)
+          }
+        })
+      })
+
+      this.resizeObserver.observe(this.$refs.canvas.parentNode)
+
+      if (this.isTextSignature) {
+        this.loadFont()
+      }
    }
  },
  beforeUnmount () {
    this.intersectionObserver?.disconnect()
+    this.resizeObserver?.disconnect()
    this.stopCheckSignature()
  },
  methods: {
+    setCanvasSize () {
+      const canvas = this.$refs.canvas
+
+      if (canvas) {
+        const width = canvas.parentNode.clientWidth
+        const height = width / 3
+
+        if (canvas.width !== width * scale || canvas.height !== height * scale) {
+          canvas.width = width * scale
+          canvas.height = height * scale
+
+          canvas.getContext('2d').scale(scale, scale)
+        }
+      }
+    },
+    redrawCanvas (oldWidth, oldHeight) {
+      const canvas = this.$refs.canvas
+
+      if (this.pad && !this.isTextSignature && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+        const sx = canvas.width / oldWidth
+        const sy = canvas.height / oldHeight
+
+        const scaledData = this.pad.toData().map((stroke) => ({
+          ...stroke,
+          points: stroke.points.map((p) => ({ ...p, x: p.x * sx, y: p.y * sy }))
+        }))
+
+        this.pad.fromData(scaledData)
+      } else if (this.isTextSignature && this.$refs.textInput) {
+        this.updateWrittenSignature({ target: this.$refs.textInput })
+      }
+    },
    remove () {
      this.$emit('update:model-value', '')

@@ -481,17 +563,17 @@ export default {
      this.isSignatureStarted = false
    },
    loadFont () {
-      if (!isFontLoaded) {
+      if (!fontLoadPromise) {
        const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript-Regular.otf) format("opentype")`)

-        font.load().then((loadedFont) => {
+        fontLoadPromise = font.load().then((loadedFont) => {
          document.fonts.add(loadedFont)
-
-          isFontLoaded = true
        }).catch((error) => {
          console.error('Font loading failed:', error)
        })
      }
+
+      return fontLoadPromise
    },
    showQr () {
      this.isShowQr = true
@@ -591,14 +673,29 @@ export default {

      if (this.isTextSignature) {
        this.$nextTick(() => {
-          this.$refs.textInput.focus()
+          if (this.$refs.textInput) {
+            if (!this.submitter.name) {
+              this.$refs.textInput.focus()
+            }

-          this.loadFont()
+            this.initTypedSignature()

-          this.$emit('start')
+            this.$emit('start')
+          }
        })
      }
    },
+    async initTypedSignature () {
+      if (this.submitter.name) {
+        this.$refs.textInput.value = this.submitter.name
+      }
+
+      await this.loadFont()
+
+      if (this.$refs.textInput.value) {
+        this.updateWrittenSignature({ target: this.$refs.textInput })
+      }
+    },
    drawImage (event) {
      this.remove()
      this.clear()
@@ -677,6 +774,13 @@ export default {
    },
    async submit () {
      if (this.modelValue || this.computedPreviousValue) {
+        if (this.touchAttachmentUuid && this.computedPreviousValue === this.touchAttachmentUuid && !Object.values(this.values).includes(this.touchAttachmentUuid)) {
+          this.isTouchAttachment = true
+          this.$emit('touch-attachment', this.touchAttachmentUuid)
+        } else {
+          this.isTouchAttachment = false
+        }
+
        if (this.computedPreviousValue) {
          this.$emit('update:model-value', this.computedPreviousValue)
        }
@@ -686,7 +790,15 @@ export default {

      if (this.isSignatureStarted && this.pad.toData().length > 0 && !isValidSignatureCanvas(this.pad.toData())) {
        if (this.field.required === true || this.pad.toData().length > 0) {
-          alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+          if (isCanvasBlocked()) {
+            alert(this.t('browser_privacy_settings_block_canvas'))
+
+            if (window.Rollbar) {
+              window.Rollbar.info('Canvas blocked')
+            }
+          } else {
+            alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+          }

          return Promise.reject(new Error('Image too small or simple'))
        } else {
@@ -742,7 +854,15 @@ export default {
          }
        }).catch((error) => {
          if (this.field.required === true) {
-            alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+            if (isCanvasBlocked()) {
+              alert(this.t('browser_privacy_settings_block_canvas'))
+
+              if (window.Rollbar) {
+                window.Rollbar.info('Canvas blocked')
+              }
+            } else {
+              alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+            }

            return reject(error)
          } else {
@@ -35,4 +35,24 @@ function isValidSignatureCanvas (data) {
  return validStrokes.length > 0
 }

-export { isValidSignatureCanvas }
+function isCanvasBlocked () {
+  try {
+    const testCanvas = document.createElement('canvas')
+
+    testCanvas.width = 2
+    testCanvas.height = 2
+
+    const ctx = testCanvas.getContext('2d')
+
+    ctx.fillStyle = 'rgb(255, 0, 0)'
+    ctx.fillRect(0, 0, 2, 2)
+
+    const pixel = ctx.getImageData(0, 0, 1, 1).data
+
+    return pixel[0] !== 255 || pixel[1] !== 0 || pixel[2] !== 0 || pixel[3] !== 255
+  } catch (e) {
+    return true
+  }
+}
+
+export { isValidSignatureCanvas, isCanvasBlocked }
@@ -14,7 +14,7 @@
    <MarkdownContent :string="field.description" />
  </div>
  <div
-    v-if="emptyValueRequiredStep && emptyValueRequiredStep[0] !== field"
+    v-if="isRequiredFieldEmpty"
    class="px-1 field-description-text"
  >
    {{ t('complete_all_required_fields_to_proceed_with_identity_verification') }}
@@ -100,6 +100,9 @@ export default {
    }
  },
  computed: {
+    isRequiredFieldEmpty () {
+      return this.emptyValueRequiredStep && this.emptyValueRequiredStep[0] !== this.field
+    },
    countryCode () {
      const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
      const browserTz = browserTimeZone.split('/')[1]
@@ -116,6 +119,7 @@ export default {
        docId: this.eidEasyData.doc_id,
        language: this.locale,
        countryCode: this.countryCode,
+        sandbox: ['demo.docuseal.tech'].includes(location.host),
        enabledMethods: {
          signature: this.eidEasyData.available_methods
        },
@@ -131,17 +135,19 @@ export default {
    }
  },
  async mounted () {
-    this.isLoading = true
+    if (!this.isRequiredFieldEmpty) {
+      this.isLoading = true

-    if (new URLSearchParams(window.location.search).get('submit') === 'true') {
-      this.$emit('submit')
-    } else {
-      Promise.all([
-        import('@eid-easy/eideasy-widget'),
-        this.start()
-      ]).finally(() => {
-        this.isLoading = false
-      })
+      if (new URLSearchParams(window.location.search).get('submit') === 'true') {
+        this.$emit('submit')
+      } else {
+        Promise.all([
+          import('@eid-easy/eideasy-widget'),
+          this.start()
+        ]).finally(() => {
+          this.isLoading = false
+        })
+      }
    }
  },
  methods: {
@@ -156,6 +162,10 @@ export default {
      }).then(async (resp) => {
        this.eidEasyData = await resp.json()

+        if (this.eidEasyData.check_completed) {
+          this.$emit('submit')
+        }
+
        if (this.eidEasyData.available_methods[0] === 'itsme-qes-signature' &&
            this.eidEasyData.available_methods.length === 1) {
          const redirectUrl = new URL('https://id.eideasy.com/sign_contract_external')
@@ -166,7 +176,7 @@ export default {
          redirectUrl.searchParams.append('lang', this.locale)

          this.redirectUrl = redirectUrl.toString()
-        } else {
+        } else if (this.$refs.widgetContainer) {
          const eidEasyWidget = document.createElement('eideasy-widget')

          for (const key in this.widgetSettings) {
@@ -179,15 +189,23 @@ export default {
      })
    },
    async submit () {
-      return fetch(this.baseUrl + '/api/identity_verification', {
+      const resp = await fetch(this.baseUrl + '/api/identity_verification', {
        method: 'POST',
        body: JSON.stringify({
          submitter_slug: this.submitterSlug
        }),
        headers: { 'Content-Type': 'application/json' }
-      }).then(async (resp) => {
-        return resp
      })
+
+      if (resp.status === 404) {
+        throw new Error('Verification not completed yet')
+      }
+
+      if (resp.ok) {
+        return resp
+      } else {
+        throw new Error('Verification failed')
+      }
    }
  }
 }
@@ -8,9 +8,9 @@
    @touchstart="startTouchDrag"
  >
    <div
-      v-if="isSelected || isDraw"
+      v-if="isSelected || isDraw || isInMultiSelection"
      class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none"
-      :class="field.type === 'heading' ? '' : borderColors[submitterIndex % borderColors.length]"
+      :class="activeBorderClasses"
    />
    <div
      v-if="field.type === 'cells' && (isSelected || isDraw)"
@@ -24,7 +24,7 @@
        :style="{ left: (cellW / area.w * 100) + '%' }"
      >
        <span
-          v-if="index === 0 && editable"
+          v-if="index === 0 && editable && !isInMultiSelection"
          class="h-2.5 w-2.5 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-ew-resize z-10"
          style="left: -4px"
          @mousedown.stop="startResizeCell"
@@ -32,14 +32,14 @@
      </div>
    </div>
    <div
-      v-if="field?.type && (isSelected || isNameFocus)"
+      v-if="field?.type && (isSelected || isNameFocus) && !isInMultiSelection"
      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
      style="top: -25px; height: 25px"
      @mousedown.stop
      @pointerdown.stop
    >
      <FieldSubmitter
-        v-if="field.type != 'heading'"
+        v-if="field.type != 'heading' && field.type != 'strikethrough'"
        v-model="field.submitter_uuid"
        class="border-r roles-dropdown"
        :compact="true"
@@ -48,7 +48,7 @@
        :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px] mt-[1px]'"
        :submitters="template.submitters"
        @update:model-value="save"
-        @click="selectedAreaRef.value = area"
+        @click="selectedAreasRef.value = [area]"
      />
      <FieldType
        v-model="field.type"
@@ -57,7 +57,7 @@
        :button-classes="'px-1'"
        :menu-classes="'bg-white rounded-t-none'"
        @update:model-value="[maybeUpdateOptions(), save()]"
-        @click="selectedAreaRef.value = area"
+        @click="selectedAreasRef.value = [area]"
      />
      <span
        v-if="field.type !== 'checkbox' || field.name"
@@ -134,6 +134,7 @@
            @focusout="maybeBlurSettings"
          >
            <FieldSettings
+              v-if="isMobile"
              :field="field"
              :default-field="defaultField"
              :editable="editable"
@@ -145,9 +146,17 @@
              @click-formula="isShowFormulaModal = true"
              @click-font="isShowFontModal = true"
              @click-description="isShowDescriptionModal = true"
+              @add-custom-field="$emit('add-custom-field')"
              @click-condition="isShowConditionsModal = true"
-              @scroll-to="[selectedAreaRef.value = $event, $emit('scroll-to', $event)]"
+              @save="save"
+              @scroll-to="[selectedAreasRef.value = [$event], $emit('scroll-to', $event)]"
            />
+            <div
+              v-else
+              class="whitespace-normal"
+            >
+              The dots menu is retired in favor of the field context menu. Right-click the field to access field settings. Double-click the field to set a default value.
+            </div>
          </ul>
        </span>
      </div>
@@ -164,16 +173,58 @@
      ref="touchValueTarget"
      class="flex h-full w-full field-area"
      dir="auto"
-      :class="[isValueInput ? 'cursor-text' : '', isValueInput || isCheckboxInput || isSelectInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center items-center']"
+      :class="[isValueInput ? 'cursor-text' : '', isValueInput || isCheckboxInput || isSelectInput ? 'bg-opacity-50' : 'bg-opacity-80', bgClasses, isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center items-center']"
      @click="focusValueInput"
    >
      <span
        v-if="field"
        class="flex justify-center items-center space-x-1"
-        :class="{ 'w-full': isWFullType, 'h-full': !isValueInput && !isDefaultValuePresent }"
+        :class="{ 'w-full': isWFullType, 'h-full': !isValueInput && (!isDefaultValuePresent || field.type === 'strikethrough') }"
      >
        <div
-          v-if="isDefaultValuePresent || isValueInput || isSelectInput || (withFieldPlaceholder && field.areas && field.type !== 'checkbox')"
+          v-if="field.type === 'strikethrough'"
+          class="w-full h-full flex items-center justify-center"
+        >
+          <svg
+            v-if="(((basePageWidth / pageWidth) * pageHeight) * area.h) < 41.6"
+            xmlns="http://www.w3.org/2000/svg"
+            width="100%"
+            height="100%"
+          >
+            <line
+              x1="0"
+              y1="50%"
+              x2="100%"
+              y2="50%"
+              :stroke="field.preferences?.color || 'red'"
+              :stroke-width="strikethroughWidth"
+            />
+          </svg>
+          <svg
+            v-else
+            xmlns="http://www.w3.org/2000/svg"
+            :style="{ overflow: 'visible', width: `calc(100% - ${strikethroughWidth})`, height: `calc(100% - ${strikethroughWidth})` }"
+          >
+            <line
+              x1="0"
+              y1="0"
+              x2="100%"
+              y2="100%"
+              :stroke="field.preferences?.color || 'red'"
+              :stroke-width="strikethroughWidth"
+            />
+            <line
+              x1="100%"
+              y1="0"
+              x2="0"
+              y2="100%"
+              :stroke="field.preferences?.color || 'red'"
+              :stroke-width="strikethroughWidth"
+            />
+          </svg>
+        </div>
+        <div
+          v-else-if="isDefaultValuePresent || isValueInput || isSelectInput || (withFieldPlaceholder && field.areas && field.type !== 'checkbox')"
          :class="{ 'w-full h-full': isWFullType }"
          :style="fontStyle"
        >
@@ -208,7 +259,8 @@
            </span>
            <div
              v-else-if="field.type === 'cells' && field.default_value"
-              class="w-full flex items-center"
+              class="w-full flex"
+              :class="fontClasses"
            >
              <div
                v-for="(char, index) in field.default_value"
@@ -224,7 +276,7 @@
              ref="defaultValueSelect"
              class="bg-transparent outline-none focus:outline-none w-full"
              @change="[field.default_value = $event.target.value, field.readonly = !!field.default_value?.length, save()]"
-              @focus="selectedAreaRef.value = area"
+              @focus="selectedAreasRef.value = [area]"
              @keydown.enter="onDefaultValueEnter"
            >
              <option
@@ -251,7 +303,7 @@
              :class="{ 'cursor-text': isValueInput }"
              :placeholder="withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : (field.type === 'date' ? field.preferences?.format || t('type_value') : t('type_value'))"
              @blur="onDefaultValueBlur"
-              @focus="selectedAreaRef.value = area"
+              @focus="selectedAreasRef.value = [area]"
              @paste.prevent="onPaste"
              @keydown.enter="onDefaultValueEnter"
            >{{ field.default_value }}</span>
@@ -277,6 +329,7 @@
    <span
      v-if="field?.type && editable"
      class="h-4 w-4 lg:h-2.5 lg:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
+      :class="{ 'z-30': isInMultiSelection }"
      @mousedown.stop="startResize"
      @touchstart="startTouchResize"
    />
@@ -289,6 +342,7 @@
        :editable="editable && !defaultField"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="save"
        @close="isShowFormulaModal = false"
      />
    </Teleport>
@@ -301,6 +355,7 @@
        :editable="editable && !defaultField"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="save"
        @close="isShowFontModal = false"
      />
    </Teleport>
@@ -312,6 +367,7 @@
        :item="field"
        :build-default-name="buildDefaultName"
        :default-field="defaultField"
+        @save="save"
        @close="isShowConditionsModal = false"
      />
    </Teleport>
@@ -324,6 +380,7 @@
        :editable="editable && !defaultField"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="save"
        @close="isShowDescriptionModal = false"
      />
    </Teleport>
@@ -356,7 +413,7 @@ export default {
    FieldSubmitter,
    IconX
  },
-  inject: ['template', 'selectedAreaRef', 'save', 't', 'isInlineSize'],
+  inject: ['template', 'save', 't', 'isInlineSize', 'selectedAreasRef', 'isCmdKeyRef', 'getFieldTypeIndex'],
  props: {
    area: {
      type: Object,
@@ -397,6 +454,16 @@ export default {
      required: false,
      default: false
    },
+    pageWidth: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    pageHeight: {
+      type: Number,
+      required: false,
+      default: 0
+    },
    defaultSubmitters: {
      type: Array,
      required: false,
@@ -411,9 +478,19 @@ export default {
      type: Object,
      required: false,
      default: null
+    },
+    isMobile: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isSelectMode: {
+      type: Boolean,
+      required: false,
+      default: false
    }
  },
-  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to'],
+  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to', 'add-custom-field'],
  data () {
    return {
      isShowFormulaModal: false,
@@ -436,8 +513,33 @@ export default {
    fieldNames: FieldType.computed.fieldNames,
    fieldLabels: FieldType.computed.fieldLabels,
    fieldIcons: FieldType.computed.fieldIcons,
+    bgClasses () {
+      if (this.field.type === 'heading') {
+        return 'bg-gray-50'
+      } else if (this.field.type === 'strikethrough') {
+        return 'bg-transparent'
+      } else {
+        return this.bgColors[this.submitterIndex % this.bgColors.length]
+      }
+    },
+    activeBorderClasses () {
+      if (this.field.type === 'heading') {
+        return ''
+      } else if (this.field.type === 'strikethrough') {
+        return 'border-dashed border-gray-300'
+      } else {
+        return this.borderColors[this.submitterIndex % this.borderColors.length]
+      }
+    },
    isWFullType () {
-      return ['cells', 'checkbox', 'radio', 'multiple', 'select'].includes(this.field.type)
+      return ['cells', 'checkbox', 'radio', 'multiple', 'select', 'strikethrough'].includes(this.field.type)
+    },
+    strikethroughWidth () {
+      if (this.isInlineSize) {
+        return '0.6cqmin'
+      } else {
+        return 'clamp(0px, 0.5vw, 6px)'
+      }
    },
    fontStyle () {
      let fontSize = ''
@@ -471,8 +573,11 @@ export default {
    lineHeight () {
      return 1.3
    },
+    basePageWidth () {
+      return 1040.0
+    },
    fontScale () {
-      return 1040 / 612.0
+      return this.basePageWidth / 612.0
    },
    isDefaultValuePresent () {
      return this.field?.default_value || this.field?.default_value === 0
@@ -491,7 +596,7 @@ export default {
      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
    },
    defaultName () {
-      return this.buildDefaultName(this.field, this.template.fields)
+      return this.buildDefaultName(this.field)
    },
    fontClasses () {
      if (!this.field.preferences) {
@@ -566,7 +671,10 @@ export default {
      ]
    },
    isSelected () {
-      return this.selectedAreaRef.value === this.area
+      return this.selectedAreasRef.value.includes(this.area)
+    },
+    isInMultiSelection () {
+      return this.selectedAreasRef.value.length >= 2 && this.isSelected
    },
    positionStyle () {
      const { x, y, w, h } = this.area
@@ -603,10 +711,10 @@ export default {
    buildAreaOptionValue (area) {
      const option = this.optionsUuidIndex[area.option_uuid]

-      return option.value || `${this.t('option')} ${this.field.options.indexOf(option) + 1}`
+      return option?.value || `${this.t('option')} ${this.field.options.indexOf(option) + 1}`
    },
    maybeToggleDefaultValue () {
-      if (!this.editable) {
+      if (!this.editable || this.isCmdKeyRef.value) {
        return
      }

@@ -690,7 +798,7 @@ export default {
      }
    },
    onNameFocus (e) {
-      this.selectedAreaRef.value = this.area
+      this.selectedAreasRef.value = [this.area]

      this.isNameFocus = true
      this.$refs.name.style.minWidth = this.$refs.name.clientWidth + 'px'
@@ -742,10 +850,15 @@ export default {
        delete this.field.options
      }

-      if (['heading'].includes(this.field.type)) {
+      if (this.field.type === 'heading') {
        this.field.readonly = true
      }

+      if (this.field.type === 'strikethrough') {
+        this.field.readonly = true
+        this.field.default_value = true
+      }
+
      if (['select', 'multiple', 'radio'].includes(this.field.type)) {
        this.field.options ||= [{ value: '', uuid: v4() }]
      }
@@ -821,6 +934,15 @@ export default {
      if (e.target.id === 'mask') {
        this.area.w = e.offsetX / e.target.clientWidth - this.area.x
        this.area.h = e.offsetY / e.target.clientHeight - this.area.y
+
+        if (this.isInMultiSelection) {
+          this.selectedAreasRef.value.forEach((area) => {
+            if (area !== this.area) {
+              area.w = this.area.w
+              area.h = this.area.h
+            }
+          })
+        }
      }
    },
    drag (e) {
@@ -846,7 +968,7 @@ export default {

      const rect = e.target.getBoundingClientRect()

-      this.selectedAreaRef.value = this.area
+      this.selectedAreasRef.value = [this.area]

      this.dragFrom = { x: rect.left - e.touches[0].clientX, y: rect.top - e.touches[0].clientY }

@@ -895,13 +1017,23 @@ export default {

      e.preventDefault()

+      if (e.metaKey || e.ctrlKey) {
+        if (!this.selectedAreasRef.value.includes(this.area)) {
+          this.selectedAreasRef.value.push(this.area)
+        } else {
+          this.selectedAreasRef.value.splice(this.selectedAreasRef.value.indexOf(this.area), 1)
+        }
+
+        return
+      }
+
      if (this.editable) {
        this.isDragged = true
      }

      const rect = e.target.getBoundingClientRect()

-      this.selectedAreaRef.value = this.area
+      this.selectedAreasRef.value = [this.area]

      this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }

@@ -970,7 +1102,9 @@ export default {
      this.$emit('stop-drag')
    },
    startResize () {
-      this.selectedAreaRef.value = this.area
+      if (!this.selectedAreasRef.value.includes(this.area)) {
+        this.selectedAreasRef.value = [this.area]
+      }

      this.$el.getRootNode().addEventListener('mousemove', this.resize)
      this.$el.getRootNode().addEventListener('mouseup', this.stopResize)
@@ -986,7 +1120,9 @@ export default {
      this.save()
    },
    startTouchResize (e) {
-      this.selectedAreaRef.value = this.area
+      if (!this.selectedAreasRef.value.includes(this.area)) {
+        this.selectedAreasRef.value = [this.area]
+      }

      this.$refs?.name?.blur()

@@ -1003,6 +1139,15 @@ export default {

      this.area.w = (e.touches[0].clientX - rect.left) / rect.width - this.area.x
      this.area.h = (e.touches[0].clientY - rect.top) / rect.height - this.area.y
+
+      if (this.isInMultiSelection) {
+        this.selectedAreasRef.value.forEach((area) => {
+          if (area !== this.area) {
+            area.w = this.area.w
+            area.h = this.area.h
+          }
+        })
+      }
    },
    stopTouchResize () {
      this.$el.getRootNode().removeEventListener('touchmove', this.touchResize)
@@ -9,7 +9,7 @@
    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
        <span class="modal-title">
-          {{ t('condition') }} - {{ (defaultField ? (defaultField.title || item.title || item.name) : item.name) || buildDefaultName(item, template.fields) }}
+          {{ t('condition') }} - {{ (defaultField ? (defaultField.title || item.title || item.name) : item.name) || buildDefaultName(item) }}
        </span>
        <a
          href="#"
@@ -83,7 +83,7 @@
                  class="text-base-content"
                  :selected="condition.field_uuid === f.uuid"
                >
-                  {{ f.name || buildDefaultName(f, template.fields) }}
+                  {{ f.name || buildDefaultName(f) }}
                </option>
              </select>
              <select
@@ -124,6 +124,16 @@
                  {{ option.value || `${t('option')} ${index + 1}` }}
                </option>
              </select>
+              <input
+                v-else-if="conditionField(condition)?.type === 'number' && ['equal', 'not_equal', 'greater_than', 'less_than'].includes(condition.action)"
+                v-model="condition.value"
+                type="number"
+                step="any"
+                class="input input-bordered input-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                :class="{ 'text-gray-300': !condition.value }"
+                :placeholder="t('type_value')"
+                required
+              >
            </div>
          </div>
          <a
@@ -154,7 +164,7 @@
 <script>
 export default {
  name: 'ConditionModal',
-  inject: ['t', 'save', 'template', 'withConditions'],
+  inject: ['t', 'template', 'withConditions'],
  props: {
    item: {
      type: Object,
@@ -168,26 +178,34 @@ export default {
    buildDefaultName: {
      type: Function,
      required: true
+    },
+    excludeFieldUuids: {
+      type: Array,
+      required: false,
+      default: () => []
    }
  },
-  emits: ['close'],
+  emits: ['close', 'save'],
  data () {
    return {
      conditions: this.item.conditions?.[0] ? JSON.parse(JSON.stringify(this.item.conditions)) : [{}]
    }
  },
  computed: {
+    excludeTypes () {
+      return ['heading', 'strikethrough']
+    },
    fields () {
      if (this.item.submitter_uuid) {
        return this.template.fields.reduce((acc, f) => {
-          if (f !== this.item && (!f.conditions?.length || !f.conditions.find((c) => c.field_uuid === this.item.uuid))) {
+          if (f !== this.item && !this.excludeTypes.includes(f.type) && !this.excludeFieldUuids.includes(f.uuid) && (!f.conditions?.length || !f.conditions.find((c) => c.field_uuid === this.item.uuid))) {
            acc.push(f)
          }

          return acc
        }, [])
      } else {
-        return this.template.fields
+        return this.template.fields.filter((f) => !this.excludeFieldUuids.includes(f.uuid))
      }
    }
  },
@@ -214,6 +232,8 @@ export default {
        actions.push('equal', 'not_equal')
      } else if (['multiple'].includes(field.type)) {
        actions.push('contains', 'does_not_contain')
+      } else if (field.type === 'number') {
+        actions.push('not_empty', 'empty', 'equal', 'not_equal', 'greater_than', 'less_than')
      } else {
        actions.push('not_empty', 'empty')
      }
@@ -231,7 +251,7 @@ export default {
        delete this.item.conditions
      }

-      this.save()
+      this.$emit('save')
      this.$emit('close')
    }
  }
@@ -6,34 +6,37 @@
    <span
      ref="contenteditable"
      dir="auto"
-      :contenteditable="editable"
-      style="min-width: 2px"
-      :class="iconInline ? 'inline' : 'block'"
-      class="peer outline-none focus:block"
+      :contenteditable="editable && (!editableOnButton || isEditable)"
+      :data-placeholder="placeholder"
+      :data-empty="isEmpty"
+      :style="{ minWidth }"
+      :class="[iconInline ? (isEmpty ? 'inline-block' : 'inline') : 'block', hideIcon ? 'focus:block' : '']"
+      class="peer relative inline-block outline-none before:pointer-events-none before:absolute before:left-0 before:top-0 before:select-none before:whitespace-pre before:text-neutral-400 before:content-[attr(data-placeholder)] before:opacity-0 data-[empty=true]:before:opacity-100"
      @paste.prevent="onPaste"
      @keydown.enter.prevent="blurContenteditable"
+      @input="updateInputValue"
+      @cut="updateInputValue"
      @focus="$emit('focus', $event)"
      @blur="onBlur"
+      @click="editable && (!editableOnButton || isEditable) ? '' : $emit('click-contenteditable')"
    >
      {{ value }}
    </span>
    <span
-      v-if="withRequired"
-      title="Required"
-      class="text-red-500 peer-focus:hidden"
-      @click="focusContenteditable"
+      v-if="withButton"
+      class="relative inline"
+      :class="{ 'peer-focus:hidden': hideIcon, 'peer-focus:invisible': !hideIcon }"
    >
-      *
+      <IconPencil
+        class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle pl-1"
+        :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
+        :title="t('edit')"
+        :class="{ invisible: !editable, 'absolute top-1/2 -translate-y-1/2': !iconInline || floatIcon, 'inline align-bottom': iconInline, 'left-0': floatIcon }"
+        :width="iconWidth + 4"
+        :stroke-width="iconStrokeWidth"
+        @click="clickEdit"
+      />
    </span>
-    <IconPencil
-      class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
-      :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
-      :title="t('edit')"
-      :class="{ invisible: !editable, 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
-      :width="iconWidth"
-      :stroke-width="iconStrokeWidth"
-      @click="[focusContenteditable(), selectOnEditClick && selectContent()]"
-    />
  </div>
 </template>

@@ -52,6 +55,16 @@ export default {
      required: false,
      default: ''
    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    withButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
    iconInline: {
      type: Boolean,
      required: false,
@@ -62,7 +75,12 @@ export default {
      required: false,
      default: 30
    },
-    withRequired: {
+    hideIcon: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    floatIcon: {
      type: Boolean,
      required: false,
      default: false
@@ -72,6 +90,16 @@ export default {
      required: false,
      default: false
    },
+    editableOnButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    minWidth: {
+      type: String,
+      required: false,
+      default: '2px'
+    },
    editable: {
      type: Boolean,
      required: false,
@@ -83,21 +111,34 @@ export default {
      default: 2
    }
  },
-  emits: ['update:model-value', 'focus', 'blur'],
+  emits: ['update:model-value', 'focus', 'blur', 'click-contenteditable'],
  data () {
    return {
+      isEditable: false,
+      inputValue: '',
      value: ''
    }
  },
+  computed: {
+    isEmpty () {
+      return !this.inputValue.replace(/\u200B/g, '').replace(/\u00A0/g, ' ').trim()
+    }
+  },
  watch: {
    modelValue: {
      handler (value) {
-        this.value = value
+        this.value = value || ''
      },
      immediate: true
    }
  },
+  mounted () {
+    this.updateInputValue()
+  },
  methods: {
+    updateInputValue () {
+      this.inputValue = this.$refs.contenteditable?.textContent || ''
+    },
    onPaste (e) {
      const text = (e.clipboardData || window.clipboardData).getData('text/plain')

@@ -108,6 +149,20 @@ export default {
        selection.getRangeAt(0).insertNode(document.createTextNode(text))
        selection.collapseToEnd()
      }
+
+      this.updateInputValue()
+    },
+    clickEdit (e) {
+      this.focusContenteditable()
+
+      if (this.selectOnEditClick) {
+        this.selectContent()
+      }
+    },
+    setText (text) {
+      this.$refs.contenteditable.innerText = text
+
+      this.updateInputValue()
    },
    selectContent () {
      const el = this.$refs.contenteditable
@@ -124,13 +179,24 @@ export default {
    },
    onBlur (e) {
      setTimeout(() => {
-        this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue
-        this.$emit('update:model-value', this.value)
+        if (this.$refs.contenteditable) {
+          this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue
+          this.$emit('update:model-value', this.value)
+        }
+
        this.$emit('blur', e)
+
+        this.isEditable = false
      }, 1)
    },
    focusContenteditable () {
-      this.$refs.contenteditable.focus()
+      this.isEditable = true
+
+      this.$nextTick(() => {
+        this.$refs.contenteditable.focus()
+
+        this.updateInputValue()
+      })
    },
    blurContenteditable () {
      this.$refs.contenteditable.blur()
@@ -0,0 +1,271 @@
+<template>
+  <div
+    class="list-field group"
+  >
+    <div
+      class="border border-dashed border-base-300 hover:border-base-content/20 rounded relative group fields-list-item transition-colors"
+      :style="{ backgroundColor: backgroundColor }"
+    >
+      <div class="flex items-center justify-between relative group/contenteditable-container">
+        <div
+          v-if="!isNew"
+          class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
+          @click="$emit('click', field)"
+        />
+        <div
+          class="absolute top-0 bottom-0 left-0 flex items-center transition-all cursor-grab group-hover:bg-base-200/50"
+          @click="$emit('click', field)"
+        >
+          <IconDrag style="margin-left: 1px" />
+        </div>
+        <div class="flex items-center p-1 pl-6 space-x-1">
+          <FieldType
+            v-model="field.type"
+            :editable="false"
+            :button-width="20"
+            @click="$emit('click', field)"
+          />
+          <Contenteditable
+            ref="name"
+            :model-value="field.name"
+            :placeholder="'Field Name'"
+            :icon-inline="true"
+            :icon-width="18"
+            :min-width="isNew ? '100px' : '2px'"
+            :icon-stroke-width="1.6"
+            :editable-on-button="!isNew"
+            :with-button="!isNew"
+            :class="{ 'cursor-pointer': !isNew }"
+            @click-contenteditable="$emit('click', field)"
+            @focus="onNameFocus"
+            @blur="onNameBlur"
+          />
+        </div>
+        <div
+          class="flex items-center space-x-1"
+        >
+          <PaymentSettings
+            v-if="field.type === 'payment' && !isNew"
+            :field="field"
+            :with-condition="false"
+            :with-force-open="false"
+            @click-description="isShowDescriptionModal = true"
+            @click-formula="isShowFormulaModal = true"
+          />
+          <span
+            v-else-if="!isNew"
+            class="dropdown dropdown-end field-settings-dropdown"
+            @mouseenter="renderDropdown = true"
+            @touchstart="renderDropdown = true"
+          >
+            <label
+              tabindex="0"
+              :title="t('settings')"
+              class="cursor-pointer text-transparent group-hover:text-base-content"
+            >
+              <IconSettings
+                :width="18"
+                :stroke-width="1.6"
+              />
+            </label>
+            <ul
+              v-if="renderDropdown"
+              tabindex="0"
+              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
+              :style="{ backgroundColor: dropdownBgColor }"
+              draggable="true"
+              @dragstart.prevent.stop
+              @click="closeDropdown"
+            >
+              <FieldSettings
+                :field="field"
+                :with-signature-id="withSignatureId"
+                :with-prefillable="withPrefillable"
+                :background-color="dropdownBgColor"
+                :with-areas="false"
+                :with-copy-to-all-pages="false"
+                :with-condition="false"
+                @click-formula="isShowFormulaModal = true"
+                @click-font="isShowFontModal = true"
+                @click-description="isShowDescriptionModal = true"
+                @save="$emit('save')"
+              />
+            </ul>
+          </span>
+          <button
+            v-if="isNew && !$refs.name"
+            class="relative text-base-content pr-1 field-save-button"
+            :title="t('save')"
+            @click="field.name ? $emit('save', field) : focusName()"
+          >
+            <IconCheck
+              :width="18"
+              :stroke-width="2"
+            />
+          </button>
+          <button
+            class="relative group-hover:text-base-content pr-1 field-remove-button"
+            :class="isNew ? 'text-base-content' : 'text-transparent group-hover:text-base-content'"
+            :title="t('remove')"
+            @click="onRemoveClick"
+          >
+            <IconTrashX
+              :width="18"
+              :stroke-width="1.6"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <Teleport
+      v-if="isShowFormulaModal"
+      :to="modalContainerEl"
+    >
+      <FormulaModal
+        :field="field"
+        :default-field="defaultField"
+        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
+        @close="isShowFormulaModal = false"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowFontModal"
+      :to="modalContainerEl"
+    >
+      <FontModal
+        :field="field"
+        :default-field="defaultField"
+        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
+        @close="isShowFontModal = false"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowDescriptionModal"
+      :to="modalContainerEl"
+    >
+      <DescriptionModal
+        :field="field"
+        :default-field="defaultField"
+        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
+        @close="isShowDescriptionModal = false"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import Contenteditable from './contenteditable'
+import FieldType from './field_type'
+import PaymentSettings from './payment_settings'
+import FieldSettings from './field_settings'
+import FormulaModal from './formula_modal'
+import FontModal from './font_modal'
+import DescriptionModal from './description_modal'
+import { IconTrashX, IconSettings, IconCheck } from '@tabler/icons-vue'
+import IconDrag from './icon_drag'
+
+export default {
+  name: 'CustomField',
+  components: {
+    Contenteditable,
+    IconSettings,
+    IconCheck,
+    FieldSettings,
+    PaymentSettings,
+    IconDrag,
+    FormulaModal,
+    FontModal,
+    DescriptionModal,
+    IconTrashX,
+    FieldType
+  },
+  inject: ['backgroundColor', 't'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    isNew: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    withPrefillable: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['remove', 'save', 'click'],
+  data () {
+    return {
+      isShowFormulaModal: false,
+      isShowFontModal: false,
+      isShowDescriptionModal: false,
+      renderDropdown: false
+    }
+  },
+  computed: {
+    dropdownBgColor () {
+      return ['', null, 'transparent'].includes(this.backgroundColor) ? 'white' : this.backgroundColor
+    },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    }
+  },
+  created () {
+    this.field.preferences ||= {}
+  },
+  mounted () {
+    if (this.isNew) {
+      this.focusName()
+    }
+  },
+  methods: {
+    buildDefaultName () {
+      return this.t('custom')
+    },
+    focusName () {
+      setTimeout(() => {
+        this.$refs.name.clickEdit()
+      }, 1)
+    },
+    onNameFocus (e) {
+      if (!this.field.name) {
+        setTimeout(() => {
+          this.$refs.name.$refs.contenteditable.innerText = ' '
+        }, 1)
+      }
+    },
+    closeDropdown () {
+      this.$el.getRootNode().activeElement.blur()
+    },
+    onRemoveClick () {
+      if (this.isNew || window.confirm(this.t('are_you_sure_'))) {
+        this.$emit('remove', this.field)
+      }
+    },
+    onNameBlur (e) {
+      const text = this.$refs.name.$refs.contenteditable.innerText.trim()
+
+      if (text) {
+        this.field.name = text
+      } else {
+        this.$refs.name.setText(this.field.name)
+      }
+
+      if (this.field.name) {
+        this.$emit('save')
+      }
+    }
+  }
+}
+</script>
@@ -9,7 +9,7 @@
    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
        <span class="modal-title">
-          {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field, template.fields) }}
+          {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field) }}
        </span>
        <a
          href="#"
@@ -67,7 +67,7 @@
 <script>
 export default {
  name: 'DescriptionModal',
-  inject: ['t', 'save', 'template'],
+  inject: ['t', 'template'],
  props: {
    field: {
      type: Object,
@@ -88,7 +88,7 @@ export default {
      required: true
    }
  },
-  emits: ['close'],
+  emits: ['close', 'save'],
  data () {
    return {
      description: this.field.description,
@@ -103,7 +103,7 @@ export default {
      this.field.description = this.description
      this.field.title = this.title

-      this.save()
+      this.$emit('save')
      this.$emit('close')
    },
    resizeTextarea () {
@@ -13,17 +13,28 @@
      :with-signature-id="withSignatureId"
      :with-prefillable="withPrefillable"
      :is-drag="isDrag"
+      :is-mobile="isMobile"
      :with-field-placeholder="withFieldPlaceholder"
      :default-fields="defaultFields"
      :drag-field-placeholder="dragFieldPlaceholder"
      :default-submitters="defaultSubmitters"
      :draw-field="drawField"
      :draw-field-type="drawFieldType"
+      :draw-custom-field="drawCustomField"
      :selected-submitter="selectedSubmitter"
      :total-pages="sortedPreviewImages.length"
      :image="image"
-      @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
+      :attachment-uuid="document.uuid"
+      :with-fields-detection="withFieldsDetection"
+      @drop-field="$emit('drop-field', { ...$event, attachment_uuid: document.uuid })"
      @remove-area="$emit('remove-area', $event)"
+      @copy-field="$emit('copy-field', $event)"
+      @paste-field="$emit('paste-field', { ...$event, attachment_uuid: document.uuid })"
+      @add-custom-field="$emit('add-custom-field', $event)"
+      @set-draw="$emit('set-draw', $event)"
+      @copy-selected-areas="$emit('copy-selected-areas')"
+      @delete-selected-areas="$emit('delete-selected-areas')"
+      @autodetect-fields="$emit('autodetect-fields', $event)"
      @scroll-to="scrollToArea"
      @draw="$emit('draw', { area: {...$event.area, attachment_uuid: document.uuid }, isTooSmall: $event.isTooSmall })"
    />
@@ -88,6 +99,11 @@ export default {
      required: false,
      default: () => []
    },
+    isMobile: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    allowDraw: {
      type: Boolean,
      required: false,
@@ -107,6 +123,11 @@ export default {
      required: false,
      default: null
    },
+    drawCustomField: {
+      type: Object,
+      required: false,
+      default: null
+    },
    baseUrl: {
      type: String,
      required: false,
@@ -116,9 +137,14 @@ export default {
      type: Boolean,
      required: false,
      default: false
+    },
+    withFieldsDetection: {
+      type: Boolean,
+      required: false,
+      default: false
    }
  },
-  emits: ['draw', 'drop-field', 'remove-area'],
+  emits: ['draw', 'drop-field', 'remove-area', 'paste-field', 'copy-field', 'copy-selected-areas', 'delete-selected-areas', 'autodetect-fields', 'add-custom-field', 'set-draw'],
  data () {
    return {
      pageRefs: []
@@ -160,7 +186,15 @@ export default {
  methods: {
    scrollToArea (area) {
      this.$nextTick(() => {
-        this.pageRefs[area.page].areaRefs.find((e) => e.area === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        const pageRef = this.pageRefs[area.page]
+
+        if (pageRef && pageRef.areaRefs) {
+          const areaRef = pageRef.areaRefs.find((e) => e.area === area)
+
+          if (areaRef && areaRef.$el) {
+            areaRef.$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+          }
+        }
      })
    },
    setPageRefs (el) {
@@ -8,6 +8,13 @@
    class="fixed z-20 pointer-events-none"
    :editable="false"
  />
+  <CustomField
+    v-else-if="dragPlaceholder && isCustom && !isMask && field"
+    ref="dragPlaceholder"
+    :style="dragPlaceholderStyle"
+    :field="field"
+    class="fixed z-20 pointer-events-none opacity-90"
+  />
  <div
    v-else-if="dragPlaceholder && (isDefault || isRequired) && !isMask && field"
    ref="dragPlaceholder"
@@ -57,6 +64,7 @@

 <script>
 import Field from './field'
+import CustomField from './custom_field'
 import IconDrag from './icon_drag'
 import FieldType from './field_type'

@@ -64,6 +72,7 @@ export default {
  name: 'DragPlaceholder',
  components: {
    Field,
+    CustomField,
    IconDrag
  },
  inject: ['t', 'backgroundColor'],
@@ -87,6 +96,11 @@ export default {
      type: Boolean,
      required: false,
      default: false
+    },
+    isCustom: {
+      type: Boolean,
+      required: false,
+      default: false
    }
  },
  data () {
@@ -12,8 +12,8 @@
      :for="inputId"
      :class="{ 'opacity-50': isLoading, 'hover:bg-base-200/50': withHoverClass && !isDragEntering, 'bg-base-200/50 border-base-content/30': isDragEntering }"
    >
-      <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center pointer-events-none">
-        <div class="flex flex-col items-center">
+      <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
+        <div class="flex flex-col items-center pointer-events-none">
          <IconInnerShadowTop
            v-if="isLoading"
            class="animate-spin"
@@ -40,6 +40,15 @@
          >
            <span class="font-medium">{{ t('click_to_upload') }}</span> {{ t('or_drag_and_drop_files') }}
          </div>
+          <button
+            v-if="withGoogleDrive"
+            class="flex items-center text-sm mt-2 pointer-events-auto"
+            @click.stop.prevent="$emit('click-google-drive')"
+          >
+            <span>{{ t('or_add_from') }}</span>
+            <IconBrandGoogleDrive class="w-4 h-4 inline-block ml-1" />
+            <span class="ml-1 font-medium hover:underline">Google Drive</span>
+          </button>
        </div>
      </div>
      <form
@@ -62,7 +71,7 @@

 <script>
 import Upload from './upload'
-import { IconCloudUpload, IconFilePlus, IconFileSymlink, IconFiles, IconInnerShadowTop } from '@tabler/icons-vue'
+import { IconCloudUpload, IconFilePlus, IconFileSymlink, IconFiles, IconInnerShadowTop, IconBrandGoogleDrive } from '@tabler/icons-vue'

 export default {
  name: 'FileDropzone',
@@ -71,7 +80,8 @@ export default {
    IconCloudUpload,
    IconInnerShadowTop,
    IconFileSymlink,
-    IconFiles
+    IconFiles,
+    IconBrandGoogleDrive
  },
  inject: ['baseFetch', 't'],
  props: {
@@ -99,6 +109,11 @@ export default {
      required: false,
      default: true
    },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    title: {
      type: String,
      required: false,
@@ -110,7 +125,7 @@ export default {
      default: 'image/*, application/pdf, application/zip'
    }
  },
-  emits: ['success', 'error', 'loading'],
+  emits: ['success', 'error', 'loading', 'click-google-drive'],
  data () {
    return {
      isLoading: false,
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="list-field group mb-2"
+    class="list-field group"
  >
    <div
      class="border border-base-300 rounded relative group fields-list-item"
@@ -14,11 +14,11 @@
        <div class="flex items-center p-1 space-x-1">
          <FieldType
            v-model="field.type"
-            :editable="editable && !defaultField && field.type != 'heading'"
+            :editable="editable && !defaultField"
            :button-width="20"
            :menu-classes="'mt-1.5'"
            :menu-style="{ backgroundColor: dropdownBgColor }"
-            @update:model-value="[maybeUpdateOptions(), save()]"
+            @update:model-value="[maybeUpdateOptions(), $emit('save')]"
            @click="scrollToFirstArea"
          />
          <Contenteditable
@@ -92,12 +92,15 @@
          <PaymentSettings
            v-if="field.type === 'payment'"
            :field="field"
+            :with-custom-fields="withCustomFields"
            @click-condition="isShowConditionsModal = true"
            @click-description="isShowDescriptionModal = true"
+            @add-custom-field="$emit('add-custom-field', $event)"
            @click-formula="isShowFormulaModal = true"
+            @save="$emit('save')"
          />
          <span
-            v-else-if="field.type !== 'heading'"
+            v-else
            class="dropdown dropdown-end field-settings-dropdown"
            @mouseenter="renderDropdown = true"
            @touchstart="renderDropdown = true"
@@ -128,12 +131,15 @@
                :with-signature-id="withSignatureId"
                :with-prefillable="withPrefillable"
                :background-color="dropdownBgColor"
+                :with-custom-fields="withCustomFields"
                @click-formula="isShowFormulaModal = true"
                @click-font="isShowFontModal = true"
                @click-description="isShowDescriptionModal = true"
                @click-condition="isShowConditionsModal = true"
                @set-draw="$emit('set-draw', $event)"
+                @add-custom-field="$emit('add-custom-field', $event)"
                @remove-area="removeArea"
+                @save="$emit('save')"
                @scroll-to="$emit('scroll-to', $event)"
              />
            </ul>
@@ -155,14 +161,23 @@
        ref="options"
        class="border-t border-base-300 mx-2 pt-2 space-y-1.5"
        draggable="true"
+        @dragover="onOptionDragover"
+        @drop="reorderOptions"
        @dragstart.prevent.stop
      >
        <div
          v-for="(option, index) in field.options"
          :key="option.uuid"
          class="flex space-x-1.5 items-center"
+          :data-option-uuid="option.uuid"
        >
-          <span class="text-sm w-3.5">
+          <span
+            class="text-sm w-3.5 cursor-grab select-none"
+            :draggable="editable && !defaultField"
+            @dragstart.stop="onOptionDragstart($event, option)"
+            @dragend.stop="optionDragRef = null"
+            @dragover.prevent.stop="onOptionDragover"
+          >
            {{ index + 1 }}.
          </span>
          <div
@@ -176,7 +191,9 @@
              dir="auto"
              required
              :placeholder="`${t('option')} ${index + 1}`"
-              @blur="save"
+              @keydown.enter="option.value ? addOptionAt(index + 1) : null"
+              @blur="$emit('save')"
+              @paste="onOptionPaste($event, index)"
            >
            <button
              :title="t('draw')"
@@ -198,8 +215,10 @@
            :readonly="!editable || defaultField"
            required
            dir="auto"
+            @keydown.enter="option.value ? addOptionAt(index + 1) : null"
            @focus="maybeFocusOnOptionArea(option)"
-            @blur="save"
+            @blur="$emit('save')"
+            @paste="onOptionPaste($event, index)"
          >
          <button
            v-if="editable && !defaultField"
@@ -217,7 +236,7 @@
        <button
          v-else-if="field.options && editable && !defaultField"
          class="field-add-option text-center text-sm w-full pb-1"
-          @click="addOption"
+          @click="addOptionAt(field.options.length)"
        >
          + {{ t('add_option') }}
        </button>
@@ -250,6 +269,7 @@
        :editable="editable && !defaultField"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
        @close="isShowFormulaModal = false"
      />
    </Teleport>
@@ -262,6 +282,7 @@
        :editable="editable && !defaultField"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
        @close="isShowFontModal = false"
      />
    </Teleport>
@@ -273,6 +294,7 @@
        :item="field"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
        @close="isShowConditionsModal = false"
      />
    </Teleport>
@@ -285,6 +307,7 @@
        :editable="editable && !defaultField"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
        @close="isShowDescriptionModal = false"
      />
    </Teleport>
@@ -321,7 +344,7 @@ export default {
    IconMathFunction,
    FieldType
  },
-  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't', 'locale'],
+  inject: ['template', 'backgroundColor', 'selectedAreasRef', 't', 'locale', 'getFieldTypeIndex'],
  props: {
    field: {
      type: Object,
@@ -332,6 +355,11 @@ export default {
      required: false,
      default: null
    },
+    withCustomFields: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    withPrefillable: {
      type: Boolean,
      required: false,
@@ -353,17 +381,17 @@ export default {
      default: true
    }
  },
-  emits: ['set-draw', 'remove', 'scroll-to'],
+  emits: ['set-draw', 'remove', 'scroll-to', 'save', 'add-custom-field'],
  data () {
    return {
      isExpandOptions: false,
      isNameFocus: false,
-      showPaymentModal: false,
      isShowFormulaModal: false,
      isShowFontModal: false,
      isShowConditionsModal: false,
      isShowDescriptionModal: false,
-      renderDropdown: false
+      renderDropdown: false,
+      optionDragRef: null
    }
  },
  computed: {
@@ -388,7 +416,7 @@ export default {
      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
    },
    defaultName () {
-      return this.buildDefaultName(this.field, this.template.fields)
+      return this.buildDefaultName(this.field)
    },
    areas () {
      return this.field.areas || []
@@ -406,9 +434,9 @@ export default {
    removeArea (area) {
      this.field.areas.splice(this.field.areas.indexOf(area), 1)

-      this.save()
+      this.$emit('save')
    },
-    buildDefaultName (field, fields) {
+    buildDefaultName (field) {
      if (field.type === 'payment' && field.preferences?.price && !field.preferences?.formula) {
        const { price, currency } = field.preferences || {}

@@ -419,9 +447,9 @@ export default {

        return `${this.fieldNames[field.type]} ${formattedPrice}`
      } else {
-        const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field)
+        const typeIndex = this.getFieldTypeIndex(field)

-        if (field.type === 'heading') {
+        if (field.type === 'heading' || field.type === 'strikethrough') {
          return `${this.fieldNames[field.type]} ${typeIndex + 1}`
        } else {
          return `${this.fieldLabels[field.type]} ${typeIndex + 1}`
@@ -441,7 +469,7 @@ export default {
      const area = this.field.areas.find((a) => a.option_uuid === option.uuid)

      if (area) {
-        this.selectedAreaRef.value = area
+        this.selectedAreasRef.value = [area]
      }
    },
    scrollToFirstArea () {
@@ -450,18 +478,49 @@ export default {
    closeDropdown () {
      this.$el.getRootNode().activeElement.blur()
    },
-    addOption () {
+    onOptionPaste (e, index) {
+      const text = e.clipboardData.getData('text')
+
+      if (text.includes('\n')) {
+        e.preventDefault()
+
+        this.isExpandOptions = true
+
+        const lines = text.split(/\r?\n/).map((l) => l.trim()).filter((l) => l)
+
+        if (lines.length > 0) {
+          const currentOption = this.field.options[index]
+
+          currentOption.value = (currentOption.value + lines[0]).trim()
+
+          const newOptions = lines.slice(1).map((line) => ({ value: line, uuid: v4() }))
+
+          this.field.options.splice(index + 1, 0, ...newOptions)
+
+          this.$nextTick(() => {
+            const inputs = this.$refs.options.querySelectorAll('input')
+
+            inputs[index + newOptions.length]?.focus()
+          })
+
+          this.$emit('save')
+        }
+      }
+    },
+    addOptionAt (index) {
      this.isExpandOptions = true

-      this.field.options.push({ value: '', uuid: v4() })
+      const insertAt = index ?? this.field.options.length
+
+      this.field.options.splice(insertAt, 0, { value: '', uuid: v4() })

      this.$nextTick(() => {
        const inputs = this.$refs.options.querySelectorAll('input')

-        inputs[inputs.length - 1]?.focus()
+        inputs[insertAt]?.focus()
      })

-      this.save()
+      this.$emit('save')
    },
    removeOption (option) {
      this.field.options.splice(this.field.options.indexOf(option), 1)
@@ -472,7 +531,7 @@ export default {
        this.field.areas.splice(this.field.areas.findIndex((a) => a.option_uuid === option.uuid), 1)
      }

-      this.save()
+      this.$emit('save')
    },
    maybeUpdateOptions () {
      delete this.field.default_value
@@ -485,10 +544,15 @@ export default {
        this.field.options ||= [{ value: '', uuid: v4() }]
      }

-      if (['heading'].includes(this.field.type)) {
+      if (this.field.type === 'heading') {
        this.field.readonly = true
      }

+      if (this.field.type === 'strikethrough') {
+        this.field.readonly = true
+        this.field.default_value = true
+      }
+
      (this.field.areas || []).forEach((area) => {
        if (this.field.type === 'cells') {
          area.cell_w = area.w * 2 / Math.floor(area.w / area.h)
@@ -509,7 +573,71 @@ export default {

      this.isNameFocus = false

-      this.save()
+      this.$emit('save')
+    },
+    onOptionDragstart (event, option) {
+      this.optionDragRef = option
+
+      const root = this.$el.getRootNode()
+      const hiddenEl = document.createElement('div')
+
+      hiddenEl.style.width = '1px'
+      hiddenEl.style.height = '1px'
+      hiddenEl.style.opacity = '0'
+      hiddenEl.style.position = 'fixed'
+
+      root.querySelector('#docuseal_modal_container')?.appendChild(hiddenEl)
+      event.dataTransfer?.setDragImage(hiddenEl, 0, 0)
+
+      setTimeout(() => { hiddenEl.remove() }, 1000)
+
+      event.dataTransfer.effectAllowed = 'move'
+    },
+    onOptionDragover (e) {
+      if (!this.optionDragRef) return
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      const targetRow = e.target.closest('[data-option-uuid]')
+
+      if (!targetRow) return
+
+      const dragRow = this.$refs.options?.querySelector(`[data-option-uuid="${this.optionDragRef.uuid}"]`)
+
+      if (!dragRow) return
+      if (targetRow === dragRow) return
+
+      const rows = Array.from(this.$refs.options.querySelectorAll('[data-option-uuid]'))
+
+      const currentIndex = rows.indexOf(dragRow)
+      const targetIndex = rows.indexOf(targetRow)
+
+      if (currentIndex < targetIndex) {
+        targetRow.after(dragRow)
+      } else {
+        targetRow.before(dragRow)
+      }
+    },
+    reorderOptions (e) {
+      if (!this.optionDragRef) return
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      const rows = Array.from(this.$refs.options.querySelectorAll('[data-option-uuid]'))
+
+      const newOrder = rows
+        .map((el) => this.field.options.find((opt) => opt.uuid === el.dataset.optionUuid))
+        .filter(Boolean)
+
+      if (newOrder.length === this.field.options.length) {
+        this.field.options.splice(0, this.field.options.length, ...newOrder)
+
+        this.$emit('save')
+      }
+
+      this.optionDragRef = null
    }
  }
 }
--- a/Show More
+++ b/Show More