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

@transferwise/components 46.119.5 → 46.120.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2436) hide show

package/build/common/Option/Option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Option.js","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' \| 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps \| AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement \| HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n additionalContent,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className={clsx('media')}>\n {media && (\n <div className=\"media-left\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n {/ @ts-expect-error div can have role and aria-lavel props /}\n <Body\n type=\"body-large-bold\"\n // for a11y this needs to be a header but for SEO it shouldn't be `h` tag\n // so we enable header semantics via `role` and `aria-level` attrs\n role=\"heading\"\n aria-level=\"4\"\n className=\"text-primary np-option__title\"\n >\n {title}\n </Body>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"media-right\">{button}</div>\n </div>\n {additionalContent ? (\n <div className=\"np-option-additional-content\">{additionalContent}</div>\n ) : null}\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;;;;;AAAA;AAsCA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC;~~AAAI~~,~~CACR~~,EACDC,SAAS,~~KACP~~;~~AACF~~,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO;EAEpC,oBACEc,eAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE;~~KACjC~~,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,eAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,SAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EACxBT,eAAe,gBACdU,cAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,SAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX;~~AACnB~~,~~WAAA~~,CAAE;AAAAY,UAAAA,QAAA,EAEFrB;SACE,CAAC,gBAENsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB;SAAW;OAEvD,CACN,eACDkB,eAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,cAAA,CAACC,YAAI,EAAA;AACHC,UAAAA,IAAI,EAAC;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB;AAAK,SACF,~~CACN~~,~~EAACC~~,OAAO,iBAAIoB,cAAA,CAACC,YAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB;AAAO,SAAO,CAAC;OACnE,~~CACL~~,~~eAAAoB~~,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB;AAAM,OAAM,~~CAC5C~~;AAAA,~~KAAK~~,~~CACL~~,~~EAACS~~,iBAAiB,gBAChBQ,cAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAEP;KAAuB,CAAC,GACrE,IAAI;AAAA,GACD,CAAC;AAEd,~~CAAC~~;;;;"}
1	+ {"version":3,"file":"Option.js","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' \| 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps \| AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement \| HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n additionalContent,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className={clsx('media')}>\n {media && (\n <div className=\"media-left\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n {/ @ts-expect-error div can have role and aria-lavel props /}\n <Body\n type=\"body-large-bold\"\n // for a11y this needs to be a header but for SEO it shouldn't be `h` tag\n // so we enable header semantics via `role` and `aria-level` attrs\n role=\"heading\"\n aria-level=\"4\"\n className=\"text-primary np-option__title\"\n >\n {title}\n </Body>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"media-right\">{button}</div>\n </div>\n {additionalContent ? (\n <div className=\"np-option-additional-content\">{additionalContent}</div>\n ) : null}\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;;;;;AAAA;AAsCA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC;AACL,CAAC,EACDC,SAAS,KACN;AACH,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO;EAEpC,oBACEc,eAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE;AAClC,KAAC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,eAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,SAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EACxBT,eAAe,gBACdU,cAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,SAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX;AACpB,WAAC,CAAE;AAAAY,UAAAA,QAAA,EAEFrB;SACE,CAAC,gBAENsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB;SAAW;OAEvD,CACN,eACDkB,eAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,cAAA,CAACC,YAAI,EAAA;AACHC,UAAAA,IAAI,EAAC;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB;AAAK,SACF,CAAC,EACNC,OAAO,iBAAIoB,cAAA,CAACC,YAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB;AAAO,SAAO,CAAC;OACnE,CAAC,eACNoB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB;AAAM,OAAM,CAAC;AAAA,KACxC,CAAC,EACLS,iBAAiB,gBAChBQ,cAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAEP;KAAuB,CAAC,GACrE,IAAI;AAAA,GACD,CAAC;AAEd,CACF;;;;"}

package/build/common/Option/Option.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Option.mjs","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' \| 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps \| AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement \| HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n additionalContent,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className={clsx('media')}>\n {media && (\n <div className=\"media-left\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n {/ @ts-expect-error div can have role and aria-lavel props /}\n <Body\n type=\"body-large-bold\"\n // for a11y this needs to be a header but for SEO it shouldn't be `h` tag\n // so we enable header semantics via `role` and `aria-level` attrs\n role=\"heading\"\n aria-level=\"4\"\n className=\"text-primary np-option__title\"\n >\n {title}\n </Body>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"media-right\">{button}</div>\n </div>\n {additionalContent ? (\n <div className=\"np-option-additional-content\">{additionalContent}</div>\n ) : null}\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;AAAA;AAsCA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC;~~AAAI~~,~~CACR~~,EACDC,SAAS,~~KACP~~;~~AACF~~,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO;EAEpC,oBACEc,IAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,IAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE;~~KACjC~~,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,IAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,IAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,GAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EACxBT,eAAe,gBACdU,GAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,IAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX;~~AACnB~~,~~WAAA~~,CAAE;AAAAY,UAAAA,QAAA,EAEFrB;SACE,CAAC,gBAENsB,GAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB;SAAW;OAEvD,CACN,eACDkB,IAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,GAAA,CAACC,IAAI,EAAA;AACHC,UAAAA,IAAI,EAAC;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB;AAAK,SACF,~~CACN~~,~~EAACC~~,OAAO,iBAAIoB,GAAA,CAACC,IAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB;AAAO,SAAO,CAAC;OACnE,~~CACL~~,~~eAAAoB~~,GAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB;AAAM,OAAM,~~CAC5C~~;AAAA,~~KAAK~~,~~CACL~~,~~EAACS~~,iBAAiB,gBAChBQ,GAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAEP;KAAuB,CAAC,GACrE,IAAI;AAAA,GACD,CAAC;AAEd,~~CAAC~~;;;;"}
1	+ {"version":3,"file":"Option.mjs","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' \| 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps \| AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement \| HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n additionalContent,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className={clsx('media')}>\n {media && (\n <div className=\"media-left\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n {/ @ts-expect-error div can have role and aria-lavel props /}\n <Body\n type=\"body-large-bold\"\n // for a11y this needs to be a header but for SEO it shouldn't be `h` tag\n // so we enable header semantics via `role` and `aria-level` attrs\n role=\"heading\"\n aria-level=\"4\"\n className=\"text-primary np-option__title\"\n >\n {title}\n </Body>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"media-right\">{button}</div>\n </div>\n {additionalContent ? (\n <div className=\"np-option-additional-content\">{additionalContent}</div>\n ) : null}\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;AAAA;AAsCA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC;AACL,CAAC,EACDC,SAAS,KACN;AACH,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO;EAEpC,oBACEc,IAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,IAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE;AAClC,KAAC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,IAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,IAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,GAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EACxBT,eAAe,gBACdU,GAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,IAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX;AACpB,WAAC,CAAE;AAAAY,UAAAA,QAAA,EAEFrB;SACE,CAAC,gBAENsB,GAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB;SAAW;OAEvD,CACN,eACDkB,IAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,GAAA,CAACC,IAAI,EAAA;AACHC,UAAAA,IAAI,EAAC;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB;AAAK,SACF,CAAC,EACNC,OAAO,iBAAIoB,GAAA,CAACC,IAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB;AAAO,SAAO,CAAC;OACnE,CAAC,eACNoB,GAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB;AAAM,OAAM,CAAC;AAAA,KACxC,CAAC,EACLS,iBAAiB,gBAChBQ,GAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAEP;KAAuB,CAAC,GACrE,IAAI;AAAA,GACD,CAAC;AAEd,CACF;;;;"}

