npm - @transferwise/components - Versions diffs - 46.119.4 → 46.120.0 - Mend

@transferwise/components 46.119.4 → 46.120.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.

Files changed (2441) hide show

package/build/divider/Divider.mjs CHANGED Viewed

@@ -2,6 +2,15 @@ import { clsx } from 'clsx';
 import 'react';
 import { jsx } from 'react/jsx-runtime';
+/**
+ * @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role="presentation">`.
+ * @param {string} [className] - Optional class names for adding custom styling to the divider.
+ * @param {string} [testId] - Provides a `data-testid` for testing frameworks.
+ * @param {'section' | 'subsection' | 'content'} [level='section'] - Defines the visual style for the divider.
+ *
+ * @see {@link Divider} for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}
+ */
 const Divider = ({
   className,
   isContent = false,

package/build/divider/Divider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Divider.mjs","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n /*\n If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.\n * Otherwise, a non-semantic `<div role=\"presentation\">` is used for purely visual separation.\n * @default false\n /\n isContent?: boolean;\n\n /\n Alters the visual style of the divider, accommodating different types\n * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.\n * @default 'section'\n /\n level?: 'section' \| 'subsection' \| 'content';\n\n className?: string;\n testId?: string;\n}\n\n/\n @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role=\"presentation\">`.\n * @param {string} [className] - Optional class names for adding custom styling to the divider.\n * @param {string} [testId] - Provides a `data-testid` for testing frameworks.\n * @param {'section' \| 'subsection' \| 'content'} [level='section'] - Defines the visual style for the divider.\n \n @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs\|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n className,\n isContent = false,\n testId,\n level = 'section',\n ...props\n}) => {\n const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';\n\n const commonProps = {\n className: clsx('wds-Divider', levelClass, className),\n 'data-testid': testId,\n };\n\n const divProps = {\n ...commonProps,\n role: 'presentation',\n };\n\n return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","className","isContent","testId","level","props","levelClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;~~AA+BA~~,MAAMA,~~OAAO~~,~~GAAoCA~~,CAAC;EAChDC,SAAS;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,MAAM;AACNC,EAAAA,KAAK,GAAG,SAAS;EACjB,GAAGC;~~AAAK~~,~~CACT~~,~~KAAI~~;~~AACH~~,EAAA,MAAMC,UAAU,GAAGF,KAAK,IAAIA,KAAK,KAAK,SAAS,GAAG,CAAA,aAAA,EAAgBA,KAAK,CAAA,CAAE,GAAG,EAAE;AAE9E,EAAA,MAAMG,WAAW,GAAG;IAClBN,SAAS,EAAEO,IAAI,CAAC,aAAa,EAAEF,UAAU,EAAEL,SAAS,CAAC;AACrD,IAAA,aAAa,EAAEE;GAChB;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE;GACP;EAED,OAAOR,SAAS,gBAAGS,GAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF;~~GAAM~~,~~CAAG~~,gBAAGM,GAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ;AAAK,~~IAAI~~;AAC1F;;;;"}
1	+ {"version":3,"file":"Divider.mjs","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n /*\n If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.\n * Otherwise, a non-semantic `<div role=\"presentation\">` is used for purely visual separation.\n * @default false\n /\n isContent?: boolean;\n\n /\n Alters the visual style of the divider, accommodating different types\n * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.\n * @default 'section'\n /\n level?: 'section' \| 'subsection' \| 'content';\n\n className?: string;\n testId?: string;\n}\n\n/\n @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role=\"presentation\">`.\n * @param {string} [className] - Optional class names for adding custom styling to the divider.\n * @param {string} [testId] - Provides a `data-testid` for testing frameworks.\n * @param {'section' \| 'subsection' \| 'content'} [level='section'] - Defines the visual style for the divider.\n \n @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs\|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n className,\n isContent = false,\n testId,\n level = 'section',\n ...props\n}) => {\n const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';\n\n const commonProps = {\n className: clsx('wds-Divider', levelClass, className),\n 'data-testid': testId,\n };\n\n const divProps = {\n ...commonProps,\n role: 'presentation',\n };\n\n return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","className","isContent","testId","level","props","levelClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,OAAwC,GAAGA,CAAC;EAChDC,SAAS;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,MAAM;AACNC,EAAAA,KAAK,GAAG,SAAS;EACjB,GAAGC;AACL,CAAC,KAAK;AACJ,EAAA,MAAMC,UAAU,GAAGF,KAAK,IAAIA,KAAK,KAAK,SAAS,GAAG,CAAA,aAAA,EAAgBA,KAAK,CAAA,CAAE,GAAG,EAAE;AAE9E,EAAA,MAAMG,WAAW,GAAG;IAClBN,SAAS,EAAEO,IAAI,CAAC,aAAa,EAAEF,UAAU,EAAEL,SAAS,CAAC;AACrD,IAAA,aAAa,EAAEE;GAChB;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE;GACP;EAED,OAAOR,SAAS,gBAAGS,GAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF;GAAQ,CAAC,gBAAGM,GAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ;AAAK,GAAG,CAAC;AAC1F;;;;"}

package/build/drawer/Drawer.js CHANGED Viewed

@@ -4,25 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var clsx = require('clsx');
 var React = require('react');
-require('../common/theme.js');
-require('../common/direction.js');
-require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
-require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
-require('../common/propsValues/width.js');
-require('../common/propsValues/type.js');
-require('../common/propsValues/dateMode.js');
-require('../common/propsValues/monthFormat.js');
 var position = require('../common/propsValues/position.js');
-require('../common/propsValues/layouts.js');
-require('../common/propsValues/status.js');
-require('../common/propsValues/sentiment.js');
-require('../common/propsValues/profileType.js');
-require('../common/propsValues/variant.js');
-require('../common/propsValues/scroll.js');
-require('../common/propsValues/markdownNodeType.js');
-require('../common/fileType.js');
 var icons = require('@transferwise/icons');
 var reactIntl = require('react-intl');
 var CloseButton_messages = require('../common/closeButton/CloseButton.messages.js');

package/build/drawer/Drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\nimport { useIntl } from 'react-intl';\nimport { Cross } from '@transferwise/icons';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. /\n children?: React.ReactNode;\n className?: string;\n /* The content to appear in the drawer footer. /\n footerContent?: React.ReactNode;\n /* The content to appear in the drawer header. /\n headerTitle?: React.ReactNode;\n /* The status of Drawer either open or not. /\n open?: boolean;\n /* The placement of Drawer on the screen either left or right. On mobile it will default to bottom. /\n position?: `${Position.LEFT \| Position.RIGHT \| Position.BOTTOM}`;\n /* The action to perform on close click. */\n onClose?: (event: KeyboardEvent \| React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n const intl = useIntl();\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy \|\| (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx(\n 'np-drawer-header',\n 'd-flex',\n 'align-items-center',\n headerTitle ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"np-drawer-title\">\n {headerTitle}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent ? (\n <div className={clsx('np-drawer-footer')}>{footerContent}</div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","intl","useIntl","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_SUBSECTION","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCc~~,~~SAAUA~~,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC;~~AAAc~~,~~CACrB~~,~~EAAA~~;~~AACZ~~,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AACtBC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACR,~~OAAO~~,~~CACT~~;EAED,MAAM;AAAES,IAAAA;GAAU,GAAGC,mBAAS,EAAE;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACf,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACkB,IAAAA,QAAQ,EAAEjB,SAAU;IAAAL,QAAA,eACxDoB,cAAA,CAACG,oBAAY,EAAA;AAACjB,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEM,QAAQ,GAAGW,iBAAQ,CAACC,MAAM,GAAGlB,UAAS;AAAAP,MAAAA,QAAA,eACxE0B,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdT,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAA,EAAA,IAAU;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGY,OAAO,GAAGa,SAAS,CAAE;AACvE3B,QAAAA,SAAS,EAAE4B,SAAI,CAAC,WAAW,EAAE5B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExC0B,eAAA,CAAA,KAAA,EAAA;AACEzB,UAAAA,SAAS,EAAE4B,SAAI,CACb,kBAAkB,EAClB,QAAQ,EACR,oBAAoB,EACpB1B,WAAW,GAAG,yBAAyB,GAAG,qBAAqB,EAC/D,~~WAAW~~,~~CACX~~;AAAAH,UAAAA,QAAA,EAAA,CAEDG,WAAW,iBACViB,cAAA,CAACU,aAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,gBAAiB;AAAChC,YAAAA,SAAS,EAAC,iBAAiB;AAAAD,YAAAA,QAAA,EAC/EG;AAAW,WACP,CACR,eACDiB,cAAA,CAACc,kBAAU,EAAA;AACTC,YAAAA,IAAI,EAAE,EAAG;AACTC,YAAAA,QAAQ,EAAC,UAAU;AACnB,YAAA,YAAA,EAAY1B,IAAI,CAAC2B,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,YAAAA,OAAO,EAAEpC,OAAQ;AAAAJ,YAAAA,QAAA,eAEjBoB,cAAA,CAACqB,WAAK,EAAA,~~EAAA~~;~~AACR~~,~~WAAY~~,~~CACd~~;AAAA,~~SAAK~~,~~CACL~~,~~EAACzC~~,QAAQ,iBAAIoB,cAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,SAAI,CAAC,mBAAmB,CAAE;AAAA7B,UAAAA,QAAA,EAAEA;AAAQ,SAAM,CAAC,EACvEE,aAAa,gBACZkB,cAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,SAAI,CAAC,kBAAkB,CAAE;AAAA7B,UAAAA,QAAA,EAAEE;SAAmB,CAAC,gBAE/DkB,cAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAC;AAAO,~~SAAA~~,~~CACvB~~;OACE;KACO;~~AAChB~~,~~GAAQ~~,CAAC;AAEb;;;;"}
1	+ {"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\nimport { useIntl } from 'react-intl';\nimport { Cross } from '@transferwise/icons';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. /\n children?: React.ReactNode;\n className?: string;\n /* The content to appear in the drawer footer. /\n footerContent?: React.ReactNode;\n /* The content to appear in the drawer header. /\n headerTitle?: React.ReactNode;\n /* The status of Drawer either open or not. /\n open?: boolean;\n /* The placement of Drawer on the screen either left or right. On mobile it will default to bottom. /\n position?: `${Position.LEFT \| Position.RIGHT \| Position.BOTTOM}`;\n /* The action to perform on close click. */\n onClose?: (event: KeyboardEvent \| React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n const intl = useIntl();\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy \|\| (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx(\n 'np-drawer-header',\n 'd-flex',\n 'align-items-center',\n headerTitle ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"np-drawer-title\">\n {headerTitle}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent ? (\n <div className={clsx('np-drawer-footer')}>{footerContent}</div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","intl","useIntl","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_SUBSECTION","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgCe,SAASA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC;AACR,CAAC,EAAE;AACd,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AACtBC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACR,OACH,CAAC;EAED,MAAM;AAAES,IAAAA;GAAU,GAAGC,mBAAS,EAAE;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACf,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACkB,IAAAA,QAAQ,EAAEjB,SAAU;IAAAL,QAAA,eACxDoB,cAAA,CAACG,oBAAY,EAAA;AAACjB,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEM,QAAQ,GAAGW,iBAAQ,CAACC,MAAM,GAAGlB,UAAS;AAAAP,MAAAA,QAAA,eACxE0B,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdT,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAA,EAAA,IAAU;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGY,OAAO,GAAGa,SAAS,CAAE;AACvE3B,QAAAA,SAAS,EAAE4B,SAAI,CAAC,WAAW,EAAE5B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExC0B,eAAA,CAAA,KAAA,EAAA;AACEzB,UAAAA,SAAS,EAAE4B,SAAI,CACb,kBAAkB,EAClB,QAAQ,EACR,oBAAoB,EACpB1B,WAAW,GAAG,yBAAyB,GAAG,qBAAqB,EAC/D,WACF,CAAE;AAAAH,UAAAA,QAAA,EAAA,CAEDG,WAAW,iBACViB,cAAA,CAACU,aAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,gBAAiB;AAAChC,YAAAA,SAAS,EAAC,iBAAiB;AAAAD,YAAAA,QAAA,EAC/EG;AAAW,WACP,CACR,eACDiB,cAAA,CAACc,kBAAU,EAAA;AACTC,YAAAA,IAAI,EAAE,EAAG;AACTC,YAAAA,QAAQ,EAAC,UAAU;AACnB,YAAA,YAAA,EAAY1B,IAAI,CAAC2B,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,YAAAA,OAAO,EAAEpC,OAAQ;AAAAJ,YAAAA,QAAA,eAEjBoB,cAAA,CAACqB,WAAK,EAAA,EAAE;AAAC,WACC,CAAC;AAAA,SACV,CAAC,EACLzC,QAAQ,iBAAIoB,cAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,SAAI,CAAC,mBAAmB,CAAE;AAAA7B,UAAAA,QAAA,EAAEA;AAAQ,SAAM,CAAC,EACvEE,aAAa,gBACZkB,cAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,SAAI,CAAC,kBAAkB,CAAE;AAAA7B,UAAAA,QAAA,EAAEE;SAAmB,CAAC,gBAE/DkB,cAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAC;AAAO,SAAE,CACzB;OACE;KACO;AAAC,GACT,CAAC;AAEb;;;;"}

package/build/drawer/Drawer.mjs CHANGED Viewed

@@ -1,24 +1,7 @@
 import { clsx } from 'clsx';
 import { useId, useContext } from 'react';
-import '../common/theme.mjs';
-import '../common/direction.mjs';
-import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
-import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
-import '../common/propsValues/width.mjs';
-import '../common/propsValues/type.mjs';
-import '../common/propsValues/dateMode.mjs';
-import '../common/propsValues/monthFormat.mjs';
 import { Position } from '../common/propsValues/position.mjs';
-import '../common/propsValues/layouts.mjs';
-import '../common/propsValues/status.mjs';
-import '../common/propsValues/sentiment.mjs';
-import '../common/propsValues/profileType.mjs';
-import '../common/propsValues/variant.mjs';
-import '../common/propsValues/scroll.mjs';
-import '../common/propsValues/markdownNodeType.mjs';
-import '../common/fileType.mjs';
 import { Cross } from '@transferwise/icons';
 import { useIntl } from 'react-intl';
 import closeBtnMessages from '../common/closeButton/CloseButton.messages.mjs';

package/build/drawer/Drawer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\nimport { useIntl } from 'react-intl';\nimport { Cross } from '@transferwise/icons';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. /\n children?: React.ReactNode;\n className?: string;\n /* The content to appear in the drawer footer. /\n footerContent?: React.ReactNode;\n /* The content to appear in the drawer header. /\n headerTitle?: React.ReactNode;\n /* The status of Drawer either open or not. /\n open?: boolean;\n /* The placement of Drawer on the screen either left or right. On mobile it will default to bottom. /\n position?: `${Position.LEFT \| Position.RIGHT \| Position.BOTTOM}`;\n /* The action to perform on close click. */\n onClose?: (event: KeyboardEvent \| React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n const intl = useIntl();\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy \|\| (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx(\n 'np-drawer-header',\n 'd-flex',\n 'align-items-center',\n headerTitle ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"np-drawer-title\">\n {headerTitle}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent ? (\n <div className={clsx('np-drawer-footer')}>{footerContent}</div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","intl","useIntl","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_SUBSECTION","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCc~~,~~SAAUA~~,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC;~~AAAc~~,~~CACrB~~,~~EAAA~~;~~AACZ~~,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AACtBC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACR,~~OAAO~~,~~CACT~~;EAED,MAAM;AAAES,IAAAA;GAAU,GAAGC,SAAS,EAAE;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACf,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACkB,IAAAA,QAAQ,EAAEjB,SAAU;IAAAL,QAAA,eACxDoB,GAAA,CAACG,YAAY,EAAA;AAACjB,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEM,QAAQ,GAAGW,QAAQ,CAACC,MAAM,GAAGlB,QAAS;AAAAP,MAAAA,QAAA,eACxE0B,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdT,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAA,EAAA,IAAU;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGY,OAAO,GAAGa,SAAS,CAAE;AACvE3B,QAAAA,SAAS,EAAE4B,IAAI,CAAC,WAAW,EAAE5B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExC0B,IAAA,CAAA,KAAA,EAAA;AACEzB,UAAAA,SAAS,EAAE4B,IAAI,CACb,kBAAkB,EAClB,QAAQ,EACR,oBAAoB,EACpB1B,WAAW,GAAG,yBAAyB,GAAG,qBAAqB,EAC/D,~~WAAW~~,~~CACX~~;AAAAH,UAAAA,QAAA,EAAA,CAEDG,WAAW,iBACViB,GAAA,CAACU,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,UAAU,CAACC,gBAAiB;AAAChC,YAAAA,SAAS,EAAC,iBAAiB;AAAAD,YAAAA,QAAA,EAC/EG;AAAW,WACP,CACR,eACDiB,GAAA,CAACc,UAAU,EAAA;AACTC,YAAAA,IAAI,EAAE,EAAG;AACTC,YAAAA,QAAQ,EAAC,UAAU;AACnB,YAAA,YAAA,EAAY1B,IAAI,CAAC2B,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,YAAAA,OAAO,EAAEpC,OAAQ;AAAAJ,YAAAA,QAAA,eAEjBoB,GAAA,CAACqB,KAAK,EAAA,~~EAAA~~;~~AACR~~,~~WAAY~~,~~CACd~~;AAAA,~~SAAK~~,~~CACL~~,~~EAACzC~~,QAAQ,iBAAIoB,GAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,IAAI,CAAC,mBAAmB,CAAE;AAAA7B,UAAAA,QAAA,EAAEA;AAAQ,SAAM,CAAC,EACvEE,aAAa,gBACZkB,GAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,IAAI,CAAC,kBAAkB,CAAE;AAAA7B,UAAAA,QAAA,EAAEE;SAAmB,CAAC,gBAE/DkB,GAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAC;AAAO,~~SAAA~~,~~CACvB~~;OACE;KACO;~~AAChB~~,~~GAAQ~~,CAAC;AAEb;;;;"}
1	+ {"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\nimport { useIntl } from 'react-intl';\nimport { Cross } from '@transferwise/icons';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. /\n children?: React.ReactNode;\n className?: string;\n /* The content to appear in the drawer footer. /\n footerContent?: React.ReactNode;\n /* The content to appear in the drawer header. /\n headerTitle?: React.ReactNode;\n /* The status of Drawer either open or not. /\n open?: boolean;\n /* The placement of Drawer on the screen either left or right. On mobile it will default to bottom. /\n position?: `${Position.LEFT \| Position.RIGHT \| Position.BOTTOM}`;\n /* The action to perform on close click. */\n onClose?: (event: KeyboardEvent \| React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n const intl = useIntl();\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy \|\| (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx(\n 'np-drawer-header',\n 'd-flex',\n 'align-items-center',\n headerTitle ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"np-drawer-title\">\n {headerTitle}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent ? (\n <div className={clsx('np-drawer-footer')}>{footerContent}</div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","intl","useIntl","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_SUBSECTION","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;;;;;;;;;AAgCe,SAASA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC;AACR,CAAC,EAAE;AACd,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AACtBC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACR,OACH,CAAC;EAED,MAAM;AAAES,IAAAA;GAAU,GAAGC,SAAS,EAAE;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACf,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACkB,IAAAA,QAAQ,EAAEjB,SAAU;IAAAL,QAAA,eACxDoB,GAAA,CAACG,YAAY,EAAA;AAACjB,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEM,QAAQ,GAAGW,QAAQ,CAACC,MAAM,GAAGlB,QAAS;AAAAP,MAAAA,QAAA,eACxE0B,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdT,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAA,EAAA,IAAU;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGY,OAAO,GAAGa,SAAS,CAAE;AACvE3B,QAAAA,SAAS,EAAE4B,IAAI,CAAC,WAAW,EAAE5B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExC0B,IAAA,CAAA,KAAA,EAAA;AACEzB,UAAAA,SAAS,EAAE4B,IAAI,CACb,kBAAkB,EAClB,QAAQ,EACR,oBAAoB,EACpB1B,WAAW,GAAG,yBAAyB,GAAG,qBAAqB,EAC/D,WACF,CAAE;AAAAH,UAAAA,QAAA,EAAA,CAEDG,WAAW,iBACViB,GAAA,CAACU,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,UAAU,CAACC,gBAAiB;AAAChC,YAAAA,SAAS,EAAC,iBAAiB;AAAAD,YAAAA,QAAA,EAC/EG;AAAW,WACP,CACR,eACDiB,GAAA,CAACc,UAAU,EAAA;AACTC,YAAAA,IAAI,EAAE,EAAG;AACTC,YAAAA,QAAQ,EAAC,UAAU;AACnB,YAAA,YAAA,EAAY1B,IAAI,CAAC2B,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,YAAAA,OAAO,EAAEpC,OAAQ;AAAAJ,YAAAA,QAAA,eAEjBoB,GAAA,CAACqB,KAAK,EAAA,EAAE;AAAC,WACC,CAAC;AAAA,SACV,CAAC,EACLzC,QAAQ,iBAAIoB,GAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,IAAI,CAAC,mBAAmB,CAAE;AAAA7B,UAAAA,QAAA,EAAEA;AAAQ,SAAM,CAAC,EACvEE,aAAa,gBACZkB,GAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,IAAI,CAAC,kBAAkB,CAAE;AAAA7B,UAAAA,QAAA,EAAEE;SAAmB,CAAC,gBAE/DkB,GAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAC;AAAO,SAAE,CACzB;OACE;KACO;AAAC,GACT,CAAC;AAEb;;;;"}

package/build/dropFade/DropFade.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropFade.js","sources":["../../src/dropFade/DropFade.tsx"],"sourcesContent":["import React, { useRef, useState, ReactElement } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nconst DropFade = ({ children, show }: { children: ReactElement; show: boolean }) => {\n const reference = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number \| undefined>(0);\n\n const clonedChild = React.cloneElement(children);\n\n return (\n <CSSTransition\n nodeRef={reference}\n in={show}\n timeout={300}\n classNames=\"np-dropfade\"\n onEntering={() => {\n // Set height so we can animate to the correct height\n setHeight(reference.current?.scrollHeight \|\| 0);\n }}\n // Un-set height, as we don't want to presume it should be that height forever\n onEntered={() => setHeight(undefined)}\n onExit={() => {\n setHeight(reference.current?.scrollHeight \|\| 0);\n }}\n onExiting={() => {\n setHeight(0);\n }}\n >\n <div ref={reference} style={{ height }} className=\"np-dropfade\">\n {clonedChild}\n </div>\n </CSSTransition>\n );\n};\n\nexport default DropFade;\n"],"names":["DropFade","children","show","reference","useRef","height","setHeight","useState","clonedChild","React","cloneElement","_jsx","CSSTransition","nodeRef","in","timeout","classNames","onEntering","current","scrollHeight","onEntered","undefined","onExit","onExiting","ref","style","className"],"mappings":";;;;;;;;;;;;AAGA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA;~~AAAI~~,~~CAA6C~~,~~KAAI~~;~~AACjF~~,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAiB,IAAI,CAAC;EAC9C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,CAAC,CAAC;AAE3D,EAAA,MAAMC,WAAW,gBAAGC,sBAAK,CAACC,YAAY,CAACT,QAAQ,CAAC;EAEhD,oBACEU,cAAA,CAACC,kCAAa,EAAA;AACZC,IAAAA,OAAO,EAAEV,SAAU;AACnBW,IAAAA,EAAE,EAAEZ,IAAK;AACTa,IAAAA,OAAO,EAAE,GAAI;AACbC,IAAAA,UAAU,EAAC,aAAa;IACxBC,UAAU,EAAEA,~~MAAK~~;~~AACf~~;MACAX,SAAS,CAACH,SAAS,CAACe,OAAO,EAAEC,YAAY,IAAI,CAAC,CAAC;AACjD,IAAA;AACA;AAAA;AACAC,IAAAA,SAAS,EAAEA,MAAMd,SAAS,CAACe,SAAS,CAAE;IACtCC,MAAM,EAAEA,~~MAAK~~;~~MACXhB~~,SAAS,CAACH,SAAS,CAACe,OAAO,EAAEC,YAAY,IAAI,CAAC,CAAC;IACjD,CAAE;IACFI,SAAS,EAAEA,~~MAAK~~;~~MACdjB~~,SAAS,CAAC,CAAC,CAAC;IACd,CAAE;AAAAL,IAAAA,QAAA,eAEFU,cAAA,CAAA,KAAA,EAAA;AAAKa,MAAAA,GAAG,EAAErB,SAAU;AAACsB,MAAAA,KAAK,EAAE;AAAEpB,QAAAA;OAAS;AAACqB,MAAAA,SAAS,EAAC,aAAa;AAAAzB,MAAAA,QAAA,EAC5DO;KACE;~~AACP~~,~~GAAe~~,CAAC;AAEpB;;;;"}
1	+ {"version":3,"file":"DropFade.js","sources":["../../src/dropFade/DropFade.tsx"],"sourcesContent":["import React, { useRef, useState, ReactElement } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nconst DropFade = ({ children, show }: { children: ReactElement; show: boolean }) => {\n const reference = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number \| undefined>(0);\n\n const clonedChild = React.cloneElement(children);\n\n return (\n <CSSTransition\n nodeRef={reference}\n in={show}\n timeout={300}\n classNames=\"np-dropfade\"\n onEntering={() => {\n // Set height so we can animate to the correct height\n setHeight(reference.current?.scrollHeight \|\| 0);\n }}\n // Un-set height, as we don't want to presume it should be that height forever\n onEntered={() => setHeight(undefined)}\n onExit={() => {\n setHeight(reference.current?.scrollHeight \|\| 0);\n }}\n onExiting={() => {\n setHeight(0);\n }}\n >\n <div ref={reference} style={{ height }} className=\"np-dropfade\">\n {clonedChild}\n </div>\n </CSSTransition>\n );\n};\n\nexport default DropFade;\n"],"names":["DropFade","children","show","reference","useRef","height","setHeight","useState","clonedChild","React","cloneElement","_jsx","CSSTransition","nodeRef","in","timeout","classNames","onEntering","current","scrollHeight","onEntered","undefined","onExit","onExiting","ref","style","className"],"mappings":";;;;;;;;;;;;AAGA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA;AAAgD,CAAC,KAAK;AAClF,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAiB,IAAI,CAAC;EAC9C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,CAAC,CAAC;AAE3D,EAAA,MAAMC,WAAW,gBAAGC,sBAAK,CAACC,YAAY,CAACT,QAAQ,CAAC;EAEhD,oBACEU,cAAA,CAACC,kCAAa,EAAA;AACZC,IAAAA,OAAO,EAAEV,SAAU;AACnBW,IAAAA,EAAE,EAAEZ,IAAK;AACTa,IAAAA,OAAO,EAAE,GAAI;AACbC,IAAAA,UAAU,EAAC,aAAa;IACxBC,UAAU,EAAEA,MAAM;AAChB;MACAX,SAAS,CAACH,SAAS,CAACe,OAAO,EAAEC,YAAY,IAAI,CAAC,CAAC;AACjD,IAAA;AACA;AAAA;AACAC,IAAAA,SAAS,EAAEA,MAAMd,SAAS,CAACe,SAAS,CAAE;IACtCC,MAAM,EAAEA,MAAM;MACZhB,SAAS,CAACH,SAAS,CAACe,OAAO,EAAEC,YAAY,IAAI,CAAC,CAAC;IACjD,CAAE;IACFI,SAAS,EAAEA,MAAM;MACfjB,SAAS,CAAC,CAAC,CAAC;IACd,CAAE;AAAAL,IAAAA,QAAA,eAEFU,cAAA,CAAA,KAAA,EAAA;AAAKa,MAAAA,GAAG,EAAErB,SAAU;AAACsB,MAAAA,KAAK,EAAE;AAAEpB,QAAAA;OAAS;AAACqB,MAAAA,SAAS,EAAC,aAAa;AAAAzB,MAAAA,QAAA,EAC5DO;KACE;AAAC,GACO,CAAC;AAEpB;;;;"}

package/build/dropFade/DropFade.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropFade.mjs","sources":["../../src/dropFade/DropFade.tsx"],"sourcesContent":["import React, { useRef, useState, ReactElement } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nconst DropFade = ({ children, show }: { children: ReactElement; show: boolean }) => {\n const reference = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number \| undefined>(0);\n\n const clonedChild = React.cloneElement(children);\n\n return (\n <CSSTransition\n nodeRef={reference}\n in={show}\n timeout={300}\n classNames=\"np-dropfade\"\n onEntering={() => {\n // Set height so we can animate to the correct height\n setHeight(reference.current?.scrollHeight \|\| 0);\n }}\n // Un-set height, as we don't want to presume it should be that height forever\n onEntered={() => setHeight(undefined)}\n onExit={() => {\n setHeight(reference.current?.scrollHeight \|\| 0);\n }}\n onExiting={() => {\n setHeight(0);\n }}\n >\n <div ref={reference} style={{ height }} className=\"np-dropfade\">\n {clonedChild}\n </div>\n </CSSTransition>\n );\n};\n\nexport default DropFade;\n"],"names":["DropFade","children","show","reference","useRef","height","setHeight","useState","clonedChild","React","cloneElement","_jsx","CSSTransition","nodeRef","in","timeout","classNames","onEntering","current","scrollHeight","onEntered","undefined","onExit","onExiting","ref","style","className"],"mappings":";;;;AAGA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA;~~AAAI~~,~~CAA6C~~,~~KAAI~~;~~AACjF~~,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,QAAQ,CAAqB,CAAC,CAAC;AAE3D,EAAA,MAAMC,WAAW,gBAAGC,cAAK,CAACC,YAAY,CAACT,QAAQ,CAAC;EAEhD,oBACEU,GAAA,CAACC,aAAa,EAAA;AACZC,IAAAA,OAAO,EAAEV,SAAU;AACnBW,IAAAA,EAAE,EAAEZ,IAAK;AACTa,IAAAA,OAAO,EAAE,GAAI;AACbC,IAAAA,UAAU,EAAC,aAAa;IACxBC,UAAU,EAAEA,~~MAAK~~;~~AACf~~;MACAX,SAAS,CAACH,SAAS,CAACe,OAAO,EAAEC,YAAY,IAAI,CAAC,CAAC;AACjD,IAAA;AACA;AAAA;AACAC,IAAAA,SAAS,EAAEA,MAAMd,SAAS,CAACe,SAAS,CAAE;IACtCC,MAAM,EAAEA,~~MAAK~~;~~MACXhB~~,SAAS,CAACH,SAAS,CAACe,OAAO,EAAEC,YAAY,IAAI,CAAC,CAAC;IACjD,CAAE;IACFI,SAAS,EAAEA,~~MAAK~~;~~MACdjB~~,SAAS,CAAC,CAAC,CAAC;IACd,CAAE;AAAAL,IAAAA,QAAA,eAEFU,GAAA,CAAA,KAAA,EAAA;AAAKa,MAAAA,GAAG,EAAErB,SAAU;AAACsB,MAAAA,KAAK,EAAE;AAAEpB,QAAAA;OAAS;AAACqB,MAAAA,SAAS,EAAC,aAAa;AAAAzB,MAAAA,QAAA,EAC5DO;KACE;~~AACP~~,~~GAAe~~,CAAC;AAEpB;;;;"}
1	+ {"version":3,"file":"DropFade.mjs","sources":["../../src/dropFade/DropFade.tsx"],"sourcesContent":["import React, { useRef, useState, ReactElement } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nconst DropFade = ({ children, show }: { children: ReactElement; show: boolean }) => {\n const reference = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number \| undefined>(0);\n\n const clonedChild = React.cloneElement(children);\n\n return (\n <CSSTransition\n nodeRef={reference}\n in={show}\n timeout={300}\n classNames=\"np-dropfade\"\n onEntering={() => {\n // Set height so we can animate to the correct height\n setHeight(reference.current?.scrollHeight \|\| 0);\n }}\n // Un-set height, as we don't want to presume it should be that height forever\n onEntered={() => setHeight(undefined)}\n onExit={() => {\n setHeight(reference.current?.scrollHeight \|\| 0);\n }}\n onExiting={() => {\n setHeight(0);\n }}\n >\n <div ref={reference} style={{ height }} className=\"np-dropfade\">\n {clonedChild}\n </div>\n </CSSTransition>\n );\n};\n\nexport default DropFade;\n"],"names":["DropFade","children","show","reference","useRef","height","setHeight","useState","clonedChild","React","cloneElement","_jsx","CSSTransition","nodeRef","in","timeout","classNames","onEntering","current","scrollHeight","onEntered","undefined","onExit","onExiting","ref","style","className"],"mappings":";;;;AAGA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA;AAAgD,CAAC,KAAK;AAClF,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,QAAQ,CAAqB,CAAC,CAAC;AAE3D,EAAA,MAAMC,WAAW,gBAAGC,cAAK,CAACC,YAAY,CAACT,QAAQ,CAAC;EAEhD,oBACEU,GAAA,CAACC,aAAa,EAAA;AACZC,IAAAA,OAAO,EAAEV,SAAU;AACnBW,IAAAA,EAAE,EAAEZ,IAAK;AACTa,IAAAA,OAAO,EAAE,GAAI;AACbC,IAAAA,UAAU,EAAC,aAAa;IACxBC,UAAU,EAAEA,MAAM;AAChB;MACAX,SAAS,CAACH,SAAS,CAACe,OAAO,EAAEC,YAAY,IAAI,CAAC,CAAC;AACjD,IAAA;AACA;AAAA;AACAC,IAAAA,SAAS,EAAEA,MAAMd,SAAS,CAACe,SAAS,CAAE;IACtCC,MAAM,EAAEA,MAAM;MACZhB,SAAS,CAACH,SAAS,CAACe,OAAO,EAAEC,YAAY,IAAI,CAAC,CAAC;IACjD,CAAE;IACFI,SAAS,EAAEA,MAAM;MACfjB,SAAS,CAAC,CAAC,CAAC;IACd,CAAE;AAAAL,IAAAA,QAAA,eAEFU,GAAA,CAAA,KAAA,EAAA;AAAKa,MAAAA,GAAG,EAAErB,SAAU;AAACsB,MAAAA,KAAK,EAAE;AAAEpB,QAAAA;OAAS;AAACqB,MAAAA,SAAS,EAAC,aAAa;AAAAzB,MAAAA,QAAA,EAC5DO;KACE;AAAC,GACO,CAAC;AAEpB;;;;"}

package/build/emphasis/Emphasis.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Emphasis.js","sources":["../../src/emphasis/Emphasis.tsx"],"sourcesContent":["import EmphasisHtmlTransformer from './EmphasisHtmlTransformer';\n\nconst SUPPORTED_TAGS = ['important', 'positive', 'negative', 'warning'];\nconst emphasisHtmlTransformer = new EmphasisHtmlTransformer(SUPPORTED_TAGS);\n\nexport type EmphasisProps = {\n text?: string;\n};\n\nconst Emphasis = ({ text = undefined }: EmphasisProps) => {\n if (!text) {\n return null;\n }\n\n const transformedText = emphasisHtmlTransformer.transform(text);\n // eslint-disable-next-line react/no-danger\n return transformedText ? <span dangerouslySetInnerHTML={{ __html: transformedText }} /> : null;\n};\n\nexport default Emphasis;\n"],"names":["SUPPORTED_TAGS","emphasisHtmlTransformer","EmphasisHtmlTransformer","Emphasis","text","undefined","transformedText","transform","_jsx","dangerouslySetInnerHTML","__html"],"mappings":";;;;;;;AAEA,MAAMA,cAAc,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;AACvE,MAAMC,uBAAuB,GAAG,IAAIC,+BAAuB,CAACF,cAAc,CAAC;AAM3E,MAAMG,QAAQ,GAAGA,CAAC;AAAEC,EAAAA,IAAI,GAAGC;~~AAAS~~,~~CAAiB~~,~~KAAI~~;~~EACvD~~,IAAI,CAACD,IAAI,EAAE;AACT,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,MAAME,eAAe,GAAGL,uBAAuB,CAACM,SAAS,CAACH,IAAI,CAAC;AAC/D;EACA,OAAOE,eAAe,gBAAGE,cAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAEJ;~~AAAe~~;~~IAAM~~,GAAG,IAAI;AAChG;;;;"}
1	+ {"version":3,"file":"Emphasis.js","sources":["../../src/emphasis/Emphasis.tsx"],"sourcesContent":["import EmphasisHtmlTransformer from './EmphasisHtmlTransformer';\n\nconst SUPPORTED_TAGS = ['important', 'positive', 'negative', 'warning'];\nconst emphasisHtmlTransformer = new EmphasisHtmlTransformer(SUPPORTED_TAGS);\n\nexport type EmphasisProps = {\n text?: string;\n};\n\nconst Emphasis = ({ text = undefined }: EmphasisProps) => {\n if (!text) {\n return null;\n }\n\n const transformedText = emphasisHtmlTransformer.transform(text);\n // eslint-disable-next-line react/no-danger\n return transformedText ? <span dangerouslySetInnerHTML={{ __html: transformedText }} /> : null;\n};\n\nexport default Emphasis;\n"],"names":["SUPPORTED_TAGS","emphasisHtmlTransformer","EmphasisHtmlTransformer","Emphasis","text","undefined","transformedText","transform","_jsx","dangerouslySetInnerHTML","__html"],"mappings":";;;;;;;AAEA,MAAMA,cAAc,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;AACvE,MAAMC,uBAAuB,GAAG,IAAIC,+BAAuB,CAACF,cAAc,CAAC;AAM3E,MAAMG,QAAQ,GAAGA,CAAC;AAAEC,EAAAA,IAAI,GAAGC;AAAyB,CAAC,KAAK;EACxD,IAAI,CAACD,IAAI,EAAE;AACT,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,MAAME,eAAe,GAAGL,uBAAuB,CAACM,SAAS,CAACH,IAAI,CAAC;AAC/D;EACA,OAAOE,eAAe,gBAAGE,cAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAEJ;AAAgB;GAAI,CAAC,GAAG,IAAI;AAChG;;;;"}

package/build/emphasis/Emphasis.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Emphasis.mjs","sources":["../../src/emphasis/Emphasis.tsx"],"sourcesContent":["import EmphasisHtmlTransformer from './EmphasisHtmlTransformer';\n\nconst SUPPORTED_TAGS = ['important', 'positive', 'negative', 'warning'];\nconst emphasisHtmlTransformer = new EmphasisHtmlTransformer(SUPPORTED_TAGS);\n\nexport type EmphasisProps = {\n text?: string;\n};\n\nconst Emphasis = ({ text = undefined }: EmphasisProps) => {\n if (!text) {\n return null;\n }\n\n const transformedText = emphasisHtmlTransformer.transform(text);\n // eslint-disable-next-line react/no-danger\n return transformedText ? <span dangerouslySetInnerHTML={{ __html: transformedText }} /> : null;\n};\n\nexport default Emphasis;\n"],"names":["SUPPORTED_TAGS","emphasisHtmlTransformer","EmphasisHtmlTransformer","Emphasis","text","undefined","transformedText","transform","_jsx","dangerouslySetInnerHTML","__html"],"mappings":";;;AAEA,MAAMA,cAAc,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;AACvE,MAAMC,uBAAuB,GAAG,IAAIC,uBAAuB,CAACF,cAAc,CAAC;AAM3E,MAAMG,QAAQ,GAAGA,CAAC;AAAEC,EAAAA,IAAI,GAAGC;~~AAAS~~,~~CAAiB~~,~~KAAI~~;~~EACvD~~,IAAI,CAACD,IAAI,EAAE;AACT,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,MAAME,eAAe,GAAGL,uBAAuB,CAACM,SAAS,CAACH,IAAI,CAAC;AAC/D;EACA,OAAOE,eAAe,gBAAGE,GAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAEJ;~~AAAe~~;~~IAAM~~,GAAG,IAAI;AAChG;;;;"}
1	+ {"version":3,"file":"Emphasis.mjs","sources":["../../src/emphasis/Emphasis.tsx"],"sourcesContent":["import EmphasisHtmlTransformer from './EmphasisHtmlTransformer';\n\nconst SUPPORTED_TAGS = ['important', 'positive', 'negative', 'warning'];\nconst emphasisHtmlTransformer = new EmphasisHtmlTransformer(SUPPORTED_TAGS);\n\nexport type EmphasisProps = {\n text?: string;\n};\n\nconst Emphasis = ({ text = undefined }: EmphasisProps) => {\n if (!text) {\n return null;\n }\n\n const transformedText = emphasisHtmlTransformer.transform(text);\n // eslint-disable-next-line react/no-danger\n return transformedText ? <span dangerouslySetInnerHTML={{ __html: transformedText }} /> : null;\n};\n\nexport default Emphasis;\n"],"names":["SUPPORTED_TAGS","emphasisHtmlTransformer","EmphasisHtmlTransformer","Emphasis","text","undefined","transformedText","transform","_jsx","dangerouslySetInnerHTML","__html"],"mappings":";;;AAEA,MAAMA,cAAc,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;AACvE,MAAMC,uBAAuB,GAAG,IAAIC,uBAAuB,CAACF,cAAc,CAAC;AAM3E,MAAMG,QAAQ,GAAGA,CAAC;AAAEC,EAAAA,IAAI,GAAGC;AAAyB,CAAC,KAAK;EACxD,IAAI,CAACD,IAAI,EAAE;AACT,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,MAAME,eAAe,GAAGL,uBAAuB,CAACM,SAAS,CAACH,IAAI,CAAC;AAC/D;EACA,OAAOE,eAAe,gBAAGE,GAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAEJ;AAAgB;GAAI,CAAC,GAAG,IAAI;AAChG;;;;"}

package/build/emphasis/EmphasisHtmlTransformer.js CHANGED Viewed

@@ -20,6 +20,7 @@ class EmphasisHtmlTransformer {
       };
     });
   }
   // Algorithm:
   // 1) Escape all dangerous characters (<,>,&)
   // 2) Replace all escaped, whitelisted tags with styled spans.

package/build/emphasis/EmphasisHtmlTransformer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmphasisHtmlTransformer.js","sources":["../../src/emphasis/EmphasisHtmlTransformer.ts"],"sourcesContent":["const ESCAPED_OPENING_CHEVRON = '<';\nconst ESCAPED_CLOSING_CHEVRON = '>';\n\ntype Tags = {\n transformed: {\n opening: string;\n closing: string;\n };\n escapedRegex: {\n opening: RegExp;\n closing: RegExp;\n };\n};\n\nclass EmphasisHtmlTransformer {\n tags: Tags[];\n\n constructor(whitelistedTags?: string[]) {\n this.tags = (whitelistedTags \|\| []).map((tag) => {\n return {\n transformed: {\n opening: `<em class=\"emphasis emphasis--${tag}\">`,\n closing: '</em>',\n },\n escapedRegex: {\n opening: new RegExp(`${ESCAPED_OPENING_CHEVRON}${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n closing: new RegExp(`${ESCAPED_OPENING_CHEVRON}/${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n },\n };\n });\n }\n\n // Algorithm:\n // 1) Escape all dangerous characters (<,>,&)\n // 2) Replace all escaped, whitelisted tags with styled spans.\n // 3) Transform new line characters to `<br />`s\n //\n // Note: for simplicity this doesn't support tags with non-standard whitespaces, e.g. <positive></ positive>\n transform(unsafe: string): string \| null {\n if (!unsafe) {\n return null;\n }\n\n const safe = unsafe.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\n return this.tags\n .reduce((accumulator, tag) => {\n return accumulator\n .replace(tag.escapedRegex.opening, tag.transformed.opening)\n .replace(tag.escapedRegex.closing, tag.transformed.closing);\n }, safe)\n .replace(/\\\\n\|\\n/g, '<br />');\n }\n}\n\nexport default EmphasisHtmlTransformer;\n"],"names":["ESCAPED_OPENING_CHEVRON","ESCAPED_CLOSING_CHEVRON","EmphasisHtmlTransformer","tags","constructor","whitelistedTags","map","tag","transformed","opening","closing","escapedRegex","RegExp","transform","unsafe","safe","replace","reduce","accumulator"],"mappings":";;;;AAAA,MAAMA,uBAAuB,GAAG,MAAM;AACtC,MAAMC,uBAAuB,GAAG,MAAM;AAatC,MAAMC,uBAAuB,~~CAAA~~;~~EAC3BC~~,IAAI;EAEJC,~~WAAAA~~,~~CAAYC~~,eAA0B,~~EAAA~~;~~IACpC~~,IAAI,CAACF,IAAI,GAAG,CAACE,eAAe,IAAI,EAAE,EAAEC,GAAG,CAAEC,GAAG,~~IAAI~~;~~MAC9C~~,OAAO;AACLC,QAAAA,WAAW,EAAE;UACXC,OAAO,EAAE,CAAA,8BAAA,EAAiCF,GAAG,CAAA,EAAA,CAAI;AACjDG,UAAAA,OAAO,EAAE;SACV;AACDC,QAAAA,YAAY,EAAE;AACZF,UAAAA,OAAO,EAAE,IAAIG,MAAM,CAAC,CAAA,EAAGZ,uBAAuB,CAAA,EAAGO,GAAG,CAAA,EAAGN,uBAAuB,CAAA,CAAE,EAAE,GAAG,CAAC;AACtFS,UAAAA,OAAO,EAAE,IAAIE,MAAM,CAAC,CAAA,EAAGZ,uBAAuB,CAAA,CAAA,EAAIO,GAAG,CAAA,EAAGN,uBAAuB,CAAA,CAAE,EAAE,GAAG;~~AACvF~~;~~OACF~~;AACH,IAAA,CAAC,CAAC;AACJ,EAAA;AAEA;AACA;AACA;AACA;AACA;AACA;EACAY,SAASA,CAACC,MAAc,~~EAAA~~;~~IACtB~~,IAAI,CAACA,MAAM,EAAE;AACX,MAAA,OAAO,IAAI;AACb,IAAA;IAEA,MAAMC,IAAI,GAAGD,MAAM,CAACE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtF,OAAO,IAAI,CAACb,IAAI,CACbc,MAAM,CAAC,CAACC,WAAW,EAAEX,GAAG,~~KAAI~~;~~AAC3B~~,MAAA,OAAOW,WAAW,CACfF,OAAO,CAACT,GAAG,CAACI,YAAY,CAACF,OAAO,EAAEF,GAAG,CAACC,WAAW,CAACC,OAAO,CAAC,CAC1DO,OAAO,CAACT,GAAG,CAACI,YAAY,CAACD,OAAO,EAAEH,GAAG,CAACC,WAAW,CAACE,OAAO,CAAC;IAC/D,CAAC,EAAEK,IAAI,CAAC,CACPC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,EAAA;~~AACD~~;;;;"}
1	+ {"version":3,"file":"EmphasisHtmlTransformer.js","sources":["../../src/emphasis/EmphasisHtmlTransformer.ts"],"sourcesContent":["const ESCAPED_OPENING_CHEVRON = '<';\nconst ESCAPED_CLOSING_CHEVRON = '>';\n\ntype Tags = {\n transformed: {\n opening: string;\n closing: string;\n };\n escapedRegex: {\n opening: RegExp;\n closing: RegExp;\n };\n};\n\nclass EmphasisHtmlTransformer {\n tags: Tags[];\n\n constructor(whitelistedTags?: string[]) {\n this.tags = (whitelistedTags \|\| []).map((tag) => {\n return {\n transformed: {\n opening: `<em class=\"emphasis emphasis--${tag}\">`,\n closing: '</em>',\n },\n escapedRegex: {\n opening: new RegExp(`${ESCAPED_OPENING_CHEVRON}${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n closing: new RegExp(`${ESCAPED_OPENING_CHEVRON}/${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n },\n };\n });\n }\n\n // Algorithm:\n // 1) Escape all dangerous characters (<,>,&)\n // 2) Replace all escaped, whitelisted tags with styled spans.\n // 3) Transform new line characters to `<br />`s\n //\n // Note: for simplicity this doesn't support tags with non-standard whitespaces, e.g. <positive></ positive>\n transform(unsafe: string): string \| null {\n if (!unsafe) {\n return null;\n }\n\n const safe = unsafe.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\n return this.tags\n .reduce((accumulator, tag) => {\n return accumulator\n .replace(tag.escapedRegex.opening, tag.transformed.opening)\n .replace(tag.escapedRegex.closing, tag.transformed.closing);\n }, safe)\n .replace(/\\\\n\|\\n/g, '<br />');\n }\n}\n\nexport default EmphasisHtmlTransformer;\n"],"names":["ESCAPED_OPENING_CHEVRON","ESCAPED_CLOSING_CHEVRON","EmphasisHtmlTransformer","tags","constructor","whitelistedTags","map","tag","transformed","opening","closing","escapedRegex","RegExp","transform","unsafe","safe","replace","reduce","accumulator"],"mappings":";;;;AAAA,MAAMA,uBAAuB,GAAG,MAAM;AACtC,MAAMC,uBAAuB,GAAG,MAAM;AAatC,MAAMC,uBAAuB,CAAC;EAC5BC,IAAI;EAEJC,WAAWA,CAACC,eAA0B,EAAE;IACtC,IAAI,CAACF,IAAI,GAAG,CAACE,eAAe,IAAI,EAAE,EAAEC,GAAG,CAAEC,GAAG,IAAK;MAC/C,OAAO;AACLC,QAAAA,WAAW,EAAE;UACXC,OAAO,EAAE,CAAA,8BAAA,EAAiCF,GAAG,CAAA,EAAA,CAAI;AACjDG,UAAAA,OAAO,EAAE;SACV;AACDC,QAAAA,YAAY,EAAE;AACZF,UAAAA,OAAO,EAAE,IAAIG,MAAM,CAAC,CAAA,EAAGZ,uBAAuB,CAAA,EAAGO,GAAG,CAAA,EAAGN,uBAAuB,CAAA,CAAE,EAAE,GAAG,CAAC;AACtFS,UAAAA,OAAO,EAAE,IAAIE,MAAM,CAAC,CAAA,EAAGZ,uBAAuB,CAAA,CAAA,EAAIO,GAAG,CAAA,EAAGN,uBAAuB,CAAA,CAAE,EAAE,GAAG;AACxF;OACD;AACH,IAAA,CAAC,CAAC;AACJ,EAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;EACAY,SAASA,CAACC,MAAc,EAAiB;IACvC,IAAI,CAACA,MAAM,EAAE;AACX,MAAA,OAAO,IAAI;AACb,IAAA;IAEA,MAAMC,IAAI,GAAGD,MAAM,CAACE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtF,OAAO,IAAI,CAACb,IAAI,CACbc,MAAM,CAAC,CAACC,WAAW,EAAEX,GAAG,KAAK;AAC5B,MAAA,OAAOW,WAAW,CACfF,OAAO,CAACT,GAAG,CAACI,YAAY,CAACF,OAAO,EAAEF,GAAG,CAACC,WAAW,CAACC,OAAO,CAAC,CAC1DO,OAAO,CAACT,GAAG,CAACI,YAAY,CAACD,OAAO,EAAEH,GAAG,CAACC,WAAW,CAACE,OAAO,CAAC;IAC/D,CAAC,EAAEK,IAAI,CAAC,CACPC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,EAAA;AACF;;;;"}

package/build/emphasis/EmphasisHtmlTransformer.mjs CHANGED Viewed

@@ -16,6 +16,7 @@ class EmphasisHtmlTransformer {
       };
     });
   }
   // Algorithm:
   // 1) Escape all dangerous characters (<,>,&)
   // 2) Replace all escaped, whitelisted tags with styled spans.

package/build/emphasis/EmphasisHtmlTransformer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmphasisHtmlTransformer.mjs","sources":["../../src/emphasis/EmphasisHtmlTransformer.ts"],"sourcesContent":["const ESCAPED_OPENING_CHEVRON = '<';\nconst ESCAPED_CLOSING_CHEVRON = '>';\n\ntype Tags = {\n transformed: {\n opening: string;\n closing: string;\n };\n escapedRegex: {\n opening: RegExp;\n closing: RegExp;\n };\n};\n\nclass EmphasisHtmlTransformer {\n tags: Tags[];\n\n constructor(whitelistedTags?: string[]) {\n this.tags = (whitelistedTags \|\| []).map((tag) => {\n return {\n transformed: {\n opening: `<em class=\"emphasis emphasis--${tag}\">`,\n closing: '</em>',\n },\n escapedRegex: {\n opening: new RegExp(`${ESCAPED_OPENING_CHEVRON}${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n closing: new RegExp(`${ESCAPED_OPENING_CHEVRON}/${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n },\n };\n });\n }\n\n // Algorithm:\n // 1) Escape all dangerous characters (<,>,&)\n // 2) Replace all escaped, whitelisted tags with styled spans.\n // 3) Transform new line characters to `<br />`s\n //\n // Note: for simplicity this doesn't support tags with non-standard whitespaces, e.g. <positive></ positive>\n transform(unsafe: string): string \| null {\n if (!unsafe) {\n return null;\n }\n\n const safe = unsafe.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\n return this.tags\n .reduce((accumulator, tag) => {\n return accumulator\n .replace(tag.escapedRegex.opening, tag.transformed.opening)\n .replace(tag.escapedRegex.closing, tag.transformed.closing);\n }, safe)\n .replace(/\\\\n\|\\n/g, '<br />');\n }\n}\n\nexport default EmphasisHtmlTransformer;\n"],"names":["ESCAPED_OPENING_CHEVRON","ESCAPED_CLOSING_CHEVRON","EmphasisHtmlTransformer","tags","constructor","whitelistedTags","map","tag","transformed","opening","closing","escapedRegex","RegExp","transform","unsafe","safe","replace","reduce","accumulator"],"mappings":"AAAA,MAAMA,uBAAuB,GAAG,MAAM;AACtC,MAAMC,uBAAuB,GAAG,MAAM;AAatC,MAAMC,uBAAuB,~~CAAA~~;~~EAC3BC~~,IAAI;EAEJC,~~WAAAA~~,~~CAAYC~~,eAA0B,~~EAAA~~;~~IACpC~~,IAAI,CAACF,IAAI,GAAG,CAACE,eAAe,IAAI,EAAE,EAAEC,GAAG,CAAEC,GAAG,~~IAAI~~;~~MAC9C~~,OAAO;AACLC,QAAAA,WAAW,EAAE;UACXC,OAAO,EAAE,CAAA,8BAAA,EAAiCF,GAAG,CAAA,EAAA,CAAI;AACjDG,UAAAA,OAAO,EAAE;SACV;AACDC,QAAAA,YAAY,EAAE;AACZF,UAAAA,OAAO,EAAE,IAAIG,MAAM,CAAC,CAAA,EAAGZ,uBAAuB,CAAA,EAAGO,GAAG,CAAA,EAAGN,uBAAuB,CAAA,CAAE,EAAE,GAAG,CAAC;AACtFS,UAAAA,OAAO,EAAE,IAAIE,MAAM,CAAC,CAAA,EAAGZ,uBAAuB,CAAA,CAAA,EAAIO,GAAG,CAAA,EAAGN,uBAAuB,CAAA,CAAE,EAAE,GAAG;~~AACvF~~;~~OACF~~;AACH,IAAA,CAAC,CAAC;AACJ,EAAA;AAEA;AACA;AACA;AACA;AACA;AACA;EACAY,SAASA,CAACC,MAAc,~~EAAA~~;~~IACtB~~,IAAI,CAACA,MAAM,EAAE;AACX,MAAA,OAAO,IAAI;AACb,IAAA;IAEA,MAAMC,IAAI,GAAGD,MAAM,CAACE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtF,OAAO,IAAI,CAACb,IAAI,CACbc,MAAM,CAAC,CAACC,WAAW,EAAEX,GAAG,~~KAAI~~;~~AAC3B~~,MAAA,OAAOW,WAAW,CACfF,OAAO,CAACT,GAAG,CAACI,YAAY,CAACF,OAAO,EAAEF,GAAG,CAACC,WAAW,CAACC,OAAO,CAAC,CAC1DO,OAAO,CAACT,GAAG,CAACI,YAAY,CAACD,OAAO,EAAEH,GAAG,CAACC,WAAW,CAACE,OAAO,CAAC;IAC/D,CAAC,EAAEK,IAAI,CAAC,CACPC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,EAAA;~~AACD~~;;;;"}
1	+ {"version":3,"file":"EmphasisHtmlTransformer.mjs","sources":["../../src/emphasis/EmphasisHtmlTransformer.ts"],"sourcesContent":["const ESCAPED_OPENING_CHEVRON = '<';\nconst ESCAPED_CLOSING_CHEVRON = '>';\n\ntype Tags = {\n transformed: {\n opening: string;\n closing: string;\n };\n escapedRegex: {\n opening: RegExp;\n closing: RegExp;\n };\n};\n\nclass EmphasisHtmlTransformer {\n tags: Tags[];\n\n constructor(whitelistedTags?: string[]) {\n this.tags = (whitelistedTags \|\| []).map((tag) => {\n return {\n transformed: {\n opening: `<em class=\"emphasis emphasis--${tag}\">`,\n closing: '</em>',\n },\n escapedRegex: {\n opening: new RegExp(`${ESCAPED_OPENING_CHEVRON}${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n closing: new RegExp(`${ESCAPED_OPENING_CHEVRON}/${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n },\n };\n });\n }\n\n // Algorithm:\n // 1) Escape all dangerous characters (<,>,&)\n // 2) Replace all escaped, whitelisted tags with styled spans.\n // 3) Transform new line characters to `<br />`s\n //\n // Note: for simplicity this doesn't support tags with non-standard whitespaces, e.g. <positive></ positive>\n transform(unsafe: string): string \| null {\n if (!unsafe) {\n return null;\n }\n\n const safe = unsafe.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\n return this.tags\n .reduce((accumulator, tag) => {\n return accumulator\n .replace(tag.escapedRegex.opening, tag.transformed.opening)\n .replace(tag.escapedRegex.closing, tag.transformed.closing);\n }, safe)\n .replace(/\\\\n\|\\n/g, '<br />');\n }\n}\n\nexport default EmphasisHtmlTransformer;\n"],"names":["ESCAPED_OPENING_CHEVRON","ESCAPED_CLOSING_CHEVRON","EmphasisHtmlTransformer","tags","constructor","whitelistedTags","map","tag","transformed","opening","closing","escapedRegex","RegExp","transform","unsafe","safe","replace","reduce","accumulator"],"mappings":"AAAA,MAAMA,uBAAuB,GAAG,MAAM;AACtC,MAAMC,uBAAuB,GAAG,MAAM;AAatC,MAAMC,uBAAuB,CAAC;EAC5BC,IAAI;EAEJC,WAAWA,CAACC,eAA0B,EAAE;IACtC,IAAI,CAACF,IAAI,GAAG,CAACE,eAAe,IAAI,EAAE,EAAEC,GAAG,CAAEC,GAAG,IAAK;MAC/C,OAAO;AACLC,QAAAA,WAAW,EAAE;UACXC,OAAO,EAAE,CAAA,8BAAA,EAAiCF,GAAG,CAAA,EAAA,CAAI;AACjDG,UAAAA,OAAO,EAAE;SACV;AACDC,QAAAA,YAAY,EAAE;AACZF,UAAAA,OAAO,EAAE,IAAIG,MAAM,CAAC,CAAA,EAAGZ,uBAAuB,CAAA,EAAGO,GAAG,CAAA,EAAGN,uBAAuB,CAAA,CAAE,EAAE,GAAG,CAAC;AACtFS,UAAAA,OAAO,EAAE,IAAIE,MAAM,CAAC,CAAA,EAAGZ,uBAAuB,CAAA,CAAA,EAAIO,GAAG,CAAA,EAAGN,uBAAuB,CAAA,CAAE,EAAE,GAAG;AACxF;OACD;AACH,IAAA,CAAC,CAAC;AACJ,EAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;EACAY,SAASA,CAACC,MAAc,EAAiB;IACvC,IAAI,CAACA,MAAM,EAAE;AACX,MAAA,OAAO,IAAI;AACb,IAAA;IAEA,MAAMC,IAAI,GAAGD,MAAM,CAACE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtF,OAAO,IAAI,CAACb,IAAI,CACbc,MAAM,CAAC,CAACC,WAAW,EAAEX,GAAG,KAAK;AAC5B,MAAA,OAAOW,WAAW,CACfF,OAAO,CAACT,GAAG,CAACI,YAAY,CAACF,OAAO,EAAEF,GAAG,CAACC,WAAW,CAACC,OAAO,CAAC,CAC1DO,OAAO,CAACT,GAAG,CAACI,YAAY,CAACD,OAAO,EAAEH,GAAG,CAACC,WAAW,CAACE,OAAO,CAAC;IAC/D,CAAC,EAAEK,IAAI,CAAC,CACPC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,EAAA;AACF;;;;"}

package/build/expressiveMoneyInput/ExpressiveMoneyInput.js CHANGED Viewed

@@ -13,6 +13,21 @@ var Chevron = require('./chevron/Chevron.js');
 var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
 var jsxRuntime = require('react/jsx-runtime');
+/**
+ * This component has been kindly contributed by our friends at the `Send` team 🎉.
+ *
+ * Some patterns and implementation details used in this component may differ
+ * from what's commonly used in the Design System. The overall build and QA was managed
+ * by the contributing team directly, and such did not follow a typical DS lifecycle.
+ *
+ * While we house this component and will help facilitate its future iterations,
+ * direct contributions by consuming product teams are highly encouraged.
+ *
+ * > ⚠️ **Prerequisite:** <br />The component depends on the
+ * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been
+ * deliberately excluded from the Design System bundle and kept as an opt-in only.
+ * **Make sure to add it to your project dependencies.**
+ */
 function ExpressiveMoneyInput({
   label,
   currency,

package/build/expressiveMoneyInput/ExpressiveMoneyInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressiveMoneyInput.js","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../body';\nimport { Label } from '../label/Label';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport {\n type Props as CurrencySelectorProps,\n CurrencySelector,\n} from './currencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './amountInput/AmountInput';\nimport { Chevron } from './chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';\n\ntype AmountType = number \| null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n CurrencySelectorProps,\n 'addons' \| 'options' \| 'onChange' \| 'onOpen' \| 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n CustomCurrencySelectorInstanceType;\n\nexport type Props = {\n label?: ReactNode;\n currencySelector?: CurrencySelectorType;\n amount?: AmountType;\n /*\n The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n /\n currency: CurrencyType;\n inlinePrompt?: {\n sentiment?: InlinePromptProps['sentiment'];\n message: InlinePromptProps['children'];\n media?: InlinePromptProps['media'];\n };\n showChevron?: boolean;\n /\n If set, it auto-focuses the amount input upon component mount.<br />\n * ⚠️ Use with caution, as it may impact user experience and\n * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n /\n autoFocus?: boolean;\n /\n Dims the input to indicate a loading state. Does not disable it.\n /\n loading?: boolean;\n onAmountChange: (amount: AmountType) => void;\n onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/\n This component has been kindly contributed by our friends at the `Send` team 🎉.\n \n Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n \n While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n \n > ⚠️ Prerequisite: <br />The component depends on the\n * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * Make sure to add it to your project dependencies.\n */\nexport default function ExpressiveMoneyInput({\n label,\n currency,\n currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,\n amount,\n onAmountChange,\n className,\n inlinePrompt,\n showChevron,\n autoFocus,\n loading,\n onFocusChange,\n}: Props) {\n const inputId = useId();\n const labelId = useId();\n const customAlertId = useId();\n const currencyId = useId();\n\n return (\n <div className={clsx('wds-expressive-money-input', className)}>\n <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n {label}\n </Label>\n <div\n className={clsx('d-flex')}\n role=\"group\"\n aria-labelledby={labelId}\n {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n >\n <div className=\"wds-expressive-money-input-currency-selector\">\n {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n <CurrencySelector\n id={currencyId}\n labelId={labelId}\n currency={currency}\n {...currencySelector}\n />\n )}\n </div>\n <AmountInput\n id={inputId}\n describedById={currencyId}\n amount={amount}\n currency={currency}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n loading={loading}\n onChange={onAmountChange}\n onFocusChange={onFocusChange}\n />\n <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n <Chevron shouldShow={Boolean(showChevron)} />\n </div>\n </div>\n <AnimatePresence initial={false}>\n {inlinePrompt && (\n <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n <motion.div\n key={customAlertId}\n initial={{ opacity: 0, height: 0 }}\n animate={{\n opacity: 1,\n height: 'auto',\n transition: { delay: 0.75, duration: 0.3 },\n }}\n exit={{ opacity: 0, height: 0 }}\n >\n {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n <InlinePrompt\n id={customAlertId}\n media={inlinePrompt.media}\n sentiment={inlinePrompt.sentiment}\n >\n {inlinePrompt.message}\n </InlinePrompt>\n ) : (\n <Body>{inlinePrompt.message}</Body>\n )}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":";;;;;;;;;;;;;;;~~AAuEc~~,~~SAAUA~~,oBAAoBA,CAAC;EAC3CC,KAAK;EACLC,QAAQ;AACRC,EAAAA,gBAAgB,GAAG;AAAEC,IAAAA,OAAO,EAAE;GAA2C;EACzEC,MAAM;EACNC,cAAc;EACdC,SAAS;EACTC,YAAY;EACZC,WAAW;EACXC,SAAS;EACTC,OAAO;AACPC,EAAAA;~~AAAa~~,~~CACP~~,~~EAAA~~;~~AACN~~,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AACvB,EAAA,MAAMC,OAAO,GAAGD,WAAK,EAAE;AACvB,EAAA,MAAME,aAAa,GAAGF,WAAK,EAAE;AAC7B,EAAA,MAAMG,UAAU,GAAGH,WAAK,EAAE;AAE1B,EAAA,oBACEI,eAAA,CAAA,KAAA,EAAA;AAAKX,IAAAA,SAAS,EAAEY,SAAI,CAAC,4BAA4B,EAAEZ,SAAS,CAAE;IAAAa,QAAA,EAAA,cAC5DC,cAAA,CAACC,WAAK,EAAA;AAACC,MAAAA,EAAE,EAAER,OAAQ;AAACS,MAAAA,OAAO,EAAEX,OAAQ;AAACN,MAAAA,SAAS,EAAEY,SAAI,CAAC,OAAO,EAAE,oBAAoB,CAAE;AAAAC,MAAAA,QAAA,EAClFnB;KACI,~~CACP~~,~~eAAAiB~~,eAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEY,SAAI,CAAC,QAAQ,CAAE;AAC1BM,MAAAA,IAAI,EAAC,OAAO;AACZ,MAAA,iBAAA,EAAiBV,OAAQ;AAAA,MAAA,IACpBP,YAAY,GAAG;AAAE,QAAA,kBAAkB,EAAEQ;OAAe,GAAG,EAAE,CAAA;AAAAI,MAAAA,QAAA,gBAE9DC,cAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAC,8CAA8C;AAAAa,QAAAA,QAAA,EAC1DjB,gBAAgB,CAACuB,YAAY,GAAG;AAAEH,UAAAA,EAAE,EAAEN,UAAU;AAAEF,UAAAA;~~SAAS~~,CAAC,iBAC3DM,cAAA,CAACM,iCAAgB,EAAA;AACfJ,UAAAA,EAAE,EAAEN,UAAW;AACfF,UAAAA,OAAO,EAAEA,OAAQ;AACjBb,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GACfC;~~SAAiB~~;~~AAExB~~,OACE,~~CACL~~,~~eAAAkB~~,cAAA,CAACO,uBAAW,EAAA;AACVL,QAAAA,EAAE,EAAEV,OAAQ;AACZgB,QAAAA,aAAa,EAAEZ,UAAW;AAC1BZ,QAAAA,MAAM,EAAEA,MAAO;AACfH,QAAAA,QAAQ,EAAEA;AACV;AAAA;AACAQ,QAAAA,SAAS,EAAEA,SAAU;AACrBC,QAAAA,OAAO,EAAEA,OAAQ;AACjBmB,QAAAA,QAAQ,EAAExB,cAAe;AACzBM,QAAAA,aAAa,EAAEA;~~OAAc~~,~~CAE/B~~,~~eAAAS~~,cAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAEY,SAAI,CAAC,2BAA2B,EAAE,oCAAoC,CAAE;QAAAC,QAAA,eACtFC,cAAA,CAACU,eAAO,EAAA;UAACC,UAAU,EAAEC,OAAO,CAACxB,WAAW;~~SAAE~~;~~AAC5C~~,~~OAAK~~,~~CACP~~;AAAA,~~KAAK~~,~~CACL~~,~~eAAAY~~,cAAA,CAACa,4BAAe,EAAA;AAACC,MAAAA,OAAO,EAAE,KAAM;MAAAf,QAAA,EAC7BZ,YAAY,iBACXa,cAAA,CAAA,KAAA,EAAA;QAAKd,SAAS,EAAEY,SAAI,CAAC,4BAA4B,EAAEX,YAAY,IAAI,OAAO,CAAE;AAAAY,QAAAA,QAAA,eAC1EC,cAAA,CAACe,mBAAM,CAACC,GAAG,EAAA;AAETF,UAAAA,OAAO,EAAE;AAAEG,YAAAA,OAAO,EAAE,CAAC;AAAEC,YAAAA,MAAM,EAAE;WAAI;AACnCC,UAAAA,OAAO,EAAE;AACPF,YAAAA,OAAO,EAAE,CAAC;AACVC,YAAAA,MAAM,EAAE,MAAM;AACdE,YAAAA,UAAU,EAAE;AAAEC,cAAAA,KAAK,EAAE,IAAI;AAAEC,cAAAA,QAAQ,EAAE;~~AAAG~~;~~WACxC~~;AACFC,UAAAA,IAAI,EAAE;AAAEN,YAAAA,OAAO,EAAE,CAAC;AAAEC,YAAAA,MAAM,EAAE;WAAI;UAAAnB,QAAA,EAE/BZ,YAAY,CAACqC,SAAS,IAAIC,MAAM,CAACC,IAAI,CAACvC,YAAY,CAACqC,SAAS,CAAC,CAACG,MAAM,GAAG,CAAC,gBACvE3B,cAAA,CAAC4B,yBAAY,EAAA;AACX1B,YAAAA,EAAE,EAAEP,aAAc;YAClBkC,KAAK,EAAE1C,YAAY,CAAC0C,KAAM;YAC1BL,SAAS,EAAErC,YAAY,CAACqC,SAAU;YAAAzB,QAAA,EAEjCZ,YAAY,CAAC2C;AAAO,WACT,CAAC,gBAEf9B,cAAA,CAAC+B,YAAI,EAAA;YAAAhC,QAAA,EAAEZ,YAAY,CAAC2C;WAAc;AACnC,SAAA,EAnBInC,aAoBK;OACT;AACN,KACc,~~CACnB~~;AAAA,~~GAAK~~,CAAC;AAEV;;;;"}
1	+ {"version":3,"file":"ExpressiveMoneyInput.js","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../body';\nimport { Label } from '../label/Label';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport {\n type Props as CurrencySelectorProps,\n CurrencySelector,\n} from './currencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './amountInput/AmountInput';\nimport { Chevron } from './chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';\n\ntype AmountType = number \| null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n CurrencySelectorProps,\n 'addons' \| 'options' \| 'onChange' \| 'onOpen' \| 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n CustomCurrencySelectorInstanceType;\n\nexport type Props = {\n label?: ReactNode;\n currencySelector?: CurrencySelectorType;\n amount?: AmountType;\n /*\n The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n /\n currency: CurrencyType;\n inlinePrompt?: {\n sentiment?: InlinePromptProps['sentiment'];\n message: InlinePromptProps['children'];\n media?: InlinePromptProps['media'];\n };\n showChevron?: boolean;\n /\n If set, it auto-focuses the amount input upon component mount.<br />\n * ⚠️ Use with caution, as it may impact user experience and\n * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n /\n autoFocus?: boolean;\n /\n Dims the input to indicate a loading state. Does not disable it.\n /\n loading?: boolean;\n onAmountChange: (amount: AmountType) => void;\n onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/\n This component has been kindly contributed by our friends at the `Send` team 🎉.\n \n Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n \n While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n \n > ⚠️ Prerequisite: <br />The component depends on the\n * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * Make sure to add it to your project dependencies.\n */\nexport default function ExpressiveMoneyInput({\n label,\n currency,\n currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,\n amount,\n onAmountChange,\n className,\n inlinePrompt,\n showChevron,\n autoFocus,\n loading,\n onFocusChange,\n}: Props) {\n const inputId = useId();\n const labelId = useId();\n const customAlertId = useId();\n const currencyId = useId();\n\n return (\n <div className={clsx('wds-expressive-money-input', className)}>\n <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n {label}\n </Label>\n <div\n className={clsx('d-flex')}\n role=\"group\"\n aria-labelledby={labelId}\n {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n >\n <div className=\"wds-expressive-money-input-currency-selector\">\n {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n <CurrencySelector\n id={currencyId}\n labelId={labelId}\n currency={currency}\n {...currencySelector}\n />\n )}\n </div>\n <AmountInput\n id={inputId}\n describedById={currencyId}\n amount={amount}\n currency={currency}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n loading={loading}\n onChange={onAmountChange}\n onFocusChange={onFocusChange}\n />\n <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n <Chevron shouldShow={Boolean(showChevron)} />\n </div>\n </div>\n <AnimatePresence initial={false}>\n {inlinePrompt && (\n <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n <motion.div\n key={customAlertId}\n initial={{ opacity: 0, height: 0 }}\n animate={{\n opacity: 1,\n height: 'auto',\n transition: { delay: 0.75, duration: 0.3 },\n }}\n exit={{ opacity: 0, height: 0 }}\n >\n {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n <InlinePrompt\n id={customAlertId}\n media={inlinePrompt.media}\n sentiment={inlinePrompt.sentiment}\n >\n {inlinePrompt.message}\n </InlinePrompt>\n ) : (\n <Body>{inlinePrompt.message}</Body>\n )}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":"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"}

package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressiveMoneyInput.messages.js","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n currencySelectorSearchPlaceholder: {\n id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',\n defaultMessage: 'Type a currency / country',\n },\n\n currencySelectorSelectCurrency: {\n id: 'neptune.ExpressiveMoneyInput.currency.select.currency',\n defaultMessage: 'Select currency',\n },\n});\n"],"names":["defineMessages","currencySelectorSearchPlaceholder","id","currencySelectorSelectCurrency"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,iCAAiC,EAAE;IACjCC,EAAE,EAAA;GAEH;AAEDC,EAAAA,8BAA8B,EAAE;IAC9BD,EAAE,EAAA;~~AAEH~~;AACF,~~CAAA~~,CAAC;;;;"}
1	+ {"version":3,"file":"ExpressiveMoneyInput.messages.js","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n currencySelectorSearchPlaceholder: {\n id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',\n defaultMessage: 'Type a currency / country',\n },\n\n currencySelectorSelectCurrency: {\n id: 'neptune.ExpressiveMoneyInput.currency.select.currency',\n defaultMessage: 'Select currency',\n },\n});\n"],"names":["defineMessages","currencySelectorSearchPlaceholder","id","currencySelectorSelectCurrency"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,iCAAiC,EAAE;IACjCC,EAAE,EAAA;GAEH;AAEDC,EAAAA,8BAA8B,EAAE;IAC9BD,EAAE,EAAA;AAEJ;AACF,CAAC,CAAC;;;;"}

package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressiveMoneyInput.messages.mjs","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n currencySelectorSearchPlaceholder: {\n id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',\n defaultMessage: 'Type a currency / country',\n },\n\n currencySelectorSelectCurrency: {\n id: 'neptune.ExpressiveMoneyInput.currency.select.currency',\n defaultMessage: 'Select currency',\n },\n});\n"],"names":["defineMessages","currencySelectorSearchPlaceholder","id","currencySelectorSelectCurrency"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,iCAAiC,EAAE;IACjCC,EAAE,EAAA;GAEH;AAEDC,EAAAA,8BAA8B,EAAE;IAC9BD,EAAE,EAAA;~~AAEH~~;AACF,~~CAAA~~,CAAC;;;;"}
1	+ {"version":3,"file":"ExpressiveMoneyInput.messages.mjs","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n currencySelectorSearchPlaceholder: {\n id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',\n defaultMessage: 'Type a currency / country',\n },\n\n currencySelectorSelectCurrency: {\n id: 'neptune.ExpressiveMoneyInput.currency.select.currency',\n defaultMessage: 'Select currency',\n },\n});\n"],"names":["defineMessages","currencySelectorSearchPlaceholder","id","currencySelectorSelectCurrency"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,iCAAiC,EAAE;IACjCC,EAAE,EAAA;GAEH;AAEDC,EAAAA,8BAA8B,EAAE;IAC9BD,EAAE,EAAA;AAEJ;AACF,CAAC,CAAC;;;;"}

package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs CHANGED Viewed

@@ -9,6 +9,21 @@ import { Chevron } from './chevron/Chevron.mjs';
 import { InlinePrompt } from '../prompt/InlinePrompt/InlinePrompt.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
+/**
+ * This component has been kindly contributed by our friends at the `Send` team 🎉.
+ *
+ * Some patterns and implementation details used in this component may differ
+ * from what's commonly used in the Design System. The overall build and QA was managed
+ * by the contributing team directly, and such did not follow a typical DS lifecycle.
+ *
+ * While we house this component and will help facilitate its future iterations,
+ * direct contributions by consuming product teams are highly encouraged.
+ *
+ * > ⚠️ **Prerequisite:** <br />The component depends on the
+ * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been
+ * deliberately excluded from the Design System bundle and kept as an opt-in only.
+ * **Make sure to add it to your project dependencies.**
+ */
 function ExpressiveMoneyInput({
   label,
   currency,

package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpressiveMoneyInput.mjs","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../body';\nimport { Label } from '../label/Label';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport {\n type Props as CurrencySelectorProps,\n CurrencySelector,\n} from './currencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './amountInput/AmountInput';\nimport { Chevron } from './chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';\n\ntype AmountType = number \| null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n CurrencySelectorProps,\n 'addons' \| 'options' \| 'onChange' \| 'onOpen' \| 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n CustomCurrencySelectorInstanceType;\n\nexport type Props = {\n label?: ReactNode;\n currencySelector?: CurrencySelectorType;\n amount?: AmountType;\n /*\n The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n /\n currency: CurrencyType;\n inlinePrompt?: {\n sentiment?: InlinePromptProps['sentiment'];\n message: InlinePromptProps['children'];\n media?: InlinePromptProps['media'];\n };\n showChevron?: boolean;\n /\n If set, it auto-focuses the amount input upon component mount.<br />\n * ⚠️ Use with caution, as it may impact user experience and\n * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n /\n autoFocus?: boolean;\n /\n Dims the input to indicate a loading state. Does not disable it.\n /\n loading?: boolean;\n onAmountChange: (amount: AmountType) => void;\n onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/\n This component has been kindly contributed by our friends at the `Send` team 🎉.\n \n Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n \n While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n \n > ⚠️ Prerequisite: <br />The component depends on the\n * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * Make sure to add it to your project dependencies.\n */\nexport default function ExpressiveMoneyInput({\n label,\n currency,\n currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,\n amount,\n onAmountChange,\n className,\n inlinePrompt,\n showChevron,\n autoFocus,\n loading,\n onFocusChange,\n}: Props) {\n const inputId = useId();\n const labelId = useId();\n const customAlertId = useId();\n const currencyId = useId();\n\n return (\n <div className={clsx('wds-expressive-money-input', className)}>\n <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n {label}\n </Label>\n <div\n className={clsx('d-flex')}\n role=\"group\"\n aria-labelledby={labelId}\n {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n >\n <div className=\"wds-expressive-money-input-currency-selector\">\n {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n <CurrencySelector\n id={currencyId}\n labelId={labelId}\n currency={currency}\n {...currencySelector}\n />\n )}\n </div>\n <AmountInput\n id={inputId}\n describedById={currencyId}\n amount={amount}\n currency={currency}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n loading={loading}\n onChange={onAmountChange}\n onFocusChange={onFocusChange}\n />\n <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n <Chevron shouldShow={Boolean(showChevron)} />\n </div>\n </div>\n <AnimatePresence initial={false}>\n {inlinePrompt && (\n <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n <motion.div\n key={customAlertId}\n initial={{ opacity: 0, height: 0 }}\n animate={{\n opacity: 1,\n height: 'auto',\n transition: { delay: 0.75, duration: 0.3 },\n }}\n exit={{ opacity: 0, height: 0 }}\n >\n {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n <InlinePrompt\n id={customAlertId}\n media={inlinePrompt.media}\n sentiment={inlinePrompt.sentiment}\n >\n {inlinePrompt.message}\n </InlinePrompt>\n ) : (\n <Body>{inlinePrompt.message}</Body>\n )}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":";;;;;;;;;;;~~AAuEc~~,~~SAAUA~~,oBAAoBA,CAAC;EAC3CC,KAAK;EACLC,QAAQ;AACRC,EAAAA,gBAAgB,GAAG;AAAEC,IAAAA,OAAO,EAAE;GAA2C;EACzEC,MAAM;EACNC,cAAc;EACdC,SAAS;EACTC,YAAY;EACZC,WAAW;EACXC,SAAS;EACTC,OAAO;AACPC,EAAAA;~~AAAa~~,~~CACP~~,~~EAAA~~;~~AACN~~,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,OAAO,GAAGD,KAAK,EAAE;AACvB,EAAA,MAAME,aAAa,GAAGF,KAAK,EAAE;AAC7B,EAAA,MAAMG,UAAU,GAAGH,KAAK,EAAE;AAE1B,EAAA,oBACEI,IAAA,CAAA,KAAA,EAAA;AAAKX,IAAAA,SAAS,EAAEY,IAAI,CAAC,4BAA4B,EAAEZ,SAAS,CAAE;IAAAa,QAAA,EAAA,cAC5DC,GAAA,CAACC,cAAK,EAAA;AAACC,MAAAA,EAAE,EAAER,OAAQ;AAACS,MAAAA,OAAO,EAAEX,OAAQ;AAACN,MAAAA,SAAS,EAAEY,IAAI,CAAC,OAAO,EAAE,oBAAoB,CAAE;AAAAC,MAAAA,QAAA,EAClFnB;KACI,~~CACP~~,~~eAAAiB~~,IAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEY,IAAI,CAAC,QAAQ,CAAE;AAC1BM,MAAAA,IAAI,EAAC,OAAO;AACZ,MAAA,iBAAA,EAAiBV,OAAQ;AAAA,MAAA,IACpBP,YAAY,GAAG;AAAE,QAAA,kBAAkB,EAAEQ;OAAe,GAAG,EAAE,CAAA;AAAAI,MAAAA,QAAA,gBAE9DC,GAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAC,8CAA8C;AAAAa,QAAAA,QAAA,EAC1DjB,gBAAgB,CAACuB,YAAY,GAAG;AAAEH,UAAAA,EAAE,EAAEN,UAAU;AAAEF,UAAAA;~~SAAS~~,CAAC,iBAC3DM,GAAA,CAACM,gBAAgB,EAAA;AACfJ,UAAAA,EAAE,EAAEN,UAAW;AACfF,UAAAA,OAAO,EAAEA,OAAQ;AACjBb,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GACfC;~~SAAiB~~;~~AAExB~~,OACE,~~CACL~~,~~eAAAkB~~,GAAA,CAACO,WAAW,EAAA;AACVL,QAAAA,EAAE,EAAEV,OAAQ;AACZgB,QAAAA,aAAa,EAAEZ,UAAW;AAC1BZ,QAAAA,MAAM,EAAEA,MAAO;AACfH,QAAAA,QAAQ,EAAEA;AACV;AAAA;AACAQ,QAAAA,SAAS,EAAEA,SAAU;AACrBC,QAAAA,OAAO,EAAEA,OAAQ;AACjBmB,QAAAA,QAAQ,EAAExB,cAAe;AACzBM,QAAAA,aAAa,EAAEA;~~OAAc~~,~~CAE/B~~,~~eAAAS~~,GAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAEY,IAAI,CAAC,2BAA2B,EAAE,oCAAoC,CAAE;QAAAC,QAAA,eACtFC,GAAA,CAACU,OAAO,EAAA;UAACC,UAAU,EAAEC,OAAO,CAACxB,WAAW;~~SAAE~~;~~AAC5C~~,~~OAAK~~,~~CACP~~;AAAA,~~KAAK~~,~~CACL~~,~~eAAAY~~,GAAA,CAACa,eAAe,EAAA;AAACC,MAAAA,OAAO,EAAE,KAAM;MAAAf,QAAA,EAC7BZ,YAAY,iBACXa,GAAA,CAAA,KAAA,EAAA;QAAKd,SAAS,EAAEY,IAAI,CAAC,4BAA4B,EAAEX,YAAY,IAAI,OAAO,CAAE;AAAAY,QAAAA,QAAA,eAC1EC,GAAA,CAACe,MAAM,CAACC,GAAG,EAAA;AAETF,UAAAA,OAAO,EAAE;AAAEG,YAAAA,OAAO,EAAE,CAAC;AAAEC,YAAAA,MAAM,EAAE;WAAI;AACnCC,UAAAA,OAAO,EAAE;AACPF,YAAAA,OAAO,EAAE,CAAC;AACVC,YAAAA,MAAM,EAAE,MAAM;AACdE,YAAAA,UAAU,EAAE;AAAEC,cAAAA,KAAK,EAAE,IAAI;AAAEC,cAAAA,QAAQ,EAAE;~~AAAG~~;~~WACxC~~;AACFC,UAAAA,IAAI,EAAE;AAAEN,YAAAA,OAAO,EAAE,CAAC;AAAEC,YAAAA,MAAM,EAAE;WAAI;UAAAnB,QAAA,EAE/BZ,YAAY,CAACqC,SAAS,IAAIC,MAAM,CAACC,IAAI,CAACvC,YAAY,CAACqC,SAAS,CAAC,CAACG,MAAM,GAAG,CAAC,gBACvE3B,GAAA,CAAC4B,YAAY,EAAA;AACX1B,YAAAA,EAAE,EAAEP,aAAc;YAClBkC,KAAK,EAAE1C,YAAY,CAAC0C,KAAM;YAC1BL,SAAS,EAAErC,YAAY,CAACqC,SAAU;YAAAzB,QAAA,EAEjCZ,YAAY,CAAC2C;AAAO,WACT,CAAC,gBAEf9B,GAAA,CAAC+B,IAAI,EAAA;YAAAhC,QAAA,EAAEZ,YAAY,CAAC2C;WAAc;AACnC,SAAA,EAnBInC,aAoBK;OACT;AACN,KACc,~~CACnB~~;AAAA,~~GAAK~~,CAAC;AAEV;;;;"}
1	+ {"version":3,"file":"ExpressiveMoneyInput.mjs","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../body';\nimport { Label } from '../label/Label';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport {\n type Props as CurrencySelectorProps,\n CurrencySelector,\n} from './currencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './amountInput/AmountInput';\nimport { Chevron } from './chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';\n\ntype AmountType = number \| null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n CurrencySelectorProps,\n 'addons' \| 'options' \| 'onChange' \| 'onOpen' \| 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n CustomCurrencySelectorInstanceType;\n\nexport type Props = {\n label?: ReactNode;\n currencySelector?: CurrencySelectorType;\n amount?: AmountType;\n /*\n The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n /\n currency: CurrencyType;\n inlinePrompt?: {\n sentiment?: InlinePromptProps['sentiment'];\n message: InlinePromptProps['children'];\n media?: InlinePromptProps['media'];\n };\n showChevron?: boolean;\n /\n If set, it auto-focuses the amount input upon component mount.<br />\n * ⚠️ Use with caution, as it may impact user experience and\n * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n /\n autoFocus?: boolean;\n /\n Dims the input to indicate a loading state. Does not disable it.\n /\n loading?: boolean;\n onAmountChange: (amount: AmountType) => void;\n onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/\n This component has been kindly contributed by our friends at the `Send` team 🎉.\n \n Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n \n While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n \n > ⚠️ Prerequisite: <br />The component depends on the\n * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * Make sure to add it to your project dependencies.\n */\nexport default function ExpressiveMoneyInput({\n label,\n currency,\n currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,\n amount,\n onAmountChange,\n className,\n inlinePrompt,\n showChevron,\n autoFocus,\n loading,\n onFocusChange,\n}: Props) {\n const inputId = useId();\n const labelId = useId();\n const customAlertId = useId();\n const currencyId = useId();\n\n return (\n <div className={clsx('wds-expressive-money-input', className)}>\n <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n {label}\n </Label>\n <div\n className={clsx('d-flex')}\n role=\"group\"\n aria-labelledby={labelId}\n {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n >\n <div className=\"wds-expressive-money-input-currency-selector\">\n {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n <CurrencySelector\n id={currencyId}\n labelId={labelId}\n currency={currency}\n {...currencySelector}\n />\n )}\n </div>\n <AmountInput\n id={inputId}\n describedById={currencyId}\n amount={amount}\n currency={currency}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n loading={loading}\n onChange={onAmountChange}\n onFocusChange={onFocusChange}\n />\n <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n <Chevron shouldShow={Boolean(showChevron)} />\n </div>\n </div>\n <AnimatePresence initial={false}>\n {inlinePrompt && (\n <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n <motion.div\n key={customAlertId}\n initial={{ opacity: 0, height: 0 }}\n animate={{\n opacity: 1,\n height: 'auto',\n transition: { delay: 0.75, duration: 0.3 },\n }}\n exit={{ opacity: 0, height: 0 }}\n >\n {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n <InlinePrompt\n id={customAlertId}\n media={inlinePrompt.media}\n sentiment={inlinePrompt.sentiment}\n >\n {inlinePrompt.message}\n </InlinePrompt>\n ) : (\n <Body>{inlinePrompt.message}</Body>\n )}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":"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"}

package/build/expressiveMoneyInput/amountInput/AmountInput.js CHANGED Viewed

@@ -80,6 +80,7 @@ const AmountInput = ({
     }
     const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);
     const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);
     // if the user has entered a seperator to the end, formatting would delete it
     if (endsWithDecimalSeparator || endsWithGroupSeparator) {
       return false;
@@ -133,6 +134,7 @@ const AmountInput = ({
     if (!clipboardData) {
       return;
     }
     // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely
     const sanitisedValue = reformatValue(clipboardData);
     handleChange(sanitisedValue);
@@ -151,6 +153,7 @@ const AmountInput = ({
     } = input;
     if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {
       const charBeforeCursor = currentValue[selectionStart - 1];
       // if the user deletes a thousands separator, remove the digit before it as well
       if (charBeforeCursor === groupSeparator) {
         e.preventDefault();
@@ -199,6 +202,7 @@ const AmountInput = ({
     if (!decimalSeparator || !value) {
       return null;
     }
     // if the user has typed a decimal separator, show the full decimal part as a placeholder
     // this returns a string even if there is no content, typing should replace the placeholder immediately without animation
     // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence
@@ -208,6 +212,7 @@ const AmountInput = ({
       // show only the characters that are not already displayed by the input
       return fullDecimalPart?.slice(decimalPart?.length);
     }
     // in unfocused state, always show the full decimal part unless the user has already entered decimals
     if (!focus && !decimalMode) {
       const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);

package/build/expressiveMoneyInput/amountInput/AmountInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountInput.js","sources":["../../../src/expressiveMoneyInput/amountInput/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { AnimatedNumber } from '../animatedNumber/AnimatedNumber';\nimport { useFocus } from '../hooks/useFocus';\nimport { useInputStyle } from '../hooks/useInputStyle';\nimport {\n getDecimalCount,\n getDecimalSeparator,\n getEnteredDecimalsCount,\n getFormattedString,\n getGroupSeparator,\n getUnformattedNumber,\n isAllowedInputKey,\n isInputPossiblyOverflowing,\n} from './utils';\n\ntype Props = {\n id: string;\n describedById?: string;\n amount?: number \| null;\n currency: string;\n autoFocus?: boolean;\n onChange: (amount: number \| null) => void;\n onFocusChange?: (focused: boolean) => void;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const AmountInput = ({\n id,\n describedById,\n amount,\n currency,\n autoFocus,\n onChange,\n onFocusChange,\n loading,\n}: Props) => {\n const intl = useIntl();\n const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n const [value, setValue] = useState<string>(\n amount\n ? getFormattedString({\n value: amount,\n currency,\n locale: intl.locale,\n })\n : '',\n );\n const numericValue = useMemo(() => {\n return getUnformattedNumber({\n value,\n currency,\n locale: intl.locale,\n });\n }, [value, currency, intl.locale]);\n\n const valueWithFullDecimals = useMemo(() => {\n return getFormattedString({\n value: numericValue ?? 0,\n currency,\n locale: intl.locale,\n alwaysShowDecimals: true,\n });\n }, [numericValue, currency, intl.locale]);\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoFocus) {\n ref.current?.focus();\n }\n }, []);\n\n const placeholder = getPlaceholder(currency, intl.locale);\n const groupSeparator = getGroupSeparator(currency, intl.locale);\n const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n const decimalPart = getDecimalPart(value, decimalSeparator);\n const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n useEffect(() => {\n if (!focus) {\n setValue(\n amount\n ? getFormattedString({\n value: amount,\n currency,\n locale: intl.locale,\n })\n : '',\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [amount]);\n\n useEffect(() => {\n onFocusChange?.(visualFocus);\n }, [visualFocus]);\n\n const shouldReformatAfterUserInput = (newValue: string) => {\n // don't reformat if formatting would wipe out user's input\n if (reformatValue(newValue) === '') {\n return false;\n }\n\n const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n // if the user has entered a seperator to the end, formatting would delete it\n if (endsWithDecimalSeparator \|\| endsWithGroupSeparator) {\n return false;\n }\n\n const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n if (containsDecimalSeparator) {\n const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n // don't reformat until user has entered all the allowed decimals\n // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n if (enteredDecimalsCount < maxDecimalCount) {\n return false;\n }\n }\n\n return true;\n };\n\n const reformatValue = (newValue: string) => {\n const unformattedValue = getUnformattedNumber({\n value: newValue,\n currency,\n locale: intl.locale,\n });\n const formattedValue = unformattedValue\n ? getFormattedString({\n value: unformattedValue,\n currency,\n locale: intl.locale,\n })\n : '';\n return formattedValue;\n };\n\n const handleChange = (newValue: string) => {\n const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n const newFormattedString = shouldReformatAfterUserInput(newValue)\n ? reformatValue(newValue)\n : newValue;\n setValue(newFormattedString);\n\n const newNumber = getUnformattedNumber({\n value: newFormattedString,\n currency,\n locale: intl.locale,\n });\n\n if (newNumber !== numericValue) {\n if (numericValue \|\| newNumber) {\n onChange(newNumber);\n }\n }\n\n const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n requestAnimationFrame(() => {\n ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n });\n };\n\n const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n\n const clipboardData = e.clipboardData?.getData('text/plain');\n if (!clipboardData) {\n return;\n }\n\n // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n const sanitisedValue = reformatValue(clipboardData);\n\n handleChange(sanitisedValue);\n };\n\n const handleBlur = () => {\n setFocus(false);\n setValue(reformatValue(value));\n };\n\n const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n const input = e.target as HTMLInputElement;\n // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n const { value: currentValue, selectionStart, selectionEnd } = input;\n\n if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n const charBeforeCursor = currentValue[selectionStart - 1];\n\n // if the user deletes a thousands separator, remove the digit before it as well\n if (charBeforeCursor === groupSeparator) {\n e.preventDefault();\n const beforeCursor = currentValue.slice(0, selectionStart - 2);\n const afterCursor = currentValue.slice(selectionStart);\n const newValue = `${beforeCursor}${afterCursor}`;\n input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n handleChange(newValue);\n }\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n setFocus(true);\n if (!isAllowedInputKey(e)) {\n e.preventDefault();\n }\n\n if (e.key === 'Backspace') {\n handleBackspace(e);\n }\n };\n\n const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n const hasMultipleDecimalSeparators =\n decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n if (hasMultipleDecimalSeparators) {\n return false;\n }\n\n const newNumericValue = getUnformattedNumber({\n value: e.target.value,\n currency,\n locale: intl.locale,\n });\n const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n if (String(newNumericValue).length > maxLength) {\n return false;\n }\n\n return true;\n };\n\n const addonContent = useMemo((): string \| null \| undefined => {\n // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n if (isInputPossiblyOverflowing({ ref, value })) {\n return null;\n }\n if (!decimalSeparator \|\| !value) {\n return null;\n }\n\n // if the user has typed a decimal separator, show the full decimal part as a placeholder\n // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n if (focus && decimalMode) {\n // reuse getDecimalPart\n const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n // show only the characters that are not already displayed by the input\n return fullDecimalPart?.slice(decimalPart?.length);\n }\n\n // in unfocused state, always show the full decimal part unless the user has already entered decimals\n if (!focus && !decimalMode) {\n const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n return decimalSeparator + decimalPlaceholder;\n }\n\n return null;\n }, [\n decimalMode,\n decimalPart?.length,\n decimalSeparator,\n focus,\n placeholder,\n value,\n valueWithFullDecimals,\n ]);\n\n const style = useInputStyle({\n // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n value: addonContent ? valueWithFullDecimals : value,\n focus: visualFocus,\n inputElement: ref.current,\n loading,\n });\n\n return (\n <div className=\"wds-amount-input-container\">\n <div\n className={clsx('wds-amount-input-input-container', 'np-text-display-large')}\n style={style}\n >\n <input\n ref={ref}\n className=\"wds-amount-input-input\"\n id={id}\n autoComplete=\"off\"\n inputMode=\"decimal\"\n value={value}\n type=\"text\"\n placeholder={placeholder}\n aria-describedby={describedById}\n /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n size={1}\n onChange={(e) => {\n if (isAllowedInput(e)) {\n handleChange(e.target.value);\n }\n }}\n onBlurCapture={() => handleBlur()}\n onPaste={(e) => handlePaste(e)}\n onFocus={() => {\n setFocus(true);\n }}\n onBlur={() => {\n setTimeout(() => setVisualFocus(false), 30);\n }}\n onKeyDown={(e) => handleKeyDown(e)}\n />\n <AnimatePresence initial={false}>\n {addonContent !== null && (\n <AnimatedNumber\n className={clsx(\n 'wds-amount-input-placeholder',\n visualFocus && 'wds-amount-input-placeholder-focus',\n )}\n onClick={() => ref.current?.focus()}\n >\n {addonContent}\n </AnimatedNumber>\n )}\n </AnimatePresence>\n </div>\n </div>\n );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string \| null) => {\n if (!value \|\| !decimalSeparator) {\n return undefined;\n }\n\n const [_, decimalPart] = value.split(decimalSeparator);\n return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useRef","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","_jsx","className","children","_jsxs","clsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","onClick","formatAmount","undefined"],"mappings":"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"}
1	+ {"version":3,"file":"AmountInput.js","sources":["../../../src/expressiveMoneyInput/amountInput/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { AnimatedNumber } from '../animatedNumber/AnimatedNumber';\nimport { useFocus } from '../hooks/useFocus';\nimport { useInputStyle } from '../hooks/useInputStyle';\nimport {\n getDecimalCount,\n getDecimalSeparator,\n getEnteredDecimalsCount,\n getFormattedString,\n getGroupSeparator,\n getUnformattedNumber,\n isAllowedInputKey,\n isInputPossiblyOverflowing,\n} from './utils';\n\ntype Props = {\n id: string;\n describedById?: string;\n amount?: number \| null;\n currency: string;\n autoFocus?: boolean;\n onChange: (amount: number \| null) => void;\n onFocusChange?: (focused: boolean) => void;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const AmountInput = ({\n id,\n describedById,\n amount,\n currency,\n autoFocus,\n onChange,\n onFocusChange,\n loading,\n}: Props) => {\n const intl = useIntl();\n const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n const [value, setValue] = useState<string>(\n amount\n ? getFormattedString({\n value: amount,\n currency,\n locale: intl.locale,\n })\n : '',\n );\n const numericValue = useMemo(() => {\n return getUnformattedNumber({\n value,\n currency,\n locale: intl.locale,\n });\n }, [value, currency, intl.locale]);\n\n const valueWithFullDecimals = useMemo(() => {\n return getFormattedString({\n value: numericValue ?? 0,\n currency,\n locale: intl.locale,\n alwaysShowDecimals: true,\n });\n }, [numericValue, currency, intl.locale]);\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoFocus) {\n ref.current?.focus();\n }\n }, []);\n\n const placeholder = getPlaceholder(currency, intl.locale);\n const groupSeparator = getGroupSeparator(currency, intl.locale);\n const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n const decimalPart = getDecimalPart(value, decimalSeparator);\n const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n useEffect(() => {\n if (!focus) {\n setValue(\n amount\n ? getFormattedString({\n value: amount,\n currency,\n locale: intl.locale,\n })\n : '',\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [amount]);\n\n useEffect(() => {\n onFocusChange?.(visualFocus);\n }, [visualFocus]);\n\n const shouldReformatAfterUserInput = (newValue: string) => {\n // don't reformat if formatting would wipe out user's input\n if (reformatValue(newValue) === '') {\n return false;\n }\n\n const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n // if the user has entered a seperator to the end, formatting would delete it\n if (endsWithDecimalSeparator \|\| endsWithGroupSeparator) {\n return false;\n }\n\n const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n if (containsDecimalSeparator) {\n const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n // don't reformat until user has entered all the allowed decimals\n // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n if (enteredDecimalsCount < maxDecimalCount) {\n return false;\n }\n }\n\n return true;\n };\n\n const reformatValue = (newValue: string) => {\n const unformattedValue = getUnformattedNumber({\n value: newValue,\n currency,\n locale: intl.locale,\n });\n const formattedValue = unformattedValue\n ? getFormattedString({\n value: unformattedValue,\n currency,\n locale: intl.locale,\n })\n : '';\n return formattedValue;\n };\n\n const handleChange = (newValue: string) => {\n const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n const newFormattedString = shouldReformatAfterUserInput(newValue)\n ? reformatValue(newValue)\n : newValue;\n setValue(newFormattedString);\n\n const newNumber = getUnformattedNumber({\n value: newFormattedString,\n currency,\n locale: intl.locale,\n });\n\n if (newNumber !== numericValue) {\n if (numericValue \|\| newNumber) {\n onChange(newNumber);\n }\n }\n\n const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n requestAnimationFrame(() => {\n ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n });\n };\n\n const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n\n const clipboardData = e.clipboardData?.getData('text/plain');\n if (!clipboardData) {\n return;\n }\n\n // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n const sanitisedValue = reformatValue(clipboardData);\n\n handleChange(sanitisedValue);\n };\n\n const handleBlur = () => {\n setFocus(false);\n setValue(reformatValue(value));\n };\n\n const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n const input = e.target as HTMLInputElement;\n // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n const { value: currentValue, selectionStart, selectionEnd } = input;\n\n if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n const charBeforeCursor = currentValue[selectionStart - 1];\n\n // if the user deletes a thousands separator, remove the digit before it as well\n if (charBeforeCursor === groupSeparator) {\n e.preventDefault();\n const beforeCursor = currentValue.slice(0, selectionStart - 2);\n const afterCursor = currentValue.slice(selectionStart);\n const newValue = `${beforeCursor}${afterCursor}`;\n input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n handleChange(newValue);\n }\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n setFocus(true);\n if (!isAllowedInputKey(e)) {\n e.preventDefault();\n }\n\n if (e.key === 'Backspace') {\n handleBackspace(e);\n }\n };\n\n const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n const hasMultipleDecimalSeparators =\n decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n if (hasMultipleDecimalSeparators) {\n return false;\n }\n\n const newNumericValue = getUnformattedNumber({\n value: e.target.value,\n currency,\n locale: intl.locale,\n });\n const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n if (String(newNumericValue).length > maxLength) {\n return false;\n }\n\n return true;\n };\n\n const addonContent = useMemo((): string \| null \| undefined => {\n // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n if (isInputPossiblyOverflowing({ ref, value })) {\n return null;\n }\n if (!decimalSeparator \|\| !value) {\n return null;\n }\n\n // if the user has typed a decimal separator, show the full decimal part as a placeholder\n // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n if (focus && decimalMode) {\n // reuse getDecimalPart\n const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n // show only the characters that are not already displayed by the input\n return fullDecimalPart?.slice(decimalPart?.length);\n }\n\n // in unfocused state, always show the full decimal part unless the user has already entered decimals\n if (!focus && !decimalMode) {\n const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n return decimalSeparator + decimalPlaceholder;\n }\n\n return null;\n }, [\n decimalMode,\n decimalPart?.length,\n decimalSeparator,\n focus,\n placeholder,\n value,\n valueWithFullDecimals,\n ]);\n\n const style = useInputStyle({\n // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n value: addonContent ? valueWithFullDecimals : value,\n focus: visualFocus,\n inputElement: ref.current,\n loading,\n });\n\n return (\n <div className=\"wds-amount-input-container\">\n <div\n className={clsx('wds-amount-input-input-container', 'np-text-display-large')}\n style={style}\n >\n <input\n ref={ref}\n className=\"wds-amount-input-input\"\n id={id}\n autoComplete=\"off\"\n inputMode=\"decimal\"\n value={value}\n type=\"text\"\n placeholder={placeholder}\n aria-describedby={describedById}\n /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n size={1}\n onChange={(e) => {\n if (isAllowedInput(e)) {\n handleChange(e.target.value);\n }\n }}\n onBlurCapture={() => handleBlur()}\n onPaste={(e) => handlePaste(e)}\n onFocus={() => {\n setFocus(true);\n }}\n onBlur={() => {\n setTimeout(() => setVisualFocus(false), 30);\n }}\n onKeyDown={(e) => handleKeyDown(e)}\n />\n <AnimatePresence initial={false}>\n {addonContent !== null && (\n <AnimatedNumber\n className={clsx(\n 'wds-amount-input-placeholder',\n visualFocus && 'wds-amount-input-placeholder-focus',\n )}\n onClick={() => ref.current?.focus()}\n >\n {addonContent}\n </AnimatedNumber>\n )}\n </AnimatePresence>\n </div>\n </div>\n );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string \| null) => {\n if (!value \|\| !decimalSeparator) {\n return undefined;\n }\n\n const [_, decimalPart] = value.split(decimalSeparator);\n return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useRef","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","_jsx","className","children","_jsxs","clsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","onClick","formatAmount","undefined"],"mappings":"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"}