@transferwise/components 46.100.1 → 46.101.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (190) hide show
  1. package/build/avatarLayout/AvatarLayout.js +1 -1
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +1 -1
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/dateLookup/DateLookup.js +3 -2
  6. package/build/dateLookup/DateLookup.js.map +1 -1
  7. package/build/dateLookup/DateLookup.mjs +3 -2
  8. package/build/dateLookup/DateLookup.mjs.map +1 -1
  9. package/build/i18n/en.json +2 -0
  10. package/build/i18n/en.json.js +2 -0
  11. package/build/i18n/en.json.js.map +1 -1
  12. package/build/i18n/en.json.mjs +2 -0
  13. package/build/i18n/en.json.mjs.map +1 -1
  14. package/build/main.css +4 -94
  15. package/build/styles/accordion/Accordion.css +27 -16
  16. package/build/styles/avatar/Avatar.css +95 -50
  17. package/build/styles/inputs/Input.css +37 -21
  18. package/build/styles/inputs/TextArea.css +35 -20
  19. package/build/styles/loader/Loader.css +4 -90
  20. package/build/styles/main.css +4 -94
  21. package/build/styles/popover/Popover.css +19 -12
  22. package/build/styles/select/Select.css +131 -68
  23. package/build/styles/switch/Switch.css +27 -16
  24. package/build/styles/tile/Tile.css +31 -18
  25. package/build/types/dateLookup/DateLookup.d.ts +2 -2
  26. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  27. package/build/types/test-utils/index.d.ts +4 -0
  28. package/build/types/test-utils/index.d.ts.map +1 -1
  29. package/build/types/test-utils/story-config.d.ts +2 -3
  30. package/build/types/test-utils/story-config.d.ts.map +1 -1
  31. package/build/types/upload/Upload.d.ts +6 -2
  32. package/build/types/upload/Upload.d.ts.map +1 -1
  33. package/build/types/upload/Upload.messages.d.ts +8 -0
  34. package/build/types/upload/Upload.messages.d.ts.map +1 -1
  35. package/build/types/uploadInput/UploadInput.d.ts +1 -1
  36. package/build/types/uploadInput/uploadButton/UploadButton.d.ts +4 -2
  37. package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
  38. package/build/upload/Upload.js +16 -9
  39. package/build/upload/Upload.js.map +1 -1
  40. package/build/upload/Upload.messages.js +6 -0
  41. package/build/upload/Upload.messages.js.map +1 -1
  42. package/build/upload/Upload.messages.mjs +6 -0
  43. package/build/upload/Upload.messages.mjs.map +1 -1
  44. package/build/upload/Upload.mjs +16 -9
  45. package/build/upload/Upload.mjs.map +1 -1
  46. package/build/uploadInput/UploadInput.js +1 -1
  47. package/build/uploadInput/UploadInput.js.map +1 -1
  48. package/build/uploadInput/UploadInput.mjs +1 -1
  49. package/build/uploadInput/UploadInput.mjs.map +1 -1
  50. package/build/uploadInput/uploadButton/UploadButton.js +7 -4
  51. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  52. package/build/uploadInput/uploadButton/UploadButton.mjs +7 -4
  53. package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
  54. package/package.json +19 -27
  55. package/src/accordion/Accordion.css +27 -16
  56. package/src/accordion/Accordion.story.tsx +1 -1
  57. package/src/actionButton/ActionButton.story.tsx +3 -2
  58. package/src/actionOption/ActionOption.story.tsx +2 -2
  59. package/src/alert/Alert.story.tsx +2 -2
  60. package/src/alert/Alert.tests.story.tsx +2 -2
  61. package/src/avatar/Avatar.css +95 -50
  62. package/src/avatar/Avatar.spec.tsx +1 -1
  63. package/src/avatar/Avatar.story.tsx +3 -2
  64. package/src/avatarLayout/AvatarLayout.story.tsx +1 -1
  65. package/src/avatarLayout/AvatarLayout.tsx +1 -1
  66. package/src/avatarView/AvatarView.story.tsx +1 -1
  67. package/src/avatarWrapper/AvatarWrapper.story.tsx +3 -2
  68. package/src/badge/Badge.story.tsx +49 -28
  69. package/src/button/Button.accessibility.docs.mdx +1 -1
  70. package/src/button/Button.story.tsx +2 -2
  71. package/src/button/Button.tests.story.tsx +2 -2
  72. package/src/button/LegacyButton.story.tsx +3 -2
  73. package/src/card/Card.story.tsx +2 -2
  74. package/src/carousel/Carousel.story.tsx +1 -1
  75. package/src/checkbox/Checkbox.story.tsx +2 -2
  76. package/src/checkboxButton/CheckboxButton.story.tsx +2 -2
  77. package/src/checkboxOption/CheckboxOption.story.tsx +35 -29
  78. package/src/chevron/Chevron.story.tsx +1 -1
  79. package/src/chips/Chips.story.tsx +1 -1
  80. package/src/circularButton/CircularButton.story.tsx +1 -1
  81. package/src/circularButton/CircularButton.tests.story.tsx +1 -1
  82. package/src/common/bottomSheet/BottomSheet.story.tsx +2 -2
  83. package/src/common/card/Card.story.tsx +1 -1
  84. package/src/common/circle/Circle.story.tsx +2 -2
  85. package/src/common/locale/index.spec.ts +28 -16
  86. package/src/common/responsivePanel/ResponsivePanel.spec.js +8 -29
  87. package/src/criticalBanner/CriticalCommsBanner.story.tsx +1 -1
  88. package/src/dateInput/DateInput.story.tsx +2 -2
  89. package/src/dateInput/DateInput.tests.story.tsx +2 -2
  90. package/src/dateLookup/DateLookup.spec.tsx +5 -5
  91. package/src/dateLookup/DateLookup.story.tsx +43 -71
  92. package/src/dateLookup/DateLookup.tests.story.tsx +3 -3
  93. package/src/dateLookup/DateLookup.tsx +4 -1
  94. package/src/decision/Decision.story.tsx +24 -49
  95. package/src/definitionList/DefinitionList.story.tsx +1 -1
  96. package/src/dimmer/Dimmer.story.tsx +2 -2
  97. package/src/divider/Divider.accessibility.docs.mdx +1 -1
  98. package/src/divider/Divider.story.tsx +1 -1
  99. package/src/drawer/Drawer.story.tsx +13 -7
  100. package/src/dropFade/DropFade.story.tsx +1 -1
  101. package/src/emphasis/Emphasis.spec.tsx +8 -8
  102. package/src/emphasis/Emphasis.story.tsx +1 -1
  103. package/src/field/Field.story.tsx +3 -3
  104. package/src/flowNavigation/FlowNavigation.story.tsx +305 -260
  105. package/src/i18n/en.json +2 -0
  106. package/src/iconButton/IconButton.story.tsx +2 -2
  107. package/src/image/Image.story.tsx +27 -54
  108. package/src/info/Info.story.tsx +2 -2
  109. package/src/inlineAlert/InlineAlert.story.tsx +1 -1
  110. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +2 -2
  111. package/src/inputs/Input.css +37 -21
  112. package/src/inputs/InputGroup.story.tsx +1 -1
  113. package/src/inputs/SearchInput.story.tsx +1 -1
  114. package/src/inputs/SelectInput.docs.mdx +1 -1
  115. package/src/inputs/SelectInput.story.tsx +2 -2
  116. package/src/inputs/TextArea.css +35 -20
  117. package/src/instructionsList/InstructionsList.story.tsx +2 -2
  118. package/src/legacylistItem/LegacyListItem.story.tsx +1 -1
  119. package/src/loader/Loader.css +4 -90
  120. package/src/loader/Loader.story.tsx +1 -1
  121. package/src/logo/Logo.story.tsx +1 -1
  122. package/src/main.css +4 -94
  123. package/src/markdown/Markdown.story.tsx +1 -1
  124. package/src/modal/Modal.story.tsx +2 -2
  125. package/src/money/Money.story.tsx +1 -1
  126. package/src/moneyInput/MoneyInput.docs.mdx +1 -1
  127. package/src/moneyInput/MoneyInput.spec.tsx +8 -5
  128. package/src/moneyInput/MoneyInput.story.tsx +2 -2
  129. package/src/moneyInput/currencyFormatting.spec.ts +1 -1
  130. package/src/navigationOption/NavigationOption.story.tsx +265 -226
  131. package/src/nudge/Nudge.story.tsx +1 -1
  132. package/src/overlayHeader/OverlayHeader.story.tsx +32 -24
  133. package/src/phoneNumberInput/PhoneNumberInput.story.tsx +1 -1
  134. package/src/phoneNumberInput/utils/setDefaultPrefix/setDefaultPrefix.spec.ts +6 -3
  135. package/src/popover/Popover.css +19 -12
  136. package/src/popover/Popover.story.tsx +2 -2
  137. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +2 -2
  138. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +2 -2
  139. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +2 -2
  140. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +2 -2
  141. package/src/processIndicator/ProcessIndicator.story.tsx +1 -1
  142. package/src/progress/Progress.story.tsx +1 -1
  143. package/src/progressBar/ProgressBar.story.tsx +1 -1
  144. package/src/promoCard/PromoCard.story.tsx +1 -1
  145. package/src/promoCard/PromoCardGroup.story.tsx +1 -1
  146. package/src/provider/Provider.spec.tsx +2 -2
  147. package/src/provider/Provider.story.tsx +1 -1
  148. package/src/provider/direction/DirectionProvider.spec.tsx +1 -1
  149. package/src/provider/language/LanguageProvider.spec.tsx +1 -1
  150. package/src/provider/theme/ThemeProvider.story.tsx +1 -1
  151. package/src/radio/Radio.story.tsx +59 -42
  152. package/src/radioGroup/RadioGroup.story.tsx +2 -2
  153. package/src/radioOption/RadioOption.story.tsx +73 -38
  154. package/src/segmentedControl/SegmentedControl.story.tsx +1 -1
  155. package/src/select/Select.css +131 -68
  156. package/src/select/Select.story.tsx +385 -397
  157. package/src/slidingPanel/SlidingPanel.story.tsx +30 -13
  158. package/src/snackbar/Snackbar.story.tsx +50 -36
  159. package/src/snackbar/Snackbar.tests.story.tsx +3 -2
  160. package/src/statusIcon/StatusIcon.docs.mdx +1 -1
  161. package/src/statusIcon/StatusIcon.spec.tsx +8 -5
  162. package/src/statusIcon/StatusIcon.story.tsx +1 -1
  163. package/src/stepper/Stepper.story.tsx +2 -2
  164. package/src/stepper/Stepper.tests.story.tsx +2 -2
  165. package/src/sticky/Sticky.story.tsx +1 -1
  166. package/src/summary/Summary.story.tsx +18 -17
  167. package/src/switch/Switch.css +27 -16
  168. package/src/switch/Switch.story.tsx +2 -2
  169. package/src/switchOption/SwitchOption.story.tsx +1 -1
  170. package/src/table/Table.story.tsx +1 -1
  171. package/src/test-utils/story-config.ts +9 -6
  172. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +2 -2
  173. package/src/tile/Tile.css +31 -18
  174. package/src/tile/Tile.story.tsx +43 -43
  175. package/src/tooltip/Tooltip.story.tsx +2 -2
  176. package/src/typeahead/Typeahead.story.tsx +2 -2
  177. package/src/upload/Upload.messages.ts +8 -0
  178. package/src/upload/Upload.spec.tsx +6 -0
  179. package/src/upload/Upload.story.tsx +120 -5
  180. package/src/upload/Upload.tests.story.tsx +5 -3
  181. package/src/upload/Upload.tsx +24 -15
  182. package/src/upload/utils/isTypeValid/isTypeValid.spec.ts +3 -1
  183. package/src/uploadInput/UploadInput.story.tsx +1 -1
  184. package/src/uploadInput/UploadInput.tests.story.tsx +10 -3
  185. package/src/uploadInput/UploadInput.tsx +2 -2
  186. package/src/uploadInput/uploadButton/UploadButton.spec.tsx +6 -0
  187. package/src/uploadInput/uploadButton/UploadButton.tsx +12 -6
  188. package/src/withId/withId.docs.mdx +1 -1
  189. package/src/withId/withId.story.tsx +1 -1
  190. package/src/common/responsivePanel/__snapshots__/ResponsivePanel.spec.js.snap +0 -21
