@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/modal/adapter.js

@@ -2,12 +2,16 @@ import { ROLE } from '../baseui/modal';
 export var getWidthFromSize = function (_a, size) {
     var px2rem = _a.px2rem;
     switch (size) {
+        case 'medium':
+            return px2rem(600);
         case 'sm':
             return px2rem(520);
         case 'md':
             return px2rem(720);
         case 'lg':
             return px2rem(1220);
+        case 'fullPage':
+            return '94vw';
         default:
             return 'auto';
     }

package/esm/modal/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Modal } from './modal';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalFooter } from './modal-footer';
-export { FocusOnce } from '../baseui/modal';
-export { ModalBody, StyledRoot, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
-export type { SharedProps, ModalProps, ModalState, Size, Role, } from './types';
+export { FocusOnce, isModalOpen } from '../baseui/modal';
+export { ModalBody, StyledRoot, StyledDialog, StyledDialogContainer, StyledModal } from './styled-components';
+export type { SharedProps, ModalProps, ModalHeaderProps, ModalFooterProps, ModalState, Size, Role, } from './types';
 export { CLOSE_SOURCE } from './types';

package/esm/modal/index.js

@@ -1,6 +1,6 @@
 export { default as Modal } from './modal';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalFooter } from './modal-footer';
-export { FocusOnce } from '../baseui/modal';
-export { ModalBody, StyledRoot, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
+export { FocusOnce, isModalOpen } from '../baseui/modal';
+export { ModalBody, StyledRoot, StyledDialog, StyledDialogContainer, StyledModal } from './styled-components';
 export { CLOSE_SOURCE } from './types';

package/esm/modal/modal-footer.js

@@ -5,7 +5,7 @@ import { add$props } from '../helpers';
 var ModalFooter = function (_a) {
     var noBorder = _a.noBorder, props = __rest(_a, ["noBorder"]);
     var sharedProps = add$props({ noBorder: noBorder });
-    return _jsx(StyledModalFooter, __assign({}, props, sharedProps), void 0);
+    return _jsx(StyledModalFooter, __assign({}, props, sharedProps));
 };
 ModalFooter.displayName = 'ModalFooter';
 export default ModalFooter;

package/esm/modal/modal-header.d.ts

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-import { ModalHeaderProps } from './types';
+import { type ReactElement } from 'react';
+import type { ModalHeaderProps } from './types';
 declare const ModalHeader: {
-    ({ noBorder, ...restProps }: ModalHeaderProps): ReactElement;
+    ({ noBorder, children, description, id, ...restProps }: ModalHeaderProps): ReactElement;
     displayName: string;
 };
 export default ModalHeader;

package/esm/modal/modal-header.js

@@ -1,11 +1,27 @@
 import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyledModalHeader } from './styled-components';
+import { Grid, Col } from '../grid';
+import { Typography, TYPOGRAPHY_VARIANT_VS_CLASS_MAP } from '../typography';
 import { add$props } from '../helpers';
