@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

package/components/Modal/ModalBody.d.ts

@@ -1,11 +1,23 @@
 import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface ModalBodyProps extends CommonProps {
+    /**
+     * убирает отступы
+     */
+    noPadding?: boolean;
+}
 /**
  * Контейнер с отступами от края модалки
  *
  * @visibleName Modal.Body
  */
-export declare class ModalBody extends React.Component {
+export declare class ModalBody extends React.Component<ModalBodyProps> {
     static __KONTUR_REACT_UI__: string;
     static __MODAL_BODY__: boolean;
+    private theme;
+    private isMobileLayout;
+    private setRootNode;
     render(): JSX.Element;
+    private handleResize;
+    renderMain(): JSX.Element;
 }

package/components/Modal/ModalClose/ModalClose.js

@@ -1,18 +1,55 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["disableClose", "requestClose"];
 import React, { useContext } from 'react';
-import cn from 'classnames';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { jsStyles } from "../Modal.styles";
+import { CrossIcon } from "../../../internal/icons/CrossIcon";
+import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { ResponsiveLayout } from "../../ResponsiveLayout";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { XIcon20Regular } from "../../../internal/icons2022/XIcon/XIcon20Regular";
+import { styles } from "../Modal.styles";
+import { ModalDataTids } from "../Modal";
 export function ModalClose(_ref) {
-  var _cn;
-
   var disableClose = _ref.disableClose,
-      requestClose = _ref.requestClose;
+      requestClose = _ref.requestClose,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   var theme = useContext(ThemeContext);
-  return React.createElement("button", {
-    className: cn((_cn = {}, _cn[jsStyles.close(theme)] = true, _cn[jsStyles.disabled(theme)] = disableClose, _cn)),
-    onClick: requestClose,
-    "data-tid": "modal-close"
-  }, React.createElement("span", {
-    className: jsStyles.closeOutline(theme)
+
+  var _React$useState = React.useState(false),
+      focusedByTab = _React$useState[0],
+      setFocusedByTab = _React$useState[1];
+
+  var handleFocus = function handleFocus() {
+    // focus event fires before keyDown eventlistener
+    // so we should check tabPressed in async way
+    requestAnimationFrame(function () {
+      if (keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+
+  var handleBlur = function handleBlur() {
+    setFocusedByTab(false);
+  };
+
+  var icon = isTheme2022(theme) ? /*#__PURE__*/React.createElement(XIcon20Regular, {
+    align: "none"
+  }) : /*#__PURE__*/React.createElement(CrossIcon, null);
+  return /*#__PURE__*/React.createElement(CommonWrapper, otherProps, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref2) {
+    var _cx;
+
+    var isMobile = _ref2.isMobile;
+    return /*#__PURE__*/React.createElement("button", {
+      className: cx((_cx = {}, _cx[styles.close(theme)] = true, _cx[styles.mobileClose(theme)] = isMobile, _cx[styles.disabled(theme)] = disableClose, _cx[styles.focus(theme)] = focusedByTab, _cx)),
+      onClick: requestClose,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      "data-tid": ModalDataTids.close,
+      tabIndex: disableClose ? -1 : 0
+    }, icon);
   }));
 }

package/components/Modal/ModalClose/ModalClose.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalClose.tsx"],"names":["React","useContext","cn","ThemeContext","jsStyles","ModalClose","disableClose","requestClose","theme","close","disabled","closeOutline"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,QAAT,QAAyB,gBAAzB;;AAEA,OAAO,SAASC,UAAT,OAAgE,aAA1CC,YAA0C,QAA1CA,YAA0C,CAA5BC,YAA4B,QAA5BA,YAA4B;AACrE,MAAMC,KAAK,GAAGP,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE;AACE,MAAA,SAAS,EAAED,EAAE;AACVE,MAAAA,QAAQ,CAACK,KAAT,CAAeD,KAAf,CADU,IACc,IADd;AAEVJ,MAAAA,QAAQ,CAACM,QAAT,CAAkBF,KAAlB,CAFU,IAEiBF,YAFjB,OADf;;AAKE,MAAA,OAAO,EAAEC,YALX;AAME,kBAAS,aANX;;AAQE,kCAAM,SAAS,EAAEH,QAAQ,CAACO,YAAT,CAAsBH,KAAtB,CAAjB,GARF,CADF;;;AAYD","sourcesContent":["import React, { useContext } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\n\r\nimport { CloseProps } from './ModalContext';\r\nimport { jsStyles } from './Modal.styles';\r\n\r\nexport function ModalClose({ disableClose, requestClose }: CloseProps) {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return (\r\n    <button\r\n      className={cn({\r\n        [jsStyles.close(theme)]: true,\r\n        [jsStyles.disabled(theme)]: disableClose,\r\n      })}\r\n      onClick={requestClose}\r\n      data-tid=\"modal-close\"\r\n    >\r\n      <span className={jsStyles.closeOutline(theme)} />\r\n    </button>\r\n  );\r\n}\r\n"]}
+{"version":3,"sources":["ModalClose.tsx"],"names":["React","useContext","ThemeContext","CrossIcon","cx","keyListener","ResponsiveLayout","CommonWrapper","isTheme2022","XIcon20Regular","styles","ModalDataTids","ModalClose","disableClose","requestClose","otherProps","theme","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","icon","isMobile","close","mobileClose","disabled","focus"],"mappings":"qJAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,aAAT,QAA8B,8BAA9B;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,cAAT,QAA+B,+CAA/B;;;AAGA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SAASC,aAAT,QAA8B,SAA9B;;AAEA,OAAO,SAASC,UAAT,OAA+E,KAAzDC,YAAyD,QAAzDA,YAAyD,CAA3CC,YAA2C,QAA3CA,YAA2C,CAA1BC,UAA0B;AACpF,MAAMC,KAAK,GAAGf,UAAU,CAACC,YAAD,CAAxB;AACA,wBAAwCF,KAAK,CAACiB,QAAN,CAAe,KAAf,CAAxC,CAAOC,YAAP,sBAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAIhB,WAAW,CAACiB,YAAhB,EAA8B;AAC5BH,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJoB,CAArB;AAKD,GARD;;AAUA,MAAMI,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBJ,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAFD;;AAIA,MAAMK,IAAI,GAAGhB,WAAW,CAACQ,KAAD,CAAX,gBAAqB,oBAAC,cAAD,IAAgB,KAAK,EAAC,MAAtB,GAArB,gBAAuD,oBAAC,SAAD,OAApE;;AAEA;AACE,wBAAC,aAAD,EAAmBD,UAAnB;AACE,wBAAC,gBAAD;AACG,kCAAGU,QAAH,SAAGA,QAAH;AACC;AACE,UAAA,SAAS,EAAErB,EAAE;AACVM,UAAAA,MAAM,CAACgB,KAAP,CAAaV,KAAb,CADU,IACY,IADZ;AAEVN,UAAAA,MAAM,CAACiB,WAAP,CAAmBX,KAAnB,CAFU,IAEkBS,QAFlB;AAGVf,UAAAA,MAAM,CAACkB,QAAP,CAAgBZ,KAAhB,CAHU,IAGeH,YAHf;AAIVH,UAAAA,MAAM,CAACmB,KAAP,CAAab,KAAb,CAJU,IAIYE,YAJZ,OADf;;AAOE,UAAA,OAAO,EAAEJ,YAPX;AAQE,UAAA,OAAO,EAAEM,WARX;AASE,UAAA,MAAM,EAAEG,UATV;AAUE,sBAAUZ,aAAa,CAACe,KAV1B;AAWE,UAAA,QAAQ,EAAEb,YAAY,GAAG,CAAC,CAAJ,GAAQ,CAXhC;;AAaGW,QAAAA,IAbH,CADD,GADH,CADF,CADF;;;;;;AAuBD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular';\n\nimport { CloseProps } from './ModalContext';\nimport { styles } from './Modal.styles';\nimport { ModalDataTids } from './Modal';\n\nexport function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) {\n  const theme = useContext(ThemeContext);\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setFocusedByTab(false);\n  };\n\n  const icon = isTheme2022(theme) ? <XIcon20Regular align=\"none\" /> : <CrossIcon />;\n\n  return (\n    <CommonWrapper {...otherProps}>\n      <ResponsiveLayout>\n        {({ isMobile }) => (\n          <button\n            className={cx({\n              [styles.close(theme)]: true,\n              [styles.mobileClose(theme)]: isMobile,\n              [styles.disabled(theme)]: disableClose,\n              [styles.focus(theme)]: focusedByTab,\n            })}\n            onClick={requestClose}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            data-tid={ModalDataTids.close}\n            tabIndex={disableClose ? -1 : 0}\n          >\n            {icon}\n          </button>\n        )}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n"]}

package/components/Modal/ModalClose.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { CloseProps } from './ModalContext';
-export declare function ModalClose({ disableClose, requestClose }: CloseProps): JSX.Element;
+export declare function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps): JSX.Element;

package/components/Modal/ModalContext/ModalContext.js

@@ -1,3 +1,3 @@
 import React from 'react';
-export var ModalContext = React.createContext({});
+export var ModalContext = /*#__PURE__*/React.createContext({});
 ModalContext.displayName = 'ModalContext';

package/components/Modal/ModalContext/ModalContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalContext.tsx"],"names":["React","ModalContext","createContext","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;;;;;;;;;AAcA,OAAO,IAAMC,YAAY,GAAGD,KAAK,CAACE,aAAN,CAAuC,EAAvC,CAArB;;AAEPD,YAAY,CAACE,WAAb,GAA2B,cAA3B","sourcesContent":["import React from 'react';\r\n\r\nexport interface CloseProps {\r\n  disableClose?: boolean;\r\n  requestClose: () => void;\r\n}\r\n\r\nexport interface ModalContextProps {\r\n  additionalPadding?: boolean;\r\n  hasHeader?: boolean;\r\n  close?: CloseProps;\r\n  horizontalScroll?: boolean;\r\n}\r\n\r\nexport const ModalContext = React.createContext<ModalContextProps>({});\r\n\r\nModalContext.displayName = 'ModalContext';\r\n"]}
+{"version":3,"sources":["ModalContext.tsx"],"names":["React","ModalContext","createContext","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;;;;;;;;;;;;;;AAmBA,OAAO,IAAMC,YAAY,gBAAGD,KAAK,CAACE,aAAN,CAAuC,EAAvC,CAArB;;AAEPD,YAAY,CAACE,WAAb,GAA2B,cAA3B","sourcesContent":["import React from 'react';\n\nimport { CommonProps } from '../../internal/CommonWrapper';\n\nexport interface CloseProps extends CommonProps {\n  disableClose?: boolean;\n  requestClose: () => void;\n}\n\nexport interface ModalContextProps {\n  additionalPadding?: boolean;\n  hasHeader?: boolean;\n  close?: CloseProps;\n  horizontalScroll?: boolean;\n  setHasHeader?: (value?: boolean) => void;\n  setHasFooter?: (value?: boolean) => void;\n  setHasPanel?: (value?: boolean) => void;\n}\n\nexport const ModalContext = React.createContext<ModalContextProps>({});\n\nModalContext.displayName = 'ModalContext';\n"]}

package/components/Modal/ModalContext.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface CloseProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface CloseProps extends CommonProps {
     disableClose?: boolean;
     requestClose: () => void;
 }
@@ -8,5 +9,8 @@ export interface ModalContextProps {
     hasHeader?: boolean;
     close?: CloseProps;
     horizontalScroll?: boolean;
+    setHasHeader?: (value?: boolean) => void;
+    setHasFooter?: (value?: boolean) => void;
+    setHasPanel?: (value?: boolean) => void;
 }
 export declare const ModalContext: React.Context<ModalContextProps>;

package/components/Modal/ModalFooter/ModalFooter.js

@@ -1,61 +1,62 @@
-import React, { useContext, useEffect, useState } from 'react';
-import cn from 'classnames';
+import React, { useContext, useLayoutEffect } from 'react';
 import { getScrollWidth } from "../../../lib/dom/getScrollWidth";
 import { Sticky } from "../../Sticky";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { ZIndex } from "../../../internal/ZIndex";
-import { jsStyles } from "../Modal.styles";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { useResponsiveLayout } from "../../ResponsiveLayout";
+import { Gapped } from "../../Gapped";
+import { isNonNullable } from "../../../lib/utils";
+import { styles } from "../Modal.styles";
 import { ModalContext } from "../ModalContext";
-/**
-                                                * Футер модального окна.
-                                                *
-                                                * @visibleName Modal.Footer
-                                                */
+import { ModalSeparator } from "../ModalSeparator";
+export var ModalFooterDataTids = {
+  root: 'ModalFooter__root'
+};
+/**
+ * Футер модального окна.
+ *
+ * @visibleName Modal.Footer
+ */
 
 function ModalFooter(props) {
+  var theme = useContext(ThemeContext);
+  var modal = useContext(ModalContext);
+  var layout = useResponsiveLayout();
   var _props$sticky = props.sticky,
-      sticky = _props$sticky === void 0 ? true : _props$sticky,
+      sticky = _props$sticky === void 0 ? !layout.isMobile : _props$sticky,
+      gap = props.gap,
       panel = props.panel,
       children = props.children;
-  var theme = useContext(ThemeContext);
-
-  var _useState = useState(0),
-      scrollbarWidth = _useState[0],
-      setScrollBarWidth = _useState[1];
-
-  useEffect(function () {
-    setScrollBarWidth(getScrollWidth());
-  }, []);
+  useLayoutEffect(function () {
+    modal.setHasFooter == null ? void 0 : modal.setHasFooter();
+    modal.setHasPanel == null ? void 0 : modal.setHasPanel(panel);
+    return function () {
+      modal.setHasFooter == null ? void 0 : modal.setHasFooter(false);
+      modal.setHasPanel == null ? void 0 : modal.setHasPanel(false);
+    };
+  }, [panel]);
 
   var renderContent = function renderContent(fixed) {
-    var _cn;
-
     if (fixed === void 0) {
       fixed = false;
     }
 
-    return React.createElement("div", {
-      className: cn((_cn = {}, _cn[jsStyles.footer()] = true, _cn[jsStyles.panel(theme)] = Boolean(panel), _cn[jsStyles.fixedFooter(theme)] = fixed, _cn))
-    }, children);
+    return /*#__PURE__*/React.createElement("div", null, (panel || fixed) && /*#__PURE__*/React.createElement(ModalSeparator, {
+      fixed: fixed
+    }), /*#__PURE__*/React.createElement("div", {
+      "data-tid": ModalFooterDataTids.root,
+      className: cx(styles.footer(theme), fixed && styles.fixedFooter(theme), Boolean(panel) && styles.panel(theme), fixed && Boolean(panel) && styles.fixedPanel(theme), layout.isMobile && styles.mobileFooter(theme))
+    }, isNonNullable(gap) ? /*#__PURE__*/React.createElement(Gapped, {
+      vertical: layout.isMobile,
+      gap: gap
+    }, children) : children));
   };
 
-  return React.createElement(ZIndex, {
-    style: {
-      position: 'relative'
-    },
-    priority: 'ModalFooter'
-  }, React.createElement(ModalContext.Consumer, null, function (_ref) {
-    var horizontalScroll = _ref.horizontalScroll;
-
-    if (sticky) {
-      return React.createElement(Sticky, {
-        side: "bottom",
-        offset: horizontalScroll ? scrollbarWidth : 0
-      }, renderContent);
-    }
-
-    return renderContent();
-  }));
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, sticky ? /*#__PURE__*/React.createElement(Sticky, {
+    side: "bottom",
+    offset: modal.horizontalScroll ? getScrollWidth() : 0
+  }, renderContent) : renderContent());
 }
 
 ModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';

package/components/Modal/ModalFooter/ModalFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalFooter.tsx"],"names":["React","useContext","useEffect","useState","cn","getScrollWidth","Sticky","ThemeContext","ZIndex","jsStyles","ModalContext","ModalFooter","props","sticky","panel","children","theme","scrollbarWidth","setScrollBarWidth","renderContent","fixed","footer","Boolean","fixedFooter","position","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"AAAA,OAAOA,KAAP,IAA2BC,UAA3B,EAAuCC,SAAvC,EAAkDC,QAAlD,QAAkE,OAAlE;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,cAAT,QAA+B,8BAA/B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAT,QAAuB,uBAAvB;;AAEA,SAASC,QAAT,QAAyB,gBAAzB;AACA,SAASC,YAAT,QAA6B,gBAA7B;;;;;;;;;;;AAWA;;;;;AAKA,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AACDA,EAAAA,KADC,CACpCC,MADoC,CACpCA,MADoC,8BAC3B,IAD2B,iBACrBC,KADqB,GACDF,KADC,CACrBE,KADqB,CACdC,QADc,GACDH,KADC,CACdG,QADc;AAE5C,MAAMC,KAAK,GAAGf,UAAU,CAACM,YAAD,CAAxB,CAF4C;AAGAJ,EAAAA,QAAQ,CAAC,CAAD,CAHR,CAGrCc,cAHqC,gBAGrBC,iBAHqB;;AAK5ChB,EAAAA,SAAS,CAAC,YAAM;AACdgB,IAAAA,iBAAiB,CAACb,cAAc,EAAf,CAAjB;AACD,GAFQ,EAEN,EAFM,CAAT;;AAIA,MAAMc,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,eAACA,KAAD,cAACA,KAAD,GAAS,KAAT;AACpB;AACE,QAAA,SAAS,EAAEhB,EAAE;AACVK,QAAAA,QAAQ,CAACY,MAAT,EADU,IACU,IADV;AAEVZ,QAAAA,QAAQ,CAACK,KAAT,CAAeE,KAAf,CAFU,IAEcM,OAAO,CAACR,KAAD,CAFrB;AAGVL,QAAAA,QAAQ,CAACc,WAAT,CAAqBP,KAArB,CAHU,IAGoBI,KAHpB,OADf;;;AAOGL,MAAAA,QAPH,CADoB,GAAtB;;;;AAYA;AACE,wBAAC,MAAD,IAAQ,KAAK,EAAE,EAAES,QAAQ,EAAE,UAAZ,EAAf,EAAyC,QAAQ,EAAE,aAAnD;AACE,wBAAC,YAAD,CAAc,QAAd;AACG,oBAA0B,KAAvBC,gBAAuB,QAAvBA,gBAAuB;AACzB,UAAIZ,MAAJ,EAAY;AACV;AACE,8BAAC,MAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEY,gBAAgB,GAAGR,cAAH,GAAoB,CAAlE;AACGE,UAAAA,aADH,CADF;;;AAKD;;AAED,aAAOA,aAAa,EAApB;AACD,KAXH,CADF,CADF;;;;AAiBD;;AAEDR,WAAW,CAACe,mBAAZ,GAAkC,aAAlC;AACAf,WAAW,CAACgB,gBAAZ,GAA+B,IAA/B;;AAEA,SAAShB,WAAT","sourcesContent":["import React, { ReactNode, useContext, useEffect, useState } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\r\nimport { Sticky } from '../Sticky';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\n\r\nimport { jsStyles } from './Modal.styles';\r\nimport { ModalContext } from './ModalContext';\r\n\r\nexport interface ModalFooterProps {\r\n  /**\r\n   * Включает серый цвет в футере\r\n   */\r\n  panel?: boolean;\r\n  sticky?: boolean;\r\n  children?: ReactNode;\r\n}\r\n\r\n/**\r\n * Футер модального окна.\r\n *\r\n * @visibleName Modal.Footer\r\n */\r\nfunction ModalFooter(props: ModalFooterProps) {\r\n  const { sticky = true, panel, children } = props;\r\n  const theme = useContext(ThemeContext);\r\n  const [scrollbarWidth, setScrollBarWidth] = useState(0);\r\n\r\n  useEffect(() => {\r\n    setScrollBarWidth(getScrollWidth());\r\n  }, []);\r\n\r\n  const renderContent = (fixed = false) => (\r\n    <div\r\n      className={cn({\r\n        [jsStyles.footer()]: true,\r\n        [jsStyles.panel(theme)]: Boolean(panel),\r\n        [jsStyles.fixedFooter(theme)]: fixed,\r\n      })}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n\r\n  return (\r\n    <ZIndex style={{ position: 'relative' }} priority={'ModalFooter'}>\r\n      <ModalContext.Consumer>\r\n        {({ horizontalScroll }) => {\r\n          if (sticky) {\r\n            return (\r\n              <Sticky side=\"bottom\" offset={horizontalScroll ? scrollbarWidth : 0}>\r\n                {renderContent}\r\n              </Sticky>\r\n            );\r\n          }\r\n\r\n          return renderContent();\r\n        }}\r\n      </ModalContext.Consumer>\r\n    </ZIndex>\r\n  );\r\n}\r\n\r\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\r\nModalFooter.__MODAL_FOOTER__ = true;\r\n\r\nexport { ModalFooter };\r\n"]}
+{"version":3,"sources":["ModalFooter.tsx"],"names":["React","useContext","useLayoutEffect","getScrollWidth","Sticky","ThemeContext","CommonWrapper","cx","useResponsiveLayout","Gapped","isNonNullable","styles","ModalContext","ModalSeparator","ModalFooterDataTids","root","ModalFooter","props","theme","modal","layout","sticky","isMobile","gap","panel","children","setHasFooter","setHasPanel","renderContent","fixed","footer","fixedFooter","Boolean","fixedPanel","mobileFooter","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"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","sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\nimport { Gapped, GappedProps } from '../Gapped';\nimport { isNonNullable } from '../../lib/utils';\n\nimport { styles } from './Modal.styles';\nimport { ModalContext } from './ModalContext';\nimport { ModalSeparator } from './ModalSeparator';\n\nexport interface ModalFooterProps extends CommonProps {\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  /**\n   * Закрепляет футер снизу модального окна\n   *\n   * На десктопе по умолчанию равен `true`\n   * На мобильных по умолчанию равен `false`\n   */\n  sticky?: boolean;\n  /**\n   * Контент футера\n   */\n  children?: ReactNode;\n  /**\n   * Задаёт отступ между элементами футера\n   */\n  gap?: GappedProps['gap'];\n}\n\nexport const ModalFooterDataTids = {\n  root: 'ModalFooter__root',\n} as const;\n\n/**\n * Футер модального окна.\n *\n * @visibleName Modal.Footer\n */\nfunction ModalFooter(props: ModalFooterProps) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, gap, panel, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasFooter?.();\n    modal.setHasPanel?.(panel);\n\n    return () => {\n      modal.setHasFooter?.(false);\n      modal.setHasPanel?.(false);\n    };\n  }, [panel]);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div>\n        {(panel || fixed) && <ModalSeparator fixed={fixed} />}\n        <div\n          data-tid={ModalFooterDataTids.root}\n          className={cx(\n            styles.footer(theme),\n            fixed && styles.fixedFooter(theme),\n            Boolean(panel) && styles.panel(theme),\n            fixed && Boolean(panel) && styles.fixedPanel(theme),\n            layout.isMobile && styles.mobileFooter(theme),\n          )}\n        >\n          {isNonNullable(gap) ? (\n            <Gapped vertical={layout.isMobile} gap={gap}>\n              {children}\n            </Gapped>\n          ) : (\n            children\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      {sticky ? (\n        <Sticky side=\"bottom\" offset={modal.horizontalScroll ? getScrollWidth() : 0}>\n          {renderContent}\n        </Sticky>\n      ) : (\n        renderContent()\n      )}\n    </CommonWrapper>\n  );\n}\n\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\nModalFooter.__MODAL_FOOTER__ = true;\n\nexport { ModalFooter };\n"]}

package/components/Modal/ModalFooter.d.ts

@@ -1,12 +1,30 @@
 import { ReactNode } from 'react';
-export interface ModalFooterProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+import { GappedProps } from '../Gapped';
+export interface ModalFooterProps extends CommonProps {
     /**
      * Включает серый цвет в футере
      */
     panel?: boolean;
+    /**
+     * Закрепляет футер снизу модального окна
+     *
+     * На десктопе по умолчанию равен `true`
+     * На мобильных по умолчанию равен `false`
+     */
     sticky?: boolean;
+    /**
+     * Контент футера
+     */
     children?: ReactNode;
+    /**
+     * Задаёт отступ между элементами футера
+     */
+    gap?: GappedProps['gap'];
 }
+export declare const ModalFooterDataTids: {
+    readonly root: "ModalFooter__root";
+};
 /**
  * Футер модального окна.
  *

package/components/Modal/ModalHeader/ModalHeader.js

@@ -1,59 +1,55 @@
-import React, { useContext } from 'react';
-import cn from 'classnames';
+import React, { useContext, useLayoutEffect } from 'react';
 import { Sticky } from "../../Sticky";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { ZIndex } from "../../../internal/ZIndex";
-import { jsStyles } from "../Modal.styles";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { useResponsiveLayout } from "../../ResponsiveLayout";
+import { styles } from "../Modal.styles";
 import { ModalClose } from "../ModalClose";
 import { ModalContext } from "../ModalContext";
-/**
-                                                * Шапка модального окна
-                                                *
-                                                * @visibleName Modal.Header
-                                                */
-
-function ModalHeader(_ref) {
-  var _ref$sticky = _ref.sticky,
-      sticky = _ref$sticky === void 0 ? true : _ref$sticky,
-      children = _ref.children;
+import { ModalSeparator } from "../ModalSeparator";
+export var ModalHeaderDataTids = {
+  root: 'ModalHeader__root'
+};
+/**
+ * Шапка модального окна
+ *
+ * @visibleName Modal.Header
+ */
+
+function ModalHeader(props) {
   var theme = useContext(ThemeContext);
-
-  var renderContent = function renderContent(close, additionalPadding) {
-    return function (fixed) {
-      var _cn;
-
-      if (fixed === void 0) {
-        fixed = false;
-      }
-
-      return React.createElement("div", {
-        className: cn((_cn = {}, _cn[jsStyles.header()] = true, _cn[jsStyles.fixedHeader(theme)] = fixed, _cn[jsStyles.headerAddPadding()] = Boolean(additionalPadding), _cn))
-      }, close && React.createElement("div", {
-        className: jsStyles.absoluteClose()
-      }, React.createElement(ModalClose, {
-        requestClose: close.requestClose,
-        disableClose: close.disableClose
-      })), children);
+  var modal = useContext(ModalContext);
+  var layout = useResponsiveLayout();
+  var _props$sticky = props.sticky,
+      sticky = _props$sticky === void 0 ? !layout.isMobile : _props$sticky,
+      children = props.children;
+  useLayoutEffect(function () {
+    modal.setHasHeader == null ? void 0 : modal.setHasHeader();
+    return function () {
+      return modal.setHasHeader == null ? void 0 : modal.setHasHeader(false);
     };
-  };
-
-  return React.createElement(ZIndex, {
-    style: {
-      position: 'relative'
-    },
-    priority: 'ModalHeader'
-  }, React.createElement(ModalContext.Consumer, null, function (_ref2) {
-    var close = _ref2.close,
-        additionalPadding = _ref2.additionalPadding;
+  }, []);
 
-    if (sticky) {
-      return React.createElement(Sticky, {
-        side: "top"
-      }, renderContent(close, additionalPadding));
+  var renderContent = function renderContent(fixed) {
+    if (fixed === void 0) {
+      fixed = false;
     }
 
-    return renderContent(close, additionalPadding)();
-  }));
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      "data-tid": ModalHeaderDataTids.root,
+      className: cx(styles.header(theme), layout.isMobile && styles.mobileHeader(theme), Boolean(modal.additionalPadding) && styles.headerAddPadding(theme), fixed && styles.fixedHeader(theme), fixed && layout.isMobile && styles.mobileFixedHeader(theme), Boolean(modal.close) && styles.headerWithClose(theme), layout.isMobile && styles.mobileHeaderWithClose(theme))
+    }, modal.close && /*#__PURE__*/React.createElement(ModalClose, {
+      requestClose: modal.close.requestClose,
+      disableClose: modal.close.disableClose
+    }), children), fixed && /*#__PURE__*/React.createElement(ModalSeparator, {
+      fixed: fixed
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, sticky ? /*#__PURE__*/React.createElement(Sticky, {
+    side: "top"
+  }, renderContent) : renderContent());
 }
 
 ModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';

package/components/Modal/ModalHeader/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalHeader.tsx"],"names":["React","useContext","cn","Sticky","ThemeContext","ZIndex","jsStyles","ModalClose","ModalContext","ModalHeader","sticky","children","theme","renderContent","close","additionalPadding","fixed","header","fixedHeader","headerAddPadding","Boolean","absoluteClose","requestClose","disableClose","position","__KONTUR_REACT_UI__","__MODAL_HEADER__"],"mappings":"AAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAT,QAAuB,uBAAvB;;AAEA,SAASC,QAAT,QAAyB,gBAAzB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAAqBC,YAArB,QAAyC,gBAAzC;;;;;;AAMA;;;;;AAKA,SAASC,WAAT,OAAoE,wBAA7CC,MAA6C,CAA7CA,MAA6C,4BAApC,IAAoC,eAA9BC,QAA8B,QAA9BA,QAA8B;AAClE,MAAMC,KAAK,GAAGX,UAAU,CAACG,YAAD,CAAxB;;AAEA,MAAMS,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAqBC,iBAArB,UAAqD,UAACC,KAAD,EAAmB,aAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AAC5F;AACE;AACE,UAAA,SAAS,EAAEd,EAAE;AACVI,UAAAA,QAAQ,CAACW,MAAT,EADU,IACU,IADV;AAEVX,UAAAA,QAAQ,CAACY,WAAT,CAAqBN,KAArB,CAFU,IAEoBI,KAFpB;AAGVV,UAAAA,QAAQ,CAACa,gBAAT,EAHU,IAGoBC,OAAO,CAACL,iBAAD,CAH3B,OADf;;;AAOGD,QAAAA,KAAK;AACJ,qCAAK,SAAS,EAAER,QAAQ,CAACe,aAAT,EAAhB;AACE,4BAAC,UAAD,IAAY,YAAY,EAAEP,KAAK,CAACQ,YAAhC,EAA8C,YAAY,EAAER,KAAK,CAACS,YAAlE,GADF,CARJ;;;AAYGZ,QAAAA,QAZH,CADF;;;AAgBD,KAjBqB,EAAtB;;AAmBA;AACE,wBAAC,MAAD,IAAQ,KAAK,EAAE,EAAEa,QAAQ,EAAE,UAAZ,EAAf,EAAyC,QAAQ,EAAE,aAAnD;AACE,wBAAC,YAAD,CAAc,QAAd;AACG,qBAAkC,KAA/BV,KAA+B,SAA/BA,KAA+B,CAAxBC,iBAAwB,SAAxBA,iBAAwB;AACjC,UAAIL,MAAJ,EAAY;AACV,eAAO,oBAAC,MAAD,IAAQ,IAAI,EAAC,KAAb,IAAoBG,aAAa,CAACC,KAAD,EAAQC,iBAAR,CAAjC,CAAP;AACD;;AAED,aAAOF,aAAa,CAACC,KAAD,EAAQC,iBAAR,CAAb,EAAP;AACD,KAPH,CADF,CADF;;;;AAaD;;AAEDN,WAAW,CAACgB,mBAAZ,GAAkC,aAAlC;AACAhB,WAAW,CAACiB,gBAAZ,GAA+B,IAA/B;;AAEA,SAASjB,WAAT","sourcesContent":["import React, { ReactNode, useContext } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { Sticky } from '../Sticky';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\n\r\nimport { jsStyles } from './Modal.styles';\r\nimport { ModalClose } from './ModalClose';\r\nimport { CloseProps, ModalContext } from './ModalContext';\r\n\r\nexport interface ModalHeaderProps {\r\n  sticky?: boolean;\r\n  children?: ReactNode;\r\n}\r\n/**\r\n * Шапка модального окна\r\n *\r\n * @visibleName Modal.Header\r\n */\r\nfunction ModalHeader({ sticky = true, children }: ModalHeaderProps) {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  const renderContent = (close?: CloseProps, additionalPadding?: boolean) => (fixed = false) => {\r\n    return (\r\n      <div\r\n        className={cn({\r\n          [jsStyles.header()]: true,\r\n          [jsStyles.fixedHeader(theme)]: fixed,\r\n          [jsStyles.headerAddPadding()]: Boolean(additionalPadding),\r\n        })}\r\n      >\r\n        {close && (\r\n          <div className={jsStyles.absoluteClose()}>\r\n            <ModalClose requestClose={close.requestClose} disableClose={close.disableClose} />\r\n          </div>\r\n        )}\r\n        {children}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ZIndex style={{ position: 'relative' }} priority={'ModalHeader'}>\r\n      <ModalContext.Consumer>\r\n        {({ close, additionalPadding }) => {\r\n          if (sticky) {\r\n            return <Sticky side=\"top\">{renderContent(close, additionalPadding)}</Sticky>;\r\n          }\r\n\r\n          return renderContent(close, additionalPadding)();\r\n        }}\r\n      </ModalContext.Consumer>\r\n    </ZIndex>\r\n  );\r\n}\r\n\r\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\r\nModalHeader.__MODAL_HEADER__ = true;\r\n\r\nexport { ModalHeader };\r\n"]}
+{"version":3,"sources":["ModalHeader.tsx"],"names":["React","useContext","useLayoutEffect","Sticky","ThemeContext","CommonWrapper","cx","useResponsiveLayout","styles","ModalClose","ModalContext","ModalSeparator","ModalHeaderDataTids","root","ModalHeader","props","theme","modal","layout","sticky","isMobile","children","setHasHeader","renderContent","fixed","header","mobileHeader","Boolean","additionalPadding","headerAddPadding","fixedHeader","mobileFixedHeader","close","headerWithClose","mobileHeaderWithClose","requestClose","disableClose","__KONTUR_REACT_UI__","__MODAL_HEADER__"],"mappings":"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","sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './Modal.styles';\nimport { ModalClose } from './ModalClose';\nimport { ModalContext } from './ModalContext';\nimport { ModalSeparator } from './ModalSeparator';\n\nexport interface ModalHeaderProps extends CommonProps {\n  sticky?: boolean;\n  children?: ReactNode;\n}\n\nexport const ModalHeaderDataTids = {\n  root: 'ModalHeader__root',\n} as const;\n\n/**\n * Шапка модального окна\n *\n * @visibleName Modal.Header\n */\nfunction ModalHeader(props: ModalHeaderProps) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasHeader?.();\n\n    return () => modal.setHasHeader?.(false);\n  }, []);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div>\n        <div\n          data-tid={ModalHeaderDataTids.root}\n          className={cx(\n            styles.header(theme),\n            layout.isMobile && styles.mobileHeader(theme),\n            Boolean(modal.additionalPadding) && styles.headerAddPadding(theme),\n            fixed && styles.fixedHeader(theme),\n            fixed && layout.isMobile && styles.mobileFixedHeader(theme),\n            Boolean(modal.close) && styles.headerWithClose(theme),\n            layout.isMobile && styles.mobileHeaderWithClose(theme),\n          )}\n        >\n          {modal.close && (\n            <ModalClose requestClose={modal.close.requestClose} disableClose={modal.close.disableClose} />\n          )}\n          {children}\n        </div>\n        {fixed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  return (\n    <CommonWrapper {...props}>{sticky ? <Sticky side=\"top\">{renderContent}</Sticky> : renderContent()}</CommonWrapper>\n  );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"]}

package/components/Modal/ModalHeader.d.ts

@@ -1,14 +1,18 @@
 import { ReactNode } from 'react';
-export interface ModalHeaderProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface ModalHeaderProps extends CommonProps {
     sticky?: boolean;
     children?: ReactNode;
 }
+export declare const ModalHeaderDataTids: {
+    readonly root: "ModalHeader__root";
+};
 /**
  * Шапка модального окна
  *
  * @visibleName Modal.Header
  */
-declare function ModalHeader({ sticky, children }: ModalHeaderProps): JSX.Element;
+declare function ModalHeader(props: ModalHeaderProps): JSX.Element;
 declare namespace ModalHeader {
     var __KONTUR_REACT_UI__: string;
     var __MODAL_HEADER__: boolean;

package/components/Modal/ModalSeparator/ModalSeparator.js

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { styles } from "../Modal.styles";
+export function ModalSeparator(_ref) {
+  var fixed = _ref.fixed;
+  var theme = useContext(ThemeContext);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.modalSeparatorWrapper()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(styles.modalSeparator(theme), fixed && styles.modalSeparatorFixed())
+  }));
+}

package/components/Modal/ModalSeparator/ModalSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ModalSeparator.tsx"],"names":["React","useContext","cx","ThemeContext","styles","ModalSeparator","fixed","theme","modalSeparatorWrapper","modalSeparator","modalSeparatorFixed"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,MAAT,QAAuB,gBAAvB;;;;;;AAMA,OAAO,SAASC,cAAT,OAAwD,KAA9BC,KAA8B,QAA9BA,KAA8B;AAC7D,MAAMC,KAAK,GAAGN,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE,iCAAK,SAAS,EAAEC,MAAM,CAACI,qBAAP,EAAhB;AACE,iCAAK,SAAS,EAAEN,EAAE,CAACE,MAAM,CAACK,cAAP,CAAsBF,KAAtB,CAAD,EAA+BD,KAAK,IAAIF,MAAM,CAACM,mBAAP,EAAxC,CAAlB,GADF,CADF;;;AAKD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { CommonProps } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { styles } from './Modal.styles';\n\nexport interface ModalSeparatorProps extends CommonProps {\n  fixed?: boolean;\n}\n\nexport function ModalSeparator({ fixed }: ModalSeparatorProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <div className={styles.modalSeparatorWrapper()}>\n      <div className={cx(styles.modalSeparator(theme), fixed && styles.modalSeparatorFixed())} />\n    </div>\n  );\n}\n"]}

package/components/Modal/ModalSeparator/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Modal/ModalSeparator.js",
+  "module": "ModalSeparator",
+  "types": "../ModalSeparator.d.ts",
+  "sideEffects": false
+}

package/components/Modal/ModalSeparator.d.ts

@@ -0,0 +1,5 @@
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface ModalSeparatorProps extends CommonProps {
+    fixed?: boolean;
+}
+export declare function ModalSeparator({ fixed }: ModalSeparatorProps): JSX.Element;

package/components/Modal/getModalBodyTheme/getModalBodyTheme.js

@@ -0,0 +1,6 @@
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+export var getModalBodyTheme = function getModalBodyTheme(theme) {
+  return ThemeFactory.create({
+    loaderBorderRadius: theme.modalBodyBorderRadius
+  }, theme);
+};

package/components/Modal/getModalBodyTheme/getModalBodyTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getModalBodyTheme.ts"],"names":["ThemeFactory","getModalBodyTheme","theme","create","loaderBorderRadius","modalBodyBorderRadius"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAAyB;AACxD,SAAOF,YAAY,CAACG,MAAb;AACL;AACEC,IAAAA,kBAAkB,EAAEF,KAAK,CAACG,qBAD5B,EADK;;AAILH,EAAAA,KAJK,CAAP;;AAMD,CAPM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getModalBodyTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      loaderBorderRadius: theme.modalBodyBorderRadius,\n    },\n    theme,\n  );\n};\n"]}

package/components/Modal/getModalBodyTheme/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Modal/getModalBodyTheme.js",
+  "module": "getModalBodyTheme",
+  "types": "../getModalBodyTheme.d.ts",
+  "sideEffects": false
+}

package/components/Modal/getModalBodyTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const getModalBodyTheme: (theme: Theme) => Theme;

package/components/Modal/getModalTheme/getModalTheme.js

@@ -0,0 +1,6 @@
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+export var getModalTheme = function getModalTheme(theme) {
+  return ThemeFactory.create({
+    loaderBorderRadius: theme.modalBorderRadius
+  }, theme);
+};

package/components/Modal/getModalTheme/getModalTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getModalTheme.ts"],"names":["ThemeFactory","getModalTheme","theme","create","loaderBorderRadius","modalBorderRadius"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAyB;AACpD,SAAOF,YAAY,CAACG,MAAb;AACL;AACEC,IAAAA,kBAAkB,EAAEF,KAAK,CAACG,iBAD5B,EADK;;AAILH,EAAAA,KAJK,CAAP;;AAMD,CAPM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getModalTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      loaderBorderRadius: theme.modalBorderRadius,\n    },\n    theme,\n  );\n};\n"]}

