@megafon/ui-shared 8.14.0 → 8.14.2

package/dist/es/components/Stepper/StepperItem.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import './StepperItem.scss';
+export declare enum STEPPER_ITEM_THEME_ENUM {
+    CHECKED = "checked",
+    ACTIVE = "active",
+    DEFAULT = "default"
+}
+export declare enum STEPPER_ITEM_VIEW_ENUM {
+    ICON = "icon",
+    CONTENT = "content",
+    DEFAULT = "default"
+}
+export interface IStepperItemProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы элементов */
+    classes?: {
+        iconButton?: string;
+        title?: string;
+        text?: string;
+        link?: string;
+    };
+    /** Тема */
+    theme?: STEPPER_ITEM_THEME_ENUM;
+    /** Заголовок */
+    title?: string;
+    /** Текст */
+    text?: string;
+    /** Текст ссылки */
+    linkText?: string;
+    /** Адрес ссылки */
+    linkUrl?: string;
+    /** Иконка */
+    icon?: string | number | JSX.Element;
+    /** Наличие разделителя */
+    hasSeparator?: boolean;
+    /** Направление */
+    isHorizontal?: boolean;
+    /** Отключение */
+    isDisabled?: boolean;
+    /** Выравнивание */
+    align?: 'center' | 'left';
+    /** Варианты отображения */
+    view?: STEPPER_ITEM_VIEW_ENUM;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        iconButton?: Record<string, string>;
+        title?: Record<string, string>;
+        text?: Record<string, string>;
+        link?: Record<string, string>;
+    };
+    /** Обработчик события клика */
+    onClick?: () => void;
+}
+declare const StepperItem: React.FC<IStepperItemProps>;
+export default StepperItem;

package/dist/es/components/Stepper/StepperItem.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.string.link.js";
+import * as React from 'react';
+import { Button, Header, Paragraph } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./StepperItem.css";
+export var STEPPER_ITEM_THEME_ENUM;
+(function (STEPPER_ITEM_THEME_ENUM) {
+  STEPPER_ITEM_THEME_ENUM["CHECKED"] = "checked";
+  STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
+  STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
+})(STEPPER_ITEM_THEME_ENUM || (STEPPER_ITEM_THEME_ENUM = {}));
+export var STEPPER_ITEM_VIEW_ENUM;
+(function (STEPPER_ITEM_VIEW_ENUM) {
+  STEPPER_ITEM_VIEW_ENUM["ICON"] = "icon";
+  STEPPER_ITEM_VIEW_ENUM["CONTENT"] = "content";
+  STEPPER_ITEM_VIEW_ENUM["DEFAULT"] = "default";
+})(STEPPER_ITEM_VIEW_ENUM || (STEPPER_ITEM_VIEW_ENUM = {}));
+var cn = cnCreate('mfui-stepper-item');
+var StepperItem = function StepperItem(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    iconButtonClassName = _ref$classes2.iconButton,
+    titleClassName = _ref$classes2.title,
+    textClassName = _ref$classes2.text,
+    linkClassName = _ref$classes2.link,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
+    title = _ref.title,
+    text = _ref.text,
+    linkText = _ref.linkText,
+    linkUrl = _ref.linkUrl,
+    icon = _ref.icon,
+    hasSeparator = _ref.hasSeparator,
+    _ref$isHorizontal = _ref.isHorizontal,
+    isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
+    isDisabled = _ref.isDisabled,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? STEPPER_ITEM_VIEW_ENUM.DEFAULT : _ref$view,
+    _ref$dataAttrs = _ref.dataAttrs,
+    _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
+    rootAttrs = _ref$dataAttrs2.root,
+    iconButtonAttrs = _ref$dataAttrs2.iconButton,
+    titleAttrs = _ref$dataAttrs2.title,
+    textAttrs = _ref$dataAttrs2.text,
+    linkAttrs = _ref$dataAttrs2.link,
+    onClick = _ref.onClick;
+  var hasLink = !!linkText && !!linkUrl;
+  var hasContent = !!title || !!text || hasLink;
+  var showContent = view !== STEPPER_ITEM_VIEW_ENUM.ICON && hasContent;
+  var showIcon = view !== STEPPER_ITEM_VIEW_ENUM.CONTENT;
+  var renderContent = /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, title && /*#__PURE__*/React.createElement(Header, {
+    className: cn([titleClassName]),
+    dataAttrs: {
+      root: titleAttrs
+    },
+    as: "h5",
+    align: align
+  }, title), text && /*#__PURE__*/React.createElement(Paragraph, {
+    className: cn([textClassName]),
+    dataAttrs: {
+      root: textAttrs
+    },
+    hasMargin: false,
+    align: align
+  }, text), hasLink && /*#__PURE__*/React.createElement(Button, {
+    className: cn('link', [linkClassName]),
+    dataAttrs: {
+      root: linkAttrs
+    },
+    href: linkUrl,
+    type: "text",
+    sizeAll: "extra-small"
+  }, linkText));
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
+    className: cn([className], {
+      theme: theme,
+      align: align,
+      'is-horizontal': isHorizontal
+    })
+  }), showIcon && /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-button-area')
+  }, /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(iconButtonAttrs), {
+    className: cn('icon-button', [iconButtonClassName]),
+    type: "button",
+    disabled: isDisabled,
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('icon')
+  }, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
+    className: cn('separator')
+  })), showContent && renderContent);
+};
+export default StepperItem;

