@ludo.ninja/components 1.1.2 → 1.1.3

package/dist/components/assetPage/media/AssetImage/index.jsx

@@ -1,278 +1,76 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    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);
+};
 import React, { useLayoutEffect, useRef, useState } from 'react';
-
 import Link from 'next/link';
-
 import Skeleton from 'react-loading-skeleton';
 import styled, { css } from 'styled-components';
-
-import {
-  AccentColor,
-  InactiveButtonColor,
-  WhiteColor,
-} from '@ludo.ninja/ui/build/styles/colors';
+import { AccentColor, InactiveButtonColor, WhiteColor, } from '@ludo.ninja/ui/build/styles/colors';
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
 import { defineImgProportion } from '@/utils/imageProportionsSize';
-
 import { poppinsFontVarCss } from '@/fonts/vars';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    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 SScreenshotContainer = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ',
-        ';\n  transition: background-color 150ms;\n\n  &:hover {\n    background-color: ',
-        ';\n  }\n\n  .link {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    width: 100%;\n    height: 48px;\n\n    ',
-        ' {\n      height: 42px;\n    }\n\n    span {\n      text-align: center;\n      color: ',
-        ';\n      font-family: ',
-        ';\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 22px;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ',
-        ' {\n    border-radius: ',
-        ';\n\n    .link {\n      padding: ',
-        ';\n      height: ',
-        ';\n\n      span {\n        font-size: ',
-        ';\n        line-height: ',
-        ';\n      }\n    }\n  }\n',
-      ],
-      [
-        '\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ',
-        ';\n  transition: background-color 150ms;\n\n  &:hover {\n    background-color: ',
-        ';\n  }\n\n  .link {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    width: 100%;\n    height: 48px;\n\n    ',
-        ' {\n      height: 42px;\n    }\n\n    span {\n      text-align: center;\n      color: ',
-        ';\n      font-family: ',
-        ';\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 22px;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ',
-        ' {\n    border-radius: ',
-        ';\n\n    .link {\n      padding: ',
-        ';\n      height: ',
-        ';\n\n      span {\n        font-size: ',
-        ';\n        line-height: ',
-        ';\n      }\n    }\n  }\n',
-      ]
-    )),
-  WhiteColor,
-  InactiveButtonColor,
-  mediaQuery.desktop,
-  AccentColor,
-  poppinsFontVarCss.css,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(10),
-  adaptiveValueCalc(48),
-  adaptiveValueCalc(15),
-  adaptiveValueCalc(22)
-);
-var ImageContainer = styled.div(
-  templateObject_6 ||
-    (templateObject_6 = __makeTemplateObject(
-      [
-        '\n  display: flex;\n  position: relative;\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  & img {\n    object-fit: contain;\n    aspect-ratio: auto;\n    width: 100%;\n    border-radius: 16px;\n    max-height: 510px;\n    max-width: 510px;\n  }\n\n  ',
-        '\n  ',
-        ' {\n    & img {\n      border-radius: ',
-        ';\n      max-height: ',
-        ';\n      max-width: ',
-        ';\n    }\n\n    ',
-        '\n  }\n',
-      ],
-      [
-        '\n  display: flex;\n  position: relative;\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  & img {\n    object-fit: contain;\n    aspect-ratio: auto;\n    width: 100%;\n    border-radius: 16px;\n    max-height: 510px;\n    max-width: 510px;\n  }\n\n  ',
-        '\n  ',
-        ' {\n    & img {\n      border-radius: ',
-        ';\n      max-height: ',
-        ';\n      max-width: ',
-        ';\n    }\n\n    ',
-        '\n  }\n',
-      ]
-    )),
-  function (props) {
+var SScreenshotContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ", ";\n  transition: background-color 150ms;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .link {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    width: 100%;\n    height: 48px;\n\n    ", " {\n      height: 42px;\n    }\n\n    span {\n      text-align: center;\n      color: ", ";\n      font-family: ", ";\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 22px;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    .link {\n      padding: ", ";\n      height: ", ";\n\n      span {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"], ["\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ", ";\n  transition: background-color 150ms;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .link {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    width: 100%;\n    height: 48px;\n\n    ", " {\n      height: 42px;\n    }\n\n    span {\n      text-align: center;\n      color: ", ";\n      font-family: ", ";\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 22px;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    .link {\n      padding: ", ";\n      height: ", ";\n\n      span {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), WhiteColor, InactiveButtonColor, mediaQuery.desktop, AccentColor, poppinsFontVarCss.css, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(10), adaptiveValueCalc(48), adaptiveValueCalc(15), adaptiveValueCalc(22));
+var ImageContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  & img {\n    object-fit: contain;\n    aspect-ratio: auto;\n    width: 100%;\n    border-radius: 16px;\n    max-height: 510px;\n    max-width: 510px;\n  }\n\n  ", "\n  ", " {\n    & img {\n      border-radius: ", ";\n      max-height: ", ";\n      max-width: ", ";\n    }\n\n    ", "\n  }\n"], ["\n  display: flex;\n  position: relative;\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  & img {\n    object-fit: contain;\n    aspect-ratio: auto;\n    width: 100%;\n    border-radius: 16px;\n    max-height: 510px;\n    max-width: 510px;\n  }\n\n  ", "\n  ", " {\n    & img {\n      border-radius: ", ";\n      max-height: ", ";\n      max-width: ", ";\n    }\n\n    ", "\n  }\n"])), function (props) {
     return props.isScreenshot
-      ? css(
-          templateObject_2 ||
-            (templateObject_2 = __makeTemplateObject(
-              [
-                '\n          width: 508px;\n          height: 244px;\n\n          ',
-                ' {\n            width: 336px;\n            height: 164px;\n          }\n\n          ',
-                ' {\n            width: 320px;\n            height: 154px;\n          }\n        ',
-              ],
-              [
-                '\n          width: 508px;\n          height: 244px;\n\n          ',
-                ' {\n            width: 336px;\n            height: 164px;\n          }\n\n          ',
-                ' {\n            width: 320px;\n            height: 154px;\n          }\n        ',
-              ]
-            )),
-          mediaQuery.desktop,
-          mediaQuery.mobile
-        )
-      : css(
-          templateObject_3 ||
-            (templateObject_3 = __makeTemplateObject(
-              [
-                '\n          border-radius: 16px;\n          width: 510px;\n          height: 510px;\n\n          ',
-                ' {\n            width: 335px;\n            height: 335px;\n          }\n\n          ',
-                ' {\n            width: 320px;\n            height: 320px;\n          }\n        ',
-              ],
-              [
-                '\n          border-radius: 16px;\n          width: 510px;\n          height: 510px;\n\n          ',
-                ' {\n            width: 335px;\n            height: 335px;\n          }\n\n          ',
-                ' {\n            width: 320px;\n            height: 320px;\n          }\n        ',
-              ]
-            )),
-          mediaQuery.desktop,
-          mediaQuery.mobile
-        );
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(510),
-  adaptiveValueCalc(510),
-  function (props) {
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: 508px;\n          height: 244px;\n\n          ", " {\n            width: 336px;\n            height: 164px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 154px;\n          }\n        "], ["\n          width: 508px;\n          height: 244px;\n\n          ", " {\n            width: 336px;\n            height: 164px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 154px;\n          }\n        "])), mediaQuery.desktop, mediaQuery.mobile) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border-radius: 16px;\n          width: 510px;\n          height: 510px;\n\n          ", " {\n            width: 335px;\n            height: 335px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 320px;\n          }\n        "], ["\n          border-radius: 16px;\n          width: 510px;\n          height: 510px;\n\n          ", " {\n            width: 335px;\n            height: 335px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 320px;\n          }\n        "])), mediaQuery.desktop, mediaQuery.mobile);
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(510), adaptiveValueCalc(510), function (props) {
     return props.isScreenshot
-      ? css(
-          templateObject_4 ||
-            (templateObject_4 = __makeTemplateObject(
-              [
-                '\n            width: ',
-                ';\n            height: ',
-                ';\n          ',
-              ],
-              [
-                '\n            width: ',
-                ';\n            height: ',
-                ';\n          ',
-              ]
-            )),
-          adaptiveValueCalc(508),
-          adaptiveValueCalc(244)
-        )
-      : css(
-          templateObject_5 ||
-            (templateObject_5 = __makeTemplateObject(
-              [
-                '\n            border-radius: ',
-                ';\n            width: ',
-                ';\n            height: ',
-                ';\n          ',
-              ],
-              [
-                '\n            border-radius: ',
-                ';\n            width: ',
-                ';\n            height: ',
-                ';\n          ',
-              ]
-            )),
-          adaptiveValueCalc(16),
-          adaptiveValueCalc(510),
-          adaptiveValueCalc(510)
-        );
-  }
-);
+        ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            width: ", ";\n            height: ", ";\n          "], ["\n            width: ", ";\n            height: ", ";\n          "])), adaptiveValueCalc(508), adaptiveValueCalc(244)) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-radius: ", ";\n            width: ", ";\n            height: ", ";\n          "], ["\n            border-radius: ", ";\n            width: ", ";\n            height: ", ";\n          "])), adaptiveValueCalc(16), adaptiveValueCalc(510), adaptiveValueCalc(510));
+});
 var AssetImage = function (_a) {
-  var imageUrl = _a.imageUrl,
-    errorImg = _a.errorImg,
-    originalUrl = _a.originalUrl,
-    alt = _a.alt,
-    isScreenshot = _a.isScreenshot;
-  var _b = useState({}),
-    size = _b[0],
-    setSize = _b[1];
-  var _c = useState(true),
-    loading = _c[0],
-    setLoading = _c[1];
-  var ref = useRef(null);
-  useLayoutEffect(
-    function () {
-      var _a = defineImgProportion(ref, 80),
-        width = _a.width,
-        height = _a.height;
-      if (imageUrl && parseFloat(height) && parseFloat(width)) {
-        defineImgProportion(ref, 80);
-        setSize({ width: width, height: height });
-      }
-    },
-    [imageUrl]
-  );
-  var LinkComponent = originalUrl ? Link : React.Fragment;
-  var ScreenShotContainer = isScreenshot
-    ? SScreenshotContainer
-    : React.Fragment;
-  return (
-    <LinkComponent href={''.concat(originalUrl)} target="_blank">
+    var imageUrl = _a.imageUrl, errorImg = _a.errorImg, originalUrl = _a.originalUrl, alt = _a.alt, isScreenshot = _a.isScreenshot;
+    var _b = useState({}), size = _b[0], setSize = _b[1];
+    var _c = useState(true), loading = _c[0], setLoading = _c[1];
+    var ref = useRef(null);
+    useLayoutEffect(function () {
+        var _a = defineImgProportion(ref, 80), width = _a.width, height = _a.height;
+        if (imageUrl && parseFloat(height) && parseFloat(width)) {
+            defineImgProportion(ref, 80);
+            setSize({ width: width, height: height });
+        }
+    }, [imageUrl]);
+    var LinkComponent = originalUrl ? Link : React.Fragment;
+    var ScreenShotContainer = isScreenshot
+        ? SScreenshotContainer
+        : React.Fragment;
+    return (<LinkComponent href={"".concat(originalUrl)} target="_blank">
       <ScreenShotContainer>
         <ImageContainer isScreenshot={isScreenshot}>
-          {loading && (
-            <Skeleton
-              height={'100%'}
-              width={'100%'}
-              style={{
+          {loading && (<Skeleton height={'100%'} width={'100%'} style={{
                 lineHeight: 'normal',
                 position: 'absolute',
                 top: 0,
                 left: 0,
-                visibility: ''.concat(loading ? 'hidden' : 'visible'),
-              }}
-            />
-          )}
-          <img
-            alt={alt}
-            ref={ref}
-            src={imageUrl}
-            onError={function (e) {
-              e.target.src = errorImg;
-              setSize({ width: '100%', height: '100%' });
-            }}
-            onLoad={function () {
-              return setLoading(false);
-            }}
-            style={__assign(
-              { opacity: loading ? '0' : '1' },
-              isScreenshot
-                ? {
-                    maxHeight: '100%',
-                    maxWidth: '100%',
-                  }
-                : size
-            )}
-          />
+                visibility: "".concat(loading ? 'hidden' : 'visible'),
+            }}/>)}
+          <img alt={alt} ref={ref} src={imageUrl} onError={function (e) {
+            e.target.src = errorImg;
+            setSize({ width: '100%', height: '100%' });
+        }} onLoad={function () { return setLoading(false); }} style={__assign({ opacity: loading ? '0' : '1' }, (isScreenshot
+            ? {
+                maxHeight: '100%',
+                maxWidth: '100%',
+            }
+            : size))}/>
         </ImageContainer>
-        {isScreenshot && originalUrl && (
-          <div className="link" title={originalUrl}>
+        {isScreenshot && originalUrl && (<div className="link" title={originalUrl}>
             <span>{originalUrl}</span>
-          </div>
-        )}
+          </div>)}
       </ScreenShotContainer>
-    </LinkComponent>
-  );
+    </LinkComponent>);
 };
 export default AssetImage;
