@redneckz/wildless-cms-uni-blocks 0.14.532 → 0.14.534

package/mobile/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -19,30 +19,28 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
     safeBoxCases = [],
     selectedBoxSize,
     onSelectedBoxSize,
-  }) => {
-    return (
-      <div className="flex flex-col @xl:flex-row gap-m order-1">
-        <div className="flex-1 min-w-0">
-          <WrapperSelect
-            data={caseVolumes}
-            fieldLabel="volume"
-            selected={selectedCaseVolume}
-            setSelected={onSelectedCaseVolume}
-            label="Размер"
-            placeholder="Выберите размер"
-          />
-        </div>
-        <div className="flex-1 min-w-0">
-          <WrapperSelect
-            data={safeBoxCases}
-            fieldLabel="safeBoxCasesSize"
-            selected={selectedBoxSize}
-            setSelected={onSelectedBoxSize}
-            label="Параметры ячейки, мм (ВхШхД)"
-            placeholder="Выберите параметр ячейки"
-          />
-        </div>
+  }) => (
+    <div className="flex flex-col @xl:flex-row gap-m order-1">
+      <div className="flex-1 min-w-0">
+        <WrapperSelect
+          data={caseVolumes}
+          fieldLabel="volume"
+          selected={selectedCaseVolume}
+          setSelected={onSelectedCaseVolume}
+          label="Размер"
+          placeholder="Выберите размер"
+        />
       </div>
-    );
-  },
+      <div className="flex-1 min-w-0">
+        <WrapperSelect
+          data={safeBoxCases}
+          fieldLabel="safeBoxCasesSize"
+          selected={selectedBoxSize}
+          setSelected={onSelectedBoxSize}
+          label="Параметры ячейки, мм (ВхШхД)"
+          placeholder="Выберите параметр ячейки"
+        />
+      </div>
+    </div>
+  ),
 );

package/mobile/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -31,43 +31,36 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     caseVolumes,
     onChange,
     onClick,
-  }) => {
-    return (
-      <div className="contents @xl:block flex-1 space-y-xl">
-        <RegionsAndBranches
-          regions={regions}
-          selectedRegion={selectedRegion}
-          onSelectedRegion={(value) => onChange({ selectedRegion: value })}
-          branches={branches}
-          selectedBranch={selectedBranch}
-          onSelectedBranch={onSelectedBranch(onChange)}
-        />
-        <RentalPeriod days={days} setDays={(value) => onChange({ days: value })} />
-        <SafeBoxCases
-          caseVolumes={caseVolumes}
-          selectedCaseVolume={selectedCaseVolume}
-          onSelectedCaseVolume={onSelectedCaseVolume(onChange)}
-          safeBoxCases={safeBoxCases}
-          selectedBoxSize={selectedBoxSize}
-          onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
-        />
-        <div className="order-4">
-          <Text size="text-l" font="font-light" color="text-secondary-text">
-            Тип договора
-          </Text>
-        </div>
-        <div className="contents @md:flex justify-between items-center gap-m">
-          <RadioButtons />
-          <LinkButton
-            text="Офисы на карте"
-            version="primary"
-            onClick={onClick}
-            className="order-6"
-          />
-        </div>
+  }) => (
+    <div className="contents @xl:block flex-1 space-y-xl">
+      <RegionsAndBranches
+        regions={regions}
+        selectedRegion={selectedRegion}
+        onSelectedRegion={(value) => onChange({ selectedRegion: value })}
+        branches={branches}
+        selectedBranch={selectedBranch}
+        onSelectedBranch={onSelectedBranch(onChange)}
+      />
+      <RentalPeriod days={days} setDays={(value) => onChange({ days: value })} />
+      <SafeBoxCases
+        caseVolumes={caseVolumes}
+        selectedCaseVolume={selectedCaseVolume}
+        onSelectedCaseVolume={onSelectedCaseVolume(onChange)}
+        safeBoxCases={safeBoxCases}
+        selectedBoxSize={selectedBoxSize}
+        onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
+      />
+      <div className="order-4">
+        <Text size="text-l" font="font-light" color="text-secondary-text">
+          Тип договора
+        </Text>
       </div>
-    );
-  },
+      <div className="contents @md:flex justify-between items-center gap-m">
+        <RadioButtons />
+        <LinkButton text="Офисы на карте" version="primary" onClick={onClick} className="order-6" />
+      </div>
+    </div>
+  ),
 );
 
 const onSelectedBranch = (onChange: HandleFormStateChange) => (value: string) => {

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -36,16 +36,14 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
   );
 });
 
