@dynamic-labs/sdk-react-core/src/lib/components/IconWithSpinner/IconWithSpinner.cjs

A React SDK for implementing wallet web3 authentication and authorization to your website.

'use client'
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var utils = require('@dynamic-labs/utils');
var classNames = require('../../utils/functions/classNames/classNames.cjs');
require('@dynamic-labs/sdk-api-core');
require('../../utils/constants/values.cjs');
require('../../../../_virtual/_tslib.cjs');
require('@dynamic-labs/multi-wallet');
require('../../shared/logger.cjs');
require('../../utils/constants/colors.cjs');
require('react-international-phone');
require('@dynamic-labs/iconic');
require('@dynamic-labs/wallet-connector-core');
require('react');
require('../../context/ViewContext/ViewContext.cjs');
require('@dynamic-labs/wallet-book');
require('../../shared/consts/index.cjs');
require('../../store/state/nonce/nonce.cjs');
var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs');
require('../../store/state/projectSettings/projectSettings.cjs');
require('../../config/ApiEndpoint.cjs');
require('../../store/state/user/user.cjs');
require('../../locale/locale.cjs');
require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
require('../../store/state/primaryWalletId/primaryWalletId.cjs');
require('../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
var Spinner = require('./Spinner/Spinner.cjs');
var Indicator = require('./Indicator/Indicator.cjs');

const iconRatio = 7 / 11;
const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className, style, indicator, customSpinnerColor, treatAsFunctionComponent, }) => {
    const realIconSize = iconSize * iconRatio;
    const spinnerIconSize = iconSize / 2;
    const effectiveContainerClassName = classNames.classNames('icon-with-spinner__container', className);
    const IconAsFC = Icon;
    return (jsxRuntime.jsxs("div", { className: effectiveContainerClassName, style: Object.assign({ height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) }, style), children: [Icon && (jsxRuntime.jsxs("div", { style: {
                    height: pixelToRem.pixelToRem(realIconSize),
                    width: pixelToRem.pixelToRem(realIconSize),
                }, className: 'icon-with-spinner__icon-container', children: [treatAsFunctionComponent || typeof Icon === 'function' ? (jsxRuntime.jsx(IconAsFC, { height: realIconSize, width: realIconSize })) : (Icon), indicator && jsxRuntime.jsx(Indicator.Indicator, { indicator: indicator, iconSize: iconSize })] })), isSpinning && !utils.isLegacySafari() && (jsxRuntime.jsx("div", { className: 'icon-with-spinner__spinner-container icon-with-spinner__animation', "data-chromatic": 'ignore', style: {
                    height: pixelToRem.pixelToRem(iconSize),
                    width: pixelToRem.pixelToRem(iconSize),
                }, children: jsxRuntime.jsx(Spinner.Spinner, { className: 'icon-with-spinner__spinner', customSpinnerColor: customSpinnerColor, size: spinnerIconSize }) }))] }));
};

exports.IconWithSpinner = IconWithSpinner;
exports.iconRatio = iconRatio;