box-annotations 5.2.1-beta.2 → 5.2.1-beta.20

package/src/document/DocumentAnnotator.ts

@@ -8,18 +8,25 @@ import {
     HighlightManager,
     isHighlight,
 } from '../highlight';
+import { BoundingBoxHighlightManager } from '../boundingBoxHighlight';
 import { centerRegion, isRegion, RegionCreationManager, RegionManager } from '../region';
 import { Event } from '../@types';
 import { getAnnotation } from '../store/annotations';
+import { BoundingBox } from '../store/boundingBoxHighlights';
 import { getSelection } from './docUtil';
 import { Manager } from '../common/BaseManager';
-import { getFileId, getIsCurrentFileVersion, Mode } from '../store';
+import { getFileId, getIsCurrentFileVersion, getRotation, getViewMode, Mode } from '../store';
 import { scrollToLocation } from '../utils/scroll';
 import './DocumentAnnotator.scss';
 
+import type { ViewMode } from '../store/options/types';
+
 // Pdf.js textLayer enhancement requires waiting for 300ms (they hardcode this magic number)
 const TEXT_LAYER_ENHANCEMENT = 300;
 
+// Vertical padding on each page element as provided by Preview SDK (see DocumentAnnotator.scss)
+const PAGE_PADDING = 15;
+
 export default class DocumentAnnotator extends BaseAnnotator {
     annotatedEl?: HTMLElement;
 
@@ -27,6 +34,9 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
     managers: Map<number, Set<Manager>> = new Map();
 
+    /** Tracks which view mode the current managers were created for. Used to destroy/recreate when switching. */
+    private managersViewMode: ViewMode | null = null;
+
     constructor(options: Options) {
         super(options);
 
@@ -53,13 +63,22 @@ export default class DocumentAnnotator extends BaseAnnotator {
         return this.containerEl?.querySelector('.bp-doc');
     }
 
+    /** Destroys all managers and clears the cache. Call when switching view modes. */
+    private clearManagers(): void {
+        this.managers.forEach(managers => managers.forEach(manager => manager.destroy()));
+        this.managers.clear();
+        this.managersViewMode = null;
+    }
+
     getPageManagers(pageEl: HTMLElement): Set<Manager> {
         const fileId = getFileId(this.store.getState());
         const isCurrentFileVersion = getIsCurrentFileVersion(this.store.getState());
         const pageNumber = this.getPageNumber(pageEl);
         const pageReferenceEl = this.getPageReference(pageEl);
-        const managers = this.managers.get(pageNumber) || new Set();
         const resinTags = { fileid: fileId, iscurrent: isCurrentFileVersion };
+        const viewMode = getViewMode(this.store.getState());
+
+        const managers = this.managers.get(pageNumber) || new Set();
         let destroyManagers = false;
 
         // If a referenced page element doesn't exist, destroy all managers to keep them in sync
@@ -77,8 +96,14 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
         // Lazily instantiate managers as pages are added or re-rendered
         if (managers.size === 0) {
-            managers.add(new PopupManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
-            managers.add(new DrawingManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+            if (viewMode === 'boundingBoxes') {
+                managers.add(new BoundingBoxHighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+                return managers;
+            }
+
+            // Annotations mode
+            managers.add(new PopupManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new DrawingManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
 
             const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
 
@@ -93,8 +118,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
                 );
             }
 
-            managers.add(new HighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
-
+            managers.add(new HighlightManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
             managers.add(new RegionManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
 
             const canvasLayerEl = pageEl.querySelector<HTMLElement>('.canvasWrapper');
@@ -132,7 +156,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
     }
 
     handleChangeMode = ({ mode }: { mode: Mode }): void => {
-        if (!this.annotatedEl) {
+        if (!this.annotatedEl || getViewMode(this.store.getState()) === 'boundingBoxes') {
             return;
         }
 
@@ -146,6 +170,13 @@ export default class DocumentAnnotator extends BaseAnnotator {
     };
 
     render(): void {
+        const viewMode = getViewMode(this.store.getState());
+
+        if (this.managersViewMode !== null && this.managersViewMode !== viewMode) {
+            this.clearManagers();
+        }
+        this.managersViewMode = viewMode;
+
         this.getPages()
             .filter(({ dataset }) => dataset.loaded && dataset.pageNumber)
             .forEach(pageEl => this.renderPage(pageEl));
@@ -153,17 +184,51 @@ export default class DocumentAnnotator extends BaseAnnotator {
         this.postRender();
     }
 
+    public postRender(): void {
+        // DeselectManager is only needed for annotation creation; skip in bounding box mode
+        if (getViewMode(this.store.getState()) === 'boundingBoxes') {
+            if (this.deselectManager) {
+                this.deselectManager.destroy();
+                this.deselectManager = null;
+            }
+            return;
+        }
+        super.postRender();
+    }
+
     renderPage(pageEl: HTMLElement): void {
         const pageManagers = this.getPageManagers(pageEl);
         const pageNumber = this.getPageNumber(pageEl);
+        const rotation = getRotation(this.store.getState()) || 0;
+
+        // Calculate original (unrotated) page dimensions for annotation layer sizing
+        const pageWidth = pageEl.clientWidth;
+        const pageHeight = pageEl.clientHeight - PAGE_PADDING * 2;
+        const isOrthogonal = rotation % 180 !== 0;
+        const origWidth = isOrthogonal ? pageHeight : pageWidth;
+        const origHeight = isOrthogonal ? pageWidth : pageHeight;
 
         // Render annotations for every page
-        pageManagers.forEach(manager =>
+        pageManagers.forEach(manager => {
+            // Apply rotation transform to annotation layers
+            if (rotation) {
+                manager.style({
+                    height: `${origHeight}px`,
+                    left: '50%',
+                    top: '50%',
+                    transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
+                    width: `${origWidth}px`,
+                });
+            } else {
+                manager.style({height: '', left: '', top: '', transform: '', width: ''});
+            }
+
             manager.render({
+                callbacks: { onCopyLink: this.onCopyLink },
                 intl: this.intl,
                 store: this.store,
-            }),
-        );
+            });
+        });
 
         this.managers.set(pageNumber, pageManagers);
     }
@@ -194,4 +259,8 @@ export default class DocumentAnnotator extends BaseAnnotator {
             scrollToLocation(this.annotatedEl, annotationPageEl, { offsets });
         }
     }
+
+    protected getScrollReferenceForHighlight(highlight: BoundingBox): HTMLElement | undefined {
+        return this.getPage(highlight.pageNumber);
+    }
 }

package/src/document/docUtil.ts

@@ -1,4 +1,5 @@
 type Selection = {
+    containerEl: HTMLElement;
     containerRect: DOMRect;
     hasError?: boolean;
     location: number;
@@ -61,5 +62,5 @@ export function getSelection(): Selection | null {
         location = getPageNumber(selection.focusNode as Element) ?? endPage;
     }
 
-    return { containerRect: containerEl.getBoundingClientRect(), hasError, location, range };
+    return { containerEl: containerEl as HTMLElement, containerRect: containerEl.getBoundingClientRect(), hasError, location, range };
 }

package/src/drawing/DrawingAnnotations.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import DecoratedDrawingPath from './DecoratedDrawingPath';
 import DrawingList from './DrawingList';
@@ -22,8 +23,10 @@ export type Props = {
     drawnPathGroups: Array<PathGroup>;
     isCreating: boolean;
     location: number;
+    popupPortalEl?: HTMLElement | null;
     redoDrawingPathGroup: () => void;
     resetDrawing: () => void;
+    rotation: number;
     setActiveAnnotationId: (annotationId: string | null) => void;
     setReferenceId: (uuid: string) => void;
     setStaged: (staged: CreatorItemDrawing | null) => void;
@@ -45,8 +48,10 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         drawnPathGroups,
         isCreating,
         location,
+        popupPortalEl,
         redoDrawingPathGroup,
         resetDrawing,
+        rotation,
         setActiveAnnotationId,
         setReferenceId,
         setStaged,
@@ -170,23 +175,27 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
                     color={color}
                     onStart={handleStart}
                     onStop={handleStop}
+                    rotation={rotation}
                 />
             )}
 
-            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && (
-                <PopupDrawingToolbar
-                    ref={popupDrawingToolbarRef}
-                    canComment={hasDrawnPathGroups}
-                    canRedo={hasStashedPathGroups}
-                    canUndo={hasDrawnPathGroups}
-                    className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
-                    onDelete={handleDelete}
-                    onRedo={handleRedo}
-                    onReply={handleReply}
-                    onUndo={handleUndo}
-                    reference={drawingSVGGroup}
-                />
-            )}
+            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && (() => {
+                const toolbar = (
+                    <PopupDrawingToolbar
+                        ref={popupDrawingToolbarRef}
+                        canComment={hasDrawnPathGroups}
+                        canRedo={hasStashedPathGroups}
+                        canUndo={hasDrawnPathGroups}
+                        className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
+                        onDelete={handleDelete}
+                        onRedo={handleRedo}
+                        onReply={handleReply}
+                        onUndo={handleUndo}
+                        reference={drawingSVGGroup}
+                    />
+                );
+                return popupPortalEl ? ReactDOM.createPortal(toolbar, popupPortalEl) : toolbar;
+            })()}
         </>
     );
 };

package/src/drawing/DrawingAnnotationsContainer.tsx

@@ -18,6 +18,7 @@ import {
     getAnnotationsForLocation,
     getColor,
     getCreatorStatus,
+    getRotation,
     Mode,
     setActiveAnnotationIdAction,
     setReferenceIdAction,
@@ -34,6 +35,7 @@ export type Props = {
     canShowPopupToolbar: boolean;
     drawnPathGroups: Array<PathGroup>;
     isCreating: boolean;
+    rotation: number;
     stashedPathGroups: Array<PathGroup>;
 };
 
@@ -47,6 +49,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
         canShowPopupToolbar: creatorStatus === CreatorStatus.started,
         drawnPathGroups: getDrawingDrawnPathGroupsForLocation(state, location),
         isCreating: getAnnotationMode(state) === Mode.DRAWING && creatorStatus !== CreatorStatus.pending,
+        rotation: getRotation(state),
         stashedPathGroups: getStashedDrawnPathGroupsForLocation(state, location),
     };
 };

package/src/drawing/DrawingCreator.tsx

@@ -7,6 +7,7 @@ import DrawingSVG, { DrawingSVGRef } from './DrawingSVG';
 import PointerCapture, { PointerCaptureRef, Status as DrawingStatus } from '../components/PointerCapture';
 import { getDrawingCursor } from './DrawingCursor';
 import { getPathCommands } from './drawingUtil';
+import { getElementLocalPosition } from '../utils/rotate';
 import { PathGroup, Position } from '../@types';
 import './DrawingCreator.scss';
 
@@ -15,6 +16,7 @@ export type Props = {
     color?: string;
     onStart: () => void;
     onStop: (pathGroup: PathGroup) => void;
+    rotation?: number;
     size?: number;
 };
 
@@ -26,6 +28,7 @@ export default function DrawingCreator({
     color = defaultStrokeColor,
     onStart,
     onStop,
+    rotation = 0,
     size = defaultStrokeSize,
 }: Props): JSX.Element {
     const [drawingStatus, setDrawingStatus] = React.useState<DrawingStatus>(DrawingStatus.init);
@@ -45,7 +48,9 @@ export default function DrawingCreator({
             return [];
         }
 
-        const { height, width } = creatorEl.getBoundingClientRect();
+        // Get the element's dimensions (before any rotation is applied)
+        const width = creatorEl.offsetWidth;
+        const height = creatorEl.offsetHeight;
         const { size: minSize } = stroke;
         const MAX_X = width - minSize;
         const MAX_Y = height - minSize;
@@ -56,21 +61,9 @@ export default function DrawingCreator({
         }));
     }, [stroke]);
 
