@ludo.ninja/components 2.3.6 → 2.3.8

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.d.ts

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

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

@@ -0,0 +1,24 @@
+"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"));
+const env_1 = require("../../../store/env");
+// Component
+const Meta = () => {
+    const { getMediaDomain, getStaticDomain, } = (0, env_1.useEnvStore)((state) => ({
+        NEXT_PUBLIC_STATIC_DOMAIN: state.NEXT_PUBLIC_STATIC_DOMAIN,
+        NEXT_PUBLIC_ENV_DOMAIN: state.NEXT_PUBLIC_ENV_DOMAIN,
+        getMediaDomain: state.getMediaDomain,
+        getStaticDomain: state.getStaticDomain,
+    }));
+    // const DEFAULT_SEO = {
+    //   title: 'Ludo | The Reputation-Driven Discovery Engine',
+    //   description: 'Ludo is super-cool. Share it with your friends',
+    // };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: getMediaDomain() }), (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: getStaticDomain() }), (0, jsx_runtime_1.jsx)("link", { rel: "dns-prefetch", href: getMediaDomain() }), (0, jsx_runtime_1.jsx)("link", { rel: "dns-prefetch", href: getStaticDomain() }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: `${getStaticDomain()}/favicon/favicon.svg`, sizes: "any" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/x-icon", href: `${getStaticDomain()}/favicon/fav64.ico`, sizes: "any" }), (0, jsx_runtime_1.jsx)("link", { rel: "apple-touch-icon", href: `${getStaticDomain()}/favicon/favicon128.png` }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), (0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" })] }) }));
+};
+// Export
+exports.default = Meta;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+declare const _default: import("react").ComponentType<{
+    children: ReactNode;
+}>;
+export default _default;

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

@@ -0,0 +1,11 @@
+"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 dynamic_1 = __importDefault(require("next/dynamic"));
+// Component
+const NoSsr = (props) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
+// Export
+exports.default = (0, dynamic_1.default)(() => Promise.resolve(NoSsr), { ssr: false });

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.d.ts

@@ -0,0 +1,7 @@
+type UserStreakProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    tooltipPosition?: string;
+};
+declare const UserStreak: ({ className, style, tooltipPosition }: UserStreakProps) => import("react/jsx-runtime").JSX.Element;
+export default UserStreak;

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

