@onewelcome/react-lib-components 0.1.12-alpha → 0.2.2

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 (282) hide show
  1. package/dist/Breadcrumbs/Breadcrumbs.d.ts +4 -4
  2. package/dist/Button/BaseButton.d.ts +4 -4
  3. package/dist/Button/Button.d.ts +3 -3
  4. package/dist/Button/IconButton.d.ts +4 -4
  5. package/dist/ContextMenu/ContextMenu.d.ts +5 -5
  6. package/dist/ContextMenu/ContextMenuItem.d.ts +2 -2
  7. package/dist/DataGrid/DataGrid.d.ts +6 -6
  8. package/dist/DataGrid/DataGridActions/DataGridActions.d.ts +4 -4
  9. package/dist/DataGrid/DataGridActions/DataGridColumnsToggle.d.ts +3 -3
  10. package/dist/DataGrid/DataGridBody/DataGridBody.d.ts +3 -3
  11. package/dist/DataGrid/DataGridBody/DataGridCell.d.ts +2 -2
  12. package/dist/DataGrid/DataGridBody/DataGridRow.d.ts +3 -3
  13. package/dist/DataGrid/DataGridHeader/DataGridHeader.d.ts +3 -3
  14. package/dist/DataGrid/DataGridHeader/DataGridHeaderCell.d.ts +3 -3
  15. package/dist/DataGrid/datagrid.interfaces.d.ts +1 -1
  16. package/dist/Form/Checkbox/Checkbox.d.ts +5 -5
  17. package/dist/Form/Fieldset/Fieldset.d.ts +3 -3
  18. package/dist/Form/Form.d.ts +1 -1
  19. package/dist/Form/FormControl/FormControl.d.ts +3 -3
  20. package/dist/Form/FormGroup/FormGroup.d.ts +5 -5
  21. package/dist/Form/FormHelperText/FormHelperText.d.ts +3 -3
  22. package/dist/Form/FormSelectorWrapper/FormSelectorWrapper.d.ts +6 -6
  23. package/dist/Form/Input/Input.d.ts +5 -5
  24. package/dist/Form/Label/Label.d.ts +2 -2
  25. package/dist/Form/Radio/Radio.d.ts +5 -5
  26. package/dist/Form/Select/Option.d.ts +2 -2
  27. package/dist/Form/Select/Select.d.ts +5 -5
  28. package/dist/Form/Textarea/Textarea.d.ts +6 -6
  29. package/dist/Form/Toggle/Toggle.d.ts +3 -3
  30. package/dist/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.d.ts +4 -4
  31. package/dist/Form/Wrapper/InputWrapper/InputWrapper.d.ts +4 -4
  32. package/dist/Form/Wrapper/RadioWrapper/RadioWrapper.d.ts +4 -4
  33. package/dist/Form/Wrapper/SelectWrapper/SelectWrapper.d.ts +4 -4
  34. package/dist/Form/Wrapper/TextareaWrapper/TextareaWrapper.d.ts +4 -4
  35. package/dist/Form/Wrapper/Wrapper/Wrapper.d.ts +6 -6
  36. package/dist/Form/form.interfaces.d.ts +1 -1
  37. package/dist/Icon/Icon.d.ts +3 -3
  38. package/dist/Link/Link.d.ts +7 -7
  39. package/dist/Notifications/BaseModal/BaseModal.d.ts +4 -4
  40. package/dist/Notifications/BaseModal/BaseModalActions/BaseModalActions.d.ts +2 -2
  41. package/dist/Notifications/BaseModal/BaseModalContent/BaseModalContent.d.ts +2 -2
  42. package/dist/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.d.ts +2 -2
  43. package/dist/Notifications/Dialog/Dialog.d.ts +5 -5
  44. package/dist/Notifications/Dialog/DialogActions/DialogActions.d.ts +3 -3
  45. package/dist/Notifications/Dialog/DialogTitle/DialogTitle.d.ts +2 -2
  46. package/dist/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.d.ts +3 -3
  47. package/dist/Notifications/DiscardChangesModal/DiscardChangesModal.d.ts +7 -7
  48. package/dist/Notifications/Modal/Modal.d.ts +1 -1
  49. package/dist/Notifications/Modal/ModalActions/ModalActions.d.ts +1 -1
  50. package/dist/Notifications/Modal/ModalContent/ModalContent.d.ts +1 -1
  51. package/dist/Notifications/Modal/ModalHeader/ModalHeader.d.ts +1 -1
  52. package/dist/Notifications/SlideInModal/SlideInModal.d.ts +3 -3
  53. package/dist/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.d.ts +3 -3
  54. package/dist/Notifications/Snackbar/SnackbarItem/SnackbarItem.d.ts +2 -2
  55. package/dist/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.d.ts +3 -3
  56. package/dist/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.d.ts +2 -2
  57. package/dist/Notifications/Snackbar/interfaces.d.ts +2 -2
  58. package/dist/Pagination/Pagination.d.ts +3 -3
  59. package/dist/Popover/Popover.d.ts +3 -3
  60. package/dist/Skeleton/Skeleton.d.ts +3 -3
  61. package/dist/StatusIndicator/StatusIndicator.d.ts +5 -5
  62. package/dist/Tabs/Tab.d.ts +1 -1
  63. package/dist/Tabs/TabButton.d.ts +2 -2
  64. package/dist/Tabs/TabPanel.d.ts +2 -2
  65. package/dist/Tabs/Tabs.d.ts +4 -4
  66. package/dist/TextEllipsis/TextEllipsis.d.ts +2 -2
  67. package/dist/Tiles/Tile.d.ts +5 -5
  68. package/dist/Tiles/Tiles.d.ts +2 -2
  69. package/dist/Tooltip/Tooltip.d.ts +3 -3
  70. package/dist/Typography/Typography.d.ts +4 -5
  71. package/dist/Wizard/BaseWizardSteps/BaseWizardSteps.d.ts +2 -2
  72. package/dist/Wizard/Wizard.d.ts +3 -3
  73. package/dist/Wizard/WizardActions/WizardActions.d.ts +2 -2
  74. package/dist/Wizard/WizardStateProvider.d.ts +2 -2
  75. package/dist/Wizard/WizardSteps/WizardSteps.d.ts +2 -2
  76. package/dist/Wizard/wizardStateReducer.d.ts +5 -5
  77. package/dist/_BaseStyling_/BaseStyling.d.ts +2 -1
  78. package/dist/hooks/usePosition.d.ts +4 -4
  79. package/dist/hooks/useRepeater.d.ts +1 -1
  80. package/dist/hooks/useScroll.d.ts +1 -1
  81. package/dist/hooks/useSpacing.d.ts +1 -1
  82. package/dist/hooks/useWrapper.d.ts +1 -1
  83. package/dist/index.d.ts +55 -55
  84. package/dist/react-lib-components.cjs.development.js +677 -580
  85. package/dist/react-lib-components.cjs.development.js.map +1 -1
  86. package/dist/react-lib-components.cjs.production.min.js +1 -1
  87. package/dist/react-lib-components.cjs.production.min.js.map +1 -1
  88. package/dist/react-lib-components.esm.js +677 -580
  89. package/dist/react-lib-components.esm.js.map +1 -1
  90. package/package.json +31 -20
  91. package/src/Breadcrumbs/Breadcrumbs.test.tsx +15 -15
  92. package/src/Breadcrumbs/Breadcrumbs.tsx +11 -11
  93. package/src/Button/BaseButton.module.scss +1 -1
  94. package/src/Button/BaseButton.test.tsx +27 -27
  95. package/src/Button/BaseButton.tsx +8 -8
  96. package/src/Button/Button.module.scss +5 -5
  97. package/src/Button/Button.test.tsx +39 -39
  98. package/src/Button/Button.tsx +10 -10
  99. package/src/Button/IconButton.module.scss +5 -5
  100. package/src/Button/IconButton.test.tsx +29 -29
  101. package/src/Button/IconButton.tsx +11 -11
  102. package/src/ContextMenu/ContextMenu.test.tsx +81 -76
  103. package/src/ContextMenu/ContextMenu.tsx +43 -41
  104. package/src/ContextMenu/ContextMenuItem.module.scss +1 -1
  105. package/src/ContextMenu/ContextMenuItem.tsx +5 -5
  106. package/src/DataGrid/DataGrid.test.tsx +193 -193
  107. package/src/DataGrid/DataGrid.tsx +26 -26
  108. package/src/DataGrid/DataGridActions/DataGridActions.test.tsx +63 -63
  109. package/src/DataGrid/DataGridActions/DataGridActions.tsx +15 -15
  110. package/src/DataGrid/DataGridActions/DataGridColumnsToggle.module.scss +2 -1
  111. package/src/DataGrid/DataGridActions/DataGridColumnsToggle.test.tsx +21 -21
  112. package/src/DataGrid/DataGridActions/DataGridColumnsToggle.tsx +20 -20
  113. package/src/DataGrid/DataGridBody/DataGridBody.test.tsx +40 -40
  114. package/src/DataGrid/DataGridBody/DataGridBody.tsx +10 -10
  115. package/src/DataGrid/DataGridBody/DataGridCell.module.scss +1 -1
  116. package/src/DataGrid/DataGridBody/DataGridCell.test.tsx +25 -25
  117. package/src/DataGrid/DataGridBody/DataGridCell.tsx +6 -6
  118. package/src/DataGrid/DataGridBody/DataGridRow.test.tsx +38 -38
  119. package/src/DataGrid/DataGridBody/DataGridRow.tsx +8 -8
  120. package/src/DataGrid/DataGridHeader/DataGridHeader.module.scss +1 -2
  121. package/src/DataGrid/DataGridHeader/DataGridHeader.test.tsx +119 -119
  122. package/src/DataGrid/DataGridHeader/DataGridHeader.tsx +13 -13
  123. package/src/DataGrid/DataGridHeader/DataGridHeaderCell.module.scss +2 -0
  124. package/src/DataGrid/DataGridHeader/DataGridHeaderCell.test.tsx +51 -51
  125. package/src/DataGrid/DataGridHeader/DataGridHeaderCell.tsx +14 -14
  126. package/src/DataGrid/datagrid.interfaces.ts +1 -1
  127. package/src/Form/Checkbox/Checkbox.test.tsx +74 -74
  128. package/src/Form/Checkbox/Checkbox.tsx +27 -27
  129. package/src/Form/Fieldset/Fieldset.module.scss +1 -1
  130. package/src/Form/Fieldset/Fieldset.test.tsx +35 -35
  131. package/src/Form/Fieldset/Fieldset.tsx +27 -27
  132. package/src/Form/Form.test.tsx +18 -18
  133. package/src/Form/Form.tsx +3 -3
  134. package/src/Form/FormControl/FormControl.test.tsx +22 -22
  135. package/src/Form/FormControl/FormControl.tsx +10 -10
  136. package/src/Form/FormGroup/FormGroup.test.tsx +37 -37
  137. package/src/Form/FormGroup/FormGroup.tsx +16 -16
  138. package/src/Form/FormHelperText/FormHelperText.test.tsx +18 -18
  139. package/src/Form/FormHelperText/FormHelperText.tsx +7 -7
  140. package/src/Form/FormSelectorWrapper/FormSelectorWrapper.test.tsx +15 -15
  141. package/src/Form/FormSelectorWrapper/FormSelectorWrapper.tsx +14 -14
  142. package/src/Form/Input/Input.module.scss +19 -30
  143. package/src/Form/Input/Input.test.tsx +86 -59
  144. package/src/Form/Input/Input.tsx +96 -35
  145. package/src/Form/Label/Label.test.tsx +13 -13
  146. package/src/Form/Label/Label.tsx +6 -6
  147. package/src/Form/Radio/Radio.test.tsx +35 -35
  148. package/src/Form/Radio/Radio.tsx +17 -17
  149. package/src/Form/Select/Option.test.tsx +10 -10
  150. package/src/Form/Select/Option.tsx +8 -8
  151. package/src/Form/Select/Select.module.scss +32 -27
  152. package/src/Form/Select/Select.test.tsx +144 -141
  153. package/src/Form/Select/Select.tsx +79 -78
  154. package/src/Form/Textarea/Textarea.module.scss +8 -17
  155. package/src/Form/Textarea/Textarea.test.tsx +27 -27
  156. package/src/Form/Textarea/Textarea.tsx +33 -13
  157. package/src/Form/Toggle/Toggle.module.scss +1 -1
  158. package/src/Form/Toggle/Toggle.test.tsx +22 -22
  159. package/src/Form/Toggle/Toggle.tsx +10 -10
  160. package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.test.tsx +39 -39
  161. package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.tsx +12 -12
  162. package/src/Form/Wrapper/InputWrapper/InputWrapper.module.scss +2 -8
  163. package/src/Form/Wrapper/InputWrapper/InputWrapper.test.tsx +55 -55
  164. package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx +30 -34
  165. package/src/Form/Wrapper/RadioWrapper/RadioWrapper.test.tsx +35 -35
  166. package/src/Form/Wrapper/RadioWrapper/RadioWrapper.tsx +12 -12
  167. package/src/Form/Wrapper/SelectWrapper/SelectWrapper.test.tsx +55 -55
  168. package/src/Form/Wrapper/SelectWrapper/SelectWrapper.tsx +12 -12
  169. package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss +3 -9
  170. package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.test.tsx +50 -50
  171. package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.tsx +22 -22
  172. package/src/Form/Wrapper/Wrapper/Wrapper.module.scss +2 -2
  173. package/src/Form/Wrapper/Wrapper/Wrapper.test.tsx +11 -11
  174. package/src/Form/Wrapper/Wrapper/Wrapper.tsx +17 -17
  175. package/src/Form/form.interfaces.ts +1 -1
  176. package/src/Icon/Icon.module.scss +71 -71
  177. package/src/Icon/Icon.test.tsx +18 -18
  178. package/src/Icon/Icon.tsx +70 -70
  179. package/src/Link/Link.module.scss +5 -5
  180. package/src/Link/Link.test.tsx +76 -76
  181. package/src/Link/Link.tsx +27 -27
  182. package/src/Link/types.d.ts +1 -1
  183. package/src/Notifications/BaseModal/BaseModal.module.scss +1 -1
  184. package/src/Notifications/BaseModal/BaseModal.test.tsx +53 -53
  185. package/src/Notifications/BaseModal/BaseModal.tsx +16 -16
  186. package/src/Notifications/BaseModal/BaseModalActions/BaseModalActions.test.tsx +13 -13
  187. package/src/Notifications/BaseModal/BaseModalActions/BaseModalActions.tsx +5 -5
  188. package/src/Notifications/BaseModal/BaseModalContent/BaseModalContent.test.tsx +16 -16
  189. package/src/Notifications/BaseModal/BaseModalContent/BaseModalContent.tsx +5 -5
  190. package/src/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.test.tsx +19 -19
  191. package/src/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.tsx +10 -10
  192. package/src/Notifications/Dialog/Dialog.test.tsx +35 -35
  193. package/src/Notifications/Dialog/Dialog.tsx +19 -19
  194. package/src/Notifications/Dialog/DialogActions/DialogActions.test.tsx +14 -14
  195. package/src/Notifications/Dialog/DialogActions/DialogActions.tsx +6 -6
  196. package/src/Notifications/Dialog/DialogTitle/DialogTitle.test.tsx +12 -12
  197. package/src/Notifications/Dialog/DialogTitle/DialogTitle.tsx +6 -6
  198. package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.test.tsx +20 -20
  199. package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.tsx +7 -7
  200. package/src/Notifications/DiscardChangesModal/DiscardChangesModal.test.tsx +36 -36
  201. package/src/Notifications/DiscardChangesModal/DiscardChangesModal.tsx +8 -8
  202. package/src/Notifications/Modal/Modal.test.tsx +6 -6
  203. package/src/Notifications/Modal/Modal.tsx +1 -1
  204. package/src/Notifications/Modal/ModalActions/ModalActions.tsx +2 -2
  205. package/src/Notifications/Modal/ModalContent/ModalContent.tsx +2 -2
  206. package/src/Notifications/Modal/ModalHeader/ModalHeader.tsx +2 -2
  207. package/src/Notifications/SlideInModal/SlideInModal.test.tsx +16 -16
  208. package/src/Notifications/SlideInModal/SlideInModal.tsx +16 -11
  209. package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.test.tsx +16 -16
  210. package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.tsx +6 -6
  211. package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss +15 -15
  212. package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.test.tsx +17 -17
  213. package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx +23 -23
  214. package/src/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.test.tsx +32 -32
  215. package/src/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx +18 -18
  216. package/src/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.tsx +3 -3
  217. package/src/Notifications/Snackbar/interfaces.ts +2 -2
  218. package/src/Notifications/Snackbar/useSnackbar.ts +2 -2
  219. package/src/Pagination/Pagination.module.scss +2 -0
  220. package/src/Pagination/Pagination.test.tsx +47 -47
  221. package/src/Pagination/Pagination.tsx +35 -35
  222. package/src/Popover/Popover.test.tsx +19 -19
  223. package/src/Popover/Popover.tsx +7 -7
  224. package/src/Skeleton/Skeleton.module.scss +2 -2
  225. package/src/Skeleton/Skeleton.test.tsx +29 -29
  226. package/src/Skeleton/Skeleton.tsx +10 -10
  227. package/src/StatusIndicator/StatusIndicator.test.tsx +38 -38
  228. package/src/StatusIndicator/StatusIndicator.tsx +9 -9
  229. package/src/Tabs/Tab.test.tsx +13 -13
  230. package/src/Tabs/Tab.tsx +1 -1
  231. package/src/Tabs/TabButton.test.tsx +28 -28
  232. package/src/Tabs/TabButton.tsx +7 -7
  233. package/src/Tabs/TabPanel.test.tsx +30 -30
  234. package/src/Tabs/TabPanel.tsx +4 -4
  235. package/src/Tabs/Tabs.test.tsx +93 -93
  236. package/src/Tabs/Tabs.tsx +25 -25
  237. package/src/TextEllipsis/TextEllipsis.test.tsx +22 -22
  238. package/src/TextEllipsis/TextEllipsis.tsx +6 -6
  239. package/src/Tiles/Tile.module.scss +1 -1
  240. package/src/Tiles/Tile.test.tsx +42 -42
  241. package/src/Tiles/Tile.tsx +22 -22
  242. package/src/Tiles/Tiles.test.tsx +30 -30
  243. package/src/Tiles/Tiles.tsx +9 -9
  244. package/src/Tooltip/Tooltip.test.tsx +35 -35
  245. package/src/Tooltip/Tooltip.tsx +21 -21
  246. package/src/Typography/Typography.module.scss +1 -1
  247. package/src/Typography/Typography.test.tsx +49 -49
  248. package/src/Typography/Typography.tsx +44 -36
  249. package/src/Wizard/BaseWizardSteps/BaseWizardSteps.module.scss +1 -1
  250. package/src/Wizard/BaseWizardSteps/BaseWizardSteps.test.tsx +26 -26
  251. package/src/Wizard/BaseWizardSteps/BaseWizardSteps.tsx +24 -24
  252. package/src/Wizard/Wizard.test.tsx +56 -56
  253. package/src/Wizard/Wizard.tsx +6 -6
  254. package/src/Wizard/WizardActions/WizardActions.test.tsx +34 -34
  255. package/src/Wizard/WizardActions/WizardActions.tsx +14 -14
  256. package/src/Wizard/WizardStateProvider.tsx +3 -3
  257. package/src/Wizard/WizardSteps/WizardSteps.test.tsx +27 -27
  258. package/src/Wizard/WizardSteps/WizardSteps.tsx +7 -7
  259. package/src/Wizard/wizardStateReducer.ts +9 -9
  260. package/src/_BaseStyling_/BaseStyling.test.tsx +14 -14
  261. package/src/_BaseStyling_/BaseStyling.tsx +51 -49
  262. package/src/hooks/useAnimation.test.tsx +12 -12
  263. package/src/hooks/useAnimation.ts +4 -4
  264. package/src/hooks/useBodyClick.test.tsx +8 -8
  265. package/src/hooks/useBodyClick.ts +3 -3
  266. package/src/hooks/useFormSelector.test.ts +17 -17
  267. package/src/hooks/useFormSelector.ts +4 -4
  268. package/src/hooks/usePosition.test.tsx +215 -215
  269. package/src/hooks/usePosition.ts +68 -68
  270. package/src/hooks/useRepeater.test.tsx +26 -26
  271. package/src/hooks/useRepeater.ts +5 -5
  272. package/src/hooks/useScroll.test.tsx +5 -5
  273. package/src/hooks/useScroll.ts +3 -3
  274. package/src/hooks/useSpacing.test.ts +40 -40
  275. package/src/hooks/useSpacing.ts +3 -3
  276. package/src/hooks/useWrapper.test.ts +12 -12
  277. package/src/hooks/useWrapper.ts +14 -7
  278. package/src/index.ts +67 -67
  279. package/src/mixins.module.scss +76 -27
  280. package/src/types.d.ts +1 -1
  281. package/src/util/helper.test.tsx +25 -25
  282. package/src/util/helper.tsx +64 -64
