@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ea6161656e

package/components/MenuItem/MenuItem.md

@@ -0,0 +1,135 @@
+Меню с базовыми элементами меню.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми элементами меню</Button>}
+  >
+  <MenuItem>Базовый элемент меню</MenuItem>
+  <MenuItem>Ещё один базовый элемент меню</MenuItem>
+  <MenuItem>И ещё один</MenuItem>
+</DropdownMenu>
+```
+
+Меню с заблокированными и базовыми элементами меню.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми и заблокированными элементами</Button>}
+  >
+  <MenuItem>Это базовый элемент меню</MenuItem>
+  <MenuItem disabled>А это заблокированный</MenuItem>
+  <MenuItem>А это снова базовый</MenuItem>
+  <MenuItem disabled>И снова заблокированный</MenuItem>
+  <MenuItem disabled>И вот ещё один заблокированный</MenuItem>
+</DropdownMenu>
+```
+
+В пункты меню можно передать проп `isNotSelectable`, чтобы запретить выделение и выбор этого пункта меню
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми и отключёнными элементами</Button>}
+  >
+  <MenuItem>Это базовый элемент меню</MenuItem>
+  <MenuItem isNotSelectable>А это отключённый</MenuItem>
+  <MenuItem>А это снова базовый</MenuItem>
+  <MenuItem isNotSelectable>И снова отключённый</MenuItem>
+  <MenuItem isNotSelectable>И вот ещё один отключённый</MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню содержащими описание.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с причастными к Pied Piper</Button>}
+  >
+  <MenuItem comment="Системный инженер">Bertram Gilfoyle</MenuItem>
+  <MenuItem comment="Hooli CEO">Gavin Belson</MenuItem>
+  <MenuItem comment="Java-разработчик">Dinesh Chugtai</MenuItem>
+  <MenuItem comment="Основатель Pied Piper">Richard Hendricks</MenuItem>
+  <MenuItem comment="Владелец инкубатора">Erlich Bachman</MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню содержащими иконки.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+import DeviceSmartphoneIcon from '@skbkontur/react-icons/DeviceSmartphone';
+import OkIcon from '@skbkontur/react-icons/Ok';
+import ThumbDownIcon from '@skbkontur/react-icons/ThumbDown';
+
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с иконками</Button>}
+  >
+  <MenuItem icon={<OkIcon />}>Базовый элемент меню c иконкой</MenuItem>
+  <MenuItem
+    disabled
+    icon={<ThumbDownIcon />}
+    >
+    Отключённый элемент меню с иконкой
+  </MenuItem>
+  <MenuItem
+    icon={<DeviceSmartphoneIcon />}
+    comment="А слева вы можете видеть икону 21-го века"
+    >
+     Элемент меню с описанием и иконкой
+  </MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню обёрнутыми в контрол ссылки.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu, Link } from '@skbkontur/react-ui';
+
+const LinkMenuItem = ({link, title}) => {
+  return <MenuItem
+    href={link}
+    component={({ href, ...rest }) => {
+      return <Link target="_blank" rel="noopener noreferrer" href={href} {...rest} />
+    }}
+    >
+    {title}
+  </MenuItem>
+}
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с ссылками</Button>}
+  >
+  <LinkMenuItem
+    link="http://tech.skbkontur.ru/react-ui/"
+    title="Начало документации"
+    />
+  <LinkMenuItem
+    link="https://guides.kontur.ru/"
+    title="Контур Гайды"
+    />
+  <LinkMenuItem
+    link="https://github.com/skbkontur/retail-ui/graphs/contributors"
+    title="Список прекрасных людей"
+    />
+</DropdownMenu>
+```
+
+У MenuItem есть 3 стандартных размера.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <MenuItem size={'small'}>Маленький</MenuItem>
+  <MenuItem size={'medium'}>Средний</MenuItem>
+  <MenuItem size={'large'}>Большой</MenuItem>
+</Gapped>
+```

package/components/MenuItem/MenuItem.mixins/MenuItem.mixins.js

