@vkontakte/vkui 5.2.3 → 5.3.0

package/dist/cjs/components/Banner/Banner.js

@@ -1,97 +1,91 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "Banner", {
+    enumerable: true,
+    get: function() {
+        return Banner;
+    }
 });
-exports.Banner = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
-var _IconButton = require("../IconButton/IconButton");
-var _Tappable = require("../Tappable/Tappable");
-var _Headline = require("../Typography/Headline/Headline");
-var _Subhead = require("../Typography/Subhead/Subhead");
-var _Text = require("../Typography/Text/Text");
-var _Title = require("../Typography/Title/Title");
-var _excluded = ["mode", "imageTheme", "size", "before", "asideMode", "header", "subheader", "text", "children", "background", "actions", "onDismiss", "dismissLabel", "className"];
-/**
- * @see https://vkcom.github.io/VKUI/#/Banner
- */
-var Banner = function Banner(_ref) {
-  var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'tint' : _ref$mode,
-    _ref$imageTheme = _ref.imageTheme,
-    imageTheme = _ref$imageTheme === void 0 ? 'dark' : _ref$imageTheme,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 's' : _ref$size,
-    before = _ref.before,
-    asideMode = _ref.asideMode,
-    header = _ref.header,
-    subheader = _ref.subheader,
-    text = _ref.text,
-    children = _ref.children,
-    background = _ref.background,
-    actions = _ref.actions,
-    onDismiss = _ref.onDismiss,
-    _ref$dismissLabel = _ref.dismissLabel,
-    dismissLabel = _ref$dismissLabel === void 0 ? 'Скрыть' : _ref$dismissLabel,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-  var HeaderTypography = size === 'm' ? _Title.Title : _Headline.Headline;
-  var SubheaderTypography = size === 'm' ? _Text.Text : _Subhead.Subhead;
-  var IconDismissIOS = mode === 'image' ? _icons.Icon24DismissDark : _icons.Icon24DismissSubstract;
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, mode === 'image' && background && /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": true,
-    className: "vkuiBanner__bg"
-  }, background), before && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiBanner__before"
-  }, before), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiBanner__content"
-  }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/React.createElement(HeaderTypography, {
-    Component: "span",
-    className: "vkuiBanner__header",
-    weight: "2",
-    level: size === 'm' ? '2' : '1'
-  }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/React.createElement(SubheaderTypography, {
-    Component: "span",
-    className: "vkuiBanner__subheader"
-  }, subheader), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/React.createElement(_Text.Text, {
-    className: "vkuiBanner__text"
-  }, text), (0, _vkjs.hasReactNode)(actions) && React.Children.count(actions) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiBanner__actions"
-  }, actions)));
-  return /*#__PURE__*/React.createElement("section", (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiBanner", platform === _platform.Platform.IOS && "vkuiBanner--ios", styles["Banner--mode-".concat(mode)], styles["Banner--size-".concat(size)], mode === 'image' && imageTheme === 'dark' && "vkuiBanner--inverted", className)
-  }), asideMode === 'expand' ? /*#__PURE__*/React.createElement(_Tappable.Tappable, {
-    className: "vkuiBanner__in",
-    activeMode: platform === _platform.Platform.IOS ? 'opacity' : 'background',
-    role: "button"
-  }, content, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiBanner__aside"
-  }, /*#__PURE__*/React.createElement(_icons.Icon24Chevron, null))) : /*#__PURE__*/React.createElement("div", {
-    className: "vkuiBanner__in"
-  }, content, asideMode === 'dismiss' && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiBanner__aside"
-  }, /*#__PURE__*/React.createElement(_IconButton.IconButton, {
-    "aria-label": dismissLabel,
-    className: "vkuiBanner__dismiss",
-    onClick: onDismiss,
-    hoverMode: "opacity",
-    hasActive: false
-  }, platform === _platform.Platform.IOS ? /*#__PURE__*/React.createElement(IconDismissIOS, null) : /*#__PURE__*/React.createElement(_icons.Icon24Cancel, null)))));
-};
-exports.Banner = Banner;
-var styles = {
-  "Banner--mode-image": "vkuiBanner--mode-image",
-  "Banner--mode-tint": "vkuiBanner--mode-tint",
-  "Banner--size-s": "vkuiBanner--size-s",
-  "Banner--size-m": "vkuiBanner--size-m"
+var _iconButton = require("../IconButton/IconButton");
+var _tappable = require("../Tappable/Tappable");
+var _headline = require("../Typography/Headline/Headline");
+var _subhead = require("../Typography/Subhead/Subhead");
+var _text = require("../Typography/Text/Text");
+var _title = require("../Typography/Title/Title");
+var Banner = function(_param) {
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, _param_imageTheme = _param.imageTheme, imageTheme = _param_imageTheme === void 0 ? "dark" : _param_imageTheme, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, before = _param.before, asideMode = _param.asideMode, header = _param.header, subheader = _param.subheader, text = _param.text, children = _param.children, background = _param.background, actions = _param.actions, onDismiss = _param.onDismiss, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "mode",
+        "imageTheme",
+        "size",
+        "before",
+        "asideMode",
+        "header",
+        "subheader",
+        "text",
+        "children",
+        "background",
+        "actions",
+        "onDismiss",
+        "dismissLabel",
+        "className"
+    ]);
+    var platform = (0, _usePlatform.usePlatform)();
+    var HeaderTypography = size === "m" ? _title.Title : _headline.Headline;
+    var SubheaderTypography = size === "m" ? _text.Text : _subhead.Subhead;
+    var IconDismissIOS = mode === "image" ? _icons.Icon24DismissDark : _icons.Icon24DismissSubstract;
+    var content = /*#__PURE__*/ _react.createElement(_react.Fragment, null, mode === "image" && background && /*#__PURE__*/ _react.createElement("div", {
+        "aria-hidden": true,
+        className: "vkuiBanner__bg"
+    }, background), before && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiBanner__before"
+    }, before), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiBanner__content"
+    }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(HeaderTypography, {
+        Component: "span",
+        className: "vkuiBanner__header",
+        weight: "2",
+        level: size === "m" ? "2" : "1"
+    }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/ _react.createElement(SubheaderTypography, {
+        Component: "span",
+        className: "vkuiBanner__subheader"
+    }, subheader), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(_text.Text, {
+        className: "vkuiBanner__text"
+    }, text), (0, _vkjs.hasReactNode)(actions) && _react.Children.count(actions) > 0 && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiBanner__actions"
+    }, actions)));
+    return /*#__PURE__*/ _react.createElement("section", _objectSpreadProps(_objectSpread({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiBanner", platform === _platform.Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", {
+            s: "vkuiBanner--size-s",
+            m: "vkuiBanner--size-m"
+        }[size], mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted", className)
+    }), asideMode === "expand" ? /*#__PURE__*/ _react.createElement(_tappable.Tappable, {
+        className: "vkuiBanner__in",
+        activeMode: platform === _platform.Platform.IOS ? "opacity" : "background",
+        role: "button"
+    }, content, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiBanner__aside"
+    }, /*#__PURE__*/ _react.createElement(_icons.Icon24Chevron, null))) : /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiBanner__in"
+    }, content, asideMode === "dismiss" && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiBanner__aside"
+    }, /*#__PURE__*/ _react.createElement(_iconButton.IconButton, {
+        "aria-label": dismissLabel,
+        className: "vkuiBanner__dismiss",
+        onClick: onDismiss,
+        hoverMode: "opacity",
+        hasActive: false
+    }, platform === _platform.Platform.IOS ? /*#__PURE__*/ _react.createElement(IconDismissIOS, null) : /*#__PURE__*/ _react.createElement(_icons.Icon24Cancel, null)))));
 };
