@wix/patterns 1.453.0 → 1.455.0

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection1171344576";
+var _namespace_ = "ValidationAndDefaultsSection2380203722";
 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":"ValidationAndDefaultsSection1171344576__root","accordionWrapper":"ValidationAndDefaultsSection1171344576__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection2380203722__root","accordionWrapper":"ValidationAndDefaultsSection2380203722__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationSubSection.tsx

@@ -1,70 +1,72 @@
 import React from 'react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
-import { Box, InfoIcon, Text, ToggleSwitch } from '@wix/design-system';
-import type { StringLengthRange } from '../../../types/SchemaConfig';
+import {
+  FieldValidationSettingsInput,
+  type FieldValidationRuleConfig,
+} from '@wix/patterns-fields';
 import type { CmsFormState } from '../CmsFormState';
-import type { ValidationRule } from '../types';
-import { RequiredToggle } from '../formFields/RequiredToggle';
-import { CharactersLimitInput } from '../formFields/CharactersLimitInput';
+import {
+  toFieldValidationSettingsValue,
+  withFieldValidationSettingsValue,
+} from '../fieldValidationSettingsValue';
 
 interface Props {
   state: CmsFormState;
 }
 
 const _ValidationSubSection = ({ state }: Props) => {
-  const { supportedValidationRules, fieldRules } = state;
+  const { translate } = useWixPatternsContainer();
+  const rules = state.supportedValidationRules.map(
+    (rule): FieldValidationRuleConfig => {
+      switch (rule) {
+        case 'required':
+          return {
+            type: rule,
+            label: translate('cairo.fieldValidation.required.label'),
+            tooltip: translate('cairo.fieldValidation.required.tooltip'),
+          };
+        case 'charactersLimit':
+          return {
+            type: rule,
+            label: translate('cairo.fieldValidation.charactersLimit.label'),
+            tooltip: translate('cairo.fieldValidation.charactersLimit.tooltip'),
+            minLabel: translate(
+              'cairo.fieldValidation.charactersLimit.minimum.label',
+            ),
+            maxLabel: translate(
+              'cairo.fieldValidation.charactersLimit.maximum.label',
+            ),
+            separator: translate(
+              'cairo.fieldValidation.charactersLimit.separator',
+            ),
+            outOfBoundsError: (min, max) =>
+              translate(
+                'cairo.fieldValidation.charactersLimit.outOfBounds.error',
+                { min, max },
+              ),
+            maxBelowMinError: translate(
+              'cairo.fieldValidation.charactersLimit.maxBelowMin.error',
+            ),
+          };
+      }
+
+      return rule;
+    },
+  );
 
   return (
-    <Box direction="vertical" gap="SP3">
-      {supportedValidationRules.map((rule: ValidationRule) => {
-        if (rule === 'required') {
-          return (
-            <RequiredToggle
-              key="required"
-              label="Make this a required field"
-              checked={Boolean(fieldRules.validationRules.required)}
-              onChange={(v) => state.setValidationRule('required', v)}
-            />
-          );
-        }
-        if (rule === 'charactersLimit') {
-          const isEnabled =
-            fieldRules.validationRules.charactersLimit !== undefined;
-          return (
-            <Box key="charactersLimit" direction="vertical" gap="SP3">
-              <Box verticalAlign="middle" gap="SP2">
-                <ToggleSwitch
-                  checked={isEnabled}
-                  onChange={() =>
-                    state.setValidationRule(
-                      'charactersLimit',
-                      isEnabled ? undefined : {},
-                    )
-                  }
-                />
-                <Text size="small">Limit character count</Text>
-                <InfoIcon content="Set minimum and maximum character limits for this field." />
-              </Box>
-              {isEnabled && (
-                <CharactersLimitInput
-                  minLabel="Min characters"
-                  maxLabel="Max characters"
-                  value={
-                    (fieldRules.validationRules.charactersLimit as
-                      | StringLengthRange
-                      | undefined) ?? {}
-                  }
-                  onChange={(v) =>
-                    state.setValidationRule('charactersLimit', v)
-                  }
-                />
-              )}
-            </Box>
-          );
-        }
-        return null;
-      })}
-    </Box>
+    <FieldValidationSettingsInput
+      dataHook="cms-field-validation-settings"
+      data={toFieldValidationSettingsValue(state.fieldRules)}
+      rules={rules}
+      invalid={state.hasValidationSettingsError}
+      onChange={(value) =>
+        state.setFieldRules(
+          withFieldValidationSettingsValue(state.fieldRules, value),
+        )
+      }
+    />
   );
 };
 

