Merge with develop

src/components/Low/Checkbox.tsx

@@ -5,7 +5,7 @@ import {BsCheck} from "react-icons/bs";
 interface Props {
 	isChecked: boolean;
 	onChange: (isChecked: boolean) => void;
-	children: ReactNode;
+	children?: ReactNode;
 	disabled?: boolean;
 }
 

src/components/Low/Select.tsx

@@ -13,9 +13,10 @@ interface Props {
 	isClearable?: boolean;
 	styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
 	className?: string;
+	label?: string;
 }
 
-export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, className}: Props) {
+export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, label, className}: Props) {
 	const [target, setTarget] = useState<HTMLElement>();
 
 	useEffect(() => {
@@ -23,43 +24,46 @@ export default function Select({value, defaultValue, options, placeholder, disab
 	}, []);
 
 	return (
-		<ReactSelect
-			className={
-				styles
-					? undefined
-					: clsx(
-							"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
-							disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
-							className,
-					  )
-			}
-			options={options}
-			value={value}
-			onChange={onChange as any}
-			placeholder={placeholder}
-			menuPortalTarget={target}
-			defaultValue={defaultValue}
-			styles={
-				styles || {
-					menuPortal: (base) => ({...base, zIndex: 9999}),
-					control: (styles) => ({
-						...styles,
-						paddingLeft: "4px",
-						border: "none",
-						outline: "none",
-						":focus": {
-							outline: "none",
-						},
-					}),
-					option: (styles, state) => ({
-						...styles,
-						backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-						color: state.isFocused ? "black" : styles.color,
-					}),
+		<div className="w-full flex flex-col gap-3">
+			{label && <label className="font-normal text-base text-mti-gray-dim">{label}</label>}
+			<ReactSelect
+				className={
+					styles
+						? undefined
+						: clsx(
+								"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+								disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+								className,
+						  )
 				}
-			}
-			isDisabled={disabled}
-			isClearable={isClearable}
-		/>
+				options={options}
+				value={value}
+				onChange={onChange as any}
+				placeholder={placeholder}
+				menuPortalTarget={target}
+				defaultValue={defaultValue}
+				styles={
+					styles || {
+						menuPortal: (base) => ({...base, zIndex: 9999}),
+						control: (styles) => ({
+							...styles,
+							paddingLeft: "4px",
+							border: "none",
+							outline: "none",
+							":focus": {
+								outline: "none",
+							},
+						}),
+						option: (styles, state) => ({
+							...styles,
+							backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+							color: state.isFocused ? "black" : styles.color,
+						}),
+					}
+				}
+				isDisabled={disabled}
+				isClearable={isClearable}
+			/>
+		</div>
 	);
 }

src/components/Low/Separator.tsx

@@ -0,0 +1,3 @@
+const Separator = () => <div className="w-full h-[1px] bg-mti-gray-platinum rounded-full" />;
+
+export default Separator;

src/components/Low/Tooltip.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+import {ReactNode} from "react";
+
+interface Props {
+	tooltip: string;
+	disabled?: boolean;
+	className?: string;
+	children: ReactNode;
+}
+
+export default function Tooltip({tooltip, disabled = false, className, children}: Props) {
+	return (
+		<div className={clsx(!disabled && "tooltip", className)} data-tip={tooltip}>
+			{children}
+		</div>
+	);
+}