@ludo.ninja/components 1.1.5 → 1.1.7

package/dist/system/Forms/Selects/DesktopSelect/index.jsx

@@ -1,115 +0,0 @@
-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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useEffect, useState } from 'react';
-import Skeleton from 'react-loading-skeleton';
-import Select, { components, } from 'react-select';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor, WhiteColor } from '@/styles/colors';
-import { MainText } from '@/styles/typography';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import { dmsansFontVarCss } from '@/fonts/vars';
-import ArrowDownIcon from '@/public/selects/arrow_down.svg';
-var SelectElement = styled(Select)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n\n  .react-select__value-container {\n    padding: 0 0 0 20px;\n  }\n\n  .react-select__control {\n    border: none;\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: none;\n    min-height: ", ";\n    cursor: pointer;\n\n    &:hover,\n    &:focus,\n    &:active {\n      box-shadow: none;\n      border-color: transparent;\n    }\n  }\n\n  .react-select__indicator {\n    padding: 0;\n  }\n\n  .react-select__indicators {\n    padding-right: 12px;\n  }\n\n  .react-select__menu {\n    ", ";\n    color: ", ";\n    margin: 4px 0;\n    background: ", ";\n    box-shadow: 0 8px 16px -16px rgba(33, 21, 95, 0.1);\n    border-radius: 6px;\n    z-index: 9999;\n  }\n\n  .react-select__single-value {\n    ", ";\n    margin: 0;\n    color: ", ";\n  }\n\n  .react-select__menu-list {\n    padding: 8px 0;\n  }\n\n  .react-select__option {\n    padding: 8.5px 20px;\n    font-weight: 400;\n  }\n\n  .react-select__option--is-selected {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n  }\n\n  .react-select__option--is-focused {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n    transition: font-weight 0.3s ease-in-out;\n    cursor: pointer;\n  }\n\n  ", " {\n    .react-select__value-container {\n      padding: 0 0 0 ", ";\n    }\n\n    .react-select__control {\n      border-radius: ", ";\n      min-height: ", ";\n    }\n\n    .react-select__indicator {\n      transform: ", ";\n    }\n\n    .react-select__indicators {\n      padding-right: ", ";\n    }\n\n    .react-select__menu {\n      margin: ", " 0;\n      box-shadow: 0 ", " ", "\n        ", " rgba(33, 21, 95, 0.1);\n      border-radius: ", ";\n    }\n\n    .react-select__menu-list {\n      padding: ", " 0;\n      max-height: ", ";\n    }\n\n    .react-select__option {\n      padding: ", " ", ";\n    }\n  }\n"], ["\n  font-family: ", ";\n\n  .react-select__value-container {\n    padding: 0 0 0 20px;\n  }\n\n  .react-select__control {\n    border: none;\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: none;\n    min-height: ", ";\n    cursor: pointer;\n\n    &:hover,\n    &:focus,\n    &:active {\n      box-shadow: none;\n      border-color: transparent;\n    }\n  }\n\n  .react-select__indicator {\n    padding: 0;\n  }\n\n  .react-select__indicators {\n    padding-right: 12px;\n  }\n\n  .react-select__menu {\n    ", ";\n    color: ", ";\n    margin: 4px 0;\n    background: ", ";\n    box-shadow: 0 8px 16px -16px rgba(33, 21, 95, 0.1);\n    border-radius: 6px;\n    z-index: 9999;\n  }\n\n  .react-select__single-value {\n    ", ";\n    margin: 0;\n    color: ", ";\n  }\n\n  .react-select__menu-list {\n    padding: 8px 0;\n  }\n\n  .react-select__option {\n    padding: 8.5px 20px;\n    font-weight: 400;\n  }\n\n  .react-select__option--is-selected {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n  }\n\n  .react-select__option--is-focused {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n    transition: font-weight 0.3s ease-in-out;\n    cursor: pointer;\n  }\n\n  ", " {\n    .react-select__value-container {\n      padding: 0 0 0 ", ";\n    }\n\n    .react-select__control {\n      border-radius: ", ";\n      min-height: ", ";\n    }\n\n    .react-select__indicator {\n      transform: ", ";\n    }\n\n    .react-select__indicators {\n      padding-right: ", ";\n    }\n\n    .react-select__menu {\n      margin: ", " 0;\n      box-shadow: 0 ", " ", "\n        ", " rgba(33, 21, 95, 0.1);\n      border-radius: ", ";\n    }\n\n    .react-select__menu-list {\n      padding: ", " 0;\n      max-height: ", ";\n    }\n\n    .react-select__option {\n      padding: ", " ", ";\n    }\n  }\n"])), dmsansFontVarCss.css, function (props) { return "".concat(props.minHeight, "px"); }, MainText, TextGrayColor, WhiteColor, MainText, BlackColor, BlackColor, BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(6), function (props) { return adaptiveValueCalc(props.minHeight); }, function (props) {
-    return 'transform' in props.scale && props.scale.transform;
-}, adaptiveValueCalc(12), adaptiveValueCalc(4), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(-16), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(300), adaptiveValueCalc(8.5), adaptiveValueCalc(20));
-var minHeight = 40;
-var DropdownIndicator = function (props) {
-    return (<components.DropdownIndicator {...props}>
-      <ArrowDownIcon style={{
-            transition: 'transform 200ms',
-            transform: props.selectProps.menuIsOpen
-                ? 'rotate(180deg)'
-                : 'rotate(0)',
-        }}/>
-    </components.DropdownIndicator>);
-};
-var DesktopSelect = function (_a) {
-    var options = _a.options, isLoading = _a.isLoading, onChangeHandler = _a.onChangeHandler, defaultOptionValue = _a.defaultOptionValue, name = _a.name, props = __rest(_a, ["options", "isLoading", "onChangeHandler", "defaultOptionValue", "name"]);
-    var _b = useState(options.find(function (option) {
-        return defaultOptionValue === option.id;
-    }) || options[0]), selectedOption = _b[0], setSelectedOption = _b[1];
-    useEffect(function () {
-        var findOption = options.find(function (option) {
-            return defaultOptionValue === option.id;
-        });
-        setSelectedOption(findOption || options[0]);
-    }, [defaultOptionValue]);
-    var handleChangeOption = function (option) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, onChangeHandler(name, option.id)];
-                case 1:
-                    _a.sent();
-                    setSelectedOption(option);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var getOptionLabel = function (option) {
-        return option.label;
-    };
-    var getOptionValue = function (option) {
-        return option.id;
-    };
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    if (isLoading)
-        return <Skeleton height={"".concat(minHeight, "px")} width="154px"/>;
-    return (<SelectElement id={String(Math.random())} minHeight={minHeight} scale={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })} classNamePrefix="react-select" name={name} getOptionLabel={function (option) { return getOptionLabel(option); }} getOptionValue={function (option) { return getOptionValue(option); }} options={options} value={selectedOption} defaultValue={selectedOption} onChange={function (option) { return handleChangeOption(option); }} isSearchable={false} components={{
-            DropdownIndicator: DropdownIndicator,
-            IndicatorSeparator: function () { return null; },
-        }} {...props}/>);
-};
-export default DesktopSelect;
-var templateObject_1;

