@ludo.ninja/components 1.9.3 → 1.9.4

package/dist/system/Cards/CardHeadIcons/{index.js → index.jsx}

@@ -76,11 +76,11 @@ var CardHeadIcons = function (_a) {
                     return [3 /*break*/, 8];
                 case 1:
                     if (!(type === 'fav-list')) return [3 /*break*/, 2];
-                    openModalSidebarPortal(react_1.default.createElement(addCreationToFavoriteList_1.default, { ids: [
+                    openModalSidebarPortal(<addCreationToFavoriteList_1.default ids={[
                             creation instanceof CollectionCreationEntity_1.default
                                 ? "".concat(creation.getItemType() + '.' + creation.getCreationId())
                                 : creation.getCreationId(),
-                        ] }));
+                        ]}/>);
                     return [3 /*break*/, 8];
                 case 2:
                     if (!(type === 'likes')) return [3 /*break*/, 7];
@@ -111,24 +111,31 @@ var CardHeadIcons = function (_a) {
     }); };
     var renderLikeButton = function () {
         if (creation.getItemType() === ItemType_1.LabelKeys.asset || ItemType_1.LabelKeys.collection) {
-            return (react_1.default.createElement("div", { className: "icon like ".concat(isLicked ? 'liked' : ''), onClick: function (e) { return handleClick(e, 'likes'); } },
-                react_1.default.createElement(heart_svg_1.default, null)));
+            return (<div className={"icon like ".concat(isLicked ? 'liked' : '')} onClick={function (e) { return handleClick(e, 'likes'); }}>
+          <heart_svg_1.default />
+        </div>);
         }
     };
-    return (react_1.default.createElement(Headicons_1.default, { isMobile: isMobile, style: isDisabled
+    return (<Headicons_1.default isMobile={isMobile} style={isDisabled
             ? {
                 pointerEvents: 'none',
             }
-            : {} },
-        react_1.default.createElement("div", { className: 'rank' },
-            react_1.default.createElement(CardRank_1.default, { rank: creation.getRank() })),
-        !(0, env_1.isProd)({ ENV: isProdENV }) && (react_1.default.createElement("div", { className: "icons" },
-            react_1.default.createElement("div", { className: "icon", onClick: function (e) {
-                    return handleClick(e, isRegularCard || !isUserProfile || isGallery
-                        ? 'fav-list'
-                        : 'gallery');
-                } }, isRegularCard || !isUserProfile || isGallery ? (react_1.default.createElement(addToFavListIcon_svg_1.default, null)) : (react_1.default.createElement(addToGalleryIcon_svg_1.default, null))),
-            renderLikeButton()))));
+            : {}}>
+      <div className={'rank'}>
+        <CardRank_1.default rank={creation.getRank()}/>
+      </div>
+      {/* // Todo cardHeadIcons */}
+      {!(0, env_1.isProd)({ ENV: isProdENV }) && (<div className="icons">
+          <div className="icon" onClick={function (e) {
+                return handleClick(e, isRegularCard || !isUserProfile || isGallery
+                    ? 'fav-list'
+                    : 'gallery');
+            }}>
+            {isRegularCard || !isUserProfile || isGallery ? (<addToFavListIcon_svg_1.default />) : (<addToGalleryIcon_svg_1.default />)}
+          </div>
+          {renderLikeButton()}
+        </div>)}
+    </Headicons_1.default>);
 };
 // Export
 exports.default = CardHeadIcons;

package/dist/system/Cards/CardMedia/CardAudio/{index.js → index.jsx}

@@ -83,11 +83,12 @@ var CardAudio = function (_a) {
         playAudioTrack(lAudioSrc);
     };
     var renderPlayPauseIcon = function () {
-        return isPauseIcon ? (react_1.default.createElement(pause_svg_1.default, { className: 'pauseIcon', onClick: function (e) { return handlePause(e); } })) : (react_1.default.createElement(play_svg_1.default, { className: 'playIcon', onClick: function (e) { return handlePlay(e); } }));
+        return isPauseIcon ? (<pause_svg_1.default className={'pauseIcon'} onClick={function (e) { return handlePause(e); }}/>) : (<play_svg_1.default className={'playIcon'} onClick={function (e) { return handlePlay(e); }}/>);
     };
