@transferwise/components 0.0.0-experimental-f2eec9e → 0.0.0-experimental-57cdeb9

package/build/table/TableRow.mjs

@@ -1,83 +0,0 @@
-import 'react';
-import TableCell from './TableCell.mjs';
-import Chevron from '../chevron/Chevron.mjs';
-import '../common/theme.mjs';
-import '../common/direction.mjs';
-import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
-import '../common/propsValues/size.mjs';
-import '../common/propsValues/typography.mjs';
-import '../common/propsValues/width.mjs';
-import '../common/propsValues/type.mjs';
-import '../common/propsValues/dateMode.mjs';
-import '../common/propsValues/monthFormat.mjs';
-import { Position } from '../common/propsValues/position.mjs';
-import '../common/propsValues/layouts.mjs';
-import '../common/propsValues/status.mjs';
-import '../common/propsValues/sentiment.mjs';
-import '../common/propsValues/profileType.mjs';
-import '../common/propsValues/variant.mjs';
-import '../common/propsValues/scroll.mjs';
-import '../common/propsValues/markdownNodeType.mjs';
-import '../common/fileType.mjs';
-import '@transferwise/icons';
-import { clsx } from 'clsx';
-import 'react-intl';
-import '../common/closeButton/CloseButton.messages.mjs';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-const TableRow = ({
-  rowData,
-  hasSeparator = false,
-  children,
-  onRowClick
-}) => {
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs("tr", {
-      className: clsx('np-table-row', {
-        'np-table-row--clickable': !!onRowClick
-      }),
-      "data-testid": "np-table-row",
-      role: onRowClick ? 'button' : undefined,
-      tabIndex: 0,
-      onClick: onRowClick && rowData ? () => onRowClick(rowData) : undefined,
-      onKeyDown: ({
-        key
-      }) => {
-        if (onRowClick && rowData && key === 'Enter') {
-          onRowClick(rowData);
-        }
-      },
-      children: [rowData?.cells ? rowData?.cells?.map((item, index) => {
-        const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;
-        return /*#__PURE__*/jsx(TableCell, {
-          ...item
-        }, itemIndex);
-      }) : children, onRowClick && /*#__PURE__*/jsx(TableCell, {
-        className: "np-table-cell--action",
-        children: /*#__PURE__*/jsx("div", {
-          "aria-hidden": "true",
-          children: /*#__PURE__*/jsx(Chevron, {
-            orientation: Position.RIGHT
-          })
-        })
-      })]
-    }), hasSeparator && /*#__PURE__*/jsx("tr", {
-      "aria-hidden": "true",
-      className: "np-table-row np-table-row--separator",
-      "data-testid": "np-table-row--separator",
-      children: /*#__PURE__*/jsx("td", {
-        className: "np-table-cell np-table-cell--cosmetic",
-        colSpan: onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length,
-        "data-testid": "np-table-cell--cosmetic",
-        children: /*#__PURE__*/jsx("div", {
-          className: "np-table-cell-separator",
-          "data-testid": "np-table-cell-separator"
-        })
-      })
-    })]
-  });
-};
-
-export { TableRow as default };
-//# sourceMappingURL=TableRow.mjs.map

