mosuk-ui 1.0.1

package/components/display/file/component/file/component.js

@@ -0,0 +1,41 @@
+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 { File as FileIcon, FileMinus } from 'lucide-react';
+import { AdobePdf } from 'mosuk-icons/shared/components/adobe/pdf';
+import React from 'react';
+import { ImageImage } from '../../../image/component/image/component';
+import styles from '../component.module.css';
+import { imageExtensions } from './component.constant';
+export function FileFile(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var src = _a.src, alt = _a.alt, props = __rest(_a, ["src", "alt"]);
+    if (!src)
+        return (React.createElement(FileMinus, __assign({}, props, { className: ((_b = styles.file) !== null && _b !== void 0 ? _b : '') + ' ' + ((_c = props === null || props === void 0 ? void 0 : props.className) !== null && _c !== void 0 ? _c : '') })));
+    if (imageExtensions.some(function (ext) { return src.includes(ext); })) {
+        return (React.createElement(ImageImage, __assign({}, props, { src: src, alt: alt || 'Изображение', className: ((_d = styles.image) !== null && _d !== void 0 ? _d : '') + ' ' + ((_e = props === null || props === void 0 ? void 0 : props.className) !== null && _e !== void 0 ? _e : '') })));
+    }
+    if (src.toLowerCase().includes('.pdf')) {
+        return (React.createElement(AdobePdf, __assign({}, props, { alt: alt || 'PDF', className: ((_f = styles.file) !== null && _f !== void 0 ? _f : '') + ' ' + ((_g = props === null || props === void 0 ? void 0 : props.className) !== null && _g !== void 0 ? _g : '') })));
+    }
+    return (React.createElement(FileIcon, __assign({}, props, { className: ((_h = styles.file) !== null && _h !== void 0 ? _h : '') + ' ' + ((_j = props === null || props === void 0 ? void 0 : props.className) !== null && _j !== void 0 ? _j : '') })));
+}

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

