@ludo.ninja/components 1.1.2 → 1.1.4

package/dist/components/socialButtons/index.jsx

@@ -1,77 +1,29 @@
+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 { TextGrayColor } from '@/styles/colors';
 import { FH3 } from '@/styles/typography';
-
 import { Box } from '@system';
-
 import data from './data';
-
-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 StyledCaption = styled.span(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      ['\n  ', ';\n  color: #000;\n'],
-      ['\n  ', ';\n  color: #000;\n']
-    )),
-  FH3
-);
-var StyledSocialButtons = styled.div(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      ['\n  margin-top: 20px;\n  margin-bottom: 50px;\n  max-width: 376px;\n'],
-      ['\n  margin-top: 20px;\n  margin-bottom: 50px;\n  max-width: 376px;\n']
-    ))
-);
-var StyledSocialButton = styled.button(
-  templateObject_3 ||
-    (templateObject_3 = __makeTemplateObject(
-      [
-        '\n  width: 100%;\n  text-align: left;\n  border: 1px solid #c1c8de;\n  border-radius: 25px;\n  padding: 11px 15px;\n  color: ',
-        ';\n  font-weight: 400;\n  font-size: 1.6em;\n  margin-bottom: 20px;\n  user-select: none;\n  background-color: transparent;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  svg {\n    margin-right: 16px;\n  }\n',
-      ],
-      [
-        '\n  width: 100%;\n  text-align: left;\n  border: 1px solid #c1c8de;\n  border-radius: 25px;\n  padding: 11px 15px;\n  color: ',
-        ';\n  font-weight: 400;\n  font-size: 1.6em;\n  margin-bottom: 20px;\n  user-select: none;\n  background-color: transparent;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  svg {\n    margin-right: 16px;\n  }\n',
-      ]
-    )),
-  TextGrayColor
-);
+var StyledCaption = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  color: #000;\n"], ["\n  ", ";\n  color: #000;\n"])), FH3);
+var StyledSocialButtons = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 20px;\n  margin-bottom: 50px;\n  max-width: 376px;\n"], ["\n  margin-top: 20px;\n  margin-bottom: 50px;\n  max-width: 376px;\n"])));
+var StyledSocialButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  text-align: left;\n  border: 1px solid #c1c8de;\n  border-radius: 25px;\n  padding: 11px 15px;\n  color: ", ";\n  font-weight: 400;\n  font-size: 1.6em;\n  margin-bottom: 20px;\n  user-select: none;\n  background-color: transparent;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  svg {\n    margin-right: 16px;\n  }\n"], ["\n  width: 100%;\n  text-align: left;\n  border: 1px solid #c1c8de;\n  border-radius: 25px;\n  padding: 11px 15px;\n  color: ", ";\n  font-weight: 400;\n  font-size: 1.6em;\n  margin-bottom: 20px;\n  user-select: none;\n  background-color: transparent;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  svg {\n    margin-right: 16px;\n  }\n"])), TextGrayColor);
 // Components
 var SocialButtons = function () {
-  var renderButtons = function () {
-    return data.map(function (button) {
-      return (
-        <StyledSocialButton
-          key={button.id}
-          onClick={button.onClickHandler}
-          type={'button'}
-        >
-          {button.icon}
-          {'Connect '.concat(button.label)}
-        </StyledSocialButton>
-      );
-    });
-  };
-  return (
-    <Box mt={45}>
+    var renderButtons = function () {
+        return data.map(function (button) { return (<StyledSocialButton key={button.id} onClick={button.onClickHandler} type={'button'}>
+        {button.icon}
+        {"Connect ".concat(button.label)}
+      </StyledSocialButton>); });
+    };
+    return (<Box mt={45}>
       <StyledCaption>Social links</StyledCaption>
       <StyledSocialButtons>{renderButtons()}</StyledSocialButtons>
-    </Box>
-  );
+    </Box>);
 };
 // Export
 export default SocialButtons;

package/dist/components/tabs/index.jsx

@@ -1,112 +1,52 @@
+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 { TextGrayColor } from '@/styles/colors';
-
 import ActiveLink from '@/system/ActiveLink';
-
 import BellIcon from './icons/bell';
 import ProfileIcon from './icons/profile';
 import SecureIcon from './icons/secure';
