@transferwise/components 0.0.0-experimental-75d5cd4 → 0.0.0-experimental-4990089

package/src/dateInput/DateInput.tests.story.tsx

@@ -0,0 +1,238 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within, fn } from '@storybook/test';
+
+import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
+import { lorem10, storyConfig } from '../test-utils';
+
+import Provider from '../provider/Provider';
+import translations from '../i18n';
+
+const meta = {
+  component: DateInput,
+  title: 'Forms/DateInput/Tests',
+  args: {
+    dayLabel: 'Day input',
+    dayAutoComplete: 'bday-day',
+    monthLabel: 'Month select',
+    yearLabel: 'Year input',
+    yearAutoComplete: 'bday-year',
+  },
+} satisfies Meta<typeof DateInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Basic = {
+  args: {
+    onChange: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+} satisfies Story;
+
+export const WithLabel = {
+  args: {
+    onChange: fn(),
+  },
+  render: (args) => {
+    const id1 = 'date-input-group-label-1';
+    const label = 'Date of Birth';
+
+    return (
+      <>
+        <Title type={Typography.TITLE_SUBSECTION}>
+          label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
+          <code>aria-labelledby</code> prop
+        </Title>
+        <div className="control-label" id={id1}>
+          Date of Delivery
+        </div>
+        <DateInput {...args} aria-labelledby={id1} />
+
+        <br />
+
+        <Title type={Typography.TITLE_SUBSECTION}>
+          label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
+          via <code>aria-label</code> attribute
+        </Title>
+        <div className="control-label">
+          {label}{' '}
+          <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
+        </div>
+        <DateInput {...args} aria-label={label} />
+
+        <br />
+
+        <Title type={Typography.TITLE_SUBSECTION}>
+          <code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
+          label (rare use case)
+        </Title>
+        <fieldset>
+          <legend className="control-label">
+            Expiry Date for Credit Card (example of MONTH_YEAR mode)
+          </legend>
+          <DateInput {...args} mode={DateMode.MONTH_YEAR} />
+        </fieldset>
+      </>
+    );
+  },
+} satisfies Story;
+
+export const InputError = {
+  ...Basic,
+  render: (args) => (
+    <div className="form-group has-error">
+      <DateInput {...args} value={new Date('2010-04-05')} />
+      <InlineAlert type="error">{lorem10}</InlineAlert>
+    </div>
+  ),
+} satisfies Story;
+
+export const CustomPlaceholders = {
+  ...Basic,
+  args: {
+    placeholders: {
+      day: 'D',
+      month: 'M',
+      year: 'YY',
+    },
+  },
+};
+
+export const SingleZero = storyConfig(Basic, {});
+SingleZero.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can enter leading zero on day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '0');
+  });
+  await step('can enter 1 leading zero on year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '0');
+  });
+};
+
+export const ZeroesAsValue = storyConfig(Basic, {});
+ZeroesAsValue.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can enter 2 leading zeroes on day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '00');
+  });
+  await step('can enter 4 leading zeroes on year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '0000');
+  });
+};
+
+export const ZeroesBeforeValue = storyConfig(Basic, {});
+ZeroesBeforeValue.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can enter leading zeroes on day followed by day', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '01');
+  });
+  await step('can enter leading zeroes on year followed by year', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '0001');
+  });
+};
+
+export const MaxLengthRespected = storyConfig(Basic, {});
+MaxLengthRespected.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can only enter 4 digits in the year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '11111111');
+  });
+  await step('can only enter 2 digits in the day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '11111111');
+  });
+};
+
+export const LocalizationWorks: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'zh-HK';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const YearFirst: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'ja';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const MonthFirst: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'en-US';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const DayFirst: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'en';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const NoNonDigitsAllowed = storyConfig(Basic, {});
+NoNonDigitsAllowed.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can only enter digits in the day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, 'abcd1');
+  });
+  await step('can only enter digits in the year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, 'abcd2');
+  });
+};
+
+export const BasicMobile = storyConfig(Basic, { variants: ['mobile'] });
+
+export const InputErrorMobile = storyConfig(InputError, { variants: ['mobile'] });

package/src/dateInput/DateInput.tsx