@@ -0,0 +1,29 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { getMenuItemPaddings } from "../MenuItem.styles";
+export var menuItemSizeMixin = function menuItemSizeMixin(emotion) {
+  return function (menuItemLegacyPaddingX, menuItemPaddingX, menuItemLegacyPaddingY, menuItemPaddingY, menuItemLineHeight, menuItemFontSize) {
+    var _getMenuItemPaddings = getMenuItemPaddings({
+      menuItemLegacyPaddingX: menuItemLegacyPaddingX,
+      menuItemPaddingX: menuItemPaddingX,
+      menuItemLegacyPaddingY: menuItemLegacyPaddingY,
+      menuItemPaddingY: menuItemPaddingY
+    }),
+        paddingX = _getMenuItemPaddings.paddingX,
+        paddingY = _getMenuItemPaddings.paddingY;
+
+    return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n    "])), menuItemLineHeight, menuItemFontSize, menuItemPaddingY, paddingX, paddingY, menuItemPaddingX);
+  };
+};
+export var iconSizeMixin = function iconSizeMixin(emotion) {
+  return function (menuItemIconWidth, menuItemPaddingX, menuItemIconLegacyMargin) {
+    return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      left: ", "px;\n    "])), menuItemIconWidth, parseInt(menuItemPaddingX) + parseInt(menuItemIconLegacyMargin));
+  };
+};
+export var withIconSizeMixin = function withIconSizeMixin(emotion) {
+  return function (menuItemPaddingForIcon) {
+    return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    padding-left: ", ";\n  "])), menuItemPaddingForIcon);
+  };
+};

package/components/MenuItem/MenuItem.mixins/MenuItem.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuItem.mixins.ts"],"names":["getMenuItemPaddings","menuItemSizeMixin","emotion","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","paddingX","paddingY","css","iconSizeMixin","menuItemIconWidth","menuItemIconLegacyMargin","parseInt","withIconSizeMixin","menuItemPaddingForIcon"],"mappings":";;AAEA,SAASA,mBAAT,QAAoC,mBAApC;;AAEA,OAAO,IAAMC,iBAAiB;AAC5B,SADWA,iBACX,CAACC,OAAD;AACA;AACEC,IAAAA,sBADF;AAEEC,IAAAA,gBAFF;AAGEC,IAAAA,sBAHF;AAIEC,IAAAA,gBAJF;AAKEC,IAAAA,kBALF;AAMEC,IAAAA,gBANF;AAOK;AACH,iCAA+BR,mBAAmB,CAAC;AACjDG,QAAAA,sBAAsB,EAAtBA,sBADiD;AAEjDC,QAAAA,gBAAgB,EAAhBA,gBAFiD;AAGjDC,QAAAA,sBAAsB,EAAtBA,sBAHiD;AAIjDC,QAAAA,gBAAgB,EAAhBA,gBAJiD,EAAD,CAAlD,CAAQG,QAAR,wBAAQA,QAAR,CAAkBC,QAAlB,wBAAkBA,QAAlB;;;AAOA,aAAOR,OAAO,CAACS,GAAf;AACiBJ,MAAAA,kBADjB;AAEeC,MAAAA,gBAFf;AAGaF,MAAAA,gBAHb,EAGiCG,QAHjC,EAG6CC,QAH7C,EAGyDN,gBAHzD;;AAKD,KArBD,GADK;;AAwBP,OAAO,IAAMQ,aAAa;AACxB,SADWA,aACX,CAACV,OAAD,UAAsB,UAACW,iBAAD,EAA4BT,gBAA5B,EAAsDU,wBAAtD,EAA2F;AAC/G,WAAOZ,OAAO,CAACS,GAAf;AACWE,IAAAA,iBADX;AAEUE,IAAAA,QAAQ,CAACX,gBAAD,CAAR,GAA6BW,QAAQ,CAACD,wBAAD,CAF/C;;AAID,GALD,EADK;;AAQP,OAAO,IAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAACd,OAAD,UAAsB,UAACe,sBAAD,EAAoC;AACzF,WAAOf,OAAO,CAACS,GAAf;AACkBM,IAAAA,sBADlB;;AAGD,GAJgC,EAA1B","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { getMenuItemPaddings } from './MenuItem.styles';\n\nexport const menuItemSizeMixin =\n  (emotion: Emotion) =>\n  (\n    menuItemLegacyPaddingX: string,\n    menuItemPaddingX: string,\n    menuItemLegacyPaddingY: string,\n    menuItemPaddingY: string,\n    menuItemLineHeight: string,\n    menuItemFontSize: string,\n  ) => {\n    const { paddingX, paddingY } = getMenuItemPaddings({\n      menuItemLegacyPaddingX,\n      menuItemPaddingX,\n      menuItemLegacyPaddingY,\n      menuItemPaddingY,\n    });\n\n    return emotion.css`\n      line-height: ${menuItemLineHeight};\n      font-size: ${menuItemFontSize};\n      padding: ${menuItemPaddingY} ${paddingX} ${paddingY} ${menuItemPaddingX};\n    `;\n  };\n\nexport const iconSizeMixin =\n  (emotion: Emotion) => (menuItemIconWidth: string, menuItemPaddingX: string, menuItemIconLegacyMargin: string) => {\n    return emotion.css`\n      width: ${menuItemIconWidth};\n      left: ${parseInt(menuItemPaddingX) + parseInt(menuItemIconLegacyMargin)}px;\n    `;\n  };\n\nexport const withIconSizeMixin = (emotion: Emotion) => (menuItemPaddingForIcon: string) => {\n  return emotion.css`\n    padding-left: ${menuItemPaddingForIcon};\n  `;\n};\n"]}

