@transferwise/components 46.130.0 → 46.130.2

package/build/listItem/ListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  | 'non-interactive'\n  | 'navigation'\n  | 'radio'\n  | 'checkbox'\n  | 'switch'\n  | 'button'\n  | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  /**\n   * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n   */\n  disabled?: boolean;\n  /**\n   * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n   * **NB:** This message cannot house more than **1** link or inline button.<br />\n   * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.\n   */\n  disabledPromptMessage?: ReactNode;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  disabledPromptMessage,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n    (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [isFullyInteractive]);\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted, disabledPromptMessage },\n      mediaSize,\n      isPartiallyInteractive,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasControl = Boolean(control);\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            disabled: disabled && !isPartiallyInteractive,\n            'disabled--has-prompt-reason':\n              !disabledPromptMessage && disabled && !isPartiallyInteractive,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n        style={\n          {\n            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n          } as React.CSSProperties\n        }\n      >\n        {isFullyInteractive && spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            disabledPromptMessage,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span className=\"wds-list-item-titles\">\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n                'wds-list-item-button-control--hasPrompt':\n                  controlType === 'button' && Boolean(prompt),\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<\n    ListItemProps,\n    'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'\n  >;\n\nfunction View({\n  children,\n  additionalInfo,\n  prompt,\n  disabled,\n  disabledPromptMessage,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => {\n    const resolvedPrompt =\n      disabled && disabledPromptMessage && !prompt ? (\n        <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n      ) : (\n        prompt\n      );\n\n    return (\n      <>\n        {additionalInfo}\n        {resolvedPrompt}\n      </>\n    );\n  };\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className=\"wds-list-item-view\">{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}
+{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  | 'non-interactive'\n  | 'navigation'\n  | 'radio'\n  | 'checkbox'\n  | 'switch'\n  | 'button'\n  | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  /** @default 'li' */\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  /**\n   * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n   */\n  disabled?: boolean;\n  /**\n   * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n   * **NB:** This message cannot house more than **1** link or inline button.<br />\n   * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.\n   */\n  disabledPromptMessage?: ReactNode;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   * @default null\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  disabledPromptMessage,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n    (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [isFullyInteractive]);\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted, disabledPromptMessage },\n      mediaSize,\n      isPartiallyInteractive,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasControl = Boolean(control);\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            disabled: disabled && !isPartiallyInteractive,\n            'disabled--has-prompt-reason':\n              !disabledPromptMessage && disabled && !isPartiallyInteractive,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n        style={\n          {\n            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n          } as React.CSSProperties\n        }\n      >\n        {isFullyInteractive && spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            disabledPromptMessage,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span className=\"wds-list-item-titles\">\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n                'wds-list-item-button-control--hasPrompt':\n                  controlType === 'button' && Boolean(prompt),\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<\n    ListItemProps,\n    'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'\n  >;\n\nfunction View({\n  children,\n  additionalInfo,\n  prompt,\n  disabled,\n  disabledPromptMessage,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => {\n    const resolvedPrompt =\n      disabled && disabledPromptMessage && !prompt ? (\n        <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n      ) : (\n        prompt\n      );\n\n    return (\n      <>\n        {additionalInfo}\n        {resolvedPrompt}\n      </>\n    );\n  };\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className=\"wds-list-item-view\">{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}

package/build/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully depracated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated use `size` instead\n   */\n  small?: boolean;\n  size?: SizeType | DeprecatedSize;\n  displayInstantly?: boolean;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div\n      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n        'tw-loader--visible': hasDebounced,\n      })}\n      data-testid={restProps['data-testid']}\n    />\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","clsx","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;QACbC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,0BAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAACP,gBAAgB,CAAC;AAElEQ,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACV,gBAAgB,EAAE;MACrBU,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BnB,KAAK,GAAGE,SAAI,CAACkB,KAAK,GAAGnB,MAAI;AACvE,EAAA,MAAMoB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,cAAA,CAAAC,mBAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACED,cAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAES,SAAI,CAACV,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,MAAA,oBAAoB,EAAEZ;AACvB,KAAA,CAAE;IACH,aAAA,EAAaH,SAAS,CAAC,aAAa;AAAE,GAAA,CACtC;AAEN;AAEA,MAAMgB,gBAAgB,GAAIrB,MAA+B,IAAc;AACrE,EAAA,QAAQA,MAAI;IACV,KAAKC,SAAI,CAACkB,KAAK;IACf,KAAKlB,SAAI,CAAC0B,WAAW;MACnB,OAAO1B,SAAI,CAACkB,KAAK;IAEnB,KAAKlB,SAAI,CAAC2B,WAAW;IACrB,KAAK3B,SAAI,CAAC4B,KAAK;IACf,KAAK5B,SAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,SAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}
+{"version":3,"file":"Loader.js","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated Use `size` instead.\n   * @default false\n   */\n  small?: boolean;\n  /** @default 'md' */\n  size?: SizeType | DeprecatedSize;\n  /** @default false */\n  displayInstantly?: boolean;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  /** @default {} */\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div\n      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n        'tw-loader--visible': hasDebounced,\n      })}\n      data-testid={restProps['data-testid']}\n    />\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","clsx","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;QACbC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,0BAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAACP,gBAAgB,CAAC;AAElEQ,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACV,gBAAgB,EAAE;MACrBU,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BnB,KAAK,GAAGE,SAAI,CAACkB,KAAK,GAAGnB,MAAI;AACvE,EAAA,MAAMoB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,cAAA,CAAAC,mBAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACED,cAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAES,SAAI,CAACV,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,MAAA,oBAAoB,EAAEZ;AACvB,KAAA,CAAE;IACH,aAAA,EAAaH,SAAS,CAAC,aAAa;AAAE,GAAA,CACtC;AAEN;AAEA,MAAMgB,gBAAgB,GAAIrB,MAA+B,IAAc;AACrE,EAAA,QAAQA,MAAI;IACV,KAAKC,SAAI,CAACkB,KAAK;IACf,KAAKlB,SAAI,CAAC0B,WAAW;MACnB,OAAO1B,SAAI,CAACkB,KAAK;IAEnB,KAAKlB,SAAI,CAAC2B,WAAW;IACrB,KAAK3B,SAAI,CAAC4B,KAAK;IACf,KAAK5B,SAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,SAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}

package/build/loader/Loader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.mjs","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully depracated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated use `size` instead\n   */\n  small?: boolean;\n  size?: SizeType | DeprecatedSize;\n  displayInstantly?: boolean;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div\n      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n        'tw-loader--visible': hasDebounced,\n      })}\n      data-testid={restProps['data-testid']}\n    />\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","clsx","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;EACbC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAACP,gBAAgB,CAAC;AAElEQ,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACV,gBAAgB,EAAE;MACrBU,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BnB,KAAK,GAAGE,IAAI,CAACkB,KAAK,GAAGnB,IAAI;AACvE,EAAA,MAAMoB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,GAAA,CAAAC,QAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACED,GAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAES,IAAI,CAACV,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,MAAA,oBAAoB,EAAEZ;AACvB,KAAA,CAAE;IACH,aAAA,EAAaH,SAAS,CAAC,aAAa;AAAE,GAAA,CACtC;AAEN;AAEA,MAAMgB,gBAAgB,GAAIrB,IAA+B,IAAc;AACrE,EAAA,QAAQA,IAAI;IACV,KAAKC,IAAI,CAACkB,KAAK;IACf,KAAKlB,IAAI,CAAC0B,WAAW;MACnB,OAAO1B,IAAI,CAACkB,KAAK;IAEnB,KAAKlB,IAAI,CAAC2B,WAAW;IACrB,KAAK3B,IAAI,CAAC4B,KAAK;IACf,KAAK5B,IAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,IAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}
+{"version":3,"file":"Loader.mjs","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated Use `size` instead.\n   * @default false\n   */\n  small?: boolean;\n  /** @default 'md' */\n  size?: SizeType | DeprecatedSize;\n  /** @default false */\n  displayInstantly?: boolean;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  /** @default {} */\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div\n      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n        'tw-loader--visible': hasDebounced,\n      })}\n      data-testid={restProps['data-testid']}\n    />\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","clsx","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;EACbC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAACP,gBAAgB,CAAC;AAElEQ,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACV,gBAAgB,EAAE;MACrBU,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BnB,KAAK,GAAGE,IAAI,CAACkB,KAAK,GAAGnB,IAAI;AACvE,EAAA,MAAMoB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,GAAA,CAAAC,QAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACED,GAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAES,IAAI,CAACV,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,MAAA,oBAAoB,EAAEZ;AACvB,KAAA,CAAE;IACH,aAAA,EAAaH,SAAS,CAAC,aAAa;AAAE,GAAA,CACtC;AAEN;AAEA,MAAMgB,gBAAgB,GAAIrB,IAA+B,IAAc;AACrE,EAAA,QAAQA,IAAI;IACV,KAAKC,IAAI,CAACkB,KAAK;IACf,KAAKlB,IAAI,CAAC0B,WAAW;MACnB,OAAO1B,IAAI,CAACkB,KAAK;IAEnB,KAAKlB,IAAI,CAAC2B,WAAW;IACrB,KAAK3B,IAAI,CAAC4B,KAAK;IACf,KAAK5B,IAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,IAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}

package/build/logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  LogoWise,\n  LogoWiseInverse,\n  LogoWisePlatform,\n  LogoWisePlatformInverse,\n  LogoFlag,\n  LogoFlagInverse,\n  LogoFlagPlatform,\n  LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n  WISE: LogoWise,\n  WISE_BUSINESS: LogoWise,\n  WISE_INVERSE: LogoWiseInverse,\n  WISE_BUSINESS_INVERSE: LogoWiseInverse,\n  WISE_PLATFORM: LogoWisePlatform,\n  WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n  WISE_FLAG: LogoFlag,\n  WISE_FLAG_INVERSE: LogoFlagInverse,\n  WISE_FLAG_PLATFORM: LogoFlagPlatform,\n  WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /** If true, will use dark colours for dark on light theme */\n  inverse?: boolean;\n  /** What type of logo to display */\n  type?: `${LogoType}`;\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nexport default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {\n  const LogoSm =\n    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n  return (\n    <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n      <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n      <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n    </span>\n  );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;;;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,mBAAQ;AACdC,EAAAA,aAAa,EAAED,mBAAQ;AACvBE,EAAAA,YAAY,EAAEC,0BAAe;AAC7BC,EAAAA,qBAAqB,EAAED,0BAAe;AACtCE,EAAAA,aAAa,EAAEC,2BAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,kCAAuB;AAC9CC,EAAAA,SAAS,EAAEC,mBAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,0BAAe;AAClCC,EAAAA,kBAAkB,EAAEC,2BAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;AAEWC;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,gBAAQ,KAARA,gBAAQ,GAAA,EAAA,CAAA,CAAA;AAepB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAE3B,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,eAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,SAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,cAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,cAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}
+{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  LogoWise,\n  LogoWiseInverse,\n  LogoWisePlatform,\n  LogoWisePlatformInverse,\n  LogoFlag,\n  LogoFlagInverse,\n  LogoFlagPlatform,\n  LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n  WISE: LogoWise,\n  WISE_BUSINESS: LogoWise,\n  WISE_INVERSE: LogoWiseInverse,\n  WISE_BUSINESS_INVERSE: LogoWiseInverse,\n  WISE_PLATFORM: LogoWisePlatform,\n  WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n  WISE_FLAG: LogoFlag,\n  WISE_FLAG_INVERSE: LogoFlagInverse,\n  WISE_FLAG_PLATFORM: LogoFlagPlatform,\n  WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /** If true, will use dark colours for dark on light theme */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nexport default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {\n  const LogoSm =\n    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n  return (\n    <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n      <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n      <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n    </span>\n  );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;;;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,mBAAQ;AACdC,EAAAA,aAAa,EAAED,mBAAQ;AACvBE,EAAAA,YAAY,EAAEC,0BAAe;AAC7BC,EAAAA,qBAAqB,EAAED,0BAAe;AACtCE,EAAAA,aAAa,EAAEC,2BAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,kCAAuB;AAC9CC,EAAAA,SAAS,EAAEC,mBAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,0BAAe;AAClCC,EAAAA,kBAAkB,EAAEC,2BAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;AAEWC;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,gBAAQ,KAARA,gBAAQ,GAAA,EAAA,CAAA,CAAA;AAkBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAE3B,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,eAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,SAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,cAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,cAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}

package/build/logo/Logo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  LogoWise,\n  LogoWiseInverse,\n  LogoWisePlatform,\n  LogoWisePlatformInverse,\n  LogoFlag,\n  LogoFlagInverse,\n  LogoFlagPlatform,\n  LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n  WISE: LogoWise,\n  WISE_BUSINESS: LogoWise,\n  WISE_INVERSE: LogoWiseInverse,\n  WISE_BUSINESS_INVERSE: LogoWiseInverse,\n  WISE_PLATFORM: LogoWisePlatform,\n  WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n  WISE_FLAG: LogoFlag,\n  WISE_FLAG_INVERSE: LogoFlagInverse,\n  WISE_FLAG_PLATFORM: LogoFlagPlatform,\n  WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /** If true, will use dark colours for dark on light theme */\n  inverse?: boolean;\n  /** What type of logo to display */\n  type?: `${LogoType}`;\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nexport default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {\n  const LogoSm =\n    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n  return (\n    <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n      <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n      <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n    </span>\n  );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,QAAQ;AACdC,EAAAA,aAAa,EAAED,QAAQ;AACvBE,EAAAA,YAAY,EAAEC,eAAe;AAC7BC,EAAAA,qBAAqB,EAAED,eAAe;AACtCE,EAAAA,aAAa,EAAEC,gBAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,uBAAuB;AAC9CC,EAAAA,SAAS,EAAEC,QAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,eAAe;AAClCC,EAAAA,kBAAkB,EAAEC,gBAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;IAEWC;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,QAAQ,KAARA,QAAQ,GAAA,EAAA,CAAA,CAAA;AAepB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAE3B,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,IAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,IAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,GAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,GAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}
+{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  LogoWise,\n  LogoWiseInverse,\n  LogoWisePlatform,\n  LogoWisePlatformInverse,\n  LogoFlag,\n  LogoFlagInverse,\n  LogoFlagPlatform,\n  LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n  WISE: LogoWise,\n  WISE_BUSINESS: LogoWise,\n  WISE_INVERSE: LogoWiseInverse,\n  WISE_BUSINESS_INVERSE: LogoWiseInverse,\n  WISE_PLATFORM: LogoWisePlatform,\n  WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n  WISE_FLAG: LogoFlag,\n  WISE_FLAG_INVERSE: LogoFlagInverse,\n  WISE_FLAG_PLATFORM: LogoFlagPlatform,\n  WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /** If true, will use dark colours for dark on light theme */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nexport default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {\n  const LogoSm =\n    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n  return (\n    <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n      <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n      <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n    </span>\n  );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,QAAQ;AACdC,EAAAA,aAAa,EAAED,QAAQ;AACvBE,EAAAA,YAAY,EAAEC,eAAe;AAC7BC,EAAAA,qBAAqB,EAAED,eAAe;AACtCE,EAAAA,aAAa,EAAEC,gBAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,uBAAuB;AAC9CC,EAAAA,SAAS,EAAEC,QAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,eAAe;AAClCC,EAAAA,kBAAkB,EAAEC,gBAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;IAEWC;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,QAAQ,KAARA,QAAQ,GAAA,EAAA,CAAA,CAAA;AAkBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAE3B,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,IAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,IAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,GAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,GAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}

package/build/main.css

@@ -226,12 +226,12 @@
 .np-theme-platform.wds-sentiment-surface-success-elevated,
 .np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
 .np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
-  --color-sentiment-content-primary: #E2F6D5;
-  --color-sentiment-content-primary-hover: #D3F2C0;
-  --color-sentiment-content-primary-active: #C5EDAB;
-  --color-sentiment-interactive-primary: #E2F6D5;
-  --color-sentiment-interactive-primary-hover: #D3F2C0;
-  --color-sentiment-interactive-primary-active: #C5EDAB;
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
   --color-sentiment-interactive-secondary: #054D28;
   --color-sentiment-interactive-secondary-hover: #043A1E;
   --color-sentiment-interactive-secondary-active: #022614;
@@ -250,24 +250,24 @@
 .np-theme-personal--forest-green.wds-sentiment-surface-success-base,
 .np-theme-business--forest-green.wds-sentiment-surface-success-base,
 .np-theme-platform--forest-green.wds-sentiment-surface-success-base {
-  --color-sentiment-content-primary: #BAE5A0;
-  --color-sentiment-content-primary-hover: #C8EAB3;
-  --color-sentiment-content-primary-active: #D6F0C7;
-  --color-sentiment-interactive-primary: #BAE5A0;
-  --color-sentiment-interactive-primary-hover: #C8EAB3;
-  --color-sentiment-interactive-primary-active: #D6F0C7;
-  --color-sentiment-interactive-secondary: #252C20;
-  --color-sentiment-interactive-secondary-hover: #323B2B;
-  --color-sentiment-interactive-secondary-active: #3E4A36;
-  --color-sentiment-interactive-secondary-neutral: #37422F;
-  --color-sentiment-interactive-secondary-neutral-hover: #46533B;
-  --color-sentiment-interactive-secondary-neutral-active: #546548;
-  --color-sentiment-interactive-control: #252C20;
-  --color-sentiment-interactive-control-hover: #323B2B;
-  --color-sentiment-interactive-control-active: #3E4A36;
-  --color-sentiment-background-surface: #252C20;
-  --color-sentiment-background-surface-hover: #323B2B;
-  --color-sentiment-background-surface-active: #3E4A36;
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
+  --color-sentiment-interactive-secondary: #054D28;
+  --color-sentiment-interactive-secondary-hover: #043A1E;
+  --color-sentiment-interactive-secondary-active: #022614;
+  --color-sentiment-interactive-secondary-neutral: #256A43;
+  --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
+  --color-sentiment-interactive-secondary-neutral-active: #329057;
+  --color-sentiment-interactive-control: #054D28;
+  --color-sentiment-interactive-control-hover: #043A1E;
+  --color-sentiment-interactive-control-active: #022614;
+  --color-sentiment-background-surface: #054D28;
+  --color-sentiment-background-surface-hover: #043A1E;
+  --color-sentiment-background-surface-active: #022614;
 }
 .np-theme-personal--dark.wds-sentiment-surface-success-elevated,
 .np-theme-business--dark.wds-sentiment-surface-success-elevated,
@@ -448,18 +448,18 @@
   --color-sentiment-interactive-primary: #E0F7F7;
   --color-sentiment-interactive-primary-hover: #CAF1F1;
   --color-sentiment-interactive-primary-active: #B6ECEC;
-  --color-sentiment-interactive-secondary: #0B312F;
-  --color-sentiment-interactive-secondary-hover: #124F4C;
-  --color-sentiment-interactive-secondary-active: #176460;
-  --color-sentiment-interactive-secondary-neutral: #174E4D;
-  --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
-  --color-sentiment-interactive-secondary-neutral-active: #237675;
-  --color-sentiment-interactive-control: #0B312F;
-  --color-sentiment-interactive-control-hover: #124F4C;
-  --color-sentiment-interactive-control-active: #176460;
-  --color-sentiment-background-surface: #0B312F;
-  --color-sentiment-background-surface-hover: #124F4C;
-  --color-sentiment-background-surface-active: #176460;
+  --color-sentiment-interactive-secondary: #054D4D;
+  --color-sentiment-interactive-secondary-hover: #043A3A;
+  --color-sentiment-interactive-secondary-active: #022626;
+  --color-sentiment-interactive-secondary-neutral: #1F6161;
+  --color-sentiment-interactive-secondary-neutral-hover: #247070;
+  --color-sentiment-interactive-secondary-neutral-active: #298080;
+  --color-sentiment-interactive-control: #054D4D;
+  --color-sentiment-interactive-control-hover: #043A3A;
+  --color-sentiment-interactive-control-active: #022626;
+  --color-sentiment-background-surface: #054D4D;
+  --color-sentiment-background-surface-hover: #043A3A;
+  --color-sentiment-background-surface-active: #022626;
 }
 .np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
 .np-theme-business--dark.wds-sentiment-surface-proposition-elevated,
@@ -518,6 +518,15 @@
   --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
   --Button-background-active: var(--color-sentiment-interactive-primary-active);
 }
+.critical-comms .wds-Button[class] {
+  color: var(--Button-color);
+}
+.critical-comms .wds-Button[class]:hover {
+  color: var(--Button-color-hover);
+}
+.critical-comms .wds-Button[class]:active {
+  color: var(--Button-color-active);
+}
 .critical-comms .alert-warning .wds-Button {
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);

package/build/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  onUnmount?: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  onUnmount,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const intl = useIntl();\n  const { isMedium } = useLayout();\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      className={className}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n      onUnmount={onUnmount}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n      onExited={onUnmount}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  title ? 'justify-content-between' : 'justify-content-end',\n                  'flex-wrap',\n                )}\n              >\n                {title && (\n                  <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n                    {title}\n                  </Title>\n                )}\n                <IconButton\n                  size={40}\n                  priority=\"tertiary\"\n                  aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n                  onClick={onClose}\n                >\n                  <Cross />\n                </IconButton>\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer ? (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n                >\n                  {footer}\n                </div>\n              ) : (\n                <div className=\"m-t-3\" />\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,mCAAmC,GAAG,GAAG;AAe/C,MAAMC,KAAK,GAAGA,CAAC;AACbC,EAAAA,KAAK,GAAG,IAAI;EACZC,IAAI;AACJC,EAAAA,MAAM,GAAG,IAAI;EACbC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,IAAI;QACJC,MAAI,GAAGC,SAAI,CAACC,MAAM;UAClBC,QAAM,GAAGC,aAAM,CAACC,QAAQ;YACxBC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA,yBAAyB,GAAG,KAAK;EACjC,GAAGC;AAAU,CACF,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtB,MAAM;AAAEC,IAAAA;GAAU,GAAGC,mBAAS,EAAE;AAEhC,EAAA,MAAMC,gBAAgB,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACrD,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;AAE9C,EAAA,OAAO,CAACR,QAAQ,gBACdS,cAAA,CAACC,cAAM,EAAA;AACLxB,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEA,SAAU;AACrB0B,IAAAA,WAAW,EAAE/B,KAAM;AACnBgC,IAAAA,aAAa,EAAE9B,MAAO;IACtBW,QAAQ,EAAEC,iBAAQ,CAACmB,MAAO;AAC1B9B,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEA,SAAU;AAAA8B,IAAAA,QAAA,EAEpBjC;AAAI,GACC,CAAC,gBAET4B,cAAA,CAACM,cAAM,EAAA;AACL7B,IAAAA,IAAI,EAAEA,IAAK;AACX8B,IAAAA,UAAU,EAAE1B,QAAM,KAAKC,aAAM,CAACC,QAAS;AACvCyB,IAAAA,eAAe,EAAExB,UAAS;AAC1ByB,IAAAA,mBAAmB,EAAEtB,yBAA0B;AAC/Cb,IAAAA,OAAO,EAAEA,OAAQ;AACjBoC,IAAAA,QAAQ,EAAEnC,SAAU;IAAA8B,QAAA,eAEpBL,cAAA,CAACW,kCAAa,EAAA;AACZC,MAAAA,OAAO,EAAEnB,gBAAiB;MAC1BoB,MAAM,EAAA,IAAA;AACNC,MAAAA,EAAE,EAAErC,IAAK;AACTsC,MAAAA,UAAU,EAAE;AAAEC,QAAAA,SAAS,EAAE;OAAO;AAChCC,MAAAA,OAAO,EAAEhD,mCAAoC;MAC7CiD,aAAa,EAAA,IAAA;AAAAb,MAAAA,QAAA,eAEbL,cAAA,CAAA,KAAA,EAAA;AACEmB,QAAAA,GAAG,EAAE1B,gBAAiB;QACtBjB,SAAS,EAAE4C,SAAI,CACb,UAAU,EACV,QAAQ,EACR,MAAM,EACN,cAAc,EACdvC,QAAM,KAAKC,aAAM,CAACuC,OAAO,IAAI,sBAAsB,EACnD7C,SAAS,CACT;AAAA,QAAA,GACEY,UAAU;AAAAiB,QAAAA,QAAA,eAEdL,cAAA,CAAA,KAAA,EAAA;AACEsB,UAAAA,EAAE,EAAEzB,SAAU;AACd0B,UAAAA,IAAI,EAAC,QAAQ;UACb,YAAA,EAAA,IAAU;AACV,UAAA,iBAAA,EAAiB5B,OAAQ;AACzBnB,UAAAA,SAAS,EAAE4C,SAAI,CAAC,iBAAiB,EAAE,QAAQ,EAAE;YAC3C,CAAC,CAAA,SAAA,EAAY1C,MAAI,CAAA,CAAE,GAAGA;AACvB,WAAA,CAAE;AAAA2B,UAAAA,QAAA,eAEHmB,eAAA,CAAA,KAAA,EAAA;YACEhD,SAAS,EAAE4C,SAAI,CACb,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,yBAAyB,CACzB;AAAAf,YAAAA,QAAA,gBAEFmB,eAAA,CAAA,KAAA,EAAA;AACEhD,cAAAA,SAAS,EAAE4C,SAAI,CACb,iBAAiB,EACjB,QAAQ,EACR,oBAAoB,EACpBjD,KAAK,GAAG,yBAAyB,GAAG,qBAAqB,EACzD,WAAW,CACX;AAAAkC,cAAAA,QAAA,EAAA,CAEDlC,KAAK,iBACJ6B,cAAA,CAACyB,aAAK,EAAA;AAACH,gBAAAA,EAAE,EAAE3B,OAAQ;gBAAC+B,IAAI,EAAEC,qBAAU,CAACC,gBAAiB;AAACpD,gBAAAA,SAAS,EAAC,gBAAgB;AAAA6B,gBAAAA,QAAA,EAC9ElC;AAAK,eACD,CACR,eACD6B,cAAA,CAAC6B,kBAAU,EAAA;AACTnD,gBAAAA,IAAI,EAAE,EAAG;AACToD,gBAAAA,QAAQ,EAAC,UAAU;AACnB,gBAAA,YAAA,EAAYzC,IAAI,CAAC0C,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,gBAAAA,OAAO,EAAE5D,OAAQ;AAAA+B,gBAAAA,QAAA,eAEjBL,cAAA,CAACmC,WAAK,EAAA,EAAA;AACR,eAAY,CACd;aAAK,CACL,eAAAnC,cAAA,CAAA,KAAA,EAAA;AACExB,cAAAA,SAAS,EAAE4C,SAAI,CAAC,eAAe,EAAE;AAC/B,gBAAA,2BAA2B,EAAEvC,QAAM,KAAKC,aAAM,CAACuC;AAChD,eAAA,CAAE;AAAAhB,cAAAA,QAAA,EAEFjC;AAAI,aACF,CACL,EAACC,MAAM,gBACL2B,cAAA,CAAA,KAAA,EAAA;cACExB,SAAS,EAAE4C,SAAI,CAAC,iBAAiB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,WAAW,CAAE;AAAAf,cAAAA,QAAA,EAE/EhC;aACE,CAAC,gBAEN2B,cAAA,CAAA,KAAA,EAAA;AAAKxB,cAAAA,SAAS,EAAC;AAAO,aAAA,CACvB;WACE;SACF;OACF;KACQ;AACjB,GAAQ,CACT;AACH;;;;"}
+{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  /** @default null */\n  title?: ReactNode;\n  body: ReactNode;\n  /** @default null */\n  footer?: ReactNode;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  onUnmount?: () => void;\n  open: boolean;\n  /** @default 'viewport' */\n  scroll?: ScrollContent | ScrollViewport;\n  /** @default 'center' */\n  position?: PositionTop | PositionCenter;\n  /** @default false */\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  onUnmount,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const intl = useIntl();\n  const { isMedium } = useLayout();\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      className={className}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n      onUnmount={onUnmount}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n      onExited={onUnmount}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  title ? 'justify-content-between' : 'justify-content-end',\n                  'flex-wrap',\n                )}\n              >\n                {title && (\n                  <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n                    {title}\n                  </Title>\n                )}\n                <IconButton\n                  size={40}\n                  priority=\"tertiary\"\n                  aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n                  onClick={onClose}\n                >\n                  <Cross />\n                </IconButton>\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer ? (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n                >\n                  {footer}\n                </div>\n              ) : (\n                <div className=\"m-t-3\" />\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}

