@transferwise/components 0.0.0-experimental-9b6c3f8 → 0.0.0-experimental-c70eb7d

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 (156) hide show
  1. package/build/Body/Body.js +1 -1
  2. package/build/Body/Body.js.map +1 -1
  3. package/build/Body/Body.mjs +1 -1
  4. package/build/Body/Body.mjs.map +1 -1
  5. package/build/Calendar/DayCalendar/Table/DayCalendarTable.js +1 -1
  6. package/build/Calendar/DayCalendar/Table/DayCalendarTable.js.map +1 -1
  7. package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs +1 -1
  8. package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs.map +1 -1
  9. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js +1 -1
  10. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js.map +1 -1
  11. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs +1 -1
  12. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs.map +1 -1
  13. package/build/Calendar/TableLink/TableLink.js +1 -1
  14. package/build/Calendar/TableLink/TableLink.js.map +1 -1
  15. package/build/Calendar/TableLink/TableLink.mjs +1 -1
  16. package/build/Calendar/TableLink/TableLink.mjs.map +1 -1
  17. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js +1 -1
  18. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js.map +1 -1
  19. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs +1 -1
  20. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs.map +1 -1
  21. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js +2 -2
  22. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js.map +1 -1
  23. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs +2 -2
  24. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs.map +1 -1
  25. package/build/Inputs/SelectInput/Option/SelectInputOption.js +1 -1
  26. package/build/Inputs/SelectInput/Option/SelectInputOption.js.map +1 -1
  27. package/build/Inputs/SelectInput/Option/SelectInputOption.mjs +1 -1
  28. package/build/Inputs/SelectInput/Option/SelectInputOption.mjs.map +1 -1
  29. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js +3 -3
  30. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map +1 -1
  31. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs +3 -3
  32. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map +1 -1
  33. package/build/Inputs/SelectInput/Popover/SelectInputPopover.js +2 -2
  34. package/build/Inputs/SelectInput/Popover/SelectInputPopover.js.map +1 -1
  35. package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs +2 -2
  36. package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs.map +1 -1
  37. package/build/Label/Label.js +1 -1
  38. package/build/Label/Label.js.map +1 -1
  39. package/build/Label/Label.mjs +1 -1
  40. package/build/Label/Label.mjs.map +1 -1
  41. package/build/Stepper/Stepper.js +1 -1
  42. package/build/Stepper/Stepper.js.map +1 -1
  43. package/build/Stepper/Stepper.mjs +1 -1
  44. package/build/Stepper/Stepper.mjs.map +1 -1
  45. package/build/Table/Header/TableHeader.js +1 -1
  46. package/build/Table/Header/TableHeader.js.map +1 -1
  47. package/build/Table/Header/TableHeader.mjs +1 -1
  48. package/build/Table/Header/TableHeader.mjs.map +1 -1
  49. package/build/Tabs/Tab/Tab.js +1 -1
  50. package/build/Tabs/Tab/Tab.js.map +1 -1
  51. package/build/Tabs/Tab/Tab.mjs +1 -1
  52. package/build/Tabs/Tab/Tab.mjs.map +1 -1
  53. package/build/Tag/Tag.js +1 -1
  54. package/build/Tag/Tag.js.map +1 -1
  55. package/build/Tag/Tag.mjs +1 -1
  56. package/build/Tag/Tag.mjs.map +1 -1
  57. package/build/Typeahead/TypeaheadOption/TypeaheadOption.js +2 -2
  58. package/build/Typeahead/TypeaheadOption/TypeaheadOption.js.map +1 -1
  59. package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs +2 -2
  60. package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs.map +1 -1
  61. package/build/Upload/Steps/UploadImageStep/UploadImageStep.js +2 -2
  62. package/build/Upload/Steps/UploadImageStep/UploadImageStep.js.map +1 -1
  63. package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs +2 -2
  64. package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs.map +1 -1
  65. package/build/_deprecated/ActionButton/ActionButton.js +1 -1
  66. package/build/_deprecated/ActionButton/ActionButton.js.map +1 -1
  67. package/build/_deprecated/ActionButton/ActionButton.mjs +1 -1
  68. package/build/_deprecated/ActionButton/ActionButton.mjs.map +1 -1
  69. package/build/_deprecated/Avatar/Avatar.js +1 -1
  70. package/build/_deprecated/Avatar/Avatar.js.map +1 -1
  71. package/build/_deprecated/Avatar/Avatar.mjs +1 -1
  72. package/build/_deprecated/Avatar/Avatar.mjs.map +1 -1
  73. package/build/_deprecated/Select/Select.js +2 -2
  74. package/build/_deprecated/Select/Select.js.map +1 -1
  75. package/build/_deprecated/Select/Select.mjs +2 -2
  76. package/build/_deprecated/Select/Select.mjs.map +1 -1
  77. package/build/common/PropsValues/typography.js +0 -6
  78. package/build/common/PropsValues/typography.js.map +1 -1
  79. package/build/common/PropsValues/typography.mjs +0 -6
  80. package/build/common/PropsValues/typography.mjs.map +1 -1
  81. package/build/main.css +98 -117
  82. package/build/styles/Accordion/Accordion.css +1 -2
  83. package/build/styles/Body/Body.css +1 -1
  84. package/build/styles/Chips/Chip/Chip.css +2 -4
  85. package/build/styles/Decision/Decision.css +1 -2
  86. package/build/styles/Inputs/Input/Input.css +38 -0
  87. package/build/styles/Inputs/TextArea/TextArea.css +38 -0
  88. package/build/styles/MoneyInput/MoneyInput.css +3 -6
  89. package/build/styles/Popover/Popover.css +38 -0
  90. package/build/styles/ProgressBar/ProgressBar.css +1 -2
  91. package/build/styles/Table/Table.css +5 -15
  92. package/build/styles/Tile/Tile.css +1 -2
  93. package/build/styles/Typeahead/Typeahead.css +2 -4
  94. package/build/styles/_deprecated/CriticalBanner/CriticalCommsBanner.css +1 -2
  95. package/build/styles/_deprecated/Select/Select.css +4 -17
  96. package/build/styles/main.css +98 -117
  97. package/build/types/common/PropsValues/typography.d.ts +1 -13
  98. package/build/types/common/PropsValues/typography.d.ts.map +1 -1
  99. package/package.json +1 -1
  100. package/src/Accordion/Accordion.css +1 -2
  101. package/src/Accordion/Accordion.less +1 -2
  102. package/src/Body/Body.css +1 -1
  103. package/src/Body/Body.less +1 -1
  104. package/src/Body/Body.test.tsx +4 -4
  105. package/src/Body/Body.tsx +2 -2
  106. package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +2 -2
  107. package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +1 -1
  108. package/src/Calendar/TableLink/TableLink.tsx +1 -1
  109. package/src/Chips/Chip/Chip.css +2 -4
  110. package/src/Chips/Chip/Chip.less +1 -2
  111. package/src/Decision/Decision.css +1 -2
  112. package/src/Decision/Decision.less +1 -2
  113. package/src/DefinitionList/_stories/DefinitionList.story.tsx +1 -1
  114. package/src/Display/_stories/Display.story.tsx +6 -20
  115. package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx +1 -1
  116. package/src/Inputs/Input/Input.css +38 -0
  117. package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx +2 -2
  118. package/src/Inputs/SelectInput/Option/SelectInputOption.tsx +1 -1
  119. package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +3 -3
  120. package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx +2 -2
  121. package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx +1 -1
  122. package/src/Inputs/TextArea/TextArea.css +38 -0
  123. package/src/Inputs/_common.less +5 -5
  124. package/src/Label/Label.tsx +1 -1
  125. package/src/MoneyInput/MoneyInput.css +3 -6
  126. package/src/MoneyInput/MoneyInput.less +4 -7
  127. package/src/PocketSurface/_stories/PocketSurface.story.tsx +2 -2
  128. package/src/Popover/Popover.css +38 -0
  129. package/src/Popover/Popover.less +1 -1
  130. package/src/ProgressBar/ProgressBar.css +1 -2
  131. package/src/ProgressBar/ProgressBar.less +11 -12
  132. package/src/SentimentSurface/_stories/SentimentSurface.story.tsx +1 -1
  133. package/src/Stepper/Stepper.tsx +1 -1
  134. package/src/Table/Header/TableHeader.tsx +1 -1
  135. package/src/Table/StatusText/TableStatusText.test.tsx +5 -5
  136. package/src/Table/Table.css +5 -15
  137. package/src/Table/Table.less +6 -17
  138. package/src/Tabs/Tab/Tab.tsx +1 -1
  139. package/src/Tag/Tag.tsx +1 -1
  140. package/src/Tag/_stories/Tag.story.tsx +1 -1
  141. package/src/Tile/Tile.css +1 -2
  142. package/src/Tile/Tile.less +1 -2
  143. package/src/Typeahead/Typeahead.css +2 -4
  144. package/src/Typeahead/Typeahead.less +1 -2
  145. package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx +2 -2
  146. package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx +2 -2
  147. package/src/_deprecated/ActionButton/ActionButton.tsx +1 -1
  148. package/src/_deprecated/Avatar/Avatar.tsx +1 -1
  149. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css +1 -2
  150. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less +1 -2
  151. package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx +6 -6
  152. package/src/_deprecated/Select/Select.css +4 -17
  153. package/src/_deprecated/Select/Select.less +5 -10
  154. package/src/_deprecated/Select/Select.tsx +2 -2
  155. package/src/common/PropsValues/typography.ts +1 -20
  156. package/src/main.css +98 -117
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.js","sources":["../../../src/Tabs/Tab/Tab.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\n\nexport interface TabProps {\n children?: React.ReactNode;\n disabled?: boolean;\n selected?: boolean;\n id: string;\n panelId: string;\n style?: React.CSSProperties;\n focusTab?: () => void;\n onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;\n onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nconst noop = () => {};\n\nconst Tab = forwardRef(function Tab(\n {\n children,\n id,\n disabled,\n panelId,\n selected,\n onKeyDown,\n onClick,\n style,\n focusTab = noop,\n }: TabProps,\n reference: React.ForwardedRef<HTMLLIElement>,\n) {\n const handleFocusTab = useEffectEvent(focusTab);\n const firstUpdate = useRef(true);\n useEffect(\n function checkFocus() {\n if (firstUpdate.current) {\n firstUpdate.current = false;\n return;\n }\n\n if (selected) {\n handleFocusTab();\n }\n },\n [handleFocusTab, selected],\n );\n\n return (\n <li\n ref={reference}\n className={clsx('tabs__tab', selected ? 'wds-text-body-large-bold' : 'wds-text-body-large', {\n 'tabs__tab--selected': selected,\n clickable: !disabled,\n disabled,\n })}\n role=\"tab\"\n id={id}\n aria-selected={selected ? 'true' : 'false'}\n aria-disabled={disabled ? 'true' : 'false'}\n aria-controls={disabled ? undefined : panelId}\n tabIndex={0}\n style={style}\n onKeyDown={disabled ? undefined : onKeyDown}\n onClick={onClick}\n >\n <span className=\"tabs__tab__content\">{children}</span>\n </li>\n );\n});\n\nexport default Tab;\n"],"names":["noop","Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","handleFocusTab","useEffectEvent","firstUpdate","useRef","useEffect","checkFocus","current","_jsx","ref","className","clsx","clickable","role","undefined","tabIndex"],"mappings":";;;;;;;;;AAgBA,MAAMA,IAAI,GAAGA,MAAK,CAAE,CAAC;AAErB,MAAMC,GAAG,gBAAGC,gBAAU,CAAC,SAASD,GAAGA,CACjC;EACEE,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLC,EAAAA,QAAQ,GAAGX;AAAI,CACN,EACXY,SAA4C,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,6BAAc,CAACH,QAAQ,CAAC;AAC/C,EAAA,MAAMI,WAAW,GAAGC,YAAM,CAAC,IAAI,CAAC;AAChCC,EAAAA,eAAS,CACP,SAASC,UAAUA,GAAA;IACjB,IAAIH,WAAW,CAACI,OAAO,EAAE;MACvBJ,WAAW,CAACI,OAAO,GAAG,KAAK;AAC3B,MAAA;AACF,IAAA;AAEA,IAAA,IAAIZ,QAAQ,EAAE;AACZM,MAAAA,cAAc,EAAE;AAClB,IAAA;AACF,EAAA,CAAC,EACD,CAACA,cAAc,EAAEN,QAAQ,CAAC,CAC3B;AAED,EAAA,oBACEa,cAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,SAAI,CAAC,WAAW,EAAEhB,QAAQ,GAAG,0BAA0B,GAAG,qBAAqB,EAAE;AAC1F,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA;AACD,KAAA,CAAE;AACHoB,IAAAA,IAAI,EAAC,KAAK;AACVrB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAGqB,SAAS,GAAGpB,OAAQ;AAC9CqB,IAAAA,QAAQ,EAAE,CAAE;AACZjB,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAGqB,SAAS,GAAGlB,SAAU;AAC5CC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBiB,cAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA;KAAe;AACvD,GAAI,CAAC;AAET,CAAC;;"}
1
+ {"version":3,"file":"Tab.js","sources":["../../../src/Tabs/Tab/Tab.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\n\nexport interface TabProps {\n children?: React.ReactNode;\n disabled?: boolean;\n selected?: boolean;\n id: string;\n panelId: string;\n style?: React.CSSProperties;\n focusTab?: () => void;\n onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;\n onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nconst noop = () => {};\n\nconst Tab = forwardRef(function Tab(\n {\n children,\n id,\n disabled,\n panelId,\n selected,\n onKeyDown,\n onClick,\n style,\n focusTab = noop,\n }: TabProps,\n reference: React.ForwardedRef<HTMLLIElement>,\n) {\n const handleFocusTab = useEffectEvent(focusTab);\n const firstUpdate = useRef(true);\n useEffect(\n function checkFocus() {\n if (firstUpdate.current) {\n firstUpdate.current = false;\n return;\n }\n\n if (selected) {\n handleFocusTab();\n }\n },\n [handleFocusTab, selected],\n );\n\n return (\n <li\n ref={reference}\n className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {\n 'tabs__tab--selected': selected,\n clickable: !disabled,\n disabled,\n })}\n role=\"tab\"\n id={id}\n aria-selected={selected ? 'true' : 'false'}\n aria-disabled={disabled ? 'true' : 'false'}\n aria-controls={disabled ? undefined : panelId}\n tabIndex={0}\n style={style}\n onKeyDown={disabled ? undefined : onKeyDown}\n onClick={onClick}\n >\n <span className=\"tabs__tab__content\">{children}</span>\n </li>\n );\n});\n\nexport default Tab;\n"],"names":["noop","Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","handleFocusTab","useEffectEvent","firstUpdate","useRef","useEffect","checkFocus","current","_jsx","ref","className","clsx","clickable","role","undefined","tabIndex"],"mappings":";;;;;;;;;AAgBA,MAAMA,IAAI,GAAGA,MAAK,CAAE,CAAC;AAErB,MAAMC,GAAG,gBAAGC,gBAAU,CAAC,SAASD,GAAGA,CACjC;EACEE,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLC,EAAAA,QAAQ,GAAGX;AAAI,CACN,EACXY,SAA4C,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,6BAAc,CAACH,QAAQ,CAAC;AAC/C,EAAA,MAAMI,WAAW,GAAGC,YAAM,CAAC,IAAI,CAAC;AAChCC,EAAAA,eAAS,CACP,SAASC,UAAUA,GAAA;IACjB,IAAIH,WAAW,CAACI,OAAO,EAAE;MACvBJ,WAAW,CAACI,OAAO,GAAG,KAAK;AAC3B,MAAA;AACF,IAAA;AAEA,IAAA,IAAIZ,QAAQ,EAAE;AACZM,MAAAA,cAAc,EAAE;AAClB,IAAA;AACF,EAAA,CAAC,EACD,CAACA,cAAc,EAAEN,QAAQ,CAAC,CAC3B;AAED,EAAA,oBACEa,cAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,SAAI,CAAC,WAAW,EAAEhB,QAAQ,GAAG,yBAAyB,GAAG,oBAAoB,EAAE;AACxF,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA;AACD,KAAA,CAAE;AACHoB,IAAAA,IAAI,EAAC,KAAK;AACVrB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAGqB,SAAS,GAAGpB,OAAQ;AAC9CqB,IAAAA,QAAQ,EAAE,CAAE;AACZjB,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAGqB,SAAS,GAAGlB,SAAU;AAC5CC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBiB,cAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA;KAAe;AACvD,GAAI,CAAC;AAET,CAAC;;"}
@@ -28,7 +28,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
28
28
  }, [handleFocusTab, selected]);
