@redneckz/wildless-cms-uni-blocks 0.14.26 → 0.14.28

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { CorporateLeadAPI } from '../../api/CorporateLeadAPI';
+import { LeadServiceAPI } from '../../api/LeadServiceAPI';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -13,19 +13,22 @@ import { ResponseNotification } from './ResponseNotification';
 
 export interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {}
 
-const API = CorporateLeadAPI();
+const API = LeadServiceAPI();
 
 export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   const { className, formBlock, ...rest } = props;
 
   const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
 
-  const handleSubmit = useCallback(async (data: Record<string, any>) => {
-    const status = (await API.send(data)) ? 'OK' : 'Fail';
-    setResponseType(status);
+  const handleSubmit = useCallback(
+    async (data: Record<string, any>, isIndividualType?: boolean) => {
+      const status = (await API.send(data, isIndividualType)) ? 'OK' : 'Fail';
+      setResponseType(status);
 
-    return status;
-  }, []);
+      return status;
+    },
+    [],
+  );
 
   return (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
@@ -42,7 +45,10 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
 
 const renderEmbeddedForm = (
   formBlock: ApplicationFormBlockDef,
-  handleSubmit: (data: Record<string, string>) => Promise<'OK' | 'Fail'>,
+  handleSubmit: (
+    data: Record<string, string>,
+    isIndividualType?: boolean,
+  ) => Promise<'OK' | 'Fail'>,
 ) => {
   const type = formBlock?.formType;
   if (!type || !(type in EmbeddableForms)) {

package/src/components/ApplicationForm/ApplicationForm.ui.json

@@ -4,8 +4,11 @@
       "formType": {
         "ui:widget": "hidden"
       },
-      "sourceBookDir": {
-        "ui:widget": "sourceBook"
+      "product": {
+        "ui:widget": "sourceBookDataDropdown",
+        "ui:options": {
+          "sourceName": "products"
+        }
       }
     }
   }

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -74,6 +74,17 @@ export type GrantSupportFormParamsDef = TitleProps & {
   sourceBookDir?: string;
 };
 
+/**
+ * @title Заявка для ФЛ
+ */
+export type IndividualsFormParamsDef = TitleProps & {
+  /** @default ApplicationFormIndividuals */
+  formType: 'ApplicationFormIndividuals';
+  button?: SubmitButtonProps;
+  /** @title Продукт */
+  product?: string;
+};
+
 /**
  * @title Настройки формы
  */
@@ -83,7 +94,8 @@ export type ApplicationFormBlockDef =
   | DepositFormParamsDef
   | CreditFormParamsDef
   | AcquiringFormParamsDef
-  | GrantSupportFormParamsDef;
+  | GrantSupportFormParamsDef
+  | IndividualsFormParamsDef;
 
 /**
  * @title Форма заявки

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -23,9 +23,7 @@ const depositValidator = objectValidator({
   phone: phoneValidator,
 });
 
-export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, onSubmit } = props;
-
+export const ApplicationFormDeposit = JSX<ApplicationFormsProps>(({ button, link, onSubmit }) => {
   const handleSubmit = useCallback(
     (formState: DepositFormState) => {
       const { name, phone } = formState;

package/src/components/ApplicationForm/ApplicationFormGrantSupport.tsx

@@ -31,7 +31,7 @@ export const ApplicationFormGrantSupport = JSX<ApplicationFormsProps>((props) =>
           label="Ваш регион"
           placeholder="Выберите регион"
           isSearch={true}
-          options={regions.map(({ name = '' }) => ({ key: name }))}
+          options={regions.map(({ name = '' }) => ({ key: name, text: name }))}
           value={region}
           onChange={setRegion}
         />

package/src/components/ApplicationForm/ApplicationFormIndividuals.tsx

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
+import { withValidator } from '../../validation/withValidator';
+import { type ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import { type IndividualsFormState } from './IndividualsFormState';
+import { renderIndividualsFields } from './renderIndividualsFields';
+import { renderSubmitButton } from './renderSubmitButton';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+
+const initialFormState: IndividualsFormState = {
+  surname: '',
+  name: '',
+  middleName: '',
+  phone: '',
+  mail: '',
+  date: undefined,
+  consentDataProcessing: true,
+};
+
+const individualsValidator = objectValidator({
+  surname: nameValidator,
+  name: nameValidator,
+  middleName: nameValidator,
+  phone: phoneValidator,
+  mail: defaultValidator,
+  date: defaultValidator,
+});
+
+export const ApplicationFormIndividuals = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, product, onSubmit } = props;
+
+  const handleSubmit = useCallback(
+    (formState: IndividualsFormState) => {
+      const { surname, name, middleName, phone, mail, date, consentDataProcessing } = formState;
+
+      isValidationSuccess(individualsValidator(formState)) &&
+        onSubmit(
+          {
+            typeForm: 'dpst',
+            surname,
+            name,
+            middleName,
+            mail,
+            consentDataProcessing,
+            phone: phone.replace(/[^+\d]/g, ''),
+            date: date?.toISOString().slice(0, 10) || '',
+            product: product || '',
+          },
+          true,
+        );
+    },
+    [onSubmit],
+  );
+
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+
+  return (
+    <form className="container space-y-s" onSubmit={formProps.onSubmit}>
+      {renderIndividualsFields(field)}
+      <div className="@xl:flex justify-between items-center">
+        <div className="@xl:mb-0 mb-2 flex items-center gap-3">
+          <Checkbox {...withValidator(field('consentDataProcessing'), defaultValidator)} />
+          <Footnote text="Согласен с " link={link} />
+        </div>
+        {renderSubmitButton(button)}
+      </div>
+    </form>
+  );
+});

package/src/components/ApplicationForm/ApplicationFormsProps.ts

@@ -5,5 +5,6 @@ export interface ApplicationFormsProps<S extends Record<string, any> = Record<st
   button?: SubmitButtonProps;
   link?: LinkProps;
   sourceBookDir?: string;
-  onSubmit: (data: S) => void;
+  product?: string;
+  onSubmit: (data: S, isIndividualType?: boolean) => void;
 }

package/src/components/ApplicationForm/DatePickerControl.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DatePicker } from '../../ui-kit/DatePicker/DatePicker';
+import { Text } from '../../ui-kit/Text/Text';
+
+export interface DatePickerControlProps {
+  className: string;
+  label: string;
+  value?: Date;
+  error?: string;
+  onChange?: (value: Date) => void;
+}
+
+export const DatePickerControl = JSX<DatePickerControlProps>(
+  ({ className, label, value = undefined, error, onChange }) => (
+    <div className={className}>
+      {label ? (
+        <div className="mb-xs">
+          <Text size="text-m" font="font-light">
+            {label}
+          </Text>
+        </div>
+      ) : null}
+      <DatePicker value={value} onChange={onChange} valid={Boolean(!error)} />
+      <div className="h-2">
+        {error ? (
+          <Text size="text-xs" font="font-light" color="text-error">
+            {error}
+          </Text>
+        ) : null}
+      </div>
+    </div>
+  ),
+);

package/src/components/ApplicationForm/EmbeddableForms.tsx

@@ -3,6 +3,7 @@ import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
 import { ApplicationFormCredit } from './ApplicationFormCredit';
 import { ApplicationFormDeposit } from './ApplicationFormDeposit';
 import { ApplicationFormGrantSupport } from './ApplicationFormGrantSupport';
+import { ApplicationFormIndividuals } from './ApplicationFormIndividuals';
 import { ApplicationFormWed } from './ApplicationFormWed';
 
 export const EmbeddableForms = {
@@ -12,4 +13,5 @@ export const EmbeddableForms = {
   ApplicationFormCredit,
   ApplicationFormAcquiring,
   ApplicationFormGrantSupport,
+  ApplicationFormIndividuals,
 };

package/src/components/ApplicationForm/Footnote.tsx

@@ -5,12 +5,13 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 
 interface FootnoteProps {
+  text?: string;
   link?: LinkProps;
 }
 
-export const Footnote = JSX<FootnoteProps>(({ link }) => (
+export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
   <Paragraph size="text-s" font="font-light" color="text-secondary-text">
-    <Text>Нажимая кнопку, вы подтверждаете согласие с </Text>
+    <Text>{text || 'Нажимая кнопку, вы подтверждаете согласие с '}</Text>
     {link ? (
       <Button
         href={link.href}

package/src/components/ApplicationForm/IndividualsFormState.ts

@@ -0,0 +1,9 @@
+export interface IndividualsFormState {
+  surname: string;
+  name: string;
+  middleName: string;
+  phone: string;
+  mail: string;
+  date: Date | undefined;
+  consentDataProcessing: boolean;
+}

package/src/components/ApplicationForm/renderIndividualsFields.tsx

@@ -0,0 +1,46 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { DatePickerControl } from './DatePickerControl';
+import { type IndividualsFormState } from './IndividualsFormState';
+import { InputControl } from './InputControl';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+
+export const renderIndividualsFields = (field: FormFieldRegisterer<IndividualsFormState>) => (
+  <div className="@xl:flex @xl:justify-between @xl:gap-lg">
+    <div className="@xl:w-1/2 space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Фамилия"
+        {...withValidator(field('surname'), nameValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Отчество"
+        {...withValidator(field('middleName'), nameValidator)}
+      />
+      <PhoneInputControl
+        className="shrink-0 w-full"
+        label="Телефон"
+        {...withValidator(field('phone'), phoneValidator)}
+      />
+    </div>
+    <div className="@xl:w-1/2 space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Имя"
+        {...withValidator(field('name'), nameValidator)}
+      />
+      <DatePickerControl
+        className="shrink-0 w-full"
+        label="Дата рождения"
+        {...withValidator(field('date'), defaultValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Электронная почта"
+        {...withValidator(field('mail'), defaultValidator)}
+      />
+    </div>
+  </div>
+);

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -27,6 +27,7 @@ export type ListBenefitDef = ListContent & {
 
 /**
  * @title Вид контента
+ * @default null
  */
 export type DescriptionDef = EmptyOption | TextBenefitDef | ListBenefitDef;
 

package/src/components/Blocks.ts

@@ -41,7 +41,6 @@ import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
-import { PromoTile } from './PromoTile/PromoTile';
 import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo/RepresentativeOfficeInfo';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
@@ -99,7 +98,6 @@ export const Blocks: BlocksRegistry = {
   ProductBlock,
   ProductGallery,
   ProductTile,
-  PromoTile,
   RepresentativeOfficeInfo,
   RichTextBlock,
   RollupItem,

package/src/components/Bonus/BonusContent.ts

@@ -27,6 +27,7 @@ export type BonusCountDef = {
 
 /**
  * @title Вид контента
+ * @default null
  */
 export type BonusItemContentDef = EmptyOption | BonusImageDef | BonusCountDef;
 

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

@@ -12,8 +12,8 @@ import { EmbeddableCalcBlocks } from './EmbeddableCalcBlocks';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 
-export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [] }) => (
-  <BlockWrapper className={className} defaultPadding="p-0">
+export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [], ...rest }) => (
+  <BlockWrapper className={className} defaultPadding="p-0" {...rest}>
     {renderTabs(calculatorTabs)}
   </BlockWrapper>
 ));