package/build/modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  onUnmount?: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  onUnmount,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const intl = useIntl();\n  const { isMedium } = useLayout();\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      className={className}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n      onUnmount={onUnmount}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n      onExited={onUnmount}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  title ? 'justify-content-between' : 'justify-content-end',\n                  'flex-wrap',\n                )}\n              >\n                {title && (\n                  <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n                    {title}\n                  </Title>\n                )}\n                <IconButton\n                  size={40}\n                  priority=\"tertiary\"\n                  aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n                  onClick={onClose}\n                >\n                  <Cross />\n                </IconButton>\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer ? (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n                >\n                  {footer}\n                </div>\n              ) : (\n                <div className=\"m-t-3\" />\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  /** @default null */\n  title?: ReactNode;\n  body: ReactNode;\n  /** @default null */\n  footer?: ReactNode;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  onUnmount?: () => void;\n  open: boolean;\n  /** @default 'viewport' */\n  scroll?: ScrollContent | ScrollViewport;\n  /** @default 'center' */\n  position?: PositionTop | PositionCenter;\n  /** @default false */\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  onUnmount,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const intl = useIntl();\n  const { isMedium } = useLayout();\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      className={className}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n      onUnmount={onUnmount}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n      onExited={onUnmount}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  title ? 'justify-content-between' : 'justify-content-end',\n                  'flex-wrap',\n                )}\n              >\n                {title && (\n                  <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n                    {title}\n                  </Title>\n                )}\n                <IconButton\n                  size={40}\n                  priority=\"tertiary\"\n                  aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n                  onClick={onClose}\n                >\n                  <Cross />\n                </IconButton>\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer ? (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n                >\n                  {footer}\n                </div>\n              ) : (\n                <div className=\"m-t-3\" />\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}