package/src/Form/Select/Select.module.scss CHANGED
@@ -1,16 +1,14 @@
1
- @import '../../readyclasses.module.scss';
1
+ @import "../../readyclasses.module.scss";
2
2
 
3
3
  $listItemHeight: 2.125rem;
4
4
 
5
5
  .select {
6
- border-color: var(--input-border-color);
7
- border-style: var(--input-border-style);
8
- border-width: var(--input-border-width);
9
- border-radius: var(--input-border-radius);
10
6
  position: relative;
11
7
  box-sizing: border-box;
12
8
  transition: all 0.2s ease-in-out;
13
- background-color: #fff;
9
+ border: 0;
10
+ border-radius: var(--input-border-radius);
11
+ background-color: var(--input-background-color);
14
12
  font-size: var(--font-size);
15
13
 
16
14
  [data-display] {
@@ -22,35 +20,50 @@ $listItemHeight: 2.125rem;
22
20
 
23
21
  .list-wrapper {
24
22
  background: #fff;
25
- opacity: 1;
26
- pointer-events: auto;
27
23
  }
28
24
  }
29
25
 
30
26
  &:not(.expanded) {
31
- button:focus-visible {
32
- outline: 1px solid var(--color-primary);
27
+ button:focus-visible:not(.error) {
28
+ border: var(--input-border-width-focus) solid var(--color-primary);
29
+ padding: 0 calc(1.25rem - var(--input-border-width-focus) + var(--input-border-width));
33
30
  }
34
31
  }
35
32
 
36
- &:hover:not(.disabled):not(.expanded) {
37
- border-color: var(--default);
33
+ &:hover:not(.disabled):not(.expanded):not(.error) {
34
+ button {
35
+ border-color: var(--default);
36
+ border-width: var(--input-border-width);
37
+ }
38
38
  }
39
39
 
40
40
  .custom-select {
41
+ position: relative;
41
42
  width: 100%;
42
- min-height: 4rem;
43
- background-color: transparent;
43
+ min-height: calc(4rem - (2 * var(--input-border-width)));
44
44
  border: 0;
45
- cursor: pointer;
46
45
  padding: 0 1.25rem;
47
- position: relative;
48
- font-size: var(--font-size);
46
+ background-color: transparent;
47
+ border-color: var(--input-border-color);
48
+ border-style: var(--input-border-style);
49
+ border-width: var(--input-border-width);
49
50
  border-radius: var(--input-border-radius);
51
+ font-size: var(--font-size);
52
+ cursor: pointer;
53
+ transition: all 0.2s ease-in-out;
50
54
 
51
55
  &:focus-visible {
52
56
  outline: 0;
53
57
  }
58
+
59
+ &.error {
60
+ border-color: var(--error);
61
+ color: var(--error);
62
+ }
63
+
64
+ &.error:focus-visible {
65
+ border-width: var(--input-border-width-focus);
66
+ }
54
67
  }
55
68
 
56
69
  .list-wrapper {
@@ -64,8 +77,6 @@ $listItemHeight: 2.125rem;
64
77
  top: 0;
65
78
  left: 0;
66
79
  width: 100%;
67
- opacity: 0;
68
- pointer-events: none;
69
80
  overflow: auto;
70
81
  }
71
82
 
@@ -90,7 +101,7 @@ $listItemHeight: 2.125rem;
90
101
  cursor: pointer;
91
102
 
92
103
  &:after {
93
- content: '';
104
+ content: "";
94
105
  position: absolute;
95
106
  top: 0;
96
107
  left: 0;
@@ -120,7 +131,7 @@ $listItemHeight: 2.125rem;
120
131
 
121
132
  .selected-option {
122
133
  &:before {
123
- content: '';
134
+ content: "";
124
135
  position: absolute;
125
136
  top: 0;
126
137
  left: 0;
@@ -135,7 +146,6 @@ $listItemHeight: 2.125rem;
135
146
  position: absolute;
136
147
  top: 50%;
137
148
  transform: translateY(-50%);
138
- left: 1.25rem;
139
149
  pointer-events: none;
140
150
  }
141
151
 
@@ -166,11 +176,6 @@ $listItemHeight: 2.125rem;
166
176
  color: var(--greyed-out);
167
177
  }
168
178
 
169
- .error {
170
- border-color: var(--error);
171
- color: var(--error);
172
- }
173
-
174
179
  .select-search-wrapper + ul {
175
180
  border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
176
181
  }