@modul/mbui 0.0.28-beta-pv-53496-934863d9 → 0.0.28

package/src/Collapsible/Collapsible.tsx

@@ -0,0 +1,13 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+Collapsible.displayName = 'Collapsible'
+CollapsibleTrigger.displayName = 'CollapsibleTrigger'
+CollapsibleContent.displayName = 'CollapsibleContent'
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/Collapsible/index.ts

@@ -0,0 +1,8 @@
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible'
+export {
+	AccountCollapsible,
+	AccountCollapsibleHeader,
+	AccountCollapsibleTrigger,
+	AccountCollapsibleContent,
+	AccountCollapsibleContentItem,
+} from './AccountCollapsible'

package/src/DatePicker/DatePicker.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { format } from 'date-fns'
+import { cn } from '../@/lib/utils'
+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 px-[12px] h-[44px] text-left border-input border rounded-sm'
+
+interface IProps {
+	dateFormat?: any,
+	mode?: any;
+	placeholder?: string,
+	date?: Date,
+	classTrigger?: string,
+	triggerDisabled?: boolean,
+	onSelect?: (value: Date) => void
+}
+
+const DatePicker: React.FC<IProps> = ({placeholder, triggerDisabled, date, classTrigger, dateFormat = 'PPP',   ...props}) => {
+
+	return (
+		<Popover>
+			<Popover.Trigger asChild>
+				<button className={cn(trigegrClasses, {'bg-light text-light':triggerDisabled}, classTrigger)} disabled={triggerDisabled}>
+					{date ? <span className='w-[calc(100%-26px)] truncate'>{format(date ,dateFormat, {locale: ru})}</span> : <span className='w-[calc(100%-26px)] text-light truncate'>{placeholder}</span>}
+					<CalendarIcon width={18} height={18} className="ml-[8px] text-light shrink-0" />
+				</button>
+			</Popover.Trigger>
+			<Popover.Content
+				className="bg-page p-0 w-auto"
+				align="center"
+			>
+				<Calendar {...props}/>
+			</Popover.Content>
+		</Popover>
+	)
+}
+
+export { DatePicker }

package/src/DatePicker/index.ts

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

package/src/DigitKeyPad/DigitKeyPad.tsx

@@ -0,0 +1,69 @@
+import React, { FC, ReactNode } from 'react'
+import { cn } from '../@/lib/utils'
+
+const buttonClasses = {
+	base: `
+		size-[64px]
+		text-[32px]
+		leading-[32px]
+		text-primary
+		rounded-full
+		hover:bg-primary-light
+		focus-visible:bg-primary-light
+		active:text-white
+		active:bg-primary
+		border-[1px]
+		border-primary
+	`,
+	clean: `
+		border-none
+	`,
+}
+
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	clean?: boolean
+}
+
+const Button: FC<IButtonProps> = ({ children, className, clean = false, type = 'button', ...props }) => {
+	return (
+		<button
+			className={cn(buttonClasses.base, clean && buttonClasses.clean, className)}
+			type={type}
+			{...props}
+		>
+			{children}
+		</button>
+	)
+}
+
+interface IDigitKeyPadProps {
+	isDisabled: boolean
+	legend?: string
+	children?: ReactNode
+	className?: string
+}
+
+interface IDigitKeyPad {
+	displayName: string
+	Button: typeof Button
+}
+
+const DigitKeyPad: FC<IDigitKeyPadProps> & IDigitKeyPad = ({ legend, children, isDisabled }) => {
+	return (
+		<fieldset
+			disabled={isDisabled}
+			className="gap-[32px] grid grid-cols-3 grid-rows-4 mx-auto w-[256px]"
+		>
+			{legend && <legend className="sr-only">{legend}</legend>}
+			{children}
+		</fieldset>
+	)
+}
+
+DigitKeyPad.displayName = 'DigitKeyPad'
+
+DigitKeyPad.Button = Button
+
+DigitKeyPad.Button.displayName = 'DigitKeyPad.Button'
+
+export { DigitKeyPad }

package/src/DigitKeyPad/index.ts

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

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