@modul/mbui 0.0.27-beta-webpack-559623b1 → 0.0.27-beta-webpack-305b06ab

package/src/Drawer/Drawer.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+import { cn } from '../@/lib/utils'
+import { useContext } from 'react'
+
+const DrawerContext = React.createContext({direction: 'bottom', modal: false})
+
+const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => {
+	return (
+		<DrawerContext.Provider value={{direction: props.direction, modal: props.modal}}>
+			<DrawerPrimitive.Root {...props} />
+		</DrawerContext.Provider>
+	)
+}
+
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger: typeof DrawerPrimitive.Trigger = DrawerPrimitive.Trigger
+
+const DrawerPortal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal
+
+const DrawerClose : typeof DrawerPrimitive.Close = DrawerPrimitive.Close
+
+const DrawerOverlay: typeof DrawerPrimitive.Overlay = DrawerPrimitive.Overlay
+
+const DrawerTitle: typeof DrawerPrimitive.Title = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DrawerPrimitive.Title
+		ref={ref}
+		className={cn(className)}
+		{...props}
+	/>
+))
+
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerContent: typeof DrawerPrimitive.Content = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+	const {direction = 'bottom', modal = false} = useContext(DrawerContext)
+
+	return (
+		<DrawerPortal>
+			{modal && <DrawerOverlay className='z-50 fixed inset-0 bg-[--drawer-overlay-bg]' />}
+			<DrawerPrimitive.Content
+				ref={ref}
+				className={cn(
+					`z-50 fixed inset-x-0 flex flex-col bg-page shadow-[0_0_6px_6px_rgba(36,48,54,.08)] max-h-[calc(100dvh-var(--page-header-height))] container`,
+					direction === 'top' ? 'top-0 rounded-b-sm ' : 'bottom-0 rounded-t-sm',
+					className
+				)}
+				{...props}
+			>
+				{direction !== 'top' && (
+					<div className="pt-[4px] pb-[16px]">
+						<span className="block bg-[--cl-graphite-5] mx-auto rounded-full w-[36px] h-[5px]" />
+					</div>
+				)}
+
+				{children}
+
+				{direction === 'top' && (
+					<div className="pt-[24px] pb-[16px]">
+						<svg
+							className="mx-auto"
+							width="38"
+							height="10"
+							viewBox="0 0 38 10"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M0 7.39774C0 8.68678 1.25226 9.60455 2.48147 9.21638L17.7955 4.38038C18.5794 4.13282 19.4206 4.13282 20.2045 4.38038L35.5185 9.21638C36.7477 9.60455 38 8.68678 38 7.39774C38 6.56568 37.4606 5.82966 36.6671 5.5791L20.2045 0.380377C19.4206 0.132817 18.5794 0.132817 17.7955 0.380377L1.33286 5.5791C0.539422 5.82966 0 6.56568 0 7.39774Z"
+								fill="var(--cl-graphite-5)"
+							/>
+						</svg>
+					</div>
+				)}
+			</DrawerPrimitive.Content>
+		</DrawerPortal>
+	)
+})
+
+DrawerContent.displayName = 'DrawerContent'
+
+export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose }

package/src/Drawer/index.ts

@@ -0,0 +1,7 @@
+export {
+	Drawer,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerContent,
+	DrawerTitle,
+  } from './Drawer'

package/src/FavoritePyments/FavoritePaymentsList.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from 'react'
+
+const farvoriteLinkClasses: string = `
+	block
+	px-[20px]
+	py-[8px]
+	hover:bg-[--payments-list-item-hover]
+	focus-visible:bg-[--payments-list-item-focus]
+	active:bg-[--payments-list-item-active]
+`
+
+const FavoritePaymentsList: FC<{children: React.ReactNode}> = ({children}) => {
+	return <ul className="divide-y">{children}</ul>
+}
+
+const FavoritePaymentsItem: FC<{children: React.ReactNode}> = ({children}) => {
+	return <li>{children}</li>
+}
+
+interface IProps {
+	name: string,
+	value: string,
+	purpose?: string
+}
+
+const FarvoritePaymentDescription: FC<IProps> = ({name, value, purpose}) => {
+	return (
+		<>
+			<span className="flex">
+				<span className="truncate">{name}</span>
+				<span className="ml-auto font-medium shrink-0">{value}</span>
+			</span>
+			<span className="block mt-[8px] text-[12px] text-light truncate leading-[1.16]">
+				{purpose}
+			</span>
+		</>
+	)
+}
+
+export { FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses }

package/src/FavoritePyments/index.ts

@@ -0,0 +1 @@
+export  {FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses} from './FavoritePaymentsList'

package/src/Form/Form.tsx

