@redneckz/wildless-cms-uni-blocks 0.14.742 → 0.14.743

package/mobile/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -1,9 +1,8 @@
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
+import { FoldableCardContent } from './FoldableCardContent';
 import { getScheduleDescription } from './getScheduleDescription';
 import { getWorkScheduleWeek } from './getWorkScheduleWeek';
 import { type Branch } from './OfficesAtmsMapProps';
@@ -11,77 +10,31 @@ import { renderAlternativeDay, renderBusinessSchedule } from './renderBusinessSc
 import { renderCurrency } from './renderCurrency';
 import { renderCurrentDaySchedule } from './renderCurrentDaySchedule';
 import { renderDay } from './renderDay';
-import { renderFoldButton } from './renderFoldButton';
 import { renderWorkSchedule } from './renderWorkSchedule';
 
-export const renderOfficeCard = (
-  {
-    name,
-    address,
-    phone,
-    fax,
-    phoneBusiness,
-    phoneNatural,
-    phoneCallCentre,
-    phoneCurrencyControl,
-    workSchedule,
-    exchangeRate,
-  }: Branch,
-  i: number,
-) => {
-  if (!workSchedule) {
+export const renderOfficeCard = (branch: Branch, i: number) => {
+  if (!branch.workSchedule) {
     return null;
   }
 
-  const workScheduleWeek = getWorkScheduleWeek(workSchedule);
+  const workScheduleWeek = getWorkScheduleWeek(branch.workSchedule);
 
   return (
     <div key={String(i)} className="bg-white col-span-12 p-3xl sm:border-green sm:border">
       <div className="sm:flex sm:justify-between">
         <div>
-          <Text size="text-h4">{name}</Text>
-          {address ? (
+          <Text size="text-h4">{branch.name}</Text>
+          {branch.address ? (
             <div className="flex pb-xl pt-xs gap-2xs">
               <Icon name="GeolocationIcon" width="24" height="24" />
-              <Text size="text-l">{address}</Text>
+              <Text size="text-l">{branch.address}</Text>
             </div>
           ) : null}
         </div>
         {renderCurrentDaySchedule(workScheduleWeek)}
       </div>
-      <div className="hidden sm:block">
-        {renderCardContent({
-          phone,
-          fax,
-          phoneBusiness,
-          phoneNatural,
-          phoneCallCentre,
-          phoneCurrencyControl,
-          workSchedule,
-          exchangeRate,
-        })}
-      </div>
-      <Foldable
-        className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => {
-          return (
-            <FoldableSection isUnfolded={isUnfolded}>
-              {renderCardContent({
-                phone,
-                fax,
-                phoneBusiness,
-                phoneNatural,
-                phoneCallCentre,
-                phoneCurrencyControl,
-                workSchedule,
-                exchangeRate,
-              })}
-            </FoldableSection>
-          );
-        }}
-        //** TODO: remove styles with refactoring  DefaultFoldButton*/
-        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
-      />
+      <div className="hidden sm:block">{renderCardContent(branch)}</div>
+      <FoldableCardContent>{renderCardContent(branch)}</FoldableCardContent>
     </div>
   );
 };

package/mobile/src/components/OfficesAtmsMap/renderRemoteWorkplaceCard.tsx

@@ -1,11 +1,9 @@
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
+import { FoldableCardContent } from './FoldableCardContent';
 import { type RemoteWorkplace } from './OfficesAtmsMapProps';
-import { renderFoldButton } from './renderFoldButton';
 
 export const renderRemoteWorkplaceCard = (
   { address, workScheduleDescription }: RemoteWorkplace,
@@ -28,28 +26,13 @@ export const renderRemoteWorkplaceCard = (
           ) : null}
         </div>
       </div>
-      <div className="hidden sm:block">
-        {renderCardContent({
-          workScheduleDescription,
-        })}
-      </div>
-      <Foldable
-        className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => (
-          <FoldableSection isUnfolded={isUnfolded}>
-            {renderCardContent({
-              workScheduleDescription,
-            })}
-          </FoldableSection>
-        )}
-        //** TODO: remove styles with refactoring  DefaultFoldButton*/
-        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
-      />
+      <div className="hidden sm:block">{renderCardContent(workScheduleDescription)}</div>
+      <FoldableCardContent>{renderCardContent(workScheduleDescription)}</FoldableCardContent>
     </div>
   );
 };
 
