@ludo.ninja/components 2.3.36 → 2.3.37

package/build/components/assetPage/media/AssetImage/index.js

@@ -0,0 +1,187 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const link_1 = __importDefault(require("next/link"));
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const imageProportionsSize_1 = require("../../../../utils/imageProportionsSize");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importStar(require("styled-components"));
+const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const vars_1 = require("../../../../fonts/vars");
+const SScreenshotContainer = styled_components_1.default.div `
+  border-radius: 16px;
+  overflow: hidden;
+  background-color: ${colors_1.WhiteColor};
+  transition: background-color 150ms;
+
+  &:hover {
+    background-color: ${colors_1.InactiveButtonColor};
+  }
+
+  .link {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    width: 100%;
+    height: 48px;
+
+    ${ScreenWidth_1.mediaQuery.desktop} {
+      height: 42px;
+    }
+
+    span {
+      text-align: center;
+      color: ${colors_1.AccentColor};
+      font-family: ${vars_1.poppinsFontVarCss.css};
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 22px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+
+    .link {
+      padding: ${(0, _4k_1.adaptiveValueCalc)(10)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(48)};
+
+      span {
+        font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+        line-height: ${(0, _4k_1.adaptiveValueCalc)(22)};
+      }
+    }
+  }
+`;
+const ImageContainer = styled_components_1.default.div `
+  display: flex;
+  position: relative;
+  align-self: center;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  & img {
+    object-fit: contain;
+    aspect-ratio: auto;
+    width: 100%;
+    border-radius: 16px;
+    max-height: 510px;
+    max-width: 510px;
+  }
+
+  ${(props) => props.isScreenshot
+    ? (0, styled_components_1.css) `
+          width: 508px;
+          height: 244px;
+
+          ${ScreenWidth_1.mediaQuery.desktop} {
+            width: 336px;
+            height: 164px;
+          }
+
+          ${ScreenWidth_1.mediaQuery.mobile} {
+            width: 320px;
+            height: 154px;
+          }
+        `
+    : (0, styled_components_1.css) `
+          border-radius: 16px;
+          width: 510px;
+          height: 510px;
+
+          ${ScreenWidth_1.mediaQuery.desktop} {
+            width: 335px;
+            height: 335px;
+          }
+
+          ${ScreenWidth_1.mediaQuery.mobile} {
+            width: 320px;
+            height: 320px;
+          }
+        `}
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    & img {
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      max-height: ${(0, _4k_1.adaptiveValueCalc)(510)};
+      max-width: ${(0, _4k_1.adaptiveValueCalc)(510)};
+    }
+
+    ${(props) => props.isScreenshot
+    ? (0, styled_components_1.css) `
+            width: ${(0, _4k_1.adaptiveValueCalc)(508)};
+            height: ${(0, _4k_1.adaptiveValueCalc)(244)};
+          `
+    : (0, styled_components_1.css) `
+            border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+            width: ${(0, _4k_1.adaptiveValueCalc)(510)};
+            height: ${(0, _4k_1.adaptiveValueCalc)(510)};
+          `}
+  }
+`;
+const AssetImage = ({ imageUrl, errorImg, originalUrl, alt, isScreenshot, }) => {
+    const [size, setSize] = (0, react_1.useState)({});
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const { width, height } = (0, imageProportionsSize_1.defineImgProportion)(ref, 80);
+        if (imageUrl && parseFloat(height) && parseFloat(width)) {
+            (0, imageProportionsSize_1.defineImgProportion)(ref, 80);
+            setSize({ width, height });
+        }
+    }, [imageUrl]);
+    const LinkComponent = originalUrl ? link_1.default : react_1.default.Fragment;
+    const ScreenShotContainer = isScreenshot
+        ? SScreenshotContainer
+        : react_1.default.Fragment;
+    return ((0, jsx_runtime_1.jsx)(LinkComponent, { href: `${originalUrl}`, target: "_blank", children: (0, jsx_runtime_1.jsxs)(ScreenShotContainer, { children: [(0, jsx_runtime_1.jsxs)(ImageContainer, { isScreenshot: isScreenshot, children: [loading && ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: '100%', width: '100%', style: {
+                                lineHeight: 'normal',
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                visibility: `${loading ? 'hidden' : 'visible'}`,
+                            } })), (0, jsx_runtime_1.jsx)("img", { alt: alt, ref: ref, src: imageUrl, onError: (e) => {
+                                e.target.src = errorImg;
+                                setSize({ width: '100%', height: '100%' });
+                            }, onLoad: () => setLoading(false), style: {
+                                opacity: loading ? '0' : '1',
+                                ...(isScreenshot
+                                    ? {
+                                        maxHeight: '100%',
+                                        maxWidth: '100%',
+                                    }
+                                    : size),
+                            } })] }), isScreenshot && originalUrl && ((0, jsx_runtime_1.jsx)("div", { className: "link", title: originalUrl, children: (0, jsx_runtime_1.jsx)("span", { children: originalUrl }) }))] }) }));
+};
+exports.default = AssetImage;

