@atlaskit/editor-common 76.24.5 → 76.25.1

package/dist/types/media-inline/media-inline-image-card.d.ts

@@ -1,9 +1,11 @@
 /** @jsx jsx */
 import type { FC } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { FileIdentifier, MediaClient } from '@atlaskit/media-client';
 export interface MediaInlineImageCardProps {
     identifier: FileIdentifier;
     mediaClient: MediaClient;
     isSelected?: boolean;
 }
+export declare const MediaInlineImageCardInternal: FC<MediaInlineImageCardProps & WrappedComponentProps>;
 export declare const MediaInlineImageCard: FC<MediaInlineImageCardProps>;

package/dist/types/media-inline/views/constants.d.ts

@@ -0,0 +1,2 @@
+/** Height threshold that determines icon size to be small or medium */
+export declare const ICON_SIZE_THRESOLD = 24;

package/dist/types/media-inline/views/error-view.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    message: string;
+    /** Error icon. Default to document icon. */
+    icon?: React.ReactNode;
+    testId?: string;
+    /** Container height */
+    height?: number;
+};
+export declare const InlineImageCardErrorView: FC<Props>;
+export {};

package/dist/types/media-inline/views/frame.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+interface FrameViewProps {
+    children?: React.ReactNode;
+    /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
+    testId?: string;
+}
+export declare const Frame: FC<FrameViewProps>;
+export {};

package/dist/types/media-inline/views/icon-wrapper.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    children?: React.ReactNode;
+};
+export declare const IconWrapper: FC<Props>;
+export {};

package/dist/types/media-inline/views/loading-view.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    title?: string;
+    testId?: string;
+    /** Container height */
+    height?: number;
+};
+export declare const InlineImageCardLoadingView: FC<Props>;
+export {};

package/dist/types/media-inline/views/wrapper.d.ts

@@ -0,0 +1 @@
+export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/dist/types/messages/insert-block.d.ts

@@ -169,4 +169,14 @@ export declare const toolbarInsertBlockMessages: {
         defaultMessage: string;
         description: string;
     };
+    recordVideo: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    recordVideoDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/messages/media-inline-card.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    unableToLoadContent: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    failedToUpload: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/provider-factory/quick-insert-provider.d.ts

@@ -4,7 +4,7 @@ import type { TypeAheadItem } from '../types/type-ahead';
 export type QuickInsertActionInsert = (node?: Node | Record<string, any> | string, opts?: {
     selectInlineNode?: boolean;
 }) => Transaction;