-
-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 StyledTabs = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  .caption {\n    font-size: 2.8em;\n    color: #000000;\n    font-weight: 600;\n    letter-spacing: -0.015em;\n  }\n',
-      ],
-      [
-        '\n  .caption {\n    font-size: 2.8em;\n    color: #000000;\n    font-weight: 600;\n    letter-spacing: -0.015em;\n  }\n',
-      ]
-    ))
-);
-var StyledTabsList = styled.div(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      ['\n  margin-top: 20px;\n  a {\n    text-decoration: none;\n  }\n'],
-      ['\n  margin-top: 20px;\n  a {\n    text-decoration: none;\n  }\n']
-    ))
-);
-var StyledTabItem = styled.span(
-  templateObject_3 ||
-    (templateObject_3 = __makeTemplateObject(
-      [
-        '\n  text-decoration: none;\n  padding: 14px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  user-select: none;\n\n  .text {\n    font-size: 1.8em;\n    color: #696f91;\n    margin-left: 8px;\n  }\n\n  :hover {\n    background: #f6f7fd;\n    border-radius: 8px;\n\n    .profile path:first-child,\n    .secure path:first-child {\n      fill: ',
-        ';\n    }\n\n    .bell path,\n    .bell rect {\n      fill: ',
-        ';\n    }\n\n    .text {\n      color: #1a1c29;\n    }\n  }\n\n  &.active {\n    background: #f6f7fd;\n    border-radius: 8px;\n\n    .profile path:first-child,\n    .secure path:first-child {\n      fill: ',
-        ';\n    }\n\n    .bell path,\n    .bell rect {\n      fill: ',
-        ';\n    }\n\n    .text {\n      color: #1a1c29;\n    }\n  }\n',
-      ],
-      [
-        '\n  text-decoration: none;\n  padding: 14px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  user-select: none;\n\n  .text {\n    font-size: 1.8em;\n    color: #696f91;\n    margin-left: 8px;\n  }\n\n  :hover {\n    background: #f6f7fd;\n    border-radius: 8px;\n\n    .profile path:first-child,\n    .secure path:first-child {\n      fill: ',
-        ';\n    }\n\n    .bell path,\n    .bell rect {\n      fill: ',
-        ';\n    }\n\n    .text {\n      color: #1a1c29;\n    }\n  }\n\n  &.active {\n    background: #f6f7fd;\n    border-radius: 8px;\n\n    .profile path:first-child,\n    .secure path:first-child {\n      fill: ',
-        ';\n    }\n\n    .bell path,\n    .bell rect {\n      fill: ',
-        ';\n    }\n\n    .text {\n      color: #1a1c29;\n    }\n  }\n',
-      ]
-    )),
-  TextGrayColor,
-  TextGrayColor,
-  TextGrayColor,
-  TextGrayColor
-);
+var StyledTabs = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .caption {\n    font-size: 2.8em;\n    color: #000000;\n    font-weight: 600;\n    letter-spacing: -0.015em;\n  }\n"], ["\n  .caption {\n    font-size: 2.8em;\n    color: #000000;\n    font-weight: 600;\n    letter-spacing: -0.015em;\n  }\n"])));
+var StyledTabsList = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 20px;\n  a {\n    text-decoration: none;\n  }\n"], ["\n  margin-top: 20px;\n  a {\n    text-decoration: none;\n  }\n"])));
+var StyledTabItem = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-decoration: none;\n  padding: 14px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  user-select: none;\n\n  .text {\n    font-size: 1.8em;\n    color: #696f91;\n    margin-left: 8px;\n  }\n\n  :hover {\n    background: #f6f7fd;\n    border-radius: 8px;\n\n    .profile path:first-child,\n    .secure path:first-child {\n      fill: ", ";\n    }\n\n    .bell path,\n    .bell rect {\n      fill: ", ";\n    }\n\n    .text {\n      color: #1a1c29;\n    }\n  }\n\n  &.active {\n    background: #f6f7fd;\n    border-radius: 8px;\n\n    .profile path:first-child,\n    .secure path:first-child {\n      fill: ", ";\n    }\n\n    .bell path,\n    .bell rect {\n      fill: ", ";\n    }\n\n    .text {\n      color: #1a1c29;\n    }\n  }\n"], ["\n  text-decoration: none;\n  padding: 14px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  user-select: none;\n\n  .text {\n    font-size: 1.8em;\n    color: #696f91;\n    margin-left: 8px;\n  }\n\n  :hover {\n    background: #f6f7fd;\n    border-radius: 8px;\n\n    .profile path:first-child,\n    .secure path:first-child {\n      fill: ", ";\n    }\n\n    .bell path,\n    .bell rect {\n      fill: ", ";\n    }\n\n    .text {\n      color: #1a1c29;\n    }\n  }\n\n  &.active {\n    background: #f6f7fd;\n    border-radius: 8px;\n\n    .profile path:first-child,\n    .secure path:first-child {\n      fill: ", ";\n    }\n\n    .bell path,\n    .bell rect {\n      fill: ", ";\n    }\n\n    .text {\n      color: #1a1c29;\n    }\n  }\n"])), TextGrayColor, TextGrayColor, TextGrayColor, TextGrayColor);
 var data = [
-  {
-    id: Math.random(),
-    title: 'Profile settings',
-    icon: <ProfileIcon customClassName={'profile'} />,
-    link: '/account/settings/profile',
-  },
-  {
-    id: Math.random(),
-    title: 'Notifications',
-    icon: <BellIcon customClassName={'bell'} />,
-    link: '/account/settings/notifications',
-  },
-  {
-    id: Math.random(),
-    title: 'Privacy',
-    icon: <SecureIcon customClassName={'secure'} />,
-    link: '/account/settings/privacy',
-  },
+    {
+        id: Math.random(),
+        title: 'Profile settings',
+        icon: <ProfileIcon customClassName={'profile'}/>,
+        link: '/account/settings/profile',
+    },
+    {
+        id: Math.random(),
+        title: 'Notifications',
+        icon: <BellIcon customClassName={'bell'}/>,
+        link: '/account/settings/notifications',
+    },
+    {
+        id: Math.random(),
+        title: 'Privacy',
+        icon: <SecureIcon customClassName={'secure'}/>,
+        link: '/account/settings/privacy',
+    },
 ];
 // Component
 var Tabs = function () {
-  var renderTabItems = function () {
-    return data.map(function (dataItem) {
-      return (
-        <ActiveLink
-          key={dataItem.id}
-          href={dataItem.link}
-          activeClassName={'active'}
-        >
-          <StyledTabItem>
-            {dataItem.icon}
-            <p className={'text'}>{dataItem.title}</p>
-          </StyledTabItem>
-        </ActiveLink>
-      );
-    });
-  };
-  return (
-    <StyledTabs>
+    var renderTabItems = function () {
+        return data.map(function (dataItem) { return (<ActiveLink key={dataItem.id} href={dataItem.link} activeClassName={'active'}>
+        <StyledTabItem>
+          {dataItem.icon}
+          <p className={'text'}>{dataItem.title}</p>
+        </StyledTabItem>
+      </ActiveLink>); });
+    };
+    return (<StyledTabs>
       <h3 className={'caption'}>Settings</h3>
       <StyledTabsList>{renderTabItems()}</StyledTabsList>
-    </StyledTabs>
-  );
+    </StyledTabs>);
 };
 // Export
 export default Tabs;

package/dist/components/toTopBtn/index.jsx

@@ -1,136 +1,60 @@
+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, useState } from 'react';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { AccentColor } from '@/styles/colors';
 import { zIndexToTopBtn } from '@/styles/mixins/z-indexes';
-
 import { getAdaptiveScale } from '@/utils/adaptive/scale';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
 import { upBtnDistance } from '@/utils/ui';
-
 import ToTopBtnIcon from '@/public/toTopBtn/toTopBtn.svg';
-
-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 StyledToTopBnt = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  width: 48px;\n  height: 48px;\n  bottom: 36px;\n  right: 24px;\n  z-index: ',
-        ';\n  cursor: pointer;\n  padding: 5px;\n  background-color: ',
-        ';\n  border-radius: 24px;\n  box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.1);\n\n  &:hover {\n    svg path {\n      stroke: ',
-        ';\n    }\n  }\n\n  @media (max-width: 767px) {\n    position: fixed;\n    left: 0;\n    right: 0;\n    margin: 0 auto;\n  }\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n    bottom: ',
-        ';\n    right: ',
-        ';\n    border-radius: ',
-        ';\n    padding: ',
-        ';\n    box-shadow: 0 ',
-        ' ',
-        '\n      ',
-        ' rgba(33, 21, 95, 0.1);\n  }\n',
-      ],
-      [
-        '\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  width: 48px;\n  height: 48px;\n  bottom: 36px;\n  right: 24px;\n  z-index: ',
-        ';\n  cursor: pointer;\n  padding: 5px;\n  background-color: ',
-        ';\n  border-radius: 24px;\n  box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.1);\n\n  &:hover {\n    svg path {\n      stroke: ',
-        ';\n    }\n  }\n\n  @media (max-width: 767px) {\n    position: fixed;\n    left: 0;\n    right: 0;\n    margin: 0 auto;\n  }\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n    bottom: ',
-        ';\n    right: ',
-        ';\n    border-radius: ',
-        ';\n    padding: ',
-        ';\n    box-shadow: 0 ',
-        ' ',
-        '\n      ',
-        ' rgba(33, 21, 95, 0.1);\n  }\n',
-      ]
-    )),
-  zIndexToTopBtn,
-  function (_a) {
+var StyledToTopBnt = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  width: 48px;\n  height: 48px;\n  bottom: 36px;\n  right: 24px;\n  z-index: ", ";\n  cursor: pointer;\n  padding: 5px;\n  background-color: ", ";\n  border-radius: 24px;\n  box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.1);\n\n  &:hover {\n    svg path {\n      stroke: ", ";\n    }\n  }\n\n  @media (max-width: 767px) {\n    position: fixed;\n    left: 0;\n    right: 0;\n    margin: 0 auto;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    bottom: ", ";\n    right: ", ";\n    border-radius: ", ";\n    padding: ", ";\n    box-shadow: 0 ", " ", "\n      ", " rgba(33, 21, 95, 0.1);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  width: 48px;\n  height: 48px;\n  bottom: 36px;\n  right: 24px;\n  z-index: ", ";\n  cursor: pointer;\n  padding: 5px;\n  background-color: ", ";\n  border-radius: 24px;\n  box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.1);\n\n  &:hover {\n    svg path {\n      stroke: ", ";\n    }\n  }\n\n  @media (max-width: 767px) {\n    position: fixed;\n    left: 0;\n    right: 0;\n    margin: 0 auto;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    bottom: ", ";\n    right: ", ";\n    border-radius: ", ";\n    padding: ", ";\n    box-shadow: 0 ", " ", "\n      ", " rgba(33, 21, 95, 0.1);\n  }\n"])), zIndexToTopBtn, function (_a) {
     var theme = _a.theme;
     return theme.colors.toTopBtn;