package/components/MenuItem/MenuItem.mixins/package.json

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

package/components/MenuItem/MenuItem.mixins.d.ts

@@ -0,0 +1,4 @@
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const menuItemSizeMixin: (emotion: Emotion) => (menuItemLegacyPaddingX: string, menuItemPaddingX: string, menuItemLegacyPaddingY: string, menuItemPaddingY: string, menuItemLineHeight: string, menuItemFontSize: string) => string;
+export declare const iconSizeMixin: (emotion: Emotion) => (menuItemIconWidth: string, menuItemPaddingX: string, menuItemIconLegacyMargin: string) => string;
+export declare const withIconSizeMixin: (emotion: Emotion) => (menuItemPaddingForIcon: string) => string;

package/components/MenuItem/MenuItem.styles/MenuItem.styles.js

@@ -0,0 +1,86 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+import { resetButton } from "../../../lib/styles/Mixins";
+import { iconSizeMixin, menuItemSizeMixin, withIconSizeMixin } from "../MenuItem.mixins";
+export var getMenuItemPaddings = function getMenuItemPaddings(_ref) {
+  var menuItemLegacyPaddingX = _ref.menuItemLegacyPaddingX,
+      menuItemPaddingX = _ref.menuItemPaddingX,
+      menuItemLegacyPaddingY = _ref.menuItemLegacyPaddingY,
+      menuItemPaddingY = _ref.menuItemPaddingY;
+  var legacyPaddingX = parseFloat(menuItemLegacyPaddingX);
+  var legacyPaddingY = parseFloat(menuItemLegacyPaddingY);
+  var paddingX = legacyPaddingX !== 0 ? parseFloat(menuItemPaddingX) + legacyPaddingX + "px" : menuItemPaddingX;
+  var paddingY = legacyPaddingY !== 0 ? parseFloat(menuItemPaddingY) + legacyPaddingY + "px" : menuItemPaddingY;
+  return {
+    paddingX: paddingX,
+    paddingY: paddingY
+  };
+};
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        ", ";\n\n        cursor: pointer;\n        display: ", ";\n        position: relative;\n        text-decoration: none;\n        color: ", ";\n        border-radius: ", ";\n\n        button& {\n          min-width: 100%;\n        }\n\n        &:nth-last-of-type(n + 2) {\n          margin-bottom: ", ";\n        }\n      "])), resetButton(emotion), t.menuItemDisplay, t.menuItemTextColor, t.menuItemBorderRadius, t.menuItemGap);
+    },
+    rootSmall: function rootSmall(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), menuItemSizeMixin(emotion)(t.menuItemLegacyPaddingX, t.menuItemPaddingXSmall, t.menuItemLegacyPaddingY, t.menuItemPaddingYSmall, t.menuItemLineHeightSmall, t.menuItemFontSizeSmall));
+    },
+    rootMedium: function rootMedium(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), menuItemSizeMixin(emotion)(t.menuItemLegacyPaddingX, t.menuItemPaddingXMedium, t.menuItemLegacyPaddingY, t.menuItemPaddingYMedium, t.menuItemLineHeightMedium, t.menuItemFontSizeMedium));
+    },
+    rootLarge: function rootLarge(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), menuItemSizeMixin(emotion)(t.menuItemLegacyPaddingX, t.menuItemPaddingXLarge, t.menuItemLegacyPaddingY, t.menuItemPaddingYLarge, t.menuItemLineHeightLarge, t.menuItemFontSizeLarge));
+    },
+    rootMobile: function rootMobile(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", ";\n      "])), t.menuItemFontSizeMobile, t.menuItemLineHeightMobile, t.menuItemPaddingMobile);
+    },
+    hover: function hover(t) {
+      // Color with !important in purpose to override `a:hover`
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        background: ", " !important;\n        color: ", " !important;\n      "])), t.menuItemHoverBg, t.menuItemHoverColor);
+    },
+    selected: function selected(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        background: ", " !important;\n      "])), t.menuItemSelectedBg);
+    },
+    disabled: function disabled(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        color: ", ";\n        cursor: default;\n      "])), t.menuItemDisabledBg, t.menuItemDisabledColor);
+    },
+    link: function link(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.menuItemLinkColor);
+    },
+    loose: function loose() {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        padding-left: 15px;\n      "])));
+    },
+    withIconSmall: function withIconSmall(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), withIconSizeMixin(emotion)(t.menuItemPaddingForIconSmall));
+    },
+    withIconMedium: function withIconMedium(t) {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), withIconSizeMixin(emotion)(t.menuItemPaddingForIconMedium));
+    },
+    withIconLarge: function withIconLarge(t) {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), withIconSizeMixin(emotion)(t.menuItemPaddingForIconLarge));
+    },
+    comment: function comment(t) {
+      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        opacity: ", ";\n        white-space: normal;\n        padding-top: 4px;\n      "])), t.menuItemCommentColor, t.menuItemCommentOpacity);
+    },
+    commentHover: function commentHover(t) {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        opacity: 0.6;\n      "])), t.menuItemCommentColorHover);
+    },
+    icon: function icon(t) {
+      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        position: absolute;\n        transform: translateY(", ");\n      "])), t.menuItemIconLegacyShift);
+    },
+    iconSmall: function iconSmall(t) {
+      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), iconSizeMixin(emotion)(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall, t.menuItemIconLegacyMargin));
+    },
+    iconMedium: function iconMedium(t) {
+      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), iconSizeMixin(emotion)(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium, t.menuItemIconLegacyMargin));
+    },
+    iconLarge: function iconLarge(t) {
+      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), iconSizeMixin(emotion)(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge, t.menuItemIconLegacyMargin));
+    },
+    mobileContentWithIcon: function mobileContentWithIcon() {
+      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        margin-left: 8px;\n      "])));
+    }
+  });
+};

