@redneckz/wildless-cms-uni-blocks 0.12.14 → 0.13.1

package/mobile/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,18 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import { DepositCalculatorParamsViewSettings, DepositCalculatorProps } from './CalculatorContent';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
-import { DEPOSIT_DEFAULT_SUM } from './constants';
-import { Rate } from './Rate';
+import type {
+  DepositCalculatorParamsViewSettings,
+  DepositCalculatorProps,
+} from './CalculatorContent';
 import { renderFootnote } from './renderFootnote';
-import { renderInterestPayment } from './renderInterestPayment';
-import { renderMonthsInput } from './renderMonthsInput';
-import { renderRegistrationType } from './renderRegistrationType';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderMonthsInput } from './renderMonthsInput';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { DEPOSIT_DEFAULT_SUM } from './constants';
 import { DepositCalculatorParams, useDepositCalculatorParams } from './useDepositCalculatorParams';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { renderInterestPayment } from './renderInterestPayment';
+import { renderRegistrationType } from './renderRegistrationType';
+import { renderRate } from './renderRate';
 
 export interface DepositCalculatorProp extends DepositCalculatorProps {
   className?: string;
@@ -32,16 +35,17 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       sourceBookDir,
       paramsViewSettings,
     );
-    const { defaultMonth, income, finalSum, rate } = calculatorParams;
+    const { defaultMonth, rate, income, finalSum } = calculatorParams;
 
     const { onChange: setMonthsValue } = field('monthsValue');
