diff --git a/common/changes/pcln-design-system/feature-PROT-4812-radio-toggle_2025-01-22-04-09.json b/common/changes/pcln-design-system/feature-PROT-4812-radio-toggle_2025-01-22-04-09.json
new file mode 100644
index 0000000000..63984329c3
--- /dev/null
+++ b/common/changes/pcln-design-system/feature-PROT-4812-radio-toggle_2025-01-22-04-09.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "adds backgroundColor to RadioCheckToggleCard",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
\ No newline at end of file
diff --git a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.spec.tsx b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.spec.tsx
index 413b7a040e..1d956b16e4 100644
--- a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.spec.tsx
+++ b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.spec.tsx
@@ -198,6 +198,7 @@ describe('RadioCheckToggleCard', () => {
     it('should render unchecked state UI correctly', () => {
       const { asFragment } = render(
         <RadioCheckToggleCard
+          backgroundColor='secondary.lightest'
           cardType='toggle'
           name='radio-1'
           title='Title'
diff --git a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.stories.tsx b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.stories.tsx
index f167cb8aa2..9a018364fb 100644
--- a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.stories.tsx
+++ b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.stories.tsx
@@ -38,7 +38,6 @@ const EnabledStateCard = styled(Box)`
   flex: 1 1 30%;
 
   & > label > div {
-    background-color: ${getPaletteColor('background.lightest')} !important;
     border-color: transparent !important;
 
     & div.cardIcon > svg {
@@ -53,7 +52,6 @@ const HoverStateCard = styled(Box)`
   flex: 1 1 30%;
 
   & > label > div {
-    background-color: ${getPaletteColor('background.lightest')} !important;
     border-color: ${getPaletteColor('primary.base')} !important;
 
     & div.cardIcon > svg {
@@ -68,7 +66,6 @@ const FocusStateCard = styled(Box)`
   flex: 1 1 30%;
 
   & > label > div {
-    background-color: ${getPaletteColor('background.lightest')} !important;
     border-color: transparent !important;
 
     & div.cardIcon > svg {
@@ -141,7 +138,7 @@ const DefaultDocPage = () => {
     options: {
       hPosition: THPositions
       vPosition: TVPositions
-      title: string
+      title: string | React.ReactElement
       value: string
     }[]
   } = {
@@ -279,6 +276,45 @@ const DefaultDocPage = () => {
             </RadioCheckToggleCard>
           </FocusStateCard>
 
+          <EnabledStateCard>
+            <RadioCheckToggleCard
+              name='states-radio'
+              title={<Text>Enabled - with backgroundColor</Text>}
+              value='example-1-1'
+              isSelected={false}
+              onChange={() => {}}
+              backgroundColor='success.light'
+            >
+              <Box width='100%' height='75px' />
+            </RadioCheckToggleCard>
+          </EnabledStateCard>
+
+          <HoverStateCard>
+            <RadioCheckToggleCard
+              name='states-radio'
+              title='Hover - with backgroundColor'
+              value='example-2-2'
+              isSelected={false}
+              onChange={() => {}}
+              backgroundColor='success.light'
+            >
+              <Box width='100%' height='75px' />
+            </RadioCheckToggleCard>
+          </HoverStateCard>
+
+          <FocusStateCard>
+            <RadioCheckToggleCard
+              name='states-radio'
+              title='Focus - with backgroundColor'
+              value='example-3-3'
+              isSelected={false}
+              onChange={() => {}}
+              backgroundColor='success.light'
+            >
+              <Box width='100%' height='75px' />
+            </RadioCheckToggleCard>
+          </FocusStateCard>
+
           <SelectedStateCard>
             <RadioCheckToggleCard
               name='states-radio'
@@ -286,6 +322,7 @@ const DefaultDocPage = () => {
               value='example-4'
               isSelected={true}
               onChange={() => {}}
+              backgroundColor='success.light' // set the backgroundColor, but ensure isSelected style overrides backgroundColor
             >
               <Box width='100%' height='75px' />
             </RadioCheckToggleCard>
diff --git a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx
index 2edb373852..4e8dd73ed5 100644
--- a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx
+++ b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx
@@ -6,6 +6,7 @@ import { Box } from '../Box/Box'
 import { Flex } from '../Flex/Flex'
 import { Toggle } from '../Toggle/Toggle'
 import { getPaletteColor } from '../utils/utils'
+import { type PaletteColor } from '../theme/theme'
 
 /**
  * @public
@@ -41,17 +42,18 @@ export type TVPositions = (typeof RadioCheckToggleCardVPositions)[number]
  * @public
  */
 export type RadioCheckToggleCardProps = {
-  children?: React.ReactNode
+  backgroundColor?: PaletteColor
   cardType?: TCardTypes
+  children?: React.ReactNode
   hPosition?: THPositions
-  vPosition?: TVPositions
+  isSelected: boolean
   isTakingFullHeightOfCard?: boolean
-  title: string
   isTitleBold?: boolean
   name: string
-  value: string
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  isSelected: boolean
+  title: string | React.ReactElement
+  value: string
+  vPosition?: TVPositions
 }
 
 const CombinedInput = styled.input`
@@ -97,7 +99,6 @@ const CombinedInput = styled.input`
 `
 
 const RCTCardContainer = styled(Flex)`
-  background-color: ${getPaletteColor('background.lightest')};
   border: 1px solid transparent;
   border-radius: ${themeGet('borderRadii.action-lg')};
   box-shadow: ${themeGet('shadows.sm')};
@@ -170,21 +171,20 @@ const buttonIcon = (cardType: TCardTypes) => {
 /**
  * @public
  */
-export function RadioCheckToggleCard(props: RadioCheckToggleCardProps) {
-  const {
-    children,
-    cardType,
-    hPosition,
-    vPosition,
-    isTakingFullHeightOfCard,
-    title,
-    isTitleBold,
-    name,
-    value,
-    onChange,
-    isSelected,
-  } = props
-
+export function RadioCheckToggleCard({
+  backgroundColor = 'background.lightest',
+  cardType = 'radio',
+  children,
+  hPosition = 'right',
+  isSelected,
+  isTakingFullHeightOfCard = false,
+  isTitleBold = false,
+  name,
+  onChange = () => {},
+  title,
+  value,
+  vPosition = 'top',
+}: RadioCheckToggleCardProps) {
   const id = `${name}_${value}`
   const ButtonIcon = buttonIcon(cardType)
 
@@ -199,7 +199,7 @@ export function RadioCheckToggleCard(props: RadioCheckToggleCardProps) {
         onChange={onChange}
         checked={isSelected}
       />
-      <RCTCardContainer flexDirection='column' data-testId='rdt-card-main'>
+      <RCTCardContainer flexDirection='column' data-testId='rdt-card-main' color={backgroundColor}>
         <CardHeader
           alignItems={vPosition}
           flexDirection={hPosition === 'left' ? 'row-reverse' : 'row'}
@@ -222,12 +222,3 @@ export function RadioCheckToggleCard(props: RadioCheckToggleCardProps) {
 }
 
 RadioCheckToggleCard.displayName = 'RadioCheckToggleCard'
-
-RadioCheckToggleCard.defaultProps = {
-  cardType: 'radio' as TCardTypes,
-  isTitleBold: false,
-  hPosition: 'right' as THPositions,
-  vPosition: 'top' as TVPositions,
-  isTakingFullHeightOfCard: false,
-  onChange: () => {},
-}
diff --git a/packages/core/src/RadioCheckToggleCard/__snapshots__/RadioCheckToggleCard.spec.tsx.snap b/packages/core/src/RadioCheckToggleCard/__snapshots__/RadioCheckToggleCard.spec.tsx.snap
index fa85f01614..1e1660e753 100644
--- a/packages/core/src/RadioCheckToggleCard/__snapshots__/RadioCheckToggleCard.spec.tsx.snap
+++ b/packages/core/src/RadioCheckToggleCard/__snapshots__/RadioCheckToggleCard.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`RadioCheckToggleCard Checkbox Card should render checked state UI corre
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -20,11 +20,16 @@ exports[`RadioCheckToggleCard Checkbox Card should render checked state UI corre
   width: 24;
 }
 
-.c10 {
+.c11 {
   outline: none;
 }
 
 .c2 {
+  background-color: #fff;
+  color: #001833;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -34,7 +39,7 @@ exports[`RadioCheckToggleCard Checkbox Card should render checked state UI corre
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -93,8 +98,7 @@ exports[`RadioCheckToggleCard Checkbox Card should render checked state UI corre
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -102,37 +106,37 @@ exports[`RadioCheckToggleCard Checkbox Card should render checked state UI corre
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 0 0 16px;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 4px;
   color: #4f6f8f;
@@ -156,29 +160,30 @@ exports[`RadioCheckToggleCard Checkbox Card should render checked state UI corre
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="background.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <svg
               aria-hidden="true"
-              class="c9 c10"
+              class="c10 c11"
               fill="currentcolor"
               focusable="false"
               height="24"
@@ -212,7 +217,7 @@ exports[`RadioCheckToggleCard Checkbox Card should render unchecked state UI cor
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -220,11 +225,16 @@ exports[`RadioCheckToggleCard Checkbox Card should render unchecked state UI cor
   width: 24;
 }
 
-.c10 {
+.c11 {
   outline: none;
 }
 
 .c2 {
+  background-color: #fff;
+  color: #001833;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -234,7 +244,7 @@ exports[`RadioCheckToggleCard Checkbox Card should render unchecked state UI cor
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -293,8 +303,7 @@ exports[`RadioCheckToggleCard Checkbox Card should render unchecked state UI cor
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -302,37 +311,37 @@ exports[`RadioCheckToggleCard Checkbox Card should render unchecked state UI cor
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 0 0 16px;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 4px;
   color: #4f6f8f;
@@ -355,29 +364,30 @@ exports[`RadioCheckToggleCard Checkbox Card should render unchecked state UI cor
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="background.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <svg
               aria-hidden="true"
-              class="c9 c10"
+              class="c10 c11"
               fill="currentcolor"
               focusable="false"
               height="24"
@@ -411,7 +421,7 @@ exports[`RadioCheckToggleCard Radio Card should render checked state UI correctl
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -419,11 +429,16 @@ exports[`RadioCheckToggleCard Radio Card should render checked state UI correctl
   width: 24;
 }
 
-.c10 {
+.c11 {
   outline: none;
 }
 
 .c2 {
+  background-color: #fff;
+  color: #001833;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -433,7 +448,7 @@ exports[`RadioCheckToggleCard Radio Card should render checked state UI correctl
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -492,8 +507,7 @@ exports[`RadioCheckToggleCard Radio Card should render checked state UI correctl
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -501,37 +515,37 @@ exports[`RadioCheckToggleCard Radio Card should render checked state UI correctl
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 0 0 16px;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 9999px;
   color: #4f6f8f;
@@ -555,29 +569,30 @@ exports[`RadioCheckToggleCard Radio Card should render checked state UI correctl
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="background.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <svg
               aria-hidden="true"
-              class="c9 c10"
+              class="c10 c11"
               fill="currentcolor"
               focusable="false"
               height="24"
@@ -611,7 +626,7 @@ exports[`RadioCheckToggleCard Radio Card should render unchecked state UI correc
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -619,11 +634,16 @@ exports[`RadioCheckToggleCard Radio Card should render unchecked state UI correc
   width: 24;
 }
 
-.c10 {
+.c11 {
   outline: none;
 }
 
 .c2 {
+  background-color: #fff;
+  color: #001833;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -633,7 +653,7 @@ exports[`RadioCheckToggleCard Radio Card should render unchecked state UI correc
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -692,8 +712,7 @@ exports[`RadioCheckToggleCard Radio Card should render unchecked state UI correc
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -701,37 +720,37 @@ exports[`RadioCheckToggleCard Radio Card should render unchecked state UI correc
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 0 0 16px;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 9999px;
   color: #4f6f8f;
@@ -754,29 +773,30 @@ exports[`RadioCheckToggleCard Radio Card should render unchecked state UI correc
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="background.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <svg
               aria-hidden="true"
-              class="c9 c10"
+              class="c10 c11"
               fill="currentcolor"
               focusable="false"
               height="24"
@@ -810,7 +830,7 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   box-sizing: border-box;
 }
 
-.c21 {
+.c22 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -818,16 +838,21 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   width: 16;
 }
 
-.c22 {
+.c23 {
   outline: none;
 }
 
-.c9 {
+.c2 {
+  background-color: #fff;
+  color: #001833;
+}
+
+.c10 {
   width: 24;
   height: 24;
 }
 
-.c10 {
+.c11 {
   background-color: #0068ef;
   color: #fff;
   border-radius: 9999px;
@@ -835,12 +860,12 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   width: 45px;
 }
 
-.c15 {
+.c16 {
   border-radius: 9999px;
   width: calc(100% + 8px);
 }
 
-.c18 {
+.c19 {
   background-color: #fff;
   color: #001833;
   border-radius: 9999px;
@@ -848,7 +873,7 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -858,7 +883,7 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -872,19 +897,19 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   flex-direction: row;
 }
 
-.c16 {
+.c17 {
   position: absolute;
   left: -4px;
   top: -4px;
 }
 
-.c19 {
+.c20 {
   position: absolute;
   left: 23px;
   top: 2px;
 }
 
-.c13 {
+.c14 {
   position: absolute;
   z-index: 1;
   opacity: 0;
@@ -896,13 +921,13 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   cursor: pointer;
 }
 
-.c17 {
+.c18 {
   height: calc(100% + 8px);
   opacity: 0;
   background-color: #0068ef4C;
 }
 
-.c20 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -922,7 +947,7 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   transition: left 0.3s;
 }
 
-.c11 {
+.c12 {
   position: relative;
   height: 24px;
   -webkit-transition: background-color 0.15s ease 0s;
@@ -930,15 +955,15 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   min-width: 45px;
 }
 
-.c11 .c12:focus-visible + .c14 {
+.c12 .c13:focus-visible + .c15 {
   opacity: 1;
 }
 
-.c11:hover:not([disabled]) {
+.c12:hover:not([disabled]) {
   background-color: #049;
 }
 
-.c11:hover:not([disabled]) > #circle-handle {
+.c12:hover:not([disabled]) > #circle-handle {
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 2px 8px 0 rgba(0,0,0,0.16),0 10px 8px -5px rgba(0,0,0,0.16),0 12px 32px -2px rgba(0,0,0,0.16);
 }
 
@@ -987,8 +1012,7 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -996,37 +1020,37 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 0 0 16px;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 9999px;
   color: #4f6f8f;
@@ -1050,32 +1074,33 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="background.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <div
-              class="c9"
+              class="c10"
               size="24"
             >
               <div
-                class="c10 c11"
+                class="c11 c12"
                 color="primary.base"
                 height="24"
                 width="45"
@@ -1083,17 +1108,17 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
                 <input
                   aria-checked="true"
                   checked=""
-                  class="c12 c13"
+                  class="c13 c14"
                   role="switch"
                   tabindex="0"
                   type="checkbox"
                 />
                 <div
-                  class="c14 c15 c16 c17"
+                  class="c15 c16 c17 c18"
                   width="calc(100% + 8px)"
                 />
                 <div
-                  class="c18 c19 c20"
+                  class="c19 c20 c21"
                   color="background.lightest"
                   data-testid="handle-div"
                   id="circle-handle"
@@ -1101,7 +1126,7 @@ exports[`RadioCheckToggleCard Toggle Card should render checked state UI correct
                 >
                   <svg
                     aria-hidden="true"
-                    class="c21 c22"
+                    class="c22 c23"
                     fill="currentcolor"
                     focusable="false"
                     height="16"
@@ -1138,7 +1163,7 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   box-sizing: border-box;
 }
 
-.c21 {
+.c22 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -1146,16 +1171,21 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   width: 16;
 }
 
-.c22 {
+.c23 {
   outline: none;
 }
 
-.c9 {
+.c2 {
+  background-color: secondary.lightest;
+  color: #001833;
+}
+
+.c10 {
   width: 24;
   height: 24;
 }
 
-.c10 {
+.c11 {
   background-color: #4f6f8f;
   color: #fff;
   border-radius: 9999px;
@@ -1163,12 +1193,12 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   width: 45px;
 }
 
-.c15 {
+.c16 {
   border-radius: 9999px;
   width: calc(100% + 8px);
 }
 
-.c18 {
+.c19 {
   background-color: #fff;
   color: #001833;
   border-radius: 9999px;
@@ -1176,7 +1206,7 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1186,7 +1216,7 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1200,19 +1230,19 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   flex-direction: row;
 }
 
-.c16 {
+.c17 {
   position: absolute;
   left: -4px;
   top: -4px;
 }
 
-.c19 {
+.c20 {
   position: absolute;
   left: 2px;
   top: 2px;
 }
 
-.c13 {
+.c14 {
   position: absolute;
   z-index: 1;
   opacity: 0;
@@ -1224,13 +1254,13 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   cursor: pointer;
 }
 
-.c17 {
+.c18 {
   height: calc(100% + 8px);
   opacity: 0;
   background-color: #4f6f8f4C;
 }
 
-.c20 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1250,7 +1280,7 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   transition: left 0.3s;
 }
 
-.c11 {
+.c12 {
   position: relative;
   height: 24px;
   -webkit-transition: background-color 0.15s ease 0s;
@@ -1258,15 +1288,15 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   min-width: 45px;
 }
 
-.c11 .c12:focus-visible + .c14 {
+.c12 .c13:focus-visible + .c15 {
   opacity: 1;
 }
 
-.c11:hover:not([disabled]) {
+.c12:hover:not([disabled]) {
   background-color: #879db3;
 }
 
-.c11:hover:not([disabled]) > #circle-handle {
+.c12:hover:not([disabled]) > #circle-handle {
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 2px 8px 0 rgba(0,0,0,0.16),0 10px 8px -5px rgba(0,0,0,0.16),0 12px 32px -2px rgba(0,0,0,0.16);
 }
 
@@ -1315,8 +1345,7 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -1324,37 +1353,37 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 0 0 16px;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 9999px;
   color: #4f6f8f;
@@ -1377,49 +1406,50 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="secondary.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <div
-              class="c9"
+              class="c10"
               size="24"
             >
               <div
-                class="c10 c11"
+                class="c11 c12"
                 color="background.dark"
                 height="24"
                 width="45"
               >
                 <input
                   aria-checked="false"
-                  class="c12 c13"
+                  class="c13 c14"
                   role="switch"
                   tabindex="0"
                   type="checkbox"
                 />
                 <div
-                  class="c14 c15 c16 c17"
+                  class="c15 c16 c17 c18"
                   width="calc(100% + 8px)"
                 />
                 <div
-                  class="c18 c19 c20"
+                  class="c19 c20 c21"
                   color="background.lightest"
                   data-testid="handle-div"
                   id="circle-handle"
@@ -1427,7 +1457,7 @@ exports[`RadioCheckToggleCard Toggle Card should render unchecked state UI corre
                 >
                   <svg
                     aria-hidden="true"
-                    class="c21 c22"
+                    class="c22 c23"
                     fill="currentcolor"
                     focusable="false"
                     height="16"
@@ -1464,7 +1494,7 @@ exports[`RadioCheckToggleCard common should render bold title correctly 1`] = `
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -1472,11 +1502,16 @@ exports[`RadioCheckToggleCard common should render bold title correctly 1`] = `
   width: 24;
 }
 
-.c10 {
+.c11 {
   outline: none;
 }
 
 .c2 {
+  background-color: #fff;
+  color: #001833;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1486,7 +1521,7 @@ exports[`RadioCheckToggleCard common should render bold title correctly 1`] = `
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1545,8 +1580,7 @@ exports[`RadioCheckToggleCard common should render bold title correctly 1`] = `
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -1554,37 +1588,37 @@ exports[`RadioCheckToggleCard common should render bold title correctly 1`] = `
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 700;
   font-size: 16px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 0 0 16px;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 9999px;
   color: #4f6f8f;
@@ -1607,29 +1641,30 @@ exports[`RadioCheckToggleCard common should render bold title correctly 1`] = `
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="background.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <svg
               aria-hidden="true"
-              class="c9 c10"
+              class="c10 c11"
               fill="currentcolor"
               focusable="false"
               height="24"
@@ -1668,7 +1703,7 @@ exports[`RadioCheckToggleCard common should render children correctly 1`] = `
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -1676,11 +1711,16 @@ exports[`RadioCheckToggleCard common should render children correctly 1`] = `
   width: 24;
 }
 
-.c10 {
+.c11 {
   outline: none;
 }
 
 .c2 {
+  background-color: #fff;
+  color: #001833;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1690,7 +1730,7 @@ exports[`RadioCheckToggleCard common should render children correctly 1`] = `
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1749,8 +1789,7 @@ exports[`RadioCheckToggleCard common should render children correctly 1`] = `
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -1758,37 +1797,37 @@ exports[`RadioCheckToggleCard common should render children correctly 1`] = `
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 0 0 16px;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 9999px;
   color: #4f6f8f;
@@ -1811,29 +1850,30 @@ exports[`RadioCheckToggleCard common should render children correctly 1`] = `
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="background.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <svg
               aria-hidden="true"
-              class="c9 c10"
+              class="c10 c11"
               fill="currentcolor"
               focusable="false"
               height="24"
@@ -1872,7 +1912,7 @@ exports[`RadioCheckToggleCard common should render children next to title correc
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -1880,11 +1920,16 @@ exports[`RadioCheckToggleCard common should render children next to title correc
   width: 24;
 }
 
-.c10 {
+.c11 {
   outline: none;
 }
 
 .c2 {
+  background-color: #fff;
+  color: #001833;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1894,7 +1939,7 @@ exports[`RadioCheckToggleCard common should render children next to title correc
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1953,8 +1998,7 @@ exports[`RadioCheckToggleCard common should render children next to title correc
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -1962,37 +2006,37 @@ exports[`RadioCheckToggleCard common should render children next to title correc
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 0 0 16px;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 9999px;
   color: #4f6f8f;
@@ -2015,18 +2059,19 @@ exports[`RadioCheckToggleCard common should render children next to title correc
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="background.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
@@ -2038,11 +2083,11 @@ exports[`RadioCheckToggleCard common should render children next to title correc
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <svg
               aria-hidden="true"
-              class="c9 c10"
+              class="c10 c11"
               fill="currentcolor"
               focusable="false"
               height="24"
@@ -2076,7 +2121,7 @@ exports[`RadioCheckToggleCard common should render default UI correctly 1`] = `
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -2084,11 +2129,16 @@ exports[`RadioCheckToggleCard common should render default UI correctly 1`] = `
   width: 24;
 }
 
-.c10 {
+.c11 {
   outline: none;
 }
 
 .c2 {
+  background-color: #fff;
+  color: #001833;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2098,7 +2148,7 @@ exports[`RadioCheckToggleCard common should render default UI correctly 1`] = `
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2157,8 +2207,7 @@ exports[`RadioCheckToggleCard common should render default UI correctly 1`] = `
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -2166,37 +2215,37 @@ exports[`RadioCheckToggleCard common should render default UI correctly 1`] = `
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 0 0 16px;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 9999px;
   color: #4f6f8f;
@@ -2219,29 +2268,30 @@ exports[`RadioCheckToggleCard common should render default UI correctly 1`] = `
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="background.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <svg
               aria-hidden="true"
-              class="c9 c10"
+              class="c10 c11"
               fill="currentcolor"
               focusable="false"
               height="24"
@@ -2275,7 +2325,7 @@ exports[`RadioCheckToggleCard common should render left button UI correctly 1`]
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -2283,11 +2333,16 @@ exports[`RadioCheckToggleCard common should render left button UI correctly 1`]
   width: 24;
 }
 
-.c10 {
+.c11 {
   outline: none;
 }
 
 .c2 {
+  background-color: #fff;
+  color: #001833;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2297,7 +2352,7 @@ exports[`RadioCheckToggleCard common should render left button UI correctly 1`]
   flex-direction: column;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2356,8 +2411,7 @@ exports[`RadioCheckToggleCard common should render left button UI correctly 1`]
   border-color: #049;
 }
 
-.c3 {
-  background-color: #fff;
+.c4 {
   border: 1px solid transparent;
   border-radius: 12px;
   box-shadow: 0 -1px 0 0 rgba(0,0,0,0.03),0 0 1px 0 rgba(0,0,0,0.24),0 2px 1px -1px rgba(0,0,0,0.16),0 2px 4px 0 rgba(0,0,0,0.12);
@@ -2365,37 +2419,37 @@ exports[`RadioCheckToggleCard common should render left button UI correctly 1`]
   padding: 16px;
 }
 
-.c5 {
+.c6 {
   min-width: 0;
   width: 100%;
 }
 
-.c5 + * {
+.c6 + * {
   margin-top: 16px;
 }
 
-.c7 {
+.c8 {
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
 }
 
-.c6 {
+.c7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.c6 > :first-child + * {
+.c7 > :first-child + * {
   margin-top: 16px;
 }
 
-.c8 {
+.c9 {
   line-height: 0px;
   margin: 0 16px 0 0;
 }
 
-.c8 > svg {
+.c9 > svg {
   border: 1px solid transparent;
   border-radius: 9999px;
   color: #4f6f8f;
@@ -2418,29 +2472,30 @@ exports[`RadioCheckToggleCard common should render left button UI correctly 1`]
         value="example-1"
       />
       <div
-        class="c2 c3"
+        class="c2 c3 c4"
+        color="background.lightest"
         data-testid="rdt-card-main"
       >
         <div
-          class="c4 c5"
+          class="c5 c6"
           data-testid="rdt-card-header"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
               data-testid="rdt-card-title"
             >
               Title
             </div>
           </div>
           <div
-            class="c8 cardIcon"
+            class="c9 cardIcon"
           >
             <svg
               aria-hidden="true"
-              class="c9 c10"
+              class="c10 c11"
               fill="currentcolor"
               focusable="false"
               height="24"