@@ -2,8 +2,16 @@ import classNames from 'classnames';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';
-import { DateMode, MonthFormat, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { Body, Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';
+import {
+  DateMode,
+  MonthFormat,
+  Size,
+  SizeLarge,
+  SizeMedium,
+  SizeSmall,
+  Typography,
+} from '../common';
 import { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
 import { useInputAttributes } from '../inputs/contexts';
 import messages from './DateInput.messages';
@@ -93,8 +101,10 @@ const DateInput = ({
   };
 
   const [day, setDay] = useState(() => getInitialDate('day'));
+  const [displayDay, setDisplayDay] = useState(day?.toString());
   const [month, setMonth] = useState(() => getInitialDate('month'));
   const [year, setYear] = useState(() => getInitialDate('year'));
+  const [displayYear, setDisplayYear] = useState(year?.toString());
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date | null | undefined>(
     getDateObject,
   );
@@ -129,7 +139,7 @@ const DateInput = ({
   const getSelectElement = () => {
     return (
       <label className="d-flex flex-column">
-        <span className="sr-only">{monthLabel}</span>
+        <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>
         <SelectInput
           name="month"
           disabled={disabled}
@@ -147,13 +157,25 @@ const DateInput = ({
     );
   };
 
+  const isDayValid = (newDay: number, newMonth: number, newYear: number) => {
+    const maxDay = new Date(newYear, newMonth + 1, 0).getDate();
+    return newDay <= maxDay;
+  };
+
   const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {
-    if (newDay == null || newMonth == null || newYear == null) {
+    if (newDay == null || newDay === 0 || newMonth == null || newYear == null || newYear === 0) {
+      broadcastNewValue(null);
+      return;
+    }
+    if (!isDayValid(newDay, newMonth, newYear)) {
       broadcastNewValue(null);
       return;
     }
 
     const dateValue = new Date(newYear, newMonth, newDay);
+    if (newYear < 100) {
+      dateValue.setFullYear(newYear);
+    }
 
     if (!isDateValid(dateValue)) {
       broadcastNewValue(null);
@@ -170,9 +192,12 @@ const DateInput = ({
   };
 
   const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checkedDay } = checkDate(Number.parseInt(event.target.value, 10), month, year);
-    setDay(checkedDay);
-    handleInternalValue(checkedDay, month, year);
+    const newDayString = event.target.value.replace(/\D/g, '');
+    const newDayNumber = Number.parseInt(newDayString, 10);
+
+    setDay(newDayNumber);
+    setDisplayDay(newDayString);
+    handleInternalValue(newDayNumber, month, year);
   };
 
   const handleMonthChange = (selectedMonth: number | null) => {
@@ -181,30 +206,21 @@ const DateInput = ({
       handleInternalValue(day, null, year);
       return;
     }
-    const { checkedDay } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day && checkedDay !== day) {
-      setDay(checkedDay);
-    }
-    handleInternalValue(checkedDay, selectedMonth, year);
+    handleInternalValue(day, selectedMonth, year);
   };
 
   const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = event.target.value;
-    const slicedYear = newValue.length > 4 ? newValue.slice(0, 4) : newValue;
-
-    if (slicedYear.toString().length === 4) {
-      // Correct day based on year and month.
-      const { checkedDay } = checkDate(day, month, Number.parseInt(newValue, 10));
-
-      if (day && checkedDay !== day) {
-        setDay(checkedDay);
-      }
+    const newYearString = event.target.value.replace(/\D/g, '');
+    const newYearNumber = Number.parseInt(newYearString, 10);
 
-      setYear(Number.parseInt(slicedYear, 10));
-      handleInternalValue(checkedDay, month, Number.parseInt(slicedYear, 10));
+    if (newYearString.length === 4) {
+      setYear(newYearNumber);
+      setDisplayYear(newYearString);
+      handleInternalValue(day, month, newYearNumber);
     } else {
-      setYear(Number.parseInt(slicedYear, 10));
+      setYear(null);
+      setDisplayYear(newYearString);
       handleInternalValue(day, month, null);
     }
   };
@@ -216,29 +232,6 @@ const DateInput = ({
     }
   };
 
-  const checkDate = (
-    newDay: number | null = null,
-    newMonth: number | null = 0,
-    newYear: number | null = null,
-  ) => {
-    let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth != null ? newMonth + 1 : 1, 0).getDate();
-
-    if (!newDay) {
-      checkedDay = null;
-    }
-
-    if (newDay && newDay < 0) {
-      checkedDay = 1;
-    }
-
-    if ((newDay && newMonth) || (newDay && newDay > 31)) {
-      checkedDay = newDay > maxDay ? maxDay : newDay;
-    }
-
-    return { checkedDay, checkedMonth: newMonth, checkedYear: newYear };
-  };
-
   const monthYearOnly = mode === DateMode.MONTH_YEAR;
 
   const monthWidth = classNames({
@@ -254,7 +247,7 @@ const DateInput = ({
     return (
       <div className="col-sm-3">
         <label>
-          <span className="sr-only">{dayLabel}</span>
+          <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>
           <div className={`input-group input-group-${size}`}>
             <Input
               type="text"
@@ -262,10 +255,12 @@ const DateInput = ({
               pattern="[0-9]*"
               name="day"
               autoComplete={dayAutoComplete}
-              value={day || ''}
+              value={displayDay || ''}
               placeholder={placeholders?.day}
               disabled={disabled}
               min={1}
+              max={31}
+              maxLength={2}
               onChange={(event) => handleDayChange(event)}
             />
           </div>
@@ -278,7 +273,7 @@ const DateInput = ({
     return (
       <div className="col-sm-4">
         <label>
-          <span className="sr-only">{yearLabel}</span>
+          <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>
           <div className={`input-group input-group-${size}`}>
             <Input
               type="text"
@@ -287,9 +282,11 @@ const DateInput = ({
               name="year"
               autoComplete={yearAutoComplete}
               placeholder={placeholders?.year}
-              value={year || ''}
+              value={displayYear || ''}
               disabled={disabled}
-              min={1}
+              min={0}
+              max={9999}
+              maxLength={4}
               onChange={(event) => handleYearChange(event)}
             />
           </div>

package/src/i18n/en.json

@@ -23,7 +23,6 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
-  "neptune.SelectOption.action.label": "Choose",
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",

package/src/index.ts

@@ -3,7 +3,6 @@
  */
 export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
-export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
 export type { BadgeProps } from './badge';
@@ -87,7 +86,6 @@ export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/ty
 export { default as Accordion } from './accordion';
 export { default as ActionButton } from './actionButton';
 export { default as ActionOption } from './actionOption';
-export { default as SelectOption } from './selectOption';
 export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
 export { default as AvatarWrapper } from './avatarWrapper';

package/src/main.css

@@ -1484,39 +1484,6 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
-.np-select-option {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-select-option-selected {
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-select-option-list {
-  max-height: 350px;
-  overflow-y: auto;
-}
-.np-select-option-section {
-  margin-top: 0 !important;
-}
-.has-error * .np-select-option {
-  --ring-outline-color: var(--color-sentiment-negative);
-  --ring-outline-offset: 0;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 0;
-  outline-offset: var(--ring-outline-offset);
-}
-.has-error * .np-select-option:focus {
-  outline: none;
-}
-.has-error * .np-select-option:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
 .np-panel__content {
   opacity: 0;
   visibility: hidden;

package/src/main.less

@@ -13,7 +13,6 @@
 @import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
-@import "./selectOption/SelectOption.less";
 @import "./common/panel/Panel.less";
 @import "./common/RadioButton/RadioButton.less";
 @import "./dateInput/DateInput.less";

package/src/ssr.spec.js

@@ -226,7 +226,6 @@ describe('Server side rendering', () => {
       DateLookup: { value: new Date() },
       Link: { size: 16 },
       Tooltip: { children: <>yo</> },
-      SelectOption: { placeholder: { media: <img alt="img" /> } },
     };
 
     const { Provider } = exposedLibraryItems;

package/build/styles/selectOption/SelectOption.css

@@ -1,33 +0,0 @@
-.np-select-option {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-select-option-selected {
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-select-option-list {
-  max-height: 350px;
-  overflow-y: auto;
-}
-.np-select-option-section {
-  margin-top: 0 !important;
-}
-.has-error * .np-select-option {
-  --ring-outline-color: var(--color-sentiment-negative);
-  --ring-outline-offset: 0;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 0;
-  outline-offset: var(--ring-outline-offset);
-}
-.has-error * .np-select-option:focus {
-  outline: none;
-}
-.has-error * .np-select-option:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}

package/build/types/selectOption/SelectOption.d.ts

@@ -1,21 +0,0 @@
-import { ActionButtonProps } from '../actionButton';
-import type { OptionProps } from '../common/Option/Option';
-import { HeaderProps } from '../header/Header';
-export type SelectOptiopsSection<T = unknown> = {
-    title?: HeaderProps['title'];
-    options: SelectOptionValue<T>[];
-};
-export type SelectOptionValue<T = unknown> = Pick<OptionProps, 'media' | 'title' | 'content' | 'disabled'> & {
-    value?: T;
-};
-export type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {
-    actionLabel?: ActionButtonProps['children'];
-};
-export type SelectOptionProps<T> = {
-    onChange: (selected: SelectOptionValue<T>) => void;
-    selected?: SelectOptionValue<T>;
-    options: SelectOptiopsSection<T>[];
-    placeholder: SelectOptionPlaceholder;
-} & Omit<OptionProps, 'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'>;
-export default function SelectOption<T>({ selected: selectedValueProp, options, onChange, placeholder, disabled, ...props }: SelectOptionProps<T>): import("react").JSX.Element;
-//# sourceMappingURL=SelectOption.d.ts.map

package/build/types/selectOption/SelectOption.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.tsx"],"names":[],"mappings":"AACA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CAC/C,WAAW,EACX,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAC3C,GAAG;IACF,KAAK,CAAC,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,WAAW,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAChC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,WAAW,EAAE,uBAAuB,CAAC;CACtC,GAAG,IAAI,CACN,WAAW,EACX,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,qBAAqB,GAAG,UAAU,CACnG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,QAAQ,EAAE,iBAA6B,EACvC,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAqGtB"}

package/build/types/selectOption/SelectOption.messages.d.ts

@@ -1,8 +0,0 @@
-declare const _default: {
-    actionLabel: {
-        id: string;
-        defaultMessage: string;
-    };
-};
-export default _default;
-//# sourceMappingURL=SelectOption.messages.d.ts.map

package/build/types/selectOption/SelectOption.messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOption.messages.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}

package/build/types/selectOption/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './SelectOption';
-export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './SelectOption';
-//# sourceMappingURL=index.d.ts.map

package/build/types/selectOption/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/selectOption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC"}