@wix/patterns 1.434.0 → 1.437.0

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.tsx

@@ -4,10 +4,12 @@ import {
   Cell,
   FormField,
   InfoIcon,
+  SectionHelper,
   Text,
   TextButton,
   ToggleSwitch,
 } from '@wix/design-system';
+import type { FieldPiiWarning } from '@wix/bex-core';
 import { Trans } from '../Trans';
 
 interface PiiFormFieldsProps {
@@ -17,12 +19,15 @@ interface PiiFormFieldsProps {
   };
   mode: string;
   language: string;
+  /** Shown only while the toggle is on. */
+  piiWarning?: FieldPiiWarning;
 }
 
 export function PiiFormFields({
   containsPii,
   mode,
   language,
+  piiWarning,
 }: PiiFormFieldsProps) {
   const translateKeys = {
     toggleName:
@@ -33,47 +38,78 @@ export function PiiFormFields({
       'cairo.customFields.addCustomField.modal.PII-setting.toggle.editNote',
   } as const;
   const whyIsItImportantLink = `https://support.wix.com/${language}/article/about-personally-identifiable-information-pii`;
+  const isEdit = mode === 'edit';
 
   return (
-    <Cell span={12}>
-      <FormField>
-        <Box gap="SP1" marginBlockEnd="6px">
-          <ToggleSwitch
-            dataHook="pii-toggle-switch"
-            size="small"
-            disabled={mode === 'edit'}
-            checked={containsPii.value}
-            onChange={(e) => containsPii.onChange(e.target.checked)}
-          />
-          <Text size="small" dataHook="pii-toggle-name">
-            <Trans i18nKey={translateKeys.toggleName} />
-          </Text>
-          <InfoIcon
-            size="small"
-            content={
-              <Trans
-                i18nKey={translateKeys.toggleInfo}
-                components={{
-                  linkVal: (
-                    <TextButton
-                      as="a"
-                      href={whyIsItImportantLink}
-                      underline="always"
-                      size="small"
-                      target="_blank"
-                    />
-                  ),
-                }}
+    <>
+      <Cell span={12}>
+        <FormField>
+          <Box gap="9px" marginBlockEnd={isEdit ? '6px' : undefined}>
+            <ToggleSwitch
+              dataHook="pii-toggle-switch"
+              size="medium"
+              disabled={isEdit}
+              checked={containsPii.value}
+              onChange={(e) => containsPii.onChange(e.target.checked)}
+            />
+            <Box gap="3px">
+              <Text size="small" dataHook="pii-toggle-name">
+                <Trans i18nKey={translateKeys.toggleName} />
+              </Text>
+              <InfoIcon
+                size="small"
+                content={
+                  <Trans
+                    i18nKey={translateKeys.toggleInfo}
+                    components={{
+                      linkVal: (
+                        <TextButton
+                          as="a"
+                          href={whyIsItImportantLink}
+                          underline="always"
+                          size="small"
+                          target="_blank"
+                        />
+                      ),
+                    }}
+                  />
+                }
               />
-            }
-          />
-        </Box>
-      </FormField>
-      <Box>
-        <Text size="small" dataHook="pii-toggle-edit-note">
-          <Trans i18nKey={translateKeys.toggleEditNote} />
-        </Text>
-      </Box>
-    </Cell>
+            </Box>
+          </Box>
+        </FormField>
+        {isEdit && (
+          <Box>
+            <Text size="small" dataHook="pii-toggle-edit-note">
+              <Trans i18nKey={translateKeys.toggleEditNote} />
+            </Text>
+          </Box>
+        )}
+      </Cell>
+      {containsPii.value && piiWarning && (
+        <Cell span={12}>
+          <SectionHelper
+            dataHook="custom-field-modal-pii-warning"
+            skin="warning"
+            showPrefixIcon
+          >
+            {/* Inline, not SectionHelper's `actionText` — that slot renders a
+                bordered button on its own row. */}
+            {piiWarning.text}{' '}
+            {piiWarning.action && (
+              <TextButton
+                dataHook="custom-field-modal-pii-warning-action"
+                size="small"
+                skin="dark"
+                underline="always"
+                onClick={piiWarning.action.onClick}
+              >
+                {piiWarning.action.label}
+              </TextButton>
+            )}
+          </SectionHelper>
+        </Cell>
+      )}
+    </>
   );
 }

package/src/components/CustomFieldModal/CustomFieldModal.tsx

@@ -5,22 +5,10 @@ import { CustomActionModal, MessageActionModal } from '../ActionModal';
 import { CustomFieldForm } from '.';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalPrimaryButton } from './CustomFieldModalPrimaryButton';
-import {
-  CustomFieldModalState,
-  FieldModalSubtitle,
-  Translate,
-} from '@wix/bex-core';
+import { CustomFieldModalState, FieldModalSubtitle } from '@wix/bex-core';
 import { minimalRequiredWdsRuntimeCheck } from '../../minimalRequiredWdsRuntimeCheck';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
-// Lazy so the V2 form (and its subtree) stays out of the main bundle while the
-// flag is off.
-const CustomFieldFormV2 = React.lazy(() =>
-  import(
-    /* webpackChunkName: "CustomFieldFormV2" */ './CustomFieldFormV2'
-  ).then((m) => ({ default: m.CustomFieldFormV2 })),
-);
-
 export const _CustomFieldModal = ({
   state,
 }: {
@@ -35,15 +23,11 @@ export const _CustomFieldModal = ({
     });
   }
 
-  const {
-    translate: t,
-    environment: { language },
-    internalExperiments,
-  } = useWixPatternsContainer();
+  const { translate: t } = useWixPatternsContainer();
 
   const {
     mode,
-    customFieldModalBiReporter: { reportLearnMoreClick, reportModalEndProcess },
+    customFieldModalBiReporter: { reportModalEndProcess },
   } = state;
 
   if (mode === 'new' && state.fieldManagement.maxReached) {
@@ -60,7 +44,6 @@ export const _CustomFieldModal = ({
   const { text } = state.fieldManagement.fieldModal;
   const title = mode === 'new' ? text.addTitle : text.editTitle;
   const addSubtitle = mode === 'new' ? text.addSubtitle : undefined;
-  const useV2Form = internalExperiments?.enabled('newFieldsModal');
 
   return (
     <CustomActionModal
@@ -70,15 +53,7 @@ export const _CustomFieldModal = ({
       subtitle={
         addSubtitle && <CustomFieldModalSubtitle subtitle={addSubtitle} />
       }
-      content={
-        useV2Form ? (
-          <React.Suspense fallback={null}>
-            <CustomFieldFormV2 state={state} />
-          </React.Suspense>
-        ) : (
-          <CustomFieldForm state={state} />
-        )
-      }
+      content={<CustomFieldForm state={state} />}
       primaryButtonText={
         <CustomFieldModalPrimaryButton
           state={state}
@@ -96,52 +71,13 @@ export const _CustomFieldModal = ({
       secondaryButtonOnClick={() =>
         reportModalEndProcess({ endType: 'Cancel' })
       }
-      showFooterDivider={useV2Form}
-      // V2 has no footnote: whether the toggle row shows is the whole signal.
-      footnote={
-        useV2Form || state.fieldManagement.fieldModal.supportsPii ? null : (
-          <Footnote
-            language={language}
-            reportLearnMoreClick={reportLearnMoreClick}
-            t={t}
-          />
-        )
-      }
+      showFooterDivider
     />
   );
 };
 
 export const CustomFieldModal = observer(_CustomFieldModal);
 
-interface FootnoteProps {
-  language: string;
-  reportLearnMoreClick: () => void;
-  t: Translate;
-}
-
-const Footnote: React.FC<FootnoteProps> = ({
-  language,
-  reportLearnMoreClick,
-  t,
-}) => {
-  const isBmHarmonyTheme = useBmHarmonyTheme();
-
-  return (
-    <Text size={isBmHarmonyTheme ? 'tiny' : 'small'} dataHook="pii-footnote">
-      {t('cairo.customFields.addCustomField.modal.PII')}
-      &nbsp;
-      <a
-        href={`https://support.wix.com/${language}/article/about-personally-identifiable-information-pii`}
-        target="_blank"
-        rel="noreferrer"
-        onClick={reportLearnMoreClick}
-      >
-        {t('cairo.customFields.addCustomField.modal.PII.learnMore')}
-      </a>
-    </Text>
-  );
-};
-
 interface CustomFieldModalSubtitleProps {
   subtitle: FieldModalSubtitle;
 }

package/src/components/CustomFieldModal/CustomFieldModal.uni.driver.ts

@@ -6,7 +6,6 @@ import {
   FormFieldUniDriver,
   CheckboxUniDriver,
   InputUniDriver,
-  TextButtonUniDriver,
   LoaderUniDriver,
   FloatingNotificationUniDriver,
   TextUniDriver,
@@ -27,11 +26,6 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       body,
     );
 
-  const getSettingsButton = () =>
-    TextButtonUniDriver(
-      body.$('[data-hook="custom-field-modal-settings-button"]'),
-      body,
-    );
   const getSettingsAccordion = () =>
     AccordionUniDriver(
       body.$('[data-hook="custom-field-modal-settings-accordion"]'),
@@ -48,12 +42,6 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       body,
     );
 
-  const getFieldKeyTooltip = () =>
-    TextUniDriver(
-      body.$('[data-hook="custom-field-modal-fieldKey-tooltip"]'),
-      body,
-    );
-
   const exists = () => getCustomFieldModal().exists();
   const clickConfirm = () =>
     getCustomFieldModal()
@@ -64,7 +52,6 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     getCustomFieldModal()
       .getSecondaryButtonDriver()
       .then((driver: any) => driver.click());
-  const clickAdvancedSettings = () => getSettingsButton().click();
   const isSettingsVisible = () => getSettingsAccordion().exists();
   const getSettingsLabel = () => getSettingsAccordion().getItemTitleAt(0);
   const isSettingsExpanded = () => getSettingsAccordion().isItemExpandedAt(0);
@@ -139,9 +126,6 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
   const getPiiToggleText = () => {
     return TextUniDriver(body.$('[data-hook="pii-toggle-name"]'), body);
   };
-  const getPiiFootnote = () => {
-    return TextUniDriver(body.$('[data-hook="pii-footnote"]'), body);
-  };
   const getPiiToggleSwitch = () => {
     return ToggleSwitchUniDriver(
       body.$('[data-hook="pii-toggle-switch"]'),
@@ -169,12 +153,10 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     getTypeFormFieldDriver,
     getNameFormFieldDriver,
     getKeyFormFieldDriver,
-    getFieldKeyTooltip,
     getSubtitle,
     getPermissionNote,
     getEditPiiNote,
     getPiiToggleText,
-    getPiiFootnote,
     getPiiToggleSwitch,
   });
 
@@ -248,7 +230,6 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     clickConfirm,
     clickClose,
     clickCancel,
-    clickAdvancedSettings,
     isSettingsVisible,
     getSettingsLabel,
     isSettingsExpanded,

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { Box, Dropdown, listItemSelectBuilder } from '@wix/design-system';
+import {
+  AutoComplete,
+  Box,
+  Input,
+  listItemSectionBuilder,
+  listItemSelectBuilder,
+} from '@wix/design-system';
 import { CustomFieldModalState } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
@@ -15,7 +21,7 @@ export const _CustomFieldTypeDropdown = (
   const {
     state: {
       form: {
-        $: { type, name },
+        $: { type, name, containsPii },
       },
       mode,
       fieldManagement: { fieldModal },
@@ -26,42 +32,105 @@ export const _CustomFieldTypeDropdown = (
 
   const { translate: t } = useWixPatternsContainer();
 
-  const fieldTypeOptions = React.useMemo(
-    () =>
-      fieldModal.types.map((option) =>
-        listItemSelectBuilder({
-          dataHook: `custom-field-modal-type-${option.id}`,
-          id: option.id,
-          prefix: (
-            <Box>
-              {getFieldTypeIcon({
-                fieldType: option.patternsType,
-                size: 'medium',
-              })}
-            </Box>
-          ),
-          title: option.label,
-          label: option.label,
-        }),
-      ),
-    [fieldModal.types],
+  const [search, setSearch] = React.useState<string | null>(null);
+  const query = search?.trim().toLowerCase() ?? '';
+
+  const selectedType = fieldModal.types.find(
+    (option) => option.id === type.value,
   );
 
+  const fieldTypeOptions = React.useMemo(() => {
+    const toOption = (option: (typeof fieldModal.types)[number]) =>
+      listItemSelectBuilder({
+        dataHook: `custom-field-modal-type-${option.id}`,
+        id: option.id,
+        prefix: (
+          <Box>
+            {getFieldTypeIcon({
+              fieldType: option.patternsType,
+              size: 'medium',
+            })}
+          </Box>
+        ),
+        title: option.label,
+        subtitle: option.subtitle,
+        label: option.label,
+      });
+
+    if (query) {
+      return fieldModal.types
+        .filter((option) => option.label.toLowerCase().includes(query))
+        .map(toOption);
+    }
+
+    const groups = fieldModal.types.reduce<string[]>((labels, option) => {
+      const label = option.group;
+      if (label && !labels.includes(label)) {
+        labels.push(label);
+      }
+      return labels;
+    }, []);
+
+    if (groups.length === 0) {
+      return fieldModal.types.map(toOption);
+    }
+
+    const grouped = groups.flatMap((label) => [
+      listItemSectionBuilder({
+        id: `custom-field-modal-type-group-${label}`,
+        type: 'subheader',
+        title: label,
+      }),
+      ...fieldModal.types
+        .filter((option) => option.group === label)
+        .map(toOption),
+    ]);
+    const ungrouped = fieldModal.types
+      .filter((option) => !option.group)
+      .map(toOption);
+    return [...grouped, ...ungrouped];
+  }, [fieldModal.types, query]);
+
   return (
-    <Dropdown
+    <AutoComplete
       dataHook="custom-field-modal-type"
       disabled={mode === 'edit'}
-      valueParser={(option) => option.label}
+      value={search ?? selectedType?.label ?? ''}
       selectedId={type.value}
+      prefix={
+        search === null && selectedType ? (
+          <Input.IconAffix>
+            {/* WDS paints input affix icons blue; the type icons stay dark. */}
+            <Box color="D10">
+              {getFieldTypeIcon({
+                fieldType: selectedType.patternsType,
+                size: 'medium',
+              })}
+            </Box>
+          </Input.IconAffix>
+        ) : undefined
+      }
+      onChange={(e) => setSearch(e.target.value)}
       onSelect={({ id }) => {
-        type.onChange(String(id));
+        const nextType = String(id);
+        setSearch(null);
+        if (nextType !== type.value) {
+          // The settings were filled in for the old type; the new one starts fresh.
+          props.state.resetSettingsValues();
+        }
+        type.onChange(nextType);
+        // Read off `props.state` — a destructured computed holds the pre-change value.
+        if (!props.state.typeSupportsPii) {
+          containsPii.onChange(false);
+        }
         setKeyFieldIfNotDirty(generateUniqueKey(name.value));
       }}
+      onClose={() => setSearch(null)}
       popoverProps={{ appendTo: 'window', zIndex: 5001 }}
-      dropdownWidth="258px"
       placeholder={t(
         'cairo.customFields.addCustomField.modal.fieldType.placeholder',
       )}
+      emptyStateMessage={t('cairo.emptyState.subtitle.nothingMatchesCriteria')}
       options={fieldTypeOptions}
     />
   );

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

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

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell4238353398";
+var _namespace_ = "EditableCell2438834753";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell4238353398__root","validationIndicator":"EditableCell4238353398__validationIndicator"};
+export var classes = {"root":"EditableCell2438834753__root","validationIndicator":"EditableCell2438834753__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

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

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

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

package/src/components/EditableTable/cellTypes/address/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2525511369";
+var _namespace_ = "Edit1532512703";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2525511369__root","addressInput":"Edit2525511369__addressInput"};
+export var classes = {"root":"Edit1532512703__root","addressInput":"Edit1532512703__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/array/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2981320112";
+var _namespace_ = "Edit2642251512";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2981320112__root","jsonInput":"Edit2981320112__jsonInput"};
+export var classes = {"root":"Edit2642251512__root","jsonInput":"Edit2642251512__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4150083857";
+var _namespace_ = "Edit3246566280";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit4150083857__root","booleanEdit":"Edit4150083857__booleanEdit"};
+export var classes = {"root":"Edit3246566280__root","booleanEdit":"Edit3246566280__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View772475961";
+var _namespace_ = "View3824637596";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View772475961__root","booleanView":"View772475961__booleanView"};
+export var classes = {"root":"View3824637596__root","booleanView":"View3824637596__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/color/Edit.st.css.ts

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

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4239755524";
+var _namespace_ = "Edit3715610776";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit4239755524__root","dateInput":"Edit4239755524__dateInput"};
+export var classes = {"root":"Edit3715610776__root","dateInput":"Edit3715610776__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};