@ludo.ninja/components 2.0.10 → 2.0.11

package/build/components/assetPage/audioVideoPlayer/index.js

@@ -1,45 +1,16 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioVideoPlayer = exports.ReactPlayerWrapper = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const image_1 = __importDefault(require("next/image"));
-const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-const react_player_1 = __importDefault(require("react-player"));
-const screenfull_1 = __importDefault(require("screenfull"));
-const styled_components_1 = __importStar(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const index_1 = require("../../../system/index");
-const Duration_1 = __importDefault(require("./Duration"));
-exports.ReactPlayerWrapper = styled_components_1.default.div `
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Component } from 'react';
+import Image from 'next/image';
+import Skeleton from 'react-loading-skeleton';
+import ReactPlayer from 'react-player';
+import screenfull from 'screenfull';
+import styled, { css } from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { BlackColor } from "../../../styles/colors";
+import { Flex } from "../../../system/index";
+import Duration from './Duration';
+export const ReactPlayerWrapper = styled.div `
   position: relative;
   width: 510px;
   height: ${(props) => (props.playerType === 'audio' ? '280px' : 'auto')};
@@ -54,14 +25,14 @@ exports.ReactPlayerWrapper = styled_components_1.default.div `
   border-radius: 16px;
   overflow: hidden;
 
-  ${ScreenWidth_1.mediaQuery.desktop} {
+  ${mediaQuery.desktop} {
     height: ${(props) => (props.playerType === 'audio' ? '180px' : 'auto')};
     align-items: flex-start;
     width: 335px;
     margin-right: 30px;
   }
 
-  ${ScreenWidth_1.mediaQuery.tablet} {
+  ${mediaQuery.tablet} {
     margin-right: 0;
   }
 
@@ -71,24 +42,24 @@ exports.ReactPlayerWrapper = styled_components_1.default.div `
     border-radius: 16px;
     overflow: hidden;
     ${(props) => props.isFullscreenMode
-    ? (0, styled_components_1.css) `
+    ? css `
             width: 100% !important;
           `
     : ''}
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    width: ${(0, _4k_1.adaptiveValueCalc)(510)};
-    height: ${(props) => props.playerType === 'audio' ? (0, _4k_1.adaptiveValueCalc)(280) : 'auto'};
-    margin-right: ${(0, _4k_1.adaptiveValueCalc)(60)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+  ${mediaQuery.minWidthFourK} {
+    width: ${adaptiveValueCalc(510)};
+    height: ${(props) => props.playerType === 'audio' ? adaptiveValueCalc(280) : 'auto'};
+    margin-right: ${adaptiveValueCalc(60)};
+    border-radius: ${adaptiveValueCalc(16)};
 
     .player {
-      border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      border-radius: ${adaptiveValueCalc(16)};
     }
   }
 `;
-const InputRangeVolume = styled_components_1.default.div `
+const InputRangeVolume = styled.div `
   width: 100%;
   display: flex;
   justify-content: center;
@@ -106,35 +77,35 @@ const InputRangeVolume = styled_components_1.default.div `
     height: 5px;
     background: #ebf0fc;
 
-    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-      height: ${(0, _4k_1.adaptiveValueCalc)(5)};
+    ${mediaQuery.minWidthFourK} {
+      height: ${adaptiveValueCalc(5)};
     }
   }
 `;
-const InputRangeSound = (0, styled_components_1.default)(InputRangeVolume) `
+const InputRangeSound = styled(InputRangeVolume) `
   width: 70px;
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    width: ${(0, _4k_1.adaptiveValueCalc)(70)};
+  ${mediaQuery.minWidthFourK} {
+    width: ${adaptiveValueCalc(70)};
   }
 
   &:before {
     background: #b0b2c0;
   }
 `;
-const FlexHelper = (0, styled_components_1.default)(index_1.Flex) `
+const FlexHelper = styled(Flex) `
   justify-content: space-between;
   padding: 25px;
 
-  ${ScreenWidth_1.mediaQuery.desktop} {
+  ${mediaQuery.desktop} {
     padding: 20px;
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(25)};
+  ${mediaQuery.minWidthFourK} {
+    padding: ${adaptiveValueCalc(25)};
   }
 `;
-const InputRange = styled_components_1.default.input `
+const InputRange = styled.input `
   width: 100%;
   -webkit-appearance: none;
   position: relative;
@@ -153,19 +124,19 @@ const InputRange = styled_components_1.default.input `
   &::-webkit-slider-runnable-track {
     background: #909999;
     height: 5px;
-    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-      height: ${(0, _4k_1.adaptiveValueCalc)(5)};
+    ${mediaQuery.minWidthFourK} {
+      height: ${adaptiveValueCalc(5)};
     }
   }
 `;
-const Controls = styled_components_1.default.div `
+const Controls = styled.div `
   width: 100%;
   display: flex;
   flex-direction: column;
   position: absolute;
   bottom: 0;
 `;
-const ControlButton = styled_components_1.default.button `
+const ControlButton = styled.button `
   padding: 0;
   background: transparent;
   position: relative;
@@ -187,12 +158,12 @@ const ControlButton = styled_components_1.default.button `
     width: 36px;
     height: 36px;
     border-radius: 50%;
-    background: ${colors_1.BlackColor};
+    background: ${BlackColor};
     opacity: 0.5;
     z-index: -1;
-    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-      height: ${(0, _4k_1.adaptiveValueCalc)(36)};
-      width: ${(0, _4k_1.adaptiveValueCalc)(36)};
+    ${mediaQuery.minWidthFourK} {
+      height: ${adaptiveValueCalc(36)};
+      width: ${adaptiveValueCalc(36)};
     }
   }
 
@@ -204,13 +175,13 @@ const ControlButton = styled_components_1.default.button `
   img {
     width: 15px;
     height: 15px;
-    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-      height: ${(0, _4k_1.adaptiveValueCalc)(15)};
-      width: ${(0, _4k_1.adaptiveValueCalc)(15)};
+    ${mediaQuery.minWidthFourK} {
+      height: ${adaptiveValueCalc(15)};
+      width: ${adaptiveValueCalc(15)};
     }
   }
 `;
-class AudioVideoPlayer extends react_1.Component {
+export class AudioVideoPlayer extends Component {
     player;
     constructor(props) {
         super(props);
@@ -276,33 +247,32 @@ class AudioVideoPlayer extends react_1.Component {
     };
     handleClickFullscreen = () => {
         const elem = document.getElementById('video-player');
-        screenfull_1.default.toggle(elem);
+        screenfull.toggle(elem);
     };
     handleErrors = () => {
         this.setState({ error: true });
     };
     renderLoadButton = (url, label) => {
-        return (0, jsx_runtime_1.jsx)("button", { onClick: () => this.load(url), children: label });
+        return _jsx("button", { onClick: () => this.load(url), children: label });
     };
     ref = (player) => {
         this.player = player;
     };
     updateIsFullscreenMode = () => {
         this.setState({
-            isFullscreenMode: screenfull_1.default.isFullscreen,
+            isFullscreenMode: screenfull.isFullscreen,
         });
     };
     componentDidMount() {
-        screenfull_1.default.on('change', this.updateIsFullscreenMode);
+        screenfull.on('change', this.updateIsFullscreenMode);
     }
     componentWillUnmount() {
-        screenfull_1.default.off('change', this.updateIsFullscreenMode);
+        screenfull.off('change', this.updateIsFullscreenMode);
     }
     render() {
         const { url, playing, light, volume, muted, played, duration, playedSeconds, error, isFullscreenMode, } = this.state;
         if (!url)
             return null;
-        return ((0, jsx_runtime_1.jsx)(exports.ReactPlayerWrapper, { id: 'video-player', playerType: this.props.playerType, poster: this.props.poster, isFullscreenMode: isFullscreenMode, children: this.props.isLoading ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { style: { position: 'absolute', left: 0, top: 0 }, height: "100%", width: "100%" })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error && this.props.playerType !== 'audio' ? ((0, jsx_runtime_1.jsx)(image_1.default, { width: 508, height: 216, alt: 'audioPlaceholder', src: `/assetPage/audioPlaceholder.svg` })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_player_1.default, { className: "player", id: this.props.playerType, url: url, playing: playing, light: light, volume: volume, playsinline: true, muted: muted, ref: this.ref, controls: false, onPlay: this.handlePlay, onPause: this.handlePause, onError: this.handleErrors, onProgress: this.handleProgress, onDuration: this.handleDuration }), (0, jsx_runtime_1.jsxs)(Controls, { children: [(0, jsx_runtime_1.jsxs)(index_1.Flex, { p: "0 15px 5px", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Duration_1.default, { seconds: playedSeconds }), (0, jsx_runtime_1.jsx)(Duration_1.default, { seconds: duration })] }), (0, jsx_runtime_1.jsx)(InputRangeVolume, { value: played, children: (0, jsx_runtime_1.jsx)(InputRange, { type: "range", min: 0, max: 0.99, step: "any", value: played, onMouseDown: this.handleSeekMouseDown, onChange: this.handleSeekChange, onMouseUp: this.handleSeekMouseUp }) }), (0, jsx_runtime_1.jsxs)(FlexHelper, { children: [(0, jsx_runtime_1.jsxs)(index_1.Flex, { children: [(0, jsx_runtime_1.jsx)(ControlButton, { style: { marginRight: '45px' }, onClick: this.handlePlayPause, children: (0, jsx_runtime_1.jsx)(image_1.default, { width: 15, height: 15, alt: playing ? 'Play' : 'pause', src: `/assetPage/${playing ? 'pause' : 'play'}.svg` }) }), (0, jsx_runtime_1.jsx)(ControlButton, { style: { marginRight: '20px' }, onClick: this.handleToggleMuted, children: (0, jsx_runtime_1.jsx)(image_1.default, { width: 15, height: 15, alt: 'sound-volume', src: `/assetPage/${volume ? 'soundOn' : 'soundOf'}.svg` }) }), (0, jsx_runtime_1.jsx)(InputRangeSound, { value: volume, children: (0, jsx_runtime_1.jsx)(InputRange, { type: "range", min: 0, max: 1, step: "any", value: volume, onChange: this.handleVolumeChange }) })] }), Boolean(this.props.playerType === 'audio') || ((0, jsx_runtime_1.jsx)(ControlButton, { onClick: this.handleClickFullscreen, children: (0, jsx_runtime_1.jsx)(image_1.default, { width: 15, height: 15, alt: 'fullScreen', src: `/assetPage/fullScreen.svg` }) }))] })] })] })) })) })) }));
+        return (_jsx(ReactPlayerWrapper, { id: 'video-player', playerType: this.props.playerType, poster: this.props.poster, isFullscreenMode: isFullscreenMode, children: this.props.isLoading ? (_jsx(Skeleton, { style: { position: 'absolute', left: 0, top: 0 }, height: "100%", width: "100%" })) : (_jsx(_Fragment, { children: error && this.props.playerType !== 'audio' ? (_jsx(Image, { width: 508, height: 216, alt: 'audioPlaceholder', src: `/assetPage/audioPlaceholder.svg` })) : (_jsx(_Fragment, { children: !error && (_jsxs(_Fragment, { children: [_jsx(ReactPlayer, { className: "player", id: this.props.playerType, url: url, playing: playing, light: light, volume: volume, playsinline: true, muted: muted, ref: this.ref, controls: false, onPlay: this.handlePlay, onPause: this.handlePause, onError: this.handleErrors, onProgress: this.handleProgress, onDuration: this.handleDuration }), _jsxs(Controls, { children: [_jsxs(Flex, { p: "0 15px 5px", justifyContent: "space-between", children: [_jsx(Duration, { seconds: playedSeconds }), _jsx(Duration, { seconds: duration })] }), _jsx(InputRangeVolume, { value: played, children: _jsx(InputRange, { type: "range", min: 0, max: 0.99, step: "any", value: played, onMouseDown: this.handleSeekMouseDown, onChange: this.handleSeekChange, onMouseUp: this.handleSeekMouseUp }) }), _jsxs(FlexHelper, { children: [_jsxs(Flex, { children: [_jsx(ControlButton, { style: { marginRight: '45px' }, onClick: this.handlePlayPause, children: _jsx(Image, { width: 15, height: 15, alt: playing ? 'Play' : 'pause', src: `/assetPage/${playing ? 'pause' : 'play'}.svg` }) }), _jsx(ControlButton, { style: { marginRight: '20px' }, onClick: this.handleToggleMuted, children: _jsx(Image, { width: 15, height: 15, alt: 'sound-volume', src: `/assetPage/${volume ? 'soundOn' : 'soundOf'}.svg` }) }), _jsx(InputRangeSound, { value: volume, children: _jsx(InputRange, { type: "range", min: 0, max: 1, step: "any", value: volume, onChange: this.handleVolumeChange }) })] }), Boolean(this.props.playerType === 'audio') || (_jsx(ControlButton, { onClick: this.handleClickFullscreen, children: _jsx(Image, { width: 15, height: 15, alt: 'fullScreen', src: `/assetPage/fullScreen.svg` }) }))] })] })] })) })) })) }));
     }
 }