package/build/table/TableRow.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableRow.mjs","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n  cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n  id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n  rowData?: TableRowType | TableRowClickableType;\n  hasSeparator?: boolean;\n  children?: React.ReactNode;\n  onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n  return (\n    <>\n      <tr\n        className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n        data-testid=\"np-table-row\"\n        role={onRowClick ? 'button' : undefined}\n        tabIndex={0}\n        onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n        onKeyDown={({ key }) => {\n          if (onRowClick && rowData && key === 'Enter') {\n            onRowClick(rowData);\n          }\n        }}\n      >\n        {rowData?.cells\n          ? rowData?.cells?.map((item, index) => {\n              const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n              return <TableCell key={itemIndex} {...item} />;\n            })\n          : children}\n        {onRowClick && (\n          <TableCell className=\"np-table-cell--action\">\n            <div aria-hidden=\"true\">\n              <Chevron orientation={Position.RIGHT} />\n            </div>\n          </TableCell>\n        )}\n      </tr>\n      {hasSeparator && (\n        <tr\n          aria-hidden=\"true\"\n          className=\"np-table-row np-table-row--separator\"\n          data-testid=\"np-table-row--separator\"\n        >\n          <td\n            className=\"np-table-cell np-table-cell--cosmetic\"\n            colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n            data-testid=\"np-table-cell--cosmetic\"\n          >\n            <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n          </td>\n        </tr>\n      )}\n    </>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,OAAO;AAAEC,EAAAA,YAAY,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA,UAAAA;AAAU,CAAiB,KAAI;EAC1F,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAH,IAAAA,QAAA,gBACEE,IAAA,CAAA,IAAA,EAAA;AACEE,MAAAA,SAAS,EAAEC,IAAI,CAAC,cAAc,EAAE;QAAE,yBAAyB,EAAE,CAAC,CAACJ,UAAAA;AAAY,OAAA,CAAE;AAC7E,MAAA,aAAA,EAAY,cAAc;AAC1BK,MAAAA,IAAI,EAAEL,UAAU,GAAG,QAAQ,GAAGM,SAAU;AACxCC,MAAAA,QAAQ,EAAE,CAAE;MACZC,OAAO,EAAER,UAAU,IAAIH,OAAO,GAAG,MAAMG,UAAU,CAACH,OAAO,CAAC,GAAGS,SAAU;AACvEG,MAAAA,SAAS,EAAEA,CAAC;AAAEC,QAAAA,GAAAA;AAAG,OAAE,KAAI;AACrB,QAAA,IAAIV,UAAU,IAAIH,OAAO,IAAIa,GAAG,KAAK,OAAO,EAAE;UAC5CV,UAAU,CAACH,OAAO,CAAC,CAAA;AACrB,SAAA;OACA;AAAAE,MAAAA,QAAA,EAEDF,CAAAA,OAAO,EAAEc,KAAK,GACXd,OAAO,EAAEc,KAAK,EAAEC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAI;QAClC,MAAMC,SAAS,GAAGF,IAAI,CAACG,IAAI,EAAEC,IAAI,GAAGJ,IAAI,CAACG,IAAI,EAAEC,IAAI,CAACC,MAAM,CAACJ,KAAK,CAACK,QAAQ,EAAE,CAAC,GAAGL,KAAK,CAAA;QACpF,oBAAOM,GAAA,CAACC,SAAS,EAAA;UAAA,GAAqBR,IAAAA;AAAI,SAAA,EAAnBE,UAAuB,CAAA;OAC/C,CAAC,GACFhB,QAAQ,EACXC,UAAU,iBACToB,GAAA,CAACC,SAAS,EAAA;AAAClB,QAAAA,SAAS,EAAC,uBAAuB;AAAAJ,QAAAA,QAAA,eAC1CqB,GAAA,CAAA,KAAA,EAAA;AAAK,UAAA,aAAA,EAAY,MAAM;UAAArB,QAAA,eACrBqB,GAAA,CAACE,OAAO,EAAA;YAACC,WAAW,EAAEC,QAAQ,CAACC,KAAAA;WACjC,CAAA;SAAK,CAAA;AACP,OAAW,CACZ,CAAA;AAAA,KACC,CACJ,EAAC3B,YAAY,iBACXsB,GAAA,CAAA,IAAA,EAAA;AACE,MAAA,aAAA,EAAY,MAAM;AAClBjB,MAAAA,SAAS,EAAC,sCAAsC;AAChD,MAAA,aAAA,EAAY,yBAAyB;AAAAJ,MAAAA,QAAA,eAErCqB,GAAA,CAAA,IAAA,EAAA;AACEjB,QAAAA,SAAS,EAAC,uCAAuC;AACjDuB,QAAAA,OAAO,EAAE1B,UAAU,GAAG2B,MAAM,CAAC9B,OAAO,EAAEc,KAAK,EAAEiB,MAAM,CAAC,GAAG,CAAC,GAAG/B,OAAO,EAAEc,KAAK,EAAEiB,MAAO;AAClF,QAAA,aAAA,EAAY,yBAAyB;AAAA7B,QAAAA,QAAA,eAErCqB,GAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAC,yBAAyB;UAAC,aAAY,EAAA,yBAAA;SACvD,CAAA;OAAI,CAAA;AACN,KAAI,CACL,CAAA;AAAA,GACH,CAAG,CAAA;AAEP;;;;"}