-    return lImgSrc.length ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Styles_1.StyledImg, { src: imgSrc, alt: alt, isLoading: lAudioSrc }),
-        (lAudioSrc === null || lAudioSrc === void 0 ? void 0 : lAudioSrc.length) && renderPlayPauseIcon())) : (react_1.default.createElement(react_loading_skeleton_1.default, { height: '100%', width: '100%', style: { lineHeight: 'normal' } }));
+    return lImgSrc.length ? (<>
+      <Styles_1.StyledImg src={imgSrc} alt={alt} isLoading={lAudioSrc}/>
+      {(lAudioSrc === null || lAudioSrc === void 0 ? void 0 : lAudioSrc.length) && renderPlayPauseIcon()}
+    </>) : (<react_loading_skeleton_1.default height={'100%'} width={'100%'} style={{ lineHeight: 'normal' }}/>);
 };
 // Export
 exports.default = CardAudio;

package/dist/system/Cards/CardMedia/CardImage/{index.js → index.jsx}

@@ -33,12 +33,13 @@ var Image_1 = __importDefault(require("@/system/Cards/Styles/Image"));
 var CardImage = function (_a) {
     var imgSrc = _a.imgSrc, errorImg = _a.errorImg, alt = _a.alt;
     var _b = (0, react_1.useState)(true), loading = _b[0], setLoading = _b[1];
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        loading && (react_1.default.createElement(react_loading_skeleton_1.default, { height: '100%', width: '100%', style: {
+    return (<>
+      {loading && (<react_loading_skeleton_1.default height={'100%'} width={'100%'} style={{
                 lineHeight: 'normal',
                 visibility: "".concat(loading ? 'hidden' : 'visible'),
-            } })),
-        react_1.default.createElement(Image_1.default, { isLoading: loading, src: imgSrc, alt: alt, onError: function (e) { return (e.target.src = errorImg); }, onLoad: function () { return setLoading(false); } })));
+            }}/>)}
+      <Image_1.default isLoading={loading} src={imgSrc} alt={alt} onError={function (e) { return (e.target.src = errorImg); }} onLoad={function () { return setLoading(false); }}/>
+    </>);
 };
 // Export
 exports.default = CardImage;

package/dist/system/Cards/CardMedia/CardVideo/{index.js → index.jsx}

@@ -61,23 +61,25 @@ var CardVideo = function (_a) {
         video.current && ((_a = video.current) === null || _a === void 0 ? void 0 : _a.pause());
         setPlayIcon(true);
     };
-    var renderImage = function () { return (react_1.default.createElement(Image_1.default, { isLoading: false, src: errorImg, alt: alt })); };
+    var renderImage = function () { return (<Image_1.default isLoading={false} src={errorImg} alt={alt}/>); };
     if (!videoSrc)
         return renderImage();
-    return lVideoSrc ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Video_1.default, { ref: video, muted: true, loop: true, playsInline: true, preload: 'false' },
-            react_1.default.createElement("source", { type: "video/mp4", src: lVideoSrc }),
-            react_1.default.createElement("p", null, alt)),
-        lVideoSrc.length &&
-            (isPlayIcon ? (react_1.default.createElement(play_svg_1.default, { className: 'playIcon', onClick: function (e) {
+    return lVideoSrc ? (<>
+      <Video_1.default ref={video} muted loop playsInline preload={'false'}>
+        <source type="video/mp4" src={lVideoSrc}/>
+        <p>{alt}</p>
+      </Video_1.default>
+      {lVideoSrc.length &&
+            (isPlayIcon ? (<play_svg_1.default className={'playIcon'} onClick={function (e) {
                     e.preventDefault();
                     e.stopPropagation();
                     playVideo();
-                } })) : (react_1.default.createElement(pause_svg_1.default, { className: 'pauseIcon', onClick: function (e) {
+                }}/>) : (<pause_svg_1.default className={'pauseIcon'} onClick={function (e) {
                     e.preventDefault();
                     e.stopPropagation();
                     pauseVideo();
-                } }))))) : (react_1.default.createElement(react_loading_skeleton_1.default, { height: '100%', width: '100%', style: { lineHeight: 'normal' } }));
+                }}/>))}
+    </>) : (<react_loading_skeleton_1.default height={'100%'} width={'100%'} style={{ lineHeight: 'normal' }}/>);
 };
 // Export
 exports.default = CardVideo;

package/dist/system/Cards/CardRank/{index.js → index.jsx}

