@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/baseui/modal/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledDialogContainer = exports.StyledDialog = exports.StyledRoot = exports.CLOSE_SOURCE = exports.ROLE = exports.SIZE = exports.FocusOnce = exports.ModalButton = exports.Modal = void 0;
+var tslib_1 = require("tslib");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var modal_1 = require("./modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(modal_1).default; } });
+var modal_button_1 = require("./modal-button");
+Object.defineProperty(exports, "ModalButton", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(modal_button_1).default; } });
+var focus_once_1 = require("./focus-once");
+Object.defineProperty(exports, "FocusOnce", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(focus_once_1).default; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "SIZE", { enumerable: true, get: function () { return constants_1.SIZE; } });
+Object.defineProperty(exports, "ROLE", { enumerable: true, get: function () { return constants_1.ROLE; } });
+Object.defineProperty(exports, "CLOSE_SOURCE", { enumerable: true, get: function () { return constants_1.CLOSE_SOURCE; } });
+var styled_components_1 = require("./styled-components");
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_components_1.Root; } });
+Object.defineProperty(exports, "StyledDialog", { enumerable: true, get: function () { return styled_components_1.Dialog; } });
+Object.defineProperty(exports, "StyledDialogContainer", { enumerable: true, get: function () { return styled_components_1.DialogContainer; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/baseui/modal/locale.d.ts

@@ -0,0 +1,7 @@
+export declare type ModalLocale = {
+    close: string;
+};
+declare const locale: {
+    close: string;
+};
+export default locale;

package/baseui/modal/locale.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var locale = {
+    close: 'Close',
+};
+exports.default = locale;

package/baseui/modal/modal-button.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const ModalButton: React.ForwardRefExoticComponent<Omit<import("../button").ButtonProps & import("../button").SharedStyleProps & Omit<any, keyof import("../button").SharedStyleProps | keyof import("../button").ButtonProps> & {
+    $as?: "symbol" | "object" | "progress" | "text" | "ruby" | "table" | "small" | "embed" | "pre" | "caption" | "menu" | "center" | "clipPath" | "filter" | "mask" | "marker" | "button" | "meter" | "textarea" | "style" | "sub" | "circle" | "menuitem" | "input" | "link" | "nav" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "sup" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default ModalButton;

package/baseui/modal/modal-button.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var React = (0, tslib_1.__importStar)(require("react"));
+var button_1 = require("../button");
+var overrides_1 = require("../helpers/overrides");
+// ModalButtons should have some margin pre-applied
+var overrides = {
+    BaseButton: {
+        // @ts-ignore
+        style: function (_a) {
+            var _b;
+            var $theme = _a.$theme;
+            var marginInlineEnd = $theme.direction !== 'rtl' ? 'marginRight' : 'marginLeft';
+            return {
+                ':not(:last-child)': (_b = {},
+                    _b[marginInlineEnd] = $theme.sizing.scale500,
+                    _b),
+            };
+        },
+    },
+};
+var ModalButton = React.forwardRef(function (props, ref) { return (
+//$FlowExpectedError[cannot-spread-inexact]
+(0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ ref: ref }, props, { overrides: (0, overrides_1.mergeOverrides)(overrides, props.overrides) }), void 0)); });
+ModalButton.displayName = 'ModalButton';
+exports.default = ModalButton;

package/baseui/modal/modal.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import type { ModalProps, ModalState, SharedStylePropsArg, CloseSource } from './types';
+import type { SyntheticEvent } from 'react';
+declare class Modal extends React.Component<ModalProps, ModalState> {
+    static defaultProps: Partial<ModalProps>;
+    mounted: boolean;
+    prevMounted: boolean;
+    animateOutTimer: ReturnType<typeof setTimeout> | undefined | null;
+    animateStartTimer: ReturnType<typeof requestAnimationFrame> | undefined | null;
+    dialogContainerRef: React.RefObject<HTMLElement>;
+    lastFocus: HTMLElement | undefined | null;
+    lastMountNodeOverflowStyle: string | undefined | null;
+    rootRef: React.RefObject<HTMLElement>;
+    state: {
+        isVisible: boolean;
+        mounted: boolean;
+        isFocusVisible: boolean;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: ModalProps, prevState: ModalState): void;
+    handleFocus: (event: SyntheticEvent) => void;
+    handleBlur: (event: SyntheticEvent) => void;
+    disableMountNodeScroll(): void;
+    resetMountNodeScroll(): void;
+    onEscape: () => void;
+    onDocumentClick: (e: MouseEvent) => void;
+    onBackdropClick: () => void;
+    onCloseClick: () => void;
+    clearTimers(): void;
+    didOpen(): void;
+    didClose(): void;
+    triggerClose(source?: CloseSource): void;
+    animateOutComplete: () => void;
+    getSharedProps(): Omit<SharedStylePropsArg, 'children'>;
+    getMountNode(): HTMLElement;
+    getChildren(): React.ReactNode;
+    renderModal(renderedContent: React.ReactNode): import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element | null;
+}
+export default Modal;

package/baseui/modal/modal.js

@@ -0,0 +1,237 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* global document */
+var React = (0, tslib_1.__importStar)(require("react"));
+var react_focus_lock_1 = (0, tslib_1.__importDefault)(require("react-focus-lock"));
+var overrides_1 = require("../helpers/overrides");
+var layer_1 = require("../layer");
+var constants_1 = require("./constants");
+var styled_components_1 = require("./styled-components");
+var close_icon_1 = require("./close-icon");
+var focusVisible_1 = require("../utils/focusVisible");
+var Modal = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(Modal, _super);
+    function Modal() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.mounted = false;
+        _this.prevMounted = false;
+        _this.dialogContainerRef = React.createRef();
+        _this.lastFocus = null;
+        _this.lastMountNodeOverflowStyle = null;
+        _this.rootRef = React.createRef();
+        _this.state = {
+            isVisible: false,
+            mounted: false,
+            isFocusVisible: false,
+        };
+        _this.handleFocus = function (event) {
+            if ((0, focusVisible_1.isFocusVisible)(event)) {
+                _this.setState({ isFocusVisible: true });
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _this.handleBlur = function (event) {
+            if (_this.state.isFocusVisible !== false) {
+                _this.setState({ isFocusVisible: false });
+            }
+        };
+        _this.onEscape = function () {
+            if (!_this.props.closeable) {
+                return;
+            }
+            _this.triggerClose(constants_1.CLOSE_SOURCE.escape);
+        };
+        _this.onDocumentClick = function (e) {
+            if (e.target && e.target instanceof HTMLElement && e.target.contains(_this.dialogContainerRef.current)) {
+                _this.onBackdropClick();
+            }
+        };
+        _this.onBackdropClick = function () {
+            if (!_this.props.closeable) {
+                return;
+            }
+            _this.triggerClose(constants_1.CLOSE_SOURCE.backdrop);
+        };
+        _this.onCloseClick = function () {
+            _this.triggerClose(constants_1.CLOSE_SOURCE.closeButton);
+        };
+        _this.animateOutComplete = function () {
+            _this.setState({
+                isVisible: false,
+            });
+        };
+        return _this;
+    }
+    Modal.prototype.componentDidMount = function () {
+        this.setState({ mounted: true });
+        this.prevMounted = this.mounted;
+        this.mounted = true;
+        if (process.env.NODE_ENV !== 'production') {
+            // @ts-expect-error checking for property with incorrect name
+            if (this.props.closable) {
+                console.warn('The property `closable` is not supported on the Modal. Did you mean `closeable`?');
+            }
+        }
+    };
+    Modal.prototype.componentWillUnmount = function () {
+        this.resetMountNodeScroll();
+        this.clearTimers();
+        this.prevMounted = this.mounted;
+        this.mounted = false;
+    };
+    Modal.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var isOpen = this.props.isOpen;
+        if (
+        // If isOpen is changing *or* we just mounted and modal should be open
+        isOpen !== prevProps.isOpen ||
+            (isOpen && this.mounted && !this.prevMounted)) {
+            if (isOpen) {
+                this.didOpen();
+            }
+            else {
+                this.didClose();
+            }
+        }
+        this.prevMounted = this.mounted;
+    };
+    Modal.prototype.disableMountNodeScroll = function () {
+        var mountNode = this.getMountNode();
+        this.lastMountNodeOverflowStyle = mountNode.style.overflow || '';
+        mountNode.style.overflow = 'hidden';
+    };
+    Modal.prototype.resetMountNodeScroll = function () {
+        var mountNode = this.getMountNode();
+        var lastStyle = this.lastMountNodeOverflowStyle;
+        if (mountNode && lastStyle !== null) {
+            // If overflow is not 'hidden', something else has changed the
+            // overflow style and we shouldn't try to reset it.
+            if (mountNode.style.overflow === 'hidden') {
+                mountNode.style.overflow = lastStyle || '';
+            }
+            this.lastMountNodeOverflowStyle = null;
+        }
+    };
+    Modal.prototype.clearTimers = function () {
+        if (this.animateOutTimer) {
+            clearTimeout(this.animateOutTimer);
+        }
+        if (this.animateStartTimer) {
+            cancelAnimationFrame(this.animateStartTimer);
+        }
+    };
+    Modal.prototype.didOpen = function () {
+        var _this = this;
+        // Sometimes scroll starts past zero, possibly due to animation
+        // Reset scroll to 0 (other libraries do this as well)
+        var rootRef = this.rootRef.current;
+        if (rootRef) {
+            rootRef.scrollTop = 0;
+        }
+        // Clear any existing timers (like previous animateOutTimer)
+        this.clearTimers();
+        this.disableMountNodeScroll();
+        if (this.props.animate) {
+            this.animateStartTimer = requestAnimationFrame(function () {
+                _this.setState({ isVisible: true });
+            });
+        }
+        else {
+            this.setState({ isVisible: true });
+        }
+    };
+    Modal.prototype.didClose = function () {
+        this.resetMountNodeScroll();
+        this.animateOutTimer = setTimeout(this.animateOutComplete, 500);
+    };
+    Modal.prototype.triggerClose = function (source) {
+        // If there's no source, it just means the isOpen prop changed. No need to call onClose.
+        if (this.props.onClose && source) {
+            this.props.onClose({
+                closeSource: source,
+            });
+        }
+    };
+    Modal.prototype.getSharedProps = function () {
+        var _a = this.props, animate = _a.animate, isOpen = _a.isOpen, size = _a.size, role = _a.role, closeable = _a.closeable;
+        return {
+            // @ts-ignore
+            $animate: animate,
+            $isVisible: this.state.isVisible,
+            $isOpen: !!isOpen,
+            // @ts-ignore
+            $size: size,
+            // @ts-ignore
+            $role: role,
+            $closeable: !!closeable,
+            $isFocusVisible: this.state.isFocusVisible,
+        };
+    };
+    Modal.prototype.getMountNode = function () {
+        var mountNode = this.props.mountNode;
+        if (mountNode) {
+            return mountNode;
+        }
+        // Flow thinks body could be null (cast through any)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return document.body;
+    };
+    Modal.prototype.getChildren = function () {
+        var children = this.props.children;
+        return typeof children === 'function' ? children() : children;
+    };
+    Modal.prototype.renderModal = function (renderedContent) {
+        var _a = this.props, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, closeable = _a.closeable, role = _a.role, autoFocus = _a.autoFocus, focusLock = _a.focusLock, returnFocus = _a.returnFocus;
+        var RootOverride = overrides.Root, DialogOverride = overrides.Dialog, DialogContainerOverride = overrides.DialogContainer, CloseOverride = overrides.Close;
+        var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(RootOverride, styled_components_1.Root), 2), Root = _c[0], rootProps = _c[1];
+        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(DialogContainerOverride, styled_components_1.DialogContainer), 2), DialogContainer = _d[0], dialogContainerProps = _d[1];
+        var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(DialogOverride, styled_components_1.Dialog), 2), Dialog = _e[0], dialogProps = _e[1];
+        var _f = (0, tslib_1.__read)((0, overrides_1.getOverrides)(CloseOverride, function () { return null; }), 2), Close = _f[0], closeProps = _f[1];
+        var sharedProps = this.getSharedProps();
+        return ((0, jsx_runtime_1.jsx)(react_focus_lock_1.default, (0, tslib_1.__assign)({ disabled: !focusLock, 
+            // Allow focus to escape when UI is within an iframe
+            crossFrame: false, returnFocus: returnFocus, autoFocus: autoFocus }, { children: (0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-baseweb": "modal", 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                ref: this.rootRef }, sharedProps, rootProps, { children: (0, jsx_runtime_1.jsx)(DialogContainer, (0, tslib_1.__assign)({ "data-testid": "spaceweb-modal-dialog-container", 
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    ref: this.dialogContainerRef }, sharedProps, dialogContainerProps, { children: (0, jsx_runtime_1.jsxs)(Dialog, (0, tslib_1.__assign)({ tabIndex: -1, "aria-modal": true, "aria-label": "dialog", role: role }, sharedProps, dialogProps, { children: [renderedContent, closeable ? ((0, jsx_runtime_1.jsx)(Close, (0, tslib_1.__assign)({ onClick: this.onCloseClick }, sharedProps, closeProps, { onFocus: (0, focusVisible_1.forkFocus)(closeProps, this.handleFocus), onBlur: (0, focusVisible_1.forkBlur)(closeProps, this.handleBlur) }, { children: (0, jsx_runtime_1.jsx)(close_icon_1.CloseIcon, {}, void 0) }), void 0)) : null] }), void 0) }), void 0) }), void 0) }), void 0));
+    };
+    Modal.prototype.render = function () {
+        // Only render an open and non-renderAll modal on the browser (portals aren't supported server-side)
+        var mountedAndOpen = this.mounted && (this.props.isOpen || this.state.isVisible);
+        var renderedContent = mountedAndOpen || this.props.renderAll ? this.getChildren() : null;
+        if (renderedContent) {
+            if (mountedAndOpen) {
+                return ((0, jsx_runtime_1.jsx)(layer_1.Layer, (0, tslib_1.__assign)({ onEscape: this.onEscape, onDocumentClick: this.onDocumentClick, mountNode: this.props.mountNode }, { children: this.renderModal(renderedContent) }), void 0));
+            }
+            else {
+                return (0, jsx_runtime_1.jsx)(styled_components_1.Hidden, { children: renderedContent }, void 0);
+            }
+        }
+        else {
+            return null;
+        }
+    };
+    Modal.defaultProps = {
+        animate: true,
+        autoFocus: true,
+        focusLock: true,
+        returnFocus: true,
+        closeable: true,
+        name: 'dialog',
+        isOpen: false,
+        overrides: {},
+        role: constants_1.ROLE.dialog,
+        size: constants_1.SIZE.default,
+        renderAll: false,
+    };
+    return Modal;
+}(React.Component));
+exports.default = Modal;

