@transferwise/components 46.78.0 → 46.79.0

package/build/chevron/Chevron.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.js","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionBottom,\n  PositionRight,\n  PositionLeft,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n  [Size.EXTRA_SMALL]: 10,\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n  size?: SizeExtraSmall | SizeSmall | SizeMedium;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n  className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n  return (\n    <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nconst Chevron = ({\n  orientation = Position.BOTTOM,\n  size = Size.SMALL,\n  disabled = false,\n  className,\n}: ChevronProps) => {\n  const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n  if (size === Size.EXTRA_SMALL) {\n    return <ExtraSmallChevron className={classNameValue} />;\n  }\n\n  const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n  return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,SAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,SAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,SAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,cAAA,CAAA,MAAA,EAAA;IAAMD,SAAS,EAAEE,SAAI,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAACG,IAAAA,IAAI,EAAC,cAAc;IAAC,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAC7FH,cAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,cAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,iBAAQ,CAACC,MAAM;QAC7BC,MAAI,GAAGrB,SAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,SAAI,CAAC,YAAY,EAAE;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAAEJ,WAAW,EAAEb,SAAS,CAAC,CAAA;AAEjG,EAAA,IAAIgB,MAAI,KAAKrB,SAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,cAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,MAAI,CAAa,CAAA;EAElD,oBAAOf,cAAA,CAACmB,eAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}
+{"version":3,"file":"Chevron.js","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionBottom,\n  PositionRight,\n  PositionLeft,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n  [Size.EXTRA_SMALL]: 10,\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n  size?: SizeExtraSmall | SizeSmall | SizeMedium;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n  className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n  return (\n    <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nconst Chevron = ({\n  orientation = Position.BOTTOM,\n  size = Size.SMALL,\n  disabled = false,\n  className,\n}: ChevronProps) => {\n  const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n  if (size === Size.EXTRA_SMALL) {\n    return <ExtraSmallChevron className={classNameValue} />;\n  }\n\n  const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n  return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,SAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,SAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,SAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,cAAA,CAAA,MAAA,EAAA;IAAMD,SAAS,EAAEE,SAAI,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAACG,IAAAA,IAAI,EAAC,cAAc;IAAC,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAC7FH,cAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,cAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,iBAAQ,CAACC,MAAM;QAC7BC,MAAI,GAAGrB,SAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,SAAI,CAAC,YAAY,EAAE;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAAEJ,WAAW,EAAEb,SAAS,CAAC,CAAA;AAEjG,EAAA,IAAIgB,MAAI,KAAKrB,SAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,cAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,MAAI,CAAa,CAAA;EAElD,oBAAOf,cAAA,CAACmB,eAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}

package/build/chevron/Chevron.mjs

@@ -1,8 +1,28 @@
 import { ChevronUp } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { jsx } from 'react/jsx-runtime';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
+import '../common/propsValues/typography.mjs';
+import '../common/propsValues/width.mjs';
+import '../common/propsValues/type.mjs';
+import '../common/propsValues/dateMode.mjs';
+import '../common/propsValues/monthFormat.mjs';
 import { Position } from '../common/propsValues/position.mjs';
+import '../common/propsValues/layouts.mjs';
+import '../common/propsValues/status.mjs';
+import '../common/propsValues/sentiment.mjs';
+import '../common/propsValues/profileType.mjs';
+import '../common/propsValues/variant.mjs';
+import '../common/propsValues/scroll.mjs';
+import '../common/propsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import 'react';
+import 'react-intl';
+import '../common/closeButton/CloseButton.messages.mjs';
+import { jsx } from 'react/jsx-runtime';
 
 const CONTAINER_SIZE = {
   [Size.EXTRA_SMALL]: 10,

package/build/chevron/Chevron.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.mjs","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionBottom,\n  PositionRight,\n  PositionLeft,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n  [Size.EXTRA_SMALL]: 10,\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n  size?: SizeExtraSmall | SizeSmall | SizeMedium;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n  className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n  return (\n    <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nconst Chevron = ({\n  orientation = Position.BOTTOM,\n  size = Size.SMALL,\n  disabled = false,\n  className,\n}: ChevronProps) => {\n  const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n  if (size === Size.EXTRA_SMALL) {\n    return <ExtraSmallChevron className={classNameValue} />;\n  }\n\n  const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n  return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,IAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,IAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,IAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,GAAA,CAAA,MAAA,EAAA;IAAMD,SAAS,EAAEE,IAAI,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAACG,IAAAA,IAAI,EAAC,cAAc;IAAC,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAC7FH,GAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,GAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,QAAQ,CAACC,MAAM;EAC7BC,IAAI,GAAGrB,IAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,IAAI,CAAC,YAAY,EAAE;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAAEJ,WAAW,EAAEb,SAAS,CAAC,CAAA;AAEjG,EAAA,IAAIgB,IAAI,KAAKrB,IAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,GAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,IAAI,CAAa,CAAA;EAElD,oBAAOf,GAAA,CAACmB,SAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}
+{"version":3,"file":"Chevron.mjs","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionBottom,\n  PositionRight,\n  PositionLeft,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n  [Size.EXTRA_SMALL]: 10,\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n  size?: SizeExtraSmall | SizeSmall | SizeMedium;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n  className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n  return (\n    <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nconst Chevron = ({\n  orientation = Position.BOTTOM,\n  size = Size.SMALL,\n  disabled = false,\n  className,\n}: ChevronProps) => {\n  const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n  if (size === Size.EXTRA_SMALL) {\n    return <ExtraSmallChevron className={classNameValue} />;\n  }\n\n  const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n  return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,IAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,IAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,IAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,GAAA,CAAA,MAAA,EAAA;IAAMD,SAAS,EAAEE,IAAI,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAACG,IAAAA,IAAI,EAAC,cAAc;IAAC,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAC7FH,GAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,GAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,QAAQ,CAACC,MAAM;EAC7BC,IAAI,GAAGrB,IAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,IAAI,CAAC,YAAY,EAAE;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAAEJ,WAAW,EAAEb,SAAS,CAAC,CAAA;AAEjG,EAAA,IAAIgB,IAAI,KAAKrB,IAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,GAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,IAAI,CAAa,CAAA;EAElD,oBAAOf,GAAA,CAACmB,SAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}

package/build/chips/Chip.js

@@ -4,9 +4,27 @@ var componentsTheming = require('@wise/components-theming');
 var clsx = require('clsx');
 var React = require('react');
 var Body = require('../body/Body.js');
+require('../common/theme.js');
+require('../common/direction.js');
+require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
+require('../common/propsValues/size.js');
+var typography = require('../common/propsValues/typography.js');
+require('../common/propsValues/width.js');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
+require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
+require('../common/propsValues/status.js');
+require('../common/propsValues/sentiment.js');
+require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
 var CloseButton = require('../common/closeButton/CloseButton.js');
 var jsxRuntime = require('react/jsx-runtime');
-var typography = require('../common/propsValues/typography.js');
 
 const Chip = ({
   label,

package/build/chips/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n  value?: ChipValue;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = ({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: Props) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const { isModern } = useTheme();\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      {isModern ? (\n        <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n          {label}\n        </Body>\n      ) : (\n        <span aria-hidden=\"false\" className=\"np-chip-label\">\n          {label}\n        </span>\n      )}\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled={isModern}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,eAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,cAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,cAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n  value?: ChipValue;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = ({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: Props) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const { isModern } = useTheme();\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      {isModern ? (\n        <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n          {label}\n        </Body>\n      ) : (\n        <span aria-hidden=\"false\" className=\"np-chip-label\">\n          {label}\n        </span>\n      )}\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled={isModern}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,eAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,cAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,cAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}

package/build/chips/Chip.mjs

@@ -2,9 +2,27 @@ import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { useRef, useEffect } from 'react';
 import Body from '../body/Body.mjs';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
+import '../common/propsValues/size.mjs';
+import { Typography } from '../common/propsValues/typography.mjs';
+import '../common/propsValues/width.mjs';
+import '../common/propsValues/type.mjs';
+import '../common/propsValues/dateMode.mjs';
+import '../common/propsValues/monthFormat.mjs';
+import '../common/propsValues/position.mjs';
+import '../common/propsValues/layouts.mjs';
+import '../common/propsValues/status.mjs';
+import '../common/propsValues/sentiment.mjs';
+import '../common/propsValues/profileType.mjs';
+import '../common/propsValues/variant.mjs';
+import '../common/propsValues/scroll.mjs';
+import '../common/propsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography } from '../common/propsValues/typography.mjs';
 
 const Chip = ({
   label,

package/build/chips/Chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n  value?: ChipValue;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = ({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: Props) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const { isModern } = useTheme();\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      {isModern ? (\n        <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n          {label}\n        </Body>\n      ) : (\n        <span aria-hidden=\"false\" className=\"np-chip-label\">\n          {label}\n        </span>\n      )}\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled={isModern}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,IAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,GAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,GAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n  value?: ChipValue;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = ({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: Props) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const { isModern } = useTheme();\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      {isModern ? (\n        <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n          {label}\n        </Body>\n      ) : (\n        <span aria-hidden=\"false\" className=\"np-chip-label\">\n          {label}\n        </span>\n      )}\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled={isModern}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,IAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,GAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,GAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}

package/build/circularButton/CircularButton.js

@@ -4,12 +4,31 @@ var clsx = require('clsx');
 var React = require('react');
 var Body = require('../body/Body.js');
 var classMap = require('../button/classMap.js');
-var Circle = require('../common/circle/Circle.js');
-var useMedia = require('../common/hooks/useMedia.js');
-var jsxRuntime = require('react/jsx-runtime');
+require('../common/theme.js');
+require('../common/direction.js');
+var control = require('../common/propsValues/control.js');
 var breakpoint = require('../common/propsValues/breakpoint.js');
+require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
-var control = require('../common/propsValues/control.js');
+require('../common/propsValues/width.js');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
+require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
+require('../common/propsValues/status.js');
+require('../common/propsValues/sentiment.js');
+require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('@transferwise/icons');
+require('react-intl');
+require('../common/closeButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Circle = require('../common/circle/Circle.js');
+var useMedia = require('../common/hooks/useMedia.js');
 
 const CircularButton = ({
   className,

package/build/circularButton/CircularButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 72 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,SAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,qBAAY,CAACN,IAAI,CAAC,EAAEO,yBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,kBAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,SAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,cAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,cAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,qBAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 72 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,SAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,qBAAY,CAACN,IAAI,CAAC,EAAEO,yBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,kBAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,SAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,cAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,cAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,qBAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}

package/build/circularButton/CircularButton.mjs

@@ -2,12 +2,31 @@ import { clsx } from 'clsx';
 import { cloneElement } from 'react';
 import Body from '../body/Body.mjs';
 import { typeClassMap, priorityClassMap } from '../button/classMap.mjs';
-import Circle from '../common/circle/Circle.mjs';
-import { useMedia } from '../common/hooks/useMedia.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import { Priority, ControlType } from '../common/propsValues/control.mjs';
 import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
+import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
-import { Priority, ControlType } from '../common/propsValues/control.mjs';
+import '../common/propsValues/width.mjs';
+import '../common/propsValues/type.mjs';
+import '../common/propsValues/dateMode.mjs';
+import '../common/propsValues/monthFormat.mjs';
+import '../common/propsValues/position.mjs';
+import '../common/propsValues/layouts.mjs';
+import '../common/propsValues/status.mjs';
+import '../common/propsValues/sentiment.mjs';
+import '../common/propsValues/profileType.mjs';
+import '../common/propsValues/variant.mjs';
+import '../common/propsValues/scroll.mjs';
+import '../common/propsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import '@transferwise/icons';
+import 'react-intl';
+import '../common/closeButton/CloseButton.messages.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Circle from '../common/circle/Circle.mjs';
+import { useMedia } from '../common/hooks/useMedia.mjs';
 
 const CircularButton = ({
   className,

package/build/circularButton/CircularButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 72 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,YAAY,CAACN,IAAI,CAAC,EAAEO,gBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,YAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,IAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,GAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,GAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,UAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 72 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,YAAY,CAACN,IAAI,CAAC,EAAEO,gBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,YAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,IAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,GAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,GAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,UAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}

package/build/common/bottomSheet/BottomSheet.js

@@ -8,11 +8,12 @@ var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
 var SlidingPanel = require('../../slidingPanel/SlidingPanel.js');
 var CloseButton = require('../closeButton/CloseButton.js');
 var documentIosClick = require('../domHelpers/documentIosClick.js');
-var useMedia = require('../hooks/useMedia.js');
+var useConditionalListener = require('../hooks/useConditionalListener/useConditionalListener.js');
+require('../../provider/direction/DirectionProvider.js');
 var breakpoint = require('../propsValues/breakpoint.js');
+var useMedia = require('../hooks/useMedia.js');
 var position = require('../propsValues/position.js');
 var jsxRuntime = require('react/jsx-runtime');
-var useConditionalListener = require('../hooks/useConditionalListener/useConditionalListener.js');
 
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;

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

@@ -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        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\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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"}
+{"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        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\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

@@ -6,11 +6,12 @@ import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
 import SlidingPanel from '../../slidingPanel/SlidingPanel.mjs';
 import { CloseButton } from '../closeButton/CloseButton.mjs';
 import { isServerSide } from '../domHelpers/documentIosClick.mjs';
-import { useMedia } from '../hooks/useMedia.mjs';
+import { useConditionalListener } from '../hooks/useConditionalListener/useConditionalListener.mjs';
+import '../../provider/direction/DirectionProvider.mjs';
 import { Breakpoint } from '../propsValues/breakpoint.mjs';
+import { useMedia } from '../hooks/useMedia.mjs';
 import { Position } from '../propsValues/position.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useConditionalListener } from '../hooks/useConditionalListener/useConditionalListener.mjs';
 
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;

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

@@ -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        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\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":";;;;;;;;;;;;;;AAuBA,MAAMA,kBAAkB,GAAG,CAAC,CAAA;AAE5B,MAAMC,wBAAwB,GAAG,CAAC,CAAA;AAElC,MAAMC,qBAAqB,GAAG,EAAE,CAAA;AAUhC;;;;;AAKG;AACGC,MAAAA,WAAW,GAAGA,CAAC;AAAEC,EAAAA,IAAI,GAAG,QAAQ;EAAE,GAAGC,KAAAA;AAAyB,CAAA,KAAI;AACtE,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAiB,IAAI,CAAC,CAAA;AACzD,EAAA,MAAMC,eAAe,GAAGD,MAAM,CAAiB,IAAI,CAAC,CAAA;AACpD,EAAA,MAAME,gBAAgB,GAAGF,MAAM,CAAiB,IAAI,CAAC,CAAA;EAErD,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAU,KAAK,CAAC,CAAA;AAEtD;;;;AAIG;AACH,EAAA,MAAMC,WAAW,GAAGN,MAAM,CAAS,CAAC,CAAC,CAAA;AAErC;;;;;AAKG;AACH,EAAA,MAAMO,UAAU,GAAGP,MAAM,CAAS,CAAC,CAAC,CAAA;AACpC,EAAA,MAAMQ,kBAAkB,GAAGR,MAAM,CAAS,CAAC,CAAC,CAAA;AAE5C;AACAS,EAAAA,sBAAsB,CAAC;IACrBC,cAAc,EAAEZ,KAAK,CAACa,IAAI,IAAI,CAACC,YAAY,EAAE;IAC7CC,QAAQ,EAAEA,MAAK;AACb,MAAA,IAAIZ,eAAe,CAACa,OAAO,KAAK,IAAI,EAAE;QACpC,MAAM;AAAEC,UAAAA,SAAAA;SAAW,GAAGd,eAAe,CAACa,OAAO,CAAA;AAC7C,QAAA,IAAI,CAACE,4BAA4B,EAAE,EAAE;AACnCD,UAAAA,SAAS,CAACE,GAAG,CAAC,kCAAkC,CAAC,CAAA;AACnD,SAAC,MAAM;AACLF,UAAAA,SAAS,CAACG,MAAM,CAAC,kCAAkC,CAAC,CAAA;AACtD,SAAA;AACF,OAAA;KACD;AACDC,IAAAA,SAAS,EAAE,QAAQ;AACnBC,IAAAA,MAAM,EAAER,YAAY,EAAE,GAAGS,SAAS,GAAGC,QAAAA;AACtC,GAAA,CAAC,CAAA;EAEF,SAASC,IAAIA,CAACC,SAAiB,EAAA;AAC7B,IAAA,IAAIzB,oBAAoB,CAACe,OAAO,KAAK,IAAI,EAAE;MACzCf,oBAAoB,CAACe,OAAO,CAACW,KAAK,CAACC,SAAS,GAAG,CAAcF,WAAAA,EAAAA,SAAS,CAAK,GAAA,CAAA,CAAA;AAC7E,KAAA;AACF,GAAA;EAEA,SAASG,KAAKA,CAACC,KAA6B,EAAA;IAC1CxB,UAAU,CAAC,KAAK,CAAC,CAAA;IACjBG,UAAU,CAACO,OAAO,GAAGrB,kBAAkB,CAAA;AACvC,IAAA,IAAIM,oBAAoB,CAACe,OAAO,KAAK,IAAI,EAAE;MACzCf,oBAAoB,CAACe,OAAO,CAACW,KAAK,CAACI,cAAc,CAAC,WAAW,CAAC,CAAA;AAChE,KAAA;IACA,IAAI/B,KAAK,CAACgC,OAAO,EAAE;AACjBhC,MAAAA,KAAK,CAACgC,OAAO,CAACF,KAAK,CAAC,CAAA;AACtB,KAAA;AACF,GAAA;EAEA,MAAMG,YAAY,GAChBH,KAA0E,IAClE;AACRpB,IAAAA,kBAAkB,CAACM,OAAO,GAAG,CAAC,SAAS,IAAIc,KAAK,GAAGA,KAAK,CAACI,OAAO,CAAC,CAAC,CAAC,GAAGJ,KAAK,EAAEK,OAAO,CAAA;IACpF7B,UAAU,CAAC,IAAI,CAAC,CAAA;GACjB,CAAA;EAED,MAAM8B,WAAW,GACfN,KAA0E,IAClE;AACR,IAAA,IAAIzB,OAAO,EAAE;MACX,MAAM;AAAE8B,QAAAA,OAAAA;AAAS,OAAA,GAAG,SAAS,IAAIL,KAAK,GAAGA,KAAK,CAACI,OAAO,CAAC,CAAC,CAAC,GAAGJ,KAAK,CAAA;AAEjE,MAAA,MAAMO,MAAM,GAAGC,wBAAwB,CAACH,OAAO,CAAC,CAAA;AAChD;AACA,MAAA,IAAIE,MAAM,GAAG1C,kBAAkB,IAAIuB,4BAA4B,EAAE,EAAE;QACjET,UAAU,CAACO,OAAO,GAAGqB,MAAM,CAAA;AAC3B7B,QAAAA,WAAW,CAACQ,OAAO,GAAGuB,qBAAqB,CAAC,MAAK;UAC/C,IAAI/B,WAAW,CAACQ,OAAO,KAAKO,SAAS,IAAItB,oBAAoB,CAACe,OAAO,KAAK,IAAI,EAAE;YAC9ES,IAAI,CAACY,MAAM,CAAC,CAAA;AACd,WAAA;AACF,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAA;GACD,CAAA;EAED,SAASG,UAAUA,CACjBV,KAA0E,EAAA;AAE1E;AACAW,IAAAA,oBAAoB,CAACjC,WAAW,CAACQ,OAAO,CAAC,CAAA;IACzCV,UAAU,CAAC,KAAK,CAAC,CAAA;AACjB;AACA;IACA,IAAIG,UAAU,CAACO,OAAO,GAAGnB,qBAAqB,IAAIqB,4BAA4B,EAAE,EAAE;MAChFW,KAAK,CAACC,KAAK,CAAC,CAAA;AACd,KAAA;AACA;SACK;MACHL,IAAI,CAAC9B,kBAAkB,CAAC,CAAA;AAC1B,KAAA;IACAc,UAAU,CAACO,OAAO,GAAGrB,kBAAkB,CAAA;AACzC,GAAA;EAEA,SAASuB,4BAA4BA,GAAA;AACnC,IAAA,OACEd,gBAAgB,EAAEY,OAAO,EAAE0B,SAAS,KAAKnB,SAAS,IAClDnB,gBAAgB,CAACY,OAAO,CAAC0B,SAAS,IAAI9C,wBAAwB,CAAA;AAElE,GAAA;AAEA;;;;;AAKG;EACH,SAAS0C,wBAAwBA,CAACK,oBAA4B,EAAA;AAC5D,IAAA,OAAOA,oBAAoB,GAAGjC,kBAAkB,CAACM,OAAO,CAAA;AAC1D,GAAA;AAEA;;;AAGG;EACH,SAAS4B,mBAAmBA,GAAA;IAC1B,MAAMC,cAAc,GAAG,MAAM,CAAA;IAC7B,MAAMC,YAAY,GAAG,MAAM,CAAA;IAC3B,MAAMC,WAAW,GAAWjC,YAAY,EAAE,GAAG,CAAC,GAAGkC,MAAM,CAACC,WAAW,CAAA;AACnE;;;;AAIG;IACH,MAAMC,YAAY,GAAG,CAAGH,EAAAA,WAAW,GAAG,IAAI,GAAG,GAAG,CAAI,EAAA,CAAA,CAAA;IACpD,OAAO;AACLI,MAAAA,SAAS,EAAE,CAAQD,KAAAA,EAAAA,YAAY,CAAML,GAAAA,EAAAA,cAAc,MAAMC,YAAY,CAAA,CAAA,CAAA;KACtE,CAAA;AACH,GAAA;EAEA,MAAMM,SAAS,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAEnE,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;AAE9C,EAAA,OAAON,SAAS,gBACdO,GAAA,CAACC,MAAM,EAAA;IACL,iBAAiB5D,EAAAA,KAAK,CAAC,iBAAiB,CAAE;IAC1C,YAAYA,EAAAA,KAAK,CAAC,YAAY,CAAE;AAChCD,IAAAA,IAAI,EAAEA,IAAK;IACXc,IAAI,EAAEb,KAAK,CAACa,IAAK;IACjBgD,SAAS,EAAE7D,KAAK,CAAC6D,SAAU;AAC3B7B,IAAAA,OAAO,EAAEH,KAAM;IAAAiC,QAAA,EAEd9D,KAAK,CAAC8D,QAAAA;AAAQ,GACT,CAAC,gBAETH,GAAA,CAACI,MAAM,EAAA;IAAClD,IAAI,EAAEb,KAAK,CAACa,IAAK;IAACmD,kBAAkB,EAAA,IAAA;IAACC,iBAAiB,EAAA,IAAA;AAACjC,IAAAA,OAAO,EAAEH,KAAM;IAAAiC,QAAA,eAC5EH,GAAA,CAACO,YAAY,EAAA;AACXC,MAAAA,GAAG,EAAElE,oBAAqB;MAC1BY,IAAI,EAAEb,KAAK,CAACa,IAAK;MACjBuD,QAAQ,EAAEC,QAAQ,CAACC,MAAO;MAC1BT,SAAS,EAAEU,IAAI,CAAC,iBAAiB,EAAEvE,KAAK,CAAC6D,SAAS,CAAE;AAAAC,MAAAA,QAAA,eAGpDU,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEjB,SAAU;AACd,QAAA,iBAAA,EAAiBxD,KAAK,CAAC,iBAAiB,CAAC,IAAIuB,SAAU;AACvD,QAAA,YAAA,EAAYvB,KAAK,CAAC,YAAY,CAAC,IAAIuB,SAAU;AAC7CxB,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV2E,QAAAA,YAAY,EAAEzC,YAAa;AAC3B0C,QAAAA,WAAW,EAAEvC,WAAY;AACzBwC,QAAAA,UAAU,EAAEpC,UAAW;AACvBqC,QAAAA,WAAW,EAAE5C,YAAa;AAC1B6C,QAAAA,WAAW,EAAE1C,WAAY;AACzB2C,QAAAA,SAAS,EAAEvC,UAAW;AAAAsB,QAAAA,QAAA,gBAEtBU,IAAA,CAAA,KAAA,EAAA;AAAKL,UAAAA,GAAG,EAAEhE,eAAgB;AAAC0D,UAAAA,SAAS,EAAC,0BAA0B;AAAAC,UAAAA,QAAA,gBAC7DH,GAAA,CAAA,KAAA,EAAA;AAAKE,YAAAA,SAAS,EAAC,0BAAA;AAA0B,WACzC,CAAA,eAAAF,GAAA,CAACqB,WAAW,EAAA;AAACC,YAAAA,IAAI,EAAC,IAAI;AAACpB,YAAAA,SAAS,EAAC,oCAAoC;AAACqB,YAAAA,OAAO,EAAErD,KAAAA;AAAM,WACvF,CAAA,CAAA;SAAK,CACL,eAAA8B,GAAA,CAAA,KAAA,EAAA;AACEQ,UAAAA,GAAG,EAAE/D,gBAAiB;UACtBuB,KAAK,EAAEiB,mBAAmB,EAAG;AAC7BiB,UAAAA,SAAS,EAAC,0BAA0B;UAAAC,QAAA,EAEnC9D,KAAK,CAAC8D,QAAAA;AAAQ,SACZ,CACP,CAAA;OAAK,CAAA;KACO,CAAA;AAChB,GAAQ,CACT,CAAA;AACH;;;;"}
+{"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        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\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":";;;;;;;;;;;;;;;AAuBA,MAAMA,kBAAkB,GAAG,CAAC,CAAA;AAE5B,MAAMC,wBAAwB,GAAG,CAAC,CAAA;AAElC,MAAMC,qBAAqB,GAAG,EAAE,CAAA;AAUhC;;;;;AAKG;AACGC,MAAAA,WAAW,GAAGA,CAAC;AAAEC,EAAAA,IAAI,GAAG,QAAQ;EAAE,GAAGC,KAAAA;AAAyB,CAAA,KAAI;AACtE,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAiB,IAAI,CAAC,CAAA;AACzD,EAAA,MAAMC,eAAe,GAAGD,MAAM,CAAiB,IAAI,CAAC,CAAA;AACpD,EAAA,MAAME,gBAAgB,GAAGF,MAAM,CAAiB,IAAI,CAAC,CAAA;EAErD,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAU,KAAK,CAAC,CAAA;AAEtD;;;;AAIG;AACH,EAAA,MAAMC,WAAW,GAAGN,MAAM,CAAS,CAAC,CAAC,CAAA;AAErC;;;;;AAKG;AACH,EAAA,MAAMO,UAAU,GAAGP,MAAM,CAAS,CAAC,CAAC,CAAA;AACpC,EAAA,MAAMQ,kBAAkB,GAAGR,MAAM,CAAS,CAAC,CAAC,CAAA;AAE5C;AACAS,EAAAA,sBAAsB,CAAC;IACrBC,cAAc,EAAEZ,KAAK,CAACa,IAAI,IAAI,CAACC,YAAY,EAAE;IAC7CC,QAAQ,EAAEA,MAAK;AACb,MAAA,IAAIZ,eAAe,CAACa,OAAO,KAAK,IAAI,EAAE;QACpC,MAAM;AAAEC,UAAAA,SAAAA;SAAW,GAAGd,eAAe,CAACa,OAAO,CAAA;AAC7C,QAAA,IAAI,CAACE,4BAA4B,EAAE,EAAE;AACnCD,UAAAA,SAAS,CAACE,GAAG,CAAC,kCAAkC,CAAC,CAAA;AACnD,SAAC,MAAM;AACLF,UAAAA,SAAS,CAACG,MAAM,CAAC,kCAAkC,CAAC,CAAA;AACtD,SAAA;AACF,OAAA;KACD;AACDC,IAAAA,SAAS,EAAE,QAAQ;AACnBC,IAAAA,MAAM,EAAER,YAAY,EAAE,GAAGS,SAAS,GAAGC,QAAAA;AACtC,GAAA,CAAC,CAAA;EAEF,SAASC,IAAIA,CAACC,SAAiB,EAAA;AAC7B,IAAA,IAAIzB,oBAAoB,CAACe,OAAO,KAAK,IAAI,EAAE;MACzCf,oBAAoB,CAACe,OAAO,CAACW,KAAK,CAACC,SAAS,GAAG,CAAcF,WAAAA,EAAAA,SAAS,CAAK,GAAA,CAAA,CAAA;AAC7E,KAAA;AACF,GAAA;EAEA,SAASG,KAAKA,CAACC,KAA6B,EAAA;IAC1CxB,UAAU,CAAC,KAAK,CAAC,CAAA;IACjBG,UAAU,CAACO,OAAO,GAAGrB,kBAAkB,CAAA;AACvC,IAAA,IAAIM,oBAAoB,CAACe,OAAO,KAAK,IAAI,EAAE;MACzCf,oBAAoB,CAACe,OAAO,CAACW,KAAK,CAACI,cAAc,CAAC,WAAW,CAAC,CAAA;AAChE,KAAA;IACA,IAAI/B,KAAK,CAACgC,OAAO,EAAE;AACjBhC,MAAAA,KAAK,CAACgC,OAAO,CAACF,KAAK,CAAC,CAAA;AACtB,KAAA;AACF,GAAA;EAEA,MAAMG,YAAY,GAChBH,KAA0E,IAClE;AACRpB,IAAAA,kBAAkB,CAACM,OAAO,GAAG,CAAC,SAAS,IAAIc,KAAK,GAAGA,KAAK,CAACI,OAAO,CAAC,CAAC,CAAC,GAAGJ,KAAK,EAAEK,OAAO,CAAA;IACpF7B,UAAU,CAAC,IAAI,CAAC,CAAA;GACjB,CAAA;EAED,MAAM8B,WAAW,GACfN,KAA0E,IAClE;AACR,IAAA,IAAIzB,OAAO,EAAE;MACX,MAAM;AAAE8B,QAAAA,OAAAA;AAAS,OAAA,GAAG,SAAS,IAAIL,KAAK,GAAGA,KAAK,CAACI,OAAO,CAAC,CAAC,CAAC,GAAGJ,KAAK,CAAA;AAEjE,MAAA,MAAMO,MAAM,GAAGC,wBAAwB,CAACH,OAAO,CAAC,CAAA;AAChD;AACA,MAAA,IAAIE,MAAM,GAAG1C,kBAAkB,IAAIuB,4BAA4B,EAAE,EAAE;QACjET,UAAU,CAACO,OAAO,GAAGqB,MAAM,CAAA;AAC3B7B,QAAAA,WAAW,CAACQ,OAAO,GAAGuB,qBAAqB,CAAC,MAAK;UAC/C,IAAI/B,WAAW,CAACQ,OAAO,KAAKO,SAAS,IAAItB,oBAAoB,CAACe,OAAO,KAAK,IAAI,EAAE;YAC9ES,IAAI,CAACY,MAAM,CAAC,CAAA;AACd,WAAA;AACF,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAA;GACD,CAAA;EAED,SAASG,UAAUA,CACjBV,KAA0E,EAAA;AAE1E;AACAW,IAAAA,oBAAoB,CAACjC,WAAW,CAACQ,OAAO,CAAC,CAAA;IACzCV,UAAU,CAAC,KAAK,CAAC,CAAA;AACjB;AACA;IACA,IAAIG,UAAU,CAACO,OAAO,GAAGnB,qBAAqB,IAAIqB,4BAA4B,EAAE,EAAE;MAChFW,KAAK,CAACC,KAAK,CAAC,CAAA;AACd,KAAA;AACA;SACK;MACHL,IAAI,CAAC9B,kBAAkB,CAAC,CAAA;AAC1B,KAAA;IACAc,UAAU,CAACO,OAAO,GAAGrB,kBAAkB,CAAA;AACzC,GAAA;EAEA,SAASuB,4BAA4BA,GAAA;AACnC,IAAA,OACEd,gBAAgB,EAAEY,OAAO,EAAE0B,SAAS,KAAKnB,SAAS,IAClDnB,gBAAgB,CAACY,OAAO,CAAC0B,SAAS,IAAI9C,wBAAwB,CAAA;AAElE,GAAA;AAEA;;;;;AAKG;EACH,SAAS0C,wBAAwBA,CAACK,oBAA4B,EAAA;AAC5D,IAAA,OAAOA,oBAAoB,GAAGjC,kBAAkB,CAACM,OAAO,CAAA;AAC1D,GAAA;AAEA;;;AAGG;EACH,SAAS4B,mBAAmBA,GAAA;IAC1B,MAAMC,cAAc,GAAG,MAAM,CAAA;IAC7B,MAAMC,YAAY,GAAG,MAAM,CAAA;IAC3B,MAAMC,WAAW,GAAWjC,YAAY,EAAE,GAAG,CAAC,GAAGkC,MAAM,CAACC,WAAW,CAAA;AACnE;;;;AAIG;IACH,MAAMC,YAAY,GAAG,CAAGH,EAAAA,WAAW,GAAG,IAAI,GAAG,GAAG,CAAI,EAAA,CAAA,CAAA;IACpD,OAAO;AACLI,MAAAA,SAAS,EAAE,CAAQD,KAAAA,EAAAA,YAAY,CAAML,GAAAA,EAAAA,cAAc,MAAMC,YAAY,CAAA,CAAA,CAAA;KACtE,CAAA;AACH,GAAA;EAEA,MAAMM,SAAS,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAEnE,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;AAE9C,EAAA,OAAON,SAAS,gBACdO,GAAA,CAACC,MAAM,EAAA;IACL,iBAAiB5D,EAAAA,KAAK,CAAC,iBAAiB,CAAE;IAC1C,YAAYA,EAAAA,KAAK,CAAC,YAAY,CAAE;AAChCD,IAAAA,IAAI,EAAEA,IAAK;IACXc,IAAI,EAAEb,KAAK,CAACa,IAAK;IACjBgD,SAAS,EAAE7D,KAAK,CAAC6D,SAAU;AAC3B7B,IAAAA,OAAO,EAAEH,KAAM;IAAAiC,QAAA,EAEd9D,KAAK,CAAC8D,QAAAA;AAAQ,GACT,CAAC,gBAETH,GAAA,CAACI,MAAM,EAAA;IAAClD,IAAI,EAAEb,KAAK,CAACa,IAAK;IAACmD,kBAAkB,EAAA,IAAA;IAACC,iBAAiB,EAAA,IAAA;AAACjC,IAAAA,OAAO,EAAEH,KAAM;IAAAiC,QAAA,eAC5EH,GAAA,CAACO,YAAY,EAAA;AACXC,MAAAA,GAAG,EAAElE,oBAAqB;MAC1BY,IAAI,EAAEb,KAAK,CAACa,IAAK;MACjBuD,QAAQ,EAAEC,QAAQ,CAACC,MAAO;MAC1BT,SAAS,EAAEU,IAAI,CAAC,iBAAiB,EAAEvE,KAAK,CAAC6D,SAAS,CAAE;AAAAC,MAAAA,QAAA,eAGpDU,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEjB,SAAU;AACd,QAAA,iBAAA,EAAiBxD,KAAK,CAAC,iBAAiB,CAAC,IAAIuB,SAAU;AACvD,QAAA,YAAA,EAAYvB,KAAK,CAAC,YAAY,CAAC,IAAIuB,SAAU;AAC7CxB,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV2E,QAAAA,YAAY,EAAEzC,YAAa;AAC3B0C,QAAAA,WAAW,EAAEvC,WAAY;AACzBwC,QAAAA,UAAU,EAAEpC,UAAW;AACvBqC,QAAAA,WAAW,EAAE5C,YAAa;AAC1B6C,QAAAA,WAAW,EAAE1C,WAAY;AACzB2C,QAAAA,SAAS,EAAEvC,UAAW;AAAAsB,QAAAA,QAAA,gBAEtBU,IAAA,CAAA,KAAA,EAAA;AAAKL,UAAAA,GAAG,EAAEhE,eAAgB;AAAC0D,UAAAA,SAAS,EAAC,0BAA0B;AAAAC,UAAAA,QAAA,gBAC7DH,GAAA,CAAA,KAAA,EAAA;AAAKE,YAAAA,SAAS,EAAC,0BAAA;AAA0B,WACzC,CAAA,eAAAF,GAAA,CAACqB,WAAW,EAAA;AAACC,YAAAA,IAAI,EAAC,IAAI;AAACpB,YAAAA,SAAS,EAAC,oCAAoC;AAACqB,YAAAA,OAAO,EAAErD,KAAAA;AAAM,WACvF,CAAA,CAAA;SAAK,CACL,eAAA8B,GAAA,CAAA,KAAA,EAAA;AACEQ,UAAAA,GAAG,EAAE/D,gBAAiB;UACtBuB,KAAK,EAAEiB,mBAAmB,EAAG;AAC7BiB,UAAAA,SAAS,EAAC,0BAA0B;UAAAC,QAAA,EAEnC9D,KAAK,CAAC8D,QAAAA;AAAQ,SACZ,CACP,CAAA;OAAK,CAAA;KACO,CAAA;AAChB,GAAQ,CACT,CAAA;AACH;;;;"}

package/build/common/hooks/useHasIntersected/useHasIntersected.js

@@ -5,21 +5,20 @@ var React = require('react');
 const ObserverParams = {
   threshold: 0.1
 };
-
 /**
  * useHasIntersected.
  * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.
  * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.
  *
- * @param elRef.elRef
- * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.
- * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
+ * @param {object} params
+ * @param {object} [params.elRef] - node object that contains a react reference to the element that needs to be observed.
+ * @param {string} [params.loading = 'eager'] - string that contains the type of loading.
  * @param elRef.loading
  * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
  */
 const useHasIntersected = ({
   elRef,
-  loading
+  loading = 'eager'
 }) => {
   const [hasIntersected, setHasIntersected] = React.useState(false);
   const {
@@ -32,24 +31,25 @@ const useHasIntersected = ({
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         setHasIntersected(true);
-        observer.unobserve(current);
+        if (current) {
+          observer.unobserve(current);
+        }
       }
     });
   };
   React.useEffect(() => {
     let observer;
     let didCancel = false;
-
-    // Check if window is define for SSR and Old browsers fallback
+    // Check if window is defined for SSR and Old browsers fallback
     if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
       setHasIntersected(true);
-    } else if (!didCancel) {
+    } else if (current && !didCancel) {
       observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
       observer.observe(current);
     }
     return () => {
       didCancel = true;
-      if (observer) {
+      if (observer && current) {
         observer.unobserve(current);
       }
     };

package/build/common/hooks/useHasIntersected/useHasIntersected.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHasIntersected.js","sources":["../../../../src/common/hooks/useHasIntersected/useHasIntersected.js"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst ObserverParams = {\n  threshold: 0.1,\n};\n\n/**\n * useHasIntersected.\n * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.\n * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.\n *\n * @param elRef.elRef\n * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.\n * @param {strimng} [loading = 'eager'] - string that contains the type of loading.\n * @param elRef.loading\n * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`\n */\nexport const useHasIntersected = ({ elRef, loading }) => {\n  const [hasIntersected, setHasIntersected] = useState(false);\n\n  const { current } = elRef || {};\n\n  const isValidReference = () => {\n    return elRef && current;\n  };\n\n  const handleOnIntersect = (entries, observer) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        setHasIntersected(true);\n        observer.unobserve(current);\n      }\n    });\n  };\n\n  useEffect(() => {\n    let observer;\n    let didCancel = false;\n\n    // Check if window is define for SSR and Old browsers fallback\n    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {\n      setHasIntersected(true);\n    } else if (!didCancel) {\n      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);\n      observer.observe(current);\n    }\n    return () => {\n      didCancel = true;\n      if (observer) {\n        observer.unobserve(current);\n      }\n    };\n  }, [elRef]);\n\n  if (loading === 'eager') {\n    return [false];\n  }\n\n  return [hasIntersected];\n};\n"],"names":["ObserverParams","threshold","useHasIntersected","elRef","loading","hasIntersected","setHasIntersected","useState","current","isValidReference","handleOnIntersect","entries","observer","forEach","entry","isIntersecting","unobserve","useEffect","didCancel","window","IntersectionObserver","observe"],"mappings":";;;;AAEA,MAAMA,cAAc,GAAG;AACrBC,EAAAA,SAAS,EAAE,GAAA;AACb,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,KAAK;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAK;EACvD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;EAE3D,MAAM;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAGL,KAAK,IAAI,EAAE,CAAA;EAE/B,MAAMM,gBAAgB,GAAGA,MAAM;IAC7B,OAAON,KAAK,IAAIK,OAAO,CAAA;GACxB,CAAA;AAED,EAAA,MAAME,iBAAiB,GAAGA,CAACC,OAAO,EAAEC,QAAQ,KAAK;AAC/CD,IAAAA,OAAO,CAACE,OAAO,CAAEC,KAAK,IAAK;MACzB,IAAIA,KAAK,CAACC,cAAc,EAAE;QACxBT,iBAAiB,CAAC,IAAI,CAAC,CAAA;AACvBM,QAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC,CAAA;AAC7B,OAAA;AACF,KAAC,CAAC,CAAA;GACH,CAAA;AAEDS,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIL,QAAQ,CAAA;IACZ,IAAIM,SAAS,GAAG,KAAK,CAAA;;AAErB;AACA,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,IAAI,CAACA,MAAM,CAACC,oBAAoB,IAAI,CAACX,gBAAgB,EAAE,EAAE;MACxFH,iBAAiB,CAAC,IAAI,CAAC,CAAA;AACzB,KAAC,MAAM,IAAI,CAACY,SAAS,EAAE;AACrBN,MAAAA,QAAQ,GAAG,IAAIQ,oBAAoB,CAACV,iBAAiB,EAAEV,cAAc,CAAC,CAAA;AACtEY,MAAAA,QAAQ,CAACS,OAAO,CAACb,OAAO,CAAC,CAAA;AAC3B,KAAA;AACA,IAAA,OAAO,MAAM;AACXU,MAAAA,SAAS,GAAG,IAAI,CAAA;AAChB,MAAA,IAAIN,QAAQ,EAAE;AACZA,QAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC,CAAA;AAC7B,OAAA;KACD,CAAA;AACH,GAAC,EAAE,CAACL,KAAK,CAAC,CAAC,CAAA;EAEX,IAAIC,OAAO,KAAK,OAAO,EAAE;IACvB,OAAO,CAAC,KAAK,CAAC,CAAA;AAChB,GAAA;EAEA,OAAO,CAACC,cAAc,CAAC,CAAA;AACzB;;;;"}
+{"version":3,"file":"useHasIntersected.js","sources":["../../../../src/common/hooks/useHasIntersected/useHasIntersected.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst ObserverParams: IntersectionObserverInit = {\n  threshold: 0.1,\n};\n\n/**\n * useHasIntersected.\n * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.\n * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.\n *\n * @param {object} params\n * @param {object} [params.elRef] - node object that contains a react reference to the element that needs to be observed.\n * @param {string} [params.loading = 'eager'] - string that contains the type of loading.\n * @param elRef.loading\n * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`\n */\nexport const useHasIntersected = ({\n  elRef,\n  loading = 'eager',\n}: {\n  elRef: React.RefObject<HTMLElement>;\n  loading?: 'eager' | 'lazy';\n}) => {\n  const [hasIntersected, setHasIntersected] = useState(false);\n\n  const { current } = elRef || {};\n\n  const isValidReference = () => {\n    return elRef && current;\n  };\n\n  const handleOnIntersect: IntersectionObserverCallback = (entries, observer) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        setHasIntersected(true);\n\n        if (current) {\n          observer.unobserve(current);\n        }\n      }\n    });\n  };\n\n  useEffect(() => {\n    let observer: IntersectionObserver | undefined;\n    let didCancel = false;\n\n    // Check if window is defined for SSR and Old browsers fallback\n    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {\n      setHasIntersected(true);\n    } else if (current && !didCancel) {\n      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);\n      observer.observe(current);\n    }\n    return () => {\n      didCancel = true;\n      if (observer && current) {\n        observer.unobserve(current);\n      }\n    };\n  }, [elRef]);\n\n  if (loading === 'eager') {\n    return [false];\n  }\n\n  return [hasIntersected];\n};\n"],"names":["ObserverParams","threshold","useHasIntersected","elRef","loading","hasIntersected","setHasIntersected","useState","current","isValidReference","handleOnIntersect","entries","observer","forEach","entry","isIntersecting","unobserve","useEffect","didCancel","window","IntersectionObserver","observe"],"mappings":";;;;AAEA,MAAMA,cAAc,GAA6B;AAC/CC,EAAAA,SAAS,EAAE,GAAA;CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACI,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,KAAK;AACLC,EAAAA,OAAO,GAAG,OAAA;AAAO,CAIlB,KAAI;EACH,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;EAE3D,MAAM;AAAEC,IAAAA,OAAAA;AAAO,GAAE,GAAGL,KAAK,IAAI,EAAE,CAAA;EAE/B,MAAMM,gBAAgB,GAAGA,MAAK;IAC5B,OAAON,KAAK,IAAIK,OAAO,CAAA;GACxB,CAAA;AAED,EAAA,MAAME,iBAAiB,GAAiCA,CAACC,OAAO,EAAEC,QAAQ,KAAI;AAC5ED,IAAAA,OAAO,CAACE,OAAO,CAAEC,KAAK,IAAI;MACxB,IAAIA,KAAK,CAACC,cAAc,EAAE;QACxBT,iBAAiB,CAAC,IAAI,CAAC,CAAA;AAEvB,QAAA,IAAIE,OAAO,EAAE;AACXI,UAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC,CAAA;AAC7B,SAAA;AACF,OAAA;AACF,KAAC,CAAC,CAAA;GACH,CAAA;AAEDS,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIL,QAA0C,CAAA;IAC9C,IAAIM,SAAS,GAAG,KAAK,CAAA;AAErB;AACA,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,IAAI,CAACA,MAAM,CAACC,oBAAoB,IAAI,CAACX,gBAAgB,EAAE,EAAE;MACxFH,iBAAiB,CAAC,IAAI,CAAC,CAAA;AACzB,KAAC,MAAM,IAAIE,OAAO,IAAI,CAACU,SAAS,EAAE;AAChCN,MAAAA,QAAQ,GAAG,IAAIQ,oBAAoB,CAACV,iBAAiB,EAAEV,cAAc,CAAC,CAAA;AACtEY,MAAAA,QAAQ,CAACS,OAAO,CAACb,OAAO,CAAC,CAAA;AAC3B,KAAA;AACA,IAAA,OAAO,MAAK;AACVU,MAAAA,SAAS,GAAG,IAAI,CAAA;MAChB,IAAIN,QAAQ,IAAIJ,OAAO,EAAE;AACvBI,QAAAA,QAAQ,CAACI,SAAS,CAACR,OAAO,CAAC,CAAA;AAC7B,OAAA;KACD,CAAA;AACH,GAAC,EAAE,CAACL,KAAK,CAAC,CAAC,CAAA;EAEX,IAAIC,OAAO,KAAK,OAAO,EAAE;IACvB,OAAO,CAAC,KAAK,CAAC,CAAA;AAChB,GAAA;EAEA,OAAO,CAACC,cAAc,CAAC,CAAA;AACzB;;;;"}