@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/components/PinInput/PinInput.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type PinInputElementProperties = 'name' | 'inputMode' | 'pattern' | 'type' | 'value' | 'disabled';
+type Props = {
+    autoFocus?: boolean;
+    hasError: boolean;
+    inputIndex: number;
+    isValidated: boolean;
+    onChange: (values: string[]) => void;
+    onComplete?: (values: string[]) => void;
+    values: string[];
+} & Pick<React.InputHTMLAttributes<HTMLInputElement>, PinInputElementProperties>;
+export declare const normalizeNewValue: (currentValue: string, updatedValue: string) => string[];
+export declare const PinInput: ({ autoFocus, disabled, inputIndex, inputMode, isValidated, name, onChange, pattern, type, value, values, hasError, }: Props) => JSX.Element;
+export {};

package/src/lib/components/PinInput/PinInput.es.js

@@ -0,0 +1,74 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+
+const normalizeNewValue = (currentValue, updatedValue) => {
+    if (!currentValue) {
+        return updatedValue.split('');
+    }
+    if (updatedValue.length > 2) {
+        return updatedValue.split('');
+    }
+    if (updatedValue === '') {
+        return [];
+    }
+    if (currentValue[0] === updatedValue[0]) {
+        return [updatedValue[1]];
+    }
+    return [updatedValue[0]];
+};
+const PinInput = ({ autoFocus, disabled, inputIndex, inputMode, isValidated, name, onChange, pattern, type, value, values, hasError, }) => {
+    const inputRef = useRef(null);
+    const handleChange = (e) => {
+        const currentValue = values[inputIndex];
+        const updatedValue = e.target.value.replace(/\s+/g, '');
+        const newValues = [...values];
+        const normalizedValues = normalizeNewValue(currentValue, updatedValue).slice(0, newValues.length - inputIndex);
+        const setValues = (normalizedValue, index) => (newValues[inputIndex + index] = normalizedValue);
+        const regex = type === 'number' ? /(^$)|(\d+)/ : /.*/;
+        const shouldChange = normalizedValues.every((normalizedValue) => regex.test(normalizedValue));
+        let inputElement = inputRef.current;
+        if (!shouldChange) {
+            return;
+        }
+        if (normalizedValues.length) {
+            normalizedValues.forEach(setValues);
+        }
+        else {
+            newValues[inputIndex] = '';
+        }
+        onChange(newValues);
+        // in order to maintain focus after copy/paste action
+        // of 1 or many characters, we need to loop through values
+        // and set current element to be the next sibling
+        for (let i = 0; i < normalizedValues.length; i++) {
+            inputElement = inputElement === null || inputElement === void 0 ? void 0 : inputElement.nextElementSibling;
+        }
+        // if current element is of input type, we can safely focus it
+        if (normalizedValues && inputElement instanceof HTMLInputElement) {
+            inputElement.focus();
+        }
+    };
+    const handleKeyDown = ({ key, }) => {
+        var _a;
+        if (key === 'Backspace' && values[inputIndex] === '' && inputIndex > 0) {
+            const prevInput = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+            /* istanbul ignore next */
+            if (prevInput instanceof HTMLInputElement) {
+                prevInput.focus();
+            }
+        }
+    };
+    useEffect(() => {
+        var _a;
+        if (autoFocus && inputIndex === 0) {
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [autoFocus, inputIndex]);
+    return (jsx("input", { ref: inputRef, className: classNames('pin-input__input', {
+            'pin-input__input--error': Boolean(hasError),
+            'pin-input__input--success': Boolean(isValidated),
+        }), disabled: disabled, name: name, value: value, onChange: handleChange, onKeyDown: handleKeyDown, "data-testid": inputIndex, pattern: pattern, inputMode: inputMode }));
+};
+
+export { PinInput, normalizeNewValue };

package/src/lib/components/PinInput/index.d.ts

@@ -0,0 +1 @@
+export { PinInput } from './PinInput';

package/src/lib/components/Portal/Portal.cjs.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+var ReactFocusLock = require('react-focus-lock');
+require('../Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+var OpacityTransition = require('../Transition/OpacityTransition/OpacityTransition.cjs.js');
+var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs.js');
+var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs.js');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs.js');
+var useKeyboardEventListener = require('../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.cjs.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var ReactFocusLock__default = /*#__PURE__*/_interopDefaultLegacy(ReactFocusLock);
+
+const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, whiteList, }) => {
+    const { view } = ViewContext.useViewContext();
+    const shouldCloseOnBackdropClick = view !== 'collect-user-data' &&
+        view !== 'network-not-supported' &&
+        view !== 'update-email' &&
+        view !== 'login-with-email-verification' &&
+        view !== 'verify-email';
+    const handleKeyClose = (event) => {
+        if (!shouldCloseOnBackdropClick)
+            return;
+        if (event.key === 'Escape')
+            handleClose();
+    };
+    const onBackdropClick = (e) => {
+        if (!shouldCloseOnBackdropClick)
+            return;
+        e.stopPropagation();
+        handleClose();
+    };
+    useKeyboardEventListener.useKeyboardEventListener({
+        disabled: !shouldCloseOnBackdropClick,
+        inputKey: 'Escape',
+        onKeyPressed: handleClose,
+    });
+    return (jsxRuntime.jsxs(ReactFocusLock__default["default"], Object.assign({ className: 'modal__container', whiteList: whiteList }, { children: [withBackdrop && (jsxRuntime.jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: (e) => {
+                    onBackdropClick(e);
+                }, onKeyDown: handleKeyClose, tabIndex: 0, "aria-label": 'Close modal', 
+                // z-index - 2 to ensure that the backdrop is always behind the content
+                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'modal__backdrop' })), jsxRuntime.jsx("div", Object.assign({ className: 'modal', style: { zIndex } }, { children: children }))] })));
+};
+const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
+    const modalRootElementRef = useElementById.useElementById(elementId);
+    return reactDom.createPortal(jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ zIndex: zIndex, dataTestId: 'dynamic-modal-shadow' }, { children: jsxRuntime.jsx(OpacityTransition.OpacityTransition, Object.assign({ isShown: isShown }, transitionEvents, { children: jsxRuntime.jsx(ModalComponent, Object.assign({ handleClose: handleClose, withBackdrop: withBackdrop, whiteList: (node) => modalRootElementRef.current.contains(node) }, { children: children })) })) })), modalRootElementRef.current);
+};
+
+exports.Portal = Portal;

