@wix/patterns 1.431.0 → 1.432.0

package/src/components/CustomFieldModal/CustomFieldFormV2Permissions.tsx

@@ -0,0 +1,212 @@
+import React, { type ReactNode } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Box,
+  Cell,
+  Checkbox,
+  InfoIcon,
+  Layout,
+  Text,
+  TextButton,
+} from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CustomFieldModalState } from '@wix/bex-core';
+import { Trans } from '../Trans';
+
+export interface CustomFieldFormV2PermissionsProps {
+  state: CustomFieldModalState;
+}
+
+interface PermissionCheckbox {
+  dataHook: string;
+  locked: boolean;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+}
+
+const PermissionCheckboxCell = ({
+  dataHook,
+  locked,
+  checked,
+  onChange,
+  label,
+}: PermissionCheckbox & { label: string }) => (
+  <Cell span={2}>
+    <Checkbox
+      dataHook={dataHook}
+      disabled={locked}
+      size="small"
+      onChange={() => onChange(!checked)}
+      checked={checked}
+    >
+      {label}
+    </Checkbox>
+  </Cell>
+);
+
+interface PermissionRowProps {
+  dataHook: string;
+  label: string;
+  tooltip: ReactNode;
+  read: PermissionCheckbox;
+  write: PermissionCheckbox;
+}
+
+/** One audience: who it is, then its read and write checkboxes. Takes plain
+ *  values, so the observer parent stays the one reading the form fields. */
+const PermissionRow = ({
+  dataHook,
+  label,
+  tooltip,
+  read,
+  write,
+}: PermissionRowProps) => {
+  const { translate: t } = useWixPatternsContainer();
+
+  return (
+    <Box dataHook={dataHook}>
+      <Layout>
+        <Cell span={4}>
+          <Box verticalAlign="middle" gap="SP1">
+            <Text size="small">{label}</Text>
+            <InfoIcon size="small" content={tooltip} />
+          </Box>
+        </Cell>
+        <PermissionCheckboxCell
+          {...read}
+          label={t(
+            'cairo.customFields.addCustomField.modal.advancedSettings.read',
+          )}
+        />
+        <PermissionCheckboxCell
+          {...write}
+          label={t(
+            'cairo.customFields.addCustomField.modal.advancedSettings.write',
+          )}
+        />
+      </Layout>
+    </Box>
+  );
+};
+
+export const _CustomFieldFormV2Permissions = (
+  props: CustomFieldFormV2PermissionsProps,
+) => {
+  const { state } = props;
+  const {
+    form: {
+      $: { readApps, readUsers, writeApps, writeUsers },
+    },
+    disabledFields: { permissions },
+    mode,
+  } = state;
+  const defaultPermissions = state.fieldManagement.permissions;
+
+  const {
+    translate: t,
+    environment: { language },
+  } = useWixPatternsContainer();
+
+  const isEdit = mode === 'edit';
+  const showApps = !defaultPermissions?.installedApps?.hide;
+  const showUsers = !defaultPermissions?.siteVisitors?.hide;
+
+  return (
+    <Box direction="vertical" gap="SP2">
+      {(showApps || showUsers) && (
+        <Box>
+          <Text size="tiny" light secondary>
+            {t(
+              'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions.tooltip',
+            )}
+          </Text>
+        </Box>
+      )}
+      {showApps && (
+        <PermissionRow
+          dataHook="custom-field-modal-apps-section"
+          label={t(
+            'cairo.customFields.addCustomField.modal.advancedSettings.externalApps',
+          )}
+          tooltip={
+            <Trans i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.externalApps.tooltip" />
+          }
+          read={{
+            dataHook: 'custom-field-modal-read-apps',
+            locked: isEdit && permissions.read.apps,
+            checked: readApps.value,
+            onChange: readApps.onChange,
+          }}
+          write={{
+            dataHook: 'custom-field-modal-write-apps',
+            locked: isEdit && permissions.write.apps,
+            checked: writeApps.value,
+            onChange: writeApps.onChange,
+          }}
+        />
+      )}
+      {showUsers && (
+        <>
+          <PermissionRow
+            dataHook="custom-field-modal-users-section"
+            label={t(
+              'cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors',
+            )}
+            tooltip={
+              <Trans
+                i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.tooltip"
+                components={{
+                  learnMore: (
+                    <TextButton
+                      underline="always"
+                      skin="light"
+                      size="small"
+                      as="a"
+                      rel="noopener"
+                      target="_blank"
+                      href={`https://support.wix.com/${language}/article/cms-about-datasets`}
+                    />
+                  ),
+                }}
+              />
+            }
+            read={{
+              dataHook: 'custom-field-modal-read-users',
+              locked: isEdit && permissions.read.users,
+              checked: readUsers.value,
+              onChange: readUsers.onChange,
+            }}
+            write={{
+              dataHook: 'custom-field-modal-write-users',
+              locked: isEdit && permissions.write.users,
+              checked: writeUsers.value,
+              onChange: writeUsers.onChange,
+            }}
+          />
+          <Box>
+            <Text size="tiny" light secondary dataHook="permissions-note">
+              <Trans
+                i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.note"
+                components={{
+                  learnMore: (
+                    <TextButton
+                      size="tiny"
+                      as="a"
+                      rel="noopener"
+                      target="_blank"
+                      href={`https://support.wix.com/${language}/article/content-manager-connecting-elements-to-a-collection-using-a-dataset`}
+                    />
+                  ),
+                }}
+              />
+            </Text>
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export const CustomFieldFormV2Permissions = observer(
+  _CustomFieldFormV2Permissions,
+);

package/src/components/CustomFieldModal/CustomFieldModal.tsx

@@ -97,8 +97,10 @@ export const _CustomFieldModal = ({
       secondaryButtonOnClick={() =>
         reportModalEndProcess({ endType: 'Cancel' })
       }
+      showFooterDivider={useV2Form}
+      // V2 has no footnote: whether the toggle row shows is the whole signal.
       footnote={
-        state.fieldManagement.supportsPii ? null : (
+        useV2Form || state.fieldManagement.supportsPii ? null : (
           <Footnote
             language={language}
             reportLearnMoreClick={reportLearnMoreClick}

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

@@ -1,5 +1,6 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
+  AccordionUniDriver,
   MessageModalLayoutUniDriver,
   DropdownUniDriver,
   FormFieldUniDriver,
@@ -31,6 +32,11 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       body.$('[data-hook="custom-field-modal-settings-button"]'),
       body,
     );
+  const getSettingsAccordion = () =>
+    AccordionUniDriver(
+      body.$('[data-hook="custom-field-modal-settings-accordion"]'),
+      body,
+    );
   const getErrorStateNotification = () =>
     FloatingNotificationUniDriver(
       body.$('[data-hook="custom-field-modal-error-state"]'),
@@ -59,6 +65,10 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       .getSecondaryButtonDriver()
       .then((driver: any) => driver.click());
   const clickAdvancedSettings = () => getSettingsButton().click();
+  const isSettingsVisible = () => getSettingsAccordion().exists();
+  const getSettingsLabel = () => getSettingsAccordion().getItemTitleAt(0);
+  const isSettingsExpanded = () => getSettingsAccordion().isItemExpandedAt(0);
+  const clickSettings = () => getSettingsAccordion().clickItemAt(0);
   const isSubmitting = () => getLoader().exists();
 
   const getFormTypeDriver = () =>
@@ -239,6 +249,10 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     clickClose,
     clickCancel,
     clickAdvancedSettings,
+    isSettingsVisible,
+    getSettingsLabel,
+    isSettingsExpanded,
+    clickSettings,
     searchFieldType,
     getFieldTypeOptions,
     isInstalledAppsSectionVisible: () => getInstalledAppsSection().exists(),

package/src/components/CustomFieldModal/CustomFieldTypeDropdownV2.tsx

@@ -21,7 +21,7 @@ export const _CustomFieldTypeDropdownV2 = (
   const {
     state: {
       form: {
-        $: { type, name },
+        $: { type, name, containsPii },
       },
       mode,
       fieldManagement: { creatableFieldTypes },
@@ -57,8 +57,6 @@ export const _CustomFieldTypeDropdownV2 = (
         label: option.label,
       });
 
-    // While searching the list is flat — group headers would name groups whose
-    // other options have been filtered out.
     if (query) {
       return creatableFieldTypes
         .filter((option) => option.label.toLowerCase().includes(query))
@@ -80,7 +78,7 @@ export const _CustomFieldTypeDropdownV2 = (
     const grouped = groups.flatMap((label) => [
       listItemSectionBuilder({
         id: `custom-field-modal-type-group-${label}`,
-        type: 'title',
+        type: 'subheader',
         title: label,
       }),
       ...creatableFieldTypes
@@ -102,10 +100,13 @@ export const _CustomFieldTypeDropdownV2 = (
       prefix={
         search === null && selectedType ? (
           <Input.IconAffix>
-            {getFieldTypeIcon({
-              fieldType: selectedType.patternsType,
-              size: 'medium',
-            })}
+            {/* WDS paints input affix icons blue; the type icons stay dark. */}
+            <Box color="D10">
+              {getFieldTypeIcon({
+                fieldType: selectedType.patternsType,
+                size: 'medium',
+              })}
+            </Box>
           </Input.IconAffix>
         ) : undefined
       }
@@ -113,10 +114,12 @@ export const _CustomFieldTypeDropdownV2 = (
       onSelect={({ id }) => {
         setSearch(null);
         type.onChange(String(id));
+        // Read off `props.state` — a destructured computed holds the pre-change value.
+        if (!props.state.typeSupportsPii) {
+          containsPii.onChange(false);
+        }
         setKeyFieldIfNotDirty(generateUniqueKey(name.value));
       }}
-      // Closing without picking anything drops the search text so the input goes
-      // back to showing the selected type.
       onClose={() => setSearch(null)}
       popoverProps={{ appendTo: 'window', zIndex: 5001 }}
       placeholder={t(

package/src/components/CustomFieldsPanel/FieldManagementModals.tsx

@@ -1,21 +1,16 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import type { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import type { ManageFieldsSource } from '../../state/ManageFieldsSource';
 import { CustomFieldModal } from '../CustomFieldModal';
 import { ArchiveFieldModal } from './ArchiveFieldModal';
 import { DeleteFieldModal } from './DeleteFieldModal';
 
 /**
  * Renders the field-management modals (add/edit, archive, delete) for any source.
- * The source supplies the modal states on CollectionFieldsSourceState; the modals
- * themselves are the same platform components regardless of which source is behind
- * them.
+ * The source supplies the modal states; the modals themselves are the same
+ * platform components regardless of which source is behind them.
  */
-function _FieldManagementModals({
-  source,
-}: {
-  source: CollectionFieldsSourceState;
-}) {
+function _FieldManagementModals({ source }: { source: ManageFieldsSource }) {
   const { customFieldModal, archiveFieldModal, deleteFieldModal } =
     source.customFieldsPanel;
   return (

package/src/components/CustomFieldsPanel/FieldsSourceAddFieldCTA.tsx

@@ -2,15 +2,11 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { AddItem, Box, Divider } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-import type { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import type { ManageFieldsSource } from '../../state/ManageFieldsSource';
 import { CustomFieldsDisabledHint } from '../CustomFields';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
-function _FieldsSourceAddFieldCTA({
-  source,
-}: {
-  source: CollectionFieldsSourceState;
-}) {
+function _FieldsSourceAddFieldCTA({ source }: { source: ManageFieldsSource }) {
   const { translate: t } = useWixPatternsContainer();
   const isHarmonyTheme = useBmHarmonyTheme();
   const fm = source.fieldsSource.fieldManagement;

package/src/components/DataExtension/dataExtensionFieldManagement.ts

@@ -165,6 +165,7 @@ export const dataExtensionFieldManagement = ({
     get permissions() {
       return dataExtension.defaultPermissions;
     },
+    supportsPermissions: true,
     get supportsPii() {
       return dataExtension.containsPii;
     },
@@ -173,6 +174,9 @@ export const dataExtensionFieldManagement = ({
       return {
         addTitle: t('cairo.customFields.addCustomField.modal.title'),
         editTitle: t('cairo.customFields.editCustomField.modal.title'),
+        settingsLabel: t(
+          'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions',
+        ),
         addSubtitle: {
           text: t('cairo.customFields.addCustomField.modal.subtitle'),
           note: t('cairo.customFields.addCustomField.modal.subtitle.note'),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle4068887863";
+var _namespace_ = "DragHandle549611350";
 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":"DragHandle4068887863__root"};
+export var classes = {"root":"DragHandle549611350__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_ = "EditableCell1018921301";
+var _namespace_ = "EditableCell2141481655";
 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":"EditableCell1018921301__root","validationIndicator":"EditableCell1018921301__validationIndicator"};
+export var classes = {"root":"EditableCell2141481655__root","validationIndicator":"EditableCell2141481655__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_ = "HeaderActionsPopover2912949458";
+var _namespace_ = "HeaderActionsPopover650858329";
 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":"HeaderActionsPopover2912949458__root"};
+export var classes = {"root":"HeaderActionsPopover650858329__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_ = "CellViewLayout2642242987";
+var _namespace_ = "CellViewLayout336650427";
 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":"CellViewLayout2642242987__root"};
+export var classes = {"root":"CellViewLayout336650427__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_ = "Edit2609722555";
+var _namespace_ = "Edit615227027";
 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":"Edit2609722555__root","addressInput":"Edit2609722555__addressInput"};
+export var classes = {"root":"Edit615227027__root","addressInput":"Edit615227027__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_ = "Edit254985112";
+var _namespace_ = "Edit3140383710";
 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":"Edit254985112__root","jsonInput":"Edit254985112__jsonInput"};
+export var classes = {"root":"Edit3140383710__root","jsonInput":"Edit3140383710__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_ = "Edit2369361531";
+var _namespace_ = "Edit3638417173";
 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":"Edit2369361531__root","booleanEdit":"Edit2369361531__booleanEdit"};
+export var classes = {"root":"Edit3638417173__root","booleanEdit":"Edit3638417173__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_ = "View140178427";
+var _namespace_ = "View3019513156";
 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":"View140178427__root","booleanView":"View140178427__booleanView"};
+export var classes = {"root":"View3019513156__root","booleanView":"View3019513156__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_ = "Edit2849672228";
+var _namespace_ = "Edit2049433503";
 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":"Edit2849672228__root"};
+export var classes = {"root":"Edit2049433503__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_ = "Edit190091011";
+var _namespace_ = "Edit1850112909";
 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":"Edit190091011__root","dateInput":"Edit190091011__dateInput"};
+export var classes = {"root":"Edit1850112909__root","dateInput":"Edit1850112909__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View141344198";
+var _namespace_ = "View4265877365";
 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":"View141344198__root"};
+export var classes = {"root":"View4265877365__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_ = "Edit3782397597";
+var _namespace_ = "Edit589549391";
 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":"Edit3782397597__root","half":"Edit3782397597__half","dateHalf":"Edit3782397597__dateHalf Edit3782397597__half","timeHalf":"Edit3782397597__timeHalf Edit3782397597__half","divider":"Edit3782397597__divider","passiveText":"Edit3782397597__passiveText","placeholderText":"Edit3782397597__placeholderText Edit3782397597__passiveText"};
+export var classes = {"root":"Edit589549391__root","half":"Edit589549391__half","dateHalf":"Edit589549391__dateHalf Edit589549391__half","timeHalf":"Edit589549391__timeHalf Edit589549391__half","divider":"Edit589549391__divider","passiveText":"Edit589549391__passiveText","placeholderText":"Edit589549391__placeholderText Edit589549391__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1682123110";
+var _namespace_ = "View3747816942";
 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":"View1682123110__root","leaf":"View1682123110__leaf","datePart":"View1682123110__datePart View1682123110__leaf","timePart":"View1682123110__timePart View1682123110__leaf","placeholder":"View1682123110__placeholder View1682123110__leaf","divider":"View1682123110__divider"};
+export var classes = {"root":"View3747816942__root","leaf":"View3747816942__leaf","datePart":"View3747816942__datePart View3747816942__leaf","timePart":"View3747816942__timePart View3747816942__leaf","placeholder":"View3747816942__placeholder View3747816942__leaf","divider":"View3747816942__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3200373441";
+var _namespace_ = "Edit4114511274";
 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":"Edit3200373441__root","emailInput":"Edit3200373441__emailInput"};
+export var classes = {"root":"Edit4114511274__root","emailInput":"Edit4114511274__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};