package/components/MenuItem/MenuItem.styles/MenuItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuItem.styles.ts"],"names":["memoizeStyle","resetButton","iconSizeMixin","menuItemSizeMixin","withIconSizeMixin","getMenuItemPaddings","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","legacyPaddingX","parseFloat","legacyPaddingY","paddingX","paddingY","getStyles","emotion","root","t","css","menuItemDisplay","menuItemTextColor","menuItemBorderRadius","menuItemGap","rootSmall","menuItemPaddingXSmall","menuItemPaddingYSmall","menuItemLineHeightSmall","menuItemFontSizeSmall","rootMedium","menuItemPaddingXMedium","menuItemPaddingYMedium","menuItemLineHeightMedium","menuItemFontSizeMedium","rootLarge","menuItemPaddingXLarge","menuItemPaddingYLarge","menuItemLineHeightLarge","menuItemFontSizeLarge","rootMobile","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledBg","menuItemDisabledColor","link","menuItemLinkColor","loose","withIconSmall","menuItemPaddingForIconSmall","withIconMedium","menuItemPaddingForIconMedium","withIconLarge","menuItemPaddingForIconLarge","comment","menuItemCommentColor","menuItemCommentOpacity","commentHover","menuItemCommentColorHover","icon","menuItemIconLegacyShift","iconSmall","menuItemIconWidthSmall","menuItemIconLegacyMargin","iconMedium","menuItemIconWidthMedium","iconLarge","menuItemIconWidthLarge","mobileContentWithIcon"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nimport { iconSizeMixin, menuItemSizeMixin, withIconSizeMixin } from './MenuItem.mixins';\n\nexport const getMenuItemPaddings = ({\n  menuItemLegacyPaddingX,\n  menuItemPaddingX,\n  menuItemLegacyPaddingY,\n  menuItemPaddingY,\n}: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {\n  const legacyPaddingX = parseFloat(menuItemLegacyPaddingX);\n  const legacyPaddingY = parseFloat(menuItemLegacyPaddingY);\n\n  const paddingX = legacyPaddingX !== 0 ? `${parseFloat(menuItemPaddingX) + legacyPaddingX}px` : menuItemPaddingX;\n  const paddingY = legacyPaddingY !== 0 ? `${parseFloat(menuItemPaddingY) + legacyPaddingY}px` : menuItemPaddingY;\n\n  return { paddingX, paddingY };\n};\n\nexport const getStyles = (emotion: Emotion) => {\n  return memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        ${resetButton(emotion)};\n\n        cursor: pointer;\n        display: ${t.menuItemDisplay};\n        position: relative;\n        text-decoration: none;\n        color: ${t.menuItemTextColor};\n        border-radius: ${t.menuItemBorderRadius};\n\n        button& {\n          min-width: 100%;\n        }\n\n        &:nth-last-of-type(n + 2) {\n          margin-bottom: ${t.menuItemGap};\n        }\n      `;\n    },\n\n    rootSmall(t: Theme) {\n      return emotion.css`\n        ${menuItemSizeMixin(emotion)(\n          t.menuItemLegacyPaddingX,\n          t.menuItemPaddingXSmall,\n          t.menuItemLegacyPaddingY,\n          t.menuItemPaddingYSmall,\n          t.menuItemLineHeightSmall,\n          t.menuItemFontSizeSmall,\n        )};\n      `;\n    },\n    rootMedium(t: Theme) {\n      return emotion.css`\n        ${menuItemSizeMixin(emotion)(\n          t.menuItemLegacyPaddingX,\n          t.menuItemPaddingXMedium,\n          t.menuItemLegacyPaddingY,\n          t.menuItemPaddingYMedium,\n          t.menuItemLineHeightMedium,\n          t.menuItemFontSizeMedium,\n        )};\n      `;\n    },\n    rootLarge(t: Theme) {\n      return emotion.css`\n        ${menuItemSizeMixin(emotion)(\n          t.menuItemLegacyPaddingX,\n          t.menuItemPaddingXLarge,\n          t.menuItemLegacyPaddingY,\n          t.menuItemPaddingYLarge,\n          t.menuItemLineHeightLarge,\n          t.menuItemFontSizeLarge,\n        )};\n      `;\n    },\n\n    rootMobile(t: Theme) {\n      return emotion.css`\n        font-size: ${t.menuItemFontSizeMobile};\n        line-height: ${t.menuItemLineHeightMobile};\n        padding: ${t.menuItemPaddingMobile};\n      `;\n    },\n\n    hover(t: Theme) {\n      // Color with !important in purpose to override `a:hover`\n      return emotion.css`\n        background: ${t.menuItemHoverBg} !important;\n        color: ${t.menuItemHoverColor} !important;\n      `;\n    },\n    selected(t: Theme) {\n      return emotion.css`\n        background: ${t.menuItemSelectedBg} !important;\n      `;\n    },\n    disabled(t: Theme) {\n      return emotion.css`\n        background: ${t.menuItemDisabledBg};\n        color: ${t.menuItemDisabledColor};\n        cursor: default;\n      `;\n    },\n    link(t: Theme) {\n      return emotion.css`\n        color: ${t.menuItemLinkColor};\n      `;\n    },\n    loose() {\n      return emotion.css`\n        padding-left: 15px;\n      `;\n    },\n    withIconSmall(t: Theme) {\n      return emotion.css`\n        ${withIconSizeMixin(emotion)(t.menuItemPaddingForIconSmall)}\n      `;\n    },\n    withIconMedium(t: Theme) {\n      return emotion.css`\n        ${withIconSizeMixin(emotion)(t.menuItemPaddingForIconMedium)}\n      `;\n    },\n    withIconLarge(t: Theme) {\n      return emotion.css`\n        ${withIconSizeMixin(emotion)(t.menuItemPaddingForIconLarge)}\n      `;\n    },\n    comment(t: Theme) {\n      return emotion.css`\n        color: ${t.menuItemCommentColor};\n        opacity: ${t.menuItemCommentOpacity};\n        white-space: normal;\n        padding-top: 4px;\n      `;\n    },\n    commentHover(t: Theme) {\n      return emotion.css`\n        color: ${t.menuItemCommentColorHover};\n        opacity: 0.6;\n      `;\n    },\n    icon(t: Theme) {\n      return emotion.css`\n        display: inline-block;\n        position: absolute;\n        transform: translateY(${t.menuItemIconLegacyShift});\n      `;\n    },\n    iconSmall(t: Theme) {\n      return emotion.css`\n        ${iconSizeMixin(emotion)(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall, t.menuItemIconLegacyMargin)};\n      `;\n    },\n    iconMedium(t: Theme) {\n      return emotion.css`\n        ${iconSizeMixin(emotion)(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium, t.menuItemIconLegacyMargin)};\n      `;\n    },\n    iconLarge(t: Theme) {\n      return emotion.css`\n        ${iconSizeMixin(emotion)(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge, t.menuItemIconLegacyMargin)};\n      `;\n    },\n    mobileContentWithIcon() {\n      return emotion.css`\n        margin-left: 8px;\n      `;\n    },\n  });\n};\n"]}