package/build/styles/loader/Loader.css CHANGED
@@ -49,101 +49,15 @@
49
49
  --coin-size: 3rem;
50
50
  --coin-edge-width-offset: translateX(0.275rem);
51
51
  --coin-edge-width-negative-offset: translateX(-0.275rem);
52
- --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
53
- 0.05rem 0 0 var(--coin-colour),
54
- 0.075rem 0 0 var(--coin-colour),
55
- 0.1rem 0 0 var(--coin-colour),
56
- 0.125rem 0 0 var(--coin-colour),
57
- 0.15rem 0 0 var(--coin-colour),
58
- 0.175rem 0 0 var(--coin-colour),
59
- 0.2rem 0 0 var(--coin-colour),
60
- 0.225rem 0 0 var(--coin-colour),
61
- 0.25rem 0 0 var(--coin-colour),
62
- 0.275rem 0 0 var(--coin-colour),
63
- 0.3rem 0 0 var(--coin-colour),
64
- 0.325rem 0 0 var(--coin-colour),
65
- 0.35rem 0 0 var(--coin-colour),
66
- 0.375rem 0 0 var(--coin-colour),
67
- 0.4rem 0 0 var(--coin-colour),
68
- 0.425rem 0 0 var(--coin-colour),
69
- 0.45rem 0 0 var(--coin-colour),
70
- 0.475rem 0 0 var(--coin-colour);
71
- --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
72
- -0.05rem 0 0 var(--coin-colour),
73
- -0.075rem 0 0 var(--coin-colour),
74
- -0.1rem 0 0 var(--coin-colour),
75
- -0.125rem 0 0 var(--coin-colour),
76
- -0.15rem 0 0 var(--coin-colour),
77
- -0.175rem 0 0 var(--coin-colour),
78
- -0.2rem 0 0 var(--coin-colour),
79
- -0.225rem 0 0 var(--coin-colour),
80
- -0.25rem 0 0 var(--coin-colour),
81
- -0.275rem 0 0 var(--coin-colour),
82
- -0.3rem 0 0 var(--coin-colour),
83
- -0.325rem 0 0 var(--coin-colour),
84
- -0.35rem 0 0 var(--coin-colour),
85
- -0.375rem 0 0 var(--coin-colour),
86
- -0.4rem 0 0 var(--coin-colour),
87
- -0.425rem 0 0 var(--coin-colour),
88
- -0.45rem 0 0 var(--coin-colour),
89
- -0.475rem 0 0 var(--coin-colour);
52
+ --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour);
53
+ --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
90
54
  }
