@dynamic-labs/sdk-react-core 0.16.0 → 0.16.2

package/src/lib/components/Toolkit/components/BrandStyleSwitch.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var ThemeContext = require('../../../context/ThemeContext/ThemeContext.cjs');
+var Switch = require('../../Switch/Switch.cjs');
+
+const BrandStyleSwitch = () => {
+    const { changeBrandStyle, theme } = ThemeContext.useThemeContext();
+    return (jsxRuntime.jsx(Switch.Switch, { firstButton: {
+            active: theme.brandStyle === 'bold',
+            handleButtonClick: () => changeBrandStyle('bold'),
+            name: 'Bold',
+        }, secondButton: {
+            active: theme.brandStyle === 'subtle',
+            handleButtonClick: () => changeBrandStyle('subtle'),
+            name: 'Subtle',
+        } }));
+};
+
+exports.BrandStyleSwitch = BrandStyleSwitch;

package/src/lib/components/Toolkit/components/BrandStyleSwitch.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { useThemeContext } from '../../../context/ThemeContext/ThemeContext.js';
+import { Switch } from '../../Switch/Switch.js';
+
+const BrandStyleSwitch = () => {
+    const { changeBrandStyle, theme } = useThemeContext();
+    return (jsx(Switch, { firstButton: {
+            active: theme.brandStyle === 'bold',
+            handleButtonClick: () => changeBrandStyle('bold'),
+            name: 'Bold',
+        }, secondButton: {
+            active: theme.brandStyle === 'subtle',
+            handleButtonClick: () => changeBrandStyle('subtle'),
+            name: 'Subtle',
+        } }));
+};
+
+export { BrandStyleSwitch };

package/src/lib/components/Toolkit/components/LoginWithEmailSwitch.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var Switch = require('../../Switch/Switch.cjs');
+
+const LoginWithEmailSwitch = () => {
+    const { loginWithEmail, setLogInWithEmail } = useInternalDynamicContext.useInternalDynamicContext();
+    return (jsxRuntime.jsx(Switch.Switch, { firstButton: {
+            active: loginWithEmail,
+            handleButtonClick: () => setLogInWithEmail(true),
+            name: 'True',
+        }, secondButton: {
+            active: !loginWithEmail,
+            handleButtonClick: () => setLogInWithEmail(false),
+            name: 'False',
+        } }));
+};
+
+exports.LoginWithEmailSwitch = LoginWithEmailSwitch;

package/src/lib/components/Toolkit/components/LoginWithEmailSwitch.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { Switch } from '../../Switch/Switch.js';
+
+const LoginWithEmailSwitch = () => {
+    const { loginWithEmail, setLogInWithEmail } = useInternalDynamicContext();
+    return (jsx(Switch, { firstButton: {
+            active: loginWithEmail,
+            handleButtonClick: () => setLogInWithEmail(true),
+            name: 'True',
+        }, secondButton: {
+            active: !loginWithEmail,
+            handleButtonClick: () => setLogInWithEmail(false),
+            name: 'False',
+        } }));
+};
+
+export { LoginWithEmailSwitch };

package/src/lib/components/Toolkit/components/LoginWithEmailViewDisplayPriorityOrderSwitch.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('react');
+var isDisplayOrderPriorityForWeb3 = require('../../../shared/utils/functions/isDisplayOrderPriorityForWeb3/isDisplayOrderPriorityForWeb3.cjs');
+var isDisplayOrderPriorityForWeb2 = require('../../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.cjs');
+require('../../../utils/constants/colors.cjs');
+require('../../../shared/consts/index.cjs');
+var Switch = require('../../Switch/Switch.cjs');
+
+const LoginWithEmailViewDisplayPriorityOrderSwitch = () => {
+    const { authorizationViewDisplayOrder, setAuthorizationViewDisplayOrder, loginWithEmail, } = useInternalDynamicContext.useInternalDynamicContext();
+    return (jsxRuntime.jsx(Switch.Switch, { disabled: !loginWithEmail, firstButton: {
+            active: isDisplayOrderPriorityForWeb2.isDisplayOrderPriorityForWeb2(authorizationViewDisplayOrder),
+            handleButtonClick: () => setAuthorizationViewDisplayOrder('web2'),
+            name: 'Email',
+        }, secondButton: {
+            active: isDisplayOrderPriorityForWeb3.isDisplayOrderPriorityForWeb3(authorizationViewDisplayOrder),
+            handleButtonClick: () => setAuthorizationViewDisplayOrder('web3'),
+            name: 'Wallet',
+        } }));
+};
+
+exports.LoginWithEmailViewDisplayPriorityOrderSwitch = LoginWithEmailViewDisplayPriorityOrderSwitch;

