@wix/patterns-fields 1.39.0 → 1.41.0

package/src/components/multi-document/cell-multi-document-edit.tsx

@@ -0,0 +1,364 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  Box,
+  IconButton,
+  Loader,
+  PopoverMenu,
+  Tag,
+  Tooltip,
+} from '@wix/design-system';
+import {
+  Add,
+  Delete,
+  DocumentSmall,
+  Download,
+  ExternalLink,
+  Link,
+  LinkSmall,
+  MoreSmall,
+  Replace,
+} from '@wix/wix-ui-icons-common';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+import { getMediaTitle, MEDIA_TYPES } from '../../utils/media-utils';
+import { getMediaURL } from '../../auto-field-types';
+import { useTranslations, useCellEditKeyboard } from '../../hooks';
+import {
+  PasteURLForm,
+  MediaFieldType,
+  useMediaControl,
+  usePasteURLForm,
+} from '../media-control';
+import { openDocument } from '../document/utils';
+
+export interface CellMultiDocumentEditProps {
+  value: string[] | null;
+  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;
+  /** Stable id prefix for tags. Each chip uses `${fieldId}-${index}`. */
+  fieldId: string;
+}
+
+export const CellMultiDocumentEdit: React.FC<CellMultiDocumentEditProps> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook,
+  fieldId,
+}) => {
+  const { t } = useTranslations();
+  const msid = useWixPatternsContainer()?.environment?.msid;
+
+  const uris = useMemo(() => value ?? [], [value]);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const handleMultiChange = useCallback(
+    (next: string[]) => {
+      onChange(next.length === 0 ? null : next);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
+
+  const { callMedia, downloadMedia, loading } = useMediaControl({
+    mediaType: MEDIA_TYPES.ALL_MEDIA,
+    value: uris,
+    onChange: handleMultiChange,
+    multiSelect: true,
+  });
+
+  // In multi-doc, dismissing a picker/form must NOT exit the whole editor —
+  // the user is mid-multi-edit and may want to act on other chips. Only Escape
+  // (via useCellEditKeyboard) and click-outside should fire onCancel.
+  const handleAdd = useCallback(async () => {
+    onStartEdit?.();
+    await callMedia();
+  }, [callMedia, onStartEdit]);
+
+  const [replaceIndex, setReplaceIndex] = useState<number | null>(null);
+  const handleReplace = useCallback(
+    (index: number) => async () => {
+      onStartEdit?.();
+      setReplaceIndex(index);
+      await callMedia(index);
+      setReplaceIndex(null);
+    },
+    [callMedia, onStartEdit],
+  );
+
+  const handleDelete = useCallback(
+    (index: number) => () => {
+      const next = uris.filter((_, i) => i !== index);
+      handleMultiChange(next);
+    },
+    [uris, handleMultiChange],
+  );
+
+  const handleOpen = useCallback(
+    (uri: string) => () => {
+      openDocument(getMediaURL(uri, msid));
+    },
+    [msid],
+  );
+
+  const handleDownload = useCallback(
+    (uri: string) => () => {
+      downloadMedia(uri);
+    },
+    [downloadMedia],
+  );
+
+  const onPastedURLChange = useCallback(
+    (urlValue: string, indexToReplace?: number) => {
+      if (indexToReplace !== undefined) {
+        const next = [...uris];
+        next.splice(indexToReplace, 1, urlValue);
+        handleMultiChange(next);
+      } else {
+        handleMultiChange([...uris, urlValue]);
+      }
+    },
+    [uris, handleMultiChange],
+  );
+
+  const pasteUrlForm = usePasteURLForm({ onChange: onPastedURLChange });
+
+  const openAddViaUrl = useCallback(() => {
+    onStartEdit?.();
+    pasteUrlForm.onOpen({ title: t('CMS.document.pasteUrl.title') })();
+  }, [onStartEdit, pasteUrlForm, t]);
+
+  const openReplaceViaUrl = useCallback(
+    (index: number, currentValue: string) => () => {
+      onStartEdit?.();
+      pasteUrlForm.onOpen({
+        title: t('CMS.document.replaceWithUrl.title'),
+        value: currentValue,
+        index,
+      })();
+    },
+    [onStartEdit, pasteUrlForm, t],
+  );
+
+  const handlePasteUrlClose = useCallback(() => {
+    pasteUrlForm.onClose();
+  }, [pasteUrlForm]);
+
+  const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
+    containerRef,
+    onCancel,
+    inputRef,
+  });
+
+  const addDocLabel = t('CMS.document.add.button.text');
+  const addViaUrlLabel = t('CMS.document.pasteUrl.button');
+
+  return (
+    <div
+      ref={containerRef}
+      data-hook={dataHook}
+      onFocus={handleContainerFocus}
+      onBlur={handleContainerBlur}
+      style={{
+        width: '100%',
+        // min-width: 0 lets the wrapper shrink to the column width inside the
+        // flex .root, so flex-wrap on the chip strip has a bounded width.
+        minWidth: 0,
+        maxWidth: '100%',
+        boxSizing: 'border-box',
+      }}
+    >
+      {uris.length === 0 ? (
+        <Box
+          align="space-between"
+          verticalAlign="middle"
+          height="100%"
+          padding="0 8px"
+          gap="SP1"
+          style={{ boxSizing: 'border-box' }}
+        >
+          <Tooltip content={addDocLabel} appendTo="window">
+            <IconButton
+              dataHook="multi-document-edit-add-button"
+              ariaLabel={addDocLabel}
+              size="tiny"
+              priority="secondary"
+              onClick={handleAdd}
+            >
+              <Add />
+            </IconButton>
+          </Tooltip>
+          <Tooltip content={addViaUrlLabel} appendTo="window">
+            <IconButton
+              dataHook="multi-document-edit-paste-url-button"
+              ariaLabel={addViaUrlLabel}
+              size="tiny"
+              priority="tertiary"
+              onClick={openAddViaUrl}
+            >
+              <LinkSmall />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      ) : (
+        <Box
+          padding="SP1"
+          gap="SP1"
+          verticalAlign="middle"
+          style={{ flexWrap: 'wrap', boxSizing: 'border-box' }}
+        >
+          {uris.map((uri, index) => {
+            const isReplacing = replaceIndex === index && loading;
+            if (isReplacing) {
+              return (
+                <Box
+                  key={`${fieldId}-${index}-loading`}
+                  verticalAlign="middle"
+                  height="24px"
+                >
+                  <Loader dataHook="loader" size="tiny" />
+                </Box>
+              );
+            }
+            return (
+              <Box
+                key={`${fieldId}-${index}`}
+                verticalAlign="middle"
+                // Cap the per-chip wrapper at the chip strip's content width so a
+                // single long filename can't overflow the column. Apply on the
+                // Box (a flex item of the strip) rather than the Tag — Tag's
+                // PopoverNextTrigger parent has no max-width, so a percentage
+                // clamp on the Tag itself is degenerate at narrow widths.
+                style={{ minWidth: 0, maxWidth: '100%' }}
+              >
+                <PopoverMenu
+                  textSize="small"
+                  appendTo="window"
+                  triggerElement={
+                    <Tag
+                      id={`${fieldId}-${index}`}
+                      dataHook="multi-document-edit-tag"
+                      size="small"
+                      thumb={<DocumentSmall />}
+                      removable={false}
+                      maxWidth="100%"
+                    >
+                      <span
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 4,
+                          width: '100%',
+                          minWidth: 0,
+                        }}
+                      >
+                        <span
+                          style={{
+                            flex: '1 1 auto',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            minWidth: 0,
+                          }}
+                        >
+                          {getMediaTitle(uri)}
+                        </span>
+                        <MoreSmall
+                          style={{
+                            width: 12,
+                            height: 12,
+                            flexShrink: 0,
+                          }}
+                        />
+                      </span>
+                    </Tag>
+                  }
+                >
+                  <PopoverMenu.MenuItem
+                    dataHook="multi-document-edit-action-replace"
+                    text={t('CMS.document.action.replace')}
+                    prefixIcon={<Replace />}
+                    onClick={handleReplace(index)}
+                  />
+                  <PopoverMenu.MenuItem
+                    dataHook="multi-document-edit-action-replace-url"
+                    text={t('CMS.document.action.replaceWithUrl')}
+                    prefixIcon={<Link />}
+                    onClick={openReplaceViaUrl(index, uri)}
+                  />
+                  <PopoverMenu.Divider />
+                  <PopoverMenu.MenuItem
+                    dataHook="multi-document-edit-action-open"
+                    text={t('CMS.document.action.open')}
+                    prefixIcon={<ExternalLink />}
+                    onClick={handleOpen(uri)}
+                  />
+                  <PopoverMenu.MenuItem
+                    dataHook="multi-document-edit-action-download"
+                    text={t('CMS.document.action.download')}
+                    prefixIcon={<Download />}
+                    onClick={handleDownload(uri)}
+                  />
+                  <PopoverMenu.Divider />
+                  <PopoverMenu.MenuItem
+                    dataHook="multi-document-edit-action-delete"
+                    text={t('CMS.document.action.delete')}
+                    skin="destructive"
+                    prefixIcon={<Delete />}
+                    onClick={handleDelete(index)}
+                  />
+                </PopoverMenu>
+              </Box>
+            );
+          })}
+          <Box gap="SP1" verticalAlign="middle">
+            <Tooltip content={addDocLabel} appendTo="window">
+              <IconButton
+                dataHook="multi-document-edit-add-button"
+                ariaLabel={addDocLabel}
+                size="tiny"
+                priority="secondary"
+                onClick={handleAdd}
+              >
+                <Add />
+              </IconButton>
+            </Tooltip>
+            <Tooltip content={addViaUrlLabel} appendTo="window">
+              <IconButton
+                dataHook="multi-document-edit-paste-url-button"
+                ariaLabel={addViaUrlLabel}
+                size="tiny"
+                priority="tertiary"
+                onClick={openAddViaUrl}
+              >
+                <LinkSmall />
+              </IconButton>
+            </Tooltip>
+          </Box>
+        </Box>
+      )}
+
+      <PasteURLForm
+        title={pasteUrlForm.title}
+        value={pasteUrlForm.value}
+        show={pasteUrlForm.isOpen}
+        closeModal={handlePasteUrlClose}
+        onSave={pasteUrlForm.onSave}
+        fieldType={MediaFieldType.document}
+      />
+    </div>
+  );
+};
+
+CellMultiDocumentEdit.displayName = 'CellMultiDocumentEdit';

