alexanderantaya@Alexanders-MBP blk-design-system-pro-react-v1 % npm install        
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.5.0" from [email protected]
npm ERR! node_modules/react-datetime
npm ERR!   react-datetime@"3.0.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/alexanderantaya/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alexanderantaya/.npm/_logs/2022-02-22T02_18_41_678Z-debug.log

# npm resolution error report

2022-02-22T02:18:41.674Z

While resolving: [email protected]
Found: [email protected]
node_modules/react
  react@"17.0.1" from the root project

Could not resolve dependency:
peer react@"^16.5.0" from [email protected]
node_modules/react-datetime
  react-datetime@"3.0.4" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "react",
    "version": "17.0.1",
    "whileInstalling": {
      "name": "blk-design-system-pro-react",
      "version": "1.2.0",
      "path": "/Users/alexanderantaya/Desktop/projects/crypto/blk-design-system-pro-react-v1"
    },
    "location": "node_modules/react",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "react",
        "spec": "17.0.1",
        "from": {
          "location": "/Users/alexanderantaya/Desktop/projects/crypto/blk-design-system-pro-react-v1"
        }
      }
    ]
  },
  "currentEdge": {
    "type": "prod",
    "name": "react",
    "spec": "17.0.1",
    "from": {
      "location": "/Users/alexanderantaya/Desktop/projects/crypto/blk-design-system-pro-react-v1"
    }
  },
  "edge": {
    "type": "peer",
    "name": "react",
    "spec": "^16.5.0",
    "error": "INVALID",
    "from": {
      "name": "react-datetime",
      "version": "3.0.4",
      "whileInstalling": {
        "name": "blk-design-system-pro-react",
        "version": "1.2.0",
        "path": "/Users/alexanderantaya/Desktop/projects/crypto/blk-design-system-pro-react-v1"
      },
      "location": "node_modules/react-datetime",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "prod",
          "name": "react-datetime",
          "spec": "3.0.4",
          "from": {
            "location": "/Users/alexanderantaya/Desktop/projects/crypto/blk-design-system-pro-react-v1"
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

// Image Mixins
// - Responsive image
// - Retina image


// Responsive image
//
// Keep images from scaling beyond the width of their parents.

@mixin img-fluid {
  // Part 1: Set a maximum relative to the parent
  max-width: 100%;
  // Part 2: Override the height to auto, otherwise images will be stretched
  // when setting a width and height attribute on the img element.
  height: auto;
}


// Retina image
//
// Short retina mixin for setting background-image and -size.

@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
  background-image: url($file-1x);

  // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
  // but doesn't convert dppx=>dpi.
  // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
  // Compatibility info: https://caniuse.com/#feat=css-media-resolution
  @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
    only screen and (min-resolution: 2dppx) { // Standardized
    background-image: url($file-2x);
    background-size: $width-1x $height-1x;
  }
  @include deprecate("`img-retina()`", "v4.3.0", "v5");
}

// Image Mixins
// - Responsive image
// - Retina image

// Responsive image
//
// Keep images from scaling beyond the width of their parents.

@mixin img-fluid {
	// Part 1: Set a maximum relative to the parent
	max-width: 100%;
	// Part 2: Override the height to auto, otherwise images will be stretched
	// when setting a width and height attribute on the img element.
	height: auto;
}

// Retina image
//
// Short retina mixin for setting background-image and -size.

@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
	background-image: url($file-1x);

	// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
	// but doesn't convert dppx=>dpi.
	// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
	// Compatibility info: https://caniuse.com/#feat=css-media-resolution
	@media only screen and (min-resolution: 192dpi),
		// IE9-11 don't support dppx only screen and (min-resolution: 2dppx) {
		// Standardized
		background-image: url($file-2x);
		background-size: $width-1x $height-1x;
	}
	@include deprecate('`img-retina()`', 'v4.3.0', 'v5');
}