@wix/patterns-fields 1.13.0 → 1.15.0

package/src/components/image/cell-image-edit.tsx

@@ -0,0 +1,353 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  Box,
+  IconButton,
+  Loader,
+  PopoverMenu,
+  Tooltip,
+} from '@wix/design-system';
+import {
+  Add,
+  LinkSmall,
+  MoreSmall,
+  Replace,
+  Link,
+  Delete,
+} from '@wix/wix-ui-icons-common';
+import { MEDIA_TYPES } from '../../utils/media-utils';
+import { useTranslations } from '../../hooks';
+import {
+  useMediaControl,
+  usePasteURLForm,
+  PasteURLForm,
+  MediaFieldType,
+} from '../media-control';
+import { ImageThumbnail } from './image-thumbnail';
+
+export interface CellImageEditProps {
+  value: string | null | undefined;
+  onChange: (value: string | null) => void;
+  onCommit: () => void;
+  onCancel?: () => void;
+  /**
+   * Called before opening external UI (media manager / paste-URL form) so the
+   * table can set isEditing=true and protect cell focus while the modal is open.
+   */
+  onStartEdit?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+}
+
+export const CellImageEdit: React.FC<CellImageEditProps> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook,
+}) => {
+  const { t } = useTranslations();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  // Tracks whether onMediaChange fired during the current callMedia() invocation.
+  // Reset to false before each call; checked after the promise resolves to detect
+  // "dismissed without selection" so the in-progress edit can be cancelled.
+  const mediaCommittedRef = useRef(false);
+
+  const onMediaChange = useCallback(
+    (uri: string) => {
+      mediaCommittedRef.current = true;
+      onChange(uri);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
+
+  const { callMedia, loading } = useMediaControl({
+    mediaType: MEDIA_TYPES.IMAGE,
+    value: value ?? undefined,
+    onChange: onMediaChange,
+  });
+
+  const handleCallMedia = useCallback(async () => {
+    onStartEdit?.();
+    mediaCommittedRef.current = false;
+    await callMedia();
+    // If the picker was dismissed without a selection, neither onCommit nor
+    // onCancel ran — call onCancel now so isEditing resets to false and
+    // useClearFocusOnBlur is unblocked.
+    if (!mediaCommittedRef.current) {
+      onCancel?.();
+    }
+  }, [onStartEdit, callMedia, onCancel]);
+
+  const pasteUrlTitle = t('CMS.image.replaceWithUrl.title');
+  const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({
+    onChange: onMediaChange,
+  });
+
+  // When the paste-URL form is dismissed without saving, cancel the in-progress
+  // edit so isEditing returns to false and useClearFocusOnBlur works normally.
+  const handleFormClose = useCallback(() => {
+    onClose();
+    onCancel?.();
+  }, [onClose, onCancel]);
+
+  const handleOpenPasteUrl = useCallback(
+    (params: { title: string; value?: string }) => () => {
+      onStartEdit?.();
+      onOpen(params)();
+    },
+    [onStartEdit, onOpen],
+  );
+
+  const handleDelete = useCallback(() => {
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
+  // Wire inputRef so the cell-level useEffect can focus the first button when
+  // the user presses Enter on a focused image cell (inner focus activation).
+  useEffect(() => {
+    if (!inputRef) return;
+    inputRef.current = {
+      focus: () => {
+        const first =
+          containerRef.current?.querySelectorAll<HTMLElement>('button')[0];
+        first?.focus();
+      },
+    };
+    return () => {
+      inputRef.current = null;
+    };
+  }, [inputRef]);
+
+  const handleContainerFocus = useCallback(() => {
+    containerRef.current?.setAttribute('data-inner-focused', '');
+  }, []);
+
+  const handleContainerBlur = useCallback((e: React.FocusEvent) => {
+    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+      containerRef.current?.removeAttribute('data-inner-focused');
+    }
+  }, []);
+
+  const focusCell = useCallback(() => {
+    const cellDiv = containerRef.current?.closest(
+      '[role="gridcell"]',
+    ) as HTMLElement | null;
+    cellDiv?.focus({ preventScroll: true });
+  }, []);
+
+  // Native keydown listener — must be native (not React onKeyDown) so that
+  // e.stopPropagation() fires during the native bubble phase, before the event
+  // reaches the React root where useKeyboardNavigation's onKeyDown would
+  // otherwise intercept Tab and move to the next cell.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        // Cancel any in-progress edit (e.g. if isEditing was set before opening
+        // a modal that then got dismissed via keyboard), then return focus to the
+        // cell div. The useCellFocusAndEditing useEffect will also refocus the
+        // cell div if isEditing transitions false→false is a no-op, so we also
+        // call focusCell() directly as a reliable fallback.
+        onCancel?.();
+        focusCell();
+        return;
+      }
+
+      // Tab while a button in this component is focused: cycle through the
+      // interactive elements. Tab off the last (or Shift+Tab off the first)
+      // returns focus to the cell div for normal cell-level navigation.
+      if (e.key === 'Tab') {
+        const buttons = Array.from(el.querySelectorAll<HTMLElement>('button'));
+        const currentIdx = buttons.indexOf(
+          document.activeElement as HTMLElement,
+        );
+        if (currentIdx === -1) return; // focus is not on one of our buttons — pass through
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!e.shiftKey) {
+          if (currentIdx >= buttons.length - 1) {
+            focusCell();
+          } else {
+            buttons[currentIdx + 1]?.focus();
+          }
+        } else {
+          if (currentIdx <= 0) {
+            focusCell();
+          } else {
+            buttons[currentIdx - 1]?.focus();
+          }
+        }
+      }
+    };
+
+    el.addEventListener('keydown', handleKeyDown);
+    return () => el.removeEventListener('keydown', handleKeyDown);
+  }, [focusCell, onCancel]);
+
+  if (loading) {
+    return (
+      <Box
+        dataHook={dataHook}
+        verticalAlign="middle"
+        width="100%"
+        height="100%"
+        padding="0 8px"
+      >
+        <Loader size="tiny" />
+      </Box>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      data-hook={dataHook}
+      style={{ width: '100%', height: '100%' }}
+      onFocus={handleContainerFocus}
+      onBlur={handleContainerBlur}
+    >
+      <Box
+        align="space-between"
+        verticalAlign="middle"
+        height="100%"
+        padding="0 8px"
+        style={{ boxSizing: 'border-box' }}
+      >
+        {value ? (
+          /* Has value: clickable thumbnail button with replace overlay */
+          <Tooltip content={t('CMS.image.replace')} appendTo="window">
+            <Box>
+              <button
+                type="button"
+                data-hook="image-edit-thumbnail"
+                onClick={handleCallMedia}
+                style={{
+                  cursor: 'pointer',
+                  lineHeight: 0,
+                  position: 'relative',
+                  background: 'none',
+                  border: 'none',
+                  padding: 0,
+                }}
+              >
+                <ImageThumbnail value={value} />
+                <div
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'rgba(0, 0, 0, 0.4)',
+                    borderRadius: '3px',
+                  }}
+                >
+                  <Replace
+                    style={{ color: 'white', width: '18px', height: '18px' }}
+                  />
+                </div>
+              </button>
+            </Box>
+          </Tooltip>
+        ) : (
+          /* Empty: icon button opens media manager */
+          <Tooltip content={t('CMS.image.add')} appendTo="window">
+            <IconButton
+              size="tiny"
+              priority="secondary"
+              dataHook="image-edit-add-button"
+              onClick={handleCallMedia}
+            >
+              <Add />
+            </IconButton>
+          </Tooltip>
+        )}
+
+        {value ? (
+          /* Has value: "..." menu with Replace / Replace with URL / Delete */
+          <PopoverMenu
+            textSize="small"
+            appendTo="window"
+            triggerElement={
+              <Tooltip
+                content={t('auto-patterns.fields.more_actions_tooltip')}
+                appendTo="window"
+              >
+                <IconButton
+                  size="tiny"
+                  priority="tertiary"
+                  dataHook="image-edit-more-button"
+                >
+                  <MoreSmall />
+                </IconButton>
+              </Tooltip>
+            }
+          >
+            <PopoverMenu.MenuItem
+              dataHook="image-edit-action-replace"
+              text={t('CMS.image.replace')}
+              prefixIcon={<Replace />}
+              onClick={handleCallMedia}
+            />
+            <PopoverMenu.MenuItem
+              dataHook="image-edit-action-replace-url"
+              text={t('CMS.image.replaceWithUrl.button')}
+              prefixIcon={<Link />}
+              onClick={handleOpenPasteUrl({
+                title: pasteUrlTitle,
+                value: value ?? undefined,
+              })}
+            />
+            <PopoverMenu.Divider />
+            <PopoverMenu.MenuItem
+              dataHook="image-edit-action-delete"
+              text={t('CMS.image.clear')}
+              skin="destructive"
+              prefixIcon={<Delete />}
+              onClick={handleDelete}
+            />
+          </PopoverMenu>
+        ) : (
+          /* Empty: icon button opens paste-URL form */
+          <Tooltip
+            content={t('CMS.image.replaceWithUrl.button')}
+            appendTo="window"
+          >
+            <IconButton
+              size="tiny"
+              priority="tertiary"
+              dataHook="image-edit-paste-url-button"
+              onClick={handleOpenPasteUrl({
+                title: pasteUrlTitle,
+                value: value ?? undefined,
+              })}
+            >
+              <LinkSmall />
+            </IconButton>
+          </Tooltip>
+        )}
+      </Box>
+
+      <PasteURLForm
+        title={title}
+        value={value ?? undefined}
+        show={isOpen}
+        closeModal={handleFormClose}
+        onSave={onSave}
+        fieldType={MediaFieldType.image}
+      />
+    </div>
+  );
+};
+
+CellImageEdit.displayName = 'CellImageEdit';

