@helpdice/ui 1.0.1 → 1.0.2

package/esm/link/link.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["href", "showColor", "underline", "children", "className", "block", "icon"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import LinkIcon from './icon';
+import { addColorAlpha } from '../utils/color';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$href = _ref.href,
+    href = _ref$href === void 0 ? '' : _ref$href,
+    _ref$showColor = _ref.showColor,
+    showColor = _ref$showColor === void 0 ? false : _ref$showColor,
+    _ref$underline = _ref.underline,
+    underline = _ref$underline === void 0 ? false : _ref$underline,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? false : _ref$icon,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var linkColor = showColor || block ? theme.palette.link : 'inherit';
+  var hoverColor = showColor || block ? theme.palette.successLight : 'inherit';
+  var decoration = underline ? 'underline' : 'none';
+  var classes = useClasses('link', {
+    block: block
+  }, className);
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: href
+  }, props, {
+    ref: ref,
+    className: _JSXStyle.dynamic([["442871747", [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, icon && /*#__PURE__*/React.createElement(LinkIcon, null), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "442871747",
+    dynamic: [linkColor, block ? theme.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', hoverColor]
+  }, ".link.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;line-height:inherit;color:".concat(linkColor, ";-webkit-text-decoration:none;text-decoration:none;border-radius:").concat(block ? theme.layout.radius : 0, ";-webkit-transition:color 200ms ease 0ms;transition:color 200ms ease 0ms;font-size:").concat(SCALES.font(1, 'inherit'), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.block.__jsx-style-dynamic-selector{padding:").concat(SCALES.pt(0.125), " ").concat(SCALES.pr(0.25), " ").concat(SCALES.pb(0.125), " ").concat(SCALES.pl(0.25), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(-0.125), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(-0.125), ";}.link.__jsx-style-dynamic-selector:hover,.link.__jsx-style-dynamic-selector:active,.link.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:").concat(decoration, ";text-decoration:").concat(decoration, ";}.link.__jsx-style-dynamic-selector:hover{background-color:").concat(block ? addColorAlpha(theme.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")));
+});
+LinkComponent.displayName = 'Link';
+var Link = withScale(LinkComponent);
+export default Link;

package/esm/loading/index.d.ts

@@ -0,0 +1,3 @@
+import Loading from "./loading";
+export type { LoadingProps, LoadingTypes } from "./loading";
+export default Loading;

package/esm/loading/index.js

@@ -0,0 +1,2 @@
+import Loading from './loading';
+export default Loading;

package/esm/loading/loading.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type LoadingTypes = NormalTypes;
+interface Props {
+    type?: LoadingTypes;
+    color?: string;
+    className?: string;
+    spaceRatio?: number;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type LoadingProps = Props & NativeAttrs;
+declare const Loading: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Loading;

package/esm/loading/loading.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "type", "color", "className", "spaceRatio"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var getIconBgColor = function getIconBgColor(type, palette, color) {
+  var colors = {
+    "default": palette.accents_6,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error
+  };
+  return color ? color : colors[type];
+};
+var LoadingComponent = function LoadingComponent(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    color = _ref.color,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$spaceRatio = _ref.spaceRatio,
+    spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = useClasses('loading-container', className);
+  var bgColor = useMemo(function () {
+    return getIconBgColor(type, theme.palette, color);
+  }, [type, theme.palette, color]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
+  }, children && /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+  }, children), /*#__PURE__*/React.createElement("i", {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+  }), /*#__PURE__*/React.createElement("i", {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+  }), /*#__PURE__*/React.createElement("i", {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2201634259",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]
+  }, ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")));
+};
+LoadingComponent.displayName = 'Loading';
+var Loading = withScale(LoadingComponent);
+export default Loading;

package/esm/login-with/LoginSocialAmazon/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IResolveParams, objectType } from "..";
+interface Props {
+    scope?: string;
+    state?: string;
+    client_id: string;
+    className?: string;
+    redirect_uri?: string;
+    response_type?: string;
+    scope_data?: objectType;
+    isOnlyGetToken?: boolean;
+    children?: React.ReactNode;
+    onLoginStart?: () => void;
+    onReject: (reject: string | objectType) => void;
+    onResolve: ({ provider, data }: IResolveParams) => void;
+}
+export declare const LoginSocialAmazon: ({ state, client_id, className, redirect_uri, scope, isOnlyGetToken: onlyGetToken, scope_data, response_type, children, onReject, onResolve, onLoginStart, }: Props) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ state, client_id, className, redirect_uri, scope, isOnlyGetToken: onlyGetToken, scope_data, response_type, children, onReject, onResolve, onLoginStart, }: Props) => JSX.Element>;
+export default _default;