+
     useEffect(() => {
       setMonthsValue && setMonthsValue(defaultMonth);
     }, [defaultMonth]);
 
     return (
-      <section className={style('flex justify-between', className)}>
-        <div className="w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row', className)}>
+        <div className="flex flex-col gap-lg sm:w-2/5">
           {renderWantedSumInput({
             title: 'Сумма, ₽',
             min: calculatorParams.minSum,
@@ -57,15 +61,18 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
           })}
-          <div className="mt-2xl">
+          <div className="flex flex-col gap-y-2xl">
             {renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           </div>
         </div>
-        <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
-        <div className="w-96">
+        <div className="border-b border-main-divider mt-lg mb-2xl md:hidden"></div>
+        {renderRate({
+          rate,
+        })}
+        <div className="mt-2xl flex flex-col gap-y-2xl sm:w-96 sm:gap-y-0 sm:mt-0">
           <CalculatorValueBlock title="Доход в конце срока" value={income} postfix="₽" prefix="+" />
           <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
-          {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
+          {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/mobile/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -4,7 +4,10 @@ import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { style } from '../../utils/style';
-import type { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import type {
+  RefinancingCalculatorParamsViewSettings,
+  RefinancingCalculatorProps,
+} from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import {
   DEFAULT_REFINANCING_MONTHS,
@@ -15,7 +18,6 @@ import { Rate } from './Rate';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
-import { RefinancingCalculatorProps } from './CalculatorContent';
 import {
   RefinancingCalculatorParams,
   useRefinancingCalculatorParams,
@@ -71,6 +73,7 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
             max: calculatorParams.maxMonths,
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
+            className: 'mt-2xl',
           })}
           <div className={style('mt-7', calculatorParams.isExtraMoney ? 'mb-3' : '')}>
             {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}

package/mobile/src/components/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -1,12 +1,14 @@
 import { ListOrientation } from '../../model/ListOrientation';
 import { RadioButtonGroup, RadioButtonItem } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 
 export interface BinaryRadioButtonGroupProps {
   items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
   title?: string;
   orientation?: ListOrientation;
   value?: boolean;
+  radioGroupClassName?: string;
   onChange?: (value: boolean) => void;
 }
 
@@ -15,6 +17,7 @@ export const renderBinaryRadioButtonGroup = ({
   title,
   orientation = 'horizontal',
   value,
+  radioGroupClassName,
   onChange,
 }: BinaryRadioButtonGroupProps) => (
   <div>
@@ -29,6 +32,7 @@ export const renderBinaryRadioButtonGroup = ({
       orientation={orientation}
       items={items}
       checkedItem={items[value ? 0 : 1].id}
+      className={style('flex-col sm:flex-row', radioGroupClassName)}
       onChange={(_) => onChange && onChange(_ === items[0].id)}
     />
   </div>

package/mobile/src/components/Calculator/renderDaysInput.tsx

@@ -5,7 +5,6 @@ const STEP_DAYS = 1;
 
 export const renderDaysInput = (props: InputRangeProps) => (
   <InputRange
-    className="mt-7"
     items={[`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`]}
     step={STEP_DAYS}
     {...props}

package/mobile/src/components/Calculator/renderMonthsInput.tsx

@@ -14,7 +14,6 @@ export const renderMonthsInput = ({
   ...rest
 }: MonthsInputParams) => (
   <InputRange
-    className="mt-7"
     items={[`От ${monthText(min)}`, `До ${monthText(max)}`]}
     step={STEP_MONTHS}
     {...(availableMonths?.length ? { list: availableMonths } : { min, max })}

package/mobile/src/components/Calculator/renderPaymentType.tsx

@@ -6,6 +6,7 @@ import {
 export const renderPaymentType = (props: Partial<BinaryRadioButtonGroupProps>) =>
   renderBinaryRadioButtonGroup({
     ...props,
+    radioGroupClassName: 'sm:flex-col',
     items: [
       { id: 'annuity', text: 'Аннуитетный' },
       { id: 'differential', text: 'Дифференцированный' },

package/mobile/src/components/Calculator/renderRate.tsx

@@ -0,0 +1,37 @@
+import { UnknownRate } from './UnknownRate';
+import { Rate } from './Rate';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+
+interface RenderRateProps {
+  rate: number;
+  depositeName?: string;
+  isShowUnknownRate?: boolean;
+  isShowDepositeName?: boolean;
+}
+
+const renderDesktopRate = ({ rate, depositeName, isShowDepositeName }: RenderRateProps) => (
+  <Rate
+    rate={rate}
+    depositeName={depositeName}
+    isShowDepositeName={isShowDepositeName}
+    rateBlockClassName="tracking-[-25px]"
+    unit="%"
+  />
+);
+
+const renderMobileRate = ({ rate }: RenderRateProps) => (
+  <CalculatorValueBlock title="Ставка" value={rate} postfix="%" />
+);
+
+export const renderRate = (props: RenderRateProps) => {
+  if (props.isShowUnknownRate) {
+    return <UnknownRate />;
+  }
+
+  return (
+    <div>
+      <div className="hidden md:block">{renderDesktopRate(props)}</div>
+      <div className="md:hidden">{renderMobileRate(props)}</div>
+    </div>
+  );
+};

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -1,46 +1,28 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { Text } from '../../ui-kit/Text/Text';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
-import { cardDescriptionColor, cardTitleFont } from './programCardStyles';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
-  ({ className, title, icon, list = [], href, target, ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-3xl sm:p-0" {...rest}>
-      <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
-        <div className="flex justify-center px-xl">
-          {icon?.src || icon?.icon ? <Img image={icon} /> : null}
-        </div>
-        <div className="sm:px-s p-5xl">
-          {title ? <Heading className="mb-xs sm:mb-m" headingType="h6" title={title} /> : null}
-          {list.length ? (
-            <div className="flex flex-col gap-xs sm:gap-s">{list?.map(renderList)}</div>
-          ) : null}
-        </div>
+  ({ className, title, icon, list, href, target, ...rest }) => (
+    <BlockWrapper className={className} defaultPadding="p-3xl" {...rest}>
+      <LinkWrapper className="flex items-center h-full" href={href} target={target}>
+        <BaseProductTile
+          title={title}
+          headlineVersion="XS"
+          image={icon}
+          imageOptions={{ directionRight: false, imageAlign: 'center' }}
+          benefits={list?.map((_) => ({
+            type: 'default',
+            label: _.title,
+            description: _.description,
+          }))}
+        />
       </LinkWrapper>
     </BlockWrapper>
   ),
 );
-
-const renderList = (_: HeadlineCommonProps, i: number) => (
-  <div key={String(i)} className="flex flex-row-reverse justify-between gap-y-2xs sm:flex-col">
-    {_.title ? (
-      <Text size="text-l" font={cardTitleFont}>
-        {_.title}
-      </Text>
-    ) : null}
-    {_.description ? (
-      <Paragraph size="text-l" font="font-light" color={cardDescriptionColor}>
-        {_.description}
-      </Paragraph>
-    ) : null}
-  </div>
-);

package/mobile/src/components/Header/Header.tsx

@@ -17,7 +17,7 @@ export const Header = JSX<HeaderProps>(
 
     return (
       <BlockWrapper tag="header" defaultPadding="" version={version} {...rest}>
-        <div className="container px-4 py-2xs box-border">
+        <div className="container px-5 py-2xs box-border">
           <HeaderTop
             bgColor={bgColor}
             logo={logo}

package/mobile/src/components/Header/HeaderTop.tsx

@@ -8,6 +8,8 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import { Img } from '../../ui-kit/Img/Img';
 import { useRouter } from '../../hooks/useRouter';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { projectSettings } from '../../ProjectSettings';
+import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 
 export interface HeaderTopProps {
   bgColor?: BgColorVersion;
@@ -23,26 +25,18 @@ const BUTTON_STYLE = {
 
 export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl, version }) => {
   const router = useRouter();
-  const isRootLocation = router.pathname === '/';
-  const onClick = useCallback(() => {
+  const isRootLocation = projectSettings.BASE_PATH?.startsWith(router.pathname);
+  const onClick = useCallback((e) => {
+    e.preventDefault();
     router.back();
   }, []);
 
   return (
     <div className="flex items-center justify-between w-full">
       {isRootLocation ? (
-        <Logo bgColor={bgColor} logo={logo} />
+        <Logo className="mt-2xs" bgColor={bgColor} logo={logo} />
       ) : (
-        <Button className="flex items-center text-l" ariaLabel="Вернуться назад" onClick={onClick}>
-          <Img
-            className="w-6 h-6"
-            image={{
-              icon: 'ChevronLeft',
-              iconVersion: 'black',
-            }}
-          />
-          Вернуться назад
-        </Button>
+        renderBackButton(onClick)
       )}
       {internetBankUrl ? (
         <Button
@@ -50,7 +44,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl,
           ariaLabel="Войти"
           target="_blank"
           className={style(
-            'p-s my-2xs text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
+            'p-s text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
             BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
           )}
         >
@@ -60,3 +54,22 @@ export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl,
     </div>
   );
 });
+
+const renderBackButton = (onClick: (ev?: PreventableEvent) => void) => (
+  <button
+    className="flex items-center text-l mt-2xs"
+    aria-label="Вернуться назад"
+    onClick={onClick}
+  >
+    <Img
+      className="w-6 h-6"
+      image={{
+        icon: 'ChevronLeftIcon',
+        iconVersion: 'black',
+      }}
+      width="24"
+      height="24"
+    />
+    Вернуться назад
+  </button>
+);

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -50,6 +50,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               />
             ) : null
           }
+          rightImage={image?.src ? <Img className="hidden lg:block" image={image} /> : null}
           buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 4 })}
         >
           {renderDescription(description)}
@@ -60,7 +61,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               </div>
             ) : null}
             {renderList(items)}
-            {image?.src ? <Img image={image} /> : null}
+            {image?.src ? <Img className="lg:hidden" image={image} /> : null}
           </div>
         </BaseTile>
       </BlockWrapper>

package/mobile/src/components/MortgageFiltration/HotFilterRecord.ts

@@ -0,0 +1,14 @@
+import { arrCmp, combineBoolCmps, objCmp, scalarCmp } from '../../utils/BoolComparator';
+
+export type HotFilterRecord = {
+  /** @title Тип недвижимости */
+  propertyType?: string[];
+  /** @title Этап строительства */
+  stage?: string[];
+  /** @title Категории */
+  categories?: string[];
+  /** @title Дополнительно */
+  extraOptions?: string[];
+};
+
+export const hotFilterRecordCmp = objCmp<string[]>(combineBoolCmps(scalarCmp, arrCmp()));

package/mobile/src/components/MortgageFiltration/MortgageFiltration.example.json

@@ -6,8 +6,15 @@
         "type": "array",
         "items": {
           "type": "string",
-          "enum": ["flat", "apartment", "house", "storeRoom", "parkingSpace"],
-          "enumNames": ["Квартира", "Апартаменты", "Жилой дом", "Кладовая", "Машино-место"]
+          "enum": ["flat", "apartment", "house", "storeRoom", "parkingSpace", "suburban"],
+          "enumNames": [
+            "Квартира",
+            "Апартаменты",
+            "Жилой дом",
+            "Кладовая",
+            "Машино-место",
+            "Загородная недвижимость"
+          ]
         }
       },
       "stage": {
@@ -40,11 +47,54 @@
         "type": "array",
         "items": {
           "type": "string",
-          "enum": ["preferentialMortgage", "children"],
-          "enumNames": ["Льготная ипотека", "Дети"]
+          "enum": ["preferentialMortgage", "children", "refinancing"],
+          "enumNames": ["Льготная ипотека", "Дети", "Рефинансирование"]
         }
       }
     },
+    "hotFilters": [
+      { "text": "Все программы" },
+      {
+        "text": "Льготные программы",
+        "filter": {
+          "categories": [],
+          "extraOptions": ["preferentialMortgage"],
+          "propertyType": [],
+          "stage": []
+        }
+      },
+      {
+        "text": "Строящееся жилье",
+        "filter": {
+          "stage": ["inProgress"],
+          "categories": [],
+          "extraOptions": [],
+          "propertyType": []
+        }
+      },
+      {
+        "text": "Готовое жилье",
+        "filter": { "stage": ["built"], "categories": [], "extraOptions": [], "propertyType": [] }
+      },
+      {
+        "text": "Загородная недвижимость",
+        "filter": {
+          "propertyType": ["suburban"],
+          "categories": [],
+          "extraOptions": [],
+          "stage": []
+        }
+      },
+      {
+        "text": "Рефинансирование",
+        "filter": {
+          "categories": [],
+          "extraOptions": ["refinancing"],
+          "propertyType": [],
+          "stage": []
+        }
+      }
+    ],
     "resetButton": {
       "text": "Очистить фильтры",
       "version": "secondary"

package/mobile/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -1,19 +1,60 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
 import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { TabItemBase } from '../../ui-kit/TabsControl/TabItem';
+import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { style } from '../../utils/style';
-import type { MortgageFiltrationContent } from './MortgageFiltrationContent';
+import { hotFilterRecordCmp } from './HotFilterRecord';
+import type {
+  MortgageFiltrationContent,
+  MortgageFiltrationSchema,
+} from './MortgageFiltrationContent';
 
 interface MortgageFiltrationProps extends MortgageFiltrationContent, UniBlockProps {}
 
-const initialFiltrationState = {};
+const initialFiltrationState: Partial<Record<keyof MortgageFiltrationSchema, string[]>> = {
+  categories: [],
+  extraOptions: [],
+  propertyType: [],
+  stage: [],
+};
 
 export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<MortgageFiltrationProps>(
-  ({ className, filtrationSchema = {}, resetButton, ...rest }) => {
-    const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
+  ({ className, hotFilters = [], filtrationSchema = {}, resetButton, ...rest }) => {
+    const [filtrationState, { field, reset, update: replaceFiltrationState }] =
+      useForm(initialFiltrationState);
+
+    const normalizedHotFilters: TabItemBase[] = useMemo(
+      () =>
+        hotFilters.map(({ text }) => ({
+          text,
+        })),
+      [hotFilters],
+    );
+
+    const [hotFilterIndex, setHotFilterIndex] = useState(0);
+
+    const handleHotFilterSelect = useCallback(
+      (_: TabItemBase) => {
+        setHotFilterIndex(normalizedHotFilters.indexOf(_));
+        replaceFiltrationState(
+          hotFilters[normalizedHotFilters.indexOf(_)].filter || initialFiltrationState,
+        );
+      },
+      [normalizedHotFilters],
+    );
+
+    useEffect(() => {
+      const suggestedHotFilterIndex = hotFilters.findIndex((_) =>
+        hotFilterRecordCmp(_.filter, filtrationState),
+      );
+
+      setHotFilterIndex(suggestedHotFilterIndex !== -1 ? suggestedHotFilterIndex : 0);
+    }, [hotFilters, filtrationState]);
 
     return (
       <BlockWrapper
@@ -22,6 +63,12 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
         version="transparent"
         {...rest}
       >
+        <TabsControl
+          className="mb-2xs"
+          items={normalizedHotFilters}
+          value={normalizedHotFilters[hotFilterIndex]}
+          onChange={handleHotFilterSelect}
+        />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
         <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>

package/mobile/src/components/MortgageFiltration/MortgageFiltrationContent.ts

@@ -2,6 +2,7 @@ import type {
   BaseFiltrationInnerContent,
   StringArray,
 } from '../../ui-kit/BaseFiltration/BaseFiltrationContent';
+import type { HotFilterRecord } from './HotFilterRecord';
 
 export type MortgageFiltrationSchema = {
   /** @title Тип недвижимости */
@@ -14,10 +15,22 @@ export type MortgageFiltrationSchema = {
   extraOptions?: StringArray;
 };
 
+/**
+ * @title Кнопка фильтрации
+ */
+export interface HotFilterButton {
+  /** @title Текст */
+  text?: string;
+  /** @title Применяемые фильтры */
+  filter?: HotFilterRecord;
+}
+
 /**
  * @title Подборщик ипотек
  */
 export interface MortgageFiltrationContent extends BaseFiltrationInnerContent {
   /** @title Параметры фильтрации */
   filtrationSchema?: MortgageFiltrationSchema;
+  /** @title Горячие фильтры */
+  hotFilters?: HotFilterButton[];
 }

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -132,7 +132,7 @@ const renderPrimaryFoldButton = ({
       )}
       onClick={onToggle}
     >
-      <div className="flex items-center group-hover/button:text-primary-main gap-s">
+      <div className="flex items-center text-start group-hover/button:text-primary-main gap-s">
         {renderRoundedIcon(labelIcon, labelIconBgVersion)}
         {label ? (
           <Text size="text-h6" font="font-normal">

package/mobile/src/components/RollupItem/renderRoundedIcon.tsx

@@ -3,5 +3,5 @@ import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
 
 export const renderRoundedIcon = (icon?: Picture, iconBgVersion?: IconBgVersion) => (
-  <RoundedIcon {...icon} iconBgVersion={iconBgVersion} />
+  <RoundedIcon {...icon} iconBgVersion={iconBgVersion} className="shrink-0" />
 );

package/mobile/src/components/RollupItem/rollupIconVersion.tsx

@@ -1 +1 @@
-export const rollupIconVersion = 'normal';
+export const rollupIconVersion = 'black';