@modul/mbui 0.0.20-beta-pv-52992-d5155aa6 → 0.0.20-beta-pv-53154-4403aebc

package/dist/index.d.ts

@@ -8,10 +8,10 @@ import { BottomNavigation, BottomNavigationList, BottomNavigationListItem, Botto
 import * as Icon from './Icon';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
 import { AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem } from './Collapsible';
-import { Button, ButtonWidget } from './Button';
+import { Button, buttonVariants, ButtonWidget } from './Button';
 import { Audio } from './Audio';
 import { cn } from './@/lib/utils';
-import { Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent } from './Drawer';
+import { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerTitle } from './Drawer';
 import { Page } from './Page';
 import { Chip } from './Chip';
 import { InputField, InputLabel, InputMask } from './Input';
@@ -19,13 +19,16 @@ import { Alert } from './Alert';
 import { Switch } from './Switch';
 import { Label } from './Label';
 import { Textarea } from './Textarea';
-import { SelectAccountCard, SelectAsync, SelectAccount, Select } from './Select';
+import { SelectAccountCard, SelectAsync } from './Select';
 import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage } from './Form';
 import { Calendar } from './Calendar';
 import { DatePicker } from './DatePicker';
-import { Progress } from "./Progress";
+import { Select } from './Select';
+import { Progress } from './Progress';
 import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './AlertDialog';
 import { MessageTyping } from "./Chat";
 import { FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses } from './FavoritePyments';
 import { DigitKeyPad } from "./DigitKeyPad";
-export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, 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, DigitKeyPad, ButtonWidget, };
+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, };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormMessage = 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.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.ButtonWidget = exports.DigitKeyPad = 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 = void 0;
+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;
 const tslib_1 = require("tslib");
 const Tooltip_1 = require("./Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
@@ -37,6 +37,7 @@ Object.defineProperty(exports, "AccountCollapsibleContent", { enumerable: true,
 Object.defineProperty(exports, "AccountCollapsibleContentItem", { enumerable: true, get: function () { return Collapsible_2.AccountCollapsibleContentItem; } });
 const Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+Object.defineProperty(exports, "buttonVariants", { enumerable: true, get: function () { return Button_1.buttonVariants; } });
 Object.defineProperty(exports, "ButtonWidget", { enumerable: true, get: function () { return Button_1.ButtonWidget; } });
 const Audio_1 = require("./Audio");
 Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return Audio_1.Audio; } });
@@ -45,9 +46,9 @@ Object.defineProperty(exports, "cn", { enumerable: true, get: function () { retu
 const Drawer_1 = require("./Drawer");
 Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return Drawer_1.Drawer; } });
 Object.defineProperty(exports, "DrawerTrigger", { enumerable: true, get: function () { return Drawer_1.DrawerTrigger; } });
-Object.defineProperty(exports, "DrawerTitle", { enumerable: true, get: function () { return Drawer_1.DrawerTitle; } });
 Object.defineProperty(exports, "DrawerClose", { enumerable: true, get: function () { return Drawer_1.DrawerClose; } });
 Object.defineProperty(exports, "DrawerContent", { enumerable: true, get: function () { return Drawer_1.DrawerContent; } });
+Object.defineProperty(exports, "DrawerTitle", { enumerable: true, get: function () { return Drawer_1.DrawerTitle; } });
 const Page_1 = require("./Page");
 Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return Page_1.Page; } });
 const Chip_1 = require("./Chip");
@@ -67,8 +68,6 @@ 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; } });
@@ -81,6 +80,8 @@ 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");
@@ -102,4 +103,10 @@ Object.defineProperty(exports, "FarvoritePaymentDescription", { enumerable: true
 Object.defineProperty(exports, "farvoriteLinkClasses", { enumerable: true, get: function () { return FavoritePyments_1.farvoriteLinkClasses; } });
 const DigitKeyPad_1 = require("./DigitKeyPad");
 Object.defineProperty(exports, "DigitKeyPad", { enumerable: true, get: function () { return DigitKeyPad_1.DigitKeyPad; } });
+const Badge_1 = require("./Badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
+Object.defineProperty(exports, "badgeVariants", { enumerable: true, get: function () { return Badge_1.badgeVariants; } });
+const Toaster_1 = require("./Toaster");
+Object.defineProperty(exports, "Toaster", { enumerable: true, get: function () { return Toaster_1.Toaster; } });
+Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return Toaster_1.toast; } });
 //# sourceMappingURL=index.js.map

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-52992-d5155aa6",
+  "version": "0.0.20-beta-pv-53154-4403aebc",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -45,6 +45,7 @@
     "react-hook-form": "7.53.0",
     "react-imask": "7.6.1",
     "react-select": "5.8.0",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",

package/src/@/config/index.ts

@@ -75,10 +75,15 @@ export default {
 				from: { height: 'var(--radix-accordion-content-height)' },
 				to: { height: '0' },
 			},