package/components/Modal/getModalTheme/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Modal/getModalTheme.js",
+  "module": "getModalTheme",
+  "types": "../getModalTheme.d.ts",
+  "sideEffects": false
+}

package/components/Modal/getModalTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const getModalTheme: (theme: Theme) => Theme;

package/components/Modal/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd;AACA,cAAc,eAAd;AACA,cAAc,aAAd;AACA,cAAc,eAAd","sourcesContent":["export * from './Modal';\r\nexport * from './ModalHeader';\r\nexport * from './ModalBody';\r\nexport * from './ModalFooter';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd;AACA,cAAc,eAAd;AACA,cAAc,aAAd;AACA,cAAc,eAAd","sourcesContent":["export * from './Modal';\nexport * from './ModalHeader';\nexport * from './ModalBody';\nexport * from './ModalFooter';\n"]}

package/components/Paging/ForwardIcon/ForwardIcon.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { ArrowCRightIcon16Light } from "../../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon16Light";
+import { ArrowCRightIcon20Light } from "../../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon20Light";
+import { ArrowCRightIcon24Regular } from "../../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon24Regular";
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+export var ForwardIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(ArrowCRightIcon16Light, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(ArrowCRightIcon20Light, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(ArrowCRightIcon24Regular, null);
+  }
+}, 'ForwardIcon');

