@alfalab/core-components 48.9.0-beta.1 → 48.9.0-beta.3

package/tag/components/base-tag/Component.d.ts

@@ -94,7 +94,7 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Размер компонента
      * @description xxs, xs, s, m, l, xl deprecated, используйте вместо них 32, 40, 48, 56, 64, 72 соответственно
      */
-    size?: "xxs" | "xs" | "s" | "m" | "l" | "xl" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Дочерние элементы.
      */

package/textarea/Component.js

@@ -9,7 +9,7 @@ var coreComponentsFormControl = require('../form-control');
 var coreComponentsMq = require('../mq');
 var coreComponentsShared = require('../shared');
 var hooks = require('@alfalab/hooks');
-var components_PseudoTextArea = require('./PseudoTextArea-2f74fe87.js');
+var components_PseudoTextArea = require('./PseudoTextArea-c5f855a9.js');
 var consts = require('./consts.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

package/textarea/components/PseudoTextArea.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('classnames');
 require('../consts.js');
-var components_PseudoTextArea = require('../PseudoTextArea-2f74fe87.js');
+var components_PseudoTextArea = require('../PseudoTextArea-c5f855a9.js');
 
 
 

package/textarea/components/index.d.ts

@@ -1 +1 @@
-export * from "../PseudoTextArea-2f74fe87";
+export * from "../PseudoTextArea-c5f855a9";

package/textarea/components/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_PseudoTextArea = require('../PseudoTextArea-2f74fe87.js');
+var components_PseudoTextArea = require('../PseudoTextArea-c5f855a9.js');
 
 
 

package/textarea/esm/Component.js

@@ -7,7 +7,7 @@ import { FormControl } from '../../form-control/esm';
 import { useIsDesktop } from '../../mq/esm';
 import { getDataTestId } from '../../shared/esm';
 import { useFocus } from '@alfalab/hooks';
-import { s as styles, P as PseudoTextArea } from './PseudoTextArea-a2a9e826.js';
+import { s as styles, P as PseudoTextArea } from './PseudoTextArea-d95432f5.js';
 import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
 
 var defaultColors = {"input":"textarea__input_r2etn","hasInnerLabel":"textarea__hasInnerLabel_r2etn","disableUserInput":"textarea__disableUserInput_r2etn","error":"textarea__error_r2etn","textarea":"textarea__textarea_r2etn","hint":"textarea__hint_r2etn"};

package/textarea/esm/components/PseudoTextArea.js

@@ -1,4 +1,4 @@
 import 'react';
 import 'classnames';
-export { P as PseudoTextArea } from '../PseudoTextArea-a2a9e826.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-d95432f5.js';
 import '../consts.js';

package/textarea/esm/components/index.d.ts

@@ -1 +1 @@
-export * from "../PseudoTextArea-a2a9e826";
+export * from "../PseudoTextArea-d95432f5";

package/textarea/esm/components/index.js

@@ -1,4 +1,4 @@
-export { P as PseudoTextArea } from '../PseudoTextArea-a2a9e826.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-d95432f5.js';
 import 'react';
 import 'classnames';
 import '../consts.js';

package/textarea/esm/index.js

@@ -8,5 +8,5 @@ import '../../form-control/esm';
 import '../../mq/esm';
 import '../../shared/esm';
 import '@alfalab/hooks';
-import './PseudoTextArea-a2a9e826.js';
+import './PseudoTextArea-d95432f5.js';
 import './consts.js';

package/textarea/modern/Component.js

@@ -6,7 +6,7 @@ import { FormControl } from '../../form-control/modern';
 import { useIsDesktop } from '../../mq/modern';
 import { getDataTestId } from '../../shared/modern';
 import { useFocus } from '@alfalab/hooks';
-import { s as styles, P as PseudoTextArea } from './PseudoTextArea-2264d209.js';
+import { s as styles, P as PseudoTextArea } from './PseudoTextArea-bd97713f.js';
 import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
 
 const defaultColors = {"input":"textarea__input_r2etn","hasInnerLabel":"textarea__hasInnerLabel_r2etn","disableUserInput":"textarea__disableUserInput_r2etn","error":"textarea__error_r2etn","textarea":"textarea__textarea_r2etn","hint":"textarea__hint_r2etn"};

package/textarea/modern/components/PseudoTextArea.js

@@ -1,4 +1,4 @@
 import 'react';
 import 'classnames';
-export { P as PseudoTextArea } from '../PseudoTextArea-2264d209.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-bd97713f.js';
 import '../consts.js';

package/textarea/modern/components/index.d.ts

@@ -1 +1 @@
-export * from "../PseudoTextArea-2264d209";
+export * from "../PseudoTextArea-bd97713f";

package/textarea/modern/components/index.js

@@ -1,4 +1,4 @@
-export { P as PseudoTextArea } from '../PseudoTextArea-2264d209.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-bd97713f.js';
 import 'react';
 import 'classnames';
 import '../consts.js';

package/textarea/modern/index.js

@@ -7,5 +7,5 @@ import '../../form-control/modern';
 import '../../mq/modern';
 import '../../shared/modern';
 import '@alfalab/hooks';
-import './PseudoTextArea-2264d209.js';
+import './PseudoTextArea-bd97713f.js';
 import './consts.js';

package/themes/compiled/mobile-dark-bluetint.css

@@ -1,25 +1,4 @@
-.card-image__cardImage_i6eij {
-    background: #e7e8ea;
-} .card-image__loaded_i6eij {
-    background: transparent
-}.backdrop__backdrop_1cdt1 {
-    -webkit-tap-highlight-color: transparent;
-} .backdrop__appear_1cdt1,
-.backdrop__enter_1cdt1 {
-    background-color: transparent;
-} .backdrop__appearActive_1cdt1,
-.backdrop__enterActive_1cdt1,
-.backdrop__appearDone_1cdt1,
-.backdrop__enterDone_1cdt1 {
-    background-color: rgba(0, 0, 0, 0.7);
-} .backdrop__exit_1cdt1 {
-    background-color: rgba(0, 0, 0, 0.7);
-} .backdrop__exitActive_1cdt1,
-.backdrop__exitDone_1cdt1 {
-    background-color: transparent;
-} .backdrop__transparent_1cdt1.backdrop__transparent_1cdt1 {
-    background-color: transparent;
-}.badge__component_1nphh.badge__background-accent_1nphh {
+.badge__component_1nphh.badge__background-accent_1nphh {
         background-color: #f83a2a;
         color: rgba(255, 255, 255, 0.94);
     } .badge__component_1nphh.badge__background-specialbg-secondary-transparent_1nphh {
@@ -79,6 +58,27 @@
         background-color: rgba(255, 255, 255, 0.94);
     } .badge__dot_1nphh.badge__outlineCount_1nphh {
     border: 1px solid rgba(3, 3, 6, 0.88);
+}.backdrop__backdrop_1cdt1 {
+    -webkit-tap-highlight-color: transparent;
+} .backdrop__appear_1cdt1,
+.backdrop__enter_1cdt1 {
+    background-color: transparent;
+} .backdrop__appearActive_1cdt1,
+.backdrop__enterActive_1cdt1,
+.backdrop__appearDone_1cdt1,
+.backdrop__enterDone_1cdt1 {
+    background-color: rgba(0, 0, 0, 0.7);
+} .backdrop__exit_1cdt1 {
+    background-color: rgba(0, 0, 0, 0.7);
+} .backdrop__exitActive_1cdt1,
+.backdrop__exitDone_1cdt1 {
+    background-color: transparent;
+} .backdrop__transparent_1cdt1.backdrop__transparent_1cdt1 {
+    background-color: transparent;
+}.card-image__cardImage_i6eij {
+    background: #e7e8ea;
+} .card-image__loaded_i6eij {
+    background: transparent
 }.divider__component_whwkb {
     border-bottom: 1px solid #353539;
 }.dropzone__component_18vwu {
@@ -170,14 +170,7 @@
         background: rgba(255, 255, 255, 0.94);
     } .hatching-progress-bar__accent_149tj {
         background: #f83a2a;
-    }.icon-view__component_rb6ah {
-    color: rgba(238, 238, 251, 0.55)
-} .icon-view__bg_rb6ah {
-    fill: #1c1c1e;
-} .icon-view__border_rb6ah {
-    stroke: rgba(225, 225, 248, 0.09);
-    fill: transparent;
-}.indicator__component_19qzv {
+    }.indicator__component_19qzv {
     color: rgba(255, 255, 255, 0.94);
     background-color: #f83a2a;
 } .indicator__red_19qzv {
@@ -195,7 +188,14 @@
     color: rgba(255, 255, 255, 0.94)
 } .indicator__grey_19qzv.indicator__border_19qzv {
         outline: 2px solid rgba(3, 3, 6, 0.88);
-    }@keyframes loader__blink_1atex {
+    }.icon-view__component_rb6ah {
+    color: rgba(238, 238, 251, 0.55)
+} .icon-view__bg_rb6ah {
+    fill: #1c1c1e;
+} .icon-view__border_rb6ah {
+    stroke: rgba(225, 225, 248, 0.09);
+    fill: transparent;
+}@keyframes loader__blink_1atex {
 }.link__primary_10l9t {
     color: rgba(255, 255, 255, 0.94);
     border-bottom-color: rgba(255, 255, 255, 0.94)
@@ -294,31 +294,7 @@
             background-color: rgba(9, 12, 37, 0.28);
         } .scrollbar__component_1e534.dragging .track .scrollbar.visible:before {
             background-color: rgba(4, 4, 21, 0.47);
-        }.skeleton__component_1k1f0 {
-    background: rgba(214, 214, 229, 0.07);
-} @keyframes skeleton__background_1k1f0 {
-    0% {
-        background: rgba(214, 214, 229, 0.07);
-    }
-    100% {
-        background: rgba(222, 222, 238, 0.13);
-    }
-}
-.skeleton__component_r8qwj {
-    color: transparent
-} .skeleton__component_r8qwj:before {
-    background: transparent;
-}
-.skeleton__component_qj37g {
-    background: rgba(38, 55, 88, 0.06);
-} @keyframes skeleton__background-inverted_qj37g {
-    0% {
-        background: rgba(38, 55, 88, 0.06);
-    }
-    100% {
-        background: rgba(15, 25, 55, 0.1);
-    }
-}.segmented-control__wrapper_dxnsg {
+        }.segmented-control__wrapper_dxnsg {
     background-color: rgba(225, 225, 248, 0.09);
 } .segmented-control__segment_dxnsg.segmented-control__selected_dxnsg {
     color: rgba(255, 255, 255, 0.94);
@@ -352,7 +328,31 @@
     color: rgba(3, 3, 6, 0.88)
 } .segmented-control__segment_1stce:not(:first-child):before {
         background-color: rgba(15, 25, 55, 0.1);
-    }.slider__component_62ktp .noUi-base:hover .noUi-connects {
+    }.skeleton__component_1k1f0 {
+    background: rgba(214, 214, 229, 0.07);
+} @keyframes skeleton__background_1k1f0 {
+    0% {
+        background: rgba(214, 214, 229, 0.07);
+    }
+    100% {
+        background: rgba(222, 222, 238, 0.13);
+    }
+}
+.skeleton__component_r8qwj {
+    color: transparent
+} .skeleton__component_r8qwj:before {
+    background: transparent;
+}
+.skeleton__component_qj37g {
+    background: rgba(38, 55, 88, 0.06);
+} @keyframes skeleton__background-inverted_qj37g {
+    0% {
+        background: rgba(38, 55, 88, 0.06);
+    }
+    100% {
+        background: rgba(15, 25, 55, 0.1);
+    }
+}.slider__component_62ktp .noUi-base:hover .noUi-connects {
             background: rgba(222, 222, 238, 0.13);
         } .slider__component_62ktp .noUi-base:hover .noUi-connect {
             background: #f83a2a;

package/universal-modal/Component.responsive.d.ts

@@ -1,16 +1,15 @@
 /// <reference types="react" />
 import React from 'react';
-declare const UniversalModal: React.ForwardRefExoticComponent<import("./desktop/types/props").BaseUniversalModalProps & Pick<import("../base-modal").BaseModalProps, "children" | "className" | "dataTestId" | "open"> & import("./mobile/types/props").BaseUniversalModalMobileProps & {
+declare const UniversalModal: React.ForwardRefExoticComponent<import("./desktop/types/props").BaseUniversalModalProps & Pick<import("../base-modal").BaseModalProps, "children" | "className" | "open" | "dataTestId" | "wrapperClassName" | "transitionProps" | "onUnmount"> & import("./mobile/types/props").BaseUniversalModalMobileProps & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const UniversalModalResponsive: React.ForwardRefExoticComponent<import("./desktop/types/props").BaseUniversalModalProps & Pick<import("../base-modal").BaseModalProps, "children" | "className" | "dataTestId" | "open"> & import("./mobile/types/props").BaseUniversalModalMobileProps & {
+declare const UniversalModalResponsive: React.ForwardRefExoticComponent<import("./desktop/types/props").BaseUniversalModalProps & Pick<import("../base-modal").BaseModalProps, "children" | "className" | "open" | "dataTestId" | "wrapperClassName" | "transitionProps" | "onUnmount"> & import("./mobile/types/props").BaseUniversalModalMobileProps & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<import("./components/header/index").HeaderResponsiveProps>;
     Content: React.FC<import("./components/content/index").ContentResponsiveProps>;
     Footer: React.FC<import("./components/footer/index").FooterResponsiveProps>;
-    Controls: React.FC<import("./components/controls/index").ControlsResponsiveProps>;
 };
 export { UniversalModal, UniversalModalResponsive };

package/universal-modal/Component.responsive.js

@@ -5,8 +5,8 @@ var React = require('react');
 var coreComponentsMq = require('../mq');
 var components_content_responsive_Component_responsive = require('./components/content/responsive/Component.responsive.js');
 require('classnames');
+require('../shared');
 require('../base-modal');
-var components_controls_responsive_Component_responsive = require('./components/controls/responsive/Component.responsive.js');
 var components_footer_responsive_Component_responsive = require('./components/footer/responsive/Component.responsive.js');
 require('./ResponsiveContext.js');
 var components_header_responsive_Component_responsive = require('./components/header/responsive/Component.responsive.js');
@@ -35,7 +35,6 @@ var UniversalModalResponsive = Object.assign(UniversalModal, {
     Header: components_header_responsive_Component_responsive.HeaderResponsive,
     Content: components_content_responsive_Component_responsive.ContentResponsive,
     Footer: components_footer_responsive_Component_responsive.FooterResponsive,
-    Controls: components_controls_responsive_Component_responsive.ControlsResponsive,
 });
 UniversalModalResponsive.displayName = 'UniversalModalResponsive';
 

package/universal-modal/components/content/base-content/base-content.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../../../../shared');
 var Context = require('../../../Context.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -19,7 +20,7 @@ var BaseContent = function (_a) {
     return (React__default.default.createElement("div", { className: cn__default.default(styles.content, styles.flex, className, (_b = {},
             _b[styles.withHeader] = hasHeader,
             _b[styles.withFooter] = hasFooter,
-            _b)), ref: contentRef, "data-test-id": dataTestId }, children));
+            _b)), ref: contentRef, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'content') }, children));
 };
 
 exports.BaseContent = BaseContent;

