mosuk-ui 1.0.1

package/components/display/image/component/component.module.css

@@ -0,0 +1,54 @@
+@layer mosuk-ui {
+    @layer index-12 {
+        .container {
+            overflow: hidden;
+            position: relative;
+
+            aspect-ratio: 1/1;
+            width: 100%;
+            height: fit-content;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            transition: all 200ms ease-in-out;
+
+            &:not(:hover) {
+                transition: all 600ms ease-in-out;
+            }
+        }
+
+        .image {
+            width: 100%;
+            height: 100%;
+
+            object-fit: contain;
+            object-position: center;
+            mix-blend-mode: multiply;
+
+            user-select: none;
+
+            transition: all 200ms ease-in-out;
+
+            &:not(:hover) {
+                transition: all 600ms ease-in-out;
+            }
+        }
+
+        .svg {
+            width: 100%;
+            height: 100%;
+
+            color: var(--color-gray-300, oklch(0.872 0.01 258.338));
+
+            padding: 25%;
+
+            transition: all 200ms ease-in-out;
+
+            &:not(:hover) {
+                transition: all 600ms ease-in-out;
+            }
+        }
+    }
+}

package/components/display/image/component/image/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { ImageImageProps } from './component.interface';
+export declare function ImageImage<C extends ElementType = 'img'>({ as, src, alt, ...rest }: ImageImageProps<C>): React.JSX.Element;

package/components/display/image/component/image/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type ImageImageProps<C extends ElementType = 'img'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/display/image/component/image/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/display/image/component/image/component.js

