@modul/mbui 0.0.16-beta-pv-53139-88618ef5 → 0.0.17-beta-pv-53151-c7f612b9

package/src/Button/Button.tsx

@@ -3,140 +3,43 @@ import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../@/lib/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/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" порешать с алиасами
 
 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

@@ -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 { Calendar } from '../../src/Calendar'
+import { Calendar as CalendarIcon } from '../../src/Icon'
+import { Popover } from '../../src/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

@@ -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 { Label } from '../../src/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/SvgIcon.tsx

@@ -11,7 +11,7 @@ import * as React from "react"
 //   'large': 35,
 // }
 
-const size = 20
+const size = 24
 
 export interface SvgIconProps {
 	children: any,

package/src/Icon/icons/ArrowLeft.tsx

@@ -6,11 +6,12 @@ const SvgArrowLeft = (props: SVGProps<SVGSVGElement>) => (
 		width={24}
 		height={24}
 		fill="none"
+		viewBox="0 0 24 24"
 		{...props}
 	>
 		<path
 			fill="currentColor"
-			d="M21.5 10.5H6.12l3.94-3.939A1.5 1.5 0 1 0 7.938 4.44l-6.5 6.5a1.5 1.5 0 0 0 0 2.121l6.5 6.5a1.5 1.5 0 1 0 2.12-2.121L6.121 13.5H21.5a1.5 1.5 0 1 0 0-3Z"
+			d="M21.6 12c0 .66-.54 1.2-1.2 1.2H6.5l3.95 3.95c.47.47.47 1.24 0 1.7-.48.46-1.21.47-1.7 0l-6-6a1.21 1.21 0 0 1 0-1.7l6-6a1.21 1.21 0 0 1 1.7 0c.47.47.47 1.24 0 1.7L6.5 10.8H20.4c.66 0 1.2.54 1.2 1.2Z"
 		/>
 	</SvgIcon>
 )

package/src/Icon/icons/ArrowRight.tsx

@@ -3,15 +3,15 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgArrowRight = (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="m17.71 10.712-5 5c-.4.38-1.01.39-1.42 0-.39-.39-.39-1.03 0-1.42l3.3-3.29H3c-.55 0-1-.45-1-1s.45-1 1-1h11.59l-3.3-3.29c-.39-.39-.39-1.03 0-1.42s1.03-.39 1.42 0l5 5c.39.39.39 1.03 0 1.42"
+			d="m21.25 12.85-6 6c-.48.46-1.21.47-1.7 0a1.21 1.21 0 0 1 0-1.7l3.96-3.95H3.6A1.2 1.2 0 0 1 2.4 12c0-.66.54-1.2 1.2-1.2h13.9l-3.95-3.95a1.21 1.21 0 0 1 0-1.7 1.21 1.21 0 0 1 1.7 0l6 6c.47.47.47 1.24 0 1.7Z"
 		/>
 	</SvgIcon>
 )

package/src/Icon/icons/Atm.tsx

@@ -3,15 +3,15 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgAtm = (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="M17 2H3c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h1v6c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-6h1c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M6 7h2v9H6zm8 9h-4V7h4zm3-8h-1V6c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1v2H3V4h14zm-4 5v1c0 .55-.45 1-1 1s-1-.45-1-1v-1c0-.55.45-1 1-1s1 .45 1 1"
+			d="M20.4 2.4H3.6a2.4 2.4 0 0 0-2.4 2.4v4.8A2.4 2.4 0 0 0 3.6 12h1.2v7.2a2.4 2.4 0 0 0 2.4 2.4h9.6a2.4 2.4 0 0 0 2.4-2.4V12h1.2a2.4 2.4 0 0 0 2.4-2.4V4.8a2.4 2.4 0 0 0-2.4-2.4Zm-13.2 6h2.4v10.8H7.2V8.4Zm9.6 10.8H12V8.4h4.8v10.8Zm3.6-9.6h-1.2V7.2c0-.66-.54-1.2-1.2-1.2H6c-.66 0-1.2.54-1.2 1.2v2.4H3.6V4.8h16.8v4.8Zm-4.8 6v1.2c0 .66-.54 1.2-1.2 1.2a1.2 1.2 0 0 1-1.2-1.2v-1.2c0-.66.54-1.2 1.2-1.2.66 0 1.2.54 1.2 1.2Z"
 		/>
 	</SvgIcon>
 )

package/src/Icon/icons/Call.tsx

@@ -3,16 +3,16 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgCall = (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="M14.2 19c-.354 0-.705-.06-1.038-.18A21.22 21.22 0 0 1 1.182 6.836 3.09 3.09 0 0 1 1.9 3.625l2.03-2.033A2 2 0 0 1 5.357 1a2.01 2.01 0 0 1 1.43.594L9.7 4.5a2.03 2.03 0 0 1 0 2.866l-1 .992a5.4 5.4 0 0 0 2.942 2.942l1-.994a2.074 2.074 0 0 1 2.866 0l2.9 2.9a2.025 2.025 0 0 1 0 2.866l-2.03 2.028a3.07 3.07 0 0 1-2.178.9M3.064 6.16a19.08 19.08 0 0 0 10.777 10.776 1.08 1.08 0 0 0 1.122-.247l2.03-2.029-2.9-2.94-1.493 1.451a1 1 0 0 1-1.024.241A7.52 7.52 0 0 1 6.59 8.425 1 1 0 0 1 6.83 7.4l1.451-1.45-2.9-2.941-2.07 2.03a1.08 1.08 0 0 0-.247 1.121"
+			d="M17.04 22.8a3.7 3.7 0 0 1-1.25-.22A25.46 25.46 0 0 1 1.42 8.2a3.7 3.7 0 0 1 .86-3.85l2.44-2.44a2.4 2.4 0 0 1 3.42 0l3.5 3.49a2.44 2.44 0 0 1 0 3.44l-1.2 1.19a6.5 6.5 0 0 0 3.53 3.53l1.2-1.2a2.49 2.49 0 0 1 3.44 0l3.48 3.49a2.43 2.43 0 0 1 0 3.44l-2.44 2.43a3.69 3.69 0 0 1-2.61 1.08ZM3.68 7.4A22.9 22.9 0 0 0 16.6 20.31a1.3 1.3 0 0 0 1.35-.3l2.43-2.43-3.48-3.53-1.79 1.75a1.2 1.2 0 0 1-1.23.28 9.02 9.02 0 0 1-5.98-5.98 1.2 1.2 0 0 1 .29-1.23l1.74-1.74-3.48-3.53-2.49 2.44a1.3 1.3 0 0 0-.3 1.34Z"
 		/>
 	</SvgIcon>
 )
-export default SvgCall
+export default SvgCall

package/src/Icon/icons/Cancel.tsx

@@ -3,16 +3,16 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgCancel = (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="M10 19c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9m0-16c-3.86 0-7 3.14-7 7s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7m1.41 7 1.29-1.29a.996.996 0 1 0-1.41-1.41L10 8.59 8.71 7.3A.996.996 0 1 0 7.3 8.71L8.59 10 7.3 11.29a.996.996 0 1 0 1.41 1.41L10 11.41l1.29 1.29a.996.996 0 1 0 1.41-1.41z"
+			d="m12 22.8c-5.95 0-10.8-4.85-10.8-10.8s4.85-10.8 10.8-10.8 10.8 4.85 10.8 10.8-4.85 10.8-10.8 10.8zm0-19.2a8.4 8.4 0 0 0 0 16.8 8.4 8.4 0 0 0 0-16.8zm1.7 8.4 1.54-1.55a1.2 1.2 0 1 0 -1.7-1.69l-1.54 1.55-1.55-1.55a1.2 1.2 0 1 0 -1.69 1.7l1.55 1.54-1.55 1.55a1.2 1.2 0 1 0 1.7 1.69l1.54-1.55 1.55 1.55a1.2 1.2 0 1 0 1.69-1.7l-1.55-1.54z"
 		/>
 	</SvgIcon>
 )
-export default SvgCancel
+export default SvgCancel

package/src/Icon/icons/Card.tsx

@@ -3,15 +3,15 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgCard = (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="M17 3H3c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2M3 5h14v2H3zm14 10H3V9h14z"
+			d="M20.4 3.6H3.6A2.4 2.4 0 0 0 1.2 6v12a2.4 2.4 0 0 0 2.4 2.4h16.8a2.4 2.4 0 0 0 2.4-2.4V6a2.4 2.4 0 0 0-2.4-2.4ZM3.6 6h16.8v2.4H3.6V6Zm16.8 12H3.6v-7.2h16.8V18Z"
 		/>
 	</SvgIcon>
 )

package/src/Icon/icons/Change.tsx

@@ -3,15 +3,15 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgChange = (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="M6 13.003v3c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1s.45-1 1-1h.51a8.97 8.97 0 0 1-1.51-5c0-4.96 4.04-9 9-9 .55 0 1 .45 1 1s-.45 1-1 1c-3.86 0-7 3.14-7 7 0 1.29.35 2.52 1 3.59v-.59c0-.55.45-1 1-1s1 .45 1 1m12-8c.55 0 1-.45 1-1s-.45-1-1-1h-3c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1s1-.45 1-1v-.59c.65 1.08 1 2.31 1 3.59 0 3.86-3.14 7-7 7-.55 0-1 .45-1 1s.45 1 1 1c4.96 0 9-4.04 9-9 0-1.81-.53-3.53-1.51-5z"
+			d="m7.2 15.6v3.6c0 .66-.54 1.2-1.2 1.2h-3.6a1.2 1.2 0 0 1 -1.2-1.2c0-.66.54-1.2 1.2-1.2h.61a10.82 10.82 0 0 1 8.99-16.8c.66 0 1.2.54 1.2 1.2s-.54 1.2-1.2 1.2a8.4 8.4 0 0 0 -7.2 12.71v-.7c0-.67.54-1.2 1.2-1.2s1.2.53 1.2 1.2zm14.4-9.6c.66 0 1.2-.54 1.2-1.2s-.54-1.2-1.2-1.2h-3.6c-.66 0-1.2.54-1.2 1.2v3.6c0 .66.54 1.2 1.2 1.2s1.2-.54 1.2-1.2v-.7a8.4 8.4 0 0 1 -7.2 12.7c-.66 0-1.2.54-1.2 1.2s.54 1.2 1.2 1.2a10.82 10.82 0 0 0 8.99-16.8z"
 		/>
 	</SvgIcon>
 )

package/src/Icon/icons/Check.tsx

@@ -3,16 +3,16 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgCheck = (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="M7 16c-.26 0-.51-.1-.71-.29l-5-5A.996.996 0 1 1 2.7 9.3l4.29 4.29L17.28 3.3a.996.996 0 1 1 1.41 1.41l-11 11c-.18.19-.43.29-.69.29"
+			d="M8.4 19.2c-.31 0-.61-.12-.85-.35l-6-6a1.2 1.2 0 1 1 1.69-1.69l5.15 5.15L20.74 3.96a1.2 1.2 0 1 1 1.69 1.7l-13.2 13.2c-.22.22-.52.34-.83.34Z"
 		/>
 	</SvgIcon>
 )
-export default SvgCheck
+export default SvgCheck

package/src/Icon/icons/CheckCircleSolid.tsx

@@ -3,16 +3,16 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgCheckCircleSolid = (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="M10 1a9 9 0 1 0 .001 18.001A9 9 0 0 0 10 1m4.21 7.21-4.5 4.5c-.2.2-.45.29-.71.29s-.51-.1-.71-.29l-2.5-2.5A.996.996 0 1 1 7.2 8.8l1.79 1.79 3.79-3.79a.996.996 0 0 1 1.41 0c.39.39.41 1.02.02 1.41"
+			d="m12 1.2a10.8 10.8 0 1 0 0 21.6 10.8 10.8 0 0 0 0-21.6zm5.05 8.65-5.4 5.4c-.24.24-.54.35-.85.35s-.61-.12-.85-.35l-3-3a1.2 1.2 0 1 1 1.69-1.69l2.15 2.15 4.55-4.55a1.2 1.2 0 0 1 1.69 0c.47.47.49 1.22.02 1.7z"
 		/>
 	</SvgIcon>
 )
-export default SvgCheckCircleSolid
+export default SvgCheckCircleSolid

package/src/Icon/icons/Clock.tsx

@@ -6,11 +6,12 @@ const SvgClock = (props: SVGProps<SVGSVGElement>) => (
 		width={24}
 		height={24}
 		fill="none"
+		viewBox="0 0 24 24"
 		{...props}
 	>
 		<path
 			fill="currentColor"
-			d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm4.9 15.45a1 1 0 0 1-1.35.44l-4-2A1 1 0 0 1 11 13V7a1 1 0 1 1 2 0v5.38l3.45 1.73c.5.24.7.84.45 1.34Z"
+			d="m16.26 13.4-3.06-2.04v-4.16c0-.66-.54-1.2-1.2-1.2s-1.2.54-1.2 1.2v4.8c0 .42.22.8.54 1l3.6 2.4c.52.37 1.28.22 1.66-.34.37-.54.21-1.3-.34-1.66zm-4.26 9.4c-5.95 0-10.8-4.85-10.8-10.8s4.85-10.8 10.8-10.8 10.8 4.85 10.8 10.8-4.85 10.8-10.8 10.8zm0-19.2a8.4 8.4 0 0 0 0 16.8 8.4 8.4 0 0 0 0-16.8z"
 		/>
 	</SvgIcon>
 )

package/src/Icon/icons/ClockSolid.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgClockSolid = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={24}
+		height={24}
+		fill="none"
+		viewBox="0 0 24 24"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="m12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.895 15.447c-.246.491-.843.695-1.342.447l-4-2c-.339-.169-.553-.515-.553-.894v-6c0-.553.447-1 1-1s1 .447 1 1v5.382l3.447 1.724c.494.247.695.847.448 1.341z"
+		/>
+	</SvgIcon>
+)
+export default SvgClockSolid