@@ -0,0 +1,154 @@
+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 '../../src/Label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+	name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
+
+const FormField = <
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+	...props
+}: ControllerProps<TFieldValues, TName>) => {
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	)
+}
+
+const useFormField = () => {
+	const fieldContext = React.useContext(FormFieldContext)
+	const itemContext = React.useContext(FormItemContext)
+	const { getFieldState, formState } = useFormContext()
+
+	const fieldState = getFieldState(fieldContext.name, formState)
+
+	if (!fieldContext) {
+		throw new Error('useFormField should be used within <FormField>')
+	}
+
+	const { id } = itemContext
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	}
+}
+
+type FormItemContextValue = {
+	id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => {
+		const id = React.useId()
+
+		return (
+			<FormItemContext.Provider value={{ id }}>
+				<div
+					ref={ref}
+					className={cn('space-y-2', className)}
+					{...props}
+				/>
+			</FormItemContext.Provider>
+		)
+	}
+)
+
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+	const { error, formItemId } = useFormField()
+
+	return (
+		<Label
+			ref={ref}
+			className={cn(error && 'text-destructive', className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	)
+})
+
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+	({ ...props }, ref) => {
+		const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+		return (
+			<Slot
+				ref={ref}
+				id={formItemId}
+				aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+				aria-invalid={!!error}
+				{...props}
+			/>
+		)
+	}
+)
+
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, ...props }, ref) => {
+		const { formDescriptionId } = useFormField()
+
+		return (
+			<p
+				ref={ref}
+				id={formDescriptionId}
+				className={cn('text-[0.8rem] text-light', className)}
+				{...props}
+			/>
+		)
+	}
+)
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, children, ...props }, ref) => {
+		const { error, formMessageId } = useFormField()
+		const body = error ? String(error?.message) : children
+
+		if (!body) {
+			return null
+		}
+
+		return (
+			<p
+				ref={ref}
+				id={formMessageId}
+				className={cn('text-[0.8rem] font-medium text-destructive', className)}
+				{...props}
+			>
+				{body}
+			</p>
+		)
+	}
+)
+FormMessage.displayName = 'FormMessage'
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }

package/src/Form/index.ts

@@ -0,0 +1 @@
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } from './Form'

package/src/Icon/SvgIcon.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+
+// const colors = {
+//   error: '#ef5350',
+//   info: '#03a9f4',
+//   warning: '#ff9800',
+// }
+
+// const sizes = {
+//   'small': 20,
+//   'large': 35,
+// }
+
+const size = 24
+
+export interface SvgIconProps {
+	children: any,
+	color: string,
+	width: string | number,
+	height: string | number,
+	size: string | number,
+}
+
+const SvgIcon = React.forwardRef<any, any>(function SvgIcon
+  ({ children, color, height, size, width, ...props }, ref) {
+    return (
+        <svg {...props} color={color} height={size || height} width={size || width} ref={ref}>{children}</svg>
+    )
+  }
+)
+
+export { SvgIcon };

package/src/Icon/icons/AddList.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgAddList = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M10 18H3c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v5c0 .55-.45 1-1 1s-1-.45-1-1V4H3v12h7c.55 0 1 .45 1 1s-.45 1-1 1m9-3c0 .55-.45 1-1 1h-1v1c0 .55-.45 1-1 1s-1-.45-1-1v-1h-1c-.55 0-1-.45-1-1s.45-1 1-1h1v-1c0-.55.45-1 1-1s1 .45 1 1v1h1c.55 0 1 .45 1 1M9 7c0-.55.45-1 1-1h4c.55 0 1 .45 1 1s-.45 1-1 1h-4c-.55 0-1-.45-1-1m0 4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1s-.45 1-1 1h-3c-.55 0-1-.45-1-1M7.2 7c0 .66-.54 1.2-1.2 1.2S4.8 7.66 4.8 7 5.34 5.8 6 5.8s1.2.54 1.2 1.2m0 4c0 .66-.54 1.2-1.2 1.2s-1.2-.54-1.2-1.2.54-1.2 1.2-1.2 1.2.54 1.2 1.2"
+		/>
+	</SvgIcon>
+)
+
+export default SvgAddList

package/src/Icon/icons/AlertCircle.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgAlertCircle = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M8.8 14c0-.66.54-1.2 1.2-1.2s1.2.54 1.2 1.2-.54 1.2-1.2 1.2-1.2-.54-1.2-1.2M19 10c0-4.96-4.04-9-9-9s-9 4.04-9 9 4.04 9 9 9 9-4.04 9-9m-2 0c0 3.86-3.14 7-7 7s-7-3.14-7-7 3.14-7 7-7 7 3.14 7 7m-6 0V6c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1s1-.45 1-1"
+		/>
+	</SvgIcon>
+)
+export default SvgAlertCircle