-  },
-  AccentColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(48),
-  adaptiveValueCalc(48),
-  adaptiveValueCalc(36),
-  adaptiveValueCalc(24),
-  adaptiveValueCalc(24),
-  adaptiveValueCalc(5),
-  adaptiveValueCalc(10),
-  adaptiveValueCalc(32),
-  adaptiveValueCalc(-16)
-);
+}, AccentColor, mediaQuery.minWidthFourK, adaptiveValueCalc(48), adaptiveValueCalc(48), adaptiveValueCalc(36), adaptiveValueCalc(24), adaptiveValueCalc(24), adaptiveValueCalc(5), adaptiveValueCalc(10), adaptiveValueCalc(32), adaptiveValueCalc(-16));
 var ToTopBtnIconResize = function () {
-  var windowDimensions =
-    useWindowDimensionsWithServerInitial().windowDimensions;
-  return (
-    <ToTopBtnIcon
-      style={getAdaptiveScale({
-        windowDimensions: windowDimensions,
-        currentSize: 1,
-      })}
-    />
-  );
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (<ToTopBtnIcon style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>);
 };
 var ToTopBtn = function () {
-  var _a = useState(false),
-    showBtn = _a[0],
-    setShowBtn = _a[1];
-  var oldScrollY = document.documentElement.scrollTop;
-  var offsetPixels = 600;
-  useEffect(function () {
-    window.addEventListener('scroll', handleScroll);
-    return function () {
-      return window.removeEventListener('scroll', handleScroll);
+    var _a = useState(false), showBtn = _a[0], setShowBtn = _a[1];
+    var oldScrollY = document.documentElement.scrollTop;
+    var offsetPixels = 600;
+    useEffect(function () {
+        window.addEventListener('scroll', handleScroll);
+        return function () { return window.removeEventListener('scroll', handleScroll); };
+    }, []);
+    var handleClickFunction = function () {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    var handleScroll = function () {
+        if (upBtnDistance(document, offsetPixels)) {
+            if (oldScrollY > document.documentElement.scrollTop) {
+                setShowBtn(true);
+            }
+            oldScrollY = document.documentElement.scrollTop;
+        }
+        else {
+            setShowBtn(false);
+            oldScrollY = offsetPixels;
+        }
     };
-  }, []);
-  var handleClickFunction = function () {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  var handleScroll = function () {
-    if (upBtnDistance(document, offsetPixels)) {
-      if (oldScrollY > document.documentElement.scrollTop) {
-        setShowBtn(true);
-      }
-      oldScrollY = document.documentElement.scrollTop;
-    } else {
-      setShowBtn(false);
-      oldScrollY = offsetPixels;
-    }
-  };
-  if (!showBtn) return null;
-  return (
-    <StyledToTopBnt onClick={handleClickFunction}>
+    if (!showBtn)
+        return null;
+    return (<StyledToTopBnt onClick={handleClickFunction}>
       <ToTopBtnIconResize />
-    </StyledToTopBnt>
-  );
+    </StyledToTopBnt>);
 };
 export var ToTopBtnWithCustomHandler = function (_a) {
-  var handleClickFunction = _a.handleClickFunction;
-  return (
-    <StyledToTopBnt onClick={handleClickFunction}>
+    var handleClickFunction = _a.handleClickFunction;
+    return (<StyledToTopBnt onClick={handleClickFunction}>
       <ToTopBtnIconResize />
-    </StyledToTopBnt>
-  );
+    </StyledToTopBnt>);
 };
 // Export
 export default ToTopBtn;