diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx
index a396231a19..f4fec9bdf3 100644
--- a/site/pages/components/accordion.tsx
+++ b/site/pages/components/accordion.tsx
@@ -408,67 +408,67 @@ const AccordionComponent = (layoutProps: LayoutProps) => (
           ],
           overridesRows: [
             {
-              attribute: 'accordion.header.transitionPreset',
+              attribute: 'header.transitionPreset',
               type: 'MQ<string>',
               default: 'backgroundColorChange',
               description:
                 'If provided, overrides the transitionPreset of the accordion header',
             },
             {
-              attribute: 'accordion.header.minWidth',
+              attribute: 'header.minWidth',
               type: 'MQ<string>',
               description:
                 'If provided, overrides the minWidth property of the accordion panel',
             },
             {
-              attribute: 'accordion.header.minHeight',
+              attribute: 'header.minHeight',
               type: 'MQ<string>',
               description:
                 'If provided, overrides the minHeight property of the accordion panel',
             },
 
             {
-              attribute: 'accordion.header.stylePreset',
+              attribute: 'header.stylePreset',
               type: 'MQ<string>',
               default: 'accordionHeader',
               description:
                 'If provided, overrides the stylePreset of the accordion header',
             },
             {
-              attribute: 'accordion.header.typographyPreset',
+              attribute: 'header.typographyPreset',
               type: 'MQ<string>',
               default: 'utilityButton030',
               description:
                 'If provided, overrides the typographyPreset of the accordion header',
             },
             {
-              attribute: 'accordion.header.spaceInline',
+              attribute: 'header.spaceInline',
               type: 'MQ<string>',
               default: 'space020',
               description:
                 'If provided, overrides the inline space of the accordion header',
             },
             {
-              attribute: 'accordion.header.indicatorIcon',
+              attribute: 'header.indicatorIcon',
               type: 'Override<AccordionIconProps>',
               description: 'If provided, overrides the icon',
             },
             {
-              attribute: 'accordion.header.indicatorIcon.stylePreset',
+              attribute: 'header.indicatorIcon.stylePreset',
               type: 'MQ<string>',
               default: 'iconDefault',
               description:
                 'If provided, overrides the stylePreset of the indicator icon',
             },
             {
-              attribute: 'accordion.header.indicatorIcon.size',
+              attribute: 'header.indicatorIcon.size',
               type: 'MQ<string>',
               default: 'iconSize020',
               description:
                 'If provided, overrides the size of the indicator icon',
             },
             {
-              attribute: 'accordion.header.label.typographyPreset',
+              attribute: 'header.label.typographyPreset',
               type: 'MQ<string>',
               default: 'utilityButton030',
               description:
@@ -476,20 +476,20 @@ const AccordionComponent = (layoutProps: LayoutProps) => (
             },
 
             {
-              attribute: 'accordion.panel.stylePreset',
+              attribute: 'panel.stylePreset',
               type: 'MQ<string>',
               default: 'accordionPanel',
               description:
                 'If provided, overrides the stylePreset of the accordion panel',
             },
             {
-              attribute: 'accordion.panel.paddingBlock',
+              attribute: 'panel.paddingBlock',
               type: 'MQ<string>',
               default: 'spaceInset030',
               description: '',
             },
             {
-              attribute: 'accordion.panel.paddingInline',
+              attribute: 'panel.paddingInline',
               type: 'MQ<string>',
               default: 'spaceInset030',
               description: '',
diff --git a/site/pages/components/audio-player.tsx b/site/pages/components/audio-player.tsx
index 4a8ec93013..5c3e5ea0e1 100644
--- a/site/pages/components/audio-player.tsx
+++ b/site/pages/components/audio-player.tsx
@@ -1085,7 +1085,7 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
           ],
           overridesRows: [
             {
-              attribute: 'audioPlayer.PlayPauseButton.stylePreset',
+              attribute: 'stylePreset',
               type: 'MQ<string>',
               default: 'iconButtonSolidPrimary',
               description:
@@ -1121,13 +1121,13 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
           ],
           overridesRows: [
             {
-              attribute: 'audioPlayerTimeDisplay.typographyPreset',
+              attribute: 'typographyPreset',
               type: 'MQ<string>',
               default: 'utilityButton030',
               description: 'Overrides the typographyPreset of the time display',
             },
             {
-              attribute: 'audioPlayerTimeDisplay.stylePreset',
+              attribute: 'stylePreset',
               type: 'MQ<string>',
               default: 'timeDisplay',
               description: 'Overrides the stylePreset of the time display',
@@ -1140,7 +1140,7 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
             'The seek bar has the following overrides that can be used to define an appropriate experience for different use cases.',
           overridesRows: [
             {
-              attribute: 'audioPlayerSeekBar.slider',
+              attribute: 'slider',
               type: 'sliderSliderOverrideProps',
               description: (
                 <>
@@ -1157,7 +1157,7 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'audioPlayerSeekBar.slider.track.stylePreset',
+              attribute: 'slider.track.stylePreset',
               type: 'MQ<string>',
               default: 'seekBarTrack',
               description:
@@ -1165,38 +1165,38 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
             },
 
             {
-              attribute: 'audioPlayerSeekBar.slider.track.size',
+              attribute: 'slider.track.size',
               type: 'MQ<string>',
               default: 'sizing020',
               description: 'Overrides the size of the seek bar slider. ',
             },
             {
-              attribute: 'audioPlayerSeekBar.slider.indicator.stylePreset',
+              attribute: 'slider.indicator.stylePreset',
               type: 'MQ<string>',
               default: 'seekBarIndicator',
               description: 'Overrides the stylePreset of the seek bar slider. ',
             },
             {
-              attribute: 'audioPlayerSeekBar.slider.thumb.stylePreset',
+              attribute: 'slider.thumb.stylePreset',
               type: 'MQ<string>',
               default: 'seekBarThumb',
               description:
                 'Overrides the stylePreset of the seek bar slider thumb. ',
             },
             {
-              attribute: 'audioPlayerSeekBar.slider.thumb.size',
+              attribute: 'slider.thumb.size',
               type: 'MQ<string>',
               default: 'sizing040',
               description: 'Overrides the size of the seek bar slider thumb. ',
             },
             {
-              attribute: 'audioPlayerSeekBar.slider.feedback.size',
+              attribute: 'slider.feedback.size',
               type: 'MQ<string>',
               default: 'sizing060',
               description: 'Overrides the size of the feedback element.',
             },
             {
-              attribute: 'audioPlayerSeekBar.buffering.stylePreset',
+              attribute: 'buffering.stylePreset',
               type: 'MQ<string>',
               default: 'seekBarBuffering',
               description:
@@ -1223,7 +1223,7 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
             'The skip next button has the following overrides that can be used to define an appropriate experience for different use cases.',
           overridesRows: [
             {
-              attribute: 'audioPlayerSkipNextButton.stylePreset',
+              attribute: 'stylePreset',
               type: 'MQ<string>',
               default: 'iconButtonMinimalPrimary',
               description: 'Overrides the stylePreset of the skip next button',
@@ -1250,7 +1250,7 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
             'The skip previous button has the following overrides that can be used to define an appropriate experience for different use cases.',
           overridesRows: [
             {
-              attribute: 'audioPlayerSkipPreviousButton.stylePreset',
+              attribute: 'stylePreset',
               type: 'MQ<string>',
               default: 'iconButtonMinimalPrimary',
               description:
@@ -1287,7 +1287,7 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
           ],
           overridesRows: [
             {
-              attribute: 'audioPlayerForwardButton.stylePreset',
+              attribute: 'stylePreset',
               type: 'MQ<string>',
               default: 'iconButtonMinimalPrimary',
               description: 'Overrides the stylePreset of the forward button',
@@ -1323,7 +1323,7 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
           ],
           overridesRows: [
             {
-              attribute: 'audioPlayerReplayButton.stylePreset',
+              attribute: 'stylePreset',
               type: 'MQ<string>',
               default: 'iconButtonMinimalPrimary',
               description: 'Overrides the stylePreset of the replay button',
@@ -1384,27 +1384,27 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
           ],
           overridesRows: [
             {
-              attribute: 'audioPlayerVolumeControl',
+              attribute: 'VolumeControl',
               type: '',
               description:
                 'If provided, this overrides the volume control defaults.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.size',
+              attribute: 'size',
               type: 'string',
               default: '100%',
               description:
                 'If provided, this overrides the size of volume control.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.spaceBetween',
+              attribute: 'spaceBetween',
               type: 'MQ<string>',
               default: 'space030',
               description:
                 'If provided, this overrides the space applied between the mute volume icon button, and the volume slider.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.button.stylePreset',
+              attribute: 'button.stylePreset',
               type: 'MQ<string>',
               default: 'iconButtonMinimalPrimary',
               description: (
@@ -1421,27 +1421,27 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'audioPlayerVolumeControl.button.iconSize',
+              attribute: 'button.iconSize',
               type: 'string',
               default: 'iconSize020',
               description:
                 'If provided, this overrides the icon size for the mute volume icon button.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.button.iconDefault',
+              attribute: 'button.iconDefault',
               type: 'MQ<string>',
               default: 'iconFilledVolumeUp',
               description: 'If provided, this overrides the mute volume icon.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.button.iconMuted',
+              attribute: 'button.iconMuted',
               type: 'MQ<string>',
               default: 'iconFilledVolumeOff',
               description:
                 'If provided, this overrides the mute volume icon, when audio is muted.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.slider.track.stylePreset',
+              attribute: 'slider.track.stylePreset',
               type: 'MQ<string>',
               default: 'audioPlayerVolumeControlTrack',
               description: (
@@ -1457,74 +1457,70 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'audioPlayerVolumeControl.slider.track.size',
+              attribute: 'slider.track.size',
               type: 'string',
               default: 'sizing010',
               description:
                 'If provided, this overrides the size of the volume slider track.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.slider.track.length',
+              attribute: 'slider.track.length',
               type: 'string',
               default: '130px',
               description:
                 'If provided, this overrides the length of the volume slider track.',
             },
             {
-              attribute:
-                'audioPlayerVolumeControl.slider.indicator.stylePreset',
+              attribute: 'slider.indicator.stylePreset',
               type: 'MQ<string>',
               default: 'audioPlayerVolumeControlIndicator',
               description:
                 'If provided, this overrides the appearance of the volume slider indicator.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.slider.thumb.stylePreset',
+              attribute: 'slider.thumb.stylePreset',
               type: 'MQ<string>',
               default: 'audioPlayerVolumeControlThumb',
               description:
                 'If provided, this overrides the appearance of the volume slider thumb.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.slider.thumb.track.size',
+              attribute: 'slider.thumb.track.size',
               type: 'string',
               default: 'sizing040',
               description:
                 'If provided, this overrides the size of the volume slider thumb.',
             },
             {
-              attribute:
-                'audioPlayerVolumeControl.slider.thumbLabel.stylePreset',
+              attribute: 'slider.thumbLabel.stylePreset',
               type: 'MQ<string>',
               default: 'audioPlayerVolumeControlThumbLabel',
               description:
                 'If provided, this overrides the appearance of the volume slider thumb label.',
             },
             {
-              attribute:
-                'audioPlayerVolumeControl.slider.thumbLabel.typographyPreset',
+              attribute: 'slider.thumbLabel.typographyPreset',
               type: 'MQ<string>',
               default: 'audioPlayerVolumeControlThumb',
               description:
                 'If provided, this overrides the typographyPreset of the volume slider thumb label.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.slider.thumbLabel.space',
+              attribute: 'slider.thumbLabel.space',
               type: 'MQ<string>',
               default: '',
               description:
                 'If provided, this overrides the space of the volume slider thumb label.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.slider.labels.stylePreset',
+              attribute: 'slider.labels.stylePreset',
               type: 'MQ<string>',
               default: 'audioPlayerVolumeControlLabels',
               description:
                 'If provided, this overrides the appearance of the volume slider labels.',
             },
             {
-              attribute:
-                'audioPlayerVolumeControl.slider.labels.typographyPreset',
+              attribute: 'slider.labels.typographyPreset',
               type: 'MQ<string>',
               default: '',
               description:
@@ -1532,36 +1528,34 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
             },
 
             {
-              attribute: 'audioPlayerVolumeControl.slider.labels.space',
+              attribute: 'slider.labels.space',
               type: 'MQ<string>',
               default: '',
               description:
                 'If provided, this overrides the space of the volume slider labels.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.transitionPreset',
+              attribute: 'transitionPreset',
               type: 'MQ<string>',
               default: 'widthChange',
               description:
                 'If provided, this overrides the transitionPreset applied to the slider element of the volume control in a horizontal orientation.',
             },
             {
-              attribute: 'audioPlayerVolumeControl.popover.stylePreset',
+              attribute: 'popover.stylePreset',
               type: 'MQ<string>',
               default: 'audioPlayerVolumeControlPopover',
               description:
                 'If provided, this overrides the appearance of the Popover.',
             },
             {
-              attribute:
-                'audioPlayerVolumeControl.popover.content.paddingBlock',
+              attribute: 'popover.content.paddingBlock',
               type: 'MQ<string>',
               default: 'space030',
               description: '',
             },
             {
-              attribute:
-                'audioPlayerVolumeControl.popover.content.paddingInline',
+              attribute: 'popover.content.paddingInline',
               type: 'MQ<string>',
               default: 'space030',
               description: '',
@@ -1601,29 +1595,28 @@ const AudioPlayerComponent = (layoutProps: LayoutProps) => (
           ],
           overridesRows: [
             {
-              attribute: 'audioPlayerPlaybackSpeedControl.iconButton.size',
+              attribute: 'iconButton.size',
               type: 'MQ<string>',
               default: 'small',
               description:
                 'If provided, this overrides the size of the PlaybackSpeedControl icon button.',
             },
             {
-              attribute:
-                'audioPlayerPlaybackSpeedControl.iconButton.stylePreset',
+              attribute: 'iconButton.stylePreset',
               type: 'MQ<string>',
               default: 'iconButtonMinimalPrimary',
               description:
                 'If provided, this overrides the stylePreset of the PlaybackSpeedControl icon button.',
             },
             {
-              attribute: 'audioPlayerPlaybackSpeedControl.iconButton.icon',
+              attribute: 'iconButton.icon',
               type: 'MQ<string>',
               default: 'iconFilledSlowMotionVideo',
               description:
                 'If provided, this overrides the icon in the PlaybackSpeedControl icon button.',
             },
             {
-              attribute: 'audioPlayerPlaybackSpeedControl.iconButton.iconSize',
+              attribute: 'iconButton.iconSize',
               type: 'MQ<string>',
               default: 'iconSize020',
               description:
diff --git a/site/pages/components/flag.tsx b/site/pages/components/flag.tsx
index 38a3553f23..b7043ddad9 100644
--- a/site/pages/components/flag.tsx
+++ b/site/pages/components/flag.tsx
@@ -304,7 +304,7 @@ const FlagComponent = (layoutProps: LayoutProps) => (
           ],
           overridesRows: [
             {
-              attribute: 'flag.spaceInset',
+              attribute: 'spaceInset',
               type: 'MQ<string>',
               default: [
                 'sm: spaceInsetSquish010',
@@ -314,13 +314,13 @@ const FlagComponent = (layoutProps: LayoutProps) => (
               description: 'Overrides the spaceInset of the flag.',
             },
             {
-              attribute: 'flag.stylePreset',
+              attribute: 'stylePreset',
               type: 'MQ<string>',
               default: 'flagDefault',
               description: 'Overrides the spaceInset of the flag.',
             },
             {
-              attribute: 'flag.typographyPreset',
+              attribute: 'typographyPreset',
               type: 'MQ<string>',
               default: [
                 'sm: utilityLabel010',
@@ -330,7 +330,7 @@ const FlagComponent = (layoutProps: LayoutProps) => (
               description: 'Overrides the typographyPreset of the flag.',
             },
             {
-              attribute: 'flag.spaceInline',
+              attribute: 'spaceInline',
               type: 'MQ<string>',
               default: 'space010',
               description: (
@@ -344,7 +344,7 @@ const FlagComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'flag.iconSize',
+              attribute: 'iconSize',
               type: 'MQ<string>',
               default: 'iconSize010',
               description: (
@@ -358,7 +358,7 @@ const FlagComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'flag.width',
+              attribute: 'width',
               type: 'MQ<string>',
               default: '',
               description: (
@@ -372,7 +372,7 @@ const FlagComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'flag.height',
+              attribute: 'height',
               type: 'MQ<string>',
               default: '',
               description: (
@@ -386,7 +386,7 @@ const FlagComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'flag.minHeight',
+              attribute: 'minHeight',
               type: 'MQ<string>',
               default: ['sm: sizing050', 'md: sizing060', 'lg: sizing070'],
               description: (
@@ -400,7 +400,7 @@ const FlagComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'flag.maxHeight',
+              attribute: 'maxHeight',
               type: 'MQ<string>',
               default: '',
               description: (
@@ -414,7 +414,7 @@ const FlagComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'flag.minWidth',
+              attribute: 'minWidth',
               type: 'MQ<string>',
               default: '',
               description: (
@@ -428,7 +428,7 @@ const FlagComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'flag.maxWidth',
+              attribute: 'maxWidth',
               type: 'MQ<string>',
               default: '',
               description: (
diff --git a/site/pages/components/modal.tsx b/site/pages/components/modal.tsx
index a0a9353475..8e98858038 100644
--- a/site/pages/components/modal.tsx
+++ b/site/pages/components/modal.tsx
@@ -534,14 +534,14 @@ const ModalComponent = (layoutProps: LayoutProps) => (
                 'If provided, this overrides the style preset applied to the Overlay.',
             },
             {
-              attribute: 'modal.panel.stylePreset',
+              attribute: 'panel.stylePreset',
               type: 'MQ<string>',
               default: 'modalPanel',
               description:
                 'If provided, this overrides the style preset applied to the Modal panel.',
             },
             {
-              attribute: 'modal.panel.topOffset',
+              attribute: 'panel.topOffset',
               type: 'MQ<string>',
               default: '20vh',
               description: (
@@ -557,7 +557,7 @@ const ModalComponent = (layoutProps: LayoutProps) => (
               ),
             },
             {
-              attribute: 'modal.panel.width',
+              attribute: 'panel.width',
               type: 'MQ<string>',
               default: [
                 'xs = 90%',
@@ -570,71 +570,71 @@ const ModalComponent = (layoutProps: LayoutProps) => (
                 'If provided, this overrides the width property of the Modal panel.',
             },
             {
-              attribute: 'modal.panel.maxWidth',
+              attribute: 'panel.maxWidth',
               type: 'MQ<string>',
               default: '',
               description:
                 'If provided, this overrides the maxWidth property of the Modal panel.',
             },
             {
-              attribute: 'modal.panel.minWidth',
+              attribute: 'panel.minWidth',
               type: 'MQ<string>',
               default: '',
               description:
                 'If provided, this overrides the minWidth property of the Modal panel.',
             },
             {
-              attribute: 'modal.panel.height',
+              attribute: 'panel.height',
               type: 'MQ<string>',
               default: "all: '80%'",
               description:
                 'If provided, this overrides the height property of the Modal panel.',
             },
             {
-              attribute: 'modal.panel.minHeight',
+              attribute: 'panel.minHeight',
               type: 'MQ<string>',
               default: "all: '15%'",
               description:
                 'If provided, this overrides the minHeight property of the Modal panel.',
             },
             {
-              attribute: 'modal.panel.maxHeight',
+              attribute: 'panel.maxHeight',
               type: 'MQ<string>',
               default: ['xs>: 95%', 'md>: 80%'],
               description:
                 'If provided, this overrides the maxHeight property of the Modal panel.',
             },
-            ...prefixLogicalProps(logicalPaddingOverrideProps, 'modal.panel'),
+            ...prefixLogicalProps(logicalPaddingOverrideProps, 'panel'),
             {
-              attribute: 'modal.header.stylePreset',
+              attribute: 'header.stylePreset',
               type: 'MQ<string>',
               default: 'spaceInsetSquish040',
               description:
                 'If provided, this overrides the padding space set in Modal header content container.',
             },
             {
-              attribute: 'modal.content.spaceInset',
+              attribute: 'content.spaceInset',
               type: 'MQ<string>',
               default: 'spaceInset050',
               description:
                 'If provided, this overrides the padding space set in Modal content container.',
             },
             {
-              attribute: 'modal.closeButton.stylePreset',
+              attribute: 'closeButton.stylePreset',
               type: 'MQ<string>',
               default: 'iconButtonMinimalSecondary',
               description:
                 'If provided, this overrides the style preset applied to the Modal close Icon Button.',
             },
             {
-              attribute: 'modal.closeButton.spaceInset',
+              attribute: 'closeButton.spaceInset',
               type: 'MQ<string>',
               default: 'spaceInset020',
               description:
                 'If provided, this overrides the padding space set in the Modal close Icon Button.',
             },
             {
-              attribute: 'modal.zIndex',
+              attribute: 'zIndex',
               type: 'number',
               default: '80',
               description: