diff --git a/.gitignore b/.gitignore
index 02f42a1b6b..29825090aa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,4 @@ node_modules
 yarn-error.log
 playbook/stats.json
 *.dec.*
+.env
diff --git a/.sops.yaml b/.sops.yaml
index f315deb821..ff8b71d1dc 100644
--- a/.sops.yaml
+++ b/.sops.yaml
@@ -6,9 +6,13 @@ creation_rules:
           - arn: "arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c"
           - arn: "arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c"
             role: "arn:aws:iam::205083374951:role/playbook-admins"
+          - arn: "arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c"
+            role: "arn:aws:iam::205083374951:role/forever-people"
 
   - key_groups:
       - kms:
           - arn: "arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41"
           - arn: "arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41"
             role: "arn:aws:iam::205083374951:role/playbook-admins"
+          - arn: "arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41"
+            role: "arn:aws:iam::205083374951:role/forever-people"
diff --git a/Jenkinsfile b/Jenkinsfile
index 2dea7c0e79..233dcc2588 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -25,6 +25,9 @@ app.build(
                 memory: '10Gi',
             ]
         ],
+        storageConfig: [
+          size: '15Gi',
+        ],
       ])
     }
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 08164e4db4..04f7f9ce60 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -16,6 +16,24 @@ services:
         - image-registry.powerapp.cloud/playbook/playbook:main
     volumes:
       - .:/home/app/src
-      - bundle:/usr/local/bundle
+      - bundle:/usr/local/rvm/gems
     ports:
       - "8089:3000"
+    depends_on:
+      db:
+        condition: service_healthy
+  db:
+    platform: linux/x86_64
+    image: percona:8.0.36-28@sha256:1128d56e64711ed65cb0c57041048967ee5875a2167d708d327885fd1f995fa0
+    init: true
+    ports:
+      - 3306
+    environment:
+      MYSQL_ROOT_HOST: "%"
+      MYSQL_ROOT_PASSWORD: password
+    healthcheck:
+      test: ["CMD", "mysql", "-u", "root", "-ppassword", "-e", "SHOW DATABASES;"]
+      interval: 5s
+      timeout: 2s
+      retries: 5
+      start_period: 20s
diff --git a/milano.production.yml b/milano.production.yml
index 66f7a0dc03..7141e513a1 100644
--- a/milano.production.yml
+++ b/milano.production.yml
@@ -3,11 +3,15 @@ dependencies:
 
 machine:
   directory: playbook-website/
+  environment:
+    CLUSTER: app-prod-hq
 
 deploy: &deploy
   max_commits: # Automatically deploy all commits, no matter how many.
+  pre:
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/pre_deploy"
   override:
-    - ./bin/deployer bash -lc "cluster=app-prod-hq environment=${ENVIRONMENT} tag=${REVISION} deploy_url=${DEPLOY_URL} bin/deploy"
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/deploy"
 
 rollback:
   <<: *deploy
diff --git a/milano.staging.yml b/milano.staging.yml
index da46d2664c..eb9be7627e 100644
--- a/milano.staging.yml
+++ b/milano.staging.yml
@@ -3,11 +3,15 @@ dependencies:
 
 machine:
   directory: playbook-website/
+  environment:
+    CLUSTER: app-beta-hq
 
 deploy: &deploy
   max_commits: # Automatically deploy all commits, no matter how many.
+  pre:
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/pre_deploy"
   override:
-    - ./bin/deployer bash -lc "cluster=app-beta-hq environment=${ENVIRONMENT} tag=${REVISION} deploy_url=${DEPLOY_URL} bin/deploy"
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/deploy"
 
 rollback:
   <<: *deploy
diff --git a/milano.yml b/milano.yml
index d1ebd7a604..7c94d7b562 100644
--- a/milano.yml
+++ b/milano.yml
@@ -6,8 +6,10 @@ machine:
 
 deploy: &deploy
   max_commits: # Automatically deploy all commits, no matter how many.
+  pre:
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/pre_deploy"
   override:
-    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} deploy_url=${DEPLOY_URL} bin/deploy"
+    - ./bin/deployer bash -lc "cluster=${CLUSTER} environment=${ENVIRONMENT} tag=${REVISION} namespace=${GITHUB_REPO_NAME}-${ENVIRONMENT} deploy_url=${DEPLOY_URL} bin/deploy"
 
 rollback:
   <<: *deploy
diff --git a/playbook-website/.gitignore b/playbook-website/.gitignore
index 7589e0e431..651de6e0c6 100644
--- a/playbook-website/.gitignore
+++ b/playbook-website/.gitignore
@@ -35,4 +35,5 @@ yarn-debug.log*
 # Vite uses dotenv and suggests to ignore local-only env files. See
 # https://vitejs.dev/guide/env-and-mode.html#env-files
 *.local
+.env
 
diff --git a/playbook-website/Gemfile b/playbook-website/Gemfile
index e74c01ade0..ee48ba3d67 100644
--- a/playbook-website/Gemfile
+++ b/playbook-website/Gemfile
@@ -7,6 +7,7 @@ ruby "3.3.0"
 
 gem "playbook_ui", path: "../playbook"
 
+gem "mysql2", "0.5.6"
 gem "rails", "~> 7.0.8"
 gem "turbo-rails", "~> 1.4.0"
 gem "puma", "~> 6.3"
diff --git a/playbook-website/Gemfile.lock b/playbook-website/Gemfile.lock
index 3bc1bfb9fe..dde6ef761d 100644
--- a/playbook-website/Gemfile.lock
+++ b/playbook-website/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: ../playbook
   specs:
-    playbook_ui (14.5.0)
+    playbook_ui (14.6.0)
       actionpack (>= 5.2.4.5)
       actionview (>= 5.2.4.5)
       activesupport (>= 5.2.4.5)
@@ -140,6 +140,7 @@ GEM
     mini_mime (1.1.5)
     minitest (5.25.1)
     msgpack (1.7.2)
+    mysql2 (0.5.6)
     net-imap (0.4.15)
       date
       net-protocol
@@ -332,6 +333,7 @@ DEPENDENCIES
   front_matter_parser (~> 1.0.1)
   health_check
   listen
+  mysql2 (= 0.5.6)
   playbook_ui!
   psych (< 4)
   puma (~> 6.3)
diff --git a/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts b/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts
index 949a2f54be..92a30ed8b8 100644
--- a/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts
+++ b/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts
@@ -78,6 +78,11 @@ const globalPropsValues = [
     type: "union",
     values: '"wrap" | "nowrap" | "wrapReverse"'
   },
+  {
+    prop: "htmlOptions",
+    type: "object",
+    values: "{ [key: string]: string | number | boolean | (() => void); }"
+  },
   {
     prop: "id",
     type: "string",
diff --git a/playbook-website/app/javascript/components/AvailableProps/index.tsx b/playbook-website/app/javascript/components/AvailableProps/index.tsx
index f37ee20812..daea96b73f 100644
--- a/playbook-website/app/javascript/components/AvailableProps/index.tsx
+++ b/playbook-website/app/javascript/components/AvailableProps/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Card, Nav, SectionSeparator, NavItem } from 'playbook-ui'
 import GlobalProps from './globalProps'
