@wix/patterns 1.480.0 → 1.482.0

package/src/components/EditableTable/EditableCell.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import type { FiltersMap } from '@wix/bex-core';
 import { Text } from '@wix/design-system';
@@ -56,15 +56,25 @@ function _EditableCell<T, F extends FiltersMap>({
     [state, rowKey, columnId],
   );
 
+  // Local new rows still create when focus leaves them, so a half-filled row
+  // is not created.
+  const saveRow = useCallback(() => {
+    if (!state.mutation.isLocalNewRow(rowKey)) {
+      state.cellValue.flushRow(rowKey);
+    }
+  }, [state, rowKey]);
+
   // Auto-start edit if onChange fires before explicit startEdit (e.g., onOptionMarked
   // in select). startEdit resets editingValue, so it must come before setEditingValue.
   // For production cell types, consider the per-callback withEnterEdit pattern from cms-web.
   const handleChange = useCallback(
     (newValue: any) => {
       // A checkbox click is a toggle, same as Enter on the cell. Starting an
-      // edit here would report that click as Enter.
-      if (resolved?.toggleValue) {
+      // edit here would report that click as Enter. In edit mode (keyboard)
+      // the new value goes through editingValue, so commitEdit reports it once.
+      if (resolved?.toggleValue && !cellInteraction.isEditing) {
         state.cellValue.toggleCell(rowKey, columnId);
+        saveRow();
         return;
       }
       if (!cellInteraction.isEditing) {
@@ -72,13 +82,51 @@ function _EditableCell<T, F extends FiltersMap>({
       }
       cellInteraction.setEditingValue(newValue);
     },
-    [resolved, state, cellInteraction, rowKey, columnId],
+    [resolved, state, cellInteraction, rowKey, columnId, saveRow],
   );
 
-  const handleCommit = useCallback(
-    () => cellInteraction.commitEdit(),
-    [cellInteraction],
-  );
+  // A mouse press on another cell blurs this editor, which commits, before the
+  // click moves focus. That commit only buffers the value; the row saves when
+  // focus leaves it, same as Tab. The flag clears on click, not pointerup:
+  // on touch, the blur comes after pointerup.
+  const pressedOtherCellRef = useRef(false);
+  useEffect(() => {
+    if (!isEditing) {
+      return;
+    }
+    const handlePointerDown = (e: PointerEvent) => {
+      const pressedCell = (e.target as Element | null)?.closest?.(
+        '[role="gridcell"]',
+      );
+      pressedOtherCellRef.current =
+        !!pressedCell && pressedCell !== cellRef.current;
+    };
+    // A key press clears it too, so a press that never became a click
+    // cannot stop the next Enter from saving.
+    const clearPress = () => {
+      pressedOtherCellRef.current = false;
+    };
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    document.addEventListener('click', clearPress, true);
+    document.addEventListener('keydown', clearPress, true);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+      document.removeEventListener('click', clearPress, true);
+      document.removeEventListener('keydown', clearPress, true);
+      pressedOtherCellRef.current = false;
+    };
+  }, [isEditing]);
+
+  // An editor commits on Enter or when the user picks a value — save the row
+  // now. Focus moves commit through the framework, so this cell is no longer
+  // editing by then and the row saves when focus leaves it.
+  const handleCommit = useCallback(() => {
+    const wasEditing = cellInteraction.isCellEditing(rowKey, columnId);
+    cellInteraction.commitEdit();
+    if (wasEditing && !pressedOtherCellRef.current) {
+      saveRow();
+    }
+  }, [cellInteraction, rowKey, columnId, saveRow]);
 
   const handleCancel = useCallback(
     () => cellInteraction.cancelEdit(),

package/src/components/EditableTable/EditableCell.uni.driver.ts

@@ -8,6 +8,7 @@ import { SpecificValuesEditUniDriver } from './cellTypes/text/SpecificValuesEdit
 import { DateEditUniDriver } from './cellTypes/date/Edit.uni.driver';
 import { ReferenceEditUniDriver } from './cellTypes/reference/Edit.uni.driver';
 import { AddressEditUniDriver } from './cellTypes/address/Edit.uni.driver';
+import { ObjectEditUniDriver } from './cellTypes/object/Edit.uni.driver';
 
 export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
   return {
@@ -91,6 +92,9 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
 
     getAddressEdit: () => AddressEditUniDriver(base, body),
 
+    /** Get the object (JSON) cell edit driver (for object columns) */
+    getObjectEdit: () => ObjectEditUniDriver(base, body),
+
     /** Right-click the cell (opens context menu) */
     rightClick: async () => {
       const el = await base.getNative();

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -346,12 +346,18 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
         );
         const prevKey =
           rowIdx > 0 ? state.keyedItems[rowIdx - 1].key : undefined;
-        startEditingNewRow(state, state.addItem(prevKey));
+        startEditingNewRow(
+          state,
+          state.addItem(prevKey, 'Row Context Menu - Above'),
+        );
         onClose();
         break;
       }
       case 'add-below':
-        startEditingNewRow(state, state.addItem(targetRowKey));
+        startEditingNewRow(
+          state,
+          state.addItem(targetRowKey, 'Row Context Menu - Below'),
+        );
         onClose();
         break;
       case 'duplicate':

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

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

package/src/components/EditableTable/HeaderFieldActions.tsx

@@ -46,7 +46,7 @@ function _HeaderFieldActions<T, F extends FiltersMap>({
   );
 
   const { toolbar } = state;
-  const { customColumnsState, panels, toolbarFiltersState } = toolbar;
+  const { customColumnsState, toolbarFiltersState } = toolbar;
   const source = toolbar.collectionFieldsSource;
 
   // Source-backed columns (their id maps to a source field) get the source's
@@ -59,7 +59,7 @@ function _HeaderFieldActions<T, F extends FiltersMap>({
     field && source?.fieldActionHandlers
       ? source.fieldActionHandlers({
           fieldId: field.id,
-          origin: 'external',
+          origin: 'Table column header',
           location: HEADER_LOCATION,
         })
       : null;
@@ -80,11 +80,11 @@ function _HeaderFieldActions<T, F extends FiltersMap>({
       state.sort(id, { forceDirection: 'desc' });
   }
 
-  const hasFilter =
+  if (
     toolbarFiltersState &&
-    state.collection.query.customFilters[column.id] != null;
-  if (hasFilter) {
-    handlers.filter = () => panels.openSidePanel('filters');
+    state.collection.query.customFilters[column.id] != null
+  ) {
+    handlers.filter = () => toolbarFiltersState.openFromColumnHeader();
   }
 
   const groups = buildFieldActionGroups({
@@ -99,6 +99,7 @@ function _HeaderFieldActions<T, F extends FiltersMap>({
           reportBi: toolbar.reportBi,
           location: HEADER_LOCATION,
           listSize: source.fieldsSource.manageableFields.length,
+          fieldType: state.bi.fieldTypeOf(column.id),
         }
       : undefined,
   });

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout2017356721";
+var _namespace_ = "CellViewLayout248990959";
 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":"CellViewLayout2017356721__root"};
+export var classes = {"root":"CellViewLayout248990959__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_ = "Edit1962257121";
+var _namespace_ = "Edit290107507";
 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":"Edit1962257121__root","addressInput":"Edit1962257121__addressInput"};
+export var classes = {"root":"Edit290107507__root","addressInput":"Edit290107507__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/address/Edit.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { Box, Text } from '@wix/design-system';
 import { AddressInput } from '@wix/patterns-fields';
 import type { Address, AtlasService } from '@wix/patterns-fields';
@@ -43,8 +43,18 @@ export const AddressEdit: React.FC<
       ? editTrigger.key
       : undefined;
 
+  const lastKeyRef = useRef<string | null>(null);
+  const addressInputRef = useRef<{ focus: () => void } | null>(null);
+
+  // This editor is lazy-loaded, so on first use it mounts after the cell has
+  // already tried to focus it.
+  useEffect(() => {
+    addressInputRef.current?.focus();
+  }, []);
+
   const handleKeyDownCapture = useCallback(
     (e: React.KeyboardEvent) => {
+      lastKeyRef.current = e.key;
       if (e.key === 'Escape') {
         e.preventDefault();
         e.stopPropagation();
@@ -54,6 +64,14 @@ export const AddressEdit: React.FC<
     [onCancel],
   );
 
+  // Fires on Enter or Tab when no suggestion was picked. A picked suggestion
+  // resolves asynchronously and commits through onSelectAddress instead.
+  const handleManualInput = useCallback(() => {
+    if (lastKeyRef.current === 'Enter') {
+      onCommit();
+    }
+  }, [onCommit]);
+
   const handleBlur = useCallback(
     (e: React.FocusEvent<HTMLDivElement>) => {
       if (e.currentTarget.contains(e.relatedTarget as Node | null)) {
@@ -74,6 +92,7 @@ export const AddressEdit: React.FC<
     >
       <AddressInput
         ref={(instance) => {
+          addressInputRef.current = instance;
           if (inputRef) {
             inputRef.current = instance;
           }
@@ -81,6 +100,7 @@ export const AddressEdit: React.FC<
         value={value ?? undefined}
         onChange={(address) => onChange(address ?? null)}
         onSelectAddress={onCommit}
+        onManuallyInput={handleManualInput}
         atlasService={atlasService}
         initialSearchText={initialSearchText}
         size="small"

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4264936297";
+var _namespace_ = "Edit1226354150";
 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":"Edit4264936297__root","jsonInput":"Edit4264936297__jsonInput"};
+export var classes = {"root":"Edit1226354150__root","jsonInput":"Edit1226354150__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/array/Edit.tsx

@@ -3,6 +3,7 @@ import type { InputArea } from '@wix/design-system';
 import { Box } from '@wix/design-system';
 import { CellJsonInput } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
+import { useMultilineEditKeyboard } from '../useMultilineEditKeyboard';
 import { classes } from './Edit.st.css.js';
 
 export const ArrayEdit: React.FC<CellEditProps<unknown[]>> = ({
@@ -12,7 +13,6 @@ export const ArrayEdit: React.FC<CellEditProps<unknown[]>> = ({
   onCancel,
   inputRef,
 }) => {
-  const committedRef = useRef(false);
   const inputAreaRef = useRef<InputArea | null>(null);
 
   useEffect(() => {
@@ -28,22 +28,10 @@ export const ArrayEdit: React.FC<CellEditProps<unknown[]>> = ({
     [onChange],
   );
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        committedRef.current = true;
-        onCancel();
-      }
-    },
-    [onCancel],
-  );
-
-  const handleBlur = useCallback(() => {
-    if (!committedRef.current) {
-      onCommit();
-    }
-  }, [onCommit]);
+  const { handleKeyDown, handleBlur } = useMultilineEditKeyboard({
+    onCommit,
+    onCancel,
+  });
 
   return (
     <Box width="100%" height="100%">

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2305842550";
+var _namespace_ = "Edit3486629839";
 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":"Edit2305842550__root","booleanEdit":"Edit2305842550__booleanEdit"};
+export var classes = {"root":"Edit3486629839__root","booleanEdit":"Edit3486629839__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/Edit.tsx

@@ -8,6 +8,7 @@ export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
   onChange,
   onCommit,
   onCancel,
+  inputRef,
 }) => {
   const handleChange = useCallback(
     (checked: boolean) => {
@@ -43,6 +44,11 @@ export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
       className={classes.booleanEdit}
     >
       <CellCheckbox
+        ref={(instance) => {
+          if (inputRef) {
+            inputRef.current = instance;
+          }
+        }}
         dataHook="boolean-checkbox"
         checked={!!value}
         onChange={handleChange}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1575924361";
+var _namespace_ = "View1045276149";
 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":"View1575924361__root","booleanView":"View1575924361__booleanView"};
+export var classes = {"root":"View1045276149__root","booleanView":"View1045276149__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_ = "Edit2265207584";
+var _namespace_ = "Edit3419740419";
 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":"Edit2265207584__root"};
+export var classes = {"root":"Edit3419740419__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,4 +1,3 @@
 .dateInput {
-  width: 100%;
   margin-left: -1px;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit680134571";
+var _namespace_ = "Edit2522559292";
 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":"Edit680134571__root","dateInput":"Edit680134571__dateInput"};
+export var classes = {"root":"Edit2522559292__root","dateInput":"Edit2522559292__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.tsx

@@ -1,8 +1,13 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { DatePicker } from '@wix/design-system';
-import { closeDatePickerCalendar } from '@wix/patterns-fields';
+import {
+  closeDatePickerCalendar,
+  onSameDayCalendarPick,
+  typedDateInputProps,
+} from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { mergeDate } from '../datetime/mergeDateTime';
 import { classes } from './Edit.st.css.js';
 
 function isValidDate(value: Date | string | null | undefined): boolean {
@@ -22,6 +27,7 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
   editTrigger,
 }) => {
   const datePickerRef = useRef<DatePicker | null>(null);
+  const inputElementRef = useRef<HTMLInputElement | null>(null);
   const validDate = isValidDate(value);
 
   // Auto-open calendar when entering edit mode via type-to-edit
@@ -47,6 +53,12 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
       ? value
       : new Date(value)
     : null;
+  const pickerValue =
+    dateValue && !isNaN(dateValue.getTime()) ? dateValue : undefined;
+  // WDS rewrites the input text whenever `value` changes, so typed dates
+  // must not reach the picker until the edit ends. The calendar keeps
+  // highlighting this date while the user types.
+  const [initialPickerValue] = useState(pickerValue);
 
   const handleChange = useCallback(
     (date: Date) => {
@@ -56,6 +68,37 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
     [onChange, onCommit],
   );
 
+  // The edit value may no longer be the frozen day, so picking it commits too.
+  useEffect(
+    () =>
+      onSameDayCalendarPick(datePickerRef.current, (date) =>
+        handleChange(mergeDate(initialPickerValue ?? null, date)),
+      ),
+    [handleChange, initialPickerValue],
+  );
+
+  // A typed date is local midnight. Keep the current time of day, as a
+  // calendar pick does.
+  const handleType = useCallback(
+    (date: Date) => onChange(mergeDate(initialPickerValue ?? null, date)),
+    [onChange, initialPickerValue],
+  );
+
+  const handleEnter = useCallback(
+    (date: Date) => {
+      handleType(date);
+      onCommit();
+    },
+    [handleType, onCommit],
+  );
+
+  const handleEmpty = useCallback(() => onChange(null), [onChange]);
+
+  const handleEmptyEnter = useCallback(() => {
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -80,19 +123,30 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
       <DatePicker
         ref={datePickerRef}
         size="small"
+        width="100%"
         inputProps={{
           border: 'none',
           prefix: <span />,
           ...(validDate
             ? {}
             : { value: typeof value === 'string' ? value : '' }),
+          // Typing doesn't commit: Enter or leaving the cell does.
+          ...typedDateInputProps({
+            picker: datePickerRef,
+            input: inputElementRef,
+            onEmpty: handleEmpty,
+            onEmptyEnter: handleEmptyEnter,
+            onType: handleType,
+            onEnter: handleEnter,
+          }),
           inputRef: (el: HTMLInputElement) => {
+            inputElementRef.current = el;
             if (inputRef) {
               inputRef.current = el;
             }
           },
         }}
-        value={dateValue && !isNaN(dateValue.getTime()) ? dateValue : undefined}
+        value={initialPickerValue}
         onChange={handleChange}
         popoverProps={{ appendTo: 'window', moveBy: { y: 4 } }}
         className={classes.dateInput}

package/src/components/EditableTable/cellTypes/date/Edit.uni.driver.ts

@@ -14,5 +14,7 @@ export function DateEditUniDriver(base: UniDriver, body: UniDriver) {
     ) => datePicker.inputDriver.keyDown({ key, ...opts }),
     blur: () => datePicker.inputDriver.blur(),
     clickInput: () => datePicker.inputDriver.click(),
+    enterText: (text: string) => datePicker.inputDriver.enterText(text),
+    hasClearButton: () => datePicker.inputDriver.hasClearButton(),
   };
 }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3062184052";
+var _namespace_ = "Edit3461277649";
 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":"Edit3062184052__root","half":"Edit3062184052__half","dateHalf":"Edit3062184052__dateHalf Edit3062184052__half","timeHalf":"Edit3062184052__timeHalf Edit3062184052__half","divider":"Edit3062184052__divider","passiveText":"Edit3062184052__passiveText","placeholderText":"Edit3062184052__placeholderText Edit3062184052__passiveText"};
+export var classes = {"root":"Edit3461277649__root","half":"Edit3461277649__half","dateHalf":"Edit3461277649__dateHalf Edit3461277649__half","timeHalf":"Edit3461277649__timeHalf Edit3461277649__half","divider":"Edit3461277649__divider","passiveText":"Edit3461277649__passiveText","placeholderText":"Edit3461277649__placeholderText Edit3461277649__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};