@@ -21,12 +21,18 @@ var RangeValue = styled_components_1.default.div(templateObject_3 || (templateOb
 // Component
 var CardRank = function (_a) {
     var rank = _a.rank;
-    return (react_1.default.createElement(StyledCardRank, null,
-        react_1.default.createElement(_system_1.Flex, { alignItems: 'center', height: '100%' },
-            react_1.default.createElement(_system_1.Box, null,
-                react_1.default.createElement("p", { className: "rankText ".concat(!rank && 'smallText') }, rank ? rank : 'unknown')),
-            Boolean(rank) && (react_1.default.createElement(SBox, null,
-                react_1.default.createElement(RangeValue, { rankValue: rank }))))));
+    return (<StyledCardRank>
+      <_system_1.Flex alignItems={'center'} height={'100%'}>
+        <_system_1.Box>
+          <p className={"rankText ".concat(!rank && 'smallText')}>
+            {rank ? rank : 'unknown'}
+          </p>
+        </_system_1.Box>
+        {Boolean(rank) && (<SBox>
+            <RangeValue rankValue={rank}/>
+          </SBox>)}
+      </_system_1.Flex>
+    </StyledCardRank>);
 };
 // Export
 exports.default = CardRank;

package/dist/system/Cards/CardsGrid/{index.js → index.jsx}

@@ -66,14 +66,19 @@ var CardsGrid = function (_a) {
         setShowOrganizeBtn(false);
         addMethod && addMethod();
     };
-    return (react_1.default.createElement(StyledCardsGrid, { isTwoColumnLayout: isTwoColumnLayout, isEmptyGallery: isEmptyGallery, isForVirtualize: isForVirtualize },
-        react_1.default.createElement("div", { className: "content" }, children),
-        tabsSlot,
-        isTwoColumnLayout && (react_1.default.createElement("div", { className: "sidebar" },
-            !(0, env_1.isProd)({ ENV: isProdENV }) && react_1.default.createElement(profile_1.ProfileInterests, null),
-            react_1.default.createElement(profile_1.ProfileWallets, null),
-            isNeedShowOrganizeBtn && (react_1.default.createElement("div", { className: "sidebarOrganizeBtn" },
-                react_1.default.createElement(MainButton_1.default, { onClick: handleClick, variant: "float", text: 'Organize' })))))));
+    return (<StyledCardsGrid isTwoColumnLayout={isTwoColumnLayout} isEmptyGallery={isEmptyGallery} isForVirtualize={isForVirtualize}>
+      <div className="content">{children}</div>
+      {tabsSlot}
+      {isTwoColumnLayout && (<div className="sidebar">
+          {/*{isNeedShowNetWorth && <ProfileNetWorth />}*/}
+          {/* // Todo ProfileInterests */}
+          {!(0, env_1.isProd)({ ENV: isProdENV }) && <profile_1.ProfileInterests />}
+          <profile_1.ProfileWallets />
+          {isNeedShowOrganizeBtn && (<div className="sidebarOrganizeBtn">
+              <MainButton_1.default onClick={handleClick} variant="float" text={'Organize'}/>
+            </div>)}
+        </div>)}
+    </StyledCardsGrid>);
 };
 // Export
 exports.default = CardsGrid;

package/dist/system/Cards/HideLink/index.jsx

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var env_1 = require("@/utils/env");
+var HideLink = function (_a) {
+    var children = _a.children, className = _a.className, href = _a.href, isProdENV = _a.isProdENV, onClick = _a.onClick;
+    // Todo cardLink
+    var isHide = (0, env_1.isProd)({ ENV: isProdENV });
+    var Component = isHide ? react_1.default.Fragment : link_1.default;
+    return (<Component {...(!isHide && { href: href })} {...(isHide && { className: className })}>
+      {isHide ? (<span className={className} onClick={onClick}>
+          {children}
+        </span>) : (<a className={className} onClick={onClick}>
+          {children}
+        </a>)}
+    </Component>);
+};
+exports.default = HideLink;

package/dist/system/Cards/MultiMediaCard/{index.js → index.jsx}

@@ -26,9 +26,11 @@ var MultiMediaCard = function (_a) {
     var gallery = _a.gallery, assets = _a.assets, collections = _a.collections;
     var mediaTemplate = function (mediaKey, media) {
         var _a, _b;
-        return (react_1.default.createElement("div", { key: mediaKey, className: ((_a = media.type) === null || _a === void 0 ? void 0 : _a.name) === 'CardVideo' || ((_b = media.type) === null || _b === void 0 ? void 0 : _b.name) === 'CardAudio'
+        return (<div key={mediaKey} className={((_a = media.type) === null || _a === void 0 ? void 0 : _a.name) === 'CardVideo' || ((_b = media.type) === null || _b === void 0 ? void 0 : _b.name) === 'CardAudio'
                 ? 'media digital'
-                : 'media' }, media));
+                : 'media'}>
+        {media}
+      </div>);
     };
     var renderMedia = function () {
         var _a, _b;
@@ -52,10 +54,10 @@ var MultiMediaCard = function (_a) {
                 cardsMedia.push(mediaTemplate(i, asset.detectMediaType().displaySingleMedia()));
             }
             else if (collection) {
-                cardsMedia.push(mediaTemplate(i, react_1.default.createElement(CardImage_1.default, { alt: "".concat(collection.getName(), " ").concat(collection.getAddress() || ''), imgSrc: (_b = (_a = collection.getOriginalUrls()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '', errorImg: '/noContent/noContent.svg' })));
+                cardsMedia.push(mediaTemplate(i, <CardImage_1.default alt={"".concat(collection.getName(), " ").concat(collection.getAddress() || '')} imgSrc={(_b = (_a = collection.getOriginalUrls()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''} errorImg={'/noContent/noContent.svg'}/>));
             }
             else {
-                cardsMedia.push(mediaTemplate(i, react_1.default.createElement(defaultImage_svg_1.default, null)));
+                cardsMedia.push(mediaTemplate(i, <defaultImage_svg_1.default />));
             }
         };
         for (var i = 0; i < 4; i++) {
@@ -65,13 +67,17 @@ var MultiMediaCard = function (_a) {
     };
     var secondName = gallery.getGalleryUsername() !== '' ? gallery.getGalleryUsername() : '';
     // const userCreationAddresses = gallery?.getGalleryCreations()[0]?.getOwnersAddresses();
-    return (react_1.default.createElement(StyledMultiCard, null,
-        react_1.default.createElement(link_1.default, { href: gallery.getCreationLink() },
-            react_1.default.createElement(MultiHead_1.default, null, renderMedia()),
-            react_1.default.createElement(CardContent_1.default, { firstName: gallery.getGalleryName(), secondName: secondName, wallets: gallery.getGalleryUserWallets(), isNeedShowMoreButton: false, itemId: gallery.getGalleryId() },
-                react_1.default.createElement(_system_1.Flex, { alignItems: "flex-end", justifyContent: 'space-between' },
-                    react_1.default.createElement(CardCategory_1.default, { label: gallery.getLabel() }),
-                    react_1.default.createElement(CardLikes_1.default, { isLiked: false, likes: 0 }))))));
+    return (<StyledMultiCard>
+      <link_1.default href={gallery.getCreationLink()}>
+        <MultiHead_1.default>{renderMedia()}</MultiHead_1.default>
+        <CardContent_1.default firstName={gallery.getGalleryName()} secondName={secondName} wallets={gallery.getGalleryUserWallets()} isNeedShowMoreButton={false} itemId={gallery.getGalleryId()}>
+          <_system_1.Flex alignItems="flex-end" justifyContent={'space-between'}>
+            <CardCategory_1.default label={gallery.getLabel()}/>
+            <CardLikes_1.default isLiked={false} likes={0}/>
+          </_system_1.Flex>
+        </CardContent_1.default>
+      </link_1.default>
+    </StyledMultiCard>);
 };
 // Export
 exports.default = MultiMediaCard;

package/dist/system/Cards/RegularCard/{index.js → index.jsx}

@@ -36,17 +36,23 @@ var RegularCard = function (_a) {
         removeOnDislike: toolsForRemove,
     }), likes = _b.likes, addLike = _b.addLike, deleteLike = _b.deleteLike;
     //show asset page
-    return (react_1.default.createElement(StyledRegularCard, { isNeedHeight: isNeedHeight },
-        react_1.default.createElement(HideLink_1.default, { className: "linkRegularCard", isProdENV: isProdENV, href: creation.getCreationLink(), onClick: function () {
-                return (0, utils_1.handleSetScrollPosition)(scrollKeys.pageOffsetKey, scrollKeys.itemsCountKey, String(cardsCount));
-            } },
-            react_1.default.createElement(Head_1.default, null,
-                creation.detectMediaType().displaySingleMedia(),
-                react_1.default.createElement(CardHeadIcons_1.default, { isRegularCard: true, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: false, itemId: creation.getItemId(), isProdENV: isProdENV })),
-            react_1.default.createElement(CardContent_1.default, { creationName: creationName, firstName: creation.getCreatorAddress(), secondName: creation.getName(), cuttedSecondName: creation.getCuttedSecondName(!isMobile), isNeedShowMoreButton: false, itemId: creation.getItemId() },
-                react_1.default.createElement(_system_1.Flex, { alignItems: "end", justifyContent: 'space-between' },
-                    react_1.default.createElement(CardCategory_1.default, { label: creation.getLabel() }),
-                    !(0, env_1.isProd)({ ENV: isProdENV }) && (react_1.default.createElement(CardLikes_1.default, { isLiked: likes.isLiked, likes: likes.likesCount })))))));
+    return (<StyledRegularCard isNeedHeight={isNeedHeight}>
+      <HideLink_1.default className="linkRegularCard" isProdENV={isProdENV} href={creation.getCreationLink()} onClick={function () {
+            return (0, utils_1.handleSetScrollPosition)(scrollKeys.pageOffsetKey, scrollKeys.itemsCountKey, String(cardsCount));
+        }}>
+        <Head_1.default>
+          {creation.detectMediaType().displaySingleMedia()}
+          <CardHeadIcons_1.default isRegularCard={true} isIconLiked={likes.isLiked} creation={creation} addLikeToCard={addLike} deleteLikeFromCard={deleteLike} isUserProfile={false} itemId={creation.getItemId()} isProdENV={isProdENV}/>
+        </Head_1.default>
+        <CardContent_1.default creationName={creationName} firstName={creation.getCreatorAddress()} secondName={creation.getName()} cuttedSecondName={creation.getCuttedSecondName(!isMobile)} isNeedShowMoreButton={false} itemId={creation.getItemId()}>
+          <_system_1.Flex alignItems="end" justifyContent={'space-between'}>
+            <CardCategory_1.default label={creation.getLabel()}/>
+            {/* // Todo cardLikes */}
+            {!(0, env_1.isProd)({ ENV: isProdENV }) && (<CardLikes_1.default isLiked={likes.isLiked} likes={likes.likesCount}/>)}
+          </_system_1.Flex>
+        </CardContent_1.default>
+      </HideLink_1.default>
+    </StyledRegularCard>);
 };
 // Export
 exports.default = RegularCard;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsError/{index.js → index.jsx}

@@ -91,9 +91,12 @@ var CardsError = function (_a) {
             }
         });
     }); };
