@ludo.ninja/components 1.1.6 → 1.1.7

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

@@ -1,147 +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;
-};
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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';
-import Duration from './Duration';
-export var ReactPlayerWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: 510px;\n  height: ", ";\n  display: flex;\n  margin-right: 60px;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 16px;\n  overflow: hidden;\n\n  ", " {\n    height: ", ";\n    align-items: flex-start;\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  .player {\n    display: flex;\n    height: auto !important;\n    border-radius: 16px;\n    overflow: hidden;\n    ", "\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    border-radius: ", ";\n\n    .player {\n      border-radius: ", ";\n    }\n  }\n"], ["\n  position: relative;\n  width: 510px;\n  height: ", ";\n  display: flex;\n  margin-right: 60px;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 16px;\n  overflow: hidden;\n\n  ", " {\n    height: ", ";\n    align-items: flex-start;\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  .player {\n    display: flex;\n    height: auto !important;\n    border-radius: 16px;\n    overflow: hidden;\n    ", "\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    border-radius: ", ";\n\n    .player {\n      border-radius: ", ";\n    }\n  }\n"])), function (props) { return (props.playerType === 'audio' ? '280px' : 'auto'); }, function (props) {
-    return props.playerType === 'audio'
-        ? props.poster || '/assetPage/audioPlaceholder.svg'
-        : null;
-}, mediaQuery.desktop, function (props) { return (props.playerType === 'audio' ? '180px' : 'auto'); }, mediaQuery.tablet, function (props) {
-    return props.isFullscreenMode
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            width: 100% !important;\n          "], ["\n            width: 100% !important;\n          "]))) : '';
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(510), function (props) {
-    return props.playerType === 'audio' ? adaptiveValueCalc(280) : 'auto';
-}, adaptiveValueCalc(60), adaptiveValueCalc(16), adaptiveValueCalc(16));
-var InputRangeVolume = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  &:before {\n    content: '';\n    display: flex;\n    position: absolute;\n    transition: 0.5s color ease;\n    left: 0;\n    width: ", "%;\n    height: 5px;\n    background: #ebf0fc;\n\n    ", " {\n      height: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  &:before {\n    content: '';\n    display: flex;\n    position: absolute;\n    transition: 0.5s color ease;\n    left: 0;\n    width: ", "%;\n    height: 5px;\n    background: #ebf0fc;\n\n    ", " {\n      height: ", ";\n    }\n  }\n"])), function (props) { return props.value * 100; }, mediaQuery.minWidthFourK, adaptiveValueCalc(5));
-var InputRangeSound = styled(InputRangeVolume)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 70px;\n\n  ", " {\n    width: ", ";\n  }\n\n  &:before {\n    background: #b0b2c0;\n  }\n"], ["\n  width: 70px;\n\n  ", " {\n    width: ", ";\n  }\n\n  &:before {\n    background: #b0b2c0;\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(70));
-var FlexHelper = styled(Flex)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  justify-content: space-between;\n  padding: 25px;\n\n  ", " {\n    padding: 20px;\n  }\n\n  ", " {\n    padding: ", ";\n  }\n"], ["\n  justify-content: space-between;\n  padding: 25px;\n\n  ", " {\n    padding: 20px;\n  }\n\n  ", " {\n    padding: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(25));
-var InputRange = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  -webkit-appearance: none;\n  position: relative;\n  opacity: 0.5;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: #909999;\n    height: 5px;\n    ", " {\n      height: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  -webkit-appearance: none;\n  position: relative;\n  opacity: 0.5;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: #909999;\n    height: 5px;\n    ", " {\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(5));
-var Controls = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n"])));
-var ControlButton = styled.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 0;\n  background: transparent;\n  position: relative;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  user-select: none;\n  outline: none;\n\n  * {\n    user-select: none;\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: ", ";\n    opacity: 0.5;\n    z-index: -1;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n\n  &:hover {\n    &:before {\n      opacity: 0.6;\n    }\n  }\n  img {\n    width: 15px;\n    height: 15px;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n"], ["\n  padding: 0;\n  background: transparent;\n  position: relative;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  user-select: none;\n  outline: none;\n\n  * {\n    user-select: none;\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: ", ";\n    opacity: 0.5;\n    z-index: -1;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n\n  &:hover {\n    &:before {\n      opacity: 0.6;\n    }\n  }\n  img {\n    width: 15px;\n    height: 15px;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n"])), BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(36), adaptiveValueCalc(36), mediaQuery.minWidthFourK, adaptiveValueCalc(15), adaptiveValueCalc(15));
-var AudioVideoPlayer = /** @class */ (function (_super) {
-    __extends(AudioVideoPlayer, _super);
-    function AudioVideoPlayer(props) {
-        var _this = _super.call(this, props) || this;
-        _this.load = function (url) {
-            _this.setState({
-                url: url,
-                played: 0,
-            });
-        };
-        _this.handlePlayPause = function () {
-            _this.setState({ playing: !_this.state.playing });
-        };
-        _this.handleVolumeChange = function (e) {
-            _this.setState({ volume: parseFloat(e.target.value) });
-        };
-        _this.handleToggleMuted = function () {
-            _this.setState({
-                muted: !_this.state.muted,
-                volume: 0,
-            });
-        };
-        _this.handlePlay = function () {
-            _this.setState({ playing: true });
-        };
-        _this.handlePause = function () {
-            _this.setState({ playing: false });
-        };
-        _this.handleSeekMouseDown = function () {
-            _this.setState({ seeking: true });
-        };
-        _this.handleSeekChange = function (e) {
-            _this.setState({ played: parseFloat(e.target.value) });
-        };
-        _this.handleSeekMouseUp = function (e) {
-            var _a;
-            _this.setState({ seeking: false });
-            var event = e.target.value;
-            (_a = _this.player) === null || _a === void 0 ? void 0 : _a.seekTo(parseFloat(event));
-        };
-        _this.handleProgress = function (state) {
-            if (!_this.state.seeking) {
-                _this.setState(state);
-            }
-        };
-        _this.handleDuration = function (duration) {
-            _this.setState({ duration: duration });
-        };
-        _this.handleClickFullscreen = function () {
-            var elem = document.getElementById('video-player');
-            screenfull.toggle(elem);
-        };
-        _this.handleErrors = function () {
-            _this.setState({ error: true });
-        };
-        _this.renderLoadButton = function (url, label) {
-            return _jsx("button", { onClick: function () { return _this.load(url); }, children: label });
-        };
-        _this.ref = function (player) {
-            _this.player = player;
-        };
-        _this.updateIsFullscreenMode = function () {
-            _this.setState({
-                isFullscreenMode: screenfull.isFullscreen,
-            });
-        };
-        _this.state = {
-            url: _this.props.src,
-            playing: false,
-            controls: false,
-            light: false,
-            volume: 0.8,
-            muted: false,
-            played: 0,
-            duration: 0,
-            playedSeconds: 0,
-            seeking: false,
-            loaded: 0,
-            loadedSeconds: 0,
-            error: false,
-            isFullscreenMode: false,
-        };
-        return _this;
-    }
-    AudioVideoPlayer.prototype.componentDidMount = function () {
-        screenfull.on('change', this.updateIsFullscreenMode);
-    };
-    AudioVideoPlayer.prototype.componentWillUnmount = function () {
-        screenfull.off('change', this.updateIsFullscreenMode);
-    };
-    AudioVideoPlayer.prototype.render = function () {
-        var _a = this.state, url = _a.url, playing = _a.playing, light = _a.light, volume = _a.volume, muted = _a.muted, played = _a.played, duration = _a.duration, playedSeconds = _a.playedSeconds, error = _a.error, isFullscreenMode = _a.isFullscreenMode;
-        if (!url)
-            return null;
-        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/".concat(playing ? 'pause' : 'play', ".svg") }) }), _jsx(ControlButton, { style: { marginRight: '20px' }, onClick: this.handleToggleMuted, children: _jsx(Image, { width: 15, height: 15, alt: 'sound-volume', src: "/assetPage/".concat(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" }) }))] })] })] })) })) })) }));
-    };
-    return AudioVideoPlayer;
-}(Component));
-export { AudioVideoPlayer };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/assetPage/audioVideoPlayer/index.jsx

