@wix/patterns 1.445.0 → 1.447.0

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal236915718";
+var _namespace_ = "CmsFieldModal4037089959";
 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":"CmsFieldModal236915718__root","modal":"CmsFieldModal236915718__modal"};
+export var classes = {"root":"CmsFieldModal4037089959__root","modal":"CmsFieldModal4037089959__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection3169958293";
+var _namespace_ = "ValidationAndDefaultsSection2505763082";
 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":"ValidationAndDefaultsSection3169958293__root","accordionWrapper":"ValidationAndDefaultsSection3169958293__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection2505763082__root","accordionWrapper":"ValidationAndDefaultsSection2505763082__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput3585359964";
+var _namespace_ = "CharactersLimitInput1647829329";
 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":"CharactersLimitInput3585359964__root","field":"CharactersLimitInput3585359964__field"};
+export var classes = {"root":"CharactersLimitInput1647829329__root","field":"CharactersLimitInput1647829329__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse2410963627";
+var _namespace_ = "Collapse4271225488";
 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":"Collapse2410963627__root","exit":"Collapse2410963627__exit"};
+export var classes = {"root":"Collapse4271225488__root","exit":"Collapse4271225488__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_ = "CollectionPage937746320";
+var _namespace_ = "CollectionPage633871647";
 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":"CollectionPage937746320__root"};
+export var classes = {"root":"CollectionPage633871647__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_ = "CollectionSectionHeader2225851478";
+var _namespace_ = "CollectionSectionHeader17716278";
 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":"CollectionSectionHeader2225851478__root","summaryIcon":"CollectionSectionHeader2225851478__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader17716278__root","summaryIcon":"CollectionSectionHeader17716278__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_ = "CollectionTable839224026";
+var _namespace_ = "CollectionTable1652369058";
 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":"CollectionTable839224026__root"};
+export var classes = {"root":"CollectionTable1652369058__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_ = "CollectionTableWSRTable555993268";
+var _namespace_ = "CollectionTableWSRTable3457958129";
 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":"CollectionTableWSRTable555993268__root"};
+export var classes = {"root":"CollectionTableWSRTable3457958129__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_ = "CollectionToolbar1623100111";
+var _namespace_ = "CollectionToolbar1210449187";
 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":"CollectionToolbar1623100111__root","right":"CollectionToolbar1623100111__right","left":"CollectionToolbar1623100111__left","fullWidth":"CollectionToolbar1623100111__fullWidth"};
+export var classes = {"root":"CollectionToolbar1210449187__root","right":"CollectionToolbar1210449187__right","left":"CollectionToolbar1210449187__left","fullWidth":"CollectionToolbar1210449187__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_ = "SearchOrCustomFilter3012136456";
+var _namespace_ = "SearchOrCustomFilter1982754589";
 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":"SearchOrCustomFilter3012136456__root","search":"SearchOrCustomFilter3012136456__search","searchMobile":"SearchOrCustomFilter3012136456__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1982754589__root","search":"SearchOrCustomFilter1982754589__search","searchMobile":"SearchOrCustomFilter1982754589__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_ = "AutoCompleteReadonly434646455";
+var _namespace_ = "AutoCompleteReadonly3466311859";
 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":"AutoCompleteReadonly434646455__root"};
+export var classes = {"root":"AutoCompleteReadonly3466311859__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_ = "ViewsDropdown15537165";
+var _namespace_ = "ViewsDropdown240576298";
 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":"ViewsDropdown15537165__root"};
+export var classes = {"root":"ViewsDropdown240576298__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_ = "DragHandle1948296544";
+var _namespace_ = "DragHandle756875483";
 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":"DragHandle1948296544__root"};
+export var classes = {"root":"DragHandle756875483__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/AddItemRow.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { AddItem } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface AddItemRowProps {
   onAdd: () => void;
 }
 
 export function AddItemRow({ onAdd }: AddItemRowProps) {
+  const { translate: t } = useWixPatternsContainer();
   return (
     <div
       data-hook="add-row-button"
@@ -28,7 +30,7 @@ export function AddItemRow({ onAdd }: AddItemRowProps) {
         borderRadius="6px"
         onClick={onAdd}
       >
-        Add Item
+        {t('cairo.editableTable.addItem.CTA')}
       </AddItem>
     </div>
   );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell3513595393";
+var _namespace_ = "EditableCell2550432053";
 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":"EditableCell3513595393__root","errorMessage":"EditableCell3513595393__errorMessage"};
+export var classes = {"root":"EditableCell2550432053__root","errorMessage":"EditableCell2550432053__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableTable.tsx

@@ -24,6 +24,7 @@ import { useAddRow } from './useAddRow';
 import type { TableColumn } from '../../model';
 import { useHeaderActions } from './useHeaderActions';
 import { version as cairoVersion } from '../../version';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface EditableTableProps<
   T,
@@ -74,6 +75,8 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
 
   useEditableTableCollectionSyncProps(props);
 
+  const { translate: t } = useWixPatternsContainer();
+
   const editableColumns = useMemo(
     () => [...columns, ...state.sourceColumns],
     [columns, state.sourceColumns],
@@ -116,7 +119,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
   const hasInvalidRows = invalidCellKeys.size > 0;
   const rowStatus: NonNullable<TableVirtualProps<T, F>['rowStatus']> = (row) =>
     state.allColumns.some((col) => invalidCellKeys.has(`${row.key}:${col.id}`))
-      ? { messages: ['This row has invalid cells'] }
+      ? { messages: [t('cairo.editableTable.row.invalidCells.tooltip')] }
       : null;
 
   return (

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { observer } from 'mobx-react-lite';
 import type { FiltersMap } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import {
   DropdownLayout,
   Tooltip,
@@ -79,6 +80,7 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
   menuRef,
   onClose,
 }: EditableTableContextMenuProps<T, F>) {
+  const { translate: t } = useWixPatternsContainer();
   const {
     cellInteraction,
     clipboard,
@@ -163,19 +165,21 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
       : state.isRowDeleteDisabled(rowKeys[0] ?? cell.rowKey);
   const deleteDisabledReasonFor = (rowKeys: string[]) =>
     removeItemDisabled
-      ? "You don't have permission to delete rows"
+      ? t('cairo.editableTable.contextMenu.deleteRow.noPermission.tooltip')
       : rowKeys.length > 1 && state.multiDeleteDisabled
-      ? "You don't have permission to delete multiple rows at once"
+      ? t(
+          'cairo.editableTable.contextMenu.deleteRows.noPermissionMulti.tooltip',
+        )
       : rowKeys.length > 1
-      ? "Some of the selected rows can't be deleted"
+      ? t('cairo.editableTable.contextMenu.deleteRows.someNotDeletable.tooltip')
       : state.rowDeleteDisabledReason(rowKeys[0] ?? cell.rowKey) ??
-        "This row can't be deleted";
+        t('cairo.editableTable.contextMenu.deleteRow.notDeletable.tooltip');
 
   const addDisabledReason = addItemDisabled
-    ? "You don't have permission to add rows"
+    ? t('cairo.editableTable.contextMenu.addRow.noPermission.tooltip')
     : undefined;
   const updateDisabledReason = updateItemDisabled
-    ? "You don't have permission to edit rows"
+    ? t('cairo.editableTable.contextMenu.editRow.noPermission.tooltip')
     : undefined;
 
   const pushRowActions = (targetKeys: string[]) => {
@@ -183,21 +187,21 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
       options.push(
         buildMenuAction({
           id: 'add-above',
-          title: 'Add Row Above',
+          title: t('cairo.editableTable.contextMenu.addRowAbove.CTA'),
           prefixIcon: <AddSmall />,
           disabled: !!addItemDisabled,
           disabledDescription: addDisabledReason,
         }),
         buildMenuAction({
           id: 'add-below',
-          title: 'Add Row Below',
+          title: t('cairo.editableTable.contextMenu.addRowBelow.CTA'),
           prefixIcon: <AddSmall />,
           disabled: !!addItemDisabled,
           disabledDescription: addDisabledReason,
         }),
         buildMenuAction({
           id: 'duplicate',
-          title: 'Duplicate Row',
+          title: t('cairo.editableTable.contextMenu.duplicateRow.CTA'),
           prefixIcon: <DuplicateSmall />,
           disabled: !!addItemDisabled,
           disabledDescription: addDisabledReason,
@@ -210,10 +214,9 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
     options.push(
       buildMenuAction({
         id: 'delete',
-        title:
-          targetKeys.length > 1
-            ? `Delete ${targetKeys.length} Rows`
-            : 'Delete Row',
+        title: t('cairo.editableTable.contextMenu.deleteRow.CTA', {
+          count: targetKeys.length,
+        }),
         prefixIcon: <DeleteSmall />,
         skin: 'destructive',
         disabled: deleteDisabled,
@@ -236,7 +239,9 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
         options.push(
           buildMenuAction({
             id: 'delete',
-            title: `Remove ${selectedRowCount} Rows`,
+            title: t('cairo.editableTable.contextMenu.removeRows.CTA', {
+              count: selectedRowCount,
+            }),
             prefixIcon: <DeleteSmall />,
             skin: 'destructive',
             disabled: deleteDisabled,
@@ -255,12 +260,12 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
     options.push(
       buildMenuAction({
         id: 'copy',
-        title: `Copy`,
+        title: t('cairo.editableTable.contextMenu.copy.CTA'),
         disabled: selectedCount === 0,
       }),
       buildMenuAction({
         id: 'cut',
-        title: `Cut`,
+        title: t('cairo.editableTable.contextMenu.cut.CTA'),
         disabled:
           selectedCount === 0 ||
           !!updateItemDisabled ||
@@ -269,14 +274,15 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
       }),
       buildMenuAction({
         id: 'paste',
-        title: `Paste`,
+        title: t('cairo.editableTable.contextMenu.paste.CTA'),
         disabled: !!updateItemDisabled || isPasteTargetReadOnly,
         disabledDescription: updateDisabledReason,
       }),
       buildMenuAction({
         id: 'clear',
-        title:
-          selectedCount > 1 ? `Clear ${selectedCount} Cells` : 'Clear Cell',
+        title: t('cairo.editableTable.contextMenu.clearCell.CTA', {
+          count: selectedCount,
+        }),
         disabled:
           selectedCount === 0 ||
           !!updateItemDisabled ||

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover1397666700";
+var _namespace_ = "HeaderActionsPopover1093010872";
 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":"HeaderActionsPopover1397666700__root"};
+export var classes = {"root":"HeaderActionsPopover1093010872__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_ = "CellViewLayout554478013";
+var _namespace_ = "CellViewLayout4150823277";
 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":"CellViewLayout554478013__root"};
+export var classes = {"root":"CellViewLayout4150823277__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_ = "Edit1072967722";
+var _namespace_ = "Edit1960941028";
 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":"Edit1072967722__root","addressInput":"Edit1072967722__addressInput"};
+export var classes = {"root":"Edit1960941028__root","addressInput":"Edit1960941028__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -45,7 +45,7 @@ export const addressCellType = defineCellType<Address | undefined>({
     } catch {}
     return undefined;
   },
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (!value) {
       return null;
     }
@@ -56,7 +56,7 @@ export const addressCellType = defineCellType<Address | undefined>({
     ) {
       return null;
     }
-    return 'Invalid address';
+    return translate!('cairo.editableTable.address.validation.invalid');
   },
   editable: true,
   clearable: true,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2343355819";
+var _namespace_ = "Edit109297893";
 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":"Edit2343355819__root","jsonInput":"Edit2343355819__jsonInput"};
+export var classes = {"root":"Edit109297893__root","jsonInput":"Edit109297893__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_ = "Edit2165660215";
+var _namespace_ = "Edit1596998599";
 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":"Edit2165660215__root","booleanEdit":"Edit2165660215__booleanEdit"};
+export var classes = {"root":"Edit1596998599__root","booleanEdit":"Edit1596998599__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_ = "View1705582049";
+var _namespace_ = "View207708107";
 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":"View1705582049__root","booleanView":"View1705582049__booleanView"};
+export var classes = {"root":"View207708107__root","booleanView":"View207708107__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_ = "Edit2491439285";
+var _namespace_ = "Edit94166431";
 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":"Edit2491439285__root"};
+export var classes = {"root":"Edit94166431__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/color/index.tsx

@@ -28,13 +28,13 @@ export const colorCellType = defineCellType<string | undefined>({
   EditComponent: ColorEdit,
   serialize: (value) => value ?? '',
   deserialize: (raw) => (raw ? raw : undefined),
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (!value) {
       return null;
     }
     return HEX_RE.test(value)
       ? null
-      : 'Invalid color (expected #RGB or #RRGGBB)';
+      : translate!('cairo.editableTable.color.validation.invalid');
   },
   editable: true,
   clearable: true,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4289704283";
+var _namespace_ = "Edit4219668625";
 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":"Edit4289704283__root","dateInput":"Edit4289704283__dateInput"};
+export var classes = {"root":"Edit4219668625__root","dateInput":"Edit4219668625__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_ = "View612432300";
+var _namespace_ = "View3230974286";
 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":"View612432300__root"};
+export var classes = {"root":"View3230974286__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};