@modul/mbui 0.0.20-beta-pv-53154-4403aebc → 0.0.21-beta-test-8a4f2b68

package/dist/index.d.ts

@@ -19,11 +19,10 @@ import { Alert } from './Alert';
 import { Switch } from './Switch';
 import { Label } from './Label';
 import { Textarea } from './Textarea';
-import { SelectAccountCard, SelectAsync } from './Select';
+import { SelectAccountCard, SelectAsync, SelectAccount, Select } from './Select';
 import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage } from './Form';
 import { Calendar } from './Calendar';
 import { DatePicker } from './DatePicker';
-import { Select } from './Select';
 import { Progress } from './Progress';
 import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './AlertDialog';
 import { MessageTyping } from "./Chat";
@@ -31,4 +30,4 @@ import { FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription
 import { DigitKeyPad } from "./DigitKeyPad";
 import { Badge, badgeVariants } from './Badge';
 import { Toaster, toast } from './Toaster';
-export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, buttonVariants, InputField, InputLabel, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, Chip, Progress, Alert, Switch, Label, Textarea, SelectAccountCard, Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage, Calendar, DatePicker, SelectAsync, InputMask, Select, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, MessageTyping, FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses, Badge, badgeVariants, DigitKeyPad, ButtonWidget, Toaster, toast, };
+export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, buttonVariants, InputField, InputLabel, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, Chip, Progress, Alert, Switch, Label, Textarea, SelectAccountCard, SelectAccount, SelectAsync, Select, Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage, Calendar, DatePicker, InputMask, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, MessageTyping, FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses, Badge, badgeVariants, DigitKeyPad, ButtonWidget, Toaster, toast, };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePicker = exports.Calendar = exports.FormMessage = exports.FormDescription = exports.FormControl = exports.FormItem = exports.FormField = exports.FormLabel = exports.Form = exports.SelectAccountCard = exports.Textarea = exports.Label = exports.Switch = exports.Alert = exports.Progress = exports.Chip = exports.Page = exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerContent = exports.DrawerClose = exports.DrawerTitle = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.InputLabel = exports.InputField = exports.buttonVariants = exports.Button = exports.AccountCollapsibleContentItem = exports.AccountCollapsibleContent = exports.AccountCollapsibleTrigger = exports.AccountCollapsibleHeader = exports.AccountCollapsible = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = exports.Logo = exports.Popover = exports.Slider = exports.Tabs = exports.Tooltip = void 0;
-exports.toast = exports.Toaster = exports.ButtonWidget = exports.DigitKeyPad = exports.badgeVariants = exports.Badge = exports.farvoriteLinkClasses = exports.FarvoritePaymentDescription = exports.FavoritePaymentsItem = exports.FavoritePaymentsList = exports.MessageTyping = exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialogDescription = exports.AlertDialogTitle = exports.AlertDialogFooter = exports.AlertDialogHeader = exports.AlertDialogContent = exports.AlertDialogTrigger = exports.AlertDialog = exports.Select = exports.InputMask = exports.SelectAsync = void 0;
+exports.FormDescription = exports.FormControl = exports.FormItem = exports.FormField = exports.FormLabel = exports.Form = exports.Select = exports.SelectAsync = exports.SelectAccount = exports.SelectAccountCard = exports.Textarea = exports.Label = exports.Switch = exports.Alert = exports.Progress = exports.Chip = exports.Page = exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerContent = exports.DrawerClose = exports.DrawerTitle = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.InputLabel = exports.InputField = exports.buttonVariants = exports.Button = exports.AccountCollapsibleContentItem = exports.AccountCollapsibleContent = exports.AccountCollapsibleTrigger = exports.AccountCollapsibleHeader = exports.AccountCollapsible = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = exports.Logo = exports.Popover = exports.Slider = exports.Tabs = exports.Tooltip = void 0;
+exports.toast = exports.Toaster = exports.ButtonWidget = exports.DigitKeyPad = exports.badgeVariants = exports.Badge = exports.farvoriteLinkClasses = exports.FarvoritePaymentDescription = exports.FavoritePaymentsItem = exports.FavoritePaymentsList = exports.MessageTyping = exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialogDescription = exports.AlertDialogTitle = exports.AlertDialogFooter = exports.AlertDialogHeader = exports.AlertDialogContent = exports.AlertDialogTrigger = exports.AlertDialog = exports.InputMask = exports.DatePicker = exports.Calendar = exports.FormMessage = void 0;
 const tslib_1 = require("tslib");
 const Tooltip_1 = require("./Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
@@ -68,6 +68,8 @@ Object.defineProperty(exports, "Textarea", { enumerable: true, get: function ()
 const Select_1 = require("./Select");
 Object.defineProperty(exports, "SelectAccountCard", { enumerable: true, get: function () { return Select_1.SelectAccountCard; } });
 Object.defineProperty(exports, "SelectAsync", { enumerable: true, get: function () { return Select_1.SelectAsync; } });
+Object.defineProperty(exports, "SelectAccount", { enumerable: true, get: function () { return Select_1.SelectAccount; } });
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
 const Form_1 = require("./Form");
 Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
 Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return Form_1.FormLabel; } });
