@max-ts/components 0.0.2

package/src/components/Typography/hooks/useTypographyColor/useTypographyColor.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+
+import { useTheme } from '@mui/material';
+import { TypographyColors } from '../../enums';
+import type { TypographyColor } from '../../types';
+
+type Intensity =
+	| '900'
+	| '800'
+	| '700'
+	| '600'
+	| '500'
+	| '400'
+	| '300'
+	| '200'
+	| '100';
+
+type UseTypographyColorParams = {
+	/**
+	 * Цвет текста
+	 * @default undefined
+	 */
+	color?: TypographyColor;
+	/**
+	 * Интенсивность цвета, будет применена для цвета, у которого есть градации
+	 * @default '800'
+	 */
+	colorIntensity?: Intensity;
+};
+
+export const useTypographyColor = ({
+	color,
+	colorIntensity = '800',
+}: UseTypographyColorParams) => {
+	const theme = useTheme();
+
+	return useMemo(() => {
+		const colorName = color && TypographyColors[color];
+
+		if (colorName) {
+			switch (colorName) {
+				case TypographyColors.text:
+					return theme.palette.text.primary;
+				case TypographyColors.textSecondary:
+					return theme.palette.text.secondary;
+				default:
+					// @ts-ignore
+					return theme.palette[colorName]?.[colorIntensity] || colorName;
+			}
+		}
+
+		return undefined;
+	}, [color, colorIntensity, theme]);
+};

package/src/components/Typography/index.ts

@@ -0,0 +1,3 @@
+export * from './Typography';
+
+export * from './types';

package/src/components/Typography/styles.ts

@@ -0,0 +1,9 @@
+import { Typography, styled } from '@mui/material';
+
+import type { TypographyProps } from './Typography';
+
+export const TypographyWrapper = styled(Typography, {
+	shouldForwardProp: (prop) => prop !== 'isUpperCase',
+})<TypographyProps>`
+  text-transform: ${({ isUpperCase }) => (isUpperCase ? 'uppercase' : 'none')};
+` as typeof Typography;

package/src/components/Typography/types.ts

@@ -0,0 +1,30 @@
+import type { TypographyColors } from './enums';
+
+export type Intensity =
+	| '900'
+	| '800'
+	| '700'
+	| '600'
+	| '500'
+	| '400'
+	| '300'
+	| '200'
+	| '100';
+
+export type TypographyColor = keyof typeof TypographyColors;
+
+export type TypographyVariant =
+	| 'h1'
+	| 'h2'
+	| 'h3'
+	| 'h4'
+	| 'h5'
+	| 'h6'
+	| 'subtitle1'
+	| 'subtitle2'
+	| 'body1'
+	| 'caption'
+	| 'button'
+	| 'pointer'
+	| 'link'
+	| 'inherit';

package/src/components/index.ts

@@ -0,0 +1,123 @@
+export * from './Accordion';
+
+export * from './ActionCell';
+
+export * from './AsyncAutocomplete';
+
+export * from './Autocomplete';
+
+export * from './Badge';
+
+export * from './BottomDrawer';
+
+export * from './Button';
+
+export * from './Checkbox';
+
+export * from './CheckboxField';
+
+export * from './Chevron';
+
+export * from './CircularProgress';
+
+export * from './Collapse';
+
+export * from './ConfigProvider';
+
+export * from './ConfirmAction';
+
+export * from './Container';
+
+export * from './ContentState';
+
+export * from './CopyTypography';
+
+export * from './DataGrid';
+
+export * from './DataGridActionCell';
+
+export * from './DataGridPagination';
+
+export * from './Description';
+
+export * from './DescriptionList';
+
+export * from './Dialog';
+
+export * from './DialogActions';
+
+export * from './DialogContent';
+
+export * from './DialogContentText';
+
+export * from './DialogHeader';
+
+export * from './DialogTitle';
+
+export * from './Divider';
+
+export * from './ErrorBoundary';
+
+export * from './FormControl';
+
+export * from './FormControlLabel';
+
+export * from './FormHelperText';
+
+export * from './GuidTypography';
+
+export * from './IconButton';
+
+export * from './IconDropdownButton';
+
+export * from './InternalErrorPlaceholder';
+
+export * from './Link';
+
+export * from './List';
+
+export * from './ListItem';
+
+export * from './ListItemButton';
+
+export * from './ListItemIcon';
+
+export * from './ListItemText';
+
+export * from './ListSubheader';
+
+export * from './Menu';
+
+export * from './MenuItem';
+
+export * from './MenuList';
+
+export * from './NavMenu';
+
+export * from './OutdatedReleasePlaceholder';
+
+export * from './OverflowTypography';
+
+export * from './Pagination';
+
+export * from './Paper';
+
+export * from './Placeholder';
+
+export * from './Popover';
+
+export * from './SearchField';
+
+export * from './Select';
+
+export * from './Tag';
+
+export * from './TagBadge';
+
+export * from './TagsList';
+
+export * from './TextField';
+
+export * from './Tooltip';
+
+export * from './Typography';

