@ludo.ninja/components 1.0.7 → 1.0.8

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/index.jsx

@@ -1,22 +1,41 @@
-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 { BlackColor } from '@/styles/colors';
+
 import InviteCodeCaptionLoader from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/loader';
+
 import { H3 } from '@system';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 // Styles
-var StyledIInviteCodeCaption = styled(H3)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  user-select: none;\n"], ["\n  color: ", ";\n  user-select: none;\n"])), BlackColor);
+var StyledIInviteCodeCaption = styled(H3)(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\n  color: ', ';\n  user-select: none;\n'],
+      ['\n  color: ', ';\n  user-select: none;\n']
+    )),
+  BlackColor
+);
 // Component
 var InviteCodeCaption = function (_a) {
-    var isLoading = _a.isLoading, text = _a.text, isNeedRender = _a.isNeedRender;
-    if (!isNeedRender)
-        return null;
-    if (isLoading)
-        return <InviteCodeCaptionLoader />;
-    return <StyledIInviteCodeCaption>{text}</StyledIInviteCodeCaption>;
+  var isLoading = _a.isLoading,
+    text = _a.text,
+    isNeedRender = _a.isNeedRender;
+  if (!isNeedRender) return null;
+  if (isLoading) return <InviteCodeCaptionLoader />;
+  return <StyledIInviteCodeCaption>{text}</StyledIInviteCodeCaption>;
 };
 // Export
 export default InviteCodeCaption;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/loader/index.jsx

@@ -1,15 +1,30 @@
-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 Skeleton from 'react-loading-skeleton';
 import styled from 'styled-components';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 //Styles
-var StyledSkeleton = styled(Skeleton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 22px;\n"], ["\n  height: 22px;\n"])));
+var StyledSkeleton = styled(Skeleton)(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\n  height: 22px;\n'],
+      ['\n  height: 22px;\n']
+    ))
+);
 // Component
 var InviteCodeCaptionLoader = function () {
-    return <StyledSkeleton style={{ marginBottom: '16px' }}/>;
+  return <StyledSkeleton style={{ marginBottom: '16px' }} />;
 };
 // Export
 export default InviteCodeCaptionLoader;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCopy/index.jsx

@@ -1,26 +1,49 @@
-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 { AccentColor } from '@/styles/colors';
+
 import { H5 } from '@system';
+
 import { CopyButton } from '@/utils/copyBtn';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 // Styles
-var StyledInviteCodeCopy = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .copyBtn {\n    display: flex;\n    user-select: none;\n  }\n"], ["\n  .copyBtn {\n    display: flex;\n    user-select: none;\n  }\n"])));
+var StyledInviteCodeCopy = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\n  .copyBtn {\n    display: flex;\n    user-select: none;\n  }\n'],
+      ['\n  .copyBtn {\n    display: flex;\n    user-select: none;\n  }\n']
+    ))
+);
 // Component
 var InviteCodeCopy = function (_a) {
-    var inviteCode = _a.inviteCode;
-    return (<StyledInviteCodeCopy>
+  var inviteCode = _a.inviteCode;
+  return (
+    <StyledInviteCodeCopy>
       <div className={'copyBtn'}>
         <CopyButton value={inviteCode.inviteCode}>
-          <H5 style={{ marginLeft: '4px', cursor: 'pointer' }} color={AccentColor}>
+          <H5
+            style={{ marginLeft: '4px', cursor: 'pointer' }}
+            color={AccentColor}
+          >
             Copy
           </H5>
         </CopyButton>
       </div>
-    </StyledInviteCodeCopy>);
+    </StyledInviteCodeCopy>
+  );
 };
 // Export
 export default InviteCodeCopy;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeDate/index.jsx

@@ -1,19 +1,39 @@
-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 { ProgressColor } from '@/styles/colors';
+
 import { H5 } from '@system';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 // Styles
