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

package/src/lib/components/Accordion/components/AccordionItem/AccordionItem.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+var useResizeObserver = require('../../../../utils/hooks/useResizeObserver/useResizeObserver.cjs');
+require('react-dom');
+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');
+require('../../../IconButton/IconButton.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+
+const AccordionItem = ({ children, className = '', isOpen, dataTestId, }) => {
+    const childRef = React.useRef(null);
+    const lastValidChildHeight = React.useRef();
+    const [childEntry] = useResizeObserver.useResizeObserver(childRef);
+    const maxHeight = React.useMemo(() => {
+        if (!isOpen)
+            return 0;
+        if (!childEntry)
+            return lastValidChildHeight.current;
+        return childEntry.height;
+    }, [isOpen, childEntry]);
+    React.useEffect(() => {
+        const childHeight = childEntry === null || childEntry === void 0 ? void 0 : childEntry.height;
+        if (childHeight) {
+            lastValidChildHeight.current = childHeight;
+        }
+    }, [childEntry]);
+    return (jsxRuntime.jsx("div", Object.assign({ "data-testid": dataTestId, style: { maxHeight }, className: classNames.classNames(className, 'accordion-item', {
+            'accordion-item--full-height': Boolean(maxHeight),
+        }) }, { children: jsxRuntime.jsx("div", Object.assign({ ref: childRef }, { children: children })) })));
+};
+
+exports.AccordionItem = AccordionItem;

package/src/lib/components/Accordion/components/AccordionItem/AccordionItem.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/consts/index.js';
+import '../../../../context/DynamicContext/DynamicContext.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import { useResizeObserver } from '../../../../utils/hooks/useResizeObserver/useResizeObserver.js';
+import 'react-dom';
+import '../../../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 '../../../IconButton/IconButton.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+
+const AccordionItem = ({ children, className = '', isOpen, dataTestId, }) => {
+    const childRef = useRef(null);
+    const lastValidChildHeight = useRef();
+    const [childEntry] = useResizeObserver(childRef);
+    const maxHeight = useMemo(() => {
+        if (!isOpen)
+            return 0;
+        if (!childEntry)
+            return lastValidChildHeight.current;
+        return childEntry.height;
+    }, [isOpen, childEntry]);
+    useEffect(() => {
+        const childHeight = childEntry === null || childEntry === void 0 ? void 0 : childEntry.height;
+        if (childHeight) {
+            lastValidChildHeight.current = childHeight;
+        }
+    }, [childEntry]);
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, style: { maxHeight }, className: classNames(className, 'accordion-item', {
+            'accordion-item--full-height': Boolean(maxHeight),
+        }) }, { children: jsx("div", Object.assign({ ref: childRef }, { children: children })) })));
+};
+
+export { AccordionItem };

package/src/lib/components/Accordion/components/VerticalAccordion/VerticalAccordion.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+
+const VerticalAccordion = ({ children, className = '', }) => (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames(className, 'vertical-accordion__container') }, { children: children })));
+
+exports.VerticalAccordion = VerticalAccordion;

package/src/lib/components/Accordion/components/VerticalAccordion/VerticalAccordion.js

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+
+const VerticalAccordion = ({ children, className = '', }) => (jsx("div", Object.assign({ className: classNames(className, 'vertical-accordion__container') }, { children: children })));
+
+export { VerticalAccordion };

package/src/lib/components/AnimatePresence/AnimatePresence.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../config/ApiEndpoint.cjs');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+require('../../context/ViewContext/ViewContext.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+var usePrevious = require('../../utils/hooks/usePrevious/usePrevious.cjs');
+require('react-dom');
+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');
+require('../IconButton/IconButton.cjs');
+require('ethers');
+var useForceUpdate = require('../../utils/hooks/useForceUpdate/useForceUpdate.cjs');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+
+const AnimatePresence = ({ children, animationComponent, }) => {
+    const [isPresent, setIsPresent] = React.useState(true);
+    const forceRerender = useForceUpdate.useForceUpdate();
+    const childrenRef = React.useRef(null);
+    const isChildrenPresent = React.useMemo(() => Boolean(children), [children]);
+    const prevIsChildrenPresent = usePrevious.usePrevious(isChildrenPresent);
+    const onAnimationEnd = React.useCallback(() => {
+        childrenRef.current = null;
+        forceRerender();
+    }, [forceRerender]);
+    React.useEffect(() => {
+        if (React.isValidElement(children)) {
+            childrenRef.current = React.Children.map(children, (child) => React.cloneElement(child));
+        }
+    }, [children]);
+    React.useEffect(() => {
+        if (isChildrenPresent && !prevIsChildrenPresent) {
+            setIsPresent(true);
+        }
+        if (prevIsChildrenPresent && !isChildrenPresent) {
+            setIsPresent(false);
+        }
+    }, [isChildrenPresent, prevIsChildrenPresent]);
+    return React.cloneElement(animationComponent, {
+        children: children || childrenRef.current,
+        isPresent,
+        onAnimationEnd,
+    });
+};
+
+exports.AnimatePresence = AnimatePresence;

