@pushwoosh/smart-components-kit 1.3.14 → 1.3.16

package/MediaStorage/MediaStorage.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Button, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, useToast } from '@pushwoosh/dumb-components';
+import { Button, Checkbox, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, useToast } from '@pushwoosh/dumb-components';
 import { FlexContainer, useAsync } from '@pushwoosh/kit-helpers';
 import { CheckIcon, EditIcon, TrashIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { CreateCropDrawer } from './CreateCropDrawer';
-import { useDeleteMediaFile } from './hooks';
+import { useDeleteMediaFile, useDeleteMediaFiles } from './hooks';
 import { formatBytes, getCropCaption, getThumbUrl } from './mediaFile.utils';
-import { useLang } from './polyglot';
-import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, UsageLine, WarningBadge } from './styled';
+import { Lang, useLang } from './polyglot';
+import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, Tile, TileActions, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styled';
 const UPLOAD_PATH = '/api/media/upload';
 const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
 const isAllowedImage = file => {
@@ -42,6 +42,7 @@ export const MediaStorage = ({
     openToast
   } = useToast();
   const deleteMediaFile = useDeleteMediaFile(application);
+  const deleteMediaFiles = useDeleteMediaFiles(application);
   const uploadInputRef = useRef(null);
   // `uploadFiles` resolves asynchronously; read the latest page from the ref so
   // the post-upload decision isn't made on a value captured at click time.
@@ -58,6 +59,9 @@ export const MediaStorage = ({
   const [isDragOver, setIsDragOver] = useState(false);
   const [createCropFor, setCreateCropFor] = useState(null);
   const [pendingDelete, setPendingDelete] = useState(null);
+  const [selectedUuids, setSelectedUuids] = useState([]);
+  const [isBulkDeleteOpen, setIsBulkDeleteOpen] = useState(false);
+  const [isBulkDeleting, setIsBulkDeleting] = useState(false);
   // Format filtering belongs to the query, not the response: `total` and the page count come
   // from the filtered set, so a client-side filter would paginate over files it then hides.
   const listAsync = useAsync(async () => {
@@ -102,6 +106,7 @@ export const MediaStorage = ({
     const originals = listAsync.value?.files;
     if (!originals) return undefined;
     setCropsByUuid({});
+    setSelectedUuids([]);
     let cancelled = false;
     originals.forEach(file => {
       void (async () => {
@@ -209,6 +214,31 @@ export const MediaStorage = ({
     }
     setReloadToken(token => token + 1);
   };
+  const handleBulkDeleteConfirmed = async () => {
+    const uuids = selectedUuids;
+    setIsBulkDeleteOpen(false);
+    if (uuids.length === 0 || isBulkDeleting) return;
+    // The batch outlives the page it started on, so the step-back decision uses
+    // the page and count captured here and is skipped if the page moved since.
+    const pageAtStart = pageRef.current;
+    const countAtStart = filesCountRef.current;
+    setIsBulkDeleting(true);
+    try {
+      const deleted = await deleteMediaFiles(uuids);
+      if (deleted === 0) return;
+      setSelectedUuids([]);
+      if (deleted >= countAtStart && pageAtStart > 0 && pageRef.current === pageAtStart) {
+        onPageChange(pageAtStart - 1);
+      }
+      setReloadToken(token => token + 1);
+    } finally {
+      setIsBulkDeleting(false);
+    }
+  };
+  const toggleSelected = uuid => {
+    setSelectedUuids(prev => prev.includes(uuid) ? prev.filter(item => item !== uuid) : [...prev, uuid]);
+  };
+  const isAllSelected = files.length > 0 && selectedUuids.length === files.length;
   const totalPages = Math.ceil(total / perPage);
   const showPagination = !loading && files.length > 0 && totalPages > 1;
   return _jsxs(_Fragment, {
@@ -249,14 +279,55 @@ export const MediaStorage = ({
       children: lang({
         message: 'SMART.MEDIA_STORAGE.EMPTY'
       })
+    }), !loading && files.length > 0 && _jsxs(SelectionBar, {
+      children: [_jsx(Checkbox, {
+        label: lang({
+          message: 'SMART.MEDIA_STORAGE.SELECT_ALL'
+        }),
+        isChecked: isAllSelected,
+        isDisabled: isBulkDeleting,
+        isIndeterminate: selectedUuids.length > 0 && !isAllSelected,
+        onChange: () => setSelectedUuids(isAllSelected ? [] : files.map(file => file.uuid))
+      }), selectedUuids.length > 0 && _jsxs(_Fragment, {
+        children: [_jsx(SelectionCount, {
+          children: _jsx(Lang, {
+            message: "SMART.MEDIA_STORAGE.SELECTED_COUNT",
+            count: selectedUuids.length
+          })
+        }), _jsx(Button, {
+          color: "danger",
+          size: "compact",
+          view: "ghost",
+          icon: _jsx(TrashIcon, {
+            size: "small",
+            view: "lined"
+          }),
+          isLoading: isBulkDeleting,
+          isDisabled: isBulkDeleting,
+          onClick: () => setIsBulkDeleteOpen(true),
+          children: _jsx(Lang, {
+            message: "SMART.MEDIA_STORAGE.BULK_DELETE_BUTTON"
+          })
+        })]
+      })]
     }), !loading && files.length > 0 && _jsx(Grid, {
       children: files.map(file => {
         const crops = cropsByUuid[file.uuid] ?? [];
         const warning = fileWarning?.(file);
         return _jsxs(Tile, {
+          "$selected": selectedUuids.includes(file.uuid),
           children: [_jsx(TileImage, {
             src: getThumbUrl(file),
             alt: file.filename
+          }), _jsx(TileCheckbox, {
+            title: lang({
+              message: 'SMART.MEDIA_STORAGE.SELECT_FILE_HINT'
+            }),
+            children: _jsx(Checkbox, {
+              isChecked: selectedUuids.includes(file.uuid),
+              isDisabled: isBulkDeleting,
+              onChange: () => toggleSelected(file.uuid)
+            })
           }), crops.length > 0 && _jsx(CropBadge, {
             children: lang({
               message: 'SMART.MEDIA_STORAGE.CROPS_BADGE',
@@ -315,6 +386,7 @@ export const MediaStorage = ({
               "aria-label": lang({
                 message: 'SMART.MEDIA_STORAGE.DELETE_HINT'
               }),
+              isDisabled: isBulkDeleting,
               onClick: () => setPendingDelete(file)
             })]
           })]
@@ -332,7 +404,7 @@ export const MediaStorage = ({
           view: "ghost",
           color: "secondary",
           size: "field",
-          isDisabled: page <= 0,
+          isDisabled: page <= 0 || isBulkDeleting,
           onClick: () => onPageChange(page - 1),
           children: lang({
             message: 'SMART.MEDIA_STORAGE.PREV_BUTTON'
@@ -343,7 +415,7 @@ export const MediaStorage = ({
           view: "ghost",
           color: "secondary",
           size: "field",
-          isDisabled: page + 1 >= totalPages,
+          isDisabled: page + 1 >= totalPages || isBulkDeleting,
           onClick: () => onPageChange(page + 1),
           children: lang({
             message: 'SMART.MEDIA_STORAGE.NEXT_BUTTON'
@@ -378,6 +450,21 @@ export const MediaStorage = ({
       confirmButtonColor: "danger",
       onAccept: () => void handleDeleteConfirmed(),
       onCancel: () => setPendingDelete(null)
+    }), _jsx(ModalConfirm, {
+      isOpen: isBulkDeleteOpen,
+      title: lang({
+        message: 'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.TITLE',
+        count: selectedUuids.length
+      }),
+      description: lang({
+        message: 'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.DESCRIPTION'
+      }),
+      confirmButtonText: lang({
+        message: 'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.BUTTON'
+      }),
+      confirmButtonColor: "danger",
+      onAccept: () => void handleBulkDeleteConfirmed(),
+      onCancel: () => setIsBulkDeleteOpen(false)
     })]
   });
 };

package/MediaStorage/hooks.d.ts

@@ -1,7 +1,4 @@
-/**
- * Returns a function that deletes a media file (original or crop) and shows the
- * success/error toast. Resolves to `true` on success so the caller can run its
- * own post-delete routing (refetch, state update, pagination), `false` on
- * failure. Both `MediaStorage` and `CreateCropDrawer` share this.
- */
+/** Deletes one media file with its own toast; resolves to `true` on success. */
 export declare function useDeleteMediaFile(application: string): (uuid: string) => Promise<boolean>;
+/** Deletes media files in a bounded-concurrency batch; resolves to the number deleted. */
+export declare function useDeleteMediaFiles(application: string): (uuids: string[]) => Promise<number>;

package/MediaStorage/hooks.js

@@ -2,12 +2,7 @@ import { useToast } from '@pushwoosh/dumb-components';
 import { usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { useLang } from './polyglot';
-/**
- * Returns a function that deletes a media file (original or crop) and shows the
- * success/error toast. Resolves to `true` on success so the caller can run its
- * own post-delete routing (refetch, state update, pagination), `false` on
- * failure. Both `MediaStorage` and `CreateCropDrawer` share this.
- */
+/** Deletes one media file with its own toast; resolves to `true` on success. */
 export function useDeleteMediaFile(application) {
   const {
     rpcGateway
@@ -39,4 +34,54 @@ export function useDeleteMediaFile(application) {
       return false;
     }
   });
+}
+const DELETE_CONCURRENCY = 5;
+/** Deletes media files in a bounded-concurrency batch; resolves to the number deleted. */
+export function useDeleteMediaFiles(application) {
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const {
+    openToast
+  } = useToast();
+  const lang = useLang();
+  return usePersistentFunction(async uuids => {
+    const queue = [...uuids];
+    let failed = 0;
+    const worker = async () => {
+      for (let uuid = queue.shift(); uuid !== undefined; uuid = queue.shift()) {
+        try {
+          await rpcGateway.mediaFiles.Delete({
+            application,
+            uuid
+          });
+        } catch {
+          failed += 1;
+        }
+      }
+    };
+    await Promise.all(Array.from({
+      length: Math.min(DELETE_CONCURRENCY, queue.length)
+    }, () => worker()));
+    const deleted = uuids.length - failed;
+    if (deleted > 0) {
+      openToast({
+        title: lang({
+          message: 'SMART.MEDIA_STORAGE.BULK_DELETE_SUCCESS',
+          count: deleted
+        }),
+        type: 'success'
+      });
+    }
+    if (failed > 0) {
+      openToast({
+        title: lang({
+          message: 'SMART.MEDIA_STORAGE.BULK_DELETE_ERROR',
+          count: failed
+        }),
+        type: 'error'
+      });
+    }
+    return deleted;
+  });
 }

package/MediaStorage/polyglot/messages_en.js

@@ -17,6 +17,15 @@ export const messages = {
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'Delete',
   'SMART.MEDIA_STORAGE.DELETE_SUCCESS': 'Deleted',
   'SMART.MEDIA_STORAGE.DELETE_ERROR': 'Failed to delete',
+  'SMART.MEDIA_STORAGE.SELECT_ALL': 'Select all on page',
+  'SMART.MEDIA_STORAGE.SELECT_FILE_HINT': 'Select file',
+  'SMART.MEDIA_STORAGE.SELECTED_COUNT': '{{count}} selected',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_BUTTON': 'Delete selected',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_SUCCESS': '{{count}} files deleted',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_ERROR': 'Failed to delete {{count}} files',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.TITLE': 'Delete {{count}} files?',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.DESCRIPTION': 'Deleting an original also removes all of its crops. This can’t be undone.',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.BUTTON': 'Delete',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.TITLE': 'Delete this file?',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION': 'Deleting the original also removes all of its crops. This can’t be undone.',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.BUTTON': 'Delete',

package/MediaStorage/polyglot/messages_ru.js

@@ -17,6 +17,15 @@ export const messages = {
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'Удалить',
   'SMART.MEDIA_STORAGE.DELETE_SUCCESS': 'Удалено',
   'SMART.MEDIA_STORAGE.DELETE_ERROR': 'Не удалось удалить',
+  'SMART.MEDIA_STORAGE.SELECT_ALL': 'Выбрать все на странице',
+  'SMART.MEDIA_STORAGE.SELECT_FILE_HINT': 'Выбрать файл',
+  'SMART.MEDIA_STORAGE.SELECTED_COUNT': 'Выбрано: {{count}}',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_BUTTON': 'Удалить выбранные',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_SUCCESS': 'Удалено файлов: {{count}}',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_ERROR': 'Не удалось удалить файлов: {{count}}',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.TITLE': 'Удалить {{count}} файлов?',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.DESCRIPTION': 'Удаление оригинала также удалит все его кропы. Действие необратимо.',
+  'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.BUTTON': 'Удалить',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.TITLE': 'Удалить файл?',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION': 'Удаление оригинала также удалит все его кропы. Действие необратимо.',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.BUTTON': 'Удалить',

package/MediaStorage/polyglot/types.d.ts

@@ -23,6 +23,23 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.DELETE_HINT': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_SUCCESS': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_ERROR': NoParams;
+    'SMART.MEDIA_STORAGE.SELECT_ALL': NoParams;
+    'SMART.MEDIA_STORAGE.SELECT_FILE_HINT': NoParams;
+    'SMART.MEDIA_STORAGE.SELECTED_COUNT': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.BULK_DELETE_BUTTON': NoParams;
+    'SMART.MEDIA_STORAGE.BULK_DELETE_SUCCESS': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.BULK_DELETE_ERROR': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.TITLE': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.DESCRIPTION': NoParams;
+    'SMART.MEDIA_STORAGE.BULK_DELETE_CONFIRM.BUTTON': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_CONFIRM.TITLE': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_CONFIRM.BUTTON': NoParams;

package/MediaStorage/styled.d.ts

@@ -1,8 +1,13 @@
 export declare const Grid: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Tile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Tile: import("styled-components").StyledComponent<"div", any, {
+    $selected?: boolean;
+}, never>;
 export declare const TileImage: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const CropBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const WarningBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TileCheckbox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectionBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectionCount: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TileActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EmptyState: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dropzone: import("styled-components").StyledComponent<"button", any, {

package/MediaStorage/styled.js

@@ -8,7 +8,11 @@ export const Grid = styled.div.withConfig({
 export const Tile = styled.div.withConfig({
   displayName: "Tile",
   componentId: "sc-14317rj-1"
-})(["position:relative;border-radius:6px;overflow:hidden;border:1px solid ", ";transition:border-color 0.15s;&:hover{border-color:", ";}"], Color.DIVIDER, Color.PRIMARY);
+})(["position:relative;border-radius:6px;overflow:hidden;border:1px solid ", ";box-shadow:", ";transition:border-color 0.15s,box-shadow 0.15s;&:hover{border-color:", ";}"], ({
+  $selected
+}) => $selected ? Color.PRIMARY : Color.DIVIDER, ({
+  $selected
+}) => $selected ? `0 0 0 1px ${Color.PRIMARY}` : 'none', Color.PRIMARY);
 export const TileImage = styled.img.withConfig({
   displayName: "TileImage",
   componentId: "sc-14317rj-2"
@@ -21,17 +25,29 @@ export const WarningBadge = styled.span.withConfig({
   displayName: "WarningBadge",
   componentId: "sc-14317rj-4"
 })(["position:absolute;bottom:0;left:0;right:0;font-size:10px;line-height:1.2;text-align:center;color:", ";background:", ";padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;"], Color.CLEAR, Color.WARNING);
+export const TileCheckbox = styled.div.withConfig({
+  displayName: "TileCheckbox",
+  componentId: "sc-14317rj-5"
+})(["position:absolute;top:6px;left:6px;z-index:2;padding:2px;border-radius:4px;background:", ";"], Color.CLEAR);
+export const SelectionBar = styled.div.withConfig({
+  displayName: "SelectionBar",
+  componentId: "sc-14317rj-6"
+})(["display:flex;align-items:center;gap:12px;min-height:32px;margin-bottom:12px;"]);
+export const SelectionCount = styled.span.withConfig({
+  displayName: "SelectionCount",
+  componentId: "sc-14317rj-7"
+})(["font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 export const TileActions = styled.div.withConfig({
   displayName: "TileActions",
-  componentId: "sc-14317rj-5"
-})(["position:absolute;top:6px;left:6px;display:flex;gap:6px;padding:4px;border-radius:8px;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px);opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], Tile);
+  componentId: "sc-14317rj-8"
+})(["position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px);opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], Tile);
 export const EmptyState = styled.div.withConfig({
   displayName: "EmptyState",
-  componentId: "sc-14317rj-6"
+  componentId: "sc-14317rj-9"
 })(["text-align:center;padding:48px 16px;color:", ";"], Color.LOCKED);
 export const Dropzone = styled.button.withConfig({
   displayName: "Dropzone",
-  componentId: "sc-14317rj-7"
+  componentId: "sc-14317rj-10"
 })(["width:100%;min-height:96px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;font:inherit;font-size:13px;color:", ";cursor:pointer;border:2px dashed ", ";border-radius:8px;background:", ";transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";}&:disabled{cursor:default;opacity:0.7;}"], Color.LOCKED, ({
   $dragOver
 }) => $dragOver ? Color.PRIMARY : Color.DIVIDER, ({
@@ -39,46 +55,46 @@ export const Dropzone = styled.button.withConfig({
 }) => $dragOver ? Color.SOFT_LIGHT : Color.CLEAR, Color.PRIMARY);
 export const HiddenInput = styled.input.withConfig({
   displayName: "HiddenInput",
-  componentId: "sc-14317rj-8"
+  componentId: "sc-14317rj-11"
 })(["display:none;"]);
 export const UsageLine = styled.div.withConfig({
   displayName: "UsageLine",
-  componentId: "sc-14317rj-9"
+  componentId: "sc-14317rj-12"
 })(["margin-left:auto;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 /* ---------- CreateCropDrawer ---------- */
 export const PreviewStage = styled.div.withConfig({
   displayName: "PreviewStage",
-  componentId: "sc-14317rj-10"
+  componentId: "sc-14317rj-13"
 })(["display:flex;align-items:center;justify-content:center;min-height:200px;max-height:360px;padding:12px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const PreviewFrame = styled.div.withConfig({
   displayName: "PreviewFrame",
-  componentId: "sc-14317rj-11"
+  componentId: "sc-14317rj-14"
 })(["aspect-ratio:", ";max-width:100%;max-height:336px;overflow:hidden;border-radius:4px;"], ({
   $ratio
 }) => $ratio);
 export const PreviewImage = styled.img.withConfig({
   displayName: "PreviewImage",
-  componentId: "sc-14317rj-12"
+  componentId: "sc-14317rj-15"
 })(["width:100%;height:100%;object-fit:cover;display:block;"]);
 export const FieldLabel = styled.div.withConfig({
   displayName: "FieldLabel",
-  componentId: "sc-14317rj-13"
+  componentId: "sc-14317rj-16"
 })(["font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:", ";margin-bottom:6px;"], Color.LOCKED);
 export const SizeInput = styled(NativeInput).withConfig({
   displayName: "SizeInput",
-  componentId: "sc-14317rj-14"
+  componentId: "sc-14317rj-17"
 })(["&[readonly]{background:", ";color:", ";}"], Color.SOFT_LIGHT, Color.LOCKED);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
-  componentId: "sc-14317rj-15"
+  componentId: "sc-14317rj-18"
 })(["display:flex;flex-wrap:wrap;gap:7px;"]);
 export const Segment = styled.div.withConfig({
   displayName: "Segment",
-  componentId: "sc-14317rj-16"
+  componentId: "sc-14317rj-19"
 })(["display:inline-flex;border:1px solid ", ";border-radius:6px;overflow:hidden;"], Color.DIVIDER);
 export const SegmentItem = styled.button.withConfig({
   displayName: "SegmentItem",
-  componentId: "sc-14317rj-17"
+  componentId: "sc-14317rj-20"
 })(["font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border:none;background:", ";color:", ";& + &{border-left:1px solid ", ";}"], ({
   $active
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
@@ -86,17 +102,17 @@ export const SegmentItem = styled.button.withConfig({
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
 export const CropStrip = styled.div.withConfig({
   displayName: "CropStrip",
-  componentId: "sc-14317rj-18"
+  componentId: "sc-14317rj-21"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
 export const CropThumb = styled.div.withConfig({
   displayName: "CropThumb",
-  componentId: "sc-14317rj-19"
+  componentId: "sc-14317rj-22"
 })(["position:relative;width:88px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const CropThumbDelete = styled.div.withConfig({
   displayName: "CropThumbDelete",
-  componentId: "sc-14317rj-20"
+  componentId: "sc-14317rj-23"
 })(["position:absolute;top:4px;right:4px;opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], CropThumb);
 export const CropThumbCaption = styled.div.withConfig({
   displayName: "CropThumbCaption",
-  componentId: "sc-14317rj-21"
+  componentId: "sc-14317rj-24"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);

package/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^1.1.201",
+    "@pushwoosh/dumb-components": "^1.1.202",
     "@pushwoosh/kit-constants": "^1.11.1",
     "@pushwoosh/kit-helpers": "^4.12.0",
     "@pushwoosh/kit-icons": "^2.1.22",
@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.3.14"
+  "version": "1.3.16"
 }