-var StyledInviteCodeActivatedDate = styled(H5)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 15px;\n  font-weight: 400;\n"], ["\n  color: ", ";\n  font-size: 15px;\n  font-weight: 400;\n"])), ProgressColor);
+var StyledInviteCodeActivatedDate = styled(H5)(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\n  color: ', ';\n  font-size: 15px;\n  font-weight: 400;\n'],
+      ['\n  color: ', ';\n  font-size: 15px;\n  font-weight: 400;\n']
+    )),
+  ProgressColor
+);
 // Component
 var InviteCodeActivatedDate = function (_a) {
-    var value = _a.value;
-    return (<StyledInviteCodeActivatedDate>
-      {"Activated on ".concat(value.toLocaleDateString('en-GB'))}
-    </StyledInviteCodeActivatedDate>);
+  var value = _a.value;
+  return (
+    <StyledInviteCodeActivatedDate>
+      {'Activated on '.concat(value.toLocaleDateString('en-GB'))}
+    </StyledInviteCodeActivatedDate>
+  );
 };
 // Export
 export default InviteCodeActivatedDate;

package/dist/components/inviteCodesPage/wrappers/index.jsx

@@ -1,4 +1,5 @@
 import ResumeCodes from '@/components/inviteCodesPage/wrappers/resumeCodes';
 import UnusedCodes from '@/components/inviteCodesPage/wrappers/unusedCodes';
 import UsedCodes from '@/components/inviteCodesPage/wrappers/usedCodes';
+
 export { ResumeCodes, UnusedCodes, UsedCodes };

package/dist/components/inviteCodesPage/wrappers/resumeCodes/index.jsx

@@ -1,40 +1,143 @@
-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 { TextGray2Color } from '@ludo.ninja/ui/build/styles/colors';
 import { ASK_MORE_INVITES_GOOGLE_FORM } from '@ludo.ninja/utils';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