package/dist/es/components/Steps/Steps.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-steps{margin-left:auto;margin-right:auto;width:100%}@media screen and (min-width:768px){.mfui-steps{width:66%}}@media screen and (min-width:1280px){.mfui-steps{width:49%}}.mfui-steps__title{margin-bottom:24px}@media screen and (min-width:1024px){.mfui-steps__title{margin-bottom:40px}}.mfui-steps__list{list-style:none;margin:0;padding:0}.mfui-steps__item{border-radius:24px;margin-bottom:12px;padding:16px}.mfui-steps__item:last-child{margin-bottom:0}.mfui-steps_theme_gray .mfui-steps__item{background-color:var(--spbSky0)}.mfui-steps_theme_white .mfui-steps__item{background-color:var(--base)}.mfui-steps_theme_none .mfui-steps__title{margin-bottom:40px}.mfui-steps_theme_none .mfui-steps__item{border-radius:0;margin-bottom:48px;padding:0}@media screen and (max-width:767px){.mfui-steps_theme_none .mfui-steps__item{margin-bottom:24px}}

package/dist/es/components/Steps/Steps.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import './Steps.scss';
+export interface ISteps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        title?: string;
+        list?: string;
+        item?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Заголовок */
+    title?: string;
+    /** Цветовая тема. DEPRECATED: 'none' */
+    theme?: 'none' | 'white' | 'gray';
+    children: React.ReactNode;
+}
+declare const Steps: React.FC<ISteps>;
+export default Steps;

package/dist/es/components/Steps/Steps.js

@@ -0,0 +1,32 @@
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Header } from '@megafon/ui-core';
+import { cnCreate, convert, titleConvertConfig } from '@megafon/ui-helpers';
+import "./Steps.css";
+var cn = cnCreate('mfui-steps');
+var Steps = function Steps(_ref) {
+  var className = _ref.className,
+    classes = _ref.classes,
+    title = _ref.title,
+    rootRef = _ref.rootRef,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'none' : _ref$theme,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      theme: theme
+    }, [className]),
+    ref: rootRef
+  }, !!title && /*#__PURE__*/React.createElement(Header, {
+    as: "h2",
+    align: "center",
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
+  }, convert(title, titleConvertConfig)), /*#__PURE__*/React.createElement("ul", {
+    className: cn('list', [classes === null || classes === void 0 ? void 0 : classes.list])
+  }, React.Children.map(children, function (child) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: cn('item', [classes === null || classes === void 0 ? void 0 : classes.item])
+    }, child);
+  })));
+};
+export default Steps;

package/dist/es/components/Steps/StepsItem.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-steps-item,.mfui-steps-item__step-number{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-steps-item__step-number{font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--brandGreen);border-radius:12px;color:var(--stcWhite);height:40px;justify-content:center;width:40px}.mfui-steps-item__text-wrapper{padding-left:16px;padding-top:8px}.mfui-steps-item__nodes{font-size:15px;font-weight:400;line-height:24px}

package/dist/es/components/Steps/StepsItem.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import './StepsItem.scss';
+interface IStepsItem {
+    /** Номер элемента */
+    index: number;
+    /** Текст */
+    text: string | React.ReactNode[];
+}
+declare const StepsItem: React.FC<IStepsItem>;
+export default StepsItem;

package/dist/es/components/Steps/StepsItem.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Paragraph } from '@megafon/ui-core';
+import { cnCreate, convert, textConvertConfig } from '@megafon/ui-helpers';
+import "./StepsItem.css";
+var cn = cnCreate('mfui-steps-item');
+var StepsItem = function StepsItem(_ref) {
+  var index = _ref.index,
+    text = _ref.text;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement("span", {
+    className: cn('step-number')
+  }, index), /*#__PURE__*/React.createElement("div", {
+    className: cn('text-wrapper')
+  }, typeof text === 'string' ? /*#__PURE__*/React.createElement(Paragraph, {
+    hasMargin: false
+  }, convert(text, textConvertConfig)) : /*#__PURE__*/React.createElement("div", {
+    className: cn('nodes')
+  }, text)));
+};
+export default StepsItem;