package/baseui/modal/styled-components.d.ts

@@ -0,0 +1,4 @@
+export declare const Root: import("../../style/styled").StyledComponent;
+export declare const DialogContainer: import("../../style/styled").StyledComponent;
+export declare const Dialog: import("../../style/styled").StyledComponent;
+export declare const Hidden: import("../../style/styled").StyledComponent;

package/baseui/modal/styled-components.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hidden = exports.Dialog = exports.DialogContainer = exports.Root = void 0;
+var tslib_1 = require("tslib");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var style_1 = require("../../style");
+var constants_1 = require("./constants");
+function getSizeStyles($size) {
+    var styles = {
+        maxWidth: '100%',
+        // @ts-ignore
+        width: null,
+    };
+    if (typeof $size === 'number') {
+        styles.width = "".concat($size, "px");
+        // @ts-ignore
+    }
+    else if (constants_1.SIZE[$size]) {
+        // @ts-ignore
+        styles.width = constants_1.SIZE_WIDTHS[$size];
+    }
+    else if (typeof $size === 'string') {
+        styles.width = $size;
+    }
+    if ($size === constants_1.SIZE.full) {
+        styles.alignSelf = 'stretch';
+    }
+    return styles;
+}
+exports.Root = (0, style_1.styled)('div', function (_, props) {
+    var $isOpen = props.$isOpen;
+    return {
+        position: 'fixed',
+        overflow: 'auto',
+        right: 0,
+        bottom: 0,
+        top: 0,
+        left: 0,
+        pointerEvents: $isOpen ? 'auto' : 'none',
+    };
+});
+exports.Root.displayName = 'Root';
+exports.DialogContainer = (0, style_1.styled)('div', 'flex justify-center items-center w-full min-h-full select-none pointer-events-auto', function (_, $animate) { return ($animate ? 'transition-opacity ease-out' : ''); }, function (_, props) {
+    var $isOpen = props.$isOpen, $isVisible = props.$isVisible;
+    return {
+        // Remove grey highlight
+        WebkitTapHighlightColor: 'transparent',
+        opacity: $isVisible && $isOpen ? 1 : 0,
+    };
+});
+exports.DialogContainer.displayName = 'DialogContainer';
+exports.Dialog = (0, style_1.styled)('div', 'spr-popup rounded-16 m-4 relative select-text', function (_, $animate) { return ($animate ? 'transition-opacity ease-out' : ''); }, function (_, props) {
+    var $isOpen = props.$isOpen, $isVisible = props.$isVisible, $size = props.$size;
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, getSizeStyles($size)), { 
+        // Animation
+        opacity: $isVisible && $isOpen ? 1 : 0, 
+        // Reset interactivity properties set by container
+        pointerEvents: $isOpen ? 'all' : 'none', 
+        // We move focus to the modal, but we don't want the blue outline style
+        ':focus': {
+            outline: 'none',
+        } });
+});
+exports.Dialog.displayName = 'Dialog';
+exports.Hidden = (0, style_1.styled)('div', {
+    display: 'none',
+});
+exports.Hidden.displayName = 'Hidden';

