@profitliga/ui 1.0.0

package/dist/icons/monochrome/SortUpIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/StarFillIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/StarIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/SyncIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/TelegramIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/TimerIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/TrashIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/TruckFillIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/TruckIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/UploadIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/UserIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/UsersIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/Wallet2Icon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/WalletIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/WarehouseIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/WarnRoundedIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/WarningFillIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/WarningIcon.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/icons/monochrome/index.d.ts

@@ -0,0 +1,120 @@
+import { default as AngleBottomIcon } from './AngleBottomIcon.vue';
+import { default as AngleDoubleLeftIcon } from './AngleDoubleLeftIcon.vue';
+import { default as AngleDoubleRightIcon } from './AngleDoubleRightIcon.vue';
+import { default as AngleLeftIcon } from './AngleLeftIcon.vue';
+import { default as AngleRightIcon } from './AngleRightIcon.vue';
+import { default as AngleTopIcon } from './AngleTopIcon.vue';
+import { default as ArrowRightTopIcon } from './ArrowRightTopIcon.vue';
+import { default as AtIcon } from './AtIcon.vue';
+import { default as AvatarIcon } from './AvatarIcon.vue';
+import { default as BagIcon } from './BagIcon.vue';
+import { default as BanIcon } from './BanIcon.vue';
+import { default as BankIcon } from './BankIcon.vue';
+import { default as BarsIcon } from './BarsIcon.vue';
+import { default as BellIcon } from './BellIcon.vue';
+import { default as BookIcon } from './BookIcon.vue';
+import { default as BoxIcon } from './BoxIcon.vue';
+import { default as BriefcaseIcon } from './BriefcaseIcon.vue';
+import { default as BuildingIcon } from './BuildingIcon.vue';
+import { default as CalendarIcon } from './CalendarIcon.vue';
+import { default as CameraIcon } from './CameraIcon.vue';
+import { default as CarIcon } from './CarIcon.vue';
+import { default as CarSearchIcon } from './CarSearchIcon.vue';
+import { default as CartCrossedIcon } from './CartCrossedIcon.vue';
+import { default as CartIcon } from './CartIcon.vue';
+import { default as CatalogToIcon } from './CatalogToIcon.vue';
+import { default as CevronBottomIcon } from './CevronBottomIcon.vue';
+import { default as CevronLeftIcon } from './CevronLeftIcon.vue';
+import { default as CevronRightIcon } from './CevronRightIcon.vue';
+import { default as CevronTopIcon } from './CevronTopIcon.vue';
+import { default as CheckFilledIcon } from './CheckFilledIcon.vue';
+import { default as CheckIcon } from './CheckIcon.vue';
+import { default as CheckRoundedIcon } from './CheckRoundedIcon.vue';
+import { default as ClockIcon } from './ClockIcon.vue';
+import { default as ClockPayIcon } from './ClockPayIcon.vue';
+import { default as CloseIcon } from './CloseIcon.vue';
+import { default as CloseRoundedIcon } from './CloseRoundedIcon.vue';
+import { default as CogIcon } from './CogIcon.vue';
+import { default as CommentIcon } from './CommentIcon.vue';
+import { default as CommentsIcon } from './CommentsIcon.vue';
+import { default as CopyIcon } from './CopyIcon.vue';
+import { default as CreditCardIcon } from './CreditCardIcon.vue';
+import { default as CubeIcon } from './CubeIcon.vue';
+import { default as DeliveryIcon } from './DeliveryIcon.vue';
+import { default as DeliveryTimeIcon } from './DeliveryTimeIcon.vue';
+import { default as DownloadIcon } from './DownloadIcon.vue';
+import { default as ErrorFillIcon } from './ErrorFillIcon.vue';
+import { default as ErrorIcon } from './ErrorIcon.vue';
+import { default as EyeCloseIcon } from './EyeCloseIcon.vue';
+import { default as EyeIcon } from './EyeIcon.vue';
+import { default as FileEditIcon } from './FileEditIcon.vue';
+import { default as FileExport } from './FileExportIcon.vue';
+import { default as FileIcon } from './FileIcon.vue';
+import { default as FileUploadIcon } from './FileUploadIcon.vue';
+import { default as FilterFillIcon } from './FilterFillIcon.vue';
+import { default as FilterIcon } from './FilterIcon.vue';
+import { default as FilterSlashIcon } from './FilterSlashIcon.vue';
+import { default as GiftIcon } from './GiftIcon.vue';
+import { default as GuardIcon } from './GuardIcon.vue';
+import { default as HeadSetIcon } from './HeadSetIcon.vue';
+import { default as HeartFillIcon } from './HeartFillIcon.vue';
+import { default as HeartOutlinedIcon } from './HeartOutlinedIcon.vue';
+import { default as HomeIcon } from './HomeIcon.vue';
+import { default as ImageIcon } from './ImageIcon.vue';
+import { default as InfoFillIcon } from './InfoFillIcon.vue';
+import { default as InfoIcon } from './InfoIcon.vue';
+import { default as LikeIcon } from './LikeIcon.vue';
+import { default as ListIcon } from './ListIcon.vue';
+import { default as LocationIcon } from './LocationIcon.vue';
+import { default as LockIcon } from './LockIcon.vue';
+import { default as MailBoxIcon } from './MailBoxIcon.vue';
+import { default as MapIcon } from './MapIcon.vue';
+import { default as MapPointFilledIcon } from './MapPointFilledIcon.vue';
+import { default as MapPointIcon } from './MapPointIcon.vue';
+import { default as MessageIcon } from './MessageIcon.vue';
+import { default as MinusIcon } from './MinusIcon.vue';
+import { default as MoneyBillIcon } from './MoneyBillIcon.vue';
+import { default as NewIcon } from './NewIcon.vue';
+import { default as PackageIcon } from './PackageIcon.vue';
+import { default as PencelLineIcon } from './PencelLineIcon.vue';
+import { default as PlusIcon } from './PlusIcon.vue';
+import { default as PlusRoundedIcon } from './PlusRoundedIcon.vue';
+import { default as PrintIcon } from './PrintIcon.vue';
+import { default as ProcentIcon } from './ProcentIcon.vue';
+import { default as QuestionIcon } from './QuestionIcon.vue';
+import { default as QuestionRoundedIcon } from './QuestionRoundedIcon.vue';
+import { default as ReplaceIcon } from './ReplaceIcon.vue';
+import { default as ReplayIcon } from './ReplayIcon.vue';
+import { default as ReturnIcon } from './ReturnIcon.vue';
+import { default as RubIcon } from './RubIcon.vue';
+import { default as SberPayIcon } from './SberPayIcon.vue';
+import { default as SearchIcon } from './SearchIcon.vue';
+import { default as SearchMinusIcon } from './SearchMinusIcon.vue';
+import { default as SearchPlusIcon } from './SearchPlusIcon.vue';
+import { default as SendIcon } from './SendIcon.vue';
+import { default as SettingsIcon } from './SettingsIcon.vue';
+import { default as ShieldErrorIcon } from './ShieldErrorIcon.vue';
+import { default as ShopIcon } from './ShopIcon.vue';
+import { default as ShoppingCartIcon } from './ShoppingCartIcon.vue';
+import { default as SortDownFillIcon } from './SortDownFillIcon.vue';
+import { default as SortDownIcon } from './SortDownIcon.vue';
+import { default as SortUpFillIcon } from './SortUpFillIcon.vue';
+import { default as SortUpIcon } from './SortUpIcon.vue';
+import { default as StarFillIcon } from './StarFillIcon.vue';
+import { default as StarIcon } from './StarIcon.vue';
+import { default as SyncIcon } from './SyncIcon.vue';
+import { default as TelegramIcon } from './TelegramIcon.vue';
+import { default as TimerIcon } from './TimerIcon.vue';
+import { default as TrashIcon } from './TrashIcon.vue';
+import { default as TruckFillIcon } from './TruckFillIcon.vue';
+import { default as TruckIcon } from './TruckIcon.vue';
+import { default as UploadIcon } from './UploadIcon.vue';
+import { default as UserIcon } from './UserIcon.vue';
+import { default as UsersIcon } from './UsersIcon.vue';
+import { default as Wallet2Icon } from './Wallet2Icon.vue';
+import { default as WalletIcon } from './WalletIcon.vue';
+import { default as WarehouseIcon } from './WarehouseIcon.vue';
+import { default as WarningFillIcon } from './WarningFillIcon.vue';
+import { default as WarningIcon } from './WarningIcon.vue';
+import { default as WarnRoundedIcon } from './WarnRoundedIcon.vue';
+export { AngleBottomIcon, AngleLeftIcon, AngleRightIcon, AngleTopIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, ArrowRightTopIcon, AtIcon, AvatarIcon, BagIcon, BanIcon, BankIcon, BarsIcon, BellIcon, BookIcon, BoxIcon, BriefcaseIcon, BuildingIcon, CalendarIcon, CarIcon, CarSearchIcon, CartCrossedIcon, CartIcon, CatalogToIcon, CameraIcon, CevronBottomIcon, CevronLeftIcon, CevronRightIcon, CevronTopIcon, CheckIcon, CheckFilledIcon, CheckRoundedIcon, ClockIcon, CloseIcon, CloseRoundedIcon, ClockPayIcon, CogIcon, CopyIcon, CommentIcon, CommentsIcon, CreditCardIcon, CubeIcon, DeliveryIcon, DeliveryTimeIcon, DownloadIcon, ErrorIcon, ErrorFillIcon, EyeIcon, EyeCloseIcon, FileIcon, FileExport, FileEditIcon, FileUploadIcon, FilterIcon, FilterFillIcon, FilterSlashIcon, GiftIcon, GuardIcon, HeartFillIcon, HeartOutlinedIcon, HeadSetIcon, HomeIcon, QuestionIcon, InfoIcon, InfoFillIcon, ImageIcon, LikeIcon, ListIcon, LockIcon, LocationIcon, MapIcon, MapPointIcon, MapPointFilledIcon, MailBoxIcon, MessageIcon, MinusIcon, MoneyBillIcon, NewIcon, PackageIcon, PencelLineIcon, PlusIcon, PlusRoundedIcon, ReturnIcon, ReplayIcon, PrintIcon, ProcentIcon, ReplaceIcon, RubIcon, SberPayIcon, SearchIcon, SearchMinusIcon, SearchPlusIcon, SendIcon, SettingsIcon, ShieldErrorIcon, StarFillIcon, StarIcon, SortUpIcon, SortDownIcon, SortUpFillIcon, SortDownFillIcon, ShoppingCartIcon, ShopIcon, SyncIcon, TrashIcon, TruckIcon, TruckFillIcon, TelegramIcon, TimerIcon, UserIcon, UsersIcon, WalletIcon, Wallet2Icon, WarningIcon, WarningFillIcon, WarehouseIcon, WarnRoundedIcon, QuestionRoundedIcon, UploadIcon };