@@ -80,8 +82,6 @@ const Calendar_1 = require("./Calendar");
 Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return Calendar_1.Calendar; } });
 const DatePicker_1 = require("./DatePicker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
-const Select_2 = require("./Select");
-Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_2.Select; } });
 const Progress_1 = require("./Progress");
 Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return Progress_1.Progress; } });
 const AlertDialog_1 = require("./AlertDialog");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.20-beta-pv-53154-4403aebc",
+  "version": "0.0.21-beta-test-8a4f2b68",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -32,7 +32,7 @@
     "@radix-ui/react-select": "2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-switch": "1.1.0",
+    "@radix-ui/react-switch": "1.1.1",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@types/lodash": "4.17.5",

package/src/Icon/icons/Share.tsx

@@ -3,15 +3,15 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgShare = (props: SVGProps<SVGSVGElement>) => (
 	<SvgIcon
-		width={20}
-		height={20}
+		width={24}
+		height={24}
 		fill="none"
-		viewBox="0 0 20 20"
+		viewBox="0 0 24 24"
 		{...props}
 	>
 		<path
 			fill="currentColor"
-			d="M16 18H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h6c.55 0 1 .45 1 1s-.45 1-1 1H4v12h12v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 1.1-.9 2-2 2m1.71-12.71-3-3c-.39-.39-1.03-.39-1.42 0s-.39 1.03 0 1.42l1.3 1.3C10.37 5.23 7 8.73 7 13c0 .55.45 1 1 1s1-.45 1-1c0-3.16 2.45-5.76 5.56-5.98l-1.27 1.27c-.39.39-.39 1.03 0 1.42.41.39 1.02.38 1.42 0l3-3c.39-.39.39-1.03 0-1.42"
+			d="M19 23H5c-1.1 0-2-.9-2-2V10c0-1.1.9-2 2-2h3c.55 0 1 .45 1 1s-.45 1-1 1H5v11h14V10h-3c-.55 0-1-.45-1-1s.45-1 1-1h3c1.1 0 2 .9 2 2v11c0 1.1-.9 2-2 2ZM15.71 4.29l-3-3a.9959.9959 0 0 0-1.41 0l-3 3c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L11 4.41V15c0 .55.45 1 1 1s1-.45 1-1V4.41l1.29 1.29c.39.39 1.02.39 1.41 0 .4-.38.4-1.02.01-1.41Z" 
 		/>
 	</SvgIcon>
 )