-const renderTotal = (label: string, total: string | number) => {
-  return (
-    <div className="flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start">
-      <Text size="text-l" font="font-light" color="text-secondary-text">
-        {label}
-      </Text>
-      <span className="text-l @xl:text-h3 text-primary-text">{total}</span>
-    </div>
-  );
-};
+const renderTotal = (label: string, total: string | number) => (
+  <div className="flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start">
+    <Text size="text-l" font="font-light" color="text-secondary-text">
+      {label}
+    </Text>
+    <span className="text-l @xl:text-h3 text-primary-text">{total}</span>
+  </div>
+);
 
 const calculatePrice = (days: number, tariffs: Tariff[]) => {
   const tariffType = getTariffType(days);

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -2,7 +2,6 @@ import { type BlockVersion } from '../../model/BlockVersion';
 import { type BulletsProps } from '../../model/Bullets';
 import { type DescriptionProps, type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type IconProps } from '../../model/Picture';
-import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
@@ -12,7 +11,6 @@ import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
  * @title Шаг
  */
 export type StepProps = DescriptionProps &
-  ImageContent &
   LabelProps &
   RichTextProps &
   IconProps &

package/mobile/src/components/StepsBlock/renderStep.tsx

@@ -1,5 +1,4 @@
 import { type BlockVersion } from '../../model/BlockVersion';
-import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type VNode } from '../../model/VNode';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { RichText } from '../../ui-kit/RichText/RichText';
@@ -43,7 +42,7 @@ export const renderStep =
         {button?.text ? (
           <LinkButton
             className="box-border py-s w-full max-w-60 mt-auto"
-            version={version as LinkButtonVersion}
+            version={version}
             {...button}
           >
             {button?.text}

package/mobile/src/components/StepsBlock/renderStepMobile.tsx

@@ -1,6 +1,5 @@
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
-import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
@@ -17,14 +16,11 @@ const styleMap = STEPS_BLOCK_STYLE;
 export const renderStepMobile =
   (stepsSize: boolean, version: BlockVersion, stepVersion: BlockVersion) =>
   (step: StepProps, i: number) => {
-    const { button, image } = step;
-
-    const styleStepMobile = button?.text && image?.src;
+    const { button } = step;
 
     return (
       <div key={String(i)} className="contents">
-        <div className={style('flex items-center relative', image?.src ? 'flex-col' : 'flex-row')}>
-          {image?.src ? renderText(step) : null}
+        <div className="flex items-center relative flex-row">
           <div className="overflow-hidden flex flex-shrink-0 items-center">
             {renderIconArea(stepsSize, stepVersion)(step, i)}
           </div>
@@ -33,11 +29,11 @@ export const renderStepMobile =
               'min-h-6xl': stepsSize,
             })}
           >
-            {image?.src ? null : renderText(step)}
-            {styleStepMobile ? (
+            {renderText(step)}
+            {button?.text ? (
               <LinkButton
                 className="box-border py-s w-full max-w-60 mt-lg"
-                version={version as LinkButtonVersion}
+                version={version}
                 {...button}
               >
                 {button?.text}
@@ -55,15 +51,10 @@ const renderIconArea =
     const isImg = Boolean(step?.icon?.src);
     const iconAreaSize = getIconAreaSize(stepsSize, isImg);
     const containerVersion = isImg ? stepVersion === 'transparent' : stepVersion;
-    const isImgSrc = step.image?.src;
 
     return (
       <BlockWrapper
-        className={style(
-          { 'w-32': Boolean(isImgSrc) },
-          'z-10 mr-s flex justify-center content-center rounded-md',
-          !isImgSrc && iconAreaSize,
-        )}
+        className={style('z-10 mr-s flex justify-center content-center rounded-md', iconAreaSize)}
         defaultPadding=""
         version={containerVersion as BlockVersion}
       >
@@ -75,14 +66,8 @@ const renderIconArea =
   };
 
 const renderText = (step: StepProps) => {
-  const visibleStyle = Boolean(step.button?.text && step.image?.src);
-
   return (
-    <div
-      className={style({
-        'mb-lg w-full': visibleStyle,
-      })}
-    >
+    <div>
       {step?.label ? (
         <Paragraph size="text-l" align="text-left">
           {step.label}
@@ -112,21 +97,15 @@ const renderIcon = ({
   iconVersion: IconVersion;
   i: number;
   stepVersion: BlockVersion;
-}) => {
-  if (isIcon(step?.icon)) {
-    return (
-      <Img
-        image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
-        imageClassName="max-w-full max-h-full"
-        width="24"
-        height="24"
-      />
-    );
-  } else if (isIcon(step.image)) {
-    return <Img image={{ ...step.image, size: { width: 120, height: 120 } }} />;
-  }
-
-  return (
+}) =>
+  isIcon(step?.icon) ? (
+    <Img
+      image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
+      imageClassName="max-w-full max-h-full"
+      width="24"
+      height="24"
+    />
+  ) : (
     <span
       className={style(
         'text-h4',
@@ -136,4 +115,3 @@ const renderIcon = ({
       {i + 1}
     </span>
   );
-};

package/mobile/src/components/StickyBottomMenu/StickyBottomMenuItem.tsx

@@ -11,23 +11,21 @@ interface StickyBottomMenuItemProps {
 }
 
 export const StickyBottomMenuItem = JSX<StickyBottomMenuItemProps>(
-  ({ isActive, item, onClick }) => {
-    return (
-      <div
-        className={style(
-          isActive ? 'text-primary-main' : 'text-primary-text',
-          `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`,
-        )}
-        title={item?.title || ''}
-        onClick={onClick}
-      >
-        <Icon
-          className="w-6 h-6"
-          name={item?.icon?.icon}
-          iconVersion={isActive ? 'color' : 'black'}
-        />
-        {item?.title || ''}
-      </div>
-    );
-  },
+  ({ isActive, item, onClick }) => (
+    <div
+      className={style(
+        isActive ? 'text-primary-main' : 'text-primary-text',
+        `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`,
+      )}
+      title={item?.title || ''}
+      onClick={onClick}
+    >
+      <Icon
+        className="w-6 h-6"
+        name={item?.icon?.icon}
+        iconVersion={isActive ? 'color' : 'black'}
+      />
+      {item?.title || ''}
+    </div>
+  ),
 );

package/mobile/src/components/TabsLayout/TabsLayout.tsx

@@ -91,7 +91,7 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
       >
         {renderTabsLayout({
           className: style({
-            'pb-1': Boolean(block?.slots) && tabsType === 'default',
+            'pb-1': block?.slots && tabsType === 'default',
             'sticky top-1 z-20': isSticky && !isEveryLink,
           }),
           items: getItems(tabs, tabsCounted),

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

@@ -26,25 +26,23 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(
     tableInner,
     openTableInnerIdx,
     setOpenTableInnerIdx,
-  }) => {
-    return (
-      <div className="w-80 flex-grow flex flex-col gap-m @4xl:gap-lg" role="cell">
-        {cells?.length
-          ? cells.map((_, i) => (
-              <RenderCellInner
-                key={String(i)}
-                cell={_}
-                fieldIdx={i}
-                rowIdx={rowIdx}
-                cellIdx={cellIdx}
-                setTableInner={setTableInner}
-                tableInner={tableInner}
-                openTableInnerIdx={openTableInnerIdx}
-                setOpenTableInnerIdx={setOpenTableInnerIdx}
-              />
-            ))
-          : null}
-      </div>
-    );
-  },
+  }) => (
+    <div className="w-80 flex-grow flex flex-col gap-m @4xl:gap-lg" role="cell">
+      {cells?.length
+        ? cells.map((_, i) => (
+            <RenderCellInner
+              key={String(i)}
+              cell={_}
+              fieldIdx={i}
+              rowIdx={rowIdx}
+              cellIdx={cellIdx}
+              setTableInner={setTableInner}
+              tableInner={tableInner}
+              openTableInnerIdx={openTableInnerIdx}
+              setOpenTableInnerIdx={setOpenTableInnerIdx}
+            />
+          ))
+        : null}
+    </div>
+  ),
 );

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

@@ -27,7 +27,7 @@ export const renderGridBlocks = ({
       : [blocksToRender, []];
 
   return (
-    <div className={style('space-y-2xs', blocksToRender.length ? '' : 'hidden')}>
+    <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}
@@ -41,7 +41,7 @@ export const renderGridBlocks = ({
         )}
         renderFoldButton={({ isUnfolded, onToggle }) => (
           <DefaultFoldButton
-            className={style(topItemsCount < 1 ? 'hidden' : '')}
+            className={style({ hidden: topItemsCount < 1 })}
             disabled={!hiddenBlocks?.length}
             label={label}
             icon={ICONS[Number(isUnfolded)]}

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

@@ -2,11 +2,13 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { renderBackwardButton } from '../../components/ProductBlock/renderBackwardButton';
+import { useMobileMode } from '../../hooks/useMobileMode';
 import { useRouter } from '../../hooks/useRouter';
 import { type Align } from '../../model/Align';
 import { type VNode } from '../../model/VNode';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
+import { renderImageContainer } from './renderImageContainer';
 
 interface BaseTileProps extends UniBlockProps {
   title?: VNode;
@@ -20,12 +22,6 @@ interface BaseTileProps extends UniBlockProps {
   backwardButton?: boolean;
 }
 
-const imageAlignmentMap: Record<Align, string> = {
-  start: '@xl:self-start',
-  center: '@xl:self-center',
-  end: '@xl:self-end',
-};
-
 export const BaseTile = JSX<BaseTileProps>(
   ({
     className,
@@ -33,63 +29,66 @@ export const BaseTile = JSX<BaseTileProps>(
     defaultPadding,
     padding = '',
     title,
-    insetTitle,
     buttons,
     leftImage,
     rightImage,
     imageAlign,
+    insetTitle,
     isImageAlwaysOnRight = false,
     isImageSecondary = false,
     backwardButton,
     children,
     ...rest
   }) => {
+    const isMobile = useMobileMode();
     const router = useRouter();
-    const handleClick = useCallback(() => {
-      router.back();
-    }, []);
+    const handleClick = useCallback(() => router.back(), []);
     const backwardButtonText = rest.options?.page?.common?.backwardButton;
+    const isBackBtn = backwardButton && !isMobile;
 
     return (
-      <div className={getStyle(padding, defaultPadding, className)}>
-        {backwardButton
-          ? renderBackwardButton({ version, handleClick, text: backwardButtonText })
-          : null}
-        {getTitle(title)}
+      <div
+        className={style(
+          'relative flex flex-col gap-3xl overflow-hidden',
+          padding || defaultPadding,
+          className,
+        )}
+      >
+        {isBackBtn && renderBackwardButton({ version, handleClick, text: backwardButtonText })}
+        {title ? <div className="relative h-full">{title}</div> : null}
         <div
-          className={style(
-            'grow relative flex flex-col @xl:flex-row gap-3xl w-full',
-            leftImage ? 'self-start @xl:w-auto' : '',
-          )}
+          className={style('grow relative flex flex-col @xl:flex-row gap-3xl w-full', {
+            'self-start @xl:w-auto': leftImage,
+          })}
         >
           {renderImageContainer(leftImage, { imageAlign, className: 'mx-auto' })}
           <div
             className={style(
-              'grid gap-3xl',
-              rightImage ? '@xl:grid-cols-2 auto-cols-fr' : '',
-              leftImage ? '' : 'grow',
+              'grid gap-3xl items-center md:items-stretch',
+              {
+                '@xl:grid-cols-2 auto-cols-fr': rightImage,
+                grow: !leftImage,
+              },
               'h-full', //? fix issue https://github.com/redneckz/temp_wcms/issues/1254
               'auto-rows-[max-content_1fr]', //? fix issue https://github.com/redneckz/temp_wcms/issues/1324
-              'items-center md:items-stretch',
             )}
           >
             <div className="grow space-y-lg min-w-fit">
               {insetTitle}
               {children}
             </div>
-            {renderUnitBlock(
+            {renderUnitContainer(
               renderChildren({ ...rest, extraProps: { className: '@container-normal' } }),
             )}
             {renderImageContainer(rightImage, {
-              className: style(
-                '@xl:justify-self-end @xl:col-start-2',
-                buttons ? rowSpanStyle(isImageAlwaysOnRight) : '',
-                positionStyle(isImageAlwaysOnRight),
-                imageSecondaryStyle(isImageSecondary),
-              ),
+              className: style('@xl:justify-self-end @xl:col-start-2', {
+                [imageAlwaysOnRightContainerStyle(isImageAlwaysOnRight)]: buttons,
+                'col-start-2 self-center': isImageAlwaysOnRight,
+                'hidden @xl:block': isImageSecondary,
+              }),
               imageAlign,
             })}
-            {renderButtons(buttons)}
+            {buttons ? <div className="self-end">{buttons}</div> : null}
           </div>
         </div>
       </div>
@@ -97,40 +96,10 @@ export const BaseTile = JSX<BaseTileProps>(
   },
 );
 
-const getTitle = (title?: VNode) => (title ? <div className="relative h-full">{title}</div> : null);
-
-const getStyle = (padding = '', defaultPadding = '', className = '') =>
-  style('relative flex flex-col gap-3xl overflow-hidden', padding || defaultPadding, className);
-
-const rowSpanStyle = (isImageAlwaysOnRight: boolean) =>
-  isImageAlwaysOnRight ? 'row-span-2' : '@xl:row-span-2';
+const imageAlwaysOnRightContainerStyle = (isImage: boolean) =>
+  style(isImage ? 'row-span-2' : '@xl:row-span-2');
 
-const positionStyle = (isImageAlwaysOnRight: boolean) =>
-  isImageAlwaysOnRight ? 'col-start-2 self-center' : '';
-
-const renderButtons = (buttons: VNode) =>
-  buttons ? <div className="self-end">{buttons}</div> : null;
-
-const renderUnitBlock = (unitBlock: VNode | undefined) =>
-  unitBlock && unitBlock?.length ? (
-    <div className="flex items-start justify-end">{unitBlock}</div>
+const renderUnitContainer = (childrenBlocks: VNode[] | null) =>
+  childrenBlocks?.length ? (
+    <div className="flex items-start justify-end">{childrenBlocks}</div>
   ) : null;
-
-const renderImageContainer = (
-  image: VNode | undefined,
-  { className, imageAlign }: { className?: string; imageAlign?: Align },
-) =>
-  image ? (
-    <div
-      className={style(
-        'shrink-1/2 justify-self-center',
-        imageAlign && imageAlignmentMap[imageAlign],
-        className,
-      )}
-    >
-      {image}
-    </div>
-  ) : null;
-
-const imageSecondaryStyle = (isImageSecondary: boolean) =>
-  isImageSecondary ? 'hidden @xl:block' : '';

package/mobile/src/ui-kit/BaseTile/renderImageContainer.tsx

@@ -0,0 +1,25 @@
+import { type Align } from '../../model/Align';
+import { type VNode } from '../../model/VNode';
+import { style } from '../../utils/style';
+
+const imageAlignmentMap: Record<Align, string> = {
+  start: '@xl:self-start',
+  center: '@xl:self-center',
+  end: '@xl:self-end',
+};
+
+export const renderImageContainer = (
+  image: VNode | undefined,
+  { className, imageAlign }: { className?: string; imageAlign?: Align },
+) =>
+  image ? (
+    <div
+      className={style(
+        'shrink-1/2 justify-self-center',
+        imageAlign && imageAlignmentMap[imageAlign],
+        className,
+      )}
+    >
+      {image}
+    </div>
+  ) : null;

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

@@ -38,7 +38,9 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       <Tag
         className={style(
           '@container font-sans',
-          isGroup ? 'group' : '',
+          {
+            group: isGroup,
+          },
           blockStyles[version],
           padding || defaultPadding,
           className,

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

@@ -6,10 +6,6 @@ import { type ControlStateProps } from '../ControlStateProps';
 import type { PreventableEvent } from '../PreventableEvent';
 import { useButton } from './useButton';
 
-const activeButtonStyleMap = 'text-white bg-primary-active';
-
-const disabledButtonStyle = 'bg-main-gray text-main-disabled cursor-not-allowed';
-
 const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
   secondary:
@@ -57,12 +53,14 @@ export const Button = JSX<ButtonProps>(({ children, ...props }) => {
       className={style(
         'font-sans px-9 py-4',
         'flex justify-center items-center gap-xs',
-        active ? activeButtonStyleMap : '',
-        disabled ? disabledButtonStyle : '',
+        {
+          'text-white bg-primary-active': active,
+          'bg-main-gray text-main-disabled cursor-not-allowed': disabled,
+          'rounded-md': rounded,
+        },
         !active && !disabled
           ? style(buttonStyleMap[version], secondaryButtonStyleMap[version])
           : '',
-        rounded ? 'rounded-md' : '',
         className,
       )}
       type={type}

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

@@ -82,4 +82,4 @@ const getCursorStyle = (disabled = false) => (disabled ? 'cursor-not-allowed' :
 
 const role = (isRadio = false) => (isRadio ? 'radio' : 'checkbox');
 
-const checkboxStyle = (value = false) => style('rounded border', value ? 'bg-primary-main' : '');
+const checkboxStyle = (value = false) => style('rounded border', { 'bg-primary-main': value });