package/src/lib/components/AnimatePresence/AnimatePresence.js

@@ -0,0 +1,58 @@
+import { useState, useRef, useMemo, useCallback, useEffect, isValidElement, Children, cloneElement } from 'react';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../config/ApiEndpoint.js';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import '../../context/ViewContext/ViewContext.js';
+import '../../utils/constants/colors.js';
+import '../../shared/consts/index.js';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import { usePrevious } from '../../utils/hooks/usePrevious/usePrevious.js';
+import 'react-dom';
+import '../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 '../IconButton/IconButton.js';
+import 'ethers';
+import { useForceUpdate } from '../../utils/hooks/useForceUpdate/useForceUpdate.js';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+
+const AnimatePresence = ({ children, animationComponent, }) => {
+    const [isPresent, setIsPresent] = useState(true);
+    const forceRerender = useForceUpdate();
+    const childrenRef = useRef(null);
+    const isChildrenPresent = useMemo(() => Boolean(children), [children]);
+    const prevIsChildrenPresent = usePrevious(isChildrenPresent);
+    const onAnimationEnd = useCallback(() => {
+        childrenRef.current = null;
+        forceRerender();
+    }, [forceRerender]);
+    useEffect(() => {
+        if (isValidElement(children)) {
+            childrenRef.current = Children.map(children, (child) => cloneElement(child));
+        }
+    }, [children]);
+    useEffect(() => {
+        if (isChildrenPresent && !prevIsChildrenPresent) {
+            setIsPresent(true);
+        }
+        if (prevIsChildrenPresent && !isChildrenPresent) {
+            setIsPresent(false);
+        }
+    }, [isChildrenPresent, prevIsChildrenPresent]);
+    return cloneElement(animationComponent, {
+        children: children || childrenRef.current,
+        isPresent,
+        onAnimationEnd,
+    });
+};
+
+export { AnimatePresence };

package/src/lib/components/AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+var useResizeObserver = require('../../../../utils/hooks/useResizeObserver/useResizeObserver.cjs');
+var useTransition = require('../../../../utils/hooks/useTransition/useTransition.cjs');
+require('react-dom');
+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');
+require('../../../IconButton/IconButton.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+
+const IN_DURATION = 150;
+const OUT_DURATION = 150;
+const VerticalDrawerAnimation = ({ isPresent, onAnimationEnd, children, inDuration = IN_DURATION, outDuration = OUT_DURATION, style, }) => {
+    const containerRef = React.useRef(null);
+    const childRef = React.useRef(null);
+    const [childEntry] = useResizeObserver.useResizeObserver(childRef);
+    const containerChildHeight = React.useMemo(() => childEntry === null || childEntry === void 0 ? void 0 : childEntry.height, [childEntry]);
+    const { mount, stage, currentDuration } = useTransition.useTransition({
+        animateOnMount: false,
+        inDuration,
+        isShown: isPresent,
+        onUnmount: onAnimationEnd,
+        outDuration,
+    });
+    const maxHeight = React.useMemo(() => {
+        if (!mount || stage === 'EXITING' || stage === 'UNMOUNT') {
+            return 0;
+        }
+        return containerChildHeight;
+    }, [stage, containerChildHeight, mount]);
+    return (jsxRuntime.jsx("div", Object.assign({ ref: containerRef, className: 'vertical-drawer-animation', style: Object.assign(Object.assign({}, style), { maxHeight, transitionDuration: `${currentDuration}ms` }) }, { children: jsxRuntime.jsx("div", Object.assign({ ref: childRef }, { children: mount && children })) })));
+};
+
+exports.IN_DURATION = IN_DURATION;
+exports.OUT_DURATION = OUT_DURATION;
+exports.VerticalDrawerAnimation = VerticalDrawerAnimation;

package/src/lib/components/AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.js

@@ -0,0 +1,51 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo } from 'react';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/consts/index.js';
+import '../../../../context/DynamicContext/DynamicContext.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import { useResizeObserver } from '../../../../utils/hooks/useResizeObserver/useResizeObserver.js';
+import { useTransition } from '../../../../utils/hooks/useTransition/useTransition.js';
+import 'react-dom';
+import '../../../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 '../../../IconButton/IconButton.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+
+const IN_DURATION = 150;
+const OUT_DURATION = 150;
+const VerticalDrawerAnimation = ({ isPresent, onAnimationEnd, children, inDuration = IN_DURATION, outDuration = OUT_DURATION, style, }) => {
+    const containerRef = useRef(null);
+    const childRef = useRef(null);
+    const [childEntry] = useResizeObserver(childRef);
+    const containerChildHeight = useMemo(() => childEntry === null || childEntry === void 0 ? void 0 : childEntry.height, [childEntry]);
+    const { mount, stage, currentDuration } = useTransition({
+        animateOnMount: false,
+        inDuration,
+        isShown: isPresent,
+        onUnmount: onAnimationEnd,
+        outDuration,
+    });
+    const maxHeight = useMemo(() => {
+        if (!mount || stage === 'EXITING' || stage === 'UNMOUNT') {
+            return 0;
+        }
+        return containerChildHeight;
+    }, [stage, containerChildHeight, mount]);
+    return (jsx("div", Object.assign({ ref: containerRef, className: 'vertical-drawer-animation', style: Object.assign(Object.assign({}, style), { maxHeight, transitionDuration: `${currentDuration}ms` }) }, { children: jsx("div", Object.assign({ ref: childRef }, { children: mount && children })) })));
+};
+
+export { IN_DURATION, OUT_DURATION, VerticalDrawerAnimation };