package/src/Select/SelectAccount.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react'
+import { CheckSmall } from '../../src/Icon'
+import Select, { components, OptionProps, SingleValueProps, GroupBase, Props } from 'react-select'
+import { cn } from '../@/lib/utils'
+import {
+	colourStyles,
+	Control,
+	DropdownIndicator,
+	IndicatorsContainer,
+	Input,
+	LoadingIndicator,
+	Menu,
+	optionClasses,
+	Placeholder,
+	ValueContainer,
+} from './components'
+
+const Option = ({ children, ...props }: OptionProps) => {
+	const {
+		isSelected,
+		isFocused,
+		isDisabled,
+		// @ts-ignore
+		data: { label, account, balance, cur },
+	} = props
+	return (
+		<components.Option
+			className={cn(optionClasses, 'items-start', { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
+			{...props}
+		>
+			<span className="flex basis-0 grow">
+				<span>
+					<span className="text-[16px`] leading-[1.375]">{label}</span>
+					<br />
+					<span className="text-[12px] text-light">{account}</span>
+				</span>
+				<span className="ml-auto shrink-0">{cur}</span>
+			</span>
+
+			<span className="ml-[16px] shrink-0 size-[24px]">
+				{isSelected && (
+					<CheckSmall
+						width="24"
+						height="24"
+						className="text-primary"
+					/>
+				)}
+			</span>
+		</components.Option>
+	)
+}
+
+const SingleValue = ({ children, ...props }: SingleValueProps) => {
+	const {
+		// @ts-ignore
+		data: { account, cur },
+	} = props
+	return (
+		<components.SingleValue
+			className="col-start-1 col-end-3 row-start-1 row-end-2"
+			{...props}
+		>
+			{account} ({cur})
+		</components.SingleValue>
+	)
+}
+
+type SelectAccountProps<
+	Option,
+	IsMulti extends boolean = false,
+	Group extends GroupBase<Option> = GroupBase<Option>
+> = Props<Option, IsMulti, Group>
+
+function SelectAccount<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
+	props: SelectAccountProps<Option, IsMulti, Group>
+) {
+	return (
+		<Select
+			components={{
+				Control,
+				Option,
+				SingleValue,
+				DropdownIndicator,
+				IndicatorSeparator: () => null,
+				Menu,
+				ValueContainer,
+				Placeholder,
+				Input,
+				LoadingIndicator,
+				IndicatorsContainer,
+			}}
+			styles={colourStyles}
+			unstyled={true}
+			{...props}
+		/>
+	)
+}
+
+SelectAccount.displayName = 'SelectAccount'
+
+export { SelectAccount }

package/src/Select/SelectAccountCard.tsx

@@ -5,14 +5,12 @@ import Select, {
 	ControlProps,
 	OptionProps,
 	DropdownIndicatorProps,
-	StylesConfig,
 	SingleValueProps,
-	MenuProps,
-	ValueContainerProps,
 	Props,
 	GroupBase,
 } from 'react-select'
 import { cn } from '../@/lib/utils'
+import { colourStyles, Menu, optionClasses, ValueContainer } from './components'
 
 const selectTriggerClasses: string = `
 	flex
@@ -30,19 +28,6 @@ const selectTriggerClasses: string = `
 	shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)]
 	cursor-pointer
 `
-
-const colourStyles: StylesConfig = {
-	control: () => ({}),
-	option: () => ({}),
-	input: () => ({}),
-	dropdownIndicator: () => ({}),
-	indicatorsContainer: () => ({}),
-	menu: () => ({}),
-	menuList: () => ({}),
-	singleValue: () => ({}),
-	valueContainer: () => ({}),
-}
-
 const Control = ({ children, ...props }: ControlProps) => {
 	const { isFocused } = props
 	return (
@@ -58,19 +43,6 @@ const Control = ({ children, ...props }: ControlProps) => {
 	)
 }
 
-const optionClasses = `
-	flex
-	items-center
-	py-[16px]
-	px-[12px]
-	w-full
-	first:rounded-t-md
-	last:rounded-b-md
-	cursor-default
-	select-none
-	outline-none
-`
-
 const Option = ({ children, ...props }: OptionProps) => {
 	const {
 		isSelected,
@@ -123,17 +95,6 @@ const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
 	)
 }
 
-const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
-	return (
-		<components.ValueContainer
-			className="flex-1 grid"
-			{...props}
-		>
-			{children}
-		</components.ValueContainer>
-	)
-}
-
 const SingleValue = ({ children, ...props }: SingleValueProps) => {
 	// @ts-ignore
 	const { label, account, balance, cur } = props.data
@@ -152,17 +113,6 @@ const SingleValue = ({ children, ...props }: SingleValueProps) => {
 	)
 }
 
-const Menu = ({ children, ...props }: MenuProps) => {
-	return (
-		<components.Menu
-			className="z-[1] absolute inset-x-0 bg-page shadow-md mt-[8px] rounded-md"
-			{...props}
-		>
-			{children}
-		</components.Menu>
-	)
-}
-
 type SelectAccountCardProps<
 	Option,
 	IsMulti extends boolean = false,

package/src/Select/SelectAsync.tsx

@@ -1,167 +1,6 @@
 import * as React from 'react'
-import { DropdownSmallOld, CheckSmall } from '../../src/Icon'
-import {
-	components,
-	ControlProps,
-	OptionProps,
-	DropdownIndicatorProps,
-	StylesConfig,
-	SingleValueProps,
-	MenuProps,
-	PlaceholderProps,
-	ValueContainerProps,
-	InputProps,
-	LoadingIndicatorProps,
-	IndicatorsContainerProps,
-} from 'react-select'
 import AsyncSelect from 'react-select/async'
-import { cn } from '../@/lib/utils'
-
-const selectTriggerClasses: string = `
-	flex
-	items-center
-	py-[12px]
-	px-[16px]
-	h-[44px]
-	border-[1px]
-	border-input
-	rounded-sm
-	text-left
-	cursor-pointer
-`
-
-const colourStyles: StylesConfig = {
-	control: () => ({}),
-	option: () => ({}),
-	input: () => ({}),
-	dropdownIndicator: () => ({}),
-	indicatorsContainer: () => ({}),
-	menu: () => ({}),
-	menuList: () => ({}),
-	singleValue: () => ({}),
-	valueContainer: () => ({}),
-}
-
-const Input = ({...props }: InputProps) => {
-	return <components.Input className='col-start-1 col-end-3 row-start-1 row-end-2' {...props} />
-}
-
-const Control = ({ children, ...props }: ControlProps) => {
-	const { isFocused } = props
-	return (
-		<components.Control
-			className={cn(selectTriggerClasses, { 'outline outline-primary outline-offset-2 outline-2': isFocused })}
-			{...props}
-		>
-			{children}
-		</components.Control>
-	)
-}
-
-const optionClasses =
-	'flex items-center first:rounded-t-sm last:rounded-b-sm px-[16px] py-[12px] w-full cursor-default select-none outline-none'
-
-const Option = ({ children, ...props }: OptionProps) => {
-	const {
-		isSelected,
-		isFocused,
-		isDisabled,
-	} = props
-	return (
-		<components.Option
-			className={cn(optionClasses, { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
-			{...props}
-		>
-			<span className="flex basis-0 grow">{children}</span>
-
-			<span className="ml-[16px] shrink-0 size-[24px]">
-				{isSelected && (
-					<CheckSmall
-						width="24"
-						height="24"
-						className="text-primary"
-					/>
-				)}
-			</span>
-		</components.Option>
-	)
-}
-
-const IndicatorsContainer = ({ children, ...props }: IndicatorsContainerProps) => {
-	return (
-		<components.IndicatorsContainer className='flex items-center gap-x-[8px] shrink-0' {...props}>
-			{children}
-		</components.IndicatorsContainer>
-	)
-}
-
-const LoadingIndicator = ({...props }: LoadingIndicatorProps) => {
-	return (
-		<components.LoadingIndicator
-			className='text-light shrink-0'
-			{...props}
-		/>
-	)
-}
-
-const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
-	return (
-		<components.DropdownIndicator
-			className="shrink-0"
-			{...props}
-		>
-			<DropdownSmallOld
-				className="text-light"
-				width="12"
-				height="12"
-			/>
-		</components.DropdownIndicator>
-	)
-}
-
-const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
-	return (
-		<components.ValueContainer
-			className="flex-1 grid"
-			{...props}
-		>
-			{children}
-		</components.ValueContainer>
-	)
-}
-
-const SingleValue = ({ children, ...props }: SingleValueProps) => {
-	return (
-		<components.SingleValue
-			className="col-start-1 col-end-3 row-start-1 row-end-2"
-			{...props}
-		>
-			{children}
-		</components.SingleValue>
-	)
-}
-
-const Menu = ({ children, ...props }: MenuProps) => {
-	return (
-		<components.Menu
-			className="z-[1] absolute inset-x-0 bg-page shadow-sm mt-[8px] rounded-sm"
-			{...props}
-		>
-			{children}
-		</components.Menu>
-	)
-}
-
-const Placeholder = ({ children, ...props }: PlaceholderProps) => {
-	return (
-		<components.Placeholder
-			className="col-start-1 col-end-3 row-start-1 row-end-2 text-[16px] text-light truncate"
-			{...props}
-		>
-			{children}
-		</components.Placeholder>
-	)
-}
+import { colourStyles, Control, DropdownIndicator, IndicatorsContainer, Input, LoadingIndicator, Menu, Option, Placeholder, SingleValue, ValueContainer } from './components'
 
 const SelectAsync = ({ ...props }) => (
 	<AsyncSelect

package/src/Select/SelectBase.tsx

@@ -1,169 +1,22 @@
 import * as React from 'react'
 
-import { DropdownSmallOld, CheckSmall } from '../../src/Icon'
-
 import Select, {
-	components,
-	ControlProps,
-	OptionProps,
-	DropdownIndicatorProps,
-	StylesConfig,
-	SingleValueProps,
-	MenuProps,
-	PlaceholderProps,
-	ValueContainerProps,
-	InputProps,
-	LoadingIndicatorProps,
-	IndicatorsContainerProps, GroupBase, Props,
+	GroupBase,
+	Props,
 } from 'react-select'
-
-import { cn } from '../@/lib/utils'
-
-const selectTriggerClasses: string = `
-	flex
-	items-center
-	py-[12px]
-	px-[16px]
-	h-[44px]
-	text-left
-	border-[1px]
-	border-input
-	rounded-sm
-	cursor-pointer
-`
-
-const colourStyles: StylesConfig = {
-	control: () => ({}),
-	option: () => ({}),
-	input: () => ({}),
-	dropdownIndicator: () => ({}),
-	indicatorsContainer: () => ({}),
-	menu: () => ({}),
-	menuList: () => ({}),
-	singleValue: () => ({}),
-	valueContainer: () => ({}),
-}
-
-const Input = ({...props }: InputProps) => {
-	return <components.Input className='col-start-1 col-end-3 row-start-1 row-end-2' {...props} />
-}
-
-const Control = ({ children, ...props }: ControlProps) => {
-	const { isFocused } = props
-	return (
-		<components.Control
-			className={cn(selectTriggerClasses, { 'outline outline-primary outline-offset-2 outline-2': isFocused })}
-			{...props}
-		>
-			{children}
-		</components.Control>
-	)
-}
-
-const optionClasses =
-	'flex items-center first:rounded-t-sm last:rounded-b-sm px-[16px] py-[12px] w-full cursor-default select-none outline-none'
-
-const Option = ({ children, ...props }: OptionProps) => {
-	const {
-		isSelected,
-		isFocused,
-		isDisabled,
-	} = props
-	return (
-		<components.Option
-			className={cn(optionClasses, { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
-			{...props}
-		>
-			<span className="flex basis-0 grow">{children}</span>
-
-			<span className="ml-[16px] shrink-0 size-[24px]">
-				{isSelected && (
-					<CheckSmall
-						width="24"
-						height="24"
-						className="text-primary"
-					/>
-				)}
-			</span>
-		</components.Option>
-	)
-}
-
-const IndicatorsContainer = ({ children, ...props }: IndicatorsContainerProps) => {
-	return (
-		<components.IndicatorsContainer className='flex items-center gap-x-[8px] shrink-0' {...props}>
-			{children}
-		</components.IndicatorsContainer>
-	)
-}
-
-const LoadingIndicator = ({...props }: LoadingIndicatorProps) => {
-	return (
-		<components.LoadingIndicator
-			className='text-light shrink-0'
-			{...props}
-		/>
-	)
-}
-
-const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
-	return (
-		<components.DropdownIndicator
-			className="shrink-0"
-			{...props}
-		>
-			<DropdownSmallOld
-				className="text-light"
-				width="12"
-				height="12"
-			/>
-		</components.DropdownIndicator>
-	)
-}
-
-const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
-	return (
-		<components.ValueContainer
-			className="flex-1 grid"
-			{...props}
-		>
-			{children}
-		</components.ValueContainer>
-	)
-}
-
-const SingleValue = ({ children, ...props }: SingleValueProps) => {
-	return (
-		<components.SingleValue
-			className="col-start-1 col-end-3 row-start-1 row-end-2"
-			{...props}
-		>
-			{children}
-		</components.SingleValue>
-	)
-}
-
-const Menu = ({ children, ...props }: MenuProps) => {
-	return (
-		<components.Menu
-			className="z-[1] absolute inset-x-0 bg-page shadow-sm mt-[8px] rounded-sm"
-			{...props}
-		>
-			{children}
-		</components.Menu>
-	)
-}
-
-const Placeholder = ({ children, ...props }: PlaceholderProps) => {
-	return (
-		<components.Placeholder
-			className="col-start-1 col-end-3 row-start-1 row-end-2 text-[16px] text-light truncate"
-			{...props}
-		>
-			{children}
-		</components.Placeholder>
-	)
-}
+import {
+	colourStyles,
+	Control,
+	DropdownIndicator,
+	IndicatorsContainer,
+	Input,
+	LoadingIndicator,
+	Menu,
+	Placeholder,
+	SingleValue,
+	ValueContainer,
+	Option,
+} from './components'
 
 type SelectBaseProps<
 	Option,
@@ -171,11 +24,9 @@ type SelectBaseProps<
 	Group extends GroupBase<Option> = GroupBase<Option>
 > = Props<Option, IsMulti, Group>
 
-function SelectBase<
-	Option,
-	IsMulti extends boolean = false,
-	Group extends GroupBase<Option> = GroupBase<Option>
->(props: SelectBaseProps<Option, IsMulti, Group>) {
+function SelectBase<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
+	props: SelectBaseProps<Option, IsMulti, Group>
+) {
 	return (
 		<Select
 			components={{
@@ -189,7 +40,7 @@ function SelectBase<
 				Placeholder,
 				Input,
 				LoadingIndicator,
-				IndicatorsContainer
+				IndicatorsContainer,
 			}}
 			styles={colourStyles}
 			unstyled={true}