package/src/Icon/icons/AlertCircleSolid.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgAlertCircleSolid = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M10 1a9 9 0 1 0 .001 18.001A9 9 0 0 0 10 1M9 6c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1zm1 9.2c-.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>
+)
+export default SvgAlertCircleSolid

package/src/Icon/icons/AlertDiamond.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgAlertDiamond = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M10 19c-.53 0-1.04-.21-1.41-.59l-7-7.017a1.983 1.983 0 0 1 0-2.813l7-7.017c.75-.75 2.07-.75 2.83 0l7 7.017c.78.78.78 2.042 0 2.813l-7 7.016c-.38.38-.89.591-1.42.591m0-16.016-7 7.017 7 6.997 6.99-7.007zm0 11.211c.66 0 1.2-.54 1.2-1.2 0-.661-.54-1.202-1.2-1.202s-1.2.54-1.2 1.201c0 .66.54 1.201 1.2 1.201m1-5.205V5.987c0-.55-.45-1-1-1s-1 .45-1 1V8.99c0 .55.45 1.001 1 1.001s1-.45 1-1"
+		/>
+	</SvgIcon>
+)
+export default SvgAlertDiamond

package/src/Icon/icons/AlertDiamondSolid.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgAlertDiamondSolid = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="m18.428 8.582-7.003-7.015c-.75-.76-2.071-.75-2.831 0L1.59 8.582c-.78.78-.78 2.042 0 2.812l7.004 7.016c.38.38.88.59 1.41.59s1.04-.21 1.41-.58l7.004-7.016c.78-.78.78-2.041.01-2.822M9.004 5.99c0-.55.45-1 1-1s1 .45 1 1v3.002c0 .55-.45 1.001-1 1.001s-1-.45-1-1zm1 8.206c-.66 0-1.2-.54-1.2-1.2 0-.661.54-1.202 1.2-1.202s1.2.54 1.2 1.201c0 .66-.54 1.201-1.2 1.201"
+		/>
+	</SvgIcon>
+)
+export default SvgAlertDiamondSolid

package/src/Icon/icons/AlertShield.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgAlertShield = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M10 19c-.13 0-.25-.02-.37-.07C4 16.68 2 11.09 2 7V4c0-.55.45-1 1-1 1.88 0 2.69-.47 3.56-.97C7.39 1.55 8.34 1 10 1s2.6.54 3.44 1.03c.87.5 1.69.97 3.56.97.55 0 1 .45 1 1v3c0 4.09-2 9.68-7.63 11.93-.12.05-.24.07-.37.07M4 4.96V7c0 3.38 1.58 7.94 6 9.91 4.42-1.98 6-6.54 6-9.91V4.96c-1.76-.16-2.75-.73-3.56-1.2C11.68 3.32 11.13 3 10 3s-1.68.32-2.44.76c-.81.47-1.8 1.04-3.56 1.2m6 9.24c.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.2M11 9V6c0-.55-.45-1-1-1s-1 .45-1 1v3c0 .55.45 1 1 1s1-.45 1-1"
+		/>
+	</SvgIcon>
+)
+export default SvgAlertShield

package/src/Icon/icons/Android.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgAndroid = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M4 8v5c0 .55-.45 1-1 1s-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1m13-1c-.55 0-1 .45-1 1v5c0 .55.45 1 1 1s1-.45 1-1V8c0-.55-.45-1-1-1M5 15c0 .55.45 1 1 1h1v2c0 .55.45 1 1 1s1-.45 1-1v-2h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h1c.55 0 1-.45 1-1V7H5zm9.9-9H5.1a5 5 0 0 1 2.42-3.34l-.47-.93a.505.505 0 0 1 .22-.67c.25-.12.55-.02.67.22l.49.98C8.93 2.1 9.45 2 10 2s1.07.1 1.56.26l.49-.98c.12-.25.42-.35.67-.22.25.12.35.42.22.67l-.47.93c1.24.7 2.14 1.91 2.43 3.34M8 4.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5.22.5.5.5.5-.22.5-.5m4.97-.16a.51.51 0 0 0-.63-.32c-.26.08-.4.37-.32.63.09.26.37.4.63.32.27-.08.41-.37.32-.63"
+		/>
+	</SvgIcon>
+)
+export default SvgAndroid