package/dist/es/components/StoreBanner/StoreBanner.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-store-banner_theme_default .mfui-store-banner__grid{background-color:var(--base)}.mfui-store-banner_theme_default .mfui-store-banner__content{color:var(--content)}.mfui-store-banner_theme_green .mfui-store-banner__grid{background-color:var(--brandGreen);border:0}.mfui-store-banner_theme_green .mfui-store-banner__content{color:var(--stcWhite)}.mfui-store-banner_theme_spbSky1 .mfui-store-banner__grid{background-color:var(--spbSky1);border-color:transparent}.mfui-store-banner_theme_spbSky1 .mfui-store-banner__content{color:var(--content)}.mfui-store-banner_theme_spbSky0 .mfui-store-banner__grid{background-color:var(--spbSky0);border-color:transparent}.mfui-store-banner_theme_spbSky0 .mfui-store-banner__content{color:var(--content)}.mfui-store-banner_mask_new-iphone .mfui-store-banner__device-mask{background-image:url(img/new-iphone.png);position:relative;z-index:2}.mfui-store-banner_mask_new-iphone .mfui-store-banner__screen{border-radius:14px;top:9px;width:90%;z-index:1}@media screen and (min-width:768px) and (max-width:1023px){.mfui-store-banner_mask_new-iphone .mfui-store-banner__screen{top:8px}}@media screen and (max-width:767px){.mfui-store-banner_mask_new-iphone .mfui-store-banner__screen{top:30px}}.mfui-store-banner_mask_android .mfui-store-banner__device-mask{background-image:url(img/android.png);position:relative;z-index:2}.mfui-store-banner_mask_android .mfui-store-banner__screen{border-radius:14px;top:9px;width:92%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-store-banner_mask_android .mfui-store-banner__screen{top:8px}}@media screen and (max-width:767px){.mfui-store-banner_mask_android .mfui-store-banner__screen{top:30px}}.mfui-store-banner_mask_white-iphone .mfui-store-banner__device-mask{background-image:url(img/white-iphone.png)}.mfui-store-banner_mask_black-iphone .mfui-store-banner__device-mask{background-image:url(img/black-iphone.png)}.mfui-store-banner_mask_black-iphone .mfui-store-banner__screen,.mfui-store-banner_mask_white-iphone .mfui-store-banner__screen{top:57px;width:87%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-store-banner_mask_black-iphone .mfui-store-banner__screen,.mfui-store-banner_mask_white-iphone .mfui-store-banner__screen{top:47px}}@media screen and (max-width:767px){.mfui-store-banner_mask_black-iphone .mfui-store-banner__screen,.mfui-store-banner_mask_white-iphone .mfui-store-banner__screen{top:63px}}.mfui-store-banner_mask_iphone-12 .mfui-store-banner__device-mask{background-image:url(img/iphone12.png);position:relative;z-index:2}.mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen{border-radius:4px;top:16px;width:87%;z-index:1}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen{top:17px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen{top:13px}}@media screen and (max-width:767px){.mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen{top:35px}.mfui-store-banner_content-left-mobile .mfui-store-banner__content{text-align:left}.mfui-store-banner_content-left-mobile .mfui-store-banner__stores{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mfui-store-banner_content-left-mobile .mfui-store-banner__button{margin:0}}@media screen and (min-width:1024px){.mfui-store-banner__container{padding-top:30px}}.mfui-store-banner__grid{border:1px solid var(--spbSky2);border-radius:24px;padding-bottom:32px;padding-top:32px}@media screen and (max-width:767px){.mfui-store-banner__grid{padding-bottom:0;padding-top:24px}}.mfui-store-banner__content{padding-left:32px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-store-banner__content{padding-right:10px}}@media screen and (max-width:767px){.mfui-store-banner__content{padding-bottom:32px;padding-left:15px;padding-right:15px;text-align:center}}.mfui-store-banner__device-mask{background-repeat:no-repeat;background-size:cover;height:100%}.mfui-store-banner__device-wrapper{bottom:62px;height:calc(100% + 94px);margin-left:auto;margin-right:auto;overflow:hidden;position:relative;width:235px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-store-banner__device-wrapper{width:260px}}@media screen and (max-width:1023px){.mfui-store-banner__device-wrapper{bottom:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-store-banner__device-wrapper{height:calc(100% + 32px);width:196px}}@media screen and (max-width:767px){.mfui-store-banner__device-wrapper{height:222px;padding-top:24px;width:163px}}.mfui-store-banner__links{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-store-banner__qr-code{-ms-flex-item-align:center;align-self:center;background-color:var(--base);border:1px solid var(--spbSky1);border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;height:90px;margin-right:16px;width:90px}@media screen and (max-width:767px){.mfui-store-banner__qr-code{display:none}}@media screen and (min-width:768px){.mfui-store-banner__qr-code+.mfui-store-banner__stores{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}.mfui-store-banner__store-link{height:40px;margin-bottom:10px;margin-left:8px;margin-right:8px;width:136px}@media screen and (max-width:767px){.mfui-store-banner__store-link{height:35px;width:119px}}.mfui-store-banner__store-link:last-child{margin-bottom:0}.mfui-store-banner__stores{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (max-width:767px){.mfui-store-banner__stores{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media screen and (min-width:768px){.mfui-store-banner__stores{margin-left:-8px}}.mfui-store-banner__text{margin-bottom:32px}.mfui-store-banner__title{margin-bottom:16px}.mfui-store-banner__screen{left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (max-width:767px){.mfui-store-banner__button{margin:0 auto}}.mfui-store-banner__links_three .mfui-store-banner__qr-code{-o-object-fit:contain;object-fit:contain}@media screen and (min-width:1280px){.mfui-store-banner__links_three .mfui-store-banner__qr-code{max-height:90px;max-width:90px}}.mfui-store-banner__links_three .mfui-store-banner__qr-code+.mfui-store-banner__stores{max-width:305px}@media screen and (min-width:1024px){.mfui-store-banner__links_three .mfui-store-banner__qr-code+.mfui-store-banner__stores{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}}@media screen and (max-width:767px){.mfui-store-banner__links_three .mfui-store-banner__qr-code+.mfui-store-banner__stores{margin:0 auto}}.mfui-store-banner__links_three .mfui-store-banner__store-link{height:40px;width:136px}@media screen and (max-width:1023px){.mfui-store-banner__links_three .mfui-store-banner__store-link{height:35px;width:119px}}.mfui-store-banner__links_three .mfui-store-banner__store-link:not(:last-child){margin-bottom:8px}@media screen and (max-width:767px){.mfui-store-banner__links_three .mfui-store-banner__store-link:not(:last-child){margin-bottom:16px}}

package/dist/es/components/StoreBanner/StoreBanner.d.ts

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Props as StoreButtonPropsType } from '../StoreButton/StoreButton';
+import './StoreBanner.scss';
+export declare const Theme: {
+    readonly DEFAULT: "default";
+    readonly GREEN: "green";
+    readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_0: "spbSky0";
+};
+type ThemeType = (typeof Theme)[keyof typeof Theme];
+export declare const DeviceMask: {
+    readonly ANDROID: "android";
+    readonly NEW_IPHONE: "new-iphone";
+    /** DEPRECATED: 'black-iphone', 'white-iphone', 'iphone-12' */
+    readonly BLACK_IPHONE: "black-iphone";
+    readonly WHITE_IPHONE: "white-iphone";
+    readonly IPHONE_12: "iphone-12";
+};
+type DeviceMaskType = (typeof DeviceMask)[keyof typeof DeviceMask];
+type LinkHrefType = StoreButtonPropsType['href'];
+type LinkOnClickType = StoreButtonPropsType['onClick'];
+export interface IStoreBannerProps {
+    /** Заголовок */
+    title: string;
+    /** Текст */
+    text: string;
+    /** Ссылка на скачивание приложения в App Store */
+    linkApple?: LinkHrefType;
+    /** Обработчик клика по ссылке в App Store */
+    onClickApple?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в Google Play */
+    linkGoogle?: LinkHrefType;
+    /** Обработчик клика по ссылке в Google Play */
+    onClickGoogle?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в Samsung Galaxy Store */
+    linkGalaxyStore?: LinkHrefType;
+    /** Обработчик клика по ссылке в Samsung Galaxy Store */
+    onClickGalaxyStore?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в Huawei AppGallery */
+    linkHuawei?: LinkHrefType;
+    /** Обработчик клика по ссылке в Huawei AppGallery */
+    onClickHuawei?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в RuStore */
+    linkRuStore?: LinkHrefType;
+    /** Обработчик клика по ссылке в RuStore */
+    onClickRuStore?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в Mi App Store */
+    linkMiStore?: LinkHrefType;
+    /** Обработчик клика по ссылке в Mi App Store */
+    onClickMiStore?: LinkOnClickType;
+    /** Ссылка на скачивание приложения в V-Appstore */
+    linkVAppstore?: LinkHrefType;
+    /** Обработчик клика по ссылке в V-Appstore */
+    onClickVAppstore?: LinkOnClickType;
+    /**  Текст кнопки */
+    textButton?: string;
+    /**  Ссылка для кнопки */
+    linkButton?: string;
+    /**  Rel - атрибут тега <a> для всех кнопок баннера */
+    rel?: string;
+    /** Ссылка на картинку с QR-кодом */
+    qrCode?: string;
+    /** Цветовая тема компонента */
+    theme?: ThemeType;
+    /** Изображение телефона. DEPRECATED: 'black-iphone', 'white-iphone', 'iphone-12' */
+    deviceMask: DeviceMaskType;
+    /** Изображение на дисплее телефона */
+    imageSrc: string;
+    /** Выравнивание контента слева на мобильном разрешении */
+    isContentLeftMobile?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        appleLink?: string;
+        galaxyStoreLink?: string;
+        googleLink?: string;
+        huaweiLink?: string;
+        miStoreLink?: string;
+        ruStoreLink?: string;
+        vAppstoreLink?: string;
+        button?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        linkApple?: Record<string, string>;
+        linkGalaxyStore?: Record<string, string>;
+        linkGoogle?: Record<string, string>;
+        linkHuawei?: Record<string, string>;
+        linkMiStore?: Record<string, string>;
+        linkRuStore?: Record<string, string>;
+        linkVAppstore?: Record<string, string>;
+    };
+}
+declare const StoreBanner: React.FC<IStoreBannerProps>;
+export default StoreBanner;

package/dist/es/components/StoreBanner/StoreBanner.js

@@ -0,0 +1,200 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { Button, Grid, GridColumn, Header } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
+import StoreButton, { Theme as StoreButtonTheme } from "../StoreButton/StoreButton";
+import "./StoreBanner.css";
+export var Theme = {
+  DEFAULT: 'default',
+  GREEN: 'green',
+  SPB_SKY_1: 'spbSky1',
+  SPB_SKY_0: 'spbSky0'
+};
+export var DeviceMask = {
+  ANDROID: 'android',
+  NEW_IPHONE: 'new-iphone',
+  /** DEPRECATED: 'black-iphone', 'white-iphone', 'iphone-12' */
+  BLACK_IPHONE: 'black-iphone',
+  WHITE_IPHONE: 'white-iphone',
+  IPHONE_12: 'iphone-12'
+};
+var testIdPrefix = 'StoreBanner';
+var cn = cnCreate('mfui-store-banner');
+var StoreBanner = function StoreBanner(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    rootClassName = _ref$classes2.root,
+    appleLinkClassName = _ref$classes2.appleLink,
+    galaxyStoreLinkClassName = _ref$classes2.galaxyStoreLink,
+    googleLinkClassName = _ref$classes2.googleLink,
+    huaweiLinkClassName = _ref$classes2.huaweiLink,
+    miStoreLinkClassName = _ref$classes2.miStoreLink,
+    ruStoreLinkClassName = _ref$classes2.ruStoreLink,
+    vAppstoreLinkClassName = _ref$classes2.vAppstoreLink,
+    buttonClassName = _ref$classes2.button,
+    title = _ref.title,
+    text = _ref.text,
+    linkApple = _ref.linkApple,
+    linkGalaxyStore = _ref.linkGalaxyStore,
+    linkGoogle = _ref.linkGoogle,
+    linkHuawei = _ref.linkHuawei,
+    linkMiStore = _ref.linkMiStore,
+    linkRuStore = _ref.linkRuStore,
+    linkVAppstore = _ref.linkVAppstore,
+    linkButton = _ref.linkButton,
+    _ref$textButton = _ref.textButton,
+    textButton = _ref$textButton === void 0 ? 'Установите приложение' : _ref$textButton,
+    rel = _ref.rel,
+    qrCode = _ref.qrCode,
+    imageSrc = _ref.imageSrc,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    deviceMask = _ref.deviceMask,
+    isContentLeftMobile = _ref.isContentLeftMobile,
+    rootRef = _ref.rootRef,
+    dataAttrs = _ref.dataAttrs,
+    onClickApple = _ref.onClickApple,
+    onClickGalaxyStore = _ref.onClickGalaxyStore,
+    onClickGoogle = _ref.onClickGoogle,
+    onClickHuawei = _ref.onClickHuawei,
+    onClickMiStore = _ref.onClickMiStore,
+    onClickRuStore = _ref.onClickRuStore,
+    onClickVAppstore = _ref.onClickVAppstore;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      theme: theme,
+      mask: deviceMask,
+      'content-left-mobile': isContentLeftMobile
+    }, [className, rootClassName]),
+    ref: rootRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
+    className: cn('container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('grid')
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
+    all: "6",
+    mobile: "12",
+    rightOffsetWide: "1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement(Header, {
+    as: "h2",
+    className: cn('title'),
+    color: "inherit"
+  }, convert(title, titleConvertConfig)), /*#__PURE__*/React.createElement("div", {
+    className: cn('text'),
+    color: "inherit"
+  }, convert(text, textConvertConfig)), /*#__PURE__*/React.createElement("div", {
+    className: cn('links', {
+      three: !!linkApple && !!linkGoogle && !!linkHuawei
+    })
+  }, !linkButton && qrCode && /*#__PURE__*/React.createElement("img", {
+    src: qrCode,
+    className: cn('qr-code'),
+    alt: "QR-\u043A\u043E\u0434",
+    "data-testid": "".concat(testIdPrefix, "-qrCode")
+  }), !linkButton && /*#__PURE__*/React.createElement("div", {
+    className: cn('stores'),
+    "data-testid": "".concat(testIdPrefix, "-stores")
+  }, linkApple && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkApple
+    },
+    theme: StoreButtonTheme.APP_STORE,
+    href: linkApple,
+    rel: rel,
+    onClick: onClickApple,
+    className: cn('store-link', {
+      'app-store': true
+    }, appleLinkClassName)
+  }), linkGoogle && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkGoogle
+    },
+    theme: StoreButtonTheme.GOOGLE_PLAY,
+    href: linkGoogle,
+    rel: rel,
+    className: cn('store-link', {
+      'google-play': true
+    }, googleLinkClassName),
+    onClick: onClickGoogle
+  }), linkRuStore && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkRuStore
+    },
+    theme: StoreButtonTheme.RU_STORE,
+    href: linkRuStore,
+    rel: rel,
+    className: cn('store-link', {
+      'ru-store': true
+    }, ruStoreLinkClassName),
+    onClick: onClickRuStore
+  }), linkGalaxyStore && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkGalaxyStore
+    },
+    theme: StoreButtonTheme.GALAXY_STORE,
+    href: linkGalaxyStore,
+    rel: rel,
+    className: cn('store-link', {
+      'galaxy-store': true
+    }, galaxyStoreLinkClassName),
+    onClick: onClickGalaxyStore
+  }), linkHuawei && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkHuawei
+    },
+    theme: StoreButtonTheme.HUAWEI_STORE,
+    href: linkHuawei,
+    rel: rel,
+    className: cn('store-link', {
+      'huawei-store': true
+    }, huaweiLinkClassName),
+    onClick: onClickHuawei
+  }), linkMiStore && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkMiStore
+    },
+    theme: StoreButtonTheme.MI_STORE,
+    href: linkMiStore,
+    rel: rel,
+    className: cn('store-link', {
+      'mi-store': true
+    }, miStoreLinkClassName),
+    onClick: onClickMiStore
+  }), linkVAppstore && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkVAppstore
+    },
+    theme: StoreButtonTheme.V_APPSTORE,
+    href: linkVAppstore,
+    rel: rel,
+    className: cn('store-link', {
+      'v-appstore': true
+    }, vAppstoreLinkClassName),
+    onClick: onClickVAppstore
+  })), linkButton && /*#__PURE__*/React.createElement(Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    className: cn('button', [buttonClassName]),
+    href: linkButton,
+    rel: rel,
+    theme: theme === 'green' ? 'purple' : 'green'
+  }, textButton)))), /*#__PURE__*/React.createElement(GridColumn, {
+    all: "4",
+    desktop: "6",
+    tablet: "6",
+    mobile: "12"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('device-wrapper')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('device-mask')
+  }), /*#__PURE__*/React.createElement("img", {
+    src: imageSrc,
+    className: cn('screen'),
+    alt: "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430"
+  })))))));
+};
+export default StoreBanner;

