@transferwise/components 46.134.0 → 46.135.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/accordion/AccordionItem/AccordionItem.js +1 -0
- package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
- package/build/accordion/AccordionItem/AccordionItem.mjs +1 -0
- package/build/accordion/AccordionItem/AccordionItem.mjs.map +1 -1
- package/build/actionButton/ActionButton.js +1 -0
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionButton/ActionButton.mjs +1 -0
- package/build/actionButton/ActionButton.mjs.map +1 -1
- package/build/actionOption/ActionOption.js +1 -0
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs +1 -0
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/alert/Alert.js +1 -0
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +1 -0
- package/build/alert/Alert.mjs.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.js +1 -0
- package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.mjs +1 -0
- package/build/alert/inlineMarkdown/InlineMarkdown.mjs.map +1 -1
- package/build/avatar/Avatar.js +1 -0
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatar/Avatar.mjs +1 -0
- package/build/avatar/Avatar.mjs.map +1 -1
- package/build/avatarView/AvatarView.js +1 -0
- package/build/avatarView/AvatarView.js.map +1 -1
- package/build/avatarView/AvatarView.mjs +1 -0
- package/build/avatarView/AvatarView.mjs.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.js +1 -0
- package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.mjs +1 -0
- package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
- package/build/badge/Badge.js +1 -0
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs +1 -0
- package/build/badge/Badge.mjs.map +1 -1
- package/build/button/Button.js +1 -0
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +1 -0
- package/build/button/Button.mjs.map +1 -1
- package/build/button/LegacyButton.js +1 -0
- package/build/button/LegacyButton.js.map +1 -1
- package/build/button/LegacyButton.mjs +1 -0
- package/build/button/LegacyButton.mjs.map +1 -1
- package/build/button/classMap.js +1 -0
- package/build/button/classMap.js.map +1 -1
- package/build/button/classMap.mjs +1 -0
- package/build/button/classMap.mjs.map +1 -1
- package/build/button/legacyUtils/legacyUtils.js +1 -0
- package/build/button/legacyUtils/legacyUtils.js.map +1 -1
- package/build/button/legacyUtils/legacyUtils.mjs +1 -0
- package/build/button/legacyUtils/legacyUtils.mjs.map +1 -1
- package/build/card/Card.js +1 -0
- package/build/card/Card.js.map +1 -1
- package/build/card/Card.mjs +1 -0
- package/build/card/Card.mjs.map +1 -1
- package/build/checkbox/Checkbox.js +1 -0
- package/build/checkbox/Checkbox.js.map +1 -1
- package/build/checkbox/Checkbox.mjs +1 -0
- package/build/checkbox/Checkbox.mjs.map +1 -1
- package/build/chevron/Chevron.js +1 -0
- package/build/chevron/Chevron.js.map +1 -1
- package/build/chevron/Chevron.mjs +1 -0
- package/build/chevron/Chevron.mjs.map +1 -1
- package/build/chips/Chip.js +1 -0
- package/build/chips/Chip.js.map +1 -1
- package/build/chips/Chip.mjs +1 -0
- package/build/chips/Chip.mjs.map +1 -1
- package/build/circularButton/CircularButton.js +1 -0
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/circularButton/CircularButton.mjs +1 -0
- package/build/circularButton/CircularButton.mjs.map +1 -1
- package/build/common/locale/index.js +9 -4
- package/build/common/locale/index.js.map +1 -1
- package/build/common/locale/index.mjs +9 -4
- package/build/common/locale/index.mjs.map +1 -1
- package/build/common/panel/Panel.js +1 -0
- package/build/common/panel/Panel.js.map +1 -1
- package/build/common/panel/Panel.mjs +1 -0
- package/build/common/panel/Panel.mjs.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.js +1 -0
- package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.mjs +1 -0
- package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +1 -0
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +1 -0
- package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
- package/build/dateInput/DateInput.js +1 -1
- package/build/dateInput/DateInput.mjs +1 -1
- package/build/dateLookup/DateLookup.js +1 -1
- package/build/dateLookup/DateLookup.mjs +1 -1
- package/build/dateLookup/dateHeader/DateHeader.js +1 -0
- package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.mjs +1 -0
- package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
- package/build/decision/Decision.js +1 -0
- package/build/decision/Decision.js.map +1 -1
- package/build/decision/Decision.mjs +1 -0
- package/build/decision/Decision.mjs.map +1 -1
- package/build/definitionList/DefinitionList.js +1 -0
- package/build/definitionList/DefinitionList.js.map +1 -1
- package/build/definitionList/DefinitionList.mjs +1 -0
- package/build/definitionList/DefinitionList.mjs.map +1 -1
- package/build/dimmer/Dimmer.js +1 -0
- package/build/dimmer/Dimmer.js.map +1 -1
- package/build/dimmer/Dimmer.mjs +1 -0
- package/build/dimmer/Dimmer.mjs.map +1 -1
- package/build/display/Display.js +1 -0
- package/build/display/Display.js.map +1 -1
- package/build/display/Display.mjs +1 -0
- package/build/display/Display.mjs.map +1 -1
- package/build/drawer/Drawer.js +1 -0
- package/build/drawer/Drawer.js.map +1 -1
- package/build/drawer/Drawer.mjs +1 -0
- package/build/drawer/Drawer.mjs.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +4 -3
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +4 -3
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
- package/build/field/Field.js +1 -0
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +1 -0
- package/build/field/Field.mjs.map +1 -1
- package/build/flowNavigation/FlowNavigation.js +1 -0
- package/build/flowNavigation/FlowNavigation.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.mjs +1 -0
- package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/header/Header.js +1 -0
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +1 -0
- package/build/header/Header.mjs.map +1 -1
- package/build/info/Info.js +1 -0
- package/build/info/Info.js.map +1 -1
- package/build/info/Info.mjs +1 -0
- package/build/info/Info.mjs.map +1 -1
- package/build/inlineAlert/InlineAlert.js +1 -0
- package/build/inlineAlert/InlineAlert.js.map +1 -1
- package/build/inlineAlert/InlineAlert.mjs +1 -0
- package/build/inlineAlert/InlineAlert.mjs.map +1 -1
- package/build/inputs/SearchInput.js +1 -0
- package/build/inputs/SearchInput.js.map +1 -1
- package/build/inputs/SearchInput.mjs +1 -0
- package/build/inputs/SearchInput.mjs.map +1 -1
- package/build/instructionsList/InstructionsList.js +1 -0
- package/build/instructionsList/InstructionsList.js.map +1 -1
- package/build/instructionsList/InstructionsList.mjs +1 -0
- package/build/instructionsList/InstructionsList.mjs.map +1 -1
- package/build/link/Link.js +1 -0
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +1 -0
- package/build/link/Link.mjs.map +1 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +1 -0
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js.map +1 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +1 -0
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs.map +1 -1
- package/build/listItem/ListItem.js +1 -0
- package/build/listItem/ListItem.js.map +1 -1
- package/build/listItem/ListItem.mjs +1 -0
- package/build/listItem/ListItem.mjs.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.js +1 -0
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +1 -0
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
- package/build/loader/Loader.js +1 -0
- package/build/loader/Loader.js.map +1 -1
- package/build/loader/Loader.mjs +1 -0
- package/build/loader/Loader.mjs.map +1 -1
- package/build/main.css +22 -22
- package/build/markdown/Markdown.js +1 -0
- package/build/markdown/Markdown.js.map +1 -1
- package/build/markdown/Markdown.mjs +1 -0
- package/build/markdown/Markdown.mjs.map +1 -1
- package/build/modal/Modal.js +1 -0
- package/build/modal/Modal.js.map +1 -1
- package/build/modal/Modal.mjs +1 -0
- package/build/modal/Modal.mjs.map +1 -1
- package/build/navigationOption/NavigationOption.js +1 -0
- package/build/navigationOption/NavigationOption.js.map +1 -1
- package/build/navigationOption/NavigationOption.mjs +1 -0
- package/build/navigationOption/NavigationOption.mjs.map +1 -1
- package/build/nudge/Nudge.js +1 -0
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs +1 -0
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/overlayHeader/OverlayHeader.js +1 -0
- package/build/overlayHeader/OverlayHeader.js.map +1 -1
- package/build/overlayHeader/OverlayHeader.mjs +1 -0
- package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +1 -0
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs +1 -0
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/popover/Popover.js +1 -0
- package/build/popover/Popover.js.map +1 -1
- package/build/popover/Popover.mjs +1 -0
- package/build/popover/Popover.mjs.map +1 -1
- package/build/processIndicator/ProcessIndicator.js +1 -0
- package/build/processIndicator/ProcessIndicator.js.map +1 -1
- package/build/processIndicator/ProcessIndicator.mjs +1 -0
- package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
- package/build/progressBar/ProgressBar.js +1 -0
- package/build/progressBar/ProgressBar.js.map +1 -1
- package/build/progressBar/ProgressBar.mjs +1 -0
- package/build/progressBar/ProgressBar.mjs.map +1 -1
- package/build/promoCard/PromoCard.js +1 -0
- package/build/promoCard/PromoCard.js.map +1 -1
- package/build/promoCard/PromoCard.mjs +1 -0
- package/build/promoCard/PromoCard.mjs.map +1 -1
- package/build/promoCard/PromoCardIndicator.js +1 -0
- package/build/promoCard/PromoCardIndicator.js.map +1 -1
- package/build/promoCard/PromoCardIndicator.mjs +1 -0
- package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.js +1 -0
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +1 -0
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/prompt/InfoPrompt/InfoPrompt.js +1 -0
- package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
- package/build/prompt/InfoPrompt/InfoPrompt.mjs +1 -0
- package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js +1 -0
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs +1 -0
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
- package/build/radio/Radio.js +1 -0
- package/build/radio/Radio.js.map +1 -1
- package/build/radio/Radio.mjs +1 -0
- package/build/radio/Radio.mjs.map +1 -1
- package/build/segmentedControl/SegmentedControl.js +1 -0
- package/build/segmentedControl/SegmentedControl.js.map +1 -1
- package/build/segmentedControl/SegmentedControl.mjs +1 -0
- package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
- package/build/select/Select.js +1 -0
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +1 -0
- package/build/select/Select.mjs.map +1 -1
- package/build/select/option/Option.js +1 -0
- package/build/select/option/Option.js.map +1 -1
- package/build/select/option/Option.mjs +1 -0
- package/build/select/option/Option.mjs.map +1 -1
- package/build/statusIcon/StatusIcon.js +1 -0
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs +1 -0
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/stepper/Stepper.js +1 -0
- package/build/stepper/Stepper.js.map +1 -1
- package/build/stepper/Stepper.mjs +1 -0
- package/build/stepper/Stepper.mjs.map +1 -1
- package/build/sticky/Sticky.js +1 -0
- package/build/sticky/Sticky.js.map +1 -1
- package/build/sticky/Sticky.mjs +1 -0
- package/build/sticky/Sticky.mjs.map +1 -1
- package/build/styles/css/neptune.css +22 -22
- package/build/styles/less/neptune-tokens.less +4 -4
- package/build/styles/main.css +22 -22
- package/build/styles/props/neptune-tokens.css +2 -2
- package/build/styles/styles/less/neptune.css +22 -22
- package/build/summary/Summary.js +1 -0
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.mjs +1 -0
- package/build/summary/Summary.mjs.map +1 -1
- package/build/table/Table.js +1 -0
- package/build/table/Table.js.map +1 -1
- package/build/table/Table.mjs +1 -0
- package/build/table/Table.mjs.map +1 -1
- package/build/table/TableRow.js +1 -0
- package/build/table/TableRow.js.map +1 -1
- package/build/table/TableRow.mjs +1 -0
- package/build/table/TableRow.mjs.map +1 -1
- package/build/table/TableStatusText.js +1 -0
- package/build/table/TableStatusText.js.map +1 -1
- package/build/table/TableStatusText.mjs +1 -0
- package/build/table/TableStatusText.mjs.map +1 -1
- package/build/tabs/Tabs.js +1 -0
- package/build/tabs/Tabs.js.map +1 -1
- package/build/tabs/Tabs.mjs +1 -0
- package/build/tabs/Tabs.mjs.map +1 -1
- package/build/tile/Tile.js +1 -0
- package/build/tile/Tile.js.map +1 -1
- package/build/tile/Tile.mjs +1 -0
- package/build/tile/Tile.mjs.map +1 -1
- package/build/title/Title.js +1 -0
- package/build/title/Title.js.map +1 -1
- package/build/title/Title.mjs +1 -0
- package/build/title/Title.mjs.map +1 -1
- package/build/tooltip/Tooltip.js +1 -0
- package/build/tooltip/Tooltip.js.map +1 -1
- package/build/tooltip/Tooltip.mjs +1 -0
- package/build/tooltip/Tooltip.mjs.map +1 -1
- package/build/typeahead/Typeahead.js +1 -0
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs +1 -0
- package/build/typeahead/Typeahead.mjs.map +1 -1
- package/build/types/common/locale/index.d.ts +1 -1
- package/build/types/common/locale/index.d.ts.map +1 -1
- package/build/types/expressiveMoneyInput/currencySelector/CurrencySelector.d.ts.map +1 -1
- package/build/upload/Upload.js +1 -0
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.mjs +1 -0
- package/build/upload/Upload.mjs.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js +1 -0
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +1 -0
- package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
- package/build/upload/steps/processingStep/processingStep.js +1 -0
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/processingStep/processingStep.mjs +1 -0
- package/build/upload/steps/processingStep/processingStep.mjs.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +1 -0
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +1 -0
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
- package/build/uploadInput/UploadInput.js +1 -0
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +1 -0
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.js +1 -0
- package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.mjs +1 -0
- package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
- package/build/uploadInput/uploadButton/defaults.js +1 -0
- package/build/uploadInput/uploadButton/defaults.js.map +1 -1
- package/build/uploadInput/uploadButton/defaults.mjs +1 -0
- package/build/uploadInput/uploadButton/defaults.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +1 -0
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs +1 -0
- package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.js +1 -0
- package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.mjs +1 -0
- package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
- package/package.json +14 -14
- package/src/common/locale/index.test.ts +13 -4
- package/src/common/locale/index.ts +9 -3
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +18 -0
- package/src/expressiveMoneyInput/currencySelector/CurrencySelector.test.tsx +119 -1
- package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx +4 -3
- package/src/main.css +22 -22
- package/src/styles/less/neptune.css +22 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n profileType,\n profileName,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && {\n '--circle-border-color': 'var(--color-interactive-primary)',\n '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n }),\n ...style,\n }}\n >\n <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n {children}\n </AvatarViewContent>\n </Circle>\n </Badges>\n </Circle>\n );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n 16: 16,\n 24: 16,\n 32: 16,\n 40: 16,\n 48: 16,\n 56: 24,\n 72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n 16: 1,\n 24: 1,\n 32: 1,\n 40: 2,\n 48: 2,\n 56: 2,\n 72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n 24: -6,\n 32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n PropsWithChildren<{\n avatar: Pick<Props, 'selected' | 'size'>;\n }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n children,\n avatar,\n 'aria-label': ariaLabel,\n asset: customBadge,\n ...badgeAssets\n}: BadgesProps) {\n const { size = 48, selected } = avatar;\n const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n if ((!anyBadge && !selected) || size <= 16) {\n return children;\n }\n\n if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n return (\n <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n {children}\n </Dot>\n );\n }\n\n const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n return (\n <Badge\n aria-label={ariaLabel}\n size={badgeSize}\n badge={\n customBadge ? (\n <Circle fixedSize size={badgeSize}>\n {customBadge}\n </Circle>\n ) : (\n <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n )\n }\n style={{\n // @ts-expect-error CSS custom props allowed\n '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n }}\n >\n {children}\n </Badge>\n );\n}\n\nfunction AvatarViewContent({\n children,\n imgSrc,\n profileName: name,\n profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n const [tryLoadImage, setTryLoadImage] = useState(true);\n if (children === undefined) {\n if (imgSrc && tryLoadImage) {\n return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n }\n if (type) {\n return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n }\n if (name) {\n return getInitials(name);\n }\n return <PersonalProfileIcon />;\n }\n return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n profileType,\n profileName,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && {\n '--circle-border-color': 'var(--color-interactive-primary)',\n '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n }),\n ...style,\n }}\n >\n <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n {children}\n </AvatarViewContent>\n </Circle>\n </Badges>\n </Circle>\n );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n 16: 16,\n 24: 16,\n 32: 16,\n 40: 16,\n 48: 16,\n 56: 24,\n 72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n 16: 1,\n 24: 1,\n 32: 1,\n 40: 2,\n 48: 2,\n 56: 2,\n 72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n 24: -6,\n 32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n PropsWithChildren<{\n avatar: Pick<Props, 'selected' | 'size'>;\n }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n children,\n avatar,\n 'aria-label': ariaLabel,\n asset: customBadge,\n ...badgeAssets\n}: BadgesProps) {\n const { size = 48, selected } = avatar;\n const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n if ((!anyBadge && !selected) || size <= 16) {\n return children;\n }\n\n if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n return (\n <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n {children}\n </Dot>\n );\n }\n\n const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n return (\n <Badge\n aria-label={ariaLabel}\n size={badgeSize}\n badge={\n customBadge ? (\n <Circle fixedSize size={badgeSize}>\n {customBadge}\n </Circle>\n ) : (\n <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n )\n }\n style={{\n // @ts-expect-error CSS custom props allowed\n '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n }}\n >\n {children}\n </Badge>\n );\n}\n\nfunction AvatarViewContent({\n children,\n imgSrc,\n profileName: name,\n profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n const [tryLoadImage, setTryLoadImage] = useState(true);\n if (children === undefined) {\n if (imgSrc && tryLoadImage) {\n return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n }\n if (type) {\n return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n }\n if (name) {\n return getInitials(name);\n }\n return <PersonalProfileIcon />;\n }\n return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
|
|
@@ -24,6 +24,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
24
24
|
import '../common/propsValues/scroll.mjs';
|
|
25
25
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
26
26
|
import '../common/fileType.mjs';
|
|
27
|
+
import '@transferwise/formatting';
|
|
27
28
|
import { getInitials } from '../common/initials.mjs';
|
|
28
29
|
import { Briefcase, Profile } from '@transferwise/icons';
|
|
29
30
|
import 'react-intl';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n profileType,\n profileName,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && {\n '--circle-border-color': 'var(--color-interactive-primary)',\n '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n }),\n ...style,\n }}\n >\n <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n {children}\n </AvatarViewContent>\n </Circle>\n </Badges>\n </Circle>\n );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n 16: 16,\n 24: 16,\n 32: 16,\n 40: 16,\n 48: 16,\n 56: 24,\n 72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n 16: 1,\n 24: 1,\n 32: 1,\n 40: 2,\n 48: 2,\n 56: 2,\n 72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n 24: -6,\n 32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n PropsWithChildren<{\n avatar: Pick<Props, 'selected' | 'size'>;\n }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n children,\n avatar,\n 'aria-label': ariaLabel,\n asset: customBadge,\n ...badgeAssets\n}: BadgesProps) {\n const { size = 48, selected } = avatar;\n const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n if ((!anyBadge && !selected) || size <= 16) {\n return children;\n }\n\n if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n return (\n <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n {children}\n </Dot>\n );\n }\n\n const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n return (\n <Badge\n aria-label={ariaLabel}\n size={badgeSize}\n badge={\n customBadge ? (\n <Circle fixedSize size={badgeSize}>\n {customBadge}\n </Circle>\n ) : (\n <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n )\n }\n style={{\n // @ts-expect-error CSS custom props allowed\n '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n }}\n >\n {children}\n </Badge>\n );\n}\n\nfunction AvatarViewContent({\n children,\n imgSrc,\n profileName: name,\n profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n const [tryLoadImage, setTryLoadImage] = useState(true);\n if (children === undefined) {\n if (imgSrc && tryLoadImage) {\n return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n }\n if (type) {\n return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n }\n if (name) {\n return getInitials(name);\n }\n return <PersonalProfileIcon />;\n }\n return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n profileType,\n profileName,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && {\n '--circle-border-color': 'var(--color-interactive-primary)',\n '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n }),\n ...style,\n }}\n >\n <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n {children}\n </AvatarViewContent>\n </Circle>\n </Badges>\n </Circle>\n );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n 16: 16,\n 24: 16,\n 32: 16,\n 40: 16,\n 48: 16,\n 56: 24,\n 72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n 16: 1,\n 24: 1,\n 32: 1,\n 40: 2,\n 48: 2,\n 56: 2,\n 72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n 24: -6,\n 32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n PropsWithChildren<{\n avatar: Pick<Props, 'selected' | 'size'>;\n }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n children,\n avatar,\n 'aria-label': ariaLabel,\n asset: customBadge,\n ...badgeAssets\n}: BadgesProps) {\n const { size = 48, selected } = avatar;\n const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n if ((!anyBadge && !selected) || size <= 16) {\n return children;\n }\n\n if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n return (\n <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n {children}\n </Dot>\n );\n }\n\n const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n return (\n <Badge\n aria-label={ariaLabel}\n size={badgeSize}\n badge={\n customBadge ? (\n <Circle fixedSize size={badgeSize}>\n {customBadge}\n </Circle>\n ) : (\n <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n )\n }\n style={{\n // @ts-expect-error CSS custom props allowed\n '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n }}\n >\n {children}\n </Badge>\n );\n}\n\nfunction AvatarViewContent({\n children,\n imgSrc,\n profileName: name,\n profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n const [tryLoadImage, setTryLoadImage] = useState(true);\n if (children === undefined) {\n if (imgSrc && tryLoadImage) {\n return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n }\n if (type) {\n return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n }\n if (name) {\n return getInitials(name);\n }\n return <PersonalProfileIcon />;\n }\n return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
|
|
@@ -32,6 +32,7 @@ require('../common/propsValues/variant.js');
|
|
|
32
32
|
require('../common/propsValues/scroll.js');
|
|
33
33
|
require('../common/propsValues/markdownNodeType.js');
|
|
34
34
|
require('../common/fileType.js');
|
|
35
|
+
require('@transferwise/formatting');
|
|
35
36
|
var initials = require('../common/initials.js');
|
|
36
37
|
require('react-intl');
|
|
37
38
|
require('../common/closeButton/CloseButton.messages.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n | {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment | Status.PENDING;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [hasImageLoadError, setImageLoadError] = useState(false);\n const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n // Reset the errored state when url changes\n useEffect(() => setImageLoadError(false), [url]);\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <ProfileIcon size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n | {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment | Status.PENDING;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [hasImageLoadError, setImageLoadError] = useState(false);\n const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n // Reset the errored state when url changes\n useEffect(() => setImageLoadError(false), [url]);\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <ProfileIcon size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}
|
|
@@ -28,6 +28,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
28
28
|
import '../common/propsValues/scroll.mjs';
|
|
29
29
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
30
30
|
import '../common/fileType.mjs';
|
|
31
|
+
import '@transferwise/formatting';
|
|
31
32
|
import { getInitials } from '../common/initials.mjs';
|
|
32
33
|
import 'react-intl';
|
|
33
34
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarWrapper.mjs","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n | {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment | Status.PENDING;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [hasImageLoadError, setImageLoadError] = useState(false);\n const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n // Reset the errored state when url changes\n useEffect(() => setImageLoadError(false), [url]);\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <ProfileIcon size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarWrapper.mjs","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n | {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment | Status.PENDING;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [hasImageLoadError, setImageLoadError] = useState(false);\n const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n // Reset the errored state when url changes\n useEffect(() => setImageLoadError(false), [url]);\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <ProfileIcon size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}
|
package/build/badge/Badge.js
CHANGED
|
@@ -22,6 +22,7 @@ require('../common/propsValues/variant.js');
|
|
|
22
22
|
require('../common/propsValues/scroll.js');
|
|
23
23
|
require('../common/propsValues/markdownNodeType.js');
|
|
24
24
|
require('../common/fileType.js');
|
|
25
|
+
require('@transferwise/formatting');
|
|
25
26
|
require('@transferwise/icons');
|
|
26
27
|
require('react');
|
|
27
28
|
require('react-intl');
|
package/build/badge/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport type { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\n/**\n * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead\n */\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n * @default 'sm'\n */\n size?: DeprecatedSizes | BadgeAssetsProps['size'];\n /** @default 'light' */\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n 16: Size.SMALL,\n 24: Size.LARGE,\n // medium is no longer exists, so we map it to small\n [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n style,\n}: BadgeProps) => {\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes} style={style}>\n <div className=\"tw-badge__children\">{children}</div>\n <div className=\"tw-badge__content\">{badge}</div>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport type { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\n/**\n * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead\n */\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n * @default 'sm'\n */\n size?: DeprecatedSizes | BadgeAssetsProps['size'];\n /** @default 'light' */\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n 16: Size.SMALL,\n 24: Size.LARGE,\n // medium is no longer exists, so we map it to small\n [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n style,\n}: BadgeProps) => {\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes} style={style}>\n <div className=\"tw-badge__children\">{children}</div>\n <div className=\"tw-badge__content\">{badge}</div>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,aAAa,GAAG;EACpB,EAAE,EAAEC,SAAI,CAACC,KAAK;EACd,EAAE,EAAED,SAAI,CAACE,KAAK;AACd;EACA,CAACC,MAAM,CAACH,SAAI,CAACI,MAAM,CAAC,GAAGJ,SAAI,CAACC;CAC7B;AAED;AACA;AACA;;AAEG;AACH,MAAMI,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGV,SAAI,CAACC,KAAK;EAC3BU,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA;AAAK,CACM,KAAI;AACf,EAAA,MAAMP,IAAI,GAAGV,aAAa,CAACW,QAAQ,CAAC,IAAIA,QAAQ;AAChD,EAAA,MAAMO,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAA,gBAAA,EAAmBP,MAAM,CAAA,CAAE,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA;GACvB,EACDF,SAAS,CACV;AAED,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA;KAAc,CACnD,eAAAK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAAET;AAAK,KAAM,CACjD;AAAA,GAAK,CAAC;AAEV;;;;"}
|
package/build/badge/Badge.mjs
CHANGED
|
@@ -18,6 +18,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
18
18
|
import '../common/propsValues/scroll.mjs';
|
|
19
19
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
20
20
|
import '../common/fileType.mjs';
|
|
21
|
+
import '@transferwise/formatting';
|
|
21
22
|
import '@transferwise/icons';
|
|
22
23
|
import 'react';
|
|
23
24
|
import 'react-intl';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport type { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\n/**\n * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead\n */\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n * @default 'sm'\n */\n size?: DeprecatedSizes | BadgeAssetsProps['size'];\n /** @default 'light' */\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n 16: Size.SMALL,\n 24: Size.LARGE,\n // medium is no longer exists, so we map it to small\n [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n style,\n}: BadgeProps) => {\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes} style={style}>\n <div className=\"tw-badge__children\">{children}</div>\n <div className=\"tw-badge__content\">{badge}</div>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport type { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\n/**\n * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead\n */\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n * @default 'sm'\n */\n size?: DeprecatedSizes | BadgeAssetsProps['size'];\n /** @default 'light' */\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n 16: Size.SMALL,\n 24: Size.LARGE,\n // medium is no longer exists, so we map it to small\n [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n style,\n}: BadgeProps) => {\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes} style={style}>\n <div className=\"tw-badge__children\">{children}</div>\n <div className=\"tw-badge__content\">{badge}</div>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,aAAa,GAAG;EACpB,EAAE,EAAEC,IAAI,CAACC,KAAK;EACd,EAAE,EAAED,IAAI,CAACE,KAAK;AACd;EACA,CAACC,MAAM,CAACH,IAAI,CAACI,MAAM,CAAC,GAAGJ,IAAI,CAACC;CAC7B;AAED;AACA;AACA;;AAEG;AACH,MAAMI,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGV,IAAI,CAACC,KAAK;EAC3BU,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA;AAAK,CACM,KAAI;AACf,EAAA,MAAMP,IAAI,GAAGV,aAAa,CAACW,QAAQ,CAAC,IAAIA,QAAQ;AAChD,EAAA,MAAMO,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAA,gBAAA,EAAmBP,MAAM,CAAA,CAAE,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA;GACvB,EACDF,SAAS,CACV;AAED,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA;KAAc,CACnD,eAAAK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAAET;AAAK,KAAM,CACjD;AAAA,GAAK,CAAC;AAEV;;;;"}
|
package/build/button/Button.js
CHANGED
|
@@ -27,6 +27,7 @@ require('../common/propsValues/variant.js');
|
|
|
27
27
|
require('../common/propsValues/scroll.js');
|
|
28
28
|
require('../common/propsValues/markdownNodeType.js');
|
|
29
29
|
require('../common/fileType.js');
|
|
30
|
+
require('@transferwise/formatting');
|
|
30
31
|
require('@transferwise/icons');
|
|
31
32
|
require('react-intl');
|
|
32
33
|
require('../common/closeButton/CloseButton.messages.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport type { CommonProps, LegacyButtonProps, ButtonProps } from './LegacyButton';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as,\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n addonStart,\n addonEnd,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n v2,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span\n className=\"wds-Button-label\"\n id={props.id ? `${props.id}_content` : undefined}\n aria-hidden={loading}\n >\n {size === 'lg' ? (\n <span className=\"wds-Button-labelText\">{children}</span>\n ) : (\n <>\n {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={addonStart?.value} size={24} />\n </span>\n )}\n\n {addonStart?.type === 'icon' && addonStart.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>\n {addonStart.value}\n </span>\n )}\n\n <span className=\"wds-Button-labelText\">{children}</span>\n\n {addonEnd?.type === 'icon' && addonEnd?.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>\n {addonEnd.value}\n </span>\n )}\n </>\n )}\n </span>\n </Body>\n );\n\n if ((href && as !== 'button') || as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n type={undefined}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n href={undefined}\n target={undefined}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n\n// re-export APIs for backwards compatibility with legacy Button interface\n// delete this when migration to new Button is done (or aleast no more deep imports, use following query)\n// https://github.com/search?q=org%3Atransferwise+%2Fbuild%5C%2Ftypes%5C%2Fbutton%2F+-is%3Aarchived&type=code\nexport { CommonProps, LegacyButtonProps as Props, ButtonProps };\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","addonStart","addonEnd","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","id","undefined","_Fragment","value","AvatarLayout","orientation","avatars","PrimitiveAnchor","PrimitiveButton","target"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport type { CommonProps, LegacyButtonProps, ButtonProps } from './LegacyButton';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as,\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n addonStart,\n addonEnd,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n v2,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span\n className=\"wds-Button-label\"\n id={props.id ? `${props.id}_content` : undefined}\n aria-hidden={loading}\n >\n {size === 'lg' ? (\n <span className=\"wds-Button-labelText\">{children}</span>\n ) : (\n <>\n {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={addonStart?.value} size={24} />\n </span>\n )}\n\n {addonStart?.type === 'icon' && addonStart.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>\n {addonStart.value}\n </span>\n )}\n\n <span className=\"wds-Button-labelText\">{children}</span>\n\n {addonEnd?.type === 'icon' && addonEnd?.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>\n {addonEnd.value}\n </span>\n )}\n </>\n )}\n </span>\n </Body>\n );\n\n if ((href && as !== 'button') || as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n type={undefined}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n href={undefined}\n target={undefined}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n\n// re-export APIs for backwards compatibility with legacy Button interface\n// delete this when migration to new Button is done (or aleast no more deep imports, use following query)\n// https://github.com/search?q=org%3Atransferwise+%2Fbuild%5C%2Ftypes%5C%2Fbutton%2F+-is%3Aarchived&type=code\nexport { CommonProps, LegacyButtonProps as Props, ButtonProps };\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","addonStart","addonEnd","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","id","undefined","_Fragment","value","AvatarLayout","orientation","avatars","PrimitiveAnchor","PrimitiveButton","target"],"mappings":"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"}
|
package/build/button/Button.mjs
CHANGED
|
@@ -23,6 +23,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
23
23
|
import '../common/propsValues/scroll.mjs';
|
|
24
24
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
25
25
|
import '../common/fileType.mjs';
|
|
26
|
+
import '@transferwise/formatting';
|
|
26
27
|
import '@transferwise/icons';
|
|
27
28
|
import 'react-intl';
|
|
28
29
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport type { CommonProps, LegacyButtonProps, ButtonProps } from './LegacyButton';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as,\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n addonStart,\n addonEnd,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n v2,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span\n className=\"wds-Button-label\"\n id={props.id ? `${props.id}_content` : undefined}\n aria-hidden={loading}\n >\n {size === 'lg' ? (\n <span className=\"wds-Button-labelText\">{children}</span>\n ) : (\n <>\n {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={addonStart?.value} size={24} />\n </span>\n )}\n\n {addonStart?.type === 'icon' && addonStart.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>\n {addonStart.value}\n </span>\n )}\n\n <span className=\"wds-Button-labelText\">{children}</span>\n\n {addonEnd?.type === 'icon' && addonEnd?.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>\n {addonEnd.value}\n </span>\n )}\n </>\n )}\n </span>\n </Body>\n );\n\n if ((href && as !== 'button') || as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n type={undefined}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n href={undefined}\n target={undefined}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n\n// re-export APIs for backwards compatibility with legacy Button interface\n// delete this when migration to new Button is done (or aleast no more deep imports, use following query)\n// https://github.com/search?q=org%3Atransferwise+%2Fbuild%5C%2Ftypes%5C%2Fbutton%2F+-is%3Aarchived&type=code\nexport { CommonProps, LegacyButtonProps as Props, ButtonProps };\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","addonStart","addonEnd","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","id","undefined","_Fragment","value","AvatarLayout","orientation","avatars","PrimitiveAnchor","PrimitiveButton","target"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport type { CommonProps, LegacyButtonProps, ButtonProps } from './LegacyButton';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as,\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n addonStart,\n addonEnd,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n v2,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span\n className=\"wds-Button-label\"\n id={props.id ? `${props.id}_content` : undefined}\n aria-hidden={loading}\n >\n {size === 'lg' ? (\n <span className=\"wds-Button-labelText\">{children}</span>\n ) : (\n <>\n {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={addonStart?.value} size={24} />\n </span>\n )}\n\n {addonStart?.type === 'icon' && addonStart.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>\n {addonStart.value}\n </span>\n )}\n\n <span className=\"wds-Button-labelText\">{children}</span>\n\n {addonEnd?.type === 'icon' && addonEnd?.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>\n {addonEnd.value}\n </span>\n )}\n </>\n )}\n </span>\n </Body>\n );\n\n if ((href && as !== 'button') || as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n type={undefined}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n href={undefined}\n target={undefined}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n\n// re-export APIs for backwards compatibility with legacy Button interface\n// delete this when migration to new Button is done (or aleast no more deep imports, use following query)\n// https://github.com/search?q=org%3Atransferwise+%2Fbuild%5C%2Ftypes%5C%2Fbutton%2F+-is%3Aarchived&type=code\nexport { CommonProps, LegacyButtonProps as Props, ButtonProps };\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","addonStart","addonEnd","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","id","undefined","_Fragment","value","AvatarLayout","orientation","avatars","PrimitiveAnchor","PrimitiveButton","target"],"mappings":"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"}
|
|
@@ -24,6 +24,7 @@ require('../common/propsValues/variant.js');
|
|
|
24
24
|
require('../common/propsValues/scroll.js');
|
|
25
25
|
require('../common/propsValues/markdownNodeType.js');
|
|
26
26
|
require('../common/fileType.js');
|
|
27
|
+
require('@transferwise/formatting');
|
|
27
28
|
require('@transferwise/icons');
|
|
28
29
|
require('../common/closeButton/CloseButton.messages.js');
|
|
29
30
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyButton.js","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\n/**\n * @deprecated Use new button instead of these APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type CommonProps = {\n v2?: false;\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\n/**\n * @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\n/**\n * @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated Use new Button component via `<Button v2 .. />` and new props.\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LegacyButton.js","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\n/**\n * @deprecated Use new button instead of these APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type CommonProps = {\n v2?: false;\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\n/**\n * @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\n/**\n * @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated Use new Button component via `<Button v2 .. />` and new props.\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
|
|
@@ -20,6 +20,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
20
20
|
import '../common/propsValues/scroll.mjs';
|
|
21
21
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
22
22
|
import '../common/fileType.mjs';
|
|
23
|
+
import '@transferwise/formatting';
|
|
23
24
|
import '@transferwise/icons';
|
|
24
25
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
25
26
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyButton.mjs","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\n/**\n * @deprecated Use new button instead of these APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type CommonProps = {\n v2?: false;\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\n/**\n * @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\n/**\n * @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated Use new Button component via `<Button v2 .. />` and new props.\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LegacyButton.mjs","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\n/**\n * @deprecated Use new button instead of these APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type CommonProps = {\n v2?: false;\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\n/**\n * @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\n/**\n * @deprecated Use new button instead of APIs.\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated Use new Button component via `<Button v2 .. />` and new props.\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
|
package/build/button/classMap.js
CHANGED
|
@@ -19,6 +19,7 @@ require('../common/propsValues/variant.js');
|
|
|
19
19
|
require('../common/propsValues/scroll.js');
|
|
20
20
|
require('../common/propsValues/markdownNodeType.js');
|
|
21
21
|
require('../common/fileType.js');
|
|
22
|
+
require('@transferwise/formatting');
|
|
22
23
|
require('@transferwise/icons');
|
|
23
24
|
require('clsx');
|
|
24
25
|
require('react');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"classMap.js","sources":["../../src/button/classMap.ts"],"sourcesContent":["import { ControlType, Priority } from '../common';\n\nexport const typeClassMap = {\n [ControlType.ACCENT]: 'btn-accent',\n [ControlType.POSITIVE]: 'btn-positive',\n [ControlType.NEGATIVE]: 'btn-negative',\n};\n\nexport const priorityClassMap = {\n [Priority.PRIMARY]: 'btn-priority-1',\n [Priority.SECONDARY]: 'btn-priority-2',\n [Priority.TERTIARY]: 'btn-priority-3',\n};\n"],"names":["typeClassMap","ControlType","ACCENT","POSITIVE","NEGATIVE","priorityClassMap","Priority","PRIMARY","SECONDARY","TERTIARY"],"mappings":"
|
|
1
|
+
{"version":3,"file":"classMap.js","sources":["../../src/button/classMap.ts"],"sourcesContent":["import { ControlType, Priority } from '../common';\n\nexport const typeClassMap = {\n [ControlType.ACCENT]: 'btn-accent',\n [ControlType.POSITIVE]: 'btn-positive',\n [ControlType.NEGATIVE]: 'btn-negative',\n};\n\nexport const priorityClassMap = {\n [Priority.PRIMARY]: 'btn-priority-1',\n [Priority.SECONDARY]: 'btn-priority-2',\n [Priority.TERTIARY]: 'btn-priority-3',\n};\n"],"names":["typeClassMap","ControlType","ACCENT","POSITIVE","NEGATIVE","priorityClassMap","Priority","PRIMARY","SECONDARY","TERTIARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,MAAMA,YAAY,GAAG;AAC1B,EAAA,CAACC,mBAAW,CAACC,MAAM,GAAG,YAAY;AAClC,EAAA,CAACD,mBAAW,CAACE,QAAQ,GAAG,cAAc;EACtC,CAACF,mBAAW,CAACG,QAAQ,GAAG;;AAGnB,MAAMC,gBAAgB,GAAG;AAC9B,EAAA,CAACC,gBAAQ,CAACC,OAAO,GAAG,gBAAgB;AACpC,EAAA,CAACD,gBAAQ,CAACE,SAAS,GAAG,gBAAgB;EACtC,CAACF,gBAAQ,CAACG,QAAQ,GAAG;;;;;;"}
|
|
@@ -17,6 +17,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
17
17
|
import '../common/propsValues/scroll.mjs';
|
|
18
18
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
19
19
|
import '../common/fileType.mjs';
|
|
20
|
+
import '@transferwise/formatting';
|
|
20
21
|
import '@transferwise/icons';
|
|
21
22
|
import 'clsx';
|
|
22
23
|
import 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"classMap.mjs","sources":["../../src/button/classMap.ts"],"sourcesContent":["import { ControlType, Priority } from '../common';\n\nexport const typeClassMap = {\n [ControlType.ACCENT]: 'btn-accent',\n [ControlType.POSITIVE]: 'btn-positive',\n [ControlType.NEGATIVE]: 'btn-negative',\n};\n\nexport const priorityClassMap = {\n [Priority.PRIMARY]: 'btn-priority-1',\n [Priority.SECONDARY]: 'btn-priority-2',\n [Priority.TERTIARY]: 'btn-priority-3',\n};\n"],"names":["typeClassMap","ControlType","ACCENT","POSITIVE","NEGATIVE","priorityClassMap","Priority","PRIMARY","SECONDARY","TERTIARY"],"mappings":"
|
|
1
|
+
{"version":3,"file":"classMap.mjs","sources":["../../src/button/classMap.ts"],"sourcesContent":["import { ControlType, Priority } from '../common';\n\nexport const typeClassMap = {\n [ControlType.ACCENT]: 'btn-accent',\n [ControlType.POSITIVE]: 'btn-positive',\n [ControlType.NEGATIVE]: 'btn-negative',\n};\n\nexport const priorityClassMap = {\n [Priority.PRIMARY]: 'btn-priority-1',\n [Priority.SECONDARY]: 'btn-priority-2',\n [Priority.TERTIARY]: 'btn-priority-3',\n};\n"],"names":["typeClassMap","ControlType","ACCENT","POSITIVE","NEGATIVE","priorityClassMap","Priority","PRIMARY","SECONDARY","TERTIARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,MAAMA,YAAY,GAAG;AAC1B,EAAA,CAACC,WAAW,CAACC,MAAM,GAAG,YAAY;AAClC,EAAA,CAACD,WAAW,CAACE,QAAQ,GAAG,cAAc;EACtC,CAACF,WAAW,CAACG,QAAQ,GAAG;;AAGnB,MAAMC,gBAAgB,GAAG;AAC9B,EAAA,CAACC,QAAQ,CAACC,OAAO,GAAG,gBAAgB;AACpC,EAAA,CAACD,QAAQ,CAACE,SAAS,GAAG,gBAAgB;EACtC,CAACF,QAAQ,CAACG,QAAQ,GAAG;;;;;"}
|
|
@@ -19,6 +19,7 @@ require('../../common/propsValues/variant.js');
|
|
|
19
19
|
require('../../common/propsValues/scroll.js');
|
|
20
20
|
require('../../common/propsValues/markdownNodeType.js');
|
|
21
21
|
require('../../common/fileType.js');
|
|
22
|
+
require('@transferwise/formatting');
|
|
22
23
|
require('@transferwise/icons');
|
|
23
24
|
require('clsx');
|
|
24
25
|
require('react');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"legacyUtils.js","sources":["../../../src/button/legacyUtils/legacyUtils.ts"],"sourcesContent":["import { ControlType, Priority, Size, Type } from '../../common';\nimport { logActionRequired, logActionRequiredIf } from '../../utilities';\n\nconst deprecatedTypeMap: Record<Type, ControlType> = {\n [Type.PRIMARY]: ControlType.ACCENT,\n [Type.SECONDARY]: ControlType.ACCENT,\n [Type.LINK]: ControlType.ACCENT,\n [Type.PAY]: ControlType.POSITIVE,\n [Type.DANGER]: ControlType.NEGATIVE,\n};\n\ntype OldTypeKeys = Type.DANGER | Type.LINK | Type.SECONDARY;\nconst oldTypePriorityMap: Record<OldTypeKeys, Priority> = {\n [Type.DANGER]: Priority.SECONDARY,\n [Type.LINK]: Priority.TERTIARY,\n [Type.SECONDARY]: Priority.SECONDARY,\n};\n\nconst deprecatedTypeMapMessage = {\n [Type.DANGER]: 'Type.NEGATIVE',\n [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',\n [Type.PAY]: 'ControlType.POSITIVE',\n [Type.PRIMARY]: 'ControlType.ACCENT',\n [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',\n};\n\nconst deprecatedTypes = Object.keys(deprecatedTypeMap);\n\ntype EstablishNewTypeType = (\n originalType: Type | (string & Record<never, never>) | null,\n) => `${ControlType}` | string | null;\n\nexport const establishNewType: EstablishNewTypeType = (originalType) =>\n originalType && originalType in deprecatedTypeMap\n ? deprecatedTypeMap[originalType as Type]\n : originalType;\n\ntype EstablishNewPriorityType = (\n originalPriority?: Priority | (string & Record<never, never>) | null,\n originalType?: OldTypeKeys | (string & Record<never, never>) | null,\n) => `${ControlType}` | string | null | undefined;\n\nexport const establishNewPriority: EstablishNewPriorityType = (originalPriority, originalType) => {\n const type = originalType ? establishNewType(originalType) : '';\n\n // The old SECONDARY and LINK types now map to priorities. If they're still using one of\n // these old types, ignore whatever priority they've passed and use this instead.\n if (originalType && originalType in oldTypePriorityMap) {\n return oldTypePriorityMap[originalType as OldTypeKeys];\n }\n // Only ControlType.ACCENT supports tertiary styles\n if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {\n return Priority.SECONDARY;\n }\n return originalPriority;\n};\n\ntype DeprecatedTypeMapMessageType = keyof typeof deprecatedTypeMapMessage;\ntype LogDeprecationNoticesType = (params: {\n size?: `${Size}`;\n type?: DeprecatedTypeMapMessageType | (string & Record<never, never>) | null;\n}) => void;\nexport const logDeprecationNotices: LogDeprecationNoticesType = ({ size, type }) => {\n logActionRequiredIf(\n 'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',\n size === Size.EXTRA_SMALL,\n );\n\n if (type && deprecatedTypes.includes(type) && type in deprecatedTypeMapMessage) {\n logActionRequired(\n `Button has deprecated the ${type} value for the \\`type\\` prop. Please update to ${deprecatedTypeMapMessage[type as DeprecatedTypeMapMessageType]}.`,\n );\n }\n};\n"],"names":["deprecatedTypeMap","Type","PRIMARY","ControlType","ACCENT","SECONDARY","LINK","PAY","POSITIVE","DANGER","NEGATIVE","oldTypePriorityMap","Priority","TERTIARY","deprecatedTypeMapMessage","deprecatedTypes","Object","keys","establishNewType","originalType","establishNewPriority","originalPriority","type","logDeprecationNotices","size","logActionRequiredIf","Size","EXTRA_SMALL","includes","logActionRequired"],"mappings":"
|
|
1
|
+
{"version":3,"file":"legacyUtils.js","sources":["../../../src/button/legacyUtils/legacyUtils.ts"],"sourcesContent":["import { ControlType, Priority, Size, Type } from '../../common';\nimport { logActionRequired, logActionRequiredIf } from '../../utilities';\n\nconst deprecatedTypeMap: Record<Type, ControlType> = {\n [Type.PRIMARY]: ControlType.ACCENT,\n [Type.SECONDARY]: ControlType.ACCENT,\n [Type.LINK]: ControlType.ACCENT,\n [Type.PAY]: ControlType.POSITIVE,\n [Type.DANGER]: ControlType.NEGATIVE,\n};\n\ntype OldTypeKeys = Type.DANGER | Type.LINK | Type.SECONDARY;\nconst oldTypePriorityMap: Record<OldTypeKeys, Priority> = {\n [Type.DANGER]: Priority.SECONDARY,\n [Type.LINK]: Priority.TERTIARY,\n [Type.SECONDARY]: Priority.SECONDARY,\n};\n\nconst deprecatedTypeMapMessage = {\n [Type.DANGER]: 'Type.NEGATIVE',\n [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',\n [Type.PAY]: 'ControlType.POSITIVE',\n [Type.PRIMARY]: 'ControlType.ACCENT',\n [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',\n};\n\nconst deprecatedTypes = Object.keys(deprecatedTypeMap);\n\ntype EstablishNewTypeType = (\n originalType: Type | (string & Record<never, never>) | null,\n) => `${ControlType}` | string | null;\n\nexport const establishNewType: EstablishNewTypeType = (originalType) =>\n originalType && originalType in deprecatedTypeMap\n ? deprecatedTypeMap[originalType as Type]\n : originalType;\n\ntype EstablishNewPriorityType = (\n originalPriority?: Priority | (string & Record<never, never>) | null,\n originalType?: OldTypeKeys | (string & Record<never, never>) | null,\n) => `${ControlType}` | string | null | undefined;\n\nexport const establishNewPriority: EstablishNewPriorityType = (originalPriority, originalType) => {\n const type = originalType ? establishNewType(originalType) : '';\n\n // The old SECONDARY and LINK types now map to priorities. If they're still using one of\n // these old types, ignore whatever priority they've passed and use this instead.\n if (originalType && originalType in oldTypePriorityMap) {\n return oldTypePriorityMap[originalType as OldTypeKeys];\n }\n // Only ControlType.ACCENT supports tertiary styles\n if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {\n return Priority.SECONDARY;\n }\n return originalPriority;\n};\n\ntype DeprecatedTypeMapMessageType = keyof typeof deprecatedTypeMapMessage;\ntype LogDeprecationNoticesType = (params: {\n size?: `${Size}`;\n type?: DeprecatedTypeMapMessageType | (string & Record<never, never>) | null;\n}) => void;\nexport const logDeprecationNotices: LogDeprecationNoticesType = ({ size, type }) => {\n logActionRequiredIf(\n 'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',\n size === Size.EXTRA_SMALL,\n );\n\n if (type && deprecatedTypes.includes(type) && type in deprecatedTypeMapMessage) {\n logActionRequired(\n `Button has deprecated the ${type} value for the \\`type\\` prop. Please update to ${deprecatedTypeMapMessage[type as DeprecatedTypeMapMessageType]}.`,\n );\n }\n};\n"],"names":["deprecatedTypeMap","Type","PRIMARY","ControlType","ACCENT","SECONDARY","LINK","PAY","POSITIVE","DANGER","NEGATIVE","oldTypePriorityMap","Priority","TERTIARY","deprecatedTypeMapMessage","deprecatedTypes","Object","keys","establishNewType","originalType","establishNewPriority","originalPriority","type","logDeprecationNotices","size","logActionRequiredIf","Size","EXTRA_SMALL","includes","logActionRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,iBAAiB,GAA8B;AACnD,EAAA,CAACC,SAAI,CAACC,OAAO,GAAGC,mBAAW,CAACC,MAAM;AAClC,EAAA,CAACH,SAAI,CAACI,SAAS,GAAGF,mBAAW,CAACC,MAAM;AACpC,EAAA,CAACH,SAAI,CAACK,IAAI,GAAGH,mBAAW,CAACC,MAAM;AAC/B,EAAA,CAACH,SAAI,CAACM,GAAG,GAAGJ,mBAAW,CAACK,QAAQ;AAChC,EAAA,CAACP,SAAI,CAACQ,MAAM,GAAGN,mBAAW,CAACO;CAC5B;AAGD,MAAMC,kBAAkB,GAAkC;AACxD,EAAA,CAACV,SAAI,CAACQ,MAAM,GAAGG,gBAAQ,CAACP,SAAS;AACjC,EAAA,CAACJ,SAAI,CAACK,IAAI,GAAGM,gBAAQ,CAACC,QAAQ;AAC9B,EAAA,CAACZ,SAAI,CAACI,SAAS,GAAGO,gBAAQ,CAACP;CAC5B;AAED,MAAMS,wBAAwB,GAAG;AAC/B,EAAA,CAACb,SAAI,CAACQ,MAAM,GAAG,eAAe;AAC9B,EAAA,CAACR,SAAI,CAACK,IAAI,GAAG,oDAAoD;AACjE,EAAA,CAACL,SAAI,CAACM,GAAG,GAAG,sBAAsB;AAClC,EAAA,CAACN,SAAI,CAACC,OAAO,GAAG,oBAAoB;EACpC,CAACD,SAAI,CAACI,SAAS,GAAG;CACnB;AAED,MAAMU,eAAe,GAAGC,MAAM,CAACC,IAAI,CAACjB,iBAAiB,CAAC;MAMzCkB,gBAAgB,GAA0BC,YAAY,IACjEA,YAAY,IAAIA,YAAY,IAAInB,iBAAiB,GAC7CA,iBAAiB,CAACmB,YAAoB,CAAC,GACvCA;MAOOC,oBAAoB,GAA6BA,CAACC,gBAAgB,EAAEF,YAAY,KAAI;EAC/F,MAAMG,IAAI,GAAGH,YAAY,GAAGD,gBAAgB,CAACC,YAAY,CAAC,GAAG,EAAE;AAE/D;AACA;AACA,EAAA,IAAIA,YAAY,IAAIA,YAAY,IAAIR,kBAAkB,EAAE;IACtD,OAAOA,kBAAkB,CAACQ,YAA2B,CAAC;AACxD,EAAA;AACA;EACA,IAAIE,gBAAgB,KAAKT,gBAAQ,CAACC,QAAQ,IAAIS,IAAI,KAAKnB,mBAAW,CAACC,MAAM,EAAE;IACzE,OAAOQ,gBAAQ,CAACP,SAAS;AAC3B,EAAA;AACA,EAAA,OAAOgB,gBAAgB;AACzB;AAOO,MAAME,qBAAqB,GAA8BA,CAAC;QAAEC,MAAI;AAAEF,EAAAA;AAAI,CAAE,KAAI;EACjFG,qCAAmB,CACjB,wGAAwG,EACxGD,MAAI,KAAKE,SAAI,CAACC,WAAW,CAC1B;AAED,EAAA,IAAIL,IAAI,IAAIP,eAAe,CAACa,QAAQ,CAACN,IAAI,CAAC,IAAIA,IAAI,IAAIR,wBAAwB,EAAE;IAC9Ee,mCAAiB,CACf,6BAA6BP,IAAI,CAAA,+CAAA,EAAkDR,wBAAwB,CAACQ,IAAoC,CAAC,CAAA,CAAA,CAAG,CACrJ;AACH,EAAA;AACF;;;;;;"}
|
|
@@ -17,6 +17,7 @@ import '../../common/propsValues/variant.mjs';
|
|
|
17
17
|
import '../../common/propsValues/scroll.mjs';
|
|
18
18
|
import '../../common/propsValues/markdownNodeType.mjs';
|
|
19
19
|
import '../../common/fileType.mjs';
|
|
20
|
+
import '@transferwise/formatting';
|
|
20
21
|
import '@transferwise/icons';
|
|
21
22
|
import 'clsx';
|
|
22
23
|
import 'react';
|