-import { AccentColor, BlackColor, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import {
+  AccentColor,
+  BlackColor,
+  TextGrayColor,
+  WhiteColor,
+} from '@/styles/colors';
 import BoxShadow from '@/styles/mixins/boxShadow';
 import BoxTransform from '@/styles/mixins/boxTransform';
 import { FH5 } from '@/styles/typography';
+
 import ResumeCodesLoader from '@/components/inviteCodesPage/wrappers/resumeCodes/loader';
+
 import MainButton from '@/system/Buttons/MainButton';
+
 import { H1, H3, MainText } from '@system';
+
 import { dmsansFontVarCss } from '@/fonts/vars';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 // Styles
-var StyledResumeCodes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"], ["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"])), BoxShadow, BoxTransform, WhiteColor, mediaQuery.mobile);
-var StyledResumeCodesCaption = styled(H1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), BlackColor, AccentColor);
-var StyledResumeCodesSubCaption = styled(H3)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), TextGrayColor, BlackColor);
-var StyledResumeCodesText = styled(MainText)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"], ["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"])), dmsansFontVarCss.css, TextGrayColor);
-var StyledAddCodesText = styled(MainText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"])), FH5, dmsansFontVarCss.css, TextGray2Color);
+var StyledResumeCodes = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  ',
+        ';\n  ',
+        ';\n  background-color: ',
+        ';\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ',
+        ' {\n    padding: 20px;\n  }\n',
+      ],
+      [
+        '\n  ',
+        ';\n  ',
+        ';\n  background-color: ',
+        ';\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ',
+        ' {\n    padding: 20px;\n  }\n',
+      ]
+    )),
+  BoxShadow,
+  BoxTransform,
+  WhiteColor,
+  mediaQuery.mobile
+);
+var StyledResumeCodesCaption = styled(H1)(
+  templateObject_2 ||
+    (templateObject_2 = __makeTemplateObject(
+      ['\n  color: ', ';\n\n  strong {\n    color: ', ';\n  }\n'],
+      ['\n  color: ', ';\n\n  strong {\n    color: ', ';\n  }\n']
+    )),
+  BlackColor,
+  AccentColor
+);
+var StyledResumeCodesSubCaption = styled(H3)(
+  templateObject_3 ||
+    (templateObject_3 = __makeTemplateObject(
+      [
+        '\n  margin-top: 12px;\n  color: ',
+        ';\n\n  strong {\n    color: ',
+        ';\n  }\n',
+      ],
+      [
+        '\n  margin-top: 12px;\n  color: ',
+        ';\n\n  strong {\n    color: ',
+        ';\n  }\n',
+      ]
+    )),
+  TextGrayColor,
+  BlackColor
+);
+var StyledResumeCodesText = styled(MainText)(
+  templateObject_4 ||
+    (templateObject_4 = __makeTemplateObject(
+      ['\n  font-family: ', ';\n  margin-top: 24px;\n  color: ', ';\n'],
+      ['\n  font-family: ', ';\n  margin-top: 24px;\n  color: ', ';\n']
+    )),
+  dmsansFontVarCss.css,
+  TextGrayColor
+);
+var StyledAddCodesText = styled(MainText)(
+  templateObject_5 ||
+    (templateObject_5 = __makeTemplateObject(
+      [
+        '\n  ',
+        ';\n  font-family: ',
+        ';\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ',
+        ';\n',
+      ],
+      [
+        '\n  ',
+        ';\n  font-family: ',
+        ';\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ',
+        ';\n',
+      ]
+    )),
+  FH5,
+  dmsansFontVarCss.css,
+  TextGray2Color
+);
 // Component
 var ResumeCodes = function (_a) {
-    var invites = _a.invites, activeInvites = _a.activeInvites, isLoading = _a.isLoading, userId = _a.userId;
-    if (isLoading)
-        return <ResumeCodesLoader />;
-    var isPlural = function (nmb) { return (nmb <= 1 ? 'invite' : 'invites'); };
-    return (<div>
+  var invites = _a.invites,
+    activeInvites = _a.activeInvites,
+    isLoading = _a.isLoading,
+    userId = _a.userId;
+  if (isLoading) return <ResumeCodesLoader />;
+  var isPlural = function (nmb) {
+    return nmb <= 1 ? 'invite' : 'invites';
+  };
+  return (
+    <div>
       <StyledResumeCodes>
         <StyledResumeCodesCaption>
-          You have <strong>{"".concat(invites, " active ").concat(isPlural(invites))}</strong>
+          You have{' '}
+          <strong>
+            {''.concat(invites, ' active ').concat(isPlural(invites))}
+          </strong>
         </StyledResumeCodesCaption>
         <StyledResumeCodesSubCaption>
           Your friends activated{' '}
-          <strong>{"".concat(activeInvites, " ").concat(isPlural(activeInvites))}</strong>{' '}
+          <strong>
+            {''.concat(activeInvites, ' ').concat(isPlural(activeInvites))}
+          </strong>{' '}
           already
         </StyledResumeCodesSubCaption>
       </StyledResumeCodes>
@@ -49,11 +152,23 @@ var ResumeCodes = function (_a) {
       <StyledAddCodesText>
         Do you have more friends to invite?
       </StyledAddCodesText>
-      <MainButton onClick={function () {
-            return window.open("".concat(ASK_MORE_INVITES_GOOGLE_FORM).concat(userId), '_blank');
-        }} variant="primaryM" text={'Ask for more invites'}/>
-    </div>);
+      <MainButton
+        onClick={function () {
+          return window.open(
+            ''.concat(ASK_MORE_INVITES_GOOGLE_FORM).concat(userId),
+            '_blank'
+          );
+        }}
+        variant="primaryM"
+        text={'Ask for more invites'}
+      />
+    </div>
+  );
 };
 // Export
 export default ResumeCodes;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1,
+  templateObject_2,
+  templateObject_3,
+  templateObject_4,
+  templateObject_5;

package/dist/components/inviteCodesPage/wrappers/resumeCodes/loader/index.jsx

@@ -1,13 +1,29 @@
 import React from 'react';
+
 import Skeleton from 'react-loading-skeleton';
+
 // Component
 var ResumeCodesLoader = function () {
-    return (<>
-      <Skeleton style={{ borderRadius: '8px', padding: '24px 32px' }} height="100px"/>
-      <Skeleton style={{ borderRadius: '8px', marginTop: '24px' }} height="30px"/>
-      <Skeleton style={{ borderRadius: '8px', marginTop: '12px' }} height="20px"/>
-      <Skeleton style={{ borderRadius: '8px', marginTop: '12px' }} height="20px"/>
-    </>);
+  return (
+    <>
+      <Skeleton
+        style={{ borderRadius: '8px', padding: '24px 32px' }}
+        height="100px"
+      />
+      <Skeleton
+        style={{ borderRadius: '8px', marginTop: '24px' }}
+        height="30px"
+      />
+      <Skeleton
+        style={{ borderRadius: '8px', marginTop: '12px' }}
+        height="20px"
+      />
+      <Skeleton
+        style={{ borderRadius: '8px', marginTop: '12px' }}
+        height="20px"
+      />
+    </>
+  );
 };
 // Export
 export default ResumeCodesLoader;

package/dist/components/inviteCodesPage/wrappers/unusedCodes/index.jsx

@@ -1,27 +1,51 @@
-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 { InviteCodeCopy } from '@/components/inviteCodesPage/components';
 import InviteCodes from '@/components/inviteCodesPage/components/inviteCodes';
 import InviteCode from '@/components/inviteCodesPage/components/inviteCodes/inviteCode';
-var StyledUnusedCodes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 40px;\n"], ["\n  margin-bottom: 40px;\n"])));
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
+var StyledUnusedCodes = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\n  margin-bottom: 40px;\n'],
+      ['\n  margin-bottom: 40px;\n']
+    ))
+);
 // Component
 var UnusedCodes = function (_a) {
-    var unusedInvites = _a.unusedInvites, isLoading = _a.isLoading;
-    var renderUnusedInviteCodes = unusedInvites === null || unusedInvites === void 0 ? void 0 : unusedInvites.map(function (inviteCode) {
-        return (<InviteCode key={inviteCode.inviteCode} inviteCode={inviteCode}>
-        <InviteCodeCopy inviteCode={inviteCode}/>
-      </InviteCode>);
-    });
-    if (!isLoading && (!unusedInvites || !unusedInvites.length)) {
-        return null;
-    }
-    return (<StyledUnusedCodes>
+  var unusedInvites = _a.unusedInvites,
+    isLoading = _a.isLoading;
+  var renderUnusedInviteCodes =
+    unusedInvites === null || unusedInvites === void 0
+      ? void 0
+      : unusedInvites.map(function (inviteCode) {
+          return (
+            <InviteCode key={inviteCode.inviteCode} inviteCode={inviteCode}>
+              <InviteCodeCopy inviteCode={inviteCode} />
+            </InviteCode>
+          );
+        });
+  if (!isLoading && (!unusedInvites || !unusedInvites.length)) {
+    return null;
+  }
+  return (
+    <StyledUnusedCodes>
       <InviteCodes isLoading={isLoading}>{renderUnusedInviteCodes}</InviteCodes>
-    </StyledUnusedCodes>);
+    </StyledUnusedCodes>
+  );
 };
 // Export
 export default UnusedCodes;