@@ -28,7 +28,7 @@ const renderCalculator = (tab: CalculatorTab) => {
   const EmbeddedBlock = EmbeddableCalcBlocks[type];
 
   return (
-    <div>
+    <div className="p-xl">
       {tab?.calculatorBlock?.title ? (
         <Heading className="mb-lg" title={tab?.calculatorBlock?.title} />
       ) : null}
@@ -45,7 +45,7 @@ const renderTabs = (tabs: CalculatorTab[]) => {
   const isSingleTab = tabs.length === 1;
 
   if (isSingleTab) {
-    return <BlockWrapper>{renderCalculator(tabs[0])}</BlockWrapper>;
+    return renderCalculator(tabs[0]);
   }
 
   return tabs.map((tab, index) => (
@@ -54,9 +54,7 @@ const renderTabs = (tabs: CalculatorTab[]) => {
       isFoldButtonOnTop
       unfoldedByDefault={index === 0}
       renderFoldableSection={({ isUnfolded }) => (
-        <FoldableSection isUnfolded={isUnfolded}>
-          <BlockWrapper>{renderCalculator(tab)}</BlockWrapper>
-        </FoldableSection>
+        <FoldableSection isUnfolded={isUnfolded}>{renderCalculator(tab)}</FoldableSection>
       )}
       renderFoldButton={renderFoldButton(tab)}
     />
@@ -66,6 +64,8 @@ const renderTabs = (tabs: CalculatorTab[]) => {
 const renderFoldButton =
   (tab: CalculatorTab) =>
   ({ isUnfolded, onToggle }: FoldablePartProps) => {
+    const align = tab.nav?.align || 'text-left';
+
     return (
       <button
         onClick={onToggle}
@@ -75,10 +75,10 @@ const renderFoldButton =
           <Icon name={tab.nav?.icon?.icon} iconVersion="color" width="24" height="24" />
         </div>
         <div className="flex-1 flex flex-col pl-s">
-          <Text align="text-left" color="text-white">
+          <Text align={align} color="text-white">
             {tab.nav?.title}
           </Text>
-          <Text align="text-left" size="text-s" color="text-white" font="font-light">
+          <Text align={align} size="text-s" color="text-white" font="font-light">
             {tab.nav?.description}
           </Text>
         </div>

package/src/components/Calculator/CalculatorContent.ts

@@ -28,6 +28,7 @@ export type IPRateDef = RateParams & {
 
 /**
  * @title Назначение ставки
+ * @default null
  */
 export type RateParamsDef = EmptyOption | ULRateDef | IPRateDef;
 
@@ -154,6 +155,7 @@ export type RefinancingCalculatorParamsDef = TitleProps &
 
 /**
  * @title Настройки калькулятора
+ * @default null
  */
 export type CalculatorBlockDef =
   | EmptyOption
@@ -180,6 +182,7 @@ export type CalculatorTab = {
  * @title Калькулятор
  */
 export interface CalculatorContent {
+  /** @title Выравнивание вкладок */
   tabAlign?: Align;
   /** @title Вкладки */
   calculatorTabs?: CalculatorTab[];

package/src/components/Carousel/renderCarouselCards.tsx

@@ -3,6 +3,7 @@ import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { type BlockDef } from '../../model/ContentPageDef';
 import { type UniBlockProps } from '../../model/JSXBlock';
+import { getBorderStyle } from '../../utils/getBorderStyle';
 import { style } from '../../utils/style';
 import { type CardSizeMode } from './CarouselContent';
 import { renderCardHighlight } from './renderCardHighlight';
@@ -67,8 +68,8 @@ const cardStyle = (
     'min-w-80',
     CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
     someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'),
-    showBorder &&
-      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+    getBorderStyle(showBorder),
+    showBorder && 'h-full',
   );
 
 const isCardHighlighted = (_: BlockDef | undefined) =>

package/src/components/CarouselCard/CarouselCard.tsx

@@ -19,7 +19,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
       defaultPadding="p-0"
       {...rest}
     >
-      <div className="relative">
+      <div className="relative h-full">
         <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />

package/src/components/CarouselCard/titleSize.tsx

@@ -1 +1 @@
-export const titleSize = 'L';
+export const titleSize = 'XS';

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -25,7 +25,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
-      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
+      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-2xl" {...rest}>
         {isIcon(icon) ? (
           <div className="self-center">
             <Img image={icon} />
@@ -34,7 +34,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
-        {button ? <Button className="w-full mt-m" {...button} /> : null}
+        {button ? <Button className="w-full mt-m mb-lg" {...button} /> : null}
         {cardCells.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (

package/src/components/Footer/Footer.mobile.tsx

@@ -45,10 +45,12 @@ export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
         <SocialMedia className="mb-xl" media={socialMedia} stretched={true}>
           Соцсети
         </SocialMedia>
-        <Text size="text-s" font="font-light" color="text-secondary-text">
-          Мобильное приложение
-        </Text>
-        <div className="mt-xs">{mobileApps?.map(renderButton)}</div>
+        <div className="mb-xl">
+          <div className="flex flex-col gap-4 mb-xs">{mobileApps?.map(renderButton)}</div>
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            Мобильное приложение
+          </Text>
+        </div>
       </div>
       <div className="py-lg border-t border-main-divider">
         <HorizontalNavigationLink
@@ -74,7 +76,7 @@ const renderButton = ({ href = '/', text }: LinkProps, i: number) => {
   return (
     <Button
       key={String(i)}
-      className="w-full mb-lg"
+      className="w-full"
       text={text || label}
       version="secondary"
       href={href}

package/src/components/Footer/HorizontalNavigation.mobile.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TitleProps } from '../../model/HeadlineType';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { type FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
@@ -8,7 +9,7 @@ export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ title, links, className = '' }) => (
-    <div className={className}>
+    <div className={style('flex flex-col gap-4', className)}>
       <Text size="text-l" font="font-normal">
         {title}
       </Text>

package/src/components/Footer/SocialMedia.tsx

@@ -39,23 +39,23 @@ export const SocialMedia = JSX<SocialMediaProps>(
 
     const buttonClassName = style(
       'border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media',
-      showButtonText && hasText ? '' : ' basis-auto',
+      showButtonText && hasText ? '' : 'basis-auto',
       stretched ? 'flex-1 justify-center' : '',
     );
 
     return (
-      <div className="flex flex-col sm:flex-col-reverse gap-xs">
-        {children ? (
-          <Text size="text-s" font="font-light" color="text-secondary-text">
-            {children}
-          </Text>
-        ) : null}
-        <div className={style('flex gap-xs', className)}>
+      <div className={style('flex flex-col gap-xs', className)}>
+        <div className="flex gap-xs">
           {renderButtonsSection(buttons, {
             className: stretched ? 'w-full' : '',
             buttonClassName,
           })}
         </div>
+        {children ? (
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            {children}
+          </Text>
+        ) : null}
       </div>
     );
   },

package/src/components/Footer/iconsMap.ts

@@ -35,4 +35,8 @@ export const ICONS_MAP: Array<IconsMapItem> = [
     origins: ['rutube.ru'],
     iconMapped: { icon: 'RutubeIcon' },
   },
+  {
+    origins: ['dzen.ru'],
+    iconMapped: { icon: 'DzenIcon' },
+  },
 ];

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { type JSXBlock, type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { getBorderStyle } from '../../utils/getBorderStyle';
 import { style } from '../../utils/style';
 import { gapStyles } from './gapStyles';
 import { type HorizontalLayoutContent } from './HorizontalLayoutContent';
@@ -28,9 +29,7 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
       {renderChildren({
         ...rest,
         extraProps: {
-          className: isCardBorder
-            ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
-            : '',
+          className: getBorderStyle(isCardBorder),
         },
       })}
     </BlockWrapper>