@wix/patterns 1.447.0 → 1.449.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1720697502";
+var _namespace_ = "Edit1479925910";
 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":"Edit1720697502__root","wrapper":"Edit1720697502__wrapper","overlay":"Edit1720697502__overlay"};
+export var classes = {"root":"Edit1479925910__root","wrapper":"Edit1479925910__wrapper","overlay":"Edit1479925910__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3043044264";
+var _namespace_ = "Edit3644570053";
 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":"Edit3043044264__root","urlInput":"Edit3043044264__urlInput"};
+export var classes = {"root":"Edit3644570053__root","urlInput":"Edit3644570053__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2333694355";
+var _namespace_ = "View923297067";
 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":"View2333694355__root","textView":"View2333694355__textView","urlText":"View2333694355__urlText","suffix":"View2333694355__suffix"};
+export var classes = {"root":"View923297067__root","textView":"View923297067__textView","urlText":"View923297067__urlText","suffix":"View923297067__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EmptyState/EmptyStateBase.st.css.ts

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

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

@@ -2,6 +2,8 @@ import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
 import {
   BadgeUniDriver,
+  IconButtonUniDriver,
+  MessageModalLayoutUniDriver,
   PageHeaderUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 import { FormPageContentUniDriver } from '../FormPageContent/FormPageContent.uni.driver';
@@ -49,6 +51,17 @@ export const EntityPageUniDriver = (base: UniDriver, body: UniDriver) => {
     /** Returns badge driver at index */
     getBadgeAt,
 
+    getDeleteActionButton: () =>
+      IconButtonUniDriver(
+        base.$(`[data-hook="entity-page-delete-action-button"]`),
+        body,
+      ),
+    getDeleteConfirmModal: () =>
+      MessageModalLayoutUniDriver(
+        body.$(`[data-hook="entity-page-delete-confirm-modal"]`),
+        body,
+      ),
+
     ...formPageContentUniDriver,
     ...baseUniDriverFactory(base),
   };

package/src/components/EntityPage/EntityPageActionsBar.tsx

@@ -1,23 +1,107 @@
-import React from 'react';
+import React, { cloneElement } from 'react';
+import { Delete } from '@wix/wix-ui-icons-common/lazy';
+import { ConditionalModalState } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useEntityPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
-import { MoreActionsElement } from '../MoreActions';
+import type {
+  MoreActionsElement,
+  MoreActionsItem,
+  MoreActionsProps,
+} from '../MoreActions';
+import type { MoreActionsPropItem } from '../MoreActions/MoreActionsBase';
 import { FormPageActionsBar } from '../FormPage';
 
+const LazyEntityPageDeleteAction = React.lazy(() =>
+  import('./EntityPageDeleteAction').then((module) => ({
+    default: module.EntityPageDeleteAction,
+  })),
+);
+
+const LazyEntityPageDeleteConfirmModal = React.lazy(() =>
+  import('./EntityPageDeleteConfirmModal').then((module) => ({
+    default: module.EntityPageDeleteConfirmModal,
+  })),
+);
+
 interface EntityPageActionsBarProps {
   moreActions?: MoreActionsElement;
 }
 
-export function _EntityPageActionsBar(props: EntityPageActionsBarProps) {
+const hasGroupedItems = (
+  items: MoreActionsProps['items'],
+): items is MoreActionsPropItem[][] => Array.isArray(items?.[0]);
+
+const appendMoreActionsItem = (
+  items: MoreActionsProps['items'],
+  item: MoreActionsItem,
+): MoreActionsProps['items'] => {
+  if (!items?.length) {
+    return [item];
+  }
+
+  if (hasGroupedItems(items)) {
+    return [...items, [item]];
+  }
+
+  return [items, [item]];
+};
+
+export function _EntityPageActionsBar({
+  moreActions,
+}: EntityPageActionsBarProps) {
+  const { translate: t } = useWixPatternsContainer();
   const state = useEntityPageContext();
+  const deleteAction = state.deleteActionState;
+  const [confirmModal] = React.useState(
+    () =>
+      new ConditionalModalState<null>({
+        onConfirm: () => deleteAction.deleteEntity(),
+      }),
+  );
+
+  const deleteMoreActionsItem: MoreActionsItem = {
+    dataHook: 'entity-page-delete-action-menu-item',
+    biName: 'delete',
+    disabled:
+      deleteAction.task.status.isLoading || !!deleteAction.disabledReason,
+    onClick: () => confirmModal.open(null),
+    prefixIcon: <Delete />,
+    skin: 'destructive',
+    text: t('cairo.delete.button'),
+  };
+  const enhancedMoreActions =
+    deleteAction.canShow && moreActions
+      ? cloneElement(moreActions, {
+          items: appendMoreActionsItem(
+            moreActions.props.items,
+            deleteMoreActionsItem,
+          ),
+        })
+      : undefined;
 
   return (
-    <FormPageActionsBar
-      onCancel={state.onCancel.bind(state)}
-      onSave={state.handleSubmit.bind(state)}
-      actionsBarConfig={state.actionsBarConfig}
-      {...props}
-    />
+    <>
+      <FormPageActionsBar
+        deleteAction={
+          enhancedMoreActions ??
+          (deleteAction.canShow ? (
+            <React.Suspense fallback={null}>
+              <LazyEntityPageDeleteAction />
+            </React.Suspense>
+          ) : undefined)
+        }
+        moreActions={deleteAction.canShow ? undefined : moreActions}
+        onCancel={state.onCancel.bind(state)}
+        onSave={state.handleSubmit.bind(state)}
+        actionsBarConfig={state.actionsBarConfig}
+      />
+      {enhancedMoreActions && confirmModal.isOpen && (
+        <React.Suspense fallback={null}>
+          <LazyEntityPageDeleteConfirmModal state={confirmModal} />
+        </React.Suspense>
+      )}
+    </>
   );
 }
 

package/src/components/EntityPage/EntityPageDeleteAction.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { IconButton, Tooltip } from '@wix/design-system';
+import { Delete } from '@wix/wix-ui-icons-common/lazy';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useEntityPageContext } from '../../providers';
+import { ConditionalModalState } from '@wix/bex-core';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { EntityPageDeleteConfirmModal } from './EntityPageDeleteConfirmModal';
+
+function _EntityPageDeleteAction() {
+  const { translate: t } = useWixPatternsContainer();
+  const state = useEntityPageContext();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const deleteAction = state.deleteActionState;
+  const [confirmModal] = React.useState(
+    () =>
+      new ConditionalModalState<null>({
+        onConfirm: () => deleteAction.deleteEntity(),
+      }),
+  );
+
+  if (!deleteAction.canShow) {
+    return null;
+  }
+
+  const disabledReason = deleteAction.disabledReason;
+  const isDeleting = deleteAction.task.status.isLoading;
+  const tooltipContent = disabledReason ?? t('cairo.delete.button');
+
+  return (
+    <>
+      <Tooltip content={tooltipContent}>
+        <IconButton
+          dataHook="entity-page-delete-action-button"
+          ariaLabel={tooltipContent}
+          priority="tertiary"
+          size={isBmHarmonyTheme ? 'small' : 'medium'}
+          disabled={isDeleting || !!disabledReason}
+          onClick={() => confirmModal.open(null)}
+        >
+          <Delete />
+        </IconButton>
+      </Tooltip>
+      <EntityPageDeleteConfirmModal state={confirmModal} />
+    </>
+  );
+}
+
+export const EntityPageDeleteAction = observer(_EntityPageDeleteAction);

package/src/components/EntityPage/EntityPageDeleteConfirmModal.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ConditionalModalState } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useEntityPageContext } from '../../providers';
+import { MessageActionModal } from '../ActionModal';
+
+interface EntityPageDeleteConfirmModalProps {
+  state: ConditionalModalState<null>;
+}
+
+function _EntityPageDeleteConfirmModal({
+  state,
+}: EntityPageDeleteConfirmModalProps) {
+  const { translate: t } = useWixPatternsContainer();
+  const pageState = useEntityPageContext();
+  const isDeleting = pageState.deleteActionState.task.status.isLoading;
+
+  if (!pageState.entity || !state.isOpen) {
+    return null;
+  }
+
+  return (
+    <MessageActionModal
+      dataHook="entity-page-delete-confirm-modal"
+      state={state}
+      skin="destructive"
+      title={t('cairo.deleteModal.title')}
+      content={t('cairo.deleteModal.body')}
+      primaryButtonText={t('cairo.delete.button')}
+      secondaryButtonText={t('cairo.cancel.button')}
+      primaryButtonProps={{ disabled: isDeleting }}
+      secondaryButtonProps={{ disabled: isDeleting }}
+    />
+  );
+}
+
+export const EntityPageDeleteConfirmModal = observer(
+  _EntityPageDeleteConfirmModal,
+);

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

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

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

package/src/components/FormPage/FormPageActionsBar.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, Loader } from '@wix/design-system';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useFormPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
@@ -9,6 +9,7 @@ import { useIsMobile } from '../../hooks/useIsMobile';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface FormPageActionsBarProps {
+  deleteAction?: ReactNode;
   moreActions?: MoreActionsElement;
   onCancel?: () => void;
   onSave?: () => void;
@@ -16,6 +17,7 @@ export interface FormPageActionsBarProps {
 }
 
 export function _FormPageActionsBar({
+  deleteAction,
   moreActions,
   onCancel,
   onSave,
@@ -32,6 +34,7 @@ export function _FormPageActionsBar({
 
   return (
     <Box gap="SP2">
+      {deleteAction}
       {isMobile ? undefined : moreActions}
       <Button
         priority="secondary"

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload3472681618";
+var _namespace_ = "ImportStepUpload1101526918";
 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":"ImportStepUpload3472681618__root","fileUpload":"ImportStepUpload3472681618__fileUpload"};
+export var classes = {"root":"ImportStepUpload1101526918__root","fileUpload":"ImportStepUpload1101526918__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2952309050";
+var _namespace_ = "LoadingRow3388347116";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow2952309050__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2952309050__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3388347116__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3388347116__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar592642826";
+var _namespace_ = "MultiBulkActionToolbar1681003559";
 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":"MultiBulkActionToolbar592642826__root","leftGroupWrapper":"MultiBulkActionToolbar592642826__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar592642826__selectedCountItem","selectedCountText":"MultiBulkActionToolbar592642826__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1681003559__root","leftGroupWrapper":"MultiBulkActionToolbar1681003559__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1681003559__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1681003559__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css

@@ -1,7 +1,13 @@
+@property st-global(--wds-space-300);
+@property st-global(--wds-table-list-item-fill-hover);
+@property st-global(--wds-color-border-standard-primary-active);
+@property st-global(--wsr-color-B50);
+@property st-global(--wsr-color-B10);
+
 .firstLevel td {
   /* important! until moving NestedTableRow.st.css to WSR */
-  padding-top: 18px !important;
-  padding-bottom: 18px !important;
+  padding-top: var(--wds-space-300, 18px) !important;
+  padding-bottom: var(--wds-space-300, 18px) !important;
 }
 
 .root {
@@ -9,7 +15,10 @@
 }
 
 .root:hover {
-  background-color: #E7F0FF !important;
+  background-color: var(
+    --wds-table-list-item-fill-hover,
+    var(--wsr-color-B50, #e7f0ff)
+  ) !important;
 }
 
 .root:expandable {
@@ -21,6 +30,7 @@
   width: 100%;
 }
 
+/* prettier-ignore */
 .root:hover td:first-of-type::before,
 .parentHovered td:first-of-type::before {
   content: '';
@@ -29,5 +39,5 @@
   bottom: 0;
   left: 0;
   width: 2px;
-  background-color: #5999FF;
+  background-color: var(--wds-color-border-standard-primary-active, var(--wsr-color-B10, #116DFF));
 }

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow2340955180";
+var _namespace_ = "NestedTableRow1044508703";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow2340955180__root","firstLevel":"NestedTableRow2340955180__firstLevel","placeholder":"NestedTableRow2340955180__placeholder","parentHovered":"NestedTableRow2340955180__parentHovered"};
+export var classes = {"root":"NestedTableRow1044508703__root","firstLevel":"NestedTableRow1044508703__firstLevel","placeholder":"NestedTableRow1044508703__placeholder","parentHovered":"NestedTableRow1044508703__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {}; 
+export var vars = {"wds-space-300":"--wds-space-300","wds-table-list-item-fill-hover":"--wds-table-list-item-fill-hover","wds-color-border-standard-primary-active":"--wds-color-border-standard-primary-active","wsr-color-B50":"--wsr-color-B50","wsr-color-B10":"--wsr-color-B10"}; 
 
 
 

package/src/components/NestedTable/NestedTableRow.tsx

@@ -74,10 +74,7 @@ const _NestedTableRow = forwardRef(
             ? classes.firstLevel
             : undefined,
           dataTableRowSt(dataTableRowClasses.root, {
-            skin:
-              item.state.childrenDepth === 0 && !isSameEntityAsOtherLevels
-                ? 'neutral'
-                : 'light',
+            skin: 'light',
           }),
           className,
         )}

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css

@@ -1,12 +1,21 @@
-/*@st-import [shadow20] from "@wix/wix-design-system/src/Foundation/stylable/shadows.st.css";*/
-/*@st-import [D80] from "@wix/wix-design-system/src/Foundation/stylable/colors.st.css";*/
+@property st-global(--wds-color-fill-surface-overlay);
+@property st-global(--wds-shadow-surface-overlay);
+@property st-global(--wsr-color-D80);
+@property st-global(--wsr-shadow20);
 
 .root {
   position: absolute;
   transform: translate(6px, 6px);
-  /*background-color: value(D80);*/
-  background-color: #ffffff;
-  /*box-shadow: value(shadow20);*/
-  box-shadow: 0 2px 4px 0 rgba(0, 6, 36, 0.12),
-    0 0 6px 0 rgba(0, 6, 36, 0.12);
+  background-color: var(
+    --wds-color-fill-surface-overlay,
+    var(--wsr-color-D80, #ffffff)
+  );
+  box-shadow: var(
+    --wds-shadow-surface-overlay,
+    var(
+      --wsr-shadow20,
+      0 2px 4px 0 rgba(22, 45, 61, 0.12),
+      0 0 6px 0 rgba(22, 45, 61, 0.12)
+    )
+  );
 }