package/src/Icon/icons/Apple.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgApple = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M17.67 15.026q-.433.945-1.025 1.741c-1.44 1.951-2.4 2.701-4.565 1.861-.608-.24-1.173-.35-1.685-.35-.534 0-1.11.12-1.728.35-1.675.64-2.635.71-4.598-1.91C2.864 15.105 2 12.804 2 10.713c0-1.97.8-3.791 2.56-4.782a4.9 4.9 0 0 1 2.336-.63c1.141 0 2.613.8 3.243.8.661 0 2.261-.96 3.754-.83 1.6.12 2.795.72 3.595 1.79-1.43.821-2.133 1.972-2.123 3.442.022 1.771 1.174 3.102 2.635 3.682-.107.29-.213.57-.33.84M12.964 3.871c-.832.92-1.845 1.461-2.944 1.38C9.765 3.262 11.728 1.11 13.98 1c.128 1.06-.288 2.05-1.014 2.871"
+		/>
+	</SvgIcon>
+)
+export default SvgApple

package/src/Icon/icons/Archive.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgArchive = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M17 2H3c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2v8c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-2 14H5V8h10zm2-10H3V4h14zm-6 6H9c-.55 0-1-.45-1-1s.45-1 1-1h2c.55 0 1 .45 1 1s-.45 1-1 1"
+		/>
+	</SvgIcon>
+)
+export default SvgArchive

package/src/Icon/icons/ArrowCircle.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgArrowCircle = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...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-7m3.71 6.29-3-3A.996.996 0 1 0 9.3 7.7L10.59 9H7c-.55 0-1 .45-1 1s.45 1 1 1h3.59L9.3 12.29a.996.996 0 1 0 1.41 1.41l3-3a.996.996 0 0 0 0-1.41"
+		/>
+	</SvgIcon>
+)
+export default SvgArrowCircle

package/src/Icon/icons/ArrowDown.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgArrowDown = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M15.705 11.29a1 1 0 0 0-1.412 0L11 14.58V3c0-.55-.45-1-1.001-1s-1.001.45-1.001 1v11.59L5.704 11.3a.998.998 0 0 0-1.411 1.41l5.005 5c.2.2.45.29.71.29.261 0 .511-.1.712-.29l5.005-5c.37-.39.37-1.03-.02-1.42"
+		/>
+	</SvgIcon>
+)
+export default SvgArrowDown

package/src/Icon/icons/ArrowLeft.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgArrowLeft = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={24}
+		height={24}
+		fill="none"
+		viewBox="0 0 24 24"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			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>
+)
+export default SvgArrowLeft

package/src/Icon/icons/ArrowRight.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgArrowRight = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={24}
+		height={24}
+		fill="none"
+		viewBox="0 0 24 24"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			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>
+)
+export default SvgArrowRight

package/src/Icon/icons/ArrowUp.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgArrowUp = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="m15.709 7.292-5.003-5a.997.997 0 0 0-1.41 0l-5.003 5a.997.997 0 1 0 1.41 1.41l3.292-3.29v11.59c0 .55.45 1 1 1s1.001-.45 1.001-1V5.412l3.292 3.29c.39.39 1.02.39 1.41 0 .4-.38.4-1.02.01-1.41"
+		/>
+	</SvgIcon>
+)
+export default SvgArrowUp

package/src/Icon/icons/ArrowUpCorner.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgArrowUpCorner = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M16.007 15h-4.002a3.01 3.01 0 0 1-3.002-3V6.41l2.291 2.29a.997.997 0 1 0 1.411-1.41l-4.002-4a.997.997 0 0 0-1.41 0l-4.003 4A.997.997 0 1 0 4.7 8.7l2.292-2.29V12c0 2.76 2.241 5 5.003 5h4.002c.55 0 1-.45 1-1s-.44-1-.99-1"
+		/>
+	</SvgIcon>
+)
+export default SvgArrowUpCorner

package/src/Icon/icons/ArrowsChange.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgArrowsChange = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="m18.71 6.713-4 4c-.4.38-1.01.39-1.42 0-.39-.39-.39-1.03 0-1.42l2.3-2.29H2c-.55 0-1-.45-1-1s.45-1 1-1h13.59l-2.3-2.29c-.39-.39-.39-1.03 0-1.42s1.03-.39 1.42 0l4 4c.39.39.39 1.03 0 1.42m-.71 6.29H4.41l2.3-2.29c.39-.39.39-1.03 0-1.42s-1.03-.39-1.42 0l-4 4c-.39.39-.39 1.03 0 1.42l4 4c.4.38 1.01.39 1.42 0 .39-.39.39-1.03 0-1.42l-2.3-2.29H18c.55 0 1-.45 1-1s-.45-1-1-1"
+		/>
+	</SvgIcon>
+)
+export default SvgArrowsChange

package/src/Icon/icons/Atm.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgAtm = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={24}
+		height={24}
+		fill="none"
+		viewBox="0 0 24 24"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			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>
+)
+export default SvgAtm