@transferwise/components 0.0.0-experimental-7df8816 → 0.0.0-experimental-d2bc8ee

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (163) hide show
  1. package/build/common/closeButton/CloseButton.messages.js +2 -2
  2. package/build/common/closeButton/CloseButton.messages.js.map +1 -1
  3. package/build/common/closeButton/CloseButton.messages.mjs +2 -2
  4. package/build/common/closeButton/CloseButton.messages.mjs.map +1 -1
  5. package/build/common/closeButton/CloseButton.mjs +2 -2
  6. package/build/common/closeButton/CloseButton.mjs.map +1 -1
  7. package/build/drawer/Drawer.js +9 -18
  8. package/build/drawer/Drawer.js.map +1 -1
  9. package/build/drawer/Drawer.mjs +9 -18
  10. package/build/drawer/Drawer.mjs.map +1 -1
  11. package/build/main.css +476 -223
  12. package/build/modal/Modal.js +21 -20
  13. package/build/modal/Modal.js.map +1 -1
  14. package/build/modal/Modal.mjs +21 -20
  15. package/build/modal/Modal.mjs.map +1 -1
  16. package/build/select/Select.js +1 -2
  17. package/build/select/Select.js.map +1 -1
  18. package/build/select/Select.mjs +1 -2
  19. package/build/select/Select.mjs.map +1 -1
  20. package/build/styles/accordion/Accordion.css +2 -6
  21. package/build/styles/actionButton/ActionButton.css +12 -4
  22. package/build/styles/avatar/Avatar.css +13 -10
  23. package/build/styles/avatarView/AvatarView.css +5 -3
  24. package/build/styles/avatarView/Dot.css +2 -1
  25. package/build/styles/button/Button.css +1 -0
  26. package/build/styles/card/Card.css +2 -2
  27. package/build/styles/carousel/Carousel.css +5 -2
  28. package/build/styles/checkboxButton/CheckboxButton.css +0 -1
  29. package/build/styles/chips/Chip.css +31 -12
  30. package/build/styles/circularButton/CircularButton.css +6 -0
  31. package/build/styles/common/Option/Option.css +2 -2
  32. package/build/styles/common/RadioButton/RadioButton.css +1 -1
  33. package/build/styles/common/bottomSheet/BottomSheet.css +1 -1
  34. package/build/styles/common/card/Card.css +1 -1
  35. package/build/styles/common/closeButton/CloseButton.css +7 -2
  36. package/build/styles/criticalBanner/CriticalCommsBanner.css +4 -0
  37. package/build/styles/dateLookup/DateLookup.css +5 -3
  38. package/build/styles/definitionList/DefinitionList.css +1 -1
  39. package/build/styles/divider/Divider.css +1 -1
  40. package/build/styles/drawer/Drawer.css +58 -11
  41. package/build/styles/emphasis/Emphasis.css +4 -5
  42. package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -0
  43. package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +1 -0
  44. package/build/styles/expressiveMoneyInput/chevron/Chevron.css +1 -0
  45. package/build/styles/flowNavigation/FlowNavigation.css +2 -1
  46. package/build/styles/header/Header.css +2 -2
  47. package/build/styles/iconButton/IconButton.css +27 -4
  48. package/build/styles/inputs/Input.css +5 -5
  49. package/build/styles/inputs/InputGroup.css +3 -2
  50. package/build/styles/inputs/SelectInput.css +14 -13
  51. package/build/styles/inputs/TextArea.css +5 -5
  52. package/build/styles/instructionsList/InstructionsList.css +2 -0
  53. package/build/styles/listItem/ListItem.css +22 -8
  54. package/build/styles/logo/Logo.css +2 -0
  55. package/build/styles/main.css +476 -223
  56. package/build/styles/modal/Modal.css +68 -6
  57. package/build/styles/moneyInput/MoneyInput.css +2 -2
  58. package/build/styles/navigationOption/NavigationOption.css +1 -3
  59. package/build/styles/nudge/Nudge.css +1 -1
  60. package/build/styles/overlayHeader/OverlayHeader.css +2 -1
  61. package/build/styles/popover/Popover.css +2 -2
  62. package/build/styles/progress/Progress.css +3 -3
  63. package/build/styles/progressBar/ProgressBar.css +2 -2
  64. package/build/styles/promoCard/PromoCard.css +3 -3
  65. package/build/styles/prompt/InlinePrompt/InlinePrompt.css +39 -3
  66. package/build/styles/segmentedControl/SegmentedControl.css +6 -2
  67. package/build/styles/select/Select.css +25 -41
  68. package/build/styles/slidingPanel/SlidingPanel.css +4 -4
  69. package/build/styles/snackbar/Snackbar.css +4 -4
  70. package/build/styles/statusIcon/StatusIcon.css +10 -2
  71. package/build/styles/stepper/Stepper.css +4 -4
  72. package/build/styles/summary/Summary.css +5 -2
  73. package/build/styles/switch/Switch.css +3 -2
  74. package/build/styles/table/Table.css +13 -5
  75. package/build/styles/tabs/Tabs.css +10 -9
  76. package/build/styles/tile/Tile.css +8 -5
  77. package/build/styles/typeahead/Typeahead.css +2 -1
  78. package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -4
  79. package/build/styles/upload/Upload.css +1 -1
  80. package/build/styles/uploadInput/uploadButton/UploadButton.css +4 -2
  81. package/build/styles/uploadInput/uploadItem/UploadItem.css +8 -4
  82. package/build/types/drawer/Drawer.d.ts.map +1 -1
  83. package/build/types/modal/Modal.d.ts.map +1 -1
  84. package/build/types/select/Select.d.ts +1 -1
  85. package/build/types/select/Select.d.ts.map +1 -1
  86. package/package.json +12 -7
  87. package/src/accordion/Accordion.css +2 -6
  88. package/src/accordion/Accordion.less +0 -7
  89. package/src/accordion/Accordion.story.tsx +1 -1
  90. package/src/actionButton/ActionButton.css +12 -4
  91. package/src/avatar/Avatar.css +13 -10
  92. package/src/avatarLayout/AvatarLayout.story.tsx +0 -1
  93. package/src/avatarView/AvatarView.css +5 -3
  94. package/src/avatarView/AvatarView.story.tsx +0 -1
  95. package/src/avatarView/Dot.css +2 -1
  96. package/src/button/Button.css +1 -0
  97. package/src/card/Card.css +2 -2
  98. package/src/carousel/Carousel.css +5 -2
  99. package/src/checkboxButton/CheckboxButton.css +0 -1
  100. package/src/chips/Chip.css +31 -12
  101. package/src/circularButton/CircularButton.css +6 -0
  102. package/src/common/Option/Option.css +2 -2
  103. package/src/common/RadioButton/RadioButton.css +1 -1
  104. package/src/common/bottomSheet/BottomSheet.css +1 -1
  105. package/src/common/card/Card.css +1 -1
  106. package/src/common/closeButton/CloseButton.css +7 -2
  107. package/src/criticalBanner/CriticalCommsBanner.css +4 -0
  108. package/src/dateLookup/DateLookup.css +5 -3
  109. package/src/definitionList/DefinitionList.css +1 -1
  110. package/src/display/Display.story.tsx +0 -1
  111. package/src/divider/Divider.css +1 -1
  112. package/src/drawer/Drawer.css +58 -11
  113. package/src/drawer/Drawer.less +70 -14
  114. package/src/drawer/Drawer.story.tsx +100 -158
  115. package/src/drawer/Drawer.tsx +7 -26
  116. package/src/emphasis/Emphasis.css +4 -5
  117. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -0
  118. package/src/expressiveMoneyInput/amountInput/AmountInput.css +1 -0
  119. package/src/expressiveMoneyInput/chevron/Chevron.css +1 -0
  120. package/src/flowNavigation/FlowNavigation.css +2 -1
  121. package/src/header/Header.css +2 -2
  122. package/src/iconButton/IconButton.css +27 -4
  123. package/src/iconButton/IconButton.story.tsx +0 -1
  124. package/src/inputs/Input.css +5 -5
  125. package/src/inputs/InputGroup.css +3 -2
  126. package/src/inputs/SelectInput.css +14 -13
  127. package/src/inputs/TextArea.css +5 -5
  128. package/src/instructionsList/InstructionsList.css +2 -0
  129. package/src/listItem/ListItem.css +22 -8
  130. package/src/logo/Logo.css +2 -0
  131. package/src/main.css +476 -223
  132. package/src/modal/Modal.css +68 -6
  133. package/src/modal/Modal.less +76 -6
  134. package/src/modal/Modal.tsx +23 -23
  135. package/src/moneyInput/MoneyInput.css +2 -2
  136. package/src/navigationOption/NavigationOption.css +1 -3
  137. package/src/nudge/Nudge.css +1 -1
  138. package/src/overlayHeader/OverlayHeader.css +2 -1
  139. package/src/popover/Popover.css +2 -2
  140. package/src/progress/Progress.css +3 -3
  141. package/src/progressBar/ProgressBar.css +2 -2
  142. package/src/promoCard/PromoCard.css +3 -3
  143. package/src/prompt/InlinePrompt/InlinePrompt.css +39 -3
  144. package/src/segmentedControl/SegmentedControl.css +6 -2
  145. package/src/select/Select.css +25 -41
  146. package/src/select/Select.less +0 -25
  147. package/src/select/Select.tsx +1 -6
  148. package/src/slidingPanel/SlidingPanel.css +4 -4
  149. package/src/snackbar/Snackbar.css +4 -4
  150. package/src/snackbar/Snackbar.less +2 -4
  151. package/src/statusIcon/StatusIcon.css +10 -2
  152. package/src/stepper/Stepper.css +4 -4
  153. package/src/summary/Summary.css +5 -2
  154. package/src/switch/Switch.css +3 -2
  155. package/src/table/Table.css +13 -5
  156. package/src/tabs/Tabs.css +10 -9
  157. package/src/tile/Tile.css +8 -5
  158. package/src/typeahead/Typeahead.css +2 -1
  159. package/src/typeahead/typeaheadOption/TypeaheadOption.css +1 -4
  160. package/src/typeahead/typeaheadOption/TypeaheadOption.less +0 -6
  161. package/src/upload/Upload.css +1 -1
  162. package/src/uploadInput/uploadButton/UploadButton.css +4 -2
  163. package/src/uploadInput/uploadItem/UploadItem.css +8 -4