-    const getPosition = (x: number, y: number): [number, number] => {
-        const { current: creatorEl } = creatorElRef;
-
-        if (!creatorEl) {
-            return [x, y];
-        }
-
-        // Calculate the new position based on the mouse position less the page offset
-        const { left, top } = creatorEl.getBoundingClientRect();
-        return [x - left, y - top];
-    };
-
     // Drawing Lifecycle Callbacks
     const startDraw = (x: number, y: number): void => {
-        const [x1, y1] = getPosition(x, y);
+        const [x1, y1] = getElementLocalPosition(x, y, creatorElRef.current, rotation);
 
         setDrawingStatus(DrawingStatus.dragging);
 
@@ -100,7 +93,7 @@ export default function DrawingCreator({
 
     const updateDraw = React.useCallback(
         (x: number, y: number): void => {
-            const [x2, y2] = getPosition(x, y);
+            const [x2, y2] = getElementLocalPosition(x, y, creatorElRef.current, rotation);
             const { current: points } = capturedPointsRef;
 
             points.push({ x: x2, y: y2 });
@@ -111,7 +104,7 @@ export default function DrawingCreator({
                 onStart();
             }
         },
-        [drawingStatus, onStart, setDrawingStatus],
+        [drawingStatus, onStart, rotation, setDrawingStatus],
     );
 
     // Event Handlers

package/src/drawing/DrawingManager.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import BaseManager, { Props } from '../common/BaseManager';
+import BaseManager, { Options as BaseOptions, Props } from '../common/BaseManager';
 import DrawingAnnotationsContainer from './DrawingAnnotationsContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class DrawingListManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--drawing');
         this.reactEl.dataset.testid = 'ba-Layer--drawing';
@@ -14,6 +25,6 @@ export default class DrawingListManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<DrawingAnnotationsContainer referenceEl={this.referenceEl} targetType={this.targetType} location={this.location} {...props} />);
+        this.root.render(<DrawingAnnotationsContainer referenceEl={this.referenceEl} targetType={this.targetType} location={this.location} popupPortalEl={this.popupPortalEl} {...props} />);
     }
 }

