@pushwoosh/smart-components-kit 1.4.0 → 1.5.1

package/MediaStorage/CanvaImportDrawer.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+import type { GetCanvaStatusResponse } from '@pushwoosh/rpc-v2-http-api-data/canva';
+import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
+type CanvaImportDrawerProps = {
+    application: string;
+    isOpen: boolean;
+    status: GetCanvaStatusResponse;
+    onStatusChange: () => void;
+    onClose: () => void;
+    onImported: (files: MediaFile[]) => void;
+};
+/** Drawer that connects the user's Canva and imports pages of a chosen design into the library. */
+export declare const CanvaImportDrawer: FC<CanvaImportDrawerProps>;
+export {};

package/MediaStorage/CanvaImportDrawer.js

@@ -0,0 +1,386 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button, Chip, Drawer, DrawerBody, DrawerHeader, DrawerTitle, NativeInput, useToast } from '@pushwoosh/dumb-components';
+import { FlexContainer, useAsync, Vertical } from '@pushwoosh/kit-helpers';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+import { Text } from '@pushwoosh/kit-typography';
+import { useSPAContext } from '@pushwoosh/spa-context';
+import { ConsentClosedError, connectCanva, disconnectCanva, PopupBlockedError, UnsafeReturnPageError } from './canva';
+import { togglePages } from './canvaPages';
+import { useLang } from './polyglot';
+import { Chips, DesignCaption, DesignTile, EmptyState, FieldLabel, Grid, Segment, SegmentItem, TileImage } from './styles';
+const MAX_PAGES = 10;
+const SEARCH_DELAY_MS = 400;
+const POLL_INTERVAL_MS = 1500;
+const IMPORT_TIMEOUT_MS = 10 * 60 * 1000;
+const errorMessage = (error, fallback) => error instanceof Error && error.message ? error.message : fallback;
+const sleep = ms => new Promise(resolve => {
+  window.setTimeout(resolve, ms);
+});
+/** Drawer that connects the user's Canva and imports pages of a chosen design into the library. */
+export const CanvaImportDrawer = ({
+  application,
+  isOpen,
+  status,
+  onStatusChange,
+  onClose,
+  onImported
+}) => {
+  const lang = useLang();
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const {
+    openToast
+  } = useToast();
+  const [query, setQuery] = useState('');
+  const [debouncedQuery, setDebouncedQuery] = useState('');
+  const [designs, setDesigns] = useState([]);
+  const [continuation, setContinuation] = useState('');
+  const [selected, setSelected] = useState(null);
+  const [pages, setPages] = useState([1]);
+  const [format, setFormat] = useState('CANVA_IMPORT_FORMAT_PNG');
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [progress, setProgress] = useState(null);
+  const runRef = useRef(0);
+  const queryRef = useRef('');
+  const isOpenRef = useRef(isOpen);
+  isOpenRef.current = isOpen;
+  queryRef.current = debouncedQuery;
+  const isReady = status.connected && status.tokenValid;
+  useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedQuery(query.trim()), SEARCH_DELAY_MS);
+    return () => window.clearTimeout(timer);
+  }, [query]);
+  const designsAsync = useAsync(async () => {
+    if (!isOpen || !isReady) return null;
+    return rpcGateway.canva.ListDesigns({
+      query: debouncedQuery
+    });
+  }, [rpcGateway, isOpen, isReady, debouncedQuery]);
+  useEffect(() => {
+    setDesigns(designsAsync.value?.designs ?? []);
+    setContinuation(designsAsync.value?.continuation ?? '');
+  }, [designsAsync.value]);
+  useEffect(() => {
+    if (designsAsync.error) {
+      openToast({
+        title: errorMessage(designsAsync.error, lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.ERROR'
+        })),
+        type: 'error'
+      });
+    }
+  }, [designsAsync.error, openToast, lang]);
+  useEffect(() => () => {
+    runRef.current += 1;
+  }, []);
+  const loadMore = async () => {
+    if (isLoadingMore) return;
+    const queryAtStart = debouncedQuery;
+    setIsLoadingMore(true);
+    try {
+      const page = await rpcGateway.canva.ListDesigns({
+        query: queryAtStart,
+        continuation
+      });
+      if (queryRef.current !== queryAtStart) return;
+      setDesigns(prev => {
+        const seen = new Set(prev.map(design => design.id));
+        return [...prev, ...(page.designs ?? []).filter(design => !seen.has(design.id))];
+      });
+      setContinuation(page.continuation ?? '');
+    } catch (error) {
+      openToast({
+        title: errorMessage(error, lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.ERROR'
+        })),
+        type: 'error'
+      });
+    } finally {
+      setIsLoadingMore(false);
+    }
+  };
+  const handleConnect = async () => {
+    setIsConnecting(true);
+    try {
+      await connectCanva(rpcGateway);
+      onStatusChange();
+    } catch (error) {
+      if (!(error instanceof ConsentClosedError)) {
+        const title = error instanceof PopupBlockedError ? lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED'
+        }) : lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED'
+        });
+        if (error instanceof UnsafeReturnPageError) {
+          console.error('Canva connect refused: /robots.txt on this origin is not served as plain text');
+        }
+        openToast({
+          title,
+          type: 'error'
+        });
+      }
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+  const handleDisconnect = async () => {
+    try {
+      await disconnectCanva(rpcGateway);
+      onStatusChange();
+    } catch (error) {
+      openToast({
+        title: errorMessage(error, lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.ERROR'
+        })),
+        type: 'error'
+      });
+    }
+  };
+  const selectDesign = design => {
+    setSelected(design);
+    setPages([1]);
+  };
+  const togglePage = page => {
+    setPages(prev => togglePages(prev, page, MAX_PAGES));
+  };
+  const handleImport = async () => {
+    if (!selected) return;
+    runRef.current += 1;
+    const run = runRef.current;
+    setProgress(lang({
+      message: 'SMART.MEDIA_STORAGE.CANVA.EXPORTING'
+    }));
+    try {
+      const {
+        importId
+      } = await rpcGateway.canva.StartImport({
+        application,
+        designId: selected.id,
+        pages,
+        format
+      });
+      const startedAt = Date.now();
+      for (;;) {
+        await sleep(POLL_INTERVAL_MS);
+        if (runRef.current !== run) return;
+        if (Date.now() - startedAt > IMPORT_TIMEOUT_MS) {
+          throw new Error(lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.ERROR'
+          }));
+        }
+        const state = await rpcGateway.canva.GetImport({
+          importId
+        });
+        if (runRef.current !== run) return;
+        if (state.state === 'CANVA_IMPORT_STATE_FAILED') {
+          throw new Error(state.error);
+        }
+        if (state.state === 'CANVA_IMPORT_STATE_DONE') {
+          openToast({
+            title: lang({
+              message: 'SMART.MEDIA_STORAGE.CANVA.SUCCESS'
+            }),
+            type: 'success'
+          });
+          onImported(state.files ?? []);
+          if (isOpenRef.current) onClose();
+          return;
+        }
+        if (state.state === 'CANVA_IMPORT_STATE_UPLOADING') {
+          setProgress(lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.IMPORTING',
+            done: state.pagesDone,
+            total: state.pagesTotal
+          }));
+        }
+      }
+    } catch (error) {
+      if (runRef.current === run) {
+        openToast({
+          title: errorMessage(error, lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.ERROR'
+          })),
+          type: 'error'
+        });
+      }
+    } finally {
+      if (runRef.current === run) setProgress(null);
+    }
+  };
+  const pageCount = selected ? Math.max(selected.pageCount, 1) : 0;
+  return _jsxs(Drawer, {
+    size: "medium",
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [_jsx(DrawerHeader, {
+      children: _jsxs(DrawerTitle, {
+        children: [_jsx("span", {
+          children: lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.TITLE'
+          })
+        }), _jsx(Button, {
+          view: "ghost",
+          color: "secondary",
+          size: "compact",
+          icon: _jsx(CloseIcon, {
+            size: "small"
+          }),
+          "aria-label": lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.CLOSE'
+          }),
+          onClick: onClose
+        })]
+      })
+    }), _jsxs(DrawerBody, {
+      children: [!isReady && _jsxs(Vertical, {
+        "$gap": 12,
+        children: [_jsx(Text, {
+          children: status.connected ? lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT'
+          }) : lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT'
+          })
+        }), _jsx("div", {
+          children: _jsx(Button, {
+            color: "primary",
+            isLoading: isConnecting,
+            isDisabled: isConnecting,
+            onClick: () => void handleConnect(),
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CANVA.CONNECT'
+            })
+          })
+        })]
+      }), isReady && _jsxs(Vertical, {
+        "$gap": 16,
+        children: [_jsxs(FlexContainer, {
+          "$alignItems": "center",
+          "$gap": 8,
+          children: [_jsx(Text, {
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS',
+              name: status.identity
+            })
+          }), _jsx(Button, {
+            view: "ghost",
+            color: "secondary",
+            size: "compact",
+            onClick: () => void handleDisconnect(),
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CANVA.DISCONNECT'
+            })
+          })]
+        }), _jsx(NativeInput, {
+          value: query,
+          placeholder: lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.SEARCH'
+          }),
+          "aria-label": lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.SEARCH'
+          }),
+          onChange: event => setQuery(event.target.value)
+        }), !designsAsync.loading && designs.length === 0 && _jsx(EmptyState, {
+          children: lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.EMPTY'
+          })
+        }), _jsx(Grid, {
+          children: designs.map(design => _jsxs(DesignTile, {
+            type: "button",
+            "$selected": selected?.id === design.id,
+            disabled: progress !== null,
+            onClick: () => selectDesign(design),
+            children: [_jsx(TileImage, {
+              src: design.thumbnailUrl,
+              alt: "",
+              loading: "lazy"
+            }), _jsxs(DesignCaption, {
+              children: [_jsx("span", {
+                children: design.title || lang({
+                  message: 'SMART.MEDIA_STORAGE.CANVA.UNTITLED'
+                })
+              }), _jsx("span", {
+                children: lang({
+                  message: 'SMART.MEDIA_STORAGE.CANVA.PAGES',
+                  count: Math.max(design.pageCount, 1)
+                })
+              })]
+            })]
+          }, design.id))
+        }), continuation && _jsx("div", {
+          children: _jsx(Button, {
+            view: "ghost",
+            color: "secondary",
+            isLoading: isLoadingMore,
+            isDisabled: isLoadingMore,
+            onClick: () => void loadMore(),
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE'
+            })
+          })
+        }), selected && _jsxs(Vertical, {
+          "$gap": 12,
+          children: [pageCount > 1 && _jsxs("div", {
+            children: [_jsx(FieldLabel, {
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL',
+                max: MAX_PAGES
+              })
+            }), _jsx(Chips, {
+              children: Array.from({
+                length: pageCount
+              }, (_, index) => index + 1).map(page => _jsx(Chip, {
+                "$selected": pages.includes(page),
+                "aria-pressed": pages.includes(page),
+                onClick: () => togglePage(page),
+                children: page
+              }, page))
+            })]
+          }), _jsxs("div", {
+            children: [_jsx(FieldLabel, {
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL'
+              })
+            }), _jsxs(Segment, {
+              role: "radiogroup",
+              "aria-label": lang({
+                message: 'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL'
+              }),
+              children: [_jsx(SegmentItem, {
+                type: "button",
+                role: "radio",
+                "aria-checked": format === 'CANVA_IMPORT_FORMAT_PNG',
+                "$active": format === 'CANVA_IMPORT_FORMAT_PNG',
+                onClick: () => setFormat('CANVA_IMPORT_FORMAT_PNG'),
+                children: "PNG"
+              }), _jsx(SegmentItem, {
+                type: "button",
+                role: "radio",
+                "aria-checked": format === 'CANVA_IMPORT_FORMAT_JPG',
+                "$active": format === 'CANVA_IMPORT_FORMAT_JPG',
+                onClick: () => setFormat('CANVA_IMPORT_FORMAT_JPG'),
+                children: "JPG"
+              })]
+            })]
+          }), _jsxs(FlexContainer, {
+            "$alignItems": "center",
+            "$gap": 12,
+            children: [_jsx(Button, {
+              color: "primary",
+              isLoading: progress !== null,
+              isDisabled: progress !== null,
+              onClick: () => void handleImport(),
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.CANVA.IMPORT'
+              })
+            }), progress && _jsx(Text, {
+              children: progress
+            })]
+          })]
+        })]
+      })]
+    })]
+  });
+};