package/dist/system/Forms/Selects/DesktopSelect/type.js

@@ -1 +0,0 @@
-export {};

package/dist/system/Forms/Selects/MobileSelect/index.jsx

@@ -1,29 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import DropDown from '@/system/DropDown';
-import BasicRadioInput from '@/system/Forms/RadioInput';
-// Component
-var MobileSelect = function (_a) {
-    var options = _a.options, onChangeHandler = _a.onChangeHandler, name = _a.name, defaultOptionValue = _a.defaultOptionValue;
-    var _b = useState(options[0]), selectedOption = _b[0], setSelectedOption = _b[1];
-    var router = useRouter();
-    useEffect(function () {
-        var findOption = options.find(function (option) {
-            return defaultOptionValue === option.id;
-        });
-        setSelectedOption(findOption || options[0]);
-    }, [defaultOptionValue]);
-    var handleChangeOption = function (value) {
-        var _a;
-        var findOption = options.find(function (option) {
-            return value === option.id;
-        });
-        setSelectedOption(findOption || options[0]);
-        onChangeHandler(name, (findOption === null || findOption === void 0 ? void 0 : findOption.id) || ((_a = options[0]) === null || _a === void 0 ? void 0 : _a.id));
-    };
-    return (<DropDown caption={name} fallBackOnClose={function () { return null; }} active={Boolean(router.query[name])}>
-      {options.map(function (select) { return (<BasicRadioInput key={"".concat(select.id, "_").concat(select.label)} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeOption} radioChecked={selectedOption.id === select.id}/>); })}
-    </DropDown>);
-};
-// Export
-export default MobileSelect;