package/dist/components/inviteCodesPage/wrappers/usedCodes/index.jsx

@@ -1,34 +1,64 @@
-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 { InviteCodeCaption, InviteCodes, } from '@/components/inviteCodesPage/components';
+
+import {
+  InviteCodeCaption,
+  InviteCodes,
+} from '@/components/inviteCodesPage/components';
 import InviteCode from '@/components/inviteCodesPage/components/inviteCodes/inviteCode';
 import InviteCodeActivatedDate from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeDate';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 // Styles
-var StyledUsedCodesCaption = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 16px;\n"], ["\n  margin-bottom: 16px;\n"])));
+var StyledUsedCodesCaption = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\n  margin-bottom: 16px;\n'],
+      ['\n  margin-bottom: 16px;\n']
+    ))
+);
 // Component
 var UsedCodes = function (_a) {
-    var usedInvites = _a.usedInvites, isLoading = _a.isLoading;
-    var sortedInvitesOnDate = usedInvites
-        .sort(function (value, nextValue) { return value.usedAt - nextValue.usedAt; })
-        .reverse();
-    if (!isLoading && (!sortedInvitesOnDate || !sortedInvitesOnDate.length)) {
-        return null;
-    }
-    var renderUsedInviteCodes = sortedInvitesOnDate.map(function (inviteCode) {
-        return (<InviteCode key={inviteCode.inviteCode} inviteCode={inviteCode}>
-        <InviteCodeActivatedDate value={new Date(inviteCode.usedAt)}/>
-      </InviteCode>);
-    });
-    return (<>
+  var usedInvites = _a.usedInvites,
+    isLoading = _a.isLoading;
+  var sortedInvitesOnDate = usedInvites
+    .sort(function (value, nextValue) {
+      return value.usedAt - nextValue.usedAt;
+    })
+    .reverse();
+  if (!isLoading && (!sortedInvitesOnDate || !sortedInvitesOnDate.length)) {
+    return null;
+  }
+  var renderUsedInviteCodes = sortedInvitesOnDate.map(function (inviteCode) {
+    return (
+      <InviteCode key={inviteCode.inviteCode} inviteCode={inviteCode}>
+        <InviteCodeActivatedDate value={new Date(inviteCode.usedAt)} />
+      </InviteCode>
+    );
+  });
+  return (
+    <>
       <StyledUsedCodesCaption>
-        <InviteCodeCaption isNeedRender={sortedInvitesOnDate.length} text={'Activated invites'} isLoading={isLoading}/>
+        <InviteCodeCaption
+          isNeedRender={sortedInvitesOnDate.length}
+          text={'Activated invites'}
+          isLoading={isLoading}
+        />
       </StyledUsedCodesCaption>
       <InviteCodes isLoading={isLoading}>{renderUsedInviteCodes}</InviteCodes>
-    </>);
+    </>
+  );
 };
 // Export
 export default UsedCodes;