package/src/Icon/icons/Close.tsx

@@ -3,16 +3,16 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgClose = (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="#777C87"
-			d="m11.41 10 5.29-5.29a.996.996 0 1 0-1.41-1.41L10 8.59 4.71 3.3A.996.996 0 1 0 3.3 4.71L8.59 10 3.3 15.29a.996.996 0 1 0 1.41 1.41L10 11.41l5.29 5.29a.996.996 0 1 0 1.41-1.41z"
+			fill="currentColor"
+			d="m13.7 12 6.34-6.35a1.2 1.2 0 1 0-1.7-1.69L12 10.31 5.65 3.96a1.2 1.2 0 1 0-1.69 1.7L10.31 12l-6.35 6.35a1.2 1.2 0 1 0 1.7 1.69L12 13.69l6.35 6.35a1.2 1.2 0 1 0 1.69-1.7L13.69 12Z"
 		/>
 	</SvgIcon>
 )
-export default SvgClose
+export default SvgClose

package/src/Icon/icons/Copy.tsx

@@ -3,16 +3,16 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgCopy = (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="M11 19H3c-1.1 0-2-.9-2-2V9c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2M3 9v8h8V9zm16 2V3c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v1c0 .55.45 1 1 1s1-.45 1-1V3h8v8h-1c-.55 0-1 .45-1 1s.45 1 1 1h1c1.1 0 2-.9 2-2"
+			d="m13.2 22.8h-9.6a2.4 2.4 0 0 1 -2.4-2.4v-9.6a2.4 2.4 0 0 1 2.4-2.4h9.6a2.4 2.4 0 0 1 2.4 2.4v9.6a2.4 2.4 0 0 1 -2.4 2.4zm-9.6-12v9.6h9.6v-9.6zm19.2 2.4v-9.6a2.4 2.4 0 0 0 -2.4-2.4h-9.6a2.4 2.4 0 0 0 -2.4 2.4v1.2c0 .66.54 1.2 1.2 1.2s1.2-.54 1.2-1.2v-1.2h9.6v9.6h-1.2c-.66 0-1.2.54-1.2 1.2s.54 1.2 1.2 1.2h1.2a2.4 2.4 0 0 0 2.4-2.4z"
 		/>
 	</SvgIcon>
 )
