allow multiline in select options

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.4.9",
+  "version": "1.4.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"

src/lib/components/common/pseudo-checkbox/psuedo-checkbox.module.scss

@@ -1,5 +1,5 @@
 .pseudoCheckbox {
-	@apply tw-relative tw-box-border tw-h-4 tw-w-4 tw-rounded-[3px] tw-border tw-border-solid tw-border-[#9C9C9C];
+	@apply tw-relative tw-box-border tw-h-4 tw-w-4 tw-rounded-[3px] tw-border tw-border-solid tw-border-[#9C9C9C] tw-top-[3px];
 	.checkboxCheckMark {
 		@apply tw-absolute tw-inset-0 tw-w-full;
 		.checkboxCheckMarkPath {

src/lib/components/multi-select/multi-select.module.scss

@@ -36,9 +36,9 @@
 			@apply tw-p-0 tw-m-0;
 		}
 		.optionsList {
-			@apply tw-flex tw-h-[38px] tw-list-none tw-items-center tw-gap-2 tw-px-[10px] tw-py-2 tw-box-border;
+			@apply tw-flex tw-list-none tw-items-start tw-gap-2 tw-px-[10px] tw-py-2 tw-box-border;
 			span {
-				@apply tw-block tw-w-[calc(100%-22px)] tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-text-sm tw-leading-[22px];
+				@apply tw-block tw-w-[calc(100%-22px)] tw-text-sm tw-leading-[22px];
 			}
 			&:hover {
 				@apply tw-bg-[#EEEEEE];

src/lib/components/select/options.tsx

@@ -14,7 +14,7 @@ export const AutoCompleteOptions: FC<Props> = ({ children, setQuery }) => {
       leaveTo="tw-opacity-0"
       afterLeave={() => setQuery('')}
     >
-      <Combobox.Options className="tw-max-h-[210px] tw-w-full tw-overflow-auto tw-bg-white tw-pb-[10px] tw-pt-[10px] tw-text-base tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.5)] focus:tw-outline-none sm:tw-text-sm [&::-webkit-scrollbar-thumb]:tw-rounded-md [&::-webkit-scrollbar-thumb]:tw-bg-[#a9a9a9] [&::-webkit-scrollbar]:tw-w-[6px]">
+      <Combobox.Options className="tw-max-h-[210px] tw-w-full tw-overflow-auto tw-bg-white tw-list-none tw-m-0 tw-px-0 tw-py-[10px] tw-text-base tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.5)] focus:tw-outline-none sm:tw-text-sm [&::-webkit-scrollbar-thumb]:tw-rounded-md [&::-webkit-scrollbar-thumb]:tw-bg-[#a9a9a9] [&::-webkit-scrollbar]:tw-w-[6px]">
         {children}
       </Combobox.Options>
     </Transition>

src/lib/components/select/select-options.tsx

@@ -14,7 +14,7 @@ export const SelectOptions: FC<Props> = ({ children, setQuery }) => {
       leaveTo="tw-opacity-0"
       afterLeave={() => setQuery('')}
     >
-      <Listbox.Options className="tw-max-h-[200px] tw-w-full tw-overflow-auto tw-bg-white tw-pb-[10px] tw-pt-[10px] tw-text-base tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.5)] focus:tw-outline-none sm:tw-text-sm [&::-webkit-scrollbar-thumb]:tw-rounded-md [&::-webkit-scrollbar-thumb]:tw-bg-[#a9a9a9] [&::-webkit-scrollbar]:tw-w-[6px]">
+      <Listbox.Options className="tw-max-h-[200px] tw-w-full tw-overflow-auto tw-bg-white tw-list-none tw-m-0 tw-px-0 tw-py-[10px] tw-text-base tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.5)] focus:tw-outline-none sm:tw-text-sm [&::-webkit-scrollbar-thumb]:tw-rounded-md [&::-webkit-scrollbar-thumb]:tw-bg-[#a9a9a9] [&::-webkit-scrollbar]:tw-w-[6px]">
         {children}
       </Listbox.Options>
     </Transition>