@wix/patterns 1.488.0 → 1.489.0

package/dist/types/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.488.0",
+  "version": "1.489.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -229,11 +229,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.394.0",
-    "@wix/bex-utils": "2.181.0",
+    "@wix/bex-core": "2.395.0",
+    "@wix/bex-utils": "2.182.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.116.0",
-    "@wix/patterns-fields-utils": "1.97.0",
+    "@wix/patterns-fields": "1.117.0",
+    "@wix/patterns-fields-utils": "1.98.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -296,7 +296,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.156.0",
+    "@wix/cairo-integration-utils": "1.157.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -458,5 +458,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "68a347b922b8b9e37703b56a406bc62adb881655121478bd05fd32cf"
+  "falconPackageHash": "627243467dad871d9db25d54f2d644d9d3b239be0a4ba52df770748a"
 }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm3398675787";
+var _namespace_ = "CmsFieldForm2325819247";
 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":"CmsFieldForm3398675787__root","fullBleedDivider":"CmsFieldForm3398675787__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm2325819247__root","fullBleedDivider":"CmsFieldForm2325819247__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal1453244867";
+var _namespace_ = "CmsFieldModal3641793346";
 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":"CmsFieldModal1453244867__root","modal":"CmsFieldModal1453244867__modal"};
+export var classes = {"root":"CmsFieldModal3641793346__root","modal":"CmsFieldModal3641793346__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_ = "ValidationAndDefaultsSection1707926534";
+var _namespace_ = "ValidationAndDefaultsSection1496497963";
 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":"ValidationAndDefaultsSection1707926534__root","accordionWrapper":"ValidationAndDefaultsSection1707926534__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection1496497963__root","accordionWrapper":"ValidationAndDefaultsSection1496497963__accordionWrapper"};
 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_ = "Collapse2363945563";
+var _namespace_ = "Collapse2411328901";
 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":"Collapse2363945563__root","exit":"Collapse2363945563__exit"};
+export var classes = {"root":"Collapse2411328901__root","exit":"Collapse2411328901__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_ = "CollectionPage958440377";
+var _namespace_ = "CollectionPage1852881618";
 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":"CollectionPage958440377__root"};
+export var classes = {"root":"CollectionPage1852881618__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_ = "CollectionSectionHeader4148334812";
+var _namespace_ = "CollectionSectionHeader2779116233";
 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":"CollectionSectionHeader4148334812__root","summaryIcon":"CollectionSectionHeader4148334812__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader2779116233__root","summaryIcon":"CollectionSectionHeader2779116233__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_ = "CollectionTable1896522919";
+var _namespace_ = "CollectionTable661149431";
 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":"CollectionTable1896522919__root"};
+export var classes = {"root":"CollectionTable661149431__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_ = "CollectionTableWSRTable4137520834";
+var _namespace_ = "CollectionTableWSRTable4123018196";
 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":"CollectionTableWSRTable4137520834__root","titlebar":"CollectionTableWSRTable4137520834__titlebar"};
+export var classes = {"root":"CollectionTableWSRTable4123018196__root","titlebar":"CollectionTableWSRTable4123018196__titlebar"};
 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_ = "CollectionToolbar3990194324";
+var _namespace_ = "CollectionToolbar138452636";
 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":"CollectionToolbar3990194324__root","right":"CollectionToolbar3990194324__right","left":"CollectionToolbar3990194324__left","fullWidth":"CollectionToolbar3990194324__fullWidth"};
+export var classes = {"root":"CollectionToolbar138452636__root","right":"CollectionToolbar138452636__right","left":"CollectionToolbar138452636__left","fullWidth":"CollectionToolbar138452636__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_ = "SearchOrCustomFilter2861332951";
+var _namespace_ = "SearchOrCustomFilter2631540064";
 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":"SearchOrCustomFilter2861332951__root","search":"SearchOrCustomFilter2861332951__search","searchMobile":"SearchOrCustomFilter2861332951__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2631540064__root","search":"SearchOrCustomFilter2631540064__search","searchMobile":"SearchOrCustomFilter2631540064__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_ = "AutoCompleteReadonly3460128489";
+var _namespace_ = "AutoCompleteReadonly2847630252";
 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":"AutoCompleteReadonly3460128489__root"};
+export var classes = {"root":"AutoCompleteReadonly2847630252__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_ = "ViewsDropdown4257508007";
+var _namespace_ = "ViewsDropdown2244481173";
 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":"ViewsDropdown4257508007__root"};
+export var classes = {"root":"ViewsDropdown2244481173__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/CustomColumnsPanel.uni.driver.ts

@@ -134,6 +134,12 @@ export function CustomColumnsPanelUniDriver(base: UniDriver, body: UniDriver) {
         getItemAtBase(index).$('[data-hook="info-icon"]'),
         body,
       ),
+    infoIconExistsById: (id: string) =>
+      getItemByIdBase(id).$('[data-hook="info-icon"]').exists(),
+    isPrimaryById: (id: string) =>
+      getItemByIdBase(id).$('[data-hook="field-indication-primary"]').exists(),
+    isPiiById: (id: string) =>
+      getItemByIdBase(id).$('[data-hook="field-indication-pii"]').exists(),
     addNewExists,
     clickAddNew,
     getAddCustomFieldCTAButton: () => addItem(),

package/src/components/CustomColumnsPanel/FieldIndications.tsx

@@ -34,7 +34,12 @@ function _FieldIndications({ column }: FieldIndicationsProps) {
           content={t('cairo.table.custom-columns.indication.pii.tooltip')}
           appendTo="window"
         >
-          <Box align="center" verticalAlign="middle" color="G10">
+          <Box
+            align="center"
+            verticalAlign="middle"
+            color="G10"
+            dataHook="field-indication-pii"
+          >
             <LockLockedFilledSmall />
           </Box>
         </Tooltip>

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -50,7 +50,10 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
     setKeyFieldIfNotDirty,
   } = state;
   const { fieldModal } = state.fieldManagement;
+  const showFieldId = fieldModal.showFieldId ?? true;
   const SettingsSection = state.settingsSection?.Component;
+  const piiWarning =
+    state.typeSupportsPii && containsPii.value ? state.piiWarning : undefined;
   const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const {
@@ -109,7 +112,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
             </FormField>
           </Cell>
           <CustomFieldCollectionInput state={state} />
-          <Cell span={6}>
+          <Cell span={showFieldId ? 6 : 12}>
             <FormField
               dataHook="custom-field-modal-field-name"
               required
@@ -130,40 +133,42 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
               />
             </FormField>
           </Cell>
-          <Cell span={6}>
-            <FormField
-              dataHook="custom-field-modal-field-key"
-              required
-              label={
-                fieldModal.text.keyLabel ??
-                t(
-                  'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
-                )
-              }
-              infoContent={
-                mode === 'new'
-                  ? t(
-                      'cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip',
-                    )
-                  : t('cairo.customFields.editCustomField.fieldKey.tooltip')
-              }
-              status={key.hasError ? 'error' : undefined}
-              statusMessage={key.error}
-            >
-              <Input
-                dataHook="custom-field-modal-key"
-                disabled={mode === 'edit'}
-                value={key.value}
-                onChange={(e) => {
-                  key.onChange(e.target.value);
-                  customFieldModalBiReporter.reportKeyFormFieldChange();
-                }}
-                placeholder={t(
-                  'cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder',
-                )}
-              />
-            </FormField>
-          </Cell>
+          {showFieldId && (
+            <Cell span={6}>
+              <FormField
+                dataHook="custom-field-modal-field-key"
+                required
+                label={
+                  fieldModal.text.keyLabel ??
+                  t(
+                    'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
+                  )
+                }
+                infoContent={
+                  mode === 'new'
+                    ? t(
+                        'cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip',
+                      )
+                    : t('cairo.customFields.editCustomField.fieldKey.tooltip')
+                }
+                status={key.hasError ? 'error' : undefined}
+                statusMessage={key.error}
+              >
+                <Input
+                  dataHook="custom-field-modal-key"
+                  disabled={mode === 'edit'}
+                  value={key.value}
+                  onChange={(e) => {
+                    key.onChange(e.target.value);
+                    customFieldModalBiReporter.reportKeyFormFieldChange();
+                  }}
+                  placeholder={t(
+                    'cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder',
+                  )}
+                />
+              </FormField>
+            </Cell>
+          )}
           {state.typeSupportsPii && (
             <PiiFormFields
               containsPii={{
@@ -173,14 +178,18 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
               mode={mode}
               canChangePii={state.canChangePii}
               language={language}
-              piiWarning={state.piiWarning}
+              piiWarning={piiWarning}
             />
           )}
         </Layout>
       </Box>
       {state.showSettings && (
         <>
-          <Box marginTop="SP4" marginLeft={fullBleed} marginRight={fullBleed}>
+          <Box
+            marginTop={piiWarning ? '24px' : 'SP4'}
+            marginLeft={fullBleed}
+            marginRight={fullBleed}
+          >
             <Divider />
           </Box>
           <Box

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields989464933";
+var _namespace_ = "CustomFieldFormPiiFields3354195506";
 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":"CustomFieldFormPiiFields989464933__root","tooltipText":"CustomFieldFormPiiFields989464933__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields3354195506__root","tooltipText":"CustomFieldFormPiiFields3354195506__tooltipText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.tsx

@@ -9,6 +9,7 @@ import {
   TextButton,
   ToggleSwitch,
 } from '@wix/design-system';
+import { StatusWarningSmall } from '@wix/wix-ui-icons-common/lazy';
 import type { FieldPiiWarning } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { Trans } from '../Trans';
@@ -49,66 +50,65 @@ export function PiiFormFields({
   const isPiiLocked = mode === 'edit' && !canChangePii;
 
   return (
-    <>
-      <Cell span={12}>
-        <FormField>
-          <Box gap="9px" marginBlockEnd={isPiiLocked ? '6px' : undefined}>
-            <ToggleSwitch
-              dataHook="pii-toggle-switch"
-              aria-label={translate(translateKeys.toggleName)}
-              size="medium"
-              disabled={!canChangePii}
-              checked={containsPii.value}
-              onChange={(e) => containsPii.onChange(e.target.checked)}
-            />
-            <Box gap="3px">
-              <Text size="small" dataHook="pii-toggle-name">
-                <Trans i18nKey={translateKeys.toggleName} />
-              </Text>
-              <InfoIcon
-                size="small"
-                content={
-                  <Text
-                    className={classes.tooltipText}
-                    size={tooltipTextSize}
-                    weight={isBmHarmonyTheme ? 'normal' : 'thin'}
-                    light
-                  >
-                    <Trans
-                      i18nKey={translateKeys.toggleInfo}
-                      components={{
-                        linkVal: (
-                          <TextButton
-                            as="a"
-                            href={whyIsItImportantLink}
-                            underline="always"
-                            size={tooltipTextSize}
-                            skin="light"
-                            target="_blank"
-                          />
-                        ),
-                      }}
-                    />
-                  </Text>
-                }
-              />
-            </Box>
-          </Box>
-        </FormField>
-        {isPiiLocked && (
-          <Box>
-            <Text size="small" dataHook="pii-toggle-edit-note">
-              <Trans i18nKey={translateKeys.toggleEditNote} />
+    <Cell span={12}>
+      <FormField>
+        <Box gap="9px" marginBlockEnd={isPiiLocked ? '6px' : undefined}>
+          <ToggleSwitch
+            dataHook="pii-toggle-switch"
+            aria-label={translate(translateKeys.toggleName)}
+            size="medium"
+            disabled={!canChangePii}
+            checked={containsPii.value}
+            onChange={(e) => containsPii.onChange(e.target.checked)}
+          />
+          <Box gap="3px">
+            <Text size="small" dataHook="pii-toggle-name">
+              <Trans i18nKey={translateKeys.toggleName} />
             </Text>
+            <InfoIcon
+              size="small"
+              content={
+                <Text
+                  className={classes.tooltipText}
+                  size={tooltipTextSize}
+                  weight={isBmHarmonyTheme ? 'normal' : 'thin'}
+                  light
+                >
+                  <Trans
+                    i18nKey={translateKeys.toggleInfo}
+                    components={{
+                      linkVal: (
+                        <TextButton
+                          as="a"
+                          href={whyIsItImportantLink}
+                          underline="always"
+                          size={tooltipTextSize}
+                          skin="light"
+                          target="_blank"
+                        />
+                      ),
+                    }}
+                  />
+                </Text>
+              }
+            />
           </Box>
-        )}
-      </Cell>
-      {containsPii.value && piiWarning && (
-        <Cell span={12}>
+        </Box>
+      </FormField>
+      {isPiiLocked && (
+        <Box>
+          <Text size="small" dataHook="pii-toggle-edit-note">
+            <Trans i18nKey={translateKeys.toggleEditNote} />
+          </Text>
+        </Box>
+      )}
+      {piiWarning && (
+        <Box marginTop="12px">
           <SectionHelper
             dataHook="custom-field-modal-pii-warning"
             skin="warning"
             showPrefixIcon
+            prefixIcon={<StatusWarningSmall />}
           >
             {/* Inline, not SectionHelper's `actionText` — that slot renders a
                 bordered button on its own row. */}
@@ -125,8 +125,8 @@ export function PiiFormFields({
               </TextButton>
             )}
           </SectionHelper>
-        </Cell>
+        </Box>
       )}
-    </>
+    </Cell>
   );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle480386188";
+var _namespace_ = "DragHandle1510203898";
 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":"DragHandle480386188__root"};
+export var classes = {"root":"DragHandle1510203898__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_ = "EditableCell1509611630";
+var _namespace_ = "EditableCell2863863235";
 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":"EditableCell1509611630__root","errorMessage":"EditableCell1509611630__errorMessage"};
+export var classes = {"root":"EditableCell2863863235__root","errorMessage":"EditableCell2863863235__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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