package/src/lib/components/Toolkit/components/LoginWithEmailViewDisplayPriorityOrderSwitch.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../context/ViewContext/ViewContext.js';
+import 'react';
+import { isDisplayOrderPriorityForWeb3 } from '../../../shared/utils/functions/isDisplayOrderPriorityForWeb3/isDisplayOrderPriorityForWeb3.js';
+import { isDisplayOrderPriorityForWeb2 } from '../../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.js';
+import '../../../utils/constants/colors.js';
+import '../../../shared/consts/index.js';
+import { Switch } from '../../Switch/Switch.js';
+
+const LoginWithEmailViewDisplayPriorityOrderSwitch = () => {
+    const { authorizationViewDisplayOrder, setAuthorizationViewDisplayOrder, loginWithEmail, } = useInternalDynamicContext();
+    return (jsx(Switch, { disabled: !loginWithEmail, firstButton: {
+            active: isDisplayOrderPriorityForWeb2(authorizationViewDisplayOrder),
+            handleButtonClick: () => setAuthorizationViewDisplayOrder('web2'),
+            name: 'Email',
+        }, secondButton: {
+            active: isDisplayOrderPriorityForWeb3(authorizationViewDisplayOrder),
+            handleButtonClick: () => setAuthorizationViewDisplayOrder('web3'),
+            name: 'Wallet',
+        } }));
+};
+
+export { LoginWithEmailViewDisplayPriorityOrderSwitch };

package/src/lib/components/Toolkit/components/PrimaryColorInput.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ThemeContext = require('../../../context/ThemeContext/ThemeContext.cjs');
+var Input = require('../../Input/Input.cjs');
+
+const PrimaryColorInput = () => {
+    const { changePrimaryColor, theme } = ThemeContext.useThemeContext();
+    const [color, setColor] = React.useState(theme.customColor);
+    return (jsxRuntime.jsx(Input.Input, { id: 'primary-color', label: 'Primary color', value: color, onChange: (e) => setColor(e.target.value), onBlur: (e) => {
+            const newColor = color || theme.customColor;
+            setColor(newColor);
+            changePrimaryColor(newColor);
+        } }));
+};
+
+exports.PrimaryColorInput = PrimaryColorInput;

package/src/lib/components/Toolkit/components/PrimaryColorInput.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useThemeContext } from '../../../context/ThemeContext/ThemeContext.js';
+import { Input } from '../../Input/Input.js';
+
+const PrimaryColorInput = () => {
+    const { changePrimaryColor, theme } = useThemeContext();
+    const [color, setColor] = useState(theme.customColor);
+    return (jsx(Input, { id: 'primary-color', label: 'Primary color', value: color, onChange: (e) => setColor(e.target.value), onBlur: (e) => {
+            const newColor = color || theme.customColor;
+            setColor(newColor);
+            changePrimaryColor(newColor);
+        } }));
+};
+
+export { PrimaryColorInput };

package/src/lib/components/Toolkit/components/TemplateSelect.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var ThemeContext = require('../../../context/ThemeContext/ThemeContext.cjs');
+var Select = require('../../Select/Select.cjs');
+
+const TemplateSelect = () => {
+    const { theme, changeTemplate } = ThemeContext.useThemeContext();
+    const handleChange = (e) => {
+        changeTemplate(e.target.value);
+    };
+    return (jsxRuntime.jsxs(Select.Select, Object.assign({ label: 'template', value: theme.template, onChange: handleChange, selectDataTestId: 'template-select' }, { children: [jsxRuntime.jsx("option", Object.assign({ value: 'default' }, { children: "Default" })), jsxRuntime.jsx("option", Object.assign({ value: 'matrix' }, { children: "Matrix" })), jsxRuntime.jsx("option", Object.assign({ value: 'minimal' }, { children: "Minimal" })), jsxRuntime.jsx("option", Object.assign({ value: 'rounded' }, { children: "Rounded" })), jsxRuntime.jsx("option", Object.assign({ value: 'trinity' }, { children: "Trinity" }))] })));
+};
+
+exports.TemplateSelect = TemplateSelect;

