@transferwise/components 46.26.2 → 46.28.0

package/src/dateLookup/dayCalendar/table/{DayCalendarTable.js → DayCalendarTable.tsx}

@@ -1,16 +1,24 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { getDayNames, isWithinRange } from '../../../common/dateUtils';
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import { getStartOfDay } from '../../getStartOfDay';
 import TableLink from '../../tableLink';
 
-const SHORT_DAY_FORMAT = { day: 'numeric' };
+const SHORT_DAY_FORMAT: Intl.DateTimeFormatOptions = { day: 'numeric' };
 
-class DayCalendarTable extends PureComponent {
+interface DayCalendarTableProps extends WrappedComponentProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewMonth: number;
+  viewYear: number;
+  onSelect: (date: Date) => void;
+}
+
+class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
   getTableStructure = () => {
     const { viewMonth, viewYear } = this.props;
     let firstDayOfMonth = new Date(viewYear, viewMonth, 1).getDay();
@@ -20,13 +28,13 @@ class DayCalendarTable extends PureComponent {
     }
     const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
 
-    let week = [];
-    const weeks = [];
+    let week: number[] = [];
+    const weeks: number[][] = [];
     let i;
 
     // Pad first week
     for (i = 1; i < firstDayOfMonth; i += 1) {
-      week.push(false);
+      week.push(-1);
     }
     // Fill in days
     for (i = 1; i <= daysInMonth; i += 1) {
@@ -39,7 +47,7 @@ class DayCalendarTable extends PureComponent {
     if (week.length > 0) {
       // Pad last week
       for (i = week.length; i < 7; i += 1) {
-        week.push(false);
+        week.push(-1);
       }
       weeks.push(week);
     }
@@ -50,29 +58,29 @@ class DayCalendarTable extends PureComponent {
   daysShort = getDayNames(this.props.intl.locale, 'narrow');
   daysLong = getDayNames(this.props.intl.locale, 'long');
 
-  selectDay = (day) => {
+  selectDay = (day: number) => {
     const { viewMonth, viewYear, onSelect } = this.props;
     onSelect(new Date(viewYear, viewMonth, day));
   };
 
-  isDisabled = (day) => {
+  isDisabled = (day: number) => {
     const { min, max, viewMonth, viewYear } = this.props;
     const date = new Date(viewYear, viewMonth, day);
 
     return !isWithinRange(date, min, max);
   };
 
-  isActive = (day) => {
+  isActive = (day: number) => {
     const { selectedDate, viewMonth, viewYear } = this.props;
     return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
 
-  isToday = (day) => {
+  isToday = (day: number) => {
     const { viewMonth, viewYear } = this.props;
     return Number(getStartOfDay(new Date())) === Number(new Date(viewYear, viewMonth, day));
   };
 
-  getAutofocusDay = (weeks) => {
+  getAutofocusDay = (weeks: number[][]) => {
     const days = weeks.flatMap((week) => week);
     return getFocusableTime({
       isActive: this.isActive,
@@ -83,13 +91,9 @@ class DayCalendarTable extends PureComponent {
   };
 
   render() {
-    const {
-      viewMonth,
-      viewYear,
-      intl: { locale },
-    } = this.props;
+    const { viewMonth, viewYear, intl } = this.props;
     const weeks = this.getTableStructure();
-    let autoFocusDay = this.getAutofocusDay(weeks, viewMonth, viewYear);
+    const autoFocusDay = this.getAutofocusDay(weeks);
     return (
       <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
         <thead>
@@ -119,17 +123,17 @@ class DayCalendarTable extends PureComponent {
             <tr key={weekIndex}>
               {week.map((day, dayIndex) => (
                 <td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>
-                  {day && (
+                  {day !== -1 && (
                     <TableLink
                       item={day}
                       type="day"
                       title={formatDate(
                         new Date(viewYear, viewMonth, day),
-                        locale,
+                        intl.locale,
                         SHORT_DAY_FORMAT,
                       )}
                       autofocus={day === autoFocusDay}
-                      longTitle={formatDate(new Date(viewYear, viewMonth, day), locale)}
+                      longTitle={formatDate(new Date(viewYear, viewMonth, day), intl.locale)}
                       active={this.isActive(day)}
                       disabled={this.isDisabled(day)}
                       today={this.isToday(day)}
@@ -147,19 +151,4 @@ class DayCalendarTable extends PureComponent {
   }
 }
 
-DayCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewMonth: PropTypes.number.isRequired,
-  viewYear: PropTypes.number.isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-DayCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default injectIntl(DayCalendarTable);

package/src/dateLookup/getStartOfDay/{getStartOfDay.js → getStartOfDay.tsx}

@@ -2,7 +2,7 @@
 // getStartOfDay(new Date('1995-01-01')) in Los Angeles returns 31 Dec 1994, but in
 // in Singapore it is 1 Jan 1995.
 // You might want to use/implement `getUTCStartOfDay` if you want it to be 1995 in any timezone
-export function getStartOfDay(date) {
+export function getStartOfDay(date: Date | null) {
   if (!date) {
     return null;
   }

package/src/dateLookup/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DateLookup';
+export type { DateLookupProps } from './DateLookup';

package/src/dateLookup/monthCalendar/{MonthCalendar.js → MonthCalendar.tsx}

@@ -1,15 +1,25 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import MonthCalendarTable from './table';
 
-class MonthCalendar extends PureComponent {
-  onMonthSelect = (month) => {
+interface MonthCalendarProps extends WrappedComponentProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: () => void;
+  onLabelClick: () => void;
+  onViewDateUpdate: (date: { year?: number; month?: number }) => void;
+}
+
+class MonthCalendar extends PureComponent<MonthCalendarProps> {
+  onMonthSelect = (month: number) => {
     this.props.onViewDateUpdate({ month });
     this.props.onSelect();
   };
@@ -42,7 +52,11 @@ class MonthCalendar extends PureComponent {
           onNextClick={this.selectNextYear}
         />
         <MonthCalendarTable
-          {...{ selectedDate, min, max, viewYear, placeholder }}
+          selectedDate={selectedDate}
+          min={min}
+          max={max}
+          viewYear={viewYear}
+          placeholder={placeholder}
           onSelect={this.onMonthSelect}
         />
       </>
@@ -50,21 +64,4 @@ class MonthCalendar extends PureComponent {
   }
 }
 
-MonthCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onLabelClick: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired,
-};
-
-MonthCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default injectIntl(MonthCalendar);

package/src/dateLookup/monthCalendar/table/{MonthCalendarTable.js → MonthCalendarTable.tsx}

@@ -1,17 +1,33 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import TableLink from '../../tableLink';
 
+interface MonthCalendarTableProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: (date: number) => void;
+}
+
 const ROWS = 3;
 const COLS = 4;
-const MONTH_ONLY_FORMAT = { month: 'short' };
+const MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };
 
-const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
+const MonthCalendarTable = ({
+  selectedDate,
+  min,
+  max,
+  viewYear,
+  placeholder,
+  onSelect,
+}: MonthCalendarTableProps) => {
   const { locale } = useIntl();
-  const getLink = (month) => {
+
+  const getLink = (month: number) => {
     return (
       <TableLink
         item={month}
@@ -26,17 +42,19 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
     );
   };
 
-  const isActive = (month) => {
-    return (
-      selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear()
+  const isActive = (month: number) => {
+    return !!(
+      selectedDate &&
+      month === selectedDate.getMonth() &&
+      viewYear === selectedDate.getFullYear()
     );
   };
 
-  const isThisMonth = (month) => {
+  const isThisMonth = (month: number) => {
     return viewYear === new Date().getFullYear() && month === new Date().getMonth();
   };
 
-  const isDisabled = (month) => {
+  const isDisabled = (month: number) => {
     const date = new Date(viewYear, month);
     return !!(
       (min && date < new Date(min.getFullYear(), min.getMonth())) ||
@@ -45,7 +63,7 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
   };
 
   const autofocusMonth = (() => {
-    const months = [...new Array(ROWS * COLS)].map((_, index) => index);
+    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);
     return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });
   })();
 
@@ -53,37 +71,20 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
     <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
       <thead className="sr-only">
         <tr>
-          <th colSpan="3">{placeholder}</th>
+          <th colSpan={COLS}>{placeholder}</th>
         </tr>
       </thead>
       <tbody>
-        {/* eslint-disable react/no-array-index-key */}
-        {[...new Array(ROWS)].map((row, rowIndex) => (
+        {Array.from({ length: ROWS }, (_, rowIndex) => (
           <tr key={rowIndex}>
-            {[...new Array(COLS)].map((col, colIndex) => (
+            {Array.from({ length: COLS }, (_, colIndex) => (
               <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>
             ))}
           </tr>
         ))}
-        {/* eslint-enable react/no-array-index-key */}
       </tbody>
     </table>
   );
 };
 
-MonthCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-MonthCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default MonthCalendarTable;

package/src/dateLookup/yearCalendar/{YearCalendar.js → YearCalendar.tsx}

@@ -1,14 +1,23 @@
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import YearCalendarTable from './table';
 
-class YearCalendar extends PureComponent {
-  onYearSelect = (year) => {
+interface YearCalendarProps extends WrappedComponentProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: () => void;
+  onViewDateUpdate: (date: { year: number }) => void;
+}
+
+class YearCalendar extends PureComponent<YearCalendarProps> {
+  onYearSelect = (year: number) => {
     this.props.onViewDateUpdate({ year });
     this.props.onSelect();
   };
@@ -38,7 +47,11 @@ class YearCalendar extends PureComponent {
           onNextClick={this.selectNextYears}
         />
         <YearCalendarTable
-          {...{ selectedDate, min, max, viewYear, placeholder }}
+          selectedDate={selectedDate}
+          min={min}
+          max={max}
+          viewYear={viewYear}
+          placeholder={placeholder}
           onSelect={this.onYearSelect}
         />
       </>
@@ -46,20 +59,4 @@ class YearCalendar extends PureComponent {
   }
 }
 
-YearCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired,
-};
-
-YearCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default injectIntl(YearCalendar);

package/src/dateLookup/yearCalendar/table/{YearCalendarTable.js → YearCalendarTable.tsx}

@@ -1,18 +1,33 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import TableLink from '../../tableLink';
 
+interface YearCalendarTableProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: (year: number) => void;
+}
+
 const ROWS = 5;
 const COLS = 4;
-const YEAR_ONLY_FORMAT = { year: 'numeric' };
+const YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };
 
-const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
+const YearCalendarTable = ({
+  selectedDate,
+  min,
+  max,
+  viewYear,
+  placeholder,
+  onSelect,
+}: YearCalendarTableProps) => {
   const { locale } = useIntl();
   const startYear = viewYear - (viewYear % 20);
-  const getLink = (year) => {
+  const getLink = (year: number) => {
     return (
       <TableLink
         item={year}
@@ -27,20 +42,20 @@ const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSe
     );
   };
 
-  const isActive = (year) => {
+  const isActive = (year: number) => {
     return !!(selectedDate && year === selectedDate.getFullYear());
   };
 
-  const isThisYear = (year) => {
+  const isThisYear = (year: number) => {
     return year === new Date().getFullYear();
   };
 
-  const isDisabled = (year) => {
+  const isDisabled = (year: number) => {
     return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));
   };
 
   const autofocusYear = (() => {
-    const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
+    const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);
     return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });
   })();
 
@@ -48,37 +63,20 @@ const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSe
     <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
       <thead className="sr-only">
         <tr>
-          <th colSpan="4">{placeholder}</th>
+          <th colSpan={COLS}>{placeholder}</th>
         </tr>
       </thead>
       <tbody>
-        {/* eslint-disable react/no-array-index-key */}
-        {[...new Array(ROWS)].map((row, rowIndex) => (
+        {Array.from({ length: ROWS }, (_, rowIndex) => (
           <tr key={rowIndex}>
-            {[...new Array(COLS)].map((col, colIndex) => (
+            {Array.from({ length: COLS }, (_, colIndex) => (
               <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>
             ))}
           </tr>
         ))}
-        {/* eslint-enable react/no-array-index-key */}
       </tbody>
     </table>
   );
 };
 
-YearCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-YearCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default YearCalendarTable;

package/src/i18n/th.json

@@ -4,10 +4,10 @@
   "neptune.ClearButton.ariaLabel": "ล้าง",
   "neptune.CloseButton.ariaLabel": "ปิด",
   "neptune.DateInput.day.label": "วัน",
-  "neptune.DateInput.day.placeholder": "DD",
+  "neptune.DateInput.day.placeholder": "วัน",
   "neptune.DateInput.month.label": "เดือน",
   "neptune.DateInput.year.label": "ปี",
-  "neptune.DateInput.year.placeholder": "YYYY",
+  "neptune.DateInput.year.placeholder": "ปี",
   "neptune.DateLookup.day": "วัน",
   "neptune.DateLookup.goTo20YearView": "ไปที่มุมมอง 20 ปี",
   "neptune.DateLookup.month": "เดือน",

package/src/i18n/zh-CN.json

@@ -4,10 +4,10 @@
   "neptune.ClearButton.ariaLabel": "清除",
   "neptune.CloseButton.ariaLabel": "关闭",
   "neptune.DateInput.day.label": "日",
-  "neptune.DateInput.day.placeholder": "DD",
+  "neptune.DateInput.day.placeholder": "日",
   "neptune.DateInput.month.label": "月",
   "neptune.DateInput.year.label": "年",
-  "neptune.DateInput.year.placeholder": "YYYY",
+  "neptune.DateInput.year.placeholder": "年",
   "neptune.DateLookup.day": "日",
   "neptune.DateLookup.goTo20YearView": "转到 20 年视图",
   "neptune.DateLookup.month": "月",
@@ -20,7 +20,7 @@
   "neptune.Info.ariaLabel": "更多信息",
   "neptune.Link.opensInNewTab": "（在新标签页中打开）",
   "neptune.MoneyInput.Select.placeholder": "请选择...",
-  "neptune.PhoneNumberInput.SelectInput.placeholder": "选择一个选项...",
+  "neptune.PhoneNumberInput.SelectInput.placeholder": "选择其中一项...",
   "neptune.Select.searchPlaceholder": "搜索",
   "neptune.SelectInput.noResultsFound": "找不到结果",
   "neptune.Summary.statusDone": "已完成",
@@ -29,13 +29,13 @@
   "neptune.Upload.csButtonText": "上传另一个文件？",
   "neptune.Upload.csFailureText": "上传失败。请重试",
   "neptune.Upload.csSuccessText": "上传完毕！",
-  "neptune.Upload.csTooLargeMessage": "请提供小于 {maxSize}MB 的文件",
+  "neptune.Upload.csTooLargeMessage": "请提供一个小于 {maxSize} MB 的文件",
   "neptune.Upload.csWrongTypeMessage": "不支持该文件类型，请试试其他文件",
   "neptune.Upload.psButtonText": "取消",
   "neptune.Upload.psProcessingText": "正在上传…",
   "neptune.Upload.usButtonText": "或选择文件",
   "neptune.Upload.usDropMessage": "拖放文件开始上传",
-  "neptune.Upload.usPlaceholder": "拖放小于 {maxSize}MB 的文件",
+  "neptune.Upload.usPlaceholder": "拖放一个不超过 {maxSize} MB 的文件",
   "neptune.UploadButton.allFileTypes": "所有文件类型",
   "neptune.UploadButton.dropFiles": "拖放文件开始上传",
   "neptune.UploadButton.instructions": "{fileTypes}，小于 {size} MB",

package/src/index.ts

@@ -4,6 +4,7 @@
 export type { AccordionProps, AccordionItem } from './accordion';
 export type { AvatarProps } from './avatar';
 export type { ActionOptionProps } from './actionOption';
+export type { AlertProps, AlertAction, AlertArrowPosition, AlertType } from './alert';
 export type { BadgeProps } from './badge';
 export type { CircularButtonProps } from './circularButton';
 export type { DecisionProps } from './decision/Decision';
@@ -12,6 +13,7 @@ export type { InfoProps } from './info';
 export type { SummaryProps } from './summary';
 export type { InputProps } from './inputs/Input';
 export type { DateInputProps } from './dateInput';
+export type { DateLookupProps } from './dateLookup';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputGroupProps } from './inputs/InputGroup';
 export type { LoaderProps } from './loader';
@@ -194,7 +196,6 @@ export { AvatarType } from './avatar';
 export { InfoPresentation } from './info';
 export { UploadStep } from './upload';
 export { DecisionPresentation, DecisionType } from './decision';
-export { AlertArrowPosition } from './alert/withArrow';
 export { LogoType } from './logo';
 export { FileType } from './common';
 

package/src/inlineAlert/InlineAlert.spec.tsx

@@ -21,13 +21,6 @@ describe('InlineAlert', () => {
 
       expect(component).toHaveClass('alert-neutral');
     });
-
-    it('has a top left arrow', () => {
-      render(<InlineAlert>{message}</InlineAlert>);
-      const component = screen.getByRole('alert');
-
-      expect(component).toHaveClass('arrow');
-    });
   });
 
   describe('render with types', () => {

package/src/inlineAlert/InlineAlert.tsx

@@ -1,59 +1,31 @@
 import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { ReactNode } from 'react';
 
-import withArrow, { AlertArrowPosition } from '../alert/withArrow';
 import { Sentiment } from '../common';
-import { SentimentString } from '../common/propsValues/sentiment';
 
 export interface InlineAlertProps {
   id?: string;
-  type?: Sentiment | SentimentString;
+  type?: `${Sentiment}`;
   className?: string;
   children: ReactNode;
 }
 
-const typeClassMap: Record<Sentiment.ERROR | Sentiment.NEGATIVE, string> = {
-  [Sentiment.ERROR]: 'danger',
-  [Sentiment.NEGATIVE]: 'danger',
-};
-
-const InlineAlert = ({ id, type = Sentiment.NEUTRAL, className, children }: InlineAlertProps) => {
-  const { isModern } = useTheme();
-
-  const typeClass = `alert-${typeClassMap[type as Sentiment.ERROR | Sentiment.NEGATIVE] || type}`;
-
-  if (isModern) {
-    return (
-      <div role="alert" id={id} className={classNames('alert alert-detach', typeClass, className)}>
-        {(type === 'error' || type === 'negative') && <AlertCircleIcon />}
-        <div>{children}</div>
-      </div>
-    );
-  }
-
-  const getAlertContents = ({
-    children,
-    className,
-  }: {
-    children: ReactNode;
-    className?: string;
-  }) => {
-    return (
-      <div
-        role="alert"
-        id={id}
-        className={classNames('alert alert-detach p-x-2 p-y-1', typeClass, className)}
-      >
-        {children}
-      </div>
-    );
-  };
-
-  const AlertWithArrow = withArrow(getAlertContents, AlertArrowPosition.TOP_LEFT);
-
-  return <AlertWithArrow {...{ id, type, className, children }} />;
-};
-
-export default InlineAlert;
+export default function InlineAlert({
+  id,
+  type = 'neutral',
+  className,
+  children,
+}: InlineAlertProps) {
+  const danger = type === 'negative' || type === 'error';
+  return (
+    <div
+      role="alert"
+      id={id}
+      className={classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className)}
+    >
+      {danger && <AlertCircleIcon />}
+      <div>{children}</div>
+    </div>
+  );
+}