npm - @ludo.ninja/components - Versions diffs - 1.0.7 → 1.0.8 - Mend

@ludo.ninja/components 1.0.7 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (809) hide show

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

@@ -1,76 +1,278 @@
-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 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 __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) {
     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 CHANGED Viewed

@@ -1,60 +1,246 @@
-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 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 __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 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;