@wix/patterns 1.383.0 → 1.387.0

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Box } from '@wix/design-system';
+import type { StringLengthRange } from '../../../types/SchemaConfig';
+import type { CmsFormState } from '../CmsFormState';
+import type { ValidationRule } from '../types';
+import { RequiredToggle } from '../formFields/RequiredToggle';
+import { CharactersLimitInput } from '../formFields/CharactersLimitInput';
+
+interface Props {
+  state: CmsFormState;
+}
+
+const _ValidationSubSection = ({ state }: Props) => {
+  const { supportedValidationRules, fieldRules } = state;
+
+  return (
+    <Box direction="vertical" gap="SP4">
+      {supportedValidationRules.map((rule: ValidationRule) => {
+        if (rule === 'required') {
+          return (
+            <RequiredToggle
+              key="required"
+              label="Required"
+              checked={Boolean(fieldRules.validationRules.required)}
+              onChange={(v) => state.setValidationRule('required', v)}
+            />
+          );
+        }
+        if (rule === 'charactersLimit') {
+          return (
+            <CharactersLimitInput
+              key="charactersLimit"
+              minLabel="Min characters"
+              maxLabel="Max characters"
+              value={
+                (fieldRules.validationRules.charactersLimit as
+                  | StringLengthRange
+                  | undefined) ?? {}
+              }
+              onChange={(v) => state.setValidationRule('charactersLimit', v)}
+            />
+          );
+        }
+        return null;
+      })}
+    </Box>
+  );
+};
+
+export const ValidationSubSection = observer(_ValidationSubSection);

package/src/components/CmsFieldManagement/fieldTypeUtils.ts

@@ -0,0 +1,17 @@
+import type { PatternsFieldType } from '../../types/SchemaConfig';
+import type { SelectableFieldTypes } from './types';
+
+const SELECTABLE_FIELD_TYPES = new Set<PatternsFieldType>([
+  'SHORT_TEXT',
+  'NUMBER',
+  'BOOLEAN',
+  'DATE',
+]);
+
+export const isSelectableFieldType = (
+  t: PatternsFieldType,
+): t is SelectableFieldTypes => SELECTABLE_FIELD_TYPES.has(t);
+
+export const isPIISupportedByFieldType = (
+  t: SelectableFieldTypes | undefined,
+): boolean => t === 'SHORT_TEXT';

package/src/components/CmsFieldManagement/fieldValidationRulesMap.ts

@@ -0,0 +1,18 @@
+import type { SelectableFieldTypes, ValidationRule } from './types';
+
+// Sourced from cms-web packages/auto-cms-field-types/src/field-types-metadata.json validations[] per type.
+//
+// TODO: cross-check this map against cms-web before GA. The ValidationSection UI in Phase 3 renders
+// rule inputs based on this map — a wrong entry surfaces as the wrong set of inputs for a field type.
+// Updating this file is the single place to fix any mismatch; no downstream changes required.
+const fieldValidationRulesMap: Record<SelectableFieldTypes, ValidationRule[]> =
+  {
+    SHORT_TEXT: ['required', 'charactersLimit'],
+    NUMBER: ['required'],
+    BOOLEAN: ['required'],
+    DATE: ['required'],
+  };
+
+export const getFieldTypeValidationRulesList = (
+  t: SelectableFieldTypes,
+): ValidationRule[] => fieldValidationRulesMap[t] ?? [];

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box, FormField, NumberInput } from '@wix/design-system';
+import type { StringLengthRange } from '../../../types/SchemaConfig';
+
+export interface CharactersLimitInputProps {
+  minLabel: string;
+  maxLabel: string;
+  value: StringLengthRange;
+  onChange: (v: StringLengthRange) => void;
+}
+
+export const CharactersLimitInput = ({
+  minLabel,
+  maxLabel,
+  value,
+  onChange,
+}: CharactersLimitInputProps) => (
+  <Box gap="SP3">
+    <FormField label={minLabel}>
+      <NumberInput
+        value={value.minLength}
+        onChange={(v) => onChange({ ...value, minLength: v ?? undefined })}
+        min={0}
+      />
+    </FormField>
+    <FormField label={maxLabel}>
+      <NumberInput
+        value={value.maxLength}
+        onChange={(v) => onChange({ ...value, maxLength: v ?? undefined })}
+        min={0}
+      />
+    </FormField>
+  </Box>
+);