package/esm/login-with/LoginSocialAmazon/index.js

@@ -0,0 +1,142 @@
+/* eslint-disable camelcase */
+/**
+ *
+ * LoginSocialAmazon
+ *
+ */
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { memo, useEffect, useState, useCallback, useRef } from 'react';
+var JS_SRC = 'https://assets.loginwithamazon.com/sdk/na/login1.js';
+var SCRIPT_ID = 'amazon-login';
+var _window = global.window;
+export var LoginSocialAmazon = function LoginSocialAmazon(_ref) {
+  var _ref$state = _ref.state,
+    state = _ref$state === void 0 ? '' : _ref$state,
+    client_id = _ref.client_id,
+    className = _ref.className,
+    redirect_uri = _ref.redirect_uri,
+    _ref$scope = _ref.scope,
+    scope = _ref$scope === void 0 ? 'profile' : _ref$scope,
+    _ref$isOnlyGetToken = _ref.isOnlyGetToken,
+    onlyGetToken = _ref$isOnlyGetToken === void 0 ? false : _ref$isOnlyGetToken,
+    _ref$scope_data = _ref.scope_data,
+    scope_data = _ref$scope_data === void 0 ? {
+      profile: {
+        essential: true
+      }
+    } : _ref$scope_data,
+    _ref$response_type = _ref.response_type,
+    response_type = _ref$response_type === void 0 ? 'token' : _ref$response_type,
+    children = _ref.children,
+    onReject = _ref.onReject,
+    onResolve = _ref.onResolve,
+    onLoginStart = _ref.onLoginStart;
+  var scriptNodeRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSdkLoaded = _useState2[0],
+    setIsSdkLoaded = _useState2[1];
+  useEffect(function () {
+    !isSdkLoaded && load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSdkLoaded]);
+  useEffect(function () {
+    return function () {
+      if (scriptNodeRef.current) scriptNodeRef.current.remove();
+    };
+  }, []);
+  var checkIsExistsSDKScript = useCallback(function () {
+    return !!document.getElementById(SCRIPT_ID);
+  }, []);
+  var insertScriptGoogle = useCallback(function (d) {
+    var s = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'script';
+    var id = arguments.length > 2 ? arguments[2] : undefined;
+    var jsSrc = arguments.length > 3 ? arguments[3] : undefined;
+    var cb = arguments.length > 4 ? arguments[4] : undefined;
+    var ggScriptTag = d.createElement(s);
+    ggScriptTag.id = id;
+    ggScriptTag.src = jsSrc;
+    ggScriptTag.async = true;
+    ggScriptTag.defer = true;
+    var scriptNode = document.getElementsByTagName('script')[0];
+    scriptNodeRef.current = ggScriptTag;
+    scriptNode && scriptNode.parentNode && scriptNode.parentNode.insertBefore(ggScriptTag, scriptNode);
+    ggScriptTag.onload = cb;
+  }, []);
+  var getUserInfo = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(res) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            fetch("https://api.amazon.com/user/profile", {
+              headers: {
+                Authorization: "Bearer ".concat(res.access_token)
+              }
+            }).then(function (data) {
+              return data.json();
+            }).then(function (data) {
+              onResolve({
+                provider: 'amazon',
+                data: _extends({}, data, res)
+              });
+            })["catch"](function (err) {
+              onReject(err);
+            })["finally"](function () {});
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [onReject, onResolve]);
+  var handleResponse = useCallback(function (res) {
+    if (onlyGetToken) onResolve({
+      provider: 'amazon',
+      data: _extends({}, res)
+    });else getUserInfo(res);
+  }, [getUserInfo, onResolve, onlyGetToken]);
+  var handleError = useCallback(function (err) {
+    onReject(err);
+  }, [onReject]);
+  var load = useCallback(function () {
+    if (checkIsExistsSDKScript()) {
+      setIsSdkLoaded(true);
+    } else {
+      insertScriptGoogle(document, 'script', SCRIPT_ID, JS_SRC, function () {
+        _window.amazon.Login.setClientId(client_id);
+        setIsSdkLoaded(true);
+      });
+    }
+  }, [checkIsExistsSDKScript, client_id, insertScriptGoogle]);
+  var onLogin = useCallback(function () {
+    if (!isSdkLoaded) return;
+    if (!_window.amazon) {
+      load();
+      onReject("Google SDK isn't loaded!");
+    } else {
+      onLoginStart && onLoginStart();
+      _window.amazon.Login.authorize({
+        scope: scope,
+        scope_data: scope_data,
+        response_type: response_type,
+        redirect_uri: redirect_uri,
+        state: state
+      }, function (res) {
+        if (res.error) handleError(res.error);else handleResponse(res);
+      });
+    }
+  }, [load, scope, state, onReject, scope_data, isSdkLoaded, handleError, onLoginStart, redirect_uri, response_type, handleResponse]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    onClick: onLogin
+  }, children);
+};
+export default /*#__PURE__*/memo(LoginSocialAmazon);