@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var reactIntl = require('react-intl');
6
6
 
7
- var closeBtnMessages = reactIntl.defineMessages({
7
+ var messages = reactIntl.defineMessages({
8
8
  ariaLabel: {
9
9
  id: "neptune.CloseButton.ariaLabel"
10
10
  }
11
11
  });
12
12
 
13
- exports.default = closeBtnMessages;
13
+ exports.default = messages;
14
14
  //# sourceMappingURL=CloseButton.messages.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CloseButton.messages.js","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,uBAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
1
+ {"version":3,"file":"CloseButton.messages.js","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
@@ -1,10 +1,10 @@
1
1
  import { defineMessages } from 'react-intl';
2
2
 
3
- var closeBtnMessages = defineMessages({
3
+ var messages = defineMessages({
4
4
  ariaLabel: {
5
5
  id: "neptune.CloseButton.ariaLabel"
6
6
  }
7
7
  });
8
8
 
9
- export { closeBtnMessages as default };
9
+ export { messages as default };
10
10
  //# sourceMappingURL=CloseButton.messages.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"CloseButton.messages.mjs","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,uBAAeA,cAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
1
+ {"version":3,"file":"CloseButton.messages.mjs","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
3
3
  import { forwardRef } from 'react';
4
4
  import { useIntl } from 'react-intl';
5
5
  import { Size } from '../propsValues/size.mjs';
6
- import closeBtnMessages from './CloseButton.messages.mjs';
6
+ import messages from './CloseButton.messages.mjs';
7
7
  import { jsx } from 'react/jsx-runtime';
8
8
 
9
9
  const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
@@ -17,7 +17,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
17
17
  tabIndex
18
18
  }, reference) {
19
19
  const intl = useIntl();
20
- ariaLabel ??= intl.formatMessage(closeBtnMessages.ariaLabel);
20
+ ariaLabel ??= intl.formatMessage(messages.ariaLabel);
21
21
  const Icon = filled ? CrossCircleFill : Cross;
22
22
  return /*#__PURE__*/jsx("button", {
23
23
  ref: reference,
@@ -1 +1 @@
1
- {"version":3,"file":"CloseButton.mjs","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n React.ComponentPropsWithoutRef<'button'>,\n 'aria-label' | 'className' | 'onClick'\n> & {\n size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n filled?: boolean;\n isDisabled?: boolean;\n testId?: string;\n tabIndex?: number;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n {\n 'aria-label': ariaLabel,\n size = Size.MEDIUM,\n filled = false,\n className,\n onClick,\n isDisabled,\n testId,\n tabIndex,\n }: CloseButtonProps,\n reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n const intl = useIntl();\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const Icon = filled ? CrossCircleFill : Cross;\n\n return (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-close-button',\n 'close btn-link',\n 'text-no-decoration',\n {\n 'np-close-button--x-small': size === Size.EXTRA_SMALL,\n 'np-close-button--large': size === Size.MEDIUM,\n 'np-close-button--x-large': size === Size.LARGE,\n },\n className,\n )}\n aria-label={ariaLabel}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n data-testid={testId}\n tabIndex={tabIndex}\n onClick={onClick}\n >\n <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n </button>\n );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;MAuBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AAAQ,CACS,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,gBAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,eAAe,GAAGC,KAAK;AAE7C,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,IAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,IAAI,KAAKC,IAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,IAAI,KAAKC,IAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,IAAI,KAAKC,IAAI,CAACqB;KAC3C,EACDlB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,GAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACwB,KAAK,IAAIzB,IAAI,KAAKC,IAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;KAAG;AACzE,GAAQ,CAAC;AAEb,CAAC;;;;"}
1
+ {"version":3,"file":"CloseButton.mjs","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n React.ComponentPropsWithoutRef<'button'>,\n 'aria-label' | 'className' | 'onClick'\n> & {\n size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n filled?: boolean;\n isDisabled?: boolean;\n testId?: string;\n tabIndex?: number;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n {\n 'aria-label': ariaLabel,\n size = Size.MEDIUM,\n filled = false,\n className,\n onClick,\n isDisabled,\n testId,\n tabIndex,\n }: CloseButtonProps,\n reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n const intl = useIntl();\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const Icon = filled ? CrossCircleFill : Cross;\n\n return (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-close-button',\n 'close btn-link',\n 'text-no-decoration',\n {\n 'np-close-button--x-small': size === Size.EXTRA_SMALL,\n 'np-close-button--large': size === Size.MEDIUM,\n 'np-close-button--x-large': size === Size.LARGE,\n },\n className,\n )}\n aria-label={ariaLabel}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n data-testid={testId}\n tabIndex={tabIndex}\n onClick={onClick}\n >\n <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n </button>\n );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;MAuBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AAAQ,CACS,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,QAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,eAAe,GAAGC,KAAK;AAE7C,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,IAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,IAAI,KAAKC,IAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,IAAI,KAAKC,IAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,IAAI,KAAKC,IAAI,CAACqB;KAC3C,EACDlB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,GAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACwB,KAAK,IAAIzB,IAAI,KAAKC,IAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;KAAG;AACzE,GAAQ,CAAC;AAEb,CAAC;;;;"}
@@ -23,10 +23,7 @@ require('../common/propsValues/variant.js');
23
23
  require('../common/propsValues/scroll.js');
24
24
  require('../common/propsValues/markdownNodeType.js');
25
25
  require('../common/fileType.js');
26
- var icons = require('@transferwise/icons');
27
- var reactIntl = require('react-intl');
28
- var CloseButton_messages = require('../common/closeButton/CloseButton.messages.js');
29
- var jsxRuntime = require('react/jsx-runtime');
26
+ var CloseButton = require('../common/closeButton/CloseButton.js');
30
27
  require('@transferwise/neptune-validation');
31
28
  require('../provider/direction/DirectionProvider.js');
32
29
  var useLayout = require('../common/hooks/useLayout/useLayout.js');
@@ -35,7 +32,7 @@ var OverlayIdProvider = require('../provider/overlay/OverlayIdProvider.js');
35
32
  var SlidingPanel = require('../slidingPanel/SlidingPanel.js');
36
33
  var Title = require('../title/Title.js');
37
34
  var logActionRequired = require('../utilities/logActionRequired.js');
38
- var IconButton = require('../iconButton/IconButton.js');
35
+ var jsxRuntime = require('react/jsx-runtime');
39
36
 
40
37
  function Drawer({
41
38
  children,
@@ -49,7 +46,6 @@ function Drawer({
49
46
  role = 'dialog',
50
47
  'aria-labelledby': ariaLabelledBy
51
48
  }) {
52
- const intl = reactIntl.useIntl();
53
49
  logActionRequired.logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
54
50
  const {
55
51
  isMobile
@@ -70,27 +66,22 @@ function Drawer({
70
66
  "aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
71
67
  className: clsx.clsx('np-drawer', className),
72
68
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
73
- className: clsx.clsx('np-drawer-header', 'd-flex', 'align-items-center', headerTitle ? 'justify-content-between' : 'justify-content-end', 'flex-wrap'),
69
+ className: clsx.clsx('np-drawer-header', {
70
+ 'np-drawer-header--withborder': headerTitle
71
+ }),
74
72
  children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title.default, {
75
73
  id: titleId,
76
- type: typography.Typography.TITLE_SUBSECTION,
77
- className: "np-drawer-title",
74
+ type: typography.Typography.TITLE_BODY,
78
75
  children: headerTitle
79
- }), /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
80
- size: 40,
81
- priority: "tertiary",
82
- "aria-label": intl.formatMessage(CloseButton_messages.default.ariaLabel),
83
- onClick: onClose,
84
- children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
76
+ }), /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
77
+ onClick: onClose
85
78
  })]
86
79
  }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
87
80
  className: clsx.clsx('np-drawer-content'),
88
81
  children: children
89
- }), footerContent ? /*#__PURE__*/jsxRuntime.jsx("div", {
82
+ }), footerContent && /*#__PURE__*/jsxRuntime.jsx("div", {
90
83
  className: clsx.clsx('np-drawer-footer'),
91
84
  children: footerContent
92
- }) : /*#__PURE__*/jsxRuntime.jsx("div", {
93
- className: "m-t-3"
94
85
  })]
95
86
  })
96
87
  })
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\nimport { useIntl } from 'react-intl';\nimport { Cross } from '@transferwise/icons';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n const intl = useIntl();\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx(\n 'np-drawer-header',\n 'd-flex',\n 'align-items-center',\n headerTitle ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"np-drawer-title\">\n {headerTitle}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent ? (\n <div className={clsx('np-drawer-footer')}>{footerContent}</div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","intl","useIntl","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_SUBSECTION","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCc,SAAUA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC;AAAc,CACrB,EAAA;AACZ,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AACtBC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACR,OAAO,CACT;EAED,MAAM;AAAES,IAAAA;GAAU,GAAGC,mBAAS,EAAE;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACf,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACkB,IAAAA,QAAQ,EAAEjB,SAAU;IAAAL,QAAA,eACxDoB,cAAA,CAACG,oBAAY,EAAA;AAACjB,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEM,QAAQ,GAAGW,iBAAQ,CAACC,MAAM,GAAGlB,UAAS;AAAAP,MAAAA,QAAA,eACxE0B,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdT,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAA,EAAA,IAAU;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGY,OAAO,GAAGa,SAAS,CAAE;AACvE3B,QAAAA,SAAS,EAAE4B,SAAI,CAAC,WAAW,EAAE5B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExC0B,eAAA,CAAA,KAAA,EAAA;AACEzB,UAAAA,SAAS,EAAE4B,SAAI,CACb,kBAAkB,EAClB,QAAQ,EACR,oBAAoB,EACpB1B,WAAW,GAAG,yBAAyB,GAAG,qBAAqB,EAC/D,WAAW,CACX;AAAAH,UAAAA,QAAA,EAAA,CAEDG,WAAW,iBACViB,cAAA,CAACU,aAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,gBAAiB;AAAChC,YAAAA,SAAS,EAAC,iBAAiB;AAAAD,YAAAA,QAAA,EAC/EG;AAAW,WACP,CACR,eACDiB,cAAA,CAACc,kBAAU,EAAA;AACTC,YAAAA,IAAI,EAAE,EAAG;AACTC,YAAAA,QAAQ,EAAC,UAAU;AACnB,YAAA,YAAA,EAAY1B,IAAI,CAAC2B,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,YAAAA,OAAO,EAAEpC,OAAQ;AAAAJ,YAAAA,QAAA,eAEjBoB,cAAA,CAACqB,WAAK,EAAA,EAAA;AACR,WAAY,CACd;AAAA,SAAK,CACL,EAACzC,QAAQ,iBAAIoB,cAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,SAAI,CAAC,mBAAmB,CAAE;AAAA7B,UAAAA,QAAA,EAAEA;AAAQ,SAAM,CAAC,EACvEE,aAAa,gBACZkB,cAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,SAAI,CAAC,kBAAkB,CAAE;AAAA7B,UAAAA,QAAA,EAAEE;SAAmB,CAAC,gBAE/DkB,cAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAC;AAAO,SAAA,CACvB;OACE;KACO;AAChB,GAAQ,CAAC;AAEb;;;;"}
1
+ {"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx('np-drawer-header', {\n 'np-drawer-header--withborder': headerTitle,\n })}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_BODY}>\n {headerTitle}\n </Title>\n )}\n <CloseButton onClick={onClose} />\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6Bc,SAAUA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC;AAAc,CACrB,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACN,OAAO,CACT;EAED,MAAM;AAAEO,IAAAA;GAAU,GAAGC,mBAAS,EAAE;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACgB,IAAAA,QAAQ,EAAEf,SAAU;IAAAL,QAAA,eACxDkB,cAAA,CAACG,oBAAY,EAAA;AAACf,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGW,iBAAQ,CAACC,MAAM,GAAGhB,UAAS;AAAAP,MAAAA,QAAA,eACxEwB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAA,EAAA,IAAU;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGU,OAAO,GAAGa,SAAS,CAAE;AACvEzB,QAAAA,SAAS,EAAE0B,SAAI,CAAC,WAAW,EAAE1B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCwB,eAAA,CAAA,KAAA,EAAA;AACEvB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAExB;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAAA,CAEFG,WAAW,iBACVe,cAAA,CAACU,aAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA/B,YAAAA,QAAA,EAC7CG;AAAW,WACP,CACR,eACDe,cAAA,CAACc,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE7B;AAAQ,WAAA,CAChC;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIkB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,mBAAmB,CAAE;AAAA3B,UAAAA,QAAA,EAAEA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIgB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,kBAAkB,CAAE;AAAA3B,UAAAA,QAAA,EAAEE;AAAa,SAAM,CAAC;OAC9E;KACO;AAChB,GAAQ,CAAC;AAEb;;;;"}
@@ -19,10 +19,7 @@ import '../common/propsValues/variant.mjs';
19
19
  import '../common/propsValues/scroll.mjs';