package/src/components/CmsFieldManagement/formFields/FieldNameInput.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FormField, Input } from '@wix/design-system';
+
+export interface FieldNameInputProps {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  onBlur?: () => void;
+  error?: string;
+}
+
+export const FieldNameInput = ({
+  label,
+  value,
+  onChange,
+  onBlur,
+  error,
+}: FieldNameInputProps) => (
+  <FormField
+    required
+    label={label}
+    status={error ? 'error' : undefined}
+    statusMessage={error}
+  >
+    <Input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+    />
+  </FormField>
+);

package/src/components/CmsFieldManagement/formFields/FieldPiiToggle.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormField, ToggleSwitch } from '@wix/design-system';
+
+export interface FieldPiiToggleProps {
+  label: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  disabled?: boolean;
+}
+
+export const FieldPiiToggle = ({
+  label,
+  checked,
+  onChange,
+  disabled,
+}: FieldPiiToggleProps) => (
+  <FormField label={label}>
+    <ToggleSwitch
+      checked={checked}
+      onChange={(e) => onChange(e.target.checked)}
+      disabled={disabled}
+    />
+  </FormField>
+);

package/src/components/CmsFieldManagement/formFields/FieldTypeSelect.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Dropdown, FormField } from '@wix/design-system';
+import type { SelectableFieldTypes } from '../types';
+
+// TODO: confirm selectable subset vs cms-web
+const SELECTABLE_TYPES: SelectableFieldTypes[] = [
+  'SHORT_TEXT',
+  'NUMBER',
+  'BOOLEAN',
+  'DATE',
+];
+
+// TODO: replace with translation keys cairo.cms.field.type.option.*
+const FIELD_TYPE_LABELS: Record<string, string> = {
+  SHORT_TEXT: 'Short Text',
+  NUMBER: 'Number',
+  BOOLEAN: 'True/False',
+  DATE: 'Date',
+};
+
+const OPTIONS = SELECTABLE_TYPES.map((t) => ({
+  id: t,
+  value: FIELD_TYPE_LABELS[t] ?? t,
+}));
+
+export interface FieldTypeSelectProps {
+  label: string;
+  value: SelectableFieldTypes | undefined;
+  onChange: (v: SelectableFieldTypes) => void;
+  disabled?: boolean;
+  error?: string;
+}
+
+export const FieldTypeSelect = ({
+  label,
+  value,
+  onChange,
+  disabled,
+  error,
+}: FieldTypeSelectProps) => (
+  <FormField
+    required
+    label={label}
+    status={error ? 'error' : undefined}
+    statusMessage={error}
+  >
+    <Dropdown
+      popoverProps={{ zIndex: 10000, appendTo: 'window' }}
+      options={OPTIONS}
+      selectedId={value}
+      onSelect={(option) => onChange(option.id as SelectableFieldTypes)}
+      disabled={disabled}
+    />
+  </FormField>
+);

package/src/components/CmsFieldManagement/formFields/RequiredToggle.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Checkbox } from '@wix/design-system';
+
+export interface RequiredToggleProps {
+  label: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}
+
+export const RequiredToggle = ({
+  label,
+  checked,
+  onChange,
+}: RequiredToggleProps) => (
+  <Checkbox checked={checked} onChange={() => onChange(!checked)}>
+    {label}
+  </Checkbox>
+);

package/src/components/CmsFieldManagement/index.ts

@@ -0,0 +1 @@
+export { CmsFormState } from './CmsFormState';

package/src/components/CmsFieldManagement/toFieldSpec.ts

@@ -0,0 +1,37 @@
+import type {
+  FieldSpec,
+  NonReferenceField,
+  StringLengthRange,
+} from '../../types/SchemaConfig';
+import type { FieldProperties, FieldRules } from './types';
+
+export const toFieldSpec = (
+  properties: FieldProperties,
+  rules: FieldRules,
+): FieldSpec => {
+  const { type, name, isPii, helpText } = properties;
+  const { validationRules } = rules;
+  const trimmedHelpText = helpText.trim();
+
+  const hasRules =
+    validationRules.required !== undefined ||
+    validationRules.charactersLimit !== undefined;
+
+  const validation: NonReferenceField['validation'] = hasRules
+    ? {
+        required: Boolean(validationRules.required),
+        ...(validationRules.charactersLimit !== undefined && {
+          stringLengthRange:
+            validationRules.charactersLimit as StringLengthRange,
+        }),
+      }
+    : undefined;
+
+  return {
+    type,
+    displayName: name.trim(),
+    ...(isPii && { isPii: true }),
+    ...(trimmedHelpText && { helpText: trimmedHelpText }),
+    ...(validation && { validation }),
+  };
+};

