@wix/patterns 1.389.0 → 1.391.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.389.0";
+export declare const version = "patterns@1.391.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.389.0",
+  "version": "1.391.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -437,5 +437,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "24f2d2ee586763ce6f2ea695d62ae7b5cd25bfa5919325c418cdef84"
+  "falconPackageHash": "f1de299a21d23931542aff64666783d7f8db976406b135002f62f0e3"
 }

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

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

package/src/components/CmsFieldManagement/CmsFieldForm.tsx

@@ -55,7 +55,7 @@ const _CmsFieldForm = ({ state }: Props) => {
       <BasicsSection state={state} />
       <Divider />
 
-      {state.properties.type && <ValidationAndDefaultsSection state={state} />}
+      <ValidationAndDefaultsSection state={state} />
     </Box>
   );
 };

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

@@ -17,7 +17,7 @@ const _BasicsSection = ({ state }: Props) => {
   return (
     <Box direction="vertical" gap="SP4">
       <FieldTypeSelect
-        label="Field Type"
+        label="Field type"
         value={properties.type}
         onChange={state.changeType}
         disabled={mode === 'edit'}
@@ -25,7 +25,7 @@ const _BasicsSection = ({ state }: Props) => {
       />
 
       <FieldNameInput
-        label="Field Name"
+        label="Field name"
         value={properties.name}
         onChange={state.changeName}
         onBlur={() => state.blurField('name')}
@@ -34,7 +34,7 @@ const _BasicsSection = ({ state }: Props) => {
 
       {isPIISupportedByFieldType(properties.type) && (
         <FieldPiiToggle
-          label="Personally Identifiable Information (PII)"
+          label="Personal information (PII)"
           checked={properties.isPii}
           onChange={state.setIsPii}
         />

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { observer } from 'mobx-react-lite';
-import { Box, Divider, Input, Text } from '@wix/design-system';
+import { Box, Divider, FormField, Input, Text } from '@wix/design-system';
 import { ChevronDown, ChevronRight } from '@wix/wix-ui-icons-common';
 import type { CmsFormState } from '../CmsFormState';
 import { ValidationSubSection } from './ValidationSubSection';
@@ -20,42 +20,40 @@ const _ValidationAndDefaultsSection = ({ state }: Props) => {
         tabIndex={0}
         style={{
           cursor: 'pointer',
-          padding: '16px 0 16px 0',
           display: 'flex',
           alignItems: 'center',
           gap: 8,
+          padding: '16px 0',
         }}
         onClick={() => setIsOpen((v) => !v)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            setIsOpen((v) => !v);
-          }
-        }}
+        onKeyDown={(e: React.KeyboardEvent) =>
+          e.key === 'Enter' && setIsOpen((v) => !v)
+        }
       >
         {isOpen ? <ChevronDown size="18px" /> : <ChevronRight size="18px" />}
-        <Text weight="bold">Validation and defaults</Text>
+        <Text>Validation and defaults</Text>
       </div>
 
       {isOpen && (
-        <Box direction="vertical" gap="SP0">
+        <Box direction="vertical" gap="SP6" paddingBottom="SP4">
           {hasValidation && (
-            <Box direction="vertical" gap="SP4" paddingBottom="SP4">
+            <Box direction="vertical" gap="SP2">
               <Text weight="bold">Validation</Text>
               <ValidationSubSection state={state} />
-              <Divider />
             </Box>
           )}
 
-          <Box direction="vertical" gap="SP4" paddingBottom="SP4">
-            <Text weight="bold">Help text</Text>
+          <Divider />
+
+          <FormField
+            label="Help text"
+            infoContent="Descriptive text shown below the field in forms."
+          >
             <Input
-              ariaLabel="Help text"
               value={state.properties.helpText}
               onChange={(e) => state.setHelpText(e.target.value)}
             />
-            <Divider />
-          </Box>
+          </FormField>
         </Box>
       )}
     </Box>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { Box } from '@wix/design-system';
+import { Box, InfoIcon, Text, ToggleSwitch } from '@wix/design-system';
 import type { StringLengthRange } from '../../../types/SchemaConfig';
 import type { CmsFormState } from '../CmsFormState';
 import type { ValidationRule } from '../types';
@@ -21,25 +21,45 @@ const _ValidationSubSection = ({ state }: Props) => {
           return (
             <RequiredToggle
               key="required"
-              label="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 (
-            <CharactersLimitInput
-              key="charactersLimit"
-              minLabel="Min characters"
-              maxLabel="Max characters"
-              value={
-                (fieldRules.validationRules.charactersLimit as
-                  | StringLengthRange
-                  | undefined) ?? {}
-              }
-              onChange={(v) => state.setValidationRule('charactersLimit', v)}
-            />
+            <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;

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

@@ -23,6 +23,7 @@ export const FieldNameInput = ({
     statusMessage={error}
   >
     <Input
+      placeholder="Enter a name"
       value={value}
       onChange={(e) => onChange(e.target.value)}
       onBlur={onBlur}

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

@@ -14,7 +14,7 @@ export const FieldPiiToggle = ({
   onChange,
   disabled,
 }: FieldPiiToggleProps) => (
-  <FormField label={label}>
+  <FormField label={label} labelPlacement="right" stretchContent={false}>
     <ToggleSwitch
       checked={checked}
       onChange={(e) => onChange(e.target.checked)}

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

@@ -1,28 +1,54 @@
 import React from 'react';
-import { Dropdown, FormField } from '@wix/design-system';
+import {
+  Box,
+  Dropdown,
+  listItemSectionBuilder,
+  listItemSelectBuilder,
+  FormField,
+} from '@wix/design-system';
+import { getFieldTypeIcon } from '../../../utils/fieldTypePrefixIcons';
 import type { SelectableFieldTypes } from '../types';
 
-// TODO: confirm selectable subset vs cms-web
-const SELECTABLE_TYPES: SelectableFieldTypes[] = [
-  'SHORT_TEXT',
-  'NUMBER',
-  'BOOLEAN',
-  'DATE',
+const OPTIONS = [
+  listItemSectionBuilder({
+    title: 'Essentials',
+    id: 'section-essentials',
+    type: 'subheader',
+  }),
+  listItemSelectBuilder({
+    id: 'SHORT_TEXT',
+    title: 'Text',
+    label: 'Text',
+    prefix: (
+      <Box>{getFieldTypeIcon({ fieldType: 'SHORT_TEXT', size: 'medium' })}</Box>
+    ),
+  }),
+  listItemSelectBuilder({
+    id: 'NUMBER',
+    title: 'Number',
+    label: 'Number',
+    prefix: (
+      <Box>{getFieldTypeIcon({ fieldType: 'NUMBER', size: 'medium' })}</Box>
+    ),
+  }),
+  listItemSelectBuilder({
+    id: 'BOOLEAN',
+    title: 'Boolean',
+    label: 'Boolean',
+    prefix: (
+      <Box>{getFieldTypeIcon({ fieldType: 'BOOLEAN', size: 'medium' })}</Box>
+    ),
+  }),
+  listItemSelectBuilder({
+    id: 'DATE',
+    title: 'Date',
+    label: 'Date',
+    prefix: (
+      <Box>{getFieldTypeIcon({ fieldType: 'DATE', size: 'medium' })}</Box>
+    ),
+  }),
 ];
 
-// 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;
@@ -46,6 +72,13 @@ export const FieldTypeSelect = ({
   >
     <Dropdown
       popoverProps={{ zIndex: 10000, appendTo: 'window' }}
+      placeholder="Choose a type"
+      valueParser={(option) => option.label}
+      prefix={
+        value
+          ? getFieldTypeIcon({ fieldType: value, size: 'medium' })
+          : undefined
+      }
       options={OPTIONS}
       selectedId={value}
       onSelect={(option) => onChange(option.id as SelectableFieldTypes)}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox } from '@wix/design-system';
+import { Box, InfoIcon, Text, ToggleSwitch } from '@wix/design-system';
 
 export interface RequiredToggleProps {
   label: string;
@@ -12,7 +12,9 @@ export const RequiredToggle = ({
   checked,
   onChange,
 }: RequiredToggleProps) => (
-  <Checkbox checked={checked} onChange={() => onChange(!checked)}>
-    {label}
-  </Checkbox>
+  <Box verticalAlign="middle" gap="SP2">
+    <ToggleSwitch checked={checked} onChange={() => onChange(!checked)} />
+    <Text size="small">{label}</Text>
+    <InfoIcon content="When enabled, this field must have a value before saving an item." />
+  </Box>
 );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse3162906042";
+var _namespace_ = "Collapse2798332745";
 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":"Collapse3162906042__root","exit":"Collapse3162906042__exit"};
+export var classes = {"root":"Collapse2798332745__root","exit":"Collapse2798332745__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_ = "CollectionPage1024469680";
+var _namespace_ = "CollectionPage3795793678";
 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":"CollectionPage1024469680__root"};
+export var classes = {"root":"CollectionPage3795793678__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_ = "CollectionSectionHeader2912199008";
+var _namespace_ = "CollectionSectionHeader479677695";
 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":"CollectionSectionHeader2912199008__root","summaryIcon":"CollectionSectionHeader2912199008__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader479677695__root","summaryIcon":"CollectionSectionHeader479677695__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_ = "CollectionTable514783495";
+var _namespace_ = "CollectionTable2751036718";
 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":"CollectionTable514783495__root"};
+export var classes = {"root":"CollectionTable2751036718__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_ = "CollectionTableWSRTable1917119710";
+var _namespace_ = "CollectionTableWSRTable308767817";
 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":"CollectionTableWSRTable1917119710__root"};
+export var classes = {"root":"CollectionTableWSRTable308767817__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_ = "CollectionToolbar3575638398";
+var _namespace_ = "CollectionToolbar632879122";
 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":"CollectionToolbar3575638398__root","left":"CollectionToolbar3575638398__left","right":"CollectionToolbar3575638398__right","fullWidth":"CollectionToolbar3575638398__fullWidth"};
+export var classes = {"root":"CollectionToolbar632879122__root","left":"CollectionToolbar632879122__left","right":"CollectionToolbar632879122__right","fullWidth":"CollectionToolbar632879122__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -196,9 +196,10 @@ function _CollectionToolbar<T, F extends FiltersMap>(
     );
   }, [left, viewsToolbarItem, state.toolbarFiltersStateInitialized]);
 
-  const isLayoutToggleRedesignEnabled = state.container.experiments?.enabled(
-    'specs.cairo.layout-toggle.redesign',
-  );
+  const isLayoutToggleRedesignEnabled =
+    state.container.internalExperiments?.enabled(
+      'specs.cairo.layout-toggle.redesign',
+    );
 
   const shouldAddDivider =
     !isLayoutToggleRedesignEnabled &&

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter131580175";
+var _namespace_ = "SearchOrCustomFilter3726053327";
 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":"SearchOrCustomFilter131580175__root","search":"SearchOrCustomFilter131580175__search","searchMobile":"SearchOrCustomFilter131580175__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3726053327__root","search":"SearchOrCustomFilter3726053327__search","searchMobile":"SearchOrCustomFilter3726053327__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_ = "AutoCompleteReadonly2032414307";
+var _namespace_ = "AutoCompleteReadonly3089546939";
 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":"AutoCompleteReadonly2032414307__root"};
+export var classes = {"root":"AutoCompleteReadonly3089546939__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_ = "ViewsDropdown2270594407";
+var _namespace_ = "ViewsDropdown3819078810";
 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":"ViewsDropdown2270594407__root"};
+export var classes = {"root":"ViewsDropdown3819078810__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_ = "DragHandle4002117985";
+var _namespace_ = "DragHandle467541709";
 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":"DragHandle4002117985__root"};
+export var classes = {"root":"DragHandle467541709__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_ = "EditableCell803715283";
+var _namespace_ = "EditableCell84925255";
 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":"EditableCell803715283__root","validationIndicator":"EditableCell803715283__validationIndicator"};
+export var classes = {"root":"EditableCell84925255__root","validationIndicator":"EditableCell84925255__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_ = "HeaderActionsPopover3127711114";
+var _namespace_ = "HeaderActionsPopover3634079495";
 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":"HeaderActionsPopover3127711114__root"};
+export var classes = {"root":"HeaderActionsPopover3634079495__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_ = "CellViewLayout3312877165";
+var _namespace_ = "CellViewLayout3539931182";
 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":"CellViewLayout3312877165__root"};
+export var classes = {"root":"CellViewLayout3539931182__root"};
 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_ = "Edit2776254426";
+var _namespace_ = "Edit2784384312";
 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":"Edit2776254426__root","booleanEdit":"Edit2776254426__booleanEdit"};
+export var classes = {"root":"Edit2784384312__root","booleanEdit":"Edit2784384312__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_ = "View4114941033";
+var _namespace_ = "View544026253";
 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":"View4114941033__root","booleanView":"View4114941033__booleanView"};
+export var classes = {"root":"View544026253__root","booleanView":"View544026253__booleanView"};
 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_ = "Edit3429442494";
+var _namespace_ = "Edit637931377";
 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":"Edit3429442494__root","dateInput":"Edit3429442494__dateInput"};
+export var classes = {"root":"Edit637931377__root","dateInput":"Edit637931377__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};