package/components/MenuItem/MenuItem.styles/package.json

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

package/components/MenuItem/MenuItem.styles.d.ts

@@ -0,0 +1,28 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getMenuItemPaddings: ({ menuItemLegacyPaddingX, menuItemPaddingX, menuItemLegacyPaddingY, menuItemPaddingY, }: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {
+    paddingX: string;
+    paddingY: string;
+};
+export declare const getStyles: (emotion: Emotion) => {
+    root(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    rootMobile(t: Theme): string;
+    hover(t: Theme): string;
+    selected(t: Theme): string;
+    disabled(t: Theme): string;
+    link(t: Theme): string;
+    loose(): string;
+    withIconSmall(t: Theme): string;
+    withIconMedium(t: Theme): string;
+    withIconLarge(t: Theme): string;
+    comment(t: Theme): string;
+    commentHover(t: Theme): string;
+    icon(t: Theme): string;
+    iconSmall(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconLarge(t: Theme): string;
+    mobileContentWithIcon(): string;
+};

package/components/MenuItem/index/index.js

@@ -0,0 +1 @@
+export * from "../MenuItem";

package/components/MenuItem/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './MenuItem';\n"]}

package/components/MenuItem/index/package.json

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

package/components/MenuItem/index.d.ts

@@ -1 +1 @@
-export { default, MenuItemProps, MenuItemState, MenuItemElement, isMenuItem } from './MenuItem';
+export * from './MenuItem';

package/components/MenuItem/package.json

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

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ResponsiveLayout } from "../../ResponsiveLayout";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { useEmotion } from "../../../lib/theming/Emotion";
+import { getStyles } from "../MenuSeparator.styles";
+export var MenuSeparatorDataTids = {
+  root: 'MenuSeparator__root'
+};
+/**
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
+ */
+
+function MenuSeparator(props) {
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
+    var _emotion$cx;
+
+    var isMobile = _ref.isMobile;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": MenuSeparatorDataTids.root,
+      className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.root(theme)] = true, _emotion$cx[styles.rootMobile(theme)] = isMobile, _emotion$cx))
+    });
+  }));
+}
+
+MenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';
+MenuSeparator.displayName = 'MenuSeparator';
+export { MenuSeparator };

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","CommonWrapper","ResponsiveLayout","useTheme","useEmotion","getStyles","MenuSeparatorDataTids","root","MenuSeparator","props","theme","emotion","styles","isMobile","cx","rootMobile","__KONTUR_REACT_UI__","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,QAAT,QAAyB,4BAAzB;AACA,SAASC,UAAT,QAA2B,2BAA3B;;AAEA,SAASC,SAAT,QAA0B,wBAA1B;;;;AAIA,OAAO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGP,QAAQ,EAAtB;AACA,MAAMQ,OAAO,GAAGP,UAAU,EAA1B;AACA,MAAMQ,MAAM,GAAGP,SAAS,CAACM,OAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBF,KAAnB;AACE,wBAAC,gBAAD;AACG,oBAAkB,qBAAfI,QAAe,QAAfA,QAAe;AACjB;AACE;AACE,sBAAUP,qBAAqB,CAACC,IADlC;AAEE,UAAA,SAAS,EAAEI,OAAO,CAACG,EAAR,gCAAcF,MAAM,CAACL,IAAP,CAAYG,KAAZ,CAAd,IAAmC,IAAnC,cAA0CE,MAAM,CAACG,UAAP,CAAkBL,KAAlB,CAA1C,IAAqEG,QAArE,eAFb,GADF;;;AAMD,KARH,CADF,CADF;;;;AAcD;;AAEDL,aAAa,CAACQ,mBAAd,GAAoC,eAApC;AACAR,aAAa,CAACS,WAAd,GAA4B,eAA5B;;AAEA,SAAST,aAAT","sourcesContent":["import React from 'react';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { useTheme } from '../../lib/theming/useTheme';\nimport { useEmotion } from '../../lib/theming/Emotion';\n\nimport { getStyles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n  root: 'MenuSeparator__root',\n} as const;\n/**\n * Добавляет разделительную линию между элементами меню.\n *\n * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  const theme = useTheme();\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  return (\n    <CommonWrapper {...props}>\n      <ResponsiveLayout>\n        {({ isMobile }) => {\n          return (\n            <div\n              data-tid={MenuSeparatorDataTids.root}\n              className={emotion.cx({ [styles.root(theme)]: true, [styles.rootMobile(theme)]: isMobile })}\n            />\n          );\n        }}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\nMenuSeparator.displayName = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}

package/components/MenuSeparator/MenuSeparator/package.json

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

package/components/MenuSeparator/MenuSeparator.d.ts

@@ -1,7 +1,16 @@
-import * as React from 'react';
-/**
- * Разделитель в меню.
- */
-export default class MenuSeparator extends React.Component<{}> {
-    render(): JSX.Element;
-}
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type MenuSeparatorProps = CommonProps;
+export declare const MenuSeparatorDataTids: {
+    readonly root: "MenuSeparator__root";
+};
+/**
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
+ */
+declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
+declare namespace MenuSeparator {
+    var __KONTUR_REACT_UI__: string;
+    var displayName: string;
+}
+export { MenuSeparator };