package/src/lib/components/Portal/Portal.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { UseTransitionEvents } from '../../utils/hooks/useTransition';
+type PortalProps = {
+    children: ReactNode;
+    elementId?: string;
+    handleClose: () => void;
+    isShown?: boolean;
+    transitionEvents?: UseTransitionEvents;
+    whiteList?: (activeElement: HTMLElement) => boolean;
+    withBackdrop?: boolean;
+    zIndex?: number;
+};
+export declare const Portal: ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId, }: PortalProps) => JSX.Element;
+export {};

package/src/lib/components/Portal/Portal.es.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import ReactFocusLock from 'react-focus-lock';
+import '../Transition/ZoomTransition/ZoomTransition.es.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import { OpacityTransition } from '../Transition/OpacityTransition/OpacityTransition.es.js';
+import { useElementById } from '../../utils/hooks/useElementById/useElementById.es.js';
+import { ShadowDOM } from '../ShadowDOM/ShadowDOM.es.js';
+import { useViewContext } from '../../context/ViewContext/ViewContext.es.js';
+import { useKeyboardEventListener } from '../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.es.js';
+
+const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, whiteList, }) => {
+    const { view } = useViewContext();
+    const shouldCloseOnBackdropClick = view !== 'collect-user-data' &&
+        view !== 'network-not-supported' &&
+        view !== 'update-email' &&
+        view !== 'login-with-email-verification' &&
+        view !== 'verify-email';
+    const handleKeyClose = (event) => {
+        if (!shouldCloseOnBackdropClick)
+            return;
+        if (event.key === 'Escape')
+            handleClose();
+    };
+    const onBackdropClick = (e) => {
+        if (!shouldCloseOnBackdropClick)
+            return;
+        e.stopPropagation();
+        handleClose();
+    };
+    useKeyboardEventListener({
+        disabled: !shouldCloseOnBackdropClick,
+        inputKey: 'Escape',
+        onKeyPressed: handleClose,
+    });
+    return (jsxs(ReactFocusLock, Object.assign({ className: 'modal__container', whiteList: whiteList }, { children: [withBackdrop && (jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: (e) => {
+                    onBackdropClick(e);
+                }, onKeyDown: handleKeyClose, tabIndex: 0, "aria-label": 'Close modal', 
+                // z-index - 2 to ensure that the backdrop is always behind the content
+                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'modal__backdrop' })), jsx("div", Object.assign({ className: 'modal', style: { zIndex } }, { children: children }))] })));
+};
+const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
+    const modalRootElementRef = useElementById(elementId);
+    return createPortal(jsx(ShadowDOM, Object.assign({ zIndex: zIndex, dataTestId: 'dynamic-modal-shadow' }, { children: jsx(OpacityTransition, Object.assign({ isShown: isShown }, transitionEvents, { children: jsx(ModalComponent, Object.assign({ handleClose: handleClose, withBackdrop: withBackdrop, whiteList: (node) => modalRootElementRef.current.contains(node) }, { children: children })) })) })), modalRootElementRef.current);
+};
+
+export { Portal };