+			'caret-blink': {
+				'0%,70%,100%': { opacity: '1' },
+				'20%,50%': { opacity: '0' },
+			},
 		},
 		animation: {
 			'accordion-down': 'accordion-down 0.2s ease-out',
 			'accordion-up': 'accordion-up 0.2s ease-out',
+			'caret-blink': 'caret-blink 1.25s ease-out infinite',
 		},
 	},
 }

package/src/Alert/Alert.tsx

@@ -58,7 +58,7 @@ type TAlertProps = IAlertProps & React.DetailedHTMLProps<React.HTMLAttributes<HT
 const Alert: React.FC<TAlertProps> & IAlertComponents = ({ className, variant = 'info', type, children, ...props }) => {
 	return (
 		<div
-			className={cn('flex', getClass(variant, type))}
+			className={cn('flex', getClass(variant, type), className)}
 			role='alert'
 			{...props}
 		>

package/src/Badge/Badge.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../@/lib/utils'
+
+const badgeClasses = {
+	variant: {
+		base: `
+			inline-block
+			focus:ring-2
+			focus:ring-ring
+			focus:ring-offset-2
+			focus:outline-none
+			transition-colors
+			rounded-full
+			`,
+		default: `
+			bg-critical
+			text-white
+		`,
+	},
+	size: {
+		default: 'size-[16px] text-[10px] text-center leadimg-[1] truncate',
+		dot: 'size-[10px] bg-critical-light border-critical border-[3px]',
+		sm: '',
+		md: '',
+		lg: '',
+	},
+}
+
+const badgeVariants = cva(badgeClasses.variant.base, {
+	variants: {
+		variant: {
+			default: badgeClasses.variant.default,
+		},
+		size: {
+			default: badgeClasses.size.default,
+			dot: badgeClasses.size.dot
+		},
+	},
+	defaultVariants: {
+		variant: 'default',
+		size: 'default',
+	},
+})
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, size, ...props }: BadgeProps) {
+	return (
+		<div
+			className={cn(badgeVariants({ variant, size }), className)}
+			{...props}
+		/>
+	)
+}
+
+export { Badge, badgeVariants }

package/src/Badge/index.ts

@@ -0,0 +1 @@
+export { Badge, badgeVariants } from './Badge'

package/src/Button/Button.tsx

@@ -92,7 +92,7 @@ const buttonVariants = ({ variant, className, icon }: IVariantProps) => {
 				},
 			},
 			defaultVariants: {
-				variant: 'outline',
+				variant: 'primary',
 			},
 		}
 	)({ variant, className })

package/src/FavoritePyments/FavoritePaymentsList.tsx

@@ -10,7 +10,7 @@ const farvoriteLinkClasses: string = `
 `
 
 const FavoritePaymentsList: FC<{children: React.ReactNode}> = ({children}) => {
-	return <ul className="didivide-y">{children}</ul>
+	return <ul className="divide-y">{children}</ul>
 }
 
 const FavoritePaymentsItem: FC<{children: React.ReactNode}> = ({children}) => {

package/src/Input-OTP/Input.tsx

@@ -37,7 +37,7 @@ const InputOTPSlot = React.forwardRef<
 			ref={ref}
 			className={cn(
 				'relative flex h-[48px] w-[20px] items-center justify-center border-b-[2px] border-input transition-all',
-				isActive && 'z-10 ring-2 ring-ring ring-offset-background',
+				isActive && 'border-b-primary',
 				className
 			)}
 			{...props}
@@ -46,7 +46,7 @@ const InputOTPSlot = React.forwardRef<
 			{char}
 			{hasFakeCaret && (
 				<div className="absolute inset-0 flex justify-center items-center pointer-events-none">
-					<div className="bg-foreground w-px h-4 animate-caret-blink duration-1000" />
+					{/* <div className="bg-primary w-[2px] h-[32px] animate-caret-blink duration-1000" /> */}
 				</div>
 			)}
 		</div>

package/src/Page/Page.tsx

@@ -6,7 +6,7 @@ type IProps = {
 	className?: string
 }
 const Navbar: FC<IProps> = ({ children, className }) => {
-	return <div className={cn('flex items-center h-[44px] px-[20px] shrink-0', className)}>{children}</div>
+	return <div className={cn('flex items-center h-[--page-header-height] px-[20px] shrink-0', className)}>{children}</div>
 }
 
 const Content: FC<IProps> = ({ children, className }) => {

package/src/Select/SelectAccountCard.tsx

@@ -5,12 +5,14 @@ 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
@@ -28,6 +30,19 @@ 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 (
@@ -43,6 +58,19 @@ 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,
@@ -95,6 +123,17 @@ 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
@@ -113,6 +152,17 @@ 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,6 +1,167 @@
 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 { colourStyles, Control, DropdownIndicator, IndicatorsContainer, Input, LoadingIndicator, Menu, Option, Placeholder, SingleValue, ValueContainer } from './components'
+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>
+	)
+}
 
 const SelectAsync = ({ ...props }) => (
 	<AsyncSelect