package/esm/login-with/LoginSocialApple/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { objectType, IResolveParams } from "..";
+interface Props {
+    scope?: string;
+    client_id: string;
+    className?: string;
+    redirect_uri?: string;
+    children?: React.ReactNode;
+    onLoginStart?: () => void;
+    onReject: (reject: string | objectType) => void;
+    onResolve: ({ provider, data }: IResolveParams) => void;
+}
+declare const _default: React.MemoExoticComponent<({ client_id, scope, className, onLoginStart, onReject, onResolve, redirect_uri, children, }: Props) => JSX.Element>;
+export default _default;

package/esm/login-with/LoginSocialApple/index.js

@@ -0,0 +1,141 @@
+/* eslint-disable camelcase */
+/**
+ *
+ * LoginSocialGoogle
+ *
+ */
+"use client";
+
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+var JS_SRC = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
+var SCRIPT_ID = 'apple-login';
+var _window = global.window;
+var LoginSocialApple = function LoginSocialApple(_ref) {
+  var client_id = _ref.client_id,
+    _ref$scope = _ref.scope,
+    scope = _ref$scope === void 0 ? 'name email' : _ref$scope,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    onLoginStart = _ref.onLoginStart,
+    onReject = _ref.onReject,
+    onResolve = _ref.onResolve,
+    _ref$redirect_uri = _ref.redirect_uri,
+    redirect_uri = _ref$redirect_uri === void 0 ? '/' : _ref$redirect_uri,
+    children = _ref.children;
+  var scriptNodeRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSdkLoaded = _useState2[0],
+    setIsSdkLoaded = _useState2[1];
+  useEffect(function () {
+    !isSdkLoaded && load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSdkLoaded]);
+  useEffect(function () {
+    return function () {
+      if (scriptNodeRef.current) scriptNodeRef.current.remove();
+    };
+  }, []);
+  var checkIsExistsSDKScript = useCallback(function () {
+    return !!document.getElementById(SCRIPT_ID);
+  }, []);
+  var insertScript = useCallback(function (d) {
+    var s = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'script';
+    var id = arguments.length > 2 ? arguments[2] : undefined;
+    var jsSrc = arguments.length > 3 ? arguments[3] : undefined;
+    var cb = arguments.length > 4 ? arguments[4] : undefined;
+    var appleScriptTag = d.createElement(s);
+    appleScriptTag.id = id;
+    appleScriptTag.src = jsSrc;
+    appleScriptTag.async = true;
+    appleScriptTag.defer = true;
+    var scriptNode = document.getElementsByTagName('script')[0];
+    scriptNodeRef.current = appleScriptTag;
+    scriptNode && scriptNode.parentNode && scriptNode.parentNode.insertBefore(appleScriptTag, scriptNode);
+    appleScriptTag.onload = cb;
+  }, []);
+  var handleResponse = useCallback(function (res) {
+    if (res !== null && res !== void 0 && res.access_token) {
+      onResolve({
+        provider: 'apple',
+        data: res
+      });
+    } else {
+      var data = res;
+      onResolve({
+        provider: 'apple',
+        data: data
+      });
+    }
+  }, [onResolve]);
+  var load = useCallback(function () {
+    if (checkIsExistsSDKScript()) {
+      setIsSdkLoaded(true);
+    } else {
+      insertScript(document, 'script', SCRIPT_ID, JS_SRC, function () {
+        var options = {
+          clientId: client_id,
+          // This is the service ID we created.
+          scope: scope,
+          // To tell apple we want the user name and emails fields in the response it sends us.
+          redirectURI: redirect_uri,
+          // As registered along with our service ID
+          state: 'origin:web',
+          // Any string of your choice that you may use for some logic. It's optional and you may omit it.
+          usePopup: true // Important if we want to capture the data apple sends on the client side.
+        };
+        _window.AppleID.auth.init(options);
+        setIsSdkLoaded(true);
+      });
+    }
+  }, [scope, client_id, redirect_uri, insertScript, checkIsExistsSDKScript]);
+  var loginApple = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var response;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (isSdkLoaded) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          if (_window.AppleID) {
+            _context.next = 7;
+            break;
+          }
+          load();
+          onReject("Apple SDK isn't loaded!");
+          _context.next = 18;
+          break;
+        case 7:
+          onLoginStart && onLoginStart();
+          _context.prev = 8;
+          _context.next = 11;
+          return _window.AppleID.auth.signIn();
+        case 11:
+          response = _context.sent;
+          handleResponse(response);
+          _context.next = 18;
+          break;
+        case 15:
+          _context.prev = 15;
+          _context.t0 = _context["catch"](8);
+          onReject({
+            err: _context.t0
+          });
+        case 18:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[8, 15]]);
+  })), [handleResponse, isSdkLoaded, load, onLoginStart, onReject]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    onClick: loginApple
+  }, children);
+};
+export default /*#__PURE__*/memo(LoginSocialApple);