package/src/components/CmsFieldManagement/types.ts

@@ -0,0 +1,21 @@
+export type SelectableFieldTypes = 'SHORT_TEXT' | 'NUMBER' | 'BOOLEAN' | 'DATE';
+
+export type ValidationRule = 'required' | 'charactersLimit';
+
+export interface FieldProperties {
+  type: SelectableFieldTypes;
+  name: string;
+  isPii: boolean;
+  helpText: string;
+}
+
+export interface FieldRules {
+  validationRules: Partial<Record<ValidationRule, unknown>>;
+}
+
+// `type` is optional here because it starts undefined until the user picks one,
+// while all other fields are always present. Keeping `type` required on FieldProperties
+// preserves the stricter type everywhere else.
+export type FieldPropertiesState = Omit<FieldProperties, 'type'> & {
+  type?: FieldProperties['type'];
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse1759116046";
+var _namespace_ = "Collapse1428355442";
 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":"Collapse1759116046__root","exit":"Collapse1759116046__exit"};
+export var classes = {"root":"Collapse1428355442__root","exit":"Collapse1428355442__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_ = "CollectionPage3859026297";
+var _namespace_ = "CollectionPage163861846";
 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":"CollectionPage3859026297__root"};
+export var classes = {"root":"CollectionPage163861846__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_ = "CollectionSectionHeader2325654747";
+var _namespace_ = "CollectionSectionHeader1525580931";
 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":"CollectionSectionHeader2325654747__root","summaryIcon":"CollectionSectionHeader2325654747__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1525580931__root","summaryIcon":"CollectionSectionHeader1525580931__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_ = "CollectionTable2994927878";
+var _namespace_ = "CollectionTable3451955868";
 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":"CollectionTable2994927878__root"};
+export var classes = {"root":"CollectionTable3451955868__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_ = "CollectionTableWSRTable216721661";
+var _namespace_ = "CollectionTableWSRTable1169438468";
 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":"CollectionTableWSRTable216721661__root"};
+export var classes = {"root":"CollectionTableWSRTable1169438468__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_ = "CollectionToolbar1333720175";
+var _namespace_ = "CollectionToolbar2177108671";
 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":"CollectionToolbar1333720175__root","left":"CollectionToolbar1333720175__left","right":"CollectionToolbar1333720175__right","fullWidth":"CollectionToolbar1333720175__fullWidth"};
+export var classes = {"root":"CollectionToolbar2177108671__root","left":"CollectionToolbar2177108671__left","right":"CollectionToolbar2177108671__right","fullWidth":"CollectionToolbar2177108671__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_ = "SearchOrCustomFilter3222619344";
+var _namespace_ = "SearchOrCustomFilter1260543788";
 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":"SearchOrCustomFilter3222619344__root","search":"SearchOrCustomFilter3222619344__search","searchMobile":"SearchOrCustomFilter3222619344__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1260543788__root","search":"SearchOrCustomFilter1260543788__search","searchMobile":"SearchOrCustomFilter1260543788__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_ = "AutoCompleteReadonly4291045559";
+var _namespace_ = "AutoCompleteReadonly14725273";
 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":"AutoCompleteReadonly4291045559__root"};
+export var classes = {"root":"AutoCompleteReadonly14725273__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_ = "ViewsDropdown3683418456";
+var _namespace_ = "ViewsDropdown2478443290";
 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":"ViewsDropdown3683418456__root"};
+export var classes = {"root":"ViewsDropdown2478443290__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/CustomColumnsCTAButton.tsx

@@ -9,6 +9,7 @@ import type { CustomColumnsDragAndDrop } from '../CustomColumns/CustomColumnsDra
 import type { Column } from '../../model';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
+import { useSchemaContext } from '../../providers/SchemaContext';
 
 export interface CustomColumnsCTAButtonProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -41,9 +42,11 @@ export function _CustomColumnsCTAButton<T, F extends FiltersMap>({
     }
   }, [onColumnClick, state.customColumnsStateInitialized]);
 
-  const isSchemaEditable = !!state.collectionDataExtension;
+  const schemaCtx = useSchemaContext();
+  const isSchema = !!schemaCtx?.schema;
+  const isEditable = !!state.collectionDataExtension || isSchema;
   const text = t(
-    isSchemaEditable
+    isEditable
       ? 'cairo.table.manage-fields.button.cta'
       : 'cairo.table.custom-columns.button.cta',
   );

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, SidePanel } from '@wix/design-system';
+import { AddItem, Box, Divider, SidePanel } from '@wix/design-system';
 import React, { useEffect } from 'react';
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
@@ -10,6 +10,7 @@ import { CustomColumnsNoResults } from './CustomColumnsNoResults';
 import { useRafRender } from '../../hooks/useRafRender';
 import { ScrollableContent } from '../ScrollableContent';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
+import { useSchemaContext } from '../../providers';
 
 export interface CustomColumnsPanelProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -22,6 +23,9 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const { translate: t } = useWixPatternsContainer();
 
   const { dragAndDrop, collectionDataExtension } = state;
+  const schemaCtx = useSchemaContext();
+  const isSchema = !!schemaCtx?.schema;
+  const isEditable = !!collectionDataExtension || isSchema;
 
   useEffect(() => state.init(), []);
 
@@ -37,20 +41,24 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   // Show search if they're using DEx OR if there are more than 5 columns
   const shouldShowSearch = isUsingDataExtension || totalColumns > 5;
 
+  const titleKey = isEditable
+    ? 'cairo.table.manage-fields.title'
+    : 'cairo.table.custom-columns.title';
+  const subtitleKey = isEditable
+    ? dragAndDrop
+      ? 'cairo.table.manage-fields.dragAndDrop.subtitle'
+      : 'cairo.table.manage-fields.subtitle'
+    : dragAndDrop
+    ? 'cairo.table.custom-columns.dragAndDrop.subtitle'
+    : 'cairo.table.custom-columns.subtitle';
+
   return (
     <PatternsSidePanel
       dataHook="custom-columns-panel"
       width="100%"
       onClose={() => state.onClose()}
     >
-      <SidePanel.Header
-        title={t('cairo.table.custom-columns.title')}
-        subtitle={
-          dragAndDrop
-            ? t('cairo.table.custom-columns.dragAndDrop.subtitle')
-            : t('cairo.table.custom-columns.subtitle')
-        }
-      >
+      <SidePanel.Header title={t(titleKey)} subtitle={t(subtitleKey)}>
         {shouldShowSearch && (
           <Box padding="0 SP3 SP2 SP3">
             <CustomColumnsSearch state={state} />
@@ -87,6 +95,24 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
         ?.CustomColumnsAddCustomFieldCTAButton && (
         <collectionDataExtension.DataExtension.CustomColumnsAddCustomFieldCTAButton />
       )}
+      {schemaCtx?.addField && (
+        <Box direction="vertical" width="100%">
+          <Divider direction="horizontal" />
+          <Box
+            padding="SP4"
+            width="100%"
+            boxSizing="border-box"
+            direction="vertical"
+          >
+            <AddItem
+              dataHook="custom-columns-schema-add-field"
+              onClick={schemaCtx.addField}
+            >
+              {t('cairo.customFields.addCustomField.CTA')}
+            </AddItem>
+          </Box>
+        </Box>
+      )}
     </PatternsSidePanel>
   );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle1337604321";
+var _namespace_ = "DragHandle3290013460";
 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":"DragHandle1337604321__root"};
+export var classes = {"root":"DragHandle3290013460__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_ = "EditableCell2516259688";
+var _namespace_ = "EditableCell3900691882";
 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":"EditableCell2516259688__root","validationIndicator":"EditableCell2516259688__validationIndicator"};
+export var classes = {"root":"EditableCell3900691882__root","validationIndicator":"EditableCell3900691882__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_ = "HeaderActionsPopover1022224764";
+var _namespace_ = "HeaderActionsPopover3638225715";
 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":"HeaderActionsPopover1022224764__root"};
+export var classes = {"root":"HeaderActionsPopover3638225715__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};