-exports.AudioVideoPlayer = AudioVideoPlayer;

package/build/components/assetPage/category/index.js

@@ -1,18 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Category = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-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 index_1 = require("../../../system/index");
-const vars_1 = require("../../../fonts/vars");
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from 'next/link';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { Box, Text } from "../../../system/index";
+import { poppinsFontVarCss } from "../../../fonts/vars";
 // Styles
-const StyledBox = (0, styled_components_1.default)(index_1.Box) `
+const StyledBox = styled(Box) `
   text-align: center;
   width: max-content;
   background: ${({ theme }) => theme.colors.buttonInactive};
@@ -24,32 +18,31 @@ const StyledBox = (0, styled_components_1.default)(index_1.Box) `
     background: ${({ theme }) => theme.colors.accentHoverBg};
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(16)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+  ${mediaQuery.minWidthFourK} {
+    padding: ${adaptiveValueCalc(8)} ${adaptiveValueCalc(16)};
+    border-radius: ${adaptiveValueCalc(6)};
   }
 `;
-const StyledText = (0, styled_components_1.default)(index_1.Text) `
-  font-family: ${vars_1.poppinsFontVarCss.css};
+const StyledText = styled(Text) `
+  font-family: ${poppinsFontVarCss.css};
 
   font-weight: 500;
   font-size: 1.5em;
   line-height: 1.46;
   color: ${({ theme }) => theme.colors.primaryText};
 
