@ludo.ninja/components 1.0.6 → 1.0.8

package/dist/modules/gallery/ui/EditGallery.jsx

@@ -1,93 +1,253 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import React from 'react';
+
 import styled from 'styled-components';
+
 import { useGetAssetsAndCollectionForFavorite } from '@/modules/gallery/api/useGetAssetsAndCollectionForFavorite';
 import { useGalleryStore } from '@/modules/gallery/store';
 import ItemsPreview from '@/modules/gallery/ui/itemsPreview';
+
 import { useRemoveAssetFromGalleryV2 } from '@/api/server-galleries/mutations/useRemoveAssetFromGallery';
 import { useRemoveCollectionFromGalleryV2 } from '@/api/server-galleries/mutations/useRemoveCollectionFromGallery';
+
 import EditGalleryForm from './editGalleryForm';
-var StyledAddFavlist = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n\n  @media (max-width: 767px) {\n    flex-direction: column;\n  }\n"], ["\n  display: flex;\n\n  @media (max-width: 767px) {\n    flex-direction: column;\n  }\n"])));
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+var __awaiter =
+  (this && this.__awaiter) ||
+  function (thisArg, _arguments, P, generator) {
+    function adopt(value) {
+      return value instanceof P
+        ? value
+        : new P(function (resolve) {
+            resolve(value);
+          });
+    }
+    return new (P || (P = Promise))(function (resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator['throw'](value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        result.done
+          ? resolve(result.value)
+          : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  };
+var __generator =
+  (this && this.__generator) ||
+  function (thisArg, body) {
+    var _ = {
+        label: 0,
+        sent: function () {
+          if (t[0] & 1) throw t[1];
+          return t[1];
+        },
+        trys: [],
+        ops: [],
+      },
+      f,
+      y,
+      t,
+      g;
+    return (
+      (g = { next: verb(0), throw: verb(1), return: verb(2) }),
+      typeof Symbol === 'function' &&
+        (g[Symbol.iterator] = function () {
+          return this;
+        }),
+      g
+    );
+    function verb(n) {
+      return function (v) {
+        return step([n, v]);
+      };
+    }
+    function step(op) {
+      if (f) throw new TypeError('Generator is already executing.');
+      while ((g && ((g = 0), op[0] && (_ = 0)), _))
+        try {
+          if (
+            ((f = 1),
+            y &&
+              (t =
+                op[0] & 2
+                  ? y['return']
+                  : op[0]
+                  ? y['throw'] || ((t = y['return']) && t.call(y), 0)
+                  : y.next) &&
+              !(t = t.call(y, op[1])).done)
+          )
+            return t;
+          if (((y = 0), t)) op = [op[0] & 2, t.value];
+          switch (op[0]) {
+            case 0:
+            case 1:
+              t = op;
+              break;
+            case 4:
+              _.label++;
+              return { value: op[1], done: false };
+            case 5:
+              _.label++;
+              y = op[1];
+              op = [0];
+              continue;
+            case 7:
+              op = _.ops.pop();
+              _.trys.pop();
+              continue;
+            default:
+              if (
+                !((t = _.trys), (t = t.length > 0 && t[t.length - 1])) &&
+                (op[0] === 6 || op[0] === 2)
+              ) {
+                _ = 0;
+                continue;
+              }
+              if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                _.label = op[1];
+                break;
+              }
+              if (op[0] === 6 && _.label < t[1]) {
+                _.label = t[1];
+                t = op;
+                break;
+              }
+              if (t && _.label < t[2]) {
+                _.label = t[2];
+                _.ops.push(op);
+                break;
+              }
+              if (t[2]) _.ops.pop();
+              _.trys.pop();
+              continue;
+          }
+          op = body.call(thisArg, _);
+        } catch (e) {
+          op = [6, e];
+          y = 0;
+        } finally {
+          f = t = 0;
+        }
+      if (op[0] & 5) throw op[1];
+      return { value: op[0] ? op[1] : void 0, done: true };
+    }
+  };
+
+var StyledAddFavlist = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  display: flex;\n\n  @media (max-width: 767px) {\n    flex-direction: column;\n  }\n',
+      ],
+      [
+        '\n  display: flex;\n\n  @media (max-width: 767px) {\n    flex-direction: column;\n  }\n',
+      ]
+    ))
+);
 export var EditGallery = function (_a) {
-    var galleryId = _a.galleryId, handleRemoveAsset = _a.handleRemoveAsset, gallery = _a.gallery, titleAssets = _a.titleAssets, titleForm = _a.titleForm, inputPlaceHolderText = _a.inputPlaceHolderText;
-    var _b = useGetAssetsAndCollectionForFavorite({
-        gallery: gallery,
-        activeTab: null,
-    }), creationsList = _b.creations, removeCreation = _b.removeCreation, isLoading = _b.isLoading, loadMore = _b.loadMore, isNextLoading = _b.isNextLoading;
-    var removeAssetFromGallery = useRemoveAssetFromGalleryV2().removeAssetFromGallery;
-    var removeCollectionFromGallery = useRemoveCollectionFromGalleryV2().removeCollectionFromGallery;
-    var handleDeleteCreation = function (itemId) { return __awaiter(void 0, void 0, void 0, function () {
-        var id;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    id = itemId.split('.').splice(1).join('.');
-                    if (!(itemId.split('.')[0] === 'collection')) return [3 /*break*/, 2];
-                    return [4 /*yield*/, removeCollectionFromGallery({
-                            galleryId: galleryId,
-                            collectionId: id,
-                        })];
-                case 1:
-                    _a.sent();
-                    handleRemoveAsset(id)('collection');
-                    removeCreation(id, 'collection');
-                    return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, removeAssetFromGallery({
-                        galleryId: galleryId,
-                        assetId: id,
-                    })];
-                case 3:
-                    _a.sent();
-                    handleRemoveAsset(id)('asset');
-                    removeCreation(id, 'asset');
-                    _a.label = 4;
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
-    var allResults = useGalleryStore(function (state) { return state.allResults; });
-    return (<StyledAddFavlist>
-      <ItemsPreview creations={creationsList} title={titleAssets} deleteMethod={handleDeleteCreation} isLoading={isLoading} loadMore={loadMore} isNextLoading={isNextLoading} allCount={allResults}/>
-      <EditGalleryForm name={gallery.getGalleryName()} description={gallery.getGalleryDescription()} title={titleForm} inputPlaceHolderText={inputPlaceHolderText} galleryId={galleryId}/>
-    </StyledAddFavlist>);
+  var galleryId = _a.galleryId,
+    handleRemoveAsset = _a.handleRemoveAsset,
+    gallery = _a.gallery,
+    titleAssets = _a.titleAssets,
+    titleForm = _a.titleForm,
+    inputPlaceHolderText = _a.inputPlaceHolderText;
+  var _b = useGetAssetsAndCollectionForFavorite({
+      gallery: gallery,
+      activeTab: null,
+    }),
+    creationsList = _b.creations,
+    removeCreation = _b.removeCreation,
+    isLoading = _b.isLoading,
+    loadMore = _b.loadMore,
+    isNextLoading = _b.isNextLoading;
+  var removeAssetFromGallery =
+    useRemoveAssetFromGalleryV2().removeAssetFromGallery;
+  var removeCollectionFromGallery =
+    useRemoveCollectionFromGalleryV2().removeCollectionFromGallery;
+  var handleDeleteCreation = function (itemId) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var id;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            id = itemId.split('.').splice(1).join('.');
+            if (!(itemId.split('.')[0] === 'collection'))
+              return [3 /*break*/, 2];
+            return [
+              4 /*yield*/,
+              removeCollectionFromGallery({
+                galleryId: galleryId,
+                collectionId: id,
+              }),
+            ];
+          case 1:
+            _a.sent();
+            handleRemoveAsset(id)('collection');
+            removeCreation(id, 'collection');
+            return [3 /*break*/, 4];
+          case 2:
+            return [
+              4 /*yield*/,
+              removeAssetFromGallery({
+                galleryId: galleryId,
+                assetId: id,
+              }),
+            ];
+          case 3:
+            _a.sent();
+            handleRemoveAsset(id)('asset');
+            removeCreation(id, 'asset');
+            _a.label = 4;
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var allResults = useGalleryStore(function (state) {
+    return state.allResults;
+  });
+  return (
+    <StyledAddFavlist>
+      <ItemsPreview
+        creations={creationsList}
+        title={titleAssets}
+        deleteMethod={handleDeleteCreation}
+        isLoading={isLoading}
+        loadMore={loadMore}
+        isNextLoading={isNextLoading}
+        allCount={allResults}
+      />
+      <EditGalleryForm
+        name={gallery.getGalleryName()}
+        description={gallery.getGalleryDescription()}
+        title={titleForm}
+        inputPlaceHolderText={inputPlaceHolderText}
+        galleryId={galleryId}
+      />
+    </StyledAddFavlist>
+  );
 };
 var templateObject_1;

package/dist/modules/gallery/ui/GalleryDeleteIcon.jsx

@@ -1,21 +1,46 @@
 import React, { useState } from 'react';
+
 import IconButton from '@/system/Buttons/IconButton';
+
 import { getAdaptiveScale } from '@/utils/adaptive/scale';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+
 import TrashIcon from '@/public/iconButton/trash.svg';
 import OpenTrashIcon from '@/public/iconButton/trash_open.svg';
+
 export var GalleryDeleteIcon = function (_a) {
-    var onClick = _a.onClick, className = _a.className;
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    var handleHover = function (e) {
-        setIsHovered(e.type === 'mouseenter');
-    };
-    return (<IconButton handleHoverFn={handleHover} onClick={onClick} className={"trash".concat(className ? " ".concat(className) : '')} icon={isHovered ? (<OpenTrashIcon style={getAdaptiveScale({
-                windowDimensions: windowDimensions,
-                currentSize: 1,
-            })}/>) : (<TrashIcon style={getAdaptiveScale({
-                windowDimensions: windowDimensions,
-                currentSize: 1,
-            })}/>)}/>);
+  var onClick = _a.onClick,
+    className = _a.className;
+  var windowDimensions =
+    useWindowDimensionsWithServerInitial().windowDimensions;
+  var _b = useState(false),
+    isHovered = _b[0],
+    setIsHovered = _b[1];
+  var handleHover = function (e) {
+    setIsHovered(e.type === 'mouseenter');
+  };
+  return (
+    <IconButton
+      handleHoverFn={handleHover}
+      onClick={onClick}
+      className={'trash'.concat(className ? ' '.concat(className) : '')}
+      icon={
+        isHovered ? (
+          <OpenTrashIcon
+            style={getAdaptiveScale({
+              windowDimensions: windowDimensions,
+              currentSize: 1,
+            })}
+          />
+        ) : (
+          <TrashIcon
+            style={getAdaptiveScale({
+              windowDimensions: windowDimensions,
+              currentSize: 1,
+            })}
+          />
+        )
+      }
+    />
+  );
 };

package/dist/modules/gallery/ui/PlaceholderItemsGallery.jsx

@@ -1,19 +1,80 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import Skeleton from 'react-loading-skeleton';
 import styled from 'styled-components';
+
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
-var SWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px;\n  display: flex;\n  gap: 16px;\n\n  & > :last-child {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .first {\n    border-radius: 6px;\n    height: 32px;\n    width: 32px;\n  }\n\n  .second {\n    border-radius: 3px;\n    height: 14px;\n    width: 110px;\n  }\n\n  .third {\n    border-radius: 3px;\n    height: 12px;\n    width: 67px;\n  }\n\n  ", " {\n    padding: ", ";\n    gap: ", ";\n\n    & > :last-child {\n      gap: ", ";\n    }\n\n    .first {\n      border-radius: ", ";\n      height: ", ";\n      width: ", ";\n    }\n\n    .second {\n      border-radius: ", ";\n      height: ", ";\n      width: ", ";\n    }\n\n    .third {\n      border-radius: ", ";\n      height: ", ";\n      width: ", ";\n    }\n  }\n"], ["\n  padding: 8px;\n  display: flex;\n  gap: 16px;\n\n  & > :last-child {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .first {\n    border-radius: 6px;\n    height: 32px;\n    width: 32px;\n  }\n\n  .second {\n    border-radius: 3px;\n    height: 14px;\n    width: 110px;\n  }\n\n  .third {\n    border-radius: 3px;\n    height: 12px;\n    width: 67px;\n  }\n\n  ", " {\n    padding: ", ";\n    gap: ", ";\n\n    & > :last-child {\n      gap: ", ";\n    }\n\n    .first {\n      border-radius: ", ";\n      height: ", ";\n      width: ", ";\n    }\n\n    .second {\n      border-radius: ", ";\n      height: ", ";\n      width: ", ";\n    }\n\n    .third {\n      border-radius: ", ";\n      height: ", ";\n      width: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(6), adaptiveValueCalc(6), adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(3), adaptiveValueCalc(14), adaptiveValueCalc(110), adaptiveValueCalc(3), adaptiveValueCalc(12), adaptiveValueCalc(67));
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
+var SWrapper = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  padding: 8px;\n  display: flex;\n  gap: 16px;\n\n  & > :last-child {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .first {\n    border-radius: 6px;\n    height: 32px;\n    width: 32px;\n  }\n\n  .second {\n    border-radius: 3px;\n    height: 14px;\n    width: 110px;\n  }\n\n  .third {\n    border-radius: 3px;\n    height: 12px;\n    width: 67px;\n  }\n\n  ',
+        ' {\n    padding: ',
+        ';\n    gap: ',
+        ';\n\n    & > :last-child {\n      gap: ',
+        ';\n    }\n\n    .first {\n      border-radius: ',
+        ';\n      height: ',
+        ';\n      width: ',
+        ';\n    }\n\n    .second {\n      border-radius: ',
+        ';\n      height: ',
+        ';\n      width: ',
+        ';\n    }\n\n    .third {\n      border-radius: ',
+        ';\n      height: ',
+        ';\n      width: ',
+        ';\n    }\n  }\n',
+      ],
+      [
+        '\n  padding: 8px;\n  display: flex;\n  gap: 16px;\n\n  & > :last-child {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .first {\n    border-radius: 6px;\n    height: 32px;\n    width: 32px;\n  }\n\n  .second {\n    border-radius: 3px;\n    height: 14px;\n    width: 110px;\n  }\n\n  .third {\n    border-radius: 3px;\n    height: 12px;\n    width: 67px;\n  }\n\n  ',
+        ' {\n    padding: ',
+        ';\n    gap: ',
+        ';\n\n    & > :last-child {\n      gap: ',
+        ';\n    }\n\n    .first {\n      border-radius: ',
+        ';\n      height: ',
+        ';\n      width: ',
+        ';\n    }\n\n    .second {\n      border-radius: ',
+        ';\n      height: ',
+        ';\n      width: ',
+        ';\n    }\n\n    .third {\n      border-radius: ',
+        ';\n      height: ',
+        ';\n      width: ',
+        ';\n    }\n  }\n',
+      ]
+    )),
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(8),
+  adaptiveValueCalc(16),
+  adaptiveValueCalc(6),
+  adaptiveValueCalc(6),
+  adaptiveValueCalc(32),
+  adaptiveValueCalc(32),
+  adaptiveValueCalc(3),
+  adaptiveValueCalc(14),
+  adaptiveValueCalc(110),
+  adaptiveValueCalc(3),
+  adaptiveValueCalc(12),
+  adaptiveValueCalc(67)
+);
 export var PlaceholderItemsGallery = function () {
-    return (<SWrapper>
-      <Skeleton baseColor="#CFD5EA" className="first"/>
+  return (
+    <SWrapper>
+      <Skeleton baseColor="#CFD5EA" className="first" />
       <div>
-        <Skeleton baseColor="#CFD5EA" className="second"/>
-        <Skeleton baseColor="#CFD5EA" className="third"/>
+        <Skeleton baseColor="#CFD5EA" className="second" />
+        <Skeleton baseColor="#CFD5EA" className="third" />
       </div>
-    </SWrapper>);
+    </SWrapper>
+  );
 };
 var templateObject_1;

package/dist/modules/gallery/ui/STopSections.js

@@ -1,9 +1,47 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import styled from 'styled-components';
+
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
-export var STopSections = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 1080px;\n  margin: 0 auto;\n  padding-top: 124px;\n  padding-bottom: 24px;\n\n  ", " {\n    width: 704px;\n  }\n\n  ", " {\n    width: 320px;\n    padding-top: 80px;\n  }\n\n  ", " {\n    width: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n  }\n"], ["\n  position: relative;\n  width: 1080px;\n  margin: 0 auto;\n  padding-top: 124px;\n  padding-bottom: 24px;\n\n  ", " {\n    width: 704px;\n  }\n\n  ", " {\n    width: 320px;\n    padding-top: 80px;\n  }\n\n  ", " {\n    width: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n  }\n"])), mediaQuery.maxWidthTablet, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(1080), adaptiveValueCalc(124), adaptiveValueCalc(24));
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
+export var STopSections = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  position: relative;\n  width: 1080px;\n  margin: 0 auto;\n  padding-top: 124px;\n  padding-bottom: 24px;\n\n  ',
+        ' {\n    width: 704px;\n  }\n\n  ',
+        ' {\n    width: 320px;\n    padding-top: 80px;\n  }\n\n  ',
+        ' {\n    width: ',
+        ';\n    padding-top: ',
+        ';\n    padding-bottom: ',
+        ';\n  }\n',
+      ],
+      [
+        '\n  position: relative;\n  width: 1080px;\n  margin: 0 auto;\n  padding-top: 124px;\n  padding-bottom: 24px;\n\n  ',
+        ' {\n    width: 704px;\n  }\n\n  ',
+        ' {\n    width: 320px;\n    padding-top: 80px;\n  }\n\n  ',
+        ' {\n    width: ',
+        ';\n    padding-top: ',
+        ';\n    padding-bottom: ',
+        ';\n  }\n',
+      ]
+    )),
+  mediaQuery.maxWidthTablet,
+  mediaQuery.mobile,
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(1080),
+  adaptiveValueCalc(124),
+  adaptiveValueCalc(24)
+);
 var templateObject_1;