package/universal-modal/components/content/responsive/Component.responsive.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { ContentDesktopProps, ContentMobileProps } from "../index";
+import { ContentDesktopProps } from "../desktop/Component.desktop";
+import { ContentMobileProps } from "../mobile/Component.mobile";
 type ContentResponsiveProps = ContentDesktopProps | ContentMobileProps;
 declare const ContentResponsive: FC<ContentResponsiveProps>;
 export { ContentResponsiveProps, ContentResponsive };

package/universal-modal/components/footer/base-footer/base-footer.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../../../../shared');
 var Context = require('../../../Context.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -25,7 +26,7 @@ var BaseFooter = function (_a) {
     return (React__default.default.createElement("div", { className: cn__default.default(styles.footer, className, (_b = {},
             _b[styles.highlighted] = sticky && isHighlighted,
             _b[styles.sticky] = sticky,
-            _b)), "data-test-id": dataTestId, "data-name": 'modalFooterDesktop' }, children));
+            _b)), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'footer'), "data-name": 'modalFooterDesktop' }, children));
 };
 
 exports.BaseFooter = BaseFooter;

package/universal-modal/components/footer/desktop/Component.desktop.js

@@ -6,7 +6,6 @@ var cn = require('classnames');
 var desktop_const_index = require('../../../desktop/const/index.js');
 var ResponsiveContext = require('../../../ResponsiveContext.js');
 var components_footer_baseFooter_baseFooter = require('../base-footer/base-footer.js');
