@wix/patterns-fields 1.29.0 → 1.32.0

package/src/__tests__/components/document/cell-document-edit.spec.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CellDocumentEdit } from '../../../components/document/cell-document-edit';
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+
+jest.mock('@wix/bex-core/react', () => ({
+  ...jest.requireActual('@wix/bex-core/react'),
+  useWixPatternsContainer: () => ({
+    environment: { msid: 'test-meta-site-id' },
+  }),
+}));
+
+const mockCallMedia = jest.fn();
+const mockDownloadMedia = jest.fn();
+const mockOnOpen = jest.fn(() => jest.fn());
+let mockLoading = false;
+
+jest.mock('../../../components/media-control/use-media-control', () => ({
+  useMediaControl: () => ({
+    callMedia: mockCallMedia,
+    downloadMedia: mockDownloadMedia,
+    loading: mockLoading,
+  }),
+}));
+
+jest.mock('../../../components/media-control/use-paste-url-form', () => ({
+  usePasteURLForm: () => ({
+    isOpen: false,
+    title: '',
+    onOpen: mockOnOpen,
+    onClose: jest.fn(),
+    onSave: jest.fn(),
+  }),
+}));
+
+const DOC_URI =
+  'wix:document://v1/ugd/fefc9f_d8295aad65e0419fb9301388ef94369c.pdf/wix-pdf.pdf';
+
+describe('CellDocumentEdit', () => {
+  beforeEach(() => {
+    mockLoading = false;
+  });
+
+  const setup = (
+    value: string | null,
+    fieldId = 'document-edit-test-col',
+  ) =>
+    render(
+      <CellDocumentEdit
+        value={value}
+        onChange={jest.fn()}
+        onCommit={jest.fn()}
+        onCancel={jest.fn()}
+        dataHook="edit"
+        fieldId={fieldId}
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+  it('renders the Tag with the caller-provided fieldId', () => {
+    setup(DOC_URI, 'document-edit-col-1');
+    expect(screen.getByTestId('document-edit-tag').id).toBe(
+      'document-edit-col-1',
+    );
+  });
+
+  it('renders add button when value is null', () => {
+    setup(null);
+    expect(
+      screen.getByTestId('document-edit-add-button'),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId('document-edit-tag')).not.toBeInTheDocument();
+  });
+
+  it('exposes the Loader via data-hook="loader" inside the edit container while loading (Edit.uni.driver isLoading() contract)', () => {
+    mockLoading = true;
+    setup(DOC_URI);
+
+    const container = screen.getByTestId('edit');
+    expect(container.querySelector('[data-hook="loader"]')).not.toBeNull();
+  });
+
+  it('icon-only buttons have an accessible name (aria-label) in both empty and populated states', () => {
+    setup(null);
+    expect(
+      screen.getByTestId('document-edit-add-button').getAttribute('aria-label'),
+    ).toBeTruthy();
+    expect(
+      screen
+        .getByTestId('document-edit-paste-url-button')
+        .getAttribute('aria-label'),
+    ).toBeTruthy();
+
+    setup(DOC_URI);
+    expect(
+      screen
+        .getByTestId('document-edit-more-button')
+        .getAttribute('aria-label'),
+    ).toBeTruthy();
+  });
+});

package/src/__tests__/components/document/cell-document-view.spec.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CellDocumentView } from '../../../components/document/cell-document-view';
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+
+const DOC_URI =
+  'wix:document://v1/ugd/fefc9f_d8295aad65e0419fb9301388ef94369c.pdf/wix-pdf.pdf';
+
+describe('CellDocumentView', () => {
+  it('renders the Tag with the caller-provided fieldId', () => {
+    render(
+      <PatternsFieldsTestProvider>
+        <CellDocumentView
+          value={DOC_URI}
+          dataHook="a"
+          fieldId="col-1-row-1"
+        />
+        <CellDocumentView
+          value={DOC_URI}
+          dataHook="b"
+          fieldId="col-1-row-2"
+        />
+      </PatternsFieldsTestProvider>,
+    );
+    const ids = screen
+      .getAllByTestId('cell-document-tag')
+      .map((t) => t.id);
+    expect(ids).toEqual(['col-1-row-1', 'col-1-row-2']);
+  });
+
+  it('renders nothing when value is null', () => {
+    render(
+      <CellDocumentView value={null} dataHook="view" fieldId="any" />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    expect(screen.queryByTestId('view')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('cell-document-tag')).not.toBeInTheDocument();
+  });
+});

package/src/__tests__/components/document/utils.spec.ts

@@ -0,0 +1,28 @@
+import { openDocument } from '../../../components/document/utils';
+
+describe('openDocument', () => {
+  it('opens with rel="noopener noreferrer" to prevent tabnabbing', () => {
+    const created: HTMLAnchorElement[] = [];
+    const realCreateElement = document.createElement.bind(document);
+    const spy = jest
+      .spyOn(document, 'createElement')
+      .mockImplementation((tag: string) => {
+        const el = realCreateElement(tag);
+        if (tag === 'a') {
+          created.push(el as HTMLAnchorElement);
+          (el as HTMLAnchorElement).click = jest.fn();
+        }
+        return el;
+      });
+
+    openDocument('https://example.com/file.pdf');
+
+    expect(created).toHaveLength(1);
+    const link = created[0];
+    expect(link.rel).toBe('noopener noreferrer');
+    expect(link.target).toBe('_blank');
+    expect(link.click).toHaveBeenCalled();
+
+    spy.mockRestore();
+  });
+});

package/src/assets/locale/messages_en.json

@@ -1,14 +1,14 @@
 {
-  "CMS.document.add.button.text": "Add Document",
-  "CMS.document.addMore.button.text": "Add Document",
-  "CMS.document.action.open": "Open",
-  "CMS.document.action.download": "Download",
-  "CMS.document.action.replace": "Replace",
+  "CMS.document.add.button.text": "Add file",
+  "CMS.document.addMore.button.text": "Add file",
+  "CMS.document.action.open": "Open file",
+  "CMS.document.action.download": "Download file",
+  "CMS.document.action.replace": "Choose file",
   "CMS.document.action.replaceWithUrl": "Replace with URL",
-  "CMS.document.action.delete": "Delete",
-  "CMS.document.pasteUrl.button": "Paste URL",
-  "CMS.document.pasteUrl.title": "Paste document URL",
-  "CMS.document.replaceWithUrl.title": "Replace with URL",
+  "CMS.document.action.delete": "Delete file",
+  "CMS.document.pasteUrl.button": "Add file link (URL)",
+  "CMS.document.pasteUrl.title": "Add file link (URL)",
+  "CMS.document.replaceWithUrl.title": "Add file link (URL)",
   "CMS.document.delete.title": "Delete \"{filename}\"?",
   "CMS.document.delete.confirm": "Delete",
   "CMS.document.delete.cancel": "Cancel",
@@ -171,5 +171,6 @@
   "CMS.video.preview": "Preview",
   "CMS.video.download": "Download Video",
   "CMS.video.delete": "Delete Video",
-  "patterns-fields.reference.untitled": "Untitled"
+  "patterns-fields.reference.untitled": "Untitled",
+  "patterns-fields.reference.open_collection": "Open Collection"
 }

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput4170739501";
+var _namespace_ = "addressinput1106484384";
 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":"addressinput4170739501__root","tableAddressInput":"addressinput4170739501__tableAddressInput"};
+export var classes = {"root":"addressinput1106484384__root","tableAddressInput":"addressinput1106484384__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu2215267763";
+var _namespace_ = "actionsmenu2539043764";
 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":"actionsmenu2215267763__root","action":"actionsmenu2215267763__action"};
+export var classes = {"root":"actionsmenu2539043764__root","action":"actionsmenu2539043764__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/form-audio-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield16737968";
+var _namespace_ = "formaudiofield3184549307";
 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":"formaudiofield16737968__root","addItem":"formaudiofield16737968__addItem","mediaTitle":"formaudiofield16737968__mediaTitle"};
+export var classes = {"root":"formaudiofield3184549307__root","addItem":"formaudiofield3184549307__addItem","mediaTitle":"formaudiofield3184549307__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "audioplayer1690888432";
+var _namespace_ = "audioplayer2286934621";
 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":"audioplayer1690888432__root"};
+export var classes = {"root":"audioplayer2286934621__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview592337046";
+var _namespace_ = "colorview2476891254";
 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":"colorview592337046__root","view":"colorview592337046__view","fillPreview":"colorview592337046__fillPreview"};
+export var classes = {"root":"colorview2476891254__root","view":"colorview2476891254__view","fillPreview":"colorview2476891254__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog3203528919";
+var _namespace_ = "deletedialog4190420635";
 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":"deletedialog3203528919__root","layout":"deletedialog3203528919__layout"};
+export var classes = {"root":"deletedialog4190420635__root","layout":"deletedialog4190420635__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,196 @@
+import React from 'react';
+import { Box, IconButton, PopoverMenu, Tag, Tooltip } from '@wix/design-system';
+import {
+  Add,
+  Delete,
+  DocumentSmall,
+  Download,
+  ExternalLink,
+  Link,
+  LinkSmall,
+  MoreSmall,
+  Replace,
+} from '@wix/wix-ui-icons-common';
+import { getMediaTitle, MEDIA_TYPES } from '../../utils/media-utils';
+import { getMediaURL } from '../../auto-field-types';
+import { useTranslations } from '../../hooks';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import {
+  useCellMediaEdit,
+  CellMediaEditShell,
+  MediaFieldType,
+} from '../media-control';
+import { openDocument } from './utils';
+
+export interface CellDocumentEditProps {
+  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 DOM id for the Tag. WDS Tag requires `id` to be present; callers are
+   * responsible for ensuring uniqueness (e.g., derive from columnId).
+   */
+  fieldId: string;
+}
+
+export const CellDocumentEdit: React.FC<CellDocumentEditProps> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook,
+  fieldId,
+}) => {
+  const { t } = useTranslations();
+  const msid = useWixPatternsContainer()?.environment?.msid;
+
+  const mediaEdit = useCellMediaEdit({
+    mediaType: MEDIA_TYPES.ALL_MEDIA,
+    value,
+    onChange,
+    onCommit,
+    onCancel,
+    onStartEdit,
+    inputRef,
+  });
+
+  const pasteUrlTitle = value
+    ? t('CMS.document.replaceWithUrl.title')
+    : t('CMS.document.pasteUrl.title');
+
+  const openPasteUrl = mediaEdit.startEditAndOpenPasteUrl({
+    title: pasteUrlTitle,
+    value: value ?? undefined,
+  });
+
+  const handleOpenDocument = () => {
+    if (!value) {
+      return;
+    }
+    openDocument(getMediaURL(value, msid));
+  };
+
+  const handleDownload = () => {
+    if (!value) {
+      return;
+    }
+    mediaEdit.downloadMedia(value);
+  };
+
+  return (
+    <CellMediaEditShell
+      dataHook={dataHook}
+      mediaEdit={mediaEdit}
+      value={value}
+      fieldType={MediaFieldType.document}
+      gap="SP1"
+    >
+      {value ? (
+        <Box minWidth="0" style={{ flex: '1 1 auto' }}>
+          <Tag
+            id={fieldId}
+            dataHook="document-edit-tag"
+            removable={false}
+            thumb={<DocumentSmall />}
+            size="small"
+            maxWidth="100%"
+          >
+            {getMediaTitle(value)}
+          </Tag>
+        </Box>
+      ) : (
+        <Tooltip content={t('CMS.document.add.button.text')} appendTo="window">
+          <IconButton
+            size="tiny"
+            priority="secondary"
+            dataHook="document-edit-add-button"
+            ariaLabel={t('CMS.document.add.button.text')}
+            onClick={mediaEdit.handleCallMedia}
+          >
+            <Add />
+          </IconButton>
+        </Tooltip>
+      )}
+
+      {value ? (
+        <PopoverMenu
+          textSize="small"
+          appendTo="window"
+          triggerElement={
+            <Tooltip
+              content={t('auto-patterns.fields.more_actions_tooltip')}
+              appendTo="window"
+            >
+              <IconButton
+                size="tiny"
+                priority="tertiary"
+                dataHook="document-edit-more-button"
+                ariaLabel={t('auto-patterns.fields.more_actions_tooltip')}
+              >
+                <MoreSmall />
+              </IconButton>
+            </Tooltip>
+          }
+        >
+          <PopoverMenu.MenuItem
+            dataHook="document-edit-action-replace"
+            text={t('CMS.document.action.replace')}
+            prefixIcon={<Replace />}
+            onClick={mediaEdit.handleCallMedia}
+          />
+          <PopoverMenu.MenuItem
+            dataHook="document-edit-action-replace-url"
+            text={t('CMS.document.action.replaceWithUrl')}
+            prefixIcon={<Link />}
+            onClick={openPasteUrl}
+          />
+          <PopoverMenu.Divider />
+          <PopoverMenu.MenuItem
+            dataHook="document-edit-action-open"
+            text={t('CMS.document.action.open')}
+            prefixIcon={<ExternalLink />}
+            onClick={handleOpenDocument}
+          />
+          <PopoverMenu.MenuItem
+            dataHook="document-edit-action-download"
+            text={t('CMS.document.action.download')}
+            prefixIcon={<Download />}
+            onClick={handleDownload}
+          />
+          <PopoverMenu.Divider />
+          <PopoverMenu.MenuItem
+            dataHook="document-edit-action-delete"
+            text={t('CMS.document.action.delete')}
+            skin="destructive"
+            prefixIcon={<Delete />}
+            onClick={mediaEdit.handleDelete}
+          />
+        </PopoverMenu>
+      ) : (
+        <Tooltip content={t('CMS.document.pasteUrl.button')} appendTo="window">
+          <IconButton
+            size="tiny"
+            priority="tertiary"
+            dataHook="document-edit-paste-url-button"
+            ariaLabel={t('CMS.document.pasteUrl.button')}
+            onClick={openPasteUrl}
+          >
+            <LinkSmall />
+          </IconButton>
+        </Tooltip>
+      )}
+    </CellMediaEditShell>
+  );
+};
+
+CellDocumentEdit.displayName = 'CellDocumentEdit';

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box, Tag } from '@wix/design-system';
+import { DocumentSmall } from '@wix/wix-ui-icons-common';
+
+import { getMediaTitle } from '../../utils/media-utils';
+
+export interface CellDocumentViewProps {
+  value: string | null | undefined;
+  dataHook?: string;
+  /**
+   * Stable DOM id for the Tag. WDS Tag requires `id` to be present; callers are
+   * responsible for ensuring uniqueness (e.g., derive from columnId + rowKey).
+   */
+  fieldId: string;
+}
+
+export const CellDocumentView: React.FC<CellDocumentViewProps> = ({
+  value,
+  dataHook,
+  fieldId,
+}) => {
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <Box
+      dataHook={dataHook}
+      verticalAlign="middle"
+      padding="0 8px"
+      height="100%"
+      width="100%"
+      minWidth="0"
+    >
+      <Tag
+        id={fieldId}
+        dataHook="cell-document-tag"
+        removable={false}
+        thumb={<DocumentSmall />}
+        size="small"
+        maxWidth="100%"
+      >
+        {getMediaTitle(value)}
+      </Tag>
+    </Box>
+  );
+};
+
+CellDocumentView.displayName = 'CellDocumentView';

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield2858188729";
+var _namespace_ = "formdocumentfield1222498168";
 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":"formdocumentfield2858188729__root","viewWrapper":"formdocumentfield2858188729__viewWrapper","textWidth":"formdocumentfield2858188729__textWidth","documentLoader":"formdocumentfield2858188729__documentLoader","addDocument":"formdocumentfield2858188729__addDocument","addItemWrapper":"formdocumentfield2858188729__addItemWrapper"};
+export var classes = {"root":"formdocumentfield1222498168__root","viewWrapper":"formdocumentfield1222498168__viewWrapper","textWidth":"formdocumentfield1222498168__textWidth","documentLoader":"formdocumentfield1222498168__documentLoader","addDocument":"formdocumentfield1222498168__addDocument","addItemWrapper":"formdocumentfield1222498168__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/index.ts

@@ -1,4 +1,6 @@
 export * from './document-view';
+export * from './cell-document-view';
+export * from './cell-document-edit';
 
 // NOTE: Heavy exports (FormDocumentField, DocumentControl, etc.) have been moved to './form' to prevent bundle bloat.
 // Import them explicitly: import { FormDocumentField } from '../fields/components/document/form';

package/src/components/document/utils.ts

@@ -2,6 +2,7 @@ export const openDocument = (url: string) => {
   const link = document.createElement('a');
   link.href = url;
   link.target = '_blank';
+  link.rel = 'noopener noreferrer';
   document.body.appendChild(link);
 
   link.click();

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation2676330691";
+var _namespace_ = "exclamation2043409223";
 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":"exclamation2676330691__root","exclamation":"exclamation2676330691__exclamation","actions":"exclamation2676330691__actions","action":"exclamation2676330691__action"};
+export var classes = {"root":"exclamation2043409223__root","exclamation":"exclamation2043409223__exclamation","actions":"exclamation2043409223__actions","action":"exclamation2043409223__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext2637065310";
+var _namespace_ = "highlightedtext3214744979";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext2637065310__root","substring":"highlightedtext2637065310__substring"};
-export var keyframes = {"highlighted":"highlightedtext2637065310__highlighted","highlighted-match":"highlightedtext2637065310__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3214744979__root","substring":"highlightedtext3214744979__substring"};
+export var keyframes = {"highlighted":"highlightedtext3214744979__highlighted","highlighted-match":"highlightedtext3214744979__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {};