@ludo.ninja/components 1.1.6 → 1.1.8

package/dist/modules/gallery/api/useGetAssetsAndCollectionForFavorite.js

@@ -1,276 +0,0 @@
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-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 { useEffect, useMemo, useRef, useState } from 'react';
-import { useLazyQuery } from '@apollo/client';
-import { hosts, opportunitiesSchema } from '@ludo.ninja/api';
-import { searchSchema } from '@ludo.ninja/api';
-import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
-import { useGalleryStore } from '@/modules/gallery/store';
-import { useUiStore } from '@/store/ui';
-import { extractItemIds } from '@/utils/extractItemIds';
-import { getPageSize } from '@/utils/getPageSizeAssets';
-import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
-import CreationEntity from '@/dto/CreationEntity';
-var limit = 40;
-export var useGetAssetsAndCollectionForFavorite = function (_a) {
-    var gallery = _a.gallery, activeTab = _a.activeTab, fetchLikes = _a.fetchLikes;
-    var _b = useState([]), assets = _b[0], setAssets = _b[1];
-    var _c = useState([]), collections = _c[0], setCollections = _c[1];
-    var _d = useState([]), opportunities = _d[0], setOpportunities = _d[1];
-    var openAlert = useUiStore(function (state) { return state.openAlert; });
-    var currentPageRef = useRef(1);
-    var _e = useState(true), isLoading = _e[0], setIsLoading = _e[1];
-    var _f = useState(false), isNextLoading = _f[0], setIsNextLoading = _f[1];
-    var isHaveNextPage = useGalleryStore(function (state) { return state.allResults > currentPageRef.current * limit; });
-    var getAssetsAndCollectionsInGallery = function (isFirstLoading) {
-        if (isFirstLoading === void 0) { isFirstLoading = false; }
-        return new Promise(function (resolve) {
-            var assetArray = [];
-            var collectionsArray = [];
-            var opportunitiesArray = [];
-            var size = isFirstLoading && activeTab
-                ? getPageSize({
-                    scrollTab: activeTab.value,
-                    limit: limit,
-                })
-                : limit;
-            var totalLength = size !== limit ? size : false;
-            var creationIds = gallery.getGalleryCreationIds();
-            var startIndex = (currentPageRef.current - 1) * limit;
-            var endIndex = totalLength ? totalLength : startIndex + limit;
-            for (var i = startIndex; i < endIndex && i < creationIds.length; i++) {
-                var elements = creationIds[i].split('.');
-                var id = elements.splice(1, creationIds[i].length).join('.');
-                if (elements[0] === 'asset') {
-                    assetArray.push(id);
-                }
-                else if (elements[0] === 'collection') {
-                    collectionsArray.push(id);
-                }
-                else if (elements[0] === 'opportunity') {
-                    opportunitiesArray.push(id);
-                }
-            }
-            var assetPromise = assetArray.length > 0
-                ? fetchAssets({ variables: { assetIds: assetArray } })
-                : Promise.resolve();
-            var collectionsPromise = collectionsArray.length > 0
-                ? fetchCollections({ variables: { collectionIds: collectionsArray } })
-                : Promise.resolve();
-            var opportunitiesPromise = opportunitiesArray.length > 0
-                ? fetchOpportunities({
-                    variables: { opportunityIds: opportunitiesArray },
-                })
-                : Promise.resolve();
-            Promise.all([assetPromise, collectionsPromise, opportunitiesPromise])
-                .then(function () {
-                resolve();
-            })
-                .catch(function () {
-                resolve();
-            });
-        });
-    };
-    var getLikesForAllCreations = function (creations, currentItemType) {
-        if (creations.length > 0 && fetchLikes) {
-            var itemsIdsArray = extractItemIds(creations);
-            if (itemsIdsArray.length > 0) {
-                fetchLikes(itemsIdsArray, currentItemType);
-            }
-        }
-    };
-    var _g = useLazyQuery(searchSchema.FetchAssetsDocument, {
-        context: { uri: hosts.searchHost },
-        fetchPolicy: 'no-cache',
-        onCompleted: function (_a) {
-            var data = _a.fetchAssets;
-            setAssets(function (prevAssets) {
-                var results = __spreadArray(__spreadArray([], (prevAssets || []), true), data.map(function (asset) { return [
-                    asset.assetId,
-                    new CreationEntity(__assign(__assign({}, asset), { itemType: 'asset', itemId: asset.assetId })),
-                ]; }), true);
-                getLikesForAllCreations(results.map(function (el) { return el[1]; }), 'asset');
-                return results;
-            });
-        },
-        onError: function () {
-            openAlert({
-                type: alertVariants.error,
-                caption: 'Oops, something went wrong.',
-            });
-            setAssets([]);
-        },
-    }), fetchAssets = _g[0], _h = _g[1], assetsError = _h.error, refetchAssets = _h.refetch;
-    var _j = useLazyQuery(searchSchema.FetchCollectionsByIdsDocument, {
-        context: { uri: hosts.searchHost },
-        fetchPolicy: 'no-cache',
-        onCompleted: function (_a) {
-            var data = _a.fetchCollectionsByIds;
-            setCollections(function (prevCollections) {
-                var results = __spreadArray(__spreadArray([], (prevCollections || []), true), data.map(function (collection) { return [
-                    collection.collectionId,
-                    new CollectionCreationEntity(collection, 'collection'),
-                ]; }), true);
-                getLikesForAllCreations(results.map(function (el) { return el[1]; }), 'collection');
-                return results;
-            });
-        },
-        onError: function () {
-            openAlert({
-                type: alertVariants.error,
-                caption: 'Oops, something went wrong.',
-            });
-            setCollections([]);
-        },
-    }), fetchCollections = _j[0], _k = _j[1], collectionsError = _k.error, refetchCollections = _k.refetch;
-    var _l = opportunitiesSchema.useFetchOpportunitiesByIdsLazyQuery({
-        context: { uri: hosts.opportunitiesHost },
-        fetchPolicy: 'no-cache',
-        onCompleted: function (_a) {
-            var data = _a.fetchOpportunitiesByIds;
-            setOpportunities(function (prev) { return __spreadArray(__spreadArray([], (prev || []), true), data.map(function (opportunity) { return [
-                opportunity.opportunityId,
-                opportunity,
-            ]; }), true); });
-        },
-        onError: function () {
-            openAlert({
-                type: alertVariants.error,
-                caption: 'Oops, something went wrong.',
-            });
-            setOpportunities([]);
-        },
-    }), fetchOpportunities = _l[0], _m = _l[1], opportunitiesError = _m.error, refetchOpportunities = _m.refetch;
-    useEffect(function () {
-        getAssetsAndCollectionsInGallery(true).then(function () {
-            setIsLoading(false);
-        });
-    }, []);
-    var loadMore = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            if (!isHaveNextPage || isLoading)
-                return [2 /*return*/];
-            currentPageRef.current++;
-            setIsNextLoading(true);
-            getAssetsAndCollectionsInGallery().then(function () {
-                setIsNextLoading(false);
-            });
-            return [2 /*return*/];
-        });
-    }); };
-    var creations = useMemo(function () {
-        var creationIds = gallery.getGalleryCreationIds();
-        var mapAssets = new Map(assets);
-        var collectionAssets = new Map(collections);
-        var opportunityAssets = new Map(opportunities);
-        return creationIds
-            .map(function (id) {
-            var idSplit = id.split('.');
-            var idType = idSplit[0];
-            var idElement = idSplit.slice(1).join('.');
-            if (idType === 'asset') {
-                return mapAssets.get(idElement);
-            }
-            if (idType === 'collection') {
-                return collectionAssets.get(idElement);
-            }
-            if (idType === 'opportunity') {
-                return opportunityAssets.get(idElement);
-            }
-        })
-            .filter(function (el) { return !!el; })
-            .slice(0, assets.length + collections.length + opportunities.length);
-    }, [assets, collections, opportunities]);
-    return {
-        creations: creations,
-        isLoading: isLoading,
-        isNextLoading: isNextLoading,
-        loadMore: loadMore,
-        error: assetsError || collectionsError || opportunitiesError,
-        refetchQuery: function () { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                if (assetsError) {
-                    refetchAssets();
-                }
-                if (collectionsError) {
-                    refetchCollections();
-                }
-                if (opportunitiesError) {
-                    refetchOpportunities();
-                }
-                return [2 /*return*/];
-            });
-        }); },
-        removeCreation: function (creationIdToRemove, itemType) {
-            if (itemType === 'asset') {
-                setAssets(function (items) {
-                    return items.filter(function (item) { return item[0] !== creationIdToRemove; });
-                });
-            }
-            if (itemType === 'collection') {
-                setCollections(function (items) {
-                    return items.filter(function (item) { return item[0] !== creationIdToRemove; });
-                });
-            }
-            if (itemType === 'opportunity') {
-                setOpportunities(function (items) {
-                    return items.filter(function (item) { return item[0] !== creationIdToRemove; });
-                });
-            }
-        },
-    };
-};