-  ${ScreenWidth_1.mediaQuery.mobile} {
+  ${mediaQuery.mobile} {
     font-size: 1.4em;
     line-height: 1.42;
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+  ${mediaQuery.minWidthFourK} {
+    font-size: ${adaptiveValueCalc(15)};
   }
 `;
-const Category = ({ asset }) => {
+export const Category = ({ asset }) => {
     //update
     const category = asset.getCategory() ?? 'all';
     const categoryLabel = asset.getCategoryLabel() ?? 'All';
-    return ((0, jsx_runtime_1.jsx)(link_1.default, { style: { display: 'block', width: 'max-content' }, href: `/search/nfts?category=${category}`, children: (0, jsx_runtime_1.jsx)(StyledBox, { children: (0, jsx_runtime_1.jsx)(StyledText, { children: categoryLabel }) }) }));
+    return (_jsx(Link, { style: { display: 'block', width: 'max-content' }, href: `/search/nfts?category=${category}`, children: _jsx(StyledBox, { children: _jsx(StyledText, { children: categoryLabel }) }) }));
 };
-exports.Category = Category;

package/build/components/assetPage/description/index.js

@@ -1,43 +1,36 @@
-"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_hyphen_1 = __importDefault(require("react-hyphen"));
-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 colors_1 = require("../../../styles/colors");
-const index_1 = require("../../../system/index");
-const SH3 = (0, styled_components_1.default)(index_1.H3) `
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Hyphenated from 'react-hyphen';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { TextGrayColor } from "../../../styles/colors";
+import { Flex, H3 } from "../../../system/index";
+const SH3 = styled(H3) `
   margin-top: 20px;
   margin-bottom: 5px;
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-top: ${(0, _4k_1.adaptiveValueCalc)(20)};
-    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(5)};
+  ${mediaQuery.minWidthFourK} {
+    margin-top: ${adaptiveValueCalc(20)};
+    margin-bottom: ${adaptiveValueCalc(5)};
   }
 `;
-const SFlex = (0, styled_components_1.default)(index_1.Flex) `
+const SFlex = styled(Flex) `
   .text {
     font-size: 14px;
-    color: ${colors_1.TextGrayColor};
+    color: ${TextGrayColor};
 
-    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-      font-size: ${(0, _4k_1.adaptiveValueCalc)(14)};
+    ${mediaQuery.minWidthFourK} {
+      font-size: ${adaptiveValueCalc(14)};
     }
   }
 `;
-const Description = ({ description }) => {
+export const Description = ({ description }) => {
     if (!description)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(SFlex, { className: "description", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(SH3, { children: "Description" }), (0, jsx_runtime_1.jsx)(react_hyphen_1.default, { children: (0, jsx_runtime_1.jsx)("div", { 
+    return (_jsxs(SFlex, { className: "description", flexDirection: "column", children: [_jsx(SH3, { children: "Description" }), _jsx(Hyphenated, { children: _jsx("div", { 
                     // style={{
                     //   color: TextGrayColor,
                     //   fontSize: '14px',
                     // }}
                     className: "text", dangerouslySetInnerHTML: { __html: description } }) })] }));
 };
-exports.Description = Description;

package/build/components/assetPage/index.js

@@ -1,25 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Viewer3D = exports.AudioVideoPlayer = exports.CollectionSlider = exports.MarketPlaces = exports.Description = exports.Information = exports.Properties = exports.PriceRank = exports.AssetMedia = exports.Title = exports.Participants = void 0;
-var participants_1 = require("./participants");
-Object.defineProperty(exports, "Participants", { enumerable: true, get: function () { return participants_1.Participants; } });
-var tittle_1 = require("./tittle");
-Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return tittle_1.Title; } });
-var assetNft_1 = require("./assetNft");
-Object.defineProperty(exports, "AssetMedia", { enumerable: true, get: function () { return assetNft_1.AssetMedia; } });
-var priceRank_1 = require("./priceRank");
-Object.defineProperty(exports, "PriceRank", { enumerable: true, get: function () { return priceRank_1.PriceRank; } });
-var properties_1 = require("./properties");
-Object.defineProperty(exports, "Properties", { enumerable: true, get: function () { return properties_1.Properties; } });
-var information_1 = require("./information");
-Object.defineProperty(exports, "Information", { enumerable: true, get: function () { return information_1.Information; } });
-var description_1 = require("./description");
-Object.defineProperty(exports, "Description", { enumerable: true, get: function () { return description_1.Description; } });
-var marketPlaces_1 = require("./marketPlaces");
-Object.defineProperty(exports, "MarketPlaces", { enumerable: true, get: function () { return marketPlaces_1.MarketPlaces; } });
-var slider_1 = require("./slider");
-Object.defineProperty(exports, "CollectionSlider", { enumerable: true, get: function () { return slider_1.CollectionSlider; } });
-var audioVideoPlayer_1 = require("./audioVideoPlayer");
-Object.defineProperty(exports, "AudioVideoPlayer", { enumerable: true, get: function () { return audioVideoPlayer_1.AudioVideoPlayer; } });
-var viewer3D_1 = require("./viewer3D");
-Object.defineProperty(exports, "Viewer3D", { enumerable: true, get: function () { return viewer3D_1.Viewer3D; } });
+export { Participants } from './participants';
+export { Title } from './tittle';
+export { AssetMedia } from './assetNft';
+export { PriceRank } from './priceRank';
+export { Properties } from './properties';
+export { Information } from './information';
+export { Description } from './description';
+export { MarketPlaces } from './marketPlaces';
+export { CollectionSlider } from './slider';
+export { AudioVideoPlayer } from './audioVideoPlayer';
+export { Viewer3D } from './viewer3D';

package/build/components/assetPage/information/index.js

@@ -1,44 +1,38 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Information = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const moment_1 = __importDefault(require("moment"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const utils_1 = require("@ludo.ninja/utils");
-const env_1 = require("../../../store/env");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_2 = require("../../../styles/colors");
-const index_1 = require("../../../system/index");
-const copyBtn_1 = require("../../../utils/copyBtn");
-const screen_1 = require("../../../utils/screen");
-const vars_1 = require("../../../fonts/vars");
-const StyledImage = styled_components_1.default.img `
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import moment from 'moment';
+import styled from 'styled-components';
+import { BlackColor } from '@ludo.ninja/ui/build/styles/colors';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { shortenedText } from '@ludo.ninja/utils';
+import { useEnvStore } from "../../../store/env";
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { AccentColor, TextGrayColor } from "../../../styles/colors";
+import { Flex, H5 } from "../../../system/index";
+import { CopyButton } from "../../../utils/copyBtn";
+import { useWindowDimensions } from "../../../utils/screen";
+import { poppinsFontVarCss } from "../../../fonts/vars";
+const StyledImage = styled.img `
   border-radius: 50%;
   width: 16px;
   height: 16px;
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    width: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    height: ${(0, _4k_1.adaptiveValueCalc)(16)};
+  ${mediaQuery.minWidthFourK} {
+    width: ${adaptiveValueCalc(16)};
+    height: ${adaptiveValueCalc(16)};
   }
 `;
-const BoxOverflow = styled_components_1.default.div `
+const BoxOverflow = styled.div `
   text-align: right;
   white-space: nowrap;
   width: 90px;
   overflow: hidden;
   text-overflow: ellipsis;
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    width: ${(0, _4k_1.adaptiveValueCalc)(90)};
+  ${mediaQuery.minWidthFourK} {
+    width: ${adaptiveValueCalc(90)};
   }
 `;
-const FlexOverflow = (0, styled_components_1.default)(index_1.Flex) `
+const FlexOverflow = styled(Flex) `
   justify-content: space-between;
   gap: 8px;
   margin-bottom: 8px;
@@ -47,16 +41,16 @@ const FlexOverflow = (0, styled_components_1.default)(index_1.Flex) `
     white-space: nowrap;
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
-    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(8)};
+  ${mediaQuery.minWidthFourK} {
+    gap: ${adaptiveValueCalc(8)};
+    margin-bottom: ${adaptiveValueCalc(8)};
   }
 `;
-const OverflowH5 = (0, styled_components_1.default)(index_1.H5) `
+const OverflowH5 = styled(H5) `
   text-overflow: ellipsis;
   overflow: hidden;
 `;
-const SBlockchain = (0, styled_components_1.default)(index_1.Flex) `
+const SBlockchain = styled(Flex) `
   text-align: center;
   align-items: center;
   width: max-content;
@@ -67,8 +61,8 @@ const SBlockchain = (0, styled_components_1.default)(index_1.Flex) `
   gap: 6px;
 
   p {
-    color: ${colors_1.BlackColor};
-    font-family: ${vars_1.poppinsFontVarCss.css};
+    color: ${BlackColor};
+    font-family: ${poppinsFontVarCss.css};
     font-size: 15px;
     font-weight: 500;
     line-height: 22px;
@@ -78,25 +72,25 @@ const SBlockchain = (0, styled_components_1.default)(index_1.Flex) `
     background: ${({ theme }) => theme.colors.accentHoverBg};
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(4)} ${(0, _4k_1.adaptiveValueCalc)(8)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    gap: ${(0, _4k_1.adaptiveValueCalc)(6)};
+  ${mediaQuery.minWidthFourK} {
+    padding: ${adaptiveValueCalc(4)} ${adaptiveValueCalc(8)};
+    border-radius: ${adaptiveValueCalc(6)};
+    gap: ${adaptiveValueCalc(6)};
 
     p {
-      font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
-      line-height: ${(0, _4k_1.adaptiveValueCalc)(22)};
+      font-size: ${adaptiveValueCalc(15)};
+      line-height: ${adaptiveValueCalc(22)};
     }
   }
 `;
-const SFlex = (0, styled_components_1.default)(index_1.Flex) `
+const SFlex = styled(Flex) `
   margin-bottom: 8px;
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(8)};
+  ${mediaQuery.minWidthFourK} {
+    margin-bottom: ${adaptiveValueCalc(8)};
   }
 `;
-const Information = ({ asset }) => {
+export const Information = ({ asset }) => {
     const tokenId = asset.getTokenId();
     const splittedAssetId = asset.getSplitedAssetId();
     const address = asset.getAddress();
@@ -104,14 +98,13 @@ const Information = ({ asset }) => {
     const blockTimestamp = asset.getBlockTimestamp();
     const id = tokenId ? tokenId : splittedAssetId;
     const idTittle = tokenId ? 'Token ID' : 'ID';
-    const { deviceType } = (0, screen_1.useWindowDimensions)();
+    const { deviceType } = useWindowDimensions();
     const isDesktop = deviceType === 'isDesktop';
     const styleOverflow = isDesktop
         ? { overflow: 'hidden' }
         : undefined;
-    const getStaticENVDomain = (0, env_1.useEnvStore)((state) => state.getStaticDomain);
-    return ((0, jsx_runtime_1.jsxs)(index_1.Flex, { flexDirection: "column", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(SFlex, { justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_2.TextGrayColor, children: "Blockchain" }), (0, jsx_runtime_1.jsx)(link_1.default, { href: `/search/nfts?blockchain=${blockChain.getBlockChainPrivateLabel()}`, children: (0, jsx_runtime_1.jsxs)(SBlockchain, { children: [(0, jsx_runtime_1.jsx)("p", { children: blockChain.getBlockChainPublicLabel() }), (0, jsx_runtime_1.jsx)(StyledImage, { width: 16, height: 16, src: blockChain.getBlockChainIconRegular({
+    const getStaticENVDomain = useEnvStore((state) => state.getStaticDomain);
+    return (_jsxs(Flex, { flexDirection: "column", justifyContent: "space-between", children: [_jsxs(SFlex, { justifyContent: "space-between", alignItems: "center", children: [_jsx(H5, { color: TextGrayColor, children: "Blockchain" }), _jsx(Link, { href: `/search/nfts?blockchain=${blockChain.getBlockChainPrivateLabel()}`, children: _jsxs(SBlockchain, { children: [_jsx("p", { children: blockChain.getBlockChainPublicLabel() }), _jsx(StyledImage, { width: 16, height: 16, src: blockChain.getBlockChainIconRegular({
                                         domain: getStaticENVDomain(),
-                                    }), alt: blockChain.getBlockChainPublicLabel() })] }) })] }), address && ((0, jsx_runtime_1.jsxs)(FlexOverflow, { children: [(0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_2.TextGrayColor, children: "Contract Address" }), (0, jsx_runtime_1.jsx)(copyBtn_1.CopyButton, { value: address, style: styleOverflow, children: isDesktop ? ((0, jsx_runtime_1.jsx)(OverflowH5, { color: colors_2.AccentColor, title: address, children: address })) : ((0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_2.AccentColor, title: address, children: (0, utils_1.shortenedText)(address) })) })] })), (0, jsx_runtime_1.jsxs)(FlexOverflow, { children: [(0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_2.TextGrayColor, children: idTittle }), (0, jsx_runtime_1.jsx)(copyBtn_1.CopyButton, { value: id, style: styleOverflow, children: isDesktop ? ((0, jsx_runtime_1.jsx)(OverflowH5, { color: colors_2.AccentColor, title: id, children: id })) : ((0, jsx_runtime_1.jsx)(BoxOverflow, { children: (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_2.AccentColor, title: id, children: (0, jsx_runtime_1.jsx)(BoxOverflow, { children: id }) }) })) })] }), blockTimestamp && ((0, jsx_runtime_1.jsxs)(SFlex, { justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_2.TextGrayColor, children: "Added on" }), (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_2.TextGrayColor, children: (0, moment_1.default)(blockTimestamp * 1000).format('LL') })] }))] }));
+                                    }), alt: blockChain.getBlockChainPublicLabel() })] }) })] }), address && (_jsxs(FlexOverflow, { children: [_jsx(H5, { color: TextGrayColor, children: "Contract Address" }), _jsx(CopyButton, { value: address, style: styleOverflow, children: isDesktop ? (_jsx(OverflowH5, { color: AccentColor, title: address, children: address })) : (_jsx(H5, { color: AccentColor, title: address, children: shortenedText(address) })) })] })), _jsxs(FlexOverflow, { children: [_jsx(H5, { color: TextGrayColor, children: idTittle }), _jsx(CopyButton, { value: id, style: styleOverflow, children: isDesktop ? (_jsx(OverflowH5, { color: AccentColor, title: id, children: id })) : (_jsx(BoxOverflow, { children: _jsx(H5, { color: AccentColor, title: id, children: _jsx(BoxOverflow, { children: id }) }) })) })] }), blockTimestamp && (_jsxs(SFlex, { justifyContent: "space-between", children: [_jsx(H5, { color: TextGrayColor, children: "Added on" }), _jsx(H5, { color: TextGrayColor, children: moment(blockTimestamp * 1000).format('LL') })] }))] }));
 };
-exports.Information = Information;