package/build/components/assetPage/moreDropDown/index.d.ts

@@ -0,0 +1,10 @@
+type TItem = {
+    id: number | string;
+    title: string;
+    onClick?: () => void;
+};
+interface IDropDown {
+    items: TItem[];
+}
+export declare const MoreDropDown: ({ items }: IDropDown) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,152 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoreDropDown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const scale_1 = require("../../../utils/adaptive/scale");
+const screen_1 = require("../../../utils/screen");
+const styled_components_1 = __importStar(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const utils_1 = require("@ludo.ninja/utils");
+const IconWithButton_1 = __importDefault(require("../../../system/Buttons/IconWithButton"));
+const vars_1 = require("../../../fonts/vars");
+const moreBtn_svg_1 = __importDefault(require("../../../public/creation/card/moreBtn"));
+const SContainer = styled_components_1.default.div `
+  position: relative;
+
+  & > *:first-child {
+    width: 24px;
+    height: 24px;
+
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      width: ${(0, _4k_1.adaptiveValueCalc)(24)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    }
+  }
+`;
+const SContent = styled_components_1.default.div `
+  position: absolute;
+  padding: 8px;
+  top: calc(100% + 8px);
+  right: 0;
+  display: flex;
+  flex-direction: column;
+
+  transition: opacity 200ms;
+
+  pointer-events: ${(props) => (props.isOpen ? 'unset' : 'none')};
+  opacity: ${(props) => (props.isOpen ? '1' : '0')};
+
+  border-radius: 6px;
+  background: ${colors_1.WhiteColor};
+  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);
+  width: 184px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    top: calc(100% + ${(0, _4k_1.adaptiveValueCalc)(8)});
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    box-shadow: 0 ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(16)}
+      ${(0, _4k_1.adaptiveValueCalc)(-16)} rgba(33, 21, 95, 0.1);
+    width: ${(0, _4k_1.adaptiveValueCalc)(184)};
+  }
+`;
+const hover = (0, styled_components_1.css) `
+  color: ${colors_1.BlackColor};
+  border-radius: 4px;
+  background: ${colors_1.BackgroundColorLight};
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(4)};
+  }
+`;
+const SButton = styled_components_1.default.button `
+  font-family: ${vars_1.dmsansFontVarCss.css};
+  padding: 6px 8px;
+  color: ${colors_1.TextGrayColor};
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  outline: none;
+  border: none;
+  background: inherit;
+  transition: background-color 200ms;
+  text-align: left;
+
+  &:active {
+    ${hover}
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      ${hover}
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(6)} ${(0, _4k_1.adaptiveValueCalc)(8)};
+    font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+    line-height: ${(0, _4k_1.adaptiveValueCalc)(18)};
+  }
+`;
+const SIcon = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(17)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(4)};
+  }
+`;
+const IconResize = () => {
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    return ((0, jsx_runtime_1.jsx)(SIcon, { children: (0, jsx_runtime_1.jsx)(moreBtn_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({
+                windowDimensions,
+                currentSize: 1,
+            }) }) }));
+};
+const MoreDropDown = ({ items }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const handle = {
+        close() {
+            setIsOpen(false);
+        },
+        toggle() {
+            setIsOpen((prev) => !prev);
+        },
+    };
+    return ((0, jsx_runtime_1.jsx)(utils_1.ClickAwayListener, { onClickAway: handle.close, children: (0, jsx_runtime_1.jsxs)(SContainer, { children: [(0, jsx_runtime_1.jsx)(IconWithButton_1.default, { variant: 'dots', onClick: handle.toggle, children: (0, jsx_runtime_1.jsx)(IconResize, {}) }), (0, jsx_runtime_1.jsx)(SContent, { isOpen: isOpen, children: items.map(({ title, onClick, id }) => ((0, jsx_runtime_1.jsx)(SButton, { onClick: () => {
+                            onClick?.();
+                            handle.close();
+                        }, children: (0, jsx_runtime_1.jsx)("span", { children: title }) }, id))) })] }) }));
+};
+exports.MoreDropDown = MoreDropDown;

package/build/components/assetPage/properties/index.d.ts

@@ -0,0 +1,4 @@
+import { assetSchema as schema } from '@ludo.ninja/api';
+type PropertiesProps = Pick<schema.IAsset, 'attributes'>;
+export declare const Properties: ({ attributes }: PropertiesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Properties = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const index_1 = require("../../../system/index");
+const Wrapper = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+
+  ${ScreenWidth_1.mediaQuery.tablet} {
+    gap: 10px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(15)};
+  }
+`;
+const SFlex = (0, styled_components_1.default)(index_1.Flex) `
+  border-radius: 6px;
+  border: 1px solid ${colors_1.BorderColorLight};
+  padding: 10px 16px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    border: ${(0, _4k_1.adaptiveValueCalc)(1)} solid ${colors_1.BorderColorLight};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(10)} ${(0, _4k_1.adaptiveValueCalc)(16)};
+  }
+`;
+const Properties = ({ attributes }) => {
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: attributes?.map((item) => {
+            return ((0, jsx_runtime_1.jsxs)(SFlex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(index_1.H6, { style: { wordBreak: 'break-word' }, color: colors_1.TextGrayColor, children: item?.name }), (0, jsx_runtime_1.jsx)(index_1.H5, { style: { wordBreak: 'break-word' }, children: item?.value })] }, item?.name));
+        }) }));
+};
+exports.Properties = Properties;