-var layout_module = require('../../../layout.module-9b6bc372.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -16,14 +15,17 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles = {"sticky":"universal-modal__sticky_8zhgk"};
 require('./desktop.css');
 
+var layoutStyles = {"column":"universal-modal__column_1tu25","middle":"universal-modal__middle_1tu25","start":"universal-modal__start_1tu25","center":"universal-modal__center_1tu25","space-between":"universal-modal__space-between_1tu25"};
+require('./layout.css');
+
 var FooterDesktop = function (_a) {
     var _b;
     var className = _a.className, sticky = _a.sticky, _c = _a.layout, layout = _c === void 0 ? 'start' : _c, restProps = tslib.__rest(_a, ["className", "sticky", "layout"]);
     var responsiveContext = React.useContext(ResponsiveContext.ResponsiveContext);
     var _d = responsiveContext || {}, _e = _d.modalWidth, modalWidth = _e === void 0 ? 500 : _e, modalFooterHighlighted = _d.modalFooterHighlighted;
-    return (React__default.default.createElement(components_footer_baseFooter_baseFooter.BaseFooter, tslib.__assign({ className: cn__default.default(layout_module.layoutStyles[layout], className, (_b = {},
+    return (React__default.default.createElement(components_footer_baseFooter_baseFooter.BaseFooter, tslib.__assign({ className: cn__default.default(layoutStyles[layout], className, (_b = {},
             _b[styles.sticky] = sticky,
-            _b[layout_module.layoutStyles.middle] = modalWidth >= desktop_const_index.FOOTER_MEDIUM_BREAKPOINT,
+            _b[layoutStyles.middle] = modalWidth >= desktop_const_index.FOOTER_MEDIUM_BREAKPOINT,
             _b)), sticky: sticky, layout: layout, isHighlighted: modalFooterHighlighted }, restProps)));
 };
 

package/universal-modal/components/footer/responsive/Component.responsive.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { FooterDesktopProps, FooterMobileProps } from "../index";
+import { FooterDesktopProps } from "../desktop/Component.desktop";
+import { FooterMobileProps } from "../mobile/Component.mobile";
 type FooterResponsiveProps = FooterDesktopProps | FooterMobileProps;
 declare const FooterResponsive: FC<FooterResponsiveProps>;
 export { FooterResponsiveProps, FooterResponsive };

package/universal-modal/components/header/desktop/Component.desktop.js

@@ -4,9 +4,10 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsNavigationBarPrivate = require('../../../../navigation-bar-private');
+var coreComponentsShared = require('../../../../shared');
 var Context = require('../../../Context.js');
 var ResponsiveContext = require('../../../ResponsiveContext.js');
-var index_module = require('../../../index.module-f528c41c.js');
+var index_module = require('../../../index.module-125ec375.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -18,7 +19,7 @@ require('./desktop.css');
 
 var HeaderDesktop = function (_a) {
     var _b, _c, _d;
-    var className = _a.className, children = _a.children, contentClassName = _a.contentClassName, title = _a.title, sticky = _a.sticky, _e = _a.bigTitle, bigTitle = _e === void 0 ? false : _e; _a.titleClassName; var dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["className", "children", "contentClassName", "title", "sticky", "bigTitle", "titleClassName", "dataTestId"]);
+    var className = _a.className, children = _a.children, contentClassName = _a.contentClassName, title = _a.title, sticky = _a.sticky, _e = _a.bigTitle, bigTitle = _e === void 0 ? false : _e, titleClassName = _a.titleClassName, dataTestId = _a.dataTestId, bottomAddonsClassName = _a.bottomAddonsClassName, restProps = tslib.__rest(_a, ["className", "children", "contentClassName", "title", "sticky", "bigTitle", "titleClassName", "dataTestId", "bottomAddonsClassName"]);
     var _f = React.useContext(Context.ModalContext), setHasHeader = _f.setHasHeader, componentRef = _f.componentRef;
     var modalHeaderHighlighted = (React.useContext(ResponsiveContext.ResponsiveContext) || {}).modalHeaderHighlighted;
     var titleRef = React.useRef(null);
@@ -26,14 +27,14 @@ var HeaderDesktop = function (_a) {
     React.useEffect(function () {
         setHasHeader(true);
     }, [setHasHeader]);
-    return (React__default.default.createElement(coreComponentsNavigationBarPrivate.NavigationBarPrivate, tslib.__assign({}, restProps, { view: 'desktop', dataTestId: dataTestId, dataName: 'modalHeaderDesktop', sticky: sticky, title: title, className: cn__default.default(index_module.styles.header, className, (_b = {},
+    return (React__default.default.createElement(coreComponentsNavigationBarPrivate.NavigationBarPrivate, tslib.__assign({}, restProps, { view: 'desktop', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'header'), dataName: 'modalHeaderDesktop', sticky: sticky, title: title, className: cn__default.default(index_module.styles.header, className, (_b = {},
             _b[index_module.styles.highlighted] = sticky && modalHeaderHighlighted && hasContent,
             _b[index_module.styles.sticky] = sticky,
             _b[index_module.styles.hasContent] = hasContent,
             _b[desktopStyles.sticky] = sticky,
-            _b)), contentClassName: cn__default.default(desktopStyles.content, contentClassName), bottomAddonsClassName: cn__default.default(desktopStyles.bottomAddons, (_c = {},
+            _b)), contentClassName: cn__default.default(desktopStyles.content, contentClassName), bottomAddonsClassName: cn__default.default(desktopStyles.bottomAddons, bottomAddonsClassName, (_c = {},
             _c[desktopStyles.medium] = bigTitle,
-            _c)), scrollableParentRef: componentRef, titleClassName: cn__default.default(desktopStyles.headerTitle, (_d = {},
+            _c)), scrollableParentRef: componentRef, titleClassName: cn__default.default(desktopStyles.headerTitle, titleClassName, (_d = {},
             _d[desktopStyles.medium] = bigTitle,
             _d)), titleRef: titleRef }), children));
 };

package/universal-modal/components/header/mobile/Component.mobile.js

@@ -4,8 +4,9 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsNavigationBarPrivate = require('../../../../navigation-bar-private');
+var coreComponentsShared = require('../../../../shared');
 var Context = require('../../../Context.js');
-var index_module = require('../../../index.module-f528c41c.js');
+var index_module = require('../../../index.module-125ec375.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -17,19 +18,19 @@ require('./mobile.css');
 
 var HeaderMobile = function (_a) {
     var _b;
-    var className = _a.className, children = _a.children, contentClassName = _a.contentClassName, title = _a.title, sticky = _a.sticky; _a.titleClassName; var dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["className", "children", "contentClassName", "title", "sticky", "titleClassName", "dataTestId"]);
+    var className = _a.className, children = _a.children, contentClassName = _a.contentClassName, title = _a.title, sticky = _a.sticky, dataTestId = _a.dataTestId, bottomAddonsClassName = _a.bottomAddonsClassName, restProps = tslib.__rest(_a, ["className", "children", "contentClassName", "title", "sticky", "dataTestId", "bottomAddonsClassName"]);
     var _c = React.useContext(Context.ModalContext), setHasHeader = _c.setHasHeader, headerHighlighted = _c.headerHighlighted, componentRef = _c.componentRef;
     var titleRef = React.useRef(null);
     var hasContent = Boolean(title || children || restProps.bottomAddons);
     React.useEffect(function () {
         setHasHeader(true);
     }, [setHasHeader]);
-    return (React__default.default.createElement(coreComponentsNavigationBarPrivate.NavigationBarPrivate, tslib.__assign({}, restProps, { view: 'mobile', dataTestId: dataTestId, sticky: sticky, title: title, className: cn__default.default(index_module.styles.header, mobileStyles.header, className, (_b = {},
+    return (React__default.default.createElement(coreComponentsNavigationBarPrivate.NavigationBarPrivate, tslib.__assign({}, restProps, { view: 'mobile', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'header'), sticky: sticky, title: title, className: cn__default.default(index_module.styles.header, mobileStyles.header, className, (_b = {},
             _b[index_module.styles.highlighted] = sticky && headerHighlighted && hasContent,
             _b[index_module.styles.sticky] = sticky,
             _b[index_module.styles.hasContent] = hasContent,
             _b[mobileStyles.sticky] = sticky,
-            _b)), contentClassName: cn__default.default(mobileStyles.content, contentClassName), bottomAddonsClassName: mobileStyles.bottomAddons, scrollableParentRef: componentRef, titleRef: titleRef, addonClassName: mobileStyles.addon }), children));
+            _b)), contentClassName: cn__default.default(mobileStyles.content, contentClassName), bottomAddonsClassName: cn__default.default(mobileStyles.bottomAddons, bottomAddonsClassName), scrollableParentRef: componentRef, titleRef: titleRef, addonClassName: mobileStyles.addon }), children));
 };
 
 exports.HeaderMobile = HeaderMobile;

package/universal-modal/components/header/responsive/Component.responsive.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { HeaderDesktopProps, HeaderMobileProps } from "../index";
+import { HeaderDesktopProps } from "../desktop/Component.desktop";
+import { HeaderMobileProps } from "../mobile/Component.mobile";
 type HeaderResponsiveProps = HeaderDesktopProps | HeaderMobileProps;
 declare const HeaderResponsive: FC<HeaderResponsiveProps>;
 export { HeaderResponsiveProps, HeaderResponsive };

package/universal-modal/cssm/Component.responsive.d.ts

@@ -1,16 +1,15 @@
 /// <reference types="react" />
 import React from 'react';
-declare const UniversalModal: React.ForwardRefExoticComponent<import("./desktop/types/props").BaseUniversalModalProps & Pick<import("../../base-modal").BaseModalProps, "children" | "className" | "dataTestId" | "open"> & import("./mobile/types/props").BaseUniversalModalMobileProps & {
+declare const UniversalModal: React.ForwardRefExoticComponent<import("./desktop/types/props").BaseUniversalModalProps & Pick<import("../../base-modal").BaseModalProps, "className" | "children" | "open" | "dataTestId" | "wrapperClassName" | "transitionProps" | "onUnmount"> & import("./mobile/types/props").BaseUniversalModalMobileProps & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const UniversalModalResponsive: React.ForwardRefExoticComponent<import("./desktop/types/props").BaseUniversalModalProps & Pick<import("../../base-modal").BaseModalProps, "children" | "className" | "dataTestId" | "open"> & import("./mobile/types/props").BaseUniversalModalMobileProps & {
+declare const UniversalModalResponsive: React.ForwardRefExoticComponent<import("./desktop/types/props").BaseUniversalModalProps & Pick<import("../../base-modal").BaseModalProps, "className" | "children" | "open" | "dataTestId" | "wrapperClassName" | "transitionProps" | "onUnmount"> & import("./mobile/types/props").BaseUniversalModalMobileProps & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<import("./components/header/index").HeaderResponsiveProps>;
     Content: React.FC<import("./components/content/index").ContentResponsiveProps>;
     Footer: React.FC<import("./components/footer/index").FooterResponsiveProps>;
-    Controls: React.FC<import("./components/controls/index").ControlsResponsiveProps>;
 };
 export { UniversalModal, UniversalModalResponsive };

package/universal-modal/cssm/Component.responsive.js

@@ -5,16 +5,15 @@ var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
 var components_content_responsive_Component_responsive = require('./components/content/responsive/Component.responsive.js');
 require('classnames');
+require('../../shared/cssm');
 require('../../base-modal/cssm');
 require('./components/content/base-content/index.module.css');
 require('./components/content/mobile/mobile.module.css');
-var components_controls_responsive_Component_responsive = require('./components/controls/responsive/Component.responsive.js');
-require('./components/footer/desktop/layout.module.css');
-require('./components/controls/base-controls/index.module.css');
 var components_footer_responsive_Component_responsive = require('./components/footer/responsive/Component.responsive.js');
 require('./ResponsiveContext.js');
 require('./components/footer/base-footer/index.module.css');
 require('./components/footer/desktop/desktop.module.css');
+require('./components/footer/desktop/layout.module.css');
 require('./components/footer/mobile/layout.mobile.module.css');
 require('./components/footer/mobile/mobile.module.css');
 var components_header_responsive_Component_responsive = require('./components/header/responsive/Component.responsive.js');
@@ -50,7 +49,6 @@ var UniversalModalResponsive = Object.assign(UniversalModal, {
     Header: components_header_responsive_Component_responsive.HeaderResponsive,
     Content: components_content_responsive_Component_responsive.ContentResponsive,
     Footer: components_footer_responsive_Component_responsive.FooterResponsive,
-    Controls: components_controls_responsive_Component_responsive.ControlsResponsive,
 });
 UniversalModalResponsive.displayName = 'UniversalModalResponsive';
 

package/universal-modal/cssm/components/content/base-content/base-content.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../../../../../shared/cssm');
 var Context = require('../../../Context.js');
 var styles = require('./index.module.css');
 
@@ -18,7 +19,7 @@ var BaseContent = function (_a) {
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content, styles__default.default.flex, className, (_b = {},
             _b[styles__default.default.withHeader] = hasHeader,
             _b[styles__default.default.withFooter] = hasFooter,
-            _b)), ref: contentRef, "data-test-id": dataTestId }, children));
+            _b)), ref: contentRef, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'content') }, children));
 };
 
 exports.BaseContent = BaseContent;

package/universal-modal/cssm/components/content/responsive/Component.responsive.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { ContentDesktopProps, ContentMobileProps } from "../index";
+import { ContentDesktopProps } from "../desktop/Component.desktop";
+import { ContentMobileProps } from "../mobile/Component.mobile";
 type ContentResponsiveProps = ContentDesktopProps | ContentMobileProps;
 declare const ContentResponsive: FC<ContentResponsiveProps>;
 export { ContentResponsiveProps, ContentResponsive };

package/universal-modal/cssm/components/footer/base-footer/base-footer.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../../../../../shared/cssm');
 var Context = require('../../../Context.js');
 var styles = require('./index.module.css');
 
@@ -24,7 +25,7 @@ var BaseFooter = function (_a) {
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.footer, className, (_b = {},
             _b[styles__default.default.highlighted] = sticky && isHighlighted,
             _b[styles__default.default.sticky] = sticky,
-            _b)), "data-test-id": dataTestId, "data-name": 'modalFooterDesktop' }, children));
+            _b)), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'footer'), "data-name": 'modalFooterDesktop' }, children));
 };
 
 exports.BaseFooter = BaseFooter;

