feat(fuselage): Adds wordbreak in Box Component (#853)

Author: dougfabris

packages/fuselage/src/components/Box/props.stories.mdx

@@ -436,6 +436,21 @@ The `is` prop allows `Box` to render any component capable of handling common DO
   </Story>
 </Canvas>
 
+#### Word Break
+
+<Canvas>
+  <Story name='Word break'>
+    <>
+      <Box wordBreak='break-word'>
+        Breakwoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooord
+      </Box>
+      <Box wordBreak='break-all'>
+        Breakaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaall
+      </Box>
+    </>
+  </Story>
+</Canvas>
+
 ### Layout
 
 #### Widths

packages/fuselage/src/components/Box/stylingProps.ts

@@ -147,6 +147,7 @@ export type StylingProps = {
   textAlign: CSSProperties['textAlign'];
   textTransform: CSSProperties['textTransform'];
   textDecorationLine: CSSProperties['textDecorationLine'];
+  wordBreak: CSSProperties['wordBreak'];
 
   elevation: '0' | '1' | '2';
   invisible: boolean;
@@ -349,6 +350,7 @@ export const propDefs: Record<keyof StylingProps, PropDefinition> = {
   textAlign: stringProp,
   textTransform: stringProp,
   textDecorationLine: stringProp,
+  wordBreak: stringProp,
 
   elevation: {
     toStyle: (value) => {