-export type QuickInsertItemId = 'hyperlink' | 'table' | 'helpdialog' | 'date' | 'media' | 'blockquote' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'codeblock' | 'unorderedList' | 'feedbackdialog' | 'orderedList' | 'rule' | 'status' | 'mention' | 'emoji' | 'action' | 'decision' | 'infopanel' | 'notepanel' | 'successpanel' | 'warningpanel' | 'errorpanel' | 'custompanel' | 'layout' | 'expand' | 'placeholderText' | 'datasource';
+export type QuickInsertItemId = 'hyperlink' | 'table' | 'helpdialog' | 'date' | 'media' | 'blockquote' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'codeblock' | 'unorderedList' | 'feedbackdialog' | 'orderedList' | 'rule' | 'status' | 'mention' | 'emoji' | 'action' | 'decision' | 'infopanel' | 'notepanel' | 'successpanel' | 'warningpanel' | 'errorpanel' | 'custompanel' | 'layout' | 'expand' | 'placeholderText' | 'datasource' | 'loom';
 export type QuickInsertItem = TypeAheadItem & {
     /** other names used to find the item */
     keywords?: Array<string>;
@@ -14,13 +14,13 @@ export type QuickInsertItem = TypeAheadItem & {
     priority?: number;
     /** optional identifier */
     id?: QuickInsertItemId;
-    /** indicates if the item will be highlighted where approppriated (plus menu for now) */
+    /** indicates if the item will be highlighted where appropriate (plus menu for now) */
     featured?: boolean;
     /**
      * What to do on insert
      *
      * @note This logic is only called if the item is accessed without a search
-     * If a search occurs -- then a seperate insert action is called
+     * If a search occurs -- then a separate insert action is called
      * @see packages/editor/editor-core/src/plugins/insert-block/ui/ToolbarInsertBlock/index.tsx for details
      */
     action: (insert: QuickInsertActionInsert, state: EditorState) => Transaction | false;

package/dist/types/quick-insert/assets/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import Loadable from 'react-loadable';
-import { HeadingLevels, IconProps } from '../../types';
+import type { HeadingLevels, IconProps } from '../../types';
 export { default as IconCustomPanel } from './custom-panel';
 export { default as IconFallback } from './fallback';
 export declare const IconAction: React.ComponentType<IconProps> & Loadable.LoadableComponent;
@@ -30,3 +30,4 @@ export declare const IconFeedback: React.ComponentType<IconProps> & Loadable.Loa
 export declare const IconExpand: React.ComponentType<IconProps> & Loadable.LoadableComponent;
 export declare const IconDatasourceJiraIssue: React.ComponentType<IconProps> & Loadable.LoadableComponent;
 export declare const IconDatasourceAssetsObjects: React.ComponentType<IconProps> & Loadable.LoadableComponent;
+export declare const IconLoom: React.ComponentType<IconProps> & Loadable.LoadableComponent;

package/dist/types/quick-insert/assets/loom.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function IconLayout(): JSX.Element;

package/dist/types/quick-insert/index.d.ts

@@ -1,2 +1,2 @@
-export { IconAction, IconCode, IconDate, IconDecision, IconDivider, IconEmoji, IconImages, IconLayout, IconLink, IconListNumber, IconList, IconMention, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanel, IconQuote, IconStatus, IconHeading, IconFeedback, IconExpand, IconCustomPanel, IconFallback, IconDatasourceJiraIssue, IconDatasourceAssetsObjects, } from './assets';
+export { IconAction, IconCode, IconDate, IconDecision, IconDivider, IconEmoji, IconImages, IconLayout, IconLink, IconListNumber, IconList, IconMention, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanel, IconQuote, IconStatus, IconHeading, IconFeedback, IconExpand, IconCustomPanel, IconFallback, IconDatasourceJiraIssue, IconDatasourceAssetsObjects, IconLoom, } from './assets';
 export { memoProcessQuickInsertItems, find } from './utils';

package/dist/types-ts4.5/analytics/types/enums.d.ts

@@ -132,7 +132,10 @@ export declare enum ACTION {
     CREATE_NOT_ALLOWED = "createNotAllowed",
     UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED = "unsupportedContentLevelsTrackingSucceeded",
     UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED = "unsupportedContentLevelsTrackingErrored",
-    UNSUPPORTED_TOOLTIP_VIEWED = "viewed"
+    UNSUPPORTED_TOOLTIP_VIEWED = "viewed",
+    RECORD_VIDEO = "recordVideo",
+    INSERT_VIDEO = "insertVideo",
+    RECORD_VIDEO_FAILED = "recordVideoFailed"
 }
 export declare enum INPUT_METHOD {
     ASCII = "ascii",
@@ -213,7 +216,8 @@ export declare enum ACTION_SUBJECT {
     RENDERER = "renderer",
     ANCHOR_LINK = "anchorLink",
     LINK = "link",
-    TOOLTIP = "tooltip"
+    TOOLTIP = "tooltip",
+    LOOM = "loom"
 }
 export declare enum ACTION_SUBJECT_ID {
     ACTION = "action",

package/dist/types-ts4.5/analytics/types/events.d.ts

@@ -17,6 +17,7 @@ import type { GeneralEventPayload } from './general-events';
 import type { InsertEventPayload } from './insert-events';
 import type { CreateLinkInlineDialogEventPayload, EditLinkToolbarAEP, OpenSettingsToolbarAEP, UnlinkToolbarAEP } from './link-tool-bar-events';
 import type { ListEventPayload } from './list-events';
+import type { LoomEventPayload } from './loom-events';
 import type { MediaEventPayload } from './media-events';
 import type { NodeEventPayload } from './node-events';
 import type { PasteEventPayload } from './paste-events';
@@ -34,7 +35,7 @@ export type SimplifiedNode = {
     marks?: string[];
     content?: SimplifiedNode[];
 };
-export type AnalyticsEventPayload<T = void> = AvatarEventPayload | GeneralEventPayload<T> | FormatEventPayload | SubstituteEventPayload | InsertEventPayload | NodeEventPayload | MediaEventPayload | TableEventPayload | PasteEventPayload | CutCopyEventPayload | ErrorEventPayload | ExperimentalEventPayload | FindReplaceEventPayload | DateEventPayload | SelectionEventPayload | ListEventPayload | ConfigPanelEventPayload | ElementBrowserEventPayload | CreateLinkInlineDialogEventPayload | UnsupportedContentPayload | ExtensionEventPayload | TransactionEventPayload | TypeAheadPayload | UnlinkToolbarAEP | EditLinkToolbarAEP | OpenSettingsToolbarAEP | CustomPanelEventPayload | FeatureExposureAEP | NewCollabSyncUpErrorAEP | UnsupportedContentTooltipPayload | ReferentialityEventPayload;
+export type AnalyticsEventPayload<T = void> = AvatarEventPayload | GeneralEventPayload<T> | FormatEventPayload | SubstituteEventPayload | InsertEventPayload | NodeEventPayload | MediaEventPayload | TableEventPayload | PasteEventPayload | CutCopyEventPayload | ErrorEventPayload | ExperimentalEventPayload | FindReplaceEventPayload | DateEventPayload | SelectionEventPayload | ListEventPayload | ConfigPanelEventPayload | ElementBrowserEventPayload | CreateLinkInlineDialogEventPayload | UnsupportedContentPayload | ExtensionEventPayload | TransactionEventPayload | TypeAheadPayload | UnlinkToolbarAEP | EditLinkToolbarAEP | OpenSettingsToolbarAEP | CustomPanelEventPayload | FeatureExposureAEP | NewCollabSyncUpErrorAEP | UnsupportedContentTooltipPayload | ReferentialityEventPayload | LoomEventPayload;
 type CustomPanelEventPayload = TrackAEP<ACTION.CHANGED_BACKGROUND_COLOR | ACTION.CHANGED_ICON | ACTION.REMOVE_ICON, ACTION_SUBJECT.PANEL, ACTION_SUBJECT_ID.PANEL, {
     previousColor: string;
     newColor: string;

package/dist/types-ts4.5/analytics/types/loom-events.d.ts

@@ -0,0 +1,19 @@
+import type { SDKUnsupportedReasons } from '@loomhq/record-sdk';
+import type { ACTION, ACTION_SUBJECT, INPUT_METHOD } from './enums';
+import type { OperationalAEP, TrackAEP } from './utils';
+type LoomInitialisedAEP = OperationalAEP<ACTION.INITIALISED, ACTION_SUBJECT.LOOM, undefined, undefined, undefined>;
+type LoomDisabledAEP = OperationalAEP<ACTION.ERRORED, ACTION_SUBJECT.LOOM, undefined, {
+    error?: SDKUnsupportedReasons;
+}, undefined>;
+type RecordVideoAEP = TrackAEP<ACTION.RECORD_VIDEO, ACTION_SUBJECT.LOOM, undefined, {
+    inputMethod: INPUT_METHOD;
+}, undefined>;
+type RecordVideoFailedAEP = TrackAEP<ACTION.RECORD_VIDEO_FAILED, ACTION_SUBJECT.LOOM, undefined, {
+    inputMethod: INPUT_METHOD;
+    error?: SDKUnsupportedReasons;
+}, undefined>;
+type InsertVideoAEP = TrackAEP<ACTION.INSERT_VIDEO, ACTION_SUBJECT.LOOM, undefined, {
+    duration?: number;
+}, undefined>;
+export type LoomEventPayload = LoomInitialisedAEP | LoomDisabledAEP | RecordVideoAEP | RecordVideoFailedAEP | InsertVideoAEP;
+export {};

package/dist/types-ts4.5/analytics/types/toolbar-button.d.ts

@@ -15,7 +15,8 @@ export declare enum TOOLBAR_ACTION_SUBJECT_ID {
     UNDO = "undo",
     REDO = "redo",
     INDENT = "indent",
-    OUTDENT = "outdent"
+    OUTDENT = "outdent",
+    RECORD_VIDEO = "recordVideo"
 }
 type ToolbarButtonClickedAEP = UIAEP<ACTION.CLICKED, ACTION_SUBJECT.TOOLBAR_BUTTON, undefined, {}, undefined>;
 export type ToolbarEventPayload = ToolbarButtonClickedAEP;

package/dist/types-ts4.5/card/types.d.ts

@@ -15,7 +15,7 @@ export interface OptionConfig {
     tooltip?: string;
 }
 export type CardReplacementInputMethod = INPUT_METHOD.CLIPBOARD | INPUT_METHOD.AUTO_DETECT | INPUT_METHOD.FORMATTING | INPUT_METHOD.MANUAL | INPUT_METHOD.TYPEAHEAD | INPUT_METHOD.FLOATING_TB;
-export type QueueCardsFromTransactionAction = (state: EditorState, tr: Transaction, source: CardReplacementInputMethod, analyticsAction?: ACTION, normalizeLinkText?: boolean, sourceEvent?: UIAnalyticsEvent | null | undefined) => Transaction;
+export type QueueCardsFromTransactionAction = (state: EditorState, tr: Transaction, source: CardReplacementInputMethod, analyticsAction?: ACTION, normalizeLinkText?: boolean, sourceEvent?: UIAnalyticsEvent | null | undefined, appearance?: CardAppearance) => Transaction;
 export type HideLinkToolbarAction = (tr: Transaction) => Transaction;
 export type ChangeSelectedCardToLink = (text?: string, href?: string, sendAnalytics?: boolean, node?: Node, pos?: number, editorAnalyticsApi?: EditorAnalyticsAPI) => Command;
 export type SetSelectedCardAppearance = (appearance: CardAppearance, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;

package/dist/types-ts4.5/media-inline/inline-image-wrapper.d.ts

@@ -2,6 +2,7 @@
 import type { FC, ReactElement } from 'react';
 type Prop = {
     children: ReactElement;
+    isSelected?: boolean;
 };
 export declare const InlineImageWrapper: FC<Prop>;
 export {};

package/dist/types-ts4.5/media-inline/media-inline-image-card.d.ts

@@ -1,9 +1,11 @@
 /** @jsx jsx */
 import type { FC } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { FileIdentifier, MediaClient } from '@atlaskit/media-client';
 export interface MediaInlineImageCardProps {
     identifier: FileIdentifier;
     mediaClient: MediaClient;
     isSelected?: boolean;
 }
+export declare const MediaInlineImageCardInternal: FC<MediaInlineImageCardProps & WrappedComponentProps>;
 export declare const MediaInlineImageCard: FC<MediaInlineImageCardProps>;

package/dist/types-ts4.5/media-inline/views/constants.d.ts

@@ -0,0 +1,2 @@
+/** Height threshold that determines icon size to be small or medium */
+export declare const ICON_SIZE_THRESOLD = 24;

package/dist/types-ts4.5/media-inline/views/error-view.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    message: string;
+    /** Error icon. Default to document icon. */
+    icon?: React.ReactNode;
+    testId?: string;
+    /** Container height */
+    height?: number;
+};
+export declare const InlineImageCardErrorView: FC<Props>;
+export {};

package/dist/types-ts4.5/media-inline/views/frame.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+interface FrameViewProps {
+    children?: React.ReactNode;
+    /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
+    testId?: string;
+}
+export declare const Frame: FC<FrameViewProps>;
+export {};

package/dist/types-ts4.5/media-inline/views/icon-wrapper.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    children?: React.ReactNode;
+};
+export declare const IconWrapper: FC<Props>;
+export {};

package/dist/types-ts4.5/media-inline/views/loading-view.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    title?: string;
+    testId?: string;
+    /** Container height */
+    height?: number;
+};
+export declare const InlineImageCardLoadingView: FC<Props>;
+export {};

package/dist/types-ts4.5/media-inline/views/wrapper.d.ts

@@ -0,0 +1 @@
+export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/messages/insert-block.d.ts

@@ -169,4 +169,14 @@ export declare const toolbarInsertBlockMessages: {
         defaultMessage: string;
         description: string;
     };
+    recordVideo: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    recordVideoDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types-ts4.5/messages/media-inline-card.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    unableToLoadContent: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    failedToUpload: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/provider-factory/quick-insert-provider.d.ts

@@ -4,7 +4,7 @@ import type { TypeAheadItem } from '../types/type-ahead';
 export type QuickInsertActionInsert = (node?: Node | Record<string, any> | string, opts?: {
     selectInlineNode?: boolean;
 }) => Transaction;
-export type QuickInsertItemId = 'hyperlink' | 'table' | 'helpdialog' | 'date' | 'media' | 'blockquote' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'codeblock' | 'unorderedList' | 'feedbackdialog' | 'orderedList' | 'rule' | 'status' | 'mention' | 'emoji' | 'action' | 'decision' | 'infopanel' | 'notepanel' | 'successpanel' | 'warningpanel' | 'errorpanel' | 'custompanel' | 'layout' | 'expand' | 'placeholderText' | 'datasource';
+export type QuickInsertItemId = 'hyperlink' | 'table' | 'helpdialog' | 'date' | 'media' | 'blockquote' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'codeblock' | 'unorderedList' | 'feedbackdialog' | 'orderedList' | 'rule' | 'status' | 'mention' | 'emoji' | 'action' | 'decision' | 'infopanel' | 'notepanel' | 'successpanel' | 'warningpanel' | 'errorpanel' | 'custompanel' | 'layout' | 'expand' | 'placeholderText' | 'datasource' | 'loom';
 export type QuickInsertItem = TypeAheadItem & {
     /** other names used to find the item */
     keywords?: Array<string>;
@@ -14,13 +14,13 @@ export type QuickInsertItem = TypeAheadItem & {
     priority?: number;
     /** optional identifier */
     id?: QuickInsertItemId;
-    /** indicates if the item will be highlighted where approppriated (plus menu for now) */
+    /** indicates if the item will be highlighted where appropriate (plus menu for now) */
     featured?: boolean;
     /**
      * What to do on insert
      *
      * @note This logic is only called if the item is accessed without a search
-     * If a search occurs -- then a seperate insert action is called
+     * If a search occurs -- then a separate insert action is called
      * @see packages/editor/editor-core/src/plugins/insert-block/ui/ToolbarInsertBlock/index.tsx for details
      */
     action: (insert: QuickInsertActionInsert, state: EditorState) => Transaction | false;

package/dist/types-ts4.5/quick-insert/assets/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import Loadable from 'react-loadable';
-import { HeadingLevels, IconProps } from '../../types';
+import type { HeadingLevels, IconProps } from '../../types';
 export { default as IconCustomPanel } from './custom-panel';
 export { default as IconFallback } from './fallback';
 export declare const IconAction: React.ComponentType<IconProps> & Loadable.LoadableComponent;
@@ -30,3 +30,4 @@ export declare const IconFeedback: React.ComponentType<IconProps> & Loadable.Loa
 export declare const IconExpand: React.ComponentType<IconProps> & Loadable.LoadableComponent;
 export declare const IconDatasourceJiraIssue: React.ComponentType<IconProps> & Loadable.LoadableComponent;
 export declare const IconDatasourceAssetsObjects: React.ComponentType<IconProps> & Loadable.LoadableComponent;
+export declare const IconLoom: React.ComponentType<IconProps> & Loadable.LoadableComponent;

package/dist/types-ts4.5/quick-insert/assets/loom.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function IconLayout(): JSX.Element;

package/dist/types-ts4.5/quick-insert/index.d.ts

@@ -1,2 +1,2 @@
-export { IconAction, IconCode, IconDate, IconDecision, IconDivider, IconEmoji, IconImages, IconLayout, IconLink, IconListNumber, IconList, IconMention, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanel, IconQuote, IconStatus, IconHeading, IconFeedback, IconExpand, IconCustomPanel, IconFallback, IconDatasourceJiraIssue, IconDatasourceAssetsObjects, } from './assets';
+export { IconAction, IconCode, IconDate, IconDecision, IconDivider, IconEmoji, IconImages, IconLayout, IconLink, IconListNumber, IconList, IconMention, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanel, IconQuote, IconStatus, IconHeading, IconFeedback, IconExpand, IconCustomPanel, IconFallback, IconDatasourceJiraIssue, IconDatasourceAssetsObjects, IconLoom, } from './assets';
 export { memoProcessQuickInsertItems, find } from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "76.24.5",
+  "version": "76.25.1",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -163,6 +163,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
+    "@loomhq/record-sdk": "^2.36.18",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",