@@ -0,0 +1,161 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+const vars_1 = require("../../../fonts/vars");
+const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+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 `
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+
+  color: ${colors_1.TextGrayColor};
+  font-family: ${vars_1.poppinsFontVarCss.css};
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  .streak-count {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .skeleton-streak {
+      ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+        width: ${(0, _4k_1.adaptiveValueCalc)(85)};
+      }
+    }
+  }
+  .streak-bonus {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: ${colors_1.ProgressColor};
+    .skeleton-streak {
+      ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+        width: ${(0, _4k_1.adaptiveValueCalc)(215)};
+      }
+    }
+  }
+
+  .skeleton-streak {
+    border-radius: 16px;
+    height: 16px;
+
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    font-size: ${(0, _4k_1.adaptiveValueCalc)(12)};
+    line-height: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+  }
+`;
+const StreakInfo = styled_components_1.default.div `
+  display: flex;
+  width: 356px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  flex-shrink: 0;
+
+  .title {
+    color: ${colors_1.BlackColor};
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 22px;
+  }
+
+  .description {
+    width: 100%;
+    text-wrap: auto;
+    text-align: left;
+    color: ${colors_1.TextGrayColor};
+
+    /* Desktop/Text Small */
+    font-family: ${vars_1.dmsansFontVarCss.css};
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+      
+    li:not(:last-child) {
+      margin-bottom: 13px;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  span {
+    color: ${colors_1.TextGrayColor};
+    margin-right: 4px;
+    font-weight: 700;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(356)};
+    gap: ${(0, _4k_1.adaptiveValueCalc)(6)};
+
+    .title {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+      line-height: ${(0, _4k_1.adaptiveValueCalc)(22)};
+    }
+
+    .description {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+      line-height: ${(0, _4k_1.adaptiveValueCalc)(18)};
+
+      li:not(:last-child) {
+          margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(13)};
+      }
+    }
+    span {
+      margin-right: ${(0, _4k_1.adaptiveValueCalc)(4)};
+    }
+  }
+`;
+const CheckSVGIcon = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.76335 5.23043C2.11482 4.87895 2.68467 4.87895 3.03614 5.23043L5.36959 7.56388L9.4001 3.53337C9.75158 3.1819 10.3214 3.1819 10.6729 3.53337C11.0244 3.88484 11.0244 4.45469 10.6729 4.80616L6.00599 9.47307C5.65452 9.82454 5.08467 9.82454 4.7332 9.47307L1.76335 6.50322C1.41188 6.15175 1.41188 5.5819 1.76335 5.23043Z", fill: "#B0B2C0" }) }));
+};
+const TooltipSVGIcon = () => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "5.99961", cy: "5.99998", r: "5.4", fill: "#CFD5EA" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.45313 7.25185C5.45313 6.9264 5.509 6.65077 5.62074 6.42495C5.73247 6.19249 5.8705 5.99323 6.03482 5.82719C6.19914 5.6545 6.36017 5.49178 6.51792 5.33902C6.68224 5.17961 6.82027 5.01357 6.932 4.84088C7.04374 4.66155 7.09961 4.44902 7.09961 4.20327C7.09961 4.03723 7.06017 3.86786 6.9813 3.69517C6.909 3.52249 6.78083 3.37969 6.59679 3.26678C6.41276 3.14723 6.1597 3.08745 5.83764 3.08745C5.51557 3.08745 5.2428 3.15055 5.01933 3.27674C4.80243 3.40293 4.63153 3.56898 4.50665 3.77488C4.38834 3.98077 4.31933 4.19995 4.29961 4.43241H3.59961C3.61933 4.06711 3.71792 3.7317 3.89538 3.42618C4.07942 3.11402 4.32919 2.86495 4.64468 2.67898C4.96675 2.49301 5.34468 2.40002 5.77848 2.40002C6.25172 2.40002 6.63623 2.48969 6.932 2.66902C7.23435 2.8417 7.45454 3.06752 7.59257 3.34648C7.7306 3.61879 7.79961 3.90439 7.79961 4.20327C7.79961 4.51543 7.74374 4.77779 7.632 4.99032C7.52684 5.19622 7.3921 5.38219 7.22778 5.54823C7.07003 5.70764 6.909 5.86372 6.74468 6.01648C6.58036 6.16924 6.44233 6.34525 6.3306 6.5445C6.22543 6.73711 6.17285 6.9729 6.17285 7.25185H5.45313Z", fill: "#696F90" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.81299 9.78175C5.61881 9.78175 5.45594 9.72118 5.3244 9.60002C5.19286 9.47887 5.12708 9.32887 5.12708 9.15002C5.12708 8.97118 5.19286 8.82118 5.3244 8.70002C5.45594 8.57887 5.61881 8.51829 5.81299 8.51829C6.00091 8.51829 6.16064 8.57887 6.29218 8.70002C6.42373 8.82118 6.4895 8.97118 6.4895 9.15002C6.4895 9.32887 6.42373 9.47887 6.29218 9.60002C6.16064 9.72118 6.00091 9.78175 5.81299 9.78175Z", fill: "#696F90" })] }));
+};
+const UserStreak = ({ className, style, tooltipPosition = 'bottomLeft' }) => {
+    const { userStreak, isLoadingStreak, errorStreak } = (0, store_1.useUserStore)((state) => ({
+        userStreak: state.userStreak,
+        isLoadingStreak: state.isLoadingStreak,
+        errorStreak: state.errorStreak,
+    }));
+    const isShowSkeleton = isLoadingStreak;
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { className: className, style: style, children: [(0, jsx_runtime_1.jsx)("div", { className: 'streak-count', children: isShowSkeleton ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: 'skeleton-streak', width: '85px' })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [userStreak.totalDays, " Days Streak"] }), (0, jsx_runtime_1.jsx)(CheckSVGIcon, {})] })) }), (0, jsx_runtime_1.jsx)("div", { className: 'streak-bonus', children: isShowSkeleton ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: 'skeleton-streak', width: '215px' })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Next Bonus: ", userStreak.nextStreak, " Days Streak +", userStreak.nextBonus, " XP."] }), (0, jsx_runtime_1.jsx)(rc_tooltip_1.default, { placement: tooltipPosition, trigger: ['hover', 'click', 'focus'], showArrow: false, styles: {
+                                root: {
+                                    backgroundColor: '#ffffff',
+                                    opacity: 1,
+                                    boxShadow: ' 0px 4px 16px -2px rgba(0, 0, 0, 0.14)',
+                                    borderRadius: '12px',
+                                },
+                                inner: {
+                                    borderRadius: '12px',
+                                    border: 'none',
+                                },
+                            }, overlay: (0, jsx_runtime_1.jsxs)(StreakInfo, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'title', children: "Keep Your Daily Streak Going!" }), (0, jsx_runtime_1.jsxs)("ul", { className: 'description', children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2022 Visit an Opportunity:" }), "Explore one from the \"New Opportunities\" section to maintain your streak."] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2022 Share an Opportunity:" }), "Use the available sharing options to tell a friend and keep earning."] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2022 Reminder:" }), "Maintain your streak to increase your daily XP and reach exciting milestone bonuses!"] })] })] }), children: (0, jsx_runtime_1.jsx)("span", { style: {
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                }, children: (0, jsx_runtime_1.jsx)(TooltipSVGIcon, {}) }) })] })) })] }));
+};
+exports.default = UserStreak;

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;

