@ludo.ninja/components 2.3.34 → 2.3.36

package/build/modules/gallery/store.js

@@ -1,97 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGalleryStore = void 0;
-const builder_1 = require("../../entities/gallery/builder");
-const getDimensionsImage_1 = require("../../utils/getDimensionsImage");
-const shallow_1 = require("zustand/shallow");
-const traditional_1 = require("zustand/traditional");
-const initialState = {
-    gallery: null,
-    fetchGalleryV2: null,
-    allResults: 0,
-    isErrorFileGallery: false,
-};
-exports.useGalleryStore = (0, traditional_1.createWithEqualityFn)()((setState, getState) => ({
-    fetchGalleryV2: initialState.fetchGalleryV2,
-    gallery: initialState.gallery,
-    setGallery: (gallery) => {
-        if (gallery) {
-            setState({
-                gallery: (0, builder_1.buildGallery)(gallery),
-                fetchGalleryV2: gallery,
-            });
-        }
-        else {
-            setState({ gallery: null, fetchGalleryV2: null });
-        }
-    },
-    updateGalleryInfo: ({ galleryName, galleryDescription }) => {
-        setState((prev) => {
-            const newGallery = {
-                ...prev.fetchGalleryV2,
-                name: galleryName,
-                description: galleryDescription,
-            };
-            return {
-                fetchGalleryV2: newGallery,
-                gallery: (0, builder_1.buildGallery)(newGallery),
-            };
-        });
-    },
-    updateGalleryBanner: (banner) => {
-        setState((prev) => {
-            const newGallery = {
-                ...prev.fetchGalleryV2,
-                banner,
-            };
-            return {
-                fetchGalleryV2: newGallery,
-                gallery: (0, builder_1.buildGallery)(newGallery),
-            };
-        });
-    },
-    fileGallery: "",
-    isErrorFileGallery: initialState.isErrorFileGallery,
-    addFileGalleryWithValidation: async (e) => {
-        const fileTarget = e.target.files?.[0];
-        if (!fileTarget)
-            return;
-        // console.log('fileTarget', fileTarget);
-        // ======validation image
-        if (fileTarget.size > 1048576) {
-            setState({ isErrorFileGallery: true });
-            return;
-            // return alert('File is too big, max size 1mb!');
-        }
-        else {
-            const dimensions = await (0, getDimensionsImage_1.getDimensionsImage)(fileTarget);
-            const isErrorNew = !!(dimensions && (dimensions.width > 1200 || dimensions.height > 1200));
-            setState({ isErrorFileGallery: isErrorNew });
-            if (isErrorNew) {
-                return;
-            }
-        }
-        //add file to cropper and banner
-        const url = URL.createObjectURL(fileTarget);
-        // console.log('url', url);
-        setState({ fileGallery: url });
-    },
-    removeFileGallery: () => {
-        const fileGallery = getState().fileGallery;
-        if (fileGallery) {
-            URL.revokeObjectURL(fileGallery);
-            setState({ fileGallery: "" });
-        }
-    },
-    allResults: initialState.allResults,
-    setAllResults: (allResults) => {
-        setState({ allResults });
-    },
-    decrementAllResults: () => {
-        setState((prev) => ({ allResults: prev.allResults - 1 }));
-    },
-    reinitStore: () => {
-        setState(initialState);
-        getState().removeFileGallery();
-    },
-}), shallow_1.shallow);

package/build/modules/gallery/ui/AllResults.d.ts

@@ -1,3 +0,0 @@
-export declare const AllResultsGallery: ({ isShowCounts, }: {
-    isShowCounts: boolean;
-}) => import("react/jsx-runtime").JSX.Element | null;

package/build/modules/gallery/ui/AllResults.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AllResultsGallery = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const store_1 = require("../store");
-const colors_1 = require("../../../styles/colors");
-const index_1 = require("../../../system/index");
-const AllResultsGallery = ({ isShowCounts, }) => {
-    const allResults = (0, store_1.useGalleryStore)((state) => state.allResults);
-    return isShowCounts ? ((0, jsx_runtime_1.jsxs)(index_1.H5, { mt: 10, fontSize: 13, color: colors_1.TextDarkGrayColor, children: [allResults, " ", allResults !== 1 ? 'items' : 'item'] })) : null;
-};
-exports.AllResultsGallery = AllResultsGallery;

