refactor(required-fields-indicator, global-header, text-editor): replace Box with div

Replaces Box with Div in components that don't properly utilise Box's layout-specific props. This
eliminates unnecessary Box component overhead and reduces the bundle size without affecting
functionality or styling

Author: tomdavies73

src/components/form/required-fields-indicator/required-fields-indicator.component.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 import styled from "styled-components";
-import { MarginProps } from "styled-system";
-import Box from "../../box";
+import { margin, MarginProps } from "styled-system";
+import BaseTheme from "../../../style/themes/base";
 import StyledTypography from "../../typography/typography.style";
 
 export interface RequiredIndicatorProps extends MarginProps {
   children: React.ReactNode;
 }
 
-const StyledIndicatorContainer = styled(Box)`
+const StyledIndicatorContainer = styled.div`
+  ${margin}
+
   ${StyledTypography} {
     color: var(--colorsUtilityYin090);
   }
@@ -20,6 +22,10 @@ const StyledIndicatorContainer = styled(Box)`
   }
 `;
 
+StyledIndicatorContainer.defaultProps = {
+  theme: BaseTheme,
+};
+
 export default ({ children, ...rest }: RequiredIndicatorProps) => (
   <StyledIndicatorContainer {...rest}>{children}</StyledIndicatorContainer>
 );

src/components/global-header/global-header.component.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import styled from "styled-components";
 import { PaddingProps, FlexboxProps } from "styled-system";
-import Box from "../box";
 import NavigationBar from "../navigation-bar";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 
@@ -15,7 +14,7 @@ export interface GlobalHeaderProps
   logo?: React.ReactNode;
 }
 
-const StyledLogo = styled(Box)`
+const StyledLogo = styled.div`
   display: flex;
   align-items: center;
   margin-left: var(--spacing200);

src/components/text-editor/text-editor.style.ts

@@ -1,7 +1,6 @@
 import styled, { css } from "styled-components";
 
 import { margin, MarginProps } from "styled-system";
-import Box from "../box";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 
 type StyledTextEditorWrapperProps = MarginProps;
@@ -20,7 +19,7 @@ interface StyledEditorToolbarWrapperProps {
   hasWarningOrError?: boolean;
 }
 
-export const StyledTextEditor = styled(Box)`
+export const StyledTextEditor = styled.div`
   position: relative;
 `;