package/src/lib/components/Portal/index.d.ts

@@ -0,0 +1 @@
+export { Portal } from './Portal';

package/src/lib/components/PoweredByDynamic/PoweredByDynamic.cjs.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+var Typography = require('../Typography/Typography.cjs.js');
+require('react');
+var dynamicLogo = require('../../assets/dynamic-logo.cjs.js');
+
+const URL = 'https://dynamic.xyz';
+const alignClassNames = {
+    center: 'powered-by-dynamic--center',
+    right: 'powered-by-dynamic--right',
+};
+const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => (jsxRuntime.jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames.classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames.classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsxRuntime.jsx(dynamicLogo.ReactComponent, { className: classNames.classNames('powered-by-dynamic__logo', classNameLogo) })] })));
+
+exports.PoweredByDynamic = PoweredByDynamic;

package/src/lib/components/PoweredByDynamic/PoweredByDynamic.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type PoweredByDynamicProps = {
+    align?: 'left' | 'center' | 'right';
+    classNameLogo?: string;
+    classNameRoot?: string;
+    classNameText?: string;
+};
+export declare const PoweredByDynamic: React.FC<PoweredByDynamicProps>;
+export {};

package/src/lib/components/PoweredByDynamic/PoweredByDynamic.es.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+import { Typography } from '../Typography/Typography.es.js';
+import 'react';
+import { ReactComponent as SvgDynamicLogo } from '../../assets/dynamic-logo.es.js';
+
+const URL = 'https://dynamic.xyz';
+const alignClassNames = {
+    center: 'powered-by-dynamic--center',
+    right: 'powered-by-dynamic--right',
+};
+const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => (jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsx(SvgDynamicLogo, { className: classNames('powered-by-dynamic__logo', classNameLogo) })] })));
+
+export { PoweredByDynamic };

package/src/lib/components/PoweredByDynamic/index.d.ts

@@ -0,0 +1 @@
+export { PoweredByDynamic } from './PoweredByDynamic';

package/src/lib/components/Search/Search.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var search = require('../../assets/search.cjs.js');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+
+const Search = ({ className = '', id, label, type, onChange, onBlur, name, value, onClickClear, }) => (jsxRuntime.jsxs("label", Object.assign({ htmlFor: id, className: classNames.classNames('search__container', value ? 'search__container--active' : undefined) }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'search-icon__container' }, { children: jsxRuntime.jsx(search.ReactComponent, {}) })), jsxRuntime.jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, className: classNames.classNames('search__input', className) }), value.length > 0 && (jsxRuntime.jsx("button", Object.assign({ type: 'button', onClick: onClickClear, className: 'search__button--clear' }, { children: "Clear" })))] })));
+
+exports.Search = Search;

package/src/lib/components/Search/Search.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { InputProps } from './Search.types';
+export declare const Search: ({ className, id, label, type, onChange, onBlur, name, value, onClickClear, }: InputProps) => JSX.Element;

package/src/lib/components/Search/Search.es.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { ReactComponent as SvgSearch } from '../../assets/search.es.js';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+
+const Search = ({ className = '', id, label, type, onChange, onBlur, name, value, onClickClear, }) => (jsxs("label", Object.assign({ htmlFor: id, className: classNames('search__container', value ? 'search__container--active' : undefined) }, { children: [jsx("div", Object.assign({ className: 'search-icon__container' }, { children: jsx(SvgSearch, {}) })), jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, className: classNames('search__input', className) }), value.length > 0 && (jsx("button", Object.assign({ type: 'button', onClick: onClickClear, className: 'search__button--clear' }, { children: "Clear" })))] })));
+
+export { Search };