-    return (react_1.default.createElement(StyledCardsError, null,
-        react_1.default.createElement(refresh_svg_1.default, { className: 'icon', onClick: handleAnimation }),
-        !isAnimated && (react_1.default.createElement("h2", { className: 'text' }, "Whoops! Something went wrong. Let's try to refresh it!"))));
+    return (<StyledCardsError>
+      <refresh_svg_1.default className={'icon'} onClick={handleAnimation}/>
+      {!isAnimated && (<h2 className={'text'}>
+          Whoops! Something went wrong. Let&apos;s try to refresh it!
+        </h2>)}
+    </StyledCardsError>);
 };
 // Export
 exports.default = CardsError;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults/{index.js → index.jsx}

@@ -17,9 +17,10 @@ var StyledNoResults = styled_components_1.default.div(templateObject_1 || (templ
 // Component
 var CardsNoResults = function (_a) {
     var noFoundText = _a.noFoundText;
-    return (react_1.default.createElement(StyledNoResults, null,
-        react_1.default.createElement(no_found_svg_1.default, { className: 'icon' }),
-        react_1.default.createElement("p", { className: 'text' }, noFoundText)));
+    return (<StyledNoResults>
+      <no_found_svg_1.default className={'icon'}/>
+      <p className={'text'}>{noFoundText}</p>
+    </StyledNoResults>);
 };
 // Export
 exports.default = CardsNoResults;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton/{index.js → index.jsx}

@@ -19,18 +19,24 @@ var StyledCardSkeleton = styled_components_1.default.div(templateObject_1 || (te
 var CardsSkeleton = function (_a) {
     var cardCount = _a.cardCount;
     var arr = Array.from(Array(cardCount).keys());
-    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function () { return (react_1.default.createElement(exports.CardSkeleton, { key: Math.random() })); })));
+    return (<>
+      {arr.map(function () { return (<exports.CardSkeleton key={Math.random()}/>); })}
+    </>);
 };
 // Component
 var CardSkeleton = function () {
-    return (react_1.default.createElement(StyledCardSkeleton, null,
-        react_1.default.createElement(system_1.StyledCardHead, null,
-            react_1.default.createElement(react_loading_skeleton_1.default, { height: '100%', width: '100%' })),
-        react_1.default.createElement("div", { className: 'content' },
-            react_1.default.createElement(react_loading_skeleton_1.default, { height: '18px', width: '70%' }),
-            react_1.default.createElement("div", { className: 'footer' },
-                react_1.default.createElement(react_loading_skeleton_1.default, { height: '18px', width: '120px' }),
-                react_1.default.createElement(react_loading_skeleton_1.default, { height: '18px', width: '30px' })))));
+    return (<StyledCardSkeleton>
+      <system_1.StyledCardHead>
+        <react_loading_skeleton_1.default height={'100%'} width={'100%'}/>
+      </system_1.StyledCardHead>
+      <div className={'content'}>
+        <react_loading_skeleton_1.default height={'18px'} width={'70%'}/>
+        <div className={'footer'}>
+          <react_loading_skeleton_1.default height={'18px'} width={'120px'}/>
+          <react_loading_skeleton_1.default height={'18px'} width={'30px'}/>
+        </div>
+      </div>
+    </StyledCardSkeleton>);
 };
 exports.CardSkeleton = CardSkeleton;
 // Export

package/dist/system/CardsHolderWithSkeleton/CardsHolder/{index.js → index.jsx}

@@ -23,15 +23,19 @@ var StyledCardsHolder = styled_components_1.default.div(templateObject_1 || (tem
 var CardsHolder = function (_a) {
     var loading = _a.loading, error = _a.error, items = _a.items, refetchQuery = _a.refetchQuery, children = _a.children, notFoundText = _a.notFoundText, isOneColumn = _a.isOneColumn, isTwoColumnLayout = _a.isTwoColumnLayout, isNeedShowNetWorth = _a.isNeedShowNetWorth, isForVirtualize = _a.isForVirtualize, likesArray = _a.likesArray, tabsSlot = _a.tabsSlot;
     var renderCardsWithGrid = function (component, isEmptyGallery, forVirtualize) {
-        return (react_1.default.createElement(CardsGrid_1.default, { isTwoColumnLayout: isTwoColumnLayout, isNeedShowNetWorth: isNeedShowNetWorth, isEmptyGallery: isEmptyGallery, isForVirtualize: forVirtualize, tabsSlot: tabsSlot, isProdENV: isProdENV }, component));
+        return (<CardsGrid_1.default isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isEmptyGallery={isEmptyGallery} isForVirtualize={forVirtualize} tabsSlot={tabsSlot} isProdENV={isProdENV}>
+        {component}
+      </CardsGrid_1.default>);
     };
     if (loading && (!likesArray || (likesArray === null || likesArray === void 0 ? void 0 : likesArray.length) === 0))
         return null;
     if (error)
-        return renderCardsWithGrid(react_1.default.createElement(CardsError_1.default, { refetch: refetchQuery }), true);
+        return renderCardsWithGrid(<CardsError_1.default refetch={refetchQuery}/>, true);
     if (!items.length)
-        return renderCardsWithGrid(react_1.default.createElement(CardsNoResults_1.default, { noFoundText: notFoundText }), true, isForVirtualize);
-    return (react_1.default.createElement(StyledCardsHolder, { isOneColumn: isOneColumn, isForVirtualize: isForVirtualize }, renderCardsWithGrid(children, false, isForVirtualize)));
+        return renderCardsWithGrid(<CardsNoResults_1.default noFoundText={notFoundText}/>, true, isForVirtualize);
+    return (<StyledCardsHolder isOneColumn={isOneColumn} isForVirtualize={isForVirtualize}>
+      {renderCardsWithGrid(children, false, isForVirtualize)}
+    </StyledCardsHolder>);
 };
 // Export
 exports.default = CardsHolder;

package/dist/system/CardsHolderWithSkeleton/CardsHolderLoader/{index.js → index.jsx}

@@ -18,8 +18,9 @@ var StyledCardsHolderLoader = styled_components_1.default.div(templateObject_1 |
 // Component
 var CardsHolderLoader = function () {
     var windowDimensions = (0, utils_1.useWindowDimensionsWithServerInitial)().windowDimensions;
-    return (react_1.default.createElement(StyledCardsHolderLoader, { style: (0, utils_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) },
-        react_1.default.createElement(loader_svg_1.default, { className: 'loader' })));
+    return (<StyledCardsHolderLoader style={(0, utils_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 })}>
+      <loader_svg_1.default className={'loader'}/>
+    </StyledCardsHolderLoader>);
 };
 // Export
 exports.default = CardsHolderLoader;

package/dist/system/CardsHolderWithSkeleton/{index.js → index.jsx}

@@ -11,9 +11,12 @@ var CardsSkeleton_1 = __importDefault(require("@/system/CardsHolderWithSkeleton/
 var CardsHolderWithSkeleton = function (_a) {
     var loading = _a.loading, error = _a.error, items = _a.items, refetchQuery = _a.refetchQuery, children = _a.children, notFoundText = _a.notFoundText, isOneColumn = _a.isOneColumn, isTwoColumnLayout = _a.isTwoColumnLayout, isNeedShowNetWorth = _a.isNeedShowNetWorth, isForVirtualize = _a.isForVirtualize, likesArray = _a.likesArray, tabsSlot = _a.tabsSlot, isProdENV = _a.isProdENV;
     if (loading && (!likesArray || (likesArray === null || likesArray === void 0 ? void 0 : likesArray.length) === 0))
-        return (react_1.default.createElement(CardsGrid_1.default, { isTwoColumnLayout: isTwoColumnLayout, isNeedShowNetWorth: isNeedShowNetWorth, isEmptyGallery: false, tabsSlot: tabsSlot, isProdENV: isProdENV },
-            react_1.default.createElement(CardsSkeleton_1.default, { cardCount: 40 })));
-    return (react_1.default.createElement(CardsHolder_1.default, { items: items, refetchQuery: refetchQuery, error: error, loading: loading, notFoundText: notFoundText, isOneColumn: isOneColumn, isTwoColumnLayout: isTwoColumnLayout, isNeedShowNetWorth: isNeedShowNetWorth, isForVirtualize: isForVirtualize, likesArray: likesArray, tabsSlot: tabsSlot, isProdENV: isProdENV }, children));
+        return (<CardsGrid_1.default isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isEmptyGallery={false} tabsSlot={tabsSlot} isProdENV={isProdENV}>
+        <CardsSkeleton_1.default cardCount={40}/>
+      </CardsGrid_1.default>);
+    return (<CardsHolder_1.default items={items} refetchQuery={refetchQuery} error={error} loading={loading} notFoundText={notFoundText} isOneColumn={isOneColumn} isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isForVirtualize={isForVirtualize} likesArray={likesArray} tabsSlot={tabsSlot} isProdENV={isProdENV}>
+      {children}
+    </CardsHolder_1.default>);
 };
 // Export
 exports.default = CardsHolderWithSkeleton;

package/dist/system/DropDown/{DropDown.test.js → DropDown.test.jsx}

@@ -12,9 +12,11 @@ describe('DropDown Component', function () {
     test('renders with caption and closed by default', function () {
         var _a;
         var mockFallback = jest.fn();
-        (0, react_2.render)(react_1.default.createElement("div", { "data-testid": 'test_container' },
-            react_1.default.createElement(DropDown_1.default, { caption: "Test Dropdown", fallBackOnClose: mockFallback },
-                react_1.default.createElement("div", null, "Dropdown Content"))));
+        (0, react_2.render)(<div data-testid={'test_container'}>
+        <DropDown_1.default caption="Test Dropdown" fallBackOnClose={mockFallback}>
+          <div>Dropdown Content</div>
+        </DropDown_1.default>
+      </div>);
         var captionElement = react_2.screen.getByText('Test Dropdown');
         expect(captionElement).toBeInTheDocument();
         var contentElement = (_a = react_2.screen
@@ -25,8 +27,9 @@ describe('DropDown Component', function () {
     });
     test('calls fallback function when closed', function () {
         var mockFallback = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(DropDown_1.default, { caption: "Test Dropdown", fallBackOnClose: mockFallback },
-            react_1.default.createElement("div", null, "Dropdown Content")));
+        (0, react_2.render)(<DropDown_1.default caption="Test Dropdown" fallBackOnClose={mockFallback}>
+        <div>Dropdown Content</div>
+      </DropDown_1.default>);
         var captionElement = react_2.screen.getByText('Test Dropdown');
         react_2.fireEvent.click(captionElement);
         react_2.fireEvent.click(captionElement);
@@ -34,8 +37,9 @@ describe('DropDown Component', function () {
     });
     test('renders with active prop', function () {
         var mockFallback = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(DropDown_1.default, { caption: "Test Dropdown", fallBackOnClose: mockFallback, active: true },
-            react_1.default.createElement("div", null, "Dropdown Content")));
+        (0, react_2.render)(<DropDown_1.default caption="Test Dropdown" fallBackOnClose={mockFallback} active>
+        <div>Dropdown Content</div>
+      </DropDown_1.default>);
         var openedContentElement = react_2.screen.getByText('Dropdown Content');
         expect(openedContentElement).toBeInTheDocument();
     });

package/dist/system/DropDown/{index.js → index.jsx}

@@ -47,16 +47,19 @@ var DropDown = function (_a) {
             setActive(true);
         }
     }, []);
-    return (react_1.default.createElement(StyledDropDown, { isActive: isActive },
-        react_1.default.createElement("div", { className: 'dropDownTab', onClick: function () {
-                setActive(!isActive);
-                if (!isActive)
-                    fallBackOnClose(null);
-            } },
-            react_1.default.createElement("span", { className: 'dropDownTabCaption' }, caption),
-            react_1.default.createElement(arrow_down_svg_1.default, { className: 'dropDownTabIcon' })),
-        react_1.default.createElement("div", { className: 'dropDownContent' },
-            react_1.default.createElement("div", { className: 'gridDown' }, children))));
+    return (<StyledDropDown isActive={isActive}>
+      <div className={'dropDownTab'} onClick={function () {
+            setActive(!isActive);
+            if (!isActive)
+                fallBackOnClose(null);
+        }}>
+        <span className={'dropDownTabCaption'}>{caption}</span>
+        <arrow_down_svg_1.default className={'dropDownTabIcon'}/>
+      </div>
+      <div className={'dropDownContent'}>
+        <div className={'gridDown'}>{children}</div>
+      </div>
+    </StyledDropDown>);
 };
 // Export
 exports.default = DropDown;

package/dist/system/Forms/Checkbox/{Checkbox.test.js → Checkbox.test.jsx}

@@ -1,15 +1,4 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -22,7 +11,7 @@ jest.mock('../ErrorLabel', function () { return ({
     __esModule: true,
     default: function (_a) {
         var children = _a.children;
-        return (react_1.default.createElement("div", { "data-testid": "error-label" }, children));
+        return (<div data-testid="error-label">{children}</div>);
     },
 }); });
 var mockRegister = {
@@ -38,7 +27,7 @@ var mockInnerTextInputRef = {
     ref: jest.fn(),
 };
 var renderComponent = function (props) {
-    return (0, react_2.render)(react_1.default.createElement(Checkbox_1.default, __assign({}, props)));
+    return (0, react_2.render)(<Checkbox_1.default {...props}/>);
 };
 describe('CheckboxInput Component', function () {
     test('renders correctly with provided props', function () {

package/dist/system/Forms/Checkbox/{index.js → index.jsx}

@@ -3,17 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -52,20 +41,23 @@ var CheckboxInput = function (_a) {
     var _b = (0, react_1.useState)(true), textInputDisabled = _b[0], setTextInputDisables = _b[1];
     var renderError = function () {
         if (error === null || error === void 0 ? void 0 : error.isNeedShowError) {
-            return react_1.default.createElement(ErrorLabel_1.default, null, error === null || error === void 0 ? void 0 : error.message);
+            return <ErrorLabel_1.default>{error === null || error === void 0 ? void 0 : error.message}</ErrorLabel_1.default>;
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(BasicCheckbox, { className: className, status: error === null || error === void 0 ? void 0 : error.isNeedShowError },
-                react_1.default.createElement("input", __assign({}, register, { onChange: function (e) {
-                        setTextInputDisables(!e.target.checked);
-                        register.onChange(e);
-                    }, className: "input", type: "checkbox", name: data.name, value: value })),
-                react_1.default.createElement("p", { className: "checkmark" }),
-                label,
-                withInput && (react_1.default.createElement(Input_1.StyledInput, __assign({ status: false }, innerTextInputRef, { disabled: textInputDisabled }))))),
-        renderError()));
+    return (<>
+      <>
+        <BasicCheckbox className={className} status={error === null || error === void 0 ? void 0 : error.isNeedShowError}>
+          <input {...register} onChange={function (e) {
+            setTextInputDisables(!e.target.checked);
+            register.onChange(e);
+        }} className="input" type="checkbox" name={data.name} value={value}/>
+          <p className="checkmark"/>
+          {label}
+          {withInput && (<Input_1.StyledInput status={false} {...innerTextInputRef} disabled={textInputDisabled}/>)}
+        </BasicCheckbox>
+      </>
+      {renderError()}
+    </>);
 };
 exports.default = CheckboxInput;
 var templateObject_1;