npm - @transferwise/components - Versions diffs - 0.0.0-experimental-8a15907 → 0.0.0-experimental-118c6ed - Mend

@transferwise/components 0.0.0-experimental-8a15907 → 0.0.0-experimental-118c6ed

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 (502) hide show

package/build/flowNavigation/FlowNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n activeStep?: number;\n avatar?: React.ReactNode;\n logo?: React.ReactNode;\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show /\n onClose?: () => void;\n /* Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens /\n onGoBack?: () => void;\n /* Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA4BMA~~,~~MAAAA~~,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,gBAAGC,cAAA,CAACC,YAAI,~~IAAG~~,~~CAAA~~;AACfC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;AACRC,EAAAA;AAAK,CACe,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,MAAMC,WAAW,GAAGL,OAAO,IAAI,IAAI,iBAAIH,cAAA,CAACS,uBAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAER;AAAQ,IAAG;AAElF,EAAA,MAAMS,QAAQ,GAAGC,2BAAa,CAACC,qBAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,qBAAU,CAACG,KAAK,CAAC;AAEhD,EAAA,MAAMC,SAAS,GAAGhB,IAAI,GAAG,IAAI,GAAGJ,MAAM;EAEtC,MAAMqB,aAAa,GAAGf,QAAQ,IAAI,IAAI,IAAIP,UAAU,GAAG,CAAC;AAExD,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEoB,IAAAA,SAAS,EAAEC,SAAI,CAAC,2EAA2E,EAAE;AAC3F,MAAA,mCAAmC,EAAE,CAACnB;AACvC,KAAA,CAAE;IAAAoB,QAAA,eAEHtB,cAAA,CAACuB,kBAAU,EAAA;MACTH,SAAS,EAAEC,SAAI,CACb,mCAAmC,EACnCT,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;QACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,QAAA,wBAAwB,EAAEA,QAAQ;AAClC,QAAA,wBAAwB,EAAEI;AAC3B,OAAA,CACL;MACFQ,WAAW,eACTC,eAAA,CAAAC,mBAAA,EAAA;QAAAJ,QAAA,EAAA,CACG,CAACV,QAAQ,IAAIO,aAAa,gBACzBnB,cAAA,CAAC2B,kBAAU,EAAA;AACTjB,UAAAA,IAAI,EAAE,EAAG;AACTkB,UAAAA,QAAQ,EAAC,UAAU;AACnBC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAYvB,IAAI,CAACwB,aAAa,CAACC,+BAAQ,CAACC,IAAI,CAAE;AAC9CrB,UAAAA,OAAO,EAAEP,QAAS;AAAAkB,UAAAA,QAAA,eAElBtB,cAAA,CAACiC,eAAS,~~EACZ~~,EAAA;~~SAAY~~,CAAC,gBAEbjC,cAAA,CAAA,KAAA,EAAA;AAAKoB,UAAAA,SAAS,EAAC,sBAAsB;AAAAE,UAAAA,QAAA,EAAEvB;SAAU,CAClD,EACA,CAACa,QAAQ,IAAI,CAACV,IAAI,iBACjBF,cAAA,CAACkC,qBAAa,EAAA;AAACd,UAAAA,SAAS,EAAC,OAAO;AAACf,UAAAA,KAAK,EAAEA,KAAM;AAAC8B,UAAAA,WAAW,EAAEtC;AAAW,~~SAAG~~,~~CAC3E~~;AAAA,~~OAEL~~,~~CAAC~~;AACDuC,MAAAA,YAAY,eACVX,eAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,iFAAiF;AAAAE,QAAAA,QAAA,GAC7FJ,SAAS,EACTA,SAAS,IAAIV,WAAW,iBAAIR,cAAA,CAAA,MAAA,EAAA;AAAMoB,UAAAA,SAAS,EAAC;SAAO,CAAG,EACtDZ,WAAW;AAAA,OACT,CACN;AACD6B,MAAAA,aAAa,EACX,CAACnC,IAAI,iBACHF,cAAA,CAACsC,eAAO,EAAA;AACNzC,QAAAA,UAAU,EAAEA,UAAW;AACvBQ,QAAAA,KAAK,EAAEA,KAAM;QACbe,SAAS,EAAEC,SAAI,CAAC,6BAA6B;AAAE,OAAA,CAGpD;MACDkB,MAAM,EAAE,CAACvB,QAAQ,GAAGwB,cAAM,CAACC,QAAQ,GAAGD,cAAM,CAACE;~~KAEjD~~;~~AAAA~~,GAAK,CAAC;AAEV;;;;"}
1	+ {"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n activeStep?: number;\n avatar?: React.ReactNode;\n logo?: React.ReactNode;\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show /\n onClose?: () => void;\n /* Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens /\n onGoBack?: () => void;\n /* Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAMA,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,gBAAGC,cAAA,CAACC,YAAI,IAAA,CAAG;AACfC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;AACRC,EAAAA;AAAK,CACe,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,MAAMC,WAAW,GAAGL,OAAO,IAAI,IAAI,iBAAIH,cAAA,CAACS,uBAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAER;AAAQ,IAAG;AAElF,EAAA,MAAMS,QAAQ,GAAGC,2BAAa,CAACC,qBAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,qBAAU,CAACG,KAAK,CAAC;AAEhD,EAAA,MAAMC,SAAS,GAAGhB,IAAI,GAAG,IAAI,GAAGJ,MAAM;EAEtC,MAAMqB,aAAa,GAAGf,QAAQ,IAAI,IAAI,IAAIP,UAAU,GAAG,CAAC;AAExD,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEoB,IAAAA,SAAS,EAAEC,SAAI,CAAC,2EAA2E,EAAE;AAC3F,MAAA,mCAAmC,EAAE,CAACnB;AACvC,KAAA,CAAE;IAAAoB,QAAA,eAEHtB,cAAA,CAACuB,kBAAU,EAAA;MACTH,SAAS,EAAEC,SAAI,CACb,mCAAmC,EACnCT,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;QACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,QAAA,wBAAwB,EAAEA,QAAQ;AAClC,QAAA,wBAAwB,EAAEI;AAC3B,OAAA,CACL;MACFQ,WAAW,eACTC,eAAA,CAAAC,mBAAA,EAAA;QAAAJ,QAAA,EAAA,CACG,CAACV,QAAQ,IAAIO,aAAa,gBACzBnB,cAAA,CAAC2B,kBAAU,EAAA;AACTjB,UAAAA,IAAI,EAAE,EAAG;AACTkB,UAAAA,QAAQ,EAAC,UAAU;AACnBC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAYvB,IAAI,CAACwB,aAAa,CAACC,+BAAQ,CAACC,IAAI,CAAE;AAC9CrB,UAAAA,OAAO,EAAEP,QAAS;AAAAkB,UAAAA,QAAA,eAElBtB,cAAA,CAACiC,eAAS,EAAA,EAAA;SACA,CAAC,gBAEbjC,cAAA,CAAA,KAAA,EAAA;AAAKoB,UAAAA,SAAS,EAAC,sBAAsB;AAAAE,UAAAA,QAAA,EAAEvB;SAAU,CAClD,EACA,CAACa,QAAQ,IAAI,CAACV,IAAI,iBACjBF,cAAA,CAACkC,qBAAa,EAAA;AAACd,UAAAA,SAAS,EAAC,OAAO;AAACf,UAAAA,KAAK,EAAEA,KAAM;AAAC8B,UAAAA,WAAW,EAAEtC;AAAW,SAAA,CACxE;AAAA,OACH,CACD;AACDuC,MAAAA,YAAY,eACVX,eAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,iFAAiF;AAAAE,QAAAA,QAAA,GAC7FJ,SAAS,EACTA,SAAS,IAAIV,WAAW,iBAAIR,cAAA,CAAA,MAAA,EAAA;AAAMoB,UAAAA,SAAS,EAAC;SAAO,CAAG,EACtDZ,WAAW;AAAA,OACT,CACN;AACD6B,MAAAA,aAAa,EACX,CAACnC,IAAI,iBACHF,cAAA,CAACsC,eAAO,EAAA;AACNzC,QAAAA,UAAU,EAAEA,UAAW;AACvBQ,QAAAA,KAAK,EAAEA,KAAM;QACbe,SAAS,EAAEC,SAAI,CAAC,6BAA6B;AAAE,OAAA,CAGpD;MACDkB,MAAM,EAAE,CAACvB,QAAQ,GAAGwB,cAAM,CAACC,QAAQ,GAAGD,cAAM,CAACE;KAAW;AAE5D,GAAK,CAAC;AAEV;;;;"}

package/build/flowNavigation/FlowNavigation.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n activeStep?: number;\n avatar?: React.ReactNode;\n logo?: React.ReactNode;\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show /\n onClose?: () => void;\n /* Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens /\n onGoBack?: () => void;\n /* Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA4BMA~~,~~MAAAA~~,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,gBAAGC,GAAA,CAACC,IAAI,~~IAAG~~,~~CAAA~~;AACfC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;AACRC,EAAAA;AAAK,CACe,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,MAAMC,WAAW,GAAGL,OAAO,IAAI,IAAI,iBAAIH,GAAA,CAACS,WAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAER;AAAQ,IAAG;AAElF,EAAA,MAAMS,QAAQ,GAAGC,aAAa,CAACC,UAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,aAAa,CAACC,UAAU,CAACG,KAAK,CAAC;AAEhD,EAAA,MAAMC,SAAS,GAAGhB,IAAI,GAAG,IAAI,GAAGJ,MAAM;EAEtC,MAAMqB,aAAa,GAAGf,QAAQ,IAAI,IAAI,IAAIP,UAAU,GAAG,CAAC;AAExD,EAAA,oBACEG,GAAA,CAAA,KAAA,EAAA;AACEoB,IAAAA,SAAS,EAAEC,IAAI,CAAC,2EAA2E,EAAE;AAC3F,MAAA,mCAAmC,EAAE,CAACnB;AACvC,KAAA,CAAE;IAAAoB,QAAA,eAEHtB,GAAA,CAACuB,UAAU,EAAA;MACTH,SAAS,EAAEC,IAAI,CACb,mCAAmC,EACnCT,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;QACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,QAAA,wBAAwB,EAAEA,QAAQ;AAClC,QAAA,wBAAwB,EAAEI;AAC3B,OAAA,CACL;MACFQ,WAAW,eACTC,IAAA,CAAAC,QAAA,EAAA;QAAAJ,QAAA,EAAA,CACG,CAACV,QAAQ,IAAIO,aAAa,gBACzBnB,GAAA,CAAC2B,UAAU,EAAA;AACTjB,UAAAA,IAAI,EAAE,EAAG;AACTkB,UAAAA,QAAQ,EAAC,UAAU;AACnBC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAYvB,IAAI,CAACwB,aAAa,CAACC,QAAQ,CAACC,IAAI,CAAE;AAC9CrB,UAAAA,OAAO,EAAEP,QAAS;AAAAkB,UAAAA,QAAA,eAElBtB,GAAA,CAACiC,SAAS,~~EACZ~~,EAAA;~~SAAY~~,CAAC,gBAEbjC,GAAA,CAAA,KAAA,EAAA;AAAKoB,UAAAA,SAAS,EAAC,sBAAsB;AAAAE,UAAAA,QAAA,EAAEvB;SAAU,CAClD,EACA,CAACa,QAAQ,IAAI,CAACV,IAAI,iBACjBF,GAAA,CAACkC,aAAa,EAAA;AAACd,UAAAA,SAAS,EAAC,OAAO;AAACf,UAAAA,KAAK,EAAEA,KAAM;AAAC8B,UAAAA,WAAW,EAAEtC;AAAW,~~SAAG~~,~~CAC3E~~;AAAA,~~OAEL~~,~~CAAC~~;AACDuC,MAAAA,YAAY,eACVX,IAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,iFAAiF;AAAAE,QAAAA,QAAA,GAC7FJ,SAAS,EACTA,SAAS,IAAIV,WAAW,iBAAIR,GAAA,CAAA,MAAA,EAAA;AAAMoB,UAAAA,SAAS,EAAC;SAAO,CAAG,EACtDZ,WAAW;AAAA,OACT,CACN;AACD6B,MAAAA,aAAa,EACX,CAACnC,IAAI,iBACHF,GAAA,CAACsC,OAAO,EAAA;AACNzC,QAAAA,UAAU,EAAEA,UAAW;AACvBQ,QAAAA,KAAK,EAAEA,KAAM;QACbe,SAAS,EAAEC,IAAI,CAAC,6BAA6B;AAAE,OAAA,CAGpD;MACDkB,MAAM,EAAE,CAACvB,QAAQ,GAAGwB,MAAM,CAACC,QAAQ,GAAGD,MAAM,CAACE;~~KAEjD~~;~~AAAA~~,GAAK,CAAC;AAEV;;;;"}
1	+ {"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n activeStep?: number;\n avatar?: React.ReactNode;\n logo?: React.ReactNode;\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show /\n onClose?: () => void;\n /* Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens /\n onGoBack?: () => void;\n /* Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnimatedLabel.js","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../legacylistItem';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":";;;;;;;;;;;;;;~~AAgBMA~~,~~MAAAA~~,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;AAAEC,EAAAA;~~AAA2B~~,~~CAAA~~,KAAI;AAC9E,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;EACvB,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEjD,SAASC,gBAAgBA,CAACC,OAAwB,EAAA;AAChD,IAAA,OAAO,MAAK;MACVH,YAAY,CAAC,KAAK,CAAC;AACnBG,MAAAA,OAAO,IAAI;~~KACZ~~;AACH;EAEA,oBACEC,cAAA,CAACC,mCAAiB,EAAA;AAACC,IAAAA,IAAI,EAAEP,SAAU;AAAAQ,IAAAA,QAAA,eACjCH,cAAA,CAACI,kCAAgB,CAACC,QAAQ,EAAA;MAAAF,QAAA,EACtBG,SAAS,IAAI;QACb,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAL,UAAAA,QAAA,gBACEH,cAAA,CAAA,QAAA,EAAA;AACES,YAAAA,IAAI,EAAC,QAAQ;AACbC,YAAAA,EAAE,EAAEjB,OAAQ;AACZ,YAAA,eAAA,EAAc,MAAM;AACpB,YAAA,eAAA,EAAea,SAAU;AACzB,YAAA,eAAA,EAAeX,SAAU;YACzBJ,SAAS,EAAEoB,SAAI,CACb,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EACzBpB,SAAS,CACT;AACFQ,YAAAA,OAAO,EAAEA,MAAMH,YAAY,CAAC,IAAI,CAAE;AAAAO,YAAAA,QAAA,EAEjCX,KAAK,CAACoB,GAAG,CAAC,CAAC;AAAEC,cAAAA;aAAO,EAAEC,KAAK,KAAI;AAC9B,cAAA,MAAMC,aAAa,GAAGzB,WAAW,KAAKwB,KAAK;AAC3C,cAAA,MAAME,aAAa,GAAGF,KAAK,GAAG,CAAC;AAC/B,cAAA,oBACEP,eAAA,CAAA,KAAA,EAAA;AAEE,gBAAA,aAAA,EAAa,CAACQ,aAAc;gBAC5BxB,SAAS,EAAEoB,SAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE;AACvE,kBAAA,yCAAyC,EAAEI;AAC5C,iBAAA,CAAE;gBAAAZ,QAAA,EAAA,CAEFU,KAAK,EAAE,GAAA,eAAAb,cAAA,CAACiB,iBAAW,EAAA,~~EACtB~~,~~CAAA~~;AAAA,eAAA,EAPOD,aAOF,CAAC;~~aAET~~;AAAC,WACI,CACR,eAAAhB,cAAA,CAACkB,mBAAW,EAAA;AACVC,YAAAA,IAAI,EAAC,MAAM;AACX,YAAA,iBAAA,EAAiB1B,OAAQ;AACzBS,YAAAA,IAAI,EAAEP,SAAU;AAChByB,YAAAA,OAAO,EAAEA,MAAMxB,YAAY,CAAC,KAAK,CAAE;YAAAO,QAAA,eAEnCH,cAAA,CAACqB,SAAI,EAAA;AAAC9B,cAAAA,SAAS,EAAC,aAAa;cAAAY,QAAA,EAC1BX,KAAK,CAACoB,GAAG,CAAC,CAACU,IAAI,EAAER,KAAK,KAAI;AACzB,gBAAA,MAAMC,aAAa,GAAGzB,WAAW,KAAKwB,KAAK;AAC3C,gBAAA,MAAMS,UAAU,GAAGjC,WAAW,GAAGwB,KAAK;AACtC,gBAAA,MAAMU,MAAM,GAAG,~~CAAQV~~,~~KAAAA~~,~~EAAAA~~,KAAK,CAAE~~,CAAA~~;gBAC9B,oBACEd,cAAA,CAACyB,cAAM,EAAA;AAELf,kBAAAA,EAAE,EAAEc,MAAO;AACXE,kBAAAA,EAAE,EAAC,IAAI;AACPP,kBAAAA,IAAI,EAAC,UAAU;AACfQ,kBAAAA,QAAQ,EAAE,KAAM;kBAChBpC,SAAS,EAAEoB,SAAI,CAAC,0BAA0B,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AACrEiB,oBAAAA,SAAS,EAAE,CAACL;AACb,mBAAA,CAAE;kBACHM,KAAK,EAAEP,IAAI,CAACT,KAAM;kBAClBiB,OAAO,EAAER,IAAI,CAACS,UAAW;AACzBC,kBAAAA,MAAM,EAAEjB,aAAa,gBAAGf,cAAA,CAACiC,WAAK,EAAA;AAACC,oBAAAA,IAAI,EAAE;oBAAM,GAAG,IAAK;AACnD,kBAAA,cAAA,EAAcnB,aAAa,GAAG,MAAM,GAAG,KAAM;AAC7C,kBAAA,eAAA,EAAeQ,UAAW;AAC1BY,kBAAAA,QAAQ,EAAEZ,UAAW;kBACrBa,kBAAkB,EAAA,IAAA;kBAAA,IACb,CAACb,UAAU,IAAI;AAClBc,oBAAAA,QAAQ,EAAE,CAAC;AACXtC,oBAAAA,OAAO,EAAED,gBAAgB,CAACwB,IAAI,CAACvB,OAAO,CAAC;oBACvCuC,SAAS,EAAGC,KAAK,IAAI;sBACnBA,KAAK,CAACC,cAAc,EAAE;sBACtB,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,IAAIF,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;AACpD3C,wBAAAA,gBAAgB,CAACwB,IAAI,CAACvB,OAAO,CAAC,EAAE;AAClC;AACF;mBACD;AAAA,iBAAA,EAxBIyB,~~MAyBL~~,~~CAAA~~;~~eAEL~~;aACG;AACR,WAAa,CACf;AAAA,SAAA,CAAG;AAEP;KACyB;AAC7B,GAAmB,CAAC;AAExB;;;;"}
1	+ {"version":3,"file":"AnimatedLabel.js","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../legacylistItem';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}

package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../legacylistItem';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":";;;;;;;;;;~~AAgBMA~~,~~MAAAA~~,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;AAAEC,EAAAA;~~AAA2B~~,~~CAAA~~,KAAI;AAC9E,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;EACvB,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEjD,SAASC,gBAAgBA,CAACC,OAAwB,EAAA;AAChD,IAAA,OAAO,MAAK;MACVH,YAAY,CAAC,KAAK,CAAC;AACnBG,MAAAA,OAAO,IAAI;~~KACZ~~;AACH;EAEA,oBACEC,GAAA,CAACC,iBAAiB,EAAA;AAACC,IAAAA,IAAI,EAAEP,SAAU;AAAAQ,IAAAA,QAAA,eACjCH,GAAA,CAACI,gBAAgB,CAACC,QAAQ,EAAA;MAAAF,QAAA,EACtBG,SAAS,IAAI;QACb,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAL,UAAAA,QAAA,gBACEH,GAAA,CAAA,QAAA,EAAA;AACES,YAAAA,IAAI,EAAC,QAAQ;AACbC,YAAAA,EAAE,EAAEjB,OAAQ;AACZ,YAAA,eAAA,EAAc,MAAM;AACpB,YAAA,eAAA,EAAea,SAAU;AACzB,YAAA,eAAA,EAAeX,SAAU;YACzBJ,SAAS,EAAEoB,IAAI,CACb,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EACzBpB,SAAS,CACT;AACFQ,YAAAA,OAAO,EAAEA,MAAMH,YAAY,CAAC,IAAI,CAAE;AAAAO,YAAAA,QAAA,EAEjCX,KAAK,CAACoB,GAAG,CAAC,CAAC;AAAEC,cAAAA;aAAO,EAAEC,KAAK,KAAI;AAC9B,cAAA,MAAMC,aAAa,GAAGzB,WAAW,KAAKwB,KAAK;AAC3C,cAAA,MAAME,aAAa,GAAGF,KAAK,GAAG,CAAC;AAC/B,cAAA,oBACEP,IAAA,CAAA,KAAA,EAAA;AAEE,gBAAA,aAAA,EAAa,CAACQ,aAAc;gBAC5BxB,SAAS,EAAEoB,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE;AACvE,kBAAA,yCAAyC,EAAEI;AAC5C,iBAAA,CAAE;gBAAAZ,QAAA,EAAA,CAEFU,KAAK,EAAE,GAAA,eAAAb,GAAA,CAACiB,WAAW,EAAA,~~EACtB~~,~~CAAA~~;AAAA,eAAA,EAPOD,aAOF,CAAC;~~aAET~~;AAAC,WACI,CACR,eAAAhB,GAAA,CAACkB,WAAW,EAAA;AACVC,YAAAA,IAAI,EAAC,MAAM;AACX,YAAA,iBAAA,EAAiB1B,OAAQ;AACzBS,YAAAA,IAAI,EAAEP,SAAU;AAChByB,YAAAA,OAAO,EAAEA,MAAMxB,YAAY,CAAC,KAAK,CAAE;YAAAO,QAAA,eAEnCH,GAAA,CAACqB,IAAI,EAAA;AAAC9B,cAAAA,SAAS,EAAC,aAAa;cAAAY,QAAA,EAC1BX,KAAK,CAACoB,GAAG,CAAC,CAACU,IAAI,EAAER,KAAK,KAAI;AACzB,gBAAA,MAAMC,aAAa,GAAGzB,WAAW,KAAKwB,KAAK;AAC3C,gBAAA,MAAMS,UAAU,GAAGjC,WAAW,GAAGwB,KAAK;AACtC,gBAAA,MAAMU,MAAM,GAAG,~~CAAQV~~,~~KAAAA~~,~~EAAAA~~,KAAK,CAAE~~,CAAA~~;gBAC9B,oBACEd,GAAA,CAACyB,MAAM,EAAA;AAELf,kBAAAA,EAAE,EAAEc,MAAO;AACXE,kBAAAA,EAAE,EAAC,IAAI;AACPP,kBAAAA,IAAI,EAAC,UAAU;AACfQ,kBAAAA,QAAQ,EAAE,KAAM;kBAChBpC,SAAS,EAAEoB,IAAI,CAAC,0BAA0B,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AACrEiB,oBAAAA,SAAS,EAAE,CAACL;AACb,mBAAA,CAAE;kBACHM,KAAK,EAAEP,IAAI,CAACT,KAAM;kBAClBiB,OAAO,EAAER,IAAI,CAACS,UAAW;AACzBC,kBAAAA,MAAM,EAAEjB,aAAa,gBAAGf,GAAA,CAACiC,KAAK,EAAA;AAACC,oBAAAA,IAAI,EAAE;oBAAM,GAAG,IAAK;AACnD,kBAAA,cAAA,EAAcnB,aAAa,GAAG,MAAM,GAAG,KAAM;AAC7C,kBAAA,eAAA,EAAeQ,UAAW;AAC1BY,kBAAAA,QAAQ,EAAEZ,UAAW;kBACrBa,kBAAkB,EAAA,IAAA;kBAAA,IACb,CAACb,UAAU,IAAI;AAClBc,oBAAAA,QAAQ,EAAE,CAAC;AACXtC,oBAAAA,OAAO,EAAED,gBAAgB,CAACwB,IAAI,CAACvB,OAAO,CAAC;oBACvCuC,SAAS,EAAGC,KAAK,IAAI;sBACnBA,KAAK,CAACC,cAAc,EAAE;sBACtB,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,IAAIF,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;AACpD3C,wBAAAA,gBAAgB,CAACwB,IAAI,CAACvB,OAAO,CAAC,EAAE;AAClC;AACF;mBACD;AAAA,iBAAA,EAxBIyB,~~MAyBL~~,~~CAAA~~;~~eAEL~~;aACG;AACR,WAAa,CACf;AAAA,SAAA,CAAG;AAEP;KACyB;AAC7B,GAAmB,CAAC;AAExB;;;;"}
1	+ {"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../legacylistItem';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}

package/build/header/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport { HTMLAttributes } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n /*\n When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n /\n action?: ButtonActionProps \| LinkActionProps;\n /\n Override the heading element rendered for the title, useful to specify the semantics of your header.\n \n @default \"h5\"\n /\n as?: Heading \| 'legend' \| 'header';\n title: string;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'id'>;\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps \| LinkActionProps }) => {\n const props = {\n 'aria-label': action['aria-label'],\n };\n\n if ('href' in action) {\n return (\n <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n {action.text}\n </Link>\n );\n }\n\n return (\n <Button\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n onClick={action.onClick}\n {...props}\n >\n {action.text}\n </Button>\n );\n};\n\n/\n \n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n \n /\nexport const Header = ({\n id,\n action,\n as = 'h5',\n title,\n className,\n role = undefined,\n}: HeaderProps) => {\n if (!action) {\n return (\n <Title\n as={as}\n id={id}\n role={role}\n type={Typography.TITLE_GROUP}\n className={clsx('np-header', 'np-header__title', className)}\n >\n {title}\n </Title>\n );\n }\n\n if (as === 'legend') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n\n return (\n <div className={clsx('np-header', className)}>\n <Title as={as} type={Typography.TITLE_GROUP} id={id} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","id","as","title","role","undefined","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY;GAClC;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,cAAA,CAACC,YAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ;AAAI,KACR,CAAC;AAEX;EAEA,oBACEN,cAAA,CAACO,uBAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ;AAAI,GACN,CAAC;AAEb,CAAC;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EACrBC,EAAE;EACFd,MAAM;AACNe,EAAAA,EAAE,GAAG,IAAI;EACTC,KAAK;EACLN,SAAS;AACTO,EAAAA,IAAI,GAAGC;~~AACK~~,~~CAAA~~,KAAI;EAChB,IAAI,CAAClB,MAAM,EAAE;IACX,oBACEE,cAAA,CAACiB,aAAK,EAAA;AACJJ,MAAAA,EAAE,EAAEA,EAAG;AACPD,MAAAA,EAAE,EAAEA,EAAG;AACPG,MAAAA,IAAI,EAAEA,IAAK;MACXG,IAAI,EAAEC,qBAAU,CAACC,WAAY;MAC7BZ,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEb,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DS;AAAK,KACD,CAAC;AAEZ;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAS,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKhB,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,cAAA,CAACiB,aAAK,EAAA;AAACJ,MAAAA,EAAE,EAAEA,EAAG;MAACK,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACR,MAAAA,EAAE,EAAEA,EAAG;AAACJ,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EAC9ES;AAAK,KACD,CACP,eAAAd,cAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA;AAAO,~~KAC~~/B~~,CAAA~~;AAAA,GAAK,CAAC;AAEV;;;;;"}
1	+ {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport { HTMLAttributes } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n /*\n When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n /\n action?: ButtonActionProps \| LinkActionProps;\n /\n Override the heading element rendered for the title, useful to specify the semantics of your header.\n \n @default \"h5\"\n /\n as?: Heading \| 'legend' \| 'header';\n title: string;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'id'>;\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps \| LinkActionProps }) => {\n const props = {\n 'aria-label': action['aria-label'],\n };\n\n if ('href' in action) {\n return (\n <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n {action.text}\n </Link>\n );\n }\n\n return (\n <Button\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n onClick={action.onClick}\n {...props}\n >\n {action.text}\n </Button>\n );\n};\n\n/\n \n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n \n /\nexport const Header = ({\n id,\n action,\n as = 'h5',\n title,\n className,\n role = undefined,\n}: HeaderProps) => {\n if (!action) {\n return (\n <Title\n as={as}\n id={id}\n role={role}\n type={Typography.TITLE_GROUP}\n className={clsx('np-header', 'np-header__title', className)}\n >\n {title}\n </Title>\n );\n }\n\n if (as === 'legend') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n\n return (\n <div className={clsx('np-header', className)}>\n <Title as={as} type={Typography.TITLE_GROUP} id={id} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","id","as","title","role","undefined","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY;GAClC;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,cAAA,CAACC,YAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ;AAAI,KACR,CAAC;AAEX,EAAA;EAEA,oBACEN,cAAA,CAACO,uBAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ;AAAI,GACN,CAAC;AAEb,CAAC;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EACrBC,EAAE;EACFd,MAAM;AACNe,EAAAA,EAAE,GAAG,IAAI;EACTC,KAAK;EACLN,SAAS;AACTO,EAAAA,IAAI,GAAGC;AAAS,CACJ,KAAI;EAChB,IAAI,CAAClB,MAAM,EAAE;IACX,oBACEE,cAAA,CAACiB,aAAK,EAAA;AACJJ,MAAAA,EAAE,EAAEA,EAAG;AACPD,MAAAA,EAAE,EAAEA,EAAG;AACPG,MAAAA,IAAI,EAAEA,IAAK;MACXG,IAAI,EAAEC,qBAAU,CAACC,WAAY;MAC7BZ,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEb,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DS;AAAK,KACD,CAAC;AAEZ,EAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAS,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,EAAA;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKhB,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,cAAA,CAACiB,aAAK,EAAA;AAACJ,MAAAA,EAAE,EAAEA,EAAG;MAACK,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACR,MAAAA,EAAE,EAAEA,EAAG;AAACJ,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EAC9ES;AAAK,KACD,CACP,eAAAd,cAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV;;;;;"}

package/build/header/Header.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport { HTMLAttributes } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n /*\n When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n /\n action?: ButtonActionProps \| LinkActionProps;\n /\n Override the heading element rendered for the title, useful to specify the semantics of your header.\n \n @default \"h5\"\n /\n as?: Heading \| 'legend' \| 'header';\n title: string;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'id'>;\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps \| LinkActionProps }) => {\n const props = {\n 'aria-label': action['aria-label'],\n };\n\n if ('href' in action) {\n return (\n <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n {action.text}\n </Link>\n );\n }\n\n return (\n <Button\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n onClick={action.onClick}\n {...props}\n >\n {action.text}\n </Button>\n );\n};\n\n/\n \n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n \n /\nexport const Header = ({\n id,\n action,\n as = 'h5',\n title,\n className,\n role = undefined,\n}: HeaderProps) => {\n if (!action) {\n return (\n <Title\n as={as}\n id={id}\n role={role}\n type={Typography.TITLE_GROUP}\n className={clsx('np-header', 'np-header__title', className)}\n >\n {title}\n </Title>\n );\n }\n\n if (as === 'legend') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n\n return (\n <div className={clsx('np-header', className)}>\n <Title as={as} type={Typography.TITLE_GROUP} id={id} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","id","as","title","role","undefined","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY;GAClC;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,GAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ;AAAI,KACR,CAAC;AAEX;EAEA,oBACEN,GAAA,CAACO,MAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ;AAAI,GACN,CAAC;AAEb,CAAC;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EACrBC,EAAE;EACFd,MAAM;AACNe,EAAAA,EAAE,GAAG,IAAI;EACTC,KAAK;EACLN,SAAS;AACTO,EAAAA,IAAI,GAAGC;~~AACK~~,~~CAAA~~,KAAI;EAChB,IAAI,CAAClB,MAAM,EAAE;IACX,oBACEE,GAAA,CAACiB,KAAK,EAAA;AACJJ,MAAAA,EAAE,EAAEA,EAAG;AACPD,MAAAA,EAAE,EAAEA,EAAG;AACPG,MAAAA,IAAI,EAAEA,IAAK;MACXG,IAAI,EAAEC,UAAU,CAACC,WAAY;MAC7BZ,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEb,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DS;AAAK,KACD,CAAC;AAEZ;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAS,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH;AAEA,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKhB,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,GAAA,CAACiB,KAAK,EAAA;AAACJ,MAAAA,EAAE,EAAEA,EAAG;MAACK,IAAI,EAAEC,UAAU,CAACC,WAAY;AAACR,MAAAA,EAAE,EAAEA,EAAG;AAACJ,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EAC9ES;AAAK,KACD,CACP,eAAAd,GAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA;AAAO,~~KAC~~/B~~,CAAA~~;AAAA,GAAK,CAAC;AAEV;;;;"}
1	+ {"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport { HTMLAttributes } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n /*\n When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n /\n action?: ButtonActionProps \| LinkActionProps;\n /\n Override the heading element rendered for the title, useful to specify the semantics of your header.\n \n @default \"h5\"\n /\n as?: Heading \| 'legend' \| 'header';\n title: string;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'id'>;\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps \| LinkActionProps }) => {\n const props = {\n 'aria-label': action['aria-label'],\n };\n\n if ('href' in action) {\n return (\n <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n {action.text}\n </Link>\n );\n }\n\n return (\n <Button\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n onClick={action.onClick}\n {...props}\n >\n {action.text}\n </Button>\n );\n};\n\n/\n \n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n \n /\nexport const Header = ({\n id,\n action,\n as = 'h5',\n title,\n className,\n role = undefined,\n}: HeaderProps) => {\n if (!action) {\n return (\n <Title\n as={as}\n id={id}\n role={role}\n type={Typography.TITLE_GROUP}\n className={clsx('np-header', 'np-header__title', className)}\n >\n {title}\n </Title>\n );\n }\n\n if (as === 'legend') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n\n return (\n <div className={clsx('np-header', className)}>\n <Title as={as} type={Typography.TITLE_GROUP} id={id} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","id","as","title","role","undefined","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY;GAClC;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,GAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ;AAAI,KACR,CAAC;AAEX,EAAA;EAEA,oBACEN,GAAA,CAACO,MAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ;AAAI,GACN,CAAC;AAEb,CAAC;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EACrBC,EAAE;EACFd,MAAM;AACNe,EAAAA,EAAE,GAAG,IAAI;EACTC,KAAK;EACLN,SAAS;AACTO,EAAAA,IAAI,GAAGC;AAAS,CACJ,KAAI;EAChB,IAAI,CAAClB,MAAM,EAAE;IACX,oBACEE,GAAA,CAACiB,KAAK,EAAA;AACJJ,MAAAA,EAAE,EAAEA,EAAG;AACPD,MAAAA,EAAE,EAAEA,EAAG;AACPG,MAAAA,IAAI,EAAEA,IAAK;MACXG,IAAI,EAAEC,UAAU,CAACC,WAAY;MAC7BZ,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEb,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DS;AAAK,KACD,CAAC;AAEZ,EAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAS,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,EAAA;AAEA,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKhB,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,GAAA,CAACiB,KAAK,EAAA;AAACJ,MAAAA,EAAE,EAAEA,EAAG;MAACK,IAAI,EAAEC,UAAU,CAACC,WAAY;AAACR,MAAAA,EAAE,EAAEA,EAAG;AAACJ,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EAC9ES;AAAK,KACD,CACP,eAAAd,GAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/image/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useCallback } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n alt: string;\n src: string;\n id?: string;\n onLoad?: () => void;\n onError?: () => void;\n className?: string;\n loading?: 'lazy' \| 'eager';\n stretch?: boolean;\n role?: string;\n shrink?: boolean;\n}\n\nconst Image = ({\n id,\n src,\n alt,\n onLoad,\n onError,\n className,\n loading,\n stretch = true,\n role,\n shrink = true,\n}: ImageProps) => {\n const elementReference = useRef<HTMLImageElement>(null);\n const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n\n // Internal onLoad handler that calls user onLoad only if hasIntersected is true\n const handleLoad = useCallback(() => {\n if (hasIntersected && onLoad) {\n onLoad();\n }\n }, [hasIntersected, onLoad]);\n\n return (\n <img\n ref={elementReference}\n id={id}\n alt={alt}\n src={src}\n loading={loading}\n className={clsx([\n 'tw-image',\n {\n 'tw-image__stretch': stretch,\n 'tw-image__shrink': shrink,\n },\n className,\n ])}\n role={role}\n onLoad={handleLoad}\n onError={onError}\n />\n );\n};\n\nexport default Image;\n"],"names":["Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","handleLoad","useCallback","_jsx","ref","clsx"],"mappings":";;;;;;;;;;;;~~AAkBMA~~,~~MAAAA~~,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,YAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,mCAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;AAEhF;AACA,EAAA,MAAMS,UAAU,GAAGC,iBAAW,CAAC,MAAK;IAClC,IAAIJ,cAAc,IAAIT,MAAM,EAAE;AAC5BA,MAAAA,MAAM,EAAE;AACV;AACF,~~GAAC~~,EAAE,CAACS,cAAc,EAAET,MAAM,CAAC,CAAC;AAE5B,EAAA,oBACEc,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAER,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAEc,SAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEZ,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEY,UAAW;AACnBX,IAAAA,OAAO,EAAEA;AAAQ,~~GACjB~~,~~CAAA~~;AAEN;;;;"}
1	+ {"version":3,"file":"Image.js","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useCallback } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n alt: string;\n src: string;\n id?: string;\n onLoad?: () => void;\n onError?: () => void;\n className?: string;\n loading?: 'lazy' \| 'eager';\n stretch?: boolean;\n role?: string;\n shrink?: boolean;\n}\n\nconst Image = ({\n id,\n src,\n alt,\n onLoad,\n onError,\n className,\n loading,\n stretch = true,\n role,\n shrink = true,\n}: ImageProps) => {\n const elementReference = useRef<HTMLImageElement>(null);\n const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n\n // Internal onLoad handler that calls user onLoad only if hasIntersected is true\n const handleLoad = useCallback(() => {\n if (hasIntersected && onLoad) {\n onLoad();\n }\n }, [hasIntersected, onLoad]);\n\n return (\n <img\n ref={elementReference}\n id={id}\n alt={alt}\n src={src}\n loading={loading}\n className={clsx([\n 'tw-image',\n {\n 'tw-image__stretch': stretch,\n 'tw-image__shrink': shrink,\n },\n className,\n ])}\n role={role}\n onLoad={handleLoad}\n onError={onError}\n />\n );\n};\n\nexport default Image;\n"],"names":["Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","handleLoad","useCallback","_jsx","ref","clsx"],"mappings":";;;;;;;;;;;;AAkBA,MAAMA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,YAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,mCAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;AAEhF;AACA,EAAA,MAAMS,UAAU,GAAGC,iBAAW,CAAC,MAAK;IAClC,IAAIJ,cAAc,IAAIT,MAAM,EAAE;AAC5BA,MAAAA,MAAM,EAAE;AACV,IAAA;AACF,EAAA,CAAC,EAAE,CAACS,cAAc,EAAET,MAAM,CAAC,CAAC;AAE5B,EAAA,oBACEc,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAER,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAEc,SAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEZ,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEY,UAAW;AACnBX,IAAAA,OAAO,EAAEA;AAAQ,GAAA,CACjB;AAEN;;;;"}

package/build/image/Image.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.mjs","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useCallback } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n alt: string;\n src: string;\n id?: string;\n onLoad?: () => void;\n onError?: () => void;\n className?: string;\n loading?: 'lazy' \| 'eager';\n stretch?: boolean;\n role?: string;\n shrink?: boolean;\n}\n\nconst Image = ({\n id,\n src,\n alt,\n onLoad,\n onError,\n className,\n loading,\n stretch = true,\n role,\n shrink = true,\n}: ImageProps) => {\n const elementReference = useRef<HTMLImageElement>(null);\n const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n\n // Internal onLoad handler that calls user onLoad only if hasIntersected is true\n const handleLoad = useCallback(() => {\n if (hasIntersected && onLoad) {\n onLoad();\n }\n }, [hasIntersected, onLoad]);\n\n return (\n <img\n ref={elementReference}\n id={id}\n alt={alt}\n src={src}\n loading={loading}\n className={clsx([\n 'tw-image',\n {\n 'tw-image__stretch': stretch,\n 'tw-image__shrink': shrink,\n },\n className,\n ])}\n role={role}\n onLoad={handleLoad}\n onError={onError}\n />\n );\n};\n\nexport default Image;\n"],"names":["Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","handleLoad","useCallback","_jsx","ref","clsx"],"mappings":";;;;;;;;~~AAkBMA~~,~~MAAAA~~,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,MAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,iBAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;AAEhF;AACA,EAAA,MAAMS,UAAU,GAAGC,WAAW,CAAC,MAAK;IAClC,IAAIJ,cAAc,IAAIT,MAAM,EAAE;AAC5BA,MAAAA,MAAM,EAAE;AACV;AACF,~~GAAC~~,EAAE,CAACS,cAAc,EAAET,MAAM,CAAC,CAAC;AAE5B,EAAA,oBACEc,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAER,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAEc,IAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEZ,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEY,UAAW;AACnBX,IAAAA,OAAO,EAAEA;AAAQ,~~GACjB~~,~~CAAA~~;AAEN;;;;"}
1	+ {"version":3,"file":"Image.mjs","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useCallback } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n alt: string;\n src: string;\n id?: string;\n onLoad?: () => void;\n onError?: () => void;\n className?: string;\n loading?: 'lazy' \| 'eager';\n stretch?: boolean;\n role?: string;\n shrink?: boolean;\n}\n\nconst Image = ({\n id,\n src,\n alt,\n onLoad,\n onError,\n className,\n loading,\n stretch = true,\n role,\n shrink = true,\n}: ImageProps) => {\n const elementReference = useRef<HTMLImageElement>(null);\n const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n\n // Internal onLoad handler that calls user onLoad only if hasIntersected is true\n const handleLoad = useCallback(() => {\n if (hasIntersected && onLoad) {\n onLoad();\n }\n }, [hasIntersected, onLoad]);\n\n return (\n <img\n ref={elementReference}\n id={id}\n alt={alt}\n src={src}\n loading={loading}\n className={clsx([\n 'tw-image',\n {\n 'tw-image__stretch': stretch,\n 'tw-image__shrink': shrink,\n },\n className,\n ])}\n role={role}\n onLoad={handleLoad}\n onError={onError}\n />\n );\n};\n\nexport default Image;\n"],"names":["Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","handleLoad","useCallback","_jsx","ref","clsx"],"mappings":";;;;;;;;AAkBA,MAAMA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,MAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,iBAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;AAEhF;AACA,EAAA,MAAMS,UAAU,GAAGC,WAAW,CAAC,MAAK;IAClC,IAAIJ,cAAc,IAAIT,MAAM,EAAE;AAC5BA,MAAAA,MAAM,EAAE;AACV,IAAA;AACF,EAAA,CAAC,EAAE,CAACS,cAAc,EAAET,MAAM,CAAC,CAAC;AAE5B,EAAA,oBACEc,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAER,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAEc,IAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEZ,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEY,UAAW;AACnBX,IAAAA,OAAO,EAAEA;AAAQ,GAAA,CACjB;AAEN;;;;"}

package/build/info/Info.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /*\n Extra classes applied to Info\n /\n className?: string;\n /\n Content displayed inside a Popover a Modal\n /\n content?: React.ReactNode;\n onClick?: () => void;\n /\n Decides whether to display content in a Popover or a Modal\n /\n presentation?: 'MODAL' \| 'POPOVER';\n /\n Decides the size of help Icon\n /\n size?: SizeSmall \| SizeLarge;\n /\n Title displayed inside a Popover a Modal\n /\n title?: React.ReactNode;\n /\n Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n\n const buttonProps: IconButtonProps = {\n 'aria-label': ariaLabel,\n priority: 'minimal',\n size: 24,\n children: <HelpCircleIcon />,\n };\n\n return (\n <span className={clsx(className, 'np-info')}>\n {isModal ? (\n <>\n <IconButton\n onClick={() => {\n setOpen(!open);\n if (onClick) {\n onClick();\n }\n }}\n {...buttonProps}\n />\n <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n </>\n ) : (\n <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n <IconButton\n {...buttonProps}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n />\n </Popover>\n )}\n </span>\n );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA0CMA~~,~~MAAAA~~,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,kCAAgB,CAACC,OAAO;QACvCC,MAAI,GAAGC,SAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,iBAAQ,CAACC;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,qBAAQ,CAACV,SAAS,CAAC;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,kCAAgB,CAACkB,KAAK;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,cAAA,CAACC,wBAAc,~~EAAG~~,EAAA;~~GAC7B~~;AAED,EAAA,oBACED,cAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,SAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,cAAA,CAACK,kBAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX;~~SACA~~;QAAA,GACEqB;AAAW,~~OAEjB~~,~~CAAA~~,eAAAG,cAAA,CAACM,aAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK;AAAE,~~OAChF~~,~~CAAA~~;AAAA,~~KAAG~~,~~CAAA~~,gBAEHS,cAAA,CAACS,eAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,cAAA,CAACK,kBAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX;AACF;~~OAEJ~~;~~KAAS~~;AACV,GACG,CAAC;AAEX;;;;"}
1	+ {"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /*\n Extra classes applied to Info\n /\n className?: string;\n /\n Content displayed inside a Popover a Modal\n /\n content?: React.ReactNode;\n onClick?: () => void;\n /\n Decides whether to display content in a Popover or a Modal\n /\n presentation?: 'MODAL' \| 'POPOVER';\n /\n Decides the size of help Icon\n /\n size?: SizeSmall \| SizeLarge;\n /\n Title displayed inside a Popover a Modal\n /\n title?: React.ReactNode;\n /\n Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n\n const buttonProps: IconButtonProps = {\n 'aria-label': ariaLabel,\n priority: 'minimal',\n size: 24,\n children: <HelpCircleIcon />,\n };\n\n return (\n <span className={clsx(className, 'np-info')}>\n {isModal ? (\n <>\n <IconButton\n onClick={() => {\n setOpen(!open);\n if (onClick) {\n onClick();\n }\n }}\n {...buttonProps}\n />\n <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n </>\n ) : (\n <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n <IconButton\n {...buttonProps}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n />\n </Popover>\n )}\n </span>\n );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAMA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,kCAAgB,CAACC,OAAO;QACvCC,MAAI,GAAGC,SAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,iBAAQ,CAACC;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,qBAAQ,CAACV,SAAS,CAAC;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,kCAAgB,CAACkB,KAAK;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,cAAA,CAACC,wBAAc,EAAA,EAAA;GAC1B;AAED,EAAA,oBACED,cAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,SAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,cAAA,CAACK,kBAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX,UAAA;QACF,CAAE;QAAA,GACEqB;AAAW,OAAC,CAElB,eAAAG,cAAA,CAACM,aAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK;AAAE,OAAA,CAChF;AAAA,KAAA,CAAG,gBAEHS,cAAA,CAACS,eAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,cAAA,CAACK,kBAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX,UAAA;AACF,QAAA;OAAE;KAEG;AACV,GACG,CAAC;AAEX;;;;"}

package/build/info/Info.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /*\n Extra classes applied to Info\n /\n className?: string;\n /\n Content displayed inside a Popover a Modal\n /\n content?: React.ReactNode;\n onClick?: () => void;\n /\n Decides whether to display content in a Popover or a Modal\n /\n presentation?: 'MODAL' \| 'POPOVER';\n /\n Decides the size of help Icon\n /\n size?: SizeSmall \| SizeLarge;\n /\n Title displayed inside a Popover a Modal\n /\n title?: React.ReactNode;\n /\n Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n\n const buttonProps: IconButtonProps = {\n 'aria-label': ariaLabel,\n priority: 'minimal',\n size: 24,\n children: <HelpCircleIcon />,\n };\n\n return (\n <span className={clsx(className, 'np-info')}>\n {isModal ? (\n <>\n <IconButton\n onClick={() => {\n setOpen(!open);\n if (onClick) {\n onClick();\n }\n }}\n {...buttonProps}\n />\n <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n </>\n ) : (\n <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n <IconButton\n {...buttonProps}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n />\n </Popover>\n )}\n </span>\n );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA0CMA~~,~~MAAAA~~,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,gBAAgB,CAACC,OAAO;EACvCC,IAAI,GAAGC,IAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,QAAQ,CAACC;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,QAAQ,CAACV,SAAS,CAAC;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,gBAAgB,CAACkB,KAAK;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,GAAA,CAACC,kBAAc,~~EAAG~~,EAAA;~~GAC7B~~;AAED,EAAA,oBACED,GAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,IAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,IAAA,CAAAC,QAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,GAAA,CAACK,UAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX;~~SACA~~;QAAA,GACEqB;AAAW,~~OAEjB~~,~~CAAA~~,eAAAG,GAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK;AAAE,~~OAChF~~,~~CAAA~~;AAAA,~~KAAG~~,~~CAAA~~,gBAEHS,GAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,GAAA,CAACK,UAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX;AACF;~~OAEJ~~;~~KAAS~~;AACV,GACG,CAAC;AAEX;;;;"}
1	+ {"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /*\n Extra classes applied to Info\n /\n className?: string;\n /\n Content displayed inside a Popover a Modal\n /\n content?: React.ReactNode;\n onClick?: () => void;\n /\n Decides whether to display content in a Popover or a Modal\n /\n presentation?: 'MODAL' \| 'POPOVER';\n /\n Decides the size of help Icon\n /\n size?: SizeSmall \| SizeLarge;\n /\n Title displayed inside a Popover a Modal\n /\n title?: React.ReactNode;\n /\n Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n\n const buttonProps: IconButtonProps = {\n 'aria-label': ariaLabel,\n priority: 'minimal',\n size: 24,\n children: <HelpCircleIcon />,\n };\n\n return (\n <span className={clsx(className, 'np-info')}>\n {isModal ? (\n <>\n <IconButton\n onClick={() => {\n setOpen(!open);\n if (onClick) {\n onClick();\n }\n }}\n {...buttonProps}\n />\n <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n </>\n ) : (\n <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n <IconButton\n {...buttonProps}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n />\n </Popover>\n )}\n </span>\n );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAMA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,gBAAgB,CAACC,OAAO;EACvCC,IAAI,GAAGC,IAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,QAAQ,CAACC;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,QAAQ,CAACV,SAAS,CAAC;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,gBAAgB,CAACkB,KAAK;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,GAAA,CAACC,kBAAc,EAAA,EAAA;GAC1B;AAED,EAAA,oBACED,GAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,IAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,IAAA,CAAAC,QAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,GAAA,CAACK,UAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX,UAAA;QACF,CAAE;QAAA,GACEqB;AAAW,OAAC,CAElB,eAAAG,GAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK;AAAE,OAAA,CAChF;AAAA,KAAA,CAAG,gBAEHS,GAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,GAAA,CAACK,UAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX,UAAA;AACF,QAAA;OAAE;KAEG;AACV,GACG,CAAC;AAEX;;;;"}

package/build/info/infoPresentations.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"infoPresentations.js","sources":["../../src/info/infoPresentations.ts"],"sourcesContent":["// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum\nexport enum InfoPresentation {\n POPOVER = 'POPOVER',\n MODAL = 'MODAL',\n}\n"],"names":["InfoPresentation"],"mappings":";;AAAA;AACYA;AAAZ,CAAA,UAAYA,gBAAgB,EAAA;AAC1BA,EAAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHWA,wBAAgB,KAAhBA,wBAAgB,~~GAG3B~~,EAAA,CAAA,CAAA;;"}
1	+ {"version":3,"file":"infoPresentations.js","sources":["../../src/info/infoPresentations.ts"],"sourcesContent":["// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum\nexport enum InfoPresentation {\n POPOVER = 'POPOVER',\n MODAL = 'MODAL',\n}\n"],"names":["InfoPresentation"],"mappings":";;AAAA;AACYA;AAAZ,CAAA,UAAYA,gBAAgB,EAAA;AAC1BA,EAAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHWA,wBAAgB,KAAhBA,wBAAgB,GAAA,EAAA,CAAA,CAAA;;"}

package/build/info/infoPresentations.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"infoPresentations.mjs","sources":["../../src/info/infoPresentations.ts"],"sourcesContent":["// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum\nexport enum InfoPresentation {\n POPOVER = 'POPOVER',\n MODAL = 'MODAL',\n}\n"],"names":["InfoPresentation"],"mappings":"AAAA;IACYA;AAAZ,CAAA,UAAYA,gBAAgB,EAAA;AAC1BA,EAAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHWA,gBAAgB,KAAhBA,gBAAgB,~~GAG3B~~,EAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"infoPresentations.mjs","sources":["../../src/info/infoPresentations.ts"],"sourcesContent":["// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum\nexport enum InfoPresentation {\n POPOVER = 'POPOVER',\n MODAL = 'MODAL',\n}\n"],"names":["InfoPresentation"],"mappings":"AAAA;IACYA;AAAZ,CAAA,UAAYA,gBAAgB,EAAA;AAC1BA,EAAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHWA,gBAAgB,KAAhBA,gBAAgB,GAAA,EAAA,CAAA,CAAA;;;;"}

package/build/inlineAlert/InlineAlert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n iconLabel?: string;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\n/*\n Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n \n Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n id,\n type = 'neutral',\n iconLabel,\n className,\n children,\n}: InlineAlertProps) {\n return (\n <Body\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE \|\| type === Sentiment.ERROR ? 'danger' : type}`,\n 'd-flex',\n className,\n )}\n >\n {iconTypes.has(type) && (\n <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n )}\n <div>{children}</div>\n </Body>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC;AAEF;;;;;;;;AAQG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA;~~AACiB~~,~~CAAA~~,EAAA;EACjB,oBACEC,eAAA,CAACC,YAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,~~CAASP~~,~~MAAAA~~,~~EAAAA~~,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,cAAA,CAACC,kBAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA;KAAU,CACrE,eACDQ,cAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA;AAAQ,KAAM,CACtB;AAAA,GAAM,CAAC;AAEX;;;;"}
1	+ {"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n iconLabel?: string;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\n/*\n Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n \n Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n id,\n type = 'neutral',\n iconLabel,\n className,\n children,\n}: InlineAlertProps) {\n return (\n <Body\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE \|\| type === Sentiment.ERROR ? 'danger' : type}`,\n 'd-flex',\n className,\n )}\n >\n {iconTypes.has(type) && (\n <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n )}\n <div>{children}</div>\n </Body>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC;AAEF;;;;;;;;AAQG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA;AAAQ,CACS,EAAA;EACjB,oBACEC,eAAA,CAACC,YAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAAA,MAAA,EAASP,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,cAAA,CAACC,kBAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA;KAAU,CACrE,eACDQ,cAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA;AAAQ,KAAM,CACtB;AAAA,GAAM,CAAC;AAEX;;;;"}

package/build/inlineAlert/InlineAlert.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n iconLabel?: string;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\n/*\n Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n \n Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n id,\n type = 'neutral',\n iconLabel,\n className,\n children,\n}: InlineAlertProps) {\n return (\n <Body\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE \|\| type === Sentiment.ERROR ? 'danger' : type}`,\n 'd-flex',\n className,\n )}\n >\n {iconTypes.has(type) && (\n <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n )}\n <div>{children}</div>\n </Body>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC;AAEF;;;;;;;;AAQG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA;~~AACiB~~,~~CAAA~~,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,~~CAASP~~,~~MAAAA~~,~~EAAAA~~,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA;KAAU,CACrE,eACDQ,GAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA;AAAQ,KAAM,CACtB;AAAA,GAAM,CAAC;AAEX;;;;"}
1	+ {"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n iconLabel?: string;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\n/*\n Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n \n Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n id,\n type = 'neutral',\n iconLabel,\n className,\n children,\n}: InlineAlertProps) {\n return (\n <Body\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE \|\| type === Sentiment.ERROR ? 'danger' : type}`,\n 'd-flex',\n className,\n )}\n >\n {iconTypes.has(type) && (\n <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n )}\n <div>{children}</div>\n </Body>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC;AAEF;;;;;;;;AAQG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA;AAAQ,CACS,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAAA,MAAA,EAASP,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA;KAAU,CACrE,eACDQ,GAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA;AAAQ,KAAM,CACtB;AAAA,GAAM,CAAC;AAEX;;;;"}

package/build/inputs/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n extends Merge<\n React.ComponentPropsWithRef<'input'>,\n {\n size?: 'auto' \| SizeSmall \| SizeMedium \| SizeLarge;\n shape?: 'rectangle' \| 'pill';\n 'aria-invalid'?: boolean;\n }\n > {}\n\nexport const Input = forwardRef(function Input(\n { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n reference: React.ForwardedRef<HTMLInputElement \| null>,\n) {\n const inputAttributes = useInputAttributes();\n const inputPaddings = useInputPaddings();\n\n return (\n <input\n ref={reference}\n className={clsx(className, inputClassNameBase({ size }), 'np-input', {\n 'np-input--shape-rectangle': shape === 'rectangle',\n 'np-input--shape-pill': shape === 'pill',\n })}\n style={inputPaddings}\n {...inputAttributes}\n {...restProps}\n />\n );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","clsx","inputClassNameBase","style"],"mappings":";;;;;;;;;MAmBaA,KAAK,gBAAGC,gBAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC;~~AAAuB~~,~~CAAA~~,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE;AAC5C,EAAA,MAAMC,aAAa,GAAGC,2BAAgB,EAAE;AAExC,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,SAAI,CAACT,SAAS,EAAEU,0BAAkB,CAAC;AAAEZ,MAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACnE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK;AACnC,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}
1	+ {"version":3,"file":"Input.js","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n extends Merge<\n React.ComponentPropsWithRef<'input'>,\n {\n size?: 'auto' \| SizeSmall \| SizeMedium \| SizeLarge;\n shape?: 'rectangle' \| 'pill';\n 'aria-invalid'?: boolean;\n }\n > {}\n\nexport const Input = forwardRef(function Input(\n { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n reference: React.ForwardedRef<HTMLInputElement \| null>,\n) {\n const inputAttributes = useInputAttributes();\n const inputPaddings = useInputPaddings();\n\n return (\n <input\n ref={reference}\n className={clsx(className, inputClassNameBase({ size }), 'np-input', {\n 'np-input--shape-rectangle': shape === 'rectangle',\n 'np-input--shape-pill': shape === 'pill',\n })}\n style={inputPaddings}\n {...inputAttributes}\n {...restProps}\n />\n );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","clsx","inputClassNameBase","style"],"mappings":";;;;;;;;;MAmBaA,KAAK,gBAAGC,gBAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC;AAAS,CAAc,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE;AAC5C,EAAA,MAAMC,aAAa,GAAGC,2BAAgB,EAAE;AAExC,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,SAAI,CAACT,SAAS,EAAEU,0BAAkB,CAAC;AAAEZ,MAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACnE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK;AACnC,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}

package/build/inputs/Input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.mjs","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n extends Merge<\n React.ComponentPropsWithRef<'input'>,\n {\n size?: 'auto' \| SizeSmall \| SizeMedium \| SizeLarge;\n shape?: 'rectangle' \| 'pill';\n 'aria-invalid'?: boolean;\n }\n > {}\n\nexport const Input = forwardRef(function Input(\n { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n reference: React.ForwardedRef<HTMLInputElement \| null>,\n) {\n const inputAttributes = useInputAttributes();\n const inputPaddings = useInputPaddings();\n\n return (\n <input\n ref={reference}\n className={clsx(className, inputClassNameBase({ size }), 'np-input', {\n 'np-input--shape-rectangle': shape === 'rectangle',\n 'np-input--shape-pill': shape === 'pill',\n })}\n style={inputPaddings}\n {...inputAttributes}\n {...restProps}\n />\n );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","clsx","inputClassNameBase","style"],"mappings":";;;;;;;MAmBaA,KAAK,gBAAGC,UAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC;~~AAAuB~~,~~CAAA~~,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE;AAC5C,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;AAExC,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,IAAI,CAACT,SAAS,EAAEU,kBAAkB,CAAC;AAAEZ,MAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACnE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK;AACnC,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}
1	+ {"version":3,"file":"Input.mjs","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n extends Merge<\n React.ComponentPropsWithRef<'input'>,\n {\n size?: 'auto' \| SizeSmall \| SizeMedium \| SizeLarge;\n shape?: 'rectangle' \| 'pill';\n 'aria-invalid'?: boolean;\n }\n > {}\n\nexport const Input = forwardRef(function Input(\n { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n reference: React.ForwardedRef<HTMLInputElement \| null>,\n) {\n const inputAttributes = useInputAttributes();\n const inputPaddings = useInputPaddings();\n\n return (\n <input\n ref={reference}\n className={clsx(className, inputClassNameBase({ size }), 'np-input', {\n 'np-input--shape-rectangle': shape === 'rectangle',\n 'np-input--shape-pill': shape === 'pill',\n })}\n style={inputPaddings}\n {...inputAttributes}\n {...restProps}\n />\n );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","clsx","inputClassNameBase","style"],"mappings":";;;;;;;MAmBaA,KAAK,gBAAGC,UAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC;AAAS,CAAc,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE;AAC5C,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;AAExC,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,IAAI,CAACT,SAAS,EAAEU,kBAAkB,CAAC;AAAEZ,MAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACnE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK;AACnC,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}

package/build/inputs/InputGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n number \| string \| undefined,\n React.Dispatch<React.SetStateAction<number \| string \| undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n const [paddingStart] = useContext(InputPaddingStartContext);\n const [paddingEnd] = useContext(InputPaddingEndContext);\n\n return {\n paddingInlineStart: paddingStart,\n paddingInlineEnd: paddingEnd,\n } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n content: React.ReactNode;\n initialContentWidth?: number \| string;\n interactive?: boolean;\n padding?: 'none' \| 'sm' \| 'md';\n}\n\nexport interface InputGroupProps {\n addonStart?: InputGroupAddon;\n addonEnd?: InputGroupAddon;\n disabled?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n initialContentWidth,\n padding = inputAddonDefaultPadding,\n}: Pick<\n InputGroupAddon,\n 'initialContentWidth' \| 'padding'\n> = {}): () => InputPaddingContextType[0] {\n return () =>\n initialContentWidth != null\n ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n inputAddonContentWidthAddendByPadding[padding],\n )})`\n : undefined;\n}\n\nexport function InputGroup({\n addonStart,\n addonEnd,\n disabled,\n className,\n children,\n}: InputGroupProps) {\n const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n return (\n <InputPaddingStartContext.Provider\n value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n >\n <InputPaddingEndContext.Provider\n value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n >\n <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>\n {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n {children}\n {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n </fieldset>\n </InputPaddingEndContext.Provider>\n </InputPaddingStartContext.Provider>\n );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n placement: 'start' \| 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n none: 0,\n sm: '1rem',\n md: '1.5rem',\n} satisfies {\n [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n placement,\n content,\n interactive,\n padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n const [, setInputPadding] = useContext(\n placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n );\n\n const ref = useRef<HTMLSpanElement>(null);\n useResizeObserver(ref, (entry) => {\n // TODO: Remove fallback once most browsers support `borderBoxSize`\n const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n if (inlineSize != null) {\n setInputPadding(inlineSize);\n } else {\n const targetStyle = getComputedStyle(entry.target);\n setInputPadding(\n entry.contentRect.width +\n Number.parseFloat(targetStyle.paddingInlineStart) +\n Number.parseFloat(targetStyle.paddingInlineEnd),\n );\n }\n });\n\n return (\n /* Prevent nested controls from being labeled redundantly */\n <FieldLabelIdContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={clsx(\n 'np-input-addon',\n {\n 'np-input-addon--placement-start': placement === 'start',\n 'np-input-addon--placement-end': placement === 'end',\n },\n interactive && 'np-input-addon--interactive',\n {\n 'np-input-addon--padding-sm': padding === 'sm',\n 'np-input-addon--padding-md': padding === 'md',\n },\n )}\n >\n {content}\n </span>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelIdContextProvider>\n );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":";;;;;;;;;AAkBA,MAAMA,wBAAwB,gBAAGC,mBAAa,CAA0B,CAACC,SAAS,EAAE,MAAK,~~EAAG~~,CAAC,CAAC;AAE9F,MAAMC,sBAAsB,gBAAGF,mBAAa,CAA0B,CAACC,SAAS,EAAE,MAAK,~~EAAG~~,CAAC,CAAC;SAE5EE,gBAAgBA,GAAA;AAC9B,EAAA,MAAM,CAACC,YAAY,CAAC,GAAGC,gBAAU,CAACN,wBAAwB,CAAC;AAC3D,EAAA,MAAM,CAACO,UAAU,CAAC,GAAGD,gBAAU,CAACH,sBAAsB,CAAC;EAEvD,OAAO;AACLK,IAAAA,kBAAkB,EAAEH,YAAY;AAChCI,IAAAA,gBAAgB,EAAEF;GACW;AACjC;AAiBA,SAASG,wBAAwBA,CAAC;EAChCC,mBAAmB;AACnBC,EAAAA,OAAO,GAAGC;AAAwB,CAAA,GAIhC,EAAE,EAAA;EACJ,OAAO,MACLF,mBAAmB,IAAI,IAAI,GACvB,~~CAAQG~~,~~KAAAA~~,~~EAAAA~~,iCAAgB,CAACH,mBAAmB,CAAC,MAAMG,iCAAgB,CACjEC,qCAAqC,CAACH,OAAO,CAAC,CAC/C,CAAA,CAAA,CAAG,GACJV,SAAS;AACjB;~~AAEgB~~,~~SAAAc~~,UAAUA,CAAC;EACzBC,UAAU;EACVC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACTC,EAAAA;~~AACgB~~,~~CAAA~~,EAAA;AAChB,EAAA,MAAM,CAAChB,YAAY,EAAEiB,eAAe,CAAC,GAAGC,cAAQ,CAACb,wBAAwB,CAACO,UAAU,CAAC,CAAC;AACtF,EAAA,MAAM,CAACV,UAAU,EAAEiB,aAAa,CAAC,GAAGD,cAAQ,CAACb,wBAAwB,CAACQ,QAAQ,CAAC,CAAC;AAEhF,EAAA,oBACEO,cAAA,CAACzB,wBAAwB,CAAC0B,QAAQ,EAAA;AAChCC,IAAAA,KAAK,EAAEC,aAAO,CAAC,MAAM,CAACvB,YAAY,EAAEiB,eAAe,CAAC,EAAE,CAACjB,YAAY,CAAC,CAAE;AAAAgB,IAAAA,QAAA,eAEtEI,cAAA,CAACtB,sBAAsB,CAACuB,QAAQ,EAAA;AAC9BC,MAAAA,KAAK,EAAEC,aAAO,CAAC,MAAM,CAACrB,UAAU,EAAEiB,aAAa,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAE;AAAAc,MAAAA,QAAA,eAEhEQ,eAAA,CAAA,UAAA,EAAA;AAAUV,QAAAA,QAAQ,EAAEA,QAAS;AAACC,QAAAA,SAAS,EAAEU,SAAI,CAACV,SAAS,EAAE,gBAAgB,CAAE;AAAAC,QAAAA,QAAA,GACxEJ,UAAU,IAAI,IAAI,gBAAGQ,cAAA,CAACM,UAAU,EAAA;AAACC,UAAAA,SAAS,EAAC,OAAO;UAAA,GAAKf;AAAU,UAAI,GAAG,IAAI,EAC5EI,QAAQ,EACRH,QAAQ,IAAI,IAAI,gBAAGO,cAAA,CAACM,UAAU,EAAA;AAACC,UAAAA,SAAS,EAAC,KAAK;UAAA,GAAKd;UAAY,GAAG,IAAI;OAC/D;KACqB;AACnC,GAAmC,CAAC;AAExC;AAMA,MAAMH,qCAAqC,GAAG;AAC5CkB,EAAAA,IAAI,EAAE,CAAC;AACPC,EAAAA,EAAE,EAAE,MAAM;AACVC,EAAAA,EAAE,EAAE;CAGL;AAED,MAAMtB,wBAAwB,GAAG,IAAyC;AAE1E,SAASkB,UAAUA,CAAC;EAClBC,SAAS;EACTI,OAAO;EACPC,WAAW;AACXzB,EAAAA,OAAO,GAAGC;~~AACM~~,~~CAAA~~,EAAA;AAChB,EAAA,MAAM,GAAGyB,eAAe,CAAC,GAAGhC,gBAAU,CACpC0B,SAAS,KAAK,OAAO,GAAGhC,wBAAwB,GAAGG,sBAAsB,CAC1E;AAED,EAAA,MAAMoC,GAAG,GAAGC,YAAM,CAAkB,IAAI,CAAC;AACzCC,EAAAA,mCAAiB,CAACF,GAAG,EAAGG,KAAK,IAAI;AAC/B;IACA,MAAMC,UAAU,GAAGD,KAAK,CAACE,aAAa,GAAG,CAAC,CAAC,EAAED,UAAU;IACvD,IAAIA,UAAU,IAAI,IAAI,EAAE;MACtBL,eAAe,CAACK,UAAU,CAAC;AAC7B,~~KAAC~~,MAAM;AACL,MAAA,MAAME,WAAW,GAAGC,gBAAgB,CAACJ,KAAK,CAACK,MAAM,CAAC;MAClDT,eAAe,CACbI,KAAK,CAACM,WAAW,CAACC,KAAK,GACrBC,MAAM,CAACC,UAAU,CAACN,WAAW,CAACrC,kBAAkB,CAAC,GACjD0C,MAAM,CAACC,UAAU,CAACN,WAAW,CAACpC,gBAAgB,CAAC,CAClD;AACH;AACF,~~GAAC~~,CAAC;EAEF,iFAEEgB,cAAA,CAAC2B,oCAA2B,EAAA;AAACzB,IAAAA,KAAK,EAAEzB,SAAU;IAAAmB,QAAA,eAC5CI,cAAA,CAAC4B,+BAAsB,EAAA;AAAC1B,MAAAA,KAAK,EAAEzB,SAAU;MAAAmB,QAAA,eACvCI,cAAA,CAAC6B,iCAAwB,EAAA;AAAC3B,QAAAA,KAAK,EAAEzB,SAAU;QAAAmB,QAAA,eACzCI,cAAA,CAAC8B,6BAAoB,EAAA;AAAC5B,UAAAA,KAAK,EAAEzB,SAAU;AAAAmB,UAAAA,QAAA,eACrCI,cAAA,CAAA,MAAA,EAAA;AACEc,YAAAA,GAAG,EAAEA,GAAI;AACTnB,YAAAA,SAAS,EAAEU,SAAI,CACb,gBAAgB,EAChB;cACE,iCAAiC,EAAEE,SAAS,KAAK,OAAO;cACxD,+BAA+B,EAAEA,SAAS,KAAK;aAChD,EACDK,WAAW,IAAI,6BAA6B,EAC5C;cACE,4BAA4B,EAAEzB,OAAO,KAAK,IAAI;cAC9C,4BAA4B,EAAEA,OAAO,KAAK;AAC3C,aAAA,CACD;AAAAS,YAAAA,QAAA,EAEDe;WACG;SACc;OACE;KACJ;AAC1B,GAA6B,CAAC;AAElC;;;;;"}
1	+ {"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n number \| string \| undefined,\n React.Dispatch<React.SetStateAction<number \| string \| undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n const [paddingStart] = useContext(InputPaddingStartContext);\n const [paddingEnd] = useContext(InputPaddingEndContext);\n\n return {\n paddingInlineStart: paddingStart,\n paddingInlineEnd: paddingEnd,\n } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n content: React.ReactNode;\n initialContentWidth?: number \| string;\n interactive?: boolean;\n padding?: 'none' \| 'sm' \| 'md';\n}\n\nexport interface InputGroupProps {\n addonStart?: InputGroupAddon;\n addonEnd?: InputGroupAddon;\n disabled?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n initialContentWidth,\n padding = inputAddonDefaultPadding,\n}: Pick<\n InputGroupAddon,\n 'initialContentWidth' \| 'padding'\n> = {}): () => InputPaddingContextType[0] {\n return () =>\n initialContentWidth != null\n ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n inputAddonContentWidthAddendByPadding[padding],\n )})`\n : undefined;\n}\n\nexport function InputGroup({\n addonStart,\n addonEnd,\n disabled,\n className,\n children,\n}: InputGroupProps) {\n const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n return (\n <InputPaddingStartContext.Provider\n value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n >\n <InputPaddingEndContext.Provider\n value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n >\n <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>\n {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n {children}\n {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n </fieldset>\n </InputPaddingEndContext.Provider>\n </InputPaddingStartContext.Provider>\n );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n placement: 'start' \| 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n none: 0,\n sm: '1rem',\n md: '1.5rem',\n} satisfies {\n [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n placement,\n content,\n interactive,\n padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n const [, setInputPadding] = useContext(\n placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n );\n\n const ref = useRef<HTMLSpanElement>(null);\n useResizeObserver(ref, (entry) => {\n // TODO: Remove fallback once most browsers support `borderBoxSize`\n const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n if (inlineSize != null) {\n setInputPadding(inlineSize);\n } else {\n const targetStyle = getComputedStyle(entry.target);\n setInputPadding(\n entry.contentRect.width +\n Number.parseFloat(targetStyle.paddingInlineStart) +\n Number.parseFloat(targetStyle.paddingInlineEnd),\n );\n }\n });\n\n return (\n /* Prevent nested controls from being labeled redundantly */\n <FieldLabelIdContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={clsx(\n 'np-input-addon',\n {\n 'np-input-addon--placement-start': placement === 'start',\n 'np-input-addon--placement-end': placement === 'end',\n },\n interactive && 'np-input-addon--interactive',\n {\n 'np-input-addon--padding-sm': padding === 'sm',\n 'np-input-addon--padding-md': padding === 'md',\n },\n )}\n >\n {content}\n </span>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelIdContextProvider>\n );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}

package/build/inputs/InputGroup.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n number \| string \| undefined,\n React.Dispatch<React.SetStateAction<number \| string \| undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n const [paddingStart] = useContext(InputPaddingStartContext);\n const [paddingEnd] = useContext(InputPaddingEndContext);\n\n return {\n paddingInlineStart: paddingStart,\n paddingInlineEnd: paddingEnd,\n } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n content: React.ReactNode;\n initialContentWidth?: number \| string;\n interactive?: boolean;\n padding?: 'none' \| 'sm' \| 'md';\n}\n\nexport interface InputGroupProps {\n addonStart?: InputGroupAddon;\n addonEnd?: InputGroupAddon;\n disabled?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n initialContentWidth,\n padding = inputAddonDefaultPadding,\n}: Pick<\n InputGroupAddon,\n 'initialContentWidth' \| 'padding'\n> = {}): () => InputPaddingContextType[0] {\n return () =>\n initialContentWidth != null\n ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n inputAddonContentWidthAddendByPadding[padding],\n )})`\n : undefined;\n}\n\nexport function InputGroup({\n addonStart,\n addonEnd,\n disabled,\n className,\n children,\n}: InputGroupProps) {\n const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n return (\n <InputPaddingStartContext.Provider\n value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n >\n <InputPaddingEndContext.Provider\n value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n >\n <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>\n {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n {children}\n {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n </fieldset>\n </InputPaddingEndContext.Provider>\n </InputPaddingStartContext.Provider>\n );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n placement: 'start' \| 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n none: 0,\n sm: '1rem',\n md: '1.5rem',\n} satisfies {\n [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n placement,\n content,\n interactive,\n padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n const [, setInputPadding] = useContext(\n placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n );\n\n const ref = useRef<HTMLSpanElement>(null);\n useResizeObserver(ref, (entry) => {\n // TODO: Remove fallback once most browsers support `borderBoxSize`\n const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n if (inlineSize != null) {\n setInputPadding(inlineSize);\n } else {\n const targetStyle = getComputedStyle(entry.target);\n setInputPadding(\n entry.contentRect.width +\n Number.parseFloat(targetStyle.paddingInlineStart) +\n Number.parseFloat(targetStyle.paddingInlineEnd),\n );\n }\n });\n\n return (\n /* Prevent nested controls from being labeled redundantly */\n <FieldLabelIdContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={clsx(\n 'np-input-addon',\n {\n 'np-input-addon--placement-start': placement === 'start',\n 'np-input-addon--placement-end': placement === 'end',\n },\n interactive && 'np-input-addon--interactive',\n {\n 'np-input-addon--padding-sm': padding === 'sm',\n 'np-input-addon--padding-md': padding === 'md',\n },\n )}\n >\n {content}\n </span>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelIdContextProvider>\n );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":";;;;;;;AAkBA,MAAMA,wBAAwB,gBAAGC,aAAa,CAA0B,CAACC,SAAS,EAAE,MAAK,~~EAAG~~,CAAC,CAAC;AAE9F,MAAMC,sBAAsB,gBAAGF,aAAa,CAA0B,CAACC,SAAS,EAAE,MAAK,~~EAAG~~,CAAC,CAAC;SAE5EE,gBAAgBA,GAAA;AAC9B,EAAA,MAAM,CAACC,YAAY,CAAC,GAAGC,UAAU,CAACN,wBAAwB,CAAC;AAC3D,EAAA,MAAM,CAACO,UAAU,CAAC,GAAGD,UAAU,CAACH,sBAAsB,CAAC;EAEvD,OAAO;AACLK,IAAAA,kBAAkB,EAAEH,YAAY;AAChCI,IAAAA,gBAAgB,EAAEF;GACW;AACjC;AAiBA,SAASG,wBAAwBA,CAAC;EAChCC,mBAAmB;AACnBC,EAAAA,OAAO,GAAGC;AAAwB,CAAA,GAIhC,EAAE,EAAA;EACJ,OAAO,MACLF,mBAAmB,IAAI,IAAI,GACvB,~~CAAQG~~,~~KAAAA~~,~~EAAAA~~,gBAAgB,CAACH,mBAAmB,CAAC,MAAMG,gBAAgB,CACjEC,qCAAqC,CAACH,OAAO,CAAC,CAC/C,CAAA,CAAA,CAAG,GACJV,SAAS;AACjB;~~AAEgB~~,~~SAAAc~~,UAAUA,CAAC;EACzBC,UAAU;EACVC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACTC,EAAAA;~~AACgB~~,~~CAAA~~,EAAA;AAChB,EAAA,MAAM,CAAChB,YAAY,EAAEiB,eAAe,CAAC,GAAGC,QAAQ,CAACb,wBAAwB,CAACO,UAAU,CAAC,CAAC;AACtF,EAAA,MAAM,CAACV,UAAU,EAAEiB,aAAa,CAAC,GAAGD,QAAQ,CAACb,wBAAwB,CAACQ,QAAQ,CAAC,CAAC;AAEhF,EAAA,oBACEO,GAAA,CAACzB,wBAAwB,CAAC0B,QAAQ,EAAA;AAChCC,IAAAA,KAAK,EAAEC,OAAO,CAAC,MAAM,CAACvB,YAAY,EAAEiB,eAAe,CAAC,EAAE,CAACjB,YAAY,CAAC,CAAE;AAAAgB,IAAAA,QAAA,eAEtEI,GAAA,CAACtB,sBAAsB,CAACuB,QAAQ,EAAA;AAC9BC,MAAAA,KAAK,EAAEC,OAAO,CAAC,MAAM,CAACrB,UAAU,EAAEiB,aAAa,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAE;AAAAc,MAAAA,QAAA,eAEhEQ,IAAA,CAAA,UAAA,EAAA;AAAUV,QAAAA,QAAQ,EAAEA,QAAS;AAACC,QAAAA,SAAS,EAAEU,IAAI,CAACV,SAAS,EAAE,gBAAgB,CAAE;AAAAC,QAAAA,QAAA,GACxEJ,UAAU,IAAI,IAAI,gBAAGQ,GAAA,CAACM,UAAU,EAAA;AAACC,UAAAA,SAAS,EAAC,OAAO;UAAA,GAAKf;AAAU,UAAI,GAAG,IAAI,EAC5EI,QAAQ,EACRH,QAAQ,IAAI,IAAI,gBAAGO,GAAA,CAACM,UAAU,EAAA;AAACC,UAAAA,SAAS,EAAC,KAAK;UAAA,GAAKd;UAAY,GAAG,IAAI;OAC/D;KACqB;AACnC,GAAmC,CAAC;AAExC;AAMA,MAAMH,qCAAqC,GAAG;AAC5CkB,EAAAA,IAAI,EAAE,CAAC;AACPC,EAAAA,EAAE,EAAE,MAAM;AACVC,EAAAA,EAAE,EAAE;CAGL;AAED,MAAMtB,wBAAwB,GAAG,IAAyC;AAE1E,SAASkB,UAAUA,CAAC;EAClBC,SAAS;EACTI,OAAO;EACPC,WAAW;AACXzB,EAAAA,OAAO,GAAGC;~~AACM~~,~~CAAA~~,EAAA;AAChB,EAAA,MAAM,GAAGyB,eAAe,CAAC,GAAGhC,UAAU,CACpC0B,SAAS,KAAK,OAAO,GAAGhC,wBAAwB,GAAGG,sBAAsB,CAC1E;AAED,EAAA,MAAMoC,GAAG,GAAGC,MAAM,CAAkB,IAAI,CAAC;AACzCC,EAAAA,iBAAiB,CAACF,GAAG,EAAGG,KAAK,IAAI;AAC/B;IACA,MAAMC,UAAU,GAAGD,KAAK,CAACE,aAAa,GAAG,CAAC,CAAC,EAAED,UAAU;IACvD,IAAIA,UAAU,IAAI,IAAI,EAAE;MACtBL,eAAe,CAACK,UAAU,CAAC;AAC7B,~~KAAC~~,MAAM;AACL,MAAA,MAAME,WAAW,GAAGC,gBAAgB,CAACJ,KAAK,CAACK,MAAM,CAAC;MAClDT,eAAe,CACbI,KAAK,CAACM,WAAW,CAACC,KAAK,GACrBC,MAAM,CAACC,UAAU,CAACN,WAAW,CAACrC,kBAAkB,CAAC,GACjD0C,MAAM,CAACC,UAAU,CAACN,WAAW,CAACpC,gBAAgB,CAAC,CAClD;AACH;AACF,~~GAAC~~,CAAC;EAEF,iFAEEgB,GAAA,CAAC2B,2BAA2B,EAAA;AAACzB,IAAAA,KAAK,EAAEzB,SAAU;IAAAmB,QAAA,eAC5CI,GAAA,CAAC4B,sBAAsB,EAAA;AAAC1B,MAAAA,KAAK,EAAEzB,SAAU;MAAAmB,QAAA,eACvCI,GAAA,CAAC6B,wBAAwB,EAAA;AAAC3B,QAAAA,KAAK,EAAEzB,SAAU;QAAAmB,QAAA,eACzCI,GAAA,CAAC8B,oBAAoB,EAAA;AAAC5B,UAAAA,KAAK,EAAEzB,SAAU;AAAAmB,UAAAA,QAAA,eACrCI,GAAA,CAAA,MAAA,EAAA;AACEc,YAAAA,GAAG,EAAEA,GAAI;AACTnB,YAAAA,SAAS,EAAEU,IAAI,CACb,gBAAgB,EAChB;cACE,iCAAiC,EAAEE,SAAS,KAAK,OAAO;cACxD,+BAA+B,EAAEA,SAAS,KAAK;aAChD,EACDK,WAAW,IAAI,6BAA6B,EAC5C;cACE,4BAA4B,EAAEzB,OAAO,KAAK,IAAI;cAC9C,4BAA4B,EAAEA,OAAO,KAAK;AAC3C,aAAA,CACD;AAAAS,YAAAA,QAAA,EAEDe;WACG;SACc;OACE;KACJ;AAC1B,GAA6B,CAAC;AAElC;;;;"}
1	+ {"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n number \| string \| undefined,\n React.Dispatch<React.SetStateAction<number \| string \| undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n const [paddingStart] = useContext(InputPaddingStartContext);\n const [paddingEnd] = useContext(InputPaddingEndContext);\n\n return {\n paddingInlineStart: paddingStart,\n paddingInlineEnd: paddingEnd,\n } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n content: React.ReactNode;\n initialContentWidth?: number \| string;\n interactive?: boolean;\n padding?: 'none' \| 'sm' \| 'md';\n}\n\nexport interface InputGroupProps {\n addonStart?: InputGroupAddon;\n addonEnd?: InputGroupAddon;\n disabled?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n initialContentWidth,\n padding = inputAddonDefaultPadding,\n}: Pick<\n InputGroupAddon,\n 'initialContentWidth' \| 'padding'\n> = {}): () => InputPaddingContextType[0] {\n return () =>\n initialContentWidth != null\n ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n inputAddonContentWidthAddendByPadding[padding],\n )})`\n : undefined;\n}\n\nexport function InputGroup({\n addonStart,\n addonEnd,\n disabled,\n className,\n children,\n}: InputGroupProps) {\n const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n return (\n <InputPaddingStartContext.Provider\n value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n >\n <InputPaddingEndContext.Provider\n value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n >\n <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>\n {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n {children}\n {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n </fieldset>\n </InputPaddingEndContext.Provider>\n </InputPaddingStartContext.Provider>\n );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n placement: 'start' \| 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n none: 0,\n sm: '1rem',\n md: '1.5rem',\n} satisfies {\n [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n placement,\n content,\n interactive,\n padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n const [, setInputPadding] = useContext(\n placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n );\n\n const ref = useRef<HTMLSpanElement>(null);\n useResizeObserver(ref, (entry) => {\n // TODO: Remove fallback once most browsers support `borderBoxSize`\n const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n if (inlineSize != null) {\n setInputPadding(inlineSize);\n } else {\n const targetStyle = getComputedStyle(entry.target);\n setInputPadding(\n entry.contentRect.width +\n Number.parseFloat(targetStyle.paddingInlineStart) +\n Number.parseFloat(targetStyle.paddingInlineEnd),\n );\n }\n });\n\n return (\n /* Prevent nested controls from being labeled redundantly */\n <FieldLabelIdContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={clsx(\n 'np-input-addon',\n {\n 'np-input-addon--placement-start': placement === 'start',\n 'np-input-addon--placement-end': placement === 'end',\n },\n interactive && 'np-input-addon--interactive',\n {\n 'np-input-addon--padding-sm': padding === 'sm',\n 'np-input-addon--padding-md': padding === 'md',\n },\n )}\n >\n {content}\n </span>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelIdContextProvider>\n );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":";;;;;;;AAkBA,MAAMA,wBAAwB,gBAAGC,aAAa,CAA0B,CAACC,SAAS,EAAE,MAAK,CAAE,CAAC,CAAC,CAAC;AAE9F,MAAMC,sBAAsB,gBAAGF,aAAa,CAA0B,CAACC,SAAS,EAAE,MAAK,CAAE,CAAC,CAAC,CAAC;SAE5EE,gBAAgBA,GAAA;AAC9B,EAAA,MAAM,CAACC,YAAY,CAAC,GAAGC,UAAU,CAACN,wBAAwB,CAAC;AAC3D,EAAA,MAAM,CAACO,UAAU,CAAC,GAAGD,UAAU,CAACH,sBAAsB,CAAC;EAEvD,OAAO;AACLK,IAAAA,kBAAkB,EAAEH,YAAY;AAChCI,IAAAA,gBAAgB,EAAEF;GACW;AACjC;AAiBA,SAASG,wBAAwBA,CAAC;EAChCC,mBAAmB;AACnBC,EAAAA,OAAO,GAAGC;AAAwB,CAAA,GAIhC,EAAE,EAAA;EACJ,OAAO,MACLF,mBAAmB,IAAI,IAAI,GACvB,CAAA,KAAA,EAAQG,gBAAgB,CAACH,mBAAmB,CAAC,MAAMG,gBAAgB,CACjEC,qCAAqC,CAACH,OAAO,CAAC,CAC/C,CAAA,CAAA,CAAG,GACJV,SAAS;AACjB;AAEM,SAAUc,UAAUA,CAAC;EACzBC,UAAU;EACVC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACTC,EAAAA;AAAQ,CACQ,EAAA;AAChB,EAAA,MAAM,CAAChB,YAAY,EAAEiB,eAAe,CAAC,GAAGC,QAAQ,CAACb,wBAAwB,CAACO,UAAU,CAAC,CAAC;AACtF,EAAA,MAAM,CAACV,UAAU,EAAEiB,aAAa,CAAC,GAAGD,QAAQ,CAACb,wBAAwB,CAACQ,QAAQ,CAAC,CAAC;AAEhF,EAAA,oBACEO,GAAA,CAACzB,wBAAwB,CAAC0B,QAAQ,EAAA;AAChCC,IAAAA,KAAK,EAAEC,OAAO,CAAC,MAAM,CAACvB,YAAY,EAAEiB,eAAe,CAAC,EAAE,CAACjB,YAAY,CAAC,CAAE;AAAAgB,IAAAA,QAAA,eAEtEI,GAAA,CAACtB,sBAAsB,CAACuB,QAAQ,EAAA;AAC9BC,MAAAA,KAAK,EAAEC,OAAO,CAAC,MAAM,CAACrB,UAAU,EAAEiB,aAAa,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAE;AAAAc,MAAAA,QAAA,eAEhEQ,IAAA,CAAA,UAAA,EAAA;AAAUV,QAAAA,QAAQ,EAAEA,QAAS;AAACC,QAAAA,SAAS,EAAEU,IAAI,CAACV,SAAS,EAAE,gBAAgB,CAAE;AAAAC,QAAAA,QAAA,GACxEJ,UAAU,IAAI,IAAI,gBAAGQ,GAAA,CAACM,UAAU,EAAA;AAACC,UAAAA,SAAS,EAAC,OAAO;UAAA,GAAKf;AAAU,UAAI,GAAG,IAAI,EAC5EI,QAAQ,EACRH,QAAQ,IAAI,IAAI,gBAAGO,GAAA,CAACM,UAAU,EAAA;AAACC,UAAAA,SAAS,EAAC,KAAK;UAAA,GAAKd;UAAY,GAAG,IAAI;OAC/D;KACqB;AACnC,GAAmC,CAAC;AAExC;AAMA,MAAMH,qCAAqC,GAAG;AAC5CkB,EAAAA,IAAI,EAAE,CAAC;AACPC,EAAAA,EAAE,EAAE,MAAM;AACVC,EAAAA,EAAE,EAAE;CAGL;AAED,MAAMtB,wBAAwB,GAAG,IAAyC;AAE1E,SAASkB,UAAUA,CAAC;EAClBC,SAAS;EACTI,OAAO;EACPC,WAAW;AACXzB,EAAAA,OAAO,GAAGC;AAAwB,CAClB,EAAA;AAChB,EAAA,MAAM,GAAGyB,eAAe,CAAC,GAAGhC,UAAU,CACpC0B,SAAS,KAAK,OAAO,GAAGhC,wBAAwB,GAAGG,sBAAsB,CAC1E;AAED,EAAA,MAAMoC,GAAG,GAAGC,MAAM,CAAkB,IAAI,CAAC;AACzCC,EAAAA,iBAAiB,CAACF,GAAG,EAAGG,KAAK,IAAI;AAC/B;IACA,MAAMC,UAAU,GAAGD,KAAK,CAACE,aAAa,GAAG,CAAC,CAAC,EAAED,UAAU;IACvD,IAAIA,UAAU,IAAI,IAAI,EAAE;MACtBL,eAAe,CAACK,UAAU,CAAC;AAC7B,IAAA,CAAC,MAAM;AACL,MAAA,MAAME,WAAW,GAAGC,gBAAgB,CAACJ,KAAK,CAACK,MAAM,CAAC;MAClDT,eAAe,CACbI,KAAK,CAACM,WAAW,CAACC,KAAK,GACrBC,MAAM,CAACC,UAAU,CAACN,WAAW,CAACrC,kBAAkB,CAAC,GACjD0C,MAAM,CAACC,UAAU,CAACN,WAAW,CAACpC,gBAAgB,CAAC,CAClD;AACH,IAAA;AACF,EAAA,CAAC,CAAC;EAEF,iFAEEgB,GAAA,CAAC2B,2BAA2B,EAAA;AAACzB,IAAAA,KAAK,EAAEzB,SAAU;IAAAmB,QAAA,eAC5CI,GAAA,CAAC4B,sBAAsB,EAAA;AAAC1B,MAAAA,KAAK,EAAEzB,SAAU;MAAAmB,QAAA,eACvCI,GAAA,CAAC6B,wBAAwB,EAAA;AAAC3B,QAAAA,KAAK,EAAEzB,SAAU;QAAAmB,QAAA,eACzCI,GAAA,CAAC8B,oBAAoB,EAAA;AAAC5B,UAAAA,KAAK,EAAEzB,SAAU;AAAAmB,UAAAA,QAAA,eACrCI,GAAA,CAAA,MAAA,EAAA;AACEc,YAAAA,GAAG,EAAEA,GAAI;AACTnB,YAAAA,SAAS,EAAEU,IAAI,CACb,gBAAgB,EAChB;cACE,iCAAiC,EAAEE,SAAS,KAAK,OAAO;cACxD,+BAA+B,EAAEA,SAAS,KAAK;aAChD,EACDK,WAAW,IAAI,6BAA6B,EAC5C;cACE,4BAA4B,EAAEzB,OAAO,KAAK,IAAI;cAC9C,4BAA4B,EAAEA,OAAO,KAAK;AAC3C,aAAA,CACD;AAAAS,YAAAA,QAAA,EAEDe;WACG;SACc;OACE;KACJ;AAC1B,GAA6B,CAAC;AAElC;;;;"}

package/build/inputs/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","sources":["../../src/inputs/SearchInput.tsx"],"sourcesContent":["import { Search } from '@transferwise/icons';\nimport { forwardRef } from 'react';\n\nimport { Size } from '../common';\nimport { Merge } from '../utils';\n\nimport { Input } from './Input';\nimport { InputGroup } from './InputGroup';\n\nexport interface SearchInputProps\n extends Merge<\n React.ComponentPropsWithRef<'input'>,\n {\n size?: Size.SMALL \| Size.MEDIUM;\n shape?: 'rectangle' \| 'pill';\n 'aria-invalid'?: boolean;\n }\n > {}\n\nexport const SearchInput = forwardRef(function SearchInput(\n { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,\n ref: React.ForwardedRef<HTMLInputElement \| null>,\n) {\n return (\n <InputGroup\n addonStart={{\n content: <Search size={size === Size.SMALL ? 16 : 24} />,\n initialContentWidth: size === Size.SMALL ? 16 : 24,\n }}\n disabled={disabled}\n className={className}\n >\n <Input\n ref={ref}\n role=\"searchbox\"\n inputMode=\"search\"\n shape={shape}\n size={size}\n {...restProps}\n />\n </InputGroup>\n );\n});\n"],"names":["SearchInput","forwardRef","shape","size","Size","MEDIUM","disabled","className","restProps","ref","_jsx","InputGroup","addonStart","content","Search","SMALL","initialContentWidth","children","Input","role","inputMode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmBaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AAAEE,EAAAA,KAAK,GAAG,MAAM;QAAEC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC;~~AAA6B~~,~~CAAA~~,EAC3FC,GAAgD,EAAA;EAEhD,oBACEC,cAAA,CAACC,qBAAU,EAAA;AACTC,IAAAA,UAAU,EAAE;MACVC,OAAO,eAAEH,cAAA,CAACI,YAAM,EAAA;QAACX,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACW,KAAK,GAAG,EAAE,GAAG;AAAG,~~OAAG~~,~~CAAA~~;MACxDC,mBAAmB,EAAEb,MAAI,KAAKC,SAAI,CAACW,KAAK,GAAG,EAAE,GAAG;KAChD;AACFT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;IAAAU,QAAA,eAErBP,cAAA,CAACQ,WAAK,EAAA;AACJT,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAC,WAAW;AAChBC,MAAAA,SAAS,EAAC,QAAQ;AAClBlB,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,MAAK;MAAA,GACPK;~~KAER~~;~~AAAA~~,GAAY,CAAC;AAEjB,CAAC;;;;"}
1	+ {"version":3,"file":"SearchInput.js","sources":["../../src/inputs/SearchInput.tsx"],"sourcesContent":["import { Search } from '@transferwise/icons';\nimport { forwardRef } from 'react';\n\nimport { Size } from '../common';\nimport { Merge } from '../utils';\n\nimport { Input } from './Input';\nimport { InputGroup } from './InputGroup';\n\nexport interface SearchInputProps\n extends Merge<\n React.ComponentPropsWithRef<'input'>,\n {\n size?: Size.SMALL \| Size.MEDIUM;\n shape?: 'rectangle' \| 'pill';\n 'aria-invalid'?: boolean;\n }\n > {}\n\nexport const SearchInput = forwardRef(function SearchInput(\n { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,\n ref: React.ForwardedRef<HTMLInputElement \| null>,\n) {\n return (\n <InputGroup\n addonStart={{\n content: <Search size={size === Size.SMALL ? 16 : 24} />,\n initialContentWidth: size === Size.SMALL ? 16 : 24,\n }}\n disabled={disabled}\n className={className}\n >\n <Input\n ref={ref}\n role=\"searchbox\"\n inputMode=\"search\"\n shape={shape}\n size={size}\n {...restProps}\n />\n </InputGroup>\n );\n});\n"],"names":["SearchInput","forwardRef","shape","size","Size","MEDIUM","disabled","className","restProps","ref","_jsx","InputGroup","addonStart","content","Search","SMALL","initialContentWidth","children","Input","role","inputMode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmBaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AAAEE,EAAAA,KAAK,GAAG,MAAM;QAAEC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAS,CAAoB,EAC3FC,GAAgD,EAAA;EAEhD,oBACEC,cAAA,CAACC,qBAAU,EAAA;AACTC,IAAAA,UAAU,EAAE;MACVC,OAAO,eAAEH,cAAA,CAACI,YAAM,EAAA;QAACX,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACW,KAAK,GAAG,EAAE,GAAG;AAAG,OAAA,CAAG;MACxDC,mBAAmB,EAAEb,MAAI,KAAKC,SAAI,CAACW,KAAK,GAAG,EAAE,GAAG;KAChD;AACFT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;IAAAU,QAAA,eAErBP,cAAA,CAACQ,WAAK,EAAA;AACJT,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAC,WAAW;AAChBC,MAAAA,SAAS,EAAC,QAAQ;AAClBlB,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,MAAK;MAAA,GACPK;KAAU;AAElB,GAAY,CAAC;AAEjB,CAAC;;;;"}

package/build/inputs/SearchInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.mjs","sources":["../../src/inputs/SearchInput.tsx"],"sourcesContent":["import { Search } from '@transferwise/icons';\nimport { forwardRef } from 'react';\n\nimport { Size } from '../common';\nimport { Merge } from '../utils';\n\nimport { Input } from './Input';\nimport { InputGroup } from './InputGroup';\n\nexport interface SearchInputProps\n extends Merge<\n React.ComponentPropsWithRef<'input'>,\n {\n size?: Size.SMALL \| Size.MEDIUM;\n shape?: 'rectangle' \| 'pill';\n 'aria-invalid'?: boolean;\n }\n > {}\n\nexport const SearchInput = forwardRef(function SearchInput(\n { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,\n ref: React.ForwardedRef<HTMLInputElement \| null>,\n) {\n return (\n <InputGroup\n addonStart={{\n content: <Search size={size === Size.SMALL ? 16 : 24} />,\n initialContentWidth: size === Size.SMALL ? 16 : 24,\n }}\n disabled={disabled}\n className={className}\n >\n <Input\n ref={ref}\n role=\"searchbox\"\n inputMode=\"search\"\n shape={shape}\n size={size}\n {...restProps}\n />\n </InputGroup>\n );\n});\n"],"names":["SearchInput","forwardRef","shape","size","Size","MEDIUM","disabled","className","restProps","ref","_jsx","InputGroup","addonStart","content","Search","SMALL","initialContentWidth","children","Input","role","inputMode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AAAEE,EAAAA,KAAK,GAAG,MAAM;EAAEC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC;~~AAA6B~~,~~CAAA~~,EAC3FC,GAAgD,EAAA;EAEhD,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTC,IAAAA,UAAU,EAAE;MACVC,OAAO,eAAEH,GAAA,CAACI,MAAM,EAAA;QAACX,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACW,KAAK,GAAG,EAAE,GAAG;AAAG,~~OAAG~~,~~CAAA~~;MACxDC,mBAAmB,EAAEb,IAAI,KAAKC,IAAI,CAACW,KAAK,GAAG,EAAE,GAAG;KAChD;AACFT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;IAAAU,QAAA,eAErBP,GAAA,CAACQ,KAAK,EAAA;AACJT,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAC,WAAW;AAChBC,MAAAA,SAAS,EAAC,QAAQ;AAClBlB,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;MAAA,GACPK;~~KAER~~;~~AAAA~~,GAAY,CAAC;AAEjB,CAAC;;;;"}
1	+ {"version":3,"file":"SearchInput.mjs","sources":["../../src/inputs/SearchInput.tsx"],"sourcesContent":["import { Search } from '@transferwise/icons';\nimport { forwardRef } from 'react';\n\nimport { Size } from '../common';\nimport { Merge } from '../utils';\n\nimport { Input } from './Input';\nimport { InputGroup } from './InputGroup';\n\nexport interface SearchInputProps\n extends Merge<\n React.ComponentPropsWithRef<'input'>,\n {\n size?: Size.SMALL \| Size.MEDIUM;\n shape?: 'rectangle' \| 'pill';\n 'aria-invalid'?: boolean;\n }\n > {}\n\nexport const SearchInput = forwardRef(function SearchInput(\n { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,\n ref: React.ForwardedRef<HTMLInputElement \| null>,\n) {\n return (\n <InputGroup\n addonStart={{\n content: <Search size={size === Size.SMALL ? 16 : 24} />,\n initialContentWidth: size === Size.SMALL ? 16 : 24,\n }}\n disabled={disabled}\n className={className}\n >\n <Input\n ref={ref}\n role=\"searchbox\"\n inputMode=\"search\"\n shape={shape}\n size={size}\n {...restProps}\n />\n </InputGroup>\n );\n});\n"],"names":["SearchInput","forwardRef","shape","size","Size","MEDIUM","disabled","className","restProps","ref","_jsx","InputGroup","addonStart","content","Search","SMALL","initialContentWidth","children","Input","role","inputMode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AAAEE,EAAAA,KAAK,GAAG,MAAM;EAAEC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAS,CAAoB,EAC3FC,GAAgD,EAAA;EAEhD,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTC,IAAAA,UAAU,EAAE;MACVC,OAAO,eAAEH,GAAA,CAACI,MAAM,EAAA;QAACX,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACW,KAAK,GAAG,EAAE,GAAG;AAAG,OAAA,CAAG;MACxDC,mBAAmB,EAAEb,IAAI,KAAKC,IAAI,CAACW,KAAK,GAAG,EAAE,GAAG;KAChD;AACFT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;IAAAU,QAAA,eAErBP,GAAA,CAACQ,KAAK,EAAA;AACJT,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAC,WAAW;AAChBC,MAAAA,SAAS,EAAC,QAAQ;AAClBlB,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;MAAA,GACPK;KAAU;AAElB,GAAY,CAAC;AAEjB,CAAC;;;;"}