package/src/lib/components/Toolkit/components/TemplateSelect.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useThemeContext } from '../../../context/ThemeContext/ThemeContext.js';
+import { Select } from '../../Select/Select.js';
+
+const TemplateSelect = () => {
+    const { theme, changeTemplate } = useThemeContext();
+    const handleChange = (e) => {
+        changeTemplate(e.target.value);
+    };
+    return (jsxs(Select, Object.assign({ label: 'template', value: theme.template, onChange: handleChange, selectDataTestId: 'template-select' }, { children: [jsx("option", Object.assign({ value: 'default' }, { children: "Default" })), jsx("option", Object.assign({ value: 'matrix' }, { children: "Matrix" })), jsx("option", Object.assign({ value: 'minimal' }, { children: "Minimal" })), jsx("option", Object.assign({ value: 'rounded' }, { children: "Rounded" })), jsx("option", Object.assign({ value: 'trinity' }, { children: "Trinity" }))] })));
+};
+
+export { TemplateSelect };

package/src/lib/components/Toolkit/components/ThemeSwitch.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var ThemeContext = require('../../../context/ThemeContext/ThemeContext.cjs');
+var Switch = require('../../Switch/Switch.cjs');
+
+const ThemeSwitch = () => {
+    const { changeTheme, theme } = ThemeContext.useThemeContext();
+    return (jsxRuntime.jsx(Switch.Switch, { firstButton: {
+            active: theme.theme.name === 'light',
+            handleButtonClick: () => changeTheme('light'),
+            name: 'Light',
+        }, secondButton: {
+            active: theme.theme.name === 'dark',
+            handleButtonClick: () => changeTheme('dark'),
+            name: 'Dark',
+        }, thirdButton: {
+            active: theme.theme.name === 'auto',
+            handleButtonClick: () => changeTheme('auto'),
+            name: 'Auto',
+        } }));
+};
+
+exports.ThemeSwitch = ThemeSwitch;

package/src/lib/components/Toolkit/components/ThemeSwitch.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useThemeContext } from '../../../context/ThemeContext/ThemeContext.js';
+import { Switch } from '../../Switch/Switch.js';
+
+const ThemeSwitch = () => {
+    const { changeTheme, theme } = useThemeContext();
+    return (jsx(Switch, { firstButton: {
+            active: theme.theme.name === 'light',
+            handleButtonClick: () => changeTheme('light'),
+            name: 'Light',
+        }, secondButton: {
+            active: theme.theme.name === 'dark',
+            handleButtonClick: () => changeTheme('dark'),
+            name: 'Dark',
+        }, thirdButton: {
+            active: theme.theme.name === 'auto',
+            handleButtonClick: () => changeTheme('auto'),
+            name: 'Auto',
+        } }));
+};
+
+export { ThemeSwitch };

