chore: move anvil widgets to wds (#35812)

## Description
- Moved Section and Zone widgets to wds folder

Fixes #35810

> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10511698329>
> Commit: 67868d550cebe7b2393803c805132b548c6f1046
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10511698329&attempt=3"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Thu, 22 Aug 2024 18:06:57 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Introduced new `WDSSectionWidget` and `WDSZoneWidget` components,
reflecting a new namespace for widget organization.
- Added new constants and an enumeration for widget configuration in the
`wds/constants` module.

- **Improvements**
- Updated import paths for various constants and components to
streamline the codebase organization.

- **Collaboration Enhancements**
- Updated ownership in the `CODEOWNERS` file to include both the
`@appsmithorg/wds-team` and `@appsmithorg/anvil-team` for better
collaboration on widget development.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

CODEOWNERS

@@ -21,11 +21,10 @@ app/client/tsconfig.path.json @KelvinOm
 # WDS team
 app/client/packages/design-system/* @appsmithorg/wds-team
 app/client/packages/storybook/* @appsmithorg/wds-team
-app/client/src/widgets/wds/* @appsmithorg/wds-team
+app/client/src/widgets/wds/* @appsmithorg/wds-team @appsmithorg/anvil-team
 
 # Anvil-team
 app/client/src/layoutSystems/anvil/* @appsmithorg/anvil-team
-app/client/src/widgets/anvil/* @appsmithorg/anvil-team
 
 # App viewers pod
 app/client/src/widgets/* @appsmithorg/app-viewers
@@ -53,52 +52,52 @@ app/server/appsmith-server/src/main/java/com/appsmith/server/services/FeatureFla
 app/server/appsmith-server/src/test/java/com/appsmith/server/services/FeatureFlagServiceTest.java @nilanshbansal
 
 # UI Builders Pod
-app/client/generators/* @appsmithorg/ui-builders
-app/client/src/actions/autoHeightActions.ts @appsmithorg/ui-builders
-app/client/src/actions/autoLayoutActions.ts @appsmithorg/ui-builders
-app/client/src/actions/canvasSelectionActions.ts @appsmithorg/ui-builders
-app/client/src/actions/reflowActions.ts @appsmithorg/ui-builders
-app/client/src/actions/widgetSelectionActions.ts @appsmithorg/ui-builders
-app/client/src/components/propertyControls/* @appsmithorg/ui-builders
-app/client/src/layoutSystems/* @appsmithorg/ui-builders
-app/client/src/pages/Editor/Canvas.tsx @appsmithorg/ui-builders
-app/client/src/pages/Editor/CanvasLayoutConversion/* @appsmithorg/ui-builders
-app/client/src/pages/Editor/PropertyPane/* @appsmithorg/ui-builders
-app/client/src/pages/Editor/WidgetsEditor/* @appsmithorg/ui-builders
-app/client/src/reducers/entityReducers/autoHeightReducers/* @appsmithorg/ui-builders
-app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts @appsmithorg/ui-builders
-app/client/src/reflow/* @appsmithorg/ui-builders
-app/client/src/sagas/AutoLayoutUpdateSagas.tsx @appsmithorg/ui-builders
-app/client/src/sagas/CanvasSagas/* @appsmithorg/ui-builders
-app/client/src/sagas/ReplaySaga.ts @appsmithorg/ui-builders
-app/client/src/sagas/SnapshotSagas.ts @appsmithorg/ui-builders
-app/client/src/sagas/WidgetAdditionSagas.ts @appsmithorg/ui-builders
-app/client/src/sagas/WidgetBlueprintSagas.ts @appsmithorg/ui-builders
-app/client/src/sagas/WidgetDeletionSagas.ts @appsmithorg/ui-builders
-app/client/src/sagas/WidgetOperationSagas.tsx @appsmithorg/ui-builders
-app/client/src/sagas/WidgetOperationUtils.ts @appsmithorg/ui-builders
-app/client/src/sagas/WidgetSelectUtils.ts @appsmithorg/ui-builders
-app/client/src/sagas/WidgetSelectionSagas.ts @appsmithorg/ui-builders
-app/client/src/sagas/autoHeightSagas/* @appsmithorg/ui-builders
-app/client/src/sagas/layoutConversionSagas.ts @appsmithorg/ui-builders
-app/client/src/selectors/autoHeightSelectors.ts @appsmithorg/ui-builders
-app/client/src/selectors/autoLayoutSelectors.tsx @appsmithorg/ui-builders
-app/client/src/selectors/canvasSelectors.ts @appsmithorg/ui-builders
-app/client/src/selectors/widgetSelectors.ts @appsmithorg/ui-builders
-app/client/src/utils/autoHeight/* @appsmithorg/ui-builders
-app/client/src/utils/hooks/autoHeightUIHooks.ts @appsmithorg/ui-builders
-app/client/src/utils/hooks/useAllowEditorDragToSelect.ts @appsmithorg/ui-builders
-app/client/src/utils/hooks/useClickToSelectWidget.tsx @appsmithorg/ui-builders
-app/client/src/utils/hooks/useDynamicAppLayout.tsx @appsmithorg/ui-builders
-app/client/src/utils/hooks/usePositionedContainerZIndex.ts @appsmithorg/ui-builders
-app/client/src/utils/hooks/useReflow.ts @appsmithorg/ui-builders
-app/client/src/utils/hooks/useWidgetSelection.ts @appsmithorg/ui-builders
-app/client/src/widgets/BaseWidget.tsx @appsmithorg/ui-builders
-app/client/src/widgets/BaseWidgetHOC/* @appsmithorg/ui-builders
-app/client/src/widgets/CanvasWidget.tsx @appsmithorg/ui-builders
-app/client/src/widgets/ContainerWidget/* @appsmithorg/ui-builders
-app/client/src/widgets/MetaHOC.tsx @appsmithorg/ui-builders
-app/client/src/widgets/withWidgetProps.tsx @appsmithorg/ui-builders
+app/client/generators/* @appsmithorg/anvil-team
+app/client/src/actions/autoHeightActions.ts @appsmithorg/anvil-team
+app/client/src/actions/autoLayoutActions.ts @appsmithorg/anvil-team
+app/client/src/actions/canvasSelectionActions.ts @appsmithorg/anvil-team
+app/client/src/actions/reflowActions.ts @appsmithorg/anvil-team
+app/client/src/actions/widgetSelectionActions.ts @appsmithorg/anvil-team
+app/client/src/components/propertyControls/* @appsmithorg/anvil-team
+app/client/src/layoutSystems/* @appsmithorg/anvil-team
+app/client/src/pages/Editor/Canvas.tsx @appsmithorg/anvil-team
+app/client/src/pages/Editor/CanvasLayoutConversion/* @appsmithorg/anvil-team
+app/client/src/pages/Editor/PropertyPane/* @appsmithorg/anvil-team
+app/client/src/pages/Editor/WidgetsEditor/* @appsmithorg/anvil-team
+app/client/src/reducers/entityReducers/autoHeightReducers/* @appsmithorg/anvil-team
+app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts @appsmithorg/anvil-team
+app/client/src/reflow/* @appsmithorg/anvil-team
+app/client/src/sagas/AutoLayoutUpdateSagas.tsx @appsmithorg/anvil-team
+app/client/src/sagas/CanvasSagas/* @appsmithorg/anvil-team
+app/client/src/sagas/ReplaySaga.ts @appsmithorg/anvil-team
+app/client/src/sagas/SnapshotSagas.ts @appsmithorg/anvil-team
+app/client/src/sagas/WidgetAdditionSagas.ts @appsmithorg/anvil-team
+app/client/src/sagas/WidgetBlueprintSagas.ts @appsmithorg/anvil-team
+app/client/src/sagas/WidgetDeletionSagas.ts @appsmithorg/anvil-team
+app/client/src/sagas/WidgetOperationSagas.tsx @appsmithorg/anvil-team
+app/client/src/sagas/WidgetOperationUtils.ts @appsmithorg/anvil-team
+app/client/src/sagas/WidgetSelectUtils.ts @appsmithorg/anvil-team
+app/client/src/sagas/WidgetSelectionSagas.ts @appsmithorg/anvil-team
+app/client/src/sagas/autoHeightSagas/* @appsmithorg/anvil-team
+app/client/src/sagas/layoutConversionSagas.ts @appsmithorg/anvil-team
+app/client/src/selectors/autoHeightSelectors.ts @appsmithorg/anvil-team
+app/client/src/selectors/autoLayoutSelectors.tsx @appsmithorg/anvil-team
+app/client/src/selectors/canvasSelectors.ts @appsmithorg/anvil-team
+app/client/src/selectors/widgetSelectors.ts @appsmithorg/anvil-team
+app/client/src/utils/autoHeight/* @appsmithorg/anvil-team
+app/client/src/utils/hooks/autoHeightUIHooks.ts @appsmithorg/anvil-team
+app/client/src/utils/hooks/useAllowEditorDragToSelect.ts @appsmithorg/anvil-team
+app/client/src/utils/hooks/useClickToSelectWidget.tsx @appsmithorg/anvil-team
+app/client/src/utils/hooks/useDynamicAppLayout.tsx @appsmithorg/anvil-team
+app/client/src/utils/hooks/usePositionedContainerZIndex.ts @appsmithorg/anvil-team
+app/client/src/utils/hooks/useReflow.ts @appsmithorg/anvil-team
+app/client/src/utils/hooks/useWidgetSelection.ts @appsmithorg/anvil-team
+app/client/src/widgets/BaseWidget.tsx @appsmithorg/anvil-team
+app/client/src/widgets/BaseWidgetHOC/* @appsmithorg/anvil-team
+app/client/src/widgets/CanvasWidget.tsx @appsmithorg/anvil-team
+app/client/src/widgets/ContainerWidget/* @appsmithorg/anvil-team
+app/client/src/widgets/MetaHOC.tsx @appsmithorg/anvil-team
+app/client/src/widgets/withWidgetProps.tsx @appsmithorg/anvil-team
 
 # Git Pod
 app/server/appsmith-git/ @appsmithorg/git-be-reviewers
@@ -199,7 +198,7 @@ app/client/src/ce/JSFunctionExecutionSaga.ts @ApekshaBhosale
 app/client/src/ee/JSFunctionExecutionSaga.ts @ApekshaBhosale
 
 # Enterprise Success
-app/server/appsmith-server/src/main/java/com/appsmith/server/migrations/**/* @sharat87 @vivonk @abhvsn
+app/server/appsmith-server/src/main/java/com/appsmith/server/migrations/**/* @sharat87 @abhvsn
 
 # DevOps & Shri
 deploy/**/* @sharat87 @pratapaprasanna

app/client/cypress/support/Pages/Anvil/Locators/index.ts

@@ -1,6 +1,6 @@
 import { MAIN_CONTAINER_WIDGET_ID } from "../../../../../src/constants/WidgetConstants";
 import { getAnvilCanvasId } from "../../../../../src/layoutSystems/anvil/viewer/canvas/utils";
-import { AnvilDataAttributes } from "../../../../../src/widgets/anvil/constants";
+import { AnvilDataAttributes } from "../../../../../src/widgets/wds/constants";
 
 // anvil widget based selectors
 const anvilWidgetSelector = "[data-testid=t--anvil-widget-wrapper]";

app/client/src/WidgetProvider/factory/helpers.ts

@@ -17,7 +17,7 @@ import {
   WidgetFeaturePropertyPaneEnhancements,
 } from "../../utils/WidgetFeatures";
 import { generateReactKey } from "utils/generators";
-import { DEFAULT_WIDGET_ON_CANVAS_UI } from "widgets/anvil/constants";
+import { DEFAULT_WIDGET_ON_CANVAS_UI } from "widgets/wds/constants";
 import type { WidgetDefaultProps } from "WidgetProvider/constants";
 
 export enum PropertyPaneConfigTypes {

app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx

@@ -15,7 +15,7 @@ import { Layers } from "constants/Layers";
 import { noop } from "utils/AppsmithUtils";
 import { convertFlexGrowToFlexBasis } from "../sectionSpaceDistributor/utils/spaceDistributionEditorUtils";
 import styles from "./styles.module.css";
-import { AnvilDataAttributes } from "widgets/anvil/constants";
+import { AnvilDataAttributes } from "widgets/wds/constants";
 
 const anvilWidgetStyleProps: CSSProperties = {
   position: "relative",

app/client/src/layoutSystems/anvil/editor/canvasArenas/hooks/useAnvilDnDListenerStates.ts

@@ -15,7 +15,7 @@ import { getWidgetHierarchy } from "layoutSystems/anvil/utils/paste/utils";
 import type { AnvilGlobalDnDStates } from "../../canvas/hooks/useAnvilGlobalDnDStates";
 import { getWidgets } from "sagas/selectors";
 import { useMemo } from "react";
-import { ZoneWidget } from "widgets/anvil/ZoneWidget";
+import { WDSZoneWidget } from "widgets/wds/WDSZoneWidget";
 import { useAnvilWidgetElevation } from "../../canvas/providers/AnvilWidgetElevationProvider";
 
 interface AnvilDnDListenerStatesProps {
@@ -144,7 +144,7 @@ export const useAnvilDnDListenerStates = ({
   }, [widgetProps, allWidgets]);
 
   const isElevatedWidget = useMemo(() => {
-    if (widgetProps.type === ZoneWidget.type) {
+    if (widgetProps.type === WDSZoneWidget.type) {
       const isAnyZoneElevated = allSiblingsWidgetIds.some(
         (each) => !!elevatedWidgets[each],
       );

app/client/src/layoutSystems/anvil/editor/canvasArenas/hooks/useAnvilWidgetDrop.ts

@@ -7,7 +7,7 @@ import type { AnvilHighlightInfo } from "layoutSystems/anvil/utils/anvilTypes";
 import { useCallback } from "react";
 import { useDispatch } from "react-redux";
 import type { AnvilDnDListenerStates } from "./useAnvilDnDListenerStates";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { anvilWidgets } from "widgets/wds/constants";
 
 export const useAnvilWidgetDrop = (
   canvasId: string,

app/client/src/layoutSystems/anvil/editor/canvasArenas/utils/utils.ts

@@ -7,7 +7,7 @@ import WidgetFactory from "WidgetProvider/factory";
 import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import type { DragDetails } from "reducers/uiReducers/dragResizeReducer";
 import { AnvilDraggedWidgetTypesEnum } from "../types";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { anvilWidgets } from "widgets/wds/constants";
 import { HIGHLIGHT_SIZE } from "layoutSystems/anvil/utils/constants";
 import { getWidgetHierarchy } from "layoutSystems/anvil/utils/paste/utils";
 

app/client/src/layoutSystems/anvil/editor/hooks/useAnvilWidgetStyles.ts

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import { useWidgetBorderStyles } from "layoutSystems/anvil/common/hooks/useWidgetBorderStyles";
 import type { AppState } from "ee/reducers";
 import { getIsNewWidgetBeingDragged } from "sagas/selectors";
-import { AnvilDataAttributes } from "widgets/anvil/constants";
+import { AnvilDataAttributes } from "widgets/wds/constants";
 
 export const useAnvilWidgetStyles = (
   widgetId: string,

app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/anvilDraggingSagas.test.ts

@@ -6,8 +6,8 @@ import { LayoutComponentTypes } from "layoutSystems/anvil/utils/anvilTypes";
 import { expectSaga } from "redux-saga-test-plan";
 import { getWidgets } from "sagas/selectors";
 import { registerWidgets } from "WidgetProvider/factory/registrationHelper";
-import { SectionWidget } from "widgets/anvil/SectionWidget";
-import { ZoneWidget } from "widgets/anvil/ZoneWidget";
+import { WDSSectionWidget } from "widgets/wds/WDSSectionWidget";
+import { WDSZoneWidget } from "widgets/wds/WDSZoneWidget";
 import { WDSButtonWidget } from "widgets/wds/WDSButtonWidget";
 import {
   getCanvasWidth,
@@ -39,8 +39,8 @@ describe("", () => {
   beforeAll(() => {
     registerLayoutComponents();
     registerWidgets([
-      SectionWidget,
-      ZoneWidget,
+      WDSSectionWidget,
+      WDSZoneWidget,
       WDSButtonWidget,
       WDSModalWidget,
     ]);

app/client/src/layoutSystems/anvil/layoutComponents/components/section/index.tsx

@@ -7,7 +7,7 @@ import {
 import WidgetRow from "../WidgetRow";
 import { SectionRow } from "./SectionRow";
 import type { FlexLayoutProps } from "../FlexLayout";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { anvilWidgets } from "widgets/wds/constants";
 import { SectionSpaceDistributor } from "layoutSystems/anvil/sectionSpaceDistributor/SectionSpaceDistributor";
 
 class Section extends WidgetRow {

app/client/src/layoutSystems/anvil/utils/anvilChecksUtils.ts

@@ -4,7 +4,7 @@ import { updateAnvilParentPostWidgetDeletion } from "layoutSystems/anvil/utils/l
 import type { FlattenedWidgetProps } from "WidgetProvider/constants";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { anvilWidgets } from "widgets/wds/constants";
 import {
   updateSectionWithDefaultSpaceDistribution,
   updateSectionsDistributedSpace,

app/client/src/layoutSystems/anvil/utils/constants.ts

@@ -1,6 +1,6 @@
 import { FlexLayerAlignment } from "layoutSystems/common/utils/constants";
 import type { HighlightPayload, HighlightRenderInfo } from "./anvilTypes";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { anvilWidgets } from "widgets/wds/constants";
 
 export const MOBILE_BREAKPOINT = 480;
 

app/client/src/layoutSystems/anvil/utils/layouts/update/mainCanvasLayoutUtils.ts

@@ -11,7 +11,7 @@ import LayoutFactory from "layoutSystems/anvil/layoutComponents/LayoutFactory";
 import { call } from "redux-saga/effects";
 
 import { severTiesFromParents, transformMovedWidgets } from "./moveUtils";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { anvilWidgets } from "widgets/wds/constants";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 import { addNewAnvilWidgetToDSL } from "layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers";
 

app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts

@@ -13,7 +13,7 @@ import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidg
 import { call } from "redux-saga/effects";
 import { severTiesFromParents, transformMovedWidgets } from "./moveUtils";
 import type { FlattenedWidgetProps } from "WidgetProvider/constants";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { anvilWidgets } from "widgets/wds/constants";
 import { addNewAnvilWidgetToDSL } from "layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers";
 
 export function* createSectionAndAddWidget(

app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts

@@ -11,7 +11,7 @@ import { call } from "redux-saga/effects";
 import { addWidgetsToChildTemplate } from "./additionUtils";
 import type { FlattenedWidgetProps } from "WidgetProvider/constants";
 import { isLargeWidget } from "../../widgetUtils";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { anvilWidgets } from "widgets/wds/constants";
 import {
   moveWidgets,
   severTiesFromParents,

app/client/src/layoutSystems/anvil/utils/paste/sectionPasteUtils.ts

@@ -6,7 +6,7 @@ import type {
 } from "./types";
 import { getDestinedParent } from "./destinationUtils";
 import type { FlattenedWidgetProps } from "WidgetProvider/constants";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { anvilWidgets } from "widgets/wds/constants";
 import type { LayoutProps } from "../anvilTypes";
 import { all, call } from "redux-saga/effects";
 import { addPastedWidgets } from "./utils";

app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts

@@ -13,7 +13,7 @@ import { generateReactKey } from "utils/generators";
 import type BaseLayoutComponent from "../layoutComponents/BaseLayoutComponent";
 import LayoutFactory from "../layoutComponents/LayoutFactory";
 import { defaultHighlightRenderInfo } from "../utils/constants";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { anvilWidgets } from "widgets/wds/constants";
 import { getUpdatedListOfWidgetsAfterAddingNewWidget } from "../integrations/sagas/anvilWidgetAdditionSagas";
 
 /**

app/client/src/widgets/anvil/SectionWidget/index.tsx

@@ -1,3 +0,0 @@
-import SectionWidget from "./widget";
-
-export { SectionWidget };

app/client/src/widgets/anvil/ZoneWidget/index.tsx

@@ -1,3 +0,0 @@
-import ZoneWidget from "./widget";
-
-export { ZoneWidget };

app/client/src/widgets/anvil/constants.ts

@@ -1,31 +0,0 @@
-export const anvilWidgets = {
-  SECTION_WIDGET: "SECTION_WIDGET",
-  ZONE_WIDGET: "ZONE_WIDGET",
-};
-
-export enum Elevations {
-  SECTION_ELEVATION = 1,
-  ZONE_ELEVATION = 2,
-  CARD_ELEVATION = 3,
-}
-
-/**
- * The data attribute that will be used to identify the anvil widget name in the DOM.
- */
-export const AnvilDataAttributes = {
-  MODAL_SIZE: "data-size",
-  WIDGET_NAME: "data-widget-name",
-  IS_SELECTED_WIDGET: "data-selected",
-};
-
-/**
- * The default values that will be applied to all widgets.
- * This is the default for the API that allows widgets to define their selection and focus colors.
- */
-export const DEFAULT_WIDGET_ON_CANVAS_UI = {
-  selectionBGCSSVar: "--on-canvas-ui-widget-selection",
-  focusBGCSSVar: "--on-canvas-ui-widget-focus",
-  selectionColorCSSVar: "--on-canvas-ui-widget-focus",
-  focusColorCSSVar: "--on-canvas-ui-widget-selection",
-  disableParentSelection: false,
-};

app/client/src/widgets/index.ts

@@ -73,8 +73,8 @@ import { WDSSwitchGroupWidget } from "./wds/WDSSwitchGroupWidget";
 import { WDSRadioGroupWidget } from "./wds/WDSRadioGroupWidget";
 import { WDSMenuButtonWidget } from "./wds/WDSMenuButtonWidget";
 import CustomWidget from "./CustomWidget";
-import { SectionWidget } from "./anvil/SectionWidget";
-import { ZoneWidget } from "./anvil/ZoneWidget";
+import { WDSSectionWidget } from "./wds/WDSSectionWidget";
+import { WDSZoneWidget } from "./wds/WDSZoneWidget";
 import { WDSHeadingWidget } from "./wds/WDSHeadingWidget";
 import { WDSParagraphWidget } from "./wds/WDSParagraphWidget";
 import { WDSModalWidget } from "./wds/WDSModalWidget";
@@ -165,8 +165,8 @@ const WDSWidgets = [
   WDSRadioGroupWidget,
   WDSMenuButtonWidget,
   CustomWidget,
-  SectionWidget,
-  ZoneWidget,
+  WDSSectionWidget,
+  WDSZoneWidget,
   WDSParagraphWidget,
   WDSHeadingWidget,
   WDSModalWidget,

app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx

@@ -21,7 +21,7 @@ import { ModalLayoutProvider } from "layoutSystems/anvil/layoutComponents/ModalL
 import styles from "./styles.module.css";
 import { getAnvilWidgetDOMId } from "layoutSystems/common/utils/LayoutElementPositionsObserver/utils";
 import { widgetTypeClassname } from "widgets/WidgetUtils";
-import { AnvilDataAttributes } from "widgets/anvil/constants";
+import { AnvilDataAttributes } from "widgets/wds/constants";
 
 class WDSModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
   static type = "WDS_MODAL_WIDGET";

app/client/src/widgets/wds/WDSSectionWidget/index.tsx

@@ -0,0 +1,3 @@
+import WDSSectionWidget from "./widget";
+
+export { WDSSectionWidget };

app/client/src/widgets/wds/WDSSectionWidget/widget/index.tsx

@@ -17,15 +17,15 @@ import {
   propertyPaneStyle,
   methodsConfig,
   autocompleteConfig,
-} from "./config";
+} from "../config";
 import type { WidgetProps, WidgetState } from "widgets/BaseWidget";
 import type { LayoutProps } from "layoutSystems/anvil/utils/anvilTypes";
 import BaseWidget from "widgets/BaseWidget";
 import type { ReactNode } from "react";
 import React from "react";
-import { ContainerComponent } from "widgets/anvil/Container";
+import { ContainerComponent } from "widgets/wds/Container";
 import { LayoutProvider } from "layoutSystems/anvil/layoutComponents/LayoutProvider";
-import { Elevations, anvilWidgets } from "widgets/anvil/constants";
+import { Elevations, anvilWidgets } from "widgets/wds/constants";
 import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import type {
   CopiedWidgetData,
@@ -35,7 +35,7 @@ import type {
 import { call } from "redux-saga/effects";
 import { pasteWidgetsInSection } from "layoutSystems/anvil/utils/paste/sectionPasteUtils";
 
-class SectionWidget extends BaseWidget<SectionWidgetProps, WidgetState> {
+class WDSSectionWidget extends BaseWidget<WDSSectionWidgetProps, WidgetState> {
   static type = anvilWidgets.SECTION_WIDGET;
 
   static getConfig(): WidgetBaseConfiguration {
@@ -152,8 +152,9 @@ class SectionWidget extends BaseWidget<SectionWidgetProps, WidgetState> {
   }
 }
 
-export interface SectionWidgetProps extends ContainerWidgetProps<WidgetProps> {
+export interface WDSSectionWidgetProps
+  extends ContainerWidgetProps<WidgetProps> {
   layout: LayoutProps[];
 }
 
-export default SectionWidget;
+export default WDSSectionWidget;

app/client/src/widgets/wds/WDSStatsWidget/widget/index.tsx

@@ -7,8 +7,8 @@ import * as config from "../config";
 import { StatsComponent } from "../component";
 import type { StatsWidgetProps } from "./types";
 import type { AnvilConfig } from "WidgetProvider/constants";
-import { Elevations } from "widgets/anvil/constants";
-import { ContainerComponent } from "widgets/anvil/Container";
+import { Elevations } from "widgets/wds/constants";
+import { ContainerComponent } from "widgets/wds/Container";
 
 class WDSStatsWidget extends BaseWidget<StatsWidgetProps, WidgetState> {
   constructor(props: StatsWidgetProps) {

app/client/src/widgets/wds/WDSZoneWidget/index.tsx

@@ -0,0 +1,3 @@
+import WDSZoneWidget from "./widget";
+
+export { WDSZoneWidget };

app/client/src/widgets/wds/WDSZoneWidget/widget/index.tsx

@@ -22,9 +22,9 @@ import BaseWidget from "widgets/BaseWidget";
 import type { WidgetProps, WidgetState } from "widgets/BaseWidget";
 import type { LayoutProps } from "layoutSystems/anvil/utils/anvilTypes";
 import type { ContainerWidgetProps } from "widgets/ContainerWidget/widget";
-import { ContainerComponent } from "widgets/anvil/Container";
+import { ContainerComponent } from "widgets/wds/Container";
 import { LayoutProvider } from "layoutSystems/anvil/layoutComponents/LayoutProvider";
-import { Elevations, anvilWidgets } from "widgets/anvil/constants";
+import { Elevations, anvilWidgets } from "widgets/wds/constants";
 import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import type {
   CopiedWidgetData,
@@ -35,7 +35,7 @@ import { call } from "redux-saga/effects";
 import { pasteWidgetsInZone } from "layoutSystems/anvil/utils/paste/zonePasteUtils";
 import { SectionColumns } from "layoutSystems/anvil/sectionSpaceDistributor/constants";
 
-class ZoneWidget extends BaseWidget<ZoneWidgetProps, WidgetState> {
+class WDSZoneWidget extends BaseWidget<WDSZoneWidgetProps, WidgetState> {
   static type = anvilWidgets.ZONE_WIDGET;
 
   static getConfig(): WidgetBaseConfiguration {
@@ -153,8 +153,8 @@ class ZoneWidget extends BaseWidget<ZoneWidgetProps, WidgetState> {
   }
 }
 
-export interface ZoneWidgetProps extends ContainerWidgetProps<WidgetProps> {
+export interface WDSZoneWidgetProps extends ContainerWidgetProps<WidgetProps> {
   layout: LayoutProps[];
 }
 
-export default ZoneWidget;
+export default WDSZoneWidget;

app/client/src/widgets/wds/constants.ts

@@ -1,5 +1,36 @@
-import { getCanvasClassName } from "utils/generators";
-import { anvilWidgets } from "widgets/anvil/constants";
+import { getCanvasClassName } from "../../utils/generators";
+
+export const anvilWidgets = {
+  SECTION_WIDGET: "SECTION_WIDGET",
+  ZONE_WIDGET: "ZONE_WIDGET",
+};
+
+export enum Elevations {
+  SECTION_ELEVATION = 1,
+  ZONE_ELEVATION = 2,
+  CARD_ELEVATION = 3,
+}
+
+/**
+ * The data attribute that will be used to identify the anvil widget name in the DOM.
+ */
+export const AnvilDataAttributes = {
+  MODAL_SIZE: "data-size",
+  WIDGET_NAME: "data-widget-name",
+  IS_SELECTED_WIDGET: "data-selected",
+};
+
+/**
+ * The default values that will be applied to all widgets.
+ * This is the default for the API that allows widgets to define their selection and focus colors.
+ */
+export const DEFAULT_WIDGET_ON_CANVAS_UI = {
+  selectionBGCSSVar: "--on-canvas-ui-widget-selection",
+  focusBGCSSVar: "--on-canvas-ui-widget-focus",
+  selectionColorCSSVar: "--on-canvas-ui-widget-focus",
+  focusColorCSSVar: "--on-canvas-ui-widget-selection",
+  disableParentSelection: false,
+};
 
 export const WDS_V2_WIDGET_MAP = {
   BUTTON_WIDGET: "WDS_BUTTON_WIDGET",