package/build/components/gallery/add/addCreationToGallery/index.js

@@ -0,0 +1,48 @@
+"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 useAddCreationsToGallery_1 = require("../../../../api/server-galleries/mutations/useAddCreationsToGallery");
+const useCreateGallery_1 = require("../../../../api/server-galleries/mutations/useCreateGallery");
+const chooseGalleryItems_1 = __importDefault(require("../../../../modules/gallery/ui/chooseGalleryItems"));
+const createGalleryForm_1 = __importDefault(require("../../../../modules/gallery/ui/createGalleryForm"));
+const itemsPreview_1 = __importDefault(require("../../../../modules/gallery/ui/itemsPreview"));
+const useToGalleryAsset_1 = require("../../../../modules/gallery/useToGalleryAsset");
+const ui_1 = require("../../../../store/ui");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledAddGallery = styled_components_1.default.div `
+  display: flex;
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+  }
+`;
+// Component
+const AddCreationToGallery = () => {
+    const { removeCreationFromGalleryWithCallback, creationsToGallery, resetCreationsInGallery: actionResetCheckboxes, } = (0, useToGalleryAsset_1.useToGalleryStore)((state) => ({
+        resetCreationsInGallery: state.resetCreationsInGallery,
+        creationsToGallery: state.creationsToGallery,
+        removeCreationFromGalleryWithCallback: state.removeCreationFromGalleryWithCallback,
+    }));
+    const { createGallery, errorCreateGallery } = (0, useCreateGallery_1.useCreateGalleryV2)();
+    const closeModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.closeModalSidebarPortal);
+    const [isNeedAddGallery, setAddGallery] = (0, react_1.useState)(false);
+    const { addCreationsToGallery, isAdded, error } = (0, useAddCreationsToGallery_1.useAddCreationsToGalleryV2)();
+    const addMethod = async (galleryId, ids) => {
+        await addCreationsToGallery({ galleryId, creationIds: ids });
+        actionResetCheckboxes();
+        closeModalSidebarPortal();
+    };
+    const ids = creationsToGallery.map((creations) => creations.creationId);
+    return ((0, jsx_runtime_1.jsxs)(StyledAddGallery, { children: [(0, jsx_runtime_1.jsx)(itemsPreview_1.default, { creations: creationsToGallery, title: "Add to Gallery", deleteMethod: (itemId) => {
+                    removeCreationFromGalleryWithCallback(itemId, closeModalSidebarPortal);
+                } }), isNeedAddGallery ? ((0, jsx_runtime_1.jsx)(createGalleryForm_1.default, { setAddGallery: setAddGallery, 
+                // ids={ids as string[]}
+                title: "Create Gallery", createMethod: createGallery, inputPlaceHolderText: "Gallery Name", error: errorCreateGallery })) : ((0, jsx_runtime_1.jsx)(chooseGalleryItems_1.default, { setAddGallery: setAddGallery, title: "Choose Gallery", titleBtn: "+ New Gallery", ids: ids, addMethod: addMethod, isAdded: isAdded, error: error, isGetMyGalleries: true }))] }));
+};
+// Export
+exports.default = AddCreationToGallery;