package/build/common/RadioButton/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../../../src/common/RadioButton/RadioButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface RadioButtonProps<T extends string \| number = string> {\n id?: string;\n name: string;\n checked?: boolean;\n onChange?: (value: T) => void;\n disabled?: boolean;\n value?: T;\n readOnly?: boolean;\n className?: string;\n 'aria-describedby'?: string;\n}\n\nexport default function RadioButton<T extends string \| number = ''>({\n id,\n value = '' as T,\n name,\n checked,\n onChange,\n disabled,\n readOnly,\n className,\n 'aria-describedby': ariaDescribedBy,\n}: RadioButtonProps<T>) {\n return (\n <>\n <input\n type=\"radio\"\n className={clsx('sr-only', className)}\n id={id}\n value={value}\n name={name}\n checked={checked}\n disabled={disabled \|\| readOnly}\n aria-describedby={ariaDescribedBy}\n onChange={() => {\n if (!checked) {\n onChange?.(value);\n }\n }}\n />\n <span className={clsx('tw-radio-button', { checked, disabled: disabled \|\| readOnly })}>\n <span className=\"tw-radio-check\" />\n </span>\n </>\n );\n}\n"],"names":["RadioButton","id","value","name","checked","onChange","disabled","readOnly","className","ariaDescribedBy","_jsxs","_Fragment","children","_jsx","type","clsx"],"mappings":";;;;;;;~~AAcc~~,~~SAAUA~~,WAAWA,CAAiC;EAClEC,EAAE;AACFC,EAAAA,KAAK,GAAG,EAAO;EACfC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACT,EAAA,kBAAkB,EAAEC;~~AAAe~~,~~CACf~~,~~EAAA~~;~~EACpB~~,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEC,cAAA,CAAA,OAAA,EAAA;AACEC,MAAAA,IAAI,EAAC,OAAO;AACZN,MAAAA,SAAS,EAAEO,SAAI,CAAC,SAAS,EAAEP,SAAS,CAAE;AACtCP,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;MACjBE,QAAQ,EAAEA,QAAQ,IAAIC,QAAS;AAC/B,MAAA,kBAAA,EAAkBE,eAAgB;MAClCJ,QAAQ,EAAEA,~~MAAK~~;~~QACb~~,IAAI,CAACD,OAAO,EAAE;UACZC,QAAQ,GAAGH,KAAK,CAAC;AACnB,QAAA;AACF,MAAA;~~KAAE~~,~~CAEJ~~,~~eAAAW~~,cAAA,CAAA,MAAA,EAAA;AAAML,MAAAA,SAAS,EAAEO,SAAI,CAAC,iBAAiB,EAAE;QAAEX,OAAO;QAAEE,QAAQ,EAAEA,QAAQ,IAAIC;~~AAAQ~~,~~OAAE~~,CAAE;AAAAK,MAAAA,QAAA,eACpFC,cAAA,CAAA,MAAA,EAAA;AAAML,QAAAA,SAAS,EAAC;~~OAAgB~~;~~AAClC~~,~~KAAM~~,~~CACR~~;AAAA,~~GAAA~~,~~CAAG~~;AAEP;;;;"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../../../src/common/RadioButton/RadioButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface RadioButtonProps<T extends string \| number = string> {\n id?: string;\n name: string;\n checked?: boolean;\n onChange?: (value: T) => void;\n disabled?: boolean;\n value?: T;\n readOnly?: boolean;\n className?: string;\n 'aria-describedby'?: string;\n}\n\nexport default function RadioButton<T extends string \| number = ''>({\n id,\n value = '' as T,\n name,\n checked,\n onChange,\n disabled,\n readOnly,\n className,\n 'aria-describedby': ariaDescribedBy,\n}: RadioButtonProps<T>) {\n return (\n <>\n <input\n type=\"radio\"\n className={clsx('sr-only', className)}\n id={id}\n value={value}\n name={name}\n checked={checked}\n disabled={disabled \|\| readOnly}\n aria-describedby={ariaDescribedBy}\n onChange={() => {\n if (!checked) {\n onChange?.(value);\n }\n }}\n />\n <span className={clsx('tw-radio-button', { checked, disabled: disabled \|\| readOnly })}>\n <span className=\"tw-radio-check\" />\n </span>\n </>\n );\n}\n"],"names":["RadioButton","id","value","name","checked","onChange","disabled","readOnly","className","ariaDescribedBy","_jsxs","_Fragment","children","_jsx","type","clsx"],"mappings":";;;;;;;AAce,SAASA,WAAWA,CAAiC;EAClEC,EAAE;AACFC,EAAAA,KAAK,GAAG,EAAO;EACfC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACT,EAAA,kBAAkB,EAAEC;AACD,CAAC,EAAE;EACtB,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEC,cAAA,CAAA,OAAA,EAAA;AACEC,MAAAA,IAAI,EAAC,OAAO;AACZN,MAAAA,SAAS,EAAEO,SAAI,CAAC,SAAS,EAAEP,SAAS,CAAE;AACtCP,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;MACjBE,QAAQ,EAAEA,QAAQ,IAAIC,QAAS;AAC/B,MAAA,kBAAA,EAAkBE,eAAgB;MAClCJ,QAAQ,EAAEA,MAAM;QACd,IAAI,CAACD,OAAO,EAAE;UACZC,QAAQ,GAAGH,KAAK,CAAC;AACnB,QAAA;AACF,MAAA;KACD,CAAC,eACFW,cAAA,CAAA,MAAA,EAAA;AAAML,MAAAA,SAAS,EAAEO,SAAI,CAAC,iBAAiB,EAAE;QAAEX,OAAO;QAAEE,QAAQ,EAAEA,QAAQ,IAAIC;AAAS,OAAC,CAAE;AAAAK,MAAAA,QAAA,eACpFC,cAAA,CAAA,MAAA,EAAA;AAAML,QAAAA,SAAS,EAAC;OAAkB;AAAC,KAC/B,CAAC;AAAA,GACP,CAAC;AAEP;;;;"}

package/build/common/RadioButton/RadioButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.mjs","sources":["../../../src/common/RadioButton/RadioButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface RadioButtonProps<T extends string \| number = string> {\n id?: string;\n name: string;\n checked?: boolean;\n onChange?: (value: T) => void;\n disabled?: boolean;\n value?: T;\n readOnly?: boolean;\n className?: string;\n 'aria-describedby'?: string;\n}\n\nexport default function RadioButton<T extends string \| number = ''>({\n id,\n value = '' as T,\n name,\n checked,\n onChange,\n disabled,\n readOnly,\n className,\n 'aria-describedby': ariaDescribedBy,\n}: RadioButtonProps<T>) {\n return (\n <>\n <input\n type=\"radio\"\n className={clsx('sr-only', className)}\n id={id}\n value={value}\n name={name}\n checked={checked}\n disabled={disabled \|\| readOnly}\n aria-describedby={ariaDescribedBy}\n onChange={() => {\n if (!checked) {\n onChange?.(value);\n }\n }}\n />\n <span className={clsx('tw-radio-button', { checked, disabled: disabled \|\| readOnly })}>\n <span className=\"tw-radio-check\" />\n </span>\n </>\n );\n}\n"],"names":["RadioButton","id","value","name","checked","onChange","disabled","readOnly","className","ariaDescribedBy","_jsxs","_Fragment","children","_jsx","type","clsx"],"mappings":";;;~~AAcc~~,~~SAAUA~~,WAAWA,CAAiC;EAClEC,EAAE;AACFC,EAAAA,KAAK,GAAG,EAAO;EACfC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACT,EAAA,kBAAkB,EAAEC;~~AAAe~~,~~CACf~~,~~EAAA~~;~~EACpB~~,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEC,GAAA,CAAA,OAAA,EAAA;AACEC,MAAAA,IAAI,EAAC,OAAO;AACZN,MAAAA,SAAS,EAAEO,IAAI,CAAC,SAAS,EAAEP,SAAS,CAAE;AACtCP,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;MACjBE,QAAQ,EAAEA,QAAQ,IAAIC,QAAS;AAC/B,MAAA,kBAAA,EAAkBE,eAAgB;MAClCJ,QAAQ,EAAEA,~~MAAK~~;~~QACb~~,IAAI,CAACD,OAAO,EAAE;UACZC,QAAQ,GAAGH,KAAK,CAAC;AACnB,QAAA;AACF,MAAA;~~KAAE~~,~~CAEJ~~,~~eAAAW~~,GAAA,CAAA,MAAA,EAAA;AAAML,MAAAA,SAAS,EAAEO,IAAI,CAAC,iBAAiB,EAAE;QAAEX,OAAO;QAAEE,QAAQ,EAAEA,QAAQ,IAAIC;~~AAAQ~~,~~OAAE~~,CAAE;AAAAK,MAAAA,QAAA,eACpFC,GAAA,CAAA,MAAA,EAAA;AAAML,QAAAA,SAAS,EAAC;~~OAAgB~~;~~AAClC~~,~~KAAM~~,~~CACR~~;AAAA,~~GAAA~~,~~CAAG~~;AAEP;;;;"}
1	+ {"version":3,"file":"RadioButton.mjs","sources":["../../../src/common/RadioButton/RadioButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface RadioButtonProps<T extends string \| number = string> {\n id?: string;\n name: string;\n checked?: boolean;\n onChange?: (value: T) => void;\n disabled?: boolean;\n value?: T;\n readOnly?: boolean;\n className?: string;\n 'aria-describedby'?: string;\n}\n\nexport default function RadioButton<T extends string \| number = ''>({\n id,\n value = '' as T,\n name,\n checked,\n onChange,\n disabled,\n readOnly,\n className,\n 'aria-describedby': ariaDescribedBy,\n}: RadioButtonProps<T>) {\n return (\n <>\n <input\n type=\"radio\"\n className={clsx('sr-only', className)}\n id={id}\n value={value}\n name={name}\n checked={checked}\n disabled={disabled \|\| readOnly}\n aria-describedby={ariaDescribedBy}\n onChange={() => {\n if (!checked) {\n onChange?.(value);\n }\n }}\n />\n <span className={clsx('tw-radio-button', { checked, disabled: disabled \|\| readOnly })}>\n <span className=\"tw-radio-check\" />\n </span>\n </>\n );\n}\n"],"names":["RadioButton","id","value","name","checked","onChange","disabled","readOnly","className","ariaDescribedBy","_jsxs","_Fragment","children","_jsx","type","clsx"],"mappings":";;;AAce,SAASA,WAAWA,CAAiC;EAClEC,EAAE;AACFC,EAAAA,KAAK,GAAG,EAAO;EACfC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACT,EAAA,kBAAkB,EAAEC;AACD,CAAC,EAAE;EACtB,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEC,GAAA,CAAA,OAAA,EAAA;AACEC,MAAAA,IAAI,EAAC,OAAO;AACZN,MAAAA,SAAS,EAAEO,IAAI,CAAC,SAAS,EAAEP,SAAS,CAAE;AACtCP,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;MACjBE,QAAQ,EAAEA,QAAQ,IAAIC,QAAS;AAC/B,MAAA,kBAAA,EAAkBE,eAAgB;MAClCJ,QAAQ,EAAEA,MAAM;QACd,IAAI,CAACD,OAAO,EAAE;UACZC,QAAQ,GAAGH,KAAK,CAAC;AACnB,QAAA;AACF,MAAA;KACD,CAAC,eACFW,GAAA,CAAA,MAAA,EAAA;AAAML,MAAAA,SAAS,EAAEO,IAAI,CAAC,iBAAiB,EAAE;QAAEX,OAAO;QAAEE,QAAQ,EAAEA,QAAQ,IAAIC;AAAS,OAAC,CAAE;AAAAK,MAAAA,QAAA,eACpFC,GAAA,CAAA,MAAA,EAAA;AAAML,QAAAA,SAAS,EAAC;OAAkB;AAAC,KAC/B,CAAC;AAAA,GACP,CAAC;AAEP;;;;"}

package/build/common/bottomSheet/BottomSheet.js CHANGED Viewed

@@ -34,12 +34,14 @@ const BottomSheet = ({
   const topBarReference = React.useRef(null);
   const contentReference = React.useRef(null);
   const [pressed, setPressed] = React.useState(false);
   /**
    * Used to track `requestAnimationFrame` requests
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value
    */
   const animationId = React.useRef(0);
   /**
    * Difference between initial coordinate ({@link initialYCoordinate})
    * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events
@@ -48,6 +50,7 @@ const BottomSheet = ({
    */
   const moveOffset = React.useRef(0);
   const initialYCoordinate = React.useRef(0);
   // apply shadow to the bottom of top-bar when scroll over content
   useConditionalListener.useConditionalListener({
     attachListener: props.open && !documentIosClick.isServerSide(),
@@ -120,6 +123,7 @@ const BottomSheet = ({
   function isContentScrollPositionAtTop() {
     return contentReference?.current?.scrollTop !== undefined && contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD;
   }
   /**
    * Calculates how hard user moves component,
    * result value used to determine whether to hide component or re-position to default state
@@ -129,6 +133,7 @@ const BottomSheet = ({
   function calculateOffsetAfterMove(afterMoveYCoordinate) {
     return afterMoveYCoordinate - initialYCoordinate.current;
   }
   /**
    * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component
    * and ensures space for safe zone (32px) at the top.

package/build/common/bottomSheet/BottomSheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheet.js","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n PropsWithChildren,\n SyntheticEvent,\n useContext,\n useRef,\n useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n {\n onClose?: (event: Event \| SyntheticEvent) => void;\n open: boolean;\n } & CommonProps &\n Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'aria-labelledby' \| 'aria-label'>\n>;\n\n/*\n Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n \n Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n \n /\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n const bottomSheetReference = useRef<HTMLDivElement>(null);\n const topBarReference = useRef<HTMLDivElement>(null);\n const contentReference = useRef<HTMLDivElement>(null);\n\n const [pressed, setPressed] = useState<boolean>(false);\n\n /*\n Used to track `requestAnimationFrame` requests\n \n @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n /\n const animationId = useRef<number>(0);\n\n /\n Difference between initial coordinate ({@link initialYCoordinate})\n * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n \n @see {@link calculateOffsetAfterMove}\n /\n const moveOffset = useRef<number>(0);\n const initialYCoordinate = useRef<number>(0);\n\n // apply shadow to the bottom of top-bar when scroll over content\n useConditionalListener({\n attachListener: props.open && !isServerSide(),\n callback: () => {\n if (topBarReference.current !== null) {\n const { classList } = topBarReference.current;\n if (!isContentScrollPositionAtTop()) {\n classList.add('np-bottom-sheet--top-bar--shadow');\n } else {\n classList.remove('np-bottom-sheet--top-bar--shadow');\n }\n }\n },\n eventType: 'scroll',\n parent: isServerSide() ? undefined : document,\n });\n\n function move(newHeight: number): void {\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n }\n }\n\n function close(event: Event \| SyntheticEvent): void {\n setPressed(false);\n moveOffset.current = INITIAL_Y_POSITION;\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.removeProperty('transform');\n }\n if (props.onClose) {\n props.onClose(event);\n }\n }\n\n const onSwipeStart = (\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void => {\n initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n setPressed(true);\n };\n\n const onSwipeMove = (\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void => {\n if (pressed) {\n const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n const offset = calculateOffsetAfterMove(clientY);\n // check whether move is to the bottom only and content scroll position is at the top\n if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n moveOffset.current = offset;\n animationId.current = requestAnimationFrame(() => {\n if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n move(offset);\n }\n });\n }\n }\n };\n\n function onSwipeEnd(\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void {\n // stop moving component\n cancelAnimationFrame(animationId.current);\n setPressed(false);\n // check whether move down is strong enough\n // and content scroll position is at the top to close the component\n if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n close(event);\n }\n // otherwise move component back to default (initial) position\n else {\n move(INITIAL_Y_POSITION);\n }\n moveOffset.current = INITIAL_Y_POSITION;\n }\n\n function isContentScrollPositionAtTop(): boolean {\n return (\n contentReference?.current?.scrollTop !== undefined &&\n contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n );\n }\n\n /\n Calculates how hard user moves component,\n * result value used to determine whether to hide component or re-position to default state\n \n @param afterMoveYCoordinate\n /\n function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n return afterMoveYCoordinate - initialYCoordinate.current;\n }\n\n /\n Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n * and ensures space for safe zone (32px) at the top.\n /\n function setContentMaxHeight(): CSSProperties {\n const safeZoneHeight = '64px';\n const topbarHeight = '32px';\n const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n /\n Calculate _real_ height of the screen (taking into account parts of browser interface).\n \n See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n /\n const screenHeight = `${windowHight 0.01 * 100}px`;\n return {\n maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n };\n }\n\n const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n const overlayId = useContext(OverlayIdContext);\n\n return is400Zoom ? (\n <Drawer\n aria-labelledby={props['aria-labelledby']}\n aria-label={props['aria-label']}\n role={role}\n open={props.open}\n className={props.className}\n onClose={close}\n >\n {props.children}\n </Drawer>\n ) : (\n <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n <SlidingPanel\n ref={bottomSheetReference}\n open={props.open}\n position={Position.BOTTOM}\n className={clsx('np-bottom-sheet', props.className)}\n >\n <div\n id={overlayId}\n aria-labelledby={props['aria-labelledby'] \|\| undefined}\n aria-label={props['aria-label'] \|\| undefined}\n role={role}\n aria-modal\n onTouchStart={onSwipeStart}\n onTouchMove={onSwipeMove}\n onTouchEnd={onSwipeEnd}\n onMouseDown={onSwipeStart}\n onMouseMove={onSwipeMove}\n onMouseUp={onSwipeEnd}\n >\n <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n <div className=\"np-bottom-sheet--handler\" />\n <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n </div>\n <div\n ref={contentReference}\n style={setContentMaxHeight()}\n className=\"np-bottom-sheet--content\"\n >\n {props.children}\n </div>\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
1	+ {"version":3,"file":"BottomSheet.js","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n PropsWithChildren,\n SyntheticEvent,\n useContext,\n useRef,\n useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n {\n onClose?: (event: Event \| SyntheticEvent) => void;\n open: boolean;\n } & CommonProps &\n Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'aria-labelledby' \| 'aria-label'>\n>;\n\n/*\n Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n \n Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n \n /\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n const bottomSheetReference = useRef<HTMLDivElement>(null);\n const topBarReference = useRef<HTMLDivElement>(null);\n const contentReference = useRef<HTMLDivElement>(null);\n\n const [pressed, setPressed] = useState<boolean>(false);\n\n /*\n Used to track `requestAnimationFrame` requests\n \n @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n /\n const animationId = useRef<number>(0);\n\n /\n Difference between initial coordinate ({@link initialYCoordinate})\n * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n \n @see {@link calculateOffsetAfterMove}\n /\n const moveOffset = useRef<number>(0);\n const initialYCoordinate = useRef<number>(0);\n\n // apply shadow to the bottom of top-bar when scroll over content\n useConditionalListener({\n attachListener: props.open && !isServerSide(),\n callback: () => {\n if (topBarReference.current !== null) {\n const { classList } = topBarReference.current;\n if (!isContentScrollPositionAtTop()) {\n classList.add('np-bottom-sheet--top-bar--shadow');\n } else {\n classList.remove('np-bottom-sheet--top-bar--shadow');\n }\n }\n },\n eventType: 'scroll',\n parent: isServerSide() ? undefined : document,\n });\n\n function move(newHeight: number): void {\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n }\n }\n\n function close(event: Event \| SyntheticEvent): void {\n setPressed(false);\n moveOffset.current = INITIAL_Y_POSITION;\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.removeProperty('transform');\n }\n if (props.onClose) {\n props.onClose(event);\n }\n }\n\n const onSwipeStart = (\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void => {\n initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n setPressed(true);\n };\n\n const onSwipeMove = (\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void => {\n if (pressed) {\n const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n const offset = calculateOffsetAfterMove(clientY);\n // check whether move is to the bottom only and content scroll position is at the top\n if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n moveOffset.current = offset;\n animationId.current = requestAnimationFrame(() => {\n if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n move(offset);\n }\n });\n }\n }\n };\n\n function onSwipeEnd(\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void {\n // stop moving component\n cancelAnimationFrame(animationId.current);\n setPressed(false);\n // check whether move down is strong enough\n // and content scroll position is at the top to close the component\n if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n close(event);\n }\n // otherwise move component back to default (initial) position\n else {\n move(INITIAL_Y_POSITION);\n }\n moveOffset.current = INITIAL_Y_POSITION;\n }\n\n function isContentScrollPositionAtTop(): boolean {\n return (\n contentReference?.current?.scrollTop !== undefined &&\n contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n );\n }\n\n /\n Calculates how hard user moves component,\n * result value used to determine whether to hide component or re-position to default state\n \n @param afterMoveYCoordinate\n /\n function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n return afterMoveYCoordinate - initialYCoordinate.current;\n }\n\n /\n Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n * and ensures space for safe zone (32px) at the top.\n /\n function setContentMaxHeight(): CSSProperties {\n const safeZoneHeight = '64px';\n const topbarHeight = '32px';\n const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n /\n Calculate _real_ height of the screen (taking into account parts of browser interface).\n \n See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n /\n const screenHeight = `${windowHight 0.01 * 100}px`;\n return {\n maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n };\n }\n\n const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n const overlayId = useContext(OverlayIdContext);\n\n return is400Zoom ? (\n <Drawer\n aria-labelledby={props['aria-labelledby']}\n aria-label={props['aria-label']}\n role={role}\n open={props.open}\n className={props.className}\n onClose={close}\n >\n {props.children}\n </Drawer>\n ) : (\n <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n <SlidingPanel\n ref={bottomSheetReference}\n open={props.open}\n position={Position.BOTTOM}\n className={clsx('np-bottom-sheet', props.className)}\n >\n <div\n id={overlayId}\n aria-labelledby={props['aria-labelledby'] \|\| undefined}\n aria-label={props['aria-label'] \|\| undefined}\n role={role}\n aria-modal\n onTouchStart={onSwipeStart}\n onTouchMove={onSwipeMove}\n onTouchEnd={onSwipeEnd}\n onMouseDown={onSwipeStart}\n onMouseMove={onSwipeMove}\n onMouseUp={onSwipeEnd}\n >\n <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n <div className=\"np-bottom-sheet--handler\" />\n <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n </div>\n <div\n ref={contentReference}\n style={setContentMaxHeight()}\n className=\"np-bottom-sheet--content\"\n >\n {props.children}\n </div>\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}

package/build/common/bottomSheet/BottomSheet.mjs CHANGED Viewed

@@ -30,12 +30,14 @@ const BottomSheet = ({
   const topBarReference = useRef(null);
   const contentReference = useRef(null);
   const [pressed, setPressed] = useState(false);
   /**
    * Used to track `requestAnimationFrame` requests
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value
    */
   const animationId = useRef(0);
   /**
    * Difference between initial coordinate ({@link initialYCoordinate})
    * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events
@@ -44,6 +46,7 @@ const BottomSheet = ({
    */
   const moveOffset = useRef(0);
   const initialYCoordinate = useRef(0);
   // apply shadow to the bottom of top-bar when scroll over content
   useConditionalListener({
     attachListener: props.open && !isServerSide(),
@@ -116,6 +119,7 @@ const BottomSheet = ({
   function isContentScrollPositionAtTop() {
     return contentReference?.current?.scrollTop !== undefined && contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD;
   }
   /**
    * Calculates how hard user moves component,
    * result value used to determine whether to hide component or re-position to default state
@@ -125,6 +129,7 @@ const BottomSheet = ({
   function calculateOffsetAfterMove(afterMoveYCoordinate) {
     return afterMoveYCoordinate - initialYCoordinate.current;
   }
   /**
    * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component
    * and ensures space for safe zone (32px) at the top.

package/build/common/bottomSheet/BottomSheet.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n PropsWithChildren,\n SyntheticEvent,\n useContext,\n useRef,\n useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n {\n onClose?: (event: Event \| SyntheticEvent) => void;\n open: boolean;\n } & CommonProps &\n Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'aria-labelledby' \| 'aria-label'>\n>;\n\n/*\n Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n \n Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n \n /\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n const bottomSheetReference = useRef<HTMLDivElement>(null);\n const topBarReference = useRef<HTMLDivElement>(null);\n const contentReference = useRef<HTMLDivElement>(null);\n\n const [pressed, setPressed] = useState<boolean>(false);\n\n /*\n Used to track `requestAnimationFrame` requests\n \n @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n /\n const animationId = useRef<number>(0);\n\n /\n Difference between initial coordinate ({@link initialYCoordinate})\n * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n \n @see {@link calculateOffsetAfterMove}\n /\n const moveOffset = useRef<number>(0);\n const initialYCoordinate = useRef<number>(0);\n\n // apply shadow to the bottom of top-bar when scroll over content\n useConditionalListener({\n attachListener: props.open && !isServerSide(),\n callback: () => {\n if (topBarReference.current !== null) {\n const { classList } = topBarReference.current;\n if (!isContentScrollPositionAtTop()) {\n classList.add('np-bottom-sheet--top-bar--shadow');\n } else {\n classList.remove('np-bottom-sheet--top-bar--shadow');\n }\n }\n },\n eventType: 'scroll',\n parent: isServerSide() ? undefined : document,\n });\n\n function move(newHeight: number): void {\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n }\n }\n\n function close(event: Event \| SyntheticEvent): void {\n setPressed(false);\n moveOffset.current = INITIAL_Y_POSITION;\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.removeProperty('transform');\n }\n if (props.onClose) {\n props.onClose(event);\n }\n }\n\n const onSwipeStart = (\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void => {\n initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n setPressed(true);\n };\n\n const onSwipeMove = (\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void => {\n if (pressed) {\n const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n const offset = calculateOffsetAfterMove(clientY);\n // check whether move is to the bottom only and content scroll position is at the top\n if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n moveOffset.current = offset;\n animationId.current = requestAnimationFrame(() => {\n if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n move(offset);\n }\n });\n }\n }\n };\n\n function onSwipeEnd(\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void {\n // stop moving component\n cancelAnimationFrame(animationId.current);\n setPressed(false);\n // check whether move down is strong enough\n // and content scroll position is at the top to close the component\n if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n close(event);\n }\n // otherwise move component back to default (initial) position\n else {\n move(INITIAL_Y_POSITION);\n }\n moveOffset.current = INITIAL_Y_POSITION;\n }\n\n function isContentScrollPositionAtTop(): boolean {\n return (\n contentReference?.current?.scrollTop !== undefined &&\n contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n );\n }\n\n /\n Calculates how hard user moves component,\n * result value used to determine whether to hide component or re-position to default state\n \n @param afterMoveYCoordinate\n /\n function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n return afterMoveYCoordinate - initialYCoordinate.current;\n }\n\n /\n Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n * and ensures space for safe zone (32px) at the top.\n /\n function setContentMaxHeight(): CSSProperties {\n const safeZoneHeight = '64px';\n const topbarHeight = '32px';\n const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n /\n Calculate _real_ height of the screen (taking into account parts of browser interface).\n \n See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n /\n const screenHeight = `${windowHight 0.01 * 100}px`;\n return {\n maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n };\n }\n\n const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n const overlayId = useContext(OverlayIdContext);\n\n return is400Zoom ? (\n <Drawer\n aria-labelledby={props['aria-labelledby']}\n aria-label={props['aria-label']}\n role={role}\n open={props.open}\n className={props.className}\n onClose={close}\n >\n {props.children}\n </Drawer>\n ) : (\n <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n <SlidingPanel\n ref={bottomSheetReference}\n open={props.open}\n position={Position.BOTTOM}\n className={clsx('np-bottom-sheet', props.className)}\n >\n <div\n id={overlayId}\n aria-labelledby={props['aria-labelledby'] \|\| undefined}\n aria-label={props['aria-label'] \|\| undefined}\n role={role}\n aria-modal\n onTouchStart={onSwipeStart}\n onTouchMove={onSwipeMove}\n onTouchEnd={onSwipeEnd}\n onMouseDown={onSwipeStart}\n onMouseMove={onSwipeMove}\n onMouseUp={onSwipeEnd}\n >\n <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n <div className=\"np-bottom-sheet--handler\" />\n <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n </div>\n <div\n ref={contentReference}\n style={setContentMaxHeight()}\n className=\"np-bottom-sheet--content\"\n >\n {props.children}\n </div>\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
1	+ {"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n PropsWithChildren,\n SyntheticEvent,\n useContext,\n useRef,\n useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n {\n onClose?: (event: Event \| SyntheticEvent) => void;\n open: boolean;\n } & CommonProps &\n Pick<HTMLAttributes<HTMLDivElement>, 'role' \| 'aria-labelledby' \| 'aria-label'>\n>;\n\n/*\n Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n \n Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n \n /\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n const bottomSheetReference = useRef<HTMLDivElement>(null);\n const topBarReference = useRef<HTMLDivElement>(null);\n const contentReference = useRef<HTMLDivElement>(null);\n\n const [pressed, setPressed] = useState<boolean>(false);\n\n /*\n Used to track `requestAnimationFrame` requests\n \n @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n /\n const animationId = useRef<number>(0);\n\n /\n Difference between initial coordinate ({@link initialYCoordinate})\n * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n \n @see {@link calculateOffsetAfterMove}\n /\n const moveOffset = useRef<number>(0);\n const initialYCoordinate = useRef<number>(0);\n\n // apply shadow to the bottom of top-bar when scroll over content\n useConditionalListener({\n attachListener: props.open && !isServerSide(),\n callback: () => {\n if (topBarReference.current !== null) {\n const { classList } = topBarReference.current;\n if (!isContentScrollPositionAtTop()) {\n classList.add('np-bottom-sheet--top-bar--shadow');\n } else {\n classList.remove('np-bottom-sheet--top-bar--shadow');\n }\n }\n },\n eventType: 'scroll',\n parent: isServerSide() ? undefined : document,\n });\n\n function move(newHeight: number): void {\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n }\n }\n\n function close(event: Event \| SyntheticEvent): void {\n setPressed(false);\n moveOffset.current = INITIAL_Y_POSITION;\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.removeProperty('transform');\n }\n if (props.onClose) {\n props.onClose(event);\n }\n }\n\n const onSwipeStart = (\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void => {\n initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n setPressed(true);\n };\n\n const onSwipeMove = (\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void => {\n if (pressed) {\n const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n const offset = calculateOffsetAfterMove(clientY);\n // check whether move is to the bottom only and content scroll position is at the top\n if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n moveOffset.current = offset;\n animationId.current = requestAnimationFrame(() => {\n if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n move(offset);\n }\n });\n }\n }\n };\n\n function onSwipeEnd(\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n ): void {\n // stop moving component\n cancelAnimationFrame(animationId.current);\n setPressed(false);\n // check whether move down is strong enough\n // and content scroll position is at the top to close the component\n if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n close(event);\n }\n // otherwise move component back to default (initial) position\n else {\n move(INITIAL_Y_POSITION);\n }\n moveOffset.current = INITIAL_Y_POSITION;\n }\n\n function isContentScrollPositionAtTop(): boolean {\n return (\n contentReference?.current?.scrollTop !== undefined &&\n contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n );\n }\n\n /\n Calculates how hard user moves component,\n * result value used to determine whether to hide component or re-position to default state\n \n @param afterMoveYCoordinate\n /\n function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n return afterMoveYCoordinate - initialYCoordinate.current;\n }\n\n /\n Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n * and ensures space for safe zone (32px) at the top.\n /\n function setContentMaxHeight(): CSSProperties {\n const safeZoneHeight = '64px';\n const topbarHeight = '32px';\n const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n /\n Calculate _real_ height of the screen (taking into account parts of browser interface).\n \n See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n /\n const screenHeight = `${windowHight 0.01 * 100}px`;\n return {\n maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n };\n }\n\n const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n const overlayId = useContext(OverlayIdContext);\n\n return is400Zoom ? (\n <Drawer\n aria-labelledby={props['aria-labelledby']}\n aria-label={props['aria-label']}\n role={role}\n open={props.open}\n className={props.className}\n onClose={close}\n >\n {props.children}\n </Drawer>\n ) : (\n <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n <SlidingPanel\n ref={bottomSheetReference}\n open={props.open}\n position={Position.BOTTOM}\n className={clsx('np-bottom-sheet', props.className)}\n >\n <div\n id={overlayId}\n aria-labelledby={props['aria-labelledby'] \|\| undefined}\n aria-label={props['aria-label'] \|\| undefined}\n role={role}\n aria-modal\n onTouchStart={onSwipeStart}\n onTouchMove={onSwipeMove}\n onTouchEnd={onSwipeEnd}\n onMouseDown={onSwipeStart}\n onMouseMove={onSwipeMove}\n onMouseUp={onSwipeEnd}\n >\n <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n <div className=\"np-bottom-sheet--handler\" />\n <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n </div>\n <div\n ref={contentReference}\n style={setContentMaxHeight()}\n className=\"np-bottom-sheet--content\"\n >\n {props.children}\n </div>\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}

package/build/common/card/Card.js CHANGED Viewed

@@ -8,6 +8,27 @@ var CloseButton = require('../closeButton/CloseButton.js');
 var documentIosClick = require('../domHelpers/documentIosClick.js');
 var jsxRuntime = require('react/jsx-runtime');
+/**
+ * Card component.
+ *
+ * A card is a container for content that is used to group related information.
+ * It can be used to display information in a structured way, and can be
+ * customized with various props to suit different use cases.
+ *
+ * @param {Object} props - The component props.
+ * @param {ReactNode} children - The content to display inside the card.
+ * @param {string} className - Optional class name(s) to add to the card container.
+ * @param {string} id - Optional ID to add to the card container.
+ * @param {boolean} isDisabled - Whether the card is disabled or not.
+ * @param {boolean} isSmall - Whether the card is small or not.
+ * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.
+ * @param {string} testId - Optional ID to add to the card container for testing purposes.
+ * @returns {React.JSX.Element} - The card component.
+ * @example
+ * <Card>
+ *   <p>Hello World!</p>
+ * </Card>
+ */
 const Card = /*#__PURE__*/React.forwardRef(({
   className,
   children = null,

package/build/common/card/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n /** Content to display inside Card. /\n children: ReactNode;\n\n /* Optional prop to specify classNames onto the Card /\n className?: string;\n\n /* Optional prop to specify the ID on to Card /\n id?: string;\n\n /* Specify whether the Card is disabled, or not /\n isDisabled?: boolean;\n\n /* Specify whether the Card is sized small or not /\n isSmall?: boolean;\n\n /* Optionally specify Card onDismiss function /\n onDismiss?: () => void;\n\n /* Optional prop to specify the ID used for testing /\n testId?: string;\n}\n\n/\n Card component.\n \n A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n \n @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n * <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n children = null,\n id,\n isDisabled = false,\n isSmall = false,\n onDismiss,\n testId,\n ...props\n },\n ref,\n ) => {\n const closeButtonReference = useRef(null);\n\n return (\n <div\n ref={ref}\n className={clsx(\n 'np-Card',\n {\n 'np-Card--small': !!isSmall,\n 'is-disabled': !!isDisabled,\n },\n className,\n )}\n id={id}\n data-testid={testId}\n {...props}\n >\n {onDismiss && (\n <CloseButton\n ref={closeButtonReference}\n className=\"np-Card-closeButton\"\n size={isSmall ? 'sm' : 'md'}\n isDisabled={isDisabled}\n testId=\"close-button\"\n onClick={(e) => {\n stopPropagation(e);\n onDismiss();\n }}\n />\n )}\n {children}\n </div>\n );\n },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;;;;;~~AAkDA~~,MAAMA,IAAI,gBAAGC,gBAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;~~AAAK~~,~~CACT~~,EACDC,GAAG,~~KACD~~;~~AACF~~,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,~~SAAS~~,~~CACT~~;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,cAAA,CAACC,uBAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,~~IAAI~~;~~QACbC~~,gCAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;~~KAAE~~,~~CAEL~~,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,~~CAAC~~;~~AAGHH~~,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}
1	+ {"version":3,"file":"Card.js","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n /** Content to display inside Card. /\n children: ReactNode;\n\n /* Optional prop to specify classNames onto the Card /\n className?: string;\n\n /* Optional prop to specify the ID on to Card /\n id?: string;\n\n /* Specify whether the Card is disabled, or not /\n isDisabled?: boolean;\n\n /* Specify whether the Card is sized small or not /\n isSmall?: boolean;\n\n /* Optionally specify Card onDismiss function /\n onDismiss?: () => void;\n\n /* Optional prop to specify the ID used for testing /\n testId?: string;\n}\n\n/\n Card component.\n \n A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n \n @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n * <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n children = null,\n id,\n isDisabled = false,\n isSmall = false,\n onDismiss,\n testId,\n ...props\n },\n ref,\n ) => {\n const closeButtonReference = useRef(null);\n\n return (\n <div\n ref={ref}\n className={clsx(\n 'np-Card',\n {\n 'np-Card--small': !!isSmall,\n 'is-disabled': !!isDisabled,\n },\n className,\n )}\n id={id}\n data-testid={testId}\n {...props}\n >\n {onDismiss && (\n <CloseButton\n ref={closeButtonReference}\n className=\"np-Card-closeButton\"\n size={isSmall ? 'sm' : 'md'}\n isDisabled={isDisabled}\n testId=\"close-button\"\n onClick={(e) => {\n stopPropagation(e);\n onDismiss();\n }}\n />\n )}\n {children}\n </div>\n );\n },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;;;;;AA6BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,IAAI,gBAAGC,gBAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;AACH,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SACF,CAAE;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,cAAA,CAACC,uBAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAK;QACdC,gCAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KACD,CACF,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CACF;AAEAH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}

package/build/common/card/Card.mjs CHANGED Viewed

@@ -4,6 +4,27 @@ import { CloseButton } from '../closeButton/CloseButton.mjs';
 import { stopPropagation } from '../domHelpers/documentIosClick.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
+/**
+ * Card component.
+ *
+ * A card is a container for content that is used to group related information.
+ * It can be used to display information in a structured way, and can be
+ * customized with various props to suit different use cases.
+ *
+ * @param {Object} props - The component props.
+ * @param {ReactNode} children - The content to display inside the card.
+ * @param {string} className - Optional class name(s) to add to the card container.
+ * @param {string} id - Optional ID to add to the card container.
+ * @param {boolean} isDisabled - Whether the card is disabled or not.
+ * @param {boolean} isSmall - Whether the card is small or not.
+ * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.
+ * @param {string} testId - Optional ID to add to the card container for testing purposes.
+ * @returns {React.JSX.Element} - The card component.
+ * @example
+ * <Card>
+ *   <p>Hello World!</p>
+ * </Card>
+ */
 const Card = /*#__PURE__*/forwardRef(({
   className,
   children = null,

package/build/common/card/Card.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.mjs","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n /** Content to display inside Card. /\n children: ReactNode;\n\n /* Optional prop to specify classNames onto the Card /\n className?: string;\n\n /* Optional prop to specify the ID on to Card /\n id?: string;\n\n /* Specify whether the Card is disabled, or not /\n isDisabled?: boolean;\n\n /* Specify whether the Card is sized small or not /\n isSmall?: boolean;\n\n /* Optionally specify Card onDismiss function /\n onDismiss?: () => void;\n\n /* Optional prop to specify the ID used for testing /\n testId?: string;\n}\n\n/\n Card component.\n \n A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n \n @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n * <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n children = null,\n id,\n isDisabled = false,\n isSmall = false,\n onDismiss,\n testId,\n ...props\n },\n ref,\n ) => {\n const closeButtonReference = useRef(null);\n\n return (\n <div\n ref={ref}\n className={clsx(\n 'np-Card',\n {\n 'np-Card--small': !!isSmall,\n 'is-disabled': !!isDisabled,\n },\n className,\n )}\n id={id}\n data-testid={testId}\n {...props}\n >\n {onDismiss && (\n <CloseButton\n ref={closeButtonReference}\n className=\"np-Card-closeButton\"\n size={isSmall ? 'sm' : 'md'}\n isDisabled={isDisabled}\n testId=\"close-button\"\n onClick={(e) => {\n stopPropagation(e);\n onDismiss();\n }}\n />\n )}\n {children}\n </div>\n );\n },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;~~AAkDA~~,MAAMA,IAAI,gBAAGC,UAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;~~AAAK~~,~~CACT~~,EACDC,GAAG,~~KACD~~;~~AACF~~,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,~~SAAS~~,~~CACT~~;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,GAAA,CAACC,WAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,~~IAAI~~;~~QACbC~~,eAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;~~KAAE~~,~~CAEL~~,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,~~CAAC~~;~~AAGHH~~,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}
1	+ {"version":3,"file":"Card.mjs","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n /** Content to display inside Card. /\n children: ReactNode;\n\n /* Optional prop to specify classNames onto the Card /\n className?: string;\n\n /* Optional prop to specify the ID on to Card /\n id?: string;\n\n /* Specify whether the Card is disabled, or not /\n isDisabled?: boolean;\n\n /* Specify whether the Card is sized small or not /\n isSmall?: boolean;\n\n /* Optionally specify Card onDismiss function /\n onDismiss?: () => void;\n\n /* Optional prop to specify the ID used for testing /\n testId?: string;\n}\n\n/\n Card component.\n \n A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n \n @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n * <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n className,\n children = null,\n id,\n isDisabled = false,\n isSmall = false,\n onDismiss,\n testId,\n ...props\n },\n ref,\n ) => {\n const closeButtonReference = useRef(null);\n\n return (\n <div\n ref={ref}\n className={clsx(\n 'np-Card',\n {\n 'np-Card--small': !!isSmall,\n 'is-disabled': !!isDisabled,\n },\n className,\n )}\n id={id}\n data-testid={testId}\n {...props}\n >\n {onDismiss && (\n <CloseButton\n ref={closeButtonReference}\n className=\"np-Card-closeButton\"\n size={isSmall ? 'sm' : 'md'}\n isDisabled={isDisabled}\n testId=\"close-button\"\n onClick={(e) => {\n stopPropagation(e);\n onDismiss();\n }}\n />\n )}\n {children}\n </div>\n );\n },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;AA6BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,IAAI,gBAAGC,UAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;AACH,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SACF,CAAE;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,GAAA,CAACC,WAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAK;QACdC,eAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KACD,CACF,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CACF;AAEAH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}

package/build/common/circle/Circle.js CHANGED Viewed

@@ -8,6 +8,9 @@ var useMedia = require('../hooks/useMedia.js');
 var breakpoint = require('../propsValues/breakpoint.js');
 var jsxRuntime = require('react/jsx-runtime');
+/**
+ * circle like components has custom sizes for icons
+ */
 const MAP_ICON_SIZE = {
   16: 12,
   24: 16,
@@ -17,6 +20,7 @@ const MAP_ICON_SIZE = {
   56: 28,
   72: 36
 };
 /**
  * circle like components have custom typography styles for for default (Inter) font
  *

package/build/common/circle/Circle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 \| 24 \| 32 \| 40 \| 48 \| 56 \| 72;\n\nexport type Props = {\n /*\n Modify underlying element, `div` by default\n /\n as?: React.ElementType;\n /\n Set size of the circle in px, `48` by default\n /\n size?: ShapeSize;\n /\n When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-`)\n as those can be dynamic a at certain viewport sizes\n /\n fixedSize?: boolean;\n enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/\n circle like components has custom sizes for icons\n /\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\n/\n circle like components have custom typography styles for for default (Inter) font\n \n circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n 16: 8,\n 24: 12,\n 32: 14,\n 40: 18,\n 48: 22,\n 56: 26,\n 72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n enableBorder = false,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n ...style,\n }}\n className={clsx(\n 'np-circle',\n { 'np-circle-border': enableBorder },\n 'd-flex align-items-center justify-content-center',\n className,\n )}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;;;;;~~AA2BA~~,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;~~CACL;~~AAED~~;;;;AAIG~~;~~AACH~~,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;~~CACL~~;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;~~AAAK~~,~~CACF~~,EACRC,GAAG,~~EAAA~~;~~EAEH~~,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,cAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;~~KAAc~~,EACpC,kDAAkD,EAClDC,~~SAAS~~,~~CACT~~;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 \| 24 \| 32 \| 40 \| 48 \| 56 \| 72;\n\nexport type Props = {\n /*\n Modify underlying element, `div` by default\n /\n as?: React.ElementType;\n /\n Set size of the circle in px, `48` by default\n /\n size?: ShapeSize;\n /\n When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-`)\n as those can be dynamic a at certain viewport sizes\n /\n fixedSize?: boolean;\n enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/\n circle like components has custom sizes for icons\n /\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\n/\n circle like components have custom typography styles for for default (Inter) font\n \n circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n 16: 8,\n 24: 12,\n 32: 14,\n 40: 18,\n 48: 22,\n 56: 26,\n 72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n enableBorder = false,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n ...style,\n }}\n className={clsx(\n 'np-circle',\n { 'np-circle-border': enableBorder },\n 'd-flex align-items-center justify-content-center',\n className,\n )}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;;;;;AAwBA;AACA;AACA;AACA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;AACN,CAAC;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AACE,CAAC,EACRC,GAAG,EACH;EACA,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,cAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;AAAa,KAAC,EACpC,kDAAkD,EAClDC,SACF,CAAE;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}

package/build/common/circle/Circle.mjs CHANGED Viewed

@@ -4,6 +4,9 @@ import { useMedia } from '../hooks/useMedia.mjs';
 import { Breakpoint } from '../propsValues/breakpoint.mjs';
 import { jsx } from 'react/jsx-runtime';
+/**
+ * circle like components has custom sizes for icons
+ */
 const MAP_ICON_SIZE = {
   16: 12,
   24: 16,
@@ -13,6 +16,7 @@ const MAP_ICON_SIZE = {
   56: 28,
   72: 36
 };
 /**
  * circle like components have custom typography styles for for default (Inter) font
  *

package/build/common/circle/Circle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 \| 24 \| 32 \| 40 \| 48 \| 56 \| 72;\n\nexport type Props = {\n /*\n Modify underlying element, `div` by default\n /\n as?: React.ElementType;\n /\n Set size of the circle in px, `48` by default\n /\n size?: ShapeSize;\n /\n When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-`)\n as those can be dynamic a at certain viewport sizes\n /\n fixedSize?: boolean;\n enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/\n circle like components has custom sizes for icons\n /\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\n/\n circle like components have custom typography styles for for default (Inter) font\n \n circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n 16: 8,\n 24: 12,\n 32: 14,\n 40: 18,\n 48: 22,\n 56: 26,\n 72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n enableBorder = false,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n ...style,\n }}\n className={clsx(\n 'np-circle',\n { 'np-circle-border': enableBorder },\n 'd-flex align-items-center justify-content-center',\n className,\n )}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;~~AA2BA~~,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;~~CACL;~~AAED~~;;;;AAIG~~;~~AACH~~,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;~~CACL~~;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;~~AAAK~~,~~CACF~~,EACRC,GAAG,~~EAAA~~;~~EAEH~~,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,GAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;~~KAAc~~,EACpC,kDAAkD,EAClDC,~~SAAS~~,~~CACT~~;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 \| 24 \| 32 \| 40 \| 48 \| 56 \| 72;\n\nexport type Props = {\n /*\n Modify underlying element, `div` by default\n /\n as?: React.ElementType;\n /\n Set size of the circle in px, `48` by default\n /\n size?: ShapeSize;\n /\n When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-`)\n as those can be dynamic a at certain viewport sizes\n /\n fixedSize?: boolean;\n enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/\n circle like components has custom sizes for icons\n /\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\n/\n circle like components have custom typography styles for for default (Inter) font\n \n circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n 16: 8,\n 24: 12,\n 32: 14,\n 40: 18,\n 48: 22,\n 56: 26,\n 72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n enableBorder = false,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n ...style,\n }}\n className={clsx(\n 'np-circle',\n { 'np-circle-border': enableBorder },\n 'd-flex align-items-center justify-content-center',\n className,\n )}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;AAwBA;AACA;AACA;AACA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;AACN,CAAC;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AACE,CAAC,EACRC,GAAG,EACH;EACA,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,GAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;AAAa,KAAC,EACpC,kDAAkD,EAClDC,SACF,CAAE;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}

package/build/common/closeButton/CloseButton.js CHANGED Viewed

@@ -8,6 +8,9 @@ var size = require('../propsValues/size.js');
 var CloseButton_messages = require('./CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+/**
+ * @deprecated Use `<IconButton />` component instead
+ */
 const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   'aria-label': ariaLabel,
   size: size$1 = size.Size.MEDIUM,

package/build/common/closeButton/CloseButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CloseButton.js","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n React.ComponentPropsWithoutRef<'button'>,\n 'aria-label' \| 'className' \| 'onClick'\n> & {\n size?: SizeExtraSmall \| SizeSmall \| SizeMedium \| SizeLarge;\n filled?: boolean;\n isDisabled?: boolean;\n testId?: string;\n tabIndex?: number;\n};\n\n/*\n @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n {\n 'aria-label': ariaLabel,\n size = Size.MEDIUM,\n filled = false,\n className,\n onClick,\n isDisabled,\n testId,\n tabIndex,\n }: CloseButtonProps,\n reference: React.ForwardedRef<HTMLButtonElement \| null>,\n) {\n const intl = useIntl();\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const Icon = filled ? CrossCircleFill : Cross;\n\n return (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-close-button',\n 'close btn-link',\n 'text-no-decoration',\n {\n 'np-close-button--x-small': size === Size.EXTRA_SMALL,\n 'np-close-button--large': size === Size.MEDIUM,\n 'np-close-button--x-large': size === Size.LARGE,\n },\n className,\n )}\n aria-label={ariaLabel}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n data-testid={testId}\n tabIndex={tabIndex}\n onClick={onClick}\n >\n <Icon size={size === Size.SMALL \|\| size === Size.EXTRA_SMALL ? 16 : 24} />\n </button>\n );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;;;~~MAuBaA~~,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;QACvBC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;~~AAAQ~~,~~CACS~~,EACnBC,SAAuD,~~EAAA~~;~~AAEvD~~,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,4BAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,qBAAe,GAAGC,WAAK;AAE7C,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,SAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,MAAI,KAAKC,SAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,MAAI,KAAKC,SAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,MAAI,KAAKC,SAAI,CAACqB;KAC3C,EACDlB,~~SAAS~~,~~CACT~~;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,cAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACwB,KAAK,IAAIzB,MAAI,KAAKC,SAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;~~KAAG~~;~~AACzE~~,~~GAAQ~~,CAAC;AAEb,CAAC;;;;"}
1	+ {"version":3,"file":"CloseButton.js","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n React.ComponentPropsWithoutRef<'button'>,\n 'aria-label' \| 'className' \| 'onClick'\n> & {\n size?: SizeExtraSmall \| SizeSmall \| SizeMedium \| SizeLarge;\n filled?: boolean;\n isDisabled?: boolean;\n testId?: string;\n tabIndex?: number;\n};\n\n/*\n @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n {\n 'aria-label': ariaLabel,\n size = Size.MEDIUM,\n filled = false,\n className,\n onClick,\n isDisabled,\n testId,\n tabIndex,\n }: CloseButtonProps,\n reference: React.ForwardedRef<HTMLButtonElement \| null>,\n) {\n const intl = useIntl();\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const Icon = filled ? CrossCircleFill : Cross;\n\n return (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-close-button',\n 'close btn-link',\n 'text-no-decoration',\n {\n 'np-close-button--x-small': size === Size.EXTRA_SMALL,\n 'np-close-button--large': size === Size.MEDIUM,\n 'np-close-button--x-large': size === Size.LARGE,\n },\n className,\n )}\n aria-label={ariaLabel}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n data-testid={testId}\n tabIndex={tabIndex}\n onClick={onClick}\n >\n <Icon size={size === Size.SMALL \|\| size === Size.EXTRA_SMALL ? 16 : 24} />\n </button>\n );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;;;AAoBA;AACA;AACA;MACaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;QACvBC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AACgB,CAAC,EACnBC,SAAuD,EACvD;AACA,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,4BAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,qBAAe,GAAGC,WAAK;AAE7C,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,SAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,MAAI,KAAKC,SAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,MAAI,KAAKC,SAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,MAAI,KAAKC,SAAI,CAACqB;KAC3C,EACDlB,SACF,CAAE;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,cAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACwB,KAAK,IAAIzB,MAAI,KAAKC,SAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;KAAK;AAAC,GACpE,CAAC;AAEb,CAAC;;;;"}

package/build/common/closeButton/CloseButton.messages.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CloseButton.messages.js","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,uBAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;~~AAGH~~;AACF,~~CAAA~~,CAAC;;;;"}
1	+ {"version":3,"file":"CloseButton.messages.js","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,uBAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGJ;AACF,CAAC,CAAC;;;;"}

package/build/common/closeButton/CloseButton.messages.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CloseButton.messages.mjs","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,uBAAeA,cAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;~~AAGH~~;AACF,~~CAAA~~,CAAC;;;;"}
1	+ {"version":3,"file":"CloseButton.messages.mjs","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,uBAAeA,cAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGJ;AACF,CAAC,CAAC;;;;"}

package/build/common/closeButton/CloseButton.mjs CHANGED Viewed

@@ -6,6 +6,9 @@ import { Size } from '../propsValues/size.mjs';
 import closeBtnMessages from './CloseButton.messages.mjs';
 import { jsx } from 'react/jsx-runtime';
+/**
+ * @deprecated Use `<IconButton />` component instead
+ */
 const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   'aria-label': ariaLabel,
   size = Size.MEDIUM,