package/build/table/TableStatusText.js

@@ -1,54 +0,0 @@
-'use strict';
-
-var icons = require('@transferwise/icons');
-var clsx = require('clsx');
-require('react');
-var Body = require('../body/Body.js');
-require('../common/theme.js');
-require('../common/direction.js');
-require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
-require('../common/propsValues/size.js');
-var typography = require('../common/propsValues/typography.js');
-require('../common/propsValues/width.js');
-require('../common/propsValues/type.js');
-require('../common/propsValues/dateMode.js');
-require('../common/propsValues/monthFormat.js');
-require('../common/propsValues/position.js');
-require('../common/propsValues/layouts.js');
-require('../common/propsValues/status.js');
-require('../common/propsValues/sentiment.js');
-require('../common/propsValues/profileType.js');
-require('../common/propsValues/variant.js');
-require('../common/propsValues/scroll.js');
-require('../common/propsValues/markdownNodeType.js');
-require('../common/fileType.js');
-require('react-intl');
-require('../common/closeButton/CloseButton.messages.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const TableStatusText = ({
-  text,
-  className,
-  status,
-  typography: typography$1 = 'default'
-}) => {
-  const typographyType = status ?? typography$1 === 'default-bold' ? typography.Typography.BODY_DEFAULT_BOLD : typography.Typography.BODY_DEFAULT;
-  return /*#__PURE__*/jsxRuntime.jsxs(Body, {
-    type: typographyType,
-    className: clsx.clsx(className, {
-      'np-table-content--success': status === 'success',
-      'np-table-content--error': status === 'error'
-    }),
-    children: [text, status === 'success' && /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircle, {
-      className: "tw-icon--status",
-      "data-testid": "check-icon"
-    }), status === 'error' && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {
-      className: "tw-icon--status",
-      "data-testid": "alert-icon"
-    })]
-  });
-};
-
-module.exports = TableStatusText;
-//# sourceMappingURL=TableStatusText.js.map