package/src/drawing/DrawingTarget.tsx

@@ -64,6 +64,7 @@ export const DrawingTarget = (props: Props, ref: React.Ref<DrawingTargetRef>): J
         <a
             ref={ref}
             className={classNames('ba-DrawingTarget', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-resin-itemid={annotationId}
             data-resin-target="highlightDrawing"
             data-testid={`ba-AnnotationTarget-${annotationId}`}

package/src/highlight/HighlightAnnotations.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import ReactDOM from 'react-dom';
 import HighlightCanvas from './HighlightCanvas';
 import HighlightList from './HighlightList';
 import HighlightSvg from './HighlightSvg';
@@ -20,6 +21,8 @@ type Props = {
     isPromoting: boolean;
     isSelecting: boolean;
     location: number;
+    popupPortalEl?: HTMLElement | null;
+    rotation: number;
     selection: SelectionItem | null;
     setActiveAnnotationId: (annotationId: string | null) => void;
     setIsPromoting: (isPromoting: boolean) => void;
@@ -38,6 +41,8 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
         isPending = false,
         isPromoting = false,
         isSelecting = false,
+        popupPortalEl,
+        rotation,
         selection,
         setActiveAnnotationId,
         setIsPromoting,
@@ -121,22 +126,30 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
             )}
 
             {/* Layer 3a: Annotations promoter to promote selection to staged */}
-            {!isCreating && selection && !selection.hasError && (
-                <div className="ba-HighlightAnnotations-popup">
-                    <PopupHighlight
-                        onCancel={handleCancel}
-                        onSubmit={handlePromote}
-                        shape={getBoundingRect(selection.rects)}
-                    />
-                </div>
-            )}
+            {!isCreating && selection && !selection.hasError && (() => {
+                const popupShape = selection.popupRect || getBoundingRect(selection.rects);
+                const popup = (
+                    <div className="ba-HighlightAnnotations-popup">
+                        <PopupHighlight
+                            onCancel={handleCancel}
+                            onSubmit={handlePromote}
+                            shape={popupShape}
+                        />
+                    </div>
+                );
+                return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
+            })()}
 
             {/* Layer 3b: Highlight error popup */}
-            {selection && selection.hasError && (
-                <div className="ba-HighlightAnnotations-popup">
-                    <PopupHighlightError onCancel={handleCancel} shape={getBoundingRect(selection.rects)} />
-                </div>
-            )}
+            {selection && selection.hasError && (() => {
+                const popupShape = selection.popupRect || getBoundingRect(selection.rects);
+                const popup = (
+                    <div className="ba-HighlightAnnotations-popup">
+                        <PopupHighlightError onCancel={handleCancel} shape={popupShape} />
+                    </div>
+                );
+                return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
+            })()}
         </>
     );
 };

