@modul/mbui 0.0.16-beta-pv-53139-6c26fe1d → 0.0.16-beta-pv-53147-00d3e008

package/src/Button/Button.tsx

@@ -1,142 +1,45 @@
 import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../@/lib/utils'
+import { cn } from '@utils'
 
-const buttonClasses= {
-	variant: {
-		base: `
-			inline-flex 
-			justify-center
-			items-center
-			font-medium
-			border-[2px]
-			whitespace-nowrap
-			transition-colors
-			ring-offset-1
-			focus-visible:ring 
-			focus-visible:outline-none 
-			disabled:pointer-events-none
-			disabled:opacity-[.24]`,
-		primary: `
-			text-btn-primary
-			bg-btn-primary
-			border-btn-primary
-			hover:bg-btn-primary-hover 
-			hover:border-btn-primary-hover
-			focus:bg-btn-primary-focus
-			focus:border-btn-primary-focus
-			active:border-btn-primary-active
-			active:bg-btn-primary-active`,
-		secondary: `
-			text-btn-secondary
-			bg-btn-secondary 
-			border-btn-secondary
-			hover:bg-btn-secondary-hover 
-			hover:border-btn-secondary-hover
-			focus:bg-btn-secondary-focus 
-			focus:border-btn-secondary-focus
-			active:bg-btn-secondary-active 
-			active:border-btn-secondary-active`,
-		success: `
-			text-btn-success
-			bg-btn-success
-			border-btn-success 
-			hover:bg-btn-success-hover
-			active:border-btn-success-active
-			focus:bg-btn-success-focus 
-			focus:border-btn-success-focus 
-			active:bg-btn-success-active 
-			hover:border-btn-success-hover`,
-		primaryOutline: `
-			text-btn-primary-outline
-			bg-btn-primary-outline 
-			border-btn-primary-outline 
-			hover:text-btn-primary-outline-hover
-			hover:bg-btn-primary-outline-hover 
-			hover:border-btn-primary-outline-hover
-			focus:text-btn-primary-outline-focus
-			focus:bg-btn-primary-outline-focus 
-			focus:border-btn-primary-outline-focus
-			active:text-btn-primary-outline-active
-			active:bg-btn-primary-outline-active 
-			active:border-btn-primary-outline-active`,
-		outline: `
-			text-btn-outline
-			border-[1px]
-			border-btn-outline
-			ring-[currentColor]`,
-		ghost: `
-			text-btn-ghost
-			bg-btn-ghost
-			border-transparent
-			hover:bg-btn-ghost-hover
-			focus:bg-btn-ghost-focus 
-			active:bg-btn-ghost-active`,
-		widget: `
-			justify-start
-			h-[72px]
-			w-full p-[16px]
-			space-x-[16px] 
-			text-left
-			rounded-md 
-			shadow-md 
-			border-transparent`,
-	},
-	size: {
-		lg: 'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-[4px]',
-		md: 'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-[4px]',
-		sm: 'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
-		xs: 'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
-		xxs: 'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]',
-		widget: `h-[72px] p-[16px]`
-	}
-}
-
-const buttonVariants = cva(buttonClasses.variant.base, {
-	variants: {
-		variant: {
-			primary: buttonClasses.variant.primary,
-			secondary: buttonClasses.variant.secondary,
-			success: buttonClasses.variant.success,
-			'primary-outline': buttonClasses.variant.primaryOutline,
-			outline: buttonClasses.variant.outline,
-			ghost: buttonClasses.variant.ghost,
-			widget: buttonClasses.variant.widget,
-			// link: 	 'text-primary underline-offset-4 hover:underline',
+const buttonVariants = cva(
+	'inline-flex justify-center items-center border-[2px] disabled:opacity-[.24] focus-visible:ring ring-offset-1 font-medium whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none',
+	{
+		variants: {
+			variant: {
+				primary:
+					'text-btn-primary bg-btn-primary hover:bg-btn-primary-hover focus:bg-btn-primary-focus active:bg-btn-primary-active border-btn-primary hover:border-btn-primary-hover focus:border-btn-primary-focus active:border-btn-primary-active',
+				secondary:
+					'text-btn-secondary bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active',
+				success:
+					'text-btn-success bg-btn-success hover:bg-btn-success-hover focus:bg-btn-success-focus active:bg-btn-success-active border-btn-success hover:border-btn-success-hover focus:border-btn-success-focus active:border-btn-success-active',
+				'primary-outline':
+					'text-btn-primary-outline hover:text-btn-primary-outline-hover focus:text-btn-primary-outline-focus active:text-btn-primary-outline-active bg-btn-primary-outline hover:bg-btn-primary-outline-hover focus:bg-btn-primary-outline-focus active:bg-btn-primary-outline-active border-btn-primary-outline hover:border-btn-primary-outline-hover focus:border-btn-primary-outline-focus active:border-btn-primary-outline-active',
+				outline: 'border-[1px] text-btn-outline border-btn-outline ring-[currentColor]',
+				ghost: 'text-btn-ghost bg-btn-ghost hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active border-transparent',
+			},
+			size: {
+				lg: 'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-[4px]',
+				md: 'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-[4px]',
+				sm: 'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
+				xs: 'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
+				xxs: 'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]',
+			},
 		},
-		size: {
-			lg: buttonClasses.size.lg,
-			md: buttonClasses.size.md,
-			widget: buttonClasses.size.widget,
-			sm: buttonClasses.size.sm,
-			xs: buttonClasses.size.xs,
-			xxs: buttonClasses.size.xxs,
+		defaultVariants: {
+			variant: 'primary',
+			size: 'md',
 		},
-	},
-	defaultVariants: {
-		variant: 'primary',
-		size: 'md',
-	},
-})
-
+	}
+)
 const textVariants = cva(
-	`inline-flex
-	whitespace-nowrap
-	transition-colors
-	rounded-[.25em]
-	focus-visible:outline-current
-	disabled:opacity-[.24]
-	disabled:pointer-events-none`,
+	'inline-flex whitespace-nowrap transition-colors focus-visible:outline-current disabled:opacity-[.24] rounded-[.25em] disabled:pointer-events-none',
 	{
 		variants: {
 			variant: {
 				primary:
-					`text-primary
-					hover:text-primary-hover
-					focus:text-primary-focus
-					active:text-primary-active
-					disabled:pointer-events-none`,
+					'text-primary hover:text-primary-hover focus:text-primary-focus active:text-primary-active disabled:pointer-events-none',
 			},
 		},
 		defaultVariants: {
@@ -153,18 +56,18 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asText = false, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : 'button'
-		// @ts-ignore
-		const classes = asText ? textVariants<any>({ variant, className }) : buttonVariants({ variant, size, className })
-		return (
-			<Comp
-				className={cn(classes)}
-				ref={ref}
-				{...props}
-			/>
-		)
-	}
+  ({ className, variant, size, asText = false, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+	// @ts-ignore
+	const classes = asText ? textVariants<any>({ variant, className }) : buttonVariants({ variant, size, className });
+    return (
+      <Comp
+        className={cn(classes)}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
 )
 
 Button.displayName = 'Button'

package/src/Button/index.ts

@@ -1 +1 @@
-export {Button, buttonVariants} from './Button'
+export { Button, buttonVariants } from './Button'

package/src/Calendar/Calendar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { DayPicker } from 'react-day-picker'
-import { cn } from '../@/lib/utils'
+import { cn } from '@utils'
 import { ru } from 'date-fns/locale'
 
 const daySelectedClasses = 'bg-btn-primary text-btn-primary rounded-sm'

package/src/Chip/Chip.tsx

@@ -1,8 +1,7 @@
-import React, { FC, PropsWithChildren } from 'react'
+import React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Slot } from '@radix-ui/react-slot'
-import { cn } from '../@/lib/utils'
-// import { cn } from "@/lib/utils" порешать с алиасами
+import { cn } from '@utils'
 
 const chipVariants = cva(
 	'inline-flex justify-center items-center border-[2px] disabled:opacity-[.24] rounded-full ring-offset-1 font-medium whitespace-nowrap transition-colors disabled:pointer-events-none',

package/src/Collapsible/AccountCollapsible.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactNode } from 'react'
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
-import { DropdownSmallOld } from '../../src/Icon'
-import { cn } from '../@/lib/utils'
+import { DropdownSmallOld } from '@/Icon'
+import { cn } from '@utils'
 import { Slot } from '@radix-ui/react-slot'
 
 const AccountCollapsible = CollapsiblePrimitive.Root
@@ -28,6 +28,22 @@ const AccountCollapsibleHeader: FC<AccountCollapsibleHeaderProps> = ({ label })
 		</AccountCollapsibleTrigger>
 	)
 }
+
+const accountCollapsibleClasses = `
+	text-left
+	w-full
+	rounded-[4px]
+	px-[12px]
+	py-[16px]
+	bg-btn-secondary
+	border-btn-secondary
+	hover:bg-btn-secondary-hover
+	hover:border-btn-secondary-hover
+	focus:bg-btn-secondary-focus
+	focus:border-btn-secondary-focus
+	active:border-btn-secondary-active
+	active:bg-btn-secondary-active
+`
 const AccountCollapsibleContentItem: FC<AccountCollapsibleContentItemProps> = ({
 	children,
 	asChild = true,
@@ -38,7 +54,7 @@ const AccountCollapsibleContentItem: FC<AccountCollapsibleContentItemProps> = ({
 	return (
 		<Comp
 			className={cn(
-				'text-left w-full rounded-[4px] px-[12px] py-[16px] bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active',
+				accountCollapsibleClasses,
 				className
 			)}
 			{...props}

package/src/DatePicker/DatePicker.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { format } from 'date-fns'
-import { cn } from '../@/lib/utils'
-import { Calendar } from '../Calendar'
-import { Calendar as CalendarIcon } from '../Icon'
-import { Popover } from '../Popover'
+import { cn } from '@utils'
+import { Calendar } from '@/Calendar'
+import { Calendar as CalendarIcon } from '@/Icon'
+import { Popover } from '@/Popover'
 import { ru } from 'date-fns/locale'
 
-const trigegrClasses = 'inline-flex items-center border-input px-[12px] border rounded-sm h-[44px] text-left'
+const trigegrClasses = 'inline-flex items-center px-[12px] h-[44px] text-left border-input border rounded-sm'
 
 interface IProps {
 	mode?: any;

package/src/Drawer/Drawer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Drawer as DrawerPrimitive } from 'vaul'
-import { cn } from '../@/lib/utils'
+import { cn } from '@utils'
 import { useContext } from 'react'
 
 const DrawerContext = React.createContext({direction: 'bottom', modal: false})
@@ -83,6 +83,7 @@ const DrawerContent = React.forwardRef<
 		</DrawerPortal>
 	)
 })
+
 DrawerContent.displayName = 'DrawerContent'
 
 export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose }

package/src/Form/Form.tsx

@@ -2,9 +2,8 @@ import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { Slot } from '@radix-ui/react-slot'
 import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form'
-
-import { cn } from '../@/lib/utils'
-import { Label } from '../Label'
+import { cn } from '@utils'
+import { Label } from '@/Label'
 
 const Form = FormProvider
 
@@ -74,6 +73,7 @@ const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivEl
 		)
 	}
 )
+
 FormItem.displayName = 'FormItem'
 
 const FormLabel = React.forwardRef<
@@ -91,6 +91,7 @@ const FormLabel = React.forwardRef<
 		/>
 	)
 })
