box-annotations 5.2.1-beta.5 → 5.2.1-beta.7

package/dist/annotations.js.LICENSE.txt

@@ -12,9 +12,9 @@ object-assign
 
 /*!
  * Box Annotations
- * 
+ *
  * Copyright 2016-present Box, Inc. All Rights Reserved.
- * 
+ *
  * This source code is licensed under the Box Software License Agreement found
  * in the LICENSE file in the root directory of this source tree. Additional
  * third party license disclosures can be found in the THIRD_PARTY_LICENSES
@@ -30,46 +30,6 @@ object-assign
  * Licensed under MIT License
  */
 
-/**
- * @license React
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * use-sync-external-store-with-selector.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 /** @license React v0.18.0
  * scheduler.production.min.js
  *

package/i18n/en-US.js

@@ -8,6 +8,8 @@ export default {
   "ba.boundingBoxHighlight.viewPrevReference": "View previous reference",
   "ba.popup.reply.comment": "Comment",
   "ba.popup.reply.field": "Type a comment",
+  "ba.popup.reply.mentionLoading": "Loading users...",
+  "ba.popup.reply.mentionSelector": "Mention a collaborator",
   "ba.popups.cancel": "Cancel",
   "ba.popups.drawing.addComment": "Add Comment",
   "ba.popups.drawing.delete": "Delete",

package/i18n/en-US.properties

@@ -16,6 +16,10 @@ ba.boundingBoxHighlight.viewPrevReference = View previous reference
 ba.popup.reply.comment = Comment
 # Aria label description for annotation comment field
 ba.popup.reply.field = Type a comment
+# Aria label for mention selector loading state
+ba.popup.reply.mentionLoading = Loading users...
+# Aria role description for mention user selector
+ba.popup.reply.mentionSelector = Mention a collaborator
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = Cancel
 # Button label for adding a comment in the drawing toolbar

package/i18n/json/src/components/Popups/messages.json

@@ -1 +1 @@
-[{"id":"ba.popup.reply.comment","description":"Aria label description for reply popup","defaultMessage":"Comment"},{"id":"ba.popup.reply.field","description":"Aria label description for annotation comment field","defaultMessage":"Type a comment"},{"id":"ba.popups.cancel","description":"Button label for cancelling the creation of a description, comment, or reply","defaultMessage":"Cancel"},{"id":"ba.popups.post","description":"Button label for creating a description, comment, or reply","defaultMessage":"Post"},{"id":"ba.popups.drawing.addComment","description":"Button label for adding a comment in the drawing toolbar","defaultMessage":"Add Comment"},{"id":"ba.popups.drawing.delete","description":"Button title for deleting a staged drawing","defaultMessage":"Delete"},{"id":"ba.popups.drawing.redo","description":"Button title for redoing a staged drawing","defaultMessage":"Redo"},{"id":"ba.popups.drawing.undo","description":"Button title for undoing a staged drawing","defaultMessage":"Undo"},{"id":"ba.popups.replyField.placeholder","description":"Placeholder for reply field editor","defaultMessage":"Type a comment..."},{"id":"ba.popups.popupHighlight.promoter","description":"Popup message for highlight promoter","defaultMessage":"Highlight and Comment"},{"id":"ba.popups.popupHighlight.restrictedPrompt","description":"Prompt message when selection crosses multiple pages","defaultMessage":"Comments restricted to single page"},{"id":"ba.popups.popupList.prompt","description":"Prompt message for empty popup list","defaultMessage":"Mention someone to notify them"},{"id":"ba.popups.popupCursor.regionPrompt","description":"Prompt message following cursor in region annotations mode","defaultMessage":"Draw a box to comment"}]
+[{"id":"ba.popup.reply.comment","description":"Aria label description for reply popup","defaultMessage":"Comment"},{"id":"ba.popup.reply.mentionLoading","description":"Aria label for mention selector loading state","defaultMessage":"Loading users..."},{"id":"ba.popup.reply.mentionSelector","description":"Aria role description for mention user selector","defaultMessage":"Mention a collaborator"},{"id":"ba.popup.reply.field","description":"Aria label description for annotation comment field","defaultMessage":"Type a comment"},{"id":"ba.popups.cancel","description":"Button label for cancelling the creation of a description, comment, or reply","defaultMessage":"Cancel"},{"id":"ba.popups.post","description":"Button label for creating a description, comment, or reply","defaultMessage":"Post"},{"id":"ba.popups.drawing.addComment","description":"Button label for adding a comment in the drawing toolbar","defaultMessage":"Add Comment"},{"id":"ba.popups.drawing.delete","description":"Button title for deleting a staged drawing","defaultMessage":"Delete"},{"id":"ba.popups.drawing.redo","description":"Button title for redoing a staged drawing","defaultMessage":"Redo"},{"id":"ba.popups.drawing.undo","description":"Button title for undoing a staged drawing","defaultMessage":"Undo"},{"id":"ba.popups.replyField.placeholder","description":"Placeholder for reply field editor","defaultMessage":"Type a comment..."},{"id":"ba.popups.popupHighlight.promoter","description":"Popup message for highlight promoter","defaultMessage":"Highlight and Comment"},{"id":"ba.popups.popupHighlight.restrictedPrompt","description":"Prompt message when selection crosses multiple pages","defaultMessage":"Comments restricted to single page"},{"id":"ba.popups.popupList.prompt","description":"Prompt message for empty popup list","defaultMessage":"Mention someone to notify them"},{"id":"ba.popups.popupCursor.regionPrompt","description":"Prompt message following cursor in region annotations mode","defaultMessage":"Draw a box to comment"}]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.2.1-beta.5",
+    "version": "5.2.1-beta.7",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -28,7 +28,13 @@
         "@babel/preset-react": "^7.25.9",
         "@babel/preset-typescript": "^7.25.9",
         "@box/frontend": "^10.0.0",
+        "@box/blueprint-web": "^14.12.2",
+        "@box/blueprint-web-assets": "^4.114.3",
+        "@box/collaboration-popover": "^1.60.2",
         "@box/languages": "^1.1.0",
+        "@box/readable-time": "^1.39.52",
+        "@box/threaded-annotations": "^1.80.0",
+        "@box/user-selector": "^1.74.52",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.2.0",
@@ -50,11 +56,11 @@
         "@types/uuid": "^8.3.0",
         "@typescript-eslint/eslint-plugin": "^7.3.1",
         "@typescript-eslint/parser": "^7.3.1",
-        "autoprefixer": "^9.7.6",
+        "autoprefixer": "^10.4.19",
         "axios": "^0.24.0",
         "babel-eslint": "^10.1.0",
         "babel-jest": "^24.9.0",
-        "babel-loader": "^8.3.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",
@@ -62,9 +68,11 @@
         "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",
         "core-js": "^3.38.1",
-        "css-loader": "^3.5.2",
+        "css-loader": "^7.1.2",
+        "css-minimizer-webpack-plugin": "^7.0.4",
         "cypress": "^4.4.1",
         "draft-js": "0.10.5",
         "enzyme": "^3.11.0",
@@ -90,12 +98,10 @@
         "jest-environment-jsdom-sixteen": "^1.0.3",
         "lint-staged": "^9.5.0",
         "lodash": "^4.17.15",
-        "mini-css-extract-plugin": "^0.9.0",
+        "mini-css-extract-plugin": "^2.10.1",
         "npm-run-all": "^4.1.5",
-        "optimize-css-assets-webpack-plugin": "^5.0.3",
-        "postcss-loader": "^3.0.0",
+        "postcss-loader": "^8.1.1",
         "prettier": "^1.19.1",
-        "raw-loader": "^4.0.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-intl": "6.4.2",
@@ -105,27 +111,34 @@
         "redux": "^4.0.5",
         "regenerator-runtime": "^0.13.9",
         "sass": "^1.64.1",
-        "sass-loader": "^8.0.2",
+        "sass-loader": "^16.0.4",
         "scroll-into-view-if-needed": "^2.2.24",
-        "style-loader": "^1.1.4",
+        "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",
         "tabbable": "^1.1.3",
-        "terser-webpack-plugin": "^4.2.3",
         "typescript": "4.9.5",
         "uuid": "^8.3.1",
         "wait-on": "^4.0.2",
-        "webpack": "^4.47.0",
-        "webpack-cli": "^3.3.11",
-        "webpack-dev-server": "^3.10.3",
+        "webpack": "^5.105.4",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.2.3",
         "worker-farm": "^1.7.0"
     },
+    "peerDependencies": {
+        "@box/blueprint-web": "^14.12.2",
+        "@box/blueprint-web-assets": "^4.114.3",
+        "@box/collaboration-popover": "^1.60.2",
+        "@box/readable-time": "^1.39.52",
+        "@box/threaded-annotations": "^1.80.0",
+        "@box/user-selector": "^1.74.52"
+    },
     "scripts": {
         "build": "yarn setup && yarn build:prod:dist",
         "build:i18n": "props2es",
-        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev webpack --config scripts/webpack.config.js --mode development --progress --colors",
+        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev webpack --config scripts/webpack.config.js --mode development --progress",
         "build:prod:dist": "LANGUAGE=en-US BABEL_ENV=production NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
         "clean": "rm -rf dist reports/* i18n/json i18n/*.js",
         "cy:open": "yarn cy:wait; yarn cypress open",

package/src/@types/model.ts

@@ -12,6 +12,11 @@ export interface Annotation {
     modified_by: User;
     permissions: Permissions;
     replies?: Array<Reply>;
+    resolution?: {
+        resolved_at: string;
+        resolved_by: User;
+    } | null;
+    status?: 'open' | 'resolved';
     target: Target;
     type: 'annotation';
 }

package/src/adapters/threadedAnnotationsAdapters.ts

@@ -0,0 +1,155 @@
+import type { DocumentNodeV2, MentionNodeV2, ParagraphNodeV2, TextMessageTypeV2, TextNodeV2 } from '@box/threaded-annotations';
+
+import type { Annotation, Collaborator, Reply, UserMini } from '../@types';
+
+const MENTION_REGEX = /@\[(\d+):([^\]]+)\]/g;
+
+/**
+ * Parses a plain-text line into paragraph content nodes.
+ * Recognizes @[userId:userName] mention markup and converts to MentionNode / TextNode.
+ */
+const parseLine = (line: string): (MentionNodeV2 | TextNodeV2)[] => {
+    const nodes: (MentionNodeV2 | TextNodeV2)[] = [];
+    let lastIndex = 0;
+
+    // Reset regex state since it's global
+    MENTION_REGEX.lastIndex = 0;
+
+    let match = MENTION_REGEX.exec(line);
+    while (match !== null) {
+        const [fullMatch, userId, userName] = match;
+        const { index } = match;
+
+        if (index > lastIndex) {
+            nodes.push({ type: 'text', text: line.slice(lastIndex, index) });
+        }
+
+        nodes.push({
+            type: 'mention',
+            attrs: {
+                authorId: '',
+                mentionId: userId,
+                mentionedUserId: userId,
+                mentionedUserName: userName,
+            },
+        });
+
+        lastIndex = index + fullMatch.length;
+        match = MENTION_REGEX.exec(line);
+    }
+
+    if (lastIndex < line.length) {
+        nodes.push({ type: 'text', text: line.slice(lastIndex) });
+    }
+
+    return nodes;
+};
+
+/**
+ * Deserializes plain text with @[userId:userName] mention markup into a TipTap DocumentNode.
+ * This is the reverse of serializeMentionMarkup from @box/threaded-annotations.
+ *
+ * Newlines are treated as paragraph breaks.
+ */
+export const deserializeMentionMarkup = (text: string): DocumentNodeV2 => {
+    if (!text) {
+        return { type: 'doc', content: [] };
+    }
+
+    const lines = text.split('\n');
+    const content: ParagraphNodeV2[] = lines.map(line => {
+        const nodes = parseLine(line);
+
+        return {
+            type: 'paragraph',
+            ...(nodes.length > 0 ? { content: nodes } : {}),
+        };
+    });
+
+    return { type: 'doc', content };
+};
+
+/**
+ * Converts a box-annotations Reply to a threaded-annotations TextMessageType.
+ */
+export const replyToTextMessage = (reply: Reply): TextMessageTypeV2 => ({
+    author: {
+        email: reply.created_by?.login ?? '',
+        id: parseInt(reply.created_by?.id ?? '0', 10),
+        name: reply.created_by?.name ?? '',
+    },
+    createdAt: new Date(reply.created_at).getTime(),
+    id: reply.id,
+    message: deserializeMentionMarkup(reply.message),
+    permissions: {
+        canDelete: false,
+        canEdit: false,
+        canReply: true,
+        canResolve: false,
+    },
+});
+
+/**
+ * Converts an Annotation's description (root message) to a TextMessageType.
+ * The root message gets resolve permission from the annotation's permissions.
+ * Falls back to annotation-level fields when the description object is sparse
+ * (the list endpoint returns description with only { message }).
+ */
+const descriptionToTextMessage = (
+    annotation: Annotation,
+    reply: Reply,
+): TextMessageTypeV2 => ({
+    author: {
+        email: (reply.created_by ?? annotation.created_by)?.login ?? '',
+        id: parseInt((reply.created_by ?? annotation.created_by)?.id ?? '0', 10),
+        name: (reply.created_by ?? annotation.created_by)?.name ?? '',
+    },
+    createdAt: new Date(reply.created_at ?? annotation.created_at).getTime(),
+    id: reply.id ?? annotation.id,
+    message: deserializeMentionMarkup(reply.message),
+    permissions: {
+        canDelete: annotation.permissions?.can_delete ?? false,
+        canEdit: annotation.permissions?.can_edit ?? false,
+        canReply: true,
+        canResolve: annotation.permissions?.can_resolve ?? false,
+    },
+});
+
+/**
+ * Maps a full Annotation (description + replies) to an array of TextMessageType
+ * suitable for ThreadedAnnotationsV2.
+ */
+export const annotationToMessages = (annotation: Annotation): TextMessageTypeV2[] => {
+    const messages: TextMessageTypeV2[] = [];
+
+    if (annotation.description) {
+        messages.push(descriptionToTextMessage(annotation, annotation.description));
+    }
+
+    if (annotation.replies) {
+        annotation.replies.forEach(reply => {
+            messages.push(replyToTextMessage(reply));
+        });
+    }
+
+    return messages;
+};
+
+/**
+ * Converts a box-annotations Collaborator to a @box/user-selector UserContactType.
+ */
+export const collaboratorToUserContact = (collaborator: Collaborator): {
+    email: string;
+    id: number;
+    name: string;
+    value: string;
+} => {
+    const item = collaborator.item as UserMini | undefined;
+
+    return {
+        email: item?.email ?? item?.login ?? '',
+        id: parseInt(item?.id ?? collaborator.id, 10),
+        name: item?.name ?? collaborator.name,
+        value: collaborator.id,
+    };
+};