-const renderCardContent = ({ workScheduleDescription }: RemoteWorkplace) => {
+const renderCardContent = (workScheduleDescription?: string) => {
   return (
     <div>
       <CardRow className="flex">

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

@@ -1,3 +1,4 @@
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useMobileMode } from '../../hooks/useMobileMode';
 import { type Picture } from '../../model/Picture';
@@ -37,6 +38,29 @@ export const RollupItem = UniBlock<RollupItemProps>(
   }) => {
     const isMobile = useMobileMode();
 
+    const [isUnfolded, { toggle }] = useBool(isExpanded);
+
+    const foldableSection = (
+      <FoldableSection
+        className={style('gap-lg', getFoldableStyles(isMobile))}
+        isUnfolded={isUnfolded}
+      >
+        {renderChildren({
+          ...rest,
+          extraProps: { className: 'w-full', padding: 'p-0' },
+        })}
+      </FoldableSection>
+    );
+    const foldButton = renderFoldButton({
+      foldButtonVersion,
+      label,
+      labelIcon,
+      labelIconBgVersion,
+      isMobile,
+      isUnfolded,
+      onToggle: toggle,
+    });
+
     return (
       <BlockWrapper
         className={style(
@@ -49,32 +73,10 @@ export const RollupItem = UniBlock<RollupItemProps>(
         role={role}
         {...rest}
       >
-        <Foldable
-          isFoldButtonOnTop={isFoldButtonOnTop}
-          unfoldedByDefault={isExpanded}
-          renderFoldableSection={({ isUnfolded }) => (
-            <FoldableSection
-              className={style('gap-lg', getFoldableStyles(isMobile))}
-              isUnfolded={isUnfolded}
-            >
-              {renderChildren({
-                ...rest,
-                extraProps: { className: 'w-full', padding: 'p-0' },
-              })}
-            </FoldableSection>
-          )}
-          renderFoldButton={({ isUnfolded, onToggle }) =>
-            renderFoldButton({
-              foldButtonVersion,
-              label,
-              labelIcon,
-              labelIconBgVersion,
-              isUnfolded,
-              onToggle,
-              isMobile,
-            })
-          }
-        />
+        <Foldable>
+          {isFoldButtonOnTop ? foldButton : foldableSection}
+          {isFoldButtonOnTop ? foldableSection : foldButton}
+        </Foldable>
       </BlockWrapper>
     );
   },
@@ -98,8 +100,8 @@ const renderFoldButton = ({
   labelIcon,
   labelIconBgVersion,
   isUnfolded,
-  onToggle,
   isMobile = false,
+  onToggle,
 }: FoldButtonProps) => {
   const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
   const icon = getIconName(isUnfolded, isMobile);

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
@@ -40,6 +41,8 @@ export const TariffsTable = JSX<TariffsTableProps>(
     const [visibleRows, hiddenRows] =
       hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
 
+    const [isUnfolded, { toggle }] = useBool(false);
+
     return (
       <BlockWrapper
         className={style('relative space-y-6xl @4xl:space-y-xl', className)}
@@ -55,15 +58,13 @@ export const TariffsTable = JSX<TariffsTableProps>(
         />
         <div className="space-y-m overflow-hidden">
           {hiddenRowsNum > 0 ? (
-            <Foldable
-              renderFoldableSection={({ isUnfolded }) => (
-                <TariffsTableWrapper controls={controls}>
-                  {visibleRows}
-                  <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
-                </TariffsTableWrapper>
-              )}
-              renderFoldButton={renderDefaultFoldButton}
-            />
+            <Foldable>
+              <TariffsTableWrapper controls={controls}>
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+              </TariffsTableWrapper>
+              {renderDefaultFoldButton({ isUnfolded, onToggle: toggle })}
+            </Foldable>
           ) : (
             <TariffsTableWrapper controls={controls}>{rows}</TariffsTableWrapper>
           )}

package/mobile/src/ui-kit/BaseFiltration/FilteredBlocks.tsx

@@ -3,8 +3,8 @@ import { type BlockDef } from '../../model/ContentPageDef';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { NotFound } from '../NotFound/NotFound';
 import { type BaseFiltrationContent } from './BaseFiltrationContent';
+import { GridBlocks } from './GridBlocks';
 import { renderCarouselBlocks } from './renderCarouselBlocks';
-import { renderGridBlocks } from './renderGridBlocks';
 
 interface FilteredBlocksProps extends BaseFiltrationContent, UniBlockProps {
   blocksToRender?: BlockDef[];
@@ -17,7 +17,7 @@ export const FilteredBlocks = JSX<FilteredBlocksProps>(
         return (
           <div>
             {renderNotFound(notFound, blocksToRender)}
-            {renderGridBlocks({ ...blocksSection, ...rest, blocksToRender })}
+            <GridBlocks {...blocksSection} {...rest} blocksToRender={blocksToRender} />
           </div>
         );
       case 'carousel':

package/mobile/src/ui-kit/BaseFiltration/{renderGridBlocks.tsx → GridBlocks.tsx}

@@ -1,3 +1,5 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
 import { AdTile } from '../../components/AdTile/AdTile';
 import { type BlockDef } from '../../model/ContentPageDef';
@@ -7,49 +9,44 @@ import { style } from '../../utils/style';
 import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { Foldable } from '../Foldable/Foldable';
 import { FoldableSection } from '../Foldable/FoldableSection';
-import { type IconName } from '../Icon/IconProps';
 import { type GridSection } from './BaseFiltrationContent';
 
-const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
-
 const resultsGridStyle = 'space-y-px lg:space-y-0 lg:grid lg:grid-cols-12 gap-2xs';
 
-export const renderGridBlocks = ({
-  topItemsCount = 0,
-  label = '',
-  block,
-  blocksToRender = [],
-  ...rest
-}: GridSection & UniBlockProps & { blocksToRender?: BlockDef[] }) => {
-  const [visibleBlocks, hiddenBlocks] =
-    topItemsCount > 0
-      ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
-      : [blocksToRender, []];
+interface GridBlocksProps extends GridSection, UniBlockProps {
+  blocksToRender?: BlockDef[];
+}
 
-  return (
-    <div className={style('space-y-2xs', { hidden: !blocksToRender.length })}>
-      <div className={style(resultsGridStyle)}>
-        {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
-        {isOdd(visibleBlocks.length) ? <AdTile className="col-span-6" {...rest} /> : null}
-      </div>
-      <Foldable
-        renderFoldableSection={({ isUnfolded }) => (
+export const GridBlocks = JSX<GridBlocksProps>(
+  ({ topItemsCount = 0, label = '', block, blocksToRender = [], ...rest }) => {
+    const [visibleBlocks, hiddenBlocks] =
+      topItemsCount > 0
+        ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
+        : [blocksToRender, []];
+
+    const [isUnfolded, { toggle }] = useBool(false);
+
+    return (
+      <div className={style('space-y-2xs', { hidden: !blocksToRender.length })}>
+        <div className={style(resultsGridStyle)}>
+          {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
+          {isOdd(visibleBlocks.length) ? <AdTile className="col-span-6" {...rest} /> : null}
+        </div>
+        <Foldable>
           <FoldableSection className={style(resultsGridStyle)} isUnfolded={isUnfolded}>
             {renderBlocksList(hiddenBlocks, { ...rest.options, parent: block })}
             {isOdd(hiddenBlocks.length) ? <AdTile className="col-span-6" {...rest} /> : null}
           </FoldableSection>
-        )}
-        renderFoldButton={({ isUnfolded, onToggle }) => (
           <DefaultFoldButton
             className={style({ hidden: topItemsCount < 1 })}
+            dataTheme={rest.options?.page?.colorPalette}
             disabled={!hiddenBlocks?.length}
             label={label}
-            icon={ICONS[Number(isUnfolded)]}
-            dataTheme={rest.options?.page?.colorPalette}
-            onClick={onToggle}
+            icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+            onClick={toggle}
           />
-        )}
-      />
-    </div>
-  );
-};
+        </Foldable>
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/Button/IconButton.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import type { IconName } from '../../icons/IconName';
+import { type AspectsDef } from '../../model/AspectsProps';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { getAspectsAttributes } from '../../utils/dataAttributes';
+import { style } from '../../utils/style';
+
+export interface IconButtonProps {
+  className?: string;
+  name: IconName;
+  text?: string;
+  data?: AspectsDef[];
+  onClick?: () => void;
+}
+
+export const IconButton = JSX<IconButtonProps>(({ className, name, text, data, onClick }) => {
+  const aspectsAttrs = useMemo(() => getAspectsAttributes(data), [data]);
+
+  return (
+    <button
+      className={style(
+        'text-primary-main flex justify-between items-center border-none px-m',
+        text ? 'pt-lg' : 'py-2xs',
+        className,
+      )}
+      type="button"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...aspectsAttrs}
+      onClick={onClick}
+    >
+      {text ? <div className="pr-m">{text}</div> : null}
+      <Icon className="text-primary-text" name={name} width="16" height="16" />
+    </button>
+  );
+});

package/mobile/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -50,15 +50,10 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
   ),
 );
 
-export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {
-  const labels = ['Развернуть', 'Скрыть'];
-  const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
-
-  return (
-    <DefaultFoldButton
-      icon={icons[Number(isUnfolded)]}
-      label={labels[Number(isUnfolded)]}
-      onClick={onToggle}
-    />
-  );
-};
+export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => (
+  <DefaultFoldButton
+    icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+    label={isUnfolded ? 'Скрыть' : 'Развернуть'}
+    onClick={onToggle}
+  />
+);

package/mobile/src/ui-kit/Foldable/Foldable.tsx

@@ -1,43 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { type VNode } from '../../model/VNode';
-import { type FoldablePartProps } from './FoldablePartProps';
+import { style } from '../../utils/style';
 
 export interface FoldableProps {
   className?: string;
-  unfoldedByDefault?: boolean;
-  isFoldButtonOnTop?: boolean;
-  renderFoldableSection: (props: FoldablePartProps) => VNode;
-  renderFoldButton?: ((props: FoldablePartProps) => VNode) | null;
 }
 
-export const Foldable = JSX<FoldableProps>(
-  ({
-    className = '',
-    isFoldButtonOnTop = false,
-    unfoldedByDefault = false,
-    renderFoldableSection,
-    renderFoldButton,
-  }) => {
-    const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
-
-    const onToggle = useCallback(() => {
-      setIsUnfolded((_) => !_);
-    }, []);
-
-    const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
-    const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
-
-    return isFoldButtonOnTop ? (
-      <div className={className} role="group">
-        {buttonNode}
-        {sectionNode}
-      </div>
-    ) : (
-      <div className={className} role="group">
-        {sectionNode}
-        {buttonNode}
-      </div>
-    );
-  },
-);
+// TODO Не особо полезно, в итоге
+export const Foldable = JSX<FoldableProps>(({ className, children }) => (
+  <div className={style(className)} role="group">
+    {children}
+  </div>
+));

package/mobile/src/utils/capitalize.ts

@@ -0,0 +1,2 @@
+export const capitalize = (text?: string): string =>
+  text ? `${text.charAt(0).toUpperCase()}${text.slice(1)}` : '';

package/mobile/src/utils/dataAttributes.ts

@@ -1,14 +1,8 @@
 import { type AspectsDef } from '../model/AspectsProps';
 
 export const getAspectsAttributes = (data?: AspectsDef[]) => {
-  if (!Array.isArray(data) || !data.length) {
-    return {};
-  }
-
   try {
-    return {
-      'data-aspects': JSON.stringify(data),
-    };
+    return Array.isArray(data) && data.length ? { 'data-aspects': JSON.stringify(data) } : {};
   } catch (_) {
     return {};
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.742",
+  "version": "0.14.743",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationLeadForm/GroupedConsents.tsx

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { type FormFieldRegisterer, type VNode } from '../../services/retail/external/types';
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type FormFieldRegisterer } from '../../services/retail/external/types';
 import { InputsConsentsMap } from '../../services/retail/inputs';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';
 import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
+import { IconButton } from '../../ui-kit/Button/IconButton';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { getField } from '../../ui-kit/FormField/getField';
 import { validatorObj } from '../../ui-kit/FormField/getObjectValidator';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
 import { withValidator } from '../../validation/withValidator';
 
@@ -25,12 +25,15 @@ const CONSENT_REQUIRED = 'Отметьте все обязательные со
 export const GroupedConsents = JSX<GroupedConsentsProps>(({ inputs = [], field, key }) => {
   const isChecked = inputs.every((_) => Boolean(field(_.name as keyof LeadFormState).value));
 
-  const handleGeneralToggle = (value: boolean) => {
-    for (const item of inputs) {
-      const itemField = field(item.name as keyof LeadFormState);
-      itemField.onChange?.(value);
-    }
-  };
+  const handleGeneralToggle = useCallback(
+    (value: boolean) => {
+      for (const item of inputs) {
+        const itemField = field(item.name as keyof LeadFormState);
+        itemField.onChange?.(value);
+      }
+    },
+    [inputs],
+  );
 
   const hasValidationErrors = useMemo(
     () =>
@@ -47,48 +50,27 @@ export const GroupedConsents = JSX<GroupedConsentsProps>(({ inputs = [], field,
     [inputs],
   );
 
+  const [isUnfolded, { toggle }] = useBool(true);
+
   return (
     <div className="w-fit">
-      <Foldable
-        isFoldButtonOnTop
-        unfoldedByDefault
-        renderFoldableSection={({ isUnfolded }) => (
-          <FoldableSection isUnfolded={isUnfolded} className="flex flex-col pl-2xl">
-            {
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-              inputs.map(getField<FieldRetailDef>(field, {}, { ...InputsConsentsMap }))
-            }
-          </FoldableSection>
-        )}
-        renderFoldButton={renderGeneralCheckbox(
+      <Foldable>
+        <div className="flex items-start">
           <div>
             <Checkbox
+              key={key}
+              text={CONSENT_ALL_DOCS_TEXT}
               value={isChecked}
               onChange={handleGeneralToggle}
-              text={CONSENT_ALL_DOCS_TEXT}
-              key={key}
             />
             {renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')}
-          </div>,
-        )}
-      />
+          </div>
+          <IconButton name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'} onClick={toggle} />
+        </div>
+        <FoldableSection className="flex flex-col pl-2xl" isUnfolded={isUnfolded}>
+          {inputs.map(getField<FieldRetailDef>(field, {}, InputsConsentsMap))}
+        </FoldableSection>
+      </Foldable>
     </div>
   );
 });
-
-const renderGeneralCheckbox =
-  (generalCheckBox: VNode) =>
-  (foldableData: FoldablePartProps): VNode =>
-    (
-      <div className="flex items-start">
-        {generalCheckBox}
-        <button onClick={foldableData.onToggle} className="px-m py-2xs" type="button">
-          <Icon
-            className="text-primary-text"
-            name={foldableData.isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-            width="16"
-            height="16"
-          />
-        </button>
-      </div>
-    );