Fix typo in responsive-props mixin (Shopify#7757)

### WHY are these changes introduced?

- Fixes a typo in the `responsive-props` mixin
- Add examples for responsive spacing in `Box`

Author: aveline

.changeset/new-birds-pretend.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`.

polaris-react/src/components/Box/Box.tsx

@@ -138,15 +138,35 @@ export interface BoxProps {
   overflowX?: Overflow;
   /** Clip vertical content of children */
   overflowY?: Overflow;
-  /** Spacing around children */
+  /** Spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
+   * @example
+   * padding='4'
+   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
   padding?: Spacing;
-  /** Vertical start spacing around children */
+  /** Vertical start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
+   * @example
+   * paddingBlockStart='4'
+   * paddingBlockStart={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
   paddingBlockStart?: Spacing;
-  /** Vertical end spacing around children */
+  /** Vertical end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
+   * @example
+   * paddingBlockEnd='4'
+   * paddingBlockEnd={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
   paddingBlockEnd?: Spacing;
-  /** Horizontal start spacing around children */
+  /** Horizontal start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
+   * @example
+   * paddingInlineStart='4'
+   * paddingInlineStart={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
   paddingInlineStart?: Spacing;
-  /** Horizontal end spacing around children */
+  /** Horizontal end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
+   * @example
+   * paddingInlineEnd='4'
+   * paddingInlineEnd={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
   paddingInlineEnd?: Spacing;
   /** Shadow */
   shadow?: DepthShadowAlias;

polaris-react/src/styles/shared/_responsive-props.scss

@@ -1,7 +1,7 @@
 @mixin responsive-props(
   $componentName,
   $componentProp,
-  $declartionProp,
+  $declarationProp,
   $shorthandFallback: null
 ) {
   --pc-#{$componentName}-#{$componentProp}-xs: initial;
@@ -18,55 +18,55 @@
     --pc-#{$componentName}-#{$componentProp}-lg
   );
   @if $shorthandFallback {
-    #{$declartionProp}: var(
+    #{$declarationProp}: var(
       --pc-#{$componentName}-#{$componentProp}-xs,
       var(--pc-#{$componentName}-#{$shorthandFallback}-xs)
     );
 
     @media #{$p-breakpoints-sm-up} {
-      #{$declartionProp}: var(
+      #{$declarationProp}: var(
         --pc-#{$componentName}-#{$componentProp}-sm,
         var(--pc-#{$componentName}-#{$shorthandFallback}-sm)
       );
     }
 
     @media #{$p-breakpoints-md-up} {
-      #{$declartionProp}: var(
+      #{$declarationProp}: var(
         --pc-#{$componentName}-#{$componentProp}-md,
         var(--pc-#{$componentName}-#{$shorthandFallback}-md)
       );
     }
 
     @media #{$p-breakpoints-lg-up} {
-      #{$declartionProp}: var(
+      #{$declarationProp}: var(
         --pc-#{$componentName}-#{$componentProp}-lg,
         var(--pc-#{$componentName}-#{$shorthandFallback}-lg)
       );
     }
 
     @media #{$p-breakpoints-xl-up} {
-      #{$declartionProp}: var(
+      #{$declarationProp}: var(
         --pc-#{$componentName}-#{$componentProp}-xl,
         var(--pc-#{$componentName}-#{$shorthandFallback}-xl)
       );
     }
   } @else {
-    #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xs);
+    #{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-xs);
 
     @media #{$p-breakpoints-sm-up} {
-      #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-sm);
+      #{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-sm);
     }
 
     @media #{$p-breakpoints-md-up} {
-      #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-md);
+      #{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-md);
     }
 
     @media #{$p-breakpoints-lg-up} {
-      #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-lg);
+      #{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-lg);
     }
 
     @media #{$p-breakpoints-xl-up} {
-      #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xl);
+      #{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-xl);
     }
   }
 }