package/components/MenuSeparator/MenuSeparator.md

@@ -0,0 +1,14 @@
+Пример меню с разделителями.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню с разделителями</Button>}>
+  <MenuItem>У меня есть разделитель</MenuItem>
+  <MenuSeparator />
+  <MenuItem>У меня тоже!</MenuItem>
+  <MenuSeparator />
+  <MenuItem>А у меня нет :(</MenuItem>
+  <MenuItem>Как и у меня :(</MenuItem>
+</DropdownMenu>;
+```

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js

@@ -0,0 +1,15 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        margin: ", " ", ";\n        border-top: ", " solid ", ";\n      "])), t.menuSeparatorMarginY, t.menuSeparatorMarginX, t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
+    },
+    rootMobile: function rootMobile(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        margin: ", " ", ";\n        border-radius: 1px;\n      "])), t.mobileMenuSeparatorMarginY, t.mobileMenuSeparatorMarginX);
+    }
+  });
+};

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","t","css","menuSeparatorMarginY","menuSeparatorMarginX","menuSeparatorBorderWidth","menuSeparatorBorderColor","rootMobile","mobileMenuSeparatorMarginY","mobileMenuSeparatorMarginX"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;;AAGA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,gBACNC,CADM,EACI;AACb,eAAOF,OAAO,CAACG,GAAf;AACYD,QAAAA,CAAC,CAACE,oBADd,EACsCF,CAAC,CAACG,oBADxC;AAEgBH,QAAAA,CAAC,CAACI,wBAFlB,EAEoDJ,CAAC,CAACK,wBAFtD;;AAID,OANU;;AAQXC,MAAAA,UARW,sBAQAN,CARA,EAQU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACYD,QAAAA,CAAC,CAACO,0BADd,EAC4CP,CAAC,CAACQ,0BAD9C;;;AAID,OAbU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        margin: ${t.menuSeparatorMarginY} ${t.menuSeparatorMarginX};\n        border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n      `;\n    },\n\n    rootMobile(t: Theme) {\n      return emotion.css`\n        margin: ${t.mobileMenuSeparatorMarginY} ${t.mobileMenuSeparatorMarginX};\n        border-radius: 1px;\n      `;\n    },\n  });\n"]}