package/dist/system/Forms/TextArea/index.jsx

@@ -1,29 +0,0 @@
-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 from 'react';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from '@/styles/colors';
-import { MainText } from '@/styles/typography';
-import { dmsansFontVarCss } from '@/fonts/vars';
-import BasicErrorLabel from '../ErrorLabel';
-// Styles
-var StyledTextArea = styled.textarea(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  min-height: 92px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  resize: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n\n  ", " {\n    min-height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  min-height: 92px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  resize: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n\n  ", " {\n    min-height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"])), dmsansFontVarCss.css, MainText, function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, WhiteColor, BlackColor, TextGrayColor, TextGrayColor, TextGrayColor, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, mediaQuery.minWidthFourK, adaptiveValueCalc(92), adaptiveValueCalc(6), adaptiveValueCalc(1), function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, adaptiveValueCalc(12));
-// const maxCountLength = 400;
-var BasicTextArea = function (_a) {
-    var data = _a.data, register = _a.register, isNeedBiggerArea = _a.isNeedBiggerArea, error = _a.error;
-    var renderError = function () {
-        if (error.isNeedShowError) {
-            return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
-        }
-    };
-    return (<>
-      <StyledTextArea {...register} rows={isNeedBiggerArea ? 8 : 4} status={error.isNeedShowError} id={data.name} name={data.name} autoComplete={'off'} placeholder={data.placeHolder}/>
-      {renderError()}
-    </>);
-};
-export default BasicTextArea;
-var templateObject_1;

package/dist/system/Forms/index.js

@@ -1,5 +0,0 @@
-import CheckboxInput from './Checkbox';
-import BasicErrorLabel from './ErrorLabel';
-import Input from './Input';
-import BasicTextArea from './TextArea';
-export { Input, BasicTextArea, BasicErrorLabel, CheckboxInput };

package/dist/system/Img/ExternalImage/index.jsx

@@ -1,13 +0,0 @@
-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, { forwardRef } from 'react';
-import styled from 'styled-components';
-import { border, layout, space, } from 'styled-system';
-var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  max-width: 100%;\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  display: block;\n  max-width: 100%;\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { return (props.height ? props.height : 'auto'); }, space, layout, border);
-export var ExternalImage = forwardRef(function (props, ref) {
-    return <StyledImage ref={ref} {...props}/>;
-});
-ExternalImage.displayName = 'ExternalImage';
-var templateObject_1;

package/dist/system/Img/ImageInterceptor/ImageInterceptor.test.jsx

@@ -1,52 +0,0 @@
-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 from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import styled from 'styled-components';
-import { ImageInterceptor } from '../ImageInterceptor';
-jest.mock('react-loading-skeleton', function () {
-    return function TestSkeleton(props) {
-        return (<div data-testid="skeleton" style={{
-                borderRadius: props.borderRadius,
-            }}/>);
-    };
-});
-var TestImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100px;\n  height: 100px;\n"], ["\n  width: 100px;\n  height: 100px;\n"])));
-var validSrc = '/tests/test_1.svg';
-describe('ImageInterceptor Component', function () {
-    test('renders the skeleton while the image is loading', function () {
-        render(<ImageInterceptor>
-        <TestImage src={validSrc}/>
-      </ImageInterceptor>);
-        expect(screen.getByTestId('skeleton')).toBeInTheDocument();
-    });
-    test('renders the image after it has loaded', function () {
-        render(<ImageInterceptor>
-        <TestImage src={validSrc}/>
-      </ImageInterceptor>);
-        var image = screen.getByRole('img');
-        fireEvent.load(image);
-        expect(screen.queryByTestId('skeleton')).not.toBeInTheDocument();
-        expect(image).toHaveAttribute('src', validSrc);
-    });
-    test('renders the fallback image if an error occurs', function () {
-        render(<ImageInterceptor>
-        <TestImage src="invalid-image.jpg"/>
-      </ImageInterceptor>);
-        var image = screen.getByRole('img');
-        fireEvent.error(image);
-        expect(screen.queryByTestId('skeleton')).not.toBeInTheDocument();
-        expect(image).toHaveAttribute('src', '/noContent/noContent.svg');
-    });
-    test('applies the correct styles to the skeleton', function () {
-        render(<ImageInterceptor borderRadiusSkeleton={10}>
-        <TestImage src={validSrc}/>
-      </ImageInterceptor>);
-        expect(screen.getByTestId('skeleton')).toHaveStyle({
-            borderRadius: '10px',
-        });
-    });
-});
-var templateObject_1;

package/dist/system/Img/ImageInterceptor/index.jsx

@@ -1,27 +0,0 @@
-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 Skeleton from 'react-loading-skeleton';
-import styled from 'styled-components';
-var SImage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  & *:not(img) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  position: relative;\n\n  & *:not(img) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n  }\n"])));
-export var ImageInterceptor = function (_a) {
-    var children = _a.children, _b = _a.fallback, fallback = _b === void 0 ? '/noContent/noContent.svg' : _b, _c = _a.isShowSkeleton, isShowSkeleton = _c === void 0 ? true : _c, borderRadiusSkeleton = _a.borderRadiusSkeleton, className = _a.className;
-    var _d = useState(children.props.src !== fallback), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = useState(false), isError = _e[0], setIsError = _e[1];
-    return (<SImage className={className}>
-      {React.cloneElement(children, {
-            src: isError ? fallback : children.props.src,
-            onLoad: function () {
-                setIsLoading(false);
-            },
-            onError: function () {
-                setIsError(true);
-                setIsLoading(false);
-            },
-        })}
-      {isShowSkeleton && isLoading && (<Skeleton className={'skeleton'} width={children.props.width || '100%'} height={children.props.height || '100%'} borderRadius={borderRadiusSkeleton || children.props.borderRadius || 2}/>)}
-    </SImage>);
-};
-var templateObject_1;

package/dist/system/Img/Profilepic/index.jsx

@@ -1,33 +0,0 @@
-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 from 'react';
-import Image from 'next/image';
-import styled from 'styled-components';
-import { ImageInterceptor } from '@/system/Img/ImageInterceptor';
-import { getAdaptiveValueWithCheck4k } from '@/utils/adaptive/check4k';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-var StyledProfilePic = styled(Image)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n"], ["\n  border-radius: 50%;\n"])));
-var getProfilePicProps = function (size) {
-    return {
-        width: size,
-        height: size,
-    };
-};
-export var ProfilePic = function (_a) {
-    var userPicSrc = _a.userPicSrc, _b = _a.size, size = _b === void 0 ? 40 : _b;
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    var _c = getProfilePicProps(size), width = _c.width, height = _c.height;
-    return (<ImageInterceptor borderRadiusSkeleton={'50%'}>
-      <StyledProfilePic src={userPicSrc} width={getAdaptiveValueWithCheck4k({
-            windowDimensions: windowDimensions,
-            currentSize: width,
-        })} height={getAdaptiveValueWithCheck4k({
-            windowDimensions: windowDimensions,
-            currentSize: height,
-        })} priority={true} alt={'ProfilePic'}/>
-    </ImageInterceptor>);
-};
-ProfilePic.displayName = 'ProfilePic';
-var templateObject_1;

package/dist/system/Img/Userpic/UserPic.test.jsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-import { useUserStore } from '@/modules/user/store';
-import useFetchUserpic from '@/api/server-medias/queries/useFetchUserPic';
-import UserPic from '@/system/Img/Userpic';
-jest.mock('@/modules/user/store');
-jest.mock('@/api/server-medias/queries/useFetchUserPic');
-jest.mock('@/utils/env', function () { return ({
-    getMediaENVDomain: jest.fn().mockReturnValue('https://media.ludo.ninja'),
-}); });
-jest.mock('@/public/defaultUserpics/defaultUserpic.svg', function () { return 'div'; });
-describe('UserPic Component', function () {
-    beforeEach(function () {
-        useUserStore.mockReturnValue({
-            isSignedIn: true,
-            isLoadingProfileData: false,
-            profileData: null,
-        });
-        useFetchUserpic.mockReturnValue({
-            load: jest.fn(),
-            userPic: 'fetched-user-pic.svg',
-            loading: false,
-            data: {},
-            refetch: jest.fn(),
-            error: undefined,
-        });
-    });
-    test('renders default user picture when no user picture is available', function () {
-        useFetchUserpic.mockReturnValue({
-            load: jest.fn(),
-            userPic: null,
-            loading: false,
-            data: {},
-            refetch: jest.fn(),
-            error: undefined,
-        });
-        render(<div>
-        test
-        <UserPic userId="123" width={100} height={100} isNeedBoxTransform={false}/>
-      </div>);
-        var defaultUserPic = screen
-            .getByText('test')
-            .querySelector('.userPicImage');
-        expect(defaultUserPic).toBeInTheDocument();
-    });
-    test('renders loading skeleton when loading', function () {
-        useFetchUserpic.mockReturnValueOnce({
-            load: jest.fn(),
-            userPic: null,
-            loading: true,
-            data: {},
-            refetch: jest.fn(),
-            error: undefined,
-        });
-        render(<div>
-        test
-        <UserPic userId="123" width={100} height={100} isNeedBoxTransform={false}/>
-      </div>);
-        var skeleton = screen
-            .getByText('test')
-            .querySelector('.react-loading-skeleton');
-        expect(skeleton).toBeInTheDocument();
-    });
-});

package/dist/system/Img/Userpic/index.jsx

@@ -1,74 +0,0 @@
-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, { useEffect } from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-import Skeleton from 'react-loading-skeleton';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { useUserStore } from '@/modules/user/store';
-import useFetchUserpic from '@/api/server-medias/queries/useFetchUserPic';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import BoxTransform from '@/styles/mixins/boxTransform';
-import { ImageInterceptor } from '@/system/Img/ImageInterceptor';
-import { getMediaENVDomain } from '@/utils/env';
-import DefaultUserPicIcon from '@/public/defaultUserpics/defaultUserpic.svg';
-// Styles
-var StyledHeaderUserPic = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  .userPicBlock {\n    display: flex;\n  }\n\n  .userPicImage {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  ", "\n  .userPicBlock {\n    display: flex;\n  }\n\n  .userPicImage {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), function (props) { return (props.isNeedBoxTransform ? BoxTransform : null); }, function (props) { return props.imageWidth; }, function (props) { return props.imageHeight; }, mediaQuery.minWidthFourK, function (props) {
-    return adaptiveValueCalc(Number(props.imageWidth.replace('px', '')));
-}, function (props) {
-    return adaptiveValueCalc(Number(props.imageHeight.replace('px', '')));
-});
-// Component
-var UserPic = function (_a) {
-    var userId = _a.userId, width = _a.width, height = _a.height, isNeedBoxTransform = _a.isNeedBoxTransform, children = _a.children;
-    var _b = useUserStore(function (state) { return ({
-        isSignedIn: state.isSignedIn,
-        isLoadingProfileData: state.isLoadingProfileData,
-        profileData: state.profileData,
-    }); }), isSignedIn = _b.isSignedIn, isLoadingProfileData = _b.isLoadingProfileData, profileData = _b.profileData;
-    var _c = useFetchUserpic(), load = _c.load, userPic = _c.userPic, loading = _c.loading;
-    var profileUserPic = (profileData === null || profileData === void 0 ? void 0 : profileData.getUserPic({
-        mediaDomain: getMediaENVDomain(),
-    }).includes('1.svg'))
-        ? null
-        : profileData === null || profileData === void 0 ? void 0 : profileData.getUserPic({
-            mediaDomain: getMediaENVDomain(),
-        });
-    useEffect(function () {
-        if (isSignedIn &&
-            !isLoadingProfileData &&
-            (profileData === null || profileData === void 0 ? void 0 : profileData.getUserPic({
-                mediaDomain: getMediaENVDomain(),
-            }).includes('1.svg'))) {
-            load(userId);
-        }
-    }, [userId, isSignedIn, isLoadingProfileData, profileData]);
-    var renderDefaultUserPic = function () {
-        return <DefaultUserPicIcon className={'userPicImage'}/>;
-    };
-    var renderImage = function () {
-        return (<ImageInterceptor borderRadiusSkeleton={'50%'}>
-        <Image src={(profileUserPic || userPic)} className={'userPicImage'} width={width} height={height} priority={true} alt={'ludo ninja userPick'}/>
-      </ImageInterceptor>);
-    };
-    var renderImageOrDefaultUserPic = function () {
-        return profileUserPic || userPic ? renderImage() : renderDefaultUserPic();
-    };
-    var renderSkeleton = function () {
-        return <Skeleton className={'userPicImage'}/>;
-    };
-    return (<StyledHeaderUserPic isNeedBoxTransform={isNeedBoxTransform} imageWidth={"".concat(width, "px")} imageHeight={"".concat(height, "px")}>
-      <Link href={"/profile/".concat(userId, "/nfts")} className={'userPicBlock'}>
-        {loading || isLoadingProfileData
-            ? renderSkeleton()
-            : renderImageOrDefaultUserPic()}
-        {children}
-      </Link>
-    </StyledHeaderUserPic>);
-};
-// Export
-export default UserPic;
-var templateObject_1;

package/dist/system/Img/index.js

@@ -1,3 +0,0 @@
-export * from '@/system/Img/ExternalImage';
-export * from '@/system/Img/Userpic';
-export * from '@/system/Img/Profilepic';

package/dist/system/Labels/ExperienceLabel/ExperienceLabel.test.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import ExperienceLabel from '../ExperienceLabel';
-// Mock the Next.js Image component
-jest.mock('next/image', function () {
-    return function Image() {
-        return <img alt="Experience logo" width={20} height={20}/>;
-    };
-});
-describe('ExperienceLabel Component', function () {
-    test('renders with value and link', function () {
-        var props = {
-            value: 100,
-            link: '/profile/123',
-            loading: false,
-        };
-        render(<ExperienceLabel {...props}/>);
-        var xpText = screen.getByText('100 XP');
-        expect(xpText).toBeInTheDocument();
-        var imageAltText = screen.getByAltText('Experience logo');
-        expect(imageAltText).toBeInTheDocument();
-        var linkElement = screen.getByRole('link', { name: /100 XP/i });
-        expect(linkElement).toHaveAttribute('href', '/profile/123');
-    });
-    test('renders loading skeleton', function () {
-        var props = {
-            value: 0,
-            link: '/profile/123',
-            loading: true,
-        };
-        render(<div data-testid={'test_container'}>
-        <ExperienceLabel {...props}/>
-      </div>);
-        var skeletonElement = screen
-            .getByTestId('test_container')
-            .querySelector('.react-loading-skeleton');
-        expect(skeletonElement).toBeInTheDocument();
-    });
-    test('does not render when value is falsy', function () {
-        var props = {
-            value: 0,
-            link: '/profile/123',
-            loading: false,
-        };
-        render(<ExperienceLabel {...props}/>);
-        var xpText = screen.queryByText('0 XP');
-        expect(xpText).not.toBeInTheDocument();
-    });
-});

package/dist/system/Labels/ExperienceLabel/index.jsx

@@ -1,38 +0,0 @@
-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 from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import BoxShadow from '@/styles/mixins/boxShadow';
-import BoxTransform from '@/styles/mixins/boxTransform';
-import SkeletonLabel from '@/system/Labels/SkeletonLabel';
-import { poppinsFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledExpTab = styled(Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  display: flex;\n  gap: 8px;\n  user-select: none;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 5px 8px 5px 6px;\n  max-width: max-content;\n  min-width: 116px;\n  min-height: 32px;\n  border-radius: 24px;\n  background: ", ";\n\n  .value {\n    font-family: ", ";\n    font-size: 1.6em;\n    font-weight: 600;\n    line-height: 1.3;\n    color: ", ";\n  }\n  ", " {\n    gap: ", ";\n    padding: ", " ", "\n      ", " ", ";\n    min-width: ", ";\n    min-height: ", ";\n    border-radius: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n\n    .value {\n      font-size: ", ";\n    }\n  }\n"], ["\n  ", ";\n  ", ";\n  display: flex;\n  gap: 8px;\n  user-select: none;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 5px 8px 5px 6px;\n  max-width: max-content;\n  min-width: 116px;\n  min-height: 32px;\n  border-radius: 24px;\n  background: ", ";\n\n  .value {\n    font-family: ", ";\n    font-size: 1.6em;\n    font-weight: 600;\n    line-height: 1.3;\n    color: ", ";\n  }\n  ", " {\n    gap: ", ";\n    padding: ", " ", "\n      ", " ", ";\n    min-width: ", ";\n    min-height: ", ";\n    border-radius: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n\n    .value {\n      font-size: ", ";\n    }\n  }\n"])), BoxShadow, BoxTransform, function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
-    return (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.experienceGradientLabel) === null || _c === void 0 ? void 0 : _c.gradient;
-}, poppinsFontVarCss.css, function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
-    return (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.experienceGradientLabel) === null || _c === void 0 ? void 0 : _c.color;
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(5), adaptiveValueCalc(8), adaptiveValueCalc(5), adaptiveValueCalc(6), adaptiveValueCalc(116), adaptiveValueCalc(32), adaptiveValueCalc(24), adaptiveValueCalc(20), adaptiveValueCalc(20), adaptiveValueCalc(16));
-//Component
-var ExperienceLabel = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b, link = _a.link, loading = _a.loading;
-    if (loading)
-        return <SkeletonLabel />;
-    if (!value)
-        return null;
-    return (<StyledExpTab href={link}>
-      <Image src={'/rewardsPage/XP_logo.svg'} alt="Experience logo" width={20} height={20}/>
-      <p className={"value"}>{value} XP</p>
-    </StyledExpTab>);
-};
-export default ExperienceLabel;
-var templateObject_1;