package/MediaStorage/MediaStorage.js

@@ -5,11 +5,12 @@ 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 { CanvaImportDrawer } from './CanvaImportDrawer';
 import { CreateCropDrawer } from './CreateCropDrawer';
 import { useDeleteMediaFile, useDeleteMediaFiles } from './hooks';
 import { formatBytes, getCropCaption, getSourceLabel, getThumbUrl, hasVersions } from './mediaFile.utils';
 import { Lang, useLang } from './polyglot';
-import { CountBadge, Dropzone, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, SourceBadge, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
+import { CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, SourceBadge, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
 const UPLOAD_PATH = '/api/media/upload';
 const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
 const isAllowedImage = file => {
@@ -80,6 +81,10 @@ export const MediaStorage = ({
   const usageAsync = useAsync(() => rpcGateway.mediaFiles.GetUsage({
     application
   }), [rpcGateway, application, reloadToken, usageToken]);
+  const [canvaToken, setCanvaToken] = useState(0);
+  const [isCanvaOpen, setIsCanvaOpen] = useState(false);
+  const canvaStatusAsync = useAsync(() => rpcGateway.canva.GetStatus({}), [rpcGateway, canvaToken]);
+  const canvaStatus = canvaStatusAsync.value;
   const {
     loading
   } = listAsync;
@@ -242,28 +247,36 @@ export const MediaStorage = ({
   const totalPages = Math.ceil(total / perPage);
   const showPagination = !loading && files.length > 0 && totalPages > 1;
   return _jsxs(_Fragment, {
-    children: [_jsxs(Dropzone, {
-      type: "button",
-      "$dragOver": isDragOver,
-      disabled: isUploading,
-      onClick: () => uploadInputRef.current?.click(),
-      onDragOver: event => {
-        event.preventDefault();
-        setIsDragOver(true);
-      },
-      onDragLeave: () => setIsDragOver(false),
-      onDrop: event => {
-        event.preventDefault();
-        setIsDragOver(false);
-        void uploadFiles(Array.from(event.dataTransfer.files));
-      },
-      children: [_jsx(UploadIcon, {
-        size: "medium",
-        view: "lined"
-      }), isUploading ? lang({
-        message: 'SMART.MEDIA_STORAGE.UPLOADING'
-      }) : lang({
-        message: 'SMART.MEDIA_STORAGE.DROPZONE_HINT'
+    children: [_jsxs(DropzoneRow, {
+      children: [_jsxs(Dropzone, {
+        type: "button",
+        "$dragOver": isDragOver,
+        disabled: isUploading,
+        onClick: () => uploadInputRef.current?.click(),
+        onDragOver: event => {
+          event.preventDefault();
+          setIsDragOver(true);
+        },
+        onDragLeave: () => setIsDragOver(false),
+        onDrop: event => {
+          event.preventDefault();
+          setIsDragOver(false);
+          void uploadFiles(Array.from(event.dataTransfer.files));
+        },
+        children: [_jsx(UploadIcon, {
+          size: "medium",
+          view: "lined"
+        }), isUploading ? lang({
+          message: 'SMART.MEDIA_STORAGE.UPLOADING'
+        }) : lang({
+          message: 'SMART.MEDIA_STORAGE.DROPZONE_HINT'
+        })]
+      }), canvaStatus?.available && _jsx(Button, {
+        color: "secondary",
+        onClick: () => setIsCanvaOpen(true),
+        children: lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.BUTTON'
+        })
       })]
     }), _jsx(HiddenInput, {
       ref: uploadInputRef,
@@ -438,6 +451,18 @@ export const MediaStorage = ({
           size: formatBytes(usageAsync.value.totalSize)
         })
       })]
+    }), canvaStatus?.available && _jsx(CanvaImportDrawer, {
+      application: application,
+      isOpen: isCanvaOpen,
+      status: canvaStatus,
+      onStatusChange: () => setCanvaToken(token => token + 1),
+      onClose: () => setIsCanvaOpen(false),
+      onImported: () => {
+        if (pageRef.current !== 0) {
+          onPageChange(0);
+        }
+        setReloadToken(token => token + 1);
+      }
     }), _jsx(CreateCropDrawer, {
       application: application,
       original: createCropFor,

package/MediaStorage/canva.d.ts

@@ -0,0 +1,18 @@
+import type { API as RpcGatewayAPI } from '@pushwoosh/rpc-v2-http-api-data';
+/** Error raised when the browser refused to open the Canva consent window. */
+export declare class PopupBlockedError extends Error {
+}
+/** Consent result read from the pop-up once it is back on our origin; null while it is still elsewhere. */
+export declare const readConsentReturn: (location: Pick<Location, "origin" | "hash">, origin: string) => URLSearchParams | null;
+/** Error raised when the user closed the consent pop-up without finishing. */
+export declare class ConsentClosedError extends Error {
+}
+/** Error raised when the return page is not plain static text: the code must not land in an app. */
+export declare class UnsafeReturnPageError extends Error {
+}
+/** True when the response is served as plain text, i.e. no app bundle runs on that page. */
+export declare const isStaticText: (contentType: string | null) => boolean;
+/** Connects the user's Canva in a pop-up that returns to a static text file on this origin. */
+export declare const connectCanva: (rpcGateway: RpcGatewayAPI) => Promise<void>;
+/** Revokes and forgets the signed-in user's Canva connection. */
+export declare const disconnectCanva: (rpcGateway: RpcGatewayAPI) => Promise<unknown>;

package/MediaStorage/canva.js

@@ -0,0 +1,86 @@
+const PROVIDER = 'canva';
+const POLL_INTERVAL_MS = 500;
+const CONNECT_TIMEOUT_MS = 10 * 60 * 1000;
+/** Error raised when the browser refused to open the Canva consent window. */
+export class PopupBlockedError extends Error {}
+/** Consent result read from the pop-up once it is back on our origin; null while it is still elsewhere. */
+export const readConsentReturn = (location, origin) => {
+  if (location.origin !== origin) return null;
+  const params = new URLSearchParams(location.hash.replace(/^#/, ''));
+  return params.get('oauth_provider') === PROVIDER ? params : null;
+};
+/** Error raised when the user closed the consent pop-up without finishing. */
+export class ConsentClosedError extends Error {}
+const waitForReturn = (popup, origin) => new Promise((resolve, reject) => {
+  const startedAt = Date.now();
+  const timer = window.setInterval(() => {
+    if (popup.closed) {
+      window.clearInterval(timer);
+      reject(new ConsentClosedError());
+      return;
+    }
+    if (Date.now() - startedAt > CONNECT_TIMEOUT_MS) {
+      window.clearInterval(timer);
+      popup.close();
+      reject(new Error('timeout'));
+      return;
+    }
+    let params = null;
+    try {
+      params = readConsentReturn(popup.location, origin);
+    } catch {
+      return;
+    }
+    if (!params) return;
+    window.clearInterval(timer);
+    popup.close();
+    resolve(params);
+  }, POLL_INTERVAL_MS);
+});
+/** Error raised when the return page is not plain static text: the code must not land in an app. */
+export class UnsafeReturnPageError extends Error {}
+/** True when the response is served as plain text, i.e. no app bundle runs on that page. */
+export const isStaticText = contentType => (contentType ?? '').toLowerCase().startsWith('text/plain');
+const ensureStaticReturn = async url => {
+  const response = await fetch(url, {
+    method: 'HEAD',
+    cache: 'no-store',
+    credentials: 'omit'
+  });
+  if (!response.ok || !isStaticText(response.headers.get('content-type'))) throw new UnsafeReturnPageError();
+};
+/** Connects the user's Canva in a pop-up that returns to a static text file on this origin. */
+export const connectCanva = async rpcGateway => {
+  const {
+    origin
+  } = window.location;
+  const returnTo = `${origin}/robots.txt`;
+  const popup = window.open('', 'pushwoosh-canva-connect', 'width=640,height=760');
+  if (!popup) throw new PopupBlockedError();
+  try {
+    await ensureStaticReturn(returnTo);
+    const {
+      authUrl
+    } = await rpcGateway.integrations.GetOAuthAuthURL({
+      provider: PROVIDER,
+      returnTo
+    });
+    popup.location.href = authUrl;
+  } catch (error) {
+    popup.close();
+    throw error;
+  }
+  const params = await waitForReturn(popup, origin);
+  if (params.get('oauth_status') !== 'pending') {
+    throw new Error(params.get('oauth_error') || 'Canva consent was not given');
+  }
+  await rpcGateway.integrations.CompleteOAuthAuthorization({
+    provider: PROVIDER,
+    state: params.get('oauth_state') ?? '',
+    code: params.get('oauth_code') ?? ''
+  });
+};
+/** Revokes and forgets the signed-in user's Canva connection. */
+export const disconnectCanva = rpcGateway => rpcGateway.integrations.DeleteOAuthIntegration({
+  provider: PROVIDER
+});

package/MediaStorage/canvaPages.d.ts

@@ -0,0 +1,2 @@
+/** Next page selection after a click: at least one page stays selected, at most `max`, in order. */
+export declare const togglePages: (selected: number[], page: number, max: number) => number[];

package/MediaStorage/canvaPages.js

@@ -0,0 +1,7 @@
+/** Next page selection after a click: at least one page stays selected, at most `max`, in order. */
+export const togglePages = (selected, page, max) => {
+  if (selected.includes(page)) {
+    return selected.length > 1 ? selected.filter(item => item !== page) : selected;
+  }
+  return selected.length < max ? [...selected, page].sort((a, b) => a - b) : selected;
+};

package/MediaStorage/index.d.ts

@@ -1,3 +1,4 @@
 export { MediaStorage } from './MediaStorage';
 export { MediaStoragePaginated } from './MediaStoragePaginated';
 export type { MediaStorageProps, MediaStoragePaginatedProps } from './types';
+export { connectCanva, ConsentClosedError, disconnectCanva, PopupBlockedError, UnsafeReturnPageError, } from './canva';

package/MediaStorage/index.js

@@ -1,2 +1,3 @@
 export { MediaStorage } from './MediaStorage';
-export { MediaStoragePaginated } from './MediaStoragePaginated';
+export { MediaStoragePaginated } from './MediaStoragePaginated';
+export { connectCanva, ConsentClosedError, disconnectCanva, PopupBlockedError, UnsafeReturnPageError } from './canva';

package/MediaStorage/polyglot/messages_ar.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'تعذّر إنشاء الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'حذف الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'حذف هذا الاقتصاص؟',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'حذف'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'حذف',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'استيراد من Canva',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'استيراد من Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'إغلاق',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'اربط حساب Canva لاستيراد تصميماتك.',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'لم يعد Canva يقبل هذا الاتصال. اربط الحساب مجددًا.',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'ربط Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': 'متصل باسم {{name}}',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'قطع الاتصال',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'البحث في التصميمات',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'لم يتم العثور على تصميمات',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'تصميم بلا عنوان',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} ص',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'تحميل المزيد',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'الصفحات (حتى {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'التنسيق',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'استيراد',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': 'جارٍ استيراد {{done}} من {{total}}…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'يقوم Canva بتجهيز التصميم…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'تم الاستيراد من Canva',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'اسمح بالنوافذ المنبثقة لهذا الموقع لربط Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'تعذّر ربط Canva',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'تعذّر الاستيراد من Canva'
 };

package/MediaStorage/polyglot/messages_bn.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'ক্রপ তৈরি করা যায়নি',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'ক্রপ মুছুন',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'এই ক্রপটি মুছবেন?',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'মুছুন'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'মুছুন',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'Canva থেকে ইমপোর্ট',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'Canva থেকে ইমপোর্ট',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'বন্ধ করুন',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'আপনার ডিজাইন ইমপোর্ট করতে Canva অ্যাকাউন্ট সংযুক্ত করুন।',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva আর এই সংযোগ গ্রহণ করছে না। আবার সংযুক্ত করুন।',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'Canva সংযুক্ত করুন',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': '{{name}} হিসেবে সংযুক্ত',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'সংযোগ বিচ্ছিন্ন করুন',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'ডিজাইন খুঁজুন',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'কোনো ডিজাইন পাওয়া যায়নি',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'শিরোনামহীন ডিজাইন',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} পৃ.',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'আরও লোড করুন',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'পৃষ্ঠা (সর্বোচ্চ {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'ফরম্যাট',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'ইমপোর্ট',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': '{{total}}-এর মধ্যে {{done}} ইমপোর্ট হচ্ছে…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva ডিজাইন প্রস্তুত করছে…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'Canva থেকে ইমপোর্ট হয়েছে',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'Canva সংযুক্ত করতে এই সাইটের জন্য পপ-আপ অনুমতি দিন',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'Canva সংযুক্ত করা যায়নি',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'Canva থেকে ইমপোর্ট ব্যর্থ হয়েছে'
 };

package/MediaStorage/polyglot/messages_de.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Zuschnitt konnte nicht erstellt werden',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Zuschnitt löschen',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Diesen Zuschnitt löschen?',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Löschen'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Löschen',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'Aus Canva importieren',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'Aus Canva importieren',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'Schließen',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'Verbinden Sie Ihr Canva-Konto, um Ihre Designs zu importieren.',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva akzeptiert diese Verbindung nicht mehr. Verbinden Sie erneut.',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'Canva verbinden',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': 'Verbunden als {{name}}',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'Trennen',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'Designs suchen',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'Keine Designs gefunden',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'Unbenanntes Design',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} S.',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'Mehr laden',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'Seiten (bis zu {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'Format',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'Importieren',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': 'Importiere {{done}} von {{total}}…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva bereitet das Design vor…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'Aus Canva importiert',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'Erlauben Sie Pop-ups für diese Website, um Canva zu verbinden',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'Canva konnte nicht verbunden werden',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'Canva-Import fehlgeschlagen'
 };

package/MediaStorage/polyglot/messages_en.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Failed to create crop',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Delete crop',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Delete this crop?',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Delete'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Delete',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'Import from Canva',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'Import from Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'Close',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'Connect your Canva account to import your designs.',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva no longer accepts this connection. Connect again.',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'Connect Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': 'Connected as {{name}}',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'Disconnect',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'Search designs',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'No designs found',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'Untitled design',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} p.',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'Load more',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'Pages (up to {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'Format',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'Import',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': 'Importing {{done}} of {{total}}…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva is preparing the design…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'Imported from Canva',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'Allow pop-ups for this site to connect Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'Could not connect Canva',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'Canva import failed'
 };

package/MediaStorage/polyglot/messages_es.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'No se pudo crear el recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Eliminar recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': '¿Eliminar este recorte?',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Eliminar'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Eliminar',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'Importar desde Canva',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'Importar desde Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'Cerrar',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'Conecta tu cuenta de Canva para importar tus diseños.',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva ya no acepta esta conexión. Vuelve a conectar.',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'Conectar Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': 'Conectado como {{name}}',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'Desconectar',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'Buscar diseños',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'No se encontraron diseños',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'Diseño sin título',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} pág.',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'Cargar más',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'Páginas (hasta {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'Formato',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'Importar',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': 'Importando {{done}} de {{total}}…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva está preparando el diseño…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'Importado desde Canva',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'Permite las ventanas emergentes de este sitio para conectar Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'No se pudo conectar Canva',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'No se pudo importar desde Canva'
 };

package/MediaStorage/polyglot/messages_fr.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Échec de la création du recadrage',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Supprimer le recadrage',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Supprimer ce recadrage ?',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Supprimer'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Supprimer',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'Importer depuis Canva',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'Importer depuis Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'Fermer',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'Connectez votre compte Canva pour importer vos designs.',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva n’accepte plus cette connexion. Reconnectez-vous.',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'Connecter Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': 'Connecté en tant que {{name}}',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'Déconnecter',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'Rechercher des designs',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'Aucun design trouvé',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'Design sans titre',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} p.',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'Charger plus',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'Pages (jusqu’à {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'Format',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'Importer',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': 'Importation {{done}} sur {{total}}…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva prépare le design…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'Importé depuis Canva',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'Autorisez les fenêtres pop-up pour ce site afin de connecter Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'Impossible de connecter Canva',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'Échec de l’importation depuis Canva'
 };

package/MediaStorage/polyglot/messages_he.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'יצירת החיתוך נכשלה',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'מחיקת חיתוך',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'למחוק את החיתוך הזה?',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'מחיקה'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'מחיקה',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'ייבוא מ-Canva',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'ייבוא מ-Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'סגירה',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'חברו את חשבון Canva כדי לייבא את העיצובים שלכם.',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva כבר לא מקבל את החיבור הזה. התחברו מחדש.',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'חיבור Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': 'מחובר בתור {{name}}',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'ניתוק',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'חיפוש עיצובים',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'לא נמצאו עיצובים',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'עיצוב ללא שם',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} עמ׳',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'טעינת עוד',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'עמודים (עד {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'פורמט',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'ייבוא',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': 'מייבא {{done}} מתוך {{total}}…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva מכין את העיצוב…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'יובא מ-Canva',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'אפשרו חלונות קופצים לאתר הזה כדי לחבר את Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'לא ניתן לחבר את Canva',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'הייבוא מ-Canva נכשל'
 };

package/MediaStorage/polyglot/messages_hi.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'क्रॉप नहीं बनाया जा सका',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'क्रॉप हटाएँ',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'यह क्रॉप हटाएँ?',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'हटाएँ'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'हटाएँ',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'Canva से इम्पोर्ट करें',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'Canva से इम्पोर्ट करें',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'बंद करें',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'अपने डिज़ाइन इम्पोर्ट करने के लिए Canva खाता कनेक्ट करें।',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva अब यह कनेक्शन स्वीकार नहीं करता। फिर से कनेक्ट करें।',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'Canva कनेक्ट करें',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': '{{name}} के रूप में कनेक्टेड',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'डिस्कनेक्ट करें',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'डिज़ाइन खोजें',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'कोई डिज़ाइन नहीं मिला',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'बिना नाम का डिज़ाइन',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} पृ.',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'और लोड करें',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'पृष्ठ (अधिकतम {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'फ़ॉर्मेट',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'इम्पोर्ट करें',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': '{{total}} में से {{done}} इम्पोर्ट हो रहे हैं…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva डिज़ाइन तैयार कर रहा है…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'Canva से इम्पोर्ट हो गया',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'Canva कनेक्ट करने के लिए इस साइट के पॉप-अप की अनुमति दें',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'Canva कनेक्ट नहीं हो सका',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'Canva से इम्पोर्ट विफल रहा'
 };

package/MediaStorage/polyglot/messages_ja.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'トリミングの作成に失敗しました',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'トリミングを削除',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'このトリミングを削除しますか？',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': '削除'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': '削除',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'Canvaからインポート',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'Canvaからインポート',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': '閉じる',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'デザインをインポートするにはCanvaアカウントを接続してください。',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canvaはこの接続を受け付けなくなりました。もう一度接続してください。',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'Canvaを接続',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': '{{name}}として接続中',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': '接続を解除',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'デザインを検索',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'デザインが見つかりません',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': '無題のデザイン',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}}ページ',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'さらに読み込む',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'ページ（最大{{max}}）',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': '形式',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'インポート',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': '{{total}}件中{{done}}件をインポート中…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canvaがデザインを準備しています…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'Canvaからインポートしました',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'Canvaを接続するには、このサイトのポップアップを許可してください',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'Canvaを接続できませんでした',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'Canvaからのインポートに失敗しました'
 };

package/MediaStorage/polyglot/messages_ko.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': '크롭을 생성하지 못했습니다',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': '크롭 삭제',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': '이 크롭을 삭제하시겠습니까?',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': '삭제'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': '삭제',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'Canva에서 가져오기',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'Canva에서 가져오기',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': '닫기',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': '디자인을 가져오려면 Canva 계정을 연결하세요.',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva가 더 이상 이 연결을 허용하지 않습니다. 다시 연결하세요.',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'Canva 연결',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': '{{name}}(으)로 연결됨',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': '연결 해제',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': '디자인 검색',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': '디자인을 찾을 수 없습니다',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': '제목 없는 디자인',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}}쪽',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': '더 보기',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': '페이지(최대 {{max}}개)',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': '형식',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': '가져오기',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': '{{total}}개 중 {{done}}개 가져오는 중…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva에서 디자인을 준비하고 있습니다…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'Canva에서 가져왔습니다',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'Canva를 연결하려면 이 사이트의 팝업을 허용하세요',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'Canva를 연결할 수 없습니다',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'Canva에서 가져오지 못했습니다'
 };

package/MediaStorage/polyglot/messages_pt.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Falha ao criar o recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Excluir recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Excluir este recorte?',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Excluir'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Excluir',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'Importar do Canva',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'Importar do Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'Fechar',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'Conecte sua conta do Canva para importar seus designs.',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'O Canva não aceita mais esta conexão. Conecte novamente.',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'Conectar Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': 'Conectado como {{name}}',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'Desconectar',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'Pesquisar designs',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'Nenhum design encontrado',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'Design sem título',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} pág.',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'Carregar mais',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'Páginas (até {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'Formato',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'Importar',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': 'Importando {{done}} de {{total}}…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'O Canva está preparando o design…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'Importado do Canva',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'Permita pop-ups neste site para conectar o Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'Não foi possível conectar o Canva',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'Falha ao importar do Canva'
 };

package/MediaStorage/polyglot/messages_ru.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Не удалось создать кроп',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Удалить кроп',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Удалить кроп?',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Удалить'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Удалить',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'Импорт из Canva',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'Импорт из Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'Закрыть',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'Подключите аккаунт Canva, чтобы импортировать свои дизайны.',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva больше не принимает это подключение. Подключите заново.',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'Подключить Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': 'Подключено: {{name}}',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'Отключить',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'Поиск дизайнов',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'Дизайны не найдены',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'Дизайн без названия',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} стр.',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'Показать ещё',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'Страницы (до {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'Формат',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'Импортировать',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': 'Импорт {{done}} из {{total}}…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva готовит дизайн…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'Импортировано из Canva',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'Разрешите всплывающие окна для этого сайта, чтобы подключить Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'Не удалось подключить Canva',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'Не удалось импортировать из Canva'
 };

package/MediaStorage/polyglot/messages_th.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'สร้างครอปไม่สำเร็จ',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'ลบครอป',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'ลบครอปนี้ใช่ไหม',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'ลบ'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'ลบ',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': 'นำเข้าจาก Canva',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': 'นำเข้าจาก Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': 'ปิด',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': 'เชื่อมต่อบัญชี Canva เพื่อนำเข้าดีไซน์ของคุณ',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva ไม่ยอมรับการเชื่อมต่อนี้แล้ว โปรดเชื่อมต่อใหม่',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': 'เชื่อมต่อ Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': 'เชื่อมต่อในชื่อ {{name}}',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': 'ยกเลิกการเชื่อมต่อ',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': 'ค้นหาดีไซน์',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': 'ไม่พบดีไซน์',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': 'ดีไซน์ไม่มีชื่อ',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} หน้า',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': 'โหลดเพิ่ม',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': 'หน้า (สูงสุด {{max}})',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': 'รูปแบบ',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': 'นำเข้า',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': 'กำลังนำเข้า {{done}} จาก {{total}}…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva กำลังเตรียมดีไซน์…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': 'นำเข้าจาก Canva แล้ว',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': 'อนุญาตป๊อปอัปสำหรับเว็บไซต์นี้เพื่อเชื่อมต่อ Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': 'ไม่สามารถเชื่อมต่อ Canva ได้',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': 'นำเข้าจาก Canva ไม่สำเร็จ'
 };

package/MediaStorage/polyglot/messages_zh.js

@@ -47,5 +47,27 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': '创建裁剪图失败',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': '删除裁剪图',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': '删除此裁剪图？',
-  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': '删除'
+  'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': '删除',
+  'SMART.MEDIA_STORAGE.CANVA.BUTTON': '从 Canva 导入',
+  'SMART.MEDIA_STORAGE.CANVA.TITLE': '从 Canva 导入',
+  'SMART.MEDIA_STORAGE.CANVA.CLOSE': '关闭',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': '连接你的 Canva 账号以导入设计。',
+  'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': 'Canva 不再接受此连接，请重新连接。',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT': '连接 Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': '已连接：{{name}}',
+  'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': '断开连接',
+  'SMART.MEDIA_STORAGE.CANVA.SEARCH': '搜索设计',
+  'SMART.MEDIA_STORAGE.CANVA.EMPTY': '未找到设计',
+  'SMART.MEDIA_STORAGE.CANVA.UNTITLED': '未命名设计',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES': '{{count}} 页',
+  'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': '加载更多',
+  'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': '页面（最多 {{max}} 页）',
+  'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': '格式',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORT': '导入',
+  'SMART.MEDIA_STORAGE.CANVA.IMPORTING': '正在导入第 {{done}} / {{total}} 页…',
+  'SMART.MEDIA_STORAGE.CANVA.EXPORTING': 'Canva 正在准备设计…',
+  'SMART.MEDIA_STORAGE.CANVA.SUCCESS': '已从 Canva 导入',
+  'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': '请允许此网站的弹出窗口以连接 Canva',
+  'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': '无法连接 Canva',
+  'SMART.MEDIA_STORAGE.CANVA.ERROR': '从 Canva 导入失败'
 };

package/MediaStorage/polyglot/types.d.ts

@@ -64,4 +64,35 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.BUTTON': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.TITLE': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.CLOSE': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.CONNECT': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS': {
+        name: string;
+    };
+    'SMART.MEDIA_STORAGE.CANVA.DISCONNECT': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.SEARCH': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.EMPTY': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.UNTITLED': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.PAGES': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL': {
+        max: number;
+    };
+    'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.IMPORT': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.IMPORTING': {
+        done: number;
+        total: number;
+    };
+    'SMART.MEDIA_STORAGE.CANVA.EXPORTING': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.SUCCESS': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED': NoParams;
+    'SMART.MEDIA_STORAGE.CANVA.ERROR': NoParams;
 };

package/MediaStorage/styles.d.ts

@@ -33,3 +33,8 @@ export declare const CropStrip: import("styled-components").StyledComponent<"div
 export declare const CropThumb: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CropThumbDelete: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CropThumbCaption: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DesignTile: import("styled-components").StyledComponent<"button", any, {
+    $selected?: boolean;
+}, never>;
+export declare const DesignCaption: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const DropzoneRow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/MediaStorage/styles.js

@@ -123,4 +123,20 @@ export const CropThumbDelete = styled.div.withConfig({
 export const CropThumbCaption = styled.div.withConfig({
   displayName: "CropThumbCaption",
   componentId: "sc-uu3cbo-26"
-})(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);
+})(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);
+export const DesignTile = styled.button.withConfig({
+  displayName: "DesignTile",
+  componentId: "sc-uu3cbo-27"
+})(["display:flex;flex-direction:column;padding:0;font:inherit;text-align:left;cursor:pointer;background:", ";border-radius:6px;overflow:hidden;border:1px solid ", ";box-shadow:", ";transition:border-color 0.15s,box-shadow 0.15s;&:hover:not(:disabled){border-color:", ";}&:disabled{cursor:default;}"], Color.CLEAR, ({
+  $selected
+}) => $selected ? Color.PRIMARY : Color.DIVIDER, ({
+  $selected
+}) => $selected ? `0 0 0 1px ${Color.PRIMARY}` : 'none', Color.PRIMARY);
+export const DesignCaption = styled.span.withConfig({
+  displayName: "DesignCaption",
+  componentId: "sc-uu3cbo-28"
+})(["display:flex;justify-content:space-between;gap:6px;padding:6px 8px;font-size:", ";color:", ";span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}span:last-child{flex-shrink:0;color:", ";}"], FontSize.SMALL, Color.MAIN, Color.LOCKED);
+export const DropzoneRow = styled.div.withConfig({
+  displayName: "DropzoneRow",
+  componentId: "sc-uu3cbo-29"
+})(["display:flex;align-items:stretch;gap:12px;& > :first-child{flex:1;}"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,12 +17,12 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^2.9.13",
+    "@pushwoosh/dumb-components": "^2.9.17",
     "@pushwoosh/kit-constants": "^2.1.0",
     "@pushwoosh/kit-helpers": "^4.12.7",
     "@pushwoosh/kit-icons": "^2.3.3",
     "@pushwoosh/kit-typography": "^1.8.7",
-    "@pushwoosh/rpc-v2-http-api-data": "^0.2.376",
+    "@pushwoosh/rpc-v2-http-api-data": "^0.2.383",
     "@pushwoosh/spa-context": "^1.8.1",
     "idb-keyval": "^6.2.2",
     "jwt-decode": "^4.0.0",