package/universal-modal/cssm/components/footer/responsive/Component.responsive.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { FooterDesktopProps, FooterMobileProps } from "../index";
+import { FooterDesktopProps } from "../desktop/Component.desktop";
+import { FooterMobileProps } from "../mobile/Component.mobile";
 type FooterResponsiveProps = FooterDesktopProps | FooterMobileProps;
 declare const FooterResponsive: FC<FooterResponsiveProps>;
 export { FooterResponsiveProps, FooterResponsive };

package/universal-modal/cssm/components/header/desktop/Component.desktop.js

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsNavigationBarPrivate = require('../../../../../navigation-bar-private/cssm');
+var coreComponentsShared = require('../../../../../shared/cssm');
 var Context = require('../../../Context.js');
 var ResponsiveContext = require('../../../ResponsiveContext.js');
 var styles = require('../base-header/index.module.css');
@@ -18,7 +19,7 @@ var desktopStyles__default = /*#__PURE__*/_interopDefaultCompat(desktopStyles);
 
 var HeaderDesktop = function (_a) {
     var _b, _c, _d;
-    var className = _a.className, children = _a.children, contentClassName = _a.contentClassName, title = _a.title, sticky = _a.sticky, _e = _a.bigTitle, bigTitle = _e === void 0 ? false : _e; _a.titleClassName; var dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["className", "children", "contentClassName", "title", "sticky", "bigTitle", "titleClassName", "dataTestId"]);
+    var className = _a.className, children = _a.children, contentClassName = _a.contentClassName, title = _a.title, sticky = _a.sticky, _e = _a.bigTitle, bigTitle = _e === void 0 ? false : _e, titleClassName = _a.titleClassName, dataTestId = _a.dataTestId, bottomAddonsClassName = _a.bottomAddonsClassName, restProps = tslib.__rest(_a, ["className", "children", "contentClassName", "title", "sticky", "bigTitle", "titleClassName", "dataTestId", "bottomAddonsClassName"]);
     var _f = React.useContext(Context.ModalContext), setHasHeader = _f.setHasHeader, componentRef = _f.componentRef;
     var modalHeaderHighlighted = (React.useContext(ResponsiveContext.ResponsiveContext) || {}).modalHeaderHighlighted;
     var titleRef = React.useRef(null);