package/components/Paging/ForwardIcon/ForwardIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ForwardIcon.tsx"],"names":["React","ArrowCRightIcon16Light","ArrowCRightIcon20Light","ArrowCRightIcon24Regular","iconSizer","ForwardIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,sBAAT,QAAuC,iEAAvC;AACA,SAASC,sBAAT,QAAuC,iEAAvC;AACA,SAASC,wBAAT,QAAyC,mEAAzC;AACA,SAASC,SAAT,QAA0B,oCAA1B;;AAEA,OAAO,IAAMC,WAAW,GAAGD,SAAS;AAClC;AACEE,EAAAA,KAAK,EAAE,sCAAM,oBAAC,sBAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,sBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,wBAAD,OAAN,EAHT,EADkC;;AAMlC,aANkC,CAA7B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowCRightIcon16Light } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon16Light';\nimport { ArrowCRightIcon20Light } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon20Light';\nimport { ArrowCRightIcon24Regular } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ForwardIcon = iconSizer(\n  {\n    small: () => <ArrowCRightIcon16Light />,\n    medium: () => <ArrowCRightIcon20Light />,\n    large: () => <ArrowCRightIcon24Regular />,\n  },\n  'ForwardIcon',\n);\n"]}

package/components/Paging/ForwardIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Paging/ForwardIcon.js",
+  "module": "ForwardIcon",
+  "types": "../ForwardIcon.d.ts",
+  "sideEffects": false
+}