package/src/components/multi-document/cell-multi-document-view.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { Box, TagList } from '@wix/design-system';
+import { DocumentSmall } from '@wix/wix-ui-icons-common';
+
+import { getMediaTitle } from '../../utils/media-utils';
+
+export interface CellMultiDocumentViewProps {
+  value: string[] | null | undefined;
+  dataHook?: string;
+  /**
+   * Stable DOM id prefix for the tags. WDS Tag requires `id` to be present;
+   * each tag uses `${fieldId}-${index}`. Callers are responsible for ensuring
+   * uniqueness (e.g., derive from columnId + rowKey).
+   */
+  fieldId: string;
+}
+
+export const CellMultiDocumentView: React.FC<CellMultiDocumentViewProps> = ({
+  value,
+  dataHook,
+  fieldId,
+}) => {
+  const tags = useMemo(
+    () =>
+      (value ?? []).map((uri, i) => ({
+        id: `${fieldId}-${i}`,
+        dataHook: 'cell-multi-document-tag',
+        thumb: <DocumentSmall />,
+        children: getMediaTitle(uri),
+        removable: false as const,
+      })),
+    [value, fieldId],
+  );
+
+  if (tags.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box
+      dataHook={dataHook}
+      direction="vertical"
+      verticalAlign="middle"
+      padding="0 8px"
+      height="100%"
+      width="100%"
+      minWidth={0}
+    >
+      <TagList
+        overflowMode={{
+          type: 'collapse',
+          overflowTooltipContent: (hiddenTags) =>
+            hiddenTags
+              .map((tag) =>
+                typeof tag.children === 'string' ? tag.children : '',
+              )
+              .filter(Boolean)
+              .join(', '),
+        }}
+        size="small"
+        dataHook="cell-multi-document-tags"
+        tags={tags}
+      />
+    </Box>
+  );
+};
+
+CellMultiDocumentView.displayName = 'CellMultiDocumentView';

