CCUBE-1916

package.json

@@ -128,7 +128,7 @@
 		"rollup-plugin-typescript2": "^0.36.0",
 		"storybook": "^8.2.8",
 		"style-loader": "^3.3.1",
-		"styled-components": "^6.1.19",
+		"styled-components": "^6.4.1",
 		"typescript": "^4.8.4"
 	},
 	"lint-staged": {

src/components/custom/filter/filter-checkbox/filter-checkbox.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import * as Yup from "yup";
-import { TestHelper } from "../../../../utils";
+import { TestHelper, filterSchemaProps } from "../../../../utils";
 import { useValidationConfig } from "../../../../utils/hooks";
 import { Sanitize } from "../../../shared";
 import { IGenericCustomFieldProps } from "../../types";
@@ -14,12 +14,11 @@ export const FilterCheckbox = (props: IGenericCustomFieldProps<IFilterCheckboxSc
 	// =============================================================================
 	// CONST, STATE, REFS
 	// =============================================================================
+	const { schema, id, value, onChange } = props;
 	const {
-		schema: { label, options, expanded, validation, ...otherSchema },
-		id,
-		value,
-		onChange,
-	} = props;
+		commonSchema: { label, validation },
+		customSchema: { clearBehavior: _clearBehavior, options, expanded, ...checkboxProps },
+	} = filterSchemaProps(schema);
 
 	const { setValue } = useFormContext();
 	const [selectedOptions, setSelectedOptions] = useState<IOption[]>(); // Current selected value state
@@ -79,7 +78,7 @@ export const FilterCheckbox = (props: IGenericCustomFieldProps<IFilterCheckboxSc
 	return (
 		<Filter.Checkbox
 			id={id}
-			{...otherSchema}
+			{...checkboxProps}
 			data-testid={TestHelper.generateId(id, "filter-checkbox")}
 			title={title}
 			addon={addon}

src/components/custom/iframe/iframe.tsx

@@ -3,6 +3,7 @@ import { FieldError, useFormContext } from "react-hook-form";
 import styled from "styled-components";
 import * as Yup from "yup";
 import { useFieldEvent, useIframeMessage, useValidationConfig } from "../../../utils/hooks";
+import { filterSchemaProps } from "../../../utils/prop-helper";
 import { IGenericCustomFieldProps } from "../types";
 import { EPostMessageEvent, IIframeSchema } from "./types";
 
@@ -20,12 +21,10 @@ export const Iframe = (props: IGenericCustomFieldProps<IIframeSchema>) => {
 	// =========================================================================
 	// CONST, STATE, REF
 	// =========================================================================
+	const { error, id, schema, value } = props;
 	const {
-		error,
-		id,
-		schema: { "data-testid": testId, src, validationTimeout = 2000, ...otherSchema },
-		value,
-	} = props;
+		customSchema: { "data-testid": testId, src, validationTimeout = 2000, ...iframeProps },
+	} = filterSchemaProps(schema);
 	const formContext = useFormContext();
 	const iframeRef = useRef<HTMLIFrameElement>(null);
 	const deferredRef = useRef<{
@@ -175,7 +174,7 @@ export const Iframe = (props: IGenericCustomFieldProps<IIframeSchema>) => {
 	// =========================================================================
 	return (
 		<FluidIframe
-			{...otherSchema}
+			{...iframeProps}
 			ref={iframeRef}
 			src={src}
 			id={id}

src/components/custom/review/review.tsx

@@ -5,7 +5,7 @@ import isEmpty from "lodash/isEmpty";
 import { useEffect, useState } from "react";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import * as Yup from "yup";
-import { AxiosApiClient } from "../../../utils";
+import { AxiosApiClient, filterSchemaProps } from "../../../utils";
 import { useFieldEvent, useValidationConfig } from "../../../utils/hooks";
 import { Wrapper } from "../../elements/wrapper";
 import { IGenericCustomElementProps } from "../types";
@@ -173,7 +173,10 @@ export const Review = (props: IGenericCustomElementProps<TReviewSchema>) => {
 	// RENDER FUNCTIONS
 	// =========================================================================
 	const renderAccordion = (schema: IReviewSchemaAccordion) => {
-		const { button, bottomSection, expanded = true, label, topSection, ...otherSchema } = schema;
+		const {
+			commonSchema: { label },
+			customSchema: { button, bottomSection, expanded = true, topSection, ...accordionProps },
+		} = filterSchemaProps(schema);
 
 		return (
 			<BoxContainer
@@ -186,7 +189,7 @@ export const Review = (props: IGenericCustomElementProps<TReviewSchema>) => {
 					)
 				}
 				expanded={expanded}
-				{...otherSchema}
+				{...accordionProps}
 			>
 				<CustomUneditableSection
 					background={false}
@@ -203,10 +206,13 @@ export const Review = (props: IGenericCustomElementProps<TReviewSchema>) => {
 	};
 
 	const renderBox = (schema: IReviewSchemaBox) => {
-		const { label, description, topSection, bottomSection, ...otherSchema } = schema;
+		const {
+			commonSchema: { label },
+			customSchema: { description, topSection, bottomSection, ...boxProps },
+		} = filterSchemaProps(schema);
 		return (
 			<UneditableSection
-				{...otherSchema}
+				{...boxProps}
 				id={id}
 				title={label}
 				description={description}

src/components/elements/accordion/accordion.tsx

@@ -1,6 +1,7 @@
 import { BoxContainer } from "@lifesg/react-design-system/box-container";
 import { Button } from "@lifesg/react-design-system/button";
 import { useFieldEvent } from "../../../utils/hooks";
+import { filterSchemaProps } from "../../../utils/prop-helper";
 import { IGenericElementProps } from "../types";
 import { Wrapper } from "../wrapper";
 import { Container } from "./accordion.styles";
@@ -14,15 +15,17 @@ export const Accordion = (props: IGenericElementProps<IAccordionSchema>) => {
 	// CONST, STATE, REF
 	// =============================================================================
 	const { schema, id } = props;
-	const { children, button, title, disableContentInset, ...otherSchema } = schema;
+	const {
+		customSchema: { button, children, title, disableContentInset, ...accordionProps },
+	} = filterSchemaProps(schema);
 
 	const { dispatchFieldEvent } = useFieldEvent();
 
 	return (
 		<BoxContainer
 			id={id}
 			title={typeof title === "string" ? title : <Wrapper>{title}</Wrapper>}
-			{...otherSchema}
+			{...accordionProps}
 			callToActionComponent={
 				button ? (
 					<Button.Default