+import { useModalContext } from './ModalContext';
+var HEADER_TEXT_CLASSES = TYPOGRAPHY_VARIANT_VS_CLASS_MAP['heading-5'];
+var ModalHeaderContent = function (_a) {
+    var icon = _a.icon, children = _a.children, description = _a.description, titleId = _a.titleId;
+    if (!icon && !description) {
+        return children;
+    }
+    return (_jsxs(Grid, __assign({ style: icon ? { gridTemplateColumns: 'auto 1fr' } : {}, gap: 2 }, { children: [icon ? _jsx(Col, __assign({ className: "flex items-center justify-center" }, { children: icon })) : null, _jsx(Col, __assign({ id: titleId, className: ['truncate', HEADER_TEXT_CLASSES] }, { children: children })), description ? (_jsx(Col, __assign({ className: icon ? 'col-start-2' : '' }, { children: _jsx(Typography, __assign({ variant: "body-sm" }, { children: description })) }))) : null] })));
+};
 var ModalHeader = function (_a) {
-    var noBorder = _a.noBorder, restProps = __rest(_a, ["noBorder"]);
-    var sharedProps = add$props({ noBorder: noBorder });
-    return _jsx(StyledModalHeader, __assign({}, restProps, sharedProps), void 0);
+    var _b = _a.noBorder, noBorder = _b === void 0 ? true : _b, children = _a.children, description = _a.description, id = _a.id, restProps = __rest(_a, ["noBorder", "children", "description", "id"]);
+    var _c = useModalContext(), icon = _c.icon, headerTitleId = _c.headerTitleId, closeable = _c.closeable;
+    var sharedProps = add$props({ noBorder: noBorder, icon: icon, closeable: closeable });
+    var titleId = id !== null && id !== void 0 ? id : headerTitleId;
+    var hasLayout = Boolean(icon || description);
+    return (_jsx(StyledModalHeader, __assign({}, restProps, sharedProps, { id: hasLayout ? undefined : titleId, 
+        // Pass typography classes to ModalHeader if we don't add any layout elements
+        className: [!icon && !description ? HEADER_TEXT_CLASSES : undefined, restProps.className] }, { children: _jsx(ModalHeaderContent, __assign({ icon: icon, description: description, titleId: hasLayout ? titleId : undefined }, { children: children })) })));
 };
 ModalHeader.displayName = 'ModalHeader';
 export default ModalHeader;

package/esm/modal/modal.d.ts

