@transferwise/components 0.0.0-experimental-fa9fbe9 → 0.0.0-experimental-162ecb1

package/src/main.css

@@ -31066,36 +31066,9 @@ button.np-link {
 }
 
 .np-logo {
-  display: inline-block;
-}
-
-.np-theme-personal--forest-green .np-logo-svg path,
-.np-theme-personal--bright-green .np-logo-svg path {
-  fill: var(--color-interactive-primary);
-}
-
-.np-theme-personal--dark .np-logo-svg path {
-  fill: var(--color-white);
-}
-
-.np-logo-svg--size-sm {
-  display: block;
-}
-
-@media (min-width: 576px) {
-  .np-logo-svg--size-sm {
-    display: none;
-  }
-}
-
-.np-logo-svg--size-md {
-  display: none;
-}
-
-@media (min-width: 576px) {
-  .np-logo-svg--size-md {
-    display: block;
-  }
+  color: var(--color-interactive-primary);
+  width: var(--wds-logo-width);
+  height: var(--wds-logo-height);
 }
 
 .tw-modal--scrollable {
@@ -32233,200 +32206,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
 }
 
-.wds-action-prompt {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: var(--radius-large);
-}
-
-.wds-action-prompt--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-@media (max-width: 767px) {
-  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}
-
-.wds-action-prompt__content {
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
-}
-
-.wds-critical-banner {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: 0;
-  container-type: inline-size;
-  --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
-  --critical-banner-duration: 150ms;
-  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
-     actions only go full-width below mobile-max token (container query) */
-}
-
-.wds-critical-banner--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-.wds-critical-banner__title {
-  display: -webkit-box;
-  -webkit-line-clamp: 8;
-  line-clamp: 8;
-  -webkit-box-orient: vertical;
-  max-height: 192px;
-  overflow: hidden;
-  transition: max-height var(--critical-banner-duration) var(--critical-banner-easing);
-}
-
-.wds-critical-banner--collapsed .wds-critical-banner__title {
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  max-height: 48px;
-}
-
-.wds-critical-banner__description {
-  max-height: 30vh;
-  opacity: 1;
-  overflow: hidden;
-  transition: max-height var(--critical-banner-duration) var(--critical-banner-easing), opacity var(--critical-banner-duration) var(--critical-banner-easing);
-}
-
-.wds-critical-banner--collapsed .wds-critical-banner__description--with-title {
-  max-height: 0;
-  opacity: 0;
-}
-
-.wds-critical-banner--collapsed .wds-critical-banner__description:not(.wds-critical-banner__description--with-title) {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.wds-critical-banner .wds-prompt__content-wrapper {
-  grid-template-columns: auto 1fr auto;
-  align-items: flex-start;
-  transition: row-gap var(--critical-banner-duration) var(--critical-banner-easing);
-}
-
-.wds-critical-banner--collapsed .wds-prompt__content-wrapper {
-  row-gap: 0;
-}
-
-.wds-critical-banner__text-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  text-align: start;
-  min-width: 0;
-  max-width: 480px;
-  height: 100%;
-  padding-top: 3px;
-}
-
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-
-@container (--screen-400-zoom) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0px;
-  }
-}
-
-.wds-critical-banner--collapsed .wds-critical-banner__title,
-.wds-critical-banner--collapsed .wds-critical-banner__description {
-  transform: translateY(0);
-}
-
-.wds-critical-banner__toggle {
-  flex-shrink: 0;
-  transition: transform var(--critical-banner-duration) var(--critical-banner-easing);
-}
-
-.wds-critical-banner__toggle--collapsed {
-  transform: rotate(180deg);
-}
-
-@container (min-width: 768px) {
-  .wds-critical-banner__toggle {
-    display: none;
-  }
-}
-
-.wds-critical-banner .wds-prompt__actions-wrapper {
-  grid-column-start: 2;
-  grid-column-end: 3;
-  max-height: 200px;
-  opacity: 1;
-  overflow: visible;
-}
-
-@container (max-width: 600px) {
-  .wds-critical-banner .wds-prompt__actions-wrapper {
-    grid-column: span 3;
-    width: 100%;
-  }
-  .wds-critical-banner .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 100%;
-    width: 100%;
-  }
-}
-
-.wds-critical-banner--collapsed .wds-prompt__actions-wrapper {
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-@container (max-width: 600px) {
-  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .wds-critical-banner__description,
-  .wds-critical-banner__title,
-  .wds-critical-banner .wds-prompt__content-wrapper,
-  .wds-critical-banner__toggle {
-    transition: none !important;
-  }
-}
-
-.wds-expander-toggle {
-  align-self: flex-start;
-  flex-shrink: 0;
-  transition: transform 0.2s ease-in-out;
-}
-
-.wds-expander-toggle--collapsed {
-  transform: rotate(180deg);
-}
-
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }
@@ -34852,3 +34631,32 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}