package/src/components/CmsFieldManagement/fieldValidationSettingsValue.ts

@@ -0,0 +1,35 @@
+import type { FieldValidationSettingsValue } from '@wix/patterns-fields';
+import type { FieldRules } from './types';
+
+export const toFieldValidationSettingsValue = (
+  rules: FieldRules,
+): FieldValidationSettingsValue => {
+  const { required, charactersLimit } = rules.validationRules;
+
+  return {
+    required,
+    ...(charactersLimit && {
+      charactersLimit: {
+        min: charactersLimit.minLength,
+        max: charactersLimit.maxLength,
+      },
+    }),
+  };
+};
+
+export const withFieldValidationSettingsValue = (
+  rules: FieldRules,
+  value: FieldValidationSettingsValue,
+): FieldRules => ({
+  ...rules,
+  validationRules: {
+    ...rules.validationRules,
+    required: value.required,
+    charactersLimit: value.charactersLimit
+      ? {
+          minLength: value.charactersLimit.min,
+          maxLength: value.charactersLimit.max,
+        }
+      : undefined,
+  },
+});

package/src/components/CmsFieldManagement/types.ts

@@ -1,6 +1,12 @@
+import type { FieldValidationRule } from '@wix/patterns-fields';
+import type { StringLengthRange } from '../../types/SchemaConfig';
+
 export type SelectableFieldTypes = 'SHORT_TEXT' | 'NUMBER' | 'BOOLEAN' | 'DATE';
 