@@ -1,7 +1,16 @@
-import * as React from 'react';
-import { ModalProps } from './types';
-declare const _default: React.MemoExoticComponent<{
-    ({ size, role, ariaLabel, overrides, ...props }: ModalProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+import { type ReactElement } from 'react';
+import type { ModalProps } from './types';
+import Alert from '../icon/components/alert-solid';
+import Tick from '../icon/components/tickCircle-solid';
+import Warning from '../icon/components/warning-solid';
+export declare const INTENT_TO_ICON: {
+    success: typeof Tick;
+    error: typeof Alert;
+    warning: typeof Warning;
+};
+declare const _default: import("react").MemoExoticComponent<{
+    ({ size, role, ariaLabel, ariaLabelledBy, icon: _icon, intent, overrides, ...props }: ModalProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
+    __standard: string;
 }>;
 export default _default;

package/esm/modal/modal.js

@@ -1,7 +1,6 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { IconButton } from '../button';
 import Close from '../icon/components/close';
 import { useStyle } from '../style';
@@ -11,27 +10,84 @@ import { StyledModal } from './styled-components';
 import { add$props } from '../helpers';
 import { useLocale } from '../locale';
 import { mergeOverrides } from '../overrides';
-var CloseButton = function (closeProps) { return (_jsx(IconButton, __assign({}, closeProps, { children: _jsx(Close, {}, void 0) }), void 0)); };
+import { ModalContextProvider } from './ModalContext';
+import useUniqueId from '../hooks/useUniqueId';
+import Alert from '../icon/components/alert-solid';
+import Tick from '../icon/components/tickCircle-solid';
+import Warning from '../icon/components/warning-solid';
+import { isDarkTheme } from '../helpers/themeHelpers';
+var CloseButton = function (closeProps) { return (_jsx(IconButton, __assign({}, closeProps, { children: _jsx(Close, {}) }))); };
+export var INTENT_TO_ICON = {
+    success: Tick,
+    error: Alert,
+    warning: Warning,
+};
+var getWarningIconClassName = function (_a) {
+    var theme = _a.theme;
+    var isDark = isDarkTheme(theme);
+    return "spr-icon-warning ".concat(isDark ? 'spr-text-inverse' : 'spr-text-secondary');
+};
+var INTENT_TO_CLASSNAME = {
+    success: 'spr-icon-success',
+    error: 'spr-icon-error',
+    warning: getWarningIconClassName,
+};
 var Modal = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.role, role = _c === void 0 ? 'dialog' : _c, ariaLabel = _a.ariaLabel, overrides = _a.overrides, props = __rest(_a, ["size", "role", "ariaLabel", "overrides"]);
+    var _b;
+    var _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.role, role = _d === void 0 ? 'dialog' : _d, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, _icon = _a.icon, _e = _a.intent, intent = _e === void 0 ? 'default' : _e, overrides = _a.overrides, props = __rest(_a, ["size", "role", "ariaLabel", "ariaLabelledBy", "icon", "intent", "overrides"]);
     var utils = useStyle();
-    var theme = utils.theme;
-    var sharedProps = useMemo(function () { return add$props({ dialogSize: size }); }, [size]);
+    var px2rem = utils.px2rem;
+    var headerTitleId = useUniqueId();
+    var icon = useMemo(function () {
+        if (_icon)
+            return _icon;
+        var IconElement = INTENT_TO_ICON[intent];
+        if (IconElement)
+            return _jsx(IconElement, { size: 24, className: INTENT_TO_CLASSNAME[intent] });
+        return null;
+    }, [_icon, intent]);
+    var sharedProps = useMemo(function () { return add$props({ dialogSize: size, icon: icon, intent: intent }); }, [icon, size, intent]);
     var locale = useLocale();
+    var dialogueHeightStyles = useMemo(function () {
+        if (size === 'medium') {
+            return { '--sw-max-height': "".concat(px2rem(550)) };
+        }
+        if (size === 'sm') {
+            return { '--sw-max-height': "min(".concat(px2rem(560), ",95%)") };
+        }
+        if (size === 'md') {
+            return { '--sw-max-height': "min(".concat(px2rem(660), ", 95%)") };
+        }
+        if (size === 'lg') {
+            return { '--sw-height': '90%' };
+        }
+        if (size === 'fullPage') {
+            return { '--sw-width': '94vw', '--sw-height': '88vh' };
+        }
+        return {};
+    }, [size, px2rem]);
+    var dialogA11yProps = useMemo(function () { return ({
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy || headerTitleId,
+    }); }, [ariaLabel, ariaLabelledBy, headerTitleId]);
     var _overrides = useMemo(function () {
         return mergeOverrides({
-            DialogContainer: { style: getDialogContainerStyles, props: sharedProps },
+            DialogContainer: { className: getDialogContainerStyles, props: sharedProps },
             Dialog: {
-                style: getDialogStyles,
-                props: __assign(__assign({}, (ariaLabel ? { 'aria-label': ariaLabel } : undefined)), sharedProps),
+                className: getDialogStyles,
+                style: dialogueHeightStyles,
+                props: __assign(__assign({}, dialogA11yProps), sharedProps),
             },
             Close: {
                 component: CloseButton,
                 props: getCloseButtonProps(utils, sharedProps, locale.modal.closeAriaLabel),
             },
         }, overrides);
-    }, [sharedProps, ariaLabel, utils, locale.modal.closeAriaLabel, overrides]);
-    return (_jsx(StyledModal, __assign({}, props, { size: getWidthFromSize(utils, size), role: roleMap[role], overrides: _overrides }), void 0));
+    }, [dialogueHeightStyles, sharedProps, dialogA11yProps, utils, locale.modal.closeAriaLabel, overrides]);
+    var closeable = (_b = props.closeable) !== null && _b !== void 0 ? _b : true;
+    var contextValue = useMemo(function () { return ({ intent: intent, icon: icon, headerTitleId: headerTitleId, closeable: closeable }); }, [intent, icon, headerTitleId, closeable]);
+    return (_jsx(ModalContextProvider, __assign({ value: contextValue }, { children: _jsx(StyledModal, __assign({}, props, { size: getWidthFromSize(utils, size), role: roleMap[role], overrides: _overrides })) })));
 };
 Modal.displayName = 'Modal';
-export default React.memo(Modal);
+Modal.__standard = 'Component';
+export default memo(Modal);