+
 //# sourceMappingURL=Banner.js.map

package/dist/cjs/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","hasReactNode","React","Children","count","classNames","Platform","IOS","styles"],"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <React.Fragment>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography\n            Component=\"span\"\n            className={styles['Banner__header']}\n            weight=\"2\"\n            level={size === 'm' ? '2' : '1'}\n          >\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"span\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && <Text className={styles['Banner__text']}>{text}</Text>}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </React.Fragment>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        styles[`Banner--mode-${mode}`],\n        styles[`Banner--size-${size}`],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <React.Fragment>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography\n            Component=\"span\"\n            className={styles['Banner__header']}\n            weight=\"2\"\n            level={size === 'm' ? '2' : '1'}\n          >\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"span\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && <Text className={styles['Banner__text']}>{text}</Text>}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </React.Fragment>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","React","Fragment","div","aria-hidden","hasReactNode","Component","weight","level","Children","count","section","classNames","Platform","IOS","s","m","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BA2FaA;;;eAAAA;;;;;;;2DA3FU;qBAMhB;oBACkC;2BACb;wBACH;0BACE;wBACF;wBACA;uBACD;oBACH;qBACC;AA4Ef,IAAMA,SAAS,iBAgBH;6BAfjBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,mBAAmBf,SAAS,MAAMgB,YAAK,GAAGC,kBAAQ;IACxD,IAAMC,sBAAsBlB,SAAS,MAAMmB,UAAI,GAAGC,gBAAO;IAEzD,IAAMC,iBAAiBvB,SAAS,UAAUwB,wBAAiB,GAAGC,6BAAsB;IAEpF,IAAMC,wBACJ,qBAACC,OAAMC,QAAQ,QACZ5B,SAAS,WAAWS,4BACnB,qBAACoB;QAAIC,eAAAA,IAAW;QAACjB,SAAS;OACvBJ,aAIJN,wBAAU,qBAAC0B;QAAIhB,SAAS;OAA6BV,uBAEtD,qBAAC0B;QAAIhB,SAAS;OACXkB,IAAAA,kBAAY,EAAC1B,yBACZ,qBAACY;QACCe,WAAU;QACVnB,SAAS;QACToB,QAAO;QACPC,OAAOhC,SAAS,MAAM,MAAM,GAAG;OAE9BG,SAGJ0B,IAAAA,kBAAY,EAACzB,4BACZ,qBAACc;QAAoBY,WAAU;QAAOnB,SAAS;OAC5CP,YAGJyB,IAAAA,kBAAY,EAACxB,uBAAS,qBAACc,UAAI;QAACR,SAAS;OAA2BN,OAChEwB,IAAAA,kBAAY,EAACrB,YAAYiB,OAAMQ,QAAQ,CAACC,KAAK,CAAC1B,WAAW,mBACxD,qBAACmB;QAAIhB,SAAS;OAA8BH;IAMpD,qBACE,qBAAC2B,gDACKvB;QACJD,WAAWyB,IAAAA,gBAAU,gBAEnBvB,aAAawB,kBAAQ,CAACC,GAAG,uBACzBxC,SAAS,qCACT;YACEyC,CAAC;YACDC,CAAC;QACH,CAAC,CAACxC,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAGDT,cAAc,yBACb,qBAACuC,kBAAQ;QACP9B,SAAS;QACT+B,YAAY7B,aAAawB,kBAAQ,CAACC,GAAG,GAAG,YAAY,YAAY;QAChEK,MAAK;OAEJnB,uBAED,qBAACG;QAAIhB,SAAS;qBACZ,qBAACiC,oBAAa,0BAIlB,qBAACjB;QAAIhB,SAAS;OACXa,SAEAtB,cAAc,2BACb,qBAACyB;QAAIhB,SAAS;qBACZ,qBAACkC,sBAAU;QACTC,cAAYpC;QACZC,SAAS;QACToC,SAAStC;QACTuC,WAAU;QACVC,WAAW,KAAK;OAEfpC,aAAawB,kBAAQ,CAACC,GAAG,iBAAG,qBAACjB,sCAAoB,qBAAC6B,mBAAY,OAAG,GAK3E;AAGP"}