chore: Updated zone and section to extend HTML attributes

app/client/src/pages/Editor/ActionForm/Section/index.tsx

@@ -1,17 +1,26 @@
 import React from "react";
+import clsx from "clsx";
 import styles from "./styles.module.css";
 
-interface SectionProps {
+interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   isStandalone?: boolean;
 }
 
 const Section: React.FC<SectionProps> = ({
   children,
+  className,
   isStandalone = false,
+  ...props
 }) => {
+  const classNames = clsx(styles.section, className);
+
   return (
-    <div className={styles.section} data-standalone={isStandalone.toString()}>
+    <div
+      className={classNames}
+      data-standalone={isStandalone.toString()}
+      {...props}
+    >
       {children}
     </div>
   );

app/client/src/pages/Editor/ActionForm/Zone/index.tsx

@@ -1,14 +1,22 @@
 import React from "react";
+import clsx from "clsx";
 import styles from "./styles.module.css";
 
-interface ZoneProps {
+interface ZoneProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   layout?: "single_column" | "double_column";
 }
 
-const Zone: React.FC<ZoneProps> = ({ children, layout = "single_column" }) => {
+const Zone: React.FC<ZoneProps> = ({
+  children,
+  className,
+  layout = "single_column",
+  ...props
+}) => {
+  const classNames = clsx(styles.zone, className);
+
   return (
-    <div className={styles.zone} data-layout={layout}>
+    <div className={classNames} data-layout={layout} {...props}>
       {children}
     </div>
   );