package/build/modules/gallery/ui/Description.d.ts

@@ -1,4 +0,0 @@
-export declare const Description: ({ description, lineClamp, }: {
-    description: string;
-    lineClamp?: number;
-}) => import("react/jsx-runtime").JSX.Element | null;

package/build/modules/gallery/ui/Description.js

@@ -1,101 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Description = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_hyphen_1 = __importDefault(require("react-hyphen"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const typography_1 = require("../../../styles/typography");
-const vars_1 = require("../../../fonts/vars");
-const SDescription = styled_components_1.default.div `
-  margin-top: 16px;
-  position: relative;
-  overflow: hidden;
-
-  .content {
-    display: -webkit-box;
-    word-break: break-word;
-    -webkit-box-orient: vertical;
-    white-space: normal;
-    overflow: hidden;
-  }
-
-  .calculate {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  //=======================
-  .descr {
-    font-family: ${vars_1.dmsansFontVarCss.css};
-    word-wrap: break-word;
-    ${typography_1.MainText};
-    color: ${colors_1.TextGrayColor};
-    white-space: normal;
-    overflow: visible;
-    text-overflow: unset;
-
-    ${ScreenWidth_1.mediaQuery.mobile} {
-      .descr {
-        font-size: 1.4em;
-      }
-    }
-  }
-
-  .readMoreContainer {
-    padding-top: 0;
-    display: grid;
-    grid-template-rows: 0fr;
-    opacity: 0;
-    pointer-events: none;
-    overflow: hidden;
-
-    &.show {
-      transition: grid-template-rows 300ms ease-in-out,
-        padding-top 300ms ease-in-out, opacity 300ms ease-in-out;
-      padding-top: 4px;
-      grid-template-rows: 1fr;
-      opacity: 1;
-      pointer-events: unset;
-    }
-  }
-
-  .readMore {
-    ${typography_1.FH6};
-    color: ${colors_1.AccentColor};
-
-    user-select: none;
-    cursor: pointer;
-    min-height: 0;
-  }
-`;
-const Description = ({ description, lineClamp = 2, }) => {
-    const container = (0, react_1.useRef)(null);
-    const position = (0, react_1.useRef)(null);
-    const [isShowFullDescription, setIsShowFullDescription] = (0, react_1.useState)(false);
-    const [isNeedReadMore, setIsNeedReadMore] = (0, react_1.useState)(false);
-    const handleReadMore = () => {
-        setIsNeedReadMore(false);
-        setIsShowFullDescription(true);
-    };
-    (0, react_1.useEffect)(() => {
-        setIsNeedReadMore(container.current?.clientHeight > position.current?.clientHeight);
-    }, [description]);
-    if (description) {
-        const content = ((0, jsx_runtime_1.jsx)(react_hyphen_1.default, { children: (0, jsx_runtime_1.jsx)("p", { className: `descr`, children: description }) }));
-        return ((0, jsx_runtime_1.jsxs)(SDescription, { children: [(0, jsx_runtime_1.jsx)("div", { className: `content`, style: {
-                        WebkitLineClamp: isShowFullDescription ? 'unset' : lineClamp,
-                    }, ref: position, children: content }), (0, jsx_runtime_1.jsx)("div", { className: `readMoreContainer ${isNeedReadMore ? 'show' : ''}`, children: (0, jsx_runtime_1.jsx)("span", { className: `readMore `, onClick: handleReadMore, children: "Read more" }) }), (0, jsx_runtime_1.jsx)("div", { className: `calculate`, ref: container, children: content })] }));
-    }
-    return null;
-};
-exports.Description = Description;

package/build/modules/gallery/ui/EditGallery.d.ts

@@ -1,9 +0,0 @@
-import { TGallery } from '../../../entities/gallery/types';
-export declare const EditGallery: ({ galleryId, handleRemoveAsset, gallery, titleAssets, titleForm, inputPlaceHolderText, }: {
-    gallery: TGallery;
-    galleryId: string;
-    handleRemoveAsset: (creationIdToRemove: string) => (itemType: "asset" | "collection") => void;
-    titleAssets: string;
-    titleForm: string;
-    inputPlaceHolderText: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/build/modules/gallery/ui/EditGallery.js

@@ -1,51 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditGallery = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const editGalleryForm_1 = __importDefault(require("./editGalleryForm"));
-const useRemoveAssetFromGallery_1 = require("../../../api/server-galleries/mutations/useRemoveAssetFromGallery");
-const useRemoveCollectionFromGallery_1 = require("../../../api/server-galleries/mutations/useRemoveCollectionFromGallery");
-const useGetAssetsAndCollectionForFavorite_1 = require("../api/useGetAssetsAndCollectionForFavorite");
-const store_1 = require("../store");
-const itemsPreview_1 = __importDefault(require("./itemsPreview"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const StyledAddFavlist = styled_components_1.default.div `
-  display: flex;
-
-  @media (max-width: 767px) {
-    flex-direction: column;
-  }
-`;
-const EditGallery = ({ galleryId, handleRemoveAsset, gallery, titleAssets, titleForm, inputPlaceHolderText, }) => {
-    const { creations: creationsList, removeCreation, isLoading, loadMore, isNextLoading, } = (0, useGetAssetsAndCollectionForFavorite_1.useGetAssetsAndCollectionForFavorite)({
-        gallery,
-        activeTab: null,
-    });
-    const { removeAssetFromGallery } = (0, useRemoveAssetFromGallery_1.useRemoveAssetFromGalleryV2)();
-    const { removeCollectionFromGallery } = (0, useRemoveCollectionFromGallery_1.useRemoveCollectionFromGalleryV2)();
-    const handleDeleteCreation = async (itemId) => {
-        const id = itemId.split(".").splice(1).join(".");
-        if (itemId.split(".")[0] === "collection") {
-            await removeCollectionFromGallery({
-                galleryId,
-                collectionId: id,
-            });
-            handleRemoveAsset(id)("collection");
-            removeCreation(id, "collection");
-        }
-        else {
-            await removeAssetFromGallery({
-                galleryId,
-                assetId: id,
-            });
-            handleRemoveAsset(id)("asset");
-            removeCreation(id, "asset");
-        }
-    };
-    const allResults = (0, store_1.useGalleryStore)((state) => state.allResults);
-    return ((0, jsx_runtime_1.jsxs)(StyledAddFavlist, { children: [(0, jsx_runtime_1.jsx)(itemsPreview_1.default, { creations: creationsList, title: titleAssets, deleteMethod: handleDeleteCreation, isLoading: isLoading, loadMore: loadMore, isNextLoading: isNextLoading, allCount: allResults }), (0, jsx_runtime_1.jsx)(editGalleryForm_1.default, { name: gallery.name, description: gallery.description, title: titleForm, inputPlaceHolderText: inputPlaceHolderText, galleryId: galleryId })] }));
-};
-exports.EditGallery = EditGallery;

package/build/modules/gallery/ui/GalleryDeleteIcon.d.ts

@@ -1,4 +0,0 @@
-export declare const GalleryDeleteIcon: ({ onClick, className }: {
-    onClick: () => void;
-    className?: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/build/modules/gallery/ui/GalleryDeleteIcon.js

@@ -1,30 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GalleryDeleteIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const IconButton_1 = __importDefault(require("../../../system/Buttons/IconButton"));
-const constants_1 = require("@ludo.ninja/core/build/constants");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const SImg = styled_components_1.default.img `
-  width: 18px;
-  height: 18px;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    width: ${(0, _4k_1.adaptiveValueCalc)(18)};
-    height: ${(0, _4k_1.adaptiveValueCalc)(18)};
-  }
-`;
-const GalleryDeleteIcon = ({ onClick, className }) => {
-    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    const handleHover = (e) => {
-        setIsHovered(e.type === "mouseenter");
-    };
-    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, { handleHoverFn: handleHover, onClick: onClick, className: `trash${className ? ` ${className}` : ""}`, icon: isHovered ? ((0, jsx_runtime_1.jsx)(SImg, { src: `${constants_1.staticLink}/public/iconButton/trash_open.svg`, alt: "trash_open" })) : ((0, jsx_runtime_1.jsx)(SImg, { src: `${constants_1.staticLink}/public/iconButton/trash.svg`, alt: "trash" })) }));
-};
-exports.GalleryDeleteIcon = GalleryDeleteIcon;

package/build/modules/gallery/ui/PlaceholderItemsGallery.d.ts

@@ -1 +0,0 @@
-export declare const PlaceholderItemsGallery: () => import("react/jsx-runtime").JSX.Element;

package/build/modules/gallery/ui/PlaceholderItemsGallery.js

@@ -1,71 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaceholderItemsGallery = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const SWrapper = styled_components_1.default.div `
-  padding: 8px;
-  display: flex;
-  gap: 16px;
-
-  & > :last-child {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .first {
-    border-radius: 6px;
-    height: 32px;
-    width: 32px;
-  }
-
-  .second {
-    border-radius: 3px;
-    height: 14px;
-    width: 110px;
-  }
-
-  .third {
-    border-radius: 3px;
-    height: 12px;
-    width: 67px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(8)};
-    gap: ${(0, _4k_1.adaptiveValueCalc)(16)};
-
-    & > :last-child {
-      gap: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    }
-
-    .first {
-      border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-      height: ${(0, _4k_1.adaptiveValueCalc)(32)};
-      width: ${(0, _4k_1.adaptiveValueCalc)(32)};
-    }
-
-    .second {
-      border-radius: ${(0, _4k_1.adaptiveValueCalc)(3)};
-      height: ${(0, _4k_1.adaptiveValueCalc)(14)};
-      width: ${(0, _4k_1.adaptiveValueCalc)(110)};
-    }
-
-    .third {
-      border-radius: ${(0, _4k_1.adaptiveValueCalc)(3)};
-      height: ${(0, _4k_1.adaptiveValueCalc)(12)};
-      width: ${(0, _4k_1.adaptiveValueCalc)(67)};
-    }
-  }
-`;
-const PlaceholderItemsGallery = () => {
-    return ((0, jsx_runtime_1.jsxs)(SWrapper, { children: [(0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { baseColor: "#CFD5EA", className: "first" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { baseColor: "#CFD5EA", className: "second" }), (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { baseColor: "#CFD5EA", className: "third" })] })] }));
-};
-exports.PlaceholderItemsGallery = PlaceholderItemsGallery;

package/build/modules/gallery/ui/STopSections.d.ts

@@ -1 +0,0 @@
-export declare const STopSections: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/modules/gallery/ui/STopSections.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.STopSections = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-exports.STopSections = styled_components_1.default.div `
-  position: relative;
-  width: 1080px;
-  margin: 0 auto;
-  padding-top: 124px;
-  padding-bottom: 24px;
-
-  ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
-    width: 704px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.mobile} {
-    width: 320px;
-    padding-top: 80px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    width: ${(0, _4k_1.adaptiveValueCalc)(1080)};
-    padding-top: ${(0, _4k_1.adaptiveValueCalc)(124)};
-    padding-bottom: ${(0, _4k_1.adaptiveValueCalc)(24)};
-  }
-`;

package/build/modules/gallery/ui/chooseGalleryItems/chooseGalleryItem/index.d.ts

@@ -1,7 +0,0 @@
-import { TGallery } from '../../../../../entities/gallery/types';
-declare const ChooseItem: ({ galleryItem, handleIsSelected, isSelected, }: {
-    galleryItem: TGallery;
-    handleIsSelected: (arg: TGallery) => void;
-    isSelected: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ChooseItem;

package/build/modules/gallery/ui/chooseGalleryItems/chooseGalleryItem/index.js

@@ -1,97 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const vars_1 = require("../../../../../fonts/vars");
-const ScreenWidth_1 = require("../../../../../styles/ScreenWidth");
-const colors_1 = require("../../../../../styles/colors");
-const typography_1 = require("../../../../../styles/typography");
-const constants_1 = require("@ludo.ninja/core/build/constants");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const styled_components_1 = __importDefault(require("styled-components"));
-// Styles
-const StyledChooseItem = styled_components_1.default.div `
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 8px;
-  border-radius: 8px;
-  background-color: ${(props) => (props.isSelected ? colors_1.InactiveButtonColor : "none")};
-
-  .content-item-gallery-pic-default {
-    .image {
-      background-image: url("${(props) => props.isSelected
-    ? `${constants_1.staticLink}/public/gallery/defaultImageSelected.svg`
-    : `${constants_1.staticLink}/public/gallery/defaultImage.svg`}");
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: cover;
-    }
-  }
-
-  &:hover {
-    background-color: ${(props) => (props.isSelected ? "none" : colors_1.InactiveButtonColor)};
-
-    .content-item-gallery-pic-default {
-      .image {
-        background-image: url("${constants_1.staticLink}/gallery/defaultImageSelected.svg");
-      }
-    }
-  }
-
-  .content-item-wrapper {
-    display: flex;
-    align-items: center;
-  }
-
-  .content-item-gallery-pic,
-  .content-item-gallery-pic-default {
-    img,
-    svg {
-      border-radius: 6px;
-      width: 32px;
-      height: 32px;
-    }
-  }
-
-  .content-item-gallery-name {
-    margin-left: 16px;
-
-    .name {
-      ${typography_1.FH6};
-      color: ${colors_1.BlackColor};
-    }
-
-    .items-count {
-      font-family: ${vars_1.dmsansFontVarCss.css};
-      ${typography_1.FH7};
-      color: ${colors_1.TextGrayColor};
-    }
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(6)} ${(0, _4k_1.adaptiveValueCalc)(8)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(8)};
-
-    .content-item-gallery-pic,
-    .content-item-gallery-pic-default {
-      img,
-      svg {
-        border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-        width: ${(0, _4k_1.adaptiveValueCalc)(32)};
-        height: ${(0, _4k_1.adaptiveValueCalc)(32)};
-      }
-    }
-
-    .content-item-gallery-name {
-      margin-left: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    }
-  }
-`;
-// Component
-const ChooseItem = ({ galleryItem, handleIsSelected, isSelected, }) => ((0, jsx_runtime_1.jsx)(StyledChooseItem, { isSelected: isSelected, onClick: () => handleIsSelected(galleryItem), children: (0, jsx_runtime_1.jsxs)("div", { className: "content-item-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "content-item-gallery-pic-default", children: (0, jsx_runtime_1.jsx)("div", { className: "image" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "content-item-gallery-name", children: [(0, jsx_runtime_1.jsx)("p", { className: "name", children: galleryItem.name }), (0, jsx_runtime_1.jsx)("span", { className: `items-count`, children: galleryItem.itemsCount })] })] }) }));
-// Export
-exports.default = ChooseItem;

package/build/modules/gallery/ui/chooseGalleryItems/index.d.ts

@@ -1,15 +0,0 @@
-import { ApolloError } from "@apollo/client";
-interface IGalleryItems {
-    setAddGallery: (value: boolean) => void;
-    addMethod: (galleryId: string, ids: string[]) => void;
-    title: string;
-    titleBtn: string;
-    ids: string[];
-    isAdded: boolean;
-    error: ApolloError | undefined;
-    currentMyGalleryId?: false | string | undefined;
-}
-declare const ChooseGalleryItems: ({ isGetMyGalleries, ...props }: IGalleryItems & {
-    isGetMyGalleries?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ChooseGalleryItems;