+import GlobalPropsValues from './globalPropsValues'
 import KitProps from './kitProps'
 
 type AvailablePropsType = {
@@ -10,8 +11,15 @@ type AvailablePropsType = {
 
 const AvailableProps = ({ availableProps, darkMode }: AvailablePropsType) => {
   const props = JSON.parse(availableProps)
+  const globalPropsNames = GlobalPropsValues.map(prop => prop.prop)
   const [showKitTab, setShowKitTab] = useState(true)
 
+  for(var propName in props) {
+    if(globalPropsNames.includes(propName)) {
+      delete props[propName]
+    }
+  }
+
   return (
     <>
       <Card padding="none" dark={darkMode}>
diff --git a/playbook-website/app/models/application_record.rb b/playbook-website/app/models/application_record.rb
new file mode 100644
index 0000000000..08dc537989
--- /dev/null
+++ b/playbook-website/app/models/application_record.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class ApplicationRecord < ActiveRecord::Base
+  primary_abstract_class
+end
diff --git a/playbook-website/bin/deploy b/playbook-website/bin/deploy
index 06a9bebad7..32a13a5d2e 100755
--- a/playbook-website/bin/deploy
+++ b/playbook-website/bin/deploy
@@ -21,6 +21,11 @@ fi
 
 extraBindings="{\"ingress\":{\"hosts\":[\"${deploy_url}\"]}}"
 
+# Priority resources
+source "${workDir}/bin/priority_deploy"
+priority_deploy
+
+# Application Deployment
 krane render \
     --filenames=${workDir}/config/deploy/templates \
     --bindings="@${workDir}/config/deploy/values.yaml" $environmentValuesFile $environmentSecretsFile "image_tag=${tag}" "environment=${environment}" $extraBindings \
diff --git a/playbook-website/bin/deployer b/playbook-website/bin/deployer
index 55164ffd8e..03b6590d8d 100755
--- a/playbook-website/bin/deployer
+++ b/playbook-website/bin/deployer
@@ -7,7 +7,7 @@ if [ -t 0 ]; then
   AWS_CREDS_MOUNT="--mount type=bind,source=${HOME}/.aws/credentials,destination=/root/.aws/credentials,readonly"
 fi
 
-DEPLOYER_IMAGE="image-registry.powerapp.cloud/app/deployer:master-467d8015ffc91fc62c347367db792bb6de0eeea8-1439"
+DEPLOYER_IMAGE="image-registry.powerapp.cloud/app/deployer:main-559f8a815f07c3e04dc82bf416c403ef80f6eacb-42"
 DEPLOYER_MOUNTS="${AWS_CREDS_MOUNT} --mount type=bind,source=$(pwd),destination=/app --mount type=bind,source=${HOME}/.kube,destination=/root/.kube"
 RUN_DEPLOYER="docker run --tty ${INTERACTIVE} ${EXTRA_ARGS} --rm --env AWS_ACCESS_KEY_ID --env AWS_SECRET_ACCESS_KEY ${DEPLOYER_MOUNTS} ${DEPLOYER_IMAGE}"
 
diff --git a/playbook-website/bin/deployment_helpers b/playbook-website/bin/deployment_helpers
new file mode 100644
index 0000000000..b1d5769600
--- /dev/null
+++ b/playbook-website/bin/deployment_helpers
@@ -0,0 +1,87 @@
+#!/bin/bash
+
+set -eo pipefail
+
+: ${baseline:="review"}
+
+function setup_colors() {
+    if [[ -t 2 ]] && [[ -z "${NO_COLOR-}" ]] && [[ "${TERM-}" != "dumb" ]]; then
+        NOFORMAT='\033[0m'
+        RED='\033[0;31m'
+        GREEN='\033[0;32m'
+        ORANGE='\033[0;33m'
+        BLUE='\033[0;34m'
+        PURPLE='\033[0;35m'
+        CYAN='\033[0;36m'
+        YELLOW='\033[1;33m'
+    else
+        NOFORMAT='' RED='' GREEN='' ORANGE='' BLUE='' PURPLE='' CYAN='' YELLOW=''
+    fi
+}
+export -f setup_colors
+setup_colors
+
+function begin {
+    local message=$1
+
+    echo "\
+
+=======================================
+BEGIN: $message
+=======================================
+"
+}
+export -f begin
+
+function succeed {
+    local message=$1
+
+    echo -e "\
+${GREEN}
+=======================================
+SUCCESS: $message
+=======================================
+${NOFORMAT}"
+}
+export -f succeed
+
+function fail {
+    local message=$1
+
+    echo -e "\
+#{RED}
+=======================================
+ERROR: $message
+=======================================
+#{NOFORMAT}"
+    exit 1
+}
+export -f fail
+
+function instance_name {
+    local inst=$environment
+    echo "$inst"
+}
+export -f instance_name
+
+function log() {
+    echo >&2 -e "[$cluster][$namespace][$task_name] ${1-}"
+}
+
+log "BEGIN: $task_name"
+trap 'log "${RED:-}ERROR: $task_name - $cluster / $namespace${NOFORMAT:-}"' ERR
+
+function decrypt() {
+    local encrypted_file_path=
+    encrypted_file_path="$1"
+
+    local decrypted_file_path=
+    decrypted_file_path="$2"
+
+    secrets="$(sops --decrypt "$encrypted_file_path")"
+    if [ ! -e "$decrypted_file_path" ]
+    then
+        log "writing decrypted secrets for: $encrypted_file_path"
+        echo -n "$secrets" > "$decrypted_file_path"
+    fi
+}
diff --git a/playbook-website/bin/mysql/user-setup.sh b/playbook-website/bin/mysql/user-setup.sh
new file mode 100644
index 0000000000..543339bfe9
--- /dev/null
+++ b/playbook-website/bin/mysql/user-setup.sh
@@ -0,0 +1,120 @@
+#!/bin/bash
+
+ cluster="$1"
+ namespace="$2"
+
+ctrl="kubectl --context $cluster -n $namespace"
+
+mysql_pod=$($ctrl get pods --no-headers -o custom-columns=":metadata.name" | grep 'pxc-0$')
+secret_po_name=$($ctrl get pxc -o jsonpath='{.items[0].spec.secretsName}')
+root_pwd=$(eval "$ctrl get secrets $secret_po_name -o jsonpath='{.data.root}'" | base64 --decode )
+
+if [ -z "$mysql_pod" ]; then
+  exit 0
+fi
+
+mysql_pod="$mysql_pod -c pxc"
+
+users=$($ctrl get configmap mysql-users-playbook -o=jsonpath='{.data.users}' | sed 's/^"//;s/"$//;s/\\\"/\"/g')
+
+custom_users=()
+mysql_commands=()
+
+clean_up_users() {
+  local percona_users=("root" "clustercheck" "monitor" "operator" "pmmserver" "proxyadmin" "replication" "xtrabackup")
+  local target_users=("$@")
+
+  if [ ${#target_users[@]} -gt 0 ]; then
+    for element in "${target_users[@]}"; do
+      percona_users+=("$element")
+    done
+  fi
+
+  excluded_users_list=$(printf "'%s'," "${percona_users[@]}")
+  excluded_users_list=${excluded_users_list%,}
+
+  command="SELECT CONCAT(\"'\", user, \"'@'\", host, \"'\") FROM mysql.user WHERE NOT (user LIKE 'mysql%' OR user IN ($excluded_users_list));"
+
+  users_to_delete=$($ctrl exec $mysql_pod -- mysql -uroot -p$root_pwd -N -e"$command")
+
+  echo "--- List of MySQL users to delete:"
+  echo $users_to_delete
+  #  Loop through the list of users and execute DROP USER statements
+  #  we can't use `delete from` statement as if it will be once deleted,
+  #  we will be unable to recreate it with the same name/password/grants due to mysql security policy
+  for user in $users_to_delete; do
+    $($ctrl exec $mysql_pod -- mysql -uroot -p$root_pwd -e "DROP USER $user;")
+  done
+}
+
+if [ -z "$users" ]; then
+  clean_up_users "${custom_users[@]}"
+  exit 0
+fi
+
+# Extract the count of user objects
+count=$(echo "$users" | grep -o '{' | wc -l)
+
+if [ "$count" -eq 0 ]; then
+  clean_up_users "${custom_users[@]}"
+  exit 0
+fi
+
+for (( i=1; i<=$count; i++ )); do
+  # Extracting each user block
+  block=$(echo "$users" | awk -v RS='},' 'NR=='$i'')
+
+  name=$(echo "$block" | grep -o '"name":"[^"]*"' | awk -F\" '{print $4}')
+  grant=$(echo "$block" | grep -o '"grant":"[^"]*"' | awk -F\" '{print $4}')
+  user_pwd=$(eval "$ctrl get secrets $secret_po_name -o jsonpath='{.data.$name}'" )
+
+  custom_users+=("$name")
+
+  if [ -z "$user_pwd" ]; then
+    echo "No password in $secret_po_name for user $name"
+    exit 1
+  else
+    user_pwd=$(echo "$user_pwd" | base64 --decode)
+  fi
+
+  mysql_commands+=("CREATE USER IF NOT EXISTS '$name'@'%' IDENTIFIED BY '$user_pwd'")
+
+  # Extract dbs and append '.*' to each one
+  dbs_raw=$(echo "$block" | grep -o '"dbs":\["[^]]*"' | sed 's/"dbs":\["//' | sed 's/"//g' | sed 's/,/, /g')
+  IFS=', ' read -ra dbs_array <<< "$dbs_raw"
+  for db in "${dbs_array[@]}"; do
+    mysql_commands+=("GRANT $grant ON ${db}.* TO '$name'@'%'")
+  done
+done
+
+clean_up_users "${custom_users[@]}"
+
+# get list of users with 'mysql_native_password' plugin
+users_w_deprecated_auth=$($ctrl exec $mysql_pod -- mysql -uroot -p$root_pwd -Bse "SELECT CONCAT(user, '@', host) FROM mysql.user WHERE plugin = 'mysql_native_password';")
+
+# alter authentication plugin
+for user in $users_w_deprecated_auth; do
+  uname=$(echo "$user" | cut -d "@" -f 1)
+  user_pwd=$(eval "$ctrl get secrets $secret_po_name -o jsonpath='{.data.$uname}'" )
+  if [ -n "$user_pwd" ]; then
+    user_pwd=$(echo "$user_pwd" | base64 --decode)
+    quoted_username=$(echo "$user" | sed "s/\(.*\)@\(.*\)/'\1'@'\2'/")
+    mysql_commands+=("ALTER USER $quoted_username IDENTIFIED WITH caching_sha2_password BY '$user_pwd'")
+  fi
+done
+
+mysql_commands+=("FLUSH PRIVILEGES;")
+
+IFS=';'
+joint_output="${mysql_commands[*]}"
+unset IFS
+
+$($ctrl exec $mysql_pod -- mysql -uroot -p$root_pwd -e "$joint_output")
+
+if [ $? -eq 0 ]; then
+  echo "$joint_output" | sed "s/BY '[^']*'/BY '***'/g" | tr ';' '\n'
+  echo "--- Users CREATED with password and granted permissions."
+else
+  echo "--- User creation and permission granting FAILED"
+  exit 1
+fi
diff --git a/playbook-website/bin/pre_deploy b/playbook-website/bin/pre_deploy
new file mode 100755
index 0000000000..d7576eeb99
--- /dev/null
+++ b/playbook-website/bin/pre_deploy
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+task_name="Predeployment"
+source "$(dirname $(realpath $0))/deployment_helpers"
+
+log ">>> Installing dependencies at $tag into $environment ($cluster # $namespace)"
+
+instance=$(environment=$environment instance_name)
+
+operatorResources=$(krane render \
+    --filenames=/app/config/deploy/templates/operators \
+    --current-sha=${tag}) || exit $?
+echo "$operatorResources" | krane deploy ${namespace} ${cluster} \
+    --selector="app.kubernetes.io/component=operator" \
+    --verbose-log-prefix \
+    --global-timeout=300s \
+    --stdin
+
+log "${GREEN}SUCCESS: $task_name - $cluster / $namespace${NOFORMAT}"
diff --git a/playbook-website/bin/priority_deploy b/playbook-website/bin/priority_deploy
new file mode 100644
index 0000000000..0bdb807bbb
--- /dev/null
+++ b/playbook-website/bin/priority_deploy
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+priorityResources=$(krane render \
+                          --filenames="$(pwd)/config/deploy/templates/priority" \
+                          --bindings="@${workDir}/config/deploy/values.yaml" $environmentValuesFile $environmentSecretsFile "image_tag=${tag}" "environment=${environment}" $extraBindings \
+                          --current-sha=${tag}) || exit $?
+
+echo "$priorityResources" | krane deploy ${namespace} ${cluster} \
+                                  --selector="app.kubernetes.io/name=playbook,app.kubernetes.io/part-of=priority-deploy" \
+                                  --verbose-log-prefix \
+                                  --global-timeout=10m \
+                                  --stdin
+
+### run post priority scripts
+"${workDir}/bin/mysql/user-setup.sh" "$cluster" "$namespace"
diff --git a/playbook-website/bin/setup b/playbook-website/bin/setup
index 1ac8ce0b7a..a8044c64ea 100755
--- a/playbook-website/bin/setup
+++ b/playbook-website/bin/setup
@@ -16,10 +16,17 @@ FileUtils.chdir APP_ROOT do
   puts '== Installing dependencies =='
   system! 'gem install bundler --conservative'
   system('bundle check') || system!('bundle install')
-
   # Install JavaScript dependencies
   system! 'bin/yarn'
 
+  # puts "\n== Copying sample files =="
+  # unless File.exist?("config/database.yml")
+  #   FileUtils.cp "config/database.yml.sample", "config/database.yml"
+  # end
+
+  puts "\n== Preparing database =="
+  system! "bin/rails db:prepare"
+
   puts "\n== Removing old logs and tempfiles =="
   system! 'bin/rails log:clear tmp:clear'
 
diff --git a/playbook-website/config/application.rb b/playbook-website/config/application.rb
index 786e521774..ccfb275613 100644
--- a/playbook-website/config/application.rb
+++ b/playbook-website/config/application.rb
@@ -6,7 +6,7 @@
 # Pick the frameworks you want:
 require "active_model/railtie"
 require "active_job/railtie"
-# require "active_record/railtie"
+require "active_record/railtie"
 # require "active_storage/engine"
 require "action_controller/railtie"
 # require "action_mailer/railtie"
@@ -38,6 +38,10 @@ class Application < Rails::Application
     # config.eager_load_paths << Rails.root.join("extras")
 
     # Don't generate system test files.
+
     config.generators.system_tests = nil
+
+    openai_api_key = ENV["OPENAI_API_KEY"]
+    Rails.application.config.openai_api_key = openai_api_key
   end
 end
diff --git a/playbook-website/config/database.yml b/playbook-website/config/database.yml
new file mode 100644
index 0000000000..a5273910b1
--- /dev/null
+++ b/playbook-website/config/database.yml
@@ -0,0 +1,27 @@
+base: &base
+  adapter: mysql2
+  pool: <%= ENV['DATABASE_POOL'] || ENV['RAILS_MAX_THREADS'] || 5 %>
+  timeout: <%= ENV['DATABASE_TIMEOUT'] || 5000 %>
+  username: <%= ENV['DATABASE_USER'] || "root" %>
+  password: <%= ENV['DATABASE_PASSWORD'] || "password" %>
+  host: <%= ENV['DATABASE_HOST'] || "db" %>
+  database: <%= ENV['DATABASE_NAME'] || "playbook_website" %>
+  advisory_locks: <%= ENV['DATABASE_ADVISORY_LOCKS'] || false %>
+
+development:
+  <<: *base
+  database: playbook_website_dev
+
+test:
+  <<: *base
+  database: playbook_website_test
+  username: <%= ENV['DATABASE_USER'] || "root" %>
+
+review:
+  <<: *base
+
+staging:
+  <<: *base
+
+production:
+  <<: *base
diff --git a/playbook-website/config/deploy/production/secrets.yaml b/playbook-website/config/deploy/production/secrets.yaml
index 8d8b1dd44c..f11748c1aa 100644
--- a/playbook-website/config/deploy/production/secrets.yaml
+++ b/playbook-website/config/deploy/production/secrets.yaml
@@ -1,23 +1,42 @@
 appConfig:
-    secretKeyBase: ENC[AES256_GCM,data:utBa4kM3fNPxfLSDALiJvOz6KVlzSefm/K3xDLrKQYypDY2TbreTY5QpeOH6l49D9zMD5i8XGwn3p9f6OEDg4uwzWLSUw0c6U7EcQkrxmRpvOLiOKz2SX8B3xWv3rdLwNs50LHINvjQcjdJviAo9R/oxLxEs6Ds/snSxYXbKQcs=,iv:p0zTY4f3gXqTLJRSjdhX+WsO2/eA6d/rh3S38O4XvuE=,tag:QjENfqpSSZ4hlvvoAuzRJA==,type:str]
-    sentry_dsn: ENC[AES256_GCM,data:p1TU1BvZqZyqo3WPVhGQKqT5IB9zsdA/LkEltdp2zNir3Xub7+yKWg5PXVhjCkDii90MPXSEd08zZYUHZQsTdWI6A/f/jMj1DepJhhPq7H8hpQ==,iv:NHG0oirvwkU2dRh9K0eyEjxyA8WAXRXt9HCGyOmKkrg=,tag:kDJqiCE+n5XoSJMVYqbFBQ==,type:str]
+    secretKeyBase: ENC[AES256_GCM,data:pTc2zofEnukd275BCaIpHOM5LokYsaYdgyGPHH6tggclP8Fj2S3/s7UREfDDuNZdAWAelmfWj3AY6xhtmdNRXt0F1UDvrNw0aCDAUqQK/jfHvgCtPQ2ncdZdpoUeEzmTaHUu3JVCphrCBFWxYrSvQg5qfx/docSiGR/PtaWTgOA=,iv:NwUXrRidkh5gT0E90h8CH9qtddboQnd2uvQfPXVkfM0=,tag:vJ5vPuSFeiRc+kDX5tY3Jg==,type:str]
+    sentry_dsn: ENC[AES256_GCM,data:pnb9JEfwZ0wCe+eh1CChiKiYAyyMeRtMvJEy9HyY9HFyleFB336Q6nVFx1D74LSxgNbrZiBqg/aA1ZysYCIDRciN6LOMlFAn5AAbMhpYcdNbLQ==,iv:j8l3ISTxrLVF21VRTDkqcmxeMt8jPrZDzDW9rHZ84lc=,tag:eMnHnxYQ+uAIhba0bDNuAA==,type:str]
+    open_ai: ENC[AES256_GCM,data:He7ruscMUMlif05pZhA7f0/rjVt1oG8qzJKGXO6SxHVKZ5t062dD3covgJAGqjCh9aH4wcjCS2xyhBNJWbqjcLhrYsLHuZB4URLfA1CyhJa+maReOCOH88vTutFdIYY=,iv:cZBzbIWxtp+sq3mcE+YGeHeALlSADsU7uXgmKgbmQc8=,tag:a09iJDiJRQ5ImhndwPeYkA==,type:str]
+database:
+    passwords:
+        root: ENC[AES256_GCM,data:nDfX3v48uA4GelHiENJK72WR4QaHfNM=,iv:1pQEajcbP6Se9TUIjM9FChsGS02DWSrObHsC1Y+srbI=,tag:FIcrACADrNiXWKW0LmKbaQ==,type:str]
+        proxyadmin: ENC[AES256_GCM,data:wJocaatR/RSxgVJkMSPvP1qNlOIAZBc=,iv:yDwiFOujQAUvu50A4AcZAhwIZ45oVbB+ov92+wzC2eI=,tag:h3YnYRlzmjjU7eJIewSh5A==,type:str]
+        xtrabackup: ENC[AES256_GCM,data:sHdJ8nIBvwDh+oSrTAg7DageobzjXhs=,iv:ITkA5erLjdD04ikNDiIHo+VNQ4C2qJ0ACwuf83LThQ0=,tag:Nt1w8xeDAgzlcuSzZTMV3Q==,type:str]
+        clustercheck: ENC[AES256_GCM,data:0HhHODIwTtarziG6UlNWPSmgSYXbYVk=,iv:LKJ1uypr3QBbDWoRKTpHS4cw16KtJDaLPT3YIvytIbo=,tag:yEIXVSQNpz6l5c4igqeTcA==,type:str]
+        monitor: ENC[AES256_GCM,data:FCgUZ+0LRGboG8RObAttvqaZ0I5r474=,iv:K0crq4vV4kgFJ13z6orMKai0v1nW4iblCgskgzsX1mQ=,tag:JyBPNRAgiySgss2AFQ6LYg==,type:str]
+        pmmserver: ENC[AES256_GCM,data:5uIvdwcHvc08j4nyI3Dz9uef+omXCjg=,iv:QWUPM/beeqmqo0Sdw44BTACnzVFOmSH7dfPVNLFdaqg=,tag:Iq5ZCD9Wafglanhwd1Vo6A==,type:str]
+        operator: ENC[AES256_GCM,data:VchIqmam5gyZh3a9QU15m7fJK6meJ1w=,iv:kk2UvLMiu7Hir0AfBuH0CA348LhWCmvnkvhJzMqqpJI=,tag:t9syBAwmnS4s95X97Ne/Ug==,type:str]
+        replication: ENC[AES256_GCM,data:RCkm/S9hsu8ot7GExCXD1JXOdPzUyis=,iv:2rFI0hjihBvbtId7jLXs4IqS/H/KttN+FeWux/bfnFY=,tag:BvCsay3WONt2l+ZGgrfhxA==,type:str]
+        webapp: ENC[AES256_GCM,data:AiSQqvWKYklNkIw9vxz2HMBsR6NIVXU=,iv:wJxILj6WcWIXvsmTm6QpfAMVhtcp83u9F8BUZs/t1TQ=,tag:pJGCBOTXuy3mfl2yDK5qBw==,type:str]
+        migrator: ENC[AES256_GCM,data:eEdeN7i0gH8tTSxVq4BLH0BvTy5s+Qs=,iv:Fowkiy9rc+3x6pjGUC2wsY44zNHIUQGkriP/0FDQkjs=,tag:pDtxnA1ymaQRCNi3hpCg2Q==,type:str]
+        webapp_readonly: ENC[AES256_GCM,data:sc3vdWirNtrBls+8gArufmYD+YxhoIY=,iv:KROKBT1qwZVf6zQ3a0N51I5mbL74g+gucSXJtqbgGDk=,tag:E8XRjcfsXcPbCyuc6MlmIA==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c
-          created_at: "2023-09-12T17:54:03Z"
-          enc: AQICAHgujLkoWj/2YBLvu57MUrNOqZOY5uV5l5pH7MV/vzKMBgGYWcyxf9B5fC0BIXbcdcWHAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMTtG/4IC1DRbS0sO0AgEQgDtkAetmvS1Gc4T4SBgXkXzEtZ11EIGuPKbxG4IHpv/Lf1taPKmf02QDhxEiMWCc57jkeWwCSLapvSTIQQ==
+          created_at: "2024-10-09T14:15:47Z"
+          enc: AQICAHgujLkoWj/2YBLvu57MUrNOqZOY5uV5l5pH7MV/vzKMBgE1qwTrUkCGbpiPQPZ2Wy+lAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQM5uYzVUOAppdO0PKyAgEQgDtfwSqTGPBcAQB/DMjvu5ePLTHSR+Yb8KhkFICf598s5H4VonhIO7zQROhfUurkPSXK9omJ2WMGuULDiQ==
           aws_profile: ""
         - arn: arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c
           role: arn:aws:iam::205083374951:role/playbook-admins
-          created_at: "2023-09-12T17:54:03Z"
-          enc: AQICAHgujLkoWj/2YBLvu57MUrNOqZOY5uV5l5pH7MV/vzKMBgEAsmw6mIADb67KveUG6MUfAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMkfv8wA9Ec5IztTyEAgEQgDuXn1EN5zG2dP7pJpU4nE/KiJ1krq+UizveI0mSylzpKmRz0BFPtpj6kNv/pANo+YwCNKm5uVOGSkBfRw==
+          created_at: "2024-10-09T14:15:47Z"
+          enc: AQICAHgujLkoWj/2YBLvu57MUrNOqZOY5uV5l5pH7MV/vzKMBgEzvPVSKC0gdgIl7GsNe51uAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMJfl/u6aJQu7MHZ5XAgEQgDu7iEdG6TL87qMoOGrGyEK1jcRq12uyCzOyAGhqkcE7XaWFuqP6ukaU2J12ZHVqAGHQNyhdqGN3sGQSOw==
+          aws_profile: ""
+        - arn: arn:aws:kms:us-east-1:205083374951:key/405f40cd-a18a-40ed-bf2f-a0e7816a9a5c
+          role: arn:aws:iam::205083374951:role/forever-people
+          created_at: "2024-10-09T14:15:47Z"
+          enc: AQICAHgujLkoWj/2YBLvu57MUrNOqZOY5uV5l5pH7MV/vzKMBgF0x/5dkX78lPXUwfrdoJ7JAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMX2NSksmyhVS1j4q5AgEQgDsx23n3n0AtKWp7logPrzOrVwBMD8zhzC3QJyV6iDk7ia4Wk0OubJd84MPo4thMo1HPd0Xjhy4oXBTjUw==
           aws_profile: ""
     gcp_kms: []
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2023-09-12T19:35:17Z"
-    mac: ENC[AES256_GCM,data:GBtmDnvvc+KwYkBML0M8+e02FgpfbY68FfCGSHxMUuAvjPYLHLZVA99pMtsKsFWdSiwRsZLcU6xoJm3y9YRLSGSJ0/7NzdVM5386tuSSm+RdqdcYNYU9hrcf1XhmMDT/enyjYsUP9p5f6sAPorQgj9VHv/1yV6ppZ5SRfrNr8v4=,iv:l7Wt0uqtrEeIAa9CWB7HPpnPJPPbYoAYzD7jIzw3/ao=,tag:ooQCNoR0QdBYsv/tOiLRqA==,type:str]
+    lastmodified: "2024-10-09T16:27:54Z"
+    mac: ENC[AES256_GCM,data:XZUMDOE+3t8dqAGGi1kZa7JCeC4yHKtBLKMAptq9rDfVqu+j8jjQpN6GuoHarhCSNmo14gOeN619YwSDpowgqY1WTv4LSRMBy2/zZfyd+dIfAnDpvIOMAB2nFj6QoAzRRZjR7j54/oXLJUaySyVB6Wfe8gz4JXBwkaXS2qKDr6Q=,iv:Q05Ig42Jcdx8TOJImzv2OVIRhkKAloE+GSPCKP/OC0s=,tag:Ib3otL+28qidtoYGWqXxYA==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
-    version: 3.7.3
+    version: 3.8.1
diff --git a/playbook-website/config/deploy/prs/secrets.yaml b/playbook-website/config/deploy/prs/secrets.yaml
index 291e953d37..44cb2f815e 100644
--- a/playbook-website/config/deploy/prs/secrets.yaml
+++ b/playbook-website/config/deploy/prs/secrets.yaml
@@ -1,23 +1,42 @@
 appConfig:
-    secretKeyBase: ENC[AES256_GCM,data:ydJ6vKcPVMp9SxRCxgKH3AgAX5JjeoGn7fDKf77XkhODoTZnRHpkyiAezdhFhakCajJFHmaOttWytEVJiMg9DoW111f4AWsNQ+awVztblsCUmT1ZPgZtAGH8H76RKzl3adRy466E3FFoBzQf2FZhP5fdDRSmhzlHWUZdtrfDt/g=,iv:fDmiR4EzqRJ72pl4xLjG5Lv3bw6ijE7hqDHY9HqBcF8=,tag:vzpbilZlEFKlKrt9Rl9zvA==,type:str]
-    sentry_dsn: ENC[AES256_GCM,data:ufQrClZMvpS72OLyRqlO4jisNfnC793ASma61YUOssmQ2gUb/H/U5loD731e4a1fI6dADN66cjQbEnBGwNz0tU58dPMFlR5wSf+bs+JH2Jgn+w==,iv:m3oKFJrByerC7/DPezR0j98Jsolqp8IOm67trL0zJwc=,tag:JAGhc5ts+QBO+DDttXgSVw==,type:str]
+    secretKeyBase: ENC[AES256_GCM,data:tX9TTqw+teUH3ugGOXIfCMSE1fofM8YBfei2cXLB8Wbmsxp+bsoIgByMtgAbyHzov73P2PaJhQWWo/fG2W7Zj8T0gQ5BcK9mVFUkbt/+SmQpbbprLeIpauN4Gar2QWzyzJPIVEUopf3gdEERx3a+2rbMotJ4rB8Xfvv9OO4sOy4=,iv:H7nM7+ERPsNpehyuaAXSotrG8YCMhL1VSNAmFggs+Q4=,tag:eE+MuzvnCuQ6XKAKMMkrsA==,type:str]
+    sentry_dsn: ENC[AES256_GCM,data:9k5OGZqUcLote0IAJt7GJBsDxN3iJxoVtfPn9RKYfV1KZzNNWyeTZKC/PmjdjKotNbXzLPUSIPbtV8bk2DmttOwQr/r0xbnaTcRT2CWh/4XwVA==,iv:qML16zZMGBSO9nz7kSihlvn5uLj1s+RDSSqOb1jivGw=,tag:XvsrAuIAgAboayg2ZN1KZQ==,type:str]
+    open_ai: ENC[AES256_GCM,data:ewKDrouP0ZuMNAr19DvqBIzYdRInruWH7GxPX2ZH79DVJkT53qLFqzQMIBScqai40WXQmFLNicLnnbHVK+Xcv0tq/xBHtS7BANIwa5XJnWo56jYR3mOdbAcw+ZNFrks=,iv:c5veWRGGydflJ38TFf56ei9GI0tCnE24TLxJGFHscdE=,tag:rGLKDJesBs5JTNt83dsmoA==,type:str]
+database:
+    passwords:
+        root: ENC[AES256_GCM,data:xIIpSFhtwuTyIkKtIEn0zIC+IrfJZeU=,iv:7hSo3KUZ8ujfVk/T2Hnv8v0IaanH370w7klGd9HRG9Q=,tag:U58Pf57vVHDqCDlS0jIlvQ==,type:str]
+        proxyadmin: ENC[AES256_GCM,data:nmOiIeM3EqnsJXQStcYOLDNJy3FB7h8=,iv:8uORWJHsVKm9c/v4AKXsD5Iwau9QLw3TTp0OOlYwwck=,tag:+tBl/LPwhcnqBrHm1OKF/w==,type:str]
+        xtrabackup: ENC[AES256_GCM,data:xsRzRtnZtfesmQChZrF4qa7UEeBv2FY=,iv:OVwhRcAIfRAwDBhriq3l5rJxG+sBP34czF6PmA7TUgo=,tag:ThL2czkqs1cJkHF1+Ac6tw==,type:str]
+        clustercheck: ENC[AES256_GCM,data:QMXMALsTWZ3nhPUQCBrSZ8EjX/9R4vQ=,iv:05OTLP+H5Zv0g9v9L3vnGSs/j8jinP9nAeKL/DcvU3E=,tag:WnWUzbXe6EujA8bBbQaVLw==,type:str]
+        monitor: ENC[AES256_GCM,data:QNI7y7ZIiIbGhx2Ou6LGTZcevsT5Pew=,iv:uwzYfjGJEVaT+Uya/zYNiZd4j2iv2D6bE1uQpikAYis=,tag:uQ+QEN4Jg9k0z1GIiclQ6g==,type:str]
+        pmmserver: ENC[AES256_GCM,data:aw+6klR8I9Is2z/7HP4w6RvVOR0Mzmk=,iv:TOli7mz6QgEEzHkqfKJqSbmgr8JCtnAvIQzHzg4nXU8=,tag:brsgeMPlI+JD2RLCzZ8+zw==,type:str]
+        operator: ENC[AES256_GCM,data:IkRgcdpfnm7r7rZz2a5092xBmNOBLKw=,iv:SJSvFzK0LhcpZRdC1mtB62BMd9G7BMxE8y9W/mvbdU0=,tag:81UCk/KCNpqljoeXLzr6uA==,type:str]
+        replication: ENC[AES256_GCM,data:ica6B3ekPiaY2rc/Xs0K8D4v9NIUows=,iv:yiduzxuZJC28Ci96a6IgCxX8kG/xojEVLZfc6B+bcU4=,tag:BCvR+NANOM/2B5uyA5/5YQ==,type:str]
+        webapp: ENC[AES256_GCM,data:IAe84IbWb3c/QYI7doZ/bjQ3e9X6NXQ=,iv:Wp3mAAvSQ/Af9fP633Vr0EgCImGP7eAjN/AcIHsxS3w=,tag:UcECml6q4G0hyYbcOnIQsg==,type:str]
+        migrator: ENC[AES256_GCM,data:+manxHLfyLJwaiS/pLFBnTyhAUzna+0=,iv:jJPHbO0sBQP2mu55uomoxRt2DGkAOyeAl/KFKjEnA7g=,tag:8MAyL3lkQTsVwoBw/wNuVA==,type:str]
+        webapp_readonly: ENC[AES256_GCM,data:QtmYwMEZWWpGsG0GRtaY0ldS2L0vDYA=,iv:mZ/RtJETHVUZBjXWxa3Yrr0Sf5m3u3ao1FZDSHcNVpo=,tag:lgW4ckJy9wDsPEdt9nTK/Q==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
-          created_at: "2023-09-12T17:53:37Z"
-          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgHC1WOVOEbBuNn+YEN+OKiFAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMGQ04cBdxcLtN+PMRAgEQgDvbxveKjEU0mIfKAh7I3yjnnrUSDl1UymkOJYlz4MaKw+MNze2Q1zIX0FzkwSFLFcW/7NguN5/FQ1thZw==
+          created_at: "2024-10-09T14:15:23Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgFd2W8ic6/TkyA8p8wcv5IGAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMPj5cEbt+ndJRHdEMAgEQgDuThOL+h28iSGmeB/TcKDZZ61OXEzoWxD3Io9pC63eWkHhJjcQJO/Cklequ8L43LZh9ISXUhWBdm7Nlbg==
           aws_profile: ""
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
           role: arn:aws:iam::205083374951:role/playbook-admins
-          created_at: "2023-09-12T17:53:37Z"
-          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgHs+bIDMZJ9K5YoWkyxqXpxAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMv1q+HlWt0cTzINo0AgEQgDuDojVpcg6NuTpVs8Q2ojw9MnIGfuQ4OI14tvSE78863Esk0Tvgno/oqxDjSfWqIV0kmV/h5hapIm/C3w==
+          created_at: "2024-10-09T14:15:23Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgFTilLgQ0cpyV0/bCSqiidWAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMHJQrlVXmV3auRC97AgEQgDuvJdg6V6f/H15ui2BVgII+a7sUe4I3Suwcjy/Jl4o9+E7GKETkWm8RLpWdwI0yP65GmjLRkmoqnGERlg==
+          aws_profile: ""
+        - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
+          role: arn:aws:iam::205083374951:role/forever-people
+          created_at: "2024-10-09T14:15:23Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgFNq+jUXbUie4tTLRqUg0niAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMBG8uY6UVCCS+9t0lAgEQgDsURce9Oc/zXJFhLivk3rJP4KZRsUrc5qB/6z43P0c3IXvNN3PtTLl+/yPGpZ1zmukv4aBBU0GuVOh0Bw==
           aws_profile: ""
     gcp_kms: []
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2023-09-12T19:37:14Z"
-    mac: ENC[AES256_GCM,data:V4LLnTmHRV39R4VNTsQ5Qc2xjjsE0LuSGYJu2W+ERJkwwCcQe1B874xgSttSQs4aiXybjedqLiveHsr42NGuTvjKDXDxXChffp0bdp/eHB22Av8aONEz9Nbqwr4uBI8SvRPRWL0cT5oFVYR18/cVcxYUYhwreCR5hkg0x+xTF4o=,iv:KsKq/7TqDDCKeIUWW+NGJNNypdiBxth8yeIKMOLjq2k=,tag:i9++nJGiPipwXj7H1dimLQ==,type:str]
+    lastmodified: "2024-10-09T16:20:19Z"
+    mac: ENC[AES256_GCM,data:qG/8X0ZyqRkCAaQvxqghiYPmPsqhRoq7WAeh8MvkzfAdYWuEp3UIcOqG/CYs77A9770537CYearWkuskXRvYxDyTHdMasqyvayxxl3INwkZgqWWY9fcePLS76FL0nXq8jKz4rQg39148PgeYbYEQuz72wq6CmlXRLj6jg1cyAJw=,iv:24lVuaQcM+GyKg8A8+ek462zm9rXj/D7B5tli6hxJF4=,tag:mX/8OUwt6Mb7dn/Tmx8VkA==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
-    version: 3.7.3
+    version: 3.8.1
diff --git a/playbook-website/config/deploy/staging/secrets.yaml b/playbook-website/config/deploy/staging/secrets.yaml
index ae5aa11956..b364148685 100644
--- a/playbook-website/config/deploy/staging/secrets.yaml
+++ b/playbook-website/config/deploy/staging/secrets.yaml
@@ -1,23 +1,42 @@
 appConfig:
-    secretKeyBase: ENC[AES256_GCM,data:T9rr+yNvQIiOKYgGO8p2MM+iqDius270ooqlHTwNDMMXrApWsybNBLIy88tupU/FDm01/FI7ggUZXKbO7WJvBFyxnY/nAQFbw5Xv58lsEGjIrIWAfwANd96NuCOjahnG6PRnICyLbxenQfK7gjXzdxNzRWeRhGFHp/hj29JVx9k=,iv:wB2eCtbFsCXXrPgCOUj2abpBdgsq0iOxL8AiN7wL/Hs=,tag:B3ZaXCT2IlcLmKhR/XrQ4Q==,type:str]
-    sentry_dsn: ENC[AES256_GCM,data:mZ68vE4jCVVi+xrOBnhldUwvObAIdo4HzAXg/r7J+x0BdYTH7SMQWL70mNdVyjbW+KA6aYq6VY6kOIa4FgcUfgBP6cmNDoE4SwTSosUTBm0r3Q==,iv:vqtZKpp7ALuQJYrkDpgn+sjvmEMq9tzBVlc/2hcj8qE=,tag:JByaTyGLemz1Z0wuqzjVBg==,type:str]
+    secretKeyBase: ENC[AES256_GCM,data:kOsJ3LgAPCPZ4Vdm/EBFksqneV7tSeFqKrI965UEqkZ7EQ7n/STuE0vte90/oMF1C0eBYzwHEsnT/1kPirKn5/Rz4np2M1jQIvucTfk7QMd76fueIS2lXtLw155rYL8iEh5JyxviOJNfL93U3FiySo1Fa8+1FoOqvlnHa4+/Uoo=,iv:pjEQHF499TYjNEe+O95G3VgqpAfUyJPtVws8nl3zw4k=,tag:38L8NgqyGQu8ueIBS8NcmQ==,type:str]
+    sentry_dsn: ENC[AES256_GCM,data:8vuODktXtDvYOUKS5XR7JJ0t9sX0urMWdmIeu66wwvqfGNJogacXj097PqM4MHLIsl0DICJen/2xA+uvUSV+ZVqJH7gCqeY3fH4XwMhE8dKZZA==,iv:5NYs+MiDZiR41cuazIFPXC3IKJsJgbl4eoRvTym0dTo=,tag:XP1rGTjYcl5nMUScJ/3w/A==,type:str]
+    open_ai: ENC[AES256_GCM,data:XX6uvmMSXUvaZFcLR4o5zOmZaQDodlRP4tpZ9Od73pnk4sA6VEaPoqBk3AHr0Ret5KD0WhE2TLnMt2UVEv4+xeRcct0lJtN/n+xXODXsGXoRYRRF7hiYGTJJewT5glY=,iv:tOWyS9Ep+TmP4MtY6LEez9XcD/mWERVV2sbEXQU8rrc=,tag:v3sv3+FzybiKijYY7ncqYg==,type:str]
+database:
+    passwords:
+        root: ENC[AES256_GCM,data:cRdz9hWx4RmdMmOir00dBX7J0TE3hBg=,iv:DZ5KDjhIzLWT8SzKtoawhVhv6zvK9z9zG/izg70X/04=,tag:Ap7n0oEIgu8NfmJkTJKXrQ==,type:str]
+        proxyadmin: ENC[AES256_GCM,data:dDeprOtOPGV6NapCoaOcl5L8sgcOSCE=,iv:wXWKJ8pArDVCPauU1kNvspaeLBiqbLjdEXXt0t5sAhg=,tag:sziTzyCsrVihiqH87obr+g==,type:str]
+        xtrabackup: ENC[AES256_GCM,data:YQSZCfvn2zM47DlJ11dMfXwKRNtbLCk=,iv:U9TvTWE2f6z1FB3xBlPSrJrgBeneZosDZI80/x19LzA=,tag:ZzkCs1nqbqjCCRy+KpNZmQ==,type:str]
+        clustercheck: ENC[AES256_GCM,data:UBCBw802YZnqtZk6Sck87RTNvYL8XWI=,iv:ZslmsPbCnhNcdhUEdhAAk0SCRQoatQNHCaw0D54u2D8=,tag:Xd/HfrDZMN6umy+HJb41tw==,type:str]
+        monitor: ENC[AES256_GCM,data:e6NjQgt9E8SHiXNGMAi+Z82WIKT1gqM=,iv:ynE1Jrz7oQqqmVNNzqo9Trkk52OrEd56HOQfpLBeY/M=,tag:DYyPpJiweD+z89kkgIDebA==,type:str]
+        pmmserver: ENC[AES256_GCM,data:92h/4RrrR8K7gXSXopZPA+qWdwoLCkc=,iv:C8tABUx7iJUKagazJt3O9Ow/MHRxgUE3xbbR8MlcT5I=,tag:4aDmKJKj+JJpYAASzeeLUw==,type:str]
+        operator: ENC[AES256_GCM,data:9Qb+nW2jEPHOyfHOjZQYvoCIRfs93rU=,iv:rOqCYY6nrEmYGsIHYtw+xRvPn6TRQCcNB/EUTw4WtGM=,tag:NfcN9ZhJ6gBXANxDPP3fnw==,type:str]
+        replication: ENC[AES256_GCM,data:tYyhKwh17Eh5Cl+OtcUhB12Isnew6vg=,iv:O84q03Yz3bLTmaMiBi9HLk2grbMmAIFehOjTn1Iyl1A=,tag:VIxzLLEAHNOnTDoUBtYJ2A==,type:str]
+        webapp: ENC[AES256_GCM,data:8xcWhzx5M8U/7CKJpwSJLUzTt1kFkaI=,iv:UK0Y9+rgRJlcSt0/Nsh+uYE2seO+XGl4+vHcpwd8wDw=,tag:7CimZ310KliXTI1D9aJB5Q==,type:str]
+        migrator: ENC[AES256_GCM,data:ns2KCG6ivLFldBuPfB0yO6odnBRSUfg=,iv:G3ZHzpb/3c+IuDD3NXXEwNozXMgqB4k1d3+nwl9FXtI=,tag:bIqe4CCswBLXhNnHOWCCBA==,type:str]
+        webapp_readonly: ENC[AES256_GCM,data:A+wxbSY08SYgzRpWBSsfSNyWkm/1NcQ=,iv:d6mTiGOPCAFhCftyYunIgQJqBKCN3fmI5Eiz8HPl528=,tag:hanVevwzajabijbgtqsPmw==,type:str]
 sops:
     kms:
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
-          created_at: "2023-09-12T17:53:51Z"
-          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgFAHaaoyZIhorapEiPc+qICAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMX8BKJ5TiL9Pi1CvvAgEQgDuKgTNkmLECrXQsOPMINqkAT5HzdOqKY/7QT3wS6+EcgVF/kVSD++0yceqYZY6urOFZs9AcPoffFghlGw==
+          created_at: "2024-10-09T14:15:36Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgF5FR6Zmbb2LmX/Ok1UTBQ1AAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMGDGnVWMmvb8v8r8JAgEQgDt6so3JsL9WSkXPw1VsgKL0K1S5G0J1of4jczsf7uJp4lCWyzYzN3iK0aD/ZMDQfq/CHkAo3da9NodoZg==
           aws_profile: ""
         - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
           role: arn:aws:iam::205083374951:role/playbook-admins
-          created_at: "2023-09-12T17:53:51Z"
-          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgEkSuHel9uABP7kWsy3YHNXAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMjUBIc+aCDRrVDqTOAgEQgDu8ZcejevO0RMIsndJbpN47yZ/kCIhfsLGv7YQ2CamhWhAP5b4V3Bz7aY+bFkXEmsumaSbQB2j+e+vL5Q==
+          created_at: "2024-10-09T14:15:36Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgE7Au4PrldyBvUsxJu2XM0WAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQM6DF1DaKLw/6qWGHAAgEQgDsjGaEv60fzlf3o7oHNGPanagVIHk7eNWBzpgjAH256rJoC7mXeSn2qFEnRjLYOA1/4LeLgXD3B0+bHAQ==
+          aws_profile: ""
+        - arn: arn:aws:kms:us-east-1:205083374951:key/d46e780d-ee0a-4a7d-b049-0443e1b91d41
+          role: arn:aws:iam::205083374951:role/forever-people
+          created_at: "2024-10-09T14:15:36Z"
+          enc: AQICAHjD4+PGrfNOURZm5p39Rxa0oVLr81xX3U8gvQwj2QeLTgG3HMs993vA2J7ym2Gaf0jXAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMg1PVXgdv92RavP2NAgEQgDvx4LuwYEmnAGtCR1j8B0DhkL0sIowwUrJgQKcpf3453ixUzxs+vnILsUajTxm3RVpWxoPV1OjNxRfLew==
           aws_profile: ""
     gcp_kms: []
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2023-09-12T19:36:52Z"
-    mac: ENC[AES256_GCM,data:7fTUBII1iCtdGe4QZFkXw5j+P2vUhRJF6Ny4CxeTzZctRi+upYME23maBPpzEFjKU0J9S1jLl1XFodOSZe5Sc3E1UEOBhs1/J7rvuEhWZC5QkKXVrq/UzNkDPO9eTQmE7XA6/w0TLx++xcy9iSHIsrLubidAU3EO5R4eaiaT3gw=,iv:zfDYlma2ltcRHWw47rn/kSJjJX3s95Xg5kvBM96Koz4=,tag:GiHRN/m9Q6GAITAFmPZobg==,type:str]
+    lastmodified: "2024-10-09T16:26:13Z"
+    mac: ENC[AES256_GCM,data:4oDOX4judp5IwSWIwz0TjModHhgYdIDLlij0m4S7qVeoluGaDSdn8Xx5bhaTOapYxzk1xIzrCuRhAeMFnieBhJ4l8V9XBGxRYDOobYPCJzXuWJFF80T+QoOe2JyjMB84LjtA6qUTn4cvul/tW7hMQ7ySKVr94oHpNW6lx24N2JM=,iv:EDoIKM6S044f764iz73LJBG+NRBqyy+ev6lCK+12cHg=,tag:pR8fl4g7ppG14Mym05P2uQ==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
-    version: 3.7.3
+    version: 3.8.1
diff --git a/playbook-website/config/deploy/templates/deployment.yaml.erb b/playbook-website/config/deploy/templates/deployment.yaml.erb
index 343681a9bf..73a80b7732 100644
--- a/playbook-website/config/deploy/templates/deployment.yaml.erb
+++ b/playbook-website/config/deploy/templates/deployment.yaml.erb
@@ -1,3 +1,6 @@
+<%
+  database_user = database["application_user"]
+%>
 apiVersion: apps/v1
 kind: Deployment
 metadata:
@@ -50,6 +53,20 @@ spec:
                 secretKeyRef:
                   name: playbook
                   key: sentry-dsn
+            - name: OPEN_AI_KEY
+              valueFrom:
+                secretKeyRef:
+                  name: playbook
+                  key: open-ai
+            - name: DATABASE_HOST
+              value: database-haproxy
+            - name: DATABASE_USER
+              value: <%= database_user %>
+            - name: DATABASE_PASSWORD
+              valueFrom:
+                secretKeyRef:
+                  name: database-secrets
+                  key: <%= database_user %>
           livenessProbe:
             httpGet:
               path: /health_check/site
@@ -72,4 +89,4 @@ spec:
               "memory" => "256Mi",
               "ephemeral-storage" => "100Mi"
             }
-          } %> 
+          } %>
diff --git a/playbook-website/config/deploy/templates/migration-hook.yaml.erb b/playbook-website/config/deploy/templates/migration-hook.yaml.erb
new file mode 100644
index 0000000000..33bcae85c1
--- /dev/null
+++ b/playbook-website/config/deploy/templates/migration-hook.yaml.erb
@@ -0,0 +1,57 @@
+<%
+  migrate_user = database["allprivs_user"]
+%>
+apiVersion: v1
+kind: Pod
+metadata:
+  name: "db-migrate-<%= deployment_id.downcase %>"
+  labels:
+    app: playbook
+    app.kubernetes.io/name: playbook
+    app.kubernetes.io/instance: playbook-<%= environment %>
+    app.kubernetes.io/version: <%= image_tag %>
+    app.kubernetes.io/component: db-migrate
+    app.kubernetes.io/part-of: playbook
+    app.kubernetes.io/managed-by: krane
+  annotations:
+    krane.shopify.io/timeout-override: 30m
+spec:
+  restartPolicy: Never
+  shareProcessNamespace: true
+  containers:
+  - name: db-migrate
+    image: "image-registry.powerapp.cloud/playbook/playbook:<%= image_tag %>"
+    workingDir: /home/app/src/playbook-website
+    command:
+      - bin/rails
+    args:
+      - db:prepare
+    env:
+      - name: SECRET_KEY_BASE
+        valueFrom:
+          secretKeyRef:
+            name: playbook
+            key: secret-key-base
+      - name: RACK_ENV
+        value: <%= appConfig["rackEnv"] %>
+      - name: RAILS_ENV
+        value: <%= appConfig["railsEnv"] %>
+      - name: RAILS_LOG_TO_STDOUT
+        value: "true"
+      - name: DATABASE_HOST
+        value: database-haproxy
+      - name: DATABASE_USER
+        value: "<%= migrate_user %>"
+      - name: DATABASE_PASSWORD
+        valueFrom:
+          secretKeyRef:
+            name: database-secrets
+            key: "<%= migrate_user %>"
+    resources:
+      limits:
+        memory: 700Mi
+        ephemeral-storage: 100Mi
+      requests:
+        cpu: 0.1
+        memory: 500Mi
+        ephemeral-storage: 100Mi
diff --git a/playbook-website/config/deploy/templates/operators/pxc-operator.yml b/playbook-website/config/deploy/templates/operators/pxc-operator.yml
new file mode 100644
index 0000000000..e94a395d52
--- /dev/null
+++ b/playbook-website/config/deploy/templates/operators/pxc-operator.yml
@@ -0,0 +1,67 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: percona-xtradb-cluster-operator
+  labels:
+    app.kubernetes.io/component: operator
+    app.kubernetes.io/instance: percona-xtradb-cluster-operator
+    app.kubernetes.io/name: percona-xtradb-cluster-operator
+    app.kubernetes.io/part-of: percona-xtradb-cluster-operator
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app.kubernetes.io/component: operator
+      app.kubernetes.io/instance: percona-xtradb-cluster-operator
+      app.kubernetes.io/name: percona-xtradb-cluster-operator
+      app.kubernetes.io/part-of: percona-xtradb-cluster-operator
+  strategy:
+    rollingUpdate:
+      maxUnavailable: 1
+    type: RollingUpdate
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/component: operator
+        app.kubernetes.io/instance: percona-xtradb-cluster-operator
+        app.kubernetes.io/name: percona-xtradb-cluster-operator
+        app.kubernetes.io/part-of: percona-xtradb-cluster-operator
+    spec:
+      serviceAccountName: percona-xtradb-cluster-operator
+      containers:
+        - name: percona-xtradb-cluster-operator
+          image: percona/percona-xtradb-cluster-operator:1.15.0@sha256:6f7d8d4e472b8c4d166573cc7bb714bbb0fdf1535142b6138c62fdecbf881df9
+          ports:
+          - containerPort: 8080
+            name: metrics
+            protocol: TCP
+          command:
+          - percona-xtradb-cluster-operator
+          imagePullPolicy: Always
+          env:
+            - name: WATCH_NAMESPACE
+              valueFrom:
+                fieldRef:
+                  apiVersion: v1
+                  fieldPath: metadata.namespace
+            - name: POD_NAME
+              valueFrom:
+                fieldRef:
+                  apiVersion: v1
+                  fieldPath: metadata.name
+            - name: OPERATOR_NAME
+              value: "percona-xtradb-cluster-operator"
+          livenessProbe:
+            failureThreshold: 3
+            httpGet:
+              path: /metrics
+              port: metrics
+              scheme: HTTP
+          resources:
+            requests:
+              cpu: "200m"
+              memory: "256Mi"
+              ephemeral-storage: 100Mi
+            limits:
+              memory: "256Mi"
+              ephemeral-storage: 100Mi
diff --git a/playbook-website/config/deploy/templates/priority/mysql.yaml.erb b/playbook-website/config/deploy/templates/priority/mysql.yaml.erb
new file mode 100644
index 0000000000..da8a0ada7e
--- /dev/null
+++ b/playbook-website/config/deploy/templates/priority/mysql.yaml.erb
@@ -0,0 +1,120 @@
+<%
+  pxc_cluster_size    = 3
+%>
+---
+apiVersion: v1
+kind: Secret
+metadata:
+  name: database-secrets
+  labels:
+    app.kubernetes.io/name: playbook
+    app.kubernetes.io/instance: playbook-<%= environment %>
+    app.kubernetes.io/version: <%= image_tag %>
+    app.kubernetes.io/component: database
+    app.kubernetes.io/part-of: priority-deploy
+    app.kubernetes.io/managed-by: krane
+type: Opaque
+data:
+  root: <%= Base64.encode64(database.dig("passwords", "root")) %>
+  proxyadmin: <%= Base64.encode64(database.dig("passwords", "proxyadmin")) %>
+  xtrabackup: <%= Base64.encode64(database.dig("passwords", "xtrabackup")) %>
+  clustercheck: <%= Base64.encode64(database.dig("passwords", "clustercheck")) %>
+  monitor: <%= Base64.encode64(database.dig("passwords", "monitor")) %>
+  pmmserver: <%= Base64.encode64(database.dig("passwords", "pmmserver")) %>
+  operator: <%= Base64.encode64(database.dig("passwords", "operator")) %>
+  replication: <%= Base64.encode64(database.dig("passwords", "replication")) %>
+  webapp: <%= Base64.encode64(database.dig("passwords", "webapp")) %>
+  migrator: <%= Base64.encode64(database.dig("passwords", "migrator")) %>
+  webapp_readonly: <%= Base64.encode64(database.dig("passwords", "webapp_readonly")) %>
+---
+apiVersion: pxc.percona.com/v1
+kind: PerconaXtraDBCluster
+metadata:
+  name: database
+  labels:
+    app.kubernetes.io/name: playbook
+    app.kubernetes.io/instance: playbook-<%= environment %>
+    app.kubernetes.io/component: database
+    app.kubernetes.io/part-of: priority-deploy
+    app.kubernetes.io/managed-by: krane
+  annotations:
+    krane.shopify.io/timeout-override: 400s
+  finalizers: []
+spec:
+  crVersion: 1.15.0
+  secretsName: database-secrets
+  allowUnsafeConfigurations: false
+  pause: false
+  updateStrategy: SmartUpdate
+  pxc:
+    size: <%= pxc_cluster_size %>
+    image: percona/percona-xtradb-cluster:8.0.36@sha256:b5cc4034ccfb0186d6a734cb749ae17f013b027e9e64746b2c876e8beef379b3
+    autoRecovery: true
+    resources:
+      requests:
+        memory: 200M
+        cpu: "0.2"
+        ephemeral-storage: 500Mi
+      limits:
+        memory: 1G
+        ephemeral-storage: 500Mi
+    affinity:
+      antiAffinityTopologyKey: "kubernetes.io/hostname"
+    podDisruptionBudget:
+      maxUnavailable: 1
+    volumeSpec:
+      persistentVolumeClaim:
+        storageClassName: <%= database["storageClass"] %>
+        accessModes: [ "ReadWriteOnce" ]
+        resources:
+          requests:
+            storage: <%= database["volumeSize"] %>
+    gracePeriod: 600
+    configuration: |
+      [mysqld]
+      pxc_strict_mode=MASTER
+      log_bin_trust_function_creators=ON
+  haproxy:
+    enabled: true
+    size: 3
+    image: percona/haproxy:2.8.5@sha256:941f3bd0977bff9145e904bf8f8298a1a024d7f03152edaea0cf65fd1c137340
+    resources:
+      requests:
+        memory: 100M
+        cpu: 100m
+        ephemeral-storage: 500Mi
+      limits:
+        memory: 200M
+        ephemeral-storage: 500Mi
+    sidecarResources:
+      requests:
+        memory: 50M
+        cpu: 100m
+        ephemeral-storage: 250Mi
+      limits:
+        memory: 100M
+        ephemeral-storage: 250Mi
+    affinity:
+      antiAffinityTopologyKey: "kubernetes.io/hostname"
+    podDisruptionBudget:
+      maxUnavailable: 1
+    gracePeriod: 30
+    annotations:
+      fluentbit.io/exclude: "true"
+  pmm:
+    enabled: false
+<% if database["users"] %>
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: mysql-users-playbook
+  labels:
+    app.kubernetes.io/component: database
+    app.kubernetes.io/name: playbook
+    app.kubernetes.io/instance: playbook-<%= environment %>
+    app.kubernetes.io/part-of: priority-deploy
+    app.kubernetes.io/managed-by: krane
+data:
+  users: '<%= database["users"].to_json %>'
+<% end %>
diff --git a/playbook-website/config/deploy/templates/secret.yaml.erb b/playbook-website/config/deploy/templates/secret.yaml.erb
index 77b3f039ca..1110c51c2f 100644
--- a/playbook-website/config/deploy/templates/secret.yaml.erb
+++ b/playbook-website/config/deploy/templates/secret.yaml.erb
@@ -9,3 +9,4 @@ type: Opaque
 data:
   secret-key-base: <%= Base64.encode64(appConfig.fetch("secretKeyBase")).gsub("\n", "").strip %>
   sentry-dsn: <%= Base64.encode64(appConfig.fetch("sentry_dsn")).gsub("\n", "").strip %>
+  open-ai: <%= Base64.encode64(appConfig.fetch("open_ai")).gsub("\n", "").strip %>
diff --git a/playbook-website/config/deploy/templates/shell.yaml.erb b/playbook-website/config/deploy/templates/shell.yaml.erb
index 7f8f4d4717..6c4344a74b 100644
--- a/playbook-website/config/deploy/templates/shell.yaml.erb
+++ b/playbook-website/config/deploy/templates/shell.yaml.erb
@@ -41,6 +41,11 @@ template:
             value: "true"
           - name: RAILS_LOG_TO_STDOUT
             value: "true"
+          - name: OPENAI_API_KEY
+            valueFrom:
+              secretKeyRef:
+                name: playbook
+                key: open-ai
         resources:
           limits:
             cpu: 0.3
diff --git a/playbook-website/config/deploy/values.yaml b/playbook-website/config/deploy/values.yaml
index 6eb52762f9..87d4b76bcc 100644
--- a/playbook-website/config/deploy/values.yaml
+++ b/playbook-website/config/deploy/values.yaml
@@ -1,3 +1,22 @@
 appConfig:
   rackEnv: "production"
   railsEnv: "production"
+
+database:
+  users:
+    - name: webapp
+      dbs:
+        - playbook_website
+      grant: 'SELECT, INSERT, UPDATE, DELETE'
+    - name: migrator
+      dbs:
+        - playbook_website
+      grant: 'ALL'
+    - name: webapp_readonly
+      dbs:
+        - playbook_website
+      grant: 'SELECT'
+  allprivs_user: migrator
+  application_user: webapp
+  storageClass: staging-performance
+  volumeSize: 1Gi
diff --git a/playbook-website/config/initializers/openai.rb b/playbook-website/config/initializers/openai.rb
new file mode 100644
index 0000000000..457e6095b6
--- /dev/null
+++ b/playbook-website/config/initializers/openai.rb
@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+Rails.application.config.openai_api_key = ENV["OPENAI_API_KEY"]
diff --git a/playbook-website/db/schema.rb b/playbook-website/db/schema.rb
new file mode 100644
index 0000000000..a3b0495167
--- /dev/null
+++ b/playbook-website/db/schema.rb
@@ -0,0 +1,14 @@
+# This file is auto-generated from the current state of the database. Instead
+# of editing this file, please use the migrations feature of Active Record to
+# incrementally modify your database, and then regenerate this schema definition.
+#
+# This file is the source Rails uses to define your schema when running `bin/rails
+# db:schema:load`. When creating a new database, `bin/rails db:schema:load` tends to
+# be faster and is potentially less error prone than running all of your
+# migrations from scratch. Old migrations may fail to apply correctly if those
+# migrations use external dependencies or application code.
+#
+# It's strongly recommended that you check this file into your version control system.
+
+ActiveRecord::Schema[7.0].define(version: 0) do
+end
diff --git a/playbook/CHANGELOG.md b/playbook/CHANGELOG.md
index 75c3509657..7080805df6 100644
--- a/playbook/CHANGELOG.md
+++ b/playbook/CHANGELOG.md
@@ -1,3 +1,40 @@
+# 🐝 Improved Usability, Flexibility, Customization and More! 🐝
+##### October 1, 2024 
+
+![1450](https://github.com/user-attachments/assets/04a54556-9148-4a9e-8ff2-4902c59aef18)
+
+We’re back! 14.5.0 is live in Nitro and is packed with improvements, bug fixes and more! 
+This release focuses on continued improvements to usability, customization, and visual consistency!
+
+[14.5.0](https://github.com/powerhome/playbook/tree/14.5.0) full list of changes:
+
+**Kit Enhancements:**
+- Enable Kits Instead of Text for Radio Label - React Only [\#3691](https://github.com/powerhome/playbook/pull/3691) ([nickamantia](https://github.com/nickamantia))
+- Remove marginBottom from Typeahead Kit [\#3680](https://github.com/powerhome/playbook/pull/3680) ([elisashapiro](https://github.com/elisashapiro))
+
+
+**Fixed Bugs:**
+- Fixing Minimizing the Dropdown When Clicking Outside [\#3688](https://github.com/powerhome/playbook/pull/3688) ([carloslimasd](https://github.com/carloslimasd))
+- Make Dialog Close 'x' Icons Same Size [\#3706](https://github.com/powerhome/playbook/pull/3706) ([kangaree](https://github.com/kangaree))
+
+
+
+**Improvements:**
+- Bump Highcharts Packages to Latest [\#3708](https://github.com/powerhome/playbook/pull/3708) ([kangaree](https://github.com/kangaree))
+- Remove FA from the Playbook Website [\#3687](https://github.com/powerhome/playbook/pull/3687) ([skduncan](https://github.com/skduncan))
+- Add Comment When Merge to Master for RC [\#3727](https://github.com/powerhome/playbook/pull/3727) ([markdoeswork](https://github.com/markdoeswork))
+- Fix Spacing on Radio kit Children Doc Example [\#3730](https://github.com/powerhome/playbook/pull/3730) ([elisashapiro](https://github.com/elisashapiro))
+- Add Multiple Pagination Components Example and Dynamic Key Copy [\#3715](https://github.com/powerhome/playbook/pull/3715) ([elisashapiro](https://github.com/elisashapiro))
+- Bump to ci-kubed v8.6.0 [no-cache] [\#3639](https://github.com/powerhome/playbook/pull/3639) ([TeamTeaTime](https://github.com/TeamTeaTime))
+- Add Comment Script for RCs [\#3717](https://github.com/powerhome/playbook/pull/3717) ([markdoeswork](https://github.com/markdoeswork))
+- Use New Icons [\#3648](https://github.com/powerhome/playbook/pull/3648) ([markdoeswork](https://github.com/markdoeswork))
+
+**New Kits:**
+- Drawer Beta Kit [\#3686](https://github.com/powerhome/playbook/pull/3686) ([markdoeswork](https://github.com/markdoeswork))
+
+
+[Full Changelog](https://github.com/powerhome/playbook/compare/14.4.0...14.5.0)
+
 # Spot Everyone at a Glance: Meet the New Multiple Users Component!
 ##### September 18, 2024 
 
diff --git a/playbook/Gemfile.lock b/playbook/Gemfile.lock
index 5faece6284..98fa51d2da 100644
--- a/playbook/Gemfile.lock
+++ b/playbook/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    playbook_ui (14.5.0)
+    playbook_ui (14.6.0)
       actionpack (>= 5.2.4.5)
       actionview (>= 5.2.4.5)
       activesupport (>= 5.2.4.5)
diff --git a/playbook/app/entrypoints/playbook-rails.js b/playbook/app/entrypoints/playbook-rails.js
index 6c11e2a8a8..7769cb5fb9 100644
--- a/playbook/app/entrypoints/playbook-rails.js
+++ b/playbook/app/entrypoints/playbook-rails.js
@@ -1,5 +1,7 @@
 // Forms
 import 'kits/pb_form/pb_form_validation'
+import formHelper from 'kits/pb_form/formHelper'
+window.formHelper = formHelper
 
 // Date Picker
 import datePickerHelper from 'kits/pb_date_picker/date_picker_helper'
diff --git a/playbook/app/javascript/plugins.js b/playbook/app/javascript/plugins.js
index d27f3cec4a..0ecdf5e1e6 100644
--- a/playbook/app/javascript/plugins.js
+++ b/playbook/app/javascript/plugins.js
@@ -6,3 +6,5 @@ export { default as PbTextarea } from '../pb_kits/playbook/pb_textarea'
 export { default as PbTooltip } from '../pb_kits/playbook/pb_tooltip'
 export { default as PbTypeahead } from '../pb_kits/playbook/pb_typeahead'
 export { default as dialogHelper } from '../pb_kits/playbook/pb_dialog/dialogHelper'
+export { default as formHelper } from '../pb_kits/playbook/pb_form/formHelper'
+
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
index 154676418d..52b0c7fcf4 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
@@ -91,7 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const columnHelper = createColumnHelper()
 
   //Create cells for first columns
-  const createCellFunction = (cellAccessors: string[]) => {
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
     const columnCells = ({
       row,
       getValue,
@@ -101,6 +101,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
+    // Use customRenderer if provided, otherwise default rendering
+    if (customRenderer) {
+      return customRenderer(row, getValue())
+    }
+
       switch (row.depth) {
         case 0: {
           return (
@@ -134,18 +139,31 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
-      columnDefinitions.map((column) => {
+      columnDefinitions.map((column, index) => {
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.label,
         }),
       }
-      if (column.cellAccessors) {
-        columnStructure.cell = createCellFunction(column.cellAccessors)
-      }
-      return columnStructure
-    })
+
+  // Use the custom renderer if provided, EXCEPT for the first column
+  if (index !== 0) {
+    if (column.cellAccessors || column.customRenderer) {
+      columnStructure.cell = createCellFunction(
+        column.cellAccessors,
+        column.customRenderer
+      )
+    }
+  } else {
+    // For the first column, apply createCellFunction without customRenderer
+    if (column.cellAccessors) {
+      columnStructure.cell = createCellFunction(column.cellAccessors)
+    }
+  }
+
+  return columnStructure
+})
 
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
new file mode 100644
index 0000000000..b1c5bad58d
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
@@ -0,0 +1,72 @@
+import React from "react"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCustomCell = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      customRenderer: (row, value) => (
+        <Pill text={value} 
+            variant="success"    
+        />
+      ), 
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>, 
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      customRenderer: (row, value) => (
+        <Flex alignItems="end" 
+            orientation="column"
+        >
+          <Detail bold 
+              color="default" 
+              text={value} 
+          />
+          <Caption size="xs">{row.original.graduatedStudents}</Caption>
+        </Flex>
+      ),
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          responsive="none"
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableCustomCell
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
new file mode 100644
index 0000000000..5ad9e1c219
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
@@ -0,0 +1,5 @@
+The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `customRenderer` item within each columnDefinition. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row. To access the data, use `row.original` which is the entire data object for the current row. See the code snippet below for 3 separate use cases and how they were acheived. 
+
+See [here](https://playbook.powerapp.cloud/kits/advanced_table/react#columnDefinitions) for more indepth information on columnDefinitions are how to use them.
+
+See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the tableData used.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml
index aec491e8e9..87fb7abf3d 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml
@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
+
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -15,3 +16,4 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
+  - advanced_table_custom_cell: Custom Components for Cells
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js
index c67f4b9bbd..d7992a808a 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js
@@ -9,3 +9,4 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
+export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/index.js b/playbook/app/pb_kits/playbook/pb_advanced_table/index.js
index fa6e2523bf..ec9c1a71b5 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/index.js
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/index.js
@@ -13,9 +13,20 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   get target() {
     return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
   }
+  
+  static expandedRows = new Set()
+  static isCollapsing = false
 
   connect() {
     this.element.addEventListener('click', () => {
+      if (!PbAdvancedTable.isCollapsing) {
+        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+        if (!isExpanded) {
+          PbAdvancedTable.expandedRows.add(this.element.id)
+        } else {
+          PbAdvancedTable.expandedRows.delete(this.element.id)
+        }
+      }
       this.toggleElement(this.target)
     })
   }
@@ -75,4 +86,53 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
   }
+
+  static handleToggleAllHeaders(element) {
+    const table = element.closest('.pb_table')
+    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
+    
+    const expandedRows = Array.from(firstLevelButtons).filter(button => 
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+  
+    if (expandedRows.length === firstLevelButtons.length) {
+      expandedRows.forEach(button => {
+        button.click()
+      })
+      this.expandedRows.clear()
+    } else {
+      firstLevelButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+  static handleToggleAllSubRows(element, rowDepth) {
+    const parentElement = element.closest(".toggle-content")
+    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
+    
+    const expandedSubRows = Array.from(subrowButtons).filter(button => 
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+  
+    if (expandedSubRows.length === subrowButtons.length) {
+      expandedSubRows.forEach(button => {
+        button.click()
+      })
+    } else {
+      subrowButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+}
+
+window.expandAllRows = (element) => {
+  PbAdvancedTable.handleToggleAllHeaders(element)
 }
+window.expandAllSubRows = (element, rowDepth) => {
+  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
+}
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb
index f98b8bfda3..fa857e1926 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb
@@ -13,12 +13,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllRows = (element) => {
-        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
\ No newline at end of file
+<% end %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb
index 8870a1f9ea..8815af0bf0 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb
@@ -23,12 +23,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllSubRows = (element, rowDepth) => {
-        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
\ No newline at end of file
+<% end %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb
index 5d8254f492..764f0d9559 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb
@@ -1,13 +1,36 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-loading", 
-    size: "sm", 
-    title: "Loading Exmaple", 
-    text: "Make a loading request?", 
-    cancel_button: "Cancel Button", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-loading",
+    size: "sm",
+    title: "Loading Example",
+    text: "Make a loading request?",
+    cancel_button: "Cancel Button",
     cancel_button_id: "cancel-button-loading",
-    confirm_button: "Okay", 
+    confirm_button: "Okay",
     confirm_button_id: "confirm-button-loading",
     loading: true,
 }) %>
+
+<script>
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+        loadingButton.addEventListener("click", function() {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+
+        setTimeout(function() {
+            okayLoadingButton.disabled = false;
+            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
+
+            if (cancelButton) {
+            cancelButton.disabled = false;
+            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
+            }
+        }, 5000);
+
+        });
+  }
+</script>
diff --git a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md
index ad7fbfab33..de0f291d1a 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md
+++ b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md
@@ -1,3 +1 @@
 Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
-
-Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
index a64e52f2aa..05b26b4b07 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
@@ -69,15 +69,21 @@
         padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
-          background-color: $border_light;
+          background-color: $bg_light;
         }
 
         &[class*="_focused"] {
-          background-color: $border_light;
+          background-color: $bg_light;
         }
 
         &[class*="_list"] {
           border-bottom: 1px solid $border_light;
+
+          &:hover, &:focus {
+            .pb_body_kit {
+              color: $primary;
+            }
+          }
         }
         &[class*="selected"] {
           background-color: $primary;
@@ -87,7 +93,7 @@
             color: $white !important;
           }
           &:hover {
-            background-color: $primary !important;
+            background-color: $product_1_background !important;
           }
         }
       }
@@ -125,6 +131,81 @@
     }
   }
 
+  &.separators_hidden {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+
+        [class*="pb_dropdown_option"] {
+          border: none;
+        }
+      }
+    }
+  }
+
+  &.subtle {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+        
+        [class*="pb_dropdown_option"]:first-child {
+          margin-top: $space_xs;
+        }
+
+        [class*="pb_dropdown_option"]:last-child {
+          margin-bottom: $space_xs;
+        }
+
+        [class*="pb_dropdown_option"] {
+          margin: $space_xs;
+          padding: $space_xs;
+          border-radius: $border_radius_md;
+          border-bottom: none;
+          position: relative;
+        
+          &::after {
+            content: "";
+            position: absolute;
+            left: -$space_xs;
+            right: -$space_xs;
+            bottom: -4.5px;
+            height: 1px;
+            background: $border_light;
+          }
+        }
+        
+        [class*="pb_dropdown_option"]:last-child::after {
+          display: none; 
+        }
+      }
+    }
+  
+    &.separators_hidden {
+      .dropdown_wrapper {
+        .pb_dropdown_container {
+          [class*="pb_dropdown_option"]:first-child {
+            margin-top: $space_xs;
+          }
+  
+          [class*="pb_dropdown_option"]:last-child {
+            margin-bottom: $space_xs;
+          }
+
+          [class*="pb_dropdown_option"] {
+            padding: $space_xxs $space_xs;
+            margin: $space_xxs $space_xs;
+     
+            &::after {
+              height: 0px;
+            }
+
+            &[class*="selected"] {
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
   &.dark {
     .dropdown_wrapper {
       [class*="dropdown_trigger_wrapper"] {
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
index 5940e22e29..28af6eb76a 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -35,10 +35,19 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
+    separators: boolean;
     triggerRef?: any;
+    variant?: "default" | "subtle";
 };
 
-const Dropdown = (props: DropdownProps) => {
+interface DropdownComponent
+    extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
+    Option: typeof DropdownOption;
+    Trigger: typeof DropdownTrigger;
+    Container: typeof DropdownContainer;
+}
+
+const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const {
         aria = {},
         autocomplete = false,
@@ -55,15 +64,20 @@ const Dropdown = (props: DropdownProps) => {
         label,
         onSelect,
         options,
-        triggerRef
+        separators = true,
+        triggerRef,
+        variant = "default",
     } = props;
 
     const ariaProps = buildAriaProps(aria);
     const dataProps = buildDataProps(data);
     const htmlProps = buildHtmlProps(htmlOptions);
+    const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
         buildCss("pb_dropdown"),
         globalProps(props),
+        variant,
+        separatorsClass,
         className
     );
 
@@ -125,7 +139,7 @@ const Dropdown = (props: DropdownProps) => {
     const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });    
+    });
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -175,6 +189,14 @@ const Dropdown = (props: DropdownProps) => {
         dark
     });
 
+    useImperativeHandle(ref, () => ({
+        clearSelected: () => {
+            setSelected({});
+            setFilterItem("");
+            setIsDropDownClosed(true);
+            onSelect && onSelect(null);
+        },
+    }));
 
     return (
         <div {...ariaProps}
@@ -258,8 +280,9 @@ const Dropdown = (props: DropdownProps) => {
             </DropdownContext.Provider>
         </div>
     )
-};
+}) as DropdownComponent
 
+Dropdown.displayName = "Dropdown";
 Dropdown.Option = DropdownOption;
 Dropdown.Trigger = DropdownTrigger;
 Dropdown.Container = DropdownContainer;
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
new file mode 100644
index 0000000000..eeece1ec52
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
@@ -0,0 +1,45 @@
+import React, { useRef } from 'react'
+import { Button, Dropdown } from 'playbook-ui'
+
+const options = [
+    {
+        label: "United States",
+        value: "United States",
+    },
+    {
+        label: "Canada",
+        value: "Canada",
+    },
+    {
+        label: "Pakistan",
+        value: "Pakistan",
+    }
+]
+
+const DropdownClearSelection = (props) => {
+    const dropdownRef = useRef(null)
+
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+
+    return (
+        <>
+            <Dropdown
+                defaultValue={options[2]}
+                options={options}
+                ref={dropdownRef}
+                {...props}
+            />
+            <Button
+                marginTop="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+        </>
+    )
+}
+
+export default DropdownClearSelection
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
new file mode 100644
index 0000000000..b251ffaea6
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
@@ -0,0 +1 @@
+To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
new file mode 100644
index 0000000000..98d2b41939
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
@@ -0,0 +1,9 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+<%= pb_rails("dropdown", props: {options: options, separators: false}) %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
new file mode 100644
index 0000000000..053c60e339
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+
+const DropdownSeparatorsHidden = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        options={options}
+        separators={false}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownSeparatorsHidden
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb
new file mode 100644
index 0000000000..8e37f2390f
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb
@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: { options: options, variant: "subtle", separators: false }) %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx
new file mode 100644
index 0000000000..e2686d36b3
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+
+const DropdownSubtleVariant = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+
+  return (
+  <>
+     <Dropdown
+         options={options}
+         separators={false}
+         variant="subtle"
+         {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownSubtleVariant
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md
new file mode 100644
index 0000000000..723805e823
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md
@@ -0,0 +1 @@
+For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml b/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml
index 5f4d445870..5a88bb3075 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml
@@ -1,6 +1,7 @@
 examples:
   rails:
   - dropdown_default: Default
+  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
@@ -10,9 +11,11 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_separators_hidden: Separators Hidden
 
   react:
   - dropdown_default: Default
+  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
@@ -22,6 +25,8 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_clear_selection: Clear Selection
+  - dropdown_separators_hidden: Separators Hidden
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js b/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js
index 92feffe44a..6753fe53cb 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js
@@ -12,3 +12,6 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
+export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
+export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb
index 4f839b17f0..30e6cbd2f5 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb
@@ -13,13 +13,18 @@ class Dropdown < Playbook::KitBase
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default subtle],
+                     default: "default"
+      prop :separators, type: Playbook::Props::Boolean,
+                        default: true
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
       end
 
       def classname
-        generate_classname("pb_dropdown")
+        generate_classname("pb_dropdown", variant, separators_class, separator: " ")
       end
 
     private
@@ -32,6 +37,10 @@ def input_default_value
         default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
       end
 
+      def separators_class
+        separators ? "" : "separators_hidden"
+      end
+
       def options_with_blank
         blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
       end
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx b/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx
index b7363a9ed4..83061dc21e 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx
@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
   const focusedClass = isFocused && "focused";
 
   const selectedClass = `${
-    selected.label === option.label
+    selected?.label === option.label
       ? "selected"
       : "list"
   }`;
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx b/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx
index 2c172828c1..984425c7c7 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     !autocomplete && "select_only"
   );
 
-  const customDisplayPlaceholder = selected.label ? (
+  const customDisplayPlaceholder = selected?.label ? (
     <b>{selected.label}</b>
   ) : autocomplete ? (
     ""
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
 
-  const defaultDisplayPlaceholder = selected.label
+  const defaultDisplayPlaceholder = selected?.label
     ? selected.label
     : autocomplete
     ? ""
diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
index 7d15d84d12..ecb21b72ad 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
@@ -34,6 +34,7 @@ const FilterDouble = ({
   maxHeight,
   minWidth,
   placement,
+  popoverProps,
   ...bgProps
 }: FilterDoubleProps): React.ReactElement => (
   <FilterBackground
@@ -49,6 +50,7 @@ const FilterDouble = ({
           maxHeight={maxHeight}
           minWidth={minWidth}
           placement={placement}
+          popoverProps={popoverProps}
       >
           {children}
       </FiltersPopover>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
index 4d8b285f01..950575006b 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
@@ -33,6 +33,7 @@ const FilterSingle = ({
   maxHeight,
   minWidth,
   placement,
+  popoverProps,
   ...bgProps
 }: FilterSingleProps): React.ReactElement => {
   return (
@@ -52,6 +53,7 @@ const FilterSingle = ({
                 maxHeight={maxHeight}
                 minWidth={minWidth}
                 placement={placement}
+                popoverProps={popoverProps}
             >
             {children}
             </FiltersPopover>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
index 72ce03420a..362915bcc0 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode, useState } from 'react'
 
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
+import { GenericObject } from '../../types'
 
 type FiltersPopoverProps = {
   children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
@@ -9,8 +10,9 @@ type FiltersPopoverProps = {
   maxHeight?: string,
   minWidth?: string,
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
+  popoverProps?: GenericObject,
 }
-const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
+const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start", popoverProps }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -33,6 +35,7 @@ const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bott
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}
+        {...popoverProps}
     >
         <div className="pb-form">
           {typeof children === 'function'
diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
index 922324ed08..de66e3ed24 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
@@ -13,6 +13,7 @@ type ResultsCountProps = {
 const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
   
   const resultTitle = () => {
+    if (results == null) return null
     return (
       <TitleCount
           align="center"
@@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const justResults = () => {
+    if (results == null) return null
     return (
       <Caption
           className="filter-results"
@@ -35,13 +37,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const displayResultsCount = () => {
-    if (results && title) {
+    if (results != null && results >=0 && title) {
       return (
         <>
           {resultTitle()}
         </>
       )
-    } else if (results) {
+    } else if (results !=null && results >=0 ) {
       return (
         <>
           {justResults()}
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
index b670c057a5..f57bfa097d 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
           double
           minWidth="375px"
           onSortChange={SortingChangeCallback}
-          results={1}
+          results={0}
           sortOptions={{
             popularity: 'Popularity',
             // eslint-disable-next-line
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb
new file mode 100644
index 0000000000..da96315cce
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb
@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter_popover_props",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+    popover_props: { width: "250px" },
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
new file mode 100644
index 0000000000..d98bb00b04
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+const FilterPopoverProps = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
+  ]
+
+  const popoverProps = {
+    width: "250px"
+  }
+
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        popoverProps={popoverProps}
+        results={1}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+      {({ closePopover }) => (
+        <form>
+          <TextInput
+              label="Example Text Field"
+              placeholder="Enter Text"
+              {...props}
+          />
+          <Select
+              blankSelection="Select One..."
+              label="Example Collection Select"
+              name="Collection Select"
+              options={options}
+              {...props}
+          />
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
+    </Filter>
+  )
+}
+
+export default FilterPopoverProps
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
new file mode 100644
index 0000000000..2b57fbbd17
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
@@ -0,0 +1 @@
+This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popover_props` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover).
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
new file mode 100644
index 0000000000..b95652ba24
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
@@ -0,0 +1 @@
+This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover/react) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popoverProps` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover/react).
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml b/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml
index dce7ebf254..b38f20e5ee 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml
@@ -10,6 +10,7 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
+  - filter_popover_props: Popover Props
 
   react:
   - filter_default: Default
@@ -21,3 +22,5 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
+  - filter_popover_props: Popover Props
+
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/index.js b/playbook/app/pb_kits/playbook/pb_filter/docs/index.js
index b8ecc76ae8..a204c56a8d 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/index.js
@@ -7,3 +7,4 @@ export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
+export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb b/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb
index bf52558263..e29aef6667 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb
@@ -71,13 +71,13 @@
     <% end %>
 
     <% if object.template != "sort_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }.merge(object.popover_props)) do %>
         <%= content %>
       <% end %>
     <%end%>
 
     <% if object.template != "filter_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}.merge(object.popover_props)) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/filter.rb b/playbook/app/pb_kits/playbook/pb_filter/filter.rb
index 5eb81e25a5..0e0567cea6 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/filter.rb
+++ b/playbook/app/pb_kits/playbook/pb_filter/filter.rb
@@ -15,6 +15,8 @@ class Filter < Playbook::KitBase
       prop :placement, type: Playbook::Props::Enum,
                        values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                        default: "bottom-start"
+      prop :popover_props, type: Playbook::Props::HashProp,
+                           default: {}
 
       def classname
         generate_classname("pb_filter_kit").rstrip
diff --git a/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb
new file mode 100644
index 0000000000..e0702b1303
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb
@@ -0,0 +1,39 @@
+<%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>
+
+<script>
+    const loadingForm = document.querySelector(".pb_form_loading")
+    if (loadingForm) {
+        loadingForm.addEventListener("submit", function(event) {
+            event.preventDefault();
+
+            const submitButton = event['submitter'];
+            const cancelButton = event['target'].querySelector('button[type="reset"]');
+
+            if (submitButton) {
+                let currentClass = submitButton.className;
+                let newClass = currentClass.replace("_disabled_loading", "_enabled");
+
+                let cancelClass = cancelButton ? cancelButton.className : "";
+                let newCancelClass = cancelClass.replace("_disabled", "_enabled");
+
+                setTimeout(function() {
+                    submitButton.disabled = false;
+                    submitButton.className = currentClass;
+
+                    if (cancelButton) {
+                        cancelButton.disabled = false;
+                        cancelButton.className = cancelClass;
+                    }
+                }, 5000);
+            }
+        });
+    }
+</script>
+
diff --git a/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
new file mode 100644
index 0000000000..eef1260771
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
@@ -0,0 +1 @@
+Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled.
diff --git a/playbook/app/pb_kits/playbook/pb_form/docs/example.yml b/playbook/app/pb_kits/playbook/pb_form/docs/example.yml
index b04c3fdc51..19f029d494 100644
--- a/playbook/app/pb_kits/playbook/pb_form/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_form/docs/example.yml
@@ -3,3 +3,4 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
+  - form_form_with_loading: Default + Loading
diff --git a/playbook/app/pb_kits/playbook/pb_form/form.rb b/playbook/app/pb_kits/playbook/pb_form/form.rb
index dc7b2574dd..d931173922 100644
--- a/playbook/app/pb_kits/playbook/pb_form/form.rb
+++ b/playbook/app/pb_kits/playbook/pb_form/form.rb
@@ -7,6 +7,7 @@ class Form < ::Playbook::KitBase
                          type: Playbook::Props::Base
       prop :form_system_options, deprecated: "Use options instead",
                                  type: Playbook::Props::Base
+      prop :loading, type: Playbook::Props::Boolean, default: false
       prop :options, type: Playbook::Props::Base
       prop :validate, type: Playbook::Props::Boolean, default: false
 
@@ -22,6 +23,7 @@ def form_options
           aria: aria,
           class: classname,
           data: data,
+          loading: loading,
           validate: validate,
         }.merge(prop(:options) || prop(:form_system_options) || {})
       end
diff --git a/playbook/app/pb_kits/playbook/pb_form/formHelper.js b/playbook/app/pb_kits/playbook/pb_form/formHelper.js
new file mode 100644
index 0000000000..1c0fdb72d1
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_form/formHelper.js
@@ -0,0 +1,27 @@
+const formHelper = () => {
+    const loadingForm = document.querySelector(".pb_form_loading")
+    if (loadingForm) {
+        loadingForm.addEventListener("submit", function(event) {
+            const submitButton = event['submitter'];
+            const cancelButton = event['target'].querySelector('button[type="reset"]');
+
+            if (submitButton) {
+                let currentClass = submitButton.className;
+                let newClass = currentClass.replace("_enabled", "_disabled_loading");
+
+                let cancelClass = cancelButton ? cancelButton.className : "";
+                let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+                submitButton.disabled = true;
+                submitButton.className = newClass;
+
+                if (cancelButton) {
+                    cancelButton.disabled = true;
+                    cancelButton.className = newCancelClass;
+                }
+            }
+        });
+    }
+};
+
+export default formHelper;
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
index 911d22ab02..bb1c92e1f7 100644
--- a/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
@@ -1,14 +1,17 @@
-import React, { useState, useEffect, useRef } from "react"
-import classnames from "classnames"
-import { globalProps, GlobalProps } from "../utilities/globalProps"
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
-import Checkbox from "../pb_checkbox/_checkbox"
-import Radio from "../pb_radio/_radio"
-import Body from "../pb_body/_body"
-import Icon from "../pb_icon/_icon"
-import FormPill from "../pb_form_pill/_form_pill"
-import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
-import { cloneDeep } from "lodash"
+import React, { useState, useEffect, useRef } from "react";
+import classnames from "classnames";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps,
+} from "../utilities/props";
+import Icon from "../pb_icon/_icon";
+import FormPill from "../pb_form_pill/_form_pill";
+import { cloneDeep } from "lodash";
+import MultiLevelSelectOptions from "./multi_level_select_options";
+import MultiLevelSelectContext from "./context";
 
 import {
   getAncestorsOfUnchecked,
@@ -18,7 +21,7 @@ import {
   getDefaultCheckedItems,
   recursiveCheckParent,
   getExpandedItems,
-} from "./_helper_functions"
+} from "./_helper_functions";
 
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
@@ -30,9 +33,9 @@ type MultiLevelSelectProps = {
   inputName?: string
   name?: string
   returnAllSelected?: boolean
-  treeData?: { [key: string]: string }[]
+  treeData?: { [key: string]: string; }[] | any
   onSelect?: (prop: { [key: string]: any }) => void
-  selectedIds?: string[]
+  selectedIds?: string[] | any
   variant?: "multi" | "single"
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
@@ -52,126 +55,132 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     onSelect = () => null,
     selectedIds,
     variant = "multi",
+    children,
     pillColor = "primary"
   } = props
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_multi_level_select"),
     globalProps(props),
     className
-  )
+  );
 
-  const dropdownRef = useRef(null)
+  const dropdownRef = useRef(null);
 
   // State for whether dropdown is open or closed
-  const [isDropdownClosed, setIsDropdownClosed] = useState(true)
+  const [isDropdownClosed, setIsDropdownClosed] = useState(true);
   // State from onChange for textinput, to use for filtering to create typeahead
-  const [filterItem, setFilterItem] = useState("")
+  const [filterItem, setFilterItem] = useState("");
   // FormattedData with checked and parent_id added
-  const [formattedData, setFormattedData] = useState([])
+  const [formattedData, setFormattedData] = useState([]);
   // State for the return of returnAllSelected
-  const [returnedArray, setReturnedArray] = useState([])
+  const [returnedArray, setReturnedArray] = useState([]);
   // State for default return
-  const [defaultReturn, setDefaultReturn] = useState([])
+  const [defaultReturn, setDefaultReturn] = useState([]);
   // Get expanded items from treeData
-  const initialExpandedItems = getExpandedItems(treeData, selectedIds)
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
   // Initialize state with expanded items
-  const [expanded, setExpanded] = useState(initialExpandedItems)
+  const [expanded, setExpanded] = useState(initialExpandedItems);
 
   // Single Select specific state
   const [singleSelectedItem, setSingleSelectedItem] = useState({
     id: [],
     value: "",
-    item: []
-  })
+    item: [],
+  });
 
   const arrowDownElementId = `arrow_down_${id}`
   const arrowUpElementId = `arrow_up_${id}`
 
   const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
     if (!Array.isArray(tree)) {
-      return
+      return;
     }
     return tree.map((item: { [key: string]: any }) => {
-      item.checked = check
-      item.children = modifyRecursive(item.children, check)
-      return item
-    })
-  }
+      item.checked = check;
+      item.children = modifyRecursive(item.children, check);
+      return item;
+    });
+  };
 
-   // Function to map over data and add parent_id + depth property to each item
+  // Function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
     selectedIds: string[],
-    parent_id: string = null,
-    depth = 0,
+    parent_id: string | null = null,
+    depth = 0
   ) => {
     if (!Array.isArray(treeData)) {
-      return
+      return;
     }
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
-        checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
+        checked: Boolean(
+          selectedIds && selectedIds.length && selectedIds.includes(item.id)
+        ),
         parent_id,
         depth,
-      }
+      };
       if (newItem.children && newItem.children.length > 0) {
         const children =
           item.checked && !returnAllSelected
             ? modifyRecursive(item.children, true)
-            : item.children
+            : item.children;
         newItem.children = addCheckedAndParentProperty(
           children,
           selectedIds,
           newItem.id,
           depth + 1
-        )
+        );
       }
-      return newItem
-    })
-  }
+      return newItem;
+    });
+  };
 
   useEffect(() => {
     const formattedData = addCheckedAndParentProperty(
       treeData,
       variant === "single" ? [selectedIds?.[0]] : selectedIds
-    )
+    );
 
-    setFormattedData(formattedData)
+    setFormattedData(formattedData);
 
     if (variant === "single") {
       // No selectedIds, reset state
       if (selectedIds?.length === 0 || !selectedIds?.length) {
-        setSingleSelectedItem({ id: [], value: "", item: []})
+        setSingleSelectedItem({ id: [], value: "", item: [] });
       } else {
         // If there is a selectedId but no current item, set the selectedItem
         if (selectedIds?.length !== 0 && !singleSelectedItem.value) {
-          const selectedItem = filterFormattedDataById(formattedData, selectedIds[0])
+          const selectedItem = filterFormattedDataById(
+            formattedData,
+            selectedIds[0]
+          );
 
           if (!selectedItem.length) {
-            setSingleSelectedItem({ id: [], value: "", item: []})
+            setSingleSelectedItem({ id: [], value: "", item: [] });
           } else {
-            const { id, value } = selectedItem[0]
-            setSingleSelectedItem({ id: [id], value, item: selectedItem})
+            const { id, value } = selectedItem[0];
+            setSingleSelectedItem({ id: [id], value, item: selectedItem });
           }
         }
       }
     }
-  }, [treeData, selectedIds])
+  }, [treeData, selectedIds]);
 
   useEffect(() => {
     if (returnAllSelected) {
-      setReturnedArray(getCheckedItems(formattedData))
+      setReturnedArray(getCheckedItems(formattedData));
     } else if (variant === "single") {
-      setDefaultReturn(singleSelectedItem.item)
+      setDefaultReturn(singleSelectedItem.item);
     } else {
-      setDefaultReturn(getDefaultCheckedItems(formattedData))
+      setDefaultReturn(getDefaultCheckedItems(formattedData));
     }
-  }, [formattedData])
+  }, [formattedData]);
 
   useEffect(() => {
     // Function to handle clicks outside the dropdown
@@ -184,16 +193,31 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       ) {
         setIsDropdownClosed(true)
       }
-    }
+    };
     // Attach the event listener
-    window.addEventListener("click", handleClickOutside)
+    window.addEventListener("click", handleClickOutside);
     // Clean up the event listener on unmount
     return () => {
-      window.removeEventListener("click", handleClickOutside)
-    }
-  }, [])
-
+      window.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
 
+  useEffect(() => {
+    if (id) {
+      // Attach the clear function to the window, scoped by the id
+      (window as any)[`clearMultiLevelSelect_${id}`] = () => {
+        const resetData = modifyRecursive(formattedData, false);
+        setFormattedData(resetData);
+        setReturnedArray([]);
+        setDefaultReturn([]);
+        setSingleSelectedItem({ id: [], value: "", item: [] });
+        onSelect([]);
+      };
+      return () => {
+        delete (window as any)[`clearMultiLevelSelect_${id}`];
+      };
+    }
+  }, [formattedData, id, onSelect]);
 
   // Iterate over tree, find item and set checked or unchecked
   const modifyValue = (
@@ -202,69 +226,67 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     check: boolean
   ) => {
     if (!Array.isArray(tree)) {
-      return
+      return;
     }
     return tree.map((item: any) => {
-      if (item.id != id) item.children = modifyValue(id, item.children, check)
+      if (item.id != id) item.children = modifyValue(id, item.children, check);
       else {
-        item.checked = check
+        item.checked = check;
 
         if (variant === "single") {
           // Single select: no children should be checked
-          item.children = modifyRecursive(item.children, !check)
+          item.children = modifyRecursive(item.children, !check);
         } else {
-          item.children = modifyRecursive(item.children, check)
+          item.children = modifyRecursive(item.children, check);
         }
       }
 
-      return item
-    })
-  }
+      return item;
+    });
+  };
 
   // Clone tree, check items + children
   const checkItem = (item: { [key: string]: any }) => {
-    const tree = cloneDeep(formattedData)
+    const tree = cloneDeep(formattedData);
     if (returnAllSelected) {
-      return modifyValue(item.id, tree, true)
+      return modifyValue(item.id, tree, true);
     } else {
-      const checkedTree = modifyValue(item.id, tree, true)
-      return recursiveCheckParent(item, checkedTree)
+      const checkedTree = modifyValue(item.id, tree, true);
+      return recursiveCheckParent(item, checkedTree);
     }
-  }
+  };
 
   // Clone tree, uncheck items + children
   const unCheckItem = (item: { [key: string]: any }) => {
-    const tree = cloneDeep(formattedData)
+    const tree = cloneDeep(formattedData);
     if (returnAllSelected) {
-      return modifyValue(item.id, tree, false)
+      return modifyValue(item.id, tree, false);
     } else {
-      const uncheckedTree = modifyValue(item.id, tree, false)
-      return getAncestorsOfUnchecked(uncheckedTree, item)
+      const uncheckedTree = modifyValue(item.id, tree, false);
+      return getAncestorsOfUnchecked(uncheckedTree, item);
     }
-  }
+  };
 
   // setFormattedData with proper properties
   const changeItem = (item: { [key: string]: any }, check: boolean) => {
-    const tree = check ? checkItem(item) : unCheckItem(item)
-    setFormattedData(tree)
+    const tree = check ? checkItem(item) : unCheckItem(item);
+    setFormattedData(tree);
 
-    return tree
-  }
-
- 
+    return tree;
+  };
 
   // Click event for x on form pill
   const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
     // Prevents the dropdown from closing when clicking on the pill
-    event.stopPropagation()
-    const updatedTree = changeItem(clickedItem, false)
+    event.stopPropagation();
+    const updatedTree = changeItem(clickedItem, false);
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
-      onSelect(getCheckedItems(updatedTree))
+      onSelect(getCheckedItems(updatedTree));
     } else {
-      onSelect(getDefaultCheckedItems(updatedTree))
+      onSelect(getDefaultCheckedItems(updatedTree));
     }
-  }
+  };
 
   // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
   const handleInputWrapperClick = (e: any) => {
@@ -272,163 +294,114 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
     ) {
-      return
+      return;
     }
-    setIsDropdownClosed(!isDropdownClosed)
-  }
+    setIsDropdownClosed(!isDropdownClosed);
+  };
 
   // Main function to handle any click inside dropdown
   const handledropdownItemClick = (e: any, check: boolean) => {
-    const clickedItem = e.target.parentNode.id
+    const clickedItem = e.target.parentNode.id;
     // Setting filterItem to "" will clear textinput and clear typeahead
-    setFilterItem("")
+    setFilterItem("");
 
-    const filtered = filterFormattedDataById(formattedData, clickedItem)
-    const updatedTree = changeItem(filtered[0], check)
+    const filtered = filterFormattedDataById(formattedData, clickedItem);
+    const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
-      onSelect(getCheckedItems(updatedTree))
+      onSelect(getCheckedItems(updatedTree));
     } else {
-      onSelect(getDefaultCheckedItems(updatedTree))
+      onSelect(getDefaultCheckedItems(updatedTree));
     }
-  }
+  };
 
   // Single select
-  const handleRadioButtonClick = (
-    e: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const { id, value: inputText } = e.target
+  const handleRadioButtonClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value: inputText } = e.target;
     // The radio button needs a unique ID, this grabs the ID before the hyphen
-    const selectedItemID = id.match(/^[^-]*/)[0]
+    const selectedItemID = id.match(/^[^-]*/)[0];
     // Reset tree checked state, triggering useEffect
-    const treeWithNoSelections = modifyRecursive(formattedData, false)
+    const treeWithNoSelections = modifyRecursive(formattedData, false);
     // Update tree with single selection
-    const treeWithSelectedItem = modifyValue(selectedItemID, treeWithNoSelections, true)
-    const selectedItem = filterFormattedDataById(treeWithSelectedItem, selectedItemID)
-
-    setFormattedData(treeWithSelectedItem)
-    setSingleSelectedItem({id: [selectedItemID], value: inputText, item: selectedItem})
+    const treeWithSelectedItem = modifyValue(
+      selectedItemID,
+      treeWithNoSelections,
+      true
+    );
+    const selectedItem = filterFormattedDataById(
+      treeWithSelectedItem,
+      selectedItemID
+    );
+
+    setFormattedData(treeWithSelectedItem);
+    setSingleSelectedItem({
+      id: [selectedItemID],
+      value: inputText,
+      item: selectedItem,
+    });
     // Reset the filter to always display dropdown options on click
-    setFilterItem("")
-    setIsDropdownClosed(true)
+    setFilterItem("");
+    setIsDropdownClosed(true);
 
-    onSelect(selectedItem)
+    onSelect(selectedItem);
   };
 
   // Single select: reset the tree state upon typing
   const handleRadioInputChange = (inputText: string) => {
-    modifyRecursive(formattedData, false)
-    setDefaultReturn([])
-    setSingleSelectedItem({id: [], value: inputText, item: []})
-    setFilterItem(inputText)
+    modifyRecursive(formattedData, false);
+    setDefaultReturn([]);
+    setSingleSelectedItem({ id: [], value: inputText, item: [] });
+    setFilterItem(inputText);
   };
 
-  const isTreeRowExpanded = (item: any) => expanded.indexOf(item.id) > -1
+  const isTreeRowExpanded = (item: any) => expanded.indexOf(item.id) > -1;
 
   // Handle click on chevron toggles in dropdown
   const handleToggleClick = (id: string, event: React.MouseEvent) => {
-    event.stopPropagation()
-    const clickedItem = filterFormattedDataById(formattedData, id)
+    event.stopPropagation();
+    const clickedItem = filterFormattedDataById(formattedData, id);
     if (clickedItem) {
-      let expandedArray = [...expanded]
-      const itemExpanded = isTreeRowExpanded(clickedItem[0])
+      let expandedArray = [...expanded];
+      const itemExpanded = isTreeRowExpanded(clickedItem[0]);
 
       if (itemExpanded)
-        expandedArray = expandedArray.filter((i) => i != clickedItem[0].id)
-      else expandedArray.push(clickedItem[0].id)
+        expandedArray = expandedArray.filter((i) => i != clickedItem[0].id);
+      else expandedArray.push(clickedItem[0].id);
 
-      setExpanded(expandedArray)
+      setExpanded(expandedArray);
     }
-  }
+  };
 
   const itemsSelectedLength = () => {
-    let items
+    let items;
     if (returnAllSelected && returnedArray && returnedArray.length) {
-      items = returnedArray.length
+      items = returnedArray.length;
     } else if (!returnAllSelected && defaultReturn && defaultReturn.length) {
-      items = defaultReturn.length
+      items = defaultReturn.length;
     }
-    return items
-  }
+    return items;
+  };
 
   // Rendering formattedData to UI based on typeahead
