fix(dep): include missing dep, small grid fix (#10962)

* fix(dep): include missing dep, small grid fix

* fix(grid): proper config for grid breakpoints and config

Co-authored-by: TJ Egan <tw15egan@gmail.com>

packages/react/package.json

@@ -63,7 +63,8 @@
     "prop-types": "^15.7.2",
     "react-is": "^17.0.2",
     "use-resize-observer": "^6.0.0",
-    "wicg-inert": "^3.1.1"
+    "wicg-inert": "^3.1.1",
+    "window-or-global": "^1.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.7",

packages/type/scss/modules/_styles.scss

@@ -9,7 +9,8 @@
 
 @use 'sass:map';
 @use 'sass:math';
-@use '@carbon/grid/scss/modules/config' as grid;
+@use '@carbon/grid/scss/modules/config' as gridconfig;
+@use '@carbon/grid/scss/modules/breakpoint' as grid;
 @use 'font-family';
 @use 'scale';
 
@@ -716,7 +717,7 @@ $tokens: (
 /// @param {Map} $breakpoints [$grid-breakpoints] - Custom breakpoints to use
 /// @access public
 /// @group @carbon/type
-@mixin fluid-type($type-styles, $breakpoints: grid.$grid-breakpoints) {
+@mixin fluid-type($type-styles, $breakpoints: gridconfig.$grid-breakpoints) {
   // Include the initial styles for the given token by default without any
   // media query guard. This includes `font-size` as a fallback in the case
   // that a browser does not support `calc()`
@@ -745,7 +746,7 @@ $tokens: (
 @mixin fluid-type-size(
   $type-styles,
   $name,
-  $breakpoints: grid.$grid-breakpoints
+  $breakpoints: gridconfig.$grid-breakpoints
 ) {
   // Get the information about the breakpoint we're currently working in. Useful
   // for getting initial width information
@@ -846,7 +847,11 @@ $custom-property-prefix: 'cds' !default;
 /// @param {Map} $breakpoints [$grid-breakpoints] - Provide a custom breakpoint map to use
 /// @access public
 /// @group @carbon/type
-@mixin type-style($name, $fluid: false, $breakpoints: grid.$grid-breakpoints) {
+@mixin type-style(
+  $name,
+  $fluid: false,
+  $breakpoints: gridconfig.$grid-breakpoints
+) {
   @if not map.has-key($tokens, $name) {
     @error 'Unable to find a token with the name: `#{$name}`';
   }

yarn.lock

@@ -11794,6 +11794,7 @@ __metadata:
     webpack-dev-server: ^4.6.0
     whatwg-fetch: ^3.6.2
     wicg-inert: ^3.1.1
+    window-or-global: ^1.0.1
   peerDependencies:
     carbon-components: ^10.30.0
     carbon-icons: ^7.0.7