package/esm/modal/overrides.d.ts

@@ -1,8 +1,6 @@
 import { IconButtonProps } from '../button/IconButton';
-import { Styles, StyleUtils } from '../types';
+import { ClassName, StyleUtils } from '../types';
 import { SharedProps } from './types';
-export declare const getDialogContainerStyles: Styles;
-export declare const getDialogStyles: Styles;
-export declare const getCloseButtonProps: ({ px2rem, theme }: StyleUtils, { $dialogSize }: {
-    $dialogSize: SharedProps['$size'];
-}, ariaLabel: string) => IconButtonProps;
+export declare const getDialogContainerStyles: ClassName;
+export declare const getDialogStyles: ClassName;
+export declare const getCloseButtonProps: (_utils: StyleUtils, { $dialogSize }: SharedProps, ariaLabel: string) => IconButtonProps;

package/esm/modal/overrides.js

@@ -1,57 +1,56 @@
-import { __assign } from "tslib";
-import { borderColor } from '../helpers/longHandHelpers';
-var getDialogHeightControl = function (_a, _b) {
-    var px2rem = _a.px2rem;
-    var $dialogSize = _b.$dialogSize;
+var getDialogHeightControl = function (_, _a) {
+    var $dialogSize = _a.$dialogSize;
     switch ($dialogSize) {
         case 'sm':
-            return { maxHeight: "min(".concat(px2rem(560), ",95%)") };
         case 'md':
-            return { maxHeight: "min(".concat(px2rem(660), ", 95%)") };
+        case 'medium':
+            return 'max-h-[--sw-max-height]';
         case 'lg':
-            return { height: '90%' };
+            return 'h-[--sw-height]';
         case 'fullPage':
-            return {
-                width: '94vw',
-                height: '88vh',
-                marginTop: px2rem(44),
-            };
+            return 'h-[--sw-height] w-[--sw-width] mt-11';
         default:
-            return undefined;
+            return '';
     }
 };
-var getDialogContainerHeightControl = function (utils, _a) {
+var getDialogContainerHeightControl = function (_, _a) {
     var $dialogSize = _a.$dialogSize;
     return ($dialogSize === 'lg' ? 'h-full' : '');
 };
-var transitionDuration = function (_a, _b) {
-    var theme = _a.theme;
-    var $animate = _b.$animate;
-    return ($animate ? { transitionDuration: '200ms' } : {});
+var transitionDuration = function (_, _a) {
+    var $animate = _a.$animate;
+    return ($animate ? 'duration-200' : '');
 };
 export var getDialogContainerStyles = [
-    'border-box spr-overlay h-full',
+    'border-box spr-bg-overlay h-full',
     getDialogContainerHeightControl,
     transitionDuration,
 ];
 export var getDialogStyles = [
-    'transform-none flex flex-col spr-shadow-02 rounded-8',
+    'transform-none flex flex-col spr-shadow-200 rounded-24',
     getDialogHeightControl,
     transitionDuration,
 ];
-export var getCloseButtonProps = function (_a, _b, ariaLabel) {
-    var px2rem = _a.px2rem, theme = _a.theme;
-    var $dialogSize = _b.$dialogSize;
+export var getCloseButtonProps = function (_utils, _a, ariaLabel) {
+    var $dialogSize = _a.$dialogSize;
     return ({
-        size: 'sm',
+        size: 'xs',
         'aria-label': ariaLabel,
         overrides: {
             BaseButton: {
-                style: __assign({ position: 'absolute', top: px2rem(12), right: px2rem(16) }, ($dialogSize === 'fullPage'
-                    ? __assign(__assign({ top: px2rem(-44), right: px2rem(0), backgroundColor: theme.spr.ui01, color: theme.spr.icon02 }, borderColor(theme.borderColor.transparent)), { ':hover': {
-                            color: theme.spr.ui04,
-                            backgroundColor: theme.spr.ui06,
-                        } }) : {})),
+                className: [
+                    'absolute top-[--sw-top]',
+                    $dialogSize === 'fullPage'
+                        ? '-top-11 right-0 spr-ui-01 border-transparent spr-text-02 hover:spr-text-04 hover:spr-ui-06'
+                        : 'right-[--sw-right]',
+                ],
+                style: function (_a) {
+                    var px2rem = _a.px2rem;
+                    return ({
+                        '--sw-top': px2rem(24),
+                        '--sw-right': px2rem(24),
+                    });
+                },
             },
         },
     });

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

@@ -1,7 +1,7 @@
-import { ModalProps as BaseModalProps } from '../baseui/modal';
-import * as React from 'react';
-export { StyledRoot, StyledClose, StyledDialog, StyledDialogContainer } from '../baseui/modal';
-export declare const StyledModal: React.ComponentType<BaseModalProps>;
-export declare const StyledModalHeader: import("../style/styled").StyledComponent;
-export declare const ModalBody: import("../style/styled").StyledComponent;
-export declare const StyledModalFooter: import("../style/styled").StyledComponent;
+import type { ComponentType } from 'react';
+import type { ModalProps as BaseModalProps } from '../baseui/modal';
+export { StyledRoot, StyledDialog, StyledDialogContainer } from '../baseui/modal';
+export declare const StyledModal: ComponentType<BaseModalProps>;
+export declare const StyledModalHeader: import("../style").StyledComponent;
+export declare const ModalBody: import("../style").StyledComponent;
+export declare const StyledModalFooter: import("../style").StyledComponent;

package/esm/modal/styled-components.js

@@ -1,22 +1,15 @@
+import cx from 'classnames';
 import { Modal as BaseModal } from '../baseui/modal';
 import { styled } from '../style';
-export { StyledRoot, StyledClose, StyledDialog, StyledDialogContainer } from '../baseui/modal';
-// @ts-ignore
-BaseModal.displayName = 'BaseUIModal';
+import { TYPOGRAPHY_VARIANT_VS_CLASS_MAP } from '../typography/constants';
+export { StyledRoot, StyledDialog, StyledDialogContainer } from '../baseui/modal';
 export var StyledModal = BaseModal;
-export var StyledModalHeader = styled('div', 'typography-h4 spr-text-01 font-bold border-t-0 border-r-0 border-l-0 pt-4 px-6', function (_a, _b) {
-    var px2rem = _a.px2rem;
-    var $noBorder = _b.$noBorder;
-    return ({ lineHeight: $noBorder ? px2rem(28) : px2rem(24) });
-}, function (utils, _a) {
-    var $noBorder = _a.$noBorder;
-    return ($noBorder ? 'pb-0' : 'border-b-1 border-solid spr-border-02 pb-4');
+export var StyledModalHeader = styled('div', 'spr-text-primary border-0 p-6 flex', function (_utils, _a) {
+    var $noBorder = _a.$noBorder, $closeable = _a.$closeable;
+    return cx($noBorder ? 'pb-0' : 'border-b-1 border-solid spr-border-primary', { 'pr-16': $closeable });
 });
-export var ModalBody = styled('div', 'typography-bl1 spr-text-01 overflow-auto flex-grow px-6 py-4');
-export var StyledModalFooter = styled('div', 'border-b-0 border-l-0 border-r-0 pb-4 px-6', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({ lineHeight: px2rem(28), textAlign: 'right' });
-}, function (utils, _a) {
+export var ModalBody = styled('div', "".concat(TYPOGRAPHY_VARIANT_VS_CLASS_MAP['body-sm'], " spr-text-primary overflow-auto grow p-6 sw-transparent-scrollbar sw-transparent-scrollbar-thumb"));
+export var StyledModalFooter = styled('div', 'border-0 p-6 text-right', function (utils, _a) {
     var $noBorder = _a.$noBorder;
-    return ($noBorder ? 'pt-0' : 'border-t-1 border-solid spr-border-02 pt-4');
+    return $noBorder ? 'pt-0' : 'border-t-1 border-solid spr-border-primary';
 });

package/esm/modal/types.d.ts

@@ -1,23 +1,40 @@
-import { ModalOverrides, ModalProps as BaseModalProps, SharedStylePropsArg } from '../baseui/modal';
-import { Override } from '../overrides';
-import { SpacewebComponentProps } from '../types';
-export declare type Size = 'sm' | 'md' | 'lg' | 'fullPage';
-export declare type Role = 'dialog' | 'alertdialog';
-export declare type SharedProps = Omit<SharedStylePropsArg, '$size'> & {
-    $size?: Size;
+import type { ReactNode } from 'react';
+import type { ModalOverrides, ModalProps as BaseModalProps, SharedStylePropsArg } from '../baseui/modal';
+import type { Override } from '../overrides';
+import type { Intent as BaseIntent, SpacewebComponentProps } from '../types';
+/**
+ * @deprecated Only 'medium' is supported as a new default size.
+ */
+export type Size = 'medium' | 'sm' | 'md' | 'lg' | 'fullPage';
+export type Role = 'dialog' | 'alertdialog';
+export type SharedProps = Omit<SharedStylePropsArg, '$size'> & {
+    $dialogSize?: Size;
+    $intent?: Intent;
+    $icon?: ReactNode;
 };
-export declare type ModalProps = Omit<BaseModalProps, 'overrides' | 'size' | 'role'> & {
+export type Intent = Exclude<BaseIntent, 'ai'>;
+export type ModalProps = Omit<BaseModalProps, 'overrides' | 'size' | 'role'> & {
+    icon?: ReactNode;
+    intent?: Intent;
     overrides?: {
         [key in keyof ModalOverrides]?: Override<SharedProps & Record<string, any>>;
     };
+    /**
+     * @deprecated 'size' is deprecated and the 'md' sizing is the new default.
+     */
     size?: Size;
     role?: Role;
+    /** Explicit accessible label for the dialog. Defaults to "dialog" when no labelled-by target is available. */
     ariaLabel?: string;
+    /** Explicit id reference for the dialog accessible name. Takes precedence over ariaLabel and ModalHeader labelling. */
+    ariaLabelledBy?: string;
 };
-export declare type ModalHeaderProps = SpacewebComponentProps & {
+export type ModalHeaderProps = SpacewebComponentProps & {
     noBorder?: boolean;
+    /** Supporting content rendered below the title (subtitle, helper text, or any React node). */
+    description?: ReactNode;
 };
-export declare type ModalFooterProps = SpacewebComponentProps & {
+export type ModalFooterProps = SpacewebComponentProps & {
     noBorder?: boolean;
 };
 export type { ModalState } from '../baseui/modal';

package/esm/number/Number.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { NumberProps } from './types';
-export declare const Number: ({ value, variant, numberOptions }: NumberProps) => JSX.Element;
+export declare const Number: {
+    ({ value, variant, numberOptions }: NumberProps): JSX.Element;
+    __standard: string;
+};

package/esm/number/Number.js

@@ -6,5 +6,6 @@ import { DEFAULT_VARIANT } from './constants';
 export var Number = function (_a) {
     var value = _a.value, _b = _a.variant, variant = _b === void 0 ? DEFAULT_VARIANT : _b, numberOptions = _a.numberOptions;
     var formattedNumber = useNumber({ value: value, variant: variant, numberOptions: numberOptions });
-    return _jsx(_Fragment, { children: formattedNumber }, void 0);
+    return _jsx(_Fragment, { children: formattedNumber });
 };
+Number.__standard = 'Component';

package/esm/number/types.d.ts

@@ -1,5 +1,5 @@
 import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
-export declare type NumberProps = {
+export type NumberProps = {
     value: number;
     variant?: NumberVariant;
     numberOptions?: Intl.NumberFormatOptions;

package/esm/overrides/mergeOverrides.d.ts

@@ -1,4 +1,4 @@
 import { Override, OverrideObject, Overrides, OverridesObject } from './types';
 declare const mergeOverride: <T>(_target?: Override<T> | undefined, _source?: Override<T> | undefined) => OverrideObject<T>;
-declare const mergeOverrides: <T>(target: Overrides<T>, source?: Overrides<T>) => OverridesObject<T>;
+declare const mergeOverrides: <T>(target?: Overrides<T>, source?: Overrides<T>) => OverridesObject<T>;
 export { mergeOverrides, mergeOverride };

package/esm/overrides/mergeOverrides.js

@@ -22,18 +22,35 @@ var mergeOverride = function (_target, _source) {
         if (target.props.ref && source.props.ref) {
             merged.props.ref = combineRefs(target.props.ref, source.props.ref);
         }
+        else if (target.props.ref || source.props.ref) {
+            merged.props.ref = target.props.ref || source.props.ref;
+        }
         if (_isObject(target.props.overrides) && _isObject(source.props.overrides)) {
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             merged.props.overrides = mergeOverrides(target.props.overrides, source.props.overrides);
         }
+        else if (_isObject(target.props.overrides) || _isObject(source.props.overrides)) {
+            merged.props.overrides = target.props.overrides || source.props.overrides;
+        }
+    }
+    else if ((target === null || target === void 0 ? void 0 : target.props) || (source === null || source === void 0 ? void 0 : source.props)) {
+        merged.props = (target === null || target === void 0 ? void 0 : target.props) || (source === null || source === void 0 ? void 0 : source.props);
     }
     if ((target === null || target === void 0 ? void 0 : target.style) && (source === null || source === void 0 ? void 0 : source.style)) {
         merged.style = [target.style, source.style];
     }
+    if ((target === null || target === void 0 ? void 0 : target.className) && (source === null || source === void 0 ? void 0 : source.className)) {
+        merged.className = [target.className, source.className];
+    }
     return merged;
 };
 var mergeOverrides = function (target, source) {
+    if (target === void 0) { target = {}; }
     if (source === void 0) { source = {}; }
+    if (target === null || Object.keys(target).length === 0)
+        return source;
+    if (source === null || Object.keys(source).length === 0)
+        return target;
     var allIdentifiers = Object.keys(__assign(__assign({}, target), source));
     return allIdentifiers.reduce(function (acc, name) {
         acc[name] = mergeOverride(target[name], source[name]);

package/esm/overrides/types.d.ts

@@ -2,17 +2,21 @@
  * @author Ivan Torres
  */
 import * as React from 'react';
-import { Styles } from '../types';
-export declare type StyleOverride<P> = Styles;
-declare type ComponentOverride<P> = React.ComponentType<P> | React.ForwardRefRenderFunction<unknown, P>;
+import { Styles, ClassName } from '../types';
+export type StyleOverride<P> = Styles;
+type ComponentWithProps<P> = React.ComponentType<P> | React.ForwardRefRenderFunction<unknown, P>;
+type ComponentOverride<P> = ComponentWithProps<P> | ComponentWithProps<P & {
+    $DefaultComponent: React.ComponentType<P>;
+}>;
 export interface OverrideObject<P> {
     component?: ComponentOverride<P>;
     props?: {
         [key: string]: unknown;
     };
     style?: StyleOverride<P>;
+    className?: ClassName;
 }
-export declare type Override<P> = OverrideObject<P> | React.ComponentType<P>;
+export type Override<P> = OverrideObject<P> | React.ComponentType<P>;
 export interface Overrides<T = unknown> {
     [key: string]: Override<T> | undefined;
 }

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

@@ -0,0 +1,12 @@
+var UATP_CARD_TYPE_CONFIG = {
+    niceType: 'Uatp',
+    type: 'uatp',
+    patterns: [[1001, 1999]],
+    gaps: [4, 9],
+    lengths: [15],
+    code: {
+        name: 'CVV',
+        size: 0,
+    },
+};
+export var CUSTOM_CARDS_CONFIGURATION = [UATP_CARD_TYPE_CONFIG];

package/esm/payment-card/cvaConfigs.d.ts

@@ -0,0 +1 @@
+export declare const paymentCardIconCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;

package/esm/payment-card/cvaConfigs.js

@@ -0,0 +1,18 @@
+import { cvaWrapper } from '../style/cvaWrapper';
+export var paymentCardIconCVA = cvaWrapper('paymentCard', 'icon', [
+    'flex items-center h-full',
+    {
+        variants: {
+            $size: {
+                xxxs: 'h-5.5 mx-1.75 text-13 leading-4',
+                xs: 'h-7.5 mx-2.75 text-14 leading-4.5',
+                sm: 'h-8.5 mx-2.75 text-14 leading-4.5',
+                md: 'h-9.5 mx-2.75 text-14 leading-4.5',
+                lg: 'h-9.5 mx-2.75 text-14 leading-4.5',
+            },
+        },
+        defaultVariants: {
+            $size: 'md',
+        },
+    },
+]);

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

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Amex = function (_a) {
+    var size = _a.size;
+    return (_jsxs("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M23 4H1V20H23V4Z", fill: "#1071CC" }), _jsxs("g", __assign({ clipPath: "url(#clip0)" }, { children: [_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" }), _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" }), _jsx("path", { d: "M14.2018 9.55227L13.5302 7.97937L12.8586 9.55227H14.2018Z", fill: "#fff" }), _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" }), _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" })] })), _jsx("defs", { children: _jsx("clipPath", __assign({ id: "clip0" }, { children: _jsx("rect", { width: "14", height: "14", fill: "#fff", transform: "translate(9 5)" }) })) })] })));
+};
+export default Amex;

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

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DinersClub = function (_a) {
+    var size = _a.size;
+    return (_jsxs("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M23 4H1V20H23V4Z", fill: "#00AEEF" }), _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" }), _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" })] })));
+};
+export default DinersClub;

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

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Discover = function (_a) {
+    var size = _a.size;
+    return (_jsxs("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M23 4H1V20H23V4Z", fill: "#E7E7E7" }), _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" }), _jsx("path", { d: "M6.13006 10.0701H5.56006V12.9201H6.13006V10.0701Z", fill: "#000" }), _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" }), _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" }), _jsx("path", { d: "M13.75 10.0701H14.37L15.15 11.9401L15.89 10.0701H16.51L15.31 12.9901H14.95L13.75 10.0701Z", fill: "#000" }), _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" }), _jsx("path", { d: "M18.25 11.1901V11.7001H17.28V12.4201H18.3V12.9201H16.72V10.0701H18.3V10.5701H17.28V11.1901H18.25Z", fill: "#000" }), _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" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23 14.28V20H8C11.9 19.1 17.56 17.86 23 14.28Z", fill: "#F58221" })] })));
+};
+export default Discover;

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

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Elo = function (_a) {
+    var size = _a.size;
+    return (_jsxs("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M23 4H1V20H23V4Z", fill: "#231F20" }), _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" }), _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" }), _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" }), _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" }), _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" }), _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" }), _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" }), _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" }), _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" })] })));
+};
+export default Elo;

package/esm/payment-card/icons/generic.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Generic = function (_a) {
+    var size = _a.size;
+    return (_jsxs("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M23 4H1V20H23V4Z", fill: "#C9C9CD" }), _jsx("path", { d: "M6 15H3V16H6V15Z", fill: "#fff" }), _jsx("path", { d: "M11 15H8V16H11V15Z", fill: "#fff" }), _jsx("path", { d: "M16 15H13V16H16V15Z", fill: "#fff" }), _jsx("path", { d: "M21 15H18V16H21V15Z", fill: "#fff" }), _jsx("path", { d: "M21 6H16V10H21V6Z", fill: "#ABABB3" })] })));
+};
+export default Generic;