package/src/components/types.ts

@@ -0,0 +1 @@
+export type WithoutEmotionSpecific<Props> = Omit<Props, 'sx' | 'css'>;

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useViewportType';
+export * from './useMenu';
+export * from './usePopover';

package/src/hooks/useMenu/index.ts

@@ -0,0 +1 @@
+export * from './useMenu';

package/src/hooks/useMenu/useMenu.stories.tsx

@@ -0,0 +1,31 @@
+import { ClickAwayListener } from '@mui/material';
+import type { Meta } from '@storybook/react';
+
+import { Button } from '../../components/Button';
+import { Menu } from '../../components/Menu';
+import { MenuItem } from '../../components/MenuItem';
+import { useMenu } from './useMenu';
+
+const meta: Meta = {
+	title: 'Hooks/useMenu',
+};
+
+export default meta;
+
+export const Example = () => {
+	const { open, anchorRef, handleOpenMenu, handleCloseMenu } = useMenu();
+
+	return (
+		<>
+			<ClickAwayListener onClickAway={handleCloseMenu}>
+				<Button ref={anchorRef} onClick={handleOpenMenu}>
+					Click me
+				</Button>
+			</ClickAwayListener>
+			<Menu open={open} anchorEl={anchorRef.current}>
+				<MenuItem>Option 1</MenuItem>
+				<MenuItem>Option 2</MenuItem>
+			</Menu>
+		</>
+	);
+};

package/src/hooks/useMenu/useMenu.ts

@@ -0,0 +1,45 @@
+import { type Ref, type RefObject, useEffect, useRef, useState } from 'react';
+
+type UseMenuResult = {
+	/**
+	 * Флаг состояния меню (открыто-закрыто)
+	 */
+	open: boolean;
+	/**
+	 * Элемент, к которому привязано меню
+	 */
+	anchorRef: RefObject<HTMLButtonElement | null>;
+	/**
+	 * Обработчик открытия меню
+	 */
+	handleCloseMenu: () => void;
+	/**
+	 * Обработчик закрытия меню
+	 */
+	handleOpenMenu: () => void;
+};
+
+export function useMenu(
+	ref: Ref<HTMLButtonElement> | null = null,
+): UseMenuResult {
+	const [open, setOpen] = useState(false);
+	const anchorRef = useRef<HTMLButtonElement | null>(null);
+
+	useEffect(() => {
+		if (!ref) {
+			return;
+		}
+
+		if (typeof ref === 'function') {
+			ref(anchorRef.current);
+		} else {
+			ref.current = anchorRef.current;
+		}
+	}, [ref]);
+
+	const handleCloseMenu = () => setOpen(false);
+
+	const handleOpenMenu = () => setOpen(true);
+
+	return { open, anchorRef, handleCloseMenu, handleOpenMenu };
+}

package/src/hooks/usePopover/index.ts

@@ -0,0 +1 @@
+export * from './usePopover';

package/src/hooks/usePopover/usePopover.ts

@@ -0,0 +1,27 @@
+import { type SyntheticEvent, useState } from 'react';
+
+export type AnchorType = Element | null | undefined;
+
+export type UsePopoverResult = {
+	isOpen: boolean;
+	anchor: AnchorType;
+	actions: {
+		open: (event: SyntheticEvent) => void;
+		close: () => void;
+	};
+};
+
+export const usePopover = (): UsePopoverResult => {
+	const [anchor, setAnchor] = useState<AnchorType>(null);
+
+	const open = (event: SyntheticEvent) => setAnchor(event.currentTarget);
+
+	const close = () => setAnchor(null);
+
+	const actions = {
+		open,
+		close,
+	};
+
+	return { isOpen: Boolean(anchor), anchor, actions };
+};