package/dist/modules/gallery/api/useGetFavoriteGallery.js

@@ -1,39 +0,0 @@
-import { useQuery } from '@apollo/client';
-import { hosts, galleriesSchema as schema } from '@ludo.ninja/api';
-import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
-import { useGalleryStore } from '@/modules/gallery/store';
-import { useUiStore } from '@/store/ui';
-export var useGetFavoriteGallery = function (_a) {
-    var galleryId = _a.galleryId;
-    var _b = useGalleryStore(function (state) { return ({
-        setGallery: state.setGallery,
-        setAllResults: state.setAllResults,
-    }); }), setGallery = _b.setGallery, setAllResults = _b.setAllResults;
-    var openAlert = useUiStore(function (state) { return state.openAlert; });
-    var _c = useQuery(schema.FetchGalleryV2Document, {
-        variables: { galleryId: galleryId },
-        context: {
-            uri: hosts.galleriesHost,
-        },
-        notifyOnNetworkStatusChange: true,
-        fetchPolicy: 'no-cache',
-        onCompleted: function (_a) {
-            var _b;
-            var fetchGalleryV2 = _a.fetchGalleryV2;
-            setGallery(fetchGalleryV2);
-            setAllResults(((_b = fetchGalleryV2 === null || fetchGalleryV2 === void 0 ? void 0 : fetchGalleryV2.creationIds) === null || _b === void 0 ? void 0 : _b.length) || 0);
-        },
-        onError: function () {
-            openAlert({
-                type: alertVariants.error,
-                caption: 'Oops, something went wrong.',
-            });
-            setGallery(null);
-            setAllResults(0);
-        },
-    }), galleryError = _c.error, isLoadingGallery = _c.loading;
-    return {
-        isLoadingGallery: isLoadingGallery,
-        galleryError: galleryError,
-    };
-};