package/dist/components/linkTabs/index.jsx

@@ -1,20 +1,68 @@
-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 { BorderColorLight } from '@/styles/colors';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 // Styles
-var StyledLinkTabs = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ", ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-bottom: ", ";\n\n    &::after {\n      bottom: ", ";\n      border-bottom-width: ", ";\n    }\n    a {\n      margin-left: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ", ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-bottom: ", ";\n\n    &::after {\n      bottom: ", ";\n      border-bottom-width: ", ";\n    }\n    a {\n      margin-left: ", ";\n    }\n  }\n"])), function (props) { return (props.isUnderlined ? 'block' : 'none'); }, BorderColorLight, mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(-4), adaptiveValueCalc(1), adaptiveValueCalc(32));
+var StyledLinkTabs = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ',
+        ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ",
+        ';\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ',
+        ' {\n    margin-bottom: ',
+        ';\n\n    &::after {\n      bottom: ',
+        ';\n      border-bottom-width: ',
+        ';\n    }\n    a {\n      margin-left: ',
+        ';\n    }\n  }\n',
+      ],
+      [
+        '\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ',
+        ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ",
+        ';\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ',
+        ' {\n    margin-bottom: ',
+        ';\n\n    &::after {\n      bottom: ',
+        ';\n      border-bottom-width: ',
+        ';\n    }\n    a {\n      margin-left: ',
+        ';\n    }\n  }\n',
+      ]
+    )),
+  function (props) {
+    return props.isUnderlined ? 'block' : 'none';
+  },
+  BorderColorLight,
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(24),
+  adaptiveValueCalc(-4),
+  adaptiveValueCalc(1),
+  adaptiveValueCalc(32)
+);
 // Component
 var LinkTabs = function (_a) {
-    var isUnderlined = _a.isUnderlined, children = _a.children, style = _a.style;
-    return (<StyledLinkTabs isUnderlined={isUnderlined} style={style}>
+  var isUnderlined = _a.isUnderlined,
+    children = _a.children,
+    style = _a.style;
+  return (
+    <StyledLinkTabs isUnderlined={isUnderlined} style={style}>
       {children}
-    </StyledLinkTabs>);
+    </StyledLinkTabs>
+  );
 };
 // Export
 export default LinkTabs;