-export default SvgCopy
+export default SvgCopy

package/src/Icon/icons/Doc.tsx

@@ -3,16 +3,16 @@ import type { SVGProps } from 'react'
 import { SvgIcon } from '../SvgIcon'
 const SvgDoc = (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.71 5.29-4-4C12.52 1.11 12.27 1 12 1H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6c0-.27-.11-.52-.29-.71M14.59 6H12V3.41zM5 17V3h5v3c0 1.1.9 2 2 2h3v9zm8-6c0 .55-.45 1-1 1H8c-.55 0-1-.45-1-1s.45-1 1-1h4c.55 0 1 .45 1 1m-2 3c0 .55-.45 1-1 1H8c-.55 0-1-.45-1-1s.45-1 1-1h2c.55 0 1 .45 1 1"
+			d="m20.05 6.35-4.8-4.8a1.24 1.24 0 0 0-.85-.35H6a2.4 2.4 0 0 0-2.4 2.4v16.8A2.4 2.4 0 0 0 6 22.8h12a2.4 2.4 0 0 0 2.4-2.4V7.2c0-.32-.13-.62-.35-.85Zm-2.54.85H14.4V4.1l3.1 3.1ZM6 20.4V3.6h6v3.6a2.4 2.4 0 0 0 2.4 2.4H18v10.8H6Zm9.6-7.2c0 .66-.54 1.2-1.2 1.2H9.6a1.2 1.2 0 0 1-1.2-1.2c0-.66.54-1.2 1.2-1.2h4.8c.66 0 1.2.54 1.2 1.2Zm-2.4 3.6c0 .66-.54 1.2-1.2 1.2H9.6a1.2 1.2 0 0 1-1.2-1.2c0-.66.54-1.2 1.2-1.2H12c.66 0 1.2.54 1.2 1.2Z"
 		/>
 	</SvgIcon>
 )
-export default SvgDoc
+export default SvgDoc