package/src/components/image/image-thumbnail.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  isMediaVideoURI,
+  mediaURItoImageURL,
+  ThumbnailSize,
+} from '../../auto-field-types';
+import { MediaImage } from '../media-image';
+import {
+  CustomUrlOverlay,
+  VideoIndicatorOverlay,
+} from '../media-image/overlays';
+
+export interface ImageThumbnailProps {
+  value?: string | null;
+  onLoad?: () => void;
+  onError?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  dataHook?: string;
+}
+
+export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
+  value,
+  onLoad,
+  onError,
+  onMouseEnter,
+  onMouseLeave,
+  dataHook,
+}) => {
+  const src = value ? mediaURItoImageURL(value, ThumbnailSize.S) : undefined;
+
+  return (
+    <div
+      data-hook={dataHook}
+      data-empty={!value || undefined}
+      style={{ width: '36px', height: '36px', borderRadius: '3px', flexShrink: 0, position: 'relative' }}
+    >
+      <MediaImage
+        src={src}
+        alt=""
+        suspended
+        borderRadius="3px"
+        transparent
+        size={ThumbnailSize.S}
+        width="36px"
+        height="36px"
+        onLoad={onLoad}
+        onError={onError}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        overlay={
+          value && isMediaVideoURI(value) ? (
+            <VideoIndicatorOverlay src={value} size="small" />
+          ) : (
+            <CustomUrlOverlay src={value} size="small" />
+          )
+        }
+      />
+    </div>
+  );
+};
+
+ImageThumbnail.displayName = 'ImageThumbnail';