@@ -26,14 +27,14 @@ var HeaderDesktop = function (_a) {
     React.useEffect(function () {
         setHasHeader(true);
     }, [setHasHeader]);
-    return (React__default.default.createElement(coreComponentsNavigationBarPrivate.NavigationBarPrivate, tslib.__assign({}, restProps, { view: 'desktop', dataTestId: dataTestId, dataName: 'modalHeaderDesktop', sticky: sticky, title: title, className: cn__default.default(styles__default.default.header, className, (_b = {},
+    return (React__default.default.createElement(coreComponentsNavigationBarPrivate.NavigationBarPrivate, tslib.__assign({}, restProps, { view: 'desktop', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'header'), dataName: 'modalHeaderDesktop', sticky: sticky, title: title, className: cn__default.default(styles__default.default.header, className, (_b = {},
             _b[styles__default.default.highlighted] = sticky && modalHeaderHighlighted && hasContent,
             _b[styles__default.default.sticky] = sticky,
             _b[styles__default.default.hasContent] = hasContent,
             _b[desktopStyles__default.default.sticky] = sticky,
-            _b)), contentClassName: cn__default.default(desktopStyles__default.default.content, contentClassName), bottomAddonsClassName: cn__default.default(desktopStyles__default.default.bottomAddons, (_c = {},
+            _b)), contentClassName: cn__default.default(desktopStyles__default.default.content, contentClassName), bottomAddonsClassName: cn__default.default(desktopStyles__default.default.bottomAddons, bottomAddonsClassName, (_c = {},
             _c[desktopStyles__default.default.medium] = bigTitle,
-            _c)), scrollableParentRef: componentRef, titleClassName: cn__default.default(desktopStyles__default.default.headerTitle, (_d = {},
+            _c)), scrollableParentRef: componentRef, titleClassName: cn__default.default(desktopStyles__default.default.headerTitle, titleClassName, (_d = {},
             _d[desktopStyles__default.default.medium] = bigTitle,
             _d)), titleRef: titleRef }), children));
 };