box-annotations 5.3.0 → 5.3.1-beta.0

package/i18n/pl-PL.properties

@@ -8,6 +8,18 @@ ba.annotationsLoadError = Przepraszamy, nie można wczytać uwag dla tego pliku.
 ba.annotationsPost = Opublikuj
 # Label for the save button
 ba.annotationsSave = Zapisz
+# Aria label for the button to view the next reference
+ba.boundingBoxHighlight.viewNextReference = Wyświetl następne odniesienie
+# Aria label for the button to view the previous reference
+ba.boundingBoxHighlight.viewPrevReference = Wyświetl poprzednie odniesienie
+# Aria label description for reply popup
+ba.popup.reply.comment = Komentarz
+# Aria label description for annotation comment field
+ba.popup.reply.field = Wpisz komentarz
+# Aria label for mention selector loading state
+ba.popup.reply.mentionLoading = Trwa wczytywanie użytkowników…
+# Aria role description for mention user selector
+ba.popup.reply.mentionSelector = Wspomnij o współpracowniku
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = Anuluj
 # Button label for adding a comment in the drawing toolbar

package/i18n/pt-BR.js

@@ -4,6 +4,12 @@ export default {
   "ba.annotationsLoadError": "Não foi possível carregar as anotações deste arquivo.",
   "ba.annotationsPost": "Publicar",
   "ba.annotationsSave": "Salvar",
+  "ba.boundingBoxHighlight.viewNextReference": "Visualizar próxima referência",
+  "ba.boundingBoxHighlight.viewPrevReference": "Visualizar referência anterior",
+  "ba.popup.reply.comment": "Comentário",
+  "ba.popup.reply.field": "Digite um comentário",
+  "ba.popup.reply.mentionLoading": "Carregando usuários…",
+  "ba.popup.reply.mentionSelector": "Mencionar um colaborador",
   "ba.popups.cancel": "Cancelar",
   "ba.popups.drawing.addComment": "Adicionar comentário",
   "ba.popups.drawing.delete": "Excluir",

package/i18n/pt-BR.properties

@@ -8,6 +8,18 @@ ba.annotationsLoadError = Não foi possível carregar as anotações deste arqui
 ba.annotationsPost = Publicar
 # Label for the save button
 ba.annotationsSave = Salvar
+# Aria label for the button to view the next reference
+ba.boundingBoxHighlight.viewNextReference = Visualizar próxima referência
+# Aria label for the button to view the previous reference
+ba.boundingBoxHighlight.viewPrevReference = Visualizar referência anterior
+# Aria label description for reply popup
+ba.popup.reply.comment = Comentário
+# Aria label description for annotation comment field
+ba.popup.reply.field = Digite um comentário
+# Aria label for mention selector loading state
+ba.popup.reply.mentionLoading = Carregando usuários…
+# Aria role description for mention user selector
+ba.popup.reply.mentionSelector = Mencionar um colaborador
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = Cancelar
 # Button label for adding a comment in the drawing toolbar

package/i18n/ru-RU.js

@@ -4,6 +4,12 @@ export default {
   "ba.annotationsLoadError": "Сбой при загрузке примечаний для этого файла.",
   "ba.annotationsPost": "Отправить",
   "ba.annotationsSave": "Сохранить",
+  "ba.boundingBoxHighlight.viewNextReference": "Посмотреть следующую ссылку",
+  "ba.boundingBoxHighlight.viewPrevReference": "Посмотреть предыдущую ссылку",
+  "ba.popup.reply.comment": "Комментарий",
+  "ba.popup.reply.field": "Введите комментарий",
+  "ba.popup.reply.mentionLoading": "Загрузка пользователей…",
+  "ba.popup.reply.mentionSelector": "Упомянуть соавтора",
   "ba.popups.cancel": "Отмена",
   "ba.popups.drawing.addComment": "Добавить комментарий",
   "ba.popups.drawing.delete": "Удалить",

package/i18n/ru-RU.properties

@@ -8,6 +8,18 @@ ba.annotationsLoadError = Сбой при загрузке примечаний
 ba.annotationsPost = Отправить
 # Label for the save button
 ba.annotationsSave = Сохранить
+# Aria label for the button to view the next reference
+ba.boundingBoxHighlight.viewNextReference = Посмотреть следующую ссылку
+# Aria label for the button to view the previous reference
+ba.boundingBoxHighlight.viewPrevReference = Посмотреть предыдущую ссылку
+# Aria label description for reply popup
+ba.popup.reply.comment = Комментарий
+# Aria label description for annotation comment field
+ba.popup.reply.field = Введите комментарий
+# Aria label for mention selector loading state
+ba.popup.reply.mentionLoading = Загрузка пользователей…
+# Aria role description for mention user selector
+ba.popup.reply.mentionSelector = Упомянуть соавтора
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = Отмена
 # Button label for adding a comment in the drawing toolbar

package/i18n/sv-SE.js

@@ -4,6 +4,12 @@ export default {
   "ba.annotationsLoadError": "Det gick inte att ladda anteckningar för den här filen.",
   "ba.annotationsPost": "Publicera",
   "ba.annotationsSave": "Spara",
+  "ba.boundingBoxHighlight.viewNextReference": "Visa nästa referens",
+  "ba.boundingBoxHighlight.viewPrevReference": "Visa föregående referens",
+  "ba.popup.reply.comment": "Kommentar",
+  "ba.popup.reply.field": "Skriv en kommentar",
+  "ba.popup.reply.mentionLoading": "Läser in användare …",
+  "ba.popup.reply.mentionSelector": "Nämn en medarbetare",
   "ba.popups.cancel": "Avbryt",
   "ba.popups.drawing.addComment": "Lägg till kommentar",
   "ba.popups.drawing.delete": "Radera",

package/i18n/sv-SE.properties

@@ -8,6 +8,18 @@ ba.annotationsLoadError = Det gick inte att ladda anteckningar för den här fil
 ba.annotationsPost = Publicera
 # Label for the save button
 ba.annotationsSave = Spara
+# Aria label for the button to view the next reference
+ba.boundingBoxHighlight.viewNextReference = Visa nästa referens
+# Aria label for the button to view the previous reference
+ba.boundingBoxHighlight.viewPrevReference = Visa föregående referens
+# Aria label description for reply popup
+ba.popup.reply.comment = Kommentar
+# Aria label description for annotation comment field
+ba.popup.reply.field = Skriv en kommentar
+# Aria label for mention selector loading state
+ba.popup.reply.mentionLoading = Läser in användare …
+# Aria role description for mention user selector
+ba.popup.reply.mentionSelector = Nämn en medarbetare
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = Avbryt
 # Button label for adding a comment in the drawing toolbar

package/i18n/tr-TR.js

@@ -4,6 +4,12 @@ export default {
   "ba.annotationsLoadError": "Üzgünüz, açıklamalar bu dosya için yüklenemedi.",
   "ba.annotationsPost": "Gönder",
   "ba.annotationsSave": "Kaydet",
+  "ba.boundingBoxHighlight.viewNextReference": "Sonraki referansı görüntüleyin",
+  "ba.boundingBoxHighlight.viewPrevReference": "Önceki referansı görüntüleyin",
+  "ba.popup.reply.comment": "Yorum",
+  "ba.popup.reply.field": "Bir yorum yazın",
+  "ba.popup.reply.mentionLoading": "Kullanıcılar yükleniyor…",
+  "ba.popup.reply.mentionSelector": "Bir ortak çalışandan bahsedin",
   "ba.popups.cancel": "İptal",
   "ba.popups.drawing.addComment": "Yorum Ekle",
   "ba.popups.drawing.delete": "Sil",

package/i18n/tr-TR.properties

@@ -8,6 +8,18 @@ ba.annotationsLoadError = Üzgünüz, açıklamalar bu dosya için yüklenemedi.
 ba.annotationsPost = Gönder
 # Label for the save button
 ba.annotationsSave = Kaydet
+# Aria label for the button to view the next reference
+ba.boundingBoxHighlight.viewNextReference = Sonraki referansı görüntüleyin
+# Aria label for the button to view the previous reference
+ba.boundingBoxHighlight.viewPrevReference = Önceki referansı görüntüleyin
+# Aria label description for reply popup
+ba.popup.reply.comment = Yorum
+# Aria label description for annotation comment field
+ba.popup.reply.field = Bir yorum yazın
+# Aria label for mention selector loading state
+ba.popup.reply.mentionLoading = Kullanıcılar yükleniyor…
+# Aria role description for mention user selector
+ba.popup.reply.mentionSelector = Bir ortak çalışandan bahsedin
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = İptal
 # Button label for adding a comment in the drawing toolbar

package/i18n/zh-CN.js

@@ -4,6 +4,12 @@ export default {
   "ba.annotationsLoadError": "抱歉，无法为此文件加载批注。",
   "ba.annotationsPost": "发布",
   "ba.annotationsSave": "保存",
+  "ba.boundingBoxHighlight.viewNextReference": "查看下一个引用",
+  "ba.boundingBoxHighlight.viewPrevReference": "查看先前引用",
+  "ba.popup.reply.comment": "评论",
+  "ba.popup.reply.field": "键入注释",
+  "ba.popup.reply.mentionLoading": "正在加载用户…",
+  "ba.popup.reply.mentionSelector": "提及协作者",
   "ba.popups.cancel": "取消",
   "ba.popups.drawing.addComment": "添加评论",
   "ba.popups.drawing.delete": "删除",

package/i18n/zh-CN.properties

@@ -8,6 +8,18 @@ ba.annotationsLoadError = 抱歉，无法为此文件加载批注。
 ba.annotationsPost = 发布
 # Label for the save button
 ba.annotationsSave = 保存
+# Aria label for the button to view the next reference
+ba.boundingBoxHighlight.viewNextReference = 查看下一个引用
+# Aria label for the button to view the previous reference
+ba.boundingBoxHighlight.viewPrevReference = 查看先前引用
+# Aria label description for reply popup
+ba.popup.reply.comment = 评论
+# Aria label description for annotation comment field
+ba.popup.reply.field = 键入注释
+# Aria label for mention selector loading state
+ba.popup.reply.mentionLoading = 正在加载用户…
+# Aria role description for mention user selector
+ba.popup.reply.mentionSelector = 提及协作者
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = 取消
 # Button label for adding a comment in the drawing toolbar

package/i18n/zh-TW.js

@@ -4,6 +4,12 @@ export default {
   "ba.annotationsLoadError": "很抱歉，無法載入此檔案的註解。",
   "ba.annotationsPost": "張貼",
   "ba.annotationsSave": "儲存",
+  "ba.boundingBoxHighlight.viewNextReference": "檢視下一個參考項目",
+  "ba.boundingBoxHighlight.viewPrevReference": "檢視先前的參考項目",
+  "ba.popup.reply.comment": "留言",
+  "ba.popup.reply.field": "鍵入留言",
+  "ba.popup.reply.mentionLoading": "正在載入使用者…",
+  "ba.popup.reply.mentionSelector": "提及共同作業者",
   "ba.popups.cancel": "取消",
   "ba.popups.drawing.addComment": "新增留言",
   "ba.popups.drawing.delete": "刪除",

package/i18n/zh-TW.properties

@@ -8,6 +8,18 @@ ba.annotationsLoadError = 很抱歉，無法載入此檔案的註解。
 ba.annotationsPost = 張貼
 # Label for the save button
 ba.annotationsSave = 儲存
+# Aria label for the button to view the next reference
+ba.boundingBoxHighlight.viewNextReference = 檢視下一個參考項目
+# Aria label for the button to view the previous reference
+ba.boundingBoxHighlight.viewPrevReference = 檢視先前的參考項目
+# Aria label description for reply popup
+ba.popup.reply.comment = 留言
+# Aria label description for annotation comment field
+ba.popup.reply.field = 鍵入留言
+# Aria label for mention selector loading state
+ba.popup.reply.mentionLoading = 正在載入使用者…
+# Aria role description for mention user selector
+ba.popup.reply.mentionSelector = 提及共同作業者
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = 取消
 # Button label for adding a comment in the drawing toolbar

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.3.0",
+    "version": "5.3.1-beta.0",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -36,7 +36,7 @@
         "@box/blueprint-web-assets": "^5.5.12",
         "@box/collaboration-popover": "^2.1.32",
         "@box/combobox-with-api": "^1.42.22",
-        "@box/frontend": "^10.0.0",
+        "@box/frontend": "^11.0.1",
         "@box/item-icon": "^3.2.0",
         "@box/languages": "^1.1.0",
         "@box/readable-time": "^2.1.32",
@@ -44,8 +44,8 @@
         "@box/types": "^2.1.8",
         "@box/user-selector": "^2.1.35",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
-        "@commitlint/cli": "^8.3.5",
-        "@commitlint/config-conventional": "^8.2.0",
+        "@commitlint/cli": "^19.8.0",
+        "@commitlint/config-conventional": "^19.8.0",
         "@formatjs/intl-pluralrules": "^1.5.5",
         "@formatjs/intl-relativetimeformat": "^4.5.12",
         "@popperjs/core": "^2.4.0",
@@ -65,24 +65,23 @@
         "@typescript-eslint/eslint-plugin": "^7.3.1",
         "@typescript-eslint/parser": "^7.3.1",
         "autoprefixer": "^10.4.19",
-        "axios": "^0.24.0",
-        "babel-eslint": "^10.1.0",
+        "axios": "^0.33.0",
         "babel-jest": "^29.7.0",
         "babel-loader": "^9.2.1",
         "babel-plugin-istanbul": "^6.0.0",
         "babel-plugin-react-intl": "^7.5.1",
         "babel-plugin-transform-require-ignore": "^0.1.1",
-        "box-node-sdk": "^1.33.0",
         "box-ui-elements": "^20.0.0",
         "circular-dependency-plugin": "^5.2.0",
         "classnames": "^2.2.5",
         "clsx": "^2.1.1",
-        "conventional-github-releaser": "^3.1.3",
+        "conventional-changelog": "^8.1.3",
+        "conventional-changelog-conventionalcommits": "^10.3.0",
         "core-js": "^3.38.1",
         "css-loader": "^7.1.2",
-        "css-minimizer-webpack-plugin": "^7.0.4",
+        "css-minimizer-webpack-plugin": "^8.0.0",
         "cypress": "^15.20.1",
-        "draft-js": "0.10.5",
+        "draft-js": "^0.11.7",
         "enzyme": "^3.11.0",
         "enzyme-to-json": "^3.4.4",
         "eslint": "^8.57.0",
@@ -99,7 +98,7 @@
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.34.3",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "formik": "^2.1.4",
+        "formik": "^2.4.9",
         "husky": "^3.1.0",
         "jest": "^29.7.0",
         "jest-canvas-mock": "^2.5.2",
@@ -108,8 +107,9 @@
         "lodash": "^4.17.15",
         "mini-css-extract-plugin": "^2.10.1",
         "npm-run-all": "^4.1.5",
+        "postcss": "^8.5.18",
         "postcss-loader": "^8.1.1",
-        "prettier": "^1.19.1",
+        "prettier": "^3.2.5",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-intl": "6.4.2",
@@ -118,21 +118,21 @@
         "react-textarea-autosize": "^7.1.2",
         "redux": "^4.0.5",
         "regenerator-runtime": "^0.13.9",
-        "sass": "^1.64.1",
+        "sass": "1.77.6",
         "sass-loader": "^16.0.4",
         "scroll-into-view-if-needed": "^2.2.24",
         "style-loader": "^4.0.0",
-        "stylelint": "^12.0.0",
-        "stylelint-config-rational-order": "^0.1.2",
-        "stylelint-config-standard": "^19.0.0",
-        "stylelint-order": "^3.1.1",
+        "stylelint": "^16.26.1",
+        "stylelint-config-standard": "^38.0.0",
+        "stylelint-config-standard-scss": "^14.0.0",
+        "stylelint-order": "^6.0.4",
         "tabbable": "^1.1.3",
-        "typescript": "4.9.5",
+        "typescript": "5.2.2",
         "uuid": "^8.3.1",
         "wait-on": "^9.0.5",
         "webpack": "^5.105.4",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.2.3",
+        "webpack-dev-server": "^5.2.6",
         "worker-farm": "^1.7.0"
     },
     "peerDependencies": {
@@ -144,7 +144,8 @@
         "@box/readable-time": "^2.1.32",
         "@box/threaded-annotations": "^4.11.0",
         "@box/types": "^2.1.8",
-        "@box/user-selector": "^2.1.35"
+        "@box/user-selector": "^2.1.35",
+        "axios": "^0.33.0"
     },
     "scripts": {
         "build": "yarn setup && yarn build:prod:dist",
@@ -157,7 +158,7 @@
         "cy:wait": "wait-on http-get://127.0.0.1:8001",
         "lint": "npm-run-all lint:*",
         "lint:js": "eslint .",
-        "lint:scss": "stylelint \"src/**/*.scss\" --syntax scss",
+        "lint:scss": "stylelint \"src/**/*.scss\"",
         "lint:ts": "tsc && eslint --ext=.tsx,.ts --max-warnings=0 .",
         "release:cdn": "yarn setup; node ./scripts/prod.js",
         "release:custom": "scripts/release.sh -c",
@@ -185,6 +186,6 @@
         "**/react-intl/**/@types/react": "^18.3.12",
         "**/@types/react": "^18.3.12",
         "**/@types/react-dom": "^18.2.0",
-        "acorn": "8.14.0"
+        "draft-js/immutable": "^3.8.3"
     }
 }

package/src/BoxAnnotations.ts

@@ -70,7 +70,7 @@ const ANNOTATORS: Annotator[] = [
         CONSTRUCTOR: MediaAnnotator,
         NAME: 'Media',
         TYPES: [Type.region],
-        VIEWERS: ['Dash','MP4'],
+        VIEWERS: ['Dash', 'MP4'],
     },
 ];
 

package/src/adapters/threadedAnnotationsAdapters.ts

@@ -1,4 +1,10 @@
-import type { DocumentNodeV2, MentionNodeV2, ParagraphNodeV2, TextMessageTypeV2, TextNodeV2 } from '@box/threaded-annotations';
+import type {
+    DocumentNodeV2,
+    MentionNodeV2,
+    ParagraphNodeV2,
+    TextMessageTypeV2,
+    TextNodeV2,
+} from '@box/threaded-annotations';
 import { parseMessageMarkdown } from '@box/threaded-annotations';
 
 import type { Annotation, Collaborator, Reply, UserMini } from '../@types';
@@ -151,7 +157,9 @@ export const annotationToMessages = (annotation: Annotation, isRichTextEnabled =
 /**
  * Converts a box-annotations Collaborator to a @box/user-selector UserContactType.
  */
-export const collaboratorToUserContact = (collaborator: Collaborator): {
+export const collaboratorToUserContact = (
+    collaborator: Collaborator,
+): {
     email: string;
     id: number;
     name: string;

package/src/boundingBoxHighlight/BoundingBoxHighlightContainer.tsx

@@ -15,7 +15,10 @@ export type Props = {
     location: number;
 };
 
-const mapStateToProps = (state: AppState, { location }: Props): {
+const mapStateToProps = (
+    state: AppState,
+    { location }: Props,
+): {
     allBoundingBoxes: BoundingBox[];
     boundingBoxes: BoundingBox[];
     selectedId: string | null;

package/src/common/BaseAnnotator.scss

@@ -35,7 +35,7 @@
     pointer-events: none;
 
     .ba-Popup,
-    .ba-PopupV2 {
+    .ba-PopupAnnotation {
         z-index: 150;
         pointer-events: auto;
     }

package/src/common/DeselectListener.tsx

@@ -8,7 +8,7 @@ export default function DeselectListener(): null {
     React.useEffect(() => {
         const handleMouseDown = (event: MouseEvent): void => {
             // Popup is portaled outside .ba-Layer; native mousedown still bubbles here.
-            if ((event.target as Element | null)?.closest?.('.ba-PopupV2, .ba-Popup')) return;
+            if ((event.target as Element | null)?.closest?.('.ba-PopupAnnotation, .ba-Popup')) return;
             dispatch(setActiveAnnotationIdAction(null));
         };
 

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.scss

@@ -1,5 +1,5 @@
 $ba-BoundingBoxHighlightNav-bg: #fff;
-$ba-BoundingBoxHighlightNav-shadow: 0 6px 20px rgba(0, 0, 0, .1);
+$ba-BoundingBoxHighlightNav-shadow: 0 6px 20px rgb(0 0 0 / 10%);
 $ba-BoundingBoxHighlightNav-arrow: #909090;
 $ba-BoundingBoxHighlightNav-border: #e8e8e8;
 $ba-BoundingBoxHighlightNav-counter: #222;
@@ -45,11 +45,11 @@ $ba-BoundingBoxHighlightNav-counter: #222;
     }
 
     &:hover:not(:disabled) {
-        background: rgba(0, 0, 0, .06);
+        background: rgb(0 0 0 / 6%);
     }
 
     &:active:not(:disabled) {
-        background: rgba(0, 0, 0, .12);
+        background: rgb(0 0 0 / 12%);
     }
 
     &:disabled {

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.scss

@@ -1,22 +1,27 @@
 $ba-BoundingBoxHighlight-color: #0061d5;
-$ba-BoundingBoxHighlight-bgColor--default: rgba($ba-BoundingBoxHighlight-color, .05);
-$ba-BoundingBoxHighlight-bgColor--hover: rgba($ba-BoundingBoxHighlight-color, .16);
-$ba-BoundingBoxHighlight-bgColor--selected: rgba($ba-BoundingBoxHighlight-color, .1);
+$ba-BoundingBoxHighlight-bgColor--default: rgba($ba-BoundingBoxHighlight-color, 0.05);
+$ba-BoundingBoxHighlight-bgColor--hover: rgba($ba-BoundingBoxHighlight-color, 0.16);
+$ba-BoundingBoxHighlight-bgColor--selected: rgba($ba-BoundingBoxHighlight-color, 0.1);
 
 .ba-BoundingBoxHighlightRect {
     position: absolute;
     box-sizing: border-box;
     background-color: $ba-BoundingBoxHighlight-bgColor--default;
-    border: 2px solid rgba($ba-BoundingBoxHighlight-color, .2);
+    border: 2px solid rgba($ba-BoundingBoxHighlight-color, 0.2);
     border-radius: 8px;
     outline: none;
     cursor: pointer;
-    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
+    transition:
+        background-color 200ms ease,
+        border-color 200ms ease,
+        box-shadow 200ms ease;
     pointer-events: auto;
 
     &.is-selected {
         background-color: $ba-BoundingBoxHighlight-bgColor--selected;
         border-color: $ba-BoundingBoxHighlight-color;
-        box-shadow: 0 0 0 2px rgba($ba-BoundingBoxHighlight-color, .3), 0 4px 12px rgba(0, 0, 0, .15);
+        box-shadow:
+            0 0 0 2px rgba($ba-BoundingBoxHighlight-color, 0.3),
+            0 4px 12px rgb(0 0 0 / 15%);
     }
 }

package/src/components/Popups/PopupBase.scss

@@ -25,7 +25,7 @@
         }
 
         .ba-ReplyForm {
-            opacity: .99; // Creates a new stacking context so that the collaborators list shows on top of the ba-Popup-footer
+            opacity: 0.99; // Creates a new stacking context so that the collaborators list shows on top of the ba-Popup-footer
         }
     }
 
@@ -34,7 +34,7 @@
         background-color: $popup-content-bg;
         border: 1px solid $popup-border-color;
         border-radius: 6px;
-        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .15);
+        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 15%);
     }
 
     .ba-Popup-footer {

package/src/components/Popups/PopupDrawingToolbar.scss

@@ -13,7 +13,7 @@
     border-radius: $bdl-border-radius-size;
     outline: none;
     cursor: pointer;
-    opacity: .7;
+    opacity: 0.7;
     transition: opacity 200ms ease;
 
     &:focus,
@@ -23,7 +23,7 @@
 
     &[disabled] {
         cursor: default;
-        opacity: .2;
+        opacity: 0.2;
     }
 }
 
@@ -53,7 +53,7 @@
     .ba-Popup-content {
         gap: 4px;
         padding: 8px;
-        background-color: rgba(0, 0, 0, .8);
+        background-color: rgb(0 0 0 / 80%);
         border-radius: 46px;
     }
 }
@@ -75,7 +75,7 @@
 
 // Modernized border-left for adjacent groups
 .ba-PopupDrawingToolbar--modernized .ba-PopupDrawingToolbar-group + .ba-PopupDrawingToolbar-group {
-    border-left: 1px solid rgb(255, 255, 255, 8%);
+    border-left: 1px solid rgb(255 255 255 / 8%);
 }
 
 .ba-PopupDrawingToolbar-delete,

package/src/components/Popups/PopupList.scss

@@ -8,7 +8,7 @@
     .ba-Popup-content {
         border: solid 1px $bdl-gray-30;
         border-radius: $bdl-border-radius-size;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
     }
 
     .ba-PopupList-prompt {

package/src/components/Popups/PopupV2.scss

@@ -1,4 +1,4 @@
-.ba-PopupV2 {
+.ba-PopupAnnotation {
     position: absolute;
     top: 0;
     left: 0;
@@ -8,7 +8,7 @@
 
 // Specificity must beat .ba selectors from box-ui-elements globals
 // (forms, buttons, links) that cascade into threaded-annotations components.
-.ba .ba-PopupV2 {
+.ba .ba-PopupAnnotation {
     div[contenteditable='true'],
     div[contenteditable='true']:hover,
     div[contenteditable='true']:focus {