package/src/lib/components/Search/Search.types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
+    className?: string;
+    label: string;
+    onClickClear: VoidFunction;
+    value: string;
+}

package/src/lib/components/Search/index.d.ts

@@ -0,0 +1 @@
+export { Search } from './Search';

package/src/lib/components/Select/Select.cjs.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs.js');
+var arrowDown = require('../../shared/assets/arrow-down.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+var Icon = require('../Icon/Icon.cjs.js');
+var Typography = require('../Typography/Typography.cjs.js');
+var getDisplayValue = require('./utils/getDisplayValue/getDisplayValue.cjs.js');
+
+const Select = (_a) => {
+    var { children, className = '', id, label, value, error = false, selectDataTestId, message } = _a, selectProps = _tslib.__rest(_a, ["children", "className", "id", "label", "value", "error", "selectDataTestId", "message"]);
+    const selectRef = React.useRef(null);
+    const [displayValue, setDisplayValue] = React.useState();
+    React.useLayoutEffect(() => {
+        if (!value)
+            return;
+        const selectElement = selectRef.current;
+        setDisplayValue(getDisplayValue.getDisplayValue(selectElement));
+    }, [value, setDisplayValue]);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'select__field' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames(className, 'select__container') }, { children: [jsxRuntime.jsxs("label", Object.assign({ className: classNames.classNames('select__body', {
+                            select__error: error,
+                            select__has_value: Boolean(displayValue),
+                        }), htmlFor: id }, { children: [jsxRuntime.jsx("span", Object.assign({ className: 'select__value' }, { children: displayValue || jsxRuntime.jsx("span", { children: "\u00A0" }) })), jsxRuntime.jsx("span", Object.assign({ className: 'select__label' }, { children: label })), jsxRuntime.jsx("div", Object.assign({ className: 'select__control_icon' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'medium' }, { children: jsxRuntime.jsx(arrowDown.ReactComponent, {}) })) }))] })), jsxRuntime.jsx("select", Object.assign({}, selectProps, { "data-testid": selectDataTestId, ref: selectRef, id: id, value: value, placeholder: label, className: 'select' }, { children: children }))] })), message && (jsxRuntime.jsx(Typography.Typography, Object.assign({ className: classNames.classNames('select__message', {
+                    select__message__error: error,
+                }), variant: 'body_mini' }, { children: message })))] })));
+};
+
+exports.Select = Select;

package/src/lib/components/Select/Select.d.ts

@@ -0,0 +1,2 @@
+import { SelectComponent } from './Select.types';
+export declare const Select: SelectComponent;

package/src/lib/components/Select/Select.es.js

@@ -0,0 +1,35 @@
+import { __rest } from '../../../../_virtual/_tslib.es.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect } from 'react';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgArrowDown } from '../../shared/assets/arrow-down.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+import { Icon } from '../Icon/Icon.es.js';
+import { Typography } from '../Typography/Typography.es.js';
+import { getDisplayValue } from './utils/getDisplayValue/getDisplayValue.es.js';
+
+const Select = (_a) => {
+    var { children, className = '', id, label, value, error = false, selectDataTestId, message } = _a, selectProps = __rest(_a, ["children", "className", "id", "label", "value", "error", "selectDataTestId", "message"]);
+    const selectRef = useRef(null);
+    const [displayValue, setDisplayValue] = useState();
+    useLayoutEffect(() => {
+        if (!value)
+            return;
+        const selectElement = selectRef.current;
+        setDisplayValue(getDisplayValue(selectElement));
+    }, [value, setDisplayValue]);
+    return (jsxs("div", Object.assign({ className: 'select__field' }, { children: [jsxs("div", Object.assign({ className: classNames(className, 'select__container') }, { children: [jsxs("label", Object.assign({ className: classNames('select__body', {
+                            select__error: error,
+                            select__has_value: Boolean(displayValue),
+                        }), htmlFor: id }, { children: [jsx("span", Object.assign({ className: 'select__value' }, { children: displayValue || jsx("span", { children: "\u00A0" }) })), jsx("span", Object.assign({ className: 'select__label' }, { children: label })), jsx("div", Object.assign({ className: 'select__control_icon' }, { children: jsx(Icon, Object.assign({ size: 'medium' }, { children: jsx(SvgArrowDown, {}) })) }))] })), jsx("select", Object.assign({}, selectProps, { "data-testid": selectDataTestId, ref: selectRef, id: id, value: value, placeholder: label, className: 'select' }, { children: children }))] })), message && (jsx(Typography, Object.assign({ className: classNames('select__message', {
+                    select__message__error: error,
+                }), variant: 'body_mini' }, { children: message })))] })));
+};
+
+export { Select };