-  const renderNestedOptions = (items: { [key: string]: any }[]) => {
-    return (
-      <ul>
-        {Array.isArray(items) &&
-          items.map((item: { [key: string]: any }) => {
-            return (
-              <div key={item.id}>
-                <li
-                    className={"dropdown_item"}
-                    data-name={item.id}
-                >
-                  <div className="dropdown_item_checkbox_row">
-                    { !item.parent_id && !item.children ? null :
-                        <div
-                            key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
-                        >
-                          <CircleIconButton
-                              className={
-                                item.children && item.children.length > 0
-                                  ? ""
-                                  : "toggle_icon"
-                              }
-                              icon={
-                                isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
-                              }
-                              onClick={(event: any) =>
-                                handleToggleClick(item.id, event)
-                              }
-                              variant="link"
-                          />
-                        </div>
-                    }
-                    { variant === "single" ? (
-                      item.hideRadio ? (
-                        <Body>{item.label}</Body>
-                      ) :
-                      <Radio
-                          checked={item.checked}
-                          id={`${item.id}-${item.label}`}
-                          label={item.label}
-                          name={inputName}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
-                            handleRadioButtonClick(e)
-                          )}
-                          padding={item.children ? 'none' : 'xs'}
-                          type="radio"
-                          value={item.label}
-                      />
-                    ) : (
-                      <Checkbox
-                          id={item.id}
-                          text={item.label}
-                      >
-                        <input
-                            checked={item.checked}
-                            name={item.label}
-                            onChange={(e) => {
-                              handledropdownItemClick(e, !item.checked)
-                            }}
-                            type="checkbox"
-                            value={item.label}
-                        />
-                      </Checkbox>
-                    )}
-                  </div>
-                  {isTreeRowExpanded(item) &&
-                    item.children &&
-                    item.children.length > 0 &&
-                    (variant === "single" || !filterItem) && ( // Show children if expanded is true
-                      <div>{renderNestedOptions(item.children)}</div>
-                    )}
-                </li>
-              </div>
-            )
-          })}
-      </ul>
-    )
-  }
+  const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
+    const hasOptionsChild = React.Children.toArray(props.children).some(
+      (child: any) => child.type === MultiLevelSelect.Options
+    );
+
+    if (hasOptionsChild) {
+      return React.Children.map(props.children, (child) => {
+        if (child.type === MultiLevelSelect.Options) {
+          return React.cloneElement(child, { items });
+        }
+        return null;
+      });
+    } else {
+      // If no children, use the default rendering
+      return (
+        <MultiLevelSelectOptions items={items} />
+      );
+    }
+  };
+
 
   return (
     <div
@@ -438,12 +411,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         className={classes}
         id={id}
     >
-      <div
-          className="wrapper"
+      <MultiLevelSelectContext.Provider value={{
+          variant,
+          inputName,
+          renderNestedOptions,
+          isTreeRowExpanded,
+          handleToggleClick,
+          handleRadioButtonClick,
+          handledropdownItemClick,
+          filterItem,
+      }}>
+      <div className="wrapper" 
           ref={dropdownRef}
       >
-        <div
-            className="input_wrapper"
+        <div className="input_wrapper" 
             onClick={handleInputWrapperClick}
         >
           <div className="input_inner_container">
@@ -509,15 +490,17 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
             <input
                 id="multiselect_input"
-                onChange={(e) =>{
+                onChange={(e) => {
                   variant === "single"
                     ? handleRadioInputChange(e.target.value)
-                    : setFilterItem(e.target.value)
+                    : setFilterItem(e.target.value);
                 }}
                 onClick={() => setIsDropdownClosed(false)}
                 placeholder={
                   inputDisplay === "none" && itemsSelectedLength()
-                    ? `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? "item" : "items"} selected`
+                    ? `${itemsSelectedLength()} ${
+                        itemsSelectedLength() === 1 ? "item" : "items"
+                      } selected`
                     : "Start typing..."
                 }
                 value={singleSelectedItem.value || filterItem}
@@ -546,15 +529,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         </div>
 
         <div className={`dropdown_menu ${isDropdownClosed ? "close" : "open"}`}>
-          {renderNestedOptions(
-            filterItem
-              ? findByFilter(formattedData, filterItem)
-              : formattedData
-          )}
+            {renderNestedOptions(
+              filterItem ? findByFilter(formattedData, filterItem) : formattedData
+            )}
         </div>
       </div>
+      </MultiLevelSelectContext.Provider>
     </div>
-  )
-}
+  );
+};
+
+MultiLevelSelect.Options = MultiLevelSelectOptions;
 