package/build/components/assetPage/slider/store.d.ts

@@ -0,0 +1,8 @@
+interface ISliderStore {
+    isActiveSlider: boolean;
+    setIsActiveSlider: (isActiveSlider: boolean) => void;
+    isDisabled: boolean;
+    setIsDisabled: (isDisabled: boolean) => void;
+}
+export declare const useSliderStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ISliderStore>>;
+export {};

package/build/components/assetPage/slider/store.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSliderStore = void 0;
+const zustand_1 = require("zustand");
+exports.useSliderStore = (0, zustand_1.create)()((setState, getState) => ({
+    isActiveSlider: false,
+    setIsActiveSlider: (isActiveSlider) => {
+        setState({ isActiveSlider });
+    },
+    isDisabled: false,
+    setIsDisabled: (isDisabled) => {
+        if (getState().isActiveSlider) {
+            setState({ isDisabled });
+        }
+    },
+}));

package/build/components/assetPage/viewer3D/index.d.ts

@@ -0,0 +1,7 @@
+type Viewer3dProps = {
+    file2D?: string | undefined | null;
+    file3D: string | undefined | null;
+};
+export declare const ScenePreview: ({ file3D }: Pick<Viewer3dProps, "file3D">) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Viewer3D: ({ file3D, file2D }: Viewer3dProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,124 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Viewer3D = exports.ScenePreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AssetImage_1 = __importDefault(require("../media/AssetImage"));
+const store_1 = require("../slider/store");
+const NoSSR_1 = __importDefault(require("../../base/NoSSR"));
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const index_1 = require("../../../system/index");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const drei_1 = require("@react-three/drei");
+const fiber_1 = require("@react-three/fiber");
+const react_1 = require("react");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Togler = (0, styled_components_1.default)(index_1.Flex) `
+  border-radius: 8px;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  overflow: hidden;
+  z-index: 1;
+  border: 1px solid ${colors_1.BlackColor};
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    top: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    right: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    border: ${(0, _4k_1.adaptiveValueCalc)(1)} solid ${colors_1.BlackColor};
+  }
+`;
+const ButtonTogler = styled_components_1.default.button `
+  border: none;
+  cursor: pointer;
+  background: ${(props) => (props.isActive ? colors_1.InactiveButtonColor : colors_1.WhiteColor)};
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  font-size: 13px;
+  font-weight: 40;
+  color: ${(props) => (props.isActive ? colors_1.BlackColor : colors_1.TextGrayColor)};
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(36)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(36)};
+    font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+  }
+`;
+const StyledAsset = styled_components_1.default.div `
+  max-height: 100%;
+  max-width: 100%;
+  width: 510px;
+  height: 510px;
+  margin-right: 60px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  background-color: ${colors_1.WhiteColor};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  //border: 2px solid rgba(0, 0, 0, 0.5);
+
+  ${ScreenWidth_1.mediaQuery.desktop} {
+    width: 335px;
+    margin-right: 30px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.tablet} {
+    align-items: flex-start;
+    width: 320px;
+    margin-right: 0;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(510)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(510)};
+    margin-right: ${(0, _4k_1.adaptiveValueCalc)(60)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+  }
+`;
+const ModelPreview = ({ file3D }) => {
+    const gltf = (0, drei_1.useGLTF)(file3D);
+    (0, fiber_1.useFrame)(() => {
+        gltf.scene.rotateY(0.002);
+    });
+    (0, react_1.useEffect)(() => {
+        return () => {
+            gltf.scene.rotation.set(0, 0, 0);
+        };
+    }, [gltf]);
+    return (0, jsx_runtime_1.jsx)("primitive", { object: gltf.scene });
+};
+const ScenePreview = ({ file3D }) => {
+    if (typeof window === "undefined" || !file3D)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(NoSSR_1.default, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { style: { position: "absolute", left: 0, top: 0 }, height: "100%", width: "100%" }), children: (0, jsx_runtime_1.jsxs)(fiber_1.Canvas, { resize: { scroll: false }, children: [(0, jsx_runtime_1.jsx)(drei_1.ContactShadows, { opacity: 1, scale: 1000, blur: 0.5, far: 100, resolution: 2048, color: "#003366" }), (0, jsx_runtime_1.jsx)(drei_1.Stage, { environment: "city", preset: "rembrandt", children: (0, jsx_runtime_1.jsx)(drei_1.Center, { children: (0, jsx_runtime_1.jsx)(ModelPreview, { file3D: file3D }) }) }), (0, jsx_runtime_1.jsx)(drei_1.OrbitControls, {})] }) }) }));
+};
+exports.ScenePreview = ScenePreview;
+const Viewer3D = ({ file3D, file2D }) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)("2D");
+    const setIsDisabledSlider = (0, store_1.useSliderStore)((state) => state.setIsDisabled);
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            width: "100%",
+            height: "100%",
+        }, children: (0, jsx_runtime_1.jsxs)(StyledAsset, { is3D: activeTab === "3D", children: [(0, jsx_runtime_1.jsxs)(Togler, { children: [(0, jsx_runtime_1.jsx)(ButtonTogler, { isActive: activeTab === "2D", onClick: () => {
+                                setActiveTab("2D");
+                                setIsDisabledSlider(false);
+                            }, children: "2D" }), (0, jsx_runtime_1.jsx)(ButtonTogler, { isActive: activeTab === "3D", onClick: () => {
+                                setActiveTab("3D");
+                                setIsDisabledSlider(true);
+                            }, children: "3D" })] }), activeTab === "3D" && file3D ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                        cursor: "pointer",
+                        width: "100%",
+                        height: "100%",
+                    }, children: (0, jsx_runtime_1.jsx)(exports.ScenePreview, { file3D: file3D }) })) : ((0, jsx_runtime_1.jsx)(AssetImage_1.default, { alt: "fallback", imageUrl: file2D || `${constants_1.staticLink}/public/noContent/noContentObject.svg`, errorImg: `${constants_1.staticLink}/public/noContent/noContentObject.svg` }))] }) }));
+};
+exports.Viewer3D = Viewer3D;

