@transferwise/components 45.14.2 → 45.15.1

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 (160) hide show
  1. package/build/i18n/en.json +8 -0
  2. package/build/index.esm.js +1001 -367
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +1003 -366
  5. package/build/index.js.map +1 -1
  6. package/build/main.css +1 -1
  7. package/build/styles/common/closeButton/CloseButton.css +1 -1
  8. package/build/styles/dateLookup/DateLookup.css +1 -1
  9. package/build/styles/inputs/Input.css +1 -1
  10. package/build/styles/inputs/InputGroup.css +1 -1
  11. package/build/styles/inputs/SelectInput.css +1 -0
  12. package/build/styles/inputs/TextArea.css +1 -1
  13. package/build/styles/main.css +1 -1
  14. package/build/styles/promoCard/PromoCard.css +1 -1
  15. package/build/styles/stepper/Stepper.css +1 -1
  16. package/build/types/avatarWrapper/AvatarWrapper.d.ts +14 -5
  17. package/build/types/avatarWrapper/AvatarWrapper.d.ts.map +1 -1
  18. package/build/types/common/Option/Option.d.ts.map +1 -1
  19. package/build/types/common/focusBoundary/FocusBoundary.d.ts +2 -2
  20. package/build/types/common/focusBoundary/FocusBoundary.d.ts.map +1 -1
  21. package/build/types/common/hooks/useMedia.d.ts +2 -0
  22. package/build/types/common/hooks/useMedia.d.ts.map +1 -0
  23. package/build/types/common/hooks/useScreenSize.d.ts +3 -0
  24. package/build/types/common/hooks/useScreenSize.d.ts.map +1 -0
  25. package/build/types/common/preventScroll/PreventScroll.d.ts +2 -0
  26. package/build/types/common/preventScroll/PreventScroll.d.ts.map +1 -0
  27. package/build/types/dateInput/DateInput.d.ts +2 -0
  28. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  29. package/build/types/dateLookup/DateLookup.messages.d.ts +65 -0
  30. package/build/types/dateLookup/DateLookup.messages.d.ts.map +1 -0
  31. package/build/types/dateLookup/dateHeader/DateHeader.d.ts +3 -1
  32. package/build/types/dateLookup/dateHeader/DateHeader.d.ts.map +1 -1
  33. package/build/types/dateLookup/dateTrigger/DateTrigger.messages.d.ts +7 -7
  34. package/build/types/dateLookup/dateTrigger/DateTrigger.messages.d.ts.map +1 -1
  35. package/build/types/dateLookup/tableLink/TableLink.d.ts +4 -26
  36. package/build/types/dateLookup/tableLink/TableLink.d.ts.map +1 -1
  37. package/build/types/dateLookup/yearCalendar/YearCalendar.d.ts +4 -29
  38. package/build/types/dateLookup/yearCalendar/YearCalendar.d.ts.map +1 -1
  39. package/build/types/index.d.ts +4 -0
  40. package/build/types/index.d.ts.map +1 -1
  41. package/build/types/inputs/Input.d.ts +1 -0
  42. package/build/types/inputs/Input.d.ts.map +1 -1
  43. package/build/types/inputs/SearchInput.d.ts +10 -0
  44. package/build/types/inputs/SearchInput.d.ts.map +1 -0
  45. package/build/types/inputs/SelectInput.d.ts +41 -0
  46. package/build/types/inputs/SelectInput.d.ts.map +1 -0
  47. package/build/types/inputs/_BottomSheet.d.ts +17 -0
  48. package/build/types/inputs/_BottomSheet.d.ts.map +1 -0
  49. package/build/types/inputs/_ButtonInput.d.ts +6 -0
  50. package/build/types/inputs/_ButtonInput.d.ts.map +1 -0
  51. package/build/types/inputs/_Popover.d.ts +18 -0
  52. package/build/types/inputs/_Popover.d.ts.map +1 -0
  53. package/build/types/inputs/_common.d.ts.map +1 -1
  54. package/build/types/logo/Logo.d.ts.map +1 -1
  55. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
  56. package/build/types/snackbar/Snackbar.d.ts.map +1 -1
  57. package/build/types/stepper/Stepper.d.ts.map +1 -1
  58. package/build/types/tabs/Tabs.d.ts.map +1 -1
  59. package/build/types/tile/Tile.d.ts.map +1 -1
  60. package/build/types/upload/steps/completeStep/completeStep.d.ts.map +1 -1
  61. package/build/types/upload/steps/processingStep/processingStep.d.ts.map +1 -1
  62. package/build/types/utilities/wrapInFragment.d.ts +3 -0
  63. package/build/types/utilities/wrapInFragment.d.ts.map +1 -0
  64. package/package.json +27 -20
  65. package/src/accordion/AccordionItem/__snapshots__/AccordionItem.spec.js.snap +6 -6
  66. package/src/avatarWrapper/AvatarWrapper.tsx +20 -8
  67. package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap +1 -1
  68. package/src/card/Card.spec.js +2 -2
  69. package/src/common/Option/Option.tsx +1 -7
  70. package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap +8 -1
  71. package/src/common/closeButton/CloseButton.css +1 -1
  72. package/src/common/focusBoundary/FocusBoundary.tsx +9 -32
  73. package/src/common/hooks/useMedia.spec.ts +39 -0
  74. package/src/common/hooks/useMedia.ts +15 -0
  75. package/src/common/hooks/useScreenSize.ts +7 -0
  76. package/src/common/preventScroll/PreventScroll.tsx +6 -0
  77. package/src/dateInput/DateInput.js +6 -0
  78. package/src/dateInput/DateInput.story.tsx +2 -0
  79. package/src/dateLookup/DateLookup.css +1 -1
  80. package/src/dateLookup/DateLookup.keyboardEvents.spec.js +3 -3
  81. package/src/dateLookup/DateLookup.less +4 -0
  82. package/src/dateLookup/DateLookup.messages.js +44 -0
  83. package/src/dateLookup/DateLookup.testingLibrary.spec.js +39 -0
  84. package/src/dateLookup/dateHeader/DateHeader.js +48 -26
  85. package/src/dateLookup/dateHeader/DateHeader.spec.js +37 -0
  86. package/src/dateLookup/dayCalendar/DayCalendar.js +3 -1
  87. package/src/dateLookup/dayCalendar/DayCalendar.spec.js +7 -1
  88. package/src/dateLookup/dayCalendar/table/DayCalendarTable.js +7 -3
  89. package/src/dateLookup/dayCalendar/table/DayCalendarTable.spec.js +1 -0
  90. package/src/dateLookup/monthCalendar/MonthCalendar.js +3 -1
  91. package/src/dateLookup/monthCalendar/MonthCalendar.spec.js +7 -1
  92. package/src/dateLookup/monthCalendar/table/MonthCalendarTable.spec.js +4 -5
  93. package/src/dateLookup/tableLink/TableLink.js +24 -3
  94. package/src/dateLookup/tableLink/TableLink.spec.js +60 -4
  95. package/src/dateLookup/yearCalendar/YearCalendar.js +16 -3
  96. package/src/dateLookup/yearCalendar/YearCalendar.spec.js +14 -1
  97. package/src/dateLookup/yearCalendar/table/YearCalendarTable.spec.js +4 -5
  98. package/src/decision/Decision.story.js +11 -11
  99. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +12 -12
  100. package/src/i18n/en.json +9 -0
  101. package/src/index.ts +8 -0
  102. package/src/inputs/Input.css +1 -1
  103. package/src/inputs/Input.less +14 -0
  104. package/src/inputs/Input.tsx +6 -2
  105. package/src/inputs/InputGroup.css +1 -1
  106. package/src/inputs/InputGroup.less +5 -0
  107. package/src/inputs/SearchInput.story.tsx +40 -0
  108. package/src/inputs/SearchInput.tsx +35 -0
  109. package/src/inputs/SelectInput.css +1 -0
  110. package/src/inputs/SelectInput.less +183 -0
  111. package/src/inputs/SelectInput.spec.tsx +120 -0
  112. package/src/inputs/SelectInput.story.tsx +264 -0
  113. package/src/inputs/SelectInput.tsx +565 -0
  114. package/src/inputs/TextArea.css +1 -1
  115. package/src/inputs/TextArea.less +5 -0
  116. package/src/inputs/_BottomSheet.less +107 -0
  117. package/src/inputs/_BottomSheet.tsx +128 -0
  118. package/src/inputs/_ButtonInput.less +7 -0
  119. package/src/inputs/_ButtonInput.tsx +27 -0
  120. package/src/inputs/_Popover.less +38 -0
  121. package/src/inputs/_Popover.tsx +118 -0
  122. package/src/inputs/_common.less +0 -4
  123. package/src/inputs/_common.ts +0 -1
  124. package/src/logo/Logo.js +3 -21
  125. package/src/logo/__snapshots__/Logo.spec.js.snap +78 -30
  126. package/src/main.css +1 -1
  127. package/src/main.less +4 -0
  128. package/src/phoneNumberInput/PhoneNumberInput.js +1 -0
  129. package/src/promoCard/PromoCard.css +1 -1
  130. package/src/select/searchBox/__snapshots__/SearchBox.spec.js.snap +1 -1
  131. package/src/snackbar/Snackbar.js +6 -1
  132. package/src/snackbar/Snackbar.spec.js +1 -3
  133. package/src/ssr.spec.js +7 -0
  134. package/src/stepper/Stepper.css +1 -1
  135. package/src/stepper/Stepper.less +1 -9
  136. package/src/stepper/Stepper.spec.js +4 -4
  137. package/src/stepper/Stepper.tsx +2 -5
  138. package/src/tabs/Tabs.js +2 -1
  139. package/src/tile/Tile.js +5 -11
  140. package/src/tile/__snapshots__/Tile.spec.js.snap +7 -9
  141. package/src/upload/Upload.js +1 -1
  142. package/src/upload/steps/completeStep/completeStep.js +4 -1
  143. package/src/upload/steps/processingStep/processingStep.js +1 -0
  144. package/src/uploadInput/uploadItem/UploadItem.tsx +1 -1
  145. package/src/utilities/wrapInFragment.tsx +3 -0
  146. package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts +0 -2
  147. package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts.map +0 -1
  148. package/build/types/common/focusBoundary/utils/index.d.ts +0 -3
  149. package/build/types/common/focusBoundary/utils/index.d.ts.map +0 -1
  150. package/build/types/common/focusBoundary/utils/resetFocus.d.ts +0 -2
  151. package/build/types/common/focusBoundary/utils/resetFocus.d.ts.map +0 -1
  152. package/src/common/focusBoundary/FocusBoundary.spec.tsx +0 -66
  153. package/src/common/focusBoundary/__snapshots__/FocusBoundary.spec.tsx.snap +0 -16
  154. package/src/common/focusBoundary/utils/getFocusableElements.js +0 -25
  155. package/src/common/focusBoundary/utils/getFocusableElements.spec.js +0 -51
  156. package/src/common/focusBoundary/utils/index.js +0 -2
  157. package/src/common/focusBoundary/utils/resetFocus.js +0 -23
  158. package/src/common/focusBoundary/utils/resetFocus.spec.js +0 -103
  159. package/src/snackbar/__snapshots__/Snackbar.spec.js.snap +0 -5
  160. /package/src/dateLookup/dateTrigger/{DateTrigger.messages.js → DateTrigger.messages.ts} +0 -0