91
55
  .tw-loader--md {
92
56
  --coin-size: 4.5rem;
93
57
  --coin-edge-width-offset: translateX(0.375rem);
94
58
  --coin-edge-width-negative-offset: translateX(-0.375rem);
95
- --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
96
- 0.05rem 0 0 var(--coin-colour),
97
- 0.075rem 0 0 var(--coin-colour),
98
- 0.1rem 0 0 var(--coin-colour),
99
- 0.125rem 0 0 var(--coin-colour),
100
- 0.15rem 0 0 var(--coin-colour),
101
- 0.175rem 0 0 var(--coin-colour),
102
- 0.2rem 0 0 var(--coin-colour),
103
- 0.225rem 0 0 var(--coin-colour),
104
- 0.25rem 0 0 var(--coin-colour),
105
- 0.275rem 0 0 var(--coin-colour),
106
- 0.3rem 0 0 var(--coin-colour),
107
- 0.325rem 0 0 var(--coin-colour),
108
- 0.35rem 0 0 var(--coin-colour),
109
- 0.375rem 0 0 var(--coin-colour),
110
- 0.4rem 0 0 var(--coin-colour),
111
- 0.425rem 0 0 var(--coin-colour),
112
- 0.45rem 0 0 var(--coin-colour),
113
- 0.475rem 0 0 var(--coin-colour),
114
- 0.5rem 0 0 var(--coin-colour),
115
- 0.525rem 0 0 var(--coin-colour),
116
- 0.55rem 0 0 var(--coin-colour),
117
- 0.575rem 0 0 var(--coin-colour),
118
- 0.6rem 0 0 var(--coin-colour),
119
- 0.625rem 0 0 var(--coin-colour),
120
- 0.65rem 0 0 var(--coin-colour);
121
- --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
122
- -0.05rem 0 0 var(--coin-colour),
123
- -0.075rem 0 0 var(--coin-colour),
124
- -0.1rem 0 0 var(--coin-colour),
125
- -0.125rem 0 0 var(--coin-colour),
126
- -0.15rem 0 0 var(--coin-colour),
127
- -0.175rem 0 0 var(--coin-colour),
128
- -0.2rem 0 0 var(--coin-colour),
129
- -0.225rem 0 0 var(--coin-colour),
130
- -0.25rem 0 0 var(--coin-colour),
131
- -0.275rem 0 0 var(--coin-colour),
132
- -0.3rem 0 0 var(--coin-colour),
133
- -0.325rem 0 0 var(--coin-colour),
134
- -0.35rem 0 0 var(--coin-colour),
135
- -0.375rem 0 0 var(--coin-colour),
136
- -0.4rem 0 0 var(--coin-colour),
137
- -0.425rem 0 0 var(--coin-colour),
138
- -0.45rem 0 0 var(--coin-colour),
139
- -0.475rem 0 0 var(--coin-colour),
140
- -0.5rem 0 0 var(--coin-colour),
141
- -0.525rem 0 0 var(--coin-colour),
142
- -0.55rem 0 0 var(--coin-colour),
143
- -0.575rem 0 0 var(--coin-colour),
144
- -0.6rem 0 0 var(--coin-colour),
145
- -0.625rem 0 0 var(--coin-colour),
146
- -0.65rem 0 0 var(--coin-colour);
59
+ --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour), 0.5rem 0 0 var(--coin-colour), 0.525rem 0 0 var(--coin-colour), 0.55rem 0 0 var(--coin-colour), 0.575rem 0 0 var(--coin-colour), 0.6rem 0 0 var(--coin-colour), 0.625rem 0 0 var(--coin-colour), 0.65rem 0 0 var(--coin-colour);
60
+ --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour), -0.5rem 0 0 var(--coin-colour), -0.525rem 0 0 var(--coin-colour), -0.55rem 0 0 var(--coin-colour), -0.575rem 0 0 var(--coin-colour), -0.6rem 0 0 var(--coin-colour), -0.625rem 0 0 var(--coin-colour), -0.65rem 0 0 var(--coin-colour);
147
61
  }
