@transferwise/components 0.0.0-experimental-58e9ef8 → 0.0.0-experimental-a88d24d

package/build/prompt/ActionPrompt/ActionPrompt.mjs

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { clsx } from 'clsx';
 import StatusIcon from '../../statusIcon/StatusIcon.mjs';
 import Body from '../../body/Body.mjs';
@@ -22,7 +23,6 @@ import '../../common/propsValues/scroll.mjs';
 import '../../common/propsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
 import { GiftBox } from '@transferwise/icons';
-import 'react';
 import 'react-intl';
 import '../../common/closeButton/CloseButton.messages.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -36,17 +36,23 @@ const ActionPrompt = ({
   title,
   description,
   onDismiss,
-  media,
+  media = {},
   action,
   actionSecondary,
   id,
   className,
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': ariaLabel
 }) => {
   const isMobile = !useScreenSize(Breakpoint.MEDIUM);
+  const mediaId = useId();
+  const titleId = useId();
+  const descId = useId();
+  const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, Boolean(ariaLabel) ? undefined : titleId].filter(Boolean).join(' ');
   const renderMedia = () => {
     if (media?.imgSrc) {
       return /*#__PURE__*/jsx(Image, {
+        id: mediaId,
         src: media.imgSrc,
         className: "wds-action-prompt--media-image",
         alt: media['aria-label'] ?? ''
@@ -59,16 +65,24 @@ const ActionPrompt = ({
       return /*#__PURE__*/jsx(AvatarView, {
         ...media.avatar,
         badge: badge,
+        "aria-label": media['aria-label'],
+        "aria-hidden": media['aria-hidden'],
+        id: mediaId,
         size: 48,
         children: media.avatar.asset
       });
     }
     return sentiment === 'proposition' ? /*#__PURE__*/jsx(AvatarView, {
+      id: mediaId,
       size: 48,
+      "aria-label": media['aria-label'],
+      "aria-hidden": media['aria-hidden'],
       children: /*#__PURE__*/jsx(GiftBox, {})
     }) : /*#__PURE__*/jsx(StatusIcon, {
+      id: mediaId,
       size: 48,
-      sentiment: sentiment
+      sentiment: sentiment,
+      iconLabel: Boolean(media['aria-hidden']) ? null : media['aria-label']
     });
   };
   return /*#__PURE__*/jsx(PrimitivePrompt, {
@@ -102,12 +116,21 @@ const ActionPrompt = ({
       })]
     }),
     onDismiss: onDismiss,
+    role: "region",
+    ...(Boolean(ariaLabel) ? {
+      'aria-label': ariaLabel
+    } : {
+      'aria-labelledby': ariaLabelledByIds,
+      'aria-describedby': descId
+    }),
     children: /*#__PURE__*/jsxs("div", {
       className: clsx('d-flex', 'flex-column', 'justify-content-center'),
       children: [/*#__PURE__*/jsx(Body, {
+        id: titleId,
         type: Typography.BODY_LARGE_BOLD,
         children: title
       }), description && /*#__PURE__*/jsx(Body, {
+        id: descId,
         children: description
       })]
     })

package/build/prompt/ActionPrompt/ActionPrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  media?: {\n    imgSrc?: string;\n    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n      asset?: AvatarViewProps['children'];\n      badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n    };\n    'aria-label'?: string;\n  };\n  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media,\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n  const renderMedia = () => {\n    if (media?.imgSrc) {\n      return (\n        <Image\n          src={media.imgSrc}\n          className=\"wds-action-prompt--media-image\"\n          alt={media['aria-label'] ?? ''}\n        />\n      );\n    }\n    if (media?.avatar) {\n      const badge = media.avatar.badge\n        ? media.avatar.badge\n        : sentiment === 'proposition'\n          ? {}\n          : { status: sentiment };\n      return (\n        <AvatarView {...media.avatar} badge={badge} size={48}>\n          {media.avatar.asset}\n        </AvatarView>\n      );\n    }\n    return sentiment === 'proposition' ? (\n      <AvatarView size={48}>\n        <GiftBox />\n      </AvatarView>\n    ) : (\n      <StatusIcon size={48} sentiment={sentiment} />\n    );\n  };\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      onDismiss={onDismiss}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>\n        {description && <Body>{description}</Body>}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","isMobile","useScreenSize","Breakpoint","MEDIUM","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
+{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  media?: {\n    imgSrc?: string;\n    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n      asset?: AvatarViewProps['children'];\n      badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n    };\n    'aria-label'?: string;\n    'aria-hidden'?: boolean;\n  };\n  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media = {},\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n  'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    Boolean(ariaLabel) ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const renderMedia = () => {\n    if (media?.imgSrc) {\n      return (\n        <Image\n          id={mediaId}\n          src={media.imgSrc}\n          className=\"wds-action-prompt--media-image\"\n          alt={media['aria-label'] ?? ''}\n        />\n      );\n    }\n    if (media?.avatar) {\n      const badge = media.avatar.badge\n        ? media.avatar.badge\n        : sentiment === 'proposition'\n          ? {}\n          : { status: sentiment };\n      return (\n        <AvatarView\n          {...media.avatar}\n          badge={badge}\n          aria-label={media['aria-label']}\n          aria-hidden={media['aria-hidden']}\n          id={mediaId}\n          size={48}\n        >\n          {media.avatar.asset}\n        </AvatarView>\n      );\n    }\n    return sentiment === 'proposition' ? (\n      <AvatarView\n        id={mediaId}\n        size={48}\n        aria-label={media['aria-label']}\n        aria-hidden={media['aria-hidden']}\n      >\n        <GiftBox />\n      </AvatarView>\n    ) : (\n      <StatusIcon\n        id={mediaId}\n        size={48}\n        sentiment={sentiment}\n        iconLabel={Boolean(media['aria-hidden']) ? null : media['aria-label']}\n      />\n    );\n  };\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      onDismiss={onDismiss}\n      role=\"region\"\n      {...(Boolean(ariaLabel)\n        ? { 'aria-label': ariaLabel }\n        : {\n            'aria-labelledby': ariaLabelledByIds,\n            'aria-describedby': descId,\n          })}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body id={titleId} type={Typography.BODY_LARGE_BOLD}>\n          {title}\n        </Body>\n        {description && <Body id={descId}>{description}</Body>}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","Boolean","filter","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}

package/build/slidingPanel/SlidingPanel.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var clsx = require('clsx');
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
-var PreventScroll = require('../common/preventScroll/PreventScroll.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 const EXIT_ANIMATION = 350;
@@ -21,28 +20,26 @@ const SlidingPanel = /*#__PURE__*/React.forwardRef(({
 }, reference) => {
   const localReference = React.useRef(null);
   React.useImperativeHandle(reference, () => localReference.current, []);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll.PreventScroll, {}) : null, /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
-      ...rest,
-      key: `sliding-panel--open-${position}`,
-      nodeRef: localReference,
-      in: open
-      // Wait for animation to finish before unmount.
-      ,
-      timeout: {
-        enter: 0,
-        exit: EXIT_ANIMATION
-      },
-      classNames: "sliding-panel",
-      appear: true,
-      unmountOnExit: true
-    }, /*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: localReference,
-      "data-testid": testId,
-      className: clsx.clsx('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
-      children: children
-    }))]
-  });
+  return /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
+    ...rest,
+    key: `sliding-panel--open-${position}`,
+    nodeRef: localReference,
+    in: open
+    // Wait for animation to finish before unmount.
+    ,
+    timeout: {
+      enter: 0,
+      exit: EXIT_ANIMATION
+    },
+    classNames: "sliding-panel",
+    appear: true,
+    unmountOnExit: true
+  }, /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: localReference,
+    "data-testid": testId,
+    className: clsx.clsx('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
+    children: children
+  }));
 });
 
 exports.EXIT_ANIMATION = EXIT_ANIMATION;

package/build/slidingPanel/SlidingPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlidingPanel.js","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <>\n        {open ? <PreventScroll /> : null}\n\n        <CSSTransition\n          {...rest}\n          key={`sliding-panel--open-${position}`}\n          nodeRef={localReference}\n          in={open}\n          // Wait for animation to finish before unmount.\n          timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n          classNames=\"sliding-panel\"\n          appear\n          unmountOnExit\n        >\n          <div\n            ref={localReference}\n            data-testid={testId}\n            className={clsx(\n              'sliding-panel',\n              `sliding-panel--open-${position}`,\n              showSlidingPanelBorder && `sliding-panel--border-${position}`,\n              slidingPanelPositionFixed && 'sliding-panel--fixed',\n              className,\n            )}\n          >\n            {children}\n          </div>\n        </CSSTransition>\n      </>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_jsxs","_Fragment","_jsx","PreventScroll","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","ref","clsx"],"mappings":";;;;;;;;;;AAOO,MAAMA,cAAc,GAAG;AAW9B,MAAMC,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,YAAM,CAAiB,IAAa,CAAC;EAC5DC,yBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGJ,IAAI,gBAAGc,cAAA,CAACC,2BAAa,EAAA,EAAA,CAAG,GAAG,IAAI,eAEhCC,mBAAA,CAACC,kCAAa,EAAA;AAAA,MAAA,GACRX,IAAI;MACRY,GAAG,EAAE,CAAA,oBAAA,EAAuBnB,QAAQ,CAAA,CAAG;AACvCoB,MAAAA,OAAO,EAAEX,cAAe;AACxBY,MAAAA,EAAE,EAAEpB;AACJ;AAAA;AACAqB,MAAAA,OAAO,EAAE;AAAEC,QAAAA,KAAK,EAAE,CAAC;AAAEC,QAAAA,IAAI,EAAE3B;OAAiB;AAC5C4B,MAAAA,UAAU,EAAC,eAAe;MAC1BC,MAAM,EAAA,IAAA;MACNC,aAAa,EAAA;AAAA,KAAA,eAEbZ,cAAA,CAAA,KAAA,EAAA;AACEa,MAAAA,GAAG,EAAEnB,cAAe;AACpB,MAAA,aAAA,EAAaH,MAAO;MACpBF,SAAS,EAAEyB,SAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB7B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,MAAAA,QAAA,EAEDA;AAAQ,KACN,CACQ,CACjB;AAAA,GAAA,CAAG;AAEP,CAAC;;;;;"}
+{"version":3,"file":"SlidingPanel.js","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={clsx(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref","clsx"],"mappings":";;;;;;;;;AAMO,MAAMA,cAAc,GAAG;AAW9B,MAAMC,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,YAAM,CAAiB,IAAa,CAAC;EAC5DC,yBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,mBAAA,CAACC,kCAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAA,oBAAA,EAAuBf,QAAQ,CAAA,CAAG;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA;AAAA,GAAA,eAEbC,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEsB,SAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB1B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACN,CACQ,CAAC;AAEpB,CAAC;;;;;"}

package/build/slidingPanel/SlidingPanel.mjs

@@ -1,8 +1,7 @@
 import { clsx } from 'clsx';
 import { forwardRef, useRef, useImperativeHandle, createElement } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { PreventScroll } from '../common/preventScroll/PreventScroll.mjs';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 const EXIT_ANIMATION = 350;
 const SlidingPanel = /*#__PURE__*/forwardRef(({
@@ -17,28 +16,26 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
 }, reference) => {
   const localReference = useRef(null);
   useImperativeHandle(reference, () => localReference.current, []);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, /*#__PURE__*/createElement(CSSTransition, {
-      ...rest,
-      key: `sliding-panel--open-${position}`,
-      nodeRef: localReference,
-      in: open
-      // Wait for animation to finish before unmount.
-      ,
-      timeout: {
-        enter: 0,
-        exit: EXIT_ANIMATION
-      },
-      classNames: "sliding-panel",
-      appear: true,
-      unmountOnExit: true
-    }, /*#__PURE__*/jsx("div", {
-      ref: localReference,
-      "data-testid": testId,
-      className: clsx('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
-      children: children
-    }))]
-  });
+  return /*#__PURE__*/createElement(CSSTransition, {
+    ...rest,
+    key: `sliding-panel--open-${position}`,
+    nodeRef: localReference,
+    in: open
+    // Wait for animation to finish before unmount.
+    ,
+    timeout: {
+      enter: 0,
+      exit: EXIT_ANIMATION
+    },
+    classNames: "sliding-panel",
+    appear: true,
+    unmountOnExit: true
+  }, /*#__PURE__*/jsx("div", {
+    ref: localReference,
+    "data-testid": testId,
+    className: clsx('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
+    children: children
+  }));
 });
 
 export { EXIT_ANIMATION, SlidingPanel as default };

package/build/slidingPanel/SlidingPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SlidingPanel.mjs","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <>\n        {open ? <PreventScroll /> : null}\n\n        <CSSTransition\n          {...rest}\n          key={`sliding-panel--open-${position}`}\n          nodeRef={localReference}\n          in={open}\n          // Wait for animation to finish before unmount.\n          timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n          classNames=\"sliding-panel\"\n          appear\n          unmountOnExit\n        >\n          <div\n            ref={localReference}\n            data-testid={testId}\n            className={clsx(\n              'sliding-panel',\n              `sliding-panel--open-${position}`,\n              showSlidingPanelBorder && `sliding-panel--border-${position}`,\n              slidingPanelPositionFixed && 'sliding-panel--fixed',\n              className,\n            )}\n          >\n            {children}\n          </div>\n        </CSSTransition>\n      </>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_jsxs","_Fragment","_jsx","PreventScroll","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","ref","clsx"],"mappings":";;;;;;AAOO,MAAMA,cAAc,GAAG;AAW9B,MAAMC,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,MAAM,CAAiB,IAAa,CAAC;EAC5DC,mBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGJ,IAAI,gBAAGc,GAAA,CAACC,aAAa,EAAA,EAAA,CAAG,GAAG,IAAI,eAEhCC,aAAA,CAACC,aAAa,EAAA;AAAA,MAAA,GACRX,IAAI;MACRY,GAAG,EAAE,CAAA,oBAAA,EAAuBnB,QAAQ,CAAA,CAAG;AACvCoB,MAAAA,OAAO,EAAEX,cAAe;AACxBY,MAAAA,EAAE,EAAEpB;AACJ;AAAA;AACAqB,MAAAA,OAAO,EAAE;AAAEC,QAAAA,KAAK,EAAE,CAAC;AAAEC,QAAAA,IAAI,EAAE3B;OAAiB;AAC5C4B,MAAAA,UAAU,EAAC,eAAe;MAC1BC,MAAM,EAAA,IAAA;MACNC,aAAa,EAAA;AAAA,KAAA,eAEbZ,GAAA,CAAA,KAAA,EAAA;AACEa,MAAAA,GAAG,EAAEnB,cAAe;AACpB,MAAA,aAAA,EAAaH,MAAO;MACpBF,SAAS,EAAEyB,IAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB7B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,MAAAA,QAAA,EAEDA;AAAQ,KACN,CACQ,CACjB;AAAA,GAAA,CAAG;AAEP,CAAC;;;;"}
+{"version":3,"file":"SlidingPanel.mjs","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={clsx(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref","clsx"],"mappings":";;;;;AAMO,MAAMA,cAAc,GAAG;AAW9B,MAAMC,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,MAAM,CAAiB,IAAa,CAAC;EAC5DC,mBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,aAAA,CAACC,aAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAA,oBAAA,EAAuBf,QAAQ,CAAA,CAAG;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA;AAAA,GAAA,eAEbC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEsB,IAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB1B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACN,CACQ,CAAC;AAEpB,CAAC;;;;"}

package/build/statusIcon/StatusIcon.js

@@ -38,6 +38,7 @@ const mapLegacySize = {
   [String(size.Size.LARGE)]: 48
 };
 const StatusIcon = ({
+  id,
   sentiment: sentiment$1 = 'neutral',
   size: sizeProp = 40,
   iconLabel
@@ -98,6 +99,7 @@ const StatusIcon = ({
     size: isTinyViewport && size < 40 ? 32 : size,
     "data-testid": "status-icon",
     className: clsx.clsx('status-circle', sentiment$1),
+    id: id,
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       className: clsx.clsx('status-icon', iconColor),
       title: iconLabel === null ? undefined : iconLabel || defaultIconLabel

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface\n      as=\"span\"\n      // @ts-expect-error sentiment and SentimentSurface types mismatch\n      sentiment={\n        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n      }\n      {...props}\n    />\n  );\n  return (\n    <Circle\n      as={SentimentSurfaceSetting}\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface\n      as=\"span\"\n      // @ts-expect-error sentiment and SentimentSurface types mismatch\n      sentiment={\n        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n      }\n      {...props}\n    />\n  );\n  return (\n    <Circle\n      as={SentimentSurfaceSetting}\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/statusIcon/StatusIcon.mjs

@@ -34,6 +34,7 @@ const mapLegacySize = {
   [String(Size.LARGE)]: 48
 };
 const StatusIcon = ({
+  id,
   sentiment = 'neutral',
   size: sizeProp = 40,
   iconLabel
@@ -94,6 +95,7 @@ const StatusIcon = ({
     size: isTinyViewport && size < 40 ? 32 : size,
     "data-testid": "status-icon",
     className: clsx('status-circle', sentiment),
+    id: id,
     children: /*#__PURE__*/jsx(Icon, {
       className: clsx('status-icon', iconColor),
       title: iconLabel === null ? undefined : iconLabel || defaultIconLabel

package/build/statusIcon/StatusIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface\n      as=\"span\"\n      // @ts-expect-error sentiment and SentimentSurface types mismatch\n      sentiment={\n        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n      }\n      {...props}\n    />\n  );\n  return (\n    <Circle\n      as={SentimentSurfaceSetting}\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
+{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface\n      as=\"span\"\n      // @ts-expect-error sentiment and SentimentSurface types mismatch\n      sentiment={\n        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n      }\n      {...props}\n    />\n  );\n  return (\n    <Circle\n      as={SentimentSurfaceSetting}\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/styles/dimmer/Dimmer.css

@@ -1,6 +1,5 @@
 .no-scroll {
   overflow: hidden;
-  scroll-behavior: unset;
 }
 .dimmer {
   position: fixed;

package/build/styles/inputs/SelectInput.css

@@ -11,38 +11,35 @@
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  height: 100vh;
-  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
+  inset: 0px;
   bottom: env(keyboard-inset-height, 0px);
-  padding-top: 64px;
-  padding-top: var(--size-64);
-  padding-bottom: min(env(safe-area-inset-bottom, 16px));
-  padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: 100%;
-  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  border-top-left-radius: var(--size-32);
+  /* TODO: Tokenize */
   border-top-right-radius: 32px;
-  border-top-right-radius: var(--size-32);
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/build/styles/main.css

@@ -2574,7 +2574,6 @@ button.np-option {
 }
 .no-scroll {
   overflow: hidden;
-  scroll-behavior: unset;
 }
 .dimmer {
   position: fixed;
@@ -3840,38 +3839,35 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  height: 100vh;
-  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
+  inset: 0px;
   bottom: env(keyboard-inset-height, 0px);
-  padding-top: 64px;
-  padding-top: var(--size-64);
-  padding-bottom: min(env(safe-area-inset-bottom, 16px));
-  padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: 100%;
-  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  border-top-left-radius: var(--size-32);
+  /* TODO: Tokenize */
   border-top-right-radius: 32px;
-  border-top-right-radius: var(--size-32);
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/build/types/avatarView/AvatarView.d.ts

@@ -19,7 +19,7 @@ export type Props = {
     interactive?: boolean;
     selected?: boolean;
     style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
-} & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'>;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'>;
 declare function AvatarView({ children, size, selected, badge, interactive, className, style, imgSrc, profileType, profileName, ...restProps }: Props): import("react").JSX.Element;
 export default AvatarView;
 //# sourceMappingURL=AvatarView.d.ts.map

package/build/types/avatarView/AvatarView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACrF,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAkCP;AA0GD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,IAAI,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CAC5F,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAkCP;AA0GD,eAAe,UAAU,CAAC"}

package/build/types/common/preventScroll/PreventScroll.d.ts

@@ -1,2 +1,2 @@
-export declare function PreventScroll(): import("react").JSX.Element;
+export declare function PreventScroll(): null;
 //# sourceMappingURL=PreventScroll.d.ts.map

package/build/types/common/preventScroll/PreventScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreventScroll.d.ts","sourceRoot":"","sources":["../../../../src/common/preventScroll/PreventScroll.tsx"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,gCAa5B"}
+{"version":3,"file":"PreventScroll.d.ts","sourceRoot":"","sources":["../../../../src/common/preventScroll/PreventScroll.tsx"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,SAG5B"}

package/build/types/inputs/_BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA8FlB"}
+{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA4FlB"}

package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { AriaAttributes, ReactNode } from 'react';
 import { AvatarViewProps } from '../../avatarView';
 import { ButtonProps } from '../../button/Button.types';
 import { PrimitivePromptProps } from '../PrimitivePrompt';
@@ -13,6 +13,7 @@ export type ActionPromptProps = {
             badge?: Pick<BadgeAssetsProps, 'flagCode'>;
         };
         'aria-label'?: string;
+        'aria-hidden'?: boolean;
     };
     action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
         label: ButtonProps['children'];
@@ -20,7 +21,8 @@ export type ActionPromptProps = {
     actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
         label: ButtonProps['children'];
     };
+    'aria-label'?: AriaAttributes['aria-label'];
 } & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
-export declare const ActionPrompt: ({ sentiment, title, description, onDismiss, media, action, actionSecondary, id, className, "data-testid": testId, }: ActionPromptProps) => import("react").JSX.Element;
+export declare const ActionPrompt: ({ sentiment, title, description, onDismiss, media, action, actionSecondary, id, className, "data-testid": testId, "aria-label": ariaLabel, }: ActionPromptProps) => import("react").JSX.Element;
 export default ActionPrompt;
 //# sourceMappingURL=ActionPrompt.d.ts.map

package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,OAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;YACzE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;YACpC,KAAK,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;SAC5C,CAAC;QACF,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACzD,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;CACH,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAE/F,eAAO,MAAM,YAAY,GAAI,qHAW1B,iBAAiB,gCAiFnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ActionPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAOzD,OAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;YACzE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;YACpC,KAAK,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;SAC5C,CAAC;QACF,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACzD,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAE/F,eAAO,MAAM,YAAY,GAAI,8IAY1B,iBAAiB,gCAuHnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/slidingPanel/SlidingPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlidingPanel.d.ts","sourceRoot":"","sources":["../../../src/slidingPanel/SlidingPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAGrC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,UAAU,CAAC;IAClF,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,GAAG,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;IAChF,IAAI,EAAE,OAAO,CAAC;IACd,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,YAAY,kIAiDjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SlidingPanel.d.ts","sourceRoot":"","sources":["../../../src/slidingPanel/SlidingPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,UAAU,CAAC;IAClF,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,GAAG,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;IAChF,IAAI,EAAE,OAAO,CAAC;IACd,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,YAAY,kIA6CjB,CAAC;AAEF,eAAe,YAAY,CAAC"}