package/build/styles/common/closeButton/CloseButton.css CHANGED
@@ -1 +1 @@
1
- .np-close-button{--ring-outline-offset:0;background:none;border:none;color:#00a2dd;color:var(--color-interactive-accent);height:16px;height:var(--size-16);padding:0;transition:color .15s ease-in-out}.np-close-button--large,.np-close-button--x-large{height:24px;height:var(--size-24)}.np-close-button:hover{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-theme-personal .np-close-button{align-items:center;border-radius:50%;border-radius:var(--radius-full);color:var(--color-interactive-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;transition:background-color .1s ease;width:32px;width:var(--size-32)}.np-theme-personal .np-close-button--large{flex-shrink:0;height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-theme-personal .np-close-button--x-large{flex-shrink:0;height:48px;height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-close-button:not(.disabled,:disabled):hover{background-color:var(--color-background-neutral-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-close-button:not(.disabled,:disabled):active{background-color:var(--color-background-neutral-active);color:var(--color-interactive-primary-active)}
1
+ .np-close-button{--ring-outline-offset:0;background:none;border:none;color:#00a2dd;color:var(--color-interactive-accent);height:16px;height:var(--size-16);padding:0;transition:color .15s ease-in-out}.np-close-button--large,.np-close-button--x-large{height:24px;height:var(--size-24)}.np-close-button:hover{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-theme-personal .np-close-button{align-items:center;border-radius:9999px;border-radius:var(--radius-full);color:var(--color-interactive-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;transition:background-color .1s ease;width:32px;width:var(--size-32)}.np-theme-personal .np-close-button--large{flex-shrink:0;height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-theme-personal .np-close-button--x-large{flex-shrink:0;height:48px;height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-close-button:not(.disabled,:disabled):hover{background-color:var(--color-background-neutral-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-close-button:not(.disabled,:disabled):active{background-color:var(--color-background-neutral-active);color:var(--color-interactive-primary-active)}
package/build/styles/dateLookup/DateLookup.css CHANGED
@@ -1 +1 @@
1
- .tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.tw-date-lookup-header-current{font-weight:800;font-weight:var(--font-weight-bold)}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}
1
+ .tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tw-date-lookup-calendar abbr{text-decoration:none}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.tw-date-lookup-header-current{font-weight:800;font-weight:var(--font-weight-bold)}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}
package/build/styles/inputs/Input.css CHANGED
@@ -1 +1 @@
1
- .np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-form-control--shape-rectangle{border-radius:10px;border-radius:var(--radius-small)}
1
+ .np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-input::-moz-placeholder{color:#768e9c;color:var(--color-content-tertiary)}.np-input::placeholder{color:#768e9c;color:var(--color-content-tertiary)}.np-input--shape-rectangle{border-radius:10px!important;border-radius:var(--radius-small)!important}.np-input--shape-pill{border-radius:9999px!important;border-radius:var(--radius-full)!important}
package/build/styles/inputs/InputGroup.css CHANGED
@@ -1 +1 @@
1
- .np-input-group{border-radius:50%;border-radius:var(--radius-full);display:inline-grid;grid-auto-columns:minmax(0,1fr)}.np-input-group>*{grid-column-start:1;grid-row-start:1}.np-input-addon{align-items:center;color:#c9cbce;color:var(--color-interactive-secondary);display:inline-flex;pointer-events:none;transition-duration:.15s;transition-property:color,opacity;transition-timing-function:ease-out;z-index:10}.np-input-group:has(>:is(input,button,select):focus-visible) .np-input-addon{color:var(--color-interactive-primary)}.np-input-group:has(>:is(input,button,select):hover) .np-input-addon{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-input-addon--placement-start{justify-self:start}.np-input-addon--placement-end{justify-self:end}.np-input-addon--interactive>*{pointer-events:auto}.np-input-addon--padding-sm{padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8)}.np-input-addon--padding-md{padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16)}.np-input-addon--padding-md.np-input-addon--placement-start{padding-inline-end:8px;padding-inline-end:var(--size-8)}.np-input-addon--padding-md.np-input-addon--placement-end{padding-inline-start:8px;padding-inline-start:var(--size-8)}
1
+ .np-input-group{border-radius:9999px;border-radius:var(--radius-full);display:inline-grid;grid-auto-columns:minmax(0,1fr)}.np-input-group>*{grid-column-start:1;grid-row-start:1}.np-input-addon{align-items:center;color:#c9cbce;color:var(--color-interactive-secondary);display:inline-flex;pointer-events:none;transition-duration:.15s;transition-property:color,opacity;transition-timing-function:ease-out;z-index:10}.np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive){mix-blend-mode:luminosity;opacity:.45}.np-input-group:has(>:is(input,button,select):focus-visible) .np-input-addon{color:var(--color-interactive-primary)}.np-input-group:has(>:is(input,button,select):hover) .np-input-addon{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-input-addon--placement-start{justify-self:start}.np-input-addon--placement-end{justify-self:end}.np-input-addon--interactive>*{pointer-events:auto}.np-input-addon--padding-sm{padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8)}.np-input-addon--padding-md{padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16)}.np-input-addon--padding-md.np-input-addon--placement-start{padding-inline-end:8px;padding-inline-end:var(--size-8)}.np-input-addon--padding-md.np-input-addon--placement-end{padding-inline-start:8px;padding-inline-start:var(--size-8)}
package/build/styles/inputs/SelectInput.css ADDED
@@ -0,0 +1 @@
1
+ .np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-compact{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:32px;height:var(--size-32);justify-content:center;width:32px;width:var(--size-32)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start-width:1px;height:24px;height:var(--size-24)}
package/build/styles/inputs/TextArea.css CHANGED
@@ -1 +1 @@
1
- .np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-form-control--shape-rectangle{border-radius:10px;border-radius:var(--radius-small)}.np-text-area{min-height:72px;min-height:var(--size-72);overscroll-behavior:none;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}
1
+ .np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-text-area{border-radius:10px!important;border-radius:var(--radius-small)!important;min-height:72px;min-height:var(--size-72);overscroll-behavior:none;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}.np-text-area::-moz-placeholder{color:#768e9c;color:var(--color-content-tertiary)}.np-text-area::placeholder{color:#768e9c;color:var(--color-content-tertiary)}