package/baseui/modal/types.d.ts

@@ -0,0 +1,74 @@
+import type * as React from 'react';
+import type { Override } from '../helpers/overrides';
+import type { SIZE, ROLE, CLOSE_SOURCE } from './constants';
+export declare type Size = keyof typeof SIZE;
+export declare type SizeProp = Size | number | string;
+export declare type Role = keyof typeof ROLE;
+export declare type RoleProp = Role | string;
+export declare type CloseSource = keyof typeof CLOSE_SOURCE;
+export declare type ModalOverrides = {
+    Root?: Override;
+    Dialog?: Override;
+    DialogContainer?: Override;
+    Close?: Override;
+};
+export declare type ModalProps = {
+    /** Sets whether the Modal should be displayed by easing in and out */
+    animate?: boolean;
+    /** If true, focus will shift to the first interactive element within the modal.
+     * If false, the modal container itself will receive focus.
+     * Moving focus into a newly opened modal is important for accessibility purposes, so please be careful!
+     */
+    autoFocus?: boolean;
+    /** If true, focus will be locked to elements within the modal.
+     */
+    focusLock?: boolean;
+    name?: string;
+    /**
+     * if true, will return focus to the previous position on trap disable.
+     * Optionally, can pass focus options instead of `true` to control the focus
+     * more precisely (ie. `{ preventScroll: true }`)
+     */
+    returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
+    /** Modal content. The children-as-function API may be preferable
+     * for performance reasons (wont render until opened) */
+    children?: React.ReactNode | (() => React.ReactNode);
+    /** Whether the modal should be closeable by the user
+     *  (either via escape, dialog container click, etc). You can set this to
+     * false if your modal has an action that the user must take before closing.*/
+    closeable?: boolean;
+    isOpen?: boolean;
+    /** Where to mount the modal */
+    mountNode?: HTMLElement;
+    /** A callback that is invoked when the modal will close.
+     * Callback is passed a constant identifying what triggered the close. */
+    onClose?: (a: {
+        closeSource?: CloseSource;
+    }) => unknown;
+    overrides?: ModalOverrides;
+    /** Which accessibility role this modal should have. */
+    role?: RoleProp;
+    /** Controls the size of the modal (primarily width).
+     * Can be a SIZE constant or css width property value. */
+    size?: SizeProp;
+    /**
+     * Allows users to render all child content whether a modal is open or not
+     * for SEO purposes
+     */
+    renderAll?: boolean;
+};
+export declare type ModalPropsWithoutChildren = Omit<ModalProps, 'children'>;
+export declare type ModalState = {
+    isVisible: boolean;
+    mounted: boolean;
+    isFocusVisible: boolean;
+};
+export declare type SharedStylePropsArg = {
+    $animate: boolean;
+    $isVisible: boolean;
+    $isOpen: boolean;
+    $size: SizeProp;
+    $role: RoleProp;
+    $closeable: boolean;
+    $isFocusVisible: boolean;
+};

