@wix/patterns 1.446.0 → 1.448.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal2249243587";
+var _namespace_ = "CmsFieldModal2507451381";
 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":"CmsFieldModal2249243587__root","modal":"CmsFieldModal2249243587__modal"};
+export var classes = {"root":"CmsFieldModal2507451381__root","modal":"CmsFieldModal2507451381__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_ = "ValidationAndDefaultsSection3637935446";
+var _namespace_ = "ValidationAndDefaultsSection3474512585";
 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":"ValidationAndDefaultsSection3637935446__root","accordionWrapper":"ValidationAndDefaultsSection3637935446__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection3474512585__root","accordionWrapper":"ValidationAndDefaultsSection3474512585__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_ = "CharactersLimitInput3097606045";
+var _namespace_ = "CharactersLimitInput3287862385";
 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":"CharactersLimitInput3097606045__root","field":"CharactersLimitInput3097606045__field"};
+export var classes = {"root":"CharactersLimitInput3287862385__root","field":"CharactersLimitInput3287862385__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_ = "Collapse2200595477";
+var _namespace_ = "Collapse769684337";
 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":"Collapse2200595477__root","exit":"Collapse2200595477__exit"};
+export var classes = {"root":"Collapse769684337__root","exit":"Collapse769684337__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_ = "CollectionPage46210937";
+var _namespace_ = "CollectionPage3178609976";
 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":"CollectionPage46210937__root"};
+export var classes = {"root":"CollectionPage3178609976__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_ = "CollectionSectionHeader3603664615";
+var _namespace_ = "CollectionSectionHeader3731640041";
 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":"CollectionSectionHeader3603664615__root","summaryIcon":"CollectionSectionHeader3603664615__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3731640041__root","summaryIcon":"CollectionSectionHeader3731640041__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_ = "CollectionTable3709056707";
+var _namespace_ = "CollectionTable2318312706";
 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":"CollectionTable3709056707__root"};
+export var classes = {"root":"CollectionTable2318312706__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_ = "CollectionTableWSRTable1028882096";
+var _namespace_ = "CollectionTableWSRTable3815611120";
 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":"CollectionTableWSRTable1028882096__root"};
+export var classes = {"root":"CollectionTableWSRTable3815611120__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_ = "CollectionToolbar2577173130";
+var _namespace_ = "CollectionToolbar1757417901";
 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":"CollectionToolbar2577173130__root","right":"CollectionToolbar2577173130__right","left":"CollectionToolbar2577173130__left","fullWidth":"CollectionToolbar2577173130__fullWidth"};
+export var classes = {"root":"CollectionToolbar1757417901__root","right":"CollectionToolbar1757417901__right","left":"CollectionToolbar1757417901__left","fullWidth":"CollectionToolbar1757417901__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_ = "SearchOrCustomFilter3125545518";
+var _namespace_ = "SearchOrCustomFilter4215412556";
 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":"SearchOrCustomFilter3125545518__root","search":"SearchOrCustomFilter3125545518__search","searchMobile":"SearchOrCustomFilter3125545518__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter4215412556__root","search":"SearchOrCustomFilter4215412556__search","searchMobile":"SearchOrCustomFilter4215412556__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_ = "AutoCompleteReadonly1733311372";
+var _namespace_ = "AutoCompleteReadonly1089292761";
 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":"AutoCompleteReadonly1733311372__root"};
+export var classes = {"root":"AutoCompleteReadonly1089292761__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_ = "ViewsDropdown2969463254";
+var _namespace_ = "ViewsDropdown4148272197";
 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":"ViewsDropdown2969463254__root"};
+export var classes = {"root":"ViewsDropdown4148272197__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_ = "DragHandle689828589";
+var _namespace_ = "DragHandle726215010";
 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":"DragHandle689828589__root"};
+export var classes = {"root":"DragHandle726215010__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_ = "EditableCell3571605708";
+var _namespace_ = "EditableCell98859062";
 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":"EditableCell3571605708__root","errorMessage":"EditableCell3571605708__errorMessage"};
+export var classes = {"root":"EditableCell98859062__root","errorMessage":"EditableCell98859062__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_ = "HeaderActionsPopover2155685837";
+var _namespace_ = "HeaderActionsPopover3000738424";
 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":"HeaderActionsPopover2155685837__root"};
+export var classes = {"root":"HeaderActionsPopover3000738424__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_ = "CellViewLayout2225238486";
+var _namespace_ = "CellViewLayout1026225972";
 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":"CellViewLayout2225238486__root"};
+export var classes = {"root":"CellViewLayout1026225972__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_ = "Edit59862760";
+var _namespace_ = "Edit122362979";
 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":"Edit59862760__root","addressInput":"Edit59862760__addressInput"};
+export var classes = {"root":"Edit122362979__root","addressInput":"Edit122362979__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_ = "Edit1066489331";
+var _namespace_ = "Edit1139422417";
 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":"Edit1066489331__root","jsonInput":"Edit1066489331__jsonInput"};
+export var classes = {"root":"Edit1139422417__root","jsonInput":"Edit1139422417__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_ = "Edit1480691619";
+var _namespace_ = "Edit52138907";
 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":"Edit1480691619__root","booleanEdit":"Edit1480691619__booleanEdit"};
+export var classes = {"root":"Edit52138907__root","booleanEdit":"Edit52138907__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_ = "View1411502545";
+var _namespace_ = "View1139038159";
 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":"View1411502545__root","booleanView":"View1411502545__booleanView"};
+export var classes = {"root":"View1139038159__root","booleanView":"View1139038159__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_ = "Edit2526068679";
+var _namespace_ = "Edit344322730";
 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":"Edit2526068679__root"};
+export var classes = {"root":"Edit344322730__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_ = "Edit1271927729";
+var _namespace_ = "Edit4012632565";
 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":"Edit1271927729__root","dateInput":"Edit1271927729__dateInput"};
+export var classes = {"root":"Edit4012632565__root","dateInput":"Edit4012632565__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_ = "View3081433973";
+var _namespace_ = "View3075939998";
 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":"View3081433973__root"};
+export var classes = {"root":"View3075939998__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};