package/src/api/types.ts

@@ -1,4 +1,4 @@
-import { Annotation, Collaborator, NewAnnotation, Permissions, Token } from '../@types';
+import { Annotation, Collaborator, NewAnnotation, Permissions, Reply, Token } from '../@types';
 
 export type APICollection<R> = {
     entries: R[];
@@ -33,6 +33,23 @@ export interface AnnotationsAPI {
         errorCallback: (error: APIError) => void,
     ): Promise<void>;
 
+    createAnnotationReply(
+        fileId: string | null,
+        annotationId: string,
+        permissions: Permissions,
+        message: string,
+        successCallback: (result: Reply) => void,
+        errorCallback: (error: APIError) => void,
+    ): Promise<void>;
+
+    deleteAnnotation(
+        fileId: string | null,
+        annotationId: string,
+        permissions: Permissions,
+        successCallback: () => void,
+        errorCallback: (error: APIError) => void,
+    ): Promise<void>;
+
     getAnnotations(
         fileId: string | null,
         fileVersionId: string | null,
@@ -41,6 +58,16 @@ export interface AnnotationsAPI {
         errorCallback: (error: APIError) => void,
         limit?: number,
         shouldFetchAll?: boolean,
+        shouldFetchReplies?: boolean,
+    ): Promise<void>;
+
+    updateAnnotation(
+        fileId: string | null,
+        annotationId: string,
+        permissions: Permissions,
+        payload: { message?: string; status?: string },
+        successCallback: (result: Annotation) => void,
+        errorCallback: (error: APIError) => void,
     ): Promise<void>;
 
     destroy(): void;

package/src/common/BaseAnnotator.ts

@@ -94,11 +94,13 @@ export default class BaseAnnotator extends EventEmitter {
             },
             common: { color: initialColor, mode: initialMode },
             options: {
+                apiHost,
                 features,
                 fileId: file.id,
                 fileVersionId: fileOptionsVersionId ?? fileVersionId,
                 isCurrentFileVersion: !fileOptionsVersionId || fileOptionsVersionId === currentFileVersionId,
                 permissions: file.permissions,
+                token,
                 viewMode: initialViewMode,
             },
         };

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.tsx

@@ -8,8 +8,8 @@ import './BoundingBoxHighlightNav.scss';
 type Props = {
     currentIndex: number;
     total: number;
-    onPrev: (event: React.MouseEvent) => void;
-    onNext: (event: React.MouseEvent) => void;
+    onPrev: (event: React.MouseEvent | KeyboardEvent) => void;
+    onNext: (event: React.MouseEvent | KeyboardEvent) => void;
 };
 
 const BoundingBoxHighlightNav = ({ currentIndex, total, onPrev, onNext }: Props): JSX.Element => {
@@ -17,6 +17,25 @@ const BoundingBoxHighlightNav = ({ currentIndex, total, onPrev, onNext }: Props)
     const isPrevDisabled = currentIndex === 0;
     const isNextDisabled = currentIndex === total - 1;
 
+    React.useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent): void => {
+            if (event.key === 'ArrowLeft') {
+                event.stopPropagation();
+                if (!isPrevDisabled) {
+                    onPrev(event);
+                }
+            } else if (event.key === 'ArrowRight') {
+                event.stopPropagation();
+                if (!isNextDisabled) {
+                    onNext(event);
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown, { capture: true });
+        return () => document.removeEventListener('keydown', handleKeyDown, { capture: true });
+    }, [isPrevDisabled, isNextDisabled, onPrev, onNext]);
+
     return (
         <div className="ba-BoundingBoxHighlightNav" data-testid="ba-BoundingBoxHighlightNav">
             <button

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.tsx

@@ -40,14 +40,14 @@ const BoundingBoxHighlightRect = ({
         onSelect?.(id);
     };
 
-    const handlePrev = (event: React.MouseEvent): void => {
+    const handlePrev = (event: React.MouseEvent | KeyboardEvent): void => {
         event.stopPropagation();
         if (prevId) {
             onNavigate?.(prevId);
         }
     };
 
-    const handleNext = (event: React.MouseEvent): void => {
+    const handleNext = (event: React.MouseEvent | KeyboardEvent): void => {
         event.stopPropagation();
         if (nextId) {
             onNavigate?.(nextId);

package/src/components/Popups/PopupReply.tsx

@@ -3,21 +3,19 @@ import Popper from '@popperjs/core';
 import { useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
 import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
+
+import ReplyForm from '../ReplyForm';
+
+import { getRotation, getScale } from '../../store/options';
+
 import messages from './messages';
 import PopupBase from './PopupBase';
-import PopupReplyV2 from './PopupReplyV2';
-import ReplyForm from '../ReplyForm';
-import { getScale, getRotation } from '../../store/options';
 import { PopupReference } from './Popper';
 import './PopupReply.scss';
 
-type BaseProps = {
+export type Props = {
     className?: string;
-};
-
-type LegacyProps = BaseProps & {
     isPending: boolean;
-    isThreadedAnnotation?: false;
     onCancel: (text?: string) => void;
     onChange: (text?: string) => void;
     onSubmit: (text: string) => void;
@@ -25,18 +23,6 @@ type LegacyProps = BaseProps & {
     value?: string;
 };
 
-type ThreadedProps = BaseProps & {
-    isThreadedAnnotation: true;
-    isPending?: boolean;
-    onCancel?: (text?: string) => void;
-    onChange?: (text?: string) => void;
-    onSubmit?: (text: string) => void;
-    reference?: PopupReference;
-    value?: string;
-};
-
-export type Props = LegacyProps | ThreadedProps;
-
 const isIE = (): boolean => {
     const { userAgent } = navigator;
     return userAgent.indexOf('Trident/') > 0;
@@ -97,7 +83,7 @@ const getOptions = (): Partial<Popper.Options> => {
 export default function PopupReply(props: Props): JSX.Element {
     const intl = useIntl();
     const popupRef = React.useRef<PopupBase>(null);
-    const popupOptions = React.useRef<Partial<Popper.Options>>(getOptions()); // Keep the options reference the same between renders
+    const popupOptions = React.useRef<Partial<Popper.Options>>(getOptions());
     const rotation = useSelector(getRotation);
     const scale = useSelector(getScale);
 
@@ -109,13 +95,7 @@ export default function PopupReply(props: Props): JSX.Element {
         }
     }, [popupRef, rotation, scale]);
 
-    // TODO: PopupReplyV2 is a placeholder stub. Props (isPending, onCancel, etc.)
-    // are not yet forwarded and will need to be wired up when V2 is implemented.
-    if (props.isThreadedAnnotation) {
-        return <PopupReplyV2 />;
-    }
-
-    const { isPending, onCancel, onChange, onSubmit, value = '', isThreadedAnnotation: _, ...rest } = props as LegacyProps;
+    const { isPending, onCancel, onChange, onSubmit, value = '', ...rest } = props;
 
     return (
         <FocusTrap>

package/src/components/Popups/PopupV2.scss

@@ -0,0 +1,25 @@
+.ba-PopupV2 {
+    z-index: 1;
+    width: 348px;
+}
+
+// Specificity must beat .ba selectors from box-ui-elements globals
+// (forms, buttons, links) that cascade into threaded-annotations components.
+.ba .ba-PopupV2 {
+    div[contenteditable='true'],
+    div[contenteditable='true']:hover,
+    div[contenteditable='true']:focus {
+        width: auto;
+        padding: 0;
+        color: inherit;
+        border: none;
+        border-radius: 0;
+        outline: none;
+        box-shadow: none;
+        transition: none;
+    }
+
+    button svg {
+        pointer-events: auto;
+    }
+}