package/dist/system/Labels/InviteLabel/InviteLabel.test.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import InviteLabel from '../InviteLabel';
-describe('InviteLabel Component', function () {
-    test('renders with value and link', function () {
-        var props = {
-            value: 50,
-            link: '/invite/123',
-            loading: false,
-        };
-        render(<InviteLabel {...props}/>);
-        var inviteText = screen.getByText('50 invites');
-        expect(inviteText).toBeInTheDocument();
-        var linkElement = screen.getByRole('link', { name: /50 invites/i });
-        expect(linkElement).toHaveAttribute('href', '/invite/123');
-    });
-    test('renders loading skeleton', function () {
-        var props = {
-            value: 0,
-            link: '/invite/123',
-            loading: true,
-        };
-        render(<div data-testid={'test_container'}>
-        <InviteLabel {...props}/>
-      </div>);
-        var skeletonElement = screen
-            .getByTestId('test_container')
-            .querySelector('.react-loading-skeleton');
-        expect(skeletonElement).toBeInTheDocument();
-    });
-    test('does not render when value is falsy', function () {
-        var props = {
-            value: 0,
-            link: '/invite/123',
-            loading: false,
-        };
-        render(<InviteLabel {...props}/>);
-        var inviteText = screen.queryByText('0 invites');
-        expect(inviteText).not.toBeInTheDocument();
-    });
-});

