@redneckz/wildless-cms-uni-blocks 0.14.10 → 0.14.12

package/mobile/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
@@ -54,7 +54,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
             <Img className="flex justify-center align-center mb-xl" image={image} />
           ) : null
         }
-        buttons={renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' })}
+        buttons={renderButtonsSection([button], { buttonClassName: 'w-full self-end' })}
       >
         {colors?.length ? (
           <div className="flex text-secondary-text mb-m">

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -39,7 +39,7 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         title={
           title ? <Heading headingType="h4" as="h3" className="mb-m z-10" title={title} /> : null
         }
-        backImage={image?.src ? <Img image={image} /> : null}
+        rightImage={image?.src ? <Img image={image} /> : null}
       >
         <div className="flex justify-between mb-m">
           {description ? (

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -16,4 +16,6 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   AlignProps & {
     /** @title Соц сети */
     socialMedia?: ButtonContent[];
+    /** @title Изображение всегда справа */
+    isImageAlwaysOnRight?: boolean;
   };

package/mobile/src/components/Depository/Depository.tsx

@@ -15,11 +15,12 @@ interface DepositoryProps extends DepositoryContent, UniBlockProps {}
 export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
   ({ className, ...rest }) => {
     const [currentPage, setCurrentPage] = useState(0);
-    const [itemCount] = useState(DEFAULT_ITEMS_COUNT);
+    const [itemCount, setItemCount] = useState(DEFAULT_ITEMS_COUNT);
 
     const { totalPages = 0, items } = useDepository(itemCount, currentPage);
 
-    const handleChangePage = useCallback((page) => setCurrentPage(page - 1), []);
+    const handleChangePage = useCallback((page: number) => setCurrentPage(page - 1), []);
+    const handleItemCountChange = useCallback((count: number) => setItemCount(count), []);
 
     return (
       <BlockWrapper className={style(className, 'container p-4xl')} {...rest}>
@@ -35,6 +36,8 @@ export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
             currentPage={currentPage + 1}
             onPageChange={handleChangePage}
             totalPages={totalPages + 1}
+            itemCount={itemCount}
+            onItemCountChange={handleItemCountChange}
           />
         </div>
       </BlockWrapper>

package/mobile/src/components/Depository/DepositoryItem.tsx

@@ -1,15 +1,15 @@
 import { useLink } from '../../hooks/useLink';
-import { convertTimestampToDate } from '../../utils/convertTimestampToDate';
+import { formatDate } from '../../utils/formatDate';
 import { DepositoryDataItem } from './useDepository';
 
-export const DepositoryItem = ({ title, timestamp = 0, publicId }: DepositoryDataItem) => {
+export const DepositoryItem = ({ title, timestamp = '', publicId }: DepositoryDataItem) => {
   const link = useLink();
   const { href } = link({ href: `/api/v1/depository/${publicId}/file` });
 
   return (
     <div className="grid grid-cols-12 py-lg border-gray border-opacity-50 border-b" key={publicId}>
       <div className="col-span-2 text-m">
-        <span>{convertTimestampToDate(timestamp)}</span>
+        <span>{formatDate(timestamp)}</span>
       </div>
       <div className="col-span-10 text-h6 hover:text-primary-active">
         <a href={href} download aria-label="Скачать">

package/mobile/src/components/Depository/useDepository.ts

@@ -3,7 +3,7 @@ import { fetchJSONUnsafe } from '../../utils/fetchJSON';
 
 export interface DepositoryDataItem {
   publicId?: number;
-  timestamp?: number;
+  timestamp?: string;
   title?: number;
 }
 

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -44,7 +44,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
   }
 
   return (
-    <BlockWrapper className={className} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-4xl" {...rest}>
       <div className="container text-m font-light space-y-4xl">
         {columns?.length ? (
           <div>

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

@@ -37,7 +37,7 @@
     "imageOptions": {
       "directionRight": true,
       "imageAlign": "end",
-      "isBackground": true
+      "isSecondary": true
     }
   }
 }

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -24,7 +24,7 @@ export const ProductTile = JSX<ProductTileProps>(
         padding={padding}
         headlineVersion={headlineVersion}
         isTabularBenefits={isTabularBenefits}
-        imageOptions={{ isBackground: true, ...imageOptions }}
+        imageOptions={{ isImageSecondary: true, ...imageOptions }}
         {...rest}
       >
         {additionalDescription ? (

package/mobile/src/ui-kit/BaseFiltration/BaseFiltrationContent.ts

@@ -1,5 +1,5 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { DescriptionProps, TitleProps } from '../../model/HeadlineType';
+import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Заголовок
@@ -99,9 +99,7 @@ export type ResetButton = {
  */
 export type NotFound = TitleProps & DescriptionProps;
 
-export interface BaseFiltrationInnerContent {
-  /** @title Название сворачивающейся кнопки */
-  label?: string;
+export type BaseFiltrationInnerContent = LabelProps & {
   /**
    * @title Количество отображаемых предметов
    * @minimum 1
@@ -109,4 +107,4 @@ export interface BaseFiltrationInnerContent {
   topItemsCount?: number;
   resetButton?: ResetButton;
   notFound?: NotFound;
-}
+};

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
+import type { HeadlineVersion } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { VNode } from '../../model/VNode';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -9,9 +10,8 @@ import { Img } from '../Img/Img';
 import { List } from '../List/List';
 import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
-import type { BaseProductTileContent } from './BaseProductTileContent';
-import type { HeadlineVersion } from '../../model/HeadlineType';
 import type { TextAlign } from '../Text/TextProps';
+import type { BaseProductTileContent } from './BaseProductTileContent';
 
 interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {}
 
@@ -36,10 +36,10 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     buttons,
     image,
     imageOptions: {
-      imageAlign = 'end',
+      imageAlign = 'center',
       directionRight = true,
-      isBackground,
       isImageAlwaysOnRight,
+      isImageSecondary = false,
     } = {},
     children,
   }) => {
@@ -55,7 +55,8 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         padding={padding}
         defaultPadding={defaultPadding}
         {...(isFullWidthTitle ? { insetTitle: headline } : { title: headline })}
-        {...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight))}
+        {...leftOrRightImage(img, directionRight)}
+        isImageSecondary={isImageSecondary}
         imageAlign={imageAlign}
         isImageAlwaysOnRight={isImageAlwaysOnRight}
         buttons={renderButtonsSection(buttons)}

package/mobile/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,12 +1,12 @@
 import type { Align } from '../../model/Align';
 import type { BulletsProps } from '../../model/Bullets';
-import type { HeadlineProps } from '../../model/HeadlineType';
+import type { HeadlineProps, LabelProps } from '../../model/HeadlineType';
+import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
+import type { ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 import type { ImageContent } from '../Img/ImgProps';
 import type { ListContent } from '../List/ListContent';
 import type { RichTextProps } from '../RichText/RichTextProps';
 import type { TagsContent } from '../Tags/TagsContent';
-import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
-import type { ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 
 /** @title Доп. настройки картинки */
 export interface TileImageOptions {
@@ -14,8 +14,8 @@ export interface TileImageOptions {
   directionRight?: boolean;
   /** @title Выравнивание изображения */
   imageAlign?: Align;
-  /** @title Фоновое изображение */
-  isBackground?: boolean;
+  /** @title Второстепенное изображение */
+  isImageSecondary?: boolean;
   /** @title Изображение всегда справа */
   isImageAlwaysOnRight?: boolean;
 }
@@ -27,9 +27,8 @@ export type BaseProductTileContent = HeadlineProps &
   BulletsProps &
   TagsContent &
   ButtonsSectionContent &
-  ImageContent & {
-    /** @title Лейбл (моб.) */
-    label?: string;
+  ImageContent &
+  LabelProps & {
     imageOptions?: TileImageOptions;
     /** @title Заголовок во всю ширину */
     isFullWidthTitle?: boolean;

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

@@ -10,9 +10,9 @@ interface BaseTileProps extends UniBlockProps {
   leftImage?: VNode;
   rightImage?: VNode;
   imageAlign?: Align;
-  backImage?: VNode;
   buttons?: VNode;
   isImageAlwaysOnRight?: boolean;
+  isImageSecondary?: boolean;
 }
 
 const imageAlignmentMap: Record<Align, string> = {
@@ -32,8 +32,8 @@ export const BaseTile = JSX<BaseTileProps>(
     leftImage,
     rightImage,
     imageAlign,
-    backImage,
     isImageAlwaysOnRight = false,
+    isImageSecondary,
     children,
   }) => (
     <div
@@ -46,35 +46,41 @@ export const BaseTile = JSX<BaseTileProps>(
       {title ? <div className="relative">{title}</div> : null}
       <div
         className={style(
-          'grow relative flex justify-around @lg:justify-between items-stretch gap-3xl',
-          isImageAlwaysOnRight ? 'flex-row' : 'flex-col-reverse @lg:flex-row',
+          'grow relative flex flex-col-reverse @xl:flex-row justify-around @xl:justify-between items-stretch gap-3xl',
         )}
       >
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(
-            'flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]',
+            'grid gap-3xl',
+            rightImage ? '@xl:grid-cols-2' : '',
             leftImage ? '' : 'grow',
           )}
         >
-          {insetTitle}
-          <div className="grow">{children}</div>
-          {backImage ? (
-            <div className="justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4">
-              {backImage}
-            </div>
-          ) : null}
-          {buttons}
+          <div className="grow grid gap-3xl row-span-1">
+            {insetTitle}
+            {children}
+          </div>
+          {renderImageContainer(rightImage, {
+            className: style(
+              '@xl:justify-self-end row-start-1 @xl:row-end-3 @xl:col-start-2',
+              positionStyle(isImageAlwaysOnRight),
+              isImageSecondary ? 'hidden @xl:block' : '',
+            ),
+            imageAlign,
+          })}
+          <div className="self-end">{buttons}</div>
         </div>
-        {renderImageContainer(rightImage, {
-          className: isImageAlwaysOnRight ? '' : '@xl:order-1',
-          imageAlign,
-        })}
       </div>
     </div>
   ),
 );
 
+const positionStyle = (isImageAlwaysOnRight: boolean) =>
+  isImageAlwaysOnRight
+    ? 'ml-xl justify-self-end row-start-1 row-end-3 col-start-2 self-center'
+    : '';
+
 const renderImageContainer = (
   image: VNode | undefined,
   { className, imageAlign }: { className?: string; imageAlign?: Align },
@@ -82,7 +88,7 @@ const renderImageContainer = (
   image ? (
     <div
       className={style(
-        'md:flex-shrink-0 self-center',
+        'shrink-1/2 justify-self-center',
         imageAlign && imageAlignmentMap[imageAlign],
         className,
       )}

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonProps } from './ButtonProps';
@@ -6,11 +7,13 @@ import type { ButtonProps } from './ButtonProps';
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
   <Button
     rounded
-    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 ${
+    className={style(
+      'group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black',
       disabled
         ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'
-    } ${className || ''}`}
+        : 'bg-white text-primary-text hover:text-primary-main',
+      className || '',
+    )}
     disabled={disabled}
     {...rest}
   >

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

@@ -36,7 +36,7 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
 
   return opened ? (
     <div className="container fixed left-0 right-0 bottom-0 z-50">
-      <div className="bg-white m-xl p-xl rounded-md flex sm:items-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+      <div className="bg-white m-xl p-xl rounded-md flex sm:items-center shadow-main-black">
         <div className="sm:flex-1">
           <Paragraph size="text-s" font="font-light" color="text-primary-text">
             АО «Россельхозбанк» использует

package/mobile/src/ui-kit/InputRange/renderRangeWithTicks.tsx

@@ -1,3 +1,4 @@
+import { style } from '../../utils/style';
 import { parseDecimal } from './parseDecimal';
 
 interface RangeWithTicksProps {
@@ -32,9 +33,10 @@ export function renderRangeWithTicks({
           {list.map((_, i) => (
             <div
               key={String(i)}
-              className={`w-2 h-2 rounded-full ${
-                rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main'
-              }`}
+              className={style(
+                'w-2 h-2 rounded-full',
+                rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main',
+              )}
             />
           ))}
         </div>

package/mobile/src/ui-kit/Pagination/PageSizeSelector.tsx

@@ -0,0 +1,27 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Select } from '../Select/Select';
+
+const DEFAULT_OPTIONS = [{ key: '10' }, { key: '50' }, { key: '100' }];
+
+interface PageSizeSelectorProps {
+  itemCount: number;
+  onItemCountChange: (count: number) => void;
+}
+
+export const PageSizeSelector = ({ itemCount, onItemCountChange }: PageSizeSelectorProps) => {
+  const handleItemCountChange = useCallback(
+    ({ key }: { key: string }) => onItemCountChange(Number(key)),
+    [],
+  );
+
+  return (
+    <div className="flex items-center gap-s">
+      <span>Показать по</span>
+      <Select
+        onChange={handleItemCountChange}
+        value={{ key: String(itemCount) }}
+        options={DEFAULT_OPTIONS}
+      />
+    </div>
+  );
+};

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

@@ -1,87 +1,33 @@
-import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { Icon } from '../Icon/Icon';
-import { renderPages } from './renderPages';
-
-export const paginationBlockStyle =
-  'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';
+import { PageSizeSelector } from './PageSizeSelector';
+import { PaginationContainer } from './PaginationContainer';
 
 export interface PaginationProps {
   currentPage: number;
   onPageChange: (page: number) => void;
   totalPages: number;
+  itemCount?: number;
+  onItemCountChange?: (count: number) => void;
 }
 
-const ICON_SIZE = { width: '24', height: '24' };
-
-export const Pagination = ({ currentPage, onPageChange, totalPages }: PaginationProps) => {
-  const handlePrevPage = useCallback(() => {
-    if (currentPage > 1) {
-      onPageChange(currentPage - 1);
-    }
-  }, [currentPage]);
-
-  const handleNextPage = useCallback(() => {
-    if (currentPage < totalPages - 1) {
-      onPageChange(currentPage + 1);
-    }
-  }, [currentPage, totalPages]);
-
-  const handleFirstPage = useCallback(() => onPageChange(1), []);
-  const handleLastPage = useCallback(() => onPageChange(totalPages), [totalPages]);
-
-  const pages = useMemo(
-    () =>
-      new Array(totalPages).fill({
-        currentPage,
-        onPageChange,
-        totalPages,
-      }),
-    [totalPages, currentPage],
-  );
-
-  return (
-    <div className="mt-3xl flex items-center select-none" role="navigation" aria-label="Пагинация">
-      <div className="flex gap-m items-center">
-        <div onClick={handlePrevPage}>
-          <Icon
-            name="ArrowLeftIcon"
-            iconVersion="black"
-            imageClassName={getIconStyle(currentPage === 1)}
-            {...ICON_SIZE}
-          />
-        </div>
-        <div className="flex gap-xs">
-          {currentPage > 1 ? (
-            <div onClick={handleFirstPage} className={paginationBlockStyle} aria-label="Страница 1">
-              1
-            </div>
-          ) : null}
-          {currentPage > 4 ? <div className="py-m px-s">...</div> : null}
-          {pages.map(renderPages)}
-          {currentPage < totalPages - 3 ? <div className="py-m px-s">...</div> : null}
-          {currentPage < totalPages ? (
-            <div
-              onClick={handleLastPage}
-              className={paginationBlockStyle}
-              aria-label={`Страница ${totalPages}}`}
-            >
-              {totalPages}
-            </div>
-          ) : null}
-        </div>
-        <div onClick={handleNextPage}>
-          <Icon
-            className="rotate-180"
-            name="ArrowLeftIcon"
-            iconVersion="black"
-            imageClassName={getIconStyle(currentPage === totalPages)}
-            {...ICON_SIZE}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const getIconStyle = (condition: boolean) =>
-  condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';
+export const Pagination = ({
+  currentPage,
+  onPageChange,
+  totalPages,
+  itemCount,
+  onItemCountChange,
+}: PaginationProps) => (
+  <div
+    className="mt-3xl flex justify-between items-center select-none"
+    role="navigation"
+    aria-label="Пагинация"
+  >
+    <PaginationContainer
+      currentPage={currentPage}
+      onPageChange={onPageChange}
+      totalPages={totalPages}
+    />
+    {itemCount && onItemCountChange ? (
+      <PageSizeSelector itemCount={itemCount} onItemCountChange={onItemCountChange} />
+    ) : null}
+  </div>
+);

package/mobile/src/ui-kit/Pagination/PaginationContainer.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { Icon } from '../Icon/Icon';
+import { paginationBlockStyle } from './paginationBlockStyle';
+import { renderPages } from './renderPages';
+
+const ICON_SIZE = { width: '24', height: '24' };
+
+export interface PaginationContainerProps {
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  totalPages: number;
+}
+
+export const PaginationContainer = ({
+  currentPage,
+  onPageChange,
+  totalPages,
+}: PaginationContainerProps) => {
+  const pages = useMemo(
+    () =>
+      new Array(totalPages).fill({
+        currentPage,
+        onPageChange,
+        totalPages,
+      }),
+    [totalPages, currentPage],
+  );
+
+  const handlePrevPage = useCallback(() => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  }, [currentPage]);
+
+  const handleNextPage = useCallback(() => {
+    if (currentPage < totalPages - 1) {
+      onPageChange(currentPage + 1);
+    }
+  }, [currentPage, totalPages]);
+
+  const handleFirstPage = useCallback(() => onPageChange(1), []);
+  const handleLastPage = useCallback(() => onPageChange(totalPages), [totalPages]);
+
+  return (
+    <div className="flex gap-m items-center">
+      <div onClick={handlePrevPage}>
+        <Icon
+          name="ArrowLeftIcon"
+          iconVersion="black"
+          imageClassName={getIconStyle(currentPage === 1)}
+          {...ICON_SIZE}
+        />
+      </div>
+      <div className="flex gap-xs">
+        {currentPage > 1 ? (
+          <div onClick={handleFirstPage} className={paginationBlockStyle} aria-label="Страница 1">
+            1
+          </div>
+        ) : null}
+        {currentPage > 4 ? <div className="py-m px-s">...</div> : null}
+        {pages.map(renderPages)}
+        {currentPage < totalPages - 3 ? <div className="py-m px-s">...</div> : null}
+        {currentPage < totalPages ? (
+          <div
+            onClick={handleLastPage}
+            className={paginationBlockStyle}
+            aria-label={`Страница ${totalPages}}`}
+          >
+            {totalPages}
+          </div>
+        ) : null}
+      </div>
+      <div onClick={handleNextPage}>
+        <Icon
+          className="rotate-180"
+          name="ArrowLeftIcon"
+          iconVersion="black"
+          imageClassName={getIconStyle(currentPage === totalPages)}
+          {...ICON_SIZE}
+        />
+      </div>
+    </div>
+  );
+};
+
+const getIconStyle = (condition: boolean) =>
+  condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';

package/mobile/src/ui-kit/Pagination/paginationBlockStyle.ts

@@ -0,0 +1,2 @@
+export const paginationBlockStyle =
+  'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';

package/mobile/src/ui-kit/Pagination/renderPages.tsx

@@ -1,7 +1,8 @@
-import { paginationBlockStyle, PaginationProps } from './Pagination';
+import { paginationBlockStyle } from './paginationBlockStyle';
+import type { PaginationContainerProps } from './PaginationContainer';
 import { shouldRenderPage } from './shouldRenderPage';
 
-export const renderPages = (pagesParams: PaginationProps, index: number) => {
+export const renderPages = (pagesParams: PaginationContainerProps, index: number) => {
   const { currentPage, onPageChange, totalPages } = pagesParams;
   const page = index + 1;
   if (page === currentPage) {

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

@@ -2,12 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { LabelProps } from '../../model/HeadlineType';
-import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
-import type { Option } from './Option';
+import { Text } from '../Text/Text';
 import { formatOption } from './formatOption';
+import type { Option } from './Option';
 import { useSelectPopup } from './useSelectPopup';
 
 export type SelectProps = LabelProps & {

package/mobile/src/ui-kit/Select/SelectPopup.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
-import type { Option } from './Option';
 import { filterOptions } from './filterOptions';
 import { formatOption } from './formatOption';
+import type { Option } from './Option';
 
 export interface SelectPopupProps {
   popupRef?: { current: HTMLDivElement | null };
@@ -16,7 +16,7 @@ export interface SelectPopupProps {
 export const SelectPopup = JSX<SelectPopupProps>(({ popupRef, options, value, query, onChange }) =>
   options?.length ? (
     <div
-      className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]"
+      className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md s1hadow-black"
       role="listbox"
       ref={popupRef}
     >