add sx gap

Author: sai6855

docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.js

@@ -41,6 +41,14 @@ export default function HorizontalSpacingToggleButton() {
       exclusive
       onChange={handleAlignment}
       aria-label="text alignment"
+      sx={(theme) => ({
+        gap: '2rem',
+        [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
+          {
+            borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+            borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+          },
+      })}
     >
       <ToggleButton value="left" aria-label="left aligned">
         <FormatAlignLeftIcon />

docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.tsx

@@ -44,6 +44,14 @@ export default function HorizontalSpacingToggleButton() {
       exclusive
       onChange={handleAlignment}
       aria-label="text alignment"
+      sx={(theme) => ({
+        gap: '2rem',
+        [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
+          {
+            borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+            borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+          },
+      })}
     >
       <ToggleButton value="left" aria-label="left aligned">
         <FormatAlignLeftIcon />