package/components/MenuSeparator/MenuSeparator.styles/package.json

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

package/components/MenuSeparator/MenuSeparator.styles.d.ts

@@ -0,0 +1,6 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    root(t: Theme): string;
+    rootMobile(t: Theme): string;
+};

package/components/MenuSeparator/index/index.js

@@ -0,0 +1 @@
+export * from "../MenuSeparator";

package/components/MenuSeparator/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './MenuSeparator';\n"]}

package/components/MenuSeparator/index/package.json

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

package/components/MenuSeparator/index.d.ts

@@ -1 +1 @@
-export { default } from './MenuSeparator';
+export * from './MenuSeparator';

package/components/MenuSeparator/package.json

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

package/components/MiniModal/MiniModal/MiniModal.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "theme"];
+import React from 'react';
+import { Modal } from "../../Modal";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getMiniModalTheme } from "../getMiniModalTheme";
+import { MiniModalFooter } from "../MiniModalFooter";
+import { MiniModalHeader } from "../MiniModalHeader";
+import { MiniModalBody } from "../MiniModalBody";
+import { MiniModalIndent } from "../MiniModalIndent";
+export var MiniModalDataTids = {
+  icon: 'MiniModal__icon',
+  title: 'MiniModal__title',
+  description: 'MiniModal__description',
+  actions: 'MiniModal__actions',
+  indent: 'MiniModal__indent'
+};
+export var MiniModal = forwardRefAndName('MiniModal', function (_ref, ref) {
+  var children = _ref.children,
+      propsTheme = _ref.theme,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var contextTheme = useTheme();
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: getMiniModalTheme(contextTheme, propsTheme)
+  }, /*#__PURE__*/React.createElement(Modal, _extends({
+    width: 400,
+    noClose: true,
+    ref: ref
+  }, rest), children));
+});
+MiniModal.Header = MiniModalHeader;
+MiniModal.Footer = MiniModalFooter;
+MiniModal.Indent = MiniModalIndent;
+MiniModal.Body = MiniModalBody;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModal.tsx"],"names":["React","Modal","forwardRefAndName","useTheme","ThemeContext","getMiniModalTheme","MiniModalFooter","MiniModalHeader","MiniModalBody","MiniModalIndent","MiniModalDataTids","icon","title","description","actions","indent","MiniModal","ref","children","propsTheme","theme","rest","contextTheme","Header","Footer","Indent","Body"],"mappings":"oMAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,KAAT,QAAkC,UAAlC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,QAAT,QAAyB,4BAAzB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,iBAAT,QAAkC,qBAAlC;AACA,SAASC,eAAT,QAAgC,mBAAhC;AACA,SAASC,eAAT,QAAgC,mBAAhC;AACA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,eAAT,QAAgC,mBAAhC;;AAEA,OAAO,IAAMC,iBAAiB,GAAG;AAC/BC,EAAAA,IAAI,EAAE,iBADyB;AAE/BC,EAAAA,KAAK,EAAE,kBAFwB;AAG/BC,EAAAA,WAAW,EAAE,wBAHkB;AAI/BC,EAAAA,OAAO,EAAE,oBAJsB;AAK/BC,EAAAA,MAAM,EAAE,mBALuB,EAA1B;;;AAQP,OAAO,IAAMC,SAAS,GAAGd,iBAAiB;;;;;;;;;AASxC,WATwC,EAS3B,gBAA2Ce,GAA3C,EAAmD,KAAhDC,QAAgD,QAAhDA,QAAgD,CAA/BC,UAA+B,QAAtCC,KAAsC,CAAhBC,IAAgB;AAChE,MAAMC,YAAY,GAAGnB,QAAQ,EAA7B;;AAEA;AACE,wBAAC,YAAD,CAAc,QAAd,IAAuB,KAAK,EAAEE,iBAAiB,CAACiB,YAAD,EAAeH,UAAf,CAA/C;AACE,wBAAC,KAAD,aAAO,KAAK,EAAE,GAAd,EAAmB,OAAO,MAA1B,EAA2B,GAAG,EAAEF,GAAhC,IAAyCI,IAAzC;AACGH,IAAAA,QADH,CADF,CADF;;;;AAOD,CAnByC,CAAnC;;AAqBPF,SAAS,CAACO,MAAV,GAAmBhB,eAAnB;AACAS,SAAS,CAACQ,MAAV,GAAmBlB,eAAnB;AACAU,SAAS,CAACS,MAAV,GAAmBhB,eAAnB;AACAO,SAAS,CAACU,IAAV,GAAiBlB,aAAjB","sourcesContent":["import React from 'react';\n\nimport { Modal, ModalProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { useTheme } from '../../lib/theming/useTheme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getMiniModalTheme } from './getMiniModalTheme';\nimport { MiniModalFooter } from './MiniModalFooter';\nimport { MiniModalHeader } from './MiniModalHeader';\nimport { MiniModalBody } from './MiniModalBody';\nimport { MiniModalIndent } from './MiniModalIndent';\n\nexport const MiniModalDataTids = {\n  icon: 'MiniModal__icon',\n  title: 'MiniModal__title',\n  description: 'MiniModal__description',\n  actions: 'MiniModal__actions',\n  indent: 'MiniModal__indent',\n} as const;\n\nexport const MiniModal = forwardRefAndName<\n  Modal,\n  ModalProps,\n  {\n    Header: typeof MiniModalHeader;\n    Indent: typeof MiniModalIndent;\n    Footer: typeof MiniModalFooter;\n    Body: typeof MiniModalBody;\n  }\n>('MiniModal', ({ children, theme: propsTheme, ...rest }, ref) => {\n  const contextTheme = useTheme();\n\n  return (\n    <ThemeContext.Provider value={getMiniModalTheme(contextTheme, propsTheme)}>\n      <Modal width={400} noClose ref={ref} {...rest}>\n        {children}\n      </Modal>\n    </ThemeContext.Provider>\n  );\n});\n\nMiniModal.Header = MiniModalHeader;\nMiniModal.Footer = MiniModalFooter;\nMiniModal.Indent = MiniModalIndent;\nMiniModal.Body = MiniModalBody;\n"]}

package/components/MiniModal/MiniModal/package.json

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

package/components/MiniModal/MiniModal.d.ts

@@ -0,0 +1,18 @@
+import { Modal, ModalProps } from '../Modal';
+import { MiniModalFooter } from './MiniModalFooter';
+import { MiniModalHeader } from './MiniModalHeader';
+import { MiniModalBody } from './MiniModalBody';
+import { MiniModalIndent } from './MiniModalIndent';
+export declare const MiniModalDataTids: {
+    readonly icon: "MiniModal__icon";
+    readonly title: "MiniModal__title";
+    readonly description: "MiniModal__description";
+    readonly actions: "MiniModal__actions";
+    readonly indent: "MiniModal__indent";
+};
+export declare const MiniModal: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<Modal, ModalProps> & {
+    Header: typeof MiniModalHeader;
+    Indent: typeof MiniModalIndent;
+    Footer: typeof MiniModalFooter;
+    Body: typeof MiniModalBody;
+};