package/dist/system/Labels/InviteLabel/index.jsx

@@ -1,34 +0,0 @@
-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 from 'react';
-import Link from 'next/link';
-import styled from 'styled-components';
-import BoxShadow from '@/styles/mixins/boxShadow';
-import BoxTransform from '@/styles/mixins/boxTransform';
-import SkeletonLabel from '@/system/Labels/SkeletonLabel';
-import { poppinsFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledExpTab = styled(Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  display: flex;\n  user-select: none;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 5px 16px;\n  max-width: max-content;\n  min-width: 99px;\n  min-height: 32px;\n  border-radius: 24px;\n  background: ", ";\n\n  .value {\n    font-family: ", ";\n    font-size: 1.6em;\n    font-weight: 600;\n    line-height: 1.3;\n    color: ", ";\n  }\n"], ["\n  ", ";\n  ", ";\n  display: flex;\n  user-select: none;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 5px 16px;\n  max-width: max-content;\n  min-width: 99px;\n  min-height: 32px;\n  border-radius: 24px;\n  background: ", ";\n\n  .value {\n    font-family: ", ";\n    font-size: 1.6em;\n    font-weight: 600;\n    line-height: 1.3;\n    color: ", ";\n  }\n"])), BoxShadow, BoxTransform, function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
-    return (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.inviteCodesGradientLabel) === null || _c === void 0 ? void 0 : _c.gradient;
-}, poppinsFontVarCss.css, function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
-    return (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.inviteCodesGradientLabel) === null || _c === void 0 ? void 0 : _c.color;
-});
-//Component
-var InviteLabel = function (_a) {
-    var value = _a.value, link = _a.link, loading = _a.loading;
-    if (loading)
-        return <SkeletonLabel />;
-    if (!value)
-        return null;
-    return (<StyledExpTab href={link}>
-      <p className={"value "}>{"".concat(value, " invites")}</p>
-    </StyledExpTab>);
-};
-export default InviteLabel;
-var templateObject_1;