package/esm/login-with/LoginSocialFacebook/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { objectType, IResolveParams } from "..";
+interface Props {
+    appId: string;
+    scope?: string;
+    state?: boolean;
+    xfbml?: boolean;
+    cookie?: boolean;
+    version?: string;
+    language?: string;
+    auth_type?: string;
+    className?: string;
+    isDisabled?: boolean;
+    isOnlyGetToken?: boolean;
+    onLoginStart?: () => void;
+    onLogoutSuccess?: () => void;
+    onReject: (reject: string | objectType) => void;
+    onResolve: ({ provider, data }: IResolveParams) => void;
+    redirect_uri?: string;
+    fieldsProfile?: string;
+    response_type?: string;
+    return_scopes?: boolean;
+    children?: React.ReactNode;
+}
+declare const _default: React.MemoExoticComponent<({ appId, scope, state, xfbml, cookie, version, language, auth_type, className, onLoginStart, onReject, onResolve, redirect_uri, fieldsProfile, response_type, return_scopes, isOnlyGetToken, children, }: Props) => JSX.Element>;
+export default _default;

package/esm/login-with/LoginSocialFacebook/index.js

@@ -0,0 +1,148 @@
+/* eslint-disable camelcase */
+/**
+ *
+ * LoginSocialFacebook
+ *
+ */
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+var SDK_URL = 'https://connect.facebook.net/en_EN/sdk.js';
+var SCRIPT_ID = 'facebook-jssdk';
+var _window = global.window;
+var LoginSocialFacebook = function LoginSocialFacebook(_ref) {
+  var appId = _ref.appId,
+    _ref$scope = _ref.scope,
+    scope = _ref$scope === void 0 ? 'email,public_profile' : _ref$scope,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? true : _ref$state,
+    _ref$xfbml = _ref.xfbml,
+    xfbml = _ref$xfbml === void 0 ? true : _ref$xfbml,
+    _ref$cookie = _ref.cookie,
+    cookie = _ref$cookie === void 0 ? true : _ref$cookie,
+    _ref$version = _ref.version,
+    version = _ref$version === void 0 ? 'v2.7' : _ref$version,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'en_EN' : _ref$language,
+    _ref$auth_type = _ref.auth_type,
+    auth_type = _ref$auth_type === void 0 ? '' : _ref$auth_type,
+    className = _ref.className,
+    onLoginStart = _ref.onLoginStart,
+    onReject = _ref.onReject,
+    onResolve = _ref.onResolve,
+    redirect_uri = _ref.redirect_uri,
+    _ref$fieldsProfile = _ref.fieldsProfile,
+    fieldsProfile = _ref$fieldsProfile === void 0 ? 'id,first_name,last_name,middle_name,name,name_format,picture,short_name,email,gender' : _ref$fieldsProfile,
+    _ref$response_type = _ref.response_type,
+    response_type = _ref$response_type === void 0 ? 'code' : _ref$response_type,
+    _ref$return_scopes = _ref.return_scopes,
+    return_scopes = _ref$return_scopes === void 0 ? true : _ref$return_scopes,
+    _ref$isOnlyGetToken = _ref.isOnlyGetToken,
+    isOnlyGetToken = _ref$isOnlyGetToken === void 0 ? false : _ref$isOnlyGetToken,
+    children = _ref.children;
+  var scriptNodeRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSdkLoaded = _useState2[0],
+    setIsSdkLoaded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isProcessing = _useState4[0],
+    setIsProcessing = _useState4[1];
+  useEffect(function () {
+    !isSdkLoaded && load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSdkLoaded]);
+  useEffect(function () {
+    return function () {
+      if (scriptNodeRef.current) scriptNodeRef.current.remove();
+    };
+  }, []);
+  var insertSDKScript = useCallback(function (document, cb) {
+    var fbScriptTag = document.createElement('script');
+    fbScriptTag.id = SCRIPT_ID;
+    fbScriptTag.src = SDK_URL;
+    var scriptNode = document.getElementsByTagName('script')[0];
+    scriptNode && scriptNode.parentNode && scriptNode.parentNode.insertBefore(fbScriptTag, scriptNode);
+    cb();
+  }, []);
+  var checkIsExistsSDKScript = useCallback(function () {
+    return !!document.getElementById(SCRIPT_ID);
+  }, []);
+  var initFbSDK = useCallback(function (config, document) {
+    var _window = window;
+    _window.fbAsyncInit = function () {
+      _window.FB && _window.FB.init(_extends({}, config));
+      setIsSdkLoaded(true);
+      var fbRoot = document.getElementById('fb-root');
+      if (!fbRoot) {
+        fbRoot = document.createElement('div');
+        fbRoot.id = 'fb-root';
+        document.body.appendChild(fbRoot);
+      }
+      scriptNodeRef.current = fbRoot;
+    };
+  }, []);
+  var getMe = useCallback(function (authResponse) {
+    _window.FB.api('/me', {
+      locale: language,
+      fields: fieldsProfile
+    }, function (me) {
+      onResolve({
+        provider: 'facebook',
+        data: _extends({}, authResponse, me)
+      });
+    });
+  }, [fieldsProfile, language, onResolve]);
+  var handleResponse = useCallback(function (response) {
+    if (response.authResponse) {
+      if (isOnlyGetToken) onResolve({
+        provider: 'facebook',
+        data: _extends({}, response.authResponse)
+      });else getMe(response.authResponse);
+    } else {
+      onReject(response);
+    }
+    setIsProcessing(false);
+  }, [getMe, isOnlyGetToken, onReject, onResolve]);
+  var load = useCallback(function () {
+    if (checkIsExistsSDKScript()) {
+      setIsSdkLoaded(true);
+    } else {
+      insertSDKScript(document, function () {
+        initFbSDK({
+          appId: appId,
+          xfbml: xfbml,
+          version: version,
+          state: state,
+          cookie: cookie,
+          redirect_uri: redirect_uri,
+          response_type: response_type
+        }, document);
+      });
+    }
+  }, [state, appId, xfbml, cookie, version, initFbSDK, redirect_uri, response_type, insertSDKScript, checkIsExistsSDKScript]);
+  var loginFB = useCallback(function () {
+    if (!isSdkLoaded || isProcessing) return;
+    if (!_window.FB) {
+      load();
+      onReject("Fb isn't loaded!");
+      setIsProcessing(false);
+    } else {
+      setIsProcessing(true);
+      onLoginStart && onLoginStart();
+      _window.FB.login(handleResponse, {
+        scope: scope,
+        return_scopes: return_scopes,
+        auth_type: auth_type
+      });
+    }
+  }, [load, scope, onReject, auth_type, isSdkLoaded, onLoginStart, isProcessing, return_scopes, handleResponse]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    onClick: loginFB
+  }, children);
+};
+export default /*#__PURE__*/memo(LoginSocialFacebook);