package/dist/es/components/StoreButton/StoreButton.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-store-button{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:8px;display:inline-block}.mfui-store-button_size-all_small{height:35px;width:119px}.mfui-store-button_size-all_medium{height:40px;width:136px}.mfui-store-button_size-all_large{height:70px;width:238px}.mfui-store-button_size-all_medium.mfui-store-button_theme_app-store,.mfui-store-button_size-all_small.mfui-store-button_theme_app-store{background-image:url(img/app-store.png)}.mfui-store-button_size-all_medium.mfui-store-button_theme_galaxy-store,.mfui-store-button_size-all_small.mfui-store-button_theme_galaxy-store{background-image:url(img/galaxy-store.png)}.mfui-store-button_size-all_medium.mfui-store-button_theme_google-play,.mfui-store-button_size-all_small.mfui-store-button_theme_google-play{background-image:url(img/google-play.png)}.mfui-store-button_size-all_medium.mfui-store-button_theme_huawei-store,.mfui-store-button_size-all_small.mfui-store-button_theme_huawei-store{background-image:url(img/huawei-store.png)}.mfui-store-button_size-all_medium.mfui-store-button_theme_mi-store,.mfui-store-button_size-all_small.mfui-store-button_theme_mi-store{background-image:url(img/mi-store.png)}.mfui-store-button_size-all_medium.mfui-store-button_theme_ru-store,.mfui-store-button_size-all_small.mfui-store-button_theme_ru-store{background-image:url(img/ru-store.png)}.mfui-store-button_size-all_medium.mfui-store-button_theme_v-appstore,.mfui-store-button_size-all_small.mfui-store-button_theme_v-appstore{background-image:url(img/v-appstore.png)}.mfui-store-button_size-all_large.mfui-store-button_theme_app-store{background-image:url(img/app-store-large.png)}.mfui-store-button_size-all_large.mfui-store-button_theme_galaxy-store{background-image:url(img/galaxy-store-large.png)}.mfui-store-button_size-all_large.mfui-store-button_theme_google-play{background-image:url(img/google-play-large.png)}.mfui-store-button_size-all_large.mfui-store-button_theme_huawei-store{background-image:url(img/huawei-store-large.png)}.mfui-store-button_size-all_large.mfui-store-button_theme_mi-store{background-image:url(img/mi-store-large.png)}.mfui-store-button_size-all_large.mfui-store-button_theme_ru-store{background-image:url(img/ru-store-large.png)}.mfui-store-button_size-all_large.mfui-store-button_theme_v-appstore{background-image:url(img/v-appstore-large.png)}@media screen and (min-width:1024px){.mfui-store-button_size-desktop_small{height:35px;width:119px}.mfui-store-button_size-desktop_medium{height:40px;width:136px}.mfui-store-button_size-desktop_large{height:70px;width:238px}.mfui-store-button_size-desktop_medium.mfui-store-button_theme_app-store,.mfui-store-button_size-desktop_small.mfui-store-button_theme_app-store{background-image:url(img/app-store.png)}.mfui-store-button_size-desktop_medium.mfui-store-button_theme_galaxy-store,.mfui-store-button_size-desktop_small.mfui-store-button_theme_galaxy-store{background-image:url(img/galaxy-store.png)}.mfui-store-button_size-desktop_medium.mfui-store-button_theme_google-play,.mfui-store-button_size-desktop_small.mfui-store-button_theme_google-play{background-image:url(img/google-play.png)}.mfui-store-button_size-desktop_medium.mfui-store-button_theme_huawei-store,.mfui-store-button_size-desktop_small.mfui-store-button_theme_huawei-store{background-image:url(img/huawei-store.png)}.mfui-store-button_size-desktop_medium.mfui-store-button_theme_mi-store,.mfui-store-button_size-desktop_small.mfui-store-button_theme_mi-store{background-image:url(img/mi-store.png)}.mfui-store-button_size-desktop_medium.mfui-store-button_theme_ru-store,.mfui-store-button_size-desktop_small.mfui-store-button_theme_ru-store{background-image:url(img/ru-store.png)}.mfui-store-button_size-desktop_medium.mfui-store-button_theme_v-appstore,.mfui-store-button_size-desktop_small.mfui-store-button_theme_v-appstore{background-image:url(img/v-appstore.png)}.mfui-store-button_size-desktop_large.mfui-store-button_theme_app-store{background-image:url(img/app-store-large.png)}.mfui-store-button_size-desktop_large.mfui-store-button_theme_galaxy-store{background-image:url(img/galaxy-store-large.png)}.mfui-store-button_size-desktop_large.mfui-store-button_theme_google-play{background-image:url(img/google-play-large.png)}.mfui-store-button_size-desktop_large.mfui-store-button_theme_huawei-store{background-image:url(img/huawei-store-large.png)}.mfui-store-button_size-desktop_large.mfui-store-button_theme_mi-store{background-image:url(img/mi-store-large.png)}.mfui-store-button_size-desktop_large.mfui-store-button_theme_ru-store{background-image:url(img/ru-store-large.png)}.mfui-store-button_size-desktop_large.mfui-store-button_theme_v-appstore{background-image:url(img/v-appstore-large.png)}}@media screen and (min-width:1280px){.mfui-store-button_size-wide_small{height:35px;width:119px}.mfui-store-button_size-wide_medium{height:40px;width:136px}.mfui-store-button_size-wide_large{height:70px;width:238px}.mfui-store-button_size-wide_medium.mfui-store-button_theme_app-store,.mfui-store-button_size-wide_small.mfui-store-button_theme_app-store{background-image:url(img/app-store.png)}.mfui-store-button_size-wide_medium.mfui-store-button_theme_galaxy-store,.mfui-store-button_size-wide_small.mfui-store-button_theme_galaxy-store{background-image:url(img/galaxy-store.png)}.mfui-store-button_size-wide_medium.mfui-store-button_theme_google-play,.mfui-store-button_size-wide_small.mfui-store-button_theme_google-play{background-image:url(img/google-play.png)}.mfui-store-button_size-wide_medium.mfui-store-button_theme_huawei-store,.mfui-store-button_size-wide_small.mfui-store-button_theme_huawei-store{background-image:url(img/huawei-store.png)}.mfui-store-button_size-wide_medium.mfui-store-button_theme_mi-store,.mfui-store-button_size-wide_small.mfui-store-button_theme_mi-store{background-image:url(img/mi-store.png)}.mfui-store-button_size-wide_medium.mfui-store-button_theme_ru-store,.mfui-store-button_size-wide_small.mfui-store-button_theme_ru-store{background-image:url(img/ru-store.png)}.mfui-store-button_size-wide_medium.mfui-store-button_theme_v-appstore,.mfui-store-button_size-wide_small.mfui-store-button_theme_v-appstore{background-image:url(img/v-appstore.png)}.mfui-store-button_size-wide_large.mfui-store-button_theme_app-store{background-image:url(img/app-store-large.png)}.mfui-store-button_size-wide_large.mfui-store-button_theme_galaxy-store{background-image:url(img/galaxy-store-large.png)}.mfui-store-button_size-wide_large.mfui-store-button_theme_google-play{background-image:url(img/google-play-large.png)}.mfui-store-button_size-wide_large.mfui-store-button_theme_huawei-store{background-image:url(img/huawei-store-large.png)}.mfui-store-button_size-wide_large.mfui-store-button_theme_mi-store{background-image:url(img/mi-store-large.png)}.mfui-store-button_size-wide_large.mfui-store-button_theme_ru-store{background-image:url(img/ru-store-large.png)}.mfui-store-button_size-wide_large.mfui-store-button_theme_v-appstore{background-image:url(img/v-appstore-large.png)}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-store-button_size-tablet_small{height:35px;width:119px}.mfui-store-button_size-tablet_medium{height:40px;width:136px}.mfui-store-button_size-tablet_large{height:70px;width:238px}.mfui-store-button_size-tablet_medium.mfui-store-button_theme_app-store,.mfui-store-button_size-tablet_small.mfui-store-button_theme_app-store{background-image:url(img/app-store.png)}.mfui-store-button_size-tablet_medium.mfui-store-button_theme_galaxy-store,.mfui-store-button_size-tablet_small.mfui-store-button_theme_galaxy-store{background-image:url(img/galaxy-store.png)}.mfui-store-button_size-tablet_medium.mfui-store-button_theme_google-play,.mfui-store-button_size-tablet_small.mfui-store-button_theme_google-play{background-image:url(img/google-play.png)}.mfui-store-button_size-tablet_medium.mfui-store-button_theme_huawei-store,.mfui-store-button_size-tablet_small.mfui-store-button_theme_huawei-store{background-image:url(img/huawei-store.png)}.mfui-store-button_size-tablet_medium.mfui-store-button_theme_mi-store,.mfui-store-button_size-tablet_small.mfui-store-button_theme_mi-store{background-image:url(img/mi-store.png)}.mfui-store-button_size-tablet_medium.mfui-store-button_theme_ru-store,.mfui-store-button_size-tablet_small.mfui-store-button_theme_ru-store{background-image:url(img/ru-store.png)}.mfui-store-button_size-tablet_medium.mfui-store-button_theme_v-appstore,.mfui-store-button_size-tablet_small.mfui-store-button_theme_v-appstore{background-image:url(img/v-appstore.png)}.mfui-store-button_size-tablet_large.mfui-store-button_theme_app-store{background-image:url(img/app-store-large.png)}.mfui-store-button_size-tablet_large.mfui-store-button_theme_galaxy-store{background-image:url(img/galaxy-store-large.png)}.mfui-store-button_size-tablet_large.mfui-store-button_theme_google-play{background-image:url(img/google-play-large.png)}.mfui-store-button_size-tablet_large.mfui-store-button_theme_huawei-store{background-image:url(img/huawei-store-large.png)}.mfui-store-button_size-tablet_large.mfui-store-button_theme_mi-store{background-image:url(img/mi-store-large.png)}.mfui-store-button_size-tablet_large.mfui-store-button_theme_ru-store{background-image:url(img/ru-store-large.png)}.mfui-store-button_size-tablet_large.mfui-store-button_theme_v-appstore{background-image:url(img/v-appstore-large.png)}}@media screen and (max-width:767px){.mfui-store-button_size-mobile_small{height:35px;width:119px}.mfui-store-button_size-mobile_medium{height:40px;width:136px}.mfui-store-button_size-mobile_large{height:70px;width:238px}.mfui-store-button_size-mobile_medium.mfui-store-button_theme_app-store,.mfui-store-button_size-mobile_small.mfui-store-button_theme_app-store{background-image:url(img/app-store.png)}.mfui-store-button_size-mobile_medium.mfui-store-button_theme_galaxy-store,.mfui-store-button_size-mobile_small.mfui-store-button_theme_galaxy-store{background-image:url(img/galaxy-store.png)}.mfui-store-button_size-mobile_medium.mfui-store-button_theme_google-play,.mfui-store-button_size-mobile_small.mfui-store-button_theme_google-play{background-image:url(img/google-play.png)}.mfui-store-button_size-mobile_medium.mfui-store-button_theme_huawei-store,.mfui-store-button_size-mobile_small.mfui-store-button_theme_huawei-store{background-image:url(img/huawei-store.png)}.mfui-store-button_size-mobile_medium.mfui-store-button_theme_mi-store,.mfui-store-button_size-mobile_small.mfui-store-button_theme_mi-store{background-image:url(img/mi-store.png)}.mfui-store-button_size-mobile_medium.mfui-store-button_theme_ru-store,.mfui-store-button_size-mobile_small.mfui-store-button_theme_ru-store{background-image:url(img/ru-store.png)}.mfui-store-button_size-mobile_medium.mfui-store-button_theme_v-appstore,.mfui-store-button_size-mobile_small.mfui-store-button_theme_v-appstore{background-image:url(img/v-appstore.png)}.mfui-store-button_size-mobile_large.mfui-store-button_theme_app-store{background-image:url(img/app-store-large.png)}.mfui-store-button_size-mobile_large.mfui-store-button_theme_galaxy-store{background-image:url(img/galaxy-store-large.png)}.mfui-store-button_size-mobile_large.mfui-store-button_theme_google-play{background-image:url(img/google-play-large.png)}.mfui-store-button_size-mobile_large.mfui-store-button_theme_huawei-store{background-image:url(img/huawei-store-large.png)}.mfui-store-button_size-mobile_large.mfui-store-button_theme_mi-store{background-image:url(img/mi-store-large.png)}.mfui-store-button_size-mobile_large.mfui-store-button_theme_ru-store{background-image:url(img/ru-store-large.png)}.mfui-store-button_size-mobile_large.mfui-store-button_theme_v-appstore{background-image:url(img/v-appstore-large.png)}}