package/dist/modules/gallery/store.js

@@ -1,141 +0,0 @@
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { shallow } from 'zustand/shallow';
-import { createWithEqualityFn } from 'zustand/traditional';
-import { getDimensionsImage } from '@/utils/getDimensionsImage';
-import GalleryEntityV2 from '@/dto/GalleryEntityV2';
-var initialState = {
-    gallery: null,
-    fetchGalleryV2: null,
-    allResults: 0,
-    isErrorFileGallery: false,
-};
-export var useGalleryStore = createWithEqualityFn()(function (setState, getState) { return ({
-    fetchGalleryV2: initialState.fetchGalleryV2,
-    gallery: initialState.gallery,
-    setGallery: function (gallery) {
-        if (gallery) {
-            setState({
-                gallery: new GalleryEntityV2(gallery),
-                fetchGalleryV2: gallery,
-            });
-        }
-        else {
-            setState({ gallery: null, fetchGalleryV2: null });
-        }
-    },
-    updateGalleryInfo: function (_a) {
-        var galleryName = _a.galleryName, galleryDescription = _a.galleryDescription;
-        setState(function (prev) {
-            var newGallery = __assign(__assign({}, prev.fetchGalleryV2), { name: galleryName, description: galleryDescription });
-            return {
-                fetchGalleryV2: newGallery,
-                gallery: new GalleryEntityV2(newGallery),
-            };
-        });
-    },
-    updateGalleryBanner: function (banner) {
-        setState(function (prev) {
-            var newGallery = __assign(__assign({}, prev.fetchGalleryV2), { banner: banner });
-            return {
-                fetchGalleryV2: newGallery,
-                gallery: new GalleryEntityV2(newGallery),
-            };
-        });
-    },
-    fileGallery: '',
-    isErrorFileGallery: initialState.isErrorFileGallery,
-    addFileGalleryWithValidation: function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var fileTarget, dimensions, isErrorNew, url;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    fileTarget = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                    if (!fileTarget)
-                        return [2 /*return*/];
-                    if (!(fileTarget.size > 1048576)) return [3 /*break*/, 1];
-                    setState({ isErrorFileGallery: true });
-                    return [2 /*return*/];
-                case 1: return [4 /*yield*/, getDimensionsImage(fileTarget)];
-                case 2:
-                    dimensions = _b.sent();
-                    isErrorNew = !!(dimensions &&
-                        (dimensions.width > 1200 || dimensions.height > 1200));
-                    setState({ isErrorFileGallery: isErrorNew });
-                    if (isErrorNew) {
-                        return [2 /*return*/];
-                    }
-                    _b.label = 3;
-                case 3:
-                    url = URL.createObjectURL(fileTarget);
-                    // console.log('url', url);
-                    setState({ fileGallery: url });
-                    return [2 /*return*/];
-            }
-        });
-    }); },
-    removeFileGallery: function () {
-        var fileGallery = getState().fileGallery;
-        if (fileGallery) {
-            URL.revokeObjectURL(fileGallery);
-            setState({ fileGallery: '' });
-        }
-    },
-    allResults: initialState.allResults,
-    setAllResults: function (allResults) {
-        setState({ allResults: allResults });
-    },
-    decrementAllResults: function () {
-        setState(function (prev) { return ({ allResults: prev.allResults - 1 }); });
-    },
-    reinitStore: function () {
-        setState(initialState);
-        getState().removeFileGallery();
-    },
-}); }, shallow);

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