package/dist/styles/animations.scss

@@ -0,0 +1,181 @@
+// Classes animation vue (https://vuejs.org/guide/built-ins/transition#css-based-transitions)
+// 1. v-enter-from
+// 2. v-enter-active
+// 3. v-enter-to
+// 4. v-leave-from
+// 5. v-leave-active
+// 6. v-leave-to
+
+//FADE
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity var(--animation-duration) ease-in-out;
+}
+
+//FADE-IN
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.fadeIn-enter-from,
+.fadeIn-leave-to {
+	opacity: 0;
+}
+
+.fadeIn-enter-to,
+.fadeIn-leave-from {
+	opacity: 1;
+}
+
+.fadeIn-enter-active,
+.fadeIn-leave-active {
+	transition: opacity var(--animation-duration) ease-in-out;
+}
+
+//FADE-OUT
+@keyframes fadeOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+.fadeOut-enter-from,
+.fadeOut-leave-to {
+	opacity: 1;
+}
+
+.fadeOut-enter-to,
+.fadeOut-leave-from {
+	opacity: 0;
+}
+
+.fadeOut-enter-active,
+.fadeOut-leave-active {
+	transition: opacity var(--animation-duration) ease-in-out;
+}
+
+//SLIDE-RIGHT-IN
+@keyframes slideRightIn {
+	from {
+		transform: translateX(200%);
+	}
+
+	to {
+		transform: translateX(0%);
+	}
+}
+
+@keyframes slideRightOut {
+	from {
+		transform: translateX(0%);
+	}
+
+	to {
+		transform: translateX(200%);
+	}
+}
+
+@keyframes slideTopIn {
+	from {
+		transform: translateY(-200%);
+	}
+
+	to {
+		transform: translateY(0%);
+	}
+}
+
+@keyframes slideTopOut {
+	from {
+		transform: translateY(0%);
+	}
+
+	to {
+		transform: translateY(-200%);
+	}
+}
+
+@keyframes slideLeftIn {
+	from {
+		transform: translateX(-200%);
+	}
+
+	to {
+		transform: translateX(0%);
+	}
+}
+
+@keyframes slideLeftOut {
+	from {
+		transform: translateX(0%);
+	}
+
+	to {
+		transform: translateX(-200%);
+	}
+}
+
+@keyframes slideBottomIn {
+	from {
+		transform: translateY(200%);
+	}
+
+	to {
+		transform: translateY(0%);
+	}
+}
+
+@keyframes slideBottomOut {
+	from {
+		transform: translateY(0%);
+	}
+
+	to {
+		transform: translateY(200%);
+	}
+}
+
+//Удалить после перехода на reka-ui
+.slide-fade-smooth-enter-active,
+.slide-fade-smooth-leave-active {
+	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.slide-fade-smooth-enter-from {
+	transform: translateX(-30px);
+	opacity: 0;
+}
+
+.slide-fade-smooth-leave-to {
+	transform: translateX(30px);
+	opacity: 0;
+}
+
+// VERTICAL SLIDE FADE
+.slide-fade-vertical-enter-active,
+.slide-fade-vertical-leave-active {
+	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.slide-fade-vertical-enter-from {
+	transform: translateY(-20px);
+	opacity: 0;
+}
+
+.slide-fade-vertical-leave-to {
+	transform: translateY(20px);
+	opacity: 0;
+}

package/dist/styles/colors.scss

@@ -0,0 +1,155 @@
+//GLOBAL
+:root {
+	--theme-color-m: #e3e9ed;
+}
+
+//NEUTRAL
+:root {
+	--theme-neutral-0: #ffffff;
+	--theme-neutral-100: #fdfdfd; //use bg main fill
+	--theme-neutral-200: #fafafa;
+	--theme-neutral-250: #ebebeb;
+	--theme-neutral-250_40: #ebebeb66; //use dissabled fill
+	--theme-neutral-300: #cecece; //use border icon,text
+	--theme-neutral-300_40: #cecece66; //use hover table fill
+	--theme-neutral-400: #bfbfbf;
+	--theme-neutral-400_40: #bfbfbf66;
+	--theme-neutral-500: #a1a1a1; //use btn icon
+	--theme-neutral-600: #525252;
+	--theme-neutral-700: #3d3d3d;
+	--theme-neutral-800: #292929;
+	--theme-neutral-850: #1f1f1f;
+	--theme-neutral-950: #0a0a0a;
+
+	--theme-neutral-surface-bg: var(--theme-neutral-100);
+	--theme-neutral-surface-default: var(--theme-neutral-0);
+	--theme-neutral-surface-subtitle: var(--theme-neutral-200);
+	--theme-neutral-surface-icon: #f1f4f5;
+	--theme-neutral-surface-disabled: var(--theme-neutral-250_40);
+
+	--theme-text-icon-body: #3b3b3b;
+	--theme-neutral-text-title: var(--theme-neutral-950);
+	--theme-neutral-text-subtitle: var(--theme-neutral-800);
+	--theme-neutral-text-body: var(--theme-neutral-700);
+	--theme-neutral-text-caption: var(--theme-neutral-600);
+	--theme-neutral-text-disabled: var(--theme-neutral-400_40);
+	--theme-neutral-text-negative: var(--theme-neutral-0);
+
+	--theme-neutral-icon-primary: #90a4ae;
+	--theme-neutral-icon-secondary: var(--theme-neutral-400);
+	--theme-neutral-icon-caption: var(--theme-neutral-500);
+	--theme-neutral-icon-disabled: var(--theme-neutral-300);
+	--theme-neutral-icon-negative: var(--theme-neutral-0);
+
+	--theme-neutral-border-default: var(--theme-neutral-300);
+	--theme-neutral-border-darker: var(--theme-neutral-400);
+	--theme-neutral-border-divider: #e3e9ed;
+	--theme-neutral-border-disabled: var(--theme-neutral-400_40);
+
+	//BOX-SHADOW
+	--theme-main-interface-shadow:
+		0 2px 8.8px 2px #0000000d, 0 0 13.4px 0 #0000000a;
+	--theme-hover-interface-shadow:
+		0 2px 8.8px 2px #0000000d, 0 1px 1px 0 #0000000a;
+}
+
+//PRIMARY
+:root {
+	--theme-primary-50: #eafef0;
+	--theme-primary-50_40: #eafef066;
+	--theme-primary-75: #caf3d5; //use hover fill
+	--theme-primary-100: #bff7cd;
+	--theme-primary-200: #aaeebc;
+	--theme-primary-200_15: #94e6aa; //use focussed stroke
+	--theme-primary-200_25: #94e6aa40; //use focussed stroke
+	--theme-primary-200_50: #94e6aa80; //use focussed stroke
+	--theme-primary-250: #caf3d5; //use hover fill
+	--theme-primary-300: #7fdd98; //use hover fill
+	--theme-primary-400: #2abc51; //use focussed fill
+	--theme-primary-500_5: #00ab2e0d; //use default fill
+	--theme-primary-500: #00ab2e; //use default fill
+	--theme-primary-600: #008925; //use pressed fill
+	--theme-primary-700: #00671c;
+	--theme-primary-800: #004412;
+	--theme-primary-900: #002209;
+
+	--theme-primary-surface-default: var(--theme-primary-500);
+	--theme-primary-surface-subtitle: var(--theme-primary-50);
+	--theme-primary-surface-darker: var(--theme-primary-600);
+	--theme-primary-surface-lighter: var(--theme-primary-200_25);
+	--theme-primary-surface-hover: var(--theme-primary-50_40);
+
+	--theme-primary-border-default: var(--theme-primary-700);
+	--theme-primary-border-subtitle: var(--theme-primary-600);
+	--theme-primary-border-darker: var(--theme-primary-800);
+	--theme-primary-border-lighter: var(--theme-primary-200);
+
+	--theme-primary-icon-default: var(--theme-primary-500);
+}
+
+//SECONDARY
+:root {
+	--theme-secondary-50: #f1f4f5;
+	--theme-secondary-100: #ebeff1;
+	--theme-secondary-150: #ecf2f4;
+	--theme-secondary-200: #d6e2e6;
+	--theme-secondary-250: #c7d9df;
+	--theme-secondary-300: #b3c9d0;
+	--theme-secondary-350: #a2c0ca;
+	--theme-secondary-400: #7da7b5;
+	--theme-secondary-450: #588ea0;
+	--theme-secondary-500: #3f7587;
+	--theme-secondary-600: #315b69;
+	--theme-secondary-700: #2a4e5a;
+	--theme-secondary-800: #23414b;
+	--theme-secondary-900: #15272d;
+}
+
+//INFO
+:root {
+	--theme-info-100: #e3eefa;
+	--theme-info-100_50: #e3eefa80; //use fill
+	--theme-info-200: #c2d9f5; //use stroke
+	--theme-info-300: #6ea6e7; //hover
+	--theme-info-400: #2674ce; //use link (подчеркивание при наведении)
+	--theme-info-500: #235fa4; //use icon
+	--theme-info-600: #02538f;
+	--theme-info-700: #134a73;
+	--theme-info-800: #152d4f;
+	--theme-info-900: #161e33;
+}
+
+//WARN
+:root {
+	--theme-warn-50: #faf4ee;
+	--theme-warn-100: #fdf4ea;
+	--theme-warn-200: #fadfc1;
+	--theme-warn-300: #f4c083;
+	--theme-warn-400: #f1ab5a;
+	--theme-warn-500: #ed9631;
+	--theme-warn-600: #d47d16;
+	--theme-warn-700: #ac6410;
+	--theme-warn-800: #814a09;
+	--theme-warn-900: #492c0a;
+}
+
+//ERROR
+:root {
+	--theme-error-100: #fceaea;
+	--theme-error-100_50: #fceaea80; //use fill
+	--theme-error-200_50: #fceaea; //use stroke
+	--theme-error-200: #ffd4d4; //use stroke
+	--theme-error-300: #f4a6a6; //hover
+	--theme-error-400: #df575c;
+	--theme-error-500: #de292f; //use icon
+	--theme-error-600: #bd2429;
+	--theme-error-700: #921d21;
+	--theme-error-800: #6e1820;
+	--theme-error-900: #4e1012;
+}
+
+//SHADOW
+:root {
+	--theme-shadow-button:
+		0px 2px 8.8px 2px #0000000d, 0px 1px 1px 0px #0000000a;
+}

package/dist/styles/fonts.scss

@@ -0,0 +1,10 @@
+@use './mixins.scss' as mixins;
+
+@include mixins.font-face(
+	'Roboto',
+	(100, 200, 300, 400, 500, 600, 700, 800, 900)
+);
+@include mixins.font-face(
+	'Inter',
+	(100, 200, 300, 400, 500, 600, 700, 800, 900)
+);

package/dist/styles/global.scss

@@ -0,0 +1,53 @@
+@use './mixins.scss' as *;
+
+.overlay {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	width: 100dvw;
+	height: 100dvh;
+
+	background-color: rgba(#000, 0.3);
+	z-index: 1000;
+
+	&[data-state='open'] {
+		animation: fadeIn var(--animation-duration) ease-in-out;
+	}
+
+	&[data-state='closed'] {
+		animation: fadeOut var(--animation-duration) ease-in-out;
+	}
+}
+
+.container {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 10px;
+	max-width: 768px; // Базовая ширина для мобильных
+
+	@include respond(lg) {
+		max-width: 991px;
+	}
+
+	@include respond(xl) {
+		max-width: 1200px;
+	}
+
+	@include respond(xxl) {
+		max-width: 1400px;
+	}
+
+	@include respond(xxxl) {
+		max-width: 1600px;
+	}
+}
+
+.page-title {
+	font-weight: 600;
+	font-size: 24px;
+	line-height: 120%;
+	color: var(--theme-neutral-text-title);
+}

package/dist/styles/index.scss

@@ -0,0 +1,9 @@
+@use './vars.scss';
+@use './colors.scss';
+@use './animations.scss';
+@use './mixins.scss';
+@use './fonts.scss';
+@use './reset.css';
+@use './typography.css';
+
+@use './global.scss';