package/src/main.less

@@ -67,9 +67,6 @@
 @import "./prompt/PrimitivePrompt/PrimitivePrompt.less";
 @import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./prompt/InfoPrompt/InfoPrompt.less";
-@import "./prompt/ActionPrompt/ActionPrompt.less";
-@import "./prompt/CriticalBanner/CriticalBanner.less";
-@import "./prompt/common/Expander/Expander.less";
 @import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
@@ -94,6 +91,7 @@
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
 @import "./legacylistItem/LegacyListItem.less";
+@import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -1,19 +1,31 @@
 import { AriaAttributes, ReactNode, useId } from 'react';
 import { clsx } from 'clsx';
 
+import StatusIcon from '../../statusIcon';
 import Body from '../../body';
 import Button from '../../button';
 import { Breakpoint, Typography } from '../../common';
+import AvatarView, { AvatarViewProps } from '../../avatarView';
+import Image from '../../image';
 import { ButtonProps } from '../../button/Button.types';
 import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
+import { BadgeAssetsProps } from '../../badge';
+import { GiftBox } from '@transferwise/icons';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
-import { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';
 
 export type ActionPromptProps = {
   title: ReactNode;
   description?: ReactNode;
   /** @default {} */
-  media?: PromptMedia;
+  media?: {
+    imgSrc?: string;
+    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+      asset?: AvatarViewProps['children'];
+      badge?: Pick<BadgeAssetsProps, 'flagCode'>;
+    };
+    'aria-label'?: string;
+    'aria-hidden'?: boolean;
+  };
   action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
     label: ButtonProps['children'];
   };