package/src/lib/components/Tooltip/Tooltip.cjs

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs');
+var tooltipArrow = require('../../shared/assets/tooltip-arrow.cjs');
+var debounce = require('../../shared/utils/functions/debounce/debounce.cjs');
+require('../../utils/constants/colors.cjs');
+var index = require('../../shared/consts/index.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+require('../../config/ApiEndpoint.cjs');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs');
+var usePrevious = require('../../utils/hooks/usePrevious/usePrevious.cjs');
+var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('react-focus-lock');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+var useHover = require('../../utils/hooks/useHover/useHover.cjs');
+require('../IconButton/IconButton.cjs');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+
+const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
+    const portalRoot = useElementById.useElementById('dynamic-tooltips');
+    const [childrenHover, childrenHoverHandlers] = useHover.useHover(false, true);
+    const [hoversTooltip, setHoversTooltip] = React.useState(false);
+    const previousHovers = usePrevious.usePrevious(childrenHover);
+    const [vector, setVector] = React.useState([0, 0]);
+    const childrenRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    const [visible, setVisible] = React.useState(false);
+    const calcPosition = React.useCallback(() => {
+        if (childrenRef.current) {
+            const childrenBounding = childrenRef.current.getBoundingClientRect();
+            setVector([
+                childrenBounding.left + childrenBounding.width / 2,
+                childrenBounding.top,
+            ]);
+        }
+    }, []);
+    // Calculates position, and set visibles to true when client hovers children
+    React.useEffect(() => {
+        if (childrenHover || (hoversTooltip && previousHovers)) {
+            calcPosition();
+            setVisible(true);
+        }
+        else {
+            setVisible(false);
+        }
+    }, [calcPosition, childrenHover, hoversTooltip, previousHovers]);
+    // Updates top/left on initial render, and when window resizes
+    React.useEffect(() => {
+        calcPosition();
+        const resizeListener = debounce.debounce(() => {
+            calcPosition();
+        }, 3);
+        window.addEventListener('resize', resizeListener);
+        return () => {
+            window.removeEventListener('resize', resizeListener);
+        };
+    }, [calcPosition]);
+    React.useEffect(() => {
+        const tooltip = tooltipRef.current;
+        const onMouseEnter = () => {
+            setHoversTooltip(true);
+        };
+        const onMouseLeave = () => {
+            setHoversTooltip(false);
+        };
+        tooltip === null || tooltip === void 0 ? void 0 : tooltip.addEventListener('mouseenter', onMouseEnter);
+        tooltip === null || tooltip === void 0 ? void 0 : tooltip.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            tooltip === null || tooltip === void 0 ? void 0 : tooltip.removeEventListener('mouseover', onMouseEnter);
+            tooltip === null || tooltip === void 0 ? void 0 : tooltip.removeEventListener('mouseleave', onMouseLeave);
+        };
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [reactDom.createPortal(jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ zIndex: index.tooltipZIndex }, { children: jsxRuntime.jsxs("div", Object.assign({ "data-testid": 'dynamicTooltip', className: classNames.classNames('dynamic-tooltip', {
+                        'dynamic-tooltip--visible': visible,
+                    }, className), style: { left: vector[0], top: vector[1] }, ref: tooltipRef }, { children: [content, jsxRuntime.jsx(tooltipArrow.ReactComponent, { className: 'dynamic-tooltip__arrow' })] })) })), portalRoot.current), jsxRuntime.jsx(Tag, Object.assign({ ref: childrenRef }, childrenHoverHandlers, { children: children }))] }));
+};
+
+exports.Tooltip = Tooltip;

package/src/lib/components/Tooltip/Tooltip.js