package/src/components/multi-document/index.ts

@@ -1,3 +1,7 @@
 export { MultiDocumentView } from './multi-document-view/multi-document-view';
 export { FormMultiDocument } from './multi-document-input/form-multi-document';
 export { FormMultiDocumentField } from './multi-document-input/form-multi-document-field';
+export { CellMultiDocumentView } from './cell-multi-document-view';
+export { CellMultiDocumentEdit } from './cell-multi-document-edit';
+export type { CellMultiDocumentViewProps } from './cell-multi-document-view';
+export type { CellMultiDocumentEditProps } from './cell-multi-document-edit';

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_ = "formmultidocument3697455280";
+var _namespace_ = "formmultidocument239392594";
 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":"formmultidocument3697455280__root","viewRoot":"formmultidocument3697455280__viewRoot","singleViewWrapper":"formmultidocument3697455280__singleViewWrapper","addDocumentButton":"formmultidocument3697455280__addDocumentButton"};
+export var classes = {"root":"formmultidocument239392594__root","viewRoot":"formmultidocument239392594__viewRoot","singleViewWrapper":"formmultidocument239392594__singleViewWrapper","addDocumentButton":"formmultidocument239392594__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput3231278211";
+var _namespace_ = "cellreferenceinput3112868832";
 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":"cellreferenceinput3231278211__root","autocomplete":"cellreferenceinput3231278211__autocomplete"};
+export var classes = {"root":"cellreferenceinput3112868832__root","autocomplete":"cellreferenceinput3112868832__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/cell-rich-content-input.tsx

@@ -1,18 +1,15 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import type { RichContent } from '@wix/ricos';
-import {
-  ensureRicosContent,
-  fromPlainText,
-  toPlainTextSync,
-} from '@wix/ricos/content';
+import type { RicosDocument } from '@wix/ricos';
+import { fromPlainText, toPlainTextSync } from '@wix/ricos/content';
 
 import { RichContentEditor } from './rich-content-input/rich-content-editor';
 import { useRichContentState } from './rich-content-input/rich-content-common';
+import { hardConvert } from '../../validations/rich-content';
 
 export interface CellRichContentInputProps {
   value?: unknown;
-  onChange: (value: RichContent | undefined) => void;
+  onChange: (value: RicosDocument | undefined) => void;
   onSave: () => void;
   /** Typed key from type-to-edit — appended to a plain-text extraction of the existing content (formatting is lost). */
   initialTypedKey?: string;
@@ -30,14 +27,14 @@ export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
 
   // Compute initial editor content once on mount.
   // If there's a typed key, append it to the existing plain-text form of the content.
-  const initialContent = useMemo((): RichContent | undefined => {
+  const initialContent = useMemo((): RicosDocument | undefined => {
     if (initialTypedKey) {
       const existingText = value
-        ? toPlainTextSync(ensureRicosContent(value as any), { delimiter: '\n' })
+        ? toPlainTextSync(hardConvert(value), { delimiter: '\n' })
         : '';
-      return fromPlainText(existingText + initialTypedKey) as RichContent;
+      return fromPlainText(existingText + initialTypedKey);
     }
-    return value as RichContent | undefined;
+    return value === undefined ? undefined : hardConvert(value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Deliberately run only on mount — typed key is a one-shot initializer
 
@@ -45,14 +42,14 @@ export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
     useRichContentState(initialContent);
 
   const handleChange = useCallback(
-    (content: RichContent) => setLocalValue(content),
+    (content: RicosDocument) => setLocalValue(content),
     [setLocalValue],
   );
 
   /** Commit the current content and exit edit mode.
    *  Guards against double-save (X button + Escape firing simultaneously). */
   const handleSave = useCallback(
-    (content?: RichContent) => {
+    (content?: RicosDocument) => {
       if (hasSavedRef.current) {
         return;
       }
@@ -64,7 +61,7 @@ export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
   );
 
   const handleExitFullScreen = useCallback(
-    (content?: RichContent) => {
+    (content?: RicosDocument) => {
       handleSave(content);
     },
     [handleSave],

package/src/components/rich-content/cell-rich-content-view.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { ensureRicosContent, toPlainTextSync } from '@wix/ricos/content';
+import { toPlainTextSync } from '@wix/ricos/content';
 
 import { TextView } from '../text';
+import { hardConvert } from '../../validations/rich-content';
 
 export interface CellRichContentViewProps {
   value?: unknown;
@@ -13,9 +14,7 @@ export interface CellRichContentViewProps {
 export const CellRichContentView: React.FC<CellRichContentViewProps> = ({
   value,
 }) => {
-  const plainText = value
-    ? toPlainTextSync(ensureRicosContent(value as any), { delimiter: ' ' })
-    : '';
+  const plainText = value ? toPlainTextSync(hardConvert(value), { delimiter: ' ' }) : '';
 
   return <TextView data={plainText} />;
 };

package/src/components/rich-content/hooks/use-plain-text-rich-content.ts

@@ -1,19 +1,19 @@
 import { useEffect } from 'react';
 
-import type { RichContent } from '@wix/ricos/content';
-import { ensureRicosContent, toPlainText } from '@wix/ricos/content';
+import type { RicosDocument } from '@wix/ricos/content';
+import { toPlainText } from '@wix/ricos/content';
 
 import { safeStringify } from '../../../utils';
 import { useMountedState } from './use-mounted-state';
 
-export const usePlainTextRichContent = (content?: RichContent) => {
+export const usePlainTextRichContent = (content?: RicosDocument) => {
   const [plainTextContent, setPlainTextContent] = useMountedState('');
   const [isConverting, setIsConverting] = useMountedState(false);
 
   useEffect(() => {
     if (content) {
       setIsConverting(true);
-      toPlainText(ensureRicosContent(content), { delimiter: ' ' })
+      toPlainText(content, { delimiter: ' ' })
         .catch(() => safeStringify(content))
         .then(setPlainTextContent)
         .finally(() => setIsConverting(false));

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput908406586";
+var _namespace_ = "richcontentdefaultvalueinput998980344";
 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":"richcontentdefaultvalueinput908406586__root","richContentEditorContainer":"richcontentdefaultvalueinput908406586__richContentEditorContainer","editor":"richcontentdefaultvalueinput908406586__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput998980344__root","richContentEditorContainer":"richcontentdefaultvalueinput998980344__richContentEditorContainer","editor":"richcontentdefaultvalueinput998980344__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput4035690";
+var _namespace_ = "richcontentforminput1753039762";
 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":"richcontentforminput4035690__root","editor":"richcontentforminput4035690__editor"};
+export var classes = {"root":"richcontentforminput1753039762__root","editor":"richcontentforminput1753039762__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput516739647";
+var _namespace_ = "richcontentformreadonlyinput2205100705";
 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":"richcontentformreadonlyinput516739647__root"};
+export var classes = {"root":"richcontentformreadonlyinput2205100705__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal4175496484";
+var _namespace_ = "fullscreenmodal13930613";
 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":"fullscreenmodal4175496484__root","modalContent":"fullscreenmodal4175496484__modalContent"};
+export var classes = {"root":"fullscreenmodal13930613__root","modalContent":"fullscreenmodal13930613__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};