29
29
  return /*#__PURE__*/jsx("li", {
30
30
  ref: reference,
31
- className: clsx('tabs__tab', selected ? 'wds-text-body-large-bold' : 'wds-text-body-large', {
31
+ className: clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
32
32
  'tabs__tab--selected': selected,
33
33
  clickable: !disabled,
34
34
  disabled
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.mjs","sources":["../../../src/Tabs/Tab/Tab.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\n\nexport interface TabProps {\n children?: React.ReactNode;\n disabled?: boolean;\n selected?: boolean;\n id: string;\n panelId: string;\n style?: React.CSSProperties;\n focusTab?: () => void;\n onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;\n onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nconst noop = () => {};\n\nconst Tab = forwardRef(function Tab(\n {\n children,\n id,\n disabled,\n panelId,\n selected,\n onKeyDown,\n onClick,\n style,\n focusTab = noop,\n }: TabProps,\n reference: React.ForwardedRef<HTMLLIElement>,\n) {\n const handleFocusTab = useEffectEvent(focusTab);\n const firstUpdate = useRef(true);\n useEffect(\n function checkFocus() {\n if (firstUpdate.current) {\n firstUpdate.current = false;\n return;\n }\n\n if (selected) {\n handleFocusTab();\n }\n },\n [handleFocusTab, selected],\n );\n\n return (\n <li\n ref={reference}\n className={clsx('tabs__tab', selected ? 'wds-text-body-large-bold' : 'wds-text-body-large', {\n 'tabs__tab--selected': selected,\n clickable: !disabled,\n disabled,\n })}\n role=\"tab\"\n id={id}\n aria-selected={selected ? 'true' : 'false'}\n aria-disabled={disabled ? 'true' : 'false'}\n aria-controls={disabled ? undefined : panelId}\n tabIndex={0}\n style={style}\n onKeyDown={disabled ? undefined : onKeyDown}\n onClick={onClick}\n >\n <span className=\"tabs__tab__content\">{children}</span>\n </li>\n );\n});\n\nexport default Tab;\n"],"names":["noop","Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","handleFocusTab","useEffectEvent","firstUpdate","useRef","useEffect","checkFocus","current","_jsx","ref","className","clsx","clickable","role","undefined","tabIndex"],"mappings":";;;;;AAgBA,MAAMA,IAAI,GAAGA,MAAK,CAAE,CAAC;AAErB,MAAMC,GAAG,gBAAGC,UAAU,CAAC,SAASD,GAAGA,CACjC;EACEE,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLC,EAAAA,QAAQ,GAAGX;AAAI,CACN,EACXY,SAA4C,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,cAAc,CAACH,QAAQ,CAAC;AAC/C,EAAA,MAAMI,WAAW,GAAGC,MAAM,CAAC,IAAI,CAAC;AAChCC,EAAAA,SAAS,CACP,SAASC,UAAUA,GAAA;IACjB,IAAIH,WAAW,CAACI,OAAO,EAAE;MACvBJ,WAAW,CAACI,OAAO,GAAG,KAAK;AAC3B,MAAA;AACF,IAAA;AAEA,IAAA,IAAIZ,QAAQ,EAAE;AACZM,MAAAA,cAAc,EAAE;AAClB,IAAA;AACF,EAAA,CAAC,EACD,CAACA,cAAc,EAAEN,QAAQ,CAAC,CAC3B;AAED,EAAA,oBACEa,GAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,IAAI,CAAC,WAAW,EAAEhB,QAAQ,GAAG,0BAA0B,GAAG,qBAAqB,EAAE;AAC1F,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA;AACD,KAAA,CAAE;AACHoB,IAAAA,IAAI,EAAC,KAAK;AACVrB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAGqB,SAAS,GAAGpB,OAAQ;AAC9CqB,IAAAA,QAAQ,EAAE,CAAE;AACZjB,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAGqB,SAAS,GAAGlB,SAAU;AAC5CC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBiB,GAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA;KAAe;AACvD,GAAI,CAAC;AAET,CAAC;;"}
1
+ {"version":3,"file":"Tab.mjs","sources":["../../../src/Tabs/Tab/Tab.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\n\nexport interface TabProps {\n children?: React.ReactNode;\n disabled?: boolean;\n selected?: boolean;\n id: string;\n panelId: string;\n style?: React.CSSProperties;\n focusTab?: () => void;\n onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;\n onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nconst noop = () => {};\n\nconst Tab = forwardRef(function Tab(\n {\n children,\n id,\n disabled,\n panelId,\n selected,\n onKeyDown,\n onClick,\n style,\n focusTab = noop,\n }: TabProps,\n reference: React.ForwardedRef<HTMLLIElement>,\n) {\n const handleFocusTab = useEffectEvent(focusTab);\n const firstUpdate = useRef(true);\n useEffect(\n function checkFocus() {\n if (firstUpdate.current) {\n firstUpdate.current = false;\n return;\n }\n\n if (selected) {\n handleFocusTab();\n }\n },\n [handleFocusTab, selected],\n );\n\n return (\n <li\n ref={reference}\n className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {\n 'tabs__tab--selected': selected,\n clickable: !disabled,\n disabled,\n })}\n role=\"tab\"\n id={id}\n aria-selected={selected ? 'true' : 'false'}\n aria-disabled={disabled ? 'true' : 'false'}\n aria-controls={disabled ? undefined : panelId}\n tabIndex={0}\n style={style}\n onKeyDown={disabled ? undefined : onKeyDown}\n onClick={onClick}\n >\n <span className=\"tabs__tab__content\">{children}</span>\n </li>\n );\n});\n\nexport default Tab;\n"],"names":["noop","Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","handleFocusTab","useEffectEvent","firstUpdate","useRef","useEffect","checkFocus","current","_jsx","ref","className","clsx","clickable","role","undefined","tabIndex"],"mappings":";;;;;AAgBA,MAAMA,IAAI,GAAGA,MAAK,CAAE,CAAC;AAErB,MAAMC,GAAG,gBAAGC,UAAU,CAAC,SAASD,GAAGA,CACjC;EACEE,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLC,EAAAA,QAAQ,GAAGX;AAAI,CACN,EACXY,SAA4C,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,cAAc,CAACH,QAAQ,CAAC;AAC/C,EAAA,MAAMI,WAAW,GAAGC,MAAM,CAAC,IAAI,CAAC;AAChCC,EAAAA,SAAS,CACP,SAASC,UAAUA,GAAA;IACjB,IAAIH,WAAW,CAACI,OAAO,EAAE;MACvBJ,WAAW,CAACI,OAAO,GAAG,KAAK;AAC3B,MAAA;AACF,IAAA;AAEA,IAAA,IAAIZ,QAAQ,EAAE;AACZM,MAAAA,cAAc,EAAE;AAClB,IAAA;AACF,EAAA,CAAC,EACD,CAACA,cAAc,EAAEN,QAAQ,CAAC,CAC3B;AAED,EAAA,oBACEa,GAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,IAAI,CAAC,WAAW,EAAEhB,QAAQ,GAAG,yBAAyB,GAAG,oBAAoB,EAAE;AACxF,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA;AACD,KAAA,CAAE;AACHoB,IAAAA,IAAI,EAAC,KAAK;AACVrB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAGqB,SAAS,GAAGpB,OAAQ;AAC9CqB,IAAAA,QAAQ,EAAE,CAAE;AACZjB,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAGqB,SAAS,GAAGlB,SAAU;AAC5CC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBiB,GAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA;KAAe;AACvD,GAAI,CAAC;AAET,CAAC;;"}
package/build/Tag/Tag.js CHANGED
@@ -35,7 +35,7 @@ const Tag = /*#__PURE__*/React.forwardRef(function Tag({
35
35
  emphasis: overMedia ? 'elevated' : emphasis,
36
36
  id: id,
37
37
  "data-testid": dataTestId,
38
- className: clsx.clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'wds-text-body-default-bold', className),
38
+ className: clsx.clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'np-text-body-default-bold', className),
39
39
  children: label
40
40
  })
41
41
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.js","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/**\n * Tag is a small, non-interactive label that categorises or highlights a piece of content.\n *\n * @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n *\n * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n {\n label,\n sentiment = 'neutral',\n size = 'small',\n emphasis = 'base',\n overMedia = false,\n className,\n id,\n 'data-testid': dataTestId,\n },\n ref,\n) {\n const { theme, screenMode } = useTheme();\n\n return (\n <ThemeProvider\n theme={theme}\n screenMode={overMedia ? 'dark' : screenMode}\n className=\"wds-tag-theme\"\n >\n <SentimentSurface\n // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n ref={ref}\n as=\"span\"\n sentiment={sentiment}\n emphasis={overMedia ? 'elevated' : emphasis}\n id={id}\n data-testid={dataTestId}\n className={clsx(\n 'wds-tag',\n `wds-tag--${size}`,\n `wds-tag--${sentiment}`,\n 'wds-text-body-default-bold',\n className,\n )}\n >\n {label}\n </SentimentSurface>\n </ThemeProvider>\n );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,GAAG,gBAAGC,gBAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,0BAAQ,EAAE;EAExC,oBACEC,cAAA,CAACC,+BAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,cAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,4BAA4B,EAC5BI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;"}
1
+ {"version":3,"file":"Tag.js","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/**\n * Tag is a small, non-interactive label that categorises or highlights a piece of content.\n *\n * @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n *\n * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n {\n label,\n sentiment = 'neutral',\n size = 'small',\n emphasis = 'base',\n overMedia = false,\n className,\n id,\n 'data-testid': dataTestId,\n },\n ref,\n) {\n const { theme, screenMode } = useTheme();\n\n return (\n <ThemeProvider\n theme={theme}\n screenMode={overMedia ? 'dark' : screenMode}\n className=\"wds-tag-theme\"\n >\n <SentimentSurface\n // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n ref={ref}\n as=\"span\"\n sentiment={sentiment}\n emphasis={overMedia ? 'elevated' : emphasis}\n id={id}\n data-testid={dataTestId}\n className={clsx(\n 'wds-tag',\n `wds-tag--${size}`,\n `wds-tag--${sentiment}`,\n 'np-text-body-default-bold',\n className,\n )}\n >\n {label}\n </SentimentSurface>\n </ThemeProvider>\n );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,GAAG,gBAAGC,gBAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,0BAAQ,EAAE;EAExC,oBACEC,cAAA,CAACC,+BAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,cAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,2BAA2B,EAC3BI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;"}
package/build/Tag/Tag.mjs CHANGED
@@ -31,7 +31,7 @@ const Tag = /*#__PURE__*/forwardRef(function Tag({
31
31
  emphasis: overMedia ? 'elevated' : emphasis,
32
32
  id: id,
33
33
  "data-testid": dataTestId,
34
- className: clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'wds-text-body-default-bold', className),
34
+ className: clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'np-text-body-default-bold', className),
35
35
  children: label
36
36
  })
37
37
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.mjs","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/**\n * Tag is a small, non-interactive label that categorises or highlights a piece of content.\n *\n * @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n *\n * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n {\n label,\n sentiment = 'neutral',\n size = 'small',\n emphasis = 'base',\n overMedia = false,\n className,\n id,\n 'data-testid': dataTestId,\n },\n ref,\n) {\n const { theme, screenMode } = useTheme();\n\n return (\n <ThemeProvider\n theme={theme}\n screenMode={overMedia ? 'dark' : screenMode}\n className=\"wds-tag-theme\"\n >\n <SentimentSurface\n // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n ref={ref}\n as=\"span\"\n sentiment={sentiment}\n emphasis={overMedia ? 'elevated' : emphasis}\n id={id}\n data-testid={dataTestId}\n className={clsx(\n 'wds-tag',\n `wds-tag--${size}`,\n `wds-tag--${sentiment}`,\n 'wds-text-body-default-bold',\n className,\n )}\n >\n {label}\n </SentimentSurface>\n </ThemeProvider>\n );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;AA2BA,MAAMA,GAAG,gBAAGC,UAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,QAAQ,EAAE;EAExC,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,GAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,4BAA4B,EAC5BI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;"}
1
+ {"version":3,"file":"Tag.mjs","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/**\n * Tag is a small, non-interactive label that categorises or highlights a piece of content.\n *\n * @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n *\n * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n {\n label,\n sentiment = 'neutral',\n size = 'small',\n emphasis = 'base',\n overMedia = false,\n className,\n id,\n 'data-testid': dataTestId,\n },\n ref,\n) {\n const { theme, screenMode } = useTheme();\n\n return (\n <ThemeProvider\n theme={theme}\n screenMode={overMedia ? 'dark' : screenMode}\n className=\"wds-tag-theme\"\n >\n <SentimentSurface\n // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n ref={ref}\n as=\"span\"\n sentiment={sentiment}\n emphasis={overMedia ? 'elevated' : emphasis}\n id={id}\n data-testid={dataTestId}\n className={clsx(\n 'wds-tag',\n `wds-tag--${size}`,\n `wds-tag--${sentiment}`,\n 'np-text-body-default-bold',\n className,\n )}\n >\n {label}\n </SentimentSurface>\n </ThemeProvider>\n );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;AA2BA,MAAMA,GAAG,gBAAGC,UAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,QAAQ,EAAE;EAExC,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,GAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,2BAA2B,EAC3BI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;"}
@@ -39,10 +39,10 @@ const Option = /*#__PURE__*/React.forwardRef((props, ref) => {
39
39
  value: label,
40
40
  query: query
41
41
  }), note && /*#__PURE__*/jsxRuntime.jsx("span", {
42
- className: "wds-text-body-default m-l-1",
42
+ className: "np-text-body-default m-l-1",
43
43
  children: note
44
44
  }), secondary && /*#__PURE__*/jsxRuntime.jsx(highlight.default, {
45
- className: "wds-text-body-default text-ellipsis",
45
+ className: "np-text-body-default text-ellipsis",
46
46
  value: secondary,
47
47
  query: query
48
48
  })]
@@ -1 +1 @@
1
- {"version":3,"file":"TypeaheadOption.js","sources":["../../../src/Typeahead/TypeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport Highlight from '../Util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n option: TypeaheadOption<T>;\n selected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n query?: string;\n id?: string;\n};\n\nconst Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {\n const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;\n const { label, note, secondary } = option;\n\n return (\n <li\n ref={ref}\n role=\"option\"\n aria-selected={selected ? 'true' : 'false'}\n id={`option-${id}`}\n className={clsx('typeahead__option tw-dropdown-item clickable', {\n 'tw-dropdown-item--focused': selected,\n })}\n onMouseEnter={onMouseEnter}\n >\n <a className=\"dropdown-item\" href=\"#\" tabIndex={-1} onClick={onClick}>\n <Highlight value={label} query={query} />\n {note && <span className=\"wds-text-body-default m-l-1\">{note}</span>}\n {secondary && (\n <Highlight\n className=\"wds-text-body-default text-ellipsis\"\n value={secondary}\n query={query}\n />\n )}\n </a>\n </li>\n );\n});\n\nexport default Option;\n"],"names":["Option","forwardRef","props","ref","option","selected","onClick","onMouseEnter","query","id","label","note","secondary","_jsx","role","className","clsx","children","_jsxs","href","tabIndex","Highlight","value"],"mappings":";;;;;;;;;AAeA,MAAMA,MAAM,gBAAGC,gBAAU,CAA2C,CAACC,KAAK,EAAEC,GAAG,KAAI;EACjF,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,MAAK,CAAE,CAAC;IAAEC,YAAY;AAAEC,IAAAA,KAAK,GAAG,EAAE;AAAEC,IAAAA;AAAE,GAAE,GAAGP,KAAK;EAC5F,MAAM;IAAEQ,KAAK;IAAEC,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGR,MAAM;AAEzC,EAAA,oBACES,cAAA,CAAA,IAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTW,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeT,QAAQ,GAAG,MAAM,GAAG,OAAQ;IAC3CI,EAAE,EAAE,CAAA,OAAA,EAAUA,EAAE,CAAA,CAAG;AACnBM,IAAAA,SAAS,EAAEC,SAAI,CAAC,8CAA8C,EAAE;AAC9D,MAAA,2BAA2B,EAAEX;AAC9B,KAAA,CAAE;AACHE,IAAAA,YAAY,EAAEA,YAAa;AAAAU,IAAAA,QAAA,eAE3BC,eAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;MAACC,QAAQ,EAAE,EAAG;AAACd,MAAAA,OAAO,EAAEA,OAAQ;MAAAW,QAAA,EAAA,cACnEJ,cAAA,CAACQ,iBAAS,EAAA;AAACC,QAAAA,KAAK,EAAEZ,KAAM;AAACF,QAAAA,KAAK,EAAEA;AAAM,OAAA,CACtC,EAACG,IAAI,iBAAIE,cAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,6BAA6B;AAAAE,QAAAA,QAAA,EAAEN;AAAI,OAAO,CAAC,EACnEC,SAAS,iBACRC,cAAA,CAACQ,iBAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,qCAAqC;AAC/CO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA;AAAM,OAAA,CAEhB;KACA;AACL,GAAI,CAAC;AAET,CAAC;;"}
1
+ {"version":3,"file":"TypeaheadOption.js","sources":["../../../src/Typeahead/TypeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport Highlight from '../Util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n option: TypeaheadOption<T>;\n selected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n query?: string;\n id?: string;\n};\n\nconst Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {\n const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;\n const { label, note, secondary } = option;\n\n return (\n <li\n ref={ref}\n role=\"option\"\n aria-selected={selected ? 'true' : 'false'}\n id={`option-${id}`}\n className={clsx('typeahead__option tw-dropdown-item clickable', {\n 'tw-dropdown-item--focused': selected,\n })}\n onMouseEnter={onMouseEnter}\n >\n <a className=\"dropdown-item\" href=\"#\" tabIndex={-1} onClick={onClick}>\n <Highlight value={label} query={query} />\n {note && <span className=\"np-text-body-default m-l-1\">{note}</span>}\n {secondary && (\n <Highlight\n className=\"np-text-body-default text-ellipsis\"\n value={secondary}\n query={query}\n />\n )}\n </a>\n </li>\n );\n});\n\nexport default Option;\n"],"names":["Option","forwardRef","props","ref","option","selected","onClick","onMouseEnter","query","id","label","note","secondary","_jsx","role","className","clsx","children","_jsxs","href","tabIndex","Highlight","value"],"mappings":";;;;;;;;;AAeA,MAAMA,MAAM,gBAAGC,gBAAU,CAA2C,CAACC,KAAK,EAAEC,GAAG,KAAI;EACjF,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,MAAK,CAAE,CAAC;IAAEC,YAAY;AAAEC,IAAAA,KAAK,GAAG,EAAE;AAAEC,IAAAA;AAAE,GAAE,GAAGP,KAAK;EAC5F,MAAM;IAAEQ,KAAK;IAAEC,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGR,MAAM;AAEzC,EAAA,oBACES,cAAA,CAAA,IAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTW,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeT,QAAQ,GAAG,MAAM,GAAG,OAAQ;IAC3CI,EAAE,EAAE,CAAA,OAAA,EAAUA,EAAE,CAAA,CAAG;AACnBM,IAAAA,SAAS,EAAEC,SAAI,CAAC,8CAA8C,EAAE;AAC9D,MAAA,2BAA2B,EAAEX;AAC9B,KAAA,CAAE;AACHE,IAAAA,YAAY,EAAEA,YAAa;AAAAU,IAAAA,QAAA,eAE3BC,eAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;MAACC,QAAQ,EAAE,EAAG;AAACd,MAAAA,OAAO,EAAEA,OAAQ;MAAAW,QAAA,EAAA,cACnEJ,cAAA,CAACQ,iBAAS,EAAA;AAACC,QAAAA,KAAK,EAAEZ,KAAM;AAACF,QAAAA,KAAK,EAAEA;AAAM,OAAA,CACtC,EAACG,IAAI,iBAAIE,cAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,4BAA4B;AAAAE,QAAAA,QAAA,EAAEN;AAAI,OAAO,CAAC,EAClEC,SAAS,iBACRC,cAAA,CAACQ,iBAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,oCAAoC;AAC9CO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA;AAAM,OAAA,CAEhB;KACA;AACL,GAAI,CAAC;AAET,CAAC;;"}
@@ -35,10 +35,10 @@ const Option = /*#__PURE__*/forwardRef((props, ref) => {
35
35
  value: label,
36
36
  query: query
37
37
  }), note && /*#__PURE__*/jsx("span", {
38
- className: "wds-text-body-default m-l-1",
38
+ className: "np-text-body-default m-l-1",
39
39
  children: note
40
40
  }), secondary && /*#__PURE__*/jsx(Highlight, {
41
- className: "wds-text-body-default text-ellipsis",
41
+ className: "np-text-body-default text-ellipsis",
42
42
  value: secondary,
43
43
  query: query
44
44
  })]
@@ -1 +1 @@
1
- {"version":3,"file":"TypeaheadOption.mjs","sources":["../../../src/Typeahead/TypeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport Highlight from '../Util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n option: TypeaheadOption<T>;\n selected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n query?: string;\n id?: string;\n};\n\nconst Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {\n const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;\n const { label, note, secondary } = option;\n\n return (\n <li\n ref={ref}\n role=\"option\"\n aria-selected={selected ? 'true' : 'false'}\n id={`option-${id}`}\n className={clsx('typeahead__option tw-dropdown-item clickable', {\n 'tw-dropdown-item--focused': selected,\n })}\n onMouseEnter={onMouseEnter}\n >\n <a className=\"dropdown-item\" href=\"#\" tabIndex={-1} onClick={onClick}>\n <Highlight value={label} query={query} />\n {note && <span className=\"wds-text-body-default m-l-1\">{note}</span>}\n {secondary && (\n <Highlight\n className=\"wds-text-body-default text-ellipsis\"\n value={secondary}\n query={query}\n />\n )}\n </a>\n </li>\n );\n});\n\nexport default Option;\n"],"names":["Option","forwardRef","props","ref","option","selected","onClick","onMouseEnter","query","id","label","note","secondary","_jsx","role","className","clsx","children","_jsxs","href","tabIndex","Highlight","value"],"mappings":";;;;;AAeA,MAAMA,MAAM,gBAAGC,UAAU,CAA2C,CAACC,KAAK,EAAEC,GAAG,KAAI;EACjF,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,MAAK,CAAE,CAAC;IAAEC,YAAY;AAAEC,IAAAA,KAAK,GAAG,EAAE;AAAEC,IAAAA;AAAE,GAAE,GAAGP,KAAK;EAC5F,MAAM;IAAEQ,KAAK;IAAEC,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGR,MAAM;AAEzC,EAAA,oBACES,GAAA,CAAA,IAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTW,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeT,QAAQ,GAAG,MAAM,GAAG,OAAQ;IAC3CI,EAAE,EAAE,CAAA,OAAA,EAAUA,EAAE,CAAA,CAAG;AACnBM,IAAAA,SAAS,EAAEC,IAAI,CAAC,8CAA8C,EAAE;AAC9D,MAAA,2BAA2B,EAAEX;AAC9B,KAAA,CAAE;AACHE,IAAAA,YAAY,EAAEA,YAAa;AAAAU,IAAAA,QAAA,eAE3BC,IAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;MAACC,QAAQ,EAAE,EAAG;AAACd,MAAAA,OAAO,EAAEA,OAAQ;MAAAW,QAAA,EAAA,cACnEJ,GAAA,CAACQ,SAAS,EAAA;AAACC,QAAAA,KAAK,EAAEZ,KAAM;AAACF,QAAAA,KAAK,EAAEA;AAAM,OAAA,CACtC,EAACG,IAAI,iBAAIE,GAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,6BAA6B;AAAAE,QAAAA,QAAA,EAAEN;AAAI,OAAO,CAAC,EACnEC,SAAS,iBACRC,GAAA,CAACQ,SAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,qCAAqC;AAC/CO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA;AAAM,OAAA,CAEhB;KACA;AACL,GAAI,CAAC;AAET,CAAC;;"}
1
+ {"version":3,"file":"TypeaheadOption.mjs","sources":["../../../src/Typeahead/TypeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport Highlight from '../Util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n option: TypeaheadOption<T>;\n selected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n query?: string;\n id?: string;\n};\n\nconst Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {\n const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;\n const { label, note, secondary } = option;\n\n return (\n <li\n ref={ref}\n role=\"option\"\n aria-selected={selected ? 'true' : 'false'}\n id={`option-${id}`}\n className={clsx('typeahead__option tw-dropdown-item clickable', {\n 'tw-dropdown-item--focused': selected,\n })}\n onMouseEnter={onMouseEnter}\n >\n <a className=\"dropdown-item\" href=\"#\" tabIndex={-1} onClick={onClick}>\n <Highlight value={label} query={query} />\n {note && <span className=\"np-text-body-default m-l-1\">{note}</span>}\n {secondary && (\n <Highlight\n className=\"np-text-body-default text-ellipsis\"\n value={secondary}\n query={query}\n />\n )}\n </a>\n </li>\n );\n});\n\nexport default Option;\n"],"names":["Option","forwardRef","props","ref","option","selected","onClick","onMouseEnter","query","id","label","note","secondary","_jsx","role","className","clsx","children","_jsxs","href","tabIndex","Highlight","value"],"mappings":";;;;;AAeA,MAAMA,MAAM,gBAAGC,UAAU,CAA2C,CAACC,KAAK,EAAEC,GAAG,KAAI;EACjF,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,MAAK,CAAE,CAAC;IAAEC,YAAY;AAAEC,IAAAA,KAAK,GAAG,EAAE;AAAEC,IAAAA;AAAE,GAAE,GAAGP,KAAK;EAC5F,MAAM;IAAEQ,KAAK;IAAEC,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGR,MAAM;AAEzC,EAAA,oBACES,GAAA,CAAA,IAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTW,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeT,QAAQ,GAAG,MAAM,GAAG,OAAQ;IAC3CI,EAAE,EAAE,CAAA,OAAA,EAAUA,EAAE,CAAA,CAAG;AACnBM,IAAAA,SAAS,EAAEC,IAAI,CAAC,8CAA8C,EAAE;AAC9D,MAAA,2BAA2B,EAAEX;AAC9B,KAAA,CAAE;AACHE,IAAAA,YAAY,EAAEA,YAAa;AAAAU,IAAAA,QAAA,eAE3BC,IAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;MAACC,QAAQ,EAAE,EAAG;AAACd,MAAAA,OAAO,EAAEA,OAAQ;MAAAW,QAAA,EAAA,cACnEJ,GAAA,CAACQ,SAAS,EAAA;AAACC,QAAAA,KAAK,EAAEZ,KAAM;AAACF,QAAAA,KAAK,EAAEA;AAAM,OAAA,CACtC,EAACG,IAAI,iBAAIE,GAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,4BAA4B;AAAAE,QAAAA,QAAA,EAAEN;AAAI,OAAO,CAAC,EAClEC,SAAS,iBACRC,GAAA,CAACQ,SAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,oCAAoC;AAC9CO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA;AAAM,OAAA,CAEhB;KACA;AACL,GAAI,CAAC;AAET,CAAC;;"}
@@ -103,10 +103,10 @@ class UploadImageStep extends React.PureComponent {
103
103
  className: "m-b-3",
104
104
  children: this.getImage()
105
105
  }), usLabel && /*#__PURE__*/jsxRuntime.jsx("h4", {
106
- className: "wds-text-title-body m-b-1",
106
+ className: "np-text-title-body m-b-1",
107
107
  children: usLabel
108
108
  }), usPlaceholder && /*#__PURE__*/jsxRuntime.jsx("p", {
109
- className: "wds-text-body-large m-b-3",
109
+ className: "np-text-body-large m-b-3",
110
110
  children: String(usPlaceholder)
111
111
  }), /*#__PURE__*/jsxRuntime.jsxs("label", {
112
112
  className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
@@ -1 +1 @@
1
- {"version":3,"file":"UploadImageStep.js","sources":["../../../../src/Upload/Steps/UploadImageStep/UploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../StatusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport { InlinePrompt } from '../../../Prompt/InlinePrompt/InlinePrompt';\n\nexport interface UploadImageStepProps {\n fileDropped: (file: File) => void;\n isComplete: boolean;\n usAccept: string;\n usButtonText: string;\n usDisabled: boolean;\n usHelpImage: React.ReactNode;\n usLabel: string;\n usPlaceholder: string;\n errorMessage?: string | string[];\n errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n uploadInputRef = createRef<HTMLInputElement>();\n\n onManualUpload = () => {\n const { fileDropped } = this.props;\n const file = this.uploadInputRef.current?.files?.[0];\n if (file != null) {\n fileDropped(file);\n }\n };\n\n onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.uploadInputRef.current?.click();\n }\n };\n\n getImage = () => {\n const { usHelpImage, usLabel } = this.props;\n const { errorMessage } = this.props;\n\n if (errorMessage) {\n return (\n <div className=\"d-flex flex-column align-items-center\">\n <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n </div>\n );\n }\n\n if (!usHelpImage) {\n return (\n <div className=\"circle circle-sm circle-inverse p-t-1\">\n <UploadIcon size={24} />\n </div>\n );\n }\n\n if (typeof usHelpImage === 'string') {\n return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n }\n\n return usHelpImage;\n };\n\n render() {\n const {\n errorMessage,\n isComplete,\n errorIconLabel,\n usAccept,\n usButtonText,\n usDisabled,\n usLabel,\n usPlaceholder,\n } = this.props;\n\n return (\n <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n <div className=\"droppable-card-content\">\n <div className=\"m-b-3\">{this.getImage()}</div>\n {usLabel && <h4 className=\"wds-text-title-body m-b-1\">{usLabel}</h4>}\n {usPlaceholder && <p className=\"wds-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n <label\n className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n role=\"button\"\n aria-disabled={usDisabled}\n tabIndex={0}\n onKeyDown={this.onKeyDown}\n >\n {usButtonText ? (\n <span>{usButtonText}</span>\n ) : (\n <UploadIcon size={24} className=\"m-r-0\" />\n )}\n <input\n ref={this.uploadInputRef}\n type=\"file\"\n accept={usAccept === '*' ? undefined : usAccept}\n className=\"tw-droppable-input hidden\"\n disabled={usDisabled}\n name=\"file-upload\"\n onChange={() => this.onManualUpload()}\n />\n </label>\n {errorMessage && (\n <div className=\"upload-error-message\">\n <div className=\"m-t-3 has-error\">\n <InlinePrompt\n sentiment={Sentiment.NEGATIVE}\n mediaLabel={errorIconLabel}\n width=\"full\"\n >\n {errorMessage}\n </InlinePrompt>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","onKeyDown","event","key","preventDefault","click","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlinePrompt","mediaLabel","width"],"mappings":"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"}
1
+ {"version":3,"file":"UploadImageStep.js","sources":["../../../../src/Upload/Steps/UploadImageStep/UploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../StatusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport { InlinePrompt } from '../../../Prompt/InlinePrompt/InlinePrompt';\n\nexport interface UploadImageStepProps {\n fileDropped: (file: File) => void;\n isComplete: boolean;\n usAccept: string;\n usButtonText: string;\n usDisabled: boolean;\n usHelpImage: React.ReactNode;\n usLabel: string;\n usPlaceholder: string;\n errorMessage?: string | string[];\n errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n uploadInputRef = createRef<HTMLInputElement>();\n\n onManualUpload = () => {\n const { fileDropped } = this.props;\n const file = this.uploadInputRef.current?.files?.[0];\n if (file != null) {\n fileDropped(file);\n }\n };\n\n onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.uploadInputRef.current?.click();\n }\n };\n\n getImage = () => {\n const { usHelpImage, usLabel } = this.props;\n const { errorMessage } = this.props;\n\n if (errorMessage) {\n return (\n <div className=\"d-flex flex-column align-items-center\">\n <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n </div>\n );\n }\n\n if (!usHelpImage) {\n return (\n <div className=\"circle circle-sm circle-inverse p-t-1\">\n <UploadIcon size={24} />\n </div>\n );\n }\n\n if (typeof usHelpImage === 'string') {\n return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n }\n\n return usHelpImage;\n };\n\n render() {\n const {\n errorMessage,\n isComplete,\n errorIconLabel,\n usAccept,\n usButtonText,\n usDisabled,\n usLabel,\n usPlaceholder,\n } = this.props;\n\n return (\n <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n <div className=\"droppable-card-content\">\n <div className=\"m-b-3\">{this.getImage()}</div>\n {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n <label\n className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n role=\"button\"\n aria-disabled={usDisabled}\n tabIndex={0}\n onKeyDown={this.onKeyDown}\n >\n {usButtonText ? (\n <span>{usButtonText}</span>\n ) : (\n <UploadIcon size={24} className=\"m-r-0\" />\n )}\n <input\n ref={this.uploadInputRef}\n type=\"file\"\n accept={usAccept === '*' ? undefined : usAccept}\n className=\"tw-droppable-input hidden\"\n disabled={usDisabled}\n name=\"file-upload\"\n onChange={() => this.onManualUpload()}\n />\n </label>\n {errorMessage && (\n <div className=\"upload-error-message\">\n <div className=\"m-t-3 has-error\">\n <InlinePrompt\n sentiment={Sentiment.NEGATIVE}\n mediaLabel={errorIconLabel}\n width=\"full\"\n >\n {errorMessage}\n </InlinePrompt>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","onKeyDown","event","key","preventDefault","click","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlinePrompt","mediaLabel","width"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBc,MAAOA,eAAgB,SAAQC,mBAAmC,CAAA;EAC9EC,cAAc,gBAAGC,eAAS,EAAoB;EAE9CC,cAAc,GAAGA,MAAK;IACpB,MAAM;AAAEC,MAAAA;KAAa,GAAG,IAAI,CAACC,KAAK;IAClC,MAAMC,IAAI,GAAG,IAAI,CAACL,cAAc,CAACM,OAAO,EAAEC,KAAK,GAAG,CAAC,CAAC;IACpD,IAAIF,IAAI,IAAI,IAAI,EAAE;MAChBF,WAAW,CAACE,IAAI,CAAC;AACnB,IAAA;EACF,CAAC;EAEDG,SAAS,GAAIC,KAA4C,IAAI;IAC3D,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC9CD,KAAK,CAACE,cAAc,EAAE;AACtB,MAAA,IAAI,CAACX,cAAc,CAACM,OAAO,EAAEM,KAAK,EAAE;AACtC,IAAA;EACF,CAAC;EAEDC,QAAQ,GAAGA,MAAK;IACd,MAAM;MAAEC,WAAW;AAAEC,MAAAA;KAAS,GAAG,IAAI,CAACX,KAAK;IAC3C,MAAM;AAAEY,MAAAA;KAAc,GAAG,IAAI,CAACZ,KAAK;AAEnC,IAAA,IAAIY,YAAY,EAAE;AAChB,MAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,SAAS,EAAC,uCAAuC;QAAAC,QAAA,eACpDF,cAAA,CAACG,kBAAU,EAAA;UAACC,IAAI,EAAEC,SAAI,CAACC,KAAM;UAACC,SAAS,EAAEC,mBAAS,CAACC,QAAS;AAACC,UAAAA,SAAS,EAAE;SAAK;AAC/E,OAAK,CAAC;AAEV,IAAA;IAEA,IAAI,CAACb,WAAW,EAAE;AAChB,MAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,SAAS,EAAC,uCAAuC;QAAAC,QAAA,eACpDF,cAAA,CAACW,YAAU,EAAA;AAACP,UAAAA,IAAI,EAAE;SAAG;AACvB,OAAK,CAAC;AAEV,IAAA;AAEA,IAAA,IAAI,OAAOP,WAAW,KAAK,QAAQ,EAAE;AACnC,MAAA,oBAAOG,cAAA,CAAA,KAAA,EAAA;AAAKY,QAAAA,GAAG,EAAEf,WAAY;AAACgB,QAAAA,GAAG,EAAEf,OAAQ;AAACG,QAAAA,SAAS,EAAC;AAA0B,QAAG;AACrF,IAAA;AAEA,IAAA,OAAOJ,WAAW;EACpB,CAAC;AAEDiB,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJf,YAAY;MACZgB,UAAU;MACVC,cAAc;MACdC,QAAQ;MACRC,YAAY;MACZC,UAAU;MACVrB,OAAO;AACPsB,MAAAA;KACD,GAAG,IAAI,CAACjC,KAAK;AAEd,IAAA,oBACEa,cAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,wBAAwB;AAAC,MAAA,aAAA,EAAac,UAAW;AAAAb,MAAAA,QAAA,eAC9DmB,eAAA,CAAA,KAAA,EAAA;AAAKpB,QAAAA,SAAS,EAAC,wBAAwB;AAAAC,QAAAA,QAAA,gBACrCF,cAAA,CAAA,KAAA,EAAA;AAAKC,UAAAA,SAAS,EAAC,OAAO;AAAAC,UAAAA,QAAA,EAAE,IAAI,CAACN,QAAQ;AAAE,SAAM,CAC7C,EAACE,OAAO,iBAAIE,cAAA,CAAA,IAAA,EAAA;AAAIC,UAAAA,SAAS,EAAC,0BAA0B;AAAAC,UAAAA,QAAA,EAAEJ;AAAO,SAAK,CAAC,EAClEsB,aAAa,iBAAIpB,cAAA,CAAA,GAAA,EAAA;AAAGC,UAAAA,SAAS,EAAC,0BAA0B;UAAAC,QAAA,EAAEoB,MAAM,CAACF,aAAa;SAAK,CAAC,eACrFC,eAAA,CAAA,OAAA,EAAA;AACEpB,UAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BkB,UAAU,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACpEI,UAAAA,IAAI,EAAC,QAAQ;AACb,UAAA,eAAA,EAAeJ,UAAW;AAC1BK,UAAAA,QAAQ,EAAE,CAAE;UACZjC,SAAS,EAAE,IAAI,CAACA,SAAU;UAAAW,QAAA,EAAA,CAEzBgB,YAAY,gBACXlB,cAAA,CAAA,MAAA,EAAA;AAAAE,YAAAA,QAAA,EAAOgB;AAAY,WAAO,CAAC,gBAE3BlB,cAAA,CAACW,YAAU,EAAA;AAACP,YAAAA,IAAI,EAAE,EAAG;AAACH,YAAAA,SAAS,EAAC;WAAO,CACxC,eACDD,cAAA,CAAA,OAAA,EAAA;YACEyB,GAAG,EAAE,IAAI,CAAC1C,cAAe;AACzB2C,YAAAA,IAAI,EAAC,MAAM;AACXC,YAAAA,MAAM,EAAEV,QAAQ,KAAK,GAAG,GAAGW,SAAS,GAAGX,QAAS;AAChDhB,YAAAA,SAAS,EAAC,2BAA2B;AACrC4B,YAAAA,QAAQ,EAAEV,UAAW;AACrBW,YAAAA,IAAI,EAAC,aAAa;AAClBC,YAAAA,QAAQ,EAAEA,MAAM,IAAI,CAAC9C,cAAc;AAAG,WAAA,CAE1C;AAAA,SAAO,CACP,EAACc,YAAY,iBACXC,cAAA,CAAA,KAAA,EAAA;AAAKC,UAAAA,SAAS,EAAC,sBAAsB;AAAAC,UAAAA,QAAA,eACnCF,cAAA,CAAA,KAAA,EAAA;AAAKC,YAAAA,SAAS,EAAC,iBAAiB;YAAAC,QAAA,eAC9BF,cAAA,CAACgC,yBAAY,EAAA;cACXzB,SAAS,EAAEC,mBAAS,CAACC,QAAS;AAC9BwB,cAAAA,UAAU,EAAEjB,cAAe;AAC3BkB,cAAAA,KAAK,EAAC,MAAM;AAAAhC,cAAAA,QAAA,EAEXH;aACW;WACX;AACP,SAAK,CACN;OACE;AACP,KAAK,CAAC;AAEV,EAAA;AACD;;"}
@@ -99,10 +99,10 @@ class UploadImageStep extends PureComponent {
99
99
  className: "m-b-3",
100
100
  children: this.getImage()
101
101
  }), usLabel && /*#__PURE__*/jsx("h4", {
102
- className: "wds-text-title-body m-b-1",
102
+ className: "np-text-title-body m-b-1",
103
103
  children: usLabel
104
104
  }), usPlaceholder && /*#__PURE__*/jsx("p", {
105
- className: "wds-text-body-large m-b-3",
105
+ className: "np-text-body-large m-b-3",
106
106
  children: String(usPlaceholder)
107
107
  }), /*#__PURE__*/jsxs("label", {
108
108
  className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
@@ -1 +1 @@
1
- {"version":3,"file":"UploadImageStep.mjs","sources":["../../../../src/Upload/Steps/UploadImageStep/UploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../StatusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport { InlinePrompt } from '../../../Prompt/InlinePrompt/InlinePrompt';\n\nexport interface UploadImageStepProps {\n fileDropped: (file: File) => void;\n isComplete: boolean;\n usAccept: string;\n usButtonText: string;\n usDisabled: boolean;\n usHelpImage: React.ReactNode;\n usLabel: string;\n usPlaceholder: string;\n errorMessage?: string | string[];\n errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n uploadInputRef = createRef<HTMLInputElement>();\n\n onManualUpload = () => {\n const { fileDropped } = this.props;\n const file = this.uploadInputRef.current?.files?.[0];\n if (file != null) {\n fileDropped(file);\n }\n };\n\n onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.uploadInputRef.current?.click();\n }\n };\n\n getImage = () => {\n const { usHelpImage, usLabel } = this.props;\n const { errorMessage } = this.props;\n\n if (errorMessage) {\n return (\n <div className=\"d-flex flex-column align-items-center\">\n <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n </div>\n );\n }\n\n if (!usHelpImage) {\n return (\n <div className=\"circle circle-sm circle-inverse p-t-1\">\n <UploadIcon size={24} />\n </div>\n );\n }\n\n if (typeof usHelpImage === 'string') {\n return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n }\n\n return usHelpImage;\n };\n\n render() {\n const {\n errorMessage,\n isComplete,\n errorIconLabel,\n usAccept,\n usButtonText,\n usDisabled,\n usLabel,\n usPlaceholder,\n } = this.props;\n\n return (\n <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n <div className=\"droppable-card-content\">\n <div className=\"m-b-3\">{this.getImage()}</div>\n {usLabel && <h4 className=\"wds-text-title-body m-b-1\">{usLabel}</h4>}\n {usPlaceholder && <p className=\"wds-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n <label\n className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n role=\"button\"\n aria-disabled={usDisabled}\n tabIndex={0}\n onKeyDown={this.onKeyDown}\n >\n {usButtonText ? (\n <span>{usButtonText}</span>\n ) : (\n <UploadIcon size={24} className=\"m-r-0\" />\n )}\n <input\n ref={this.uploadInputRef}\n type=\"file\"\n accept={usAccept === '*' ? undefined : usAccept}\n className=\"tw-droppable-input hidden\"\n disabled={usDisabled}\n name=\"file-upload\"\n onChange={() => this.onManualUpload()}\n />\n </label>\n {errorMessage && (\n <div className=\"upload-error-message\">\n <div className=\"m-t-3 has-error\">\n <InlinePrompt\n sentiment={Sentiment.NEGATIVE}\n mediaLabel={errorIconLabel}\n width=\"full\"\n >\n {errorMessage}\n </InlinePrompt>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","onKeyDown","event","key","preventDefault","click","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlinePrompt","mediaLabel","width"],"mappings":"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"}
1
+ {"version":3,"file":"UploadImageStep.mjs","sources":["../../../../src/Upload/Steps/UploadImageStep/UploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../StatusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport { InlinePrompt } from '../../../Prompt/InlinePrompt/InlinePrompt';\n\nexport interface UploadImageStepProps {\n fileDropped: (file: File) => void;\n isComplete: boolean;\n usAccept: string;\n usButtonText: string;\n usDisabled: boolean;\n usHelpImage: React.ReactNode;\n usLabel: string;\n usPlaceholder: string;\n errorMessage?: string | string[];\n errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n uploadInputRef = createRef<HTMLInputElement>();\n\n onManualUpload = () => {\n const { fileDropped } = this.props;\n const file = this.uploadInputRef.current?.files?.[0];\n if (file != null) {\n fileDropped(file);\n }\n };\n\n onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.uploadInputRef.current?.click();\n }\n };\n\n getImage = () => {\n const { usHelpImage, usLabel } = this.props;\n const { errorMessage } = this.props;\n\n if (errorMessage) {\n return (\n <div className=\"d-flex flex-column align-items-center\">\n <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n </div>\n );\n }\n\n if (!usHelpImage) {\n return (\n <div className=\"circle circle-sm circle-inverse p-t-1\">\n <UploadIcon size={24} />\n </div>\n );\n }\n\n if (typeof usHelpImage === 'string') {\n return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n }\n\n return usHelpImage;\n };\n\n render() {\n const {\n errorMessage,\n isComplete,\n errorIconLabel,\n usAccept,\n usButtonText,\n usDisabled,\n usLabel,\n usPlaceholder,\n } = this.props;\n\n return (\n <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n <div className=\"droppable-card-content\">\n <div className=\"m-b-3\">{this.getImage()}</div>\n {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n <label\n className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n role=\"button\"\n aria-disabled={usDisabled}\n tabIndex={0}\n onKeyDown={this.onKeyDown}\n >\n {usButtonText ? (\n <span>{usButtonText}</span>\n ) : (\n <UploadIcon size={24} className=\"m-r-0\" />\n )}\n <input\n ref={this.uploadInputRef}\n type=\"file\"\n accept={usAccept === '*' ? undefined : usAccept}\n className=\"tw-droppable-input hidden\"\n disabled={usDisabled}\n name=\"file-upload\"\n onChange={() => this.onManualUpload()}\n />\n </label>\n {errorMessage && (\n <div className=\"upload-error-message\">\n <div className=\"m-t-3 has-error\">\n <InlinePrompt\n sentiment={Sentiment.NEGATIVE}\n mediaLabel={errorIconLabel}\n width=\"full\"\n >\n {errorMessage}\n </InlinePrompt>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","onKeyDown","event","key","preventDefault","click","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlinePrompt","mediaLabel","width"],"mappings":"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"}
@@ -40,7 +40,7 @@ const ActionButton = /*#__PURE__*/React.forwardRef(({
40
40
  }, reference) => /*#__PURE__*/jsxRuntime.jsx("button", {
41
41
  ref: reference,
42
42
  type: "button",
43
- className: clsx.clsx('np-action-btn', 'wds-text-body-default-bold', priority === control.Priority.TERTIARY ? 'btn-priority-3' : priority === control.Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
43
+ className: clsx.clsx('np-action-btn', 'np-text-body-default-bold', priority === control.Priority.TERTIARY ? 'btn-priority-3' : priority === control.Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
44
44
  disabled: disabled,
45
45
  onClick: onClick,
46
46
  ...rest,
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.js","sources":["../../../src/_deprecated/ActionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../../common';\n\n/**\n * @deprecated Use `<Button />` component instead with `ButtonProps`.\n */\nexport type ActionButtonProps = {\n /** @default Priority.PRIMARY */\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n /**\n * @deprecated Use `children` instead.\n */\n text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated Use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n (\n {\n disabled = false,\n className = undefined,\n onClick,\n priority = Priority.PRIMARY,\n text,\n children,\n ...rest\n }: ActionButtonProps,\n reference,\n ) => (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-action-btn',\n 'wds-text-body-default-bold',\n priority === Priority.TERTIARY\n ? 'btn-priority-3'\n : priority === Priority.SECONDARY\n ? 'btn-priority-2'\n : 'btn-priority-1',\n className,\n )}\n disabled={disabled}\n onClick={onClick}\n {...rest}\n >\n {children || text}\n </button>\n ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC;AAAI,CACW,EACpBC,SAAS,kBAETC,cAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,SAAI,CACb,eAAe,EACf,4BAA4B,EAC5BV,QAAQ,KAAKC,gBAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,gBAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID;AAAI,CACX,CACT;;"}
1
+ {"version":3,"file":"ActionButton.js","sources":["../../../src/_deprecated/ActionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../../common';\n\n/**\n * @deprecated Use `<Button />` component instead with `ButtonProps`.\n */\nexport type ActionButtonProps = {\n /** @default Priority.PRIMARY */\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n /**\n * @deprecated Use `children` instead.\n */\n text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated Use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n (\n {\n disabled = false,\n className = undefined,\n onClick,\n priority = Priority.PRIMARY,\n text,\n children,\n ...rest\n }: ActionButtonProps,\n reference,\n ) => (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-action-btn',\n 'np-text-body-default-bold',\n priority === Priority.TERTIARY\n ? 'btn-priority-3'\n : priority === Priority.SECONDARY\n ? 'btn-priority-2'\n : 'btn-priority-1',\n className,\n )}\n disabled={disabled}\n onClick={onClick}\n {...rest}\n >\n {children || text}\n </button>\n ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC;AAAI,CACW,EACpBC,SAAS,kBAETC,cAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,SAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,gBAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,gBAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID;AAAI,CACX,CACT;;"}
@@ -36,7 +36,7 @@ const ActionButton = /*#__PURE__*/forwardRef(({
36
36
  }, reference) => /*#__PURE__*/jsx("button", {
37
37
  ref: reference,
38
38
  type: "button",
39
- className: clsx('np-action-btn', 'wds-text-body-default-bold', priority === Priority.TERTIARY ? 'btn-priority-3' : priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
39
+ className: clsx('np-action-btn', 'np-text-body-default-bold', priority === Priority.TERTIARY ? 'btn-priority-3' : priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
40
40
  disabled: disabled,
41
41
  onClick: onClick,
42
42
  ...rest,
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.mjs","sources":["../../../src/_deprecated/ActionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../../common';\n\n/**\n * @deprecated Use `<Button />` component instead with `ButtonProps`.\n */\nexport type ActionButtonProps = {\n /** @default Priority.PRIMARY */\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n /**\n * @deprecated Use `children` instead.\n */\n text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated Use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n (\n {\n disabled = false,\n className = undefined,\n onClick,\n priority = Priority.PRIMARY,\n text,\n children,\n ...rest\n }: ActionButtonProps,\n reference,\n ) => (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-action-btn',\n 'wds-text-body-default-bold',\n priority === Priority.TERTIARY\n ? 'btn-priority-3'\n : priority === Priority.SECONDARY\n ? 'btn-priority-2'\n : 'btn-priority-1',\n className,\n )}\n disabled={disabled}\n onClick={onClick}\n {...rest}\n >\n {children || text}\n </button>\n ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC;AAAI,CACW,EACpBC,SAAS,kBAETC,GAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,IAAI,CACb,eAAe,EACf,4BAA4B,EAC5BV,QAAQ,KAAKC,QAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,QAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID;AAAI,CACX,CACT;;"}
1
+ {"version":3,"file":"ActionButton.mjs","sources":["../../../src/_deprecated/ActionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../../common';\n\n/**\n * @deprecated Use `<Button />` component instead with `ButtonProps`.\n */\nexport type ActionButtonProps = {\n /** @default Priority.PRIMARY */\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n /**\n * @deprecated Use `children` instead.\n */\n text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated Use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n (\n {\n disabled = false,\n className = undefined,\n onClick,\n priority = Priority.PRIMARY,\n text,\n children,\n ...rest\n }: ActionButtonProps,\n reference,\n ) => (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-action-btn',\n 'np-text-body-default-bold',\n priority === Priority.TERTIARY\n ? 'btn-priority-3'\n : priority === Priority.SECONDARY\n ? 'btn-priority-2'\n : 'btn-priority-1',\n className,\n )}\n disabled={disabled}\n onClick={onClick}\n {...rest}\n >\n {children || text}\n </button>\n ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC;AAAI,CACW,EACpBC,SAAS,kBAETC,GAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,IAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,QAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,QAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID;AAAI,CACX,CACT;;"}
@@ -62,7 +62,7 @@ const Avatar = ({
62
62
  className: clsx.clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
63
63
  'tw-avatar--outlined': outlined,
64
64
  'tw-avatar--branded': Boolean(backgroundColorFromSeed),
65
- 'wds-text-title-body': type === 'initials'
65
+ 'np-text-title-body': type === 'initials'
66
66
  }),
67
67
  "aria-label": ariaLabel,
68
68
  children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sources":["../../../src/_deprecated/Avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../../common';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarTheme = 'light' | 'dark';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n /** @default false */\n outlined?: boolean;\n /** @default 48 */\n size?: AvatarSize;\n /** @default 'light' */\n theme?: AvatarTheme;\n /** @default 'thumbnail' */\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <div\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'wds-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,qBAAqB,EAAEF,IAAI,KAAK;AACjC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,cAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;"}
1
+ {"version":3,"file":"Avatar.js","sources":["../../../src/_deprecated/Avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../../common';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarTheme = 'light' | 'dark';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n /** @default false */\n outlined?: boolean;\n /** @default 48 */\n size?: AvatarSize;\n /** @default 'light' */\n theme?: AvatarTheme;\n /** @default 'thumbnail' */\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <div\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,cAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;"}
@@ -58,7 +58,7 @@ const Avatar = ({
58
58
  className: clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
59
59
  'tw-avatar--outlined': outlined,
60
60
  'tw-avatar--branded': Boolean(backgroundColorFromSeed),
61
- 'wds-text-title-body': type === 'initials'
61
+ 'np-text-title-body': type === 'initials'
62
62
  }),
63
63
  "aria-label": ariaLabel,
64
64
  children: /*#__PURE__*/jsx("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.mjs","sources":["../../../src/_deprecated/Avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../../common';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarTheme = 'light' | 'dark';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n /** @default false */\n outlined?: boolean;\n /** @default 48 */\n size?: AvatarSize;\n /** @default 'light' */\n theme?: AvatarTheme;\n /** @default 'thumbnail' */\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <div\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'wds-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,qBAAqB,EAAEF,IAAI,KAAK;AACjC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,GAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;"}
1
+ {"version":3,"file":"Avatar.mjs","sources":["../../../src/_deprecated/Avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../../common';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarTheme = 'light' | 'dark';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n /** @default false */\n outlined?: boolean;\n /** @default 48 */\n size?: AvatarSize;\n /** @default 'light' */\n theme?: AvatarTheme;\n /** @default 'thumbnail' */\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <div\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,GAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;"}
@@ -364,7 +364,7 @@ function Select({
364
364
  }) {
365
365
  return /*#__PURE__*/jsxRuntime.jsx("li", {
366
366
  // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
367
- className: clsx.clsx(s('np-dropdown-header'), s('wds-text-title-group')),
367
+ className: clsx.clsx(s('np-dropdown-header'), s('np-text-title-group')),
368
368
  onClick: documentIosClick.stopPropagation,
369
369
  onKeyPress: documentIosClick.stopPropagation,
370
370
  children: children
@@ -445,7 +445,7 @@ function Select({
445
445
  block: block,
446
446
  size: size,
447
447
  htmlType: "button",
448
- className: clsx.clsx(s('np-dropdown-toggle'), s('wds-text-body-large'), inverse ? s('np-dropdown-toggle-navy') : null)
448
+ className: clsx.clsx(s('np-dropdown-toggle'), s('np-text-body-large'), inverse ? s('np-dropdown-toggle-navy') : null)
449
449
  // reset Button's styles
450
450
  ,
451
451
  type: null,