package/src/lib/components/AppOriginTile/AppOriginTile.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../Typography/Typography.cjs');
+
+const AppOriginTile = ({ appLogoUrl, appName, appOrigin, }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'app-origin-tile' }, { children: [Boolean(appName) && (jsxRuntime.jsxs("div", Object.assign({ className: 'app-origin-tile__title' }, { children: [Boolean(appLogoUrl) && (jsxRuntime.jsx("img", { alt: 'app_logo', src: appLogoUrl, className: 'app-origin-tile__logo' })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_normal' }, { children: appName }))] }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular' }, { children: appOrigin }))] })));
+
+exports.AppOriginTile = AppOriginTile;

package/src/lib/components/AppOriginTile/AppOriginTile.js

@@ -0,0 +1,6 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
+
+const AppOriginTile = ({ appLogoUrl, appName, appOrigin, }) => (jsxs("div", Object.assign({ className: 'app-origin-tile' }, { children: [Boolean(appName) && (jsxs("div", Object.assign({ className: 'app-origin-tile__title' }, { children: [Boolean(appLogoUrl) && (jsx("img", { alt: 'app_logo', src: appLogoUrl, className: 'app-origin-tile__logo' })), jsx(Typography, Object.assign({ color: 'primary', variant: 'body_normal' }, { children: appName }))] }))), jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular' }, { children: appOrigin }))] })));
+
+export { AppOriginTile };

package/src/lib/components/Badge/Badge.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+
+const Badge = ({ className = '', dot, text }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('badge__container', className) }, { children: [dot && jsxRuntime.jsx("span", { className: 'badge__dot' }), jsxRuntime.jsx("span", { children: text })] })));
+
+exports.Badge = Badge;

package/src/lib/components/Badge/Badge.js

@@ -0,0 +1,6 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+
+const Badge = ({ className = '', dot, text }) => (jsxs("div", Object.assign({ className: classNames('badge__container', className) }, { children: [dot && jsx("span", { className: 'badge__dot' }), jsx("span", { children: text })] })));
+
+export { Badge };

package/src/lib/components/Button/Button.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var spinner = require('../Spinner/spinner.cjs');
+var Typography = require('../Typography/Typography.cjs');
+
+const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant = 'primary', buttonRounded, children, feedback, expanded, dataTestId, disabled = false, loading = false, onClick, type, startSlot, endSlot, typographyProps = {
+    variant: 'button_primary',
+}, }) => {
+    const [isFeedbackVisible, setIsFeedbackVisible] = React.useState(false);
+    const buttonVariantClassNameMap = {
+        primary: 'button--primary',
+        secondary: 'button--secondary',
+        tertiary: 'button--tertiary',
+    };
+    const buttonPaddingClassNameMap = {
+        large: 'button--padding-large',
+        medium: 'button--padding-medium',
+        none: 'button--padding-none',
+        small: 'button--padding-small',
+    };
+    const buttonRoundedClassNameMap = {
+        default: 'button--rounded',
+        medium: 'button--rounded--medium',
+        small: 'button--rounded--small',
+    };
+    const buttonEffectiveClassName = classNames.classNames('button', {
+        'button--expanded': Boolean(expanded),
+        'button--loading': Boolean(loading),
+    }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonRounded ? buttonRoundedClassNameMap[buttonRounded] : '', buttonClassName);
+    const handleClick = (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        if (feedback) {
+            setIsFeedbackVisible(true);
+            setTimeout(() => {
+                setIsFeedbackVisible(false);
+            }, 2000);
+        }
+    };
+    const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startSlot && jsxRuntime.jsx("div", Object.assign({ className: 'button__start-slot' }, { children: startSlot })), (feedback || children) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'button_primary', color: 'primary', as: 'span' }, typographyProps, { children: isFeedbackVisible && feedback ? feedback : children }))), endSlot && jsxRuntime.jsx("div", Object.assign({ className: 'button__end-slot' }, { children: endSlot }))] }));
+    return (jsxRuntime.jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || loading, "data-testid": dataTestId }, { children: [loading && (jsxRuntime.jsx("div", Object.assign({ className: 'button__spinner-container' }, { children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
+};
+
+exports.Button = Button;

package/src/lib/components/Button/Button.js

@@ -0,0 +1,46 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { Spinner } from '../Spinner/spinner.js';
+import { Typography } from '../Typography/Typography.js';
+
+const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant = 'primary', buttonRounded, children, feedback, expanded, dataTestId, disabled = false, loading = false, onClick, type, startSlot, endSlot, typographyProps = {
+    variant: 'button_primary',
+}, }) => {
+    const [isFeedbackVisible, setIsFeedbackVisible] = useState(false);
+    const buttonVariantClassNameMap = {
+        primary: 'button--primary',
+        secondary: 'button--secondary',
+        tertiary: 'button--tertiary',
+    };
+    const buttonPaddingClassNameMap = {
+        large: 'button--padding-large',
+        medium: 'button--padding-medium',
+        none: 'button--padding-none',
+        small: 'button--padding-small',
+    };
+    const buttonRoundedClassNameMap = {
+        default: 'button--rounded',
+        medium: 'button--rounded--medium',
+        small: 'button--rounded--small',
+    };
+    const buttonEffectiveClassName = classNames('button', {
+        'button--expanded': Boolean(expanded),
+        'button--loading': Boolean(loading),
+    }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonRounded ? buttonRoundedClassNameMap[buttonRounded] : '', buttonClassName);
+    const handleClick = (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        if (feedback) {
+            setIsFeedbackVisible(true);
+            setTimeout(() => {
+                setIsFeedbackVisible(false);
+            }, 2000);
+        }
+    };
+    const buttonContent = (jsxs(Fragment, { children: [startSlot && jsx("div", Object.assign({ className: 'button__start-slot' }, { children: startSlot })), (feedback || children) && (jsx(Typography, Object.assign({ variant: 'button_primary', color: 'primary', as: 'span' }, typographyProps, { children: isFeedbackVisible && feedback ? feedback : children }))), endSlot && jsx("div", Object.assign({ className: 'button__end-slot' }, { children: endSlot }))] }));
+    return (jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || loading, "data-testid": dataTestId }, { children: [loading && (jsx("div", Object.assign({ className: 'button__spinner-container' }, { children: jsx(Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
+};
+
+export { Button };

package/src/lib/components/Captcha/Captcha.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var HCaptcha = require('@hcaptcha/react-hcaptcha');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var HCaptcha__default = /*#__PURE__*/_interopDefaultLegacy(HCaptcha);
+
+const Captcha = ({ handleSuccess }) => {
+    var _a;
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    if (!((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security.hCaptcha) === null || _a === void 0 ? void 0 : _a.siteKey))
+        return null;
+    return (jsxRuntime.jsx("form", Object.assign({ "data-testid": 'captcha-form' }, { children: jsxRuntime.jsx(HCaptcha__default["default"], { sitekey: projectSettings.security.hCaptcha.siteKey, onVerify: (token) => handleSuccess(token), theme: document.body.dataset.dynamicTheme }) })));
+};
+
+exports.Captcha = Captcha;

package/src/lib/components/Captcha/Captcha.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import HCaptcha from '@hcaptcha/react-hcaptcha';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+
+const Captcha = ({ handleSuccess }) => {
+    var _a;
+    const { projectSettings } = useInternalDynamicContext();
+    if (!((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security.hCaptcha) === null || _a === void 0 ? void 0 : _a.siteKey))
+        return null;
+    return (jsx("form", Object.assign({ "data-testid": 'captcha-form' }, { children: jsx(HCaptcha, { sitekey: projectSettings.security.hCaptcha.siteKey, onVerify: (token) => handleSuccess(token), theme: document.body.dataset.dynamicTheme }) })));
+};
+
+export { Captcha };

package/src/lib/components/Checkbox/Checkbox.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+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 check = require('../../shared/assets/check.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+
+const Checkbox = ({ ariaLabel, checked, className = '', defaultChecked, disabled, id, name, onChange, value, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('checkbox__container', className) }, { children: [jsxRuntime.jsx("input", { type: 'checkbox', id: id, "aria-label": ariaLabel, "aria-checked": checked, className: 'checkbox--hidden', value: value, checked: checked, name: name, disabled: disabled, defaultChecked: defaultChecked, onChange: (e) => Boolean(onChange) && (onChange === null || onChange === void 0 ? void 0 : onChange(e, e.currentTarget.value)), "data-testid": 'input-checkbox' }), jsxRuntime.jsx("div", Object.assign({ className: 'checkbox--visible' }, { children: jsxRuntime.jsx(check.ReactComponent, { className: 'checkbox__icon' }) }))] })));
+
+exports.Checkbox = Checkbox;

package/src/lib/components/Checkbox/Checkbox.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
+import '../../utils/constants/colors.js';
+import '../../shared/consts/index.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+
+const Checkbox = ({ ariaLabel, checked, className = '', defaultChecked, disabled, id, name, onChange, value, }) => (jsxs("div", Object.assign({ className: classNames('checkbox__container', className) }, { children: [jsx("input", { type: 'checkbox', id: id, "aria-label": ariaLabel, "aria-checked": checked, className: 'checkbox--hidden', value: value, checked: checked, name: name, disabled: disabled, defaultChecked: defaultChecked, onChange: (e) => Boolean(onChange) && (onChange === null || onChange === void 0 ? void 0 : onChange(e, e.currentTarget.value)), "data-testid": 'input-checkbox' }), jsx("div", Object.assign({ className: 'checkbox--visible' }, { children: jsx(SvgCheck, { className: 'checkbox__icon' }) }))] })));
+
+export { Checkbox };

package/src/lib/components/CopyButton/CopyButton.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var TextButton = require('../TextButton/TextButton.cjs');
+var Tooltip = require('../Tooltip/Tooltip.cjs');
+var Typography = require('../Typography/Typography.cjs');
+
+const CopyButton = ({ children, className = '', textToCopy, onClick, }) => {
+    const [hover, setHover] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    const CopyTooltip = (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_small', color: 'tooltip' }, { children: copied ? 'Copied' : 'Copy' })));
+    React.useEffect(() => {
+        const timeout = setTimeout(() => {
+            /* istanbul ignore else */
+            if (!hover) {
+                setCopied(false);
+            }
+        }, 100);
+        return () => clearTimeout(timeout);
+    }, [hover]);
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(textToCopy);
+        setCopied(true);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: classNames.classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: CopyTooltip }, { children: children })) })));
+};
+
+exports.CopyButton = CopyButton;

package/src/lib/components/CopyButton/CopyButton.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { TextButton } from '../TextButton/TextButton.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Typography } from '../Typography/Typography.js';
+
+const CopyButton = ({ children, className = '', textToCopy, onClick, }) => {
+    const [hover, setHover] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const CopyTooltip = (jsx(Typography, Object.assign({ variant: 'numbers_small', color: 'tooltip' }, { children: copied ? 'Copied' : 'Copy' })));
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            /* istanbul ignore else */
+            if (!hover) {
+                setCopied(false);
+            }
+        }, 100);
+        return () => clearTimeout(timeout);
+    }, [hover]);
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(textToCopy);
+        setCopied(true);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (jsx(TextButton, Object.assign({ className: classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: jsx(Tooltip, Object.assign({ content: CopyTooltip }, { children: children })) })));
+};
+
+export { CopyButton };