-export default MultiLevelSelect
\ No newline at end of file
+export default MultiLevelSelect;
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx
new file mode 100644
index 0000000000..b974b5ef6b
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const MultiLevelSelectContext = createContext<any>({});
+
+export default MultiLevelSelectContext;
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
index e364900c70..cb2be03263 100644
--- a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
@@ -87,4 +87,4 @@ const MultiLevelSelectDefault = (props) => {
   )
 };
 
-export default MultiLevelSelectDefault;
+export default MultiLevelSelectDefault;
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
new file mode 100644
index 0000000000..c8959a350d
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
@@ -0,0 +1,93 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-reset-example",
+    name: "my_array",
+    tree_data: treeData,
+    return_all_selected: true
+}) %>
+
+<%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
+
+
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
+
+    exampleResetButton.addEventListener("click", () => {
+        clearMultiLevelSelectById('multi-level-select-reset-example');
+      });
+    function clearMultiLevelSelectById(id) {
+      const clearFunction = window[`clearMultiLevelSelect_${id}`];
+      if (clearFunction) {
+        clearFunction();
+      } else {
+        console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
+      }
+    }
+  })
+</script>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
new file mode 100644
index 0000000000..bfe15aa20f
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
@@ -0,0 +1 @@
+In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work. 
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
new file mode 100644
index 0000000000..8d1f7d4b4a
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
@@ -0,0 +1,105 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+import Badge from "../../pb_badge/_badge";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        status: "active",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            status: "active",
+            variant: "primary",
+
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+                status: "Inactive",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        status: "Inactive",
+        variant: "error",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectWithChildren = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-with-children"
+          onSelect={(selectedNodes) =>
+            console.log("Selected Items", selectedNodes)
+          }
+          treeData={treeData}
+          {...props}
+      >
+        <MultiLevelSelect.Options>
+        {(item) => (
+          <Badge 
+              marginLeft="sm"
+              text={item.status} 
+              variant={item.status === "active" ? "success" : "warning"} 
+          />
+        )}
+        </MultiLevelSelect.Options>
+      </MultiLevelSelect>
+    </div>
+  );
+};
+
+export default MultiLevelSelectWithChildren;
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
new file mode 100644
index 0000000000..d0aeb8d340
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
@@ -0,0 +1 @@
+The MultiLevelSelect also provides a subcomponent structure which can be used to render children to the right of the Checkboxes and their labels. As seen in the code snippet below, these children have access to the current item being iterated over which can be used for conditional rendering.
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
new file mode 100644
index 0000000000..a6c03f7859
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
@@ -0,0 +1,106 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+import Badge from "../../pb_badge/_badge";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        status: "active",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            status: "active",
+            variant: "primary",
+
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+                status: "Inactive",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        status: "Inactive",
+        variant: "error",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectWithChildrenWithRadios = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-with-children"
+          onSelect={(selectedNodes) =>
+            console.log("Selected Items", selectedNodes)
+          }
+          treeData={treeData}
+          variant="single"
+          {...props}
+      >
+        <MultiLevelSelect.Options>
+          {(item) => (
+            <Badge 
+                marginLeft="sm"
+                text={item.status} 
+                variant={item.status === "active" ? "success" : "warning"} 
+            />
+          )}
+        </MultiLevelSelect.Options>
+      </MultiLevelSelect>
+    </div>
+  );
+};
+
+export default MultiLevelSelectWithChildrenWithRadios;
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
new file mode 100644
index 0000000000..b4f8fbc2a6
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
@@ -0,0 +1 @@
+The MultiLevelSelect subcomponent structure is also available in the 'Single Select' variant. In this variant, the children will be rendered to the right of the Radios and their labels. 
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
index c232dee812..09f50945e4 100644
--- a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
@@ -7,6 +7,7 @@ examples:
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
+  - multi_level_select_reset: Reset Selection
 
   react:
   - multi_level_select_default: Default