@@ -1,179 +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;
-};
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import React, { 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';
-import Duration from './Duration';
-export var ReactPlayerWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: 510px;\n  height: ", ";\n  display: flex;\n  margin-right: 60px;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 16px;\n  overflow: hidden;\n\n  ", " {\n    height: ", ";\n    align-items: flex-start;\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  .player {\n    display: flex;\n    height: auto !important;\n    border-radius: 16px;\n    overflow: hidden;\n    ", "\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    border-radius: ", ";\n\n    .player {\n      border-radius: ", ";\n    }\n  }\n"], ["\n  position: relative;\n  width: 510px;\n  height: ", ";\n  display: flex;\n  margin-right: 60px;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 16px;\n  overflow: hidden;\n\n  ", " {\n    height: ", ";\n    align-items: flex-start;\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  .player {\n    display: flex;\n    height: auto !important;\n    border-radius: 16px;\n    overflow: hidden;\n    ", "\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    border-radius: ", ";\n\n    .player {\n      border-radius: ", ";\n    }\n  }\n"])), function (props) { return (props.playerType === 'audio' ? '280px' : 'auto'); }, function (props) {
-    return props.playerType === 'audio'
-        ? props.poster || '/assetPage/audioPlaceholder.svg'
-        : null;
-}, mediaQuery.desktop, function (props) { return (props.playerType === 'audio' ? '180px' : 'auto'); }, mediaQuery.tablet, function (props) {
-    return props.isFullscreenMode
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            width: 100% !important;\n          "], ["\n            width: 100% !important;\n          "]))) : '';
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(510), function (props) {
-    return props.playerType === 'audio' ? adaptiveValueCalc(280) : 'auto';
-}, adaptiveValueCalc(60), adaptiveValueCalc(16), adaptiveValueCalc(16));
-var InputRangeVolume = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  &:before {\n    content: '';\n    display: flex;\n    position: absolute;\n    transition: 0.5s color ease;\n    left: 0;\n    width: ", "%;\n    height: 5px;\n    background: #ebf0fc;\n\n    ", " {\n      height: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  &:before {\n    content: '';\n    display: flex;\n    position: absolute;\n    transition: 0.5s color ease;\n    left: 0;\n    width: ", "%;\n    height: 5px;\n    background: #ebf0fc;\n\n    ", " {\n      height: ", ";\n    }\n  }\n"])), function (props) { return props.value * 100; }, mediaQuery.minWidthFourK, adaptiveValueCalc(5));
-var InputRangeSound = styled(InputRangeVolume)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 70px;\n\n  ", " {\n    width: ", ";\n  }\n\n  &:before {\n    background: #b0b2c0;\n  }\n"], ["\n  width: 70px;\n\n  ", " {\n    width: ", ";\n  }\n\n  &:before {\n    background: #b0b2c0;\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(70));
-var FlexHelper = styled(Flex)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  justify-content: space-between;\n  padding: 25px;\n\n  ", " {\n    padding: 20px;\n  }\n\n  ", " {\n    padding: ", ";\n  }\n"], ["\n  justify-content: space-between;\n  padding: 25px;\n\n  ", " {\n    padding: 20px;\n  }\n\n  ", " {\n    padding: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(25));
-var InputRange = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  -webkit-appearance: none;\n  position: relative;\n  opacity: 0.5;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: #909999;\n    height: 5px;\n    ", " {\n      height: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  -webkit-appearance: none;\n  position: relative;\n  opacity: 0.5;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: #909999;\n    height: 5px;\n    ", " {\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(5));
-var Controls = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n"])));
-var ControlButton = styled.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 0;\n  background: transparent;\n  position: relative;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  user-select: none;\n  outline: none;\n\n  * {\n    user-select: none;\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: ", ";\n    opacity: 0.5;\n    z-index: -1;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n\n  &:hover {\n    &:before {\n      opacity: 0.6;\n    }\n  }\n  img {\n    width: 15px;\n    height: 15px;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n"], ["\n  padding: 0;\n  background: transparent;\n  position: relative;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  user-select: none;\n  outline: none;\n\n  * {\n    user-select: none;\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: ", ";\n    opacity: 0.5;\n    z-index: -1;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n\n  &:hover {\n    &:before {\n      opacity: 0.6;\n    }\n  }\n  img {\n    width: 15px;\n    height: 15px;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n"])), BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(36), adaptiveValueCalc(36), mediaQuery.minWidthFourK, adaptiveValueCalc(15), adaptiveValueCalc(15));
-var AudioVideoPlayer = /** @class */ (function (_super) {
-    __extends(AudioVideoPlayer, _super);
-    function AudioVideoPlayer(props) {
-        var _this = _super.call(this, props) || this;
-        _this.load = function (url) {
-            _this.setState({
-                url: url,
-                played: 0,
-            });
-        };
-        _this.handlePlayPause = function () {
-            _this.setState({ playing: !_this.state.playing });
-        };
-        _this.handleVolumeChange = function (e) {
-            _this.setState({ volume: parseFloat(e.target.value) });
-        };
-        _this.handleToggleMuted = function () {
-            _this.setState({
-                muted: !_this.state.muted,
-                volume: 0,
-            });
-        };
-        _this.handlePlay = function () {
-            _this.setState({ playing: true });
-        };
-        _this.handlePause = function () {
-            _this.setState({ playing: false });
-        };
-        _this.handleSeekMouseDown = function () {
-            _this.setState({ seeking: true });
-        };
-        _this.handleSeekChange = function (e) {
-            _this.setState({ played: parseFloat(e.target.value) });
-        };
-        _this.handleSeekMouseUp = function (e) {
-            var _a;
-            _this.setState({ seeking: false });
-            var event = e.target.value;
-            (_a = _this.player) === null || _a === void 0 ? void 0 : _a.seekTo(parseFloat(event));
-        };
-        _this.handleProgress = function (state) {
-            if (!_this.state.seeking) {
-                _this.setState(state);
-            }
-        };
-        _this.handleDuration = function (duration) {
-            _this.setState({ duration: duration });
-        };
-        _this.handleClickFullscreen = function () {
-            var elem = document.getElementById('video-player');
-            screenfull.toggle(elem);
-        };
-        _this.handleErrors = function () {
-            _this.setState({ error: true });
-        };
-        _this.renderLoadButton = function (url, label) {
-            return <button onClick={function () { return _this.load(url); }}>{label}</button>;
-        };
-        _this.ref = function (player) {
-            _this.player = player;
-        };
-        _this.updateIsFullscreenMode = function () {
-            _this.setState({
-                isFullscreenMode: screenfull.isFullscreen,
-            });
-        };
-        _this.state = {
-            url: _this.props.src,
-            playing: false,
-            controls: false,
-            light: false,
-            volume: 0.8,
-            muted: false,
-            played: 0,
-            duration: 0,
-            playedSeconds: 0,
-            seeking: false,
-            loaded: 0,
-            loadedSeconds: 0,
-            error: false,
-            isFullscreenMode: false,
-        };
-        return _this;
-    }
-    AudioVideoPlayer.prototype.componentDidMount = function () {
-        screenfull.on('change', this.updateIsFullscreenMode);
-    };
-    AudioVideoPlayer.prototype.componentWillUnmount = function () {
-        screenfull.off('change', this.updateIsFullscreenMode);
-    };
-    AudioVideoPlayer.prototype.render = function () {
-        var _a = this.state, url = _a.url, playing = _a.playing, light = _a.light, volume = _a.volume, muted = _a.muted, played = _a.played, duration = _a.duration, playedSeconds = _a.playedSeconds, error = _a.error, isFullscreenMode = _a.isFullscreenMode;
-        if (!url)
-            return null;
-        return (<ReactPlayerWrapper id={'video-player'} playerType={this.props.playerType} poster={this.props.poster} isFullscreenMode={isFullscreenMode}>
-        {this.props.isLoading ? (<Skeleton style={{ position: 'absolute', left: 0, top: 0 }} height="100%" width="100%"/>) : (<>
-            {error && this.props.playerType !== 'audio' ? (<Image width={508} height={216} alt={'audioPlaceholder'} src={"/assetPage/audioPlaceholder.svg"}/>) : (<>
-                {!error && (<>
-                    <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}/>
-                    <Controls>
-                      <Flex p="0 15px 5px" justifyContent="space-between">
-                        <Duration seconds={playedSeconds}/>
-                        <Duration seconds={duration}/>
-                      </Flex>
-                      <InputRangeVolume value={played}>
-                        <InputRange type="range" min={0} max={0.99} step="any" value={played} onMouseDown={this.handleSeekMouseDown} onChange={this.handleSeekChange} onMouseUp={this.handleSeekMouseUp}/>
-                      </InputRangeVolume>
-                      <FlexHelper>
-                        <Flex>
-                          <ControlButton style={{ marginRight: '45px' }} onClick={this.handlePlayPause}>
-                            <Image width={15} height={15} alt={playing ? 'Play' : 'pause'} src={"/assetPage/".concat(playing ? 'pause' : 'play', ".svg")}/>
-                          </ControlButton>
-                          <ControlButton style={{ marginRight: '20px' }} onClick={this.handleToggleMuted}>
-                            <Image width={15} height={15} alt={'sound-volume'} src={"/assetPage/".concat(volume ? 'soundOn' : 'soundOf', ".svg")}/>
-                          </ControlButton>
-                          <InputRangeSound value={volume}>
-                            <InputRange type="range" min={0} max={1} step="any" value={volume} onChange={this.handleVolumeChange}/>
-                          </InputRangeSound>
-                        </Flex>
-                        {Boolean(this.props.playerType === 'audio') || (<ControlButton onClick={this.handleClickFullscreen}>
-                            <Image width={15} height={15} alt={'fullScreen'} src={"/assetPage/fullScreen.svg"}/>
-                          </ControlButton>)}
-                      </FlexHelper>
-                    </Controls>
-                  </>)}
-              </>)}
-          </>)}
-      </ReactPlayerWrapper>);
-    };
-    return AudioVideoPlayer;
-}(Component));
-export { AudioVideoPlayer };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -1,32 +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 } 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';
-import { poppinsFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledBox = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  width: max-content;\n  background: ", ";\n  transition: all 0.2s ease-in;\n  padding: 8px 16px;\n  border-radius: 6px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n  }\n"], ["\n  text-align: center;\n  width: max-content;\n  background: ", ";\n  transition: all 0.2s ease-in;\n  padding: 8px 16px;\n  border-radius: 6px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.buttonInactive;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.accentHoverBg;
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(6));
-var StyledText = styled(Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n\n  font-weight: 500;\n  font-size: 1.5em;\n  line-height: 1.46;\n  color: ", ";\n\n  ", " {\n    font-size: 1.4em;\n    line-height: 1.42;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"], ["\n  font-family: ", ";\n\n  font-weight: 500;\n  font-size: 1.5em;\n  line-height: 1.46;\n  color: ", ";\n\n  ", " {\n    font-size: 1.4em;\n    line-height: 1.42;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"])), poppinsFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.primaryText;
-}, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(15));
-export var Category = function (_a) {
-    var _b, _c;
-    var asset = _a.asset;
-    //update
-    var category = (_b = asset.getCategory()) !== null && _b !== void 0 ? _b : 'all';
-    var categoryLabel = (_c = asset.getCategoryLabel()) !== null && _c !== void 0 ? _c : 'All';
-    return (_jsx(Link, { style: { display: 'block', width: 'max-content' }, href: "/search/nfts?category=".concat(category), children: _jsx(StyledBox, { children: _jsx(StyledText, { children: categoryLabel }) }) }));
-};
-var templateObject_1, templateObject_2;

package/dist/components/assetPage/category/index.jsx

@@ -1,35 +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 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';
-import { poppinsFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledBox = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  width: max-content;\n  background: ", ";\n  transition: all 0.2s ease-in;\n  padding: 8px 16px;\n  border-radius: 6px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n  }\n"], ["\n  text-align: center;\n  width: max-content;\n  background: ", ";\n  transition: all 0.2s ease-in;\n  padding: 8px 16px;\n  border-radius: 6px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.buttonInactive;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.accentHoverBg;
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(6));
-var StyledText = styled(Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n\n  font-weight: 500;\n  font-size: 1.5em;\n  line-height: 1.46;\n  color: ", ";\n\n  ", " {\n    font-size: 1.4em;\n    line-height: 1.42;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"], ["\n  font-family: ", ";\n\n  font-weight: 500;\n  font-size: 1.5em;\n  line-height: 1.46;\n  color: ", ";\n\n  ", " {\n    font-size: 1.4em;\n    line-height: 1.42;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"])), poppinsFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.primaryText;
-}, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(15));
-export var Category = function (_a) {
-    var _b, _c;
-    var asset = _a.asset;
-    //update
-    var category = (_b = asset.getCategory()) !== null && _b !== void 0 ? _b : 'all';
-    var categoryLabel = (_c = asset.getCategoryLabel()) !== null && _c !== void 0 ? _c : 'All';
-    return (<Link style={{ display: 'block', width: 'max-content' }} href={"/search/nfts?category=".concat(category)}>
-      <StyledBox>
-        <StyledText>{categoryLabel}</StyledText>
-      </StyledBox>
-    </Link>);
-};
-var templateObject_1, templateObject_2;

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

@@ -1,25 +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 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';
-var SH3 = styled(H3)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 20px;\n  margin-bottom: 5px;\n\n  ", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-top: 20px;\n  margin-bottom: 5px;\n\n  ", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(5));
-var SFlex = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .text {\n    font-size: 14px;\n    color: ", ";\n\n    ", " {\n      font-size: ", ";\n    }\n  }\n"], ["\n  .text {\n    font-size: 14px;\n    color: ", ";\n\n    ", " {\n      font-size: ", ";\n    }\n  }\n"])), TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(14));
-export var Description = function (_a) {
-    var description = _a.description;
-    if (!description)
-        return null;
-    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 } }) })] }));
-};
-var templateObject_1, templateObject_2;