package/dist/es/components/StoreButton/StoreButton.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Link } from '@megafon/ui-core';
+import './StoreButton.scss';
+export declare enum ButtonSizes {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large"
+}
+export declare enum Theme {
+    APP_STORE = "app-store",
+    GALAXY_STORE = "galaxy-store",
+    GOOGLE_PLAY = "google-play",
+    HUAWEI_STORE = "huawei-store",
+    MI_STORE = "mi-store",
+    RU_STORE = "ru-store",
+    V_APPSTORE = "v-appstore"
+}
+type LinkPropTypes = React.ComponentProps<typeof Link>;
+export type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'target' | 'rel' | 'onClick' | 'dataAttrs'> & {
+    /** Тема кнопки */
+    theme: Theme;
+    /** Дополнительный класс */
+    className?: string;
+    /** Размер на всех разрешениях экрана */
+    sizeAll?: ButtonSizes;
+    /** Размер на разрешении экрана 1280+ */
+    sizeWide?: ButtonSizes;
+    /** Размер на разрешении экрана 1024+ */
+    sizeDesktop?: ButtonSizes;
+    /** Размер на разрешении экрана 768-1023 */
+    sizeTablet?: ButtonSizes;
+    /** Размер на разрешении экрана 0-767 */
+    sizeMobile?: ButtonSizes;
+};
+declare const StoreButton: React.FC<Props>;
+export default StoreButton;