@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/components/MiniModal/MiniModal.md

@@ -0,0 +1,231 @@
+Этот компонент обёртка над [Modal](#/Components/Modal/Modal).
+
+`MiniModal` — модальное диалоговое окно, которое предполагает обязательный отклик пользователя по одному из доступных действий.
+Закрытие окна по клику на фон или "крестик" не рекомендуется, т.к. у этих действий нет однозначного описания в
+отличие от кнопок с названиями, наподобие "Сохранить", "Подтвердить" и т.п.
+
+👉 По макету предполагается, что все кнопки должны быть среднего размера `size = medium`.
+
+### Уведомление
+
+Самый простой вариант использования:
+
+```jsx harmony
+import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
+import { MoneyTypeCoinsIcon } from '@skbkontur/icons/MoneyTypeCoinsIcon';
+
+const PayNotifice = () => {
+
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  return (
+    <>
+      {isOpened && (
+        <MiniModal>
+          <MiniModal.Header>
+            Простое уведомление
+          </MiniModal.Header>
+          <MiniModal.Body>
+            Это простое, но достаточное важное уведомление, чтобы его показать в МиниМодалке
+          </MiniModal.Body>
+          <MiniModal.Footer>
+            <Button size="medium" use="primary" onClick={close}>Понятно</Button>
+          </MiniModal.Footer>
+        </MiniModal>
+      )}
+      <Button use="pay" onClick={open} icon={<MoneyTypeCoinsIcon/>}>Оплата</Button>
+    </>
+  );
+}
+
+<PayNotifice />
+```
+
+### Подтверждение
+
+Иногда от пользователя требуется выбрать одно из доступных действий.
+
+Например, подтвердить важное действие или отклонить его:
+
+```jsx harmony
+import { MiniModal, Button, Gapped, ThemeContext } from '@skbkontur/react-ui';
+import { TrashCanIcon } from '@skbkontur/icons/TrashCanIcon';
+
+const ConfirmDelete = ({ name, handleDelete }) => {
+  const theme = React.useContext(ThemeContext);
+
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  const mainAction = () => {
+    handleDelete();
+    close();
+  };
+
+  return (
+    <>
+      {isOpened && (
+        <MiniModal>
+          <MiniModal.Header icon={<TrashCanIcon size={64} color={theme.btnDangerBg}/>}>
+            Удалить "{name}"?
+          </MiniModal.Header>
+          <MiniModal.Footer direction="column">
+            <Button use="danger" size="medium" onClick={mainAction}>Удалить</Button>
+            <Button size="medium" onClick={close}>Отменить</Button>
+          </MiniModal.Footer>
+        </MiniModal>
+      )}
+      <Button onClick={open} icon={<TrashCanIcon weight="light"/>}/>
+    </>
+  );
+}
+
+const list = ['Отчёт № 111', 'Отчёт № 222', 'Отчёт № 333'];
+
+<Gapped vertical>
+  {list.map((name) => (
+    <Gapped key={name}>
+      <div style={{ width: 200, borderBottom: 'dashed 1px' }}>
+        {name}
+      </div>
+      <span>
+        <ConfirmDelete name={name} handleDelete={() => alert(`${name} удалён`)}/>
+      </span>
+    </Gapped>
+  ))}
+</Gapped>
+```
+
+### Синглтон
+
+Одно и то же диалоговое окно может вызываться в разных частях приложения.
+
+В таком случае стоит реализовать паттерн синглтона:
+
+```jsx harmony
+import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
+import { NotificationBellAlarmIcon16Solid } from '@skbkontur/icons/NotificationBellAlarmIcon16Solid';
+import { NotificationBellAlarmIcon64Regular } from '@skbkontur/icons/NotificationBellAlarmIcon64Regular';
+
+const EnableNotification = React.forwardRef(({ setStatus }, ref) => {
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  const handleAllowAll = () => {
+    setStatus('Разрешить все');
+    close();
+  };
+  const handleAllowBasic = () => {
+    setStatus('Разрешить только основные');
+    close();
+  };
+  const handleDenyAll = () => {
+    setStatus('Запретить');
+    close();
+  };
+
+  React.useImperativeHandle(ref, () => ({ open, close }), []);
+
+  return isOpened && (
+    <MiniModal>
+      <MiniModal.Header icon={<NotificationBellAlarmIcon64Regular/>}>
+        Разрешить уведомления?
+      </MiniModal.Header>
+      <MiniModal.Footer direction="column">
+        <Button use="primary" size="medium" onClick={handleAllowAll}>Разрешить все</Button>
+        <Button size="medium" onClick={handleAllowBasic}>Разрешить только основные</Button>
+        <MiniModal.Indent/>
+        <Button size="medium" onClick={handleDenyAll}>Запретить</Button>
+      </MiniModal.Footer>
+    </MiniModal>
+  );
+});
+
+const [status, setStatus] = React.useState('-не выбрано-');
+
+const NotificationEnableRef = React.useRef(null);
+
+const NotificationEnableOpen = () => NotificationEnableRef.current && NotificationEnableRef.current.open();
+
+<>
+  <EnableNotification ref={NotificationEnableRef} setStatus={setStatus}/>
+  <Gapped vertical>
+    <span>
+      <NotificationBellAlarmIcon16Solid/> Статус уведомлений: {status}
+    </span>
+    <Button use="text" theme={{ btnTextBg: '#D6D6D6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
+    <Button use="text" theme={{ btnTextBg: '#E6E6E6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
+    <Button use="text" theme={{ btnTextBg: '#F0F0F0' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
+  </Gapped>
+</>
+```
+
+### Ожидание
+
+Некоторые действия для корректного исполнения требуют блокировки других действий пользователя.
+
+В таких случаях можно, например, использовать проп `loading` для `Button`, и не позволять закрыть окно до конца исполнения:
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+const WaitingUpdate = ({ handleUpdate, setLastUpdated }) => {
+
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  const handleMainClick = () => {
+    setIsLoading(true);
+    handleUpdate()
+      .then(() => {
+        setIsLoading(false);
+        setIsOpened(false);
+        setLastUpdated(new Date());
+      });
+  };
+
+  return (
+    <>
+      {isOpened && (
+        <MiniModal>
+          <MiniModal.Header>
+            Обновить?
+          </MiniModal.Header>
+          <MiniModal.Body>
+            После вашего подтверждения другие действия на странице будут заблокированы на несколько секунд.
+          </MiniModal.Body>
+          <MiniModal.Footer>
+            <Button use="success" size="medium" onClick={handleMainClick} loading={isLoading}>Обновить</Button>
+            <Button size="medium" onClick={close} disabled={isLoading}>Отменить</Button>
+          </MiniModal.Footer>
+
+        </MiniModal>
+      )}
+      <Button onClick={open} use="success">Обновить</Button>
+    </>
+  );
+}
+
+const dateTimeFormat = new Intl.DateTimeFormat('nu', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+const [lastUpdated, setLastUpdated] = React.useState(new Date());
+
+const handleUpdate = () => new Promise((resolve) => setTimeout(resolve, 1500));
+
+<Gapped>
+  <WaitingUpdate handleUpdate={handleUpdate} setLastUpdated={setLastUpdated} />
+  <span>
+    Последнее обновление: {dateTimeFormat.format(lastUpdated)}
+  </span>
+</Gapped>
+```

package/components/MiniModal/MiniModal.styles/MiniModal.styles.js

@@ -1,35 +1,33 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { globalClasses as buttonGlobalClasses } from "../../Button/Button.styles";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    icon: function icon() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        text-align: center;\n      "])));
-    },
-    description: function description() {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        text-align: center;\n      "])));
-    },
-    description5_3: function description5_3(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.miniModalDescriptionFontSize, t.miniModalDescriptionLineHeight);
-    },
-    title: function title() {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        text-align: center;\n      "])));
-    },
-    titleWithIcon: function titleWithIcon(t) {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        margin-top: ", ";\n      "])), t.miniModalTitleMarginTop);
-    },
-    actions: function actions() {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        justify-content: stretch;\n        text-align: center;\n\n        .", " {\n          width: 100%;\n        }\n      "])), buttonGlobalClasses.root);
-    },
-    actionsIndent: function actionsIndent(t) {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        padding: ", " 0;\n      "])), t.miniModalCancelIndent);
-    },
-    actionsRow: function actionsRow(t) {
-      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        flex-direction: row;\n        > *:nth-of-type(1) {\n          margin-right: calc(", " / 2);\n        }\n        > *:nth-of-type(2) {\n          margin-left: calc(", " / 2);\n        }\n      "])), t.miniModalActionGap, t.miniModalActionGap);
-    },
-    actionsColumn: function actionsColumn(t) {
-      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        flex-direction: column;\n        > *:nth-of-type(2) {\n          margin-top: ", ";\n        }\n        > *:nth-of-type(3) {\n          margin-top: ", ";\n        }\n      "])), t.miniModalActionGap, t.miniModalActionGap);
-    }
-  });
-};
+export var styles = memoizeStyle({
+  icon: function icon() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      text-align: center;\n    "])));
+  },
+  description: function description() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: center;\n    "])));
+  },
+  description5_3: function description5_3(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.miniModalDescriptionFontSize, t.miniModalDescriptionLineHeight);
+  },
+  title: function title() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      text-align: center;\n    "])));
+  },
+  titleWithIcon: function titleWithIcon(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      margin-top: ", ";\n    "])), t.miniModalTitleMarginTop);
+  },
+  actions: function actions() {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      justify-content: stretch;\n      text-align: center;\n\n      .", " {\n        width: 100%;\n      }\n    "])), buttonGlobalClasses.root);
+  },
+  actionsIndent: function actionsIndent(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding: ", " 0;\n    "])), t.miniModalCancelIndent);
+  },
+  actionsRow: function actionsRow(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      flex-direction: row;\n      > *:nth-of-type(1) {\n        margin-right: calc(", " / 2);\n      }\n      > *:nth-of-type(2) {\n        margin-left: calc(", " / 2);\n      }\n    "])), t.miniModalActionGap, t.miniModalActionGap);
+  },
+  actionsColumn: function actionsColumn(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      flex-direction: column;\n      > *:nth-of-type(2) {\n        margin-top: ", ";\n      }\n      > *:nth-of-type(3) {\n        margin-top: ", ";\n      }\n    "])), t.miniModalActionGap, t.miniModalActionGap);
+  }
+});

package/components/MiniModal/MiniModal.styles/MiniModal.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","globalClasses","buttonGlobalClasses","getStyles","emotion","icon","css","_templateObject","_taggedTemplateLiteralLoose","description","_templateObject2","description5_3","t","_templateObject3","miniModalDescriptionFontSize","miniModalDescriptionLineHeight","title","_templateObject4","titleWithIcon","_templateObject5","miniModalTitleMarginTop","actions","_templateObject6","root","actionsIndent","_templateObject7","miniModalCancelIndent","actionsRow","_templateObject8","miniModalActionGap","actionsColumn","_templateObject9"],"sources":["MiniModal.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { globalClasses as buttonGlobalClasses } from '../Button/Button.styles';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    icon() {\n      return emotion.css`\n        text-align: center;\n      `;\n    },\n\n    description() {\n      return emotion.css`\n        text-align: center;\n      `;\n    },\n\n    description5_3(t: Theme) {\n      return emotion.css`\n        font-size: ${t.miniModalDescriptionFontSize};\n        line-height: ${t.miniModalDescriptionLineHeight};\n      `;\n    },\n\n    title() {\n      return emotion.css`\n        text-align: center;\n      `;\n    },\n\n    titleWithIcon(t: Theme) {\n      return emotion.css`\n        margin-top: ${t.miniModalTitleMarginTop};\n      `;\n    },\n\n    actions() {\n      return emotion.css`\n        display: flex;\n        justify-content: stretch;\n        text-align: center;\n\n        .${buttonGlobalClasses.root} {\n          width: 100%;\n        }\n      `;\n    },\n\n    actionsIndent(t: Theme) {\n      return emotion.css`\n        padding: ${t.miniModalCancelIndent} 0;\n      `;\n    },\n\n    actionsRow(t: Theme) {\n      return emotion.css`\n        flex-direction: row;\n        > *:nth-of-type(1) {\n          margin-right: calc(${t.miniModalActionGap} / 2);\n        }\n        > *:nth-of-type(2) {\n          margin-left: calc(${t.miniModalActionGap} / 2);\n        }\n      `;\n    },\n\n    actionsColumn(t: Theme) {\n      return emotion.css`\n        flex-direction: column;\n        > *:nth-of-type(2) {\n          margin-top: ${t.miniModalActionGap};\n        }\n        > *:nth-of-type(3) {\n          margin-top: ${t.miniModalActionGap};\n        }\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;AAExD,SAASC,aAAa,IAAIC,mBAAmB,QAAQ,yBAAyB;;AAE9E,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCJ,YAAY,CAAC;MACXK,IAAI,WAAAA,KAAA,EAAG;QACL,OAAOD,OAAO,CAACE,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;MAGpB,CAAC;;MAEDC,WAAW,WAAAA,YAAA,EAAG;QACZ,OAAOL,OAAO,CAACE,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;MAGpB,CAAC;;MAEDG,cAAc,WAAAA,eAACC,CAAQ,EAAE;QACvB,OAAOR,OAAO,CAACE,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;QACHI,CAAC,CAACE,4BAA4B;QAC5BF,CAAC,CAACG,8BAA8B;;MAEnD,CAAC;;MAEDC,KAAK,WAAAA,MAAA,EAAG;QACN,OAAOZ,OAAO,CAACE,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA;;;MAGpB,CAAC;;MAEDU,aAAa,WAAAA,cAACN,CAAQ,EAAE;QACtB,OAAOR,OAAO,CAACE,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;QACFI,CAAC,CAACQ,uBAAuB;;MAE3C,CAAC;;MAEDC,OAAO,WAAAA,QAAA,EAAG;QACR,OAAOjB,OAAO,CAACE,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;;;;;QAKbN,mBAAmB,CAACqB,IAAI;;;;MAI/B,CAAC;;MAEDC,aAAa,WAAAA,cAACZ,CAAQ,EAAE;QACtB,OAAOR,OAAO,CAACE,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAjB,2BAAA;QACLI,CAAC,CAACc,qBAAqB;;MAEtC,CAAC;;MAEDC,UAAU,WAAAA,WAACf,CAAQ,EAAE;QACnB,OAAOR,OAAO,CAACE,GAAG,CAAAsB,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;;;QAGOI,CAAC,CAACiB,kBAAkB;;;QAGrBjB,CAAC,CAACiB,kBAAkB;;;MAG9C,CAAC;;MAEDC,aAAa,WAAAA,cAAClB,CAAQ,EAAE;QACtB,OAAOR,OAAO,CAACE,GAAG,CAAAyB,gBAAA,KAAAA,gBAAA,GAAAvB,2BAAA;;;QAGAI,CAAC,CAACiB,kBAAkB;;;QAGpBjB,CAAC,CAACiB,kBAAkB;;;MAGxC;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","globalClasses","buttonGlobalClasses","styles","icon","_templateObject","_taggedTemplateLiteralLoose","description","_templateObject2","description5_3","t","_templateObject3","miniModalDescriptionFontSize","miniModalDescriptionLineHeight","title","_templateObject4","titleWithIcon","_templateObject5","miniModalTitleMarginTop","actions","_templateObject6","root","actionsIndent","_templateObject7","miniModalCancelIndent","actionsRow","_templateObject8","miniModalActionGap","actionsColumn","_templateObject9"],"sources":["MiniModal.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { globalClasses as buttonGlobalClasses } from '../Button/Button.styles';\n\nexport const styles = memoizeStyle({\n  icon() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  description() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  description5_3(t: Theme) {\n    return css`\n      font-size: ${t.miniModalDescriptionFontSize};\n      line-height: ${t.miniModalDescriptionLineHeight};\n    `;\n  },\n\n  title() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  titleWithIcon(t: Theme) {\n    return css`\n      margin-top: ${t.miniModalTitleMarginTop};\n    `;\n  },\n\n  actions() {\n    return css`\n      display: flex;\n      justify-content: stretch;\n      text-align: center;\n\n      .${buttonGlobalClasses.root} {\n        width: 100%;\n      }\n    `;\n  },\n\n  actionsIndent(t: Theme) {\n    return css`\n      padding: ${t.miniModalCancelIndent} 0;\n    `;\n  },\n\n  actionsRow(t: Theme) {\n    return css`\n      flex-direction: row;\n      > *:nth-of-type(1) {\n        margin-right: calc(${t.miniModalActionGap} / 2);\n      }\n      > *:nth-of-type(2) {\n        margin-left: calc(${t.miniModalActionGap} / 2);\n      }\n    `;\n  },\n\n  actionsColumn(t: Theme) {\n    return css`\n      flex-direction: column;\n      > *:nth-of-type(2) {\n        margin-top: ${t.miniModalActionGap};\n      }\n      > *:nth-of-type(3) {\n        margin-top: ${t.miniModalActionGap};\n      }\n    `;\n  },\n});\n"],"mappings":"oQAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,SAASC,aAAa,IAAIC,mBAAmB,QAAQ,yBAAyB;;AAE9E,OAAO,IAAMC,MAAM,GAAGH,YAAY,CAAC;EACjCI,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOL,GAAG,CAAAM,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ,CAAC;;EAEDC,WAAW,WAAAA,YAAA,EAAG;IACZ,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;EAGZ,CAAC;;EAEDG,cAAc,WAAAA,eAACC,CAAQ,EAAE;IACvB,OAAOX,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;IACKI,CAAC,CAACE,4BAA4B;IAC5BF,CAAC,CAACG,8BAA8B;;EAEnD,CAAC;;EAEDC,KAAK,WAAAA,MAAA,EAAG;IACN,OAAOf,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA;;;EAGZ,CAAC;;EAEDU,aAAa,WAAAA,cAACN,CAAQ,EAAE;IACtB,OAAOX,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;IACMI,CAAC,CAACQ,uBAAuB;;EAE3C,CAAC;;EAEDC,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOpB,GAAG,CAAAqB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;;;;;IAKLJ,mBAAmB,CAACmB,IAAI;;;;EAI/B,CAAC;;EAEDC,aAAa,WAAAA,cAACZ,CAAQ,EAAE;IACtB,OAAOX,GAAG,CAAAwB,gBAAA,KAAAA,gBAAA,GAAAjB,2BAAA;IACGI,CAAC,CAACc,qBAAqB;;EAEtC,CAAC;;EAEDC,UAAU,WAAAA,WAACf,CAAQ,EAAE;IACnB,OAAOX,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;;;IAGeI,CAAC,CAACiB,kBAAkB;;;IAGrBjB,CAAC,CAACiB,kBAAkB;;;EAG9C,CAAC;;EAEDC,aAAa,WAAAA,cAAClB,CAAQ,EAAE;IACtB,OAAOX,GAAG,CAAA8B,gBAAA,KAAAA,gBAAA,GAAAvB,2BAAA;;;IAGQI,CAAC,CAACiB,kBAAkB;;;IAGpBjB,CAAC,CAACiB,kBAAkB;;;EAGxC;AACF,CAAC,CAAC","ignoreList":[]}

package/components/MiniModal/MiniModal.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     icon(): string;
     description(): string;
     description5_3(t: Theme): string;

package/components/MiniModal/MiniModalBody/MiniModalBody.js

@@ -1,13 +1,13 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["children"];
 import React from 'react';
-import { useEmotion } from "../../../lib/theming/RenderEnvironmentContext";
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
 import { Modal } from "../../Modal";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isThemeGTE } from "../../../lib/theming/ThemeHelpers";
+import { cx } from "../../../lib/theming/Emotion";
 import { MiniModalDataTids } from "../MiniModal";
-import { getStyles } from "../MiniModal.styles";
+import { styles } from "../MiniModal.styles";
 
 /**
  * Обёртка над Modal.Body
@@ -17,10 +17,6 @@ import { getStyles } from "../MiniModal.styles";
 export var MiniModalBody = forwardRefAndName('MiniModalBody', function (_ref, ref) {
   var children = _ref.children,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var emotion = useEmotion();
-  var _useEmotion = useEmotion(),
-    cx = _useEmotion.cx;
-  var styles = getStyles(emotion);
   return /*#__PURE__*/(
     React.createElement(Modal.Body, rest, /*#__PURE__*/
     React.createElement(ThemeContext.Consumer, null, function (theme) {

package/components/MiniModal/MiniModalBody/MiniModalBody.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEmotion","forwardRefAndName","Modal","ThemeContext","isThemeGTE","MiniModalDataTids","getStyles","MiniModalBody","_ref","ref","children","rest","_objectWithoutPropertiesLoose","_excluded","emotion","_useEmotion","cx","styles","createElement","Body","Consumer","theme","_cx","description","className","description5_3"],"sources":["MiniModalBody.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport type { ModalBodyProps } from '../Modal';\nimport { Modal } from '../Modal';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers';\n\nimport { MiniModalDataTids } from './MiniModal';\nimport { getStyles } from './MiniModal.styles';\n\n/**\n * Обёртка над Modal.Body\n *\n * @visibleName MiniModal.Body\n */\nexport const MiniModalBody = forwardRefAndName<HTMLDivElement, ModalBodyProps>(\n  'MiniModalBody',\n  ({ children, ...rest }, ref) => {\n    const emotion = useEmotion();\n    const { cx } = useEmotion();\n    const styles = getStyles(emotion);\n\n    return (\n      <Modal.Body {...rest}>\n        <ThemeContext.Consumer>\n          {(theme) => {\n            return (\n              <div\n                data-tid={MiniModalDataTids.description}\n                ref={ref}\n                className={cx(styles.description(), {\n                  [styles.description5_3(theme)]: isThemeGTE(theme, '5.3'),\n                })}\n              >\n                {children}\n              </div>\n            );\n          }}\n        </ThemeContext.Consumer>\n      </Modal.Body>\n    );\n  },\n);\n"],"mappings":"iIAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,UAAU,QAAQ,4CAA4C;AACvE,SAASC,iBAAiB,QAAQ,6BAA6B;;AAE/D,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,UAAU,QAAQ,gCAAgC;;AAE3D,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,SAAS,QAAQ,oBAAoB;;AAE9C;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGN,iBAAiB;EAC5C,eAAe;EACf,UAAAO,IAAA,EAAwBC,GAAG,EAAK,KAA7BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAKC,IAAI,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,SAAA;IAClB,IAAMC,OAAO,GAAGd,UAAU,CAAC,CAAC;IAC5B,IAAAe,WAAA,GAAef,UAAU,CAAC,CAAC,CAAnBgB,EAAE,GAAAD,WAAA,CAAFC,EAAE;IACV,IAAMC,MAAM,GAAGX,SAAS,CAACQ,OAAO,CAAC;;IAEjC;MACEf,KAAA,CAAAmB,aAAA,CAAChB,KAAK,CAACiB,IAAI,EAAKR,IAAI;MAClBZ,KAAA,CAAAmB,aAAA,CAACf,YAAY,CAACiB,QAAQ;MACnB,UAACC,KAAK,EAAK,KAAAC,GAAA;QACV;UACEvB,KAAA,CAAAmB,aAAA;YACE,YAAUb,iBAAiB,CAACkB,WAAY;YACxCd,GAAG,EAAEA,GAAI;YACTe,SAAS,EAAER,EAAE,CAACC,MAAM,CAACM,WAAW,CAAC,CAAC,GAAAD,GAAA,OAAAA,GAAA;YAC/BL,MAAM,CAACQ,cAAc,CAACJ,KAAK,CAAC,IAAGjB,UAAU,CAACiB,KAAK,EAAE,KAAK,CAAC,EAAAC,GAAA;YACzD,CAAE;;UAEFZ;UACE,CAAC;;MAEV;MACqB;MACb,CAAC;;EAEjB;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["React","forwardRefAndName","Modal","ThemeContext","isThemeGTE","cx","MiniModalDataTids","styles","MiniModalBody","_ref","ref","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","Body","Consumer","theme","_cx","description","className","description5_3"],"sources":["MiniModalBody.tsx"],"sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport type { ModalBodyProps } from '../Modal';\nimport { Modal } from '../Modal';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { MiniModalDataTids } from './MiniModal';\nimport { styles } from './MiniModal.styles';\n\n/**\n * Обёртка над Modal.Body\n *\n * @visibleName MiniModal.Body\n */\nexport const MiniModalBody = forwardRefAndName<HTMLDivElement, ModalBodyProps>(\n  'MiniModalBody',\n  ({ children, ...rest }, ref) => {\n    return (\n      <Modal.Body {...rest}>\n        <ThemeContext.Consumer>\n          {(theme) => {\n            return (\n              <div\n                data-tid={MiniModalDataTids.description}\n                ref={ref}\n                className={cx(styles.description(), {\n                  [styles.description5_3(theme)]: isThemeGTE(theme, '5.3'),\n                })}\n              >\n                {children}\n              </div>\n            );\n          }}\n        </ThemeContext.Consumer>\n      </Modal.Body>\n    );\n  },\n);\n"],"mappings":"iIAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,iBAAiB,QAAQ,6BAA6B;;AAE/D,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,MAAM,QAAQ,oBAAoB;;AAE3C;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGP,iBAAiB;EAC5C,eAAe;EACf,UAAAQ,IAAA,EAAwBC,GAAG,EAAK,KAA7BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAKC,IAAI,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,SAAA;IAClB;MACEd,KAAA,CAAAe,aAAA,CAACb,KAAK,CAACc,IAAI,EAAKJ,IAAI;MAClBZ,KAAA,CAAAe,aAAA,CAACZ,YAAY,CAACc,QAAQ;MACnB,UAACC,KAAK,EAAK,KAAAC,GAAA;QACV;UACEnB,KAAA,CAAAe,aAAA;YACE,YAAUT,iBAAiB,CAACc,WAAY;YACxCV,GAAG,EAAEA,GAAI;YACTW,SAAS,EAAEhB,EAAE,CAACE,MAAM,CAACa,WAAW,CAAC,CAAC,GAAAD,GAAA,OAAAA,GAAA;YAC/BZ,MAAM,CAACe,cAAc,CAACJ,KAAK,CAAC,IAAGd,UAAU,CAACc,KAAK,EAAE,KAAK,CAAC,EAAAC,GAAA;YACzD,CAAE;;UAEFR;UACE,CAAC;;MAEV;MACqB;MACb,CAAC;;EAEjB;AACF,CAAC","ignoreList":[]}

package/components/MiniModal/MiniModalFooter/MiniModalFooter.js

@@ -1,11 +1,11 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["direction", "children"];
 import React, { useContext } from 'react';
-import { useEmotion } from "../../../lib/theming/RenderEnvironmentContext";
 import { Modal } from "../../Modal";
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { getStyles } from "../MiniModal.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../MiniModal.styles";
 import { MiniModalDataTids } from "../MiniModal";
 
 /**
@@ -19,9 +19,6 @@ export var MiniModalFooter = forwardRefAndName('MiniModalFooter', function (_ref
     children = _ref.children,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var theme = useContext(ThemeContext);
-  var emotion = useEmotion();
-  var cx = emotion.cx;
-  var styles = getStyles(emotion);
   var childrenCount = React.Children.count(children);
   var _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;
   return /*#__PURE__*/(

package/components/MiniModal/MiniModalFooter/MiniModalFooter.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useEmotion","Modal","forwardRefAndName","ThemeContext","getStyles","MiniModalDataTids","MiniModalFooter","_ref","ref","_ref$direction","direction","children","rest","_objectWithoutPropertiesLoose","_excluded","theme","emotion","cx","styles","childrenCount","Children","count","_direction","createElement","Footer","actions","className","actionsRow","actionsColumn"],"sources":["MiniModalFooter.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport type { ModalFooterProps } from '../Modal';\nimport { Modal } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalFooterProps extends ModalFooterProps {\n  /** Задает направление позиционирования кнопок. `row` работает только для 2 элементов, в других случаях автоматически включиться `column`.\n   * @default row */\n  direction?: 'row' | 'column';\n}\n\n/**\n * Обёртка над Modal.Footer\n *\n * @visibleName MiniModal.Footer\n */\nexport const MiniModalFooter = forwardRefAndName<HTMLDivElement, MiniModalFooterProps>(\n  'MiniModalFooter',\n  ({ direction = 'row', children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n    const emotion = useEmotion();\n    const { cx } = emotion;\n    const styles = getStyles(emotion);\n\n    const childrenCount = React.Children.count(children);\n    const _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;\n\n    return (\n      <Modal.Footer {...rest}>\n        <div\n          ref={ref}\n          data-tid={MiniModalDataTids.actions}\n          className={cx(\n            styles.actions(),\n            _direction === 'row' && styles.actionsRow(theme),\n            _direction === 'column' && styles.actionsColumn(theme),\n          )}\n        >\n          {children}\n        </div>\n      </Modal.Footer>\n    );\n  },\n);\n"],"mappings":"8IAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,UAAU,QAAQ,4CAA4C;;AAEvE,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,iBAAiB,QAAQ,aAAa;;;;;;;;AAQ/C;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGJ,iBAAiB;EAC9C,iBAAiB;EACjB,UAAAK,IAAA,EAA2CC,GAAG,EAAK,KAAAC,cAAA,GAAAF,IAAA,CAAhDG,SAAS,CAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA,CAAEE,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAKC,IAAI,GAAAC,6BAAA,CAAAN,IAAA,EAAAO,SAAA;IACrC,IAAMC,KAAK,GAAGhB,UAAU,CAACI,YAAY,CAAC;IACtC,IAAMa,OAAO,GAAGhB,UAAU,CAAC,CAAC;IAC5B,IAAQiB,EAAE,GAAKD,OAAO,CAAdC,EAAE;IACV,IAAMC,MAAM,GAAGd,SAAS,CAACY,OAAO,CAAC;;IAEjC,IAAMG,aAAa,GAAGrB,KAAK,CAACsB,QAAQ,CAACC,KAAK,CAACV,QAAQ,CAAC;IACpD,IAAMW,UAAU,GAAGH,aAAa,GAAG,CAAC,IAAIA,aAAa,KAAK,CAAC,GAAG,QAAQ,GAAGT,SAAS;;IAElF;MACEZ,KAAA,CAAAyB,aAAA,CAACtB,KAAK,CAACuB,MAAM,EAAKZ,IAAI;MACpBd,KAAA,CAAAyB,aAAA;QACEf,GAAG,EAAEA,GAAI;QACT,YAAUH,iBAAiB,CAACoB,OAAQ;QACpCC,SAAS,EAAET,EAAE;UACXC,MAAM,CAACO,OAAO,CAAC,CAAC;UAChBH,UAAU,KAAK,KAAK,IAAIJ,MAAM,CAACS,UAAU,CAACZ,KAAK,CAAC;UAChDO,UAAU,KAAK,QAAQ,IAAIJ,MAAM,CAACU,aAAa,CAACb,KAAK;QACvD,CAAE;;MAEDJ;MACE;MACO,CAAC;;EAEnB;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useContext","Modal","forwardRefAndName","ThemeContext","cx","styles","MiniModalDataTids","MiniModalFooter","_ref","ref","_ref$direction","direction","children","rest","_objectWithoutPropertiesLoose","_excluded","theme","childrenCount","Children","count","_direction","createElement","Footer","actions","className","actionsRow","actionsColumn"],"sources":["MiniModalFooter.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport type { ModalFooterProps } from '../Modal';\nimport { Modal } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalFooterProps extends ModalFooterProps {\n  /** Задает направление позиционирования кнопок. `row` работает только для 2 элементов, в других случаях автоматически включиться `column`.\n   * @default row */\n  direction?: 'row' | 'column';\n}\n\n/**\n * Обёртка над Modal.Footer\n *\n * @visibleName MiniModal.Footer\n */\nexport const MiniModalFooter = forwardRefAndName<HTMLDivElement, MiniModalFooterProps>(\n  'MiniModalFooter',\n  ({ direction = 'row', children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n\n    const childrenCount = React.Children.count(children);\n    const _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;\n\n    return (\n      <Modal.Footer {...rest}>\n        <div\n          ref={ref}\n          data-tid={MiniModalDataTids.actions}\n          className={cx(\n            styles.actions(),\n            _direction === 'row' && styles.actionsRow(theme),\n            _direction === 'column' && styles.actionsColumn(theme),\n          )}\n        >\n          {children}\n        </div>\n      </Modal.Footer>\n    );\n  },\n);\n"],"mappings":"8IAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;;AAGzC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,aAAa;;;;;;;;AAQ/C;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGL,iBAAiB;EAC9C,iBAAiB;EACjB,UAAAM,IAAA,EAA2CC,GAAG,EAAK,KAAAC,cAAA,GAAAF,IAAA,CAAhDG,SAAS,CAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA,CAAEE,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAKC,IAAI,GAAAC,6BAAA,CAAAN,IAAA,EAAAO,SAAA;IACrC,IAAMC,KAAK,GAAGhB,UAAU,CAACG,YAAY,CAAC;;IAEtC,IAAMc,aAAa,GAAGlB,KAAK,CAACmB,QAAQ,CAACC,KAAK,CAACP,QAAQ,CAAC;IACpD,IAAMQ,UAAU,GAAGH,aAAa,GAAG,CAAC,IAAIA,aAAa,KAAK,CAAC,GAAG,QAAQ,GAAGN,SAAS;;IAElF;MACEZ,KAAA,CAAAsB,aAAA,CAACpB,KAAK,CAACqB,MAAM,EAAKT,IAAI;MACpBd,KAAA,CAAAsB,aAAA;QACEZ,GAAG,EAAEA,GAAI;QACT,YAAUH,iBAAiB,CAACiB,OAAQ;QACpCC,SAAS,EAAEpB,EAAE;UACXC,MAAM,CAACkB,OAAO,CAAC,CAAC;UAChBH,UAAU,KAAK,KAAK,IAAIf,MAAM,CAACoB,UAAU,CAACT,KAAK,CAAC;UAChDI,UAAU,KAAK,QAAQ,IAAIf,MAAM,CAACqB,aAAa,CAACV,KAAK;QACvD,CAAE;;MAEDJ;MACE;MACO,CAAC;;EAEnB;AACF,CAAC","ignoreList":[]}

package/components/MiniModal/MiniModalHeader/MiniModalHeader.js

@@ -1,12 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["icon", "children"];
 import React, { useContext } from 'react';
-import { useEmotion } from "../../../lib/theming/RenderEnvironmentContext";
 import { Modal } from "../../Modal";
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
 import { InfoCircleIcon64Regular } from "../../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { getStyles } from "../MiniModal.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../MiniModal.styles";
 import { MiniModalDataTids } from "../MiniModal";
 
 /**
@@ -21,9 +21,6 @@ export var MiniModalHeader = forwardRefAndName('MiniModalHeader', function (_ref
     children = _ref.children,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var theme = useContext(ThemeContext);
-  var emotion = useEmotion();
-  var cx = emotion.cx;
-  var styles = getStyles(emotion);
   return /*#__PURE__*/(
     React.createElement(Modal.Header, rest, /*#__PURE__*/
     React.createElement("div", {

package/components/MiniModal/MiniModalHeader/MiniModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useEmotion","Modal","forwardRefAndName","InfoCircleIcon64Regular","ThemeContext","getStyles","MiniModalDataTids","MiniModalHeader","_ref","ref","_cx","_ref$icon","icon","createElement","children","rest","_objectWithoutPropertiesLoose","_excluded","theme","emotion","cx","styles","Header","className","title","titleWithIcon"],"sources":["MiniModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport { useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport type { ModalHeaderProps } from '../Modal';\nimport { Modal } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalHeaderProps extends ModalHeaderProps {\n  /** Задает иконку в шапку компонента.\n   * @default InfoCircleIcon64Regular */\n  icon?: ReactNode;\n}\n\n/**\n * Обёртка над Modal.Header\n *\n * @visibleName MiniModal.Header\n */\nexport const MiniModalHeader = forwardRefAndName<HTMLDivElement, MiniModalHeaderProps>(\n  'MiniModalHeader',\n  ({ icon = <InfoCircleIcon64Regular />, children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n    const emotion = useEmotion();\n    const { cx } = emotion;\n    const styles = getStyles(emotion);\n\n    return (\n      <Modal.Header {...rest}>\n        <div ref={ref}>\n          {icon && (\n            <div data-tid={MiniModalDataTids.icon} className={styles.icon()}>\n              {icon}\n            </div>\n          )}\n          {children && (\n            <div\n              data-tid={MiniModalDataTids.title}\n              className={cx(styles.title(), {\n                [styles.titleWithIcon(theme)]: !!icon,\n              })}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </Modal.Header>\n    );\n  },\n);\n"],"mappings":";AACA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,UAAU,QAAQ,4CAA4C;;AAEvE,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,uBAAuB,QAAQ,iEAAiE;AACzG,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,iBAAiB,QAAQ,aAAa;;;;;;;;AAQ/C;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGL,iBAAiB;EAC9C,iBAAiB;EACjB,UAAAM,IAAA,EAA4DC,GAAG,EAAK,KAAAC,GAAA,KAAAC,SAAA,GAAAH,IAAA,CAAjEI,IAAI,CAAJA,IAAI,GAAAD,SAAA,2BAAGb,KAAA,CAAAe,aAAA,CAACV,uBAAuB,MAAE,CAAC,GAAAQ,SAAA,CAAEG,QAAQ,GAAAN,IAAA,CAARM,QAAQ,CAAKC,IAAI,GAAAC,6BAAA,CAAAR,IAAA,EAAAS,SAAA;IACtD,IAAMC,KAAK,GAAGnB,UAAU,CAACK,YAAY,CAAC;IACtC,IAAMe,OAAO,GAAGnB,UAAU,CAAC,CAAC;IAC5B,IAAQoB,EAAE,GAAKD,OAAO,CAAdC,EAAE;IACV,IAAMC,MAAM,GAAGhB,SAAS,CAACc,OAAO,CAAC;;IAEjC;MACErB,KAAA,CAAAe,aAAA,CAACZ,KAAK,CAACqB,MAAM,EAAKP,IAAI;MACpBjB,KAAA,CAAAe,aAAA,UAAKJ,GAAG,EAAEA,GAAI;MACXG,IAAI;MACHd,KAAA,CAAAe,aAAA,UAAK,YAAUP,iBAAiB,CAACM,IAAK,EAACW,SAAS,EAAEF,MAAM,CAACT,IAAI,CAAC,CAAE;MAC7DA;MACE,CACN;;MACAE,QAAQ;MACPhB,KAAA,CAAAe,aAAA;QACE,YAAUP,iBAAiB,CAACkB,KAAM;QAClCD,SAAS,EAAEH,EAAE,CAACC,MAAM,CAACG,KAAK,CAAC,CAAC,GAAAd,GAAA,OAAAA,GAAA;QACzBW,MAAM,CAACI,aAAa,CAACP,KAAK,CAAC,IAAG,CAAC,CAACN,IAAI,EAAAF,GAAA;QACtC,CAAE;;MAEFI;MACE;;MAEJ;MACO,CAAC;;EAEnB;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useContext","Modal","forwardRefAndName","InfoCircleIcon64Regular","ThemeContext","cx","styles","MiniModalDataTids","MiniModalHeader","_ref","ref","_cx","_ref$icon","icon","createElement","children","rest","_objectWithoutPropertiesLoose","_excluded","theme","Header","className","title","titleWithIcon"],"sources":["MiniModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport type { ModalHeaderProps } from '../Modal';\nimport { Modal } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalHeaderProps extends ModalHeaderProps {\n  /** Задает иконку в шапку компонента.\n   * @default InfoCircleIcon64Regular */\n  icon?: ReactNode;\n}\n\n/**\n * Обёртка над Modal.Header\n *\n * @visibleName MiniModal.Header\n */\nexport const MiniModalHeader = forwardRefAndName<HTMLDivElement, MiniModalHeaderProps>(\n  'MiniModalHeader',\n  ({ icon = <InfoCircleIcon64Regular />, children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n\n    return (\n      <Modal.Header {...rest}>\n        <div ref={ref}>\n          {icon && (\n            <div data-tid={MiniModalDataTids.icon} className={styles.icon()}>\n              {icon}\n            </div>\n          )}\n          {children && (\n            <div\n              data-tid={MiniModalDataTids.title}\n              className={cx(styles.title(), {\n                [styles.titleWithIcon(theme)]: !!icon,\n              })}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </Modal.Header>\n    );\n  },\n);\n"],"mappings":";AACA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;;AAGzC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,uBAAuB,QAAQ,iEAAiE;AACzG,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,aAAa;;;;;;;;AAQ/C;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGN,iBAAiB;EAC9C,iBAAiB;EACjB,UAAAO,IAAA,EAA4DC,GAAG,EAAK,KAAAC,GAAA,KAAAC,SAAA,GAAAH,IAAA,CAAjEI,IAAI,CAAJA,IAAI,GAAAD,SAAA,2BAAGb,KAAA,CAAAe,aAAA,CAACX,uBAAuB,MAAE,CAAC,GAAAS,SAAA,CAAEG,QAAQ,GAAAN,IAAA,CAARM,QAAQ,CAAKC,IAAI,GAAAC,6BAAA,CAAAR,IAAA,EAAAS,SAAA;IACtD,IAAMC,KAAK,GAAGnB,UAAU,CAACI,YAAY,CAAC;;IAEtC;MACEL,KAAA,CAAAe,aAAA,CAACb,KAAK,CAACmB,MAAM,EAAKJ,IAAI;MACpBjB,KAAA,CAAAe,aAAA,UAAKJ,GAAG,EAAEA,GAAI;MACXG,IAAI;MACHd,KAAA,CAAAe,aAAA,UAAK,YAAUP,iBAAiB,CAACM,IAAK,EAACQ,SAAS,EAAEf,MAAM,CAACO,IAAI,CAAC,CAAE;MAC7DA;MACE,CACN;;MACAE,QAAQ;MACPhB,KAAA,CAAAe,aAAA;QACE,YAAUP,iBAAiB,CAACe,KAAM;QAClCD,SAAS,EAAEhB,EAAE,CAACC,MAAM,CAACgB,KAAK,CAAC,CAAC,GAAAX,GAAA,OAAAA,GAAA;QACzBL,MAAM,CAACiB,aAAa,CAACJ,KAAK,CAAC,IAAG,CAAC,CAACN,IAAI,EAAAF,GAAA;QACtC,CAAE;;MAEFI;MACE;;MAEJ;MACO,CAAC;;EAEnB;AACF,CAAC","ignoreList":[]}

package/components/MiniModal/MiniModalIndent/MiniModalIndent.js

@@ -2,10 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["children"];
 import React, { useContext } from 'react';
-import { useEmotion } from "../../../lib/theming/RenderEnvironmentContext";
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { getStyles } from "../MiniModal.styles";
+import { styles } from "../MiniModal.styles";
 import { MiniModalDataTids } from "../MiniModal";
 
 /**
@@ -16,7 +15,6 @@ import { MiniModalDataTids } from "../MiniModal";
 export var MiniModalIndent = forwardRefAndName('MiniModalIndent', function (_ref, ref) {
   var children = _ref.children,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var styles = getStyles(useEmotion());
   var theme = useContext(ThemeContext);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-tid": MiniModalDataTids.indent,

package/components/MiniModal/MiniModalIndent/MiniModalIndent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useEmotion","forwardRefAndName","ThemeContext","getStyles","MiniModalDataTids","MiniModalIndent","_ref","ref","children","rest","_objectWithoutPropertiesLoose","_excluded","styles","theme","createElement","_extends","indent","className","actionsIndent"],"sources":["MiniModalIndent.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\n/**\n * Отступ между кнопками\n *\n * @visibleName MiniModal.Indent\n */\nexport const MiniModalIndent = forwardRefAndName<HTMLDivElement, React.InputHTMLAttributes<HTMLDivElement>>(\n  'MiniModalIndent',\n  ({ children, ...rest }, ref) => {\n    const styles = getStyles(useEmotion());\n    const theme = useContext(ThemeContext);\n\n    return <div data-tid={MiniModalDataTids.indent} ref={ref} className={styles.actionsIndent(theme)} {...rest} />;\n  },\n);\n"],"mappings":"2LAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,UAAU,QAAQ,4CAA4C;AACvE,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,iBAAiB,QAAQ,aAAa;;AAE/C;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGJ,iBAAiB;EAC9C,iBAAiB;EACjB,UAAAK,IAAA,EAAwBC,GAAG,EAAK,KAA7BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAKC,IAAI,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,SAAA;IAClB,IAAMC,MAAM,GAAGT,SAAS,CAACH,UAAU,CAAC,CAAC,CAAC;IACtC,IAAMa,KAAK,GAAGd,UAAU,CAACG,YAAY,CAAC;;IAEtC,oBAAOJ,KAAA,CAAAgB,aAAA,QAAAC,QAAA,GAAK,YAAUX,iBAAiB,CAACY,MAAO,EAACT,GAAG,EAAEA,GAAI,EAACU,SAAS,EAAEL,MAAM,CAACM,aAAa,CAACL,KAAK,CAAE,IAAKJ,IAAI,CAAG,CAAC;EAChH;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useContext","forwardRefAndName","ThemeContext","styles","MiniModalDataTids","MiniModalIndent","_ref","ref","children","rest","_objectWithoutPropertiesLoose","_excluded","theme","createElement","_extends","indent","className","actionsIndent"],"sources":["MiniModalIndent.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\n/**\n * Отступ между кнопками\n *\n * @visibleName MiniModal.Indent\n */\nexport const MiniModalIndent = forwardRefAndName<HTMLDivElement, React.InputHTMLAttributes<HTMLDivElement>>(\n  'MiniModalIndent',\n  ({ children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n\n    return <div data-tid={MiniModalDataTids.indent} ref={ref} className={styles.actionsIndent(theme)} {...rest} />;\n  },\n);\n"],"mappings":"2LAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,aAAa;;AAE/C;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGJ,iBAAiB;EAC9C,iBAAiB;EACjB,UAAAK,IAAA,EAAwBC,GAAG,EAAK,KAA7BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAKC,IAAI,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,SAAA;IAClB,IAAMC,KAAK,GAAGZ,UAAU,CAACE,YAAY,CAAC;;IAEtC,oBAAOH,KAAA,CAAAc,aAAA,QAAAC,QAAA,GAAK,YAAUV,iBAAiB,CAACW,MAAO,EAACR,GAAG,EAAEA,GAAI,EAACS,SAAS,EAAEb,MAAM,CAACc,aAAa,CAACL,KAAK,CAAE,IAAKH,IAAI,CAAG,CAAC;EAChH;AACF,CAAC","ignoreList":[]}