148
62
  @media (prefers-reduced-motion) {
149
63
  .tw-loader::before {
package/build/styles/main.css CHANGED
@@ -34,10 +34,6 @@
34
34
  margin-left: var(--padding-small);
35
35
  }
36
36
  }
37
- @media (min-width: 768px) {
38
- }
39
- @media (min-width: 768px) {
40
- }
41
37
  .np-accordion-item {
42
38
  display: block;
43
39
  width: 100%;
@@ -3188,101 +3184,15 @@ button.np-link {
3188
3184
  --coin-size: 3rem;
3189
3185
  --coin-edge-width-offset: translateX(0.275rem);
3190
3186
  --coin-edge-width-negative-offset: translateX(-0.275rem);
3191
- --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
3192
- 0.05rem 0 0 var(--coin-colour),
3193
- 0.075rem 0 0 var(--coin-colour),
3194
- 0.1rem 0 0 var(--coin-colour),
3195
- 0.125rem 0 0 var(--coin-colour),
3196
- 0.15rem 0 0 var(--coin-colour),
3197
- 0.175rem 0 0 var(--coin-colour),
3198
- 0.2rem 0 0 var(--coin-colour),
3199
- 0.225rem 0 0 var(--coin-colour),
3200
- 0.25rem 0 0 var(--coin-colour),
3201
- 0.275rem 0 0 var(--coin-colour),
3202
- 0.3rem 0 0 var(--coin-colour),
3203
- 0.325rem 0 0 var(--coin-colour),
3204
- 0.35rem 0 0 var(--coin-colour),
3205
- 0.375rem 0 0 var(--coin-colour),
3206
- 0.4rem 0 0 var(--coin-colour),
3207
- 0.425rem 0 0 var(--coin-colour),
3208
- 0.45rem 0 0 var(--coin-colour),
3209
- 0.475rem 0 0 var(--coin-colour);
3210
- --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
3211
- -0.05rem 0 0 var(--coin-colour),
3212
- -0.075rem 0 0 var(--coin-colour),
3213
- -0.1rem 0 0 var(--coin-colour),
3214
- -0.125rem 0 0 var(--coin-colour),
3215
- -0.15rem 0 0 var(--coin-colour),
3216
- -0.175rem 0 0 var(--coin-colour),
3217
- -0.2rem 0 0 var(--coin-colour),
3218
- -0.225rem 0 0 var(--coin-colour),
3219
- -0.25rem 0 0 var(--coin-colour),
3220
- -0.275rem 0 0 var(--coin-colour),
3221
- -0.3rem 0 0 var(--coin-colour),
3222
- -0.325rem 0 0 var(--coin-colour),
3223
- -0.35rem 0 0 var(--coin-colour),
3224
- -0.375rem 0 0 var(--coin-colour),
3225
- -0.4rem 0 0 var(--coin-colour),
3226
- -0.425rem 0 0 var(--coin-colour),
3227
- -0.45rem 0 0 var(--coin-colour),
3228
- -0.475rem 0 0 var(--coin-colour);
3187
+ --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour);
3188
+ --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
3229
3189
  }