package/src/hooks/useViewportType/index.ts

@@ -0,0 +1 @@
+export * from './useViewportType';

package/src/hooks/useViewportType/useViewportType.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta } from '@storybook/react';
+
+import { Description } from '../../components';
+import { useViewportType } from './useViewportType';
+
+/**
+ * useViewportType предоставляет функционал определения типа viewport пользователя
+ *
+ * ### [Figma]()
+ * ### [Guide]()
+ */
+const meta: Meta<typeof useViewportType> = {
+	title: 'hooks/useViewportType',
+};
+
+export default meta;
+
+/**
+ * Свойство ```isMobile``` - флаг, указывающий на размер viewport, сопоставимый с мобильным устройством
+ */
+export const IsMobile = () => {
+	const { isMobile } = useViewportType();
+
+	return (
+		<Description>
+			<Description.Name>isMobile</Description.Name>
+			<Description.Value>{JSON.stringify(isMobile)}</Description.Value>
+		</Description>
+	);
+};

package/src/hooks/useViewportType/useViewportType.ts

@@ -0,0 +1,13 @@
+import { useMediaQuery, useTheme } from '@mui/material';
+
+type UseViewportTypeReturned = {
+	isMobile: boolean;
+};
+
+export const useViewportType = (): UseViewportTypeReturned => {
+	const theme = useTheme();
+
+	const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+	return { isMobile };
+};

package/src/illustrations/certificates-not-found.svg