-export type ValidationRule = 'required' | 'charactersLimit';
+export type ValidationRule = Extract<
+  FieldValidationRule,
+  'required' | 'charactersLimit'
+>;
 
 export interface FieldProperties {
   type: SelectableFieldTypes;
@@ -10,7 +16,10 @@ export interface FieldProperties {
 }
 
 export interface FieldRules {
-  validationRules: Partial<Record<ValidationRule, unknown>>;
+  validationRules: {
+    required?: boolean;
+    charactersLimit?: StringLengthRange;
+  };
 }
 
 // `type` is optional here because it starts undefined until the user picks one,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse251554959";
+var _namespace_ = "Collapse1638913243";
 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":"Collapse251554959__root","exit":"Collapse251554959__exit"};
+export var classes = {"root":"Collapse1638913243__root","exit":"Collapse1638913243__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader2007563928";
+var _namespace_ = "CollectionSectionHeader689244465";
 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":"CollectionSectionHeader2007563928__root","summaryIcon":"CollectionSectionHeader2007563928__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader689244465__root","summaryIcon":"CollectionSectionHeader689244465__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3867150910";
+var _namespace_ = "CollectionToolbar618222439";
 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":"CollectionToolbar3867150910__root","right":"CollectionToolbar3867150910__right","left":"CollectionToolbar3867150910__left","fullWidth":"CollectionToolbar3867150910__fullWidth"};
+export var classes = {"root":"CollectionToolbar618222439__root","right":"CollectionToolbar618222439__right","left":"CollectionToolbar618222439__left","fullWidth":"CollectionToolbar618222439__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter4090117436";
+var _namespace_ = "SearchOrCustomFilter552995817";
 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":"SearchOrCustomFilter4090117436__root","search":"SearchOrCustomFilter4090117436__search","searchMobile":"SearchOrCustomFilter4090117436__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter552995817__root","search":"SearchOrCustomFilter552995817__search","searchMobile":"SearchOrCustomFilter552995817__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle149037677";
+var _namespace_ = "DragHandle4011267702";
 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":"DragHandle149037677__root"};
+export var classes = {"root":"DragHandle4011267702__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_ = "EditableCell2894606684";
+var _namespace_ = "EditableCell1685373669";
 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":"EditableCell2894606684__root","errorMessage":"EditableCell2894606684__errorMessage"};
+export var classes = {"root":"EditableCell1685373669__root","errorMessage":"EditableCell1685373669__errorMessage"};
 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_ = "HeaderActionsPopover2951513940";
+var _namespace_ = "HeaderActionsPopover579348879";
 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":"HeaderActionsPopover2951513940__root"};
+export var classes = {"root":"HeaderActionsPopover579348879__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_ = "CellViewLayout2195419703";
+var _namespace_ = "CellViewLayout2915504138";
 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":"CellViewLayout2195419703__root"};
+export var classes = {"root":"CellViewLayout2915504138__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_ = "Edit1842541155";
+var _namespace_ = "Edit2633253671";
 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":"Edit1842541155__root","addressInput":"Edit1842541155__addressInput"};
+export var classes = {"root":"Edit2633253671__root","addressInput":"Edit2633253671__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_ = "Edit850835796";
+var _namespace_ = "Edit3656851913";
 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":"Edit850835796__root","jsonInput":"Edit850835796__jsonInput"};
+export var classes = {"root":"Edit3656851913__root","jsonInput":"Edit3656851913__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_ = "Edit3489924033";
+var _namespace_ = "Edit2165952753";
 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":"Edit3489924033__root","booleanEdit":"Edit3489924033__booleanEdit"};
+export var classes = {"root":"Edit2165952753__root","booleanEdit":"Edit2165952753__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_ = "View3453239068";
+var _namespace_ = "View2129573433";
 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":"View3453239068__root","booleanView":"View3453239068__booleanView"};
+export var classes = {"root":"View2129573433__root","booleanView":"View2129573433__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_ = "Edit3506546422";
+var _namespace_ = "Edit2953935533";
 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":"Edit3506546422__root"};
+export var classes = {"root":"Edit2953935533__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_ = "Edit2504482718";
+var _namespace_ = "Edit847209314";
 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":"Edit2504482718__root","dateInput":"Edit2504482718__dateInput"};
+export var classes = {"root":"Edit847209314__root","dateInput":"Edit847209314__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_ = "View1833495533";
+var _namespace_ = "View3880791147";
 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":"View1833495533__root"};
+export var classes = {"root":"View3880791147__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_ = "Edit3300499502";
+var _namespace_ = "Edit1729327138";
 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":"Edit3300499502__root","half":"Edit3300499502__half","dateHalf":"Edit3300499502__dateHalf Edit3300499502__half","timeHalf":"Edit3300499502__timeHalf Edit3300499502__half","divider":"Edit3300499502__divider","passiveText":"Edit3300499502__passiveText","placeholderText":"Edit3300499502__placeholderText Edit3300499502__passiveText"};
+export var classes = {"root":"Edit1729327138__root","half":"Edit1729327138__half","dateHalf":"Edit1729327138__dateHalf Edit1729327138__half","timeHalf":"Edit1729327138__timeHalf Edit1729327138__half","divider":"Edit1729327138__divider","passiveText":"Edit1729327138__passiveText","placeholderText":"Edit1729327138__placeholderText Edit1729327138__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_ = "View2211303949";
+var _namespace_ = "View739628416";
 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":"View2211303949__root","leaf":"View2211303949__leaf","datePart":"View2211303949__datePart View2211303949__leaf","timePart":"View2211303949__timePart View2211303949__leaf","placeholder":"View2211303949__placeholder View2211303949__leaf","divider":"View2211303949__divider"};
+export var classes = {"root":"View739628416__root","leaf":"View739628416__leaf","datePart":"View739628416__datePart View739628416__leaf","timePart":"View739628416__timePart View739628416__leaf","placeholder":"View739628416__placeholder View739628416__leaf","divider":"View739628416__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_ = "Edit1835209986";
+var _namespace_ = "Edit2629201209";
 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":"Edit1835209986__root","emailInput":"Edit1835209986__emailInput"};
+export var classes = {"root":"Edit2629201209__root","emailInput":"Edit2629201209__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};