3230
3190
  .tw-loader--md {
3231
3191
  --coin-size: 4.5rem;
3232
3192
  --coin-edge-width-offset: translateX(0.375rem);
3233
3193
  --coin-edge-width-negative-offset: translateX(-0.375rem);
3234
- --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
3235
- 0.05rem 0 0 var(--coin-colour),
3236
- 0.075rem 0 0 var(--coin-colour),
3237
- 0.1rem 0 0 var(--coin-colour),
3238
- 0.125rem 0 0 var(--coin-colour),
3239
- 0.15rem 0 0 var(--coin-colour),
3240
- 0.175rem 0 0 var(--coin-colour),
3241
- 0.2rem 0 0 var(--coin-colour),
3242
- 0.225rem 0 0 var(--coin-colour),
3243
- 0.25rem 0 0 var(--coin-colour),
3244
- 0.275rem 0 0 var(--coin-colour),
3245
- 0.3rem 0 0 var(--coin-colour),
3246
- 0.325rem 0 0 var(--coin-colour),
3247
- 0.35rem 0 0 var(--coin-colour),
3248
- 0.375rem 0 0 var(--coin-colour),
3249
- 0.4rem 0 0 var(--coin-colour),
3250
- 0.425rem 0 0 var(--coin-colour),
3251
- 0.45rem 0 0 var(--coin-colour),
3252
- 0.475rem 0 0 var(--coin-colour),
3253
- 0.5rem 0 0 var(--coin-colour),
3254
- 0.525rem 0 0 var(--coin-colour),
3255
- 0.55rem 0 0 var(--coin-colour),
3256
- 0.575rem 0 0 var(--coin-colour),
3257
- 0.6rem 0 0 var(--coin-colour),
3258
- 0.625rem 0 0 var(--coin-colour),
3259
- 0.65rem 0 0 var(--coin-colour);
3260
- --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
3261
- -0.05rem 0 0 var(--coin-colour),
3262
- -0.075rem 0 0 var(--coin-colour),
3263
- -0.1rem 0 0 var(--coin-colour),
3264
- -0.125rem 0 0 var(--coin-colour),
3265
- -0.15rem 0 0 var(--coin-colour),
3266
- -0.175rem 0 0 var(--coin-colour),
3267
- -0.2rem 0 0 var(--coin-colour),
3268
- -0.225rem 0 0 var(--coin-colour),
3269
- -0.25rem 0 0 var(--coin-colour),
3270
- -0.275rem 0 0 var(--coin-colour),
3271
- -0.3rem 0 0 var(--coin-colour),
3272
- -0.325rem 0 0 var(--coin-colour),
3273
- -0.35rem 0 0 var(--coin-colour),
3274
- -0.375rem 0 0 var(--coin-colour),
3275
- -0.4rem 0 0 var(--coin-colour),
3276
- -0.425rem 0 0 var(--coin-colour),
3277
- -0.45rem 0 0 var(--coin-colour),
3278
- -0.475rem 0 0 var(--coin-colour),
3279
- -0.5rem 0 0 var(--coin-colour),
3280
- -0.525rem 0 0 var(--coin-colour),
3281
- -0.55rem 0 0 var(--coin-colour),
3282
- -0.575rem 0 0 var(--coin-colour),
3283
- -0.6rem 0 0 var(--coin-colour),
3284
- -0.625rem 0 0 var(--coin-colour),
3285
- -0.65rem 0 0 var(--coin-colour);
3194
+ --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour), 0.5rem 0 0 var(--coin-colour), 0.525rem 0 0 var(--coin-colour), 0.55rem 0 0 var(--coin-colour), 0.575rem 0 0 var(--coin-colour), 0.6rem 0 0 var(--coin-colour), 0.625rem 0 0 var(--coin-colour), 0.65rem 0 0 var(--coin-colour);
3195
+ --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour), -0.5rem 0 0 var(--coin-colour), -0.525rem 0 0 var(--coin-colour), -0.55rem 0 0 var(--coin-colour), -0.575rem 0 0 var(--coin-colour), -0.6rem 0 0 var(--coin-colour), -0.625rem 0 0 var(--coin-colour), -0.65rem 0 0 var(--coin-colour);
3286
3196
  }