+
 FormLabel.displayName = 'FormLabel'
 
 const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
@@ -108,6 +109,7 @@ const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.Compon
 		)
 	}
 )
+
 FormControl.displayName = 'FormControl'
 
 const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(

package/src/Icon/icons/InfoSolid.tsx

@@ -10,7 +10,7 @@ const SvgInfoSolid = (props: SVGProps<SVGSVGElement>) => (
 		{...props}
 	>
 		<path
-			fill="#4971D0"
+			fill="currentColor"
 			d="M10 1.003c-4.96 0-9 4.04-9 9s4.04 9 9 9 9-4.04 9-9-4.04-9-9-9m1 13c0 .55-.45 1-1 1s-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1zm-1-6.8c-.66 0-1.2-.54-1.2-1.2s.54-1.2 1.2-1.2 1.2.54 1.2 1.2-.54 1.2-1.2 1.2"
 		/>
 	</SvgIcon>

package/src/Input/Input.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../@/lib/utils'
+import { cn } from '@utils'
 
 const InputLabel = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
 	({ className, children, ...props }) => {

package/src/Input/InputMask.tsx

@@ -1,7 +1,28 @@
 import * as React from 'react'
 import { IMaskInput } from 'react-imask'
 
-const inputClasses = 'form-input border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-sm focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed'
+const inputClasses = `
+	form-input
+	leading-[1.17]
+	font-normal
+	border
+	border-input
+	rounded-sm
+	w-full
+	h-[44px]
+	bg-transparent
+	file:bg-transparent
+	file:text-sm
+	file:font-medium
+	file:border-0
+	focus-visible:ring-1 
+	focus-visible:ring-ring
+	disabled:cursor-not-allowed
+	disabled:opacity-50
+	placeholder:text-muted-foreground
+	transition-colors
+	focus-visible:outline-none
+	`
 
 const InputMask: React.FC = ({ ...props }) => {
 	return (

package/src/Input-OTP/Input.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { OTPInput, OTPInputContext } from 'input-otp'
-import { cn } from '../@/lib/utils'
-// import { cn } from "@/lib/utils" порешать с алиасами
+import { cn } from '@utils'
 
 const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
 	({ className, containerClassName, ...props }, ref) => (

package/src/Label/Label.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../@/lib/utils'
+import { cn } from '@utils'
 
 const labelVariants = cva('peer-disabled:opacity-70 peer-disabled:cursor-not-allowed')
 

package/src/Page/Page.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { cn } from '../@/lib/utils'
+import { cn } from '@utils'
 
 type IProps = {
 	children?: React.ReactNode

package/src/Popover/Popover.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import {PopoverPortalProps, PopoverProps} from "@radix-ui/react-popover";
 
@@ -17,6 +17,28 @@ const PopoverPortal: React.FC<PopoverPortalProps> = ({ children, ...props }) =>
 	<PopoverPrimitive.Portal {...props}>{children}</PopoverPrimitive.Portal>
 )
 
+const popoverContentClasses = `
+	z-50
+	w-72
+	p-4
+	text-popover-foreground
+	bg-popover
+	border
+	rounded-md
+	shadow-md
+	outline-none
+	data-[state=open]:animate-in
+	data-[state=closed]:animate-out
+	data-[state=closed]:fade-out-0
+	data-[state=open]:fade-in-0
+	data-[state=closed]:zoom-out-95
+	data-[state=open]:zoom-in-95
+	data-[side=bottom]:slide-in-from-top-2
+	data-[side=left]:slide-in-from-right-2
+	data-[side=right]:slide-in-from-left-2
+	data-[side=top]:slide-in-from-bottom-2
+`
+
 const PopoverContent = React.forwardRef<
 	React.ElementRef<typeof PopoverPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -26,7 +48,7 @@ const PopoverContent = React.forwardRef<
 		align={align}
 		sideOffset={sideOffset}
 		className={cn(
-			'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			popoverContentClasses,
 			className
 		)}
 		{...props}

package/src/Progress/Progress.tsx

@@ -1,7 +1,15 @@
 import * as React from 'react'
 import * as ProgressPrimitive from '@radix-ui/react-progress'
+import { cn } from '@utils'
 
-import { cn } from '../@/lib/utils'
+const progessClasses = `
+	relative
+	w-full
+	h-[--progress-height]
+	bg-[--progress-bg]
+	rounded-full
+	overflow-hidden
+`
 
 const Progress = React.forwardRef<
 	React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -9,11 +17,11 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
 	<ProgressPrimitive.Root
 		ref={ref}
-		className={cn('relative h-[--progress-height] w-full overflow-hidden rounded-full bg-[--progress-bg]', className)}
+		className={cn(progessClasses, className)}
 		{...props}
 	>
 		<ProgressPrimitive.Indicator
-			className="bg-primary rounded-full w-full h-full transition-all"
+			className="bg-primary rounded-full transition-all size-full"
 			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 		/>
 	</ProgressPrimitive.Root>

package/src/Select/Select.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { SelectBase } from './SelectBase'
-import {GroupBase, Props} from "react-select";
+import { GroupBase, Props } from "react-select";
 
 type SelectBaseProps<
 	Option,

package/src/Select/SelectAccountCard.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react'
-
-import { DropdownSmallOld, CheckSmall } from '../Icon'
-
+import { DropdownSmallOld, CheckSmall } from '@/Icon'
 import Select, {
 	components,
 	ControlProps,
@@ -14,11 +12,24 @@ import Select, {
 	Props,
 	GroupBase,
 } from 'react-select'
-
-import { cn } from '../@/lib/utils'
-
-const selectTriggerClasses: string =
-	'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white cursor-pointer'
+import { cn } from '@utils'
+
+const selectTriggerClasses: string = `
+	flex
+	items-center
+	py-[8px]
+	px-[16px]
+	min-h-[80px]
+	border-none
+	rounded-md
+	text-left
+	text-white
+	bg-gradient-to-r
+	from-[--cl-blue-3]
+	to-primary
+	shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)]
+	cursor-pointer
+`
 
 const colourStyles: StylesConfig = {
 	control: () => ({}),
@@ -47,8 +58,18 @@ const Control = ({ children, ...props }: ControlProps) => {
 	)
 }
 
-const optionClasses =
-	'flex items-center first:rounded-t-md last:rounded-b-md px-[12px] py-[16px] w-full cursor-default select-none outline-none'
+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 {
@@ -74,7 +95,7 @@ const Option = ({ children, ...props }: OptionProps) => {
 				</span>
 			</span>
 
-			<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
+			<span className="ml-[16px] shrink-0 size-[24px]">
 				{isSelected && (
 					<CheckSmall
 						width="24"

package/src/Select/SelectAsync.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react'
-
-import { DropdownSmallOld, CheckSmall } from '../Icon'
-
+import { DropdownSmallOld, CheckSmall } from '@/Icon'
 import {
 	components,
 	ControlProps,
@@ -16,13 +14,21 @@ import {
 	LoadingIndicatorProps,
 	IndicatorsContainerProps,
 } from 'react-select'
-
 import AsyncSelect from 'react-select/async'
-
-import { cn } from '../@/lib/utils'
-
-const selectTriggerClasses: string =
-	'flex items-center border-[1px] border-input rounded-sm h-[44px] text-left px-[16px] py-[12px] cursor-pointer'
+import { cn } from '@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: () => ({}),
@@ -68,7 +74,7 @@ const Option = ({ children, ...props }: OptionProps) => {
 		>
 			<span className="flex basis-0 grow">{children}</span>
 
-			<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
+			<span className="ml-[16px] shrink-0 size-[24px]">
 				{isSelected && (
 					<CheckSmall
 						width="24"

package/src/Select/SelectBase.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { DropdownSmallOld, CheckSmall } from '../Icon'
+import { DropdownSmallOld, CheckSmall } from '@/Icon'
 
 import Select, {
 	components,
@@ -17,10 +17,20 @@ import Select, {
 	IndicatorsContainerProps, GroupBase, Props,
 } from 'react-select'
 
-import { cn } from '../@/lib/utils'
-
-const selectTriggerClasses: string =
-	'flex items-center border-[1px] border-input rounded-sm h-[44px] text-left px-[16px] py-[12px] cursor-pointer'
+import { cn } from '@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: () => ({}),
@@ -66,7 +76,7 @@ const Option = ({ children, ...props }: OptionProps) => {
 		>
 			<span className="flex basis-0 grow">{children}</span>
 
-			<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
+			<span className="ml-[16px] shrink-0 size-[24px]">
 				{isSelected && (
 					<CheckSmall
 						width="24"