package/src/lib/components/Select/Select.types.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+export type SelectProps = React.ComponentPropsWithoutRef<'select'> & {
+    className?: string;
+    error?: boolean;
+    label: string;
+    message?: ReactNode;
+    optional?: boolean;
+    selectDataTestId?: string;
+};
+export type SelectComponent = FC<PropsWithChildren<SelectProps>>;

package/src/lib/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectComponent } from './Select.types';

package/src/lib/components/Select/utils/getDisplayValue/getDisplayValue.cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getDisplayValue = (element) => {
+    if (!element)
+        return;
+    const { selectedIndex } = element;
+    if (selectedIndex === undefined)
+        return;
+    const option = element.options[selectedIndex];
+    if (!option.hasAttribute('value'))
+        return;
+    return option.text;
+};
+
+exports.getDisplayValue = getDisplayValue;

package/src/lib/components/Select/utils/getDisplayValue/getDisplayValue.d.ts

@@ -0,0 +1 @@
+export declare const getDisplayValue: (element: HTMLSelectElement | null) => string | undefined;

package/src/lib/components/Select/utils/getDisplayValue/getDisplayValue.es.js

@@ -0,0 +1,13 @@
+const getDisplayValue = (element) => {
+    if (!element)
+        return;
+    const { selectedIndex } = element;
+    if (selectedIndex === undefined)
+        return;
+    const option = element.options[selectedIndex];
+    if (!option.hasAttribute('value'))
+        return;
+    return option.text;
+};
+
+export { getDisplayValue };

package/src/lib/components/Select/utils/getDisplayValue/index.d.ts

@@ -0,0 +1 @@
+export { getDisplayValue } from './getDisplayValue';

package/src/lib/components/Select/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './getDisplayValue';

package/src/lib/components/Separator/Separator.d.ts

@@ -0,0 +1,2 @@
+import { SeparatorComponent } from './Separator.types';
+export declare const Separator: SeparatorComponent;

package/src/lib/components/Separator/Separator.types.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+export type SeparatorProps = {
+    className?: string;
+};
+export type SeparatorComponent = (props: SeparatorProps) => ReactElement;

package/src/lib/components/Separator/index.d.ts

@@ -0,0 +1 @@
+export { Separator } from './Separator';

package/src/lib/components/ShadowDOM/ShadowDOM.cjs.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+var index_shadow = require('../../styles/index.shadow.cjs.js');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+var utils = require('./utils.cjs.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ShadowDOMContext = React__default["default"].createContext({});
+const ShadowDOMStyle = () => jsxRuntime.jsx("style", { children: index_shadow });
+const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex, }) => {
+    const { shadowDOMEnabled: shadowDOMSetting, cssOverrides } = useInternalDynamicContext.useInternalDynamicContext();
+    const shadowDOMFlag = utils.isShadowDOMFlagEnabled();
+    const shadowDOMEnabled = shadowDOMFlag && shadowDOMSetting;
+    const nodeRef = React.useRef(null);
+    const [shadowRoot, setShadowRoot] = React.useState();
+    const CssOverridesElement = React.useMemo(() => {
+        if (cssOverrides && typeof cssOverrides !== 'string') {
+            return () => cssOverrides;
+        }
+        else if (cssOverrides && typeof cssOverrides === 'string') {
+            const StyleElement = () => jsxRuntime.jsx("style", { children: cssOverrides });
+            return StyleElement;
+        }
+        return null;
+    }, [cssOverrides]);
+    React.useLayoutEffect(() => {
+        if (nodeRef.current && shadowDOMEnabled) {
+            try {
+                const root = nodeRef.current.attachShadow({
+                    mode,
+                });
+                setShadowRoot(root);
+            }
+            catch (e) {
+                // do nothing
+            }
+        }
+    }, [shadowDOMEnabled, nodeRef, mode]);
+    const shouldRenderStyles = Boolean(Object.keys(index_shadow).length);
+    if (!shadowDOMEnabled) {
+        return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] })));
+    }
+    return (jsxRuntime.jsx(ShadowDOMContext.Provider, Object.assign({ value: { shadowRoot } }, { children: jsxRuntime.jsx("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: shadowRoot &&
+                reactDom.createPortal(jsxRuntime.jsxs("div", Object.assign({ className: 'dynamic-shadow-dom-content' }, { children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] })), shadowRoot) })) })));
+};
+
+exports.ShadowDOM = ShadowDOM;
+exports.ShadowDOMContext = ShadowDOMContext;
+exports.ShadowDOMStyle = ShadowDOMStyle;

