@wix/patterns-fields 1.0.0

package/src/components/rich-text/rich-text-input/rich-text-editor/utils/filter-html.ts

@@ -0,0 +1,362 @@
+import _ from 'lodash';
+
+interface FilterHtmlOptions {
+  allowIframes?: boolean;
+  allowHeadTags?: boolean;
+  allowOneSelfClosingMetaTag?: boolean;
+}
+
+type WhiteList = Record<string, string[]>;
+
+const ADDITIONAL_ALLOWED_ATTRIBUTES: string[] = [
+  'style',
+  'class',
+  'dir',
+  'wix-comp',
+];
+
+const ALLOWED_CSS_PROPERTIES: string[] = [
+  'color',
+  'background-color',
+  'font-size',
+  'font-family',
+  'font-style',
+  'font-weight',
+  'text-decoration',
+  'text-align',
+  'line-height',
+  'text-shadow',
+  'letter-spacing',
+  'margin-left',
+  'direction',
+  'position',
+  'z-index',
+  'top',
+  'left',
+];
+
+const IFRAME_TAG_WHITE_LIST: WhiteList = {
+  iframe: [
+    'frameborder',
+    'height',
+    'width',
+    'src',
+    'marginheight',
+    'marginwidth',
+    'name',
+    'scrolling',
+    'longdesc',
+    ...ADDITIONAL_ALLOWED_ATTRIBUTES,
+  ],
+};
+
+const HEAD_TAG_WHITE_LIST: WhiteList = {
+  meta: [
+    'content',
+    'property',
+    'scheme',
+    'name',
+    'charset',
+    'id',
+    'http-equiv',
+    'accesskey',
+    'dir',
+    'lang',
+    'title',
+    ...ADDITIONAL_ALLOWED_ATTRIBUTES,
+  ],
+  link: ['rel', 'href', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+};
+
+function generateDefaultWhiteList(): WhiteList {
+  const baseWhiteList: WhiteList = {
+    a: ['href', 'target', 'title', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    abbr: ['title', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    address: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    area: ['shape', 'coords', 'href', 'alt', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    article: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    aside: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    audio: [
+      'autoplay',
+      'controls',
+      'loop',
+      'preload',
+      'src',
+      ...ADDITIONAL_ALLOWED_ATTRIBUTES,
+    ],
+    b: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    bdi: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    bdo: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    big: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    blockquote: ['cite', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    br: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    caption: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    center: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    cite: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    code: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    col: ['align', 'valign', 'span', 'width', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    colgroup: [
+      'align',
+      'valign',
+      'span',
+      'width',
+      ...ADDITIONAL_ALLOWED_ATTRIBUTES,
+    ],
+    dd: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    del: ['datetime', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    details: ['open', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    div: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    dl: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    dt: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    em: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    font: ['color', 'size', 'face', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    footer: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    h1: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    h2: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    h3: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    h4: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    h5: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    h6: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    header: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    hr: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    i: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    img: [
+      'src',
+      'alt',
+      'title',
+      'width',
+      'height',
+      ...ADDITIONAL_ALLOWED_ATTRIBUTES,
+    ],
+    ins: ['datetime', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    li: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    mark: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    nav: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    ol: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    p: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    pre: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    s: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    section: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    small: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    span: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    sub: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    sup: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    strong: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    table: [
+      'width',
+      'border',
+      'align',
+      'valign',
+      ...ADDITIONAL_ALLOWED_ATTRIBUTES,
+    ],
+    tbody: ['align', 'valign', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    td: [
+      'width',
+      'rowspan',
+      'colspan',
+      'align',
+      'valign',
+      ...ADDITIONAL_ALLOWED_ATTRIBUTES,
+    ],
+    tfoot: ['align', 'valign', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    th: [
+      'width',
+      'rowspan',
+      'colspan',
+      'align',
+      'valign',
+      ...ADDITIONAL_ALLOWED_ATTRIBUTES,
+    ],
+    thead: ['align', 'valign', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    tr: ['rowspan', 'align', 'valign', ...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    tt: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    u: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    ul: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    video: [
+      'autoplay',
+      'controls',
+      'loop',
+      'preload',
+      'src',
+      'height',
+      'width',
+      ...ADDITIONAL_ALLOWED_ATTRIBUTES,
+    ],
+    // Additional secure tags
+    strike: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    hatul: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+    wline: [...ADDITIONAL_ALLOWED_ATTRIBUTES],
+  };
+
+  // Add custom attributes to anchor tags
+  if (baseWhiteList.a) {
+    baseWhiteList.a.push(
+      'data-anchor',
+      'dataquery',
+      'data-content',
+      'data-no-physical-url',
+      'data-type',
+      'id',
+      'rel',
+    );
+  }
+
+  return baseWhiteList;
+}
+
+const DEFAULT_WHITELIST: WhiteList = generateDefaultWhiteList();
+
+function isValidLinkAttributeValue(
+  tag: string,
+  attributeName: string,
+  value: string,
+): boolean {
+  if ((tag === 'a' || tag === 'link') && attributeName === 'href') {
+    if (/^tel:[^A-Za-z]+$/i.test(value)) {
+      return true;
+    }
+
+    if (/^ftp:\/\/[^\s]*$/.test(value)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function isValidCssProperty(property: string): boolean {
+  return ALLOWED_CSS_PROPERTIES.includes(property);
+}
+
+function sanitizeStyleAttribute(styleValue: string): string {
+  const styles = styleValue.split(';').filter(Boolean);
+  const safeStyles = styles
+    .map((style) => {
+      const [property, value] = style.split(':').map((s) => s.trim());
+      if (property && value && isValidCssProperty(property)) {
+        // Basic CSS value sanitization - remove potentially dangerous content
+        const safeValue = value.replace(/[<>'"]/g, '');
+        return `${property}: ${safeValue}`;
+      }
+      return '';
+    })
+    .filter(Boolean);
+
+  return safeStyles.join('; ');
+}
+
+export function filterHtmlString(
+  componentHtml: string,
+  options?: FilterHtmlOptions,
+): string {
+  options = options || {};
+  const whiteList: WhiteList = _.assign({}, DEFAULT_WHITELIST);
+
+  if (options.allowIframes) {
+    _.assign(whiteList, IFRAME_TAG_WHITE_LIST);
+  }
+
+  if (options.allowHeadTags) {
+    _.assign(whiteList, HEAD_TAG_WHITE_LIST);
+  }
+
+  // For now, return a basic implementation that allows safe HTML through
+  // This is a simplified version - in production, you'd want to use a proper HTML sanitizer library
+  // like DOMPurify or similar
+
+  // Create a temporary div to parse HTML
+  const div = document.createElement('div');
+  div.innerHTML = componentHtml;
+
+  function sanitizeElement(element: Element): string {
+    const tagName = element.tagName.toLowerCase();
+    const allowedAttrs = whiteList[tagName] || [];
+
+    if (!whiteList[tagName] && tagName !== 'script') {
+      // Tag not in whitelist - return inner content only
+      return Array.from(element.childNodes)
+        .map((child) => {
+          if (child.nodeType === Node.TEXT_NODE) {
+            return child.textContent || '';
+          } else if (child.nodeType === Node.ELEMENT_NODE) {
+            return sanitizeElement(child as Element);
+          }
+          return '';
+        })
+        .join('');
+    }
+
+    // Build sanitized attributes
+    const attrs: string[] = [];
+    for (const attr of Array.from(element.attributes)) {
+      const attrName = attr.name.toLowerCase();
+
+      if (allowedAttrs.includes(attrName)) {
+        let attrValue = attr.value;
+
+        // Special handling for style attribute
+        if (attrName === 'style') {
+          attrValue = sanitizeStyleAttribute(attrValue);
+        }
+
+        // Special handling for href attribute
+        if (
+          attrName === 'href' &&
+          !isValidLinkAttributeValue(tagName, attrName, attrValue)
+        ) {
+          // Only allow safe protocols
+          if (
+            !/^(https?:|mailto:|tel:|#|\/)/i.test(attrValue) &&
+            !isValidLinkAttributeValue(tagName, attrName, attrValue)
+          ) {
+            continue; // Skip unsafe href
+          }
+        }
+
+        attrs.push(`${attrName}="${attrValue.replace(/"/g, '&quot;')}"`);
+      }
+    }
+
+    // Handle child nodes
+    const children = Array.from(element.childNodes)
+      .map((child) => {
+        if (child.nodeType === Node.TEXT_NODE) {
+          return child.textContent || '';
+        } else if (child.nodeType === Node.ELEMENT_NODE) {
+          return sanitizeElement(child as Element);
+        }
+        return '';
+      })
+      .join('');
+
+    const attrString = attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+
+    // Self-closing tags
+    if (['br', 'hr', 'img', 'meta', 'link'].includes(tagName)) {
+      return `<${tagName}${attrString} />`;
+    }
+
+    return `<${tagName}${attrString}>${children}</${tagName}>`;
+  }
+
+  let safeHtmlString = Array.from(div.childNodes)
+    .map((child) => {
+      if (child.nodeType === Node.TEXT_NODE) {
+        return child.textContent || '';
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        return sanitizeElement(child as Element);
+      }
+      return '';
+    })
+    .join('');
+
+  if (options.allowOneSelfClosingMetaTag) {
+    // this regex gets the first tag inside the string since we allow only a single self closing tag
+    safeHtmlString = safeHtmlString.replace(
+      /(<meta[^<]*?)\s?\/?\s?>.*/,
+      '$1 />',
+    );
+  }
+
+  return safeHtmlString;
+}

package/src/components/rich-text/rich-text-input/rich-text-editor/utils/index.ts

@@ -0,0 +1,6 @@
+export * from './block';
+export * from './edit';
+export * from './filter-html';
+export * from './normalize-attributes';
+export * from './render';
+export * from './style-to-css';

package/src/components/rich-text/rich-text-input/rich-text-editor/utils/normalize-attributes.ts

@@ -0,0 +1,31 @@
+type Attributes = { [key: string]: string };
+type StringMap = { [key: string]: string };
+
+// Lifted from: https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
+const ATTR_NAME_MAP: StringMap = {
+  acceptCharset: 'accept-charset',
+  className: 'class',
+  htmlFor: 'for',
+  httpEquiv: 'http-equiv',
+};
+
+export function normalizeAttributes(attributes?: Attributes) {
+  if (attributes == null) {
+    return attributes;
+  }
+  const normalized: StringMap = {};
+  let didNormalize = false;
+  for (const name of Object.keys(attributes)) {
+    let newName = name;
+
+    if (ATTR_NAME_MAP[name]) {
+      newName = ATTR_NAME_MAP[name];
+      didNormalize = true;
+    }
+
+    if (attributes[name]) {
+      normalized[newName] = attributes[name];
+    }
+  }
+  return didNormalize ? normalized : attributes;
+}

package/src/components/rich-text/rich-text-input/rich-text-editor/utils/render.ts

@@ -0,0 +1,118 @@
+import type { ContentBlock, SelectionState } from 'draft-js';
+import { EditorState, Modifier, RichUtils } from 'draft-js';
+import { Map } from 'immutable';
+
+import { classes } from '../rich-editor.st.css.js';
+
+import { isListItemBlockType } from './block';
+
+// Type helper for dynamic class access
+const dynamicClasses = classes as Record<string, string>;
+
+// unstyled header-one header-two header-three header-four header-five header-six
+// depth-1 depth-2 depth-3 depth-4
+// dir-rtl
+// align-left align-right align-center align-justify
+export function blockStyleFn(block: ContentBlock) {
+  const attributes = block.getData().get('attributes');
+  const style = block.getData().get('style');
+  const blockType = block.getType();
+  const inlineBlockType = block.getData().get('inlineBlockType', 'unstyled');
+
+  const classNames: string[] = [dynamicClasses[blockType]];
+
+  if (attributes && attributes.dir) {
+    classNames.push(dynamicClasses[`dir-${attributes.dir}`]);
+  }
+
+  if (style && style.textAlign) {
+    classNames.push(dynamicClasses[`align-${style.textAlign}`]);
+  }
+
+  if (style && style.margin) {
+    classNames.push(dynamicClasses.withMargin);
+  }
+
+  if (isListItemBlockType(blockType)) {
+    classNames.push(dynamicClasses[inlineBlockType]);
+  }
+
+  return classNames.filter(Boolean).join(' ');
+}
+
+export function getCurrentBlock(editorState: EditorState) {
+  const contentState = editorState.getCurrentContent();
+  const selection = editorState.getSelection();
+  const anchorKey = selection.getAnchorKey();
+  return contentState.getBlockForKey(anchorKey);
+}
+
+export function removeCurrentBlock(editorState: EditorState, command: string) {
+  const contentState = editorState.getCurrentContent();
+  const selection = editorState.getSelection();
+  const anchorKey = selection.getAnchorKey();
+  const index = contentState
+    .getBlockMap()
+    .keySeq()
+    .findIndex((key) => key === anchorKey);
+
+  editorState = RichUtils.toggleBlockType(editorState, 'unstyled');
+
+  if (index === 0) {
+    return editorState;
+  }
+  return RichUtils.handleKeyCommand(editorState, command);
+}
+
+export function splitAndUnstyleBlock(editorState: EditorState) {
+  const contentState = Modifier.splitBlock(
+    editorState.getCurrentContent(),
+    editorState.getSelection(),
+  );
+
+  editorState = EditorState.push(editorState, contentState, 'split-block');
+  return RichUtils.toggleBlockType(editorState, 'unstyled');
+}
+
+export function splitAndCopyInlineBlockType(editorState: EditorState) {
+  const currentContent = editorState.getCurrentContent();
+  const currentSelection = editorState.getSelection();
+  const currentBlock = currentContent.getBlockForKey(
+    currentSelection.getAnchorKey(),
+  );
+  const inlineBlockType = currentBlock
+    .getData()
+    .get('inlineBlockType', 'unstyled');
+
+  let contentState = Modifier.splitBlock(currentContent, currentSelection);
+  contentState = Modifier.mergeBlockData(
+    contentState,
+    contentState.getSelectionAfter(),
+    Map({ inlineBlockType }),
+  );
+
+  return EditorState.push(editorState, contentState, 'split-block');
+}
+
+export function convertBlockToListItem(
+  editorState: EditorState,
+  isOrdered: boolean,
+) {
+  let contentState = editorState.getCurrentContent();
+  let selection = editorState.getSelection();
+  const anchorOffset = selection.getAnchorOffset();
+  const type = isOrdered ? 'ordered-list-item' : 'unordered-list-item';
+  selection = selection.merge({
+    anchorOffset: 0,
+    focusOffset: anchorOffset,
+  }) as SelectionState;
+  contentState = Modifier.replaceText(contentState, selection, '');
+  editorState = EditorState.set(editorState, {
+    currentContent: contentState,
+  });
+  selection = selection.merge({
+    focusOffset: 0,
+  }) as SelectionState;
+  editorState = EditorState.forceSelection(editorState, selection);
+  return RichUtils.toggleBlockType(editorState, type);
+}

package/src/components/rich-text/rich-text-input/rich-text-editor/utils/stylable-helper.ts

@@ -0,0 +1,8 @@
+/**
+ * Helper function to combine Stylable classes dynamically.
+ * Wraps Stylable's RuntimeStylesheet style() function which accepts arguments at runtime
+ * but has outdated TypeScript types.
+ */
+export const combineClasses = (styleFn: Function, ...args: any[]) => {
+  return styleFn(...args);
+};

package/src/components/rich-text/rich-text-input/rich-text-editor/utils/style-to-css.ts

@@ -0,0 +1,90 @@
+type StyleDescr = { [key: string]: number | string };
+
+const VENDOR_PREFIX = /^(moz|ms|o|webkit)-/;
+const NUMERIC_STRING = /^\d+$/;
+const UPPERCASE_PATTERN = /([A-Z])/g;
+
+// Lifted from:
+// https://github.com/facebook/react/blob/ab4ddf64939aebbbc8d31be1022efd56e834c95c/src/renderers/dom/shared/CSSProperty.js
+const isUnitlessNumber = {
+  animationIterationCount: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowSpan: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnSpan: true,
+  gridColumnStart: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // SVG-related properties
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true,
+};
+
+// Lifted from: https://github.com/facebook/react/blob/master/src/renderers/dom/shared/CSSPropertyOperations.js
+function processStyleName(name: string): string {
+  return name
+    .replace(UPPERCASE_PATTERN, '-$1')
+    .toLowerCase()
+    .replace(VENDOR_PREFIX, '-$1-');
+}
+
+// Lifted from: https://github.com/facebook/react/blob/master/src/renderers/dom/shared/dangerousStyleValue.js
+function processStyleValue(name: string, value: number | string): string {
+  let isNumeric;
+
+  if (typeof value === 'string') {
+    isNumeric = NUMERIC_STRING.test(value);
+  } else {
+    isNumeric = true;
+    value = String(value);
+  }
+
+  if (
+    !isNumeric ||
+    value === '0' ||
+    isUnitlessNumber[name as keyof typeof isUnitlessNumber] === true
+  ) {
+    return value;
+  }
+  return value + 'px';
+}
+
+export function styleToCSS(styleDescr: StyleDescr): string {
+  return Object.keys(styleDescr)
+    .map((name) => {
+      const styleValue = processStyleValue(name, styleDescr[name]);
+      const styleName = processStyleName(name);
+      return `${styleName}: ${styleValue}`;
+    })
+    .join('; ');
+}

package/src/components/rich-text/rich-text-view/index.ts

@@ -0,0 +1 @@
+export * from './rich-text-view';

package/src/components/rich-text/rich-text-view/rich-text-view.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { HTMLToText } from '../../../auto-field-types';
+
+import { TextView } from '../../text';
+
+export const RichTextView: React.FC<any> = ({ data, ...props }) => {
+  return (
+    <TextView
+      {...props}
+      data={data && HTMLToText(data, { singleLine: true })}
+    />
+  );
+};

package/src/components/rich-text/types/index.ts

@@ -0,0 +1,16 @@
+export type NoOptions = Record<string, never>;
+
+export type TextKeys = string;
+
+export type RichTextToolbarDropdown = 'header' | 'align';
+
+export type RichTextToolbarButton =
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'ul'
+  | 'ol'
+  | 'clear-formatting'
+  | 'fullscreen'
+  | 'link'
+  | RichTextToolbarDropdown;

package/src/components/text/index.ts

@@ -0,0 +1 @@
+export * from './text-view';

package/src/components/text/text-view.st.css

@@ -0,0 +1,9 @@
+/*
+    Quick fix for getting rid of system tooltips
+    based on https://stackoverflow.com/questions/20974276/prevent-safari-from-showing-tooltip-when-text-overflow-is-hidden-with-ellipsis
+    TODO: fix on WSR level
+*/
+.textView::after {
+    content: '';
+    display: block;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "textview2908615661";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"textview2908615661__root","textView":"textview2908615661__textView"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+