package/src/highlight/HighlightContainer.tsx

@@ -13,6 +13,7 @@ import {
     getCreatorStatus,
     getIsPromoting,
     getIsSelecting,
+    getRotation,
     getSelectionForLocation,
     isCreatorStagedHighlight,
     Mode,
@@ -33,6 +34,7 @@ export type Props = {
     isPending: boolean;
     isPromoting: boolean;
     isSelecting: boolean;
+    rotation: number;
     selection: SelectionItem | null;
     staged: CreatorItemHighlight | null;
 };
@@ -47,6 +49,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
         isPending: getCreatorStatus(state) === CreatorStatus.pending,
         isPromoting: getIsPromoting(state),
         isSelecting: getIsSelecting(state),
+        rotation: getRotation(state),
         selection: getSelectionForLocation(state, location),
         staged: isCreatorStagedHighlight(staged) ? staged : null,
     };

package/src/highlight/HighlightCreatorManager.ts

@@ -1,6 +1,7 @@
 import {
     AppStore,
     getIsSelecting,
+    getRotation,
     SelectionArg as Selection,
     setIsSelectingAction,
     setSelectionAction,
@@ -41,18 +42,18 @@ export default class HighlightCreatorManager implements Manager {
         this.store.dispatch(setSelectionAction(null));
 
         this.referenceEl.addEventListener('mousedown', this.handleMouseDown);
-        this.referenceEl.addEventListener('mouseup', this.handleMouseUp);
+        document.addEventListener('mouseup', this.handleMouseUp);
     }
 
-    style(styles: Partial<CSSStyleDeclaration>): CSSStyleDeclaration {
-        return Object.assign(this.referenceEl.style, styles);
+    style(): CSSStyleDeclaration {
+        return this.referenceEl.style;
     }
 
     destroy(): void {
         clearTimeout(this.selectionChangeTimer);
 
         this.referenceEl.removeEventListener('mousedown', this.handleMouseDown);
-        this.referenceEl.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('mouseup', this.handleMouseUp);
     }
 
     handleMouseDown = ({ buttons }: MouseEvent): void => {
@@ -72,7 +73,9 @@ export default class HighlightCreatorManager implements Manager {
         }
 
         this.selectionChangeTimer = window.setTimeout(() => {
-            this.store.dispatch(setSelectionAction(this.getSelection()));
+            const selection = this.getSelection();
+            const rotation = getRotation(this.store.getState());
+            this.store.dispatch(setSelectionAction(selection ? { ...selection, rotation } : null));
             this.store.dispatch(setIsSelectingAction(false));
         }, this.selectionChangeDelay);
     };

package/src/highlight/HighlightListener.ts

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { AppStore, getIsSelecting, SelectionArg as Selection, setSelectionAction } from '../store';
+import { AppStore, getIsSelecting, getRotation, SelectionArg as Selection, setSelectionAction } from '../store';
 
 export type Options = {
     getSelection: () => Selection | null;
@@ -30,7 +30,9 @@ export default class HighlightListener {
             return;
         }
 
-        this.store.dispatch(setSelectionAction(this.getSelection()));
+        const selection = this.getSelection();
+        const rotation = getRotation(this.store.getState());
+        this.store.dispatch(setSelectionAction(selection ? { ...selection, rotation } : null));
     };
 
     debounceHandleSelectionChange = debounce(this.handleSelectionChange, SELECTION_CHANGE_DEBOUNCE);

package/src/highlight/HighlightManager.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import BaseManager, { Props } from '../common/BaseManager';
+import BaseManager, { Options as BaseOptions, Props } from '../common/BaseManager';
 import HighlightContainer from './HighlightContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class HighlightManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--highlight');
         this.reactEl.dataset.testid = 'ba-Layer--highlight';
@@ -14,6 +25,6 @@ export default class HighlightManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<HighlightContainer location={this.location} {...props} />);
+        this.root.render(<HighlightContainer location={this.location} popupPortalEl={this.popupPortalEl} {...props} />);
     }
 }

package/src/highlight/HighlightTarget.tsx

@@ -69,6 +69,7 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
         <a
             ref={ref}
             className={classNames('ba-HighlightTarget', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-ba-reference-id={uuid}
             data-resin-itemid={annotationId}
             data-resin-target="highlightText"

package/src/icons/ChevronLeft.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+function ChevronLeft(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            data-testid="ChevronLeft"
+            fill="none"
+            focusable="false"
+            height="1em"
+            role="img"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <path
+                d="M13.293 4.293a1 1 0 1 1 1.414 1.414L8.414 12l6.293 6.293.068.076a1 1 0 0 1-1.406 1.406l-.076-.068L7 13.414a2 2 0 0 1 0-2.828l6.293-6.293Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}
+
+export default ChevronLeft;

package/src/icons/ChevronRight.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+function ChevronRight(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            data-testid="ChevronRight"
+            fill="none"
+            focusable="false"
+            height="1em"
+            role="img"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <path
+                d="M9.293 4.293a1 1 0 0 1 1.414 0L17 10.586a2 2 0 0 1 0 2.828l-6.293 6.293a1 1 0 0 1-1.414-1.414L15.586 12 9.293 5.707a1 1 0 0 1 0-1.414Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}
+
+export default ChevronRight;