3287
3197
  @media (prefers-reduced-motion) {
3288
3198
  .tw-loader::before {
package/build/styles/popover/Popover.css CHANGED
@@ -1,23 +1,26 @@
1
- @media (min-width: 768px) {
2
- }@media (min-width: 768px) {
3
- }.np-theme-personal .np-popover__container {
1
+ .np-theme-personal .np-popover__container {
4
2
  border-radius: 16px;
5
3
  border-radius: var(--radius-medium);
6
- }.np-popover__container .np-popover__content {
4
+ }
5
+ .np-popover__container .np-popover__content {
7
6
  color: #5d7079;
8
7
  color: var(--color-content-secondary);
9
8
  font-size: 0.875rem;
10
9
  font-size: var(--font-size-14);
11
- }.np-popover__container .np-popover__content p:last-child {
10
+ }
11
+ .np-popover__container .np-popover__content p:last-child {
12
12
  margin-bottom: 0;
13
- }.np-popover__container.np-panel .np-popover__content {
13
+ }
14
+ .np-popover__container.np-panel .np-popover__content {
14
15
  padding: 16px 24px;
15
16
  padding: var(--size-16) var(--size-24);
16
17
  max-width: 276px;
17
- }.np-theme-personal .np-popover__container.np-panel .np-popover__content {
18
+ }
19
+ .np-theme-personal .np-popover__container.np-panel .np-popover__content {
18
20
  padding: 24px;
19
21
  padding: var(--size-24);
20
- }.np-popover__container.np-bottom-sheet .np-popover__title {
22
+ }
23
+ .np-popover__container.np-bottom-sheet .np-popover__title {
21
24
  margin: 0;
22
25
  color: #37517e;
23
26
  color: var(--color-content-primary);
@@ -32,7 +35,8 @@
32
35
  font-size: var(--font-size-26);
33
36
  letter-spacing: -0.02em;
34
37
  line-height: 122%;
35
- }@supports (hyphenate-limit-chars: 1) {
38
+ }
39
+ @supports (hyphenate-limit-chars: 1) {
36
40
  .np-popover__container.np-bottom-sheet .np-popover__title {
37
41
  -webkit-hyphens: auto;
38
42
  hyphens: auto;
@@ -48,7 +52,8 @@
48
52
  hyphenate-limit-chars: 10 4 3;
49
53
  }
50
54
  }
51
- }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
55
+ }
56
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
52
57
  .np-popover__container.np-bottom-sheet .np-popover__title {
53
58
  -webkit-hyphens: auto;
54
59
  hyphens: auto;
@@ -60,12 +65,14 @@
60
65
  -webkit-hyphenate-limit-before: 4;
61
66
  }
62
67
  }
63
- }.np-popover__container.np-bottom-sheet .np-popover__title + p,
68
+ }
69
+ .np-popover__container.np-bottom-sheet .np-popover__title + p,
64
70
  .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
65
71
  .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {
66
72
  margin-top: 8px;
67
73
  margin-top: var(--size-8);
68
- }.np-popover__container.np-bottom-sheet .np-popover__content {
74
+ }
75
+ .np-popover__container.np-bottom-sheet .np-popover__content {
69
76
  padding: 32px 24px;
70
77
  padding: var(--size-32) var(--size-24);
71
78
  }