@@ -1,9 +0,0 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { useGalleryStore } from '@/modules/gallery/store';
-import { TextDarkGrayColor } from '@/styles/colors';
-import { H5 } from '@system';
-export var AllResultsGallery = function (_a) {
-    var isShowCounts = _a.isShowCounts;
-    var allResults = useGalleryStore(function (state) { return state.allResults; });
-    return isShowCounts ? (_jsxs(H5, { mt: 10, fontSize: 13, color: TextDarkGrayColor, children: [allResults, " ", allResults !== 1 ? 'items' : 'item'] })) : null;
-};

package/dist/modules/gallery/ui/AllResults.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { useGalleryStore } from '@/modules/gallery/store';
-
-import { TextDarkGrayColor } from '@/styles/colors';
-
-import { H5 } from '@system';
-
-export var AllResultsGallery = function (_a) {
-  var isShowCounts = _a.isShowCounts;
-  var allResults = useGalleryStore(function (state) {
-    return state.allResults;
-  });
-  return isShowCounts ? (
-    <H5 mt={10} fontSize={13} color={TextDarkGrayColor}>
-      {allResults} {allResults !== 1 ? 'items' : 'item'}
-    </H5>
-  ) : null;
-};

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

@@ -1,36 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import Hyphenated from 'react-hyphen';
-import styled from 'styled-components';
-import { AccentColor, TextGrayColor } from '@ludo.ninja/ui/build/styles/colors';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { FH6, MainText } from '@/styles/typography';
-import { dmsansFontVarCss } from '@/fonts/vars';
-var SDescription = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 16px;\n  position: relative;\n  overflow: hidden;\n\n  .content {\n    display: -webkit-box;\n    word-break: break-word;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n  }\n\n  .calculate {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  //=======================\n  .descr {\n    font-family: ", ";\n    word-wrap: break-word;\n    ", ";\n    color: ", ";\n    white-space: normal;\n    overflow: visible;\n    text-overflow: unset;\n\n    ", " {\n      .descr {\n        font-size: 1.4em;\n      }\n    }\n  }\n\n  .readMoreContainer {\n    padding-top: 0;\n    display: grid;\n    grid-template-rows: 0fr;\n    opacity: 0;\n    pointer-events: none;\n    overflow: hidden;\n\n    &.show {\n      transition: grid-template-rows 300ms ease-in-out,\n        padding-top 300ms ease-in-out, opacity 300ms ease-in-out;\n      padding-top: 4px;\n      grid-template-rows: 1fr;\n      opacity: 1;\n      pointer-events: unset;\n    }\n  }\n\n  .readMore {\n    ", ";\n    color: ", ";\n\n    user-select: none;\n    cursor: pointer;\n    min-height: 0;\n  }\n"], ["\n  margin-top: 16px;\n  position: relative;\n  overflow: hidden;\n\n  .content {\n    display: -webkit-box;\n    word-break: break-word;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n  }\n\n  .calculate {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  //=======================\n  .descr {\n    font-family: ", ";\n    word-wrap: break-word;\n    ", ";\n    color: ", ";\n    white-space: normal;\n    overflow: visible;\n    text-overflow: unset;\n\n    ", " {\n      .descr {\n        font-size: 1.4em;\n      }\n    }\n  }\n\n  .readMoreContainer {\n    padding-top: 0;\n    display: grid;\n    grid-template-rows: 0fr;\n    opacity: 0;\n    pointer-events: none;\n    overflow: hidden;\n\n    &.show {\n      transition: grid-template-rows 300ms ease-in-out,\n        padding-top 300ms ease-in-out, opacity 300ms ease-in-out;\n      padding-top: 4px;\n      grid-template-rows: 1fr;\n      opacity: 1;\n      pointer-events: unset;\n    }\n  }\n\n  .readMore {\n    ", ";\n    color: ", ";\n\n    user-select: none;\n    cursor: pointer;\n    min-height: 0;\n  }\n"])), dmsansFontVarCss.css, MainText, TextGrayColor, mediaQuery.mobile, FH6, AccentColor);
-export var Description = function (_a) {
-    var description = _a.description, _b = _a.lineClamp, lineClamp = _b === void 0 ? 2 : _b;
-    var container = useRef(null);
-    var position = useRef(null);
-    var _c = useState(false), isShowFullDescription = _c[0], setIsShowFullDescription = _c[1];
-    var _d = useState(false), isNeedReadMore = _d[0], setIsNeedReadMore = _d[1];
-    var handleReadMore = function () {
-        setIsNeedReadMore(false);
-        setIsShowFullDescription(true);
-    };
-    useEffect(function () {
-        var _a, _b;
-        setIsNeedReadMore(((_a = container.current) === null || _a === void 0 ? void 0 : _a.clientHeight) > ((_b = position.current) === null || _b === void 0 ? void 0 : _b.clientHeight));
-    }, [description]);
-    if (description) {
-        var content = (_jsx(Hyphenated, { children: _jsx("p", { className: "descr", children: description }) }));
-        return (_jsxs(SDescription, { children: [_jsx("div", { className: "content", style: {
-                        WebkitLineClamp: isShowFullDescription ? 'unset' : lineClamp,
-                    }, ref: position, children: content }), _jsx("div", { className: "readMoreContainer ".concat(isNeedReadMore ? 'show' : ''), children: _jsx("span", { className: "readMore ", onClick: handleReadMore, children: "Read more" }) }), _jsx("div", { className: "calculate", ref: container, children: content })] }));
-    }
-    return null;
-};
-var templateObject_1;

package/dist/modules/gallery/ui/Description.jsx

@@ -1,50 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React, { useEffect, useRef, useState } from 'react';
-import Hyphenated from 'react-hyphen';
-import styled from 'styled-components';
-import { AccentColor, TextGrayColor } from '@ludo.ninja/ui/build/styles/colors';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { FH6, MainText } from '@/styles/typography';
-import { dmsansFontVarCss } from '@/fonts/vars';
-var SDescription = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 16px;\n  position: relative;\n  overflow: hidden;\n\n  .content {\n    display: -webkit-box;\n    word-break: break-word;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n  }\n\n  .calculate {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  //=======================\n  .descr {\n    font-family: ", ";\n    word-wrap: break-word;\n    ", ";\n    color: ", ";\n    white-space: normal;\n    overflow: visible;\n    text-overflow: unset;\n\n    ", " {\n      .descr {\n        font-size: 1.4em;\n      }\n    }\n  }\n\n  .readMoreContainer {\n    padding-top: 0;\n    display: grid;\n    grid-template-rows: 0fr;\n    opacity: 0;\n    pointer-events: none;\n    overflow: hidden;\n\n    &.show {\n      transition: grid-template-rows 300ms ease-in-out,\n        padding-top 300ms ease-in-out, opacity 300ms ease-in-out;\n      padding-top: 4px;\n      grid-template-rows: 1fr;\n      opacity: 1;\n      pointer-events: unset;\n    }\n  }\n\n  .readMore {\n    ", ";\n    color: ", ";\n\n    user-select: none;\n    cursor: pointer;\n    min-height: 0;\n  }\n"], ["\n  margin-top: 16px;\n  position: relative;\n  overflow: hidden;\n\n  .content {\n    display: -webkit-box;\n    word-break: break-word;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n  }\n\n  .calculate {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  //=======================\n  .descr {\n    font-family: ", ";\n    word-wrap: break-word;\n    ", ";\n    color: ", ";\n    white-space: normal;\n    overflow: visible;\n    text-overflow: unset;\n\n    ", " {\n      .descr {\n        font-size: 1.4em;\n      }\n    }\n  }\n\n  .readMoreContainer {\n    padding-top: 0;\n    display: grid;\n    grid-template-rows: 0fr;\n    opacity: 0;\n    pointer-events: none;\n    overflow: hidden;\n\n    &.show {\n      transition: grid-template-rows 300ms ease-in-out,\n        padding-top 300ms ease-in-out, opacity 300ms ease-in-out;\n      padding-top: 4px;\n      grid-template-rows: 1fr;\n      opacity: 1;\n      pointer-events: unset;\n    }\n  }\n\n  .readMore {\n    ", ";\n    color: ", ";\n\n    user-select: none;\n    cursor: pointer;\n    min-height: 0;\n  }\n"])), dmsansFontVarCss.css, MainText, TextGrayColor, mediaQuery.mobile, FH6, AccentColor);
-export var Description = function (_a) {
-    var description = _a.description, _b = _a.lineClamp, lineClamp = _b === void 0 ? 2 : _b;
-    var container = useRef(null);
-    var position = useRef(null);
-    var _c = useState(false), isShowFullDescription = _c[0], setIsShowFullDescription = _c[1];
-    var _d = useState(false), isNeedReadMore = _d[0], setIsNeedReadMore = _d[1];
-    var handleReadMore = function () {
-        setIsNeedReadMore(false);
-        setIsShowFullDescription(true);
-    };
-    useEffect(function () {
-        var _a, _b;
-        setIsNeedReadMore(((_a = container.current) === null || _a === void 0 ? void 0 : _a.clientHeight) > ((_b = position.current) === null || _b === void 0 ? void 0 : _b.clientHeight));
-    }, [description]);
-    if (description) {
-        var content = (<Hyphenated>
-        <p className={"descr"}>{description}</p>
-      </Hyphenated>);
-        return (<SDescription>
-        <div className={"content"} style={{
-                WebkitLineClamp: isShowFullDescription ? 'unset' : lineClamp,
-            }} ref={position}>
-          {content}
-        </div>
-        <div className={"readMoreContainer ".concat(isNeedReadMore ? 'show' : '')}>
-          <span className={"readMore "} onClick={handleReadMore}>
-            Read more
-          </span>
-        </div>
-
-        <div className={"calculate"} ref={container}>
-          {content}
-        </div>
-      </SDescription>);
-    }
-    return null;
-};
-var templateObject_1;