@transferwise/components 0.0.0-experimental-8032b6c → 0.0.0-experimental-31e4d9a

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 (189) hide show
  1. package/build/card/Card.js.map +1 -1
  2. package/build/card/Card.mjs.map +1 -1
  3. package/build/main.css +1918 -1179
  4. package/build/styles/accordion/Accordion.css +27 -17
  5. package/build/styles/actionButton/ActionButton.css +16 -5
  6. package/build/styles/actionOption/ActionOption.css +2 -1
  7. package/build/styles/alert/Alert.css +2 -1
  8. package/build/styles/avatar/Avatar.css +84 -69
  9. package/build/styles/avatarLayout/AvatarLayout.css +22 -16
  10. package/build/styles/avatarView/AvatarView.css +11 -4
  11. package/build/styles/avatarView/Dot.css +9 -4
  12. package/build/styles/badge/Badge.css +19 -14
  13. package/build/styles/button/Button.css +20 -19
  14. package/build/styles/button/LegacyButton.css +7 -4
  15. package/build/styles/card/Card.css +24 -20
  16. package/build/styles/carousel/Carousel.css +45 -26
  17. package/build/styles/checkboxButton/CheckboxButton.css +15 -10
  18. package/build/styles/chips/Chip.css +61 -39
  19. package/build/styles/circularButton/CircularButton.css +8 -8
  20. package/build/styles/common/Option/Option.css +57 -30
  21. package/build/styles/common/RadioButton/RadioButton.css +1 -0
  22. package/build/styles/common/bottomSheet/BottomSheet.css +20 -21
  23. package/build/styles/common/card/Card.css +10 -6
  24. package/build/styles/common/circle/Circle.css +16 -11
  25. package/build/styles/common/closeButton/CloseButton.css +45 -24
  26. package/build/styles/common/panel/Panel.css +13 -7
  27. package/build/styles/criticalBanner/CriticalCommsBanner.css +8 -5
  28. package/build/styles/dateInput/DateInput.css +5 -5
  29. package/build/styles/dateLookup/DateLookup.css +26 -13
  30. package/build/styles/dateLookup/dateTrigger/DateTrigger.css +13 -8
  31. package/build/styles/decision/Decision.css +4 -0
  32. package/build/styles/definitionList/DefinitionList.css +13 -8
  33. package/build/styles/dimmer/Dimmer.css +15 -13
  34. package/build/styles/divider/Divider.css +7 -5
  35. package/build/styles/drawer/Drawer.css +21 -15
  36. package/build/styles/dropFade/DropFade.css +2 -2
  37. package/build/styles/emphasis/Emphasis.css +6 -0
  38. package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +12 -8
  39. package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +4 -4
  40. package/build/styles/expressiveMoneyInput/chevron/Chevron.css +5 -3
  41. package/build/styles/expressiveMoneyInput/currencySelector/CurrencySelector.css +1 -0
  42. package/build/styles/field/Field.css +5 -3
  43. package/build/styles/flowNavigation/FlowNavigation.css +28 -22
  44. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +6 -5
  45. package/build/styles/header/Header.css +16 -8
  46. package/build/styles/iconButton/IconButton.css +17 -12
  47. package/build/styles/image/Image.css +7 -6
  48. package/build/styles/info/Info.css +1 -1
  49. package/build/styles/inputs/Input.css +51 -20
  50. package/build/styles/inputs/InputGroup.css +14 -5
  51. package/build/styles/inputs/SelectInput.css +101 -42
  52. package/build/styles/inputs/TextArea.css +54 -21
  53. package/build/styles/instructionsList/InstructionsList.css +5 -3
  54. package/build/styles/legacylistItem/LegacyListItem.css +1 -1
  55. package/build/styles/link/Link.css +6 -3
  56. package/build/styles/listItem/ListItem.css +88 -44
  57. package/build/styles/listItem/ListItem.grid.css +15 -7
  58. package/build/styles/loader/Loader.css +36 -21
  59. package/build/styles/logo/Logo.css +2 -2
  60. package/build/styles/main.css +1918 -1179
  61. package/build/styles/modal/Modal.css +27 -19
  62. package/build/styles/moneyInput/MoneyInput.css +26 -16
  63. package/build/styles/navigationOption/NavigationOption.css +21 -13
  64. package/build/styles/navigationOptionsList/NavigationOptionsList.css +6 -5
  65. package/build/styles/nudge/Nudge.css +77 -71
  66. package/build/styles/overlayHeader/OverlayHeader.css +6 -5
  67. package/build/styles/phoneNumberInput/PhoneNumberInput.css +7 -4
  68. package/build/styles/popover/Popover.css +21 -11
  69. package/build/styles/progress/Progress.css +12 -2
  70. package/build/styles/progressBar/ProgressBar.css +7 -2
  71. package/build/styles/promoCard/PromoCard.css +57 -37
  72. package/build/styles/prompt/ActionPrompt/ActionPrompt.css +11 -6
  73. package/build/styles/prompt/InfoPrompt/InfoPrompt.css +7 -4
  74. package/build/styles/prompt/InlinePrompt/InlinePrompt.css +8 -3
  75. package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css +15 -7
  76. package/build/styles/radioGroup/RadioGroup.css +1 -1
  77. package/build/styles/section/Section.css +6 -3
  78. package/build/styles/segmentedControl/SegmentedControl.css +25 -14
  79. package/build/styles/select/Select.css +129 -71
  80. package/build/styles/slidingPanel/SlidingPanel.css +26 -17
  81. package/build/styles/snackbar/Snackbar.css +32 -25
  82. package/build/styles/stepper/Stepper.css +14 -10
  83. package/build/styles/summary/Summary.css +30 -17
  84. package/build/styles/switch/Switch.css +10 -6
  85. package/build/styles/table/Table.css +71 -47
  86. package/build/styles/tabs/Tabs.css +34 -19
  87. package/build/styles/tile/Tile.css +21 -9
  88. package/build/styles/tooltip/Tooltip.css +7 -3
  89. package/build/styles/typeahead/Typeahead.css +53 -38
  90. package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +2 -0
  91. package/build/styles/upload/Upload.css +10 -8
  92. package/build/styles/uploadInput/UploadInput.css +6 -4
  93. package/build/styles/uploadInput/uploadButton/UploadButton.css +24 -14
  94. package/build/styles/uploadInput/uploadItem/UploadItem.css +58 -35
  95. package/build/types/card/Card.d.ts +1 -1
  96. package/package.json +2 -2
  97. package/src/accordion/Accordion.css +27 -17
  98. package/src/actionButton/ActionButton.css +16 -5
  99. package/src/actionOption/ActionOption.css +2 -1
  100. package/src/alert/Alert.css +2 -1
  101. package/src/avatar/Avatar.css +84 -69
  102. package/src/avatarLayout/AvatarLayout.css +22 -16
  103. package/src/avatarView/AvatarView.css +11 -4
  104. package/src/avatarView/Dot.css +9 -4
  105. package/src/badge/Badge.css +19 -14
  106. package/src/button/Button.css +20 -19
  107. package/src/button/LegacyButton.css +7 -4
  108. package/src/card/Card.css +24 -20
  109. package/src/card/Card.story.tsx +3 -2
  110. package/src/card/Card.tsx +1 -1
  111. package/src/carousel/Carousel.css +45 -26
  112. package/src/checkboxButton/CheckboxButton.css +15 -10
  113. package/src/chips/Chip.css +61 -39
  114. package/src/circularButton/CircularButton.css +8 -8
  115. package/src/common/Option/Option.css +57 -30
  116. package/src/common/RadioButton/RadioButton.css +1 -0
  117. package/src/common/bottomSheet/BottomSheet.css +20 -21
  118. package/src/common/card/Card.css +10 -6
  119. package/src/common/circle/Circle.css +16 -11
  120. package/src/common/closeButton/CloseButton.css +45 -24
  121. package/src/common/panel/Panel.css +13 -7
  122. package/src/criticalBanner/CriticalCommsBanner.css +8 -5
  123. package/src/dateInput/DateInput.css +5 -5
  124. package/src/dateLookup/DateLookup.css +26 -13
  125. package/src/dateLookup/dateTrigger/DateTrigger.css +13 -8
  126. package/src/decision/Decision.css +4 -0
  127. package/src/definitionList/DefinitionList.css +13 -8
  128. package/src/dimmer/Dimmer.css +15 -13
  129. package/src/divider/Divider.css +7 -5
  130. package/src/drawer/Drawer.css +21 -15
  131. package/src/dropFade/DropFade.css +2 -2
  132. package/src/emphasis/Emphasis.css +6 -0
  133. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +12 -8
  134. package/src/expressiveMoneyInput/amountInput/AmountInput.css +4 -4
  135. package/src/expressiveMoneyInput/chevron/Chevron.css +5 -3
  136. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.css +1 -0
  137. package/src/field/Field.css +5 -3
  138. package/src/flowNavigation/FlowNavigation.css +28 -22
  139. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +6 -5
  140. package/src/header/Header.css +16 -8
  141. package/src/iconButton/IconButton.css +17 -12
  142. package/src/image/Image.css +7 -6
  143. package/src/info/Info.css +1 -1
  144. package/src/inputs/Input.css +51 -20
  145. package/src/inputs/InputGroup.css +14 -5
  146. package/src/inputs/SelectInput.css +101 -42
  147. package/src/inputs/TextArea.css +54 -21
  148. package/src/instructionsList/InstructionsList.css +5 -3
  149. package/src/legacylistItem/LegacyListItem.css +1 -1
  150. package/src/link/Link.css +6 -3
  151. package/src/listItem/ListItem.css +88 -44
  152. package/src/listItem/ListItem.grid.css +15 -7
  153. package/src/loader/Loader.css +36 -21
  154. package/src/logo/Logo.css +2 -2
  155. package/src/main.css +1918 -1179
  156. package/src/modal/Modal.css +27 -19
  157. package/src/moneyInput/MoneyInput.css +26 -16
  158. package/src/navigationOption/NavigationOption.css +21 -13
  159. package/src/navigationOptionsList/NavigationOptionsList.css +6 -5
  160. package/src/nudge/Nudge.css +77 -71
  161. package/src/overlayHeader/OverlayHeader.css +6 -5
  162. package/src/phoneNumberInput/PhoneNumberInput.css +7 -4
  163. package/src/popover/Popover.css +21 -11
  164. package/src/progress/Progress.css +12 -2
  165. package/src/progressBar/ProgressBar.css +7 -2
  166. package/src/promoCard/PromoCard.css +57 -37
  167. package/src/prompt/ActionPrompt/ActionPrompt.css +11 -6
  168. package/src/prompt/InfoPrompt/InfoPrompt.css +7 -4
  169. package/src/prompt/InlinePrompt/InlinePrompt.css +8 -3
  170. package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +15 -7
  171. package/src/radioGroup/RadioGroup.css +1 -1
  172. package/src/section/Section.css +6 -3
  173. package/src/segmentedControl/SegmentedControl.css +25 -14
  174. package/src/select/Select.css +129 -71
  175. package/src/slidingPanel/SlidingPanel.css +26 -17
  176. package/src/snackbar/Snackbar.css +32 -25
  177. package/src/stepper/Stepper.css +14 -10
  178. package/src/summary/Summary.css +30 -17
  179. package/src/switch/Switch.css +10 -6
  180. package/src/table/Table.css +71 -47
  181. package/src/tabs/Tabs.css +34 -19
  182. package/src/tile/Tile.css +21 -9
  183. package/src/tooltip/Tooltip.css +7 -3
  184. package/src/typeahead/Typeahead.css +53 -38
  185. package/src/typeahead/typeaheadOption/TypeaheadOption.css +2 -0
  186. package/src/upload/Upload.css +10 -8
  187. package/src/uploadInput/UploadInput.css +6 -4
  188. package/src/uploadInput/uploadButton/UploadButton.css +24 -14
  189. package/src/uploadInput/uploadItem/UploadItem.css +58 -35
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,WAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,eAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,SAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,cAAA,CAACC,cAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,cAAA,CAACO,eAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,cAAA,CAACY,YAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,WAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,eAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,SAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,cAAA,CAACC,cAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,cAAA,CAACO,eAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,cAAA,CAACY,YAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,KAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,IAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,IAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,GAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,GAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,KAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,IAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,IAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,GAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,GAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}