@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.1

package/masked-input/cssm/Component.js

@@ -1,19 +1,32 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import mergeRefs from 'react-merge-refs';
-import cn from 'classnames';
-import { createTextMaskInputElement } from 'text-mask-core';
-import { Input } from '../../input/cssm';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var textMaskCore = require('text-mask-core');
+var coreComponentsInput = require('../../input/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 // Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \u2000
-const PLACEHOLDER_CHAR = '\u2000';
-const MaskedInput = React.forwardRef(({ mask, keepCharPositions = false, value, defaultValue, className, onBeforeDisplay, onChange, onClear, ...restProps }, ref) => {
-    const [inputNode, setInputNode] = useState(null);
-    const textMask = useRef(null);
-    const [inputValue, setInputValue] = useState(value || defaultValue || '');
+var PLACEHOLDER_CHAR = '\u2000';
+var MaskedInput = React__default.default.forwardRef(function (_a, ref) {
+    var _b;
+    var mask = _a.mask, _c = _a.keepCharPositions, keepCharPositions = _c === void 0 ? false : _c, value = _a.value, defaultValue = _a.defaultValue, className = _a.className, onBeforeDisplay = _a.onBeforeDisplay, onChange = _a.onChange, onClear = _a.onClear, restProps = tslib.__rest(_a, ["mask", "keepCharPositions", "value", "defaultValue", "className", "onBeforeDisplay", "onChange", "onClear"]);
+    var _d = React.useState(null), inputNode = _d[0], setInputNode = _d[1];
+    var textMask = React.useRef(null);
+    var _e = React.useState(value || defaultValue || ''), inputValue = _e[0], setInputValue = _e[1];
     // Не показываем сырое значение до применения маски
-    const [textHidden, setTextHidden] = useState(true);
-    const update = useCallback((newValue = '') => {
+    var _f = React.useState(true), textHidden = _f[0], setTextHidden = _f[1];
+    var update = React.useCallback(function (newValue) {
+        if (newValue === void 0) { newValue = ''; }
         if (textMask.current && inputNode) {
             try {
                 textMask.current.update(newValue);
@@ -24,7 +37,7 @@ const MaskedInput = React.forwardRef(({ mask, keepCharPositions = false, value,
             setInputValue(inputNode.value);
         }
     }, [inputNode]);
-    const handleInputChange = useCallback((event) => {
+    var handleInputChange = React.useCallback(function (event) {
         update(event.target.value);
         if (onChange) {
             onChange(event, {
@@ -32,19 +45,19 @@ const MaskedInput = React.forwardRef(({ mask, keepCharPositions = false, value,
             });
         }
     }, [onChange, update]);
-    const handleClear = useCallback((event) => {
+    var handleClear = React.useCallback(function (event) {
         update('');
         if (onClear)
             onClear(event);
     }, [onClear, update]);
-    useEffect(() => {
+    React.useEffect(function () {
         if (inputNode) {
-            textMask.current = createTextMaskInputElement({
-                mask,
+            textMask.current = textMaskCore.createTextMaskInputElement({
+                mask: mask,
                 inputElement: inputNode,
                 pipe: onBeforeDisplay,
                 guide: false,
-                keepCharPositions,
+                keepCharPositions: keepCharPositions,
                 showMask: false,
                 placeholderChar: PLACEHOLDER_CHAR,
                 rawValue: '',
@@ -53,13 +66,14 @@ const MaskedInput = React.forwardRef(({ mask, keepCharPositions = false, value,
             });
         }
     }, [onBeforeDisplay, mask, keepCharPositions, inputNode]);
-    useEffect(() => {
+    React.useEffect(function () {
         update(value || defaultValue);
     }, [value, update, defaultValue]);
-    useEffect(() => {
+    React.useEffect(function () {
         setTextHidden(false);
     }, []);
-    return (React.createElement(Input, { ...restProps, className: cn(className, { [styles.textHidden]: textHidden }), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs([ref, setInputNode]) }));
+    return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { className: cn__default.default(className, (_b = {}, _b[styles__default.default.textHidden] = textHidden, _b)), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs__default.default([ref, setInputNode]) })));
 });
 
-export { MaskedInput, PLACEHOLDER_CHAR };
+exports.MaskedInput = MaskedInput;
+exports.PLACEHOLDER_CHAR = PLACEHOLDER_CHAR;

package/masked-input/cssm/index.js

@@ -1,7 +1,8 @@
-export { MaskedInput, PLACEHOLDER_CHAR } from './Component.js';
-import 'react';
-import 'react-merge-refs';
-import 'classnames';
-import 'text-mask-core';
-import '../../input/cssm';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.MaskedInput = Component.MaskedInput;
+exports.PLACEHOLDER_CHAR = Component.PLACEHOLDER_CHAR;

package/modal/cssm/Component.js

@@ -1,22 +1,36 @@
-import React, { forwardRef, useRef, useMemo } from 'react';
-import mergeRefs from 'react-merge-refs';
-import cn from 'classnames';
-import { BaseModal } from '../../base-modal/cssm';
-import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
-import { ResponsiveContext } from './ResponsiveContext.js';
-import desktopStyles from './desktop/desktop.module.css';
-import mobileStyles from './mobile/mobile.module.css';
-import transitions from './transitions.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Modal = forwardRef(({ size = 500, fixedPosition, fullscreen, children, className, wrapperClassName, transitionProps = {}, view, dataTestId, ...restProps }, ref) => {
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var coreComponentsBaseModal = require('../../base-modal/cssm');
+var consts = require('./consts.js');
+var ResponsiveContext = require('./ResponsiveContext.js');
+var desktopStyles = require('./desktop/desktop.module.css');
+var mobileStyles = require('./mobile/mobile.module.css');
+var transitions = require('./transitions.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var desktopStyles__default = /*#__PURE__*/_interopDefaultCompat(desktopStyles);
+var mobileStyles__default = /*#__PURE__*/_interopDefaultCompat(mobileStyles);
+var transitions__default = /*#__PURE__*/_interopDefaultCompat(transitions);
+
+var Modal = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.size, size = _c === void 0 ? 500 : _c, fixedPosition = _a.fixedPosition, fullscreen = _a.fullscreen, children = _a.children, className = _a.className, wrapperClassName = _a.wrapperClassName, _d = _a.transitionProps, transitionProps = _d === void 0 ? {} : _d, view = _a.view, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["size", "fixedPosition", "fullscreen", "children", "className", "wrapperClassName", "transitionProps", "view", "dataTestId"]);
     // TODO: удалить, после удаления пропсы fullscreen
-    const componentSize = fullscreen ? 'fullscreen' : size;
-    const modalRef = useRef(null);
-    const handleEntered = (node, isAppearing) => {
+    var componentSize = fullscreen ? 'fullscreen' : size;
+    var modalRef = React.useRef(null);
+    var handleEntered = function (node, isAppearing) {
         if (fixedPosition && modalRef.current) {
-            const content = modalRef.current.querySelector(`.${desktopStyles.component}`);
+            var content = modalRef.current.querySelector(".".concat(desktopStyles__default.default.component));
             if (content) {
-                const { marginTop } = window.getComputedStyle(content);
+                var marginTop = window.getComputedStyle(content).marginTop;
                 content.style.marginTop = marginTop;
             }
         }
@@ -24,35 +38,25 @@ const Modal = forwardRef(({ size = 500, fixedPosition, fullscreen, children, cla
             transitionProps.onEntered(node, isAppearing);
         }
     };
-    const baseModalProps = view === 'desktop'
+    var baseModalProps = view === 'desktop'
         ? {
-            ref: mergeRefs([ref, modalRef]),
-            wrapperClassName: cn(desktopStyles.wrapper, wrapperClassName, {
-                [desktopStyles.fullscreen]: componentSize === 'fullscreen',
-            }),
-            className: cn(desktopStyles.component, className, desktopStyles[SIZE_TO_CLASSNAME_MAP[componentSize]]),
-            backdropProps: {
-                invisible: componentSize === 'fullscreen',
-                ...restProps.backdropProps,
-            },
-            transitionProps: {
-                classNames: transitions,
-                ...transitionProps,
-                onEntered: handleEntered,
-            },
+            ref: mergeRefs__default.default([ref, modalRef]),
+            wrapperClassName: cn__default.default(desktopStyles__default.default.wrapper, wrapperClassName, (_b = {},
+                _b[desktopStyles__default.default.fullscreen] = componentSize === 'fullscreen',
+                _b)),
+            className: cn__default.default(desktopStyles__default.default.component, className, desktopStyles__default.default[consts.SIZE_TO_CLASSNAME_MAP[componentSize]]),
+            backdropProps: tslib.__assign({ invisible: componentSize === 'fullscreen' }, restProps.backdropProps),
+            transitionProps: tslib.__assign(tslib.__assign({ classNames: transitions__default.default }, transitionProps), { onEntered: handleEntered }),
         }
         : {
-            wrapperClassName,
-            ref,
-            transitionProps: {
-                classNames: transitions,
-                ...transitionProps,
-            },
-            className: cn(className, mobileStyles.component),
+            wrapperClassName: wrapperClassName,
+            ref: ref,
+            transitionProps: tslib.__assign({ classNames: transitions__default.default }, transitionProps),
+            className: cn__default.default(className, mobileStyles__default.default.component),
         };
-    const contextValue = useMemo(() => ({ size: componentSize, view, dataTestId }), [componentSize, view, dataTestId]);
-    return (React.createElement(ResponsiveContext.Provider, { value: contextValue },
-        React.createElement(BaseModal, { ...restProps, ...baseModalProps, dataTestId: dataTestId }, children)));
+    var contextValue = React.useMemo(function () { return ({ size: componentSize, view: view, dataTestId: dataTestId }); }, [componentSize, view, dataTestId]);
+    return (React__default.default.createElement(ResponsiveContext.ResponsiveContext.Provider, { value: contextValue },
+        React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, baseModalProps, { dataTestId: dataTestId }), children)));
 });
 
-export { Modal };
+exports.Modal = Modal;

package/modal/cssm/Component.responsive.js

@@ -1,42 +1,28 @@
-import React, { forwardRef } from 'react';
-import { useMatchMedia } from '../../mq/cssm';
-import { Content } from './components/content/Component.js';
-import { Controls } from './components/controls/Component.js';
-import { Footer } from './components/footer/Component.js';
-import { Header } from './components/header/Component.js';
-import { Modal } from './Component.js';
-import 'classnames';
-import '../../shared/cssm';
-import './consts.js';
-import './Context.js';
-import '../../base-modal/cssm';
-import './ResponsiveContext.js';
-import './components/content/desktop.module.css';
-import './components/content/index.module.css';
-import './components/content/mobile.module.css';
-import './components/footer/layout.module.css';
-import './components/controls/index.module.css';
-import './components/footer/desktop.module.css';
-import './components/footer/index.module.css';
-import './components/footer/mobile.module.css';
-import '../../navigation-bar/cssm';
-import './components/header/desktop.module.css';
-import './components/header/index.module.css';
-import './components/header/mobile.module.css';
-import 'react-merge-refs';
-import './desktop/desktop.module.css';
-import './mobile/mobile.module.css';
-import './transitions.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const ModalResponsiveComponent = forwardRef(({ children, breakpoint = 1024, defaultMatchMediaValue = true, ...restProps }, ref) => {
-    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
-    return (React.createElement(Modal, { ref: ref, ...restProps, view: isDesktop ? 'desktop' : 'mobile' }, children));
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../../mq/cssm');
+var components_content_Component = require('./components/content/Component.js');
+var components_controls_Component = require('./components/controls/Component.js');
+var components_footer_Component = require('./components/footer/Component.js');
+var components_header_Component = require('./components/header/Component.js');
+var Component = require('./Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var ModalResponsiveComponent = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, _c = _a.defaultMatchMediaValue, defaultMatchMediaValue = _c === void 0 ? true : _c, restProps = tslib.__rest(_a, ["children", "breakpoint", "defaultMatchMediaValue"]);
+    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    return (React__default.default.createElement(Component.Modal, tslib.__assign({ ref: ref }, restProps, { view: isDesktop ? 'desktop' : 'mobile' }), children));
 });
-const ModalResponsive = Object.assign(ModalResponsiveComponent, {
-    Header,
-    Content,
-    Footer,
-    Controls,
+var ModalResponsive = Object.assign(ModalResponsiveComponent, {
+    Header: components_header_Component.Header,
+    Content: components_content_Component.Content,
+    Footer: components_footer_Component.Footer,
+    Controls: components_controls_Component.Controls,
 });
 
-export { ModalResponsive };
+exports.ModalResponsive = ModalResponsive;

package/modal/cssm/Context.js

@@ -1,5 +1,7 @@
-import { BaseModalContext } from '../../base-modal/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const ModalContext = BaseModalContext;
+var coreComponentsBaseModal = require('../../base-modal/cssm');
 
-export { ModalContext };
+var ModalContext = coreComponentsBaseModal.BaseModalContext;
+
+exports.ModalContext = ModalContext;

package/modal/cssm/ResponsiveContext.js

@@ -1,8 +1,14 @@
-import React from 'react';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const ResponsiveContext = React.createContext({
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var ResponsiveContext = React__default.default.createContext({
     view: 'desktop',
     size: 500,
 });
 
-export { ResponsiveContext };
+exports.ResponsiveContext = ResponsiveContext;

package/modal/cssm/components/content/Component.js

@@ -1,23 +1,34 @@
-import React, { useContext } from 'react';
-import cn from 'classnames';
-import { getDataTestId } from '../../../../shared/cssm';
-import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
-import { ModalContext } from '../../Context.js';
-import { ResponsiveContext } from '../../ResponsiveContext.js';
-import desktopStyles from './desktop.module.css';
-import styles from './index.module.css';
-import mobileStyles from './mobile.module.css';
-import '../../../../base-modal/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Content = ({ children, flex, className }) => {
-    const { contentRef, hasHeader } = useContext(ModalContext);
-    const { size, view, dataTestId } = useContext(ResponsiveContext);
-    return (React.createElement("div", { className: cn(styles.content, className, {
-            [styles.flex]: flex,
-            [styles.withHeader]: hasHeader,
-            [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop' && size,
-            [mobileStyles.content]: view === 'mobile',
-        }), ref: contentRef, "data-test-id": getDataTestId(dataTestId, 'content') }, children));
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsShared = require('../../../../shared/cssm');
+var consts = require('../../consts.js');
+var Context = require('../../Context.js');
+var ResponsiveContext = require('../../ResponsiveContext.js');
+var desktopStyles = require('./desktop.module.css');
+var styles = require('./index.module.css');
+var mobileStyles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var desktopStyles__default = /*#__PURE__*/_interopDefaultCompat(desktopStyles);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var mobileStyles__default = /*#__PURE__*/_interopDefaultCompat(mobileStyles);
+
+var Content = function (_a) {
+    var _b;
+    var children = _a.children, flex = _a.flex, className = _a.className;
+    var _c = React.useContext(Context.ModalContext), contentRef = _c.contentRef, hasHeader = _c.hasHeader;
+    var _d = React.useContext(ResponsiveContext.ResponsiveContext), size = _d.size, view = _d.view, dataTestId = _d.dataTestId;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content, className, (_b = {},
+            _b[styles__default.default.flex] = flex,
+            _b[styles__default.default.withHeader] = hasHeader,
+            _b[desktopStyles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]]] = view === 'desktop' && size,
+            _b[mobileStyles__default.default.content] = view === 'mobile',
+            _b)), ref: contentRef, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'content') }, children));
 };
 
-export { Content };
+exports.Content = Content;

package/modal/cssm/components/controls/Component.js

@@ -1,19 +1,29 @@
-import React, { useContext } from 'react';
-import cn from 'classnames';
-import { getDataTestId } from '../../../../shared/cssm';
-import { ResponsiveContext } from '../../ResponsiveContext.js';
-import layoutStyles from '../footer/layout.module.css';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Controls = ({ primary, secondary, gap, layout: layoutProp = 'start', mobileLayout = layoutProp, }) => {
-    const { view, dataTestId } = useContext(ResponsiveContext);
-    const layout = view === 'mobile' ? mobileLayout : layoutProp;
-    const shouldReverse = view === 'mobile' && layout !== 'column';
-    return (React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'controls'), className: cn(styles.component, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`]) }, shouldReverse ? (React.createElement(React.Fragment, null,
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsShared = require('../../../../shared/cssm');
+var ResponsiveContext = require('../../ResponsiveContext.js');
+var layoutStyles = require('../footer/layout.module.css');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var layoutStyles__default = /*#__PURE__*/_interopDefaultCompat(layoutStyles);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Controls = function (_a) {
+    var primary = _a.primary, secondary = _a.secondary, gap = _a.gap, _b = _a.layout, layoutProp = _b === void 0 ? 'start' : _b, _c = _a.mobileLayout, mobileLayout = _c === void 0 ? layoutProp : _c;
+    var _d = React.useContext(ResponsiveContext.ResponsiveContext), view = _d.view, dataTestId = _d.dataTestId;
+    var layout = view === 'mobile' ? mobileLayout : layoutProp;
+    var shouldReverse = view === 'mobile' && layout !== 'column';
+    return (React__default.default.createElement("div", { "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'controls'), className: cn__default.default(styles__default.default.component, layoutStyles__default.default[layout], gap && layoutStyles__default.default["gap-".concat(gap)]) }, shouldReverse ? (React__default.default.createElement(React__default.default.Fragment, null,
         secondary,
-        primary)) : (React.createElement(React.Fragment, null,
+        primary)) : (React__default.default.createElement(React__default.default.Fragment, null,
         primary,
         secondary))));
 };
 
-export { Controls };
+exports.Controls = Controls;

package/modal/cssm/components/controls/index.js

@@ -1,7 +1,7 @@
-export { Controls } from './Component.js';
-import 'react';
-import 'classnames';
-import '../../../../shared/cssm';
-import '../../ResponsiveContext.js';
-import '../footer/layout.module.css';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_controls_Component = require('./Component.js');
+
+
+
+exports.Controls = components_controls_Component.Controls;

package/modal/cssm/components/footer/Component.js

@@ -1,30 +1,42 @@
-import React, { useContext, useEffect } from 'react';
-import cn from 'classnames';
-import { getDataTestId } from '../../../../shared/cssm';
-import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
-import { ModalContext } from '../../Context.js';
-import { ResponsiveContext } from '../../ResponsiveContext.js';
-import desktopStyles from './desktop.module.css';
-import styles from './index.module.css';
-import layoutStyles from './layout.module.css';
-import mobileStyles from './mobile.module.css';
-import '../../../../base-modal/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Footer = ({ children, className, sticky, layout = 'start', gap }) => {
-    const { footerHighlighted, setHasFooter } = useContext(ModalContext);
-    const { size, view, dataTestId } = useContext(ResponsiveContext);
-    useEffect(() => {
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsShared = require('../../../../shared/cssm');
+var consts = require('../../consts.js');
+var Context = require('../../Context.js');
+var ResponsiveContext = require('../../ResponsiveContext.js');
+var desktopStyles = require('./desktop.module.css');
+var styles = require('./index.module.css');
+var layoutStyles = require('./layout.module.css');
+var mobileStyles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var desktopStyles__default = /*#__PURE__*/_interopDefaultCompat(desktopStyles);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var layoutStyles__default = /*#__PURE__*/_interopDefaultCompat(layoutStyles);
+var mobileStyles__default = /*#__PURE__*/_interopDefaultCompat(mobileStyles);
+
+var Footer = function (_a) {
+    var _b;
+    var children = _a.children, className = _a.className, sticky = _a.sticky, _c = _a.layout, layout = _c === void 0 ? 'start' : _c, gap = _a.gap;
+    var _d = React.useContext(Context.ModalContext), footerHighlighted = _d.footerHighlighted, setHasFooter = _d.setHasFooter;
+    var _e = React.useContext(ResponsiveContext.ResponsiveContext), size = _e.size, view = _e.view, dataTestId = _e.dataTestId;
+    React.useEffect(function () {
         setHasFooter(true);
     }, [setHasFooter]);
-    return (React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'footer'), className: cn(styles.footer, className, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`], {
-            [styles.highlighted]: sticky && footerHighlighted,
-            [styles.sticky]: sticky,
-            [desktopStyles.footer]: view === 'desktop',
-            [desktopStyles.sticky]: view === 'desktop' && sticky,
-            [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop',
-            [mobileStyles.footer]: view === 'mobile',
-            [mobileStyles.sticky]: view === 'mobile' && sticky,
-        }) }, children));
+    return (React__default.default.createElement("div", { "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'footer'), className: cn__default.default(styles__default.default.footer, className, layoutStyles__default.default[layout], gap && layoutStyles__default.default["gap-".concat(gap)], (_b = {},
+            _b[styles__default.default.highlighted] = sticky && footerHighlighted,
+            _b[styles__default.default.sticky] = sticky,
+            _b[desktopStyles__default.default.footer] = view === 'desktop',
+            _b[desktopStyles__default.default.sticky] = view === 'desktop' && sticky,
+            _b[desktopStyles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]]] = view === 'desktop',
+            _b[mobileStyles__default.default.footer] = view === 'mobile',
+            _b[mobileStyles__default.default.sticky] = view === 'mobile' && sticky,
+            _b)) }, children));
 };
 
-export { Footer };
+exports.Footer = Footer;

package/modal/cssm/components/header/Component.js

@@ -1,43 +1,59 @@
-import React, { useContext, useCallback, useEffect } from 'react';
-import cn from 'classnames';
-import { NavigationBar } from '../../../../navigation-bar/cssm';
-import { getDataTestId } from '../../../../shared/cssm';
-import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
-import { ModalContext } from '../../Context.js';
-import { ResponsiveContext } from '../../ResponsiveContext.js';
-import desktopStyles from './desktop.module.css';
-import styles from './index.module.css';
-import mobileStyles from './mobile.module.css';
-import '../../../../base-modal/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Header = ({ className, sticky, title, children, contentClassName, hasCloser = true, onClose: onHeaderClose, ...restProps }) => {
-    const { setHasHeader, headerHighlighted, parentRef, onClose } = useContext(ModalContext);
-    const { view, size, dataTestId } = useContext(ResponsiveContext);
-    const handleClose = useCallback((...params) => {
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsNavigationBar = require('../../../../navigation-bar/cssm');
+var coreComponentsShared = require('../../../../shared/cssm');
+var consts = require('../../consts.js');
+var Context = require('../../Context.js');
+var ResponsiveContext = require('../../ResponsiveContext.js');
+var desktopStyles = require('./desktop.module.css');
+var styles = require('./index.module.css');
+var mobileStyles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var desktopStyles__default = /*#__PURE__*/_interopDefaultCompat(desktopStyles);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var mobileStyles__default = /*#__PURE__*/_interopDefaultCompat(mobileStyles);
+
+var Header = function (_a) {
+    var _b, _c;
+    var className = _a.className, sticky = _a.sticky, title = _a.title, children = _a.children, contentClassName = _a.contentClassName, _d = _a.hasCloser, hasCloser = _d === void 0 ? true : _d, onHeaderClose = _a.onClose, restProps = tslib.__rest(_a, ["className", "sticky", "title", "children", "contentClassName", "hasCloser", "onClose"]);
+    var _e = React.useContext(Context.ModalContext), setHasHeader = _e.setHasHeader, headerHighlighted = _e.headerHighlighted, parentRef = _e.parentRef, onClose = _e.onClose;
+    var _f = React.useContext(ResponsiveContext.ResponsiveContext), view = _f.view, size = _f.size, dataTestId = _f.dataTestId;
+    var handleClose = React.useCallback(function () {
+        var params = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            params[_i] = arguments[_i];
+        }
         if (onHeaderClose) {
-            onHeaderClose(...params);
+            onHeaderClose.apply(void 0, params);
         }
         if (onClose) {
-            onClose(...params);
+            onClose.apply(void 0, params);
         }
     }, [onHeaderClose, onClose]);
-    useEffect(() => {
+    React.useEffect(function () {
         setHasHeader(true);
     }, [setHasHeader]);
-    const hasContent = Boolean(title || children);
-    return (React.createElement(NavigationBar, { dataTestId: getDataTestId(dataTestId, 'header'), ...restProps, scrollableParentRef: parentRef, hasCloser: hasCloser, sticky: sticky, view: view, title: title, onClose: handleClose, className: cn(className, {
-            [styles.highlighted]: hasContent && sticky && headerHighlighted,
-            [styles.sticky]: sticky,
-            [styles.hasContent]: hasContent,
-            [desktopStyles.header]: view === 'desktop',
-            [desktopStyles.sticky]: view === 'desktop' && sticky,
-            [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop',
-            [mobileStyles.header]: view === 'mobile',
-            [mobileStyles.sticky]: view === 'mobile' && sticky,
-        }), contentClassName: cn(contentClassName, {
-            [desktopStyles.content]: view === 'desktop',
-            [mobileStyles.content]: view === 'mobile',
-        }) }, children));
+    var hasContent = Boolean(title || children);
+    return (React__default.default.createElement(coreComponentsNavigationBar.NavigationBar, tslib.__assign({ dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'header') }, restProps, { scrollableParentRef: parentRef, hasCloser: hasCloser, sticky: sticky, view: view, title: title, onClose: handleClose, className: cn__default.default(className, (_b = {},
+            _b[styles__default.default.highlighted] = hasContent && sticky && headerHighlighted,
+            _b[styles__default.default.sticky] = sticky,
+            _b[styles__default.default.hasContent] = hasContent,
+            _b[desktopStyles__default.default.header] = view === 'desktop',
+            _b[desktopStyles__default.default.sticky] = view === 'desktop' && sticky,
+            _b[desktopStyles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]]] = view === 'desktop',
+            _b[mobileStyles__default.default.header] = view === 'mobile',
+            _b[mobileStyles__default.default.sticky] = view === 'mobile' && sticky,
+            _b)), contentClassName: cn__default.default(contentClassName, (_c = {},
+            _c[desktopStyles__default.default.content] = view === 'desktop',
+            _c[mobileStyles__default.default.content] = view === 'mobile',
+            _c)) }), children));
 };
 
-export { Header };
+exports.Header = Header;

package/modal/cssm/consts.js

@@ -1,4 +1,6 @@
-const SIZE_TO_CLASSNAME_MAP = {
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SIZE_TO_CLASSNAME_MAP = {
     s: 'size-500',
     m: 'size-600',
     l: 'size-800',
@@ -10,4 +12,4 @@ const SIZE_TO_CLASSNAME_MAP = {
     1140: 'size-1140',
 };
 
-export { SIZE_TO_CLASSNAME_MAP };
+exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;