-var templateObject_1,
-  templateObject_2,
-  templateObject_3,
-  templateObject_4,
-  templateObject_5,
-  templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,246 +1,60 @@
+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, { useState } from 'react';
-
 import styled, { css } from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
 import { ClickAwayListener } from '@ludo.ninja/utils';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BackgroundColorLight,
-  BlackColor,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
-
+import { BackgroundColorLight, BlackColor, TextGrayColor, WhiteColor, } from '@/styles/colors';
 import IconWithButton from '@/system/Buttons/IconWithButton';
-
 import { getAdaptiveScale } from '@/utils/adaptive/scale';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
 import { dmsansFontVarCss } from '@/fonts/vars';
-
 import MoreIcon from '@/public/creation/card/moreBtn.svg';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var SContainer = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  position: relative;\n\n  & > *:first-child {\n    width: 24px;\n    height: 24px;\n\n    ',
-        ' {\n      width: ',
-        ';\n      height: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        '\n  position: relative;\n\n  & > *:first-child {\n    width: 24px;\n    height: 24px;\n\n    ',
-        ' {\n      width: ',
-        ';\n      height: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(24),
-  adaptiveValueCalc(24)
-);
-var SContent = styled.div(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  position: absolute;\n  padding: 8px;\n  top: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  transition: opacity 200ms;\n\n  pointer-events: ',
-        ';\n  opacity: ',
-        ';\n\n  border-radius: 6px;\n  background: ',
-        ';\n  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);\n  width: 184px;\n\n  ',
-        ' {\n    padding: ',
-        ';\n    top: calc(100% + ',
-        ');\n    border-radius: ',
-        ';\n    box-shadow: 0 ',
-        ' ',
-        '\n      ',
-        ' rgba(33, 21, 95, 0.1);\n    width: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  position: absolute;\n  padding: 8px;\n  top: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  transition: opacity 200ms;\n\n  pointer-events: ',
-        ';\n  opacity: ',
-        ';\n\n  border-radius: 6px;\n  background: ',
-        ';\n  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);\n  width: 184px;\n\n  ',
-        ' {\n    padding: ',
-        ';\n    top: calc(100% + ',
-        ');\n    border-radius: ',
-        ';\n    box-shadow: 0 ',
-        ' ',
-        '\n      ',
-        ' rgba(33, 21, 95, 0.1);\n    width: ',
-        ';\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.isOpen ? 'unset' : 'none';
-  },
-  function (props) {
-    return props.isOpen ? '1' : '0';
-  },
-  WhiteColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(-16),
-  adaptiveValueCalc(184)
-);
-var hover = css(
-  templateObject_3 ||
-    (templateObject_3 = __makeTemplateObject(
-      [
-        '\n  color: ',
-        ';\n  border-radius: 4px;\n  background: ',
-        ';\n\n  ',
-        ' {\n    border-radius: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  color: ',
-        ';\n  border-radius: 4px;\n  background: ',
-        ';\n\n  ',
-        ' {\n    border-radius: ',
-        ';\n  }\n',
-      ]
-    )),
-  BlackColor,
-  BackgroundColorLight,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(4)
-);
-var SButton = styled.button(
-  templateObject_4 ||
-    (templateObject_4 = __makeTemplateObject(
-      [
-        '\n  font-family: ',
-        ';\n  padding: 6px 8px;\n  color: ',
-        ';\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  outline: none;\n  border: none;\n  background: inherit;\n  transition: background-color 200ms;\n  text-align: left;\n\n  &:active {\n    ',
-        '\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      ',
-        '\n    }\n  }\n\n  ',
-        ' {\n    padding: ',
-        ' ',
-        ';\n    font-size: ',
-        ';\n    line-height: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  font-family: ',
-        ';\n  padding: 6px 8px;\n  color: ',
-        ';\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  outline: none;\n  border: none;\n  background: inherit;\n  transition: background-color 200ms;\n  text-align: left;\n\n  &:active {\n    ',
-        '\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      ',
-        '\n    }\n  }\n\n  ',
-        ' {\n    padding: ',
-        ' ',
-        ';\n    font-size: ',
-        ';\n    line-height: ',
-        ';\n  }\n',
-      ]
-    )),
-  dmsansFontVarCss.css,
-  TextGrayColor,
-  hover,
-  hover,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(13),
-  adaptiveValueCalc(18)
-);
-var SIcon = styled.div(
-  templateObject_5 ||
-    (templateObject_5 = __makeTemplateObject(
-      [
-        '\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(17),
-  adaptiveValueCalc(4)
-);
+var SContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  & > *:first-child {\n    width: 24px;\n    height: 24px;\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  position: relative;\n\n  & > *:first-child {\n    width: 24px;\n    height: 24px;\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(24));
+var SContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  padding: 8px;\n  top: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  transition: opacity 200ms;\n\n  pointer-events: ", ";\n  opacity: ", ";\n\n  border-radius: 6px;\n  background: ", ";\n  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);\n  width: 184px;\n\n  ", " {\n    padding: ", ";\n    top: calc(100% + ", ");\n    border-radius: ", ";\n    box-shadow: 0 ", " ", "\n      ", " rgba(33, 21, 95, 0.1);\n    width: ", ";\n  }\n"], ["\n  position: absolute;\n  padding: 8px;\n  top: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  transition: opacity 200ms;\n\n  pointer-events: ", ";\n  opacity: ", ";\n\n  border-radius: 6px;\n  background: ", ";\n  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);\n  width: 184px;\n\n  ", " {\n    padding: ", ";\n    top: calc(100% + ", ");\n    border-radius: ", ";\n    box-shadow: 0 ", " ", "\n      ", " rgba(33, 21, 95, 0.1);\n    width: ", ";\n  }\n"])), function (props) { return (props.isOpen ? 'unset' : 'none'); }, function (props) { return (props.isOpen ? '1' : '0'); }, WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(-16), adaptiveValueCalc(184));
+var hover = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  border-radius: 4px;\n  background: ", ";\n\n  ", " {\n    border-radius: ", ";\n  }\n"], ["\n  color: ", ";\n  border-radius: 4px;\n  background: ", ";\n\n  ", " {\n    border-radius: ", ";\n  }\n"])), BlackColor, BackgroundColorLight, mediaQuery.minWidthFourK, adaptiveValueCalc(4));
+var SButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  padding: 6px 8px;\n  color: ", ";\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  outline: none;\n  border: none;\n  background: inherit;\n  transition: background-color 200ms;\n  text-align: left;\n\n  &:active {\n    ", "\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    font-size: ", ";\n    line-height: ", ";\n  }\n"], ["\n  font-family: ", ";\n  padding: 6px 8px;\n  color: ", ";\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  outline: none;\n  border: none;\n  background: inherit;\n  transition: background-color 200ms;\n  text-align: left;\n\n  &:active {\n    ", "\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    font-size: ", ";\n    line-height: ", ";\n  }\n"])), dmsansFontVarCss.css, TextGrayColor, hover, hover, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(13), adaptiveValueCalc(18));
+var SIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(17), adaptiveValueCalc(4));
 var IconResize = function () {
-  var windowDimensions =
-    useWindowDimensionsWithServerInitial().windowDimensions;
-  return (
-    <SIcon>
-      <MoreIcon
-        style={getAdaptiveScale({
-          windowDimensions: windowDimensions,
-          currentSize: 1,
-        })}
-      />
-    </SIcon>
-  );
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (<SIcon>
+      <MoreIcon style={getAdaptiveScale({
+            windowDimensions: windowDimensions,
+            currentSize: 1,
+        })}/>
+    </SIcon>);
 };
 export var MoreDropDown = function (_a) {
-  var items = _a.items;
-  var _b = useState(false),
-    isOpen = _b[0],
-    setIsOpen = _b[1];
-  var handle = {
-    close: function () {
-      setIsOpen(false);
-    },
-    toggle: function () {
-      setIsOpen(function (prev) {
-        return !prev;
-      });
-    },
-  };
-  return (
-    <ClickAwayListener onClickAway={handle.close}>
+    var items = _a.items;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var handle = {
+        close: function () {
+            setIsOpen(false);
+        },
+        toggle: function () {
+            setIsOpen(function (prev) { return !prev; });
+        },
+    };
+    return (<ClickAwayListener onClickAway={handle.close}>
       <SContainer>
         <IconWithButton variant={'dots'} onClick={handle.toggle}>
           <IconResize />
         </IconWithButton>
         <SContent isOpen={isOpen}>
           {items.map(function (_a) {
-            var title = _a.title,
-              onClick = _a.onClick,
-              id = _a.id;
-            return (
-              <SButton
-                key={id}
-                onClick={function () {
-                  onClick === null || onClick === void 0 ? void 0 : onClick();
-                  handle.close();
-                }}
-              >
-                <span>{title}</span>
-              </SButton>
-            );
-          })}
+            var title = _a.title, onClick = _a.onClick, id = _a.id;
+            return (<SButton key={id} onClick={function () {
+                    onClick === null || onClick === void 0 ? void 0 : onClick();
+                    handle.close();
+                }}>
+              <span>{title}</span>
+            </SButton>);
+        })}
         </SContent>
       </SContainer>
-    </ClickAwayListener>
-  );
+    </ClickAwayListener>);
 };
-var templateObject_1,
-  templateObject_2,
-  templateObject_3,
-  templateObject_4,
-  templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;