@@ -0,0 +1,32 @@
+import { FileActionsAction } from './actions/action/component';
+import { FileActionsActionProps } from './actions/action/component.interface';
+import { FileActions } from './actions/component';
+import { FileActionsProps } from './actions/component.interface';
+import { File as Component } from './component';
+import { FileProps } from './component.interface';
+import { FileFile } from './file/component';
+import { FileFileProps } from './file/component.interface';
+import { FileInput } from './input/component';
+import { FileInputProps } from './input/component.interface';
+export declare const File: typeof Component & {
+    File: typeof FileFile;
+    Input: typeof FileInput;
+    Actions: typeof FileActions & {
+        Action: typeof FileActionsAction;
+    };
+};
+export declare namespace File {
+    type Props = FileProps;
+    namespace File {
+        type Props = FileFileProps;
+    }
+    namespace Input {
+        type Props = FileInputProps;
+    }
+    namespace Actions {
+        type Props = FileActionsProps;
+        namespace Action {
+            type Props = FileActionsActionProps;
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+import { FileActionsAction } from './actions/action/component';
+import { FileActions } from './actions/component';
+import { File as Component } from './component';
+import { FileFile } from './file/component';
+import { FileInput } from './input/component';
+export var File = Object.assign(Component, {
+    File: FileFile,
+    Input: FileInput,
+    Actions: Object.assign(FileActions, {
+        Action: FileActionsAction,
+    }),
+});

package/components/display/file/component/input/component.d.ts

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

package/components/display/file/component/input/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { InputHTMLAttributes } from 'react';
+export interface FileInputProps extends InputHTMLAttributes<HTMLInputElement> {
+}

package/components/display/file/component/input/component.interface.js

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

package/components/display/file/component/input/component.js

@@ -0,0 +1,37 @@
+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, { useContext, useId } from 'react';
+import { FileContext } from '../component';
+import styles from '../component.module.css';
+export function FileInput(_a) {
+    var _b, _c, _d, _e, _f;
+    var props = __rest(_a, []);
+    var context = useContext(FileContext);
+    if (!context) {
+        throw new Error('FileInput должен использоваться только внутри компонента File');
+    }
+    if (!(props === null || props === void 0 ? void 0 : props.id)) {
+        props.id = useId();
+    }
+    return (React.createElement("input", __assign({}, props, { type: (_b = props.type) !== null && _b !== void 0 ? _b : 'text', id: props === null || props === void 0 ? void 0 : props.id, name: (_c = props.name) !== null && _c !== void 0 ? _c : props.id, placeholder: (_d = props === null || props === void 0 ? void 0 : props.placeholder) !== null && _d !== void 0 ? _d : 'Название файла', className: ((_e = styles.input) !== null && _e !== void 0 ? _e : '') + ' ' + ((_f = props === null || props === void 0 ? void 0 : props.className) !== null && _f !== void 0 ? _f : '') })));
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FileSkeletonFileProps, FileSkeletonProps } from './component.interface';
+export declare function FileSkeleton({ ...props }: FileSkeletonProps): React.JSX.Element;
+export declare function FileSkeletonFile({ ...props }: FileSkeletonFileProps): React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import { HTMLAttributes, RefObject, SVGProps } from 'react';
+export type FileSkeletonProps = HTMLAttributes<HTMLDivElement>;
+export type FileSkeletonFileProps = SVGProps<SVGSVGElement> & {
+    ref?: RefObject<SVGSVGElement>;
+};

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

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

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

@@ -0,0 +1,35 @@
+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 { File as FileIcon } from 'lucide-react';
+import React from 'react';
+import styles from './component.module.css';
+export function FileSkeleton(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    return (React.createElement("div", __assign({}, props, { className: "mosuk-file-skeleton ".concat(styles.container, " ").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 FileSkeletonFile(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    return (React.createElement(FileIcon, __assign({}, props, { ref: props === null || props === void 0 ? void 0 : props.ref, className: "".concat(styles.file, " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') })));
+}

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

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

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

@@ -0,0 +1,11 @@
+import { FileSkeleton as Component, FileSkeletonFile } from './component';
+import { FileSkeletonFileProps, FileSkeletonProps } from './component.interface';
+export declare const FileSkeleton: typeof Component & {
+    File: typeof FileSkeletonFile;
+};
+export declare namespace FileSkeleton {
+    type Props = FileSkeletonProps;
+    namespace File {
+        type Props = FileSkeletonFileProps;
+    }
+}

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

@@ -0,0 +1,4 @@
+import { FileSkeleton as Component, FileSkeletonFile } from './component';
+export var FileSkeleton = Object.assign(Component, {
+    File: FileSkeletonFile,
+});

package/components/display/image/(images)/component/component.d.ts

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

package/components/display/image/(images)/component/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'react';
+import { SwiperProps } from 'swiper/react';
+export interface ImagesProps extends SwiperProps {
+    ref?: Ref<any>;
+}

package/components/display/image/(images)/component/component.interface.js

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

package/components/display/image/(images)/component/component.js

@@ -0,0 +1,58 @@
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import classNames from 'classnames';
+import React, { Children, isValidElement, useImperativeHandle, useRef } from 'react';
+import { Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Image } from '../../component/component';
+import styles from './component.module.css';
+import { ImagesImage } from './image/component';
+export function Images(_a) {
+    var _b, _c, _d, _e;
+    var ref = _a.ref, rest = __rest(_a, ["ref"]);
+    var swiperRef = useRef(null);
+    useImperativeHandle(ref, function () { return swiperRef.current; });
+    var handleHoverNavigation = function (index) {
+        if (swiperRef.current && swiperRef.current.swiper) {
+            swiperRef.current.swiper.slideTo(index);
+        }
+    };
+    var totalSlides = Children.toArray(rest === null || rest === void 0 ? void 0 : rest.children).filter(function (child) { return isValidElement(child) && child.type === ImagesImage; });
+    return (React.createElement(Image, __assign({ as: Swiper }, rest, { ref: swiperRef, modules: __spreadArray([Pagination], ((rest === null || rest === void 0 ? void 0 : rest.modules) || []), true), speed: (_b = rest === null || rest === void 0 ? void 0 : rest.speed) !== null && _b !== void 0 ? _b : 400, spaceBetween: (_c = rest === null || rest === void 0 ? void 0 : rest.spaceBetween) !== null && _c !== void 0 ? _c : 0, slidesPerView: (_d = rest === null || rest === void 0 ? void 0 : rest.slidesPerView) !== null && _d !== void 0 ? _d : 1, draggable: (_e = rest === null || rest === void 0 ? void 0 : rest.draggable) !== null && _e !== void 0 ? _e : true, pagination: __assign({ clickable: true }, (typeof (rest === null || rest === void 0 ? void 0 : rest.pagination) === 'object' ? rest.pagination : {})), className: classNames('images', styles.images, rest === null || rest === void 0 ? void 0 : rest.className) }),
+        Children.map(rest === null || rest === void 0 ? void 0 : rest.children, function (child, index) {
+            if (isValidElement(child) && child.type === ImagesImage) {
+                return (React.createElement(SwiperSlide, { key: index, className: classNames('images-slide') }, child));
+            }
+            return child;
+        }),
+        totalSlides.length > 1 && (React.createElement("div", { className: styles.areas }, totalSlides.map(function (_, index) { return (React.createElement("div", { key: index, className: styles.area, onMouseEnter: function () { return handleHoverNavigation(index); } })); })))));
+}

package/components/display/image/(images)/component/component.module.css

@@ -0,0 +1,30 @@
+@layer mosuk-ui {
+    @layer index-22 {
+        .areas {
+            display: none;
+        }
+
+        @media (min-width: 769px) {
+            .areas {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1;
+
+                width: 100%;
+                height: 100%;
+
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .area {
+                    width: 100%;
+                    height: 100%;
+
+                    pointer-events: auto;
+                }
+            }
+        }
+    }
+}

package/components/display/image/(images)/component/image/component.d.ts

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

package/components/display/image/(images)/component/image/component.interface.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { ImageProps as ParentImageProps } from '../../../component/component.interface';
+export interface ImagesImageProps extends ParentImageProps<ElementType> {
+}

package/components/display/image/(images)/component/image/component.interface.js

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

package/components/display/image/(images)/component/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 React from 'react';
+import { ImageImage } from '../../../component/image/component';
+export function ImagesImage(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(ImageImage, __assign({}, rest, { className: classNames('images-image', rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/display/image/(images)/component/index.d.ts

@@ -0,0 +1,13 @@
+import { Images as BaseImages } from './component';
+import type { ImagesProps } from './component.interface';
+import { ImagesImage } from './image/component';
+import { ImagesImageProps } from './image/component.interface';
+export declare const Images: typeof BaseImages & {
+    Image: typeof ImagesImage;
+};
+export declare namespace Images {
+    type Props = ImagesProps;
+    namespace Image {
+        type Props = ImagesImageProps;
+    }
+}

package/components/display/image/(images)/component/index.js

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

package/components/display/image/(images)/skeleton/component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ImagesSkeletonImageProps, ImagesSkeletonProps } from './component.interface';
+export declare function ImagesSkeleton({ ...props }: ImagesSkeletonProps): React.JSX.Element;
+export declare function ImagesSkeletonImage({ ...props }: ImagesSkeletonImageProps): React.JSX.Element;

package/components/display/image/(images)/skeleton/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes, RefObject, SVGProps } from 'react';
+export type ImagesSkeletonProps = HTMLAttributes<HTMLDivElement>;
+export type ImagesSkeletonImageProps = SVGProps<SVGSVGElement> & {
+    ref?: RefObject<SVGSVGElement>;
+};

package/components/display/image/(images)/skeleton/component.interface.js

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

package/components/display/image/(images)/skeleton/component.js

@@ -0,0 +1,35 @@
+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 { Image as ImageIcon } from 'lucide-react';
+import React from 'react';
+import styles from './component.module.css';
+export function ImagesSkeleton(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    return (React.createElement("div", __assign({}, props, { className: "mosuk-image-skeleton ".concat(styles.image, " ").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 ImagesSkeletonImage(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    return React.createElement(ImageIcon, __assign({}, props, { ref: props === null || props === void 0 ? void 0 : props.ref, className: "".concat(styles.icon, " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') }));
+}

package/components/display/image/(images)/skeleton/component.module.css

@@ -0,0 +1,47 @@
+@layer mosuk-ui {
+    @layer index-22 {
+        .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;
+
+            animation: image-skeleton-animation 1s ease-in-out infinite;
+
+            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;
+            }
+        }
+    }
+
+    @keyframes image-skeleton-animation {
+        0% {
+            opacity: 1;
+        }
+
+        50% {
+            opacity: 0.8;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}

package/components/display/image/(images)/skeleton/index.d.ts

@@ -0,0 +1,13 @@
+import { ImagesSkeletonImage as BaseImagesSkeletonImage } from './component';
+import type { ImagesSkeletonImageProps, ImagesSkeletonProps } from './component.interface';
+export declare function ImagesSkeleton(props: ImagesSkeletonProps): import("react").JSX.Element;
+export declare namespace ImagesSkeleton {
+    var Image: typeof BaseImagesSkeletonImage;
+}
+export declare namespace ImagesSkeleton {
+    type Props = ImagesSkeletonProps;
+    const Image: typeof BaseImagesSkeletonImage;
+    namespace Image {
+        type Props = ImagesSkeletonImageProps;
+    }
+}

package/components/display/image/(images)/skeleton/index.js

@@ -0,0 +1,7 @@
+import { ImagesSkeleton as BaseImagesSkeleton, ImagesSkeletonImage as BaseImagesSkeletonImage, } from './component';
+export function ImagesSkeleton(props) {
+    return BaseImagesSkeleton(props);
+}
+ImagesSkeleton.Image = BaseImagesSkeletonImage;
+(function (ImagesSkeleton) {
+})(ImagesSkeleton || (ImagesSkeleton = {}));

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

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

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

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

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

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

package/components/display/image/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 Image(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-image', styles.container, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}