package/dist/components/assetPage/description/index.jsx

@@ -1,30 +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 from 'react';
-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';
-var SH3 = styled(H3)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 20px;\n  margin-bottom: 5px;\n\n  ", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-top: 20px;\n  margin-bottom: 5px;\n\n  ", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(5));
-var SFlex = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .text {\n    font-size: 14px;\n    color: ", ";\n\n    ", " {\n      font-size: ", ";\n    }\n  }\n"], ["\n  .text {\n    font-size: 14px;\n    color: ", ";\n\n    ", " {\n      font-size: ", ";\n    }\n  }\n"])), TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(14));
-export var Description = function (_a) {
-    var description = _a.description;
-    if (!description)
-        return null;
-    return (<SFlex className="description" flexDirection="column">
-      <SH3>Description</SH3>
-      <Hyphenated>
-        <div 
-    // style={{
-    //   color: TextGrayColor,
-    //   fontSize: '14px',
-    // }}
-    className="text" dangerouslySetInnerHTML={{ __html: description }}/>
-      </Hyphenated>
-    </SFlex>);
-};
-var templateObject_1, templateObject_2;

package/dist/components/assetPage/detailsAccordeon/index.js

@@ -1,22 +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, Fragment as _Fragment } from "react/jsx-runtime";
-import Accordion from 'react-bootstrap/Accordion';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { H3 } from '@system';
-import { Category } from '../category';
-import { Information } from '../information';
-import { Properties } from '../properties';
-var StyledAccordion = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .accordion {\n    width: 100%;\n\n    &-header {\n      .accordion-button::after {\n        transform: rotate(90deg);\n        background-image: url('/tabs/arrow_right_dark.svg');\n        width: 24px;\n        height: 24px;\n        background-size: 100%;\n      }\n\n      .accordion-button:not(.collapsed)::after {\n        transform: rotate(-90deg);\n      }\n    }\n\n    &-item {\n      border: none;\n      border-radius: 0;\n      background: transparent;\n    }\n\n    &-body {\n      padding: 10px 0;\n    }\n\n    &-button {\n      padding: 10px 0;\n      color: inherit;\n      box-shadow: none;\n      background: transparent;\n\n      &:not(.collapsed) {\n        background: transparent;\n      }\n    }\n  }\n\n  ", " {\n    .accordion {\n      &-header {\n        .accordion-button::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n\n      &-body {\n        padding: ", " 0;\n      }\n\n      &-button {\n        padding: ", " 0;\n      }\n    }\n  }\n"], ["\n  .accordion {\n    width: 100%;\n\n    &-header {\n      .accordion-button::after {\n        transform: rotate(90deg);\n        background-image: url('/tabs/arrow_right_dark.svg');\n        width: 24px;\n        height: 24px;\n        background-size: 100%;\n      }\n\n      .accordion-button:not(.collapsed)::after {\n        transform: rotate(-90deg);\n      }\n    }\n\n    &-item {\n      border: none;\n      border-radius: 0;\n      background: transparent;\n    }\n\n    &-body {\n      padding: 10px 0;\n    }\n\n    &-button {\n      padding: 10px 0;\n      color: inherit;\n      box-shadow: none;\n      background: transparent;\n\n      &:not(.collapsed) {\n        background: transparent;\n      }\n    }\n  }\n\n  ", " {\n    .accordion {\n      &-header {\n        .accordion-button::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n\n      &-body {\n        padding: ", " 0;\n      }\n\n      &-button {\n        padding: ", " 0;\n      }\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(24), adaptiveValueCalc(10), adaptiveValueCalc(10));
-var StyledCategoryH3 = styled(H3)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: 10px;\n  margin-bottom: 20px;\n\n  ", " {\n    padding-top: ", ";\n    margin-bottom: ", ";\n  }\n"], ["\n  padding-top: 10px;\n  margin-bottom: 20px;\n\n  ", " {\n    padding-top: ", ";\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(20));
-export var DetailsAccordeon = function (_a) {
-    var asset = _a.asset;
-    var attributes = asset.getAttributes();
-    return (_jsx(StyledAccordion, { children: _jsxs(Accordion, { defaultActiveKey: "1", style: { width: '100%' }, children: [(attributes.length && (_jsxs(_Fragment, { children: [_jsxs(Accordion.Item, { eventKey: "0", children: [_jsx(Accordion.Header, { children: _jsx(H3, { children: "Properties" }) }), _jsx(Accordion.Body, { children: _jsx(Properties, { attributes: attributes }) })] }), _jsx("hr", {})] }))) ||
-                    null, _jsxs(Accordion.Item, { eventKey: "1", children: [_jsx(Accordion.Header, { children: _jsx(H3, { children: "Chain Info" }) }), _jsx(Accordion.Body, { children: _jsx(Information, { asset: asset }) })] }), _jsx("hr", {}), asset.getCategory() && (_jsxs(_Fragment, { children: [_jsx(StyledCategoryH3, { children: "Category" }), _jsx(Category, { asset: asset })] }))] }) }));
-};
-var templateObject_1, templateObject_2;

package/dist/components/assetPage/detailsAccordeon/index.jsx

@@ -1,49 +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 from 'react';
-import Accordion from 'react-bootstrap/Accordion';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { H3 } from '@system';
-import { Category } from '../category';
-import { Information } from '../information';
-import { Properties } from '../properties';
-var StyledAccordion = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .accordion {\n    width: 100%;\n\n    &-header {\n      .accordion-button::after {\n        transform: rotate(90deg);\n        background-image: url('/tabs/arrow_right_dark.svg');\n        width: 24px;\n        height: 24px;\n        background-size: 100%;\n      }\n\n      .accordion-button:not(.collapsed)::after {\n        transform: rotate(-90deg);\n      }\n    }\n\n    &-item {\n      border: none;\n      border-radius: 0;\n      background: transparent;\n    }\n\n    &-body {\n      padding: 10px 0;\n    }\n\n    &-button {\n      padding: 10px 0;\n      color: inherit;\n      box-shadow: none;\n      background: transparent;\n\n      &:not(.collapsed) {\n        background: transparent;\n      }\n    }\n  }\n\n  ", " {\n    .accordion {\n      &-header {\n        .accordion-button::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n\n      &-body {\n        padding: ", " 0;\n      }\n\n      &-button {\n        padding: ", " 0;\n      }\n    }\n  }\n"], ["\n  .accordion {\n    width: 100%;\n\n    &-header {\n      .accordion-button::after {\n        transform: rotate(90deg);\n        background-image: url('/tabs/arrow_right_dark.svg');\n        width: 24px;\n        height: 24px;\n        background-size: 100%;\n      }\n\n      .accordion-button:not(.collapsed)::after {\n        transform: rotate(-90deg);\n      }\n    }\n\n    &-item {\n      border: none;\n      border-radius: 0;\n      background: transparent;\n    }\n\n    &-body {\n      padding: 10px 0;\n    }\n\n    &-button {\n      padding: 10px 0;\n      color: inherit;\n      box-shadow: none;\n      background: transparent;\n\n      &:not(.collapsed) {\n        background: transparent;\n      }\n    }\n  }\n\n  ", " {\n    .accordion {\n      &-header {\n        .accordion-button::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n\n      &-body {\n        padding: ", " 0;\n      }\n\n      &-button {\n        padding: ", " 0;\n      }\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(24), adaptiveValueCalc(10), adaptiveValueCalc(10));
-var StyledCategoryH3 = styled(H3)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: 10px;\n  margin-bottom: 20px;\n\n  ", " {\n    padding-top: ", ";\n    margin-bottom: ", ";\n  }\n"], ["\n  padding-top: 10px;\n  margin-bottom: 20px;\n\n  ", " {\n    padding-top: ", ";\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(20));
-export var DetailsAccordeon = function (_a) {
-    var asset = _a.asset;
-    var attributes = asset.getAttributes();
-    return (<StyledAccordion>
-      <Accordion defaultActiveKey="1" style={{ width: '100%' }}>
-        {(attributes.length && (<>
-            <Accordion.Item eventKey="0">
-              <Accordion.Header>
-                <H3>Properties</H3>
-              </Accordion.Header>
-              <Accordion.Body>
-                <Properties attributes={attributes}/>
-              </Accordion.Body>
-            </Accordion.Item>
-            <hr />
-          </>)) ||
-            null}
-        <Accordion.Item eventKey="1">
-          <Accordion.Header>
-            <H3>Chain Info</H3>
-          </Accordion.Header>
-          <Accordion.Body>
-            <Information asset={asset}/>
-          </Accordion.Body>
-        </Accordion.Item>
-        <hr />
-        {asset.getCategory() && (<>
-            <StyledCategoryH3>Category</StyledCategoryH3>
-            <Category asset={asset}/>
-          </>)}
-      </Accordion>
-    </StyledAccordion>);
-};
-var templateObject_1, templateObject_2;