fix(hide-at-breakpoint): move story styles to story file (#13148)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss

@@ -1,21 +1,31 @@
 @use '../../../../styles/scss/utilities/hide-at-breakpoint' as *;
 
 .hide-at-sm {
+  padding: 2rem 1rem;
+  background: #8a3ffc;
   @include hide-at-sm;
 }
 
 .hide-at-md {
+  padding: 2rem 1rem;
+  background: #4589ff;
   @include hide-at-md;
 }
 
 .hide-at-lg {
+  padding: 2rem 1rem;
+  background: #42be65;
   @include hide-at-lg;
 }
 
 .hide-at-xlg {
+  padding: 2rem 1rem;
+  background: #f1c21b;
   @include hide-at-xlg;
 }
 
 .hide-at-max {
+  padding: 2rem 1rem;
+  background: #da1e28;
   @include hide-at-max;
 }

packages/styles/scss/utilities/_hide-at-breakpoint.scss

@@ -4,40 +4,30 @@
 // Mixins that can be used to hide elements only at specific breakpoints.
 // Helpful for when you would like to hide elements outside of a Grid context
 @mixin hide-at-sm {
-  padding: 2rem 1rem;
-  background: #8a3ffc;
   @include breakpoint-between('sm', 'md') {
     display: none;
   }
 }
 
 @mixin hide-at-md {
-  padding: 2rem 1rem;
-  background: #4589ff;
   @include breakpoint-between('md', 'lg') {
     display: none;
   }
 }
 
 @mixin hide-at-lg {
-  padding: 2rem 1rem;
-  background: #42be65;
   @include breakpoint-between('lg', 'xlg') {
     display: none;
   }
 }
 
 @mixin hide-at-xlg {
-  padding: 2rem 1rem;
-  background: #f1c21b;
   @include breakpoint-between('xlg', 'max') {
     display: none;
   }
 }
 
 @mixin hide-at-max {
-  padding: 2rem 1rem;
-  background: #da1e28;
   @include breakpoint-up('max') {
     display: none;
   }