20
20
  import '../common/propsValues/markdownNodeType.mjs';
21
21
  import '../common/fileType.mjs';
22
- import { Cross } from '@transferwise/icons';
23
- import { useIntl } from 'react-intl';
24
- import closeBtnMessages from '../common/closeButton/CloseButton.messages.mjs';
25
- import { jsx, jsxs } from 'react/jsx-runtime';
22
+ import { CloseButton } from '../common/closeButton/CloseButton.mjs';
26
23
  import '@transferwise/neptune-validation';
27
24
  import '../provider/direction/DirectionProvider.mjs';
28
25
  import { useLayout } from '../common/hooks/useLayout/useLayout.mjs';
@@ -31,7 +28,7 @@ import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider.mjs';
31
28
  import SlidingPanel from '../slidingPanel/SlidingPanel.mjs';
32
29
  import Title from '../title/Title.mjs';
33
30
  import { logActionRequiredIf } from '../utilities/logActionRequired.mjs';
34
- import IconButton from '../iconButton/IconButton.mjs';
31
+ import { jsx, jsxs } from 'react/jsx-runtime';
35
32
 
36
33
  function Drawer({
37
34
  children,
@@ -45,7 +42,6 @@ function Drawer({
45
42
  role = 'dialog',
46
43
  'aria-labelledby': ariaLabelledBy
47
44
  }) {
48
- const intl = useIntl();
49
45
  logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
50
46
  const {
51
47
  isMobile
@@ -66,27 +62,22 @@ function Drawer({
66
62
  "aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
67
63
  className: clsx('np-drawer', className),
68
64
  children: [/*#__PURE__*/jsxs("div", {
69
- className: clsx('np-drawer-header', 'd-flex', 'align-items-center', headerTitle ? 'justify-content-between' : 'justify-content-end', 'flex-wrap'),
65
+ className: clsx('np-drawer-header', {
66
+ 'np-drawer-header--withborder': headerTitle
67
+ }),
70
68
  children: [headerTitle && /*#__PURE__*/jsx(Title, {
71
69
  id: titleId,
72
- type: Typography.TITLE_SUBSECTION,
73
- className: "np-drawer-title",
70
+ type: Typography.TITLE_BODY,
74
71
  children: headerTitle
75
- }), /*#__PURE__*/jsx(IconButton, {
76
- size: 40,
77
- priority: "tertiary",
78
- "aria-label": intl.formatMessage(closeBtnMessages.ariaLabel),
79
- onClick: onClose,
80
- children: /*#__PURE__*/jsx(Cross, {})
72
+ }), /*#__PURE__*/jsx(CloseButton, {
73
+ onClick: onClose
81
74
  })]
82
75
  }), children && /*#__PURE__*/jsx("div", {
83
76
  className: clsx('np-drawer-content'),
84
77
  children: children
85
- }), footerContent ? /*#__PURE__*/jsx("div", {
78
+ }), footerContent && /*#__PURE__*/jsx("div", {
86
79
  className: clsx('np-drawer-footer'),
87
80
  children: footerContent
88
- }) : /*#__PURE__*/jsx("div", {
89
- className: "m-t-3"
90
81
  })]
91
82
  })
92
83
  })
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\nimport { useIntl } from 'react-intl';\nimport { Cross } from '@transferwise/icons';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n const intl = useIntl();\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx(\n 'np-drawer-header',\n 'd-flex',\n 'align-items-center',\n headerTitle ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"np-drawer-title\">\n {headerTitle}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent ? (\n <div className={clsx('np-drawer-footer')}>{footerContent}</div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","intl","useIntl","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_SUBSECTION","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCc,SAAUA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC;AAAc,CACrB,EAAA;AACZ,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AACtBC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACR,OAAO,CACT;EAED,MAAM;AAAES,IAAAA;GAAU,GAAGC,SAAS,EAAE;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACf,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACkB,IAAAA,QAAQ,EAAEjB,SAAU;IAAAL,QAAA,eACxDoB,GAAA,CAACG,YAAY,EAAA;AAACjB,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEM,QAAQ,GAAGW,QAAQ,CAACC,MAAM,GAAGlB,QAAS;AAAAP,MAAAA,QAAA,eACxE0B,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdT,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAA,EAAA,IAAU;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGY,OAAO,GAAGa,SAAS,CAAE;AACvE3B,QAAAA,SAAS,EAAE4B,IAAI,CAAC,WAAW,EAAE5B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExC0B,IAAA,CAAA,KAAA,EAAA;AACEzB,UAAAA,SAAS,EAAE4B,IAAI,CACb,kBAAkB,EAClB,QAAQ,EACR,oBAAoB,EACpB1B,WAAW,GAAG,yBAAyB,GAAG,qBAAqB,EAC/D,WAAW,CACX;AAAAH,UAAAA,QAAA,EAAA,CAEDG,WAAW,iBACViB,GAAA,CAACU,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,UAAU,CAACC,gBAAiB;AAAChC,YAAAA,SAAS,EAAC,iBAAiB;AAAAD,YAAAA,QAAA,EAC/EG;AAAW,WACP,CACR,eACDiB,GAAA,CAACc,UAAU,EAAA;AACTC,YAAAA,IAAI,EAAE,EAAG;AACTC,YAAAA,QAAQ,EAAC,UAAU;AACnB,YAAA,YAAA,EAAY1B,IAAI,CAAC2B,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,YAAAA,OAAO,EAAEpC,OAAQ;AAAAJ,YAAAA,QAAA,eAEjBoB,GAAA,CAACqB,KAAK,EAAA,EAAA;AACR,WAAY,CACd;AAAA,SAAK,CACL,EAACzC,QAAQ,iBAAIoB,GAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,IAAI,CAAC,mBAAmB,CAAE;AAAA7B,UAAAA,QAAA,EAAEA;AAAQ,SAAM,CAAC,EACvEE,aAAa,gBACZkB,GAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAE4B,IAAI,CAAC,kBAAkB,CAAE;AAAA7B,UAAAA,QAAA,EAAEE;SAAmB,CAAC,gBAE/DkB,GAAA,CAAA,KAAA,EAAA;AAAKnB,UAAAA,SAAS,EAAC;AAAO,SAAA,CACvB;OACE;KACO;AAChB,GAAQ,CAAC;AAEb;;;;"}
1
+ {"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx('np-drawer-header', {\n 'np-drawer-header--withborder': headerTitle,\n })}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_BODY}>\n {headerTitle}\n </Title>\n )}\n <CloseButton onClick={onClose} />\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6Bc,SAAUA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC;AAAc,CACrB,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACN,OAAO,CACT;EAED,MAAM;AAAEO,IAAAA;GAAU,GAAGC,SAAS,EAAE;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACgB,IAAAA,QAAQ,EAAEf,SAAU;IAAAL,QAAA,eACxDkB,GAAA,CAACG,YAAY,EAAA;AAACf,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGW,QAAQ,CAACC,MAAM,GAAGhB,QAAS;AAAAP,MAAAA,QAAA,eACxEwB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAA,EAAA,IAAU;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGU,OAAO,GAAGa,SAAS,CAAE;AACvEzB,QAAAA,SAAS,EAAE0B,IAAI,CAAC,WAAW,EAAE1B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCwB,IAAA,CAAA,KAAA,EAAA;AACEvB,UAAAA,SAAS,EAAE0B,IAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAExB;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAAA,CAEFG,WAAW,iBACVe,GAAA,CAACU,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA/B,YAAAA,QAAA,EAC7CG;AAAW,WACP,CACR,eACDe,GAAA,CAACc,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE7B;AAAQ,WAAA,CAChC;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIkB,GAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,IAAI,CAAC,mBAAmB,CAAE;AAAA3B,UAAAA,QAAA,EAAEA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIgB,GAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,IAAI,CAAC,kBAAkB,CAAE;AAAA3B,UAAAA,QAAA,EAAEE;AAAa,SAAM,CAAC;OAC9E;KACO;AAChB,GAAQ,CAAC;AAEb;;;;"}