package/src/components/image/image-view.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useCallback } from 'react';
+import { Box, Popover } from '@wix/design-system';
+import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+import { MediaImage } from '../media-image';
+import { ImageThumbnail } from './image-thumbnail';
+
+export interface ImageViewProps {
+  value: string | null | undefined;
+  dataHook?: string;
+}
+
+export const ImageView: React.FC<ImageViewProps> = ({ value, dataHook }) => {
+  const [isPreviewShown, setIsPreviewShown] = useState(false);
+
+  const showPreview = useCallback(() => setIsPreviewShown(true), []);
+  const hidePreview = useCallback(() => setIsPreviewShown(false), []);
+
+  return (
+    <Box
+      dataHook={dataHook}
+      verticalAlign="middle"
+      padding="0 8px"
+      height="100%"
+      width="100%"
+    >
+      <Box minWidth="0" style={{ flex: 1 }}>
+        {value ? (
+          <Popover
+            showArrow={false}
+            shown={isPreviewShown}
+            appendTo="viewport"
+            placement="bottom-start"
+            showDelay={300}
+            moveBy={{ y: 4, x: 0 }}
+            zIndex={9999}
+            fluid
+          >
+            <Popover.Element>
+              <ImageThumbnail
+                value={value}
+                dataHook="image-thumbnail"
+                onMouseEnter={showPreview}
+                onMouseLeave={hidePreview}
+              />
+            </Popover.Element>
+            <Popover.Content>
+              <Box
+                width="204px"
+                style={{ borderRadius: '3px', overflow: 'hidden', lineHeight: 0 }}
+              >
+                <MediaImage
+                  src={mediaURItoImageURL(value, ThumbnailSize.L)}
+                  alt=""
+                  fit="contain"
+                  transparent
+                  size={ThumbnailSize.L}
+                />
+              </Box>
+            </Popover.Content>
+          </Popover>
+        ) : (
+          <ImageThumbnail value={value} dataHook="image-thumbnail" />
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+ImageView.displayName = 'ImageView';

package/src/components/image/index.ts

@@ -0,0 +1,3 @@
+export * from './image-thumbnail';
+export * from './image-view';
+export * from './cell-image-edit';

package/src/components/index.ts

@@ -18,3 +18,4 @@ export * from './email';
 export * from './boolean';
 export * from './number-input';
 export * from './url';
+export * from './image';

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton2188405185";
+var _namespace_ = "pasteurlbutton3952587235";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"pasteurlbutton2188405185__root","iconButtonTooltip":"pasteurlbutton2188405185__iconButtonTooltip","iconButton":"pasteurlbutton2188405185__iconButton"};
+export var classes = {"root":"pasteurlbutton3952587235__root","iconButtonTooltip":"pasteurlbutton3952587235__iconButtonTooltip","iconButton":"pasteurlbutton3952587235__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield3030618679";
+var _namespace_ = "formmediagalleryfield3106985161";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmediagalleryfield3030618679__root","container":"formmediagalleryfield3030618679__container","viewBox":"formmediagalleryfield3030618679__viewBox","addItemWrapper":"formmediagalleryfield3030618679__addItemWrapper","addItem":"formmediagalleryfield3030618679__addItem","overlay":"formmediagalleryfield3030618679__overlay","image":"formmediagalleryfield3030618679__image","previewImage":"formmediagalleryfield3030618679__previewImage","previewVideo":"formmediagalleryfield3030618679__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3106985161__root","container":"formmediagalleryfield3106985161__container","viewBox":"formmediagalleryfield3106985161__viewBox","addItemWrapper":"formmediagalleryfield3106985161__addItemWrapper","addItem":"formmediagalleryfield3106985161__addItem","overlay":"formmediagalleryfield3106985161__overlay","image":"formmediagalleryfield3106985161__image","previewImage":"formmediagalleryfield3106985161__previewImage","previewVideo":"formmediagalleryfield3106985161__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage2658102972";
+var _namespace_ = "mediaimage1708830916";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage2658102972__root"};
+export var classes = {"root":"mediaimage1708830916__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage2658102972-from","to":"--mediaimage2658102972-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage1708830916-from","to":"--mediaimage1708830916-to"}; 
 
 
 

package/src/components/media-image/overlays/custom-url-overlay.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link as LinkIcon } from '@wix/wix-ui-icons-common';
+import { st, classes } from './overlay.st.css.js';
+import type { IconOverlayProps } from './types';
+
+/** Shows a link icon when the src is a custom (non-wix://) URL. */
+export const CustomUrlOverlay: React.FC<IconOverlayProps> = ({
+  src,
+  size = 'small',
+  placement = 'bottomLeft',
+}) => {
+  const isWixUri = src?.startsWith('wix:');
+  return src && !isWixUri ? (
+    <LinkIcon className={st(classes.iconOverlay, { size, placement })} />
+  ) : null;
+};
+
+CustomUrlOverlay.displayName = 'CustomUrlOverlay';

package/src/components/media-image/overlays/index.ts

@@ -1,2 +1,3 @@
 export { VideoIndicatorOverlay } from './video-indicator-overlay';
+export { CustomUrlOverlay } from './custom-url-overlay';
 export type { IconOverlayProps, IconOverlaySize, IconOverlayPlacement, MediaImageOverlayProps } from './types';

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay3631758939";
+var _namespace_ = "overlay636547370";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"overlay3631758939__root","iconOverlay":"overlay3631758939__iconOverlay"};
+export var classes = {"root":"overlay636547370__root","iconOverlay":"overlay636547370__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {"iconShadow":"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))"}; 
-export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay3631758939-wsr-color-D80"}; 
+export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay636547370-wsr-color-D80"}; 
 
 
 

package/src/components/media-image/overlays/types.ts

@@ -2,7 +2,7 @@ export type IconOverlaySize = 'small' | 'medium' | 'large';
 export type IconOverlayPlacement = 'topLeft' | 'bottomLeft';
 
 export interface MediaImageOverlayProps {
-  src?: string;
+  src?: string | null;
 }
 
 export interface IconOverlayProps extends MediaImageOverlayProps {

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader3771116817";
+var _namespace_ = "medialoader2708273655";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"medialoader3771116817__root","loader":"medialoader3771116817__loader"};
+export var classes = {"root":"medialoader2708273655__root","loader":"medialoader2708273655__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "mediatag1783400040";
+var _namespace_ = "mediatag2186192433";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediatag1783400040__root"};
+export var classes = {"root":"mediatag2186192433__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument3562652977";
+var _namespace_ = "formmultidocument3882726463";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmultidocument3562652977__root","viewRoot":"formmultidocument3562652977__viewRoot","singleViewWrapper":"formmultidocument3562652977__singleViewWrapper","addDocumentButton":"formmultidocument3562652977__addDocumentButton"};
+export var classes = {"root":"formmultidocument3882726463__root","viewRoot":"formmultidocument3882726463__viewRoot","singleViewWrapper":"formmultidocument3882726463__singleViewWrapper","addDocumentButton":"formmultidocument3882726463__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};