@@ -15,3 +16,6 @@ examples:
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids_react: Selected Ids
   - multi_level_select_color: With Pills (Custom Color)
+  - multi_level_select_with_children: Checkboxes With Children
+  - multi_level_select_with_children_with_radios: Single Select With Children
+
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/index.js b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/index.js
index 6b8be4ec17..7c3e1fd0fc 100644
--- a/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/index.js
@@ -4,3 +4,5 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
 export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
+export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
+export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx b/playbook/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx
new file mode 100644
index 0000000000..c9a0c4e208
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx
@@ -0,0 +1,149 @@
+import React, {useContext} from "react";
+import classnames from "classnames";
+import MultiLevelSelectContext from "./context";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps,
+} from "../utilities/props";
+import Checkbox from "../pb_checkbox/_checkbox";
+import Radio from "../pb_radio/_radio";
+import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button";
+import Body from "../pb_body/_body";
+
+type MultiLevelSelectOptionsProps = {
+  aria?: { [key: string]: string },
+  children?: React.ReactNode | ((item: any) => React.ReactNode),
+  className?: string,
+  dark?: boolean,
+  data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+} & GlobalProps;
+
+const MultiLevelSelectOptions = ({
+  children,
+  items,
+  ...props
+}: MultiLevelSelectOptionsProps) => {
+const {
+  variant,
+  inputName,
+  renderNestedOptions,
+  isTreeRowExpanded,
+  handleToggleClick,
+  handleRadioButtonClick,
+  handledropdownItemClick,
+  filterItem,
+} = useContext(MultiLevelSelectContext)
+
+const {
+  aria = {},
+  className,
+  data = {},
+  htmlOptions = {},
+} = props;
+
+const ariaProps = buildAriaProps(aria);
+const dataProps = buildDataProps(data);
+const htmlProps = buildHtmlProps(htmlOptions);
+const classes = classnames(
+  buildCss("pb_multi_level_select_options"),
+  globalProps(props),
+  className
+);
+
+  return (
+    <ul
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+    >
+      {Array.isArray(items) &&
+        items.map((item: { [key: string]: any }) => {
+          return (
+            <div key={item.id}>
+              <li className={"dropdown_item"} 
+                  data-name={item.id}
+              >
+                <div className="dropdown_item_checkbox_row">
+                  {!item.parent_id && !item.children ? null : (
+                    <div
+                        key={
+                          isTreeRowExpanded(item)
+                            ? "chevron-down"
+                            : "chevron-right"
+                        }
+                    >
+                      <CircleIconButton
+                          className={
+                            item.children && item.children.length > 0
+                              ? ""
+                              : "toggle_icon"
+                          }
+                          icon={
+                            isTreeRowExpanded(item)
+                              ? "chevron-down"
+                              : "chevron-right"
+                          }
+                          onClick={(event: React.MouseEvent) =>
+                            handleToggleClick(item.id, event)
+                          }
+                          variant="link"
+                      />
+                    </div>
+                  )}
+                  {variant === "single" ? (
+                    item.hideRadio ? (
+                      <Body>{item.label}</Body>
+                    ) : (
+                      <Radio
+                          checked={item.checked}
+                          id={`${item.id}-${item.label}`}
+                          label={item.label}
+                          name={inputName}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            handleRadioButtonClick(e)
+                          }
+                          padding={item.children ? "none" : "xs"}
+                          type="radio"
+                          value={item.label}
+                      />
+                    )
+                  ) : (
+                    <Checkbox id={item.id} 
+                        text={item.label}
+                    >
+                        <input
+                            checked={item.checked}
+                            name={item.label}
+                            onChange={(e) => {
+                              handledropdownItemClick(e, !item.checked);
+                            }}
+                            type="checkbox"
+                            value={item.label}
+                        />
+                    </Checkbox>
+                  )}
+                  {/* Render children next to the checkbox */}
+                  {children && (
+                    typeof children === "function" ? children(item) : children
+                  )}
+                </div>
+                {isTreeRowExpanded(item) &&
+                  item.children &&
+                  item.children.length > 0 &&
+                  (variant === "single" || !filterItem) && (
+                    <div>{renderNestedOptions(item.children)}</div>
+                  )}
+              </li>
+            </div>
+          );
+        })}
+    </ul>
+  );
+};
+
+export default MultiLevelSelectOptions;
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss
index d1ed6e11ab..c083ee2de7 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss
@@ -3,6 +3,76 @@
 @import "../tokens/opacity";
 @import "../pb_avatar/avatar";
 
+$sizes: (
+  "avatar": ("sm": 38px, "md": 60px, "lg": 80px, "xl": 100px),
+  "first-item-double": ("sm": 20px, "md": 32px, "lg": 44px, "xl": 56px),
+  "first-item-triple": ("sm": 16px, "md": 24px, "lg": 32px, "xl": 44px),
+  "first-item-quadruple": ("sm": 16px, "md": 28px, "lg": 36px, "xl": 44px),
+  "second-item-double": ("sm": 12px, "md": 16px, "lg": 20px, "xl": 24px),
+  "second-item-triple": ("sm": 12px, "md": 20px, "lg": 24px, "xl": 32px),
+  "second-item-quadruple": ("sm": 12px, "md": 20px, "lg": 28px, "xl": 32px),
+  "third-item-triple": ("sm": 10px, "md": 16px, "lg": 20px, "xl": 24px),
+  "third-item-quadruple": ("sm": 10px, "md": 16px, "lg": 24px, "xl": 24px),
+  "fourth-item": ("sm": 8px, "md": 12px, "lg": 16px, "xl": 16px)
+);
+
+$positions: (
+  "second-item-double": (
+    "sm": ("top": null, "bottom": 5px, "right": 4px, "left": null),
+    "md": ("top": null, "bottom": 10px, "right": 8px, "left": null),
+    "lg": ("top": 46px, "bottom": null, "right": 12px, "left": null),
+    "xl": ("top": 58px, "bottom": null, "right": 14px, "left": null)
+  ),
+  "second-item-triple": (
+    "sm": ("top": 12px, "bottom": null, "right": 2px, "left": null),
+    "md": ("top": 24px, "bottom": null, "right": 5px, "left": null),
+    "lg": ("top": 32px, "bottom": null, "right": 9px, "left": null),
+    "xl": ("top": 41px, "bottom": null, "right": 11px, "left": null)
+  ),
+  "second-item-quadruple": (
+    "sm": ("top": null, "bottom": 9px, "right": 4px, "left": null),
+    "md": ("top": 24px, "bottom": null, "right": 5px, "left": null),
+    "lg": ("top": 31px, "bottom": null, "right": 6px, "left": null),
+    "xl": ("top": 43px, "bottom": null, "right": 9px, "left": null)
+  ),
+  "third-item-triple": (
+    "sm": ("top": null, "bottom": 3px, "right": null, "left": 11px),
+    "md": ("top": null, "bottom": 6px, "right": null, "left": 16px),
+    "lg": ("top": null, "bottom": 10px, "right": null, "left": 23px),
+    "xl": ("top": null, "bottom": 13px, "right": null, "left": 27px)
+  ),
+  "third-item-quadruple": (
+    "sm": ("top": null, "bottom": 3px, "right": null, "left": 9px),
+    "md": ("top": null, "bottom": 5px, "right": null, "left": 15px),
+    "lg": ("top": null, "bottom": 7px, "right": null, "left": 20px),
+    "xl": ("top": null, "bottom": 11px, "right": null, "left": 27px)
+  ),
+  "fourth-item": (
+    "sm": ("top": 5px, "bottom": null, "right": 6px, "left": null),
+    "md": ("top": 7px, "bottom": null, "right": 12px, "left": null),
+    "lg": ("top": 9px, "bottom": null, "right": 16px, "left": null),
+    "xl": ("top": 16px, "bottom": null, "right": 24px, "left": null)
+  ),
+  "first-item-double": (
+    "sm": ("top": 4px, "bottom": null, "right": null, "left": 3px),
+    "md": ("top": 6px, "bottom": null, "right": null, "left": 8px),
+    "lg": ("top": 8px, "bottom": null, "right": null, "left": 8px),
+    "xl": ("top": 10px, "bottom": null, "right": null, "left": 10px)
+  ),
+  "first-item-triple": (
+    "sm": ("top": 4px, "bottom": null, "right": null, "left": 4px),
+    "md": ("top": 7px, "bottom": null, "right": null, "left": 7px),
+    "lg": ("top": 10px, "bottom": null, "right": null, "left": 10px),
+    "xl": ("top": 12px, "bottom": null, "right": null, "left": 12px)
+  ),
+  "first-item-quadruple": (
+    "sm": ("top": 5px, "bottom": null, "right": null, "left": 3px),
+    "md": ("top": 7px, "bottom": null, "right": null, "left": 5px),
+    "lg": ("top": 9px, "bottom": null, "right": null, "left": 7px),
+    "xl": ("top": 16px, "bottom": null, "right": null, "left": 10px)
+  )
+);
+
 @mixin avatar-size($size) {
   height: $size;
   width: $size;
@@ -27,8 +97,8 @@
   $stacked_size: 18px;
   $max_to_display: 1, 2;
   display: inline-flex;
-  width: $container_size;
-  height: $container_size;
+  width: 28px;
+  height: 28px;
   flex-basis: $container_size;
   position: relative;
   flex-shrink: 0;
@@ -48,7 +118,7 @@
     }
   }
   &[class*=_single] .pb_multiple_users_stacked_item {
-    @include avatar-size($container_size);
+    @include avatar-size(28px);
   }
   [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
     @include position((bottom: 0, right: 0));
@@ -71,72 +141,106 @@
     color: transparent;
   }
 