package/baseui/modal/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/baseui/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/baseui/index.js"
+}

package/baseui/payment-card/custom-cards.config.d.ts

@@ -0,0 +1,11 @@
+export declare const CUSTOM_CARDS_CONFIGURATION: {
+    niceType: string;
+    type: string;
+    patterns: number[][];
+    gaps: number[];
+    lengths: number[];
+    code: {
+        name: string;
+        size: number;
+    };
+}[];

package/baseui/payment-card/custom-cards.config.js

@@ -0,0 +1,24 @@
+"use strict";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/*
+  This file should be used for adding new card type configuration
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CUSTOM_CARDS_CONFIGURATION = void 0;
+var UATP_CARD_TYPE_CONFIG = {
+    niceType: 'Uatp',
+    type: 'uatp',
+    patterns: [[1001, 1999]],
+    gaps: [4, 9],
+    lengths: [15],
+    code: {
+        name: 'CVV',
+        size: 0,
+    },
+};
+exports.CUSTOM_CARDS_CONFIGURATION = [UATP_CARD_TYPE_CONFIG];

package/baseui/payment-card/icons/amex.d.ts

@@ -0,0 +1,4 @@
+declare const Amex: ({ size }: {
+    size: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Amex;

package/baseui/payment-card/icons/amex.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Amex = function (_a) {
+    var size = _a.size;
+    return ((0, jsx_runtime_1.jsxs)("svg", (0, tslib_1.__assign)({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M23 4H1V20H23V4Z", fill: "#1071CC" }, void 0), (0, jsx_runtime_1.jsxs)("g", (0, tslib_1.__assign)({ clipPath: "url(#clip0)" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20.4052 6H23.0031V11.6554V13.3873L21.6423 14.8365L23.0031 16.268V18H20.8647L19.7689 16.7982L18.6909 18H11.657V12.3446H9.3772L12.1872 6H14.9089L15.8809 8.15611V6H19.2388L19.822 7.64359L20.4052 6Z", fill: "#fff" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M11.9926 11.6554H10.5081L12.6995 6.70691H14.4315L16.6053 11.5847V6.70691H18.7084L19.8218 9.76435L20.9175 6.70691H23.0029V11.6554H21.6598V8.24446L20.3873 11.6554H19.1855L17.9484 8.24446V11.6554H15.103L14.6612 10.6833H12.3991L11.9926 11.6554Z", fill: "#1071CC" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M14.2018 9.55227L13.5302 7.97937L12.8586 9.55227H14.2018Z", fill: "#fff" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M12.3992 17.3108V12.3623H18.3903L19.8042 13.9529L21.2534 12.3623H23.003L20.6702 14.8365L23.003 17.3108H21.2357L19.7688 15.7379L18.3373 17.3108H12.3992Z", fill: "#1071CC" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M13.7422 14.271V13.5288H16.6052L16.6229 12.3977L18.9381 14.8366L16.6052 17.2755V16.1444H13.7422V15.4021H16.5345V14.271H13.7422Z", fill: "#fff" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", (0, tslib_1.__assign)({ id: "clip0" }, { children: (0, jsx_runtime_1.jsx)("rect", { width: "14", height: "14", fill: "#fff", transform: "translate(9 5)" }, void 0) }), void 0) }, void 0)] }), void 0));
+};
+exports.default = Amex;

package/baseui/payment-card/icons/dinersclub.d.ts

@@ -0,0 +1,4 @@
+declare const DinersClub: ({ size }: {
+    size: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DinersClub;

package/baseui/payment-card/icons/dinersclub.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var DinersClub = function (_a) {
+    var size = _a.size;
+    return ((0, jsx_runtime_1.jsxs)("svg", (0, tslib_1.__assign)({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M23 4H1V20H23V4Z", fill: "#00AEEF" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M13 6C12.66 6 11.34 6 11 6C7.69 6 5 8.69 5 12C5 15.31 7.69 18 11 18C11.34 18 12.66 18 13 18C16.31 18 19 15.31 19 12C19 8.69 16.31 6 13 6Z", fill: "#0269A8" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M11 7C8.24 7 6 9.24 6 12C6 14.76 8.24 17 11 17C13.76 17 16 14.76 16 12C16 9.24 13.76 7 11 7ZM7.5 12C7.5 10.33 8.68 8.93 10.25 8.59V15.42C8.68 15.07 7.5 13.67 7.5 12ZM11.75 15.41V8.57999C13.32 8.91999 14.5 10.32 14.5 11.99C14.5 13.66 13.32 15.07 11.75 15.41Z", fill: "#fff" }, void 0)] }), void 0));
+};
+exports.default = DinersClub;

package/baseui/payment-card/icons/discover.d.ts

@@ -0,0 +1,4 @@
+declare const Discover: ({ size }: {
+    size: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Discover;

package/baseui/payment-card/icons/discover.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Discover = function (_a) {
+    var size = _a.size;
+    return ((0, jsx_runtime_1.jsxs)("svg", (0, tslib_1.__assign)({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M23 4H1V20H23V4Z", fill: "#E7E7E7" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M3.54 12.4401C3.54 12.4401 4.74 12.5701 4.74 11.5201V11.5001C4.74 10.4401 3.54 10.58 3.54 10.58V12.4401ZM3 10.0701H3.93C4.49 10.0701 5.31 10.5801 5.31 11.4801V11.4901V11.5001C5.31 12.4001 4.49 12.9101 3.93 12.9101H3V10.0701Z", fill: "#000" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M6.13006 10.0701H5.56006V12.9201H6.13006V10.0701Z", fill: "#000" }, void 0), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.87007 10.73C7.87007 10.73 7.68007 10.51 7.43007 10.51C7.18007 10.51 7.03007 10.68 7.03007 10.8C7.03007 10.92 7.03007 10.99 7.39007 11.14C7.75007 11.29 8.28007 11.4 8.28007 12.03C8.28007 12.66 7.78007 12.99 7.34007 12.99C6.63007 12.99 6.32007 12.45 6.32007 12.45L6.68007 12.09C6.68007 12.09 6.91007 12.47 7.30007 12.47C7.69007 12.47 7.71007 12.17 7.71007 12.07C7.71007 11.92 7.63007 11.78 7.38007 11.69C7.14007 11.6 6.47007 11.51 6.47007 10.87C6.47007 10.3 6.90007 10.01 7.38007 10.01C7.81007 10.01 8.18007 10.35 8.18007 10.35L7.87007 10.73Z", fill: "#000" }, void 0), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.65 10.84C10.47 10.66 10.23 10.53 9.95996 10.53C9.41996 10.53 8.98996 10.96 8.98996 11.5C8.98996 12.04 9.41996 12.47 9.95996 12.47C10.23 12.47 10.48 12.34 10.65 12.16V12.83C10.44 12.94 10.21 13 9.95996 13C9.12996 13 8.45996 12.33 8.45996 11.5C8.45996 10.67 9.12996 10 9.95996 10C10.21 10 10.44 10.06 10.65 10.17V10.84Z", fill: "#000" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M13.75 10.0701H14.37L15.15 11.9401L15.89 10.0701H16.51L15.31 12.9901H14.95L13.75 10.0701Z", fill: "#000" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M19.2199 10.5401V11.3701H19.5299C19.7699 11.3701 19.9099 11.1601 19.9099 10.9701V10.9301C19.9099 10.7401 19.7599 10.5301 19.5299 10.5301H19.2199V10.5401ZM18.6699 10.0701H19.5999C19.8999 10.0701 20.4899 10.2301 20.4899 10.9101C20.4899 11.5901 19.8799 11.7301 19.8799 11.7301L20.7499 12.9201H20.0599L19.2899 11.7801H19.2299V12.9201H18.6699V10.0701Z", fill: "#000" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M18.25 11.1901V11.7001H17.28V12.4201H18.3V12.9201H16.72V10.0701H18.3V10.5701H17.28V11.1901H18.25Z", fill: "#000" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M12.3699 12.99C13.1873 12.99 13.8499 12.3274 13.8499 11.51C13.8499 10.6927 13.1873 10.03 12.3699 10.03C11.5525 10.03 10.8899 10.6927 10.8899 11.51C10.8899 12.3274 11.5525 12.99 12.3699 12.99Z", fill: "#F58221" }, void 0), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23 14.28V20H8C11.9 19.1 17.56 17.86 23 14.28Z", fill: "#F58221" }, void 0)] }), void 0));
+};
+exports.default = Discover;

package/baseui/payment-card/icons/elo.d.ts

@@ -0,0 +1,4 @@
+declare const Elo: ({ size }: {
+    size: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Elo;

package/baseui/payment-card/icons/elo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Elo = function (_a) {
+    var size = _a.size;
+    return ((0, jsx_runtime_1.jsxs)("svg", (0, tslib_1.__assign)({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M23 4H1V20H23V4Z", fill: "#231F20" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M6.13998 10.17C6.31998 10.11 6.51998 10.07 6.72998 10.07C7.62998 10.07 8.36998 10.71 8.54998 11.55L9.80998 11.3C9.51998 9.86003 8.24998 8.78003 6.72998 8.78003C6.37998 8.78003 6.04998 8.84003 5.72998 8.94003L6.13998 10.17Z", fill: "#FFCB05" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M4.64008 14.2899L5.50008 13.3199C5.11008 12.9799 4.87008 12.4799 4.87008 11.9299C4.87008 11.3799 5.11008 10.8799 5.49008 10.5399L4.64008 9.56995C3.99008 10.1499 3.58008 10.9899 3.58008 11.9299C3.58008 12.8699 3.99008 13.7099 4.64008 14.2899Z", fill: "#00A4E0" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M8.53998 12.3C8.36998 13.15 7.61998 13.78 6.72998 13.78C6.51998 13.78 6.32998 13.75 6.13998 13.68L5.72998 14.91C6.03998 15.02 6.37998 15.07 6.72998 15.07C8.24998 15.07 9.51998 13.99 9.81998 12.55L8.53998 12.3Z", fill: "#EF4123" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M15.6 9.62V13.3L16.17 13.53L15.84 14.29L15.21 14.03C15.07 13.97 14.97 13.87 14.9 13.77C14.83 13.66 14.78 13.51 14.78 13.31V9.62H15.6Z", fill: "#fff" }, void 0), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.92 13.36C10.88 13.29 10.82 13.18 10.79 13.1C10.59 12.63 10.58 12.15 10.75 11.69C10.94 11.18 11.29 10.79 11.75 10.59C12.33 10.34 12.97 10.39 13.53 10.72C13.88 10.92 14.13 11.23 14.32 11.68C14.3328 11.7184 14.3498 11.7569 14.3655 11.7927C14.3744 11.8128 14.3828 11.832 14.39 11.85L10.92 13.36ZM12.08 11.34C11.67 11.52 11.46 11.9 11.5 12.36L13.24 11.61C12.94 11.26 12.55 11.14 12.08 11.34Z", fill: "#fff" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M13.46 12.98L13.42 12.96C13.32 13.13 13.15 13.27 12.95 13.35C12.56 13.52 12.2 13.48 11.94 13.25L11.92 13.29L11.48 13.95C11.59 14.03 11.71 14.09 11.83 14.14C12.32 14.34 12.82 14.33 13.31 14.12C13.67 13.97 13.95 13.73 14.14 13.43L13.46 12.98Z", fill: "#fff" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M17.44 11.57C17.22 11.77 17.08 12.05 17.08 12.36C17.08 12.67 17.22 12.95 17.44 13.14L16.85 13.8C16.45 13.45 16.2 12.93 16.2 12.36C16.2 11.79 16.45 11.27 16.85 10.92L17.44 11.57Z", fill: "#fff" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M18.13 13.4099C18.01 13.4099 17.9 13.3899 17.8 13.3599L17.52 14.1899C17.71 14.2499 17.92 14.2899 18.13 14.2899C19.06 14.2899 19.84 13.6299 20.01 12.7499L19.15 12.5699C19.05 13.0499 18.63 13.4099 18.13 13.4099Z", fill: "#fff" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M17.52 10.5399C17.71 10.4699 17.92 10.4399 18.13 10.4399C19.06 10.4399 19.83 11.0999 20.01 11.9899L19.15 12.1599C19.06 11.6799 18.64 11.3199 18.13 11.3199C18.02 11.3199 17.9 11.3399 17.8 11.3699L17.52 10.5399Z", fill: "#fff" }, void 0)] }), void 0));
+};
+exports.default = Elo;