@@ -0,0 +1,91 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgTooltipArrow } from '../../shared/assets/tooltip-arrow.js';
+import { debounce } from '../../shared/utils/functions/debounce/debounce.js';
+import '../../utils/constants/colors.js';
+import { tooltipZIndex } from '../../shared/consts/index.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import '../../config/ApiEndpoint.js';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
+import { usePrevious } from '../../utils/hooks/usePrevious/usePrevious.js';
+import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import 'react-focus-lock';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import { useHover } from '../../utils/hooks/useHover/useHover.js';
+import '../IconButton/IconButton.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+
+const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
+    const portalRoot = useElementById('dynamic-tooltips');
+    const [childrenHover, childrenHoverHandlers] = useHover(false, true);
+    const [hoversTooltip, setHoversTooltip] = useState(false);
+    const previousHovers = usePrevious(childrenHover);
+    const [vector, setVector] = useState([0, 0]);
+    const childrenRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const calcPosition = useCallback(() => {
+        if (childrenRef.current) {
+            const childrenBounding = childrenRef.current.getBoundingClientRect();
+            setVector([
+                childrenBounding.left + childrenBounding.width / 2,
+                childrenBounding.top,
+            ]);
+        }
+    }, []);
+    // Calculates position, and set visibles to true when client hovers children
+    useEffect(() => {
+        if (childrenHover || (hoversTooltip && previousHovers)) {
+            calcPosition();
+            setVisible(true);
+        }
+        else {
+            setVisible(false);
+        }
+    }, [calcPosition, childrenHover, hoversTooltip, previousHovers]);
+    // Updates top/left on initial render, and when window resizes
+    useEffect(() => {
+        calcPosition();
+        const resizeListener = debounce(() => {
+            calcPosition();
+        }, 3);
+        window.addEventListener('resize', resizeListener);
+        return () => {
+            window.removeEventListener('resize', resizeListener);
+        };
+    }, [calcPosition]);
+    useEffect(() => {
+        const tooltip = tooltipRef.current;
+        const onMouseEnter = () => {
+            setHoversTooltip(true);
+        };
+        const onMouseLeave = () => {
+            setHoversTooltip(false);
+        };
+        tooltip === null || tooltip === void 0 ? void 0 : tooltip.addEventListener('mouseenter', onMouseEnter);
+        tooltip === null || tooltip === void 0 ? void 0 : tooltip.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            tooltip === null || tooltip === void 0 ? void 0 : tooltip.removeEventListener('mouseover', onMouseEnter);
+            tooltip === null || tooltip === void 0 ? void 0 : tooltip.removeEventListener('mouseleave', onMouseLeave);
+        };
+    });
+    return (jsxs(Fragment, { children: [createPortal(jsx(ShadowDOM, Object.assign({ zIndex: tooltipZIndex }, { children: jsxs("div", Object.assign({ "data-testid": 'dynamicTooltip', className: classNames('dynamic-tooltip', {
+                        'dynamic-tooltip--visible': visible,
+                    }, className), style: { left: vector[0], top: vector[1] }, ref: tooltipRef }, { children: [content, jsx(SvgTooltipArrow, { className: 'dynamic-tooltip__arrow' })] })) })), portalRoot.current), jsx(Tag, Object.assign({ ref: childrenRef }, childrenHoverHandlers, { children: children }))] }));
+};
+
+export { Tooltip };

package/src/lib/components/TosAndPp/TosAndPp.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../Typography/Typography.cjs');
+
+const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, mode, }) => {
+    if (!privacyPolicyUrl || !termsOfServiceUrl) {
+        return null;
+    }
+    return (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_mini', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", mode, ", you agree to our\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Services" })), "\u00A0&\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
+};
+
+exports.TosAndPp = TosAndPp;

package/src/lib/components/TosAndPp/TosAndPp.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
+
+const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, mode, }) => {
+    if (!privacyPolicyUrl || !termsOfServiceUrl) {
+        return null;
+    }
+    return (jsxs(Typography, Object.assign({ variant: 'body_mini', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", mode, ", you agree to our\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Services" })), "\u00A0&\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
+};
+
+export { TosAndPp };

package/src/lib/components/Transition/OpacityTransition/OpacityTransition.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useTransition = require('../../../utils/hooks/useTransition/useTransition.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const getOpacityTransitionDefaultStyles = (duration) => ({
+    transition: `opacity ${duration}ms linear`,
+});
+const transitionStyles = {
+    ENTERED: {
+        opacity: 1,
+    },
+    ENTERING: {
+        opacity: 0,
+    },
+    EXITING: {
+        opacity: 0,
+    },
+    UNMOUNT: {
+        opacity: 0,
+    },
+};
+const UnoptimizedOpacityTransition = (_a) => {
+    var { children, style } = _a, transitionProps = _tslib.__rest(_a, ["children", "style"]);
+    const { mount, stage, currentDuration } = useTransition.useTransition(transitionProps);
+    const defaultStyles = getOpacityTransitionDefaultStyles(currentDuration);
+    const stageStyles = transitionStyles[stage];
+    if (!mount)
+        return null;
+    return (jsxRuntime.jsx("div", Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaultStyles), stageStyles), style) }, { children: children })));
+};
+const OpacityTransition = React__default["default"].memo(UnoptimizedOpacityTransition);
+
+exports.OpacityTransition = OpacityTransition;
+exports.UnoptimizedOpacityTransition = UnoptimizedOpacityTransition;