@@ -0,0 +1,43 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import { ImageMinusIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import styles from '../component.module.css';
+export function ImageImage(_a) {
+    var as = _a.as, src = _a.src, alt = _a.alt, rest = __rest(_a, ["as", "src", "alt"]);
+    var Component = (as || 'img');
+    var _b = useState(src ? null : false), imageValid = _b[0], setImageValid = _b[1];
+    var handleLoad = function (event) {
+        var img = event.currentTarget;
+        var isValid = img.naturalWidth > 5 && img.naturalHeight > 5;
+        setImageValid(isValid);
+    };
+    var handleError = function () {
+        setImageValid(false);
+    };
+    if (!src || imageValid === false) {
+        return (React.createElement(ImageMinusIcon, { className: classNames(styles.svg, rest === null || rest === void 0 ? void 0 : rest.className) }));
+    }
+    return (React.createElement(Component, __assign({}, rest, { src: src, alt: alt || 'Изображение', onLoad: handleLoad, onError: handleError, className: classNames(styles.image, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/display/image/component/index.d.ts

@@ -0,0 +1,13 @@
+import { Image as BaseImage } from './component';
+import type { ImageProps } from './component.interface';
+import { ImageImage as BaseImageImage } from './image/component';
+import { ImageImageProps } from './image/component.interface';
+export declare const Image: typeof BaseImage & {
+    Image: typeof BaseImageImage;
+};
+export declare namespace Image {
+    type Props = ImageProps;
+    namespace Image {
+        type Props = ImageImageProps;
+    }
+}

package/components/display/image/component/index.js

@@ -0,0 +1,5 @@
+import { Image as BaseImage } from './component';
+import { ImageImage as BaseImageImage } from './image/component';
+export var Image = Object.assign(BaseImage, {
+    Image: BaseImageImage
+});

package/components/display/image/skeleton/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ImageSkeletonProps } from './component.interface';
+export declare function ImageSkeleton({ ...rest }: ImageSkeletonProps): React.JSX.Element;

package/components/display/image/skeleton/component.interface.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { SkeletonProps } from '../../skeleton/component/component.interface';
+export interface ImageSkeletonProps extends SkeletonProps<ElementType> {
+}

package/components/display/image/skeleton/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/display/image/skeleton/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { Skeleton } from '../../skeleton/component/component';
+import styles from './component.module.css';
+export function ImageSkeleton(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(Skeleton, __assign({}, rest, { className: classNames('mosuk-image', styles.image, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/display/image/skeleton/component.module.css

@@ -0,0 +1,31 @@
+@layer mosuk-ui {
+    @layer index-12 {
+        .image {
+            overflow: hidden;
+            position: relative;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            aspect-ratio: 1/1;
+            width: 100%;
+            height: fit-content;
+
+            pointer-events: none;
+
+            svg {
+                width: 100%;
+                height: 100%;
+
+                color: var(--color-gray-300, oklch(0.872 0.01 258.338));
+
+                padding: 25%;
+            }
+
+            &:not(:hover) {
+                transition: all 0.6s ease-in-out;
+            }
+        }
+    }
+}

package/components/display/image/skeleton/image/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ImageImageSkeletonProps } from './component.interface';
+export declare function ImageImageSkeleton({ ...rest }: ImageImageSkeletonProps): React.JSX.Element;

package/components/display/image/skeleton/image/component.interface.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type ImageImageSkeletonProps = HTMLAttributes<SVGElement> & {};

package/components/display/image/skeleton/image/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/display/image/skeleton/image/component.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import { ImageIcon } from 'lucide-react';
+import React from 'react';
+export function ImageImageSkeleton(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(ImageIcon, __assign({}, rest, { className: classNames(rest === null || rest === void 0 ? void 0 : rest.className) })));
+}

package/components/display/image/skeleton/index.d.ts

@@ -0,0 +1,13 @@
+import { ImagesSkeletonProps } from '../(images)/skeleton/component.interface';
+import { ImageSkeleton as BaseImageSkeleton } from './component';
+import { ImageImageSkeleton as BaseImageImageSkeleton } from './image/component';
+import { ImageImageSkeletonProps } from './image/component.interface';
+export declare const ImageSkeleton: typeof BaseImageSkeleton & {
+    Image: typeof BaseImageImageSkeleton;
+};
+export declare namespace ImageSkeleton {
+    type Props = ImagesSkeletonProps;
+    namespace Image {
+        type Props = ImageImageSkeletonProps;
+    }
+}

package/components/display/image/skeleton/index.js

@@ -0,0 +1,5 @@
+import { ImageSkeleton as BaseImageSkeleton } from './component';
+import { ImageImageSkeleton as BaseImageImageSkeleton } from './image/component';
+export var ImageSkeleton = Object.assign(BaseImageSkeleton, {
+    Image: BaseImageImageSkeleton
+});

package/components/display/row/component/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { RowProps } from './component.interface';
+export declare function Row<C extends ElementType = 'div'>({ as, ...rest }: RowProps<C>): React.JSX.Element;

package/components/display/row/component/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type RowProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/display/row/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/display/row/component/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function Row(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-row', styles.row, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/display/row/component/component.module.css

@@ -0,0 +1,26 @@
+@layer mosuk-ui {
+    @layer index-12 {
+        .row {
+            padding-top: calc(var(--spacing, 0.25rem) * 3);
+            padding-bottom: calc(var(--spacing, 0.25rem) * 3);
+            border-bottom: 1px solid var(--color-gray-100, oklch(.967 .003 264.542));
+
+            transition: all 200ms ease-in-out;
+
+            &:not(:hover) {
+                transition: all 600ms ease-in-out;
+            }
+
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+
+        @media (min-width: 1025px) {
+            .row {
+                padding-top: calc(var(--spacing, 0.25rem) * 4);
+                padding-bottom: calc(var(--spacing, 0.25rem) * 4);
+            }
+        }
+    }
+}

package/components/display/row/component/index.d.ts

@@ -0,0 +1,5 @@
+import type { RowProps } from './component.interface';
+export declare function Row(props: RowProps): import("react").JSX.Element;
+export declare namespace Row {
+    type Props = RowProps;
+}

package/components/display/row/component/index.js

@@ -0,0 +1,4 @@
+import { Row as BaseRow, } from './component';
+export function Row(props) {
+    return BaseRow(props);
+}

package/components/display/skeleton/component/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { SkeletonProps } from './component.interface';
+export declare function Skeleton<C extends ElementType = 'div'>({ as, ...rest }: SkeletonProps<C>): React.JSX.Element;

package/components/display/skeleton/component/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type SkeletonProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/display/skeleton/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/display/skeleton/component/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function Skeleton(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-skeleton', styles.skeleton, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/display/skeleton/component/component.module.css

@@ -0,0 +1,31 @@
+@layer base {
+    .skeleton {
+        overflow: hidden;
+        position: relative;
+
+        width: 100%;
+        height: 100%;
+
+        background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+
+        &::after {
+            position: absolute;
+            inset: 0;
+            content: "";
+            transform: translateX(-100%) skewX(-20deg);
+            background: linear-gradient(90deg,
+                    transparent 0%,
+                    transparent 20%,
+                    rgba(255, 255, 255, 0.8) 50%,
+                    transparent 80%,
+                    transparent 100%);
+            animation: shimmer 1.5s infinite;
+        }
+    }
+
+    @keyframes shimmer {
+        100% {
+            transform: translateX(100%) skewX(-20deg);
+        }
+    }
+}

package/components/display/skeleton/component/index.d.ts

@@ -0,0 +1,6 @@
+import { Skeleton as BaseSkeleton } from './component';
+import type { SkeletonProps } from './component.interface';
+export declare const Skeleton: typeof BaseSkeleton;
+export declare namespace Skeleton {
+    type Props = SkeletonProps;
+}

package/components/display/skeleton/component/index.js

@@ -0,0 +1,2 @@
+import { Skeleton as BaseSkeleton } from './component';
+export var Skeleton = BaseSkeleton;

package/components/display/video/component/component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { VideoProps, VideoVideoProps } from './component.interface';
+export declare function Video({ ...props }: VideoProps): React.JSX.Element;
+export declare function VideoVideo({ ...props }: VideoVideoProps): React.JSX.Element;

package/components/display/video/component/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export type VideoProps = HTMLAttributes<HTMLDivElement> & {};
+export type VideoVideoProps = HTMLAttributes<HTMLVideoElement> & {};

package/components/display/video/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/display/video/component/component.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styles from './component.module.css';
+export function Video(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    return (React.createElement("div", __assign({}, props, { className: "mosuk-video ".concat(styles.video, " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') }), props === null || props === void 0 ? void 0 : props.children));
+}
+export function VideoVideo(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    return (React.createElement("video", __assign({}, props, { className: "".concat(styles.player, " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') }), props === null || props === void 0 ? void 0 : props.children));
+}

package/components/display/video/component/component.module.css

@@ -0,0 +1,34 @@
+@layer mosuk-ui {
+    @layer index-12 {
+        .video {
+            overflow: hidden;
+            position: relative;
+            display: block;
+
+            aspect-ratio: 1/1;
+            width: 100%;
+            height: fit-content;
+
+            transition: all 200ms ease-in-out;
+
+            .player {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                object-position: center;
+
+                &:fullscreen,
+                &:-webkit-full-screen {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                    object-position: center;
+                }
+            }
+
+            &:not(:hover) {
+                transition: all 600ms ease-in-out;
+            }
+        }
+    }
+}

package/components/display/video/component/index.d.ts

@@ -0,0 +1,10 @@
+import { VideoVideo as BaseVideoVideo } from './component';
+import type { VideoProps } from './component.interface';
+export declare function Video(props: VideoProps): import("react").JSX.Element;
+export declare namespace Video {
+    var Video: typeof BaseVideoVideo;
+}
+export declare namespace Video {
+    type Props = VideoProps;
+    const Video: typeof BaseVideoVideo;
+}

package/components/display/video/component/index.js

@@ -0,0 +1,7 @@
+import { Video as BaseVideo, VideoVideo as BaseVideoVideo } from './component';
+export function Video(props) {
+    return BaseVideo(props);
+}
+Video.Video = BaseVideoVideo;
+(function (Video_1) {
+})(Video || (Video = {}));

package/components/display/video/skeleton/component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { VideoSkeletonProps, VideoSkeletonVideoProps } from './component.interface';
+export declare function VideoSkeleton({ ...props }: VideoSkeletonProps): React.JSX.Element;
+export declare function VideoSkeletonVideo({ ...props }: VideoSkeletonVideoProps): React.JSX.Element;

package/components/display/video/skeleton/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export type VideoSkeletonProps = HTMLAttributes<HTMLDivElement> & {};
+export type VideoSkeletonVideoProps = HTMLAttributes<SVGElement> & {};

package/components/display/video/skeleton/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/display/video/skeleton/component.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Video } from 'lucide-react';
+import React from 'react';
+import styles from './component.module.css';
+export function VideoSkeleton(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    return (React.createElement("div", __assign({}, props, { className: "mosuk-video ".concat(styles.video, " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') }), props === null || props === void 0 ? void 0 : props.children));
+}
+export function VideoSkeletonVideo(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(Video, __assign({}, props));
+}

package/components/display/video/skeleton/component.module.css

@@ -0,0 +1,28 @@
+@layer mosuk-ui {
+    @layer index-12 {
+        .video {
+            overflow: hidden;
+            position: relative;
+            display: block;
+
+            width: 100%;
+            height: fit-content;
+            aspect-ratio: 3/4;
+
+            background-color: white;
+            border: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+            border-radius: var(--radius-xl, .75rem);
+
+            pointer-events: none;
+
+            svg {
+                width: 100%;
+                height: 100%;
+
+                color: var(--color-gray-300, oklch(0.872 0.01 258.338));
+
+                padding: 25%;
+            }
+        }
+    }
+}