-  &[class*=_bubble] {
-    @include avatar-size($bubble_container_size);
-    background-color: $bg_light;
-    border-radius: 50%;
-
-    &.dark {
-      background-color: $card_dark;
-    }
-    
-    [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
-      &.dark {
-        .avatar_wrapper {
-          border: $border_size solid $border_dark;
-        }
-      }
-    }
-
-    [class^=pb_avatar_kit] {
-      &.first_item {
-        @include position((top: 4px, left: 3px));
-        @include avatar-size(20px);
-
-        &.triple_bubble {
-          @include position((top: 4px, left: 4px));
-          @include avatar-size(16px);
+  // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
+  @each $size_name, $size_value in $avatar-sizes {
+      &[class*=_bubble_][class*=_size_#{$size_name}] {
+        // Set bubble container size based on the class
+        $bubble_container_size: $size_value;
+        $container_size: $size_value;
+  
+        // Apply the bubble container size
+        @include avatar-size($bubble_container_size);
+        width: $bubble_container_size;
+        height: $bubble_container_size;
+        flex-basis: $bubble_container_size;
+  
+        background-color: $bg_light;
+        border-radius: 50%;
+  
+        &.dark {
+          background-color: $card_dark;
         }
-
-        &.quadruple_bubble {
-          @include position((top: 5px, left: 3px));
-          @include avatar-size(16px);
-        }
-      }
-
-      &.second_item {
-        @include position((bottom: 5px, right: 4px));
-        @include avatar-size(12px);
-
-        &.triple_bubble {
-          @include position((top: 13px, right: 2px));
+  
+        [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
+          @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
+  
+          &.dark {
+            .avatar_wrapper {
+              border: $border_size solid $border_dark;
+            }
+          }
+  
+          .avatar_wrapper {
+            border: $border_size solid $white;
+          }
         }
-
-        &.quadruple_bubble {
-          @include position((bottom: 9px, right: 4px));
+  
+        [class^=pb_avatar_kit] {
+          // First Item
+          &.first_item {
+            @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
+            @include avatar-size(map-get(map-get($sizes, 'first-item-double'), $size_name));
+        
+            &.double_bubble {
+              @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'first-item-double'), $size_name));
+            }
+        
+            &.triple_bubble {
+              @include position(map-get(map-get($positions, 'first-item-triple'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'first-item-triple'), $size_name));
+            }
+        
+            &.quadruple_bubble {
+              @include position(map-get(map-get($positions, 'first-item-quadruple'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'first-item-quadruple'), $size_name));
+            }
+          }
+        
+          // Second Item
+          &.second_item {
+            @include position(map-get(map-get($positions, 'second-item-double'), $size_name));
+        
+            &.double_bubble {
+              @include position(map-get(map-get($positions, 'second-item-double'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'second-item-double'), $size_name));
+            }
+        
+            &.triple_bubble {
+              @include position(map-get(map-get($positions, 'second-item-triple'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'second-item-triple'), $size_name));
+            }
+        
+            &.quadruple_bubble {
+              @include position(map-get(map-get($positions, 'second-item-quadruple'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'second-item-quadruple'), $size_name));
+            }
+          }
+        
+          // Third Item
+          &.third_item {
+            @include position(map-get(map-get($positions, 'third-item-triple'), $size_name));
+            @include avatar-size(map-get(map-get($sizes, 'third-item-triple'), $size_name));
+        
+            &.quadruple_bubble {
+              @include position(map-get(map-get($positions, 'third-item-quadruple'), $size_name));
+              @include avatar-size(map-get(map-get($sizes, 'third-item-quadruple'), $size_name));
+            }
+          }
+        
+          // Fourth Item
+          &.fourth_item {
+            @include position(map-get(map-get($positions, 'fourth-item'), $size_name));
+            @include avatar-size(map-get(map-get($sizes, 'fourth-item'), $size_name));
+          }
         }
-      }
-
-      &.third_item {
-        @include position((bottom: 3px, left: 11px));
-        @include avatar-size(10px);
-
-        &.quadruple_bubble {
-          @include position((bottom: 3px, left: 9px));
+        
+        &[class*=_single_bubble] {
+          [class^=pb_avatar_kit].first_item {
+            @include position((top: 0, left: 0));
+            @include avatar-size($bubble_container_size);
+          }
         }
       }
-
-      &.fourth_item {
-        @include position((top: 5px, right: 6px));
-        @include avatar-size(8px);
-      }
-    }
-  }
-
-  &[class*=_single_bubble] {
-    [class^=pb_avatar_kit].first_item {
-      @include position((top: 0, left: 0));
-      @include avatar-size($bubble_container_size);
     }
   }
-}
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js
index c347044725..37c7e10af3 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js
@@ -81,7 +81,7 @@ const MultipleUsersStackedSingleBubble = () => {
 test('should have a single bubble', () => {
     render(<MultipleUsersStackedSingleBubble />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble")
+    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble_size_sm")
 
     const firstItem = kit.querySelector('.first_item');
     expect(firstItem).toBeInTheDocument();
@@ -113,7 +113,7 @@ const MultipleUsersStackedDoubleBubble = () => {
 test('should have a double bubble', () => {
     render(<MultipleUsersStackedDoubleBubble />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
+    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
 
     const firstItem = kit.querySelector('.first_item');
     expect(firstItem).toBeInTheDocument();
@@ -153,7 +153,7 @@ const MultipleUsersStackedTripleBubble = () => {
 test('should have a triple bubble', () => {
     render(<MultipleUsersStackedTripleBubble />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
+    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
 
     const firstItem = kit.querySelector('.first_item');
     expect(firstItem).toBeInTheDocument();
@@ -208,7 +208,7 @@ const MultipleUsersStackedQuadrupleBubble = () => {
 test('should have a quadruple bubble', () => {
     render(<MultipleUsersStackedQuadrupleBubble />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
+    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
 
     const firstItem = kit.querySelector('.first_item');
     expect(firstItem).toBeInTheDocument();
@@ -224,4 +224,4 @@ test('should have a quadruple bubble', () => {
 
     const fourthItem = kit.querySelector('.fourth_item');
     expect(fourthItem).toBeInTheDocument();
-})
\ No newline at end of file
+})
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx
index 1d71b974a5..79ab5d83ed 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx
@@ -14,6 +14,7 @@ type MultipleUsersStackedProps = {
   data?: { [key: string]: string },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  size?: "md" | "lg" | "sm" | "xl" 
   users: Array<{ [key: string]: string }>,
   variant: "default" | "bubble",
 }
@@ -27,14 +28,17 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     htmlOptions = {},
     id,
     users,
+    size = "sm",
     variant = "default",
   } = props
 
   const moreThanTwo = users.length > 2
   const onlyOne = users.length == 1
   const isBubble = variant === "bubble"
+  const doubleBubble = isBubble && users.length === 2
   const tripleBubble = isBubble && users.length === 3
   const quadrupleBubble = isBubble && users.length > 3
+  const sizeClass = isBubble ? `size_${size}` : ""  
   const displayCount = () => {
     return moreThanTwo ? 1 : users.length
   }
@@ -43,17 +47,19 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss(
     'pb_multiple_users_stacked_kit',
-    { single: onlyOne, bubble: isBubble }), globalProps(props), className)
+    { single: onlyOne, bubble: isBubble }, sizeClass),
+    globalProps(props),
+    className)
 
   const firstUser = () => {
     return users.slice(0, 1).map((userObject, index) => {
       return (
         <Avatar
             {...userObject}
-            className={`pb_multiple_users_stacked_item first_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
+            className={`pb_multiple_users_stacked_item first_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
             dark={dark}
             key={index}
-            size={isBubble ? "sm" : "xs"}
+            size={isBubble ? "md" : "xs"}
         />
       )
     })
@@ -65,10 +71,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         return (
           <Avatar
               {...userObject}
-              className={`pb_multiple_users_stacked_item second_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
+              className={`pb_multiple_users_stacked_item second_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
               dark={dark}
               key={index}
-              size="xs"
+              size={isBubble ? "md" : "xs"}
           />
         )
       })
@@ -81,10 +87,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         return (
           <Avatar
               {...userObject}
-              className={`pb_multiple_users_stacked_item third_item${quadrupleBubble ? " quadruple_bubble" : ""}`}
+              className={`pb_multiple_users_stacked_item third_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
               dark={dark}
               key={index}
-              size="xs"
+              size="md"
           />
         )
       })
@@ -97,10 +103,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         return (
           <Avatar
               {...userObject}
-              className="pb_multiple_users_stacked_item fourth_item"
+              className="pb_multiple_users_stacked_item fourth_item quadruple_bubble"
               dark={dark}
               key={index}
-              size="xs"
+              size="md"
           />
         )
       })
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
new file mode 100644
index 0000000000..f73fa21ee2
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
@@ -0,0 +1,336 @@
+<%= pb_rails("title", props: {size: 4, text: "S", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      variant: "bubble",
+      size: "sm",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "sm",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+        size: "sm",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: { 
+      size: "sm",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
+
+
+
+<%= pb_rails("title", props: {size: 4, text: "M", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "md",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "md",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+    <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+      <%= pb_rails("multiple_users_stacked", props: {
+        size: "md",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "md",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
+
+
+
+<%= pb_rails("title", props: {size: 4, text: "L", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "lg",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "lg",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+      <%= pb_rails("multiple_users_stacked", props: {
+        size: "lg",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "lg",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
+
+
+<%= pb_rails("title", props: {size: 4, text: "XL", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "xl",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "xl",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+      <%= pb_rails("multiple_users_stacked", props: {
+        size: "xl",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "xl",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
new file mode 100644
index 0000000000..531f6e2de5
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import Flex from '../../pb_flex/_flex'
+import Title from '../../pb_title/_title'
+import MultipleUsersStacked from '../_multiple_users_stacked'
+
+const MultipleUsersStackedSize = (props) => {
+  const sizes = [
+    { label: 'S', size: 'sm' },
+    { label: 'M', size: 'md' },
+    { label: 'L', size: 'lg' },
+    { label: 'XL', size: 'xl' },
+  ]
+
+  const usersList = [
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+    ],
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+      {
+        name: 'Lucille Sanchez',
+        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+      },
+    ],
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+      {
+        name: 'Lucille Sanchez',
+        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+      },
+      {
+        name: 'Beverly Reyes',
+        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+      },
+    ],
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+      {
+        name: 'Lucille Sanchez',
+        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+      },
+      {
+        name: 'Beverly Reyes',
+        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+      },
+      {
+        name: 'Keith Craig',
+        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+      },
+      {
+        name: 'Alicia Cooper',
+        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+      },
+    ],
+  ]
+
+  return (
+    <>
+      {sizes.map(({ label, size }) => (
+        <Flex key={size}
+            orientation="column"
+        >
+          <Title paddingTop='sm' >{label}</Title>
+          <Flex>
+            {usersList.map((users, index) => (
+              <Flex key={index}
+                  paddingRight='sm'
+              >
+                <MultipleUsersStacked
+                    size={size}
+                    users={users}
+                    variant="bubble"
+                    {...props}
+                />
+              </Flex>
+            ))}
+          </Flex>
+          <br />
+        </Flex>
+      ))}
+    </>
+  )
+}
+
+export default MultipleUsersStackedSize
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
index fde4f3211b..18b2112af3 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
@@ -3,11 +3,13 @@ examples:
   rails:
   - multiple_users_stacked_default: Default
   - multiple_users_stacked_bubble: Bubble
+  - multiple_users_stacked_size: Sizes
 
 
   react:
   - multiple_users_stacked_default: Default
   - multiple_users_stacked_bubble: Bubble
+  - multiple_users_stacked_size: Sizes
 
   swift: 
   - multiple_users_stacked_default_swift: Default
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js
index ec6c88a5e4..936773f536 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js
@@ -1,2 +1,3 @@
 export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
 export { default as MultipleUsersStackedBubble } from './_multiple_users_stacked_bubble.jsx'
+export { default as MultipleUsersStackedSize } from './_multiple_users_stacked_size.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb
index 1b004c88e9..3b94e94e71 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb
@@ -1,5 +1,15 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("avatar", props: object.users[0].merge({size: object.bubble ? "sm" : "xs", classname: "pb_multiple_users_stacked_item first_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}", dark: object.dark}) ) %>
+  <%= pb_rails(
+    "avatar",
+    props: object.users[0].merge({
+      classname: "pb_multiple_users_stacked_item first_item" +
+                 (object.double_bubble ? " double_bubble" : "") +
+                 (object.triple_bubble ? " triple_bubble" : "") +
+                 (object.quadruple_bubble ? " quadruple_bubble" : ""),
+      dark: object.dark,
+      size: 'xs'          
+    })
+  ) %>
 
   <% unless object.only_one %>
     <% if object.more_than_two && !object.bubble %>
@@ -8,14 +18,26 @@
         text: "+#{object.users.count - object.display_count}",
         variant: "primary",
         rounded: true,
-        classname: "pb_multiple_users_stacked_item second_item" }) %>
+        classname: "pb_multiple_users_stacked_item second_item"
+      }) %>
     <% elsif object.bubble %>
-      <% object.users.slice(1,3).each_with_index do |item, idx| %>
-        <%= pb_rails("avatar", props: item.merge({size: "xs", classname: "pb_multiple_users_stacked_item #{idx == 0 ? "second_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : idx == 1 ? "third_item#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : "fourth_item"}", dark: object.dark}) ) %>
+      <% object.users.slice(1, 3).each_with_index do |item, idx| %>
+        <%= pb_rails(
+          "avatar",
+          props: item.merge({
+            classname: object.bubble_classname(idx),
+            dark: object.dark
+          })
+        ) %>
       <% end %>
     <% else %>
-      <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", classname: "pb_multiple_users_stacked_item second_item", dark: object.dark}) ) %>
+      <%= pb_rails(
+        "avatar",
+        props: object.users[1].merge({
+          classname: "pb_multiple_users_stacked_item second_item",
+          dark: object.dark
+        })
+      ) %>
     <% end %>
   <% end %>
-
 <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb
index cc1be5dbf6..d7d7762dbf 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb
@@ -4,6 +4,9 @@ module Playbook
   module PbMultipleUsersStacked
     class MultipleUsersStacked < Playbook::KitBase
       prop :users, type: Playbook::Props::HashArray, required: true
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md lg xl],
+                  default: "sm"
 
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default bubble],
@@ -25,6 +28,10 @@ def bubble
         variant == "bubble"
       end
 
+      def double_bubble
+        bubble && users.count === 2
+      end
+
       def triple_bubble
         bubble && users.count === 3
       end
@@ -33,8 +40,31 @@ def quadruple_bubble
         bubble && users.count > 3
       end
 
+      def size_class
+        "size_#{size}" if bubble
+      end
+
       def classname
-        generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class)
+        generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class, size_class)
+      end
+
+      def bubble_classname(index)
+        base_classname = "pb_multiple_users_stacked_item "
+
+        case index
+        when 0
+          base_classname += "second_item"
+          base_classname += " double_bubble" if double_bubble
+          base_classname += " triple_bubble" if triple_bubble
+          base_classname += " quadruple_bubble" if quadruple_bubble
+        when 1
+          base_classname += "third_item"
+          base_classname += " quadruple_bubble" if quadruple_bubble
+        else
+          base_classname += "fourth_item"
+        end
+
+        base_classname
       end
 
     private
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
index 6b6adfb8ba..bee3513ac0 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
@@ -5,7 +5,54 @@ $transform-rotate-deg: 135deg;
 $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
 
+:root {
+  --iti-arrow-padding: #{$space_xs};
+  --iti-spacer-horizontal: #{$space_sm};
+  --iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
+  --iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
+  --iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
+  --iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
+}
+
 .pb_phone_number_input {
+  .iti {
+    width: 100%;
+  }
+
+  .iti__flag {
+    margin-right: 6px;
+  }
+
+  .iti__a11y-text {
+    display: none;
+  }
+
+  .iti__selected-dial-code {
+    font-family: $font_family_base;
+    font-size: $font_base;
+    line-height: 1.5;
+    letter-spacing: $lspace_normal;
+    font-weight: $regular;
+    font-style: normal;
+    text-rendering: optimizeLegibility;
+    -moz-font-feature-settings: "liga" on;
+    color: $charcoal;
+  }
+
+  // iti-spacer-horizontal's default is 8px, or $space_xs 
+  .iti__country-list .iti__flag, .iti__country-name {
+    margin-right: $space_xs;
+  }
+  [dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
+    margin-right: 0;
+    margin-left: $space_xs;
+  }
+
+  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
+  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
+    background-color: transparent;
+  }
+
   input::placeholder {
     color: $focus_input_light;
   }
@@ -15,13 +62,13 @@ $flag-min-resolution: 192dpi;
       border-color: $primary !important;
     }
 
-    .iti__selected-flag:focus-visible {
+    .iti__selected-country:focus-visible {
       outline-style: none;
     }
   }
 
   .iti__country {
-    padding: 5px 10px 5px 16px;
+    padding: 5px $space_xs 5px $space_sm;
     transition: $transition_default;
   }
 
@@ -29,8 +76,23 @@ $flag-min-resolution: 192dpi;
     border-bottom: 1px solid $border_light !important;  
   }
 
-  .iti__selected-flag {
-    padding: 0 $space_xxs 0 $space_sm;
+  .iti__selected-country-primary {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .iti__flag {
+      margin-right: 0;
+    }
+  }
+
+  .iti__selected-country {
+    position: absolute;
+    top: 0;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    border-width: 0;
     border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
@@ -51,24 +113,24 @@ $flag-min-resolution: 192dpi;
     }
   }
 
-  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
-    background-color: $focus_input_light;
-  }
-
-  .iti__flag-container:hover + .text_input {
+  .iti__country-container:hover + .text_input {
     background-color: $focus_input_light;
   }
 
   .iti__flag {
-    background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
+    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
     border-radius: 1px;
   }
 
-  .iti--separate-dial-code {
-    width: 100%;
+  .iti__flag.iti__globe {
+    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
+    background-position: center;
+    height: 16px;
+    width: 16px;
+    background-size: 16px 16px;
   }
 
-  .iti--separate-dial-code .iti__selected-flag {
+  .iti--show-flags .iti__selected-country {
     background-color: rgba($white, $opacity_1);
   }
 
@@ -136,10 +198,12 @@ $flag-min-resolution: 192dpi;
   .iti__dropdown-content {
     border-radius: $space_xs; 
     border: 1px solid $border_light !important;
+    position: absolute;
+    top: 100%;
   }
 
   &.dark {
-    .iti--allow-dropdown .iti__flag-container {
+    .iti--allow-dropdown .iti__country-container {
       background-color: rgba($white, 0);
 
       &:hover {
@@ -149,13 +213,13 @@ $flag-min-resolution: 192dpi;
           background-color: rgba($white, 0.15);
         }
 
-        .iti__selected-flag {
+        .iti__selected-country {
           background-color: rgba($white, 0);
         }
       }
     }
 
-    .iti__selected-flag {
+    .iti__selected-country {
       background-color: rgba($white, 0);
       color: $white;
     }
@@ -196,11 +260,15 @@ $flag-min-resolution: 192dpi;
         background-color: rgba($white, 0.025) !important;
       }
     }
-  }
 
+    .iti__selected-dial-code {
+      color: $white;
+    }
+  }
+  
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
-      background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
+      background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
     }
   }
 }
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
index ecdf4f4f7b..5cd84a7d14 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
@@ -1,8 +1,7 @@
 import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
 import classnames from 'classnames'
 
-import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/js/utils.js'
+import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -50,7 +49,7 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  const countryData = window.intlTelInputGlobals.getCountryData()
+  const countryData = intlTelInput.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
     const country = countryData[i]
@@ -214,14 +213,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(formatAllCountries, [])
 
+  // If an initial country is not specified, the "globe" icon will show
+  // Always set a country
+  const fallbackCountry =
+    preferredCountries.length > 0 ? preferredCountries[0] :
+      onlyCountries.length > 0 ? onlyCountries.sort()[0] :
+        "af";
+
   useEffect(() => {
     const telInputInit = intlTelInput(inputRef.current, {
       separateDialCode: true,
-      preferredCountries,
+      countryOrder: preferredCountries,
       allowDropdown: !disabled,
       autoInsertDialCode: false,
-      initialCountry,
-      onlyCountries
+      initialCountry: initialCountry || fallbackCountry,
+      onlyCountries,
+      countrySearch: false,
+      fixDropdownWidth: false,
+      formatAsYouType: false,
     })
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md b/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
index 01c22b7dff..0613f5ed32 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
@@ -1 +1 @@
-Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.
+Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss b/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss
index 1140d3a9bd..933dbe8e32 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss
@@ -1,4 +1,29 @@
 /* @import "intl-tel-input/build/css/intlTelInput.css"; */
+// If you update intl-tel-input, make sure to move this over
+// And replace the relative path urls with the images from unpkg
+:root {
+  --iti-hover-color: rgba(0, 0, 0, 0.05);
+  --iti-border-color: #ccc;
+  --iti-dialcode-color: #999;
+  --iti-dropdown-bg: white;
+  --iti-spacer-horizontal: 8px;
+  --iti-flag-height: 12px;
+  --iti-flag-width: 16px;
+  --iti-border-width: 1px;
+  --iti-arrow-height: 4px;
+  --iti-arrow-width: 6px;
+  --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
+  --iti-arrow-padding: 6px;
+  --iti-arrow-color: #555;
+  --iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
+  --iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
+  --iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
+  --iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
+  --iti-flag-sprite-width: 3904px;
+  --iti-flag-sprite-height: 12px;
+  --iti-mobile-popup-margin: 30px;
+}
+
 .iti {
   position: relative;
   display: inline-block;
@@ -12,70 +37,95 @@
 .iti__v-hide {
   visibility: hidden;
 }
+.iti__a11y-text {
+  width: 1px;
+  height: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  position: absolute;
+}
 .iti input.iti__tel-input,
 .iti input.iti__tel-input[type=text],
 .iti input.iti__tel-input[type=tel] {
   position: relative;
   z-index: 0;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding-right: 36px;
-  margin-right: 0;
+  margin: 0 !important;
 }
-.iti__flag-container {
+.iti__country-container {
   position: absolute;
   top: 0;
   bottom: 0;
-  right: 0;
-  padding: 1px;
+  padding: var(--iti-border-width);
 }
-.iti__selected-flag {
+.iti__selected-country {
   z-index: 1;
   position: relative;
   display: flex;
   align-items: center;
   height: 100%;
-  padding: 0 6px 0 8px;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  border-radius: 0;
+  font-weight: inherit;
+  line-height: inherit;
+  text-decoration: none;
+}
+.iti__selected-country-primary {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
 }
 .iti__arrow {
-  margin-left: 6px;
+  margin-left: var(--iti-arrow-padding);
   width: 0;
   height: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-top: 4px solid #555;
+  border-left: var(--iti-triangle-border) solid transparent;
+  border-right: var(--iti-triangle-border) solid transparent;
+  border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
 }
 [dir=rtl] .iti__arrow {
-  margin-right: 6px;
+  margin-right: var(--iti-arrow-padding);
   margin-left: 0;
 }
 .iti__arrow--up {
   border-top: none;
-  border-bottom: 4px solid #555;
+  border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
 }
 .iti__dropdown-content {
+  border-radius: 3px;
+  background-color: var(--iti-dropdown-bg);
+}
+.iti--inline-dropdown .iti__dropdown-content {
   position: absolute;
   z-index: 2;
-  margin-left: -1px;
+  margin-top: 3px;
+  margin-left: calc(var(--iti-border-width) * -1);
+  border: var(--iti-border-width) solid var(--iti-border-color);
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
-  background-color: white;
-  border: 1px solid #ccc;
-  max-height: 200px;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-}
-.iti__dropdown-content--dropup {
-  bottom: 100%;
-  margin-bottom: -1px;
 }
 .iti__search-input {
   width: 100%;
   border-width: 0;
+  border-radius: 3px;
+}
+.iti__search-input + .iti__country-list {
+  border-top: 1px solid var(--iti-border-color);
 }
 .iti__country-list {
   list-style: none;
   padding: 0;
   margin: 0;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.iti--inline-dropdown .iti__country-list {
+  max-height: 185px;
 }
 .iti--flexible-dropdown-width .iti__country-list {
   white-space: nowrap;
@@ -85,90 +135,45 @@
     white-space: normal;
   }
 }
-.iti__flag-box {
-  display: inline-block;
-  width: 20px;
-}
-.iti__divider {
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-  border-bottom: 1px solid #ccc;
-}
 .iti__country {
   display: flex;
   align-items: center;
-  padding: 5px 10px;
+  padding: 8px var(--iti-spacer-horizontal);
   outline: none;
 }
 .iti__dial-code {
-  color: #999;
+  color: var(--iti-dialcode-color);
 }
 .iti__country.iti__highlight {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti__flag-box, .iti__country-name {
-  margin-right: 6px;
+  background-color: var(--iti-hover-color);
 }
-[dir=rtl] .iti__flag-box, [dir=rtl] .iti__country-name {
-  margin-right: 0;
-  margin-left: 6px;
-}
-.iti--allow-dropdown input.iti__tel-input,
-.iti--allow-dropdown input.iti__tel-input[type=text],
-.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
-.iti--separate-dial-code input.iti__tel-input[type=text],
-.iti--separate-dial-code input.iti__tel-input[type=tel] {
-  padding-right: 6px;
-  padding-left: 52px;
-  margin-left: 0;
+.iti__country-list .iti__flag, .iti__country-name {
+  margin-right: var(--iti-spacer-horizontal);
 }
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
-  padding-right: 52px;
-  padding-left: 6px;
+[dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
   margin-right: 0;
+  margin-left: var(--iti-spacer-horizontal);
 }
-.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
-  right: auto;
-  left: 0;
-}
-[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--separate-dial-code .iti__flag-container {
-  right: 0;
-  left: auto;
-}
-.iti--allow-dropdown .iti__flag-container:hover {
+.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button {
   cursor: pointer;
 }
-.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
-  cursor: default;
+.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
+.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
+  background-color: var(--iti-hover-color);
 }
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
-  background-color: transparent;
+.iti .iti__selected-dial-code {
+  margin-left: 4px;
 }
-.iti--separate-dial-code .iti__selected-flag {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
-  margin-left: 6px;
-}
-[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
+[dir=rtl] .iti .iti__selected-dial-code {
   margin-left: 0;
-  margin-right: 6px;
+  margin-right: 4px;
 }
 .iti--container {
-  position: absolute;
+  position: fixed;
   top: -1000px;
   left: -1000px;
   z-index: 1060;
-  padding: 1px;
+  padding: var(--iti-border-width);
 }
 .iti--container:hover {
   cursor: pointer;
@@ -181,15 +186,14 @@
   left: 0;
   right: 0;
   position: fixed;
-  padding: 30px;
+  padding: var(--iti-mobile-popup-margin);
   display: flex;
   flex-direction: column;
-  justify-content: center;
-}
-.iti--fullscreen-popup.iti--container.iti--country-search {
   justify-content: flex-start;
 }
 .iti--fullscreen-popup .iti__dropdown-content {
+  display: flex;
+  flex-direction: column;
   max-height: 100%;
   position: relative;
 }
@@ -199,1092 +203,1006 @@
 }
 
 .iti__flag {
-  width: 20px;
-}
-.iti__flag.iti__be {
-  width: 18px;
-}
-.iti__flag.iti__ch {
-  width: 15px;
-}
-.iti__flag.iti__mc {
-  width: 19px;
-}
-.iti__flag.iti__ne {
-  width: 18px;
-}
-.iti__flag.iti__np {
-  width: 13px;
-}
-.iti__flag.iti__va {
-  width: 15px;
-}
-@media (min-resolution: 2x) {
-  .iti__flag {
-    background-size: 5762px 15px;
-  }
-}
-.iti__flag.iti__ac {
-  height: 10px;
-  background-position: 0px 0px;
-}
-.iti__flag.iti__ad {
-  height: 14px;
-  background-position: -22px 0px;
-}
-.iti__flag.iti__ae {
-  height: 10px;
-  background-position: -44px 0px;
-}
-.iti__flag.iti__af {
-  height: 14px;
-  background-position: -66px 0px;
-}
-.iti__flag.iti__ag {
-  height: 14px;
-  background-position: -88px 0px;
-}
-.iti__flag.iti__ai {
-  height: 10px;
-  background-position: -110px 0px;
-}
-.iti__flag.iti__al {
-  height: 15px;
-  background-position: -132px 0px;
-}
-.iti__flag.iti__am {
-  height: 10px;
-  background-position: -154px 0px;
-}
-.iti__flag.iti__ao {
-  height: 14px;
-  background-position: -176px 0px;
-}
-.iti__flag.iti__aq {
-  height: 14px;
-  background-position: -198px 0px;
-}
-.iti__flag.iti__ar {
-  height: 13px;
-  background-position: -220px 0px;
-}
-.iti__flag.iti__as {
-  height: 10px;
-  background-position: -242px 0px;
-}
-.iti__flag.iti__at {
-  height: 14px;
-  background-position: -264px 0px;
-}
-.iti__flag.iti__au {
-  height: 10px;
-  background-position: -286px 0px;
-}
-.iti__flag.iti__aw {
-  height: 14px;
-  background-position: -308px 0px;
-}
-.iti__flag.iti__ax {
-  height: 13px;
-  background-position: -330px 0px;
-}
-.iti__flag.iti__az {
-  height: 10px;
-  background-position: -352px 0px;
-}
-.iti__flag.iti__ba {
-  height: 10px;
-  background-position: -374px 0px;
-}
-.iti__flag.iti__bb {
-  height: 14px;
-  background-position: -396px 0px;
+  --iti-flag-offset: 100px;
+  height: var(--iti-flag-height);
+  width: var(--iti-flag-width);
+  border-radius: 1px;
+  box-shadow: 0px 0px 1px 0px #888;
+  background-image: var(--iti-path-flags-1x);
+  background-repeat: no-repeat;
+  background-position: var(--iti-flag-offset) 0;
+  background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height);
 }
-.iti__flag.iti__bd {
-  height: 12px;
-  background-position: -418px 0px;
+
+.iti__ac {
+  --iti-flag-offset: 0px;
 }
-.iti__flag.iti__be {
-  height: 15px;
-  background-position: -440px 0px;
+
+.iti__ad {
+  --iti-flag-offset: -16px;
 }
-.iti__flag.iti__bf {
-  height: 14px;
-  background-position: -460px 0px;
+
+.iti__ae {
+  --iti-flag-offset: -32px;
 }
-.iti__flag.iti__bg {
-  height: 12px;
-  background-position: -482px 0px;
+
+.iti__af {
+  --iti-flag-offset: -48px;
 }
-.iti__flag.iti__bh {
-  height: 12px;
-  background-position: -504px 0px;
+
+.iti__ag {
+  --iti-flag-offset: -64px;
 }
-.iti__flag.iti__bi {
-  height: 12px;
-  background-position: -526px 0px;
+
+.iti__ai {
+  --iti-flag-offset: -80px;
 }
-.iti__flag.iti__bj {
-  height: 14px;
-  background-position: -548px 0px;
+
+.iti__al {
+  --iti-flag-offset: -96px;
 }
-.iti__flag.iti__bl {
-  height: 14px;
-  background-position: -570px 0px;
+
+.iti__am {
+  --iti-flag-offset: -112px;
 }
-.iti__flag.iti__bm {
-  height: 10px;
-  background-position: -592px 0px;
+
+.iti__ao {
+  --iti-flag-offset: -128px;
 }
-.iti__flag.iti__bn {
-  height: 10px;
-  background-position: -614px 0px;
+
+.iti__ar {
+  --iti-flag-offset: -144px;
 }
-.iti__flag.iti__bo {
-  height: 14px;
-  background-position: -636px 0px;
+
+.iti__as {
+  --iti-flag-offset: -160px;
 }
-.iti__flag.iti__bq {
-  height: 14px;
-  background-position: -658px 0px;
+
+.iti__at {
+  --iti-flag-offset: -176px;
 }
-.iti__flag.iti__br {
-  height: 14px;
-  background-position: -680px 0px;
+
+.iti__au {
+  --iti-flag-offset: -192px;
 }
-.iti__flag.iti__bs {
-  height: 10px;
-  background-position: -702px 0px;
+
+.iti__aw {
+  --iti-flag-offset: -208px;
 }
-.iti__flag.iti__bt {
-  height: 14px;
-  background-position: -724px 0px;
+
+.iti__ax {
+  --iti-flag-offset: -224px;
 }
-.iti__flag.iti__bv {
-  height: 15px;
-  background-position: -746px 0px;
+
+.iti__az {
+  --iti-flag-offset: -240px;
 }
-.iti__flag.iti__bw {
-  height: 14px;
-  background-position: -768px 0px;
+
+.iti__ba {
+  --iti-flag-offset: -256px;
 }
-.iti__flag.iti__by {
-  height: 10px;
-  background-position: -790px 0px;
+
+.iti__bb {
+  --iti-flag-offset: -272px;
 }
-.iti__flag.iti__bz {
-  height: 12px;
-  background-position: -812px 0px;
+
+.iti__bd {
+  --iti-flag-offset: -288px;
 }
-.iti__flag.iti__ca {
-  height: 10px;
-  background-position: -834px 0px;
+
+.iti__be {
+  --iti-flag-offset: -304px;
 }
-.iti__flag.iti__cc {
-  height: 10px;
-  background-position: -856px 0px;
+
+.iti__bf {
+  --iti-flag-offset: -320px;
 }
-.iti__flag.iti__cd {
-  height: 15px;
-  background-position: -878px 0px;
+
+.iti__bg {
+  --iti-flag-offset: -336px;
 }
-.iti__flag.iti__cf {
-  height: 14px;
-  background-position: -900px 0px;
+
+.iti__bh {
+  --iti-flag-offset: -352px;
 }
-.iti__flag.iti__cg {
-  height: 14px;
-  background-position: -922px 0px;
+
+.iti__bi {
+  --iti-flag-offset: -368px;
 }
-.iti__flag.iti__ch {
-  height: 15px;
-  background-position: -944px 0px;
+
+.iti__bj {
+  --iti-flag-offset: -384px;
 }
-.iti__flag.iti__ci {
-  height: 14px;
-  background-position: -961px 0px;
+
+.iti__bl {
+  --iti-flag-offset: -400px;
 }
-.iti__flag.iti__ck {
-  height: 10px;
-  background-position: -983px 0px;
+
+.iti__bm {
+  --iti-flag-offset: -416px;
 }
-.iti__flag.iti__cl {
-  height: 14px;
-  background-position: -1005px 0px;
+
+.iti__bn {
+  --iti-flag-offset: -432px;
 }
-.iti__flag.iti__cm {
-  height: 14px;
-  background-position: -1027px 0px;
+
+.iti__bo {
+  --iti-flag-offset: -448px;
 }
-.iti__flag.iti__cn {
-  height: 14px;
-  background-position: -1049px 0px;
+
+.iti__bq {
+  --iti-flag-offset: -464px;
 }
-.iti__flag.iti__co {
-  height: 14px;
-  background-position: -1071px 0px;
+
+.iti__br {
+  --iti-flag-offset: -480px;
 }
-.iti__flag.iti__cp {
-  height: 14px;
-  background-position: -1093px 0px;
+
+.iti__bs {
+  --iti-flag-offset: -496px;
 }
-.iti__flag.iti__cq {
-  height: 12px;
-  background-position: -1115px 0px;
+
+.iti__bt {
+  --iti-flag-offset: -512px;
 }
-.iti__flag.iti__cr {
-  height: 12px;
-  background-position: -1137px 0px;
+
+.iti__bw {
+  --iti-flag-offset: -528px;
 }
-.iti__flag.iti__cu {
-  height: 10px;
-  background-position: -1159px 0px;
+
+.iti__by {
+  --iti-flag-offset: -544px;
 }
-.iti__flag.iti__cv {
-  height: 12px;
-  background-position: -1181px 0px;
+
+.iti__bz {
+  --iti-flag-offset: -560px;
 }
-.iti__flag.iti__cw {
-  height: 14px;
-  background-position: -1203px 0px;
+
+.iti__ca {
+  --iti-flag-offset: -576px;
 }
-.iti__flag.iti__cx {
-  height: 10px;
-  background-position: -1225px 0px;
+
+.iti__cc {
+  --iti-flag-offset: -592px;
 }
-.iti__flag.iti__cy {
-  height: 14px;
-  background-position: -1247px 0px;
+
+.iti__cd {
+  --iti-flag-offset: -608px;
 }
-.iti__flag.iti__cz {
-  height: 14px;
-  background-position: -1269px 0px;
+
+.iti__cf {
+  --iti-flag-offset: -624px;
 }
-.iti__flag.iti__de {
-  height: 12px;
-  background-position: -1291px 0px;
+
+.iti__cg {
+  --iti-flag-offset: -640px;
 }
-.iti__flag.iti__dg {
-  height: 10px;
-  background-position: -1313px 0px;
+
+.iti__ch {
+  --iti-flag-offset: -656px;
 }
-.iti__flag.iti__dj {
-  height: 14px;
-  background-position: -1335px 0px;
+
+.iti__ci {
+  --iti-flag-offset: -672px;
 }
-.iti__flag.iti__dk {
-  height: 15px;
-  background-position: -1357px 0px;
+
+.iti__ck {
+  --iti-flag-offset: -688px;
 }
-.iti__flag.iti__dm {
-  height: 10px;
-  background-position: -1379px 0px;
+
+.iti__cl {
+  --iti-flag-offset: -704px;
 }
-.iti__flag.iti__do {
-  height: 14px;
-  background-position: -1401px 0px;
+
+.iti__cm {
+  --iti-flag-offset: -720px;
 }
-.iti__flag.iti__dz {
-  height: 14px;
-  background-position: -1423px 0px;
+
+.iti__cn {
+  --iti-flag-offset: -736px;
 }
-.iti__flag.iti__ea {
-  height: 14px;
-  background-position: -1445px 0px;
+
+.iti__co {
+  --iti-flag-offset: -752px;
 }
-.iti__flag.iti__ec {
-  height: 14px;
-  background-position: -1467px 0px;
+
+.iti__cr {
+  --iti-flag-offset: -768px;
 }
-.iti__flag.iti__ee {
-  height: 13px;
-  background-position: -1489px 0px;
+
+.iti__cu {
+  --iti-flag-offset: -784px;
 }
-.iti__flag.iti__eg {
-  height: 14px;
-  background-position: -1511px 0px;
+
+.iti__cv {
+  --iti-flag-offset: -800px;
 }
-.iti__flag.iti__eh {
-  height: 10px;
-  background-position: -1533px 0px;
+
+.iti__cw {
+  --iti-flag-offset: -816px;
 }
-.iti__flag.iti__er {
-  height: 10px;
-  background-position: -1555px 0px;
+
+.iti__cx {
+  --iti-flag-offset: -832px;
 }
-.iti__flag.iti__es {
-  height: 14px;
-  background-position: -1577px 0px;
+
+.iti__cy {
+  --iti-flag-offset: -848px;
 }
-.iti__flag.iti__et {
-  height: 10px;
-  background-position: -1599px 0px;
+
+.iti__cz {
+  --iti-flag-offset: -864px;
 }
-.iti__flag.iti__eu {
-  height: 14px;
-  background-position: -1621px 0px;
+
+.iti__de {
+  --iti-flag-offset: -880px;
 }
-.iti__flag.iti__ez {
-  height: 14px;
-  background-position: -1643px 0px;
+
+.iti__dj {
+  --iti-flag-offset: -896px;
 }
-.iti__flag.iti__fi {
-  height: 12px;
-  background-position: -1665px 0px;
+
+.iti__dk {
+  --iti-flag-offset: -912px;
 }
-.iti__flag.iti__fj {
-  height: 10px;
-  background-position: -1687px 0px;
+
+.iti__dm {
+  --iti-flag-offset: -928px;
 }
-.iti__flag.iti__fk {
-  height: 10px;
-  background-position: -1709px 0px;
+
+.iti__do {
+  --iti-flag-offset: -944px;
 }
-.iti__flag.iti__fm {
-  height: 11px;
-  background-position: -1731px 0px;
+
+.iti__dz {
+  --iti-flag-offset: -960px;
 }
-.iti__flag.iti__fo {
-  height: 15px;
-  background-position: -1753px 0px;
+
+.iti__ec {
+  --iti-flag-offset: -976px;
 }
-.iti__flag.iti__fr {
-  height: 14px;
-  background-position: -1775px 0px;
+
+.iti__ee {
+  --iti-flag-offset: -992px;
 }
-.iti__flag.iti__fx {
-  height: 14px;
-  background-position: -1797px 0px;
+
+.iti__eg {
+  --iti-flag-offset: -1008px;
 }
-.iti__flag.iti__ga {
-  height: 15px;
-  background-position: -1819px 0px;
+
+.iti__eh {
+  --iti-flag-offset: -1024px;
 }
-.iti__flag.iti__gb {
-  height: 10px;
-  background-position: -1841px 0px;
+
+.iti__er {
+  --iti-flag-offset: -1040px;
 }
-.iti__flag.iti__gd {
-  height: 12px;
-  background-position: -1863px 0px;
+
+.iti__es {
+  --iti-flag-offset: -1056px;
 }
-.iti__flag.iti__ge {
-  height: 14px;
-  background-position: -1885px 0px;
+
+.iti__et {
+  --iti-flag-offset: -1072px;
 }
-.iti__flag.iti__gf {
-  height: 14px;
-  background-position: -1907px 0px;
+
+.iti__fi {
+  --iti-flag-offset: -1088px;
 }
-.iti__flag.iti__gg {
-  height: 14px;
-  background-position: -1929px 0px;
+
+.iti__fj {
+  --iti-flag-offset: -1104px;
 }
-.iti__flag.iti__gh {
-  height: 14px;
-  background-position: -1951px 0px;
+
+.iti__fk {
+  --iti-flag-offset: -1120px;
 }
-.iti__flag.iti__gi {
-  height: 10px;
-  background-position: -1973px 0px;
+
+.iti__fm {
+  --iti-flag-offset: -1136px;
 }
-.iti__flag.iti__gl {
-  height: 14px;
-  background-position: -1995px 0px;
+
+.iti__fo {
+  --iti-flag-offset: -1152px;
 }
-.iti__flag.iti__gm {
-  height: 14px;
-  background-position: -2017px 0px;
+
+.iti__fr {
+  --iti-flag-offset: -1168px;
 }
-.iti__flag.iti__gn {
-  height: 14px;
-  background-position: -2039px 0px;
+
+.iti__ga {
+  --iti-flag-offset: -1184px;
 }
-.iti__flag.iti__gp {
-  height: 14px;
-  background-position: -2061px 0px;
+
+.iti__gb {
+  --iti-flag-offset: -1200px;
 }
-.iti__flag.iti__gq {
-  height: 14px;
-  background-position: -2083px 0px;
+
+.iti__gd {
+  --iti-flag-offset: -1216px;
 }
-.iti__flag.iti__gr {
-  height: 14px;
-  background-position: -2105px 0px;
+
+.iti__ge {
+  --iti-flag-offset: -1232px;
 }
-.iti__flag.iti__gs {
-  height: 10px;
-  background-position: -2127px 0px;
+
+.iti__gf {
+  --iti-flag-offset: -1248px;
 }
-.iti__flag.iti__gt {
-  height: 13px;
-  background-position: -2149px 0px;
+
+.iti__gg {
+  --iti-flag-offset: -1264px;
 }
-.iti__flag.iti__gu {
-  height: 11px;
-  background-position: -2171px 0px;
+
+.iti__gh {
+  --iti-flag-offset: -1280px;
 }
-.iti__flag.iti__gw {
-  height: 10px;
-  background-position: -2193px 0px;
+
+.iti__gi {
+  --iti-flag-offset: -1296px;
 }
-.iti__flag.iti__gy {
-  height: 12px;
-  background-position: -2215px 0px;
+
+.iti__gl {
+  --iti-flag-offset: -1312px;
 }
-.iti__flag.iti__hk {
-  height: 14px;
-  background-position: -2237px 0px;
+
+.iti__gm {
+  --iti-flag-offset: -1328px;
 }
-.iti__flag.iti__hm {
-  height: 10px;
-  background-position: -2259px 0px;
+
+.iti__gn {
+  --iti-flag-offset: -1344px;
 }
-.iti__flag.iti__hn {
-  height: 10px;
-  background-position: -2281px 0px;
+
+.iti__gp {
+  --iti-flag-offset: -1360px;
 }
-.iti__flag.iti__hr {
-  height: 10px;
-  background-position: -2303px 0px;
+
+.iti__gq {
+  --iti-flag-offset: -1376px;
 }
-.iti__flag.iti__ht {
-  height: 12px;
-  background-position: -2325px 0px;
+
+.iti__gr {
+  --iti-flag-offset: -1392px;
 }
-.iti__flag.iti__hu {
-  height: 10px;
-  background-position: -2347px 0px;
+
+.iti__gt {
+  --iti-flag-offset: -1408px;
 }
-.iti__flag.iti__ic {
-  height: 14px;
-  background-position: -2369px 0px;
+
+.iti__gu {
+  --iti-flag-offset: -1424px;
 }
-.iti__flag.iti__id {
-  height: 14px;
-  background-position: -2391px 0px;
+
+.iti__gw {
+  --iti-flag-offset: -1440px;
 }
-.iti__flag.iti__ie {
-  height: 10px;
-  background-position: -2413px 0px;
+
+.iti__gy {
+  --iti-flag-offset: -1456px;
 }
-.iti__flag.iti__il {
-  height: 15px;
-  background-position: -2435px 0px;
+
+.iti__hk {
+  --iti-flag-offset: -1472px;
 }
-.iti__flag.iti__im {
-  height: 10px;
-  background-position: -2457px 0px;
+
+.iti__hn {
+  --iti-flag-offset: -1488px;
 }
-.iti__flag.iti__in {
-  height: 14px;
-  background-position: -2479px 0px;
+
+.iti__hr {
+  --iti-flag-offset: -1504px;
 }
-.iti__flag.iti__io {
-  height: 10px;
-  background-position: -2501px 0px;
+
+.iti__ht {
+  --iti-flag-offset: -1520px;
 }
-.iti__flag.iti__iq {
-  height: 14px;
-  background-position: -2523px 0px;
+
+.iti__hu {
+  --iti-flag-offset: -1536px;
 }
-.iti__flag.iti__ir {
-  height: 12px;
-  background-position: -2545px 0px;
+
+.iti__id {
+  --iti-flag-offset: -1552px;
 }
-.iti__flag.iti__is {
-  height: 15px;
-  background-position: -2567px 0px;
+
+.iti__ie {
+  --iti-flag-offset: -1568px;
 }
-.iti__flag.iti__it {
-  height: 14px;
-  background-position: -2589px 0px;
+
+.iti__il {
+  --iti-flag-offset: -1584px;
 }
-.iti__flag.iti__je {
-  height: 12px;
-  background-position: -2611px 0px;
+
+.iti__im {
+  --iti-flag-offset: -1600px;
 }
-.iti__flag.iti__jm {
-  height: 10px;
-  background-position: -2633px 0px;
+
+.iti__in {
+  --iti-flag-offset: -1616px;
 }
-.iti__flag.iti__jo {
-  height: 10px;
-  background-position: -2655px 0px;
+
+.iti__io {
+  --iti-flag-offset: -1632px;
 }
-.iti__flag.iti__jp {
-  height: 14px;
-  background-position: -2677px 0px;
+
+.iti__iq {
+  --iti-flag-offset: -1648px;
 }
-.iti__flag.iti__ke {
-  height: 14px;
-  background-position: -2699px 0px;
+
+.iti__ir {
+  --iti-flag-offset: -1664px;
 }
-.iti__flag.iti__kg {
-  height: 12px;
-  background-position: -2721px 0px;
+
+.iti__is {
+  --iti-flag-offset: -1680px;
 }
-.iti__flag.iti__kh {
-  height: 13px;
-  background-position: -2743px 0px;
+
+.iti__it {
+  --iti-flag-offset: -1696px;
 }
-.iti__flag.iti__ki {
-  height: 10px;
-  background-position: -2765px 0px;
+
+.iti__je {
+  --iti-flag-offset: -1712px;
 }
-.iti__flag.iti__km {
-  height: 12px;
-  background-position: -2787px 0px;
+
+.iti__jm {
+  --iti-flag-offset: -1728px;
 }
-.iti__flag.iti__kn {
-  height: 14px;
-  background-position: -2809px 0px;
+
+.iti__jo {
+  --iti-flag-offset: -1744px;
 }
-.iti__flag.iti__kp {
-  height: 10px;
-  background-position: -2831px 0px;
+
+.iti__jp {
+  --iti-flag-offset: -1760px;
 }
-.iti__flag.iti__kr {
-  height: 14px;
-  background-position: -2853px 0px;
+
+.iti__ke {
+  --iti-flag-offset: -1776px;
 }
-.iti__flag.iti__kw {
-  height: 10px;
-  background-position: -2875px 0px;
+
+.iti__kg {
+  --iti-flag-offset: -1792px;
 }
-.iti__flag.iti__ky {
-  height: 10px;
-  background-position: -2897px 0px;
+
+.iti__kh {
+  --iti-flag-offset: -1808px;
 }
-.iti__flag.iti__kz {
-  height: 10px;
-  background-position: -2919px 0px;
+
+.iti__ki {
+  --iti-flag-offset: -1824px;
 }
-.iti__flag.iti__la {
-  height: 14px;
-  background-position: -2941px 0px;
+
+.iti__km {
+  --iti-flag-offset: -1840px;
 }
-.iti__flag.iti__lb {
-  height: 14px;
-  background-position: -2963px 0px;
+
+.iti__kn {
+  --iti-flag-offset: -1856px;
 }
-.iti__flag.iti__lc {
-  height: 10px;
-  background-position: -2985px 0px;
+
+.iti__kp {
+  --iti-flag-offset: -1872px;
 }
-.iti__flag.iti__li {
-  height: 12px;
-  background-position: -3007px 0px;
+
+.iti__kr {
+  --iti-flag-offset: -1888px;
 }
-.iti__flag.iti__lk {
-  height: 10px;
-  background-position: -3029px 0px;
+
+.iti__kw {
+  --iti-flag-offset: -1904px;
 }
-.iti__flag.iti__lr {
-  height: 11px;
-  background-position: -3051px 0px;
+
+.iti__ky {
+  --iti-flag-offset: -1920px;
 }
-.iti__flag.iti__ls {
-  height: 14px;
-  background-position: -3073px 0px;
+
+.iti__kz {
+  --iti-flag-offset: -1936px;
 }
-.iti__flag.iti__lt {
-  height: 12px;
-  background-position: -3095px 0px;
+
+.iti__la {
+  --iti-flag-offset: -1952px;
 }
-.iti__flag.iti__lu {
-  height: 12px;
-  background-position: -3117px 0px;
+
+.iti__lb {
+  --iti-flag-offset: -1968px;
 }
-.iti__flag.iti__lv {
-  height: 10px;
-  background-position: -3139px 0px;
+
+.iti__lc {
+  --iti-flag-offset: -1984px;
 }
-.iti__flag.iti__ly {
-  height: 10px;
-  background-position: -3161px 0px;
+
+.iti__li {
+  --iti-flag-offset: -2000px;
 }
-.iti__flag.iti__ma {
-  height: 14px;
-  background-position: -3183px 0px;
+
+.iti__lk {
+  --iti-flag-offset: -2016px;
 }
-.iti__flag.iti__mc {
-  height: 15px;
-  background-position: -3205px 0px;
+
+.iti__lr {
+  --iti-flag-offset: -2032px;
 }
-.iti__flag.iti__md {
-  height: 10px;
-  background-position: -3226px 0px;
+
+.iti__ls {
+  --iti-flag-offset: -2048px;
 }
-.iti__flag.iti__me {
-  height: 10px;
-  background-position: -3248px 0px;
+
+.iti__lt {
+  --iti-flag-offset: -2064px;
 }
-.iti__flag.iti__mf {
-  height: 14px;
-  background-position: -3270px 0px;
+
+.iti__lu {
+  --iti-flag-offset: -2080px;
 }
-.iti__flag.iti__mg {
-  height: 14px;
-  background-position: -3292px 0px;
+
+.iti__lv {
+  --iti-flag-offset: -2096px;
 }
-.iti__flag.iti__mh {
-  height: 11px;
-  background-position: -3314px 0px;
+
+.iti__ly {
+  --iti-flag-offset: -2112px;
 }
-.iti__flag.iti__mk {
-  height: 10px;
-  background-position: -3336px 0px;
+
+.iti__ma {
+  --iti-flag-offset: -2128px;
 }
-.iti__flag.iti__ml {
-  height: 14px;
-  background-position: -3358px 0px;
+
+.iti__mc {
+  --iti-flag-offset: -2144px;
 }
-.iti__flag.iti__mm {
-  height: 14px;
-  background-position: -3380px 0px;
+
+.iti__md {
+  --iti-flag-offset: -2160px;
 }
-.iti__flag.iti__mn {
-  height: 10px;
-  background-position: -3402px 0px;
+
+.iti__me {
+  --iti-flag-offset: -2176px;
 }
-.iti__flag.iti__mo {
-  height: 14px;
-  background-position: -3424px 0px;
+
+.iti__mf {
+  --iti-flag-offset: -2192px;
 }
-.iti__flag.iti__mp {
-  height: 10px;
-  background-position: -3446px 0px;
+
+.iti__mg {
+  --iti-flag-offset: -2208px;
 }
-.iti__flag.iti__mq {
-  height: 14px;
-  background-position: -3468px 0px;
+
+.iti__mh {
+  --iti-flag-offset: -2224px;
 }
-.iti__flag.iti__mr {
-  height: 14px;
-  background-position: -3490px 0px;
+
+.iti__mk {
+  --iti-flag-offset: -2240px;
 }
-.iti__flag.iti__ms {
-  height: 10px;
-  background-position: -3512px 0px;
+
+.iti__ml {
+  --iti-flag-offset: -2256px;
 }
-.iti__flag.iti__mt {
-  height: 14px;
-  background-position: -3534px 0px;
+
+.iti__mm {
+  --iti-flag-offset: -2272px;
 }
-.iti__flag.iti__mu {
-  height: 14px;
-  background-position: -3556px 0px;
+
+.iti__mn {
+  --iti-flag-offset: -2288px;
 }
-.iti__flag.iti__mv {
-  height: 14px;
-  background-position: -3578px 0px;
+
+.iti__mo {
+  --iti-flag-offset: -2304px;
 }
-.iti__flag.iti__mw {
-  height: 14px;
-  background-position: -3600px 0px;
+
+.iti__mp {
+  --iti-flag-offset: -2320px;
 }
-.iti__flag.iti__mx {
-  height: 12px;
-  background-position: -3622px 0px;
+
+.iti__mq {
+  --iti-flag-offset: -2336px;
 }
-.iti__flag.iti__my {
-  height: 10px;
-  background-position: -3644px 0px;
+
+.iti__mr {
+  --iti-flag-offset: -2352px;
 }
-.iti__flag.iti__mz {
-  height: 14px;
-  background-position: -3666px 0px;
+
+.iti__ms {
+  --iti-flag-offset: -2368px;
 }
-.iti__flag.iti__na {
-  height: 14px;
-  background-position: -3688px 0px;
+
+.iti__mt {
+  --iti-flag-offset: -2384px;
 }
-.iti__flag.iti__nc {
-  height: 10px;
-  background-position: -3710px 0px;
+
+.iti__mu {
+  --iti-flag-offset: -2400px;
 }
-.iti__flag.iti__ne {
-  height: 15px;
-  background-position: -3732px 0px;
+
+.iti__mv {
+  --iti-flag-offset: -2416px;
 }
-.iti__flag.iti__nf {
-  height: 10px;
-  background-position: -3752px 0px;
+
+.iti__mw {
+  --iti-flag-offset: -2432px;
 }
-.iti__flag.iti__ng {
-  height: 10px;
-  background-position: -3774px 0px;
+
+.iti__mx {
+  --iti-flag-offset: -2448px;
 }
-.iti__flag.iti__ni {
-  height: 12px;
-  background-position: -3796px 0px;
+
+.iti__my {
+  --iti-flag-offset: -2464px;
 }
-.iti__flag.iti__nl {
-  height: 14px;
-  background-position: -3818px 0px;
+
+.iti__mz {
+  --iti-flag-offset: -2480px;
 }
-.iti__flag.iti__no {
-  height: 15px;
-  background-position: -3840px 0px;
+
+.iti__na {
+  --iti-flag-offset: -2496px;
 }
-.iti__flag.iti__np {
-  height: 15px;
-  background-position: -3862px 0px;
+
+.iti__nc {
+  --iti-flag-offset: -2512px;
 }
-.iti__flag.iti__nr {
-  height: 10px;
-  background-position: -3877px 0px;
+
+.iti__ne {
+  --iti-flag-offset: -2528px;
 }
-.iti__flag.iti__nu {
-  height: 10px;
-  background-position: -3899px 0px;
+
+.iti__nf {
+  --iti-flag-offset: -2544px;
 }
-.iti__flag.iti__nz {
-  height: 10px;
-  background-position: -3921px 0px;
+
+.iti__ng {
+  --iti-flag-offset: -2560px;
 }
-.iti__flag.iti__om {
-  height: 10px;
-  background-position: -3943px 0px;
+
+.iti__ni {
+  --iti-flag-offset: -2576px;
 }
-.iti__flag.iti__pa {
-  height: 14px;
-  background-position: -3965px 0px;
+
+.iti__nl {
+  --iti-flag-offset: -2592px;
 }
-.iti__flag.iti__pe {
-  height: 14px;
-  background-position: -3987px 0px;
+
+.iti__no {
+  --iti-flag-offset: -2608px;
 }
-.iti__flag.iti__pf {
-  height: 14px;
-  background-position: -4009px 0px;
+
+.iti__np {
+  --iti-flag-offset: -2624px;
 }
-.iti__flag.iti__pg {
-  height: 15px;
-  background-position: -4031px 0px;
+
+.iti__nr {
+  --iti-flag-offset: -2640px;
 }
-.iti__flag.iti__ph {
-  height: 10px;
-  background-position: -4053px 0px;
+
+.iti__nu {
+  --iti-flag-offset: -2656px;
 }
-.iti__flag.iti__pk {
-  height: 14px;
-  background-position: -4075px 0px;
+
+.iti__nz {
+  --iti-flag-offset: -2672px;
 }
-.iti__flag.iti__pl {
-  height: 13px;
-  background-position: -4097px 0px;
+
+.iti__om {
+  --iti-flag-offset: -2688px;
 }
-.iti__flag.iti__pm {
-  height: 14px;
-  background-position: -4119px 0px;
+
+.iti__pa {
+  --iti-flag-offset: -2704px;
 }
-.iti__flag.iti__pn {
-  height: 10px;
-  background-position: -4141px 0px;
+
+.iti__pe {
+  --iti-flag-offset: -2720px;
 }
-.iti__flag.iti__pr {
-  height: 14px;
-  background-position: -4163px 0px;
+
+.iti__pf {
+  --iti-flag-offset: -2736px;
 }
-.iti__flag.iti__ps {
-  height: 10px;
-  background-position: -4185px 0px;
+
+.iti__pg {
+  --iti-flag-offset: -2752px;
 }
-.iti__flag.iti__pt {
-  height: 14px;
-  background-position: -4207px 0px;
+
+.iti__ph {
+  --iti-flag-offset: -2768px;
 }
-.iti__flag.iti__pw {
-  height: 13px;
-  background-position: -4229px 0px;
+
+.iti__pk {
+  --iti-flag-offset: -2784px;
 }
-.iti__flag.iti__py {
-  height: 11px;
-  background-position: -4251px 0px;
+
+.iti__pl {
+  --iti-flag-offset: -2800px;
 }
-.iti__flag.iti__qa {
-  height: 8px;
-  background-position: -4273px 0px;
+
+.iti__pm {
+  --iti-flag-offset: -2816px;
 }
-.iti__flag.iti__re {
-  height: 14px;
-  background-position: -4295px 0px;
+
+.iti__pr {
+  --iti-flag-offset: -2832px;
 }
-.iti__flag.iti__ro {
-  height: 14px;
-  background-position: -4317px 0px;
+
+.iti__ps {
+  --iti-flag-offset: -2848px;
 }
-.iti__flag.iti__rs {
-  height: 14px;
-  background-position: -4339px 0px;
+
+.iti__pt {
+  --iti-flag-offset: -2864px;
 }
-.iti__flag.iti__ru {
-  height: 14px;
-  background-position: -4361px 0px;
+
+.iti__pw {
+  --iti-flag-offset: -2880px;
 }
-.iti__flag.iti__rw {
-  height: 14px;
-  background-position: -4383px 0px;
+
+.iti__py {
+  --iti-flag-offset: -2896px;
 }
-.iti__flag.iti__sa {
-  height: 14px;
-  background-position: -4405px 0px;
+
+.iti__qa {
+  --iti-flag-offset: -2912px;
 }
-.iti__flag.iti__sb {
-  height: 10px;
-  background-position: -4427px 0px;
+
+.iti__re {
+  --iti-flag-offset: -2928px;
 }
-.iti__flag.iti__sc {
-  height: 10px;
-  background-position: -4449px 0px;
+
+.iti__ro {
+  --iti-flag-offset: -2944px;
 }
-.iti__flag.iti__sd {
-  height: 10px;
-  background-position: -4471px 0px;
+
+.iti__rs {
+  --iti-flag-offset: -2960px;
 }
-.iti__flag.iti__se {
-  height: 13px;
-  background-position: -4493px 0px;
+
+.iti__ru {
+  --iti-flag-offset: -2976px;
 }
-.iti__flag.iti__sg {
-  height: 14px;
-  background-position: -4515px 0px;
+
+.iti__rw {
+  --iti-flag-offset: -2992px;
 }
-.iti__flag.iti__sh {
-  height: 10px;
-  background-position: -4537px 0px;
+
+.iti__sa {
+  --iti-flag-offset: -3008px;
 }
-.iti__flag.iti__si {
-  height: 10px;
-  background-position: -4559px 0px;
+
+.iti__sb {
+  --iti-flag-offset: -3024px;
 }
-.iti__flag.iti__sj {
-  height: 15px;
-  background-position: -4581px 0px;
+
+.iti__sc {
+  --iti-flag-offset: -3040px;
 }
-.iti__flag.iti__sk {
-  height: 14px;
-  background-position: -4603px 0px;
+
+.iti__sd {
+  --iti-flag-offset: -3056px;
 }
-.iti__flag.iti__sl {
-  height: 14px;
-  background-position: -4625px 0px;
+
+.iti__se {
+  --iti-flag-offset: -3072px;
 }
-.iti__flag.iti__sm {
-  height: 15px;
-  background-position: -4647px 0px;
+
+.iti__sg {
+  --iti-flag-offset: -3088px;
 }
-.iti__flag.iti__sn {
-  height: 14px;
-  background-position: -4669px 0px;
+
+.iti__sh {
+  --iti-flag-offset: -3104px;
 }
-.iti__flag.iti__so {
-  height: 14px;
-  background-position: -4691px 0px;
+
+.iti__si {
+  --iti-flag-offset: -3120px;
 }
-.iti__flag.iti__sr {
-  height: 14px;
-  background-position: -4713px 0px;
+
+.iti__sj {
+  --iti-flag-offset: -3136px;
 }
-.iti__flag.iti__ss {
-  height: 10px;
-  background-position: -4735px 0px;
+
+.iti__sk {
+  --iti-flag-offset: -3152px;
 }
-.iti__flag.iti__st {
-  height: 10px;
-  background-position: -4757px 0px;
+
+.iti__sl {
+  --iti-flag-offset: -3168px;
 }
-.iti__flag.iti__su {
-  height: 10px;
-  background-position: -4779px 0px;
+
+.iti__sm {
+  --iti-flag-offset: -3184px;
 }
-.iti__flag.iti__sv {
-  height: 12px;
-  background-position: -4801px 0px;
+
+.iti__sn {
+  --iti-flag-offset: -3200px;
 }
-.iti__flag.iti__sx {
-  height: 14px;
-  background-position: -4823px 0px;
+
+.iti__so {
+  --iti-flag-offset: -3216px;
 }
-.iti__flag.iti__sy {
-  height: 14px;
-  background-position: -4845px 0px;
+
+.iti__sr {
+  --iti-flag-offset: -3232px;
 }
-.iti__flag.iti__sz {
-  height: 14px;
-  background-position: -4867px 0px;
+
+.iti__ss {
+  --iti-flag-offset: -3248px;
 }
-.iti__flag.iti__ta {
-  height: 10px;
-  background-position: -4889px 0px;
+
+.iti__st {
+  --iti-flag-offset: -3264px;
 }
-.iti__flag.iti__tc {
-  height: 10px;
-  background-position: -4911px 0px;
+
+.iti__sv {
+  --iti-flag-offset: -3280px;
 }
-.iti__flag.iti__td {
-  height: 14px;
-  background-position: -4933px 0px;
+
+.iti__sx {
+  --iti-flag-offset: -3296px;
 }
-.iti__flag.iti__tf {
-  height: 14px;
-  background-position: -4955px 0px;
+
+.iti__sy {
+  --iti-flag-offset: -3312px;
 }
-.iti__flag.iti__tg {
-  height: 13px;
-  background-position: -4977px 0px;
+
+.iti__sz {
+  --iti-flag-offset: -3328px;
 }
-.iti__flag.iti__th {
-  height: 14px;
-  background-position: -4999px 0px;
+
+.iti__tc {
+  --iti-flag-offset: -3344px;
 }
-.iti__flag.iti__tj {
-  height: 10px;
-  background-position: -5021px 0px;
+
+.iti__td {
+  --iti-flag-offset: -3360px;
 }
-.iti__flag.iti__tk {
-  height: 10px;
-  background-position: -5043px 0px;
+
+.iti__tg {
+  --iti-flag-offset: -3376px;
 }
-.iti__flag.iti__tl {
-  height: 10px;
-  background-position: -5065px 0px;
+
+.iti__th {
+  --iti-flag-offset: -3392px;
 }
-.iti__flag.iti__tm {
-  height: 14px;
-  background-position: -5087px 0px;
+
+.iti__tj {
+  --iti-flag-offset: -3408px;
 }
-.iti__flag.iti__tn {
-  height: 14px;
-  background-position: -5109px 0px;
+
+.iti__tk {
+  --iti-flag-offset: -3424px;
 }
-.iti__flag.iti__to {
-  height: 10px;
-  background-position: -5131px 0px;
+
+.iti__tl {
+  --iti-flag-offset: -3440px;
 }
-.iti__flag.iti__tr {
-  height: 14px;
-  background-position: -5153px 0px;
+
+.iti__tm {
+  --iti-flag-offset: -3456px;
 }
-.iti__flag.iti__tt {
-  height: 12px;
-  background-position: -5175px 0px;
+
+.iti__tn {
+  --iti-flag-offset: -3472px;
 }
-.iti__flag.iti__tv {
-  height: 10px;
-  background-position: -5197px 0px;
+
+.iti__to {
+  --iti-flag-offset: -3488px;
 }
-.iti__flag.iti__tw {
-  height: 14px;
-  background-position: -5219px 0px;
+
+.iti__tr {
+  --iti-flag-offset: -3504px;
 }
-.iti__flag.iti__tz {
-  height: 14px;
-  background-position: -5241px 0px;
+
+.iti__tt {
+  --iti-flag-offset: -3520px;
 }
-.iti__flag.iti__ua {
-  height: 14px;
-  background-position: -5263px 0px;
+
+.iti__tv {
+  --iti-flag-offset: -3536px;
 }
-.iti__flag.iti__ug {
-  height: 14px;
-  background-position: -5285px 0px;
+
+.iti__tw {
+  --iti-flag-offset: -3552px;
 }
-.iti__flag.iti__uk {
-  height: 10px;
-  background-position: -5307px 0px;
+
+.iti__tz {
+  --iti-flag-offset: -3568px;
 }
-.iti__flag.iti__um {
-  height: 11px;
-  background-position: -5329px 0px;
+
+.iti__ua {
+  --iti-flag-offset: -3584px;
 }
-.iti__flag.iti__un {
-  height: 14px;
-  background-position: -5351px 0px;
+
+.iti__ug {
+  --iti-flag-offset: -3600px;
 }
-.iti__flag.iti__us {
-  height: 11px;
-  background-position: -5373px 0px;
+
+.iti__us {
+  --iti-flag-offset: -3616px;
 }
-.iti__flag.iti__uy {
-  height: 14px;
-  background-position: -5395px 0px;
+
+.iti__uy {
+  --iti-flag-offset: -3632px;
 }
-.iti__flag.iti__uz {
-  height: 10px;
-  background-position: -5417px 0px;
+
+.iti__uz {
+  --iti-flag-offset: -3648px;
 }
-.iti__flag.iti__va {
-  height: 15px;
-  background-position: -5439px 0px;
+
+.iti__va {
+  --iti-flag-offset: -3664px;
 }
-.iti__flag.iti__vc {
-  height: 14px;
-  background-position: -5456px 0px;
+
+.iti__vc {
+  --iti-flag-offset: -3680px;
 }
-.iti__flag.iti__ve {
-  height: 14px;
-  background-position: -5478px 0px;
+
+.iti__ve {
+  --iti-flag-offset: -3696px;
 }
-.iti__flag.iti__vg {
-  height: 10px;
-  background-position: -5500px 0px;
+
+.iti__vg {
+  --iti-flag-offset: -3712px;
 }
-.iti__flag.iti__vi {
-  height: 14px;
-  background-position: -5522px 0px;
+
+.iti__vi {
+  --iti-flag-offset: -3728px;
 }
-.iti__flag.iti__vn {
-  height: 14px;
-  background-position: -5544px 0px;
+
+.iti__vn {
+  --iti-flag-offset: -3744px;
 }
-.iti__flag.iti__vu {
-  height: 12px;
-  background-position: -5566px 0px;
+
+.iti__vu {
+  --iti-flag-offset: -3760px;
 }
-.iti__flag.iti__wf {
-  height: 14px;
-  background-position: -5588px 0px;
+
+.iti__wf {
+  --iti-flag-offset: -3776px;
 }
-.iti__flag.iti__ws {
-  height: 10px;
-  background-position: -5610px 0px;
+
+.iti__ws {
+  --iti-flag-offset: -3792px;
 }
-.iti__flag.iti__xk {
-  height: 15px;
-  background-position: -5632px 0px;
+
+.iti__xk {
+  --iti-flag-offset: -3808px;
 }
-.iti__flag.iti__ye {
-  height: 14px;
-  background-position: -5654px 0px;
+
+.iti__ye {
+  --iti-flag-offset: -3824px;
 }
-.iti__flag.iti__yt {
-  height: 14px;
-  background-position: -5676px 0px;
+
+.iti__yt {
+  --iti-flag-offset: -3840px;
 }
-.iti__flag.iti__za {
-  height: 14px;
-  background-position: -5698px 0px;
+
+.iti__za {
+  --iti-flag-offset: -3856px;
 }
-.iti__flag.iti__zm {
-  height: 14px;
-  background-position: -5720px 0px;
+
+.iti__zm {
+  --iti-flag-offset: -3872px;
 }
-.iti__flag.iti__zw {
-  height: 10px;
-  background-position: -5742px 0px;
+
+.iti__zw {
+  --iti-flag-offset: -3888px;
 }
 
-.iti__flag {
-  height: 15px;
-  box-shadow: 0px 0px 1px 0px #888;
-  background-repeat: no-repeat;
-  background-color: #dbdbdb;
-  background-position: 20px 0;
+.iti__globe {
+  background-image: var(--iti-path-globe-1x);
+  background-size: contain;
+  background-position: right;
+  box-shadow: none;
+  height: 19px;
 }
 
-.iti__flag.iti__np {
-  background-color: transparent;
+@media (min-resolution: 2x) {
+  .iti__flag {
+    background-image: var(--iti-path-flags-2x);
+  }
+  .iti__globe {
+    background-image: var(--iti-path-globe-2x);
+  }
 }
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts b/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts
index 7215d16eba..168ba33c65 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts
@@ -1 +1,4 @@
-declare module 'intl-tel-input'
\ No newline at end of file
+declare module 'intl-tel-input/build/js/intlTelInputWithUtils.js' {
+    const intlTelInput: any;
+    export default intlTelInput;
+}
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
index d77febae64..d67921b5c7 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
+++ b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
@@ -79,6 +79,7 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
+    width,
     targetId,
   } = props;
 
@@ -97,7 +98,8 @@ const Popover = (props: PbPopoverProps) => {
       maxHeight ? { maxHeight: maxHeight } : {},
       maxWidth ? { maxWidth: maxWidth } : {},
       minHeight ? { minHeight: minHeight } : {},
-      minWidth ? { minWidth: minWidth } : {}
+      minWidth ? { minWidth: minWidth } : {},
+      width ? { width: width } : {}
     );
   };
   const ariaProps = buildAriaProps(aria);
@@ -167,6 +169,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     maxWidth,
     minHeight,
     minWidth,
+    width,
   } = props;
 
   useEffect(() => {
@@ -216,6 +219,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         placement={placement}
         referenceElement={referenceElement}
         targetId={targetId}
+        width={width}
         zIndex={zIndex}
         {...props}
     >
diff --git a/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb b/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
index 0f8ff1a668..7bed04c76a 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
@@ -14,7 +14,7 @@
         trigger_element_id: "regular-popover-1",
         tooltip_id: "tooltip-1",
         offset: true,
-        position: "top"
+        position: "top",
     }) do %>
         I'm a popover. I can show content of any size.
     <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_popover/popover.rb b/playbook/app/pb_kits/playbook/pb_popover/popover.rb
index 48a53630ff..ca5e02bc0e 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/popover.rb
+++ b/playbook/app/pb_kits/playbook/pb_popover/popover.rb
@@ -12,6 +12,7 @@ class Popover < Playbook::KitBase
       prop :max_width
       prop :min_width
       prop :min_height
+      prop :width
       prop :z_index, type: Playbook::Props::String
       prop :offset, type: Playbook::Props::Boolean, default: false
       prop :close_on_click, type: Playbook::Props::Enum,
@@ -36,11 +37,12 @@ def width_height_helper
         out += "max-width: #{max_width}; " if max_width.present?
         out += "min-height: #{min_height}; " if min_height.present?
         out += "min-width: #{min_width};" if min_width.present?
+        out += "width: #{width};" if width.present?
         out
       end
 
       def width_height_class_helper
-        "overflow_handling" if max_height || max_width
+        "overflow_handling" if max_height || max_width || width
       end
 
       def data
diff --git a/playbook/lib/playbook/pb_forms_helper.rb b/playbook/lib/playbook/pb_forms_helper.rb
index c2b4c11d7a..f515b5db13 100755
--- a/playbook/lib/playbook/pb_forms_helper.rb
+++ b/playbook/lib/playbook/pb_forms_helper.rb
@@ -22,9 +22,10 @@ module PbFormsHelper
     # @param data [Hash] hash of data attributes
     # @param validate [Boolean] whether validation should be triggered or not
     # @see [#form_with] for other options
-    def pb_form_with(data: {}, validate: false, **kwargs, &block)
+    def pb_form_with(data: {}, validate: false, loading: false, **kwargs, &block)
       data = data.merge("pb-form-validation" => validate)
       classname = ["pb-form", kwargs[:class]].join(" ")
+      classname += " pb_form_loading" if loading
       options = kwargs.merge(
         class: classname,
         data: data,
@@ -33,6 +34,7 @@ def pb_form_with(data: {}, validate: false, **kwargs, &block)
 
       content_for(:pb_js, javascript_tag(<<~JS))
         window.addEventListener("DOMContentLoaded", function() { PbFormValidation.start() })
+        window.addEventListener("DOMContentLoaded", () => formHelper())
       JS
 
       form_with(**options, &block)
diff --git a/playbook/lib/playbook/version.rb b/playbook/lib/playbook/version.rb
index 79c9d8f37a..97fbbe200c 100644
--- a/playbook/lib/playbook/version.rb
+++ b/playbook/lib/playbook/version.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "14.4.0"
-  VERSION = "14.5.0"
+  PREVIOUS_VERSION = "14.5.0"
+  VERSION = "14.6.0"
 end
diff --git a/playbook/package.json b/playbook/package.json
index 3e212713f4..bf8236bca2 100644
--- a/playbook/package.json
+++ b/playbook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "playbook-ui",
-  "version": "14.5.0",
+  "version": "14.6.0",
   "description": "Nitro's Design System",
   "main": "./dist/playbook.js",
   "types": "./dist/types/index.d.ts",
@@ -39,7 +39,7 @@
     "flatpickr": "^4.6.13",
     "highcharts": "^11.4.8",
     "highcharts-react-official": "^3.2.1",
-    "intl-tel-input": "^18.0.15"
+    "intl-tel-input": "^24.6.0"
   },
   "devDependencies": {
     "@actions/core": "1.10.0",
@@ -60,7 +60,7 @@
     "@types/react": "17.0.54",
     "@types/react-dom": "^18.0.11",
     "@types/react-highlight-words": "^0.16.5",
-    "@types/react-modal": "3.13.1",
+    "@types/react-modal": "3.16.1",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -83,11 +83,11 @@
     "react-dropzone": "^10.2.2",
     "react-highlight-words": "^0.20.0",
     "react-joyride": "^2.8.2",
-    "react-modal": "^3.12.1",
+    "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-select": "5.8.0",
     "react-trix": "0.10.1",
-    "react-zoom-pan-pinch": "^2.6.1",
+    "react-zoom-pan-pinch": "3.6.0",
     "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.77.6",
     "terser": "^5.31.3",
diff --git a/playbook/spec/pb_kits/playbook/kits/multiple_users_stacked_spec.rb b/playbook/spec/pb_kits/playbook/kits/multiple_users_stacked_spec.rb
index 5e913d37cc..52d0d368a7 100644
--- a/playbook/spec/pb_kits/playbook/kits/multiple_users_stacked_spec.rb
+++ b/playbook/spec/pb_kits/playbook/kits/multiple_users_stacked_spec.rb
@@ -16,8 +16,8 @@
       expect(subject.new(users: [{ name: "1", image_url: "1" }]).classname).to eq "pb_multiple_users_stacked_kit_single"
       expect(subject.new(users: [], classname: "additional_class").classname).to eq "pb_multiple_users_stacked_kit additional_class"
       expect(subject.new(users: [], dark: true).classname).to eq "pb_multiple_users_stacked_kit dark"
-      expect(subject.new(users: [], variant: "bubble").classname).to eq "pb_multiple_users_stacked_kit_bubble"
-      expect(subject.new(users: [{ name: "1", image_url: "1" }], variant: "bubble").classname).to eq "pb_multiple_users_stacked_kit_single_bubble"
+      expect(subject.new(users: [], variant: "bubble").classname).to eq "pb_multiple_users_stacked_kit_bubble_size_sm"
+      expect(subject.new(users: [{ name: "1", image_url: "1" }], variant: "bubble").classname).to eq "pb_multiple_users_stacked_kit_single_bubble_size_sm"
     end
   end
 
diff --git a/yarn.lock b/yarn.lock
index 8ee891a259..bc890a2c0b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3932,10 +3932,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-modal@3.13.1":
-  version "3.13.1"
-  resolved "https://npm.powerapp.cloud/@types/react-modal/-/react-modal-3.13.1.tgz#5b9845c205fccc85d9a77966b6e16dc70a60825a"
-  integrity sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==
+"@types/react-modal@3.16.1":
+  version "3.16.1"
+  resolved "https://npm.powerapp.cloud/@types/react-modal/-/react-modal-3.16.1.tgz#0d65e078b1290acfef8083b8cd92b7692e899720"
+  integrity sha512-HsH2E3luJ2hdVOAovq93x/r+CmWqbhwT8hXW05KMp3zzbSEZsBn4egnMGU/VLwScwlCRPTyZgIEPqLycaz5EOw==
   dependencies:
     "@types/react" "*"
 
@@ -7324,10 +7324,10 @@ intersection-observer@^0.10.0:
   resolved "https://npm.powerapp.cloud/intersection-observer/-/intersection-observer-0.10.0.tgz#4d11d63c1ff67e21e62987be24d55218da1a1a69"
   integrity sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==
 
-intl-tel-input@^18.0.15:
-  version "18.5.3"
-  resolved "https://npm.powerapp.cloud/intl-tel-input/-/intl-tel-input-18.5.3.tgz#20b18431cb802d33c118f52e332e218e641ec09b"
-  integrity sha512-ncFqSpkdGf2YC/FvAiwBH44KAeRG8L7aqDODEpOvMAT3ZpBtvc/WtwaQ/6X4+HKDTlGkobdBjr6P3nAMwO8jtA==
+intl-tel-input@^24.6.0:
+  version "24.6.0"
+  resolved "https://npm.powerapp.cloud/intl-tel-input/-/intl-tel-input-24.6.0.tgz#f3b070b337f6981493b2c3b9d28e31828ce32a2f"
+  integrity sha512-3ZlxJk7IOhNCRRxGrAcGiP1uzZFaDEQUIHNHk516RORZpOoPh1kqZP8ksE8nm+/5HZk+tRV7F/iex0aWnkkixQ==
 
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
@@ -10115,7 +10115,7 @@ react-lifecycles-compat@^3.0.0:
   resolved "https://npm.powerapp.cloud/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-modal@^3.12.1:
+react-modal@^3.16.1:
   version "3.16.1"
   resolved "https://npm.powerapp.cloud/react-modal/-/react-modal-3.16.1.tgz#34018528fc206561b1a5467fc3beeaddafb39b2b"
   integrity sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==
@@ -10190,10 +10190,10 @@ react-trix@0.10.1:
   dependencies:
     trix "^1.3.1"
 
-react-zoom-pan-pinch@^2.6.1:
-  version "2.6.1"
-  resolved "https://npm.powerapp.cloud/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.6.1.tgz#5719fdd9515dc1f379a23350cbf99edd540b1281"
-  integrity sha512-4Cgdnn6OwN4DomY/E9NpAf0TyCtslEgwdYn96ZV/f5LKuw/FE3gcIBJiaKFmMGThDGV0yKN5mzO8noi34+UE4Q==
+react-zoom-pan-pinch@3.6.0:
+  version "3.6.0"
+  resolved "https://npm.powerapp.cloud/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.6.0.tgz#aea299a27d120a96b832fd953b2490ca9bfc4954"
+  integrity sha512-qLAFbDmlRwwJ7F3KXIoT5zxVZD34ZO0a5jI65URmTUjthapoQ0UCAF8oxpSJV0bSVszI5T3WV/U4Jd6ypwOnAQ==
 
 react@^17.0.2:
   version "17.0.2"