package/build/components/base/Meta/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const head_1 = __importDefault(require("next/head"));
-const env_1 = require("@/store/env");
+const env_1 = require("../../../store/env");
 // Component
 const Meta = () => {
     const { getMediaDomain, getStaticDomain, } = (0, env_1.useEnvStore)((state) => ({

package/build/components/base/PageHead/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface PageHeadProps {
+    title: string;
+    description?: string;
+    children?: React.ReactNode;
+}
+declare const PageHead: React.FC<PageHeadProps>;
+export default PageHead;

package/build/components/base/PageHead/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const head_1 = __importDefault(require("next/head"));
+// Component
+const PageHead = ({ title, description, children }) => {
+    return ((0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("title", { children: title }), description && (0, jsx_runtime_1.jsx)("meta", { name: "description", content: description }), children] }));
+};
+// Export
+exports.default = PageHead;

package/build/components/base/UserStreak/index.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
-const vars_1 = require("@/fonts/vars");
+const vars_1 = require("../../../fonts/vars");
 const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const store_1 = require("@/modules/user/store");
+const store_1 = require("../../../modules/user/store");
 const rc_tooltip_1 = __importDefault(require("rc-tooltip"));
 const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
 const Wrapper = styled_components_1.default.div `

package/build/components/favoriteList/add/addCreationToFavoriteList/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    ids: string[];
+    currentMyGalleryId?: false | string | undefined;
+}
+declare const AddCreationToFavoriteList: React.FC<Props>;
+export default AddCreationToFavoriteList;

package/build/components/favoriteList/add/addCreationToFavoriteList/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chooseGalleryItems_1 = __importDefault(require("../../../../modules/gallery/ui/chooseGalleryItems"));
+const createGalleryForm_1 = __importDefault(require("../../../../modules/gallery/ui/createGalleryForm"));
+const ui_1 = require("../../../../store/ui");
+const useAddCreationsToGallery_1 = require("../../../../api/server-galleries/mutations/useAddCreationsToGallery");
+const useCreateFavorites_1 = require("../../../../api/server-galleries/mutations/useCreateFavorites");
+// Component
+const AddCreationToFavoriteList = ({ ids, currentMyGalleryId, }) => {
+    const [isNeedAddFavList, setAddFavList] = (0, react_1.useState)(false);
+    const closeModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.closeModalSidebarPortal);
+    const { createFavorites, errorCreateFavorites } = (0, useCreateFavorites_1.useCreateFavoriteListV2)();
+    const { addCreationsToGallery, isAdded, error } = (0, useAddCreationsToGallery_1.useAddCreationsToGalleryV2)();
+    const addMethod = async (galleryId, ids) => {
+        await addCreationsToGallery({ galleryId, creationIds: ids });
+        setTimeout(() => closeModalSidebarPortal(), 900);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { children: isNeedAddFavList ? ((0, jsx_runtime_1.jsx)(createGalleryForm_1.default, { setAddGallery: setAddFavList, title: 'Create Favourite List', inputPlaceHolderText: 'List Name', 
+            // ids={ids}
+            createMethod: createFavorites, error: errorCreateFavorites })) : ((0, jsx_runtime_1.jsx)(chooseGalleryItems_1.default, { setAddGallery: setAddFavList, title: 'Add to Favourite List', titleBtn: '+ New Favourite List', ids: ids, addMethod: addMethod, isAdded: isAdded, error: error, currentMyGalleryId: currentMyGalleryId })) }));
+};
+// Export
+exports.default = AddCreationToFavoriteList;

package/build/components/gallery/add/addCreationToGallery/index.d.ts

@@ -0,0 +1,2 @@
+declare const AddCreationToGallery: () => import("react/jsx-runtime").JSX.Element;
+export default AddCreationToGallery;