@@ -62,13 +74,54 @@ export const ActionPrompt = ({
     .filter(Boolean)
     .join(' ');
 
-  const renderMedia = () =>
-    renderPromptMedia({
-      media,
-      sentiment,
-      mediaId,
-      imgClassName: 'wds-action-prompt--media-image',
-    });
+  const renderMedia = () => {
+    if (media?.imgSrc) {
+      return (
+        <Image
+          id={mediaId}
+          src={media.imgSrc}
+          className="wds-action-prompt--media-image"
+          alt={media['aria-label'] ?? ''}
+        />
+      );
+    }
+    if (media?.avatar) {
+      const badge = media.avatar.badge
+        ? media.avatar.badge
+        : sentiment === 'proposition'
+          ? {}
+          : { status: sentiment };
+      return (
+        <AvatarView
+          {...media.avatar}
+          badge={badge}
+          aria-label={media['aria-label']}
+          aria-hidden={media['aria-hidden']}
+          id={mediaId}
+          size={48}
+        >
+          {media.avatar.asset}
+        </AvatarView>
+      );
+    }
+    return sentiment === 'proposition' ? (
+      <AvatarView
+        id={mediaId}
+        size={48}
+        aria-label={media['aria-label']}
+        aria-hidden={media['aria-hidden']}
+      >
+        <GiftBox />
+      </AvatarView>
+    ) : (
+      <StatusIcon
+        id={mediaId}
+        size={48}
+        sentiment={sentiment}
+        iconLabel={media['aria-hidden'] ? null : media['aria-label']}
+      />
+    );
+  };
 
   return (
     <PrimitivePrompt

package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx

@@ -1,22 +1,17 @@
 import { Cross } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';
+import SentimentSurface, { Sentiment } from '../../sentimentSurface';
 import IconButton from '../../iconButton';
 import { useIntl } from 'react-intl';
 import closeBtnMessages from '../../common/closeButton/CloseButton.messages';
-import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
 export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
   /**
-   * The sentiment determines the colour scheme.
+   * The sentiment determines the colour scheme
    * @default success
    */
   sentiment?: Sentiment;
-  /**
-   * The emphasis level affecting background and text contrast.
-   * @default 'base
-   */
-  emphasis?: Emphasis;
   /**
    * Media to be displayed on the prompt (icon/image/etc).
    */
@@ -38,53 +33,42 @@ export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
 /**
  * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.
  * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */
-export const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(
-  (
-    {
-      sentiment = 'success',
-      emphasis = 'base',
-      media,
-      actions,
-      onDismiss,
-      className,
-      children,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const intl = useIntl();
+export const PrimitivePrompt = ({
+  sentiment = 'success',
+  media,
+  actions,
+  onDismiss,
+  className,
+  children,
+  ...restProps
+}: PrimitivePromptProps) => {
+  const intl = useIntl();
 
-    return (
-      <SentimentSurface
-        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props
-        ref={ref}
-        sentiment={sentiment}
-        emphasis={emphasis}
-        className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}
-        {...restProps}
+  return (
+    <SentimentSurface
+      sentiment={sentiment}
+      className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}
+      {...restProps}
+    >
+      <div
+        className={clsx('wds-prompt__content-wrapper', {
+          'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,
+        })}
       >
-        <div
-          className={clsx('wds-prompt__content-wrapper', {
-            'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,
-          })}
-        >
-          <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>
-          {children}
-          {onDismiss && (
-            <IconButton
-              size={24}
-              priority="secondary"
-              aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
-              onClick={onDismiss}
-            >
-              <Cross />
-            </IconButton>
-          )}
-          {actions && <div className="wds-prompt__actions-wrapper">{actions}</div>}
-        </div>
-      </SentimentSurface>
-    );
-  },
-);
-
-PrimitivePrompt.displayName = 'PrimitivePrompt';
+        <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>
+        {children}
+        {onDismiss && (
+          <IconButton
+            size={24}
+            priority="secondary"
+            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
+            onClick={onDismiss}
+          >
+            <Cross />
+          </IconButton>
+        )}
+        {actions && <div className="wds-prompt__actions-wrapper">{actions}</div>}
+      </div>
+    </SentimentSurface>
+  );
+};

package/src/prompt/index.ts

@@ -12,7 +12,3 @@ export { ActionPrompt } from './ActionPrompt';
 // InfoPrompt
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './InfoPrompt';
 export { InfoPrompt } from './InfoPrompt';
-
-// CriticalBanner
-export type { CriticalBannerProps } from './CriticalBanner';
-export { CriticalBanner } from './CriticalBanner';

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -202,26 +202,18 @@ const TokenSwatch = ({ token }: { token: string }) => (
 export const EmphasisLevels: Story = {
   render: (args) => (
     <>
-      {sentiments.map((sentiment) => (
-        <div key={sentiment}>
-          <SentimentSurface
-            key={`${sentiment}-base`}
-            {...args}
-            sentiment={sentiment}
-            emphasis="base"
-          >
-            <div className="p-a-2 text-capitalize">{sentiment} - Base emphasis</div>
-          </SentimentSurface>
-          <SentimentSurface
-            key={`${sentiment}-elevated`}
-            {...args}
-            sentiment={sentiment}
-            emphasis="elevated"
-          >
-            <div className="p-a-2 text-capitalize">{sentiment} - Elevated emphasis</div>
-          </SentimentSurface>
-        </div>
-      ))}
+      <SentimentSurface {...args} sentiment="negative" emphasis="base">
+        <div className="p-a-2">Negative - Base emphasis</div>
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="negative" emphasis="elevated">
+        <div className="p-a-2">Negative - Elevated emphasis</div>
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="success" emphasis="base">
+        <div className="p-a-2">Success - Base emphasis</div>
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="success" emphasis="elevated">
+        <div className="p-a-2">Success - Elevated emphasis</div>
+      </SentimentSurface>
     </>
   ),
   parameters: {
@@ -377,8 +369,8 @@ export const SentimentAwareComponents: Story = {
           {STATUS_NEGATIVE}
         </div>
 
-        <Header level="group" title="Success sentiment surface - Base emphasis" />
-        <SentimentSurface sentiment="success" emphasis="base">
+        <Header level="group" title="Success sentiment surface" />
+        <SentimentSurface sentiment="success">
           <div className="p-a-2 m-b-2 sentimentAwareComponent">
             {BODY}
             {AVATAR_SUCCESS}
@@ -386,26 +378,8 @@ export const SentimentAwareComponents: Story = {
           </div>
         </SentimentSurface>
 
-        <Header level="group" title="Success sentiment surface - Elevated emphasis" />
-        <SentimentSurface sentiment="success" emphasis="elevated">
-          <div className="p-a-2 m-b-2 sentimentAwareComponent">
-            {BODY}
-            {AVATAR_SUCCESS}
-            {STATUS_SUCCESS}
-          </div>
-        </SentimentSurface>
-
-        <Header level="group" title="Negative sentiment surface - Base emphasis" />
-        <SentimentSurface sentiment="negative" emphasis="base">
-          <div className="p-a-2 m-b-2 sentimentAwareComponent">
-            {BODY}
-            {AVATAR_NEGATIVE}
-            {STATUS_NEGATIVE}
-          </div>
-        </SentimentSurface>
-
-        <Header level="group" title="Negative sentiment surface - Elevated emphasis" />
-        <SentimentSurface sentiment="negative" emphasis="elevated">
+        <Header level="group" title="Negative sentiment surface" />
+        <SentimentSurface sentiment="negative">
           <div className="p-a-2 m-b-2 sentimentAwareComponent">
             {BODY}
             {AVATAR_NEGATIVE}
@@ -453,7 +427,7 @@ function CustomCard({ children, className }: { className?: string; children: Rea
 
 export const CustomComponents: Story = {
   tags: ['!autodocs', '!dev'],
-  render: () => (
+  render: (args) => (
     <>
       <style>{`
         .custom-card {

package/src/table/Table.story.tsx

@@ -400,7 +400,7 @@ export const WithError: Story = {
     error: {
       message: 'Something went wrong during data fetching',
       action: {
-        href: '/?path=/story/option-table--with-error',
+        href: '/?path=/story/content-table--with-error',
         text: 'To Refresh page, click here',
       },
     },

package/src/table/Table.tsx

@@ -2,7 +2,7 @@ import { useIntl } from 'react-intl';
 import TableCell from './TableCell';
 import TableHeader, { TableHeaderType } from './TableHeader';
 import TableRow, { TableRowClickableType, TableRowType } from './TableRow';
-import Alert from '../alert';
+import { InfoPrompt } from '../prompt/InfoPrompt';
 
 import messages from './Table.messages';
 import Loader from '../loader';
@@ -87,13 +87,14 @@ const Table = ({
 
   if (error) {
     return (
-      <Alert
+      <InfoPrompt
         className="np-table-error"
-        message={error.message}
-        type={Sentiment.NEGATIVE}
+        aria-live="assertive"
+        description={error.message ?? ''}
+        sentiment="negative"
         action={{
           href: error?.action?.href ?? '/',
-          text: error?.action?.text ?? formatMessage(messages.refreshPage),
+          label: error?.action?.text ?? formatMessage(messages.refreshPage),
         }}
         data-testid="np-table-error"
       />

package/build/common/hooks/useContainerSize.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var React = require('react');
-var useResizeObserver = require('./useResizeObserver.js');
-
-/**
- * Hook that returns a ref and a boolean indicating if the container
- * has a width >= the specified breakpoint.
- *
- * Useful for synchronizing React state with CSS container queries.
- *
- * Uses content-box measurements to match CSS container query behavior
- * (excludes padding and border).
- *
- * @param breakpoint - Minimum width in pixels
- * @returns [ref, isAboveBreakpoint] tuple
- */
-function useContainerSize(breakpoint) {
-  const ref = React.useRef(null);
-  const [isAboveBreakpoint, setIsAboveBreakpoint] = React.useState(false);
-  useResizeObserver.useResizeObserver(ref, entry => {
-    // Use contentRect.width to match CSS container query box model (content-box)
-    const inlineSize = entry.contentRect.width;
-    setIsAboveBreakpoint(inlineSize >= breakpoint);
-  }, 'content-box');
-  return [ref, isAboveBreakpoint];
-}
-
-exports.useContainerSize = useContainerSize;
-//# sourceMappingURL=useContainerSize.js.map

package/build/common/hooks/useContainerSize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useContainerSize.js","sources":["../../../src/common/hooks/useContainerSize.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport { useResizeObserver } from './useResizeObserver';\n\n/**\n * Hook that returns a ref and a boolean indicating if the container\n * has a width >= the specified breakpoint.\n *\n * Useful for synchronizing React state with CSS container queries.\n *\n * Uses content-box measurements to match CSS container query behavior\n * (excludes padding and border).\n *\n * @param breakpoint - Minimum width in pixels\n * @returns [ref, isAboveBreakpoint] tuple\n */\nexport function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);\n\n  useResizeObserver(\n    ref,\n    (entry) => {\n      // Use contentRect.width to match CSS container query box model (content-box)\n      const inlineSize = entry.contentRect.width;\n      setIsAboveBreakpoint(inlineSize >= breakpoint);\n    },\n    'content-box',\n  );\n\n  return [ref, isAboveBreakpoint];\n}\n"],"names":["useContainerSize","breakpoint","ref","useRef","isAboveBreakpoint","setIsAboveBreakpoint","useState","useResizeObserver","entry","inlineSize","contentRect","width"],"mappings":";;;;;AAIA;;;;;;;;;;;AAWG;AACG,SAAUA,gBAAgBA,CAACC,UAAkB,EAAA;AACjD,EAAA,MAAMC,GAAG,GAAGC,YAAM,CAAiB,IAAI,CAAC;EACxC,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAEjEC,EAAAA,mCAAiB,CACfL,GAAG,EACFM,KAAK,IAAI;AACR;AACA,IAAA,MAAMC,UAAU,GAAGD,KAAK,CAACE,WAAW,CAACC,KAAK;AAC1CN,IAAAA,oBAAoB,CAACI,UAAU,IAAIR,UAAU,CAAC;EAChD,CAAC,EACD,aAAa,CACd;AAED,EAAA,OAAO,CAACC,GAAG,EAAEE,iBAAiB,CAAC;AACjC;;;;"}