@@ -0,0 +1,91 @@
+<svg width="324" height="162" viewBox="0 0 324 162" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24.6422" height="29.0573" transform="matrix(-0.949022 -0.31521 -0.684312 0.729189 111.506 27.3342)" fill="url(#paint0_linear_740_13713)"/>
+<rect width="36.6832" height="44.2467" transform="matrix(-0.949022 -0.31521 -0.684312 0.729189 70.0148 64.5952)" fill="url(#paint1_linear_740_13713)"/>
+<rect width="35.5631" height="41.9436" transform="matrix(-0.949022 -0.31521 -0.684312 0.729189 320.062 130.963)" fill="url(#paint2_linear_740_13713)"/>
+<rect width="20.4418" height="24.0039" transform="matrix(-0.949022 -0.31521 -0.684312 0.729189 319.891 71.4426)" fill="url(#paint3_linear_740_13713)"/>
+<rect width="140.012" height="77.3019" transform="matrix(-0.949022 -0.31521 -0.684312 0.729189 263.578 95.4221)" fill="url(#paint4_linear_740_13713)"/>
+<path d="M110.307 8.76745L86.9211 1.00001C83.341 10 67.0368 22.1883 67.0368 22.1883L90.4228 29.9557C105.841 19.5 110.307 8.76745 110.307 8.76745Z" fill="#DEEAF7"/>
+<path d="M110.307 7.76745L86.9211 1.19927e-05C83.341 9 67.0368 21.1883 67.0368 21.1883L90.4228 28.9557C105.841 18.5 110.307 7.76745 110.307 7.76745Z" fill="#F7FBFF"/>
+<path d="M65.0957 41.9796L30.2825 30.4167C26.341 41.9796 0.715438 61.9227 0.715438 61.9227L35.5286 73.4856C60.341 56.5 65.0957 41.9796 65.0957 41.9796Z" fill="#DEEAF7"/>
+<path d="M65.0957 40.9796L30.2825 29.4167C26.341 40.9796 0.715438 60.9227 0.715438 60.9227L35.5286 72.4856C60.341 55.5 65.0957 40.9796 65.0957 40.9796Z" fill="#F7FBFF"/>
+<path d="M319.806 103.379L286.056 92.1689C281.841 103.379 257.353 122.754 257.353 122.754L291.104 133.964C317.341 114 319.806 103.379 319.806 103.379Z" fill="#DEEAF7"/>
+<path d="M319.806 102.379L286.056 91.1689C281.841 102.379 257.353 121.754 257.353 121.754L291.104 132.964C317.341 113 319.806 102.379 319.806 102.379Z" fill="#F7FBFF"/>
+<path d="M319.338 51.5047L299.938 45.0613C297.341 51.5047 283.512 62.5646 283.512 62.5646L302.911 69.0081C317.341 59 319.338 51.5047 319.338 51.5047Z" fill="#DEEAF7"/>
+<path d="M319.338 50.5047L299.938 44.0613C297.341 50.5047 283.512 61.5646 283.512 61.5646L302.911 68.0081C317.341 58 319.338 50.5047 319.338 50.5047Z" fill="#F7FBFF"/>
+<path d="M257.321 62.5001L131.272 23.0307C120.321 45.5001 75.5793 78.2302 75.5793 78.2302L206.276 121.681C251.821 90.0001 257.321 62.5001 257.321 62.5001Z" fill="#DEEAF7"/>
+<mask id="mask0_740_13713" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="76" y="21" width="186" height="99">
+<path d="M261.082 61.5008C261.363 60.7972 260.963 60.1466 260.102 59.8879L132.672 21.5954C131.613 21.2771 130.182 21.6355 129.394 22.417L76.6657 74.6779C75.8112 75.5249 76.0344 76.5409 77.1571 76.9142L204.412 119.221C205.243 119.497 206.333 119.359 207.16 118.836C214.483 114.208 249.259 91.0486 261.082 61.5008Z" fill="#F8F9FF"/>
+</mask>
+<g mask="url(#mask0_740_13713)">
+<path d="M256.841 60.5L130.793 21.0306C119.841 43.5 75.0996 76.2301 75.0996 76.2301L205.796 119.681C251.341 88.0001 256.841 60.5 256.841 60.5Z" fill="url(#paint5_radial_740_13713)"/>
+<path d="M143.417 87.0319C143.417 87.0319 147.681 87.5552 149.302 87.9726C150.923 88.39 152.498 89.3155 153.468 88.9412C154.671 88.4767 155.415 87.8894 156.291 87.1921C157.776 86.0117 160.191 86.183 162.234 85.0957C164.558 83.8589 166.219 83.1828 167.113 81.1192C168.007 79.0555 165.873 78.9362 165.873 78.9362C163.569 79.9736 161.708 81.8613 161.708 81.8613L157.808 85.2014C157.808 85.2014 154.777 87.8176 152.349 88.5797C150.839 89.0539 149.426 90.2227 149.426 90.2227C149.426 90.2227 147.861 91.2453 148.012 91.9626C148.26 93.1374 150.949 91.2416 151.457 90.8789C152.166 90.3728 152.604 89.6939 153.277 89.1836C153.277 89.1836 163.348 86.764 163.855 86.9914C164.485 87.2744 163.617 88.3635 163.079 89.0821C162.542 89.8006 160.149 92.3582 161.415 92.8407C162.483 93.2472 163.276 92.4358 163.684 92.0376C164.625 91.1172 166.348 89.4616 167.57 89.4326C171.371 89.3425 168.713 93.1429 171.441 94.5448C174.716 96.228 177.256 92.8698 180.426 94.66C183.51 96.4011 179.806 99.1088 182.959 100.781C185.699 102.234 190.694 101.277 190.694 101.277" stroke="#7AB9FC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<rect width="11.201" height="15.6657" transform="matrix(-0.949022 -0.31521 -0.684312 0.72919 112.174 75.0591)" fill="#0989E3"/>
+</g>
+<path d="M224.88 71.3521L130.216 40.0381" stroke="#CEE5FE" stroke-width="2" stroke-linecap="round"/>
+<path d="M195.467 72.7963L137.861 54.0977" stroke="#CEE5FE" stroke-width="2" stroke-linecap="round"/>
+<g filter="url(#filter0_d_740_13713)">
+<path d="M120.492 59.6957L114.678 61.3419L111.051 58.5191L106.925 61.726L101.337 60.6445L100.004 64.5528L93.953 65.5025L95.7692 69.065L90.8766 71.7914L95.3561 74.0535L92.9326 77.826L98.8751 78.1816L99.57 81.9895L105.383 80.3433L109.01 83.1661L113.137 79.9592L118.724 81.0407L120.058 77.1324L126.109 76.1827L124.293 72.6202L129.185 69.8938L124.706 67.6317L127.129 63.8592L121.187 63.5036L120.492 59.6957Z" fill="#7AB9FC"/>
+</g>
+<g filter="url(#filter1_d_740_13713)">
+<path d="M114.848 71.8393C116.949 69.6007 116.29 67.0014 113.377 66.0337L112.234 65.6544C109.321 64.6867 105.256 65.7169 103.155 67.9556C101.054 70.1942 101.713 72.7935 104.627 73.7612L105.769 74.1405C108.682 75.1082 112.747 74.0779 114.848 71.8393Z" fill="white"/>
+</g>
+<g filter="url(#filter2_i_740_13713)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.478 72.7127C120.626 69.3582 119.638 65.4634 115.273 64.0133L114.13 63.634C109.765 62.1839 103.674 63.7277 100.526 67.0822C97.3776 70.4367 98.3647 74.3315 102.73 75.7816L103.873 76.1609C108.238 77.611 114.33 76.0671 117.478 72.7127ZM111.481 68.0541C112.942 68.5395 113.272 69.8431 112.219 70.9659C111.165 72.0887 109.126 72.6055 107.665 72.1201L106.523 71.7408C105.061 71.2554 104.731 69.9517 105.785 68.8289C106.838 67.7062 108.877 67.1894 110.338 67.6748L111.481 68.0541Z" fill="#3889DD"/>
+</g>
+<path d="M102.544 85.3476L91.9097 81.8164V89.9332L97.5028 89.204L102.753 93.4999L102.544 85.3476Z" fill="#0074C6"/>
+<defs>
+<filter id="filter0_d_740_13713" x="89.8766" y="58.5191" width="40.3085" height="26.6471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_740_13713"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_740_13713" result="shape"/>
+</filter>
+<filter id="filter1_d_740_13713" x="101.343" y="65.2907" width="14.7341" height="10.9634" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.583315" dy="1.74995"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_740_13713"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_740_13713" result="shape"/>
+</filter>
+<filter id="filter2_i_740_13713" x="98.6841" y="63.0891" width="20.6349" height="13.6167" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_740_13713"/>
+</filter>
+<linearGradient id="paint0_linear_740_13713" x1="6.29224" y1="32.4321" x2="9.64836" y2="-2.54226" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F9FF"/>
+<stop stop-color="#F3F7FF"/>
+<stop offset="0.0001" stop-color="#F5F9FF"/>
+<stop offset="1" stop-color="#F4FAFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_740_13713" x1="13.6949" y1="45.5596" x2="15.6722" y2="-0.925028" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2F7FF"/>
+<stop offset="1" stop-color="#F5FAFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_740_13713" x1="8.36241" y1="42.0639" x2="10.4229" y2="-2.33088" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F9FF"/>
+<stop offset="1" stop-color="#F9FCFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_740_13713" x1="2.46888" y1="25.1452" x2="3.25708" y2="2.16356" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2F7FF"/>
+<stop offset="1" stop-color="#F5FAFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_740_13713" x1="46.1931" y1="72.1875" x2="48.9488" y2="-19.2171" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F9FF"/>
+<stop offset="1" stop-color="#EFF7FF" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint5_radial_740_13713" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(170.341 70) rotate(103.65) scale(36.0174 83.5553)">
+<stop offset="0.0574083" stop-color="white"/>
+<stop offset="0.952001" stop-color="#FBFDFF"/>
+<stop offset="1" stop-color="#F7FBFF"/>
+</radialGradient>
+</defs>
+</svg>

package/src/illustrations/data-access-disabled.svg

@@ -0,0 +1,103 @@
+<svg width="144" height="162" viewBox="0 0 144 162" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path opacity="0.56" d="M143.638 148.891C143.638 155.865 111.496 161.481 71.9148 161.481C32.334 161.481 0.191162 155.865 0.191162 148.891C0.191162 141.917 32.334 136.301 71.9148 136.301C111.496 136.301 143.638 141.917 143.638 148.891Z" fill="url(#paint0_radial_4221_54953)"/>
+    <path d="M31.0633 42.182C32.6191 39.8484 35.2382 38.4467 38.0428 38.4467H104.559C107.364 38.4467 109.983 39.8484 111.539 42.182L114.488 46.6056C115.499 48.1226 116.039 49.905 116.039 51.7282H26.5632C26.5632 49.905 27.1029 48.1226 28.1142 46.6056L31.0633 42.182Z" fill="url(#paint1_linear_4221_54953)"/>
+    <g filter="url(#filter0_i_4221_54953)">
+        <ellipse cx="43.6894" cy="40.8932" rx="7.33981" ry="1.74757" fill="#5681AB"/>
+    </g>
+    <g filter="url(#filter1_i_4221_54953)">
+        <ellipse cx="98.9128" cy="40.8932" rx="7.33981" ry="1.74757" fill="#5681AB"/>
+    </g>
+    <mask id="mask0_4221_54953" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="0" width="67" height="43">
+        <path d="M104.342 42.0684C102.058 42.9903 97.1652 42.9903 94.1174 42.2122V30.5775C94.1174 19.5137 85.1138 10.4338 73.9738 10.4338H68.7089C57.6452 10.4338 48.5653 19.4374 48.5653 30.5775V42.2913C46.1361 42.9903 41.2429 42.9903 38.1882 42.0479V30.5775C38.1882 13.7911 51.8463 0.133057 68.6326 0.133057H73.8975C90.6838 0.133057 104.342 13.7911 104.342 30.5775V42.0684Z" fill="#3B496E"/>
+        <path d="M104.342 42.0684C102.058 42.9903 97.1652 42.9903 94.1174 42.2122V30.5775C94.1174 19.5137 85.1138 10.4338 73.9738 10.4338H68.7089C57.6452 10.4338 48.5653 19.4374 48.5653 30.5775V42.2913C46.1361 42.9903 41.2429 42.9903 38.1882 42.0479V30.5775C38.1882 13.7911 51.8463 0.133057 68.6326 0.133057H73.8975C90.6838 0.133057 104.342 13.7911 104.342 30.5775V42.0684Z" fill="url(#paint2_linear_4221_54953)"/>
+    </mask>
+    <g mask="url(#mask0_4221_54953)">
+        <path d="M104.6 41.7591H94.376V30.4444C94.376 19.3806 85.3724 10.3007 74.2323 10.3007H68.9675C57.9037 10.3007 48.8238 19.3043 48.8238 30.4444V41.7591H38.4468V30.4444C38.4468 13.658 52.1048 0 68.8912 0H74.156C90.9424 0 104.6 13.658 104.6 30.4444V41.7591Z" fill="url(#paint3_radial_4221_54953)"/>
+        <mask id="mask1_4221_54953" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="36" y="39" width="16" height="4">
+            <ellipse cx="43.6894" cy="40.8932" rx="7.33981" ry="1.74757" fill="#C4C4C4"/>
+        </mask>
+        <g mask="url(#mask1_4221_54953)">
+            <path d="M38.1882 46.7853H48.5653V38.6814H38.1882V46.7853Z" fill="#576894"/>
+        </g>
+        <mask id="mask2_4221_54953" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="91" y="39" width="16" height="4">
+            <ellipse cx="98.9128" cy="40.8932" rx="7.33981" ry="1.74757" fill="#C4C4C4"/>
+        </mask>
+        <g mask="url(#mask2_4221_54953)">
+            <path d="M94.1174 46.7853H104.342V38.6814H94.1174V46.7853Z" fill="#576894"/>
+        </g>
+        <g filter="url(#filter2_f_4221_54953)">
+            <path d="M94.1174 41.9418V30.5775C94.1174 19.5138 85.1138 10.4338 73.9738 10.4338H68.709C57.6452 10.4338 48.5653 19.4375 48.5653 30.5775V41.9418H45.78C45.6157 39.446 45.4176 36.6023 45.1785 33.3736C43.7805 14.4902 57.4385 5.72534 68.6327 5.72534H73.8975C85.0916 5.72534 98.7496 14.4902 97.3516 33.3736C97.1125 36.6023 96.9144 39.446 96.7501 41.9418H94.1174Z" fill="url(#paint4_radial_4221_54953)"/>
+        </g>
+    </g>
+    <path d="M116.039 111.936C116.039 116.82 112.071 120.787 107.188 120.787H35.4142C30.5309 120.787 26.5632 116.82 26.5632 111.936V51.4919C26.5632 46.6086 30.5309 42.6409 35.4142 42.6409H107.188C112.071 42.6409 116.039 46.6086 116.039 51.4919V111.936Z" fill="url(#paint5_linear_4221_54953)"/>
+    <path d="M116.039 111.936C116.039 116.82 112.071 120.787 107.188 120.787H35.4142C30.5309 120.787 26.5632 116.82 26.5632 111.936V51.4919C26.5632 46.6086 30.5309 42.6409 35.4142 42.6409H107.188C112.071 42.6409 116.039 46.6086 116.039 51.4919V111.936Z" fill="url(#paint6_radial_4221_54953)"/>
+    <path d="M26.5632 112.081C26.5632 116.964 30.5129 120.932 35.3741 120.932H107.228C112.089 120.932 116.039 116.964 116.039 112.081H26.5632Z" fill="#EEF7FF"/>
+    <path d="M26.5632 112.081C26.5632 116.964 30.5129 120.932 35.3741 120.932H107.228C112.089 120.932 116.039 116.964 116.039 112.081H26.5632Z" fill="url(#paint7_linear_4221_54953)"/>
+    <defs>
+        <filter id="filter0_i_4221_54953" x="36.3496" y="39.1456" width="14.6797" height="4.19415" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="0.699029"/>
+            <feGaussianBlur stdDeviation="0.699029"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4221_54953"/>
+        </filter>
+        <filter id="filter1_i_4221_54953" x="91.573" y="39.1456" width="14.6797" height="4.19415" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="0.699029"/>
+            <feGaussianBlur stdDeviation="0.699029"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4221_54953"/>
+        </filter>
+        <filter id="filter2_f_4221_54953" x="41.5842" y="2.2302" width="59.3616" height="43.2068" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feGaussianBlur stdDeviation="1.74757" result="effect1_foregroundBlur_4221_54953"/>
+        </filter>
+        <radialGradient id="paint0_radial_4221_54953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(71.8534 148.737) scale(71.747 12.5472)">
+            <stop stop-color="#CCDBEB"/>
+            <stop offset="0.515067" stop-color="#BDD0E3" stop-opacity="0.4"/>
+            <stop offset="0.746289" stop-color="#B0D0F2" stop-opacity="0.1656"/>
+            <stop offset="1" stop-color="#B0D0F2" stop-opacity="0.01"/>
+        </radialGradient>
+        <linearGradient id="paint1_linear_4221_54953" x1="71.3011" y1="38.4467" x2="71.3011" y2="51.7282" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#CCE0F4"/>
+            <stop offset="1" stop-color="#8EA7BF"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_4221_54953" x1="74.2027" y1="-45.648" x2="74.2027" y2="26.8387" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#3B496E"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <radialGradient id="paint3_radial_4221_54953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(71.5597 34.4689) rotate(-90) scale(34.602 51.4663)">
+            <stop stop-color="#485679"/>
+            <stop offset="0.397859" stop-color="#46557E"/>
+            <stop offset="0.872917" stop-color="#6F82B1"/>
+        </radialGradient>
+        <radialGradient id="paint4_radial_4221_54953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(71.2651 32.1554) rotate(-90) scale(26.5631 25.9002)">
+            <stop offset="0.843094" stop-color="#8698C5"/>
+            <stop offset="1" stop-color="#475A89"/>
+        </radialGradient>
+        <linearGradient id="paint5_linear_4221_54953" x1="30.0584" y1="45.6417" x2="71.3011" y2="110.651" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E4F2FF"/>
+            <stop offset="0.537495" stop-color="#F5FAFF"/>
+            <stop offset="0.807978" stop-color="#E9F4FF"/>
+            <stop offset="1" stop-color="#E9F4FF"/>
+        </linearGradient>
+        <radialGradient id="paint6_radial_4221_54953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(71.3011 78.4961) rotate(90) scale(50.3301 66.4054)">
+            <stop stop-color="#EEF7FF"/>
+            <stop offset="0.480806" stop-color="white" stop-opacity="0"/>
+            <stop offset="0.992174" stop-color="#E7EFFA"/>
+        </radialGradient>
+        <linearGradient id="paint7_linear_4221_54953" x1="71.223" y1="120.932" x2="71.223" y2="111.845" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#ABBCE0"/>
+            <stop offset="0.0001" stop-color="#C8DCF2"/>
+            <stop offset="0.42338" stop-color="#E1EEFC"/>
+            <stop offset="1" stop-color="#EEF6FF"/>
+        </linearGradient>
+    </defs>
+</svg>