package/src/lib/components/ShadowDOM/ShadowDOM.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type ShadowDOMContextType = {
+    shadowRoot?: ShadowRoot;
+};
+export declare const ShadowDOMContext: React.Context<ShadowDOMContextType>;
+export declare const useShadowDOMContext: () => ShadowDOMContextType;
+export type ShadowDOMProps = {
+    children?: React.ReactElement | React.ReactElement[];
+    className?: string;
+    dataTestId?: string;
+    id?: string;
+    mode?: ShadowRootMode;
+    zIndex?: number;
+};
+export declare const ShadowDOMStyle: () => JSX.Element;
+export declare const ShadowDOM: React.FC<ShadowDOMProps>;

package/src/lib/components/ShadowDOM/ShadowDOM.es.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useMemo, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import css_248z from '../../styles/index.shadow.es.js';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+import { isShadowDOMFlagEnabled } from './utils.es.js';
+
+const ShadowDOMContext = React__default.createContext({});
+const ShadowDOMStyle = () => jsx("style", { children: css_248z });
+const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex, }) => {
+    const { shadowDOMEnabled: shadowDOMSetting, cssOverrides } = useInternalDynamicContext();
+    const shadowDOMFlag = isShadowDOMFlagEnabled();
+    const shadowDOMEnabled = shadowDOMFlag && shadowDOMSetting;
+    const nodeRef = useRef(null);
+    const [shadowRoot, setShadowRoot] = useState();
+    const CssOverridesElement = useMemo(() => {
+        if (cssOverrides && typeof cssOverrides !== 'string') {
+            return () => cssOverrides;
+        }
+        else if (cssOverrides && typeof cssOverrides === 'string') {
+            const StyleElement = () => jsx("style", { children: cssOverrides });
+            return StyleElement;
+        }
+        return null;
+    }, [cssOverrides]);
+    useLayoutEffect(() => {
+        if (nodeRef.current && shadowDOMEnabled) {
+            try {
+                const root = nodeRef.current.attachShadow({
+                    mode,
+                });
+                setShadowRoot(root);
+            }
+            catch (e) {
+                // do nothing
+            }
+        }
+    }, [shadowDOMEnabled, nodeRef, mode]);
+    const shouldRenderStyles = Boolean(Object.keys(css_248z).length);
+    if (!shadowDOMEnabled) {
+        return (jsxs("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), CssOverridesElement && jsx(CssOverridesElement, {})] })));
+    }
+    return (jsx(ShadowDOMContext.Provider, Object.assign({ value: { shadowRoot } }, { children: jsx("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: shadowRoot &&
+                createPortal(jsxs("div", Object.assign({ className: 'dynamic-shadow-dom-content' }, { children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), CssOverridesElement && jsx(CssOverridesElement, {})] })), shadowRoot) })) })));
+};
+
+export { ShadowDOM, ShadowDOMContext, ShadowDOMStyle };

package/src/lib/components/ShadowDOM/index.d.ts

@@ -0,0 +1 @@
+export { ShadowDOM } from './ShadowDOM';

package/src/lib/components/ShadowDOM/utils.cjs.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('react/jsx-runtime');
+require('../../context/ViewContext/ViewContext.cjs.js');
+require('react');
+var isSSR = require('../../shared/utils/functions/isSSR/isSSR.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+
+const isShadowDOMFlagEnabled = () => {
+    if (isSSR.isSSR())
+        return false;
+    const flag = 'shadowDOM.enabled';
+    const searchParams = new URLSearchParams(window.location.search);
+    // by default, enable the widget
+    if (!searchParams.has(flag)) {
+        return true;
+    }
+    return searchParams.get(flag) === 'true';
+};
+
+exports.isShadowDOMFlagEnabled = isShadowDOMFlagEnabled;

package/src/lib/components/ShadowDOM/utils.d.ts

@@ -0,0 +1 @@
+export declare const isShadowDOMFlagEnabled: () => boolean;