package/src/lib/components/Transition/OpacityTransition/OpacityTransition.js

@@ -0,0 +1,34 @@
+import { __rest } from '../../../../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useTransition } from '../../../utils/hooks/useTransition/useTransition.js';
+
+const getOpacityTransitionDefaultStyles = (duration) => ({
+    transition: `opacity ${duration}ms linear`,
+});
+const transitionStyles = {
+    ENTERED: {
+        opacity: 1,
+    },
+    ENTERING: {
+        opacity: 0,
+    },
+    EXITING: {
+        opacity: 0,
+    },
+    UNMOUNT: {
+        opacity: 0,
+    },
+};
+const UnoptimizedOpacityTransition = (_a) => {
+    var { children, style } = _a, transitionProps = __rest(_a, ["children", "style"]);
+    const { mount, stage, currentDuration } = useTransition(transitionProps);
+    const defaultStyles = getOpacityTransitionDefaultStyles(currentDuration);
+    const stageStyles = transitionStyles[stage];
+    if (!mount)
+        return null;
+    return (jsx("div", Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaultStyles), stageStyles), style) }, { children: children })));
+};
+const OpacityTransition = React__default.memo(UnoptimizedOpacityTransition);
+
+export { OpacityTransition, UnoptimizedOpacityTransition };

package/src/lib/components/Transition/SlideInUpTransition/SlideInUpTransition.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useTransition = require('../../../utils/hooks/useTransition/useTransition.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const getSlideInUpTransitionDefaultStyles = (duration, curve = 'linear') => ({
+    transition: `transform ${duration}ms ${curve}, opacity ${duration}ms ${curve}`,
+});
+const transitionStyles = {
+    ENTERED: {
+        transform: 'translateY(0)',
+    },
+    ENTERING: {
+        transform: 'translateY(0.625rem)',
+    },
+    EXITING: {
+        transform: 'translateY(0.625rem)',
+    },
+};
+const UnoptimizedSlideInUpTransition = (_a) => {
+    var { children } = _a, transitionProps = _tslib.__rest(_a, ["children"]);
+    const { mount, stage, currentDuration } = useTransition.useTransition(transitionProps);
+    const defaultStyles = getSlideInUpTransitionDefaultStyles(currentDuration);
+    const stageStyles = transitionStyles[stage];
+    if (!mount)
+        return null;
+    return jsxRuntime.jsx("div", Object.assign({ style: Object.assign(Object.assign({}, defaultStyles), stageStyles) }, { children: children }));
+};
+const SlideInUpTransition = React__default["default"].memo(UnoptimizedSlideInUpTransition);
+
+exports.SlideInUpTransition = SlideInUpTransition;
+exports.UnoptimizedSlideInUpTransition = UnoptimizedSlideInUpTransition;

package/src/lib/components/Transition/SlideInUpTransition/SlideInUpTransition.js

@@ -0,0 +1,31 @@
+import { __rest } from '../../../../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useTransition } from '../../../utils/hooks/useTransition/useTransition.js';
+
+const getSlideInUpTransitionDefaultStyles = (duration, curve = 'linear') => ({
+    transition: `transform ${duration}ms ${curve}, opacity ${duration}ms ${curve}`,
+});
+const transitionStyles = {
+    ENTERED: {
+        transform: 'translateY(0)',
+    },
+    ENTERING: {
+        transform: 'translateY(0.625rem)',
+    },
+    EXITING: {
+        transform: 'translateY(0.625rem)',
+    },
+};
+const UnoptimizedSlideInUpTransition = (_a) => {
+    var { children } = _a, transitionProps = __rest(_a, ["children"]);
+    const { mount, stage, currentDuration } = useTransition(transitionProps);
+    const defaultStyles = getSlideInUpTransitionDefaultStyles(currentDuration);
+    const stageStyles = transitionStyles[stage];
+    if (!mount)
+        return null;
+    return jsx("div", Object.assign({ style: Object.assign(Object.assign({}, defaultStyles), stageStyles) }, { children: children }));
+};
+const SlideInUpTransition = React__default.memo(UnoptimizedSlideInUpTransition);
+
+export { SlideInUpTransition, UnoptimizedSlideInUpTransition };