package/build/navigationOption/NavigationOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationOption.js","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n  ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n    if ('href' in rest && rest.href) {\n      component = 'a';\n    }\n\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        as={component}\n        className={clsx('np-navigation-option', className)}\n        button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n        disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      />\n    );\n  },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,gBAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,SAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,cAAA,CAACK,eAAO,EAAA;MAACC,WAAW,EAAEC,iBAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
+{"version":3,"file":"NavigationOption.js","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n  ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n    if ('href' in rest && rest.href) {\n      component = 'a';\n    }\n\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        as={component}\n        className={clsx('np-navigation-option', className)}\n        button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n        disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      />\n    );\n  },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,gBAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,SAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,cAAA,CAACK,eAAO,EAAA;MAACC,WAAW,EAAEC,iBAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}

package/build/navigationOption/NavigationOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n  ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n    if ('href' in rest && rest.href) {\n      component = 'a';\n    }\n\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        as={component}\n        className={clsx('np-navigation-option', className)}\n        button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n        disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      />\n    );\n  },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,UAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,IAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;MAACC,WAAW,EAAEC,QAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
+{"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n  ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n    if ('href' in rest && rest.href) {\n      component = 'a';\n    }\n\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        as={component}\n        className={clsx('np-navigation-option', className)}\n        button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n        disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      />\n    );\n  },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,UAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,IAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;MAACC,WAAW,EAAEC,QAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}

package/build/navigationOptionsList/NavigationOptionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n  children: React.ReactNode;\n}\n\n/**\n * @deprecated Please use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n  return (\n    <ul className=\"np-navigation-options-list\">\n      {Children.map(children, (child) => (\n        <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;;;;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,cAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,cAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
+{"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n  children: React.ReactNode;\n}\n\n/**\n * @deprecated Use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n  return (\n    <ul className=\"np-navigation-options-list\">\n      {Children.map(children, (child) => (\n        <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;;;;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,cAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,cAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}

package/build/navigationOptionsList/NavigationOptionsList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationOptionsList.mjs","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n  children: React.ReactNode;\n}\n\n/**\n * @deprecated Please use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n  return (\n    <ul className=\"np-navigation-options-list\">\n      {Children.map(children, (child) => (\n        <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,QAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,GAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
+{"version":3,"file":"NavigationOptionsList.mjs","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n  children: React.ReactNode;\n}\n\n/**\n * @deprecated Use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n  return (\n    <ul className=\"np-navigation-options-list\">\n      {Children.map(children, (child) => (\n        <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,QAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,GAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}

package/build/nudge/Nudge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n  /** @deprecated use `mediaName` property instead */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const intl = useIntl();\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
+{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const intl = useIntl();\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}