package/build/table/TableStatusText.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableStatusText.js","sources":["../../src/table/TableStatusText.tsx"],"sourcesContent":["import { AlertCircle, CheckCircle } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport interface TableStatusTextProps {\n  text: string | React.ReactNode;\n  className?: string;\n  status?: 'success' | 'error';\n  typography?: 'default' | 'default-bold';\n}\n\nconst TableStatusText = ({\n  text,\n  className,\n  status,\n  typography = 'default',\n}: TableStatusTextProps) => {\n  const typographyType =\n    (status ?? typography === 'default-bold')\n      ? Typography.BODY_DEFAULT_BOLD\n      : Typography.BODY_DEFAULT;\n\n  return (\n    <Body\n      type={typographyType}\n      className={clsx(className, {\n        'np-table-content--success': status === 'success',\n        'np-table-content--error': status === 'error',\n      })}\n    >\n      {text}\n      {status === 'success' && <CheckCircle className=\"tw-icon--status\" data-testid=\"check-icon\" />}\n      {status === 'error' && <AlertCircle className=\"tw-icon--status\" data-testid=\"alert-icon\" />}\n    </Body>\n  );\n};\n\nexport default TableStatusText;\n"],"names":["TableStatusText","text","className","status","typography","typographyType","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","_jsxs","Body","type","clsx","children","_jsx","CheckCircle","AlertCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaMA,MAAAA,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,SAAS;EACTC,MAAM;AACNC,cAAAA,YAAU,GAAG,SAAA;AAAS,CACD,KAAI;AACzB,EAAA,MAAMC,cAAc,GACjBF,MAAM,IAAIC,YAAU,KAAK,cAAc,GACpCE,qBAAU,CAACC,iBAAiB,GAC5BD,qBAAU,CAACE,YAAY,CAAA;EAE7B,oBACEC,eAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAEN,cAAe;AACrBH,IAAAA,SAAS,EAAEU,SAAI,CAACV,SAAS,EAAE;MACzB,2BAA2B,EAAEC,MAAM,KAAK,SAAS;MACjD,yBAAyB,EAAEA,MAAM,KAAK,OAAA;AACvC,KAAA,CAAE;IAAAU,QAAA,EAAA,CAEFZ,IAAI,EACJE,MAAM,KAAK,SAAS,iBAAIW,cAAA,CAACC,iBAAW,EAAA;AAACb,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAY,EAAA,YAAA;MAAe,EAC5FC,MAAM,KAAK,OAAO,iBAAIW,cAAA,CAACE,iBAAW,EAAA;AAACd,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAY,EAAA,YAAA;AAAY,MAAG,CAAA;AAAA,GACvF,CAAC,CAAA;AAEX;;;;"}

package/build/table/TableStatusText.mjs

@@ -1,52 +0,0 @@
-import { CheckCircle, AlertCircle } from '@transferwise/icons';
-import { clsx } from 'clsx';
-import 'react';
-import Body from '../body/Body.mjs';
-import '../common/theme.mjs';
-import '../common/direction.mjs';
-import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
-import '../common/propsValues/size.mjs';
-import { Typography } from '../common/propsValues/typography.mjs';
-import '../common/propsValues/width.mjs';
-import '../common/propsValues/type.mjs';
-import '../common/propsValues/dateMode.mjs';
-import '../common/propsValues/monthFormat.mjs';
-import '../common/propsValues/position.mjs';
-import '../common/propsValues/layouts.mjs';
-import '../common/propsValues/status.mjs';
-import '../common/propsValues/sentiment.mjs';
-import '../common/propsValues/profileType.mjs';
-import '../common/propsValues/variant.mjs';
-import '../common/propsValues/scroll.mjs';
-import '../common/propsValues/markdownNodeType.mjs';
-import '../common/fileType.mjs';
-import 'react-intl';
-import '../common/closeButton/CloseButton.messages.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-const TableStatusText = ({
-  text,
-  className,
-  status,
-  typography = 'default'
-}) => {
-  const typographyType = status ?? typography === 'default-bold' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT;
-  return /*#__PURE__*/jsxs(Body, {
-    type: typographyType,
-    className: clsx(className, {
-      'np-table-content--success': status === 'success',
-      'np-table-content--error': status === 'error'
-    }),
-    children: [text, status === 'success' && /*#__PURE__*/jsx(CheckCircle, {
-      className: "tw-icon--status",
-      "data-testid": "check-icon"
-    }), status === 'error' && /*#__PURE__*/jsx(AlertCircle, {
-      className: "tw-icon--status",
-      "data-testid": "alert-icon"
-    })]
-  });
-};
-
-export { TableStatusText as default };
-//# sourceMappingURL=TableStatusText.mjs.map

