@redneckz/wildless-cms-uni-blocks 0.6.50 → 0.7.2

package/src/ui-kit/BlockWrapper.tsx

@@ -1,16 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../EventBus/EventBus';
+import type { BlockVersion } from '../model/BlockVersion';
 import type { UniBlockProps } from '../model/JSXBlock';
 import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
+import { style } from '../utils/style';
 
 interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
   role?: string;
 }
 
+export const blockStyles: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+  gray: 'bg-main-divider text-primary-text',
+  transparent: 'bg-transparent text-primary-text',
+  '': '',
+};
+
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ className, block, tag = 'section', role, children }) => {
+  ({ className = '', version = 'primary', block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
     const ref = useBlockIntersectionObserver(block);
@@ -32,7 +42,12 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     );
 
     return isVisible ? (
-      <Tag className={className} role={role} {...(block?.anchor ? { id: block.anchor, ref } : {})}>
+      <Tag
+        className={style('group', blockStyles[version], className)}
+        {...(version ? { 'data-ver': version } : {})}
+        {...(block?.anchor ? { id: block.anchor, ref } : {})}
+        role={role}
+      >
         {children}
       </Tag>
     ) : null;

package/src/ui-kit/Button/ArrowButton.tsx

@@ -6,7 +6,7 @@ import type { ButtonProps } from './ButtonProps';
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
   <Button
     rounded
-    className={`group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
+    className={`group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
       disabled
         ? 'bg-secondary-light text-secondary-text'
         : 'bg-white text-primary-text hover:text-primary-main'
@@ -17,7 +17,7 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
     <Img
       className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border"
       image={{ icon: 'ArrowLeftIcon', iconVersion: 'black' }}
-      imageClassName="group-hover:text-primary-main"
+      imageClassName="group-hover/btn:text-primary-main"
       width="16"
       height="16"
       asSVG

package/src/ui-kit/Button/ButtonInner.tsx

@@ -34,7 +34,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
   const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
 
   return [
-    'group flex items-center justify-center',
+    'group/btn flex items-center justify-center',
     isWithText(props) ? withTextStyle : 'h-12 w-12',
     rounded ? 'rounded-full' : '',
   ].join(' ');

package/src/ui-kit/Button/buttonClassNameConstants.ts

@@ -7,6 +7,8 @@ export const buttonStyleMap: Record<ButtonVersion, string> = {
   white:
     'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
   link: '',
+  transparent: '',
+  '': '',
 };
 
 const DisabledStyle = 'bg-main-divider text-main-disabled';
@@ -16,13 +18,17 @@ export const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   secondary: DisabledStyle,
   white: DisabledStyle,
   link: '',
+  transparent: '',
+  '': '',
 };
 
 export const buttonStyle = 'text-center font-sans select-none';
 
 export const iconStyleMap: Record<ButtonVersion, string> = {
-  primary: 'group-hover:brightness-0 group-hover:invert',
-  secondary: 'group-hover:brightness-0 group-hover:invert',
-  white: 'group-hover:brightness-0 group-hover:invert',
+  primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+  secondary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+  white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
   link: '',
+  transparent: '',
+  '': '',
 };

package/src/ui-kit/Button/renderButtonsSection.tsx

@@ -0,0 +1,52 @@
+import type { Picture } from '../../model/Picture';
+import { style } from '../../utils/style';
+import { Img } from '../Img/Img';
+import { Button } from './Button';
+import type { ButtonWithIconProps } from './ButtonProps';
+
+interface ButtonsSectionOptions {
+  className?: string;
+  buttonClassName?: string;
+  isVertical?: boolean;
+}
+
+export const renderButtonsSection = (
+  buttons?: (ButtonWithIconProps | undefined)[],
+  { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
+) =>
+  buttons?.length && buttons.some((_) => _?.text) ? (
+    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className)}>
+      {buttons.map(renderButton(buttonClassName))}
+    </div>
+  ) : null;
+
+const renderButton =
+  (buttonClassName = '') =>
+  (button?: ButtonWithIconProps, index?: number) => {
+    const { text, icon, iconRight, version, ...rest } = button || {};
+    const iconVersion = version === 'secondary' ? 'color' : 'white';
+
+    return text ? (
+      <Button
+        key={index ? String(index) : ''}
+        className={buttonClassName}
+        appendLeft={renderButtonIcon({ ...icon, iconVersion })}
+        appendRight={renderButtonIcon({ ...iconRight, iconVersion })}
+        version={version}
+        text={text}
+        {...rest}
+      />
+    ) : null;
+  };
+
+const DEFAULT_ICON_W = 24;
+
+const renderButtonIcon = (icon: Picture) =>
+  icon?.icon || icon?.src ? (
+    <Img
+      image={icon}
+      width={String(icon?.size?.width || DEFAULT_ICON_W)}
+      height={String(DEFAULT_ICON_W)}
+      asSVG
+    />
+  ) : null;

package/src/ui-kit/Checkbox/Checkbox.tsx

@@ -14,9 +14,9 @@ const CHECK_PATHS = [
 export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio, onChange }) => {
   return (
     <div className={className}>
-      <label className="flex items-center relative cursor-pointer group">
+      <label className="flex items-center relative cursor-pointer group/box">
         <input
-          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover:border-primary-hover
+          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover/box:border-primary-hover
         ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
         ${checked ? 'border-black' : 'border-gray'}
         checked:border-primary-main m-0`}

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

@@ -4,6 +4,7 @@ import type { VNode } from '../../model/VNode';
 import type { FoldablePartProps } from './FoldablePartProps';
 
 export interface FoldableProps {
+  className?: string;
   unfoldedByDefault?: boolean;
   isFoldButtonOnTop?: boolean;
   renderFoldableSection: (props: FoldablePartProps) => VNode;
@@ -12,6 +13,7 @@ export interface FoldableProps {
 
 export const Foldable = JSX<FoldableProps>(
   ({
+    className = '',
     isFoldButtonOnTop = false,
     unfoldedByDefault = false,
     renderFoldableSection,
@@ -27,12 +29,12 @@ export const Foldable = JSX<FoldableProps>(
     const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
 
     return isFoldButtonOnTop ? (
-      <div>
+      <div className={className}>
         {buttonNode}
         {sectionNode}
       </div>
     ) : (
-      <div>
+      <div className={className}>
         {sectionNode}
         {buttonNode}
       </div>

package/src/ui-kit/Foldable/FoldablePartProps.ts

@@ -1,4 +1,4 @@
 export interface FoldablePartProps {
-  isUnfolded: boolean;
+  isUnfolded?: boolean;
   onToggle?: () => void;
 }

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

@@ -1,41 +1,39 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import { useLink } from '../../hooks/useLink';
+import { style } from '../../utils/style';
 import type { TopItemProps } from '../TopItem/TopItem';
 
 export type HeaderItemProps = TopItemProps;
 
-const TEXT_CLASSES = 'font-sans text-s';
-const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
+export const HeaderItem = JSX<TopItemProps>(
+  ({ className = '', active, dataItemName, children, ...rest }) => {
+    const link = useLink();
+    const { href, target, text, onClick } = link(rest);
 
-export const HeaderItem = JSX<HeaderItemProps>(
-  ({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
     return (
       <a
         className={`relative inline-block bg-transparent text-center no-underline ${className}`}
         href={href}
         target={target}
+        data-item-name={dataItemName}
         onClick={onClick}
       >
-        <span className={getTextClasses(bgColor, active)}>{text || children}</span>
-        {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
+        <span className={getTextStyle(active)}>{text || children}</span>
+        {active ? <div className={getBorderStyle(active)} /> : null}
       </a>
     );
   },
 );
 
-const getTextClasses = (bgColor: BgColorVersion, active = false) => {
-  let classes = 'text-white';
-  if (bgColor === 'bg-white') {
-    classes = active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main';
-  }
+const getTextStyle = (active = false) =>
+  style(
+    'font-sans text-s',
+    active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main',
+    'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover',
+  );
 
-  return `${classes} ${TEXT_CLASSES}`;
-};
-
-const getBorderClasses = (bgColor: BgColorVersion, active = false) => {
-  if (!active) {
-    return BORDER_CLASSES;
-  }
-
-  return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
-};
+const getBorderStyle = (active = false) =>
+  style(
+    'absolute left-0 -bottom-3 w-full h-0.5',
+    active ? 'bg-primary-main group-data-transparent:bg-transparent' : '',
+  );

package/src/ui-kit/HeaderItem/HeaderItem.tsx

@@ -1,13 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import { style } from '../../utils/style';
 import type { TopItemProps } from '../TopItem/TopItem';
 
-const TEXT_CLASSES = 'font-sans text-l-light';
-const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
-
 export const HeaderItem = JSX<TopItemProps>(
-  ({ className = '', active, bgColor = 'bg-white', dataItemName, children, ...rest }) => {
+  ({ className = '', active, dataItemName, children, ...rest }) => {
     const link = useLink();
     const { href, target, text, onClick } = link(rest);
 
@@ -19,26 +16,22 @@ export const HeaderItem = JSX<TopItemProps>(
         data-item-name={dataItemName}
         onClick={onClick}
       >
-        <span className={getTextClasses(bgColor, active)}>{text || children}</span>
-        {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
+        <span className={getTextStyle(active)}>{text || children}</span>
+        {active ? <div className={getBorderStyle(active)} /> : null}
       </a>
     );
   },
 );
 
-const getTextClasses = (bgColor: BgColorVersion, active = false) => {
-  let classes = 'text-white';
-  if (bgColor === 'bg-white') {
-    classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
-  }
-
-  return `${classes} ${TEXT_CLASSES}`;
-};
-
-const getBorderClasses = (bgColor: BgColorVersion, active = false) => {
-  if (!active) {
-    return BORDER_CLASSES;
-  }
+const getTextStyle = (active = false) =>
+  style(
+    'font-sans text-l-light',
+    active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main',
+    'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover',
+  );
 
-  return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
-};
+const getBorderStyle = (active = false) =>
+  style(
+    'absolute left-0 -bottom-3 w-full h-0.5',
+    active ? 'bg-primary-main group-data-transparent:bg-transparent' : '',
+  );

package/src/ui-kit/Heading/Heading.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { HeadingProps, HeadingType } from './HeadingProps';
 
-const HEADING_STYLE_MAP: Record<HeadingType, string> = {
+const styles: Record<HeadingType, string> = {
   h0: 'text-h0', // 56
   h1: 'text-h1', // 50
   h2: 'text-h2', // 40
@@ -11,10 +11,8 @@ const HEADING_STYLE_MAP: Record<HeadingType, string> = {
   h6: 'text-h6', // 20
 };
 
-export const Heading = JSX<HeadingProps>((props) => {
-  const { className = '', headingType = 'h3', title, as: Tag = 'h3' } = props;
-
-  return (
-    <Tag className={`font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`}>{title}</Tag>
-  );
-});
+export const Heading = JSX<HeadingProps>(
+  ({ className = '', headingType = 'h3', as: Tag = 'h3', title, children }) => (
+    <Tag className={`font-sans m-0 ${styles[headingType]} ${className}`}>{title || children}</Tag>
+  ),
+);

package/src/ui-kit/Icon/Icon.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
+import { style } from '../../utils/style';
 import type { IconProps } from './IconProps';
 
 const svgUseStyleMap: Record<IconVersion, string> = {
@@ -27,12 +28,12 @@ export const Icon = JSX<IconProps>(
       return (
         <Background className={className}>
           <svg
-            className={[
-              getSvgSize(className, imgProps.width),
+            className={style(
+              getSvgSize(imgProps.width),
               svgUseStyleMap[iconVersion],
+              iconVersion === 'white' ? 'invert' : '',
               imageClassName,
-              getInvertStyle(iconVersion),
-            ].join(' ')}
+            )}
             {...imgProps}
             aria-hidden="true"
           >
@@ -57,11 +58,7 @@ export const Icon = JSX<IconProps>(
   },
 );
 
-const getInvertStyle = (iconVersion: IconVersion): string =>
-  iconVersion === 'white' ? 'invert' : '';
-
-const getSvgSize = (className?: string, width?: string) =>
-  width ? `width: ${width}px ` : 'w-full h-full';
+const getSvgSize = (width?: string) => (width ? '' : 'w-full h-full');
 
 const Background = JSX<{ className?: string }>(({ className, children }) =>
   className ? <div className={className}>{children}</div> : children,

package/src/ui-kit/LinkButton/LinkButton.tsx

@@ -4,7 +4,7 @@ import { Img } from '../Img/Img';
 
 const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
   text-l-light bg-white text-primary-text flex w-[316px]
-  justify-between items-center group-hover:text-primary-main z-10`;
+  justify-between items-center group-hover/link:text-primary-main z-10`;
 
 const LINK_BORDER_CLASS_NAME =
   'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
@@ -20,14 +20,14 @@ export const LinkButton = JSX<LinkButtonProps>(
     }
 
     return (
-      <div className={`relative group cursor-pointer w-[328px] h-[82px] ${className}`}>
+      <div className={`relative group/link cursor-pointer w-[328px] h-[82px] ${className}`}>
         <a className={LINK_CLASS_NAME} role="link" href={href} target={target}>
           <div className="p-0.5">{text}</div>
           <div className="w-6 h-6">
             <Img
-              className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover:brightness-100"
+              className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100"
               image={{ icon: 'ArrowRightIcon', iconVersion: 'black' }}
-              imageClassName="group-hover:text-primary-main"
+              imageClassName="group-hover/link:text-primary-main"
               width="24"
               height="24"
               asSVG

package/src/ui-kit/List/List.fixture.tsx

@@ -15,23 +15,13 @@ export default {
     </div>
   ),
   'secondary dotted': (
-    <div className="bg-primary-main p-12">
-      <List items={items} version="secondary" />
+    <div className="group bg-primary-main p-12" data-ver="secondary">
+      <List items={items} />
     </div>
   ),
   'secondary w/o dots': (
-    <div className="bg-primary-main p-12">
-      <List items={items} version="secondary" isDotted={false} />
-    </div>
-  ),
-  'gray dotted': (
-    <div className="bg-white p-12">
-      <List items={items} version="gray" />
-    </div>
-  ),
-  'gray w/o dots': (
-    <div className="bg-white p-12">
-      <List items={items} version="gray" isDotted={false} />
+    <div className="bg-primary-main p-12" data-ver="secondary">
+      <List items={items} isDotted={false} />
     </div>
   ),
 };

package/src/ui-kit/List/List.tsx

@@ -1,12 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ListItem } from './ListItem';
-import type { ListItemSize, ListItemVersion, ListProps } from './ListProps';
-
-const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-  gray: 'text-secondary-text',
-};
+import type { ListItemSize, ListProps } from './ListProps';
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
   S: 'text-l-light',
@@ -20,39 +14,25 @@ const ITEM_INDENT_MAP = {
   L: 'ml-4',
 };
 
-export const List = JSX<ListProps>((props) => {
-  const {
-    className = '',
-    hasIndent,
-    isDotted,
-    itemClassName = '',
-    items,
-    listItemSize = 'M',
-    version = 'primary',
-  } = props;
-
-  if (!items?.length) {
-    return null;
-  }
-
-  return (
-    <section
-      className={`${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${
-        hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''
-      }`}
-      role="list"
-    >
-      {items.map((item, i) => (
-        <ListItem
-          key={String(i)}
-          className={`${itemClassName} mb-1.5`}
-          isDotted={isDotted}
-          version={version}
-          size={listItemSize}
-        >
-          {item}
-        </ListItem>
-      ))}
-    </section>
-  );
-});
+export const List = JSX<ListProps>(
+  ({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) =>
+    items?.length ? (
+      <section
+        className={`text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${
+          TEXT_SIZE_MAP[listItemSize]
+        } ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`}
+        role="list"
+      >
+        {items.map((item, i) => (
+          <ListItem
+            key={String(i)}
+            className={`${itemClassName} mb-1.5`}
+            isDotted={isDotted}
+            size={listItemSize}
+          >
+            {item}
+          </ListItem>
+        ))}
+      </section>
+    ) : null,
+);

package/src/ui-kit/List/ListItem.tsx

@@ -1,23 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ListItemSize, ListItemVersion } from './ListProps';
+import type { ListItemSize } from './ListProps';
 
 /**
  * @title Параметры элемента списка
  */
 export interface ListItemProps {
   className?: string;
-  version?: ListItemVersion;
   text?: string;
   isDotted?: boolean;
   size?: ListItemSize;
 }
 
-const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
-  primary: 'bg-primary-text',
-  secondary: 'bg-white',
-  gray: 'bg-secondary-text',
-};
-
 const DOT_SIZE_MAP = {
   L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
   M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
@@ -25,18 +18,16 @@ const DOT_SIZE_MAP = {
 };
 
 export const ListItem = JSX<ListItemProps>(
-  ({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
-    return (
-      <div className={`font-sans flex items-baseline ${className}`} role="listitem">
-        {isDotted ? (
-          <div>
-            <div
-              className={`rounded-full align-middle inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}`}
-            />
-          </div>
-        ) : null}
-        <span>{children}</span>
-      </div>
-    );
-  },
+  ({ className = '', isDotted = true, children, size = 'M' }) => (
+    <div className={`font-sans flex items-baseline ${className}`} role="listitem">
+      {isDotted ? (
+        <div>
+          <div
+            className={`rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}`}
+          />
+        </div>
+      ) : null}
+      <span>{children}</span>
+    </div>
+  ),
 );

package/src/ui-kit/List/ListProps.ts

@@ -6,12 +6,6 @@ import type { ListContent } from './ListContent';
  */
 export type ListItemSize = 'S' | 'M' | 'L';
 
-/**
- * @title Версия списка
- * @enumNames ["Основной", "Второстепенный", "Серый"]
- */
-export type ListItemVersion = 'primary' | 'secondary' | 'gray';
-
 /**
  * @title Содержимое списка
  */
@@ -25,5 +19,4 @@ export interface ListProps extends ListContent {
   /** @title Буллиты */
   isDotted?: boolean;
   listItemSize?: ListItemSize;
-  version?: ListItemVersion;
 }

package/src/ui-kit/Location/Location.tsx

@@ -140,7 +140,7 @@ const ForeignOffices = JSX<ForeignOfficeProps>(({ foreignOffices }) =>
   foreignOffices?.length ? (
     <div className="border-t border-main-divider mt-7 pt-7">
       <div className="mb-4">
-        <Text size="text-m-light" color="text-secondary-text">
+        <Text size="text-m" font="font-light" color="text-secondary-text">
           Представительства за рубежом:
         </Text>
       </div>

package/src/ui-kit/Paragraph/Paragraph.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ParagraphProps } from './ParagraphProps';
 
-export const Paragraph = JSX<ParagraphProps>(({ size, color, align, font, children }) => (
-  <p className={['font-sans', size, color, align, font].filter(Boolean).join(' ')}>{children}</p>
+export const Paragraph = JSX<ParagraphProps>(({ children, ...style }) => (
+  <p className={['font-sans', ...Object.values(style)].join(' ')}>{children}</p>
 ));