package/build/components/headers/components/MobileToggle/index.js

@@ -0,0 +1 @@
+"use strict";

package/build/components/headers/components/headerExperienceLabel/index.d.ts

@@ -0,0 +1,4 @@
+declare const HeaderExperienceLabel: ({ userId }: {
+    userId?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default HeaderExperienceLabel;

package/build/components/headers/components/headerExperienceLabel/index.js

@@ -0,0 +1,34 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const store_1 = require("../../../../modules/user/store");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const ExperienceLabel_1 = __importDefault(require("../../../../system/Labels/ExperienceLabel"));
+const env_1 = require("../../../../store/env");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+// Styles
+const StyledHeaderExperienceLabel = styled_components_1.default.div `
+  margin-right: 20px;
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    margin-right: ${(0, _4k_1.adaptiveValueCalc)(20)};
+  }
+`;
+// Component
+const HeaderExperienceLabel = ({ userId }) => {
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    const { userExp, isLoadingExp, errorExp } = (0, store_1.useUserStore)((state) => ({
+        userExp: state.userExp,
+        isLoadingExp: state.isLoadingExp,
+        errorExp: state.errorExp,
+    }));
+    if (!userId)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(StyledHeaderExperienceLabel, { children: (0, jsx_runtime_1.jsx)(ExperienceLabel_1.default, { value: userExp.xps, link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/rewards/${userId}`, loading: isLoadingExp || !!errorExp }) }));
+};
+// Export
+exports.default = HeaderExperienceLabel;

package/build/components/headers/components/headerStreak/index.d.ts

@@ -0,0 +1,6 @@
+declare const HeaderStreak: import("styled-components").StyledComponent<({ className, style, tooltipPosition }: {
+    className?: string;
+    style?: React.CSSProperties;
+    tooltipPosition?: string;
+}) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export default HeaderStreak;

package/build/components/headers/components/headerStreak/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const UserStreak_1 = __importDefault(require("../../../base/UserStreak"));
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const HeaderStreak = (0, styled_components_1.default)(UserStreak_1.default) `
+  flex-direction: column;
+  gap: 2px !important;
+  align-items: end; 
+  margin-right: 20px;
+    
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+   gap: ${(0, _4k_1.adaptiveValueCalc)(2)} !important;
+   margin-right: ${(0, _4k_1.adaptiveValueCalc)(20)};
+  }
+`;
+exports.default = HeaderStreak;

package/build/components/headers/components/headerUserPic/index.d.ts

@@ -0,0 +1,4 @@
+declare const HeaderUserPick: ({ userId }: {
+    userId?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default HeaderUserPick;

package/build/components/headers/components/headerUserPic/index.js

@@ -0,0 +1,29 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const Userpic_1 = __importDefault(require("../../../../system/Img/Userpic"));
+// Styles
+const StyledHeaderUserPick = styled_components_1.default.div `
+  margin-right: 24px;
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    margin-right: 8px;
+  }
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    margin-right: ${(0, _4k_1.adaptiveValueCalc)(24)};
+  }
+`;
+// Component
+const HeaderUserPick = ({ userId }) => {
+    if (!userId)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(StyledHeaderUserPick, { children: (0, jsx_runtime_1.jsx)(Userpic_1.default, { width: 32, height: 32, userId: userId, isNeedBoxTransform: true }) }));
+};
+// Export
+exports.default = HeaderUserPick;

package/build/components/headers/header/index.d.ts

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