package/build/table/TableStatusText.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableStatusText.mjs","sources":["../../src/table/TableStatusText.tsx"],"sourcesContent":["import { AlertCircle, CheckCircle } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport interface TableStatusTextProps {\n  text: string | React.ReactNode;\n  className?: string;\n  status?: 'success' | 'error';\n  typography?: 'default' | 'default-bold';\n}\n\nconst TableStatusText = ({\n  text,\n  className,\n  status,\n  typography = 'default',\n}: TableStatusTextProps) => {\n  const typographyType =\n    (status ?? typography === 'default-bold')\n      ? Typography.BODY_DEFAULT_BOLD\n      : Typography.BODY_DEFAULT;\n\n  return (\n    <Body\n      type={typographyType}\n      className={clsx(className, {\n        'np-table-content--success': status === 'success',\n        'np-table-content--error': status === 'error',\n      })}\n    >\n      {text}\n      {status === 'success' && <CheckCircle className=\"tw-icon--status\" data-testid=\"check-icon\" />}\n      {status === 'error' && <AlertCircle className=\"tw-icon--status\" data-testid=\"alert-icon\" />}\n    </Body>\n  );\n};\n\nexport default TableStatusText;\n"],"names":["TableStatusText","text","className","status","typography","typographyType","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","_jsxs","Body","type","clsx","children","_jsx","CheckCircle","AlertCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAaMA,MAAAA,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,SAAS;EACTC,MAAM;AACNC,EAAAA,UAAU,GAAG,SAAA;AAAS,CACD,KAAI;AACzB,EAAA,MAAMC,cAAc,GACjBF,MAAM,IAAIC,UAAU,KAAK,cAAc,GACpCE,UAAU,CAACC,iBAAiB,GAC5BD,UAAU,CAACE,YAAY,CAAA;EAE7B,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAEN,cAAe;AACrBH,IAAAA,SAAS,EAAEU,IAAI,CAACV,SAAS,EAAE;MACzB,2BAA2B,EAAEC,MAAM,KAAK,SAAS;MACjD,yBAAyB,EAAEA,MAAM,KAAK,OAAA;AACvC,KAAA,CAAE;IAAAU,QAAA,EAAA,CAEFZ,IAAI,EACJE,MAAM,KAAK,SAAS,iBAAIW,GAAA,CAACC,WAAW,EAAA;AAACb,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAY,EAAA,YAAA;MAAe,EAC5FC,MAAM,KAAK,OAAO,iBAAIW,GAAA,CAACE,WAAW,EAAA;AAACd,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAY,EAAA,YAAA;AAAY,MAAG,CAAA;AAAA,GACvF,CAAC,CAAA;AAEX;;;;"}

package/src/drawer/Drawer.spec.tsx

@@ -1,93 +0,0 @@
-import { render, screen, userEvent, mockMatchMedia } from '../test-utils';
-import { Position } from '../common';
-
-import Drawer from './Drawer';
-
-jest.mock('../common/DOMOperations');
-mockMatchMedia();
-
-describe('Drawer', () => {
-  const renderedComponent = (props: React.ComponentProps<typeof Drawer>) =>
-    render(<Drawer {...props} />);
-
-  const props = {
-    open: true,
-    onClose: jest.fn(),
-    headerTitle: 'Drawer Title',
-    footerContent: <div>Footer Content</div>,
-    children: <p>Drawer Content</p>,
-    className: 'drawer-class',
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders the Drawer component', () => {
-    renderedComponent(props);
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
-  });
-
-  it('renders the header title', () => {
-    renderedComponent(props);
-    expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-  });
-
-  it('renders the footer content', () => {
-    renderedComponent(props);
-    expect(screen.getByText('Footer Content')).toBeInTheDocument();
-  });
-
-  it('renders the children content', () => {
-    renderedComponent(props);
-    expect(screen.getByText('Drawer Content')).toBeInTheDocument();
-  });
-
-  it('passes through the className prop', () => {
-    renderedComponent({ ...props, className: 'drawer-class' });
-    expect(screen.getByRole('dialog')).toHaveClass('drawer-class');
-  });
-
-  it('calls onClose when the close button is clicked', async () => {
-    renderedComponent(props);
-    await userEvent.click(screen.getByLabelText('Close'));
-    expect(props.onClose).toHaveBeenCalled();
-  });
-
-  it('calls onClose if the dimmer is clicked', async () => {
-    render(<Drawer {...props} />);
-    await userEvent.click(screen.getByRole('button'));
-    expect(props.onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not call onClose if the drawer content is clicked', async () => {
-    render(<Drawer {...props}>Drawer Content</Drawer>);
-    await userEvent.click(screen.getByText('Drawer Content'));
-    expect(props.onClose).not.toHaveBeenCalled();
-  });
-
-  it('does not render the Drawer when open is false', () => {
-    renderedComponent({ ...props, open: false });
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-  });
-
-  it('renders the Drawer with the correct aria-labelledby attribute', () => {
-    renderedComponent(props);
-    expect(screen.getByRole('dialog')).toHaveAttribute('aria-labelledby');
-  });
-
-  it('renders the Drawer with the correct position', () => {
-    renderedComponent({ ...props, position: Position.LEFT });
-    expect(screen.getByRole('dialog').parentElement).toHaveClass('sliding-panel--open-left');
-  });
-
-  it('renders the Drawer with the correct role attribute', () => {
-    renderedComponent(props);
-    expect(screen.getByRole('dialog')).toHaveAttribute('